[FEAT-1092]: Update color names and box-shadows to match Design-System (

#1143)

* feat: update colors in tailwind config

* fix: update color class-names to match new palette

* fix: update primary & secondary color class-names to match new palette

* fix: update box-shadows to match design system

* fix: update tailwind config and class-names

dashboard/components/account-details/AwsAccountDetails.tsx

@@ -103,7 +103,7 @@ function AwsAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <div>
@@ -117,7 +117,7 @@ function AwsAccountDetails({
             values={options.map(option => option.value)}
           />
           {[options[2].value, options[3].value].includes(credentialType) && (
-            <div className="mt-2 text-sm text-black-400">
+            <div className="mt-2 text-sm text-gray-700">
               {credentialType === options[3].value
                 ? 'Komiser will fetch the credentials from AWS'
                 : 'Komiser will load credentials from AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.'}
@@ -180,7 +180,7 @@ function AwsAccountDetails({
         )}
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your AWS account. Please check if the file
           is correct.
         </div>

dashboard/components/account-details/AzureAccountDetails.tsx

@@ -27,7 +27,7 @@ function AzureAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -115,7 +115,7 @@ function AzureAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Azure account. Please check if the
           file is correct.
         </div>

dashboard/components/account-details/CivoAccountDetails.tsx

@@ -27,7 +27,7 @@ function CivoAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -50,7 +50,7 @@ function CivoAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Civo account. Please check if the
           file is correct.
         </div>

dashboard/components/account-details/DigitalOceanAccountDetails.tsx

@@ -27,7 +27,7 @@ function DigitalOceanAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -49,7 +49,7 @@ function DigitalOceanAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Digital Ocean account. Please check
           if the file is correct.
         </div>

dashboard/components/account-details/GcpAccountDetails.tsx

@@ -60,7 +60,7 @@ function GcpAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <div>
@@ -83,7 +83,7 @@ function GcpAccountDetails({
         </div>
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your GCP account. Please check if the file
           is correct.
         </div>

dashboard/components/account-details/KubernetesAccountDetails.tsx

@@ -83,7 +83,7 @@ function KubernetesAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <SelectInput
@@ -113,7 +113,7 @@ function KubernetesAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Kubernetes account. Please check if
           the file is correct.
         </div>

dashboard/components/account-details/LinodeAccountDetails.tsx

@@ -26,7 +26,7 @@ function LinodeAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -40,7 +40,7 @@ function LinodeAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Linode account. Please check if the
           file is correct.
         </div>

dashboard/components/account-details/MongoDBAtlasAccountDetails.tsx

@@ -26,7 +26,7 @@ function MongoDbAtlasAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -55,7 +55,7 @@ function MongoDbAtlasAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your MongoDB Atlas account. Please check
           if the file is correct.
         </div>

dashboard/components/account-details/OciAccountDetails.tsx

@@ -60,7 +60,7 @@ function OciAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <div>
@@ -83,7 +83,7 @@ function OciAccountDetails({
         </div>
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your OCI account. Please check if the file
           is correct.
         </div>

dashboard/components/account-details/ScalewayAccountDetails.tsx

@@ -26,7 +26,7 @@ function ScalewayAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -55,7 +55,7 @@ function ScalewayAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Scaleway account. Please check if the
           file is correct.
         </div>

dashboard/components/account-details/TencentAccountDetails.tsx

@@ -26,7 +26,7 @@ function TencentAccountDetails({
       <div
         className={classNames(
           'flex flex-col space-y-8 rounded-md p-5',
-          hasError ? 'bg-error-100' : 'bg-komiser-100'
+          hasError ? 'bg-red-50' : 'bg-gray-50'
         )}
       >
         <LabelledInput
@@ -40,7 +40,7 @@ function TencentAccountDetails({
         />
       </div>
       {hasError && (
-        <div className="text-sm text-error-600">
+        <div className="text-sm text-red-500">
           We couldn&apos;t connect to your Tencent account. Please check if the
           file is correct.
         </div>

dashboard/components/banner/Banner.tsx

@@ -15,7 +15,7 @@ function Banner({ githubStars }: BannerProps) {
   return (
     <div
       className={classNames(
-        'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-primary to-secondary py-3 opacity-0',
+        'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br from-darkcyan-500 to-darkcyan-700 py-3 opacity-0',
         {
           fixed: displayBanner,
           hidden: !displayBanner
@@ -44,7 +44,7 @@ function Banner({ githubStars }: BannerProps) {
             <StarIcon
               width={16}
               height={16}
-              className="group-hover:fill-warning-600 group-hover:text-warning-600"
+              className="group-hover:fill-orange-400 group-hover:text-orange-400"
             />
             {formatNumber(githubStars)}
           </div>
@@ -53,7 +53,7 @@ function Banner({ githubStars }: BannerProps) {
 
       <button
         onClick={dismissBanner}
-        className="absolute right-8 cursor-pointer rounded-lg p-3 text-white transition-colors hover:bg-white/10 active:bg-black-900/10"
+        className="absolute right-8 cursor-pointer rounded-lg p-3 text-white transition-colors hover:bg-white/10 active:bg-gray-950"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"

dashboard/components/button/Button.tsx

@@ -58,17 +58,17 @@ function Button({
     transition ? 'transition-colors' : ''
   }`;
 
-  const primary = `${base} font-semibold bg-gradient-to-br from-primary bg-secondary hover:bg-primary active:from-secondary active:bg-secondary text-white disabled:from-primary disabled:bg-secondary disabled:opacity-50`;
+  const primary = `${base} font-semibold bg-gradient-to-br from-darkcyan-500 bg-darkcyan-700 hover:bg-darkcyan-500 active:from-darkcyan-700 active:bg-darkcyan-700 text-white disabled:from-darkcyan-500 disabled:bg-darkcyan-700 disabled:opacity-50`;
 
-  const secondary = `${base} bg-transparent text-primary border-[1.5px] border-primary hover:bg-komiser-130 active:bg-komiser-200 active:text-primary disabled:bg-transparent disabled:opacity-50`;
+  const secondary = `${base} bg-transparent text-darkcyan-500 border-[1.5px] border-darkcyan-500 hover:bg-darkcyan-100 active:bg-cyan-200 active:text-darkcyan-500 disabled:bg-transparent disabled:opacity-50`;
 
-  const ghost = `${base} bg-transparent hover:bg-black-100 active:bg-black-400/20 text-black-800  disabled:bg-transparent disabled:opacity-50`;
+  const ghost = `${base} bg-transparent hover:bg-gray-50 active:bg-gray-300 text-gray-950  disabled:bg-transparent disabled:opacity-50`;
 
-  const text = `font-semibold text-sm text-komiser-700 hover:underline active:text-black-800`;
+  const text = `font-semibold text-sm text-darkcyan-700 hover:underline active:text-gray-950`;
 
-  const dropdown = `text-sm font-medium flex items-center gap-2 justify-start p-2 bg-transparent text-black-400 hover:bg-black-150 active:bg-black-200 rounded disabled:bg-transparent disabled:opacity-50`;
+  const dropdown = `text-sm font-medium flex items-center gap-2 justify-start p-2 bg-transparent text-gray-700 hover:bg-background-ds active:bg-gray-300 rounded disabled:bg-transparent disabled:opacity-50`;
 
-  const deleteStyle = `${base} border-[1.5px] border-error-600 text-error-600 hover:bg-error-100 active:bg-error-600/20 disabled:opacity-50`;
+  const deleteStyle = `${base} border-[1.5px] border-red-500 text-red-500 hover:bg-red-50 active:bg-red-100 disabled:opacity-50`;
 
   function handleStyle() {
     let buttonStyle;

dashboard/components/card/Card.tsx

@@ -12,8 +12,8 @@ export type CardProps = {
 
 function Card({ label, value, tooltip, icon, formatter }: CardProps) {
   return (
-    <div className="relative flex w-full items-center gap-4 rounded-lg bg-white px-6 py-8 text-black-900 transition-colors">
-      <div className="rounded-lg bg-komiser-100 p-4" data-testid="icon">
+    <div className="relative flex w-full items-center gap-4 rounded-lg bg-white px-6 py-8 text-gray-950 transition-colors">
+      <div className="rounded-lg bg-gray-50 p-4" data-testid="icon">
         {icon}
       </div>
       <div className="peer flex flex-col">
@@ -23,7 +23,7 @@ function Card({ label, value, tooltip, icon, formatter }: CardProps) {
             formatter === 'currency' ? 'currency' : undefined
           )}
         </p>
-        <p className="text-sm text-black-300">{label}</p>
+        <p className="text-sm text-gray-500">{label}</p>
       </div>
       {tooltip && <Tooltip>{tooltip}</Tooltip>}
     </div>

dashboard/components/card/CardSkeleton.tsx

@@ -2,10 +2,10 @@ function CardSkeleton() {
   return (
     <div className="flex h-[7.5rem] animate-pulse items-center rounded-lg bg-white px-6 text-sm">
       <div className="flex w-full gap-6">
-        <div className="h-10 w-10 flex-shrink-0 rounded-xl bg-komiser-200/50"></div>
+        <div className="h-10 w-10 flex-shrink-0 rounded-xl bg-cyan-200"></div>
         <div className="flex w-full flex-col gap-3">
-          <div className="h-4 w-[36%] rounded-lg bg-komiser-200/50"></div>
-          <div className="h-4 w-[86%] rounded-lg bg-komiser-200/50"></div>
+          <div className="h-4 w-[36%] rounded-lg bg-cyan-200"></div>
+          <div className="h-4 w-[86%] rounded-lg bg-cyan-200"></div>
         </div>
       </div>
     </div>

dashboard/components/checkbox/Checkbox.tsx

@@ -13,7 +13,7 @@ function Checkbox({ id, checked, onChange }: CheckboxProps) {
       checked={checked}
       onChange={onChange}
       type="checkbox"
-      className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-komiser-600 checked:bg-komiser-600 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-komiser-700"
+      className="grid h-4 w-4 appearance-none place-content-center rounded border-2 border-gray-300 bg-transparent before:h-[1rem] before:w-[1rem] before:origin-bottom-left before:scale-0 before:shadow-[inset_1rem_1rem_#fff] before:content-[''] before:[clip-path:polygon(28%_38%,41%_53%,75%_24%,86%_38%,40%_78%,15%_50%)] checked:border-darkcyan-500 checked:bg-darkcyan-500 checked:before:scale-100 hover:border-gray-400 checked:hover:border-transparent checked:hover:bg-darkcyan-700"
     />
   );
 }

dashboard/components/cloud-account/components/CloudAccountDeleteContents.tsx

@@ -51,7 +51,7 @@ function CloudAccountDeleteContents({
     <>
       <div className="flex flex-col items-center gap-y-6">
         <AlertCircleIcon className="h-16 w-16" />
-        <h1 className="text-center text-xl font-semibold text-black-800">
+        <h1 className="text-center text-xl font-semibold text-gray-950">
           Are you sure you want to
           <br />
           remove this cloud account?

dashboard/components/cloud-account/components/CloudAccountItem.tsx

@@ -45,12 +45,12 @@ export default function CloudAccountItem({
     <div
       key={id}
       onClick={() => openModal(account)}
-      className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-black-170 bg-white p-6 text-black-900 transition-colors"
+      className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-gray-200 bg-white p-6 text-gray-950 transition-colors"
     >
       <Avatar avatarName={cloudProvider} size={48} />
       <div className="mr-auto">
         <p className="font-bold">{name}</p>
-        <p className="text-black-300">{platform.getLabel(cloudProvider)}</p>
+        <p className="text-gray-500">{platform.getLabel(cloudProvider)}</p>
       </div>
 
       <CloudAccountStatus status={status} />
@@ -63,11 +63,11 @@ export default function CloudAccountItem({
       {isOpen && (
         <div
           ref={optionsRef}
-          className="absolute right-0 top-0 mr-5 mt-[70px] items-center rounded-md border border-black-130 bg-white p-4 shadow-xl"
+          className="absolute right-0 top-0 mr-5 mt-[70px] items-center rounded-md border border-gray-100 bg-white p-4 shadow-right"
           style={{ zIndex: 1000 }}
         >
           <button
-            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-black-400 hover:bg-black-150"
+            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-gray-700 hover:bg-background-ds"
             onClick={() => {
               setIsOpen(false);
               setEditCloudAccount(true);
@@ -77,7 +77,7 @@ export default function CloudAccountItem({
             Edit cloud account
           </button>
           <button
-            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-error-600 hover:bg-black-150"
+            className="flex w-full rounded-md py-3 pl-3 pr-5 text-left text-sm text-red-500 hover:bg-background-ds"
             onClick={() => {
               setIsOpen(false);
               setIsDeleteModalOpen(true);

dashboard/components/cloud-account/components/CloudAccountsHeader.tsx

@@ -10,7 +10,7 @@ function CloudAccountsHeader({ isNotCustomView }: CloudAccountsHeaderProps) {
     <div className="flex min-h-[40px] items-center justify-between gap-8">
       {isNotCustomView && (
         <>
-          <p className="flex items-center gap-2 text-lg font-medium text-black-900">
+          <p className="flex items-center gap-2 text-lg font-medium text-gray-950">
             Your Cloud Accounts
           </p>
         </>

dashboard/components/cloud-account/components/CloudAccountsLayout.tsx

@@ -34,8 +34,8 @@ function CloudAccountsLayout({
           className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
               ${
                 !router.query.view
-                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
-                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+                  ? 'border-l-2 border-darkcyan-500 bg-cyan-100 text-darkcyan-500'
+                  : 'text-gray-700 transition-colors hover:bg-gray-50'
               }
             `}
         >
@@ -66,8 +66,8 @@ function CloudAccountsLayout({
                     className={`flex items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-medium
               ${
                 isActive
-                  ? 'border-l-2 border-primary bg-komiser-150 text-primary'
-                  : 'text-black-400 transition-colors hover:bg-komiser-100'
+                  ? 'border-l-2 border-darkcyan-500 bg-cyan-100 text-darkcyan-500'
+                  : 'text-gray-700 transition-colors hover:bg-gray-50'
               }
             `}
                   >