Skip to content

Commit

Permalink
feat: new tokens for box shadows (#687)
Browse files Browse the repository at this point in the history
  • Loading branch information
@krzysztofzuraw
krzysztofzuraw authored Dec 15, 2023
1 parent 18bc425 commit 7551a5b
Show file tree
Hide file tree
Showing 14 changed files with 43 additions and 43 deletions.
2 changes: 1 addition & 1 deletion src/components/BaseSelect/BaseSelect.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const listStyle = style([
sprinkles({
position: "absolute",
backgroundColor: "default1",
boxShadow: "overlay",
boxShadow: "defaultOverlay",
borderColor: "default1",
borderStyle: "solid",
borderWidth: 1,
Expand Down
12 changes: 6 additions & 6 deletions src/components/Button/Button.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
Expand All @@ -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",
},
Expand Down
28 changes: 14 additions & 14 deletions src/components/Checkbox/Checkbox.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand All @@ -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",
Expand All @@ -66,28 +66,28 @@ 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,
},
'&: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,
},
'&: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':
{
Expand Down Expand Up @@ -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,
},
Expand All @@ -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",
Expand All @@ -152,28 +152,28 @@ 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,
},
'&: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,
},
'&: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':
{
Expand Down
2 changes: 1 addition & 1 deletion src/components/Drawer/Content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dropdown/Dropdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const DropdownWithList: Story = {
<List
padding={1}
borderRadius={3}
boxShadow="overlay"
boxShadow="defaultOverlay"
backgroundColor="default1"
>
<Dropdown.Item>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const Primary: Story = {
<Modal.Content>
<Box
backgroundColor="default1"
boxShadow="modal"
boxShadow="defaultModal"
__left="50%"
__top="50%"
position="fixed"
Expand Down Expand Up @@ -59,7 +59,7 @@ export const Controlled = () => {
<Modal.Content>
<Box
backgroundColor="default1"
boxShadow="modal"
boxShadow="defaultModal"
__left="50%"
__top="50%"
position="fixed"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Popover/Popover.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const popover = sprinkles({
borderWidth: 1,
borderColor: "default1",
borderRadius: 3,
boxShadow: "interactiveDefaultHovering",
boxShadow: "defaultHovered",
backgroundColor: "default2",
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/RadioGroup/Item.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const item = recipe({
base: [
sprinkles({
position: "relative",
boxShadow: "interactiveDefaultFocused",
boxShadow: "defaultFocused",
borderColor: "default1",
cursor: "pointer",
borderWidth: 1,
Expand Down
4 changes: 2 additions & 2 deletions src/components/Switch/Switch.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { sprinkles, vars } from "~/theme";

const {
colors: { background, text },
boxShadow: { interactiveDefaultFocused },
boxShadow: { defaultFocused },
} = vars;

export const switchParent = recipe({
Expand Down Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tooltip/Tooltip.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const content = sprinkles({
borderRadius: 3,
typeSize: "bodyEmpSmall",
color: "default1",
boxShadow: "overlay",
boxShadow: "defaultOverlay",
});

export const arrow = style({
Expand Down
8 changes: 4 additions & 4 deletions src/theme/contract.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/theme/sprinkles.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down Expand Up @@ -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" },
Expand Down
8 changes: 4 additions & 4 deletions src/theme/themes/defaultDark.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
8 changes: 4 additions & 4 deletions src/theme/themes/defaultLight.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

1 comment on commit 7551a5b

@vercel
Copy link

@vercel vercel bot commented on 7551a5b Dec 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

macaw-ui-next – ./

macaw-ui-next-git-canary-saleorcommerce.vercel.app
macaw-ui-next.vercel.app
macaw-ui-next-saleorcommerce.vercel.app

Please sign in to comment.