Improves contrast of colors in dark mode.

Author: ricardoantoniocm

web/design-tokens.json

@@ -616,19 +616,19 @@
             "figmaId": "VariableID:1525:3724",
             "modes": {
               "light": "{@primitives.$color.$grape.700}",
-              "dark": "{@primitives.$color.$grape.500}"
+              "dark": "{@primitives.$color.$grape.400}"
             }
           }
         },
         "content-hover": {
           "$type": "color",
-          "$value": "{@primitives.$color.$grape.500}",
+          "$value": "{@primitives.$color.$grape.400}",
           "$description": "",
           "$variable_metadata": {
             "name": "color/primary/content-hover",
             "figmaId": "VariableID:3420:32388",
             "modes": {
-              "light": "{@primitives.$color.$grape.500}",
+              "light": "{@primitives.$color.$grape.400}",
               "dark": "{@primitives.$color.$grape.300}"
             }
           }
@@ -655,7 +655,7 @@
             "figmaId": "VariableID:3367:1056",
             "modes": {
               "light": "{@primitives.$color.$grape.500}",
-              "dark": "{@primitives.$color.$grape.600}"
+              "dark": "{@primitives.$color.$grape.400}"
             }
           }
         },
@@ -917,7 +917,7 @@
             "figmaId": "VariableID:3368:5634",
             "modes": {
               "light": "{@primitives.$color.$persimmon.500}",
-              "dark": "{@primitives.$color.$persimmon.500}"
+              "dark": "{@primitives.$color.$persimmon.400}"
             }
           }
         },
@@ -1166,7 +1166,7 @@
             "figmaId": "VariableID:3368:5635",
             "modes": {
               "light": "{@primitives.$color.$kale.500}",
-              "dark": "{@primitives.$color.$kale.500}"
+              "dark": "{@primitives.$color.$kale.400}"
             }
           }
         },
@@ -1415,7 +1415,7 @@
             "figmaId": "VariableID:3368:5637",
             "modes": {
               "light": "{@primitives.$color.$canteloupe.500}",
-              "dark": "{@primitives.$color.$canteloupe.500}"
+              "dark": "{@primitives.$color.$canteloupe.400}"
             }
           }
         },

web/libs/ui/src/tokens/tokens.scss

@@ -70,8 +70,8 @@
   --color-primary-surface-icon-raw: 212 219 251;
   --color-primary-content: var(--color-grape-700);
   --color-primary-content-raw: 76 95 169;
-  --color-primary-content-hover: var(--color-grape-500);
-  --color-primary-content-hover-raw: 97 122 218;
+  --color-primary-content-hover: var(--color-grape-400);
+  --color-primary-content-hover-raw: 109 135 241;
   --color-primary-content-subtle: var(--color-grape-500);
   --color-primary-content-subtle-raw: 97 122 218;
   --color-primary-icon: var(--color-grape-500);
@@ -613,14 +613,14 @@
   --color-primary-surface-content-subtle-raw: 153 171 245;
   --color-primary-surface-icon: var(--color-grape-100);
   --color-primary-surface-icon-raw: 212 219 251;
-  --color-primary-content: var(--color-grape-500);
-  --color-primary-content-raw: 97 122 218;
+  --color-primary-content: var(--color-grape-400);
+  --color-primary-content-raw: 109 135 241;
   --color-primary-content-hover: var(--color-grape-300);
   --color-primary-content-hover-raw: 153 171 245;
   --color-primary-content-subtle: var(--color-grape-600);
   --color-primary-content-subtle-raw: 87 108 193;
-  --color-primary-icon: var(--color-grape-600);
-  --color-primary-icon-raw: 87 108 193;
+  --color-primary-icon: var(--color-grape-400);
+  --color-primary-icon-raw: 109 135 241;
   --color-primary-background: var(--color-grape-950);
   --color-primary-background-raw: 17 22 38;
   --color-primary-emphasis: var(--color-grape-800);
@@ -656,7 +656,7 @@
   --color-negative-content: var(--color-persimmon-400);
   --color-negative-content-hover: var(--color-persimmon-300);
   --color-negative-content-subtle: var(--color-persimmon-700);
-  --color-negative-icon: var(--color-persimmon-500);
+  --color-negative-icon: var(--color-persimmon-400);
   --color-negative-background: var(--color-persimmon-950);
   --color-negative-background-raw: 38 18 13;
   --color-negative-emphasis: var(--color-persimmon-800);
@@ -683,7 +683,7 @@
   --color-positive-content: var(--color-kale-400);
   --color-positive-content-hover: var(--color-kale-300);
   --color-positive-content-subtle: var(--color-kale-700);
-  --color-positive-icon: var(--color-kale-500);
+  --color-positive-icon: var(--color-kale-400);
   --color-positive-background: var(--color-kale-950);
   --color-positive-background-raw: 18 38 37;
   --color-positive-emphasis: var(--color-kale-800);
@@ -710,7 +710,7 @@
   --color-warning-content: var(--color-canteloupe-400);
   --color-warning-content-hover: var(--color-canteloupe-300);
   --color-warning-content-subtle: var(--color-canteloupe-700);
-  --color-warning-icon: var(--color-canteloupe-500);
+  --color-warning-icon: var(--color-canteloupe-400);
   --color-warning-background: var(--color-canteloupe-950);
   --color-warning-background-raw: 51 28 20;
   --color-warning-emphasis: var(--color-canteloupe-800);