fix: improves contrast in some critical color tokens (#1753)

vtex · Jul 25, 2024 · 309d423 · 309d423
2 parents 97d3b98 + f31a655
commit 309d423
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/packages/shoreline/src/themes/sunrise/preset.ts b/packages/shoreline/src/themes/sunrise/preset.ts
@@ -197,9 +197,9 @@ export const presetSunrise: ShorelineConfig = {
         pressed: '$color-blue-12',
       },
       critical: {
-        '*': '$color-red-9',
-        hover: '$color-red-10',
-        pressed: '$color-red-11',
+        '*': '$color-red-10',
+        hover: '$color-red-11',
+        pressed: '$color-red-12',
       },
     },
     bg: {
@@ -247,14 +247,14 @@ export const presetSunrise: ShorelineConfig = {
       critical: {
         '*': '$color-red-1',
         plain: {
-          '*': 'color-mix(in srgb, $color-red-9 0%, transparent)',
-          hover: 'color-mix(in srgb, $color-red-9 5%, transparent)',
-          pressed: 'color-mix(in srgb, $color-red-9 10%, transparent)',
+          '*': 'color-mix(in srgb, $color-red-10 0%, transparent)',
+          hover: 'color-mix(in srgb, $color-red-10 5%, transparent)',
+          pressed: 'color-mix(in srgb, $color-red-10 10%, transparent)',
         },
         strong: {
-          '*': '$color-red-9',
-          hover: '$color-red-10',
-          pressed: '$color-red-11',
+          '*': '$color-red-10',
+          hover: '$color-red-11',
+          pressed: '$color-red-12',
         },
       },
     },

diff --git a/packages/shoreline/src/themes/sunrise/tokens.css b/packages/shoreline/src/themes/sunrise/tokens.css
@@ -162,9 +162,9 @@
     --fg-accent: var(--color-blue-10);
     --fg-accent-hover: var(--color-blue-11);
     --fg-accent-pressed: var(--color-blue-12);
-    --fg-critical: var(--color-red-9);
-    --fg-critical-hover: var(--color-red-10);
-    --fg-critical-pressed: var(--color-red-11);
+    --fg-critical: var(--color-red-10);
+    --fg-critical-hover: var(--color-red-11);
+    --fg-critical-pressed: var(--color-red-12);
     --bg-base: var(--color-gray-0);
     --bg-base-disabled: color-mix(
       in srgb,
@@ -233,22 +233,22 @@
     --bg-critical: var(--color-red-1);
     --bg-critical-plain: color-mix(
       in srgb,
-      var(--color-red-9) 0%,
+      var(--color-red-10) 0%,
       transparent
     );
     --bg-critical-plain-hover: color-mix(
       in srgb,
-      var(--color-red-9) 5%,
+      var(--color-red-10) 5%,
       transparent
     );
     --bg-critical-plain-pressed: color-mix(
       in srgb,
-      var(--color-red-9) 10%,
+      var(--color-red-10) 10%,
       transparent
     );
-    --bg-critical-strong: var(--color-red-9);
-    --bg-critical-strong-hover: var(--color-red-10);
-    --bg-critical-strong-pressed: var(--color-red-11);
+    --bg-critical-strong: var(--color-red-10);
+    --bg-critical-strong-hover: var(--color-red-11);
+    --bg-critical-strong-pressed: var(--color-red-12);
     --border-base: 1px solid var(--color-gray-3);
     --border-base-disabled: 1px solid var(--color-gray-6);
     --border-base-strong: 1px solid var(--color-gray-5);