feat(ui): update color

cardano-foundation · Dec 18, 2024 · 3c4556b · 3c4556b
1 parent 3805c86
commit 3c4556b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 28 deletions.
diff --git a/...mponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.scss b/...mponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.scss
@@ -57,23 +57,23 @@
       background: var(--ion-color-primary-gradient);
     }
 
-    &.green {
-      background: var(--ion-color-secondary-gradient-green);
+    &.card-theme-one {
+      background: var(--ion-color-card-theme-one);
     }
 
-    &.dark {
-      background: var(--ion-color-gradient-dark);
+    &.card-theme-two {
+      background: var(--ion-color-card-theme-two);
     }
 
-    &.brown {
-      background: var(--ion-color-gradient-brown);
+    &.card-theme-three {
+      background: var(--ion-color-card-theme-three);
     }
 
-    &.primary {
+    &.card-theme-primary {
       background: var(--ion-color-primary-gradient);
     }
 
-    &.secondary {
+    &.card-theme-secondary {
       background: var(--ion-color-secondary-gradient);
     }
   }

diff --git a/...omponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.tsx b/...omponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.tsx
@@ -7,7 +7,7 @@ import {
 } from "./IdentifierColorSelector.types";
 import "./IdentifierColorSelector.scss";
 
-const ColorClassMapping = ["green", "dark", "brown", "primary", "secondary"];
+const ColorClassMapping = ["one", "two", "three", "primary", "secondary"];
 
 const ColorConfigs = [
   IdentifierColor.Green,
@@ -42,7 +42,7 @@ const IdentifierColorSelector = ({
       {ColorConfigs.map((color) => {
         const classes = combineClassNames(
           "color",
-          ColorClassMapping[color] || ColorClassMapping[0],
+          `card-theme-${ColorClassMapping[color] || ColorClassMapping[0]}`,
           {
             selected: value === color,
           }

diff --git a/src/ui/styles/colors.scss b/src/ui/styles/colors.scss
@@ -18,58 +18,79 @@
   --ion-color-danger: #d41630;
   --ion-color-danger-rgb: 212, 24, 48;
   --ion-color-light-red: #ff7d7a;
+  --ion-color-warning: #de7513;
   --ion-color-dark-green: #377657;
   --ion-color-green: #438f68;
   --ion-color-light-green: #92ffc0;
+  --ion-color-light-green-rgb: 146, 255, 192;
+  --ion-color-alt-green: #47ff94
   --ion-color-action-blue: #0066cc;
   --ion-color-blue: #017eff;
   --ion-color-light-blue: #00a5e6;
+  --ion-color-light-blue-rgb: 0, 165, 230;
+  --ion-color-alt-blue: #0075a3;
 
-  --ion-color-warning: #de7513;
+  // Theme card colors
+  --ion-color-theme-one-color-one: #667745;
+  --ion-color-theme-one-color-two: #879e54;
+  --ion-color-theme-one-color-three: #a8c55f;
+  --ion-color-theme-one-color-four: #b9cf7c;
+
+  --ion-color-theme-two-color-one: #222222;
+  --ion-color-theme-two-color-two: #697949;
+
+  --ion-color-theme-three-color-one: #986c32;
+  --ion-color-theme-three-color-two: #4c371a;
 
+  // Gradients
   --ion-color-primary-gradient: linear-gradient(
     94.29deg,
     var(--ion-color-light-green) 20.19%,
     var(--ion-color-light-blue) 119.98%
   );
 
-  --ion-color-secondary-gradient-light: linear-gradient(
-    92deg,
-    rgba(146, 255, 192, 0.15) 28.76%,
-    rgba(0, 165, 230, 0.15) 119.14%
-  );
-
   --ion-color-primary-gradient-light: linear-gradient(
     94.29deg,
     var(--ion-color-light-green) 15%,
     var(--ion-color-light-blue) 15%
   );
 
+  --ion-color-secondary-gradient-light: linear-gradient(
+    92deg,
+    rgba(var(--ion-color-light-green-rgb), 0.15) 28.76%,
+    rgba(var(--ion-color-light-blue-rgb), 0.15) 119.14%
+  );
+
+  --ion-color-secondary-gradient: linear-gradient(91.86deg, var(--ion-color-secondary) 28.76%, var(--ion-color-primary) 119.14%);
+
   --ion-color-gradient-blue: linear-gradient(
     91.86deg,
     var(--ion-color-light-blue) 28.76%,
-    #0075a3 119.14%
+    var(--ion-color-alt-blue) 119.14%
   );
 
   --ion-color-gradient-green: linear-gradient(
     91.86deg,
     var(--ion-color-light-green) 28.76%,
-    #47ff94 119.14%
+    var(--ion-color-alt-green) 119.14%
   );
 
-  --ion-color-secondary-gradient-green: linear-gradient(
+  --ion-color-card-theme-one: linear-gradient(
     90.04deg,
-    #667745 28.46%,
-    #879e54 78.5%,
-    #a8c55f 123.53%,
-    #b9cf7c 165.71%
+    var(--ion-color-theme-one-color-one) 28.46%,
+    var(--ion-color-theme-one-color-two) 78.5%,
+    var(--ion-color-theme-one-color-three) 123.53%,
+    var(--ion-color-theme-one-color-four) 165.71%
   );
 
-  --ion-color-gradient-dark: linear-gradient(91.22deg, #222222 -5.14%, #697949 165.6%);
-  --ion-color-gradient-brown: linear-gradient(90.04deg, #986c32 28.46%, #4c371a 165.71%);
-  --ion-color-secondary-gradient: linear-gradient(91.86deg, var(--ion-color-secondary) 28.76%, var(--ion-color-primary) 119.14%);
+  --ion-color-card-theme-two: linear-gradient(
+    91.22deg, var(--ion-color-theme-two-color-one) -5.14%, var(--ion-color-theme-two-color-two) 165.6%);
+
+  --ion-color-card-theme-three: linear-gradient(
+    90.04deg, var(--ion-color-theme-three-color-one) 28.46%, var(--ion-color-theme-three-color-two) 165.71%);
 }
 
+// ion-colors classes
 .ion-color-dark-grey {
   --ion-color-base: var(--ion-color-dark-grey);
 }
@@ -102,4 +123,4 @@
 }
 .ion-color-primary-gradient {
   --ion-color-base: var(--ion-color-primary-gradient);
-}
+}