From 05fc91d0ec89c1cb84dcf640fc37c5647aa6613f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Gr=C3=A9lard?= <benoit.grelard@gmail.com>
Date: Thu, 16 Dec 2021 19:06:37 +0000
Subject: [PATCH] Box shadow mapping

---
 packages/react/checkbox/src/Checkbox.stories.tsx      | 2 +-
 packages/react/radio-group/src/RadioGroup.stories.tsx | 2 +-
 packages/react/slider/src/Slider.stories.tsx          | 2 +-
 packages/react/switch/src/Switch.stories.tsx          | 2 +-
 packages/react/toggle/src/Toggle.stories.tsx          | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react/checkbox/src/Checkbox.stories.tsx b/packages/react/checkbox/src/Checkbox.stories.tsx
index e278e63203..6c8a22a553 100644
--- a/packages/react/checkbox/src/Checkbox.stories.tsx
+++ b/packages/react/checkbox/src/Checkbox.stories.tsx
@@ -281,7 +281,7 @@ const rootClass = css({
   '&:focus': {
     outline: 'none',
     borderColor: '$red',
-    boxShadow: '0 0 0 1px $red',
+    boxShadow: '0 0 0 1px $colors$red',
   },
 
   '&[data-disabled]': {
diff --git a/packages/react/radio-group/src/RadioGroup.stories.tsx b/packages/react/radio-group/src/RadioGroup.stories.tsx
index cc98d06229..8ef1cac8df 100644
--- a/packages/react/radio-group/src/RadioGroup.stories.tsx
+++ b/packages/react/radio-group/src/RadioGroup.stories.tsx
@@ -351,7 +351,7 @@ const itemClass = css({
   '&:focus': {
     outline: 'none',
     borderColor: '$red',
-    boxShadow: '0 0 0 1px $red',
+    boxShadow: '0 0 0 1px $colors$red',
   },
 
   '&[data-disabled]': {
diff --git a/packages/react/slider/src/Slider.stories.tsx b/packages/react/slider/src/Slider.stories.tsx
index 9a58995d93..5dac789999 100644
--- a/packages/react/slider/src/Slider.stories.tsx
+++ b/packages/react/slider/src/Slider.stories.tsx
@@ -429,7 +429,7 @@ const thumbClass = css({
   backgroundColor: '$black',
   '&:focus': {
     outline: 'none',
-    boxShadow: '0 0 0 2px $red',
+    boxShadow: '0 0 0 2px $colors$red',
   },
 });
 
diff --git a/packages/react/switch/src/Switch.stories.tsx b/packages/react/switch/src/Switch.stories.tsx
index 1695b47f53..f8831515d1 100644
--- a/packages/react/switch/src/Switch.stories.tsx
+++ b/packages/react/switch/src/Switch.stories.tsx
@@ -169,7 +169,7 @@ const rootClass = css({
 
   '&:focus': {
     outline: 'none',
-    boxShadow: '0 0 0 2px $black',
+    boxShadow: '0 0 0 2px $colors$black',
   },
 
   '&[data-state="checked"]': {
diff --git a/packages/react/toggle/src/Toggle.stories.tsx b/packages/react/toggle/src/Toggle.stories.tsx
index 1da710e533..c54ffbbc40 100644
--- a/packages/react/toggle/src/Toggle.stories.tsx
+++ b/packages/react/toggle/src/Toggle.stories.tsx
@@ -61,7 +61,7 @@ const rootClass = css({
 
   '&:focus': {
     outline: 'none',
-    boxShadow: '0 0 0 2px $black',
+    boxShadow: '0 0 0 2px $colors$black',
   },
 
   '&[data-disabled]': { opacity: 0.5 },