You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.8 KiB
48 lines
2.8 KiB
import Color from "color";
|
|
import { commonColors, paletteColors } from "./color";
|
|
|
|
export const lightShadowTokens = {
|
|
none: "none",
|
|
sm: `0 1px 2px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
default: `0 4px 8px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
md: `0 8px 16px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
lg: `0 12px 24px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
xl: `0 16px 32px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
"2xl": `0 20px 40px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
"3xl": `0 24px 48px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
inner: `inset 0 2px 4px 0 ${Color(paletteColors.gray[500]).alpha(0.16)}`,
|
|
|
|
dialog: `-40px 40px 80px -8px ${Color(commonColors.black).alpha(0.24)}`,
|
|
card: `0 0 2px 0 ${Color(paletteColors.gray[500]).alpha(0.2)}, 0 12px 24px -4px ${Color(paletteColors.gray[500]).alpha(0.12)}`,
|
|
dropdown: `0 0 2px 0 ${Color(paletteColors.gray[500]).alpha(0.24)}, -20px 20px 40px -4px ${Color(paletteColors.gray[500]).alpha(0.24)}`,
|
|
|
|
primary: `0 8px 16px 0 ${Color(paletteColors.primary.default).alpha(0.24)}`,
|
|
secondary: `0 8px 16px 0 ${Color(paletteColors.secondary.default).alpha(0.24)}`,
|
|
info: `0 8px 16px 0 ${Color(paletteColors.info.default).alpha(0.24)}`,
|
|
success: `0 8px 16px 0 ${Color(paletteColors.success.default).alpha(0.24)}`,
|
|
warning: `0 8px 16px 0 ${Color(paletteColors.warning.default).alpha(0.24)}`,
|
|
error: `0 8px 16px 0 ${Color(paletteColors.error.default).alpha(0.24)}`,
|
|
};
|
|
|
|
export const darkShadowTokens = {
|
|
none: "none",
|
|
sm: `0 1px 2px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
default: `0 4px 8px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
md: `0 8px 16px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
lg: `0 12px 24px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
xl: `0 16px 32px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
"2xl": `0 20px 40px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
"3xl": `0 24px 48px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
inner: `inset 0 2px 4px 0 ${Color(commonColors.black).alpha(0.16)}`,
|
|
|
|
dialog: `-40px 40px 80px -8px ${Color(commonColors.black).alpha(0.24)}`,
|
|
card: `0 0 2px 0 ${Color(commonColors.black).alpha(0.2)}, 0 12px 24px -4px ${Color(commonColors.black).alpha(0.12)}`,
|
|
dropdown: `0 0 2px 0 ${Color(commonColors.black).alpha(0.24)}, -20px 20px 40px -4px ${Color(commonColors.black).alpha(0.24)}`,
|
|
|
|
primary: `0 8px 16px 0 ${Color(paletteColors.primary.default).alpha(0.24)}`,
|
|
secondary: `0 8px 16px 0 ${Color(paletteColors.secondary.default).alpha(0.24)}`,
|
|
info: `0 8px 16px 0 ${Color(paletteColors.info.default).alpha(0.24)}`,
|
|
success: `0 8px 16px 0 ${Color(paletteColors.success.default).alpha(0.24)}`,
|
|
warning: `0 8px 16px 0 ${Color(paletteColors.warning.default).alpha(0.24)}`,
|
|
error: `0 8px 16px 0 ${Color(paletteColors.error.default).alpha(0.24)}`,
|
|
};
|
|
|