From 7551a5b8ad5899bee4e99ba1c487fe490bf5515a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Fri, 15 Dec 2023 14:00:51 +0100
Subject: [PATCH] feat: new tokens for box shadows (#687)

---
 src/components/BaseSelect/BaseSelect.css.ts  |  2 +-
 src/components/Button/Button.css.ts          | 12 ++++-----
 src/components/Checkbox/Checkbox.css.ts      | 28 ++++++++++----------
 src/components/Drawer/Content.tsx            |  2 +-
 src/components/Dropdown/Dropdown.stories.tsx |  2 +-
 src/components/Modal/Modal.stories.tsx       |  4 +--
 src/components/Popover/Popover.css.ts        |  2 +-
 src/components/RadioGroup/Item.css.ts        |  2 +-
 src/components/Switch/Switch.css.ts          |  4 +--
 src/components/Tooltip/Tooltip.css.ts        |  2 +-
 src/theme/contract.css.ts                    |  8 +++---
 src/theme/sprinkles.css.ts                   |  2 +-
 src/theme/themes/defaultDark.ts              |  8 +++---
 src/theme/themes/defaultLight.ts             |  8 +++---
 14 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/components/BaseSelect/BaseSelect.css.ts b/src/components/BaseSelect/BaseSelect.css.ts
index 29074ccd..1f057416 100644
--- a/src/components/BaseSelect/BaseSelect.css.ts
+++ b/src/components/BaseSelect/BaseSelect.css.ts
@@ -53,7 +53,7 @@ export const listStyle = style([
   sprinkles({
     position: "absolute",
     backgroundColor: "default1",
-    boxShadow: "overlay",
+    boxShadow: "defaultOverlay",
     borderColor: "default1",
     borderStyle: "solid",
     borderWidth: 1,
diff --git a/src/components/Button/Button.css.ts b/src/components/Button/Button.css.ts
index 7bb41f08..d38a6fdd 100644
--- a/src/components/Button/Button.css.ts
+++ b/src/components/Button/Button.css.ts
@@ -31,9 +31,9 @@ export const button = recipe({
           disabled: "defaultDisabled",
         },
         boxShadow: {
-          default: "interactiveDefaultFocused",
-          hover: "interactiveDefaultHovering",
-          focusVisible: "interactiveDefaultFocused",
+          default: "defaultFocused",
+          hover: "defaultHovered",
+          focusVisible: "defaultFocused",
           active: "none",
           disabled: "none",
         },
@@ -52,9 +52,9 @@ export const button = recipe({
           disabled: "defaultDisabled",
         },
         boxShadow: {
-          default: "interactiveDefaultFocused",
-          hover: "interactiveDefaultHovering",
-          focusVisible: "interactiveDefaultFocused",
+          default: "defaultFocused",
+          hover: "defaultHovered",
+          focusVisible: "defaultFocused",
           active: "none",
           disabled: "none",
         },
diff --git a/src/components/Checkbox/Checkbox.css.ts b/src/components/Checkbox/Checkbox.css.ts
index a85c28a5..7c2023f1 100644
--- a/src/components/Checkbox/Checkbox.css.ts
+++ b/src/components/Checkbox/Checkbox.css.ts
@@ -32,10 +32,10 @@ export const defaultCheckbox = style({
       borderStyle: "solid",
       borderWidth: vars.borderWidth[1],
       borderRadius: vars.borderRadius[1],
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&[data-state="unchecked"]:hover': {
-      boxShadow: vars.boxShadow.interactiveDefaultHovering,
+      boxShadow: vars.boxShadow.defaultHovered,
       borderColor: vars.colors.border.default2,
       backgroundColor: vars.colors.background.default1Hovered,
     },
@@ -51,7 +51,7 @@ export const defaultCheckbox = style({
       backgroundColor: vars.colors.background.default1Pressed,
     },
     '&[data-state="unchecked"]:focus-visible': {
-      boxShadow: vars.boxShadow.interactiveDefaultHovering,
+      boxShadow: vars.boxShadow.defaultHovered,
       borderColor: vars.colors.border.default1,
       backgroundColor: vars.colors.background.default1Focused,
       outline: "none",
@@ -66,12 +66,12 @@ export const defaultCheckbox = style({
     },
     '&:is([data-state="checked"],[data-state="indeterminate"])': {
       backgroundColor: vars.colors.background.accent1,
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):hover': {
       backgroundColor: vars.colors.background.accent1,
       borderColor: vars.colors.border.accent1,
-      boxShadow: vars.boxShadow.interactiveDefaultHovering,
+      boxShadow: vars.boxShadow.defaultHovered,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):hover::after': {
       backgroundColor: vars.colors.background.accent1Hovered,
@@ -79,7 +79,7 @@ export const defaultCheckbox = style({
     '&:is([data-state="checked"],[data-state="indeterminate"]):active': {
       backgroundColor: vars.colors.background.accent1,
       borderColor: vars.colors.border.accent1,
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):active::after': {
       backgroundColor: vars.colors.background.accent1Pressed,
@@ -87,7 +87,7 @@ export const defaultCheckbox = style({
     '&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible': {
       backgroundColor: vars.colors.background.accent1,
       borderColor: vars.colors.border.accent1,
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible::after':
       {
@@ -117,10 +117,10 @@ export const errorCheckbox = style({
       borderStyle: "solid",
       borderWidth: vars.borderWidth[1],
       borderRadius: vars.borderRadius[1],
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&[data-state="unchecked"]:hover': {
-      boxShadow: vars.boxShadow.interactiveDefaultHovering,
+      boxShadow: vars.boxShadow.defaultHovered,
       borderColor: vars.colors.border.critical1,
       backgroundColor: vars.colors.background.critical1Hovered,
     },
@@ -136,7 +136,7 @@ export const errorCheckbox = style({
       backgroundColor: vars.colors.background.default2,
     },
     '&[data-state="unchecked"]:focus-visible': {
-      boxShadow: vars.boxShadow.interactiveDefaultHovering,
+      boxShadow: vars.boxShadow.defaultHovered,
       borderColor: vars.colors.border.critical1,
       backgroundColor: vars.colors.background.critical1Focused,
       outline: "none",
@@ -152,12 +152,12 @@ export const errorCheckbox = style({
     '&:is([data-state="checked"],[data-state="indeterminate"])': {
       backgroundColor: vars.colors.background.critical2,
       borderColor: vars.colors.border.critical1,
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):hover': {
       backgroundColor: vars.colors.background.critical2,
       borderColor: vars.colors.border.critical1,
-      boxShadow: vars.boxShadow.interactiveDefaultHovering,
+      boxShadow: vars.boxShadow.defaultHovered,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):hover::after': {
       backgroundColor: vars.colors.background.critical1Hovered,
@@ -165,7 +165,7 @@ export const errorCheckbox = style({
     '&:is([data-state="checked"],[data-state="indeterminate"]):active': {
       backgroundColor: vars.colors.background.critical1,
       borderColor: vars.colors.border.critical1,
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):active::after': {
       backgroundColor: vars.colors.background.critical1Pressed,
@@ -173,7 +173,7 @@ export const errorCheckbox = style({
     '&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible': {
       backgroundColor: vars.colors.background.critical1,
       borderColor: vars.colors.border.critical1,
-      boxShadow: vars.boxShadow.interactiveDefaultFocused,
+      boxShadow: vars.boxShadow.defaultFocused,
     },
     '&:is([data-state="checked"],[data-state="indeterminate"]):focus-visible::after':
       {
diff --git a/src/components/Drawer/Content.tsx b/src/components/Drawer/Content.tsx
index 60e40e22..176b9564 100644
--- a/src/components/Drawer/Content.tsx
+++ b/src/components/Drawer/Content.tsx
@@ -23,7 +23,7 @@ export const Content = ({ children, ...rest }: DrawerContentProps) => {
       <Dialog.Content asChild className={showContent}>
         <Box
           backgroundColor="default1"
-          boxShadow="modal"
+          boxShadow="defaultModal"
           top={0}
           left={0}
           height="100%"
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 05f99dfb..0a2ef2f6 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -48,7 +48,7 @@ export const DropdownWithList: Story = {
         <List
           padding={1}
           borderRadius={3}
-          boxShadow="overlay"
+          boxShadow="defaultOverlay"
           backgroundColor="default1"
         >
           <Dropdown.Item>
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 19e421df..2dca95e3 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -25,7 +25,7 @@ export const Primary: Story = {
       <Modal.Content>
         <Box
           backgroundColor="default1"
-          boxShadow="modal"
+          boxShadow="defaultModal"
           __left="50%"
           __top="50%"
           position="fixed"
@@ -59,7 +59,7 @@ export const Controlled = () => {
         <Modal.Content>
           <Box
             backgroundColor="default1"
-            boxShadow="modal"
+            boxShadow="defaultModal"
             __left="50%"
             __top="50%"
             position="fixed"
diff --git a/src/components/Popover/Popover.css.ts b/src/components/Popover/Popover.css.ts
index fc832cbf..b983bc84 100644
--- a/src/components/Popover/Popover.css.ts
+++ b/src/components/Popover/Popover.css.ts
@@ -6,7 +6,7 @@ export const popover = sprinkles({
   borderWidth: 1,
   borderColor: "default1",
   borderRadius: 3,
-  boxShadow: "interactiveDefaultHovering",
+  boxShadow: "defaultHovered",
   backgroundColor: "default2",
 });
 
diff --git a/src/components/RadioGroup/Item.css.ts b/src/components/RadioGroup/Item.css.ts
index d50add61..b7575e0a 100644
--- a/src/components/RadioGroup/Item.css.ts
+++ b/src/components/RadioGroup/Item.css.ts
@@ -29,7 +29,7 @@ export const item = recipe({
   base: [
     sprinkles({
       position: "relative",
-      boxShadow: "interactiveDefaultFocused",
+      boxShadow: "defaultFocused",
       borderColor: "default1",
       cursor: "pointer",
       borderWidth: 1,
diff --git a/src/components/Switch/Switch.css.ts b/src/components/Switch/Switch.css.ts
index 07d98a56..1af9bf16 100644
--- a/src/components/Switch/Switch.css.ts
+++ b/src/components/Switch/Switch.css.ts
@@ -3,7 +3,7 @@ import { sprinkles, vars } from "~/theme";
 
 const {
   colors: { background, text },
-  boxShadow: { interactiveDefaultFocused },
+  boxShadow: { defaultFocused },
 } = vars;
 
 export const switchParent = recipe({
@@ -34,7 +34,7 @@ export const switchChild = recipe({
         "&[data-state='checked']": {
           backgroundColor: background.default1,
           borderStyle: "none",
-          boxShadow: interactiveDefaultFocused,
+          boxShadow: defaultFocused,
           color: text.default1,
         },
         "&[data-state='unchecked']:hover": {
diff --git a/src/components/Tooltip/Tooltip.css.ts b/src/components/Tooltip/Tooltip.css.ts
index 6b9de27d..8a8be84e 100644
--- a/src/components/Tooltip/Tooltip.css.ts
+++ b/src/components/Tooltip/Tooltip.css.ts
@@ -10,7 +10,7 @@ export const content = sprinkles({
   borderRadius: 3,
   typeSize: "bodyEmpSmall",
   color: "default1",
-  boxShadow: "overlay",
+  boxShadow: "defaultOverlay",
 });
 
 export const arrow = style({
diff --git a/src/theme/contract.css.ts b/src/theme/contract.css.ts
index 4aeccdac..8710d298 100644
--- a/src/theme/contract.css.ts
+++ b/src/theme/contract.css.ts
@@ -230,10 +230,10 @@ export const vars = createGlobalThemeContract(
       captionSmall: null,
     },
     boxShadow: {
-      interactiveDefaultFocused: null,
-      interactiveDefaultHovering: null,
-      overlay: null,
-      modal: null,
+      defaultFocused: null,
+      defaultHovered: null,
+      defaultOverlay: null,
+      defaultModal: null,
     },
     borderWidth: {
       0: null,
diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts
index af17ec24..5dfc3888 100644
--- a/src/theme/sprinkles.css.ts
+++ b/src/theme/sprinkles.css.ts
@@ -166,7 +166,6 @@ const responsiveProperties = defineProperties({
     zIndex: ["auto", "1", "2", "3"],
     aspectRatio: ["1 / 1"],
     objectFit: ["contain", "cover", "fill", "none", "scale-down"],
-    opacity: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
     fontWeight: vars.fontWeight,
     alignSelf: ["auto", "normal", "end", "center", "start"],
     justifySelf: ["auto", "normal", "end", "center", "start"],
@@ -229,6 +228,7 @@ const stateProperties = defineProperties({
     cursor: ["pointer", "not-allowed", "auto", "grabbing", "text"],
     boxShadow: { ...vars.boxShadow, none: "none" },
     transition: { ease: "transform 0.3s", all: "all 0.3s ease-in-out" },
+    opacity: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
     textDecoration: ["none", "underline"],
     transform: [],
     fill: { ...vars.colors.background, transparent: "transparent" },
diff --git a/src/theme/themes/defaultDark.ts b/src/theme/themes/defaultDark.ts
index c109b494..2715638a 100644
--- a/src/theme/themes/defaultDark.ts
+++ b/src/theme/themes/defaultDark.ts
@@ -83,10 +83,10 @@ export const defaultDark = {
   fontWeight,
   letterSpacing,
   boxShadow: {
-    interactiveDefaultFocused: "0px 1px 1px 0px hsla(0, 0%, 0%, 0.32)",
-    interactiveDefaultHovering: "0px 2px 3px 0px hsla(0, 0%, 0%, 0.28)",
-    overlay: "0px 3px 8px 0px hsla(0, 0%, 0%, 0.24)",
-    modal: "0px 8px 16px 0px hsla(0, 0%, 0%, 0.2)",
+    defaultFocused: "0px 1px 1px 0px hsla(0, 0%, 0%, 0.32)",
+    defaultHovered: "0px 2px 3px 0px hsla(0, 0%, 0%, 0.28)",
+    defaultOverlay: "0px 3px 8px 0px hsla(0, 0%, 0%, 0.24)",
+    defaultModal: "0px 8px 16px 0px hsla(0, 0%, 0%, 0.2)",
   },
   borderWidth,
 };
diff --git a/src/theme/themes/defaultLight.ts b/src/theme/themes/defaultLight.ts
index 69595aa2..dd5d5e15 100644
--- a/src/theme/themes/defaultLight.ts
+++ b/src/theme/themes/defaultLight.ts
@@ -84,10 +84,10 @@ export const defaultLight = {
   fontWeight,
   letterSpacing,
   boxShadow: {
-    interactiveDefaultFocused: "0px 1px 1px 0px hsla(212, 44%, 13%, 0.16)",
-    interactiveDefaultHovering: "0px 2px 3px 0px hsla(211, 42%, 16%, 0.1)",
-    overlay: "0px 3px 8px 0px hsla(211, 42%, 16%, 0.08)",
-    modal: "0px 8px 16px 0px hsla(211, 42%, 16%, 0.08)",
+    defaultFocused: "0px 1px 1px 0px hsla(212, 44%, 13%, 0.16)",
+    defaultHovered: "0px 2px 3px 0px hsla(211, 42%, 16%, 0.1)",
+    defaultOverlay: "0px 3px 8px 0px hsla(211, 42%, 16%, 0.08)",
+    defaultModal: "0px 8px 16px 0px hsla(211, 42%, 16%, 0.08)",
   },
   borderWidth,
 };