@traefik-labs/faency 12.2.2 → 12.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/components/Blockquote/Blockquote.vanilla.css.cjs +1 -0
  2. package/dist/components/Blockquote/Blockquote.vanilla.css.js +1 -0
  3. package/dist/components/Button/Button.cjs +3 -3
  4. package/dist/components/Button/Button.cjs.map +1 -1
  5. package/dist/components/Button/Button.js +3 -3
  6. package/dist/components/Button/Button.js.map +1 -1
  7. package/dist/components/Button/Button.vanilla.css.cjs.map +1 -1
  8. package/dist/components/Button/Button.vanilla.css.js.map +1 -1
  9. package/dist/components/Card/Card.vanilla.css.cjs +1 -0
  10. package/dist/components/Card/Card.vanilla.css.js +1 -0
  11. package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -1
  12. package/dist/components/CodeBlock/CodeBlock.js +2 -1
  13. package/dist/components/CodeBlock/CodeBlock.js.map +1 -1
  14. package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -1
  15. package/dist/components/CodeBlock/CodeBlock.vanilla.js +2 -1
  16. package/dist/components/CodeBlock/CodeBlock.vanilla.js.map +1 -1
  17. package/dist/components/CodeBlock/prism-extend.js +24 -0
  18. package/dist/components/CodeBlock/prism-extend.js.map +1 -0
  19. package/dist/components/Input/Input.vanilla.css.cjs +0 -1
  20. package/dist/components/Input/Input.vanilla.css.js +0 -1
  21. package/dist/faency.css +87 -73
  22. package/dist/index.d.ts +93 -1
  23. package/dist/stitches.config.cjs +2 -1
  24. package/dist/stitches.config.cjs.map +1 -1
  25. package/dist/stitches.config.js +2 -1
  26. package/dist/stitches.config.js.map +1 -1
  27. package/dist/styles/cssProps.cjs +2 -1
  28. package/dist/styles/cssProps.cjs.map +1 -1
  29. package/dist/styles/cssProps.js +2 -1
  30. package/dist/styles/cssProps.js.map +1 -1
  31. package/dist/styles/themes.css.cjs.map +1 -1
  32. package/dist/styles/themes.css.js.map +1 -1
  33. package/package.json +2 -2
package/dist/stitches.config.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"stitches.config.cjs","names":[],"sources":["../stitches.config.ts"],"sourcesContent":["// @ts-nocheck\nimport type * as Stitches from '@stitches/react';\nimport { createStitches, CSS as StitchesCSS } from '@stitches/react';\nimport { Property } from '@stitches/react/types/css';\n\nimport { darkColors, lightColors } from './colors';\nimport { Theme as AccordionTheme } from './components/Accordion/Accordion.themes';\nimport { Theme as BadgeTheme } from './components/Badge/Badge.themes';\nimport { Theme as ButtonTheme } from './components/Button/Button.themes';\nimport { Theme as ButtonSwitchTheme } from './components/ButtonSwitch/ButtonSwitch.themes';\nimport { Theme as CardTheme } from './components/Card/Card.themes';\nimport { Theme as CheckboxTheme } from './components/Checkbox/Checkbox.themes';\nimport { Theme as CodeBlockTheme } from './components/CodeBlock/CodeBlock.themes';\nimport { Theme as DialogTheme } from './components/Dialog/Dialog.themes';\nimport { Theme as HeadingTheme } from './components/Heading/Heading.themes';\nimport { Theme as IconButtonTheme } from './components/IconButton/IconButton.themes';\nimport { Theme as InputTheme } from './components/Input/Input.themes';\nimport { Theme as LinkTheme } from './components/Link/Link.themes';\nimport { Theme as ListTheme } from './components/List/List.themes';\nimport { Theme as NavigationTheme } from './components/Navigation/Navigation.themes';\nimport { Theme as RadioTheme } from './components/Radio/Radio.themes';\nimport { Theme as SelectTheme } from './components/Select/Select.themes';\nimport { Theme as SidePanelTheme } from './components/SidePanel/SidePanel.themes';\nimport { Theme as SkeletonTheme } from './components/Skeleton/Skeleton.themes';\nimport { Theme as SwitchTheme } from './components/Switch/Switch.themes';\nimport { Theme as TableTheme } from './components/Table/Table.themes';\nimport { Theme as TextTheme } from './components/Text/Text.themes';\nimport { Theme as TextareaTheme } from './components/Textarea/Textarea.themes';\nimport { Theme as TooltipTheme } from './components/Tooltip/Tooltip.themes';\nimport getPrimaryColorInfo from './utils/getPrimaryColorInfo';\n\nexport type { VariantProps } from '@stitches/react';\n\n// Only colors having color variations and corresponding alpha\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\nconst defaultPrimary: PrimaryColor = 'blue';\n\nconst defaultPrimaryColor = getPrimaryColorInfo(defaultPrimary, lightColors);\n\nexport const colors: Record<string, Property.Color> = {\n ...lightColors,\n\n // Semantic colors\n primary: defaultPrimary,\n contentBg: '$00dp',\n hiContrast: '$deepBlue11',\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n};\n\nconst stitches = createStitches({\n theme: {\n colors: {\n ...colors,\n ...AccordionTheme.getLight(defaultPrimaryColor),\n ...BadgeTheme.getLight(defaultPrimaryColor),\n ...ButtonTheme.getLight(defaultPrimaryColor),\n ...ButtonSwitchTheme.getLight(defaultPrimaryColor),\n ...SwitchTheme.getLight(defaultPrimaryColor),\n ...CardTheme.getLight(defaultPrimaryColor),\n ...CheckboxTheme.getLight(defaultPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(defaultPrimaryColor),\n ...ListTheme.getLight(defaultPrimaryColor),\n ...RadioTheme.getLight(defaultPrimaryColor),\n ...InputTheme.getLight(defaultPrimaryColor),\n ...TableTheme.getLight(defaultPrimaryColor),\n ...TextTheme.getLight(defaultPrimaryColor),\n ...SelectTheme.getLight(defaultPrimaryColor),\n ...SkeletonTheme.getLight(defaultPrimaryColor),\n ...DialogTheme.getLight(defaultPrimaryColor),\n ...IconButtonTheme.getLight(defaultPrimaryColor),\n ...TooltipTheme.getLight(defaultPrimaryColor),\n ...TextareaTheme.getLight(defaultPrimaryColor),\n ...HeadingTheme.getLight(defaultPrimaryColor),\n ...SidePanelTheme.getLight(defaultPrimaryColor),\n },\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '48px',\n 8: '64px',\n 9: '80px',\n },\n sizes: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '40px',\n 8: '48px',\n 9: '64px',\n 10: '80px',\n },\n fontSizes: {\n 0: '11px',\n 1: '12px',\n 2: '13px',\n 3: '14px',\n 4: '16px',\n 5: '18px',\n 6: '20px',\n 7: '22px',\n 8: '24px',\n 9: '26px',\n 10: '28px',\n 11: '32px',\n 12: '38px',\n },\n fontWeights: { light: 300, regular: 400, medium: 500, semiBold: 600, bold: 700 },\n radii: { 1: '4px', 2: '6px', 3: '8px', 4: '12px', round: '50%', pill: '9999px' },\n zIndices: { 1: '100', 2: '200', 3: '300', 4: '400', max: '999' },\n },\n media: {\n bp1: '(min-width: 520px) and (max-width: 899px)',\n bp2: '(min-width: 900px) and (max-width: 1199px)',\n bp3: '(min-width: 1200px) and (max-width: 1799px)',\n bp4: '(min-width: 1800px)',\n motion: '(prefers-reduced-motion)',\n hover: '(any-hover: hover)',\n dark: '(prefers-color-scheme: dark)',\n light: '(prefers-color-scheme: light)',\n },\n utils: {\n p: (value: Stitches.PropertyValue<'padding'>) => ({ padding: value }),\n pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({ paddingTop: value }),\n pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({ paddingRight: value }),\n pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({ paddingBottom: value }),\n pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({ paddingLeft: value }),\n px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: Stitches.PropertyValue<'paddingTop'>) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n\n m: (value: Stitches.PropertyValue<'margin'>) => ({ margin: value }),\n mt: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value }),\n mr: (value: Stitches.PropertyValue<'marginRight'>) => ({ marginRight: value }),\n mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({ marginBottom: value }),\n ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({ marginLeft: value }),\n mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value, marginBottom: value }),\n\n ta: (value: Stitches.PropertyValue<'textAlign'>) => ({ textAlign: value }),\n\n fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({ flexDirection: value }),\n fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),\n\n ai: (value: Stitches.PropertyValue<'alignItems'>) => ({ alignItems: value }),\n ac: (value: Stitches.PropertyValue<'alignContent'>) => ({ alignContent: value }),\n jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({ justifyContent: value }),\n as: (value: Stitches.PropertyValue<'alignSelf'>) => ({ alignSelf: value }),\n fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),\n fs: (value: Stitches.PropertyValue<'flexShrink'>) => ({ flexShrink: value }),\n fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({ flexBasis: value }),\n\n bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ backgroundColor: value }),\n\n br: (value: Stitches.PropertyValue<'borderRadius'>) => ({ borderRadius: value }),\n btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({\n borderTopRightRadius: value,\n }),\n bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({\n borderBottomRightRadius: value,\n }),\n bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({\n borderBottomLeftRadius: value,\n }),\n btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({\n borderTopLeftRadius: value,\n }),\n\n bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({ boxShadow: value }),\n\n c: (value: Stitches.PropertyValue<'color'>) => ({ color: value }),\n\n lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({ lineHeight: value }),\n\n ox: (value: Stitches.PropertyValue<'overflowX'>) => ({ overflowX: value }),\n oy: (value: Stitches.PropertyValue<'overflowY'>) => ({ overflowY: value }),\n\n pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({ pointerEvents: value }),\n us: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n size: (value: Stitches.PropertyValue<'width'>) => ({ width: value, height: value }),\n\n appearance: (value: Stitches.PropertyValue<'appearance'>) => ({\n WebkitAppearance: value,\n appearance: value,\n }),\n backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({\n WebkitBackgroundClip: value,\n backgroundClip: value,\n }),\n },\n});\n\nexport type CSS<T = typeof stitches.config> = StitchesCSS<T>;\n\nexport const { styled, css, createTheme, getCssText, globalCss, keyframes, config } = stitches;\n\n// @ts-expect-error\nexport const utils = config.utils;\n\nexport const darkTheme = (primary: PrimaryColor, name = 'dark') => {\n const darkPrimaryColor = getPrimaryColorInfo(primary, darkColors);\n\n return createTheme(name, {\n colors: {\n ...darkColors,\n\n // Semantic colors\n primary: darkPrimaryColor.token,\n contentBg: '$00dp',\n hiContrast: 'white',\n loContrast: '$deepBlue2',\n divider: 'hsl(209, 29%, 19%)',\n ...AccordionTheme.getDark(darkPrimaryColor),\n ...BadgeTheme.getDark(darkPrimaryColor),\n ...ButtonTheme.getDark(darkPrimaryColor),\n ...ButtonSwitchTheme.getDark(darkPrimaryColor),\n ...IconButtonTheme.getDark(darkPrimaryColor),\n ...SwitchTheme.getDark(darkPrimaryColor),\n ...CardTheme.getDark(darkPrimaryColor),\n ...CheckboxTheme.getDark(darkPrimaryColor),\n ...CodeBlockTheme.getDark(),\n ...LinkTheme.getDark(darkPrimaryColor),\n ...ListTheme.getDark(darkPrimaryColor),\n ...RadioTheme.getDark(darkPrimaryColor),\n ...InputTheme.getDark(darkPrimaryColor),\n ...TableTheme.getDark(darkPrimaryColor),\n ...TextTheme.getDark(darkPrimaryColor),\n ...SelectTheme.getDark(darkPrimaryColor),\n ...SkeletonTheme.getDark(darkPrimaryColor),\n ...DialogTheme.getDark(darkPrimaryColor),\n ...NavigationTheme.getDark(darkPrimaryColor),\n ...TooltipTheme.getDark(darkPrimaryColor),\n ...TextareaTheme.getDark(darkPrimaryColor),\n ...HeadingTheme.getDark(darkPrimaryColor),\n ...SidePanelTheme.getDark(darkPrimaryColor),\n },\n });\n};\n\nexport const lightTheme = (primary: PrimaryColor, name = 'light') => {\n const lightPrimaryColor = getPrimaryColorInfo(primary, lightColors);\n\n return createTheme(name, {\n colors: {\n primary: lightPrimaryColor.token,\n ...AccordionTheme.getLight(lightPrimaryColor),\n ...BadgeTheme.getLight(lightPrimaryColor),\n ...ButtonTheme.getLight(lightPrimaryColor),\n ...ButtonSwitchTheme.getLight(lightPrimaryColor),\n ...IconButtonTheme.getLight(lightPrimaryColor),\n ...SwitchTheme.getLight(lightPrimaryColor),\n ...CardTheme.getLight(lightPrimaryColor),\n ...CheckboxTheme.getLight(lightPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(lightPrimaryColor),\n ...ListTheme.getLight(lightPrimaryColor),\n ...RadioTheme.getLight(lightPrimaryColor),\n ...InputTheme.getLight(lightPrimaryColor),\n ...TableTheme.getLight(lightPrimaryColor),\n ...TextTheme.getLight(lightPrimaryColor),\n ...SelectTheme.getLight(lightPrimaryColor),\n ...SkeletonTheme.getLight(lightPrimaryColor),\n ...DialogTheme.getLight(lightPrimaryColor),\n ...NavigationTheme.getLight(lightPrimaryColor),\n ...TooltipTheme.getLight(lightPrimaryColor),\n ...TextareaTheme.getLight(lightPrimaryColor),\n ...HeadingTheme.getLight(lightPrimaryColor),\n ...SidePanelTheme.getLight(lightPrimaryColor),\n },\n });\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"stitches.config.cjs","names":[],"sources":["../stitches.config.ts"],"sourcesContent":["// @ts-nocheck\nimport type * as Stitches from '@stitches/react';\nimport { createStitches, CSS as StitchesCSS } from '@stitches/react';\nimport { Property } from '@stitches/react/types/css';\n\nimport { darkColors, lightColors } from './colors';\nimport { Theme as AccordionTheme } from './components/Accordion/Accordion.themes';\nimport { Theme as BadgeTheme } from './components/Badge/Badge.themes';\nimport { Theme as ButtonTheme } from './components/Button/Button.themes';\nimport { Theme as ButtonSwitchTheme } from './components/ButtonSwitch/ButtonSwitch.themes';\nimport { Theme as CardTheme } from './components/Card/Card.themes';\nimport { Theme as CheckboxTheme } from './components/Checkbox/Checkbox.themes';\nimport { Theme as CodeBlockTheme } from './components/CodeBlock/CodeBlock.themes';\nimport { Theme as DialogTheme } from './components/Dialog/Dialog.themes';\nimport { Theme as HeadingTheme } from './components/Heading/Heading.themes';\nimport { Theme as IconButtonTheme } from './components/IconButton/IconButton.themes';\nimport { Theme as InputTheme } from './components/Input/Input.themes';\nimport { Theme as LinkTheme } from './components/Link/Link.themes';\nimport { Theme as ListTheme } from './components/List/List.themes';\nimport { Theme as NavigationTheme } from './components/Navigation/Navigation.themes';\nimport { Theme as RadioTheme } from './components/Radio/Radio.themes';\nimport { Theme as SelectTheme } from './components/Select/Select.themes';\nimport { Theme as SidePanelTheme } from './components/SidePanel/SidePanel.themes';\nimport { Theme as SkeletonTheme } from './components/Skeleton/Skeleton.themes';\nimport { Theme as SwitchTheme } from './components/Switch/Switch.themes';\nimport { Theme as TableTheme } from './components/Table/Table.themes';\nimport { Theme as TextTheme } from './components/Text/Text.themes';\nimport { Theme as TextareaTheme } from './components/Textarea/Textarea.themes';\nimport { Theme as TooltipTheme } from './components/Tooltip/Tooltip.themes';\nimport getPrimaryColorInfo from './utils/getPrimaryColorInfo';\n\nexport type { VariantProps } from '@stitches/react';\n\n// Only colors having color variations and corresponding alpha\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\nconst defaultPrimary: PrimaryColor = 'blue';\n\nconst defaultPrimaryColor = getPrimaryColorInfo(defaultPrimary, lightColors);\n\nexport const colors: Record<string, Property.Color> = {\n ...lightColors,\n\n // Semantic colors\n primary: defaultPrimary,\n contentBg: '$00dp',\n hiContrast: '$deepBlue11',\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n};\n\nconst stitches = createStitches({\n theme: {\n colors: {\n ...colors,\n ...AccordionTheme.getLight(defaultPrimaryColor),\n ...BadgeTheme.getLight(defaultPrimaryColor),\n ...ButtonTheme.getLight(defaultPrimaryColor),\n ...ButtonSwitchTheme.getLight(defaultPrimaryColor),\n ...SwitchTheme.getLight(defaultPrimaryColor),\n ...CardTheme.getLight(defaultPrimaryColor),\n ...CheckboxTheme.getLight(defaultPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(defaultPrimaryColor),\n ...ListTheme.getLight(defaultPrimaryColor),\n ...RadioTheme.getLight(defaultPrimaryColor),\n ...InputTheme.getLight(defaultPrimaryColor),\n ...TableTheme.getLight(defaultPrimaryColor),\n ...TextTheme.getLight(defaultPrimaryColor),\n ...SelectTheme.getLight(defaultPrimaryColor),\n ...SkeletonTheme.getLight(defaultPrimaryColor),\n ...DialogTheme.getLight(defaultPrimaryColor),\n ...IconButtonTheme.getLight(defaultPrimaryColor),\n ...TooltipTheme.getLight(defaultPrimaryColor),\n ...TextareaTheme.getLight(defaultPrimaryColor),\n ...HeadingTheme.getLight(defaultPrimaryColor),\n ...SidePanelTheme.getLight(defaultPrimaryColor),\n },\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '48px',\n 8: '64px',\n 9: '80px',\n },\n sizes: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '40px',\n 8: '48px',\n 9: '64px',\n 10: '80px',\n },\n fontSizes: {\n 0: '11px',\n 1: '12px',\n 2: '13px',\n 3: '14px',\n 4: '16px',\n 5: '18px',\n 6: '20px',\n 7: '22px',\n 8: '24px',\n 9: '26px',\n 10: '28px',\n 11: '32px',\n 12: '38px',\n },\n fontWeights: { light: 300, regular: 400, medium: 500, semiBold: 600, bold: 700 },\n radii: { 1: '4px', 2: '6px', 3: '8px', 4: '12px', round: '50%', pill: '9999px', button: '8px' },\n zIndices: { 1: '100', 2: '200', 3: '300', 4: '400', max: '999' },\n },\n media: {\n bp1: '(min-width: 520px) and (max-width: 899px)',\n bp2: '(min-width: 900px) and (max-width: 1199px)',\n bp3: '(min-width: 1200px) and (max-width: 1799px)',\n bp4: '(min-width: 1800px)',\n motion: '(prefers-reduced-motion)',\n hover: '(any-hover: hover)',\n dark: '(prefers-color-scheme: dark)',\n light: '(prefers-color-scheme: light)',\n },\n utils: {\n p: (value: Stitches.PropertyValue<'padding'>) => ({ padding: value }),\n pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({ paddingTop: value }),\n pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({ paddingRight: value }),\n pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({ paddingBottom: value }),\n pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({ paddingLeft: value }),\n px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: Stitches.PropertyValue<'paddingTop'>) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n\n m: (value: Stitches.PropertyValue<'margin'>) => ({ margin: value }),\n mt: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value }),\n mr: (value: Stitches.PropertyValue<'marginRight'>) => ({ marginRight: value }),\n mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({ marginBottom: value }),\n ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({ marginLeft: value }),\n mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value, marginBottom: value }),\n\n ta: (value: Stitches.PropertyValue<'textAlign'>) => ({ textAlign: value }),\n\n fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({ flexDirection: value }),\n fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),\n\n ai: (value: Stitches.PropertyValue<'alignItems'>) => ({ alignItems: value }),\n ac: (value: Stitches.PropertyValue<'alignContent'>) => ({ alignContent: value }),\n jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({ justifyContent: value }),\n as: (value: Stitches.PropertyValue<'alignSelf'>) => ({ alignSelf: value }),\n fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),\n fs: (value: Stitches.PropertyValue<'flexShrink'>) => ({ flexShrink: value }),\n fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({ flexBasis: value }),\n\n bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ backgroundColor: value }),\n\n br: (value: Stitches.PropertyValue<'borderRadius'>) => ({ borderRadius: value }),\n btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({\n borderTopRightRadius: value,\n }),\n bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({\n borderBottomRightRadius: value,\n }),\n bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({\n borderBottomLeftRadius: value,\n }),\n btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({\n borderTopLeftRadius: value,\n }),\n\n bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({ boxShadow: value }),\n\n c: (value: Stitches.PropertyValue<'color'>) => ({ color: value }),\n\n lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({ lineHeight: value }),\n\n ox: (value: Stitches.PropertyValue<'overflowX'>) => ({ overflowX: value }),\n oy: (value: Stitches.PropertyValue<'overflowY'>) => ({ overflowY: value }),\n\n pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({ pointerEvents: value }),\n us: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n size: (value: Stitches.PropertyValue<'width'>) => ({ width: value, height: value }),\n\n appearance: (value: Stitches.PropertyValue<'appearance'>) => ({\n WebkitAppearance: value,\n appearance: value,\n }),\n backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({\n WebkitBackgroundClip: value,\n backgroundClip: value,\n }),\n },\n});\n\nexport type CSS<T = typeof stitches.config> = StitchesCSS<T>;\n\nexport const { styled, css, createTheme, getCssText, globalCss, keyframes, config } = stitches;\n\n// @ts-expect-error\nexport const utils = config.utils;\n\nexport const darkTheme = (primary: PrimaryColor, name = 'dark') => {\n const darkPrimaryColor = getPrimaryColorInfo(primary, darkColors);\n\n return createTheme(name, {\n colors: {\n ...darkColors,\n\n // Semantic colors\n primary: darkPrimaryColor.token,\n contentBg: '$00dp',\n hiContrast: 'white',\n loContrast: '$deepBlue2',\n divider: 'hsl(209, 29%, 19%)',\n ...AccordionTheme.getDark(darkPrimaryColor),\n ...BadgeTheme.getDark(darkPrimaryColor),\n ...ButtonTheme.getDark(darkPrimaryColor),\n ...ButtonSwitchTheme.getDark(darkPrimaryColor),\n ...IconButtonTheme.getDark(darkPrimaryColor),\n ...SwitchTheme.getDark(darkPrimaryColor),\n ...CardTheme.getDark(darkPrimaryColor),\n ...CheckboxTheme.getDark(darkPrimaryColor),\n ...CodeBlockTheme.getDark(),\n ...LinkTheme.getDark(darkPrimaryColor),\n ...ListTheme.getDark(darkPrimaryColor),\n ...RadioTheme.getDark(darkPrimaryColor),\n ...InputTheme.getDark(darkPrimaryColor),\n ...TableTheme.getDark(darkPrimaryColor),\n ...TextTheme.getDark(darkPrimaryColor),\n ...SelectTheme.getDark(darkPrimaryColor),\n ...SkeletonTheme.getDark(darkPrimaryColor),\n ...DialogTheme.getDark(darkPrimaryColor),\n ...NavigationTheme.getDark(darkPrimaryColor),\n ...TooltipTheme.getDark(darkPrimaryColor),\n ...TextareaTheme.getDark(darkPrimaryColor),\n ...HeadingTheme.getDark(darkPrimaryColor),\n ...SidePanelTheme.getDark(darkPrimaryColor),\n },\n });\n};\n\nexport const lightTheme = (primary: PrimaryColor, name = 'light') => {\n const lightPrimaryColor = getPrimaryColorInfo(primary, lightColors);\n\n return createTheme(name, {\n colors: {\n primary: lightPrimaryColor.token,\n ...AccordionTheme.getLight(lightPrimaryColor),\n ...BadgeTheme.getLight(lightPrimaryColor),\n ...ButtonTheme.getLight(lightPrimaryColor),\n ...ButtonSwitchTheme.getLight(lightPrimaryColor),\n ...IconButtonTheme.getLight(lightPrimaryColor),\n ...SwitchTheme.getLight(lightPrimaryColor),\n ...CardTheme.getLight(lightPrimaryColor),\n ...CheckboxTheme.getLight(lightPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(lightPrimaryColor),\n ...ListTheme.getLight(lightPrimaryColor),\n ...RadioTheme.getLight(lightPrimaryColor),\n ...InputTheme.getLight(lightPrimaryColor),\n ...TableTheme.getLight(lightPrimaryColor),\n ...TextTheme.getLight(lightPrimaryColor),\n ...SelectTheme.getLight(lightPrimaryColor),\n ...SkeletonTheme.getLight(lightPrimaryColor),\n ...DialogTheme.getLight(lightPrimaryColor),\n ...NavigationTheme.getLight(lightPrimaryColor),\n ...TooltipTheme.getLight(lightPrimaryColor),\n ...TextareaTheme.getLight(lightPrimaryColor),\n ...HeadingTheme.getLight(lightPrimaryColor),\n ...SidePanelTheme.getLight(lightPrimaryColor),\n },\n });\n};\n"],"mappings":"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"}
package/dist/stitches.config.js CHANGED
@@ -112,7 +112,8 @@ var { styled, css, createTheme, getCssText, globalCss, keyframes, config } = cre
112
112
  3: "8px",
113
113
  4: "12px",
114
114
  round: "50%",
115
- pill: "9999px"
115
+ pill: "9999px",
116
+ button: "8px"
116
117
  },
117
118
  zIndices: {
118
119
  1: "100",
package/dist/stitches.config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"stitches.config.js","names":[],"sources":["../stitches.config.ts"],"sourcesContent":["// @ts-nocheck\nimport type * as Stitches from '@stitches/react';\nimport { createStitches, CSS as StitchesCSS } from '@stitches/react';\nimport { Property } from '@stitches/react/types/css';\n\nimport { darkColors, lightColors } from './colors';\nimport { Theme as AccordionTheme } from './components/Accordion/Accordion.themes';\nimport { Theme as BadgeTheme } from './components/Badge/Badge.themes';\nimport { Theme as ButtonTheme } from './components/Button/Button.themes';\nimport { Theme as ButtonSwitchTheme } from './components/ButtonSwitch/ButtonSwitch.themes';\nimport { Theme as CardTheme } from './components/Card/Card.themes';\nimport { Theme as CheckboxTheme } from './components/Checkbox/Checkbox.themes';\nimport { Theme as CodeBlockTheme } from './components/CodeBlock/CodeBlock.themes';\nimport { Theme as DialogTheme } from './components/Dialog/Dialog.themes';\nimport { Theme as HeadingTheme } from './components/Heading/Heading.themes';\nimport { Theme as IconButtonTheme } from './components/IconButton/IconButton.themes';\nimport { Theme as InputTheme } from './components/Input/Input.themes';\nimport { Theme as LinkTheme } from './components/Link/Link.themes';\nimport { Theme as ListTheme } from './components/List/List.themes';\nimport { Theme as NavigationTheme } from './components/Navigation/Navigation.themes';\nimport { Theme as RadioTheme } from './components/Radio/Radio.themes';\nimport { Theme as SelectTheme } from './components/Select/Select.themes';\nimport { Theme as SidePanelTheme } from './components/SidePanel/SidePanel.themes';\nimport { Theme as SkeletonTheme } from './components/Skeleton/Skeleton.themes';\nimport { Theme as SwitchTheme } from './components/Switch/Switch.themes';\nimport { Theme as TableTheme } from './components/Table/Table.themes';\nimport { Theme as TextTheme } from './components/Text/Text.themes';\nimport { Theme as TextareaTheme } from './components/Textarea/Textarea.themes';\nimport { Theme as TooltipTheme } from './components/Tooltip/Tooltip.themes';\nimport getPrimaryColorInfo from './utils/getPrimaryColorInfo';\n\nexport type { VariantProps } from '@stitches/react';\n\n// Only colors having color variations and corresponding alpha\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\nconst defaultPrimary: PrimaryColor = 'blue';\n\nconst defaultPrimaryColor = getPrimaryColorInfo(defaultPrimary, lightColors);\n\nexport const colors: Record<string, Property.Color> = {\n ...lightColors,\n\n // Semantic colors\n primary: defaultPrimary,\n contentBg: '$00dp',\n hiContrast: '$deepBlue11',\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n};\n\nconst stitches = createStitches({\n theme: {\n colors: {\n ...colors,\n ...AccordionTheme.getLight(defaultPrimaryColor),\n ...BadgeTheme.getLight(defaultPrimaryColor),\n ...ButtonTheme.getLight(defaultPrimaryColor),\n ...ButtonSwitchTheme.getLight(defaultPrimaryColor),\n ...SwitchTheme.getLight(defaultPrimaryColor),\n ...CardTheme.getLight(defaultPrimaryColor),\n ...CheckboxTheme.getLight(defaultPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(defaultPrimaryColor),\n ...ListTheme.getLight(defaultPrimaryColor),\n ...RadioTheme.getLight(defaultPrimaryColor),\n ...InputTheme.getLight(defaultPrimaryColor),\n ...TableTheme.getLight(defaultPrimaryColor),\n ...TextTheme.getLight(defaultPrimaryColor),\n ...SelectTheme.getLight(defaultPrimaryColor),\n ...SkeletonTheme.getLight(defaultPrimaryColor),\n ...DialogTheme.getLight(defaultPrimaryColor),\n ...IconButtonTheme.getLight(defaultPrimaryColor),\n ...TooltipTheme.getLight(defaultPrimaryColor),\n ...TextareaTheme.getLight(defaultPrimaryColor),\n ...HeadingTheme.getLight(defaultPrimaryColor),\n ...SidePanelTheme.getLight(defaultPrimaryColor),\n },\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '48px',\n 8: '64px',\n 9: '80px',\n },\n sizes: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '40px',\n 8: '48px',\n 9: '64px',\n 10: '80px',\n },\n fontSizes: {\n 0: '11px',\n 1: '12px',\n 2: '13px',\n 3: '14px',\n 4: '16px',\n 5: '18px',\n 6: '20px',\n 7: '22px',\n 8: '24px',\n 9: '26px',\n 10: '28px',\n 11: '32px',\n 12: '38px',\n },\n fontWeights: { light: 300, regular: 400, medium: 500, semiBold: 600, bold: 700 },\n radii: { 1: '4px', 2: '6px', 3: '8px', 4: '12px', round: '50%', pill: '9999px' },\n zIndices: { 1: '100', 2: '200', 3: '300', 4: '400', max: '999' },\n },\n media: {\n bp1: '(min-width: 520px) and (max-width: 899px)',\n bp2: '(min-width: 900px) and (max-width: 1199px)',\n bp3: '(min-width: 1200px) and (max-width: 1799px)',\n bp4: '(min-width: 1800px)',\n motion: '(prefers-reduced-motion)',\n hover: '(any-hover: hover)',\n dark: '(prefers-color-scheme: dark)',\n light: '(prefers-color-scheme: light)',\n },\n utils: {\n p: (value: Stitches.PropertyValue<'padding'>) => ({ padding: value }),\n pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({ paddingTop: value }),\n pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({ paddingRight: value }),\n pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({ paddingBottom: value }),\n pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({ paddingLeft: value }),\n px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: Stitches.PropertyValue<'paddingTop'>) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n\n m: (value: Stitches.PropertyValue<'margin'>) => ({ margin: value }),\n mt: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value }),\n mr: (value: Stitches.PropertyValue<'marginRight'>) => ({ marginRight: value }),\n mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({ marginBottom: value }),\n ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({ marginLeft: value }),\n mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value, marginBottom: value }),\n\n ta: (value: Stitches.PropertyValue<'textAlign'>) => ({ textAlign: value }),\n\n fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({ flexDirection: value }),\n fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),\n\n ai: (value: Stitches.PropertyValue<'alignItems'>) => ({ alignItems: value }),\n ac: (value: Stitches.PropertyValue<'alignContent'>) => ({ alignContent: value }),\n jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({ justifyContent: value }),\n as: (value: Stitches.PropertyValue<'alignSelf'>) => ({ alignSelf: value }),\n fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),\n fs: (value: Stitches.PropertyValue<'flexShrink'>) => ({ flexShrink: value }),\n fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({ flexBasis: value }),\n\n bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ backgroundColor: value }),\n\n br: (value: Stitches.PropertyValue<'borderRadius'>) => ({ borderRadius: value }),\n btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({\n borderTopRightRadius: value,\n }),\n bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({\n borderBottomRightRadius: value,\n }),\n bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({\n borderBottomLeftRadius: value,\n }),\n btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({\n borderTopLeftRadius: value,\n }),\n\n bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({ boxShadow: value }),\n\n c: (value: Stitches.PropertyValue<'color'>) => ({ color: value }),\n\n lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({ lineHeight: value }),\n\n ox: (value: Stitches.PropertyValue<'overflowX'>) => ({ overflowX: value }),\n oy: (value: Stitches.PropertyValue<'overflowY'>) => ({ overflowY: value }),\n\n pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({ pointerEvents: value }),\n us: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n size: (value: Stitches.PropertyValue<'width'>) => ({ width: value, height: value }),\n\n appearance: (value: Stitches.PropertyValue<'appearance'>) => ({\n WebkitAppearance: value,\n appearance: value,\n }),\n backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({\n WebkitBackgroundClip: value,\n backgroundClip: value,\n }),\n },\n});\n\nexport type CSS<T = typeof stitches.config> = StitchesCSS<T>;\n\nexport const { styled, css, createTheme, getCssText, globalCss, keyframes, config } = stitches;\n\n// @ts-expect-error\nexport const utils = config.utils;\n\nexport const darkTheme = (primary: PrimaryColor, name = 'dark') => {\n const darkPrimaryColor = getPrimaryColorInfo(primary, darkColors);\n\n return createTheme(name, {\n colors: {\n ...darkColors,\n\n // Semantic colors\n primary: darkPrimaryColor.token,\n contentBg: '$00dp',\n hiContrast: 'white',\n loContrast: '$deepBlue2',\n divider: 'hsl(209, 29%, 19%)',\n ...AccordionTheme.getDark(darkPrimaryColor),\n ...BadgeTheme.getDark(darkPrimaryColor),\n ...ButtonTheme.getDark(darkPrimaryColor),\n ...ButtonSwitchTheme.getDark(darkPrimaryColor),\n ...IconButtonTheme.getDark(darkPrimaryColor),\n ...SwitchTheme.getDark(darkPrimaryColor),\n ...CardTheme.getDark(darkPrimaryColor),\n ...CheckboxTheme.getDark(darkPrimaryColor),\n ...CodeBlockTheme.getDark(),\n ...LinkTheme.getDark(darkPrimaryColor),\n ...ListTheme.getDark(darkPrimaryColor),\n ...RadioTheme.getDark(darkPrimaryColor),\n ...InputTheme.getDark(darkPrimaryColor),\n ...TableTheme.getDark(darkPrimaryColor),\n ...TextTheme.getDark(darkPrimaryColor),\n ...SelectTheme.getDark(darkPrimaryColor),\n ...SkeletonTheme.getDark(darkPrimaryColor),\n ...DialogTheme.getDark(darkPrimaryColor),\n ...NavigationTheme.getDark(darkPrimaryColor),\n ...TooltipTheme.getDark(darkPrimaryColor),\n ...TextareaTheme.getDark(darkPrimaryColor),\n ...HeadingTheme.getDark(darkPrimaryColor),\n ...SidePanelTheme.getDark(darkPrimaryColor),\n },\n });\n};\n\nexport const lightTheme = (primary: PrimaryColor, name = 'light') => {\n const lightPrimaryColor = getPrimaryColorInfo(primary, lightColors);\n\n return createTheme(name, {\n colors: {\n primary: lightPrimaryColor.token,\n ...AccordionTheme.getLight(lightPrimaryColor),\n ...BadgeTheme.getLight(lightPrimaryColor),\n ...ButtonTheme.getLight(lightPrimaryColor),\n ...ButtonSwitchTheme.getLight(lightPrimaryColor),\n ...IconButtonTheme.getLight(lightPrimaryColor),\n ...SwitchTheme.getLight(lightPrimaryColor),\n ...CardTheme.getLight(lightPrimaryColor),\n ...CheckboxTheme.getLight(lightPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(lightPrimaryColor),\n ...ListTheme.getLight(lightPrimaryColor),\n ...RadioTheme.getLight(lightPrimaryColor),\n ...InputTheme.getLight(lightPrimaryColor),\n ...TableTheme.getLight(lightPrimaryColor),\n ...TextTheme.getLight(lightPrimaryColor),\n ...SelectTheme.getLight(lightPrimaryColor),\n ...SkeletonTheme.getLight(lightPrimaryColor),\n ...DialogTheme.getLight(lightPrimaryColor),\n ...NavigationTheme.getLight(lightPrimaryColor),\n ...TooltipTheme.getLight(lightPrimaryColor),\n ...TextareaTheme.getLight(lightPrimaryColor),\n ...HeadingTheme.getLight(lightPrimaryColor),\n ...SidePanelTheme.getLight(lightPrimaryColor),\n },\n });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,iBAA+B;AAErC,IAAM,sBAAsB,oBAAoB,gBAAgB,YAAY;AA2L5E,IAAa,EAAE,QAAQ,KAAK,aAAa,YAAY,WAAW,WAAW,WA7K1D,eAAe;CAC9B,OAAO;EACL,QAAQ;GAbV,GAAG;GAGH,SAAS;GACT,WAAW;GACX,YAAY;GACZ,YAAY;GACZ,cAAc;GACd,SAAS;GAOL,GAAG,MAAe,SAAS,oBAAoB;GAC/C,GAAG,QAAW,SAAS,oBAAoB;GAC3C,GAAG,QAAY,SAAS,oBAAoB;GAC5C,GAAG,QAAkB,SAAS,oBAAoB;GAClD,GAAG,SAAY,SAAS,oBAAoB;GAC5C,GAAG,QAAU,SAAS,oBAAoB;GAC1C,GAAG,QAAc,SAAS,oBAAoB;GAC9C,GAAG,QAAe,UAAU;GAC5B,GAAG,SAAU,SAAS,oBAAoB;GAC1C,GAAG,SAAU,SAAS,oBAAoB;GAC1C,GAAG,SAAW,SAAS,oBAAoB;GAC3C,GAAG,SAAW,SAAS,oBAAoB;GAC3C,GAAG,SAAW,SAAS,oBAAoB;GAC3C,GAAG,SAAU,SAAS,oBAAoB;GAC1C,GAAG,SAAY,SAAS,oBAAoB;GAC5C,GAAG,SAAc,SAAS,oBAAoB;GAC9C,GAAG,QAAY,SAAS,oBAAoB;GAC5C,GAAG,QAAgB,SAAS,oBAAoB;GAChD,GAAG,SAAa,SAAS,oBAAoB;GAC7C,GAAG,SAAc,SAAS,oBAAoB;GAC9C,GAAG,QAAa,SAAS,oBAAoB;GAC7C,GAAG,SAAe,SAAS,oBAAoB;GAChD;EACD,OAAO,EACL,OACE,mGACH;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACJ;EACD,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,IAAI;GACL;EACD,WAAW;GACT,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,aAAa;GAAE,OAAO;GAAK,SAAS;GAAK,QAAQ;GAAK,UAAU;GAAK,MAAM;GAAK;EAChF,OAAO;GAAE,GAAG;GAAO,GAAG;GAAO,GAAG;GAAO,GAAG;GAAQ,OAAO;GAAO,MAAM;GAAU;EAChF,UAAU;GAAE,GAAG;GAAO,GAAG;GAAO,GAAG;GAAO,GAAG;GAAO,KAAK;GAAO;EACjE;CACD,OAAO;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,QAAQ;EACR,OAAO;EACP,MAAM;EACN,OAAO;EACR;CACD,OAAO;EACL,IAAI,WAA8C,EAAE,SAAS,OAAO;EACpE,KAAK,WAAiD,EAAE,YAAY,OAAO;EAC3E,KAAK,WAAmD,EAAE,cAAc,OAAO;EAC/E,KAAK,WAAoD,EAAE,eAAe,OAAO;EACjF,KAAK,WAAkD,EAAE,aAAa,OAAO;EAC7E,KAAK,WAAkD;GACrD,aAAa;GACb,cAAc;GACf;EACD,KAAK,WAAiD;GACpD,YAAY;GACZ,eAAe;GAChB;EAED,IAAI,WAA6C,EAAE,QAAQ,OAAO;EAClE,KAAK,WAAgD,EAAE,WAAW,OAAO;EACzE,KAAK,WAAkD,EAAE,aAAa,OAAO;EAC7E,KAAK,WAAmD,EAAE,cAAc,OAAO;EAC/E,KAAK,WAAiD,EAAE,YAAY,OAAO;EAC3E,KAAK,WAAiD;GACpD,YAAY;GACZ,aAAa;GACd;EACD,KAAK,WAAgD;GAAE,WAAW;GAAO,cAAc;GAAO;EAE9F,KAAK,WAAgD,EAAE,WAAW,OAAO;EAEzE,KAAK,WAAoD,EAAE,eAAe,OAAO;EACjF,KAAK,WAA+C,EAAE,UAAU,OAAO;EAEvE,KAAK,WAAiD,EAAE,YAAY,OAAO;EAC3E,KAAK,WAAmD,EAAE,cAAc,OAAO;EAC/E,KAAK,WAAqD,EAAE,gBAAgB,OAAO;EACnF,KAAK,WAAgD,EAAE,WAAW,OAAO;EACzE,KAAK,WAA+C,EAAE,UAAU,OAAO;EACvE,KAAK,WAAiD,EAAE,YAAY,OAAO;EAC3E,KAAK,WAAgD,EAAE,WAAW,OAAO;EAEzE,KAAK,WAAsD,EAAE,iBAAiB,OAAO;EAErF,KAAK,WAAmD,EAAE,cAAc,OAAO;EAC/E,OAAO,WAA2D,EAChE,sBAAsB,OACvB;EACD,OAAO,WAA8D,EACnE,yBAAyB,OAC1B;EACD,OAAO,WAA6D,EAClE,wBAAwB,OACzB;EACD,OAAO,WAA0D,EAC/D,qBAAqB,OACtB;EAED,KAAK,WAAgD,EAAE,WAAW,OAAO;EAEzE,IAAI,WAA4C,EAAE,OAAO,OAAO;EAEhE,KAAK,WAAiD,EAAE,YAAY,OAAO;EAE3E,KAAK,WAAgD,EAAE,WAAW,OAAO;EACzE,KAAK,WAAgD,EAAE,WAAW,OAAO;EAEzE,KAAK,WAAoD,EAAE,eAAe,OAAO;EACjF,KAAK,WAAiD;GACpD,kBAAkB;GAClB,YAAY;GACb;EAED,aAAa,WAAiD;GAC5D,kBAAkB;GAClB,YAAY;GACb;EAED,OAAO,WAA4C;GAAE,OAAO;GAAO,QAAQ;GAAO;EAElF,aAAa,WAAiD;GAC5D,kBAAkB;GAClB,YAAY;GACb;EACD,iBAAiB,WAAqD;GACpE,sBAAsB;GACtB,gBAAgB;GACjB;EACF;CACF,CAAC;AAOmB,OAAO;AAE5B,IAAa,aAAa,SAAuB,OAAO,WAAW;CACjE,MAAM,mBAAmB,oBAAoB,SAAS,WAAW;AAEjE,QAAO,YAAY,MAAM,EACvB,QAAQ;EACN,GAAG;EAGH,SAAS,iBAAiB;EAC1B,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,GAAG,MAAe,QAAQ,iBAAiB;EAC3C,GAAG,QAAW,QAAQ,iBAAiB;EACvC,GAAG,QAAY,QAAQ,iBAAiB;EACxC,GAAG,QAAkB,QAAQ,iBAAiB;EAC9C,GAAG,QAAgB,QAAQ,iBAAiB;EAC5C,GAAG,SAAY,QAAQ,iBAAiB;EACxC,GAAG,QAAU,QAAQ,iBAAiB;EACtC,GAAG,QAAc,QAAQ,iBAAiB;EAC1C,GAAG,QAAe,SAAS;EAC3B,GAAG,SAAU,QAAQ,iBAAiB;EACtC,GAAG,SAAU,QAAQ,iBAAiB;EACtC,GAAG,SAAW,QAAQ,iBAAiB;EACvC,GAAG,SAAW,QAAQ,iBAAiB;EACvC,GAAG,SAAW,QAAQ,iBAAiB;EACvC,GAAG,SAAU,QAAQ,iBAAiB;EACtC,GAAG,SAAY,QAAQ,iBAAiB;EACxC,GAAG,SAAc,QAAQ,iBAAiB;EAC1C,GAAG,QAAY,QAAQ,iBAAiB;EACxC,GAAG,SAAgB,QAAQ,iBAAiB;EAC5C,GAAG,SAAa,QAAQ,iBAAiB;EACzC,GAAG,SAAc,QAAQ,iBAAiB;EAC1C,GAAG,QAAa,QAAQ,iBAAiB;EACzC,GAAG,SAAe,QAAQ,iBAAiB;EAC5C,EACF,CAAC;;AAGJ,IAAa,cAAc,SAAuB,OAAO,YAAY;CACnE,MAAM,oBAAoB,oBAAoB,SAAS,YAAY;AAEnE,QAAO,YAAY,MAAM,EACvB,QAAQ;EACN,SAAS,kBAAkB;EAC3B,GAAG,MAAe,SAAS,kBAAkB;EAC7C,GAAG,QAAW,SAAS,kBAAkB;EACzC,GAAG,QAAY,SAAS,kBAAkB;EAC1C,GAAG,QAAkB,SAAS,kBAAkB;EAChD,GAAG,QAAgB,SAAS,kBAAkB;EAC9C,GAAG,SAAY,SAAS,kBAAkB;EAC1C,GAAG,QAAU,SAAS,kBAAkB;EACxC,GAAG,QAAc,SAAS,kBAAkB;EAC5C,GAAG,QAAe,UAAU;EAC5B,GAAG,SAAU,SAAS,kBAAkB;EACxC,GAAG,SAAU,SAAS,kBAAkB;EACxC,GAAG,SAAW,SAAS,kBAAkB;EACzC,GAAG,SAAW,SAAS,kBAAkB;EACzC,GAAG,SAAW,SAAS,kBAAkB;EACzC,GAAG,SAAU,SAAS,kBAAkB;EACxC,GAAG,SAAY,SAAS,kBAAkB;EAC1C,GAAG,SAAc,SAAS,kBAAkB;EAC5C,GAAG,QAAY,SAAS,kBAAkB;EAC1C,GAAG,SAAgB,SAAS,kBAAkB;EAC9C,GAAG,SAAa,SAAS,kBAAkB;EAC3C,GAAG,SAAc,SAAS,kBAAkB;EAC5C,GAAG,QAAa,SAAS,kBAAkB;EAC3C,GAAG,SAAe,SAAS,kBAAkB;EAC9C,EACF,CAAC"}
1
+ {"version":3,"file":"stitches.config.js","names":[],"sources":["../stitches.config.ts"],"sourcesContent":["// @ts-nocheck\nimport type * as Stitches from '@stitches/react';\nimport { createStitches, CSS as StitchesCSS } from '@stitches/react';\nimport { Property } from '@stitches/react/types/css';\n\nimport { darkColors, lightColors } from './colors';\nimport { Theme as AccordionTheme } from './components/Accordion/Accordion.themes';\nimport { Theme as BadgeTheme } from './components/Badge/Badge.themes';\nimport { Theme as ButtonTheme } from './components/Button/Button.themes';\nimport { Theme as ButtonSwitchTheme } from './components/ButtonSwitch/ButtonSwitch.themes';\nimport { Theme as CardTheme } from './components/Card/Card.themes';\nimport { Theme as CheckboxTheme } from './components/Checkbox/Checkbox.themes';\nimport { Theme as CodeBlockTheme } from './components/CodeBlock/CodeBlock.themes';\nimport { Theme as DialogTheme } from './components/Dialog/Dialog.themes';\nimport { Theme as HeadingTheme } from './components/Heading/Heading.themes';\nimport { Theme as IconButtonTheme } from './components/IconButton/IconButton.themes';\nimport { Theme as InputTheme } from './components/Input/Input.themes';\nimport { Theme as LinkTheme } from './components/Link/Link.themes';\nimport { Theme as ListTheme } from './components/List/List.themes';\nimport { Theme as NavigationTheme } from './components/Navigation/Navigation.themes';\nimport { Theme as RadioTheme } from './components/Radio/Radio.themes';\nimport { Theme as SelectTheme } from './components/Select/Select.themes';\nimport { Theme as SidePanelTheme } from './components/SidePanel/SidePanel.themes';\nimport { Theme as SkeletonTheme } from './components/Skeleton/Skeleton.themes';\nimport { Theme as SwitchTheme } from './components/Switch/Switch.themes';\nimport { Theme as TableTheme } from './components/Table/Table.themes';\nimport { Theme as TextTheme } from './components/Text/Text.themes';\nimport { Theme as TextareaTheme } from './components/Textarea/Textarea.themes';\nimport { Theme as TooltipTheme } from './components/Tooltip/Tooltip.themes';\nimport getPrimaryColorInfo from './utils/getPrimaryColorInfo';\n\nexport type { VariantProps } from '@stitches/react';\n\n// Only colors having color variations and corresponding alpha\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\nconst defaultPrimary: PrimaryColor = 'blue';\n\nconst defaultPrimaryColor = getPrimaryColorInfo(defaultPrimary, lightColors);\n\nexport const colors: Record<string, Property.Color> = {\n ...lightColors,\n\n // Semantic colors\n primary: defaultPrimary,\n contentBg: '$00dp',\n hiContrast: '$deepBlue11',\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n};\n\nconst stitches = createStitches({\n theme: {\n colors: {\n ...colors,\n ...AccordionTheme.getLight(defaultPrimaryColor),\n ...BadgeTheme.getLight(defaultPrimaryColor),\n ...ButtonTheme.getLight(defaultPrimaryColor),\n ...ButtonSwitchTheme.getLight(defaultPrimaryColor),\n ...SwitchTheme.getLight(defaultPrimaryColor),\n ...CardTheme.getLight(defaultPrimaryColor),\n ...CheckboxTheme.getLight(defaultPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(defaultPrimaryColor),\n ...ListTheme.getLight(defaultPrimaryColor),\n ...RadioTheme.getLight(defaultPrimaryColor),\n ...InputTheme.getLight(defaultPrimaryColor),\n ...TableTheme.getLight(defaultPrimaryColor),\n ...TextTheme.getLight(defaultPrimaryColor),\n ...SelectTheme.getLight(defaultPrimaryColor),\n ...SkeletonTheme.getLight(defaultPrimaryColor),\n ...DialogTheme.getLight(defaultPrimaryColor),\n ...IconButtonTheme.getLight(defaultPrimaryColor),\n ...TooltipTheme.getLight(defaultPrimaryColor),\n ...TextareaTheme.getLight(defaultPrimaryColor),\n ...HeadingTheme.getLight(defaultPrimaryColor),\n ...SidePanelTheme.getLight(defaultPrimaryColor),\n },\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '48px',\n 8: '64px',\n 9: '80px',\n },\n sizes: {\n 1: '4px',\n 2: '8px',\n 3: '16px',\n 4: '20px',\n 5: '24px',\n 6: '32px',\n 7: '40px',\n 8: '48px',\n 9: '64px',\n 10: '80px',\n },\n fontSizes: {\n 0: '11px',\n 1: '12px',\n 2: '13px',\n 3: '14px',\n 4: '16px',\n 5: '18px',\n 6: '20px',\n 7: '22px',\n 8: '24px',\n 9: '26px',\n 10: '28px',\n 11: '32px',\n 12: '38px',\n },\n fontWeights: { light: 300, regular: 400, medium: 500, semiBold: 600, bold: 700 },\n radii: { 1: '4px', 2: '6px', 3: '8px', 4: '12px', round: '50%', pill: '9999px', button: '8px' },\n zIndices: { 1: '100', 2: '200', 3: '300', 4: '400', max: '999' },\n },\n media: {\n bp1: '(min-width: 520px) and (max-width: 899px)',\n bp2: '(min-width: 900px) and (max-width: 1199px)',\n bp3: '(min-width: 1200px) and (max-width: 1799px)',\n bp4: '(min-width: 1800px)',\n motion: '(prefers-reduced-motion)',\n hover: '(any-hover: hover)',\n dark: '(prefers-color-scheme: dark)',\n light: '(prefers-color-scheme: light)',\n },\n utils: {\n p: (value: Stitches.PropertyValue<'padding'>) => ({ padding: value }),\n pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({ paddingTop: value }),\n pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({ paddingRight: value }),\n pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({ paddingBottom: value }),\n pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({ paddingLeft: value }),\n px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: Stitches.PropertyValue<'paddingTop'>) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n\n m: (value: Stitches.PropertyValue<'margin'>) => ({ margin: value }),\n mt: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value }),\n mr: (value: Stitches.PropertyValue<'marginRight'>) => ({ marginRight: value }),\n mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({ marginBottom: value }),\n ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({ marginLeft: value }),\n mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: Stitches.PropertyValue<'marginTop'>) => ({ marginTop: value, marginBottom: value }),\n\n ta: (value: Stitches.PropertyValue<'textAlign'>) => ({ textAlign: value }),\n\n fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({ flexDirection: value }),\n fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),\n\n ai: (value: Stitches.PropertyValue<'alignItems'>) => ({ alignItems: value }),\n ac: (value: Stitches.PropertyValue<'alignContent'>) => ({ alignContent: value }),\n jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({ justifyContent: value }),\n as: (value: Stitches.PropertyValue<'alignSelf'>) => ({ alignSelf: value }),\n fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),\n fs: (value: Stitches.PropertyValue<'flexShrink'>) => ({ flexShrink: value }),\n fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({ flexBasis: value }),\n\n bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ backgroundColor: value }),\n\n br: (value: Stitches.PropertyValue<'borderRadius'>) => ({ borderRadius: value }),\n btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({\n borderTopRightRadius: value,\n }),\n bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({\n borderBottomRightRadius: value,\n }),\n bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({\n borderBottomLeftRadius: value,\n }),\n btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({\n borderTopLeftRadius: value,\n }),\n\n bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({ boxShadow: value }),\n\n c: (value: Stitches.PropertyValue<'color'>) => ({ color: value }),\n\n lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({ lineHeight: value }),\n\n ox: (value: Stitches.PropertyValue<'overflowX'>) => ({ overflowX: value }),\n oy: (value: Stitches.PropertyValue<'overflowY'>) => ({ overflowY: value }),\n\n pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({ pointerEvents: value }),\n us: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({\n WebkitUserSelect: value,\n userSelect: value,\n }),\n\n size: (value: Stitches.PropertyValue<'width'>) => ({ width: value, height: value }),\n\n appearance: (value: Stitches.PropertyValue<'appearance'>) => ({\n WebkitAppearance: value,\n appearance: value,\n }),\n backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({\n WebkitBackgroundClip: value,\n backgroundClip: value,\n }),\n },\n});\n\nexport type CSS<T = typeof stitches.config> = StitchesCSS<T>;\n\nexport const { styled, css, createTheme, getCssText, globalCss, keyframes, config } = stitches;\n\n// @ts-expect-error\nexport const utils = config.utils;\n\nexport const darkTheme = (primary: PrimaryColor, name = 'dark') => {\n const darkPrimaryColor = getPrimaryColorInfo(primary, darkColors);\n\n return createTheme(name, {\n colors: {\n ...darkColors,\n\n // Semantic colors\n primary: darkPrimaryColor.token,\n contentBg: '$00dp',\n hiContrast: 'white',\n loContrast: '$deepBlue2',\n divider: 'hsl(209, 29%, 19%)',\n ...AccordionTheme.getDark(darkPrimaryColor),\n ...BadgeTheme.getDark(darkPrimaryColor),\n ...ButtonTheme.getDark(darkPrimaryColor),\n ...ButtonSwitchTheme.getDark(darkPrimaryColor),\n ...IconButtonTheme.getDark(darkPrimaryColor),\n ...SwitchTheme.getDark(darkPrimaryColor),\n ...CardTheme.getDark(darkPrimaryColor),\n ...CheckboxTheme.getDark(darkPrimaryColor),\n ...CodeBlockTheme.getDark(),\n ...LinkTheme.getDark(darkPrimaryColor),\n ...ListTheme.getDark(darkPrimaryColor),\n ...RadioTheme.getDark(darkPrimaryColor),\n ...InputTheme.getDark(darkPrimaryColor),\n ...TableTheme.getDark(darkPrimaryColor),\n ...TextTheme.getDark(darkPrimaryColor),\n ...SelectTheme.getDark(darkPrimaryColor),\n ...SkeletonTheme.getDark(darkPrimaryColor),\n ...DialogTheme.getDark(darkPrimaryColor),\n ...NavigationTheme.getDark(darkPrimaryColor),\n ...TooltipTheme.getDark(darkPrimaryColor),\n ...TextareaTheme.getDark(darkPrimaryColor),\n ...HeadingTheme.getDark(darkPrimaryColor),\n ...SidePanelTheme.getDark(darkPrimaryColor),\n },\n });\n};\n\nexport const lightTheme = (primary: PrimaryColor, name = 'light') => {\n const lightPrimaryColor = getPrimaryColorInfo(primary, lightColors);\n\n return createTheme(name, {\n colors: {\n primary: lightPrimaryColor.token,\n ...AccordionTheme.getLight(lightPrimaryColor),\n ...BadgeTheme.getLight(lightPrimaryColor),\n ...ButtonTheme.getLight(lightPrimaryColor),\n ...ButtonSwitchTheme.getLight(lightPrimaryColor),\n ...IconButtonTheme.getLight(lightPrimaryColor),\n ...SwitchTheme.getLight(lightPrimaryColor),\n ...CardTheme.getLight(lightPrimaryColor),\n ...CheckboxTheme.getLight(lightPrimaryColor),\n ...CodeBlockTheme.getLight(),\n ...LinkTheme.getLight(lightPrimaryColor),\n ...ListTheme.getLight(lightPrimaryColor),\n ...RadioTheme.getLight(lightPrimaryColor),\n ...InputTheme.getLight(lightPrimaryColor),\n ...TableTheme.getLight(lightPrimaryColor),\n ...TextTheme.getLight(lightPrimaryColor),\n ...SelectTheme.getLight(lightPrimaryColor),\n ...SkeletonTheme.getLight(lightPrimaryColor),\n ...DialogTheme.getLight(lightPrimaryColor),\n ...NavigationTheme.getLight(lightPrimaryColor),\n ...TooltipTheme.getLight(lightPrimaryColor),\n ...TextareaTheme.getLight(lightPrimaryColor),\n ...HeadingTheme.getLight(lightPrimaryColor),\n ...SidePanelTheme.getLight(lightPrimaryColor),\n },\n });\n};\n"],"mappings":"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"}
package/dist/styles/cssProps.cjs CHANGED
@@ -36,7 +36,8 @@ function getRadiiValue(key) {
36
36
  "3": "8px",
37
37
  "4": "12px",
38
38
  round: "50%",
39
- pill: "9999px"
39
+ pill: "9999px",
40
+ button: "8px"
40
41
  }[key] || "0px";
41
42
  }
42
43
  function getFontSizeValue(key) {
package/dist/styles/cssProps.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cssProps.cjs","names":[],"sources":["../../styles/cssProps.ts"],"sourcesContent":["import { FlexAlign, FlexJustify, SizeToken, SpacingToken } from './types';\n\nexport interface CSSProps {\n css?: {\n p?: SpacingToken;\n pt?: SpacingToken;\n pr?: SpacingToken;\n pb?: SpacingToken;\n pl?: SpacingToken;\n px?: SpacingToken;\n py?: SpacingToken;\n\n m?: SpacingToken;\n mt?: SpacingToken;\n mr?: SpacingToken;\n mb?: SpacingToken;\n ml?: SpacingToken;\n mx?: SpacingToken;\n my?: SpacingToken;\n\n ta?: 'left' | 'center' | 'right' | 'justify';\n fd?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n fw?: 'wrap' | 'nowrap' | 'wrap-reverse';\n ai?: FlexAlign;\n ac?: FlexAlign | 'space-between' | 'space-around' | 'space-evenly';\n jc?: FlexJustify;\n as?: 'auto' | FlexAlign;\n fg?: 0 | 1;\n fs?: 0 | 1;\n fb?: SizeToken;\n\n bc?: string;\n br?: string;\n btrr?: string;\n bbrr?: string;\n bblr?: string;\n btlr?: string;\n bs?: string;\n c?: string;\n\n width?: SizeToken;\n height?: SizeToken;\n size?: SizeToken;\n\n ox?: 'visible' | 'hidden' | 'scroll' | 'auto';\n oy?: 'visible' | 'hidden' | 'scroll' | 'auto';\n\n pe?: 'auto' | 'none' | 'all';\n us?: 'none' | 'auto' | 'text' | 'contain' | 'all';\n\n fontSize?: string;\n fontWeight?: string;\n lh?: string | number;\n\n [key: string]: any;\n };\n}\n\n// HELPERS\nfunction processToken(value: string): string {\n return value.startsWith('$') ? value.slice(1) : value;\n}\n\nfunction getSpaceValue(key: string): string {\n const spaceMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n };\n return spaceMap[key] || '0px';\n}\n\nfunction getSizeValue(key: string): string {\n const sizeMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n };\n return sizeMap[key] || key;\n}\n\nfunction getRadiiValue(key: string): string {\n const radiiMap: Record<string, string> = {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n };\n return radiiMap[key] || '0px';\n}\n\nfunction getFontSizeValue(key: string): string {\n const fontSizeMap: Record<string, string> = {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n };\n return fontSizeMap[key] || '16px';\n}\n\nfunction getFontWeightValue(key: string): string {\n const fontWeightMap: Record<string, string> = {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n };\n return fontWeightMap[key] || '400';\n}\n\nfunction applySpacing(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[property] = spaceValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyRadii(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[property] = radiiValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyColor(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n colors?: Record<string, any>,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const colorToken = value.slice(1);\n if (colors && colorToken in colors) {\n (style as any)[property] = colors[colorToken];\n } else {\n (style as any)[property] = value;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applySize(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const sizeValue = getSizeValue(tokenValue);\n (style as any)[property] = sizeValue;\n } else {\n (style as any)[property] = value;\n }\n}\n\n// CSS PROCESSOR\nexport function processCSSProp(\n css: CSSProps['css'] = {},\n colors?: Record<string, any>,\n): {\n style: React.CSSProperties;\n vars: Record<string, string>;\n} {\n const style: React.CSSProperties = {};\n const vars: Record<string, string> = {};\n\n Object.entries(css).forEach(([key, value]) => {\n switch (key) {\n case 'p':\n case 'padding':\n applySpacing(style, 'padding', value);\n break;\n case 'pt':\n case 'paddingTop':\n applySpacing(style, 'paddingTop', value);\n break;\n case 'pr':\n case 'paddingRight':\n applySpacing(style, 'paddingRight', value);\n break;\n case 'pb':\n case 'paddingBottom':\n applySpacing(style, 'paddingBottom', value);\n break;\n case 'pl':\n case 'paddingLeft':\n applySpacing(style, 'paddingLeft', value);\n break;\n case 'px':\n applySpacing(style, 'paddingLeft', value);\n applySpacing(style, 'paddingRight', value);\n break;\n case 'py':\n applySpacing(style, 'paddingTop', value);\n applySpacing(style, 'paddingBottom', value);\n break;\n\n case 'm':\n case 'margin':\n applySpacing(style, 'margin', value);\n break;\n case 'mt':\n case 'marginTop':\n applySpacing(style, 'marginTop', value);\n break;\n case 'mr':\n case 'marginRight':\n applySpacing(style, 'marginRight', value);\n break;\n case 'mb':\n case 'marginBottom':\n applySpacing(style, 'marginBottom', value);\n break;\n case 'ml':\n case 'marginLeft':\n applySpacing(style, 'marginLeft', value);\n break;\n case 'mx':\n applySpacing(style, 'marginLeft', value);\n applySpacing(style, 'marginRight', value);\n break;\n case 'my':\n applySpacing(style, 'marginTop', value);\n applySpacing(style, 'marginBottom', value);\n break;\n\n case 'ta':\n style.textAlign = value as React.CSSProperties['textAlign'];\n break;\n case 'fd':\n style.flexDirection = value as React.CSSProperties['flexDirection'];\n break;\n case 'fw':\n style.flexWrap = value as React.CSSProperties['flexWrap'];\n break;\n case 'ai':\n style.alignItems = value as React.CSSProperties['alignItems'];\n break;\n case 'ac':\n style.alignContent = value as React.CSSProperties['alignContent'];\n break;\n case 'jc':\n style.justifyContent = value as React.CSSProperties['justifyContent'];\n break;\n case 'as':\n style.alignSelf = value as React.CSSProperties['alignSelf'];\n break;\n case 'fg':\n style.flexGrow = value;\n break;\n case 'fs':\n style.flexShrink = value;\n break;\n case 'fb':\n applySize(style, 'flexBasis', value);\n break;\n\n case 'bc':\n case 'backgroundColor':\n applyColor(style, 'backgroundColor', value, colors);\n break;\n case 'br':\n case 'borderRadius':\n applyRadii(style, 'borderRadius', value);\n break;\n case 'btrr':\n case 'borderTopRightRadius':\n applyRadii(style, 'borderTopRightRadius', value);\n break;\n case 'bbrr':\n case 'borderBottomRightRadius':\n applyRadii(style, 'borderBottomRightRadius', value);\n break;\n case 'bblr':\n case 'borderBottomLeftRadius':\n applyRadii(style, 'borderBottomLeftRadius', value);\n break;\n case 'btlr':\n case 'borderTopLeftRadius':\n applyRadii(style, 'borderTopLeftRadius', value);\n break;\n case 'bs':\n case 'boxShadow':\n style.boxShadow = value;\n break;\n case 'c':\n case 'color':\n applyColor(style, 'color', value, colors);\n break;\n\n case 'fontSize':\n if (typeof value === 'string') {\n const fontSizeValue = getFontSizeValue(value);\n if (fontSizeValue !== '16px') {\n style.fontSize = fontSizeValue;\n }\n }\n break;\n case 'fontWeight':\n if (typeof value === 'string') {\n const fontWeightValue = getFontWeightValue(value);\n if (fontWeightValue !== '400') {\n style.fontWeight = fontWeightValue;\n }\n }\n break;\n case 'lh':\n style.lineHeight = value;\n break;\n\n case 'width':\n case 'w':\n applySize(style, 'width', value);\n break;\n case 'height':\n case 'h':\n applySize(style, 'height', value);\n break;\n\n case 'size':\n applySize(style, 'width', value);\n applySize(style, 'height', value);\n break;\n\n case 'ox':\n style.overflowX = value as React.CSSProperties['overflowX'];\n break;\n case 'oy':\n style.overflowY = value as React.CSSProperties['overflowY'];\n break;\n\n case 'pe':\n style.pointerEvents = value as React.CSSProperties['pointerEvents'];\n break;\n case 'us':\n style.userSelect = value as React.CSSProperties['userSelect'];\n break;\n\n default:\n // Handle token syntax for any property that falls through to default\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n\n // Try spacing tokens first (most common for gap, etc)\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[key] = spaceValue;\n break;\n }\n\n // Try size tokens\n const sizeValue = getSizeValue(tokenValue);\n if (sizeValue !== tokenValue) {\n (style as any)[key] = sizeValue;\n break;\n }\n\n // Try radii tokens\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[key] = radiiValue;\n break;\n }\n\n // Try color tokens\n if (colors && tokenValue in colors) {\n (style as any)[key] = colors[tokenValue];\n break;\n }\n\n // If no token matches, pass through as-is\n (style as any)[key] = value;\n } else {\n (style as any)[key] = value;\n }\n break;\n }\n });\n\n return { style, vars };\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"cssProps.cjs","names":[],"sources":["../../styles/cssProps.ts"],"sourcesContent":["import { FlexAlign, FlexJustify, SizeToken, SpacingToken } from './types';\n\nexport interface CSSProps {\n css?: {\n p?: SpacingToken;\n pt?: SpacingToken;\n pr?: SpacingToken;\n pb?: SpacingToken;\n pl?: SpacingToken;\n px?: SpacingToken;\n py?: SpacingToken;\n\n m?: SpacingToken;\n mt?: SpacingToken;\n mr?: SpacingToken;\n mb?: SpacingToken;\n ml?: SpacingToken;\n mx?: SpacingToken;\n my?: SpacingToken;\n\n ta?: 'left' | 'center' | 'right' | 'justify';\n fd?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n fw?: 'wrap' | 'nowrap' | 'wrap-reverse';\n ai?: FlexAlign;\n ac?: FlexAlign | 'space-between' | 'space-around' | 'space-evenly';\n jc?: FlexJustify;\n as?: 'auto' | FlexAlign;\n fg?: 0 | 1;\n fs?: 0 | 1;\n fb?: SizeToken;\n\n bc?: string;\n br?: string;\n btrr?: string;\n bbrr?: string;\n bblr?: string;\n btlr?: string;\n bs?: string;\n c?: string;\n\n width?: SizeToken;\n height?: SizeToken;\n size?: SizeToken;\n\n ox?: 'visible' | 'hidden' | 'scroll' | 'auto';\n oy?: 'visible' | 'hidden' | 'scroll' | 'auto';\n\n pe?: 'auto' | 'none' | 'all';\n us?: 'none' | 'auto' | 'text' | 'contain' | 'all';\n\n fontSize?: string;\n fontWeight?: string;\n lh?: string | number;\n\n [key: string]: any;\n };\n}\n\n// HELPERS\nfunction processToken(value: string): string {\n return value.startsWith('$') ? value.slice(1) : value;\n}\n\nfunction getSpaceValue(key: string): string {\n const spaceMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n };\n return spaceMap[key] || '0px';\n}\n\nfunction getSizeValue(key: string): string {\n const sizeMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n };\n return sizeMap[key] || key;\n}\n\nfunction getRadiiValue(key: string): string {\n const radiiMap: Record<string, string> = {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n button: '8px',\n };\n return radiiMap[key] || '0px';\n}\n\nfunction getFontSizeValue(key: string): string {\n const fontSizeMap: Record<string, string> = {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n };\n return fontSizeMap[key] || '16px';\n}\n\nfunction getFontWeightValue(key: string): string {\n const fontWeightMap: Record<string, string> = {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n };\n return fontWeightMap[key] || '400';\n}\n\nfunction applySpacing(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[property] = spaceValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyRadii(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[property] = radiiValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyColor(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n colors?: Record<string, any>,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const colorToken = value.slice(1);\n if (colors && colorToken in colors) {\n (style as any)[property] = colors[colorToken];\n } else {\n (style as any)[property] = value;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applySize(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const sizeValue = getSizeValue(tokenValue);\n (style as any)[property] = sizeValue;\n } else {\n (style as any)[property] = value;\n }\n}\n\n// CSS PROCESSOR\nexport function processCSSProp(\n css: CSSProps['css'] = {},\n colors?: Record<string, any>,\n): {\n style: React.CSSProperties;\n vars: Record<string, string>;\n} {\n const style: React.CSSProperties = {};\n const vars: Record<string, string> = {};\n\n Object.entries(css).forEach(([key, value]) => {\n switch (key) {\n case 'p':\n case 'padding':\n applySpacing(style, 'padding', value);\n break;\n case 'pt':\n case 'paddingTop':\n applySpacing(style, 'paddingTop', value);\n break;\n case 'pr':\n case 'paddingRight':\n applySpacing(style, 'paddingRight', value);\n break;\n case 'pb':\n case 'paddingBottom':\n applySpacing(style, 'paddingBottom', value);\n break;\n case 'pl':\n case 'paddingLeft':\n applySpacing(style, 'paddingLeft', value);\n break;\n case 'px':\n applySpacing(style, 'paddingLeft', value);\n applySpacing(style, 'paddingRight', value);\n break;\n case 'py':\n applySpacing(style, 'paddingTop', value);\n applySpacing(style, 'paddingBottom', value);\n break;\n\n case 'm':\n case 'margin':\n applySpacing(style, 'margin', value);\n break;\n case 'mt':\n case 'marginTop':\n applySpacing(style, 'marginTop', value);\n break;\n case 'mr':\n case 'marginRight':\n applySpacing(style, 'marginRight', value);\n break;\n case 'mb':\n case 'marginBottom':\n applySpacing(style, 'marginBottom', value);\n break;\n case 'ml':\n case 'marginLeft':\n applySpacing(style, 'marginLeft', value);\n break;\n case 'mx':\n applySpacing(style, 'marginLeft', value);\n applySpacing(style, 'marginRight', value);\n break;\n case 'my':\n applySpacing(style, 'marginTop', value);\n applySpacing(style, 'marginBottom', value);\n break;\n\n case 'ta':\n style.textAlign = value as React.CSSProperties['textAlign'];\n break;\n case 'fd':\n style.flexDirection = value as React.CSSProperties['flexDirection'];\n break;\n case 'fw':\n style.flexWrap = value as React.CSSProperties['flexWrap'];\n break;\n case 'ai':\n style.alignItems = value as React.CSSProperties['alignItems'];\n break;\n case 'ac':\n style.alignContent = value as React.CSSProperties['alignContent'];\n break;\n case 'jc':\n style.justifyContent = value as React.CSSProperties['justifyContent'];\n break;\n case 'as':\n style.alignSelf = value as React.CSSProperties['alignSelf'];\n break;\n case 'fg':\n style.flexGrow = value;\n break;\n case 'fs':\n style.flexShrink = value;\n break;\n case 'fb':\n applySize(style, 'flexBasis', value);\n break;\n\n case 'bc':\n case 'backgroundColor':\n applyColor(style, 'backgroundColor', value, colors);\n break;\n case 'br':\n case 'borderRadius':\n applyRadii(style, 'borderRadius', value);\n break;\n case 'btrr':\n case 'borderTopRightRadius':\n applyRadii(style, 'borderTopRightRadius', value);\n break;\n case 'bbrr':\n case 'borderBottomRightRadius':\n applyRadii(style, 'borderBottomRightRadius', value);\n break;\n case 'bblr':\n case 'borderBottomLeftRadius':\n applyRadii(style, 'borderBottomLeftRadius', value);\n break;\n case 'btlr':\n case 'borderTopLeftRadius':\n applyRadii(style, 'borderTopLeftRadius', value);\n break;\n case 'bs':\n case 'boxShadow':\n style.boxShadow = value;\n break;\n case 'c':\n case 'color':\n applyColor(style, 'color', value, colors);\n break;\n\n case 'fontSize':\n if (typeof value === 'string') {\n const fontSizeValue = getFontSizeValue(value);\n if (fontSizeValue !== '16px') {\n style.fontSize = fontSizeValue;\n }\n }\n break;\n case 'fontWeight':\n if (typeof value === 'string') {\n const fontWeightValue = getFontWeightValue(value);\n if (fontWeightValue !== '400') {\n style.fontWeight = fontWeightValue;\n }\n }\n break;\n case 'lh':\n style.lineHeight = value;\n break;\n\n case 'width':\n case 'w':\n applySize(style, 'width', value);\n break;\n case 'height':\n case 'h':\n applySize(style, 'height', value);\n break;\n\n case 'size':\n applySize(style, 'width', value);\n applySize(style, 'height', value);\n break;\n\n case 'ox':\n style.overflowX = value as React.CSSProperties['overflowX'];\n break;\n case 'oy':\n style.overflowY = value as React.CSSProperties['overflowY'];\n break;\n\n case 'pe':\n style.pointerEvents = value as React.CSSProperties['pointerEvents'];\n break;\n case 'us':\n style.userSelect = value as React.CSSProperties['userSelect'];\n break;\n\n default:\n // Handle token syntax for any property that falls through to default\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n\n // Try spacing tokens first (most common for gap, etc)\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[key] = spaceValue;\n break;\n }\n\n // Try size tokens\n const sizeValue = getSizeValue(tokenValue);\n if (sizeValue !== tokenValue) {\n (style as any)[key] = sizeValue;\n break;\n }\n\n // Try radii tokens\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[key] = radiiValue;\n break;\n }\n\n // Try color tokens\n if (colors && tokenValue in colors) {\n (style as any)[key] = colors[tokenValue];\n break;\n }\n\n // If no token matches, pass through as-is\n (style as any)[key] = value;\n } else {\n (style as any)[key] = value;\n }\n break;\n }\n });\n\n return { style, vars };\n}\n"],"mappings":";AA2DA,SAAS,aAAa,OAAuB;AAC3C,QAAO,MAAM,WAAW,IAAI,GAAG,MAAM,MAAM,EAAE,GAAG;;AAGlD,SAAS,cAAc,KAAqB;AAY1C,QAXyC;EACvC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACN,CACe,QAAQ;;AAG1B,SAAS,aAAa,KAAqB;AAazC,QAZwC;EACtC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,MAAM;EACP,CACc,QAAQ;;AAGzB,SAAS,cAAc,KAAqB;AAU1C,QATyC;EACvC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,OAAO;EACP,MAAM;EACN,QAAQ;EACT,CACe,QAAQ;;AAG1B,SAAS,iBAAiB,KAAqB;AAgB7C,QAf4C;EAC1C,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,MAAM;EACN,MAAM;EACN,MAAM;EACP,CACkB,QAAQ;;AAG7B,SAAS,mBAAmB,KAAqB;AAQ/C,QAP8C;EAC5C,OAAO;EACP,SAAS;EACT,QAAQ;EACR,UAAU;EACV,MAAM;EACP,CACoB,QAAQ;;AAG/B,SAAS,aACP,OACA,UACA,OACM;AACN,KAAI,OAAO,UAAU,YAAY,MAAM,WAAW,IAAI,EAAE;EAEtD,MAAM,aAAa,cADA,aAAa,MAAM,CACM;AAC5C,MAAI,eAAe,MAChB,OAAc,YAAY;OAG5B,OAAc,YAAY;;AAI/B,SAAS,WACP,OACA,UACA,OACM;AACN,KAAI,OAAO,UAAU,YAAY,MAAM,WAAW,IAAI,EAAE;EAEtD,MAAM,aAAa,cADA,aAAa,MAAM,CACM;AAC5C,MAAI,eAAe,MAChB,OAAc,YAAY;OAG5B,OAAc,YAAY;;AAI/B,SAAS,WACP,OACA,UACA,OACA,QACM;AACN,KAAI,OAAO,UAAU,YAAY,MAAM,WAAW,IAAI,EAAE;EACtD,MAAM,aAAa,MAAM,MAAM,EAAE;AACjC,MAAI,UAAU,cAAc,OACzB,OAAc,YAAY,OAAO;MAEjC,OAAc,YAAY;OAG5B,OAAc,YAAY;;AAI/B,SAAS,UACP,OACA,UACA,OACM;AACN,KAAI,OAAO,UAAU,YAAY,MAAM,WAAW,IAAI,CAGnD,OAAc,YADG,aADC,aAAa,MAAM,CACI;KAGzC,OAAc,YAAY;;AAK/B,SAAgB,eACd,MAAuB,EAAE,EACzB,QAIA;CACA,MAAM,QAA6B,EAAE;CACrC,MAAM,OAA+B,EAAE;AAEvC,QAAO,QAAQ,IAAI,CAAC,SAAS,CAAC,KAAK,WAAW;AAC5C,UAAQ,KAAR;GACE,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,WAAW,MAAM;AACrC;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,cAAc,MAAM;AACxC;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,gBAAgB,MAAM;AAC1C;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,iBAAiB,MAAM;AAC3C;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,eAAe,MAAM;AACzC;GACF,KAAK;AACH,iBAAa,OAAO,eAAe,MAAM;AACzC,iBAAa,OAAO,gBAAgB,MAAM;AAC1C;GACF,KAAK;AACH,iBAAa,OAAO,cAAc,MAAM;AACxC,iBAAa,OAAO,iBAAiB,MAAM;AAC3C;GAEF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,UAAU,MAAM;AACpC;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,aAAa,MAAM;AACvC;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,eAAe,MAAM;AACzC;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,gBAAgB,MAAM;AAC1C;GACF,KAAK;GACL,KAAK;AACH,iBAAa,OAAO,cAAc,MAAM;AACxC;GACF,KAAK;AACH,iBAAa,OAAO,cAAc,MAAM;AACxC,iBAAa,OAAO,eAAe,MAAM;AACzC;GACF,KAAK;AACH,iBAAa,OAAO,aAAa,MAAM;AACvC,iBAAa,OAAO,gBAAgB,MAAM;AAC1C;GAEF,KAAK;AACH,UAAM,YAAY;AAClB;GACF,KAAK;AACH,UAAM,gBAAgB;AACtB;GACF,KAAK;AACH,UAAM,WAAW;AACjB;GACF,KAAK;AACH,UAAM,aAAa;AACnB;GACF,KAAK;AACH,UAAM,eAAe;AACrB;GACF,KAAK;AACH,UAAM,iBAAiB;AACvB;GACF,KAAK;AACH,UAAM,YAAY;AAClB;GACF,KAAK;AACH,UAAM,WAAW;AACjB;GACF,KAAK;AACH,UAAM,aAAa;AACnB;GACF,KAAK;AACH,cAAU,OAAO,aAAa,MAAM;AACpC;GAEF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,mBAAmB,OAAO,OAAO;AACnD;GACF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,gBAAgB,MAAM;AACxC;GACF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,wBAAwB,MAAM;AAChD;GACF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,2BAA2B,MAAM;AACnD;GACF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,0BAA0B,MAAM;AAClD;GACF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,uBAAuB,MAAM;AAC/C;GACF,KAAK;GACL,KAAK;AACH,UAAM,YAAY;AAClB;GACF,KAAK;GACL,KAAK;AACH,eAAW,OAAO,SAAS,OAAO,OAAO;AACzC;GAEF,KAAK;AACH,QAAI,OAAO,UAAU,UAAU;KAC7B,MAAM,gBAAgB,iBAAiB,MAAM;AAC7C,SAAI,kBAAkB,OACpB,OAAM,WAAW;;AAGrB;GACF,KAAK;AACH,QAAI,OAAO,UAAU,UAAU;KAC7B,MAAM,kBAAkB,mBAAmB,MAAM;AACjD,SAAI,oBAAoB,MACtB,OAAM,aAAa;;AAGvB;GACF,KAAK;AACH,UAAM,aAAa;AACnB;GAEF,KAAK;GACL,KAAK;AACH,cAAU,OAAO,SAAS,MAAM;AAChC;GACF,KAAK;GACL,KAAK;AACH,cAAU,OAAO,UAAU,MAAM;AACjC;GAEF,KAAK;AACH,cAAU,OAAO,SAAS,MAAM;AAChC,cAAU,OAAO,UAAU,MAAM;AACjC;GAEF,KAAK;AACH,UAAM,YAAY;AAClB;GACF,KAAK;AACH,UAAM,YAAY;AAClB;GAEF,KAAK;AACH,UAAM,gBAAgB;AACtB;GACF,KAAK;AACH,UAAM,aAAa;AACnB;GAEF;AAEE,QAAI,OAAO,UAAU,YAAY,MAAM,WAAW,IAAI,EAAE;KACtD,MAAM,aAAa,aAAa,MAAM;KAGtC,MAAM,aAAa,cAAc,WAAW;AAC5C,SAAI,eAAe,OAAO;AACvB,YAAc,OAAO;AACtB;;KAIF,MAAM,YAAY,aAAa,WAAW;AAC1C,SAAI,cAAc,YAAY;AAC3B,YAAc,OAAO;AACtB;;KAIF,MAAM,aAAa,cAAc,WAAW;AAC5C,SAAI,eAAe,OAAO;AACvB,YAAc,OAAO;AACtB;;AAIF,SAAI,UAAU,cAAc,QAAQ;AACjC,YAAc,OAAO,OAAO;AAC7B;;AAID,WAAc,OAAO;UAErB,OAAc,OAAO;AAExB;;GAEJ;AAEF,QAAO;EAAE;EAAO;EAAM"}
package/dist/styles/cssProps.js CHANGED
@@ -36,7 +36,8 @@ function getRadiiValue(key) {
36
36
  "3": "8px",
37
37
  "4": "12px",
38
38
  round: "50%",
39
- pill: "9999px"
39
+ pill: "9999px",
40
+ button: "8px"
40
41
  }[key] || "0px";
41
42
  }
42
43
  function getFontSizeValue(key) {
package/dist/styles/cssProps.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cssProps.js","names":[],"sources":["../../styles/cssProps.ts"],"sourcesContent":["import { FlexAlign, FlexJustify, SizeToken, SpacingToken } from './types';\n\nexport interface CSSProps {\n css?: {\n p?: SpacingToken;\n pt?: SpacingToken;\n pr?: SpacingToken;\n pb?: SpacingToken;\n pl?: SpacingToken;\n px?: SpacingToken;\n py?: SpacingToken;\n\n m?: SpacingToken;\n mt?: SpacingToken;\n mr?: SpacingToken;\n mb?: SpacingToken;\n ml?: SpacingToken;\n mx?: SpacingToken;\n my?: SpacingToken;\n\n ta?: 'left' | 'center' | 'right' | 'justify';\n fd?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n fw?: 'wrap' | 'nowrap' | 'wrap-reverse';\n ai?: FlexAlign;\n ac?: FlexAlign | 'space-between' | 'space-around' | 'space-evenly';\n jc?: FlexJustify;\n as?: 'auto' | FlexAlign;\n fg?: 0 | 1;\n fs?: 0 | 1;\n fb?: SizeToken;\n\n bc?: string;\n br?: string;\n btrr?: string;\n bbrr?: string;\n bblr?: string;\n btlr?: string;\n bs?: string;\n c?: string;\n\n width?: SizeToken;\n height?: SizeToken;\n size?: SizeToken;\n\n ox?: 'visible' | 'hidden' | 'scroll' | 'auto';\n oy?: 'visible' | 'hidden' | 'scroll' | 'auto';\n\n pe?: 'auto' | 'none' | 'all';\n us?: 'none' | 'auto' | 'text' | 'contain' | 'all';\n\n fontSize?: string;\n fontWeight?: string;\n lh?: string | number;\n\n [key: string]: any;\n };\n}\n\n// HELPERS\nfunction processToken(value: string): string {\n return value.startsWith('$') ? value.slice(1) : value;\n}\n\nfunction getSpaceValue(key: string): string {\n const spaceMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n };\n return spaceMap[key] || '0px';\n}\n\nfunction getSizeValue(key: string): string {\n const sizeMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n };\n return sizeMap[key] || key;\n}\n\nfunction getRadiiValue(key: string): string {\n const radiiMap: Record<string, string> = {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n };\n return radiiMap[key] || '0px';\n}\n\nfunction getFontSizeValue(key: string): string {\n const fontSizeMap: Record<string, string> = {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n };\n return fontSizeMap[key] || '16px';\n}\n\nfunction getFontWeightValue(key: string): string {\n const fontWeightMap: Record<string, string> = {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n };\n return fontWeightMap[key] || '400';\n}\n\nfunction applySpacing(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[property] = spaceValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyRadii(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[property] = radiiValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyColor(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n colors?: Record<string, any>,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const colorToken = value.slice(1);\n if (colors && colorToken in colors) {\n (style as any)[property] = colors[colorToken];\n } else {\n (style as any)[property] = value;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applySize(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const sizeValue = getSizeValue(tokenValue);\n (style as any)[property] = sizeValue;\n } else {\n (style as any)[property] = value;\n }\n}\n\n// CSS PROCESSOR\nexport function processCSSProp(\n css: CSSProps['css'] = {},\n colors?: Record<string, any>,\n): {\n style: React.CSSProperties;\n vars: Record<string, string>;\n} {\n const style: React.CSSProperties = {};\n const vars: Record<string, string> = {};\n\n Object.entries(css).forEach(([key, value]) => {\n switch (key) {\n case 'p':\n case 'padding':\n applySpacing(style, 'padding', value);\n break;\n case 'pt':\n case 'paddingTop':\n applySpacing(style, 'paddingTop', value);\n break;\n case 'pr':\n case 'paddingRight':\n applySpacing(style, 'paddingRight', value);\n break;\n case 'pb':\n case 'paddingBottom':\n applySpacing(style, 'paddingBottom', value);\n break;\n case 'pl':\n case 'paddingLeft':\n applySpacing(style, 'paddingLeft', value);\n break;\n case 'px':\n applySpacing(style, 'paddingLeft', value);\n applySpacing(style, 'paddingRight', value);\n break;\n case 'py':\n applySpacing(style, 'paddingTop', value);\n applySpacing(style, 'paddingBottom', value);\n break;\n\n case 'm':\n case 'margin':\n applySpacing(style, 'margin', value);\n break;\n case 'mt':\n case 'marginTop':\n applySpacing(style, 'marginTop', value);\n break;\n case 'mr':\n case 'marginRight':\n applySpacing(style, 'marginRight', value);\n break;\n case 'mb':\n case 'marginBottom':\n applySpacing(style, 'marginBottom', value);\n break;\n case 'ml':\n case 'marginLeft':\n applySpacing(style, 'marginLeft', value);\n break;\n case 'mx':\n applySpacing(style, 'marginLeft', value);\n applySpacing(style, 'marginRight', value);\n break;\n case 'my':\n applySpacing(style, 'marginTop', value);\n applySpacing(style, 'marginBottom', value);\n break;\n\n case 'ta':\n style.textAlign = value as React.CSSProperties['textAlign'];\n break;\n case 'fd':\n style.flexDirection = value as React.CSSProperties['flexDirection'];\n break;\n case 'fw':\n style.flexWrap = value as React.CSSProperties['flexWrap'];\n break;\n case 'ai':\n style.alignItems = value as React.CSSProperties['alignItems'];\n break;\n case 'ac':\n style.alignContent = value as React.CSSProperties['alignContent'];\n break;\n case 'jc':\n style.justifyContent = value as React.CSSProperties['justifyContent'];\n break;\n case 'as':\n style.alignSelf = value as React.CSSProperties['alignSelf'];\n break;\n case 'fg':\n style.flexGrow = value;\n break;\n case 'fs':\n style.flexShrink = value;\n break;\n case 'fb':\n applySize(style, 'flexBasis', value);\n break;\n\n case 'bc':\n case 'backgroundColor':\n applyColor(style, 'backgroundColor', value, colors);\n break;\n case 'br':\n case 'borderRadius':\n applyRadii(style, 'borderRadius', value);\n break;\n case 'btrr':\n case 'borderTopRightRadius':\n applyRadii(style, 'borderTopRightRadius', value);\n break;\n case 'bbrr':\n case 'borderBottomRightRadius':\n applyRadii(style, 'borderBottomRightRadius', value);\n break;\n case 'bblr':\n case 'borderBottomLeftRadius':\n applyRadii(style, 'borderBottomLeftRadius', value);\n break;\n case 'btlr':\n case 'borderTopLeftRadius':\n applyRadii(style, 'borderTopLeftRadius', value);\n break;\n case 'bs':\n case 'boxShadow':\n style.boxShadow = value;\n break;\n case 'c':\n case 'color':\n applyColor(style, 'color', value, colors);\n break;\n\n case 'fontSize':\n if (typeof value === 'string') {\n const fontSizeValue = getFontSizeValue(value);\n if (fontSizeValue !== '16px') {\n style.fontSize = fontSizeValue;\n }\n }\n break;\n case 'fontWeight':\n if (typeof value === 'string') {\n const fontWeightValue = getFontWeightValue(value);\n if (fontWeightValue !== '400') {\n style.fontWeight = fontWeightValue;\n }\n }\n break;\n case 'lh':\n style.lineHeight = value;\n break;\n\n case 'width':\n case 'w':\n applySize(style, 'width', value);\n break;\n case 'height':\n case 'h':\n applySize(style, 'height', value);\n break;\n\n case 'size':\n applySize(style, 'width', value);\n applySize(style, 'height', value);\n break;\n\n case 'ox':\n style.overflowX = value as React.CSSProperties['overflowX'];\n break;\n case 'oy':\n style.overflowY = value as React.CSSProperties['overflowY'];\n break;\n\n case 'pe':\n style.pointerEvents = value as React.CSSProperties['pointerEvents'];\n break;\n case 'us':\n style.userSelect = value as React.CSSProperties['userSelect'];\n break;\n\n default:\n // Handle token syntax for any property that falls through to default\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n\n // Try spacing tokens first (most common for gap, etc)\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[key] = spaceValue;\n break;\n }\n\n // Try size tokens\n const sizeValue = getSizeValue(tokenValue);\n if (sizeValue !== tokenValue) {\n (style as any)[key] = sizeValue;\n break;\n }\n\n // Try radii tokens\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[key] = radiiValue;\n break;\n }\n\n // Try color tokens\n if (colors && tokenValue in colors) {\n (style as any)[key] = colors[tokenValue];\n break;\n }\n\n // If no token matches, pass through as-is\n (style as any)[key] = value;\n } else {\n (style as any)[key] = value;\n }\n break;\n }\n });\n\n return { style, vars };\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"cssProps.js","names":[],"sources":["../../styles/cssProps.ts"],"sourcesContent":["import { FlexAlign, FlexJustify, SizeToken, SpacingToken } from './types';\n\nexport interface CSSProps {\n css?: {\n p?: SpacingToken;\n pt?: SpacingToken;\n pr?: SpacingToken;\n pb?: SpacingToken;\n pl?: SpacingToken;\n px?: SpacingToken;\n py?: SpacingToken;\n\n m?: SpacingToken;\n mt?: SpacingToken;\n mr?: SpacingToken;\n mb?: SpacingToken;\n ml?: SpacingToken;\n mx?: SpacingToken;\n my?: SpacingToken;\n\n ta?: 'left' | 'center' | 'right' | 'justify';\n fd?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n fw?: 'wrap' | 'nowrap' | 'wrap-reverse';\n ai?: FlexAlign;\n ac?: FlexAlign | 'space-between' | 'space-around' | 'space-evenly';\n jc?: FlexJustify;\n as?: 'auto' | FlexAlign;\n fg?: 0 | 1;\n fs?: 0 | 1;\n fb?: SizeToken;\n\n bc?: string;\n br?: string;\n btrr?: string;\n bbrr?: string;\n bblr?: string;\n btlr?: string;\n bs?: string;\n c?: string;\n\n width?: SizeToken;\n height?: SizeToken;\n size?: SizeToken;\n\n ox?: 'visible' | 'hidden' | 'scroll' | 'auto';\n oy?: 'visible' | 'hidden' | 'scroll' | 'auto';\n\n pe?: 'auto' | 'none' | 'all';\n us?: 'none' | 'auto' | 'text' | 'contain' | 'all';\n\n fontSize?: string;\n fontWeight?: string;\n lh?: string | number;\n\n [key: string]: any;\n };\n}\n\n// HELPERS\nfunction processToken(value: string): string {\n return value.startsWith('$') ? value.slice(1) : value;\n}\n\nfunction getSpaceValue(key: string): string {\n const spaceMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n };\n return spaceMap[key] || '0px';\n}\n\nfunction getSizeValue(key: string): string {\n const sizeMap: Record<string, string> = {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n };\n return sizeMap[key] || key;\n}\n\nfunction getRadiiValue(key: string): string {\n const radiiMap: Record<string, string> = {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n button: '8px',\n };\n return radiiMap[key] || '0px';\n}\n\nfunction getFontSizeValue(key: string): string {\n const fontSizeMap: Record<string, string> = {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n };\n return fontSizeMap[key] || '16px';\n}\n\nfunction getFontWeightValue(key: string): string {\n const fontWeightMap: Record<string, string> = {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n };\n return fontWeightMap[key] || '400';\n}\n\nfunction applySpacing(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[property] = spaceValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyRadii(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[property] = radiiValue;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applyColor(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n colors?: Record<string, any>,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const colorToken = value.slice(1);\n if (colors && colorToken in colors) {\n (style as any)[property] = colors[colorToken];\n } else {\n (style as any)[property] = value;\n }\n } else {\n (style as any)[property] = value;\n }\n}\n\nfunction applySize(\n style: React.CSSProperties,\n property: keyof React.CSSProperties,\n value: string,\n): void {\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n const sizeValue = getSizeValue(tokenValue);\n (style as any)[property] = sizeValue;\n } else {\n (style as any)[property] = value;\n }\n}\n\n// CSS PROCESSOR\nexport function processCSSProp(\n css: CSSProps['css'] = {},\n colors?: Record<string, any>,\n): {\n style: React.CSSProperties;\n vars: Record<string, string>;\n} {\n const style: React.CSSProperties = {};\n const vars: Record<string, string> = {};\n\n Object.entries(css).forEach(([key, value]) => {\n switch (key) {\n case 'p':\n case 'padding':\n applySpacing(style, 'padding', value);\n break;\n case 'pt':\n case 'paddingTop':\n applySpacing(style, 'paddingTop', value);\n break;\n case 'pr':\n case 'paddingRight':\n applySpacing(style, 'paddingRight', value);\n break;\n case 'pb':\n case 'paddingBottom':\n applySpacing(style, 'paddingBottom', value);\n break;\n case 'pl':\n case 'paddingLeft':\n applySpacing(style, 'paddingLeft', value);\n break;\n case 'px':\n applySpacing(style, 'paddingLeft', value);\n applySpacing(style, 'paddingRight', value);\n break;\n case 'py':\n applySpacing(style, 'paddingTop', value);\n applySpacing(style, 'paddingBottom', value);\n break;\n\n case 'm':\n case 'margin':\n applySpacing(style, 'margin', value);\n break;\n case 'mt':\n case 'marginTop':\n applySpacing(style, 'marginTop', value);\n break;\n case 'mr':\n case 'marginRight':\n applySpacing(style, 'marginRight', value);\n break;\n case 'mb':\n case 'marginBottom':\n applySpacing(style, 'marginBottom', value);\n break;\n case 'ml':\n case 'marginLeft':\n applySpacing(style, 'marginLeft', value);\n break;\n case 'mx':\n applySpacing(style, 'marginLeft', value);\n applySpacing(style, 'marginRight', value);\n break;\n case 'my':\n applySpacing(style, 'marginTop', value);\n applySpacing(style, 'marginBottom', value);\n break;\n\n case 'ta':\n style.textAlign = value as React.CSSProperties['textAlign'];\n break;\n case 'fd':\n style.flexDirection = value as React.CSSProperties['flexDirection'];\n break;\n case 'fw':\n style.flexWrap = value as React.CSSProperties['flexWrap'];\n break;\n case 'ai':\n style.alignItems = value as React.CSSProperties['alignItems'];\n break;\n case 'ac':\n style.alignContent = value as React.CSSProperties['alignContent'];\n break;\n case 'jc':\n style.justifyContent = value as React.CSSProperties['justifyContent'];\n break;\n case 'as':\n style.alignSelf = value as React.CSSProperties['alignSelf'];\n break;\n case 'fg':\n style.flexGrow = value;\n break;\n case 'fs':\n style.flexShrink = value;\n break;\n case 'fb':\n applySize(style, 'flexBasis', value);\n break;\n\n case 'bc':\n case 'backgroundColor':\n applyColor(style, 'backgroundColor', value, colors);\n break;\n case 'br':\n case 'borderRadius':\n applyRadii(style, 'borderRadius', value);\n break;\n case 'btrr':\n case 'borderTopRightRadius':\n applyRadii(style, 'borderTopRightRadius', value);\n break;\n case 'bbrr':\n case 'borderBottomRightRadius':\n applyRadii(style, 'borderBottomRightRadius', value);\n break;\n case 'bblr':\n case 'borderBottomLeftRadius':\n applyRadii(style, 'borderBottomLeftRadius', value);\n break;\n case 'btlr':\n case 'borderTopLeftRadius':\n applyRadii(style, 'borderTopLeftRadius', value);\n break;\n case 'bs':\n case 'boxShadow':\n style.boxShadow = value;\n break;\n case 'c':\n case 'color':\n applyColor(style, 'color', value, colors);\n break;\n\n case 'fontSize':\n if (typeof value === 'string') {\n const fontSizeValue = getFontSizeValue(value);\n if (fontSizeValue !== '16px') {\n style.fontSize = fontSizeValue;\n }\n }\n break;\n case 'fontWeight':\n if (typeof value === 'string') {\n const fontWeightValue = getFontWeightValue(value);\n if (fontWeightValue !== '400') {\n style.fontWeight = fontWeightValue;\n }\n }\n break;\n case 'lh':\n style.lineHeight = value;\n break;\n\n case 'width':\n case 'w':\n applySize(style, 'width', value);\n break;\n case 'height':\n case 'h':\n applySize(style, 'height', value);\n break;\n\n case 'size':\n applySize(style, 'width', value);\n applySize(style, 'height', value);\n break;\n\n case 'ox':\n style.overflowX = value as React.CSSProperties['overflowX'];\n break;\n case 'oy':\n style.overflowY = value as React.CSSProperties['overflowY'];\n break;\n\n case 'pe':\n style.pointerEvents = value as React.CSSProperties['pointerEvents'];\n break;\n case 'us':\n style.userSelect = value as React.CSSProperties['userSelect'];\n break;\n\n default:\n // Handle token syntax for any property that falls through to default\n if (typeof value === 'string' && value.startsWith('$')) {\n const tokenValue = processToken(value);\n\n // Try spacing tokens first (most common for gap, etc)\n const spaceValue = getSpaceValue(tokenValue);\n if (spaceValue !== '0px') {\n (style as any)[key] = spaceValue;\n break;\n }\n\n // Try size tokens\n const sizeValue = getSizeValue(tokenValue);\n if (sizeValue !== tokenValue) {\n (style as any)[key] = sizeValue;\n break;\n }\n\n // Try radii tokens\n const radiiValue = getRadiiValue(tokenValue);\n if (radiiValue !== '0px') {\n (style as any)[key] = radiiValue;\n break;\n }\n\n // Try color tokens\n if (colors && tokenValue in colors) {\n (style as any)[key] = colors[tokenValue];\n break;\n }\n\n // If no token matches, pass through as-is\n (style as any)[key] = value;\n } else {\n (style as any)[key] = value;\n }\n break;\n }\n });\n\n return { style, vars };\n}\n"],"mappings":"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"}
package/dist/styles/themes.css.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themes.css.cjs","names":[],"sources":["../../styles/themes.css.ts"],"sourcesContent":["import { createTheme } from '@vanilla-extract/css';\nimport tinycolor from 'tinycolor2';\n\nimport { darkColors, lightColors } from '../colors';\nimport { badgeDarkTheme, badgeLightTheme } from '../components/Badge/Badge.theme.css';\nimport { buttonDarkTheme, buttonLightTheme } from '../components/Button/Button.theme.css';\nimport {\n buttonSwitchDarkTheme,\n buttonSwitchLightTheme,\n} from '../components/ButtonSwitch/ButtonSwitch.theme.css';\nimport { cardDarkTheme, cardLightTheme } from '../components/Card/Card.theme.css';\nimport {\n codeBlockDarkTheme,\n codeBlockLightTheme,\n} from '../components/CodeBlock/CodeBlock.theme.css';\nimport { headingDarkTheme, headingLightTheme } from '../components/Heading/Heading.theme.css';\nimport {\n iconButtonDarkTheme,\n iconButtonLightTheme,\n} from '../components/IconButton/IconButton.theme.css';\nimport { inputDarkTheme, inputLightTheme } from '../components/Input/Input.theme.css';\nimport { panelDarkTheme, panelLightTheme } from '../components/Panel/Panel.theme.css';\nimport { skeletonDarkTheme, skeletonLightTheme } from '../components/Skeleton/Skeleton.theme.css';\nimport { textDarkTheme, textLightTheme } from '../components/Text/Text.theme.css';\nimport { textareaDarkTheme, textareaLightTheme } from '../components/Textarea/Textarea.theme.css';\nimport { tokens } from './tokens.css';\n\n// Type for primary colors\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\n// Base theme values shared across all variants\nconst baseThemeValues = {\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n },\n sizes: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n },\n fontSizes: {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n },\n fontWeights: {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n },\n radii: {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n },\n zIndices: {\n '1': '100',\n '2': '200',\n '3': '300',\n '4': '400',\n max: '999',\n },\n};\n\n// Helper to extract color scale from color map\nfunction extractColorScale(colorName: string, colors: typeof lightColors | typeof darkColors) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n A1: colors[`${colorName}A1`],\n A2: colors[`${colorName}A2`],\n A3: colors[`${colorName}A3`],\n A4: colors[`${colorName}A4`],\n A5: colors[`${colorName}A5`],\n A6: colors[`${colorName}A6`],\n A7: colors[`${colorName}A7`],\n A8: colors[`${colorName}A8`],\n A9: colors[`${colorName}A9`],\n A10: colors[`${colorName}A10`],\n A11: colors[`${colorName}A11`],\n A12: colors[`${colorName}A12`],\n };\n}\n\n// Helper to extract just the scale without alpha\nfunction extractSimpleColorScale(\n colorName: string,\n colors: typeof lightColors | typeof darkColors,\n) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n };\n}\n\n// Helper to create base colors object\nfunction createBaseColors(colors: typeof lightColors | typeof darkColors) {\n return {\n neon: extractColorScale('neon', colors),\n blue: extractColorScale('blue', colors),\n orange: extractColorScale('orange', colors),\n red: extractColorScale('red', colors),\n green: extractColorScale('green', colors),\n deepBlue: extractColorScale('deepBlue', colors),\n grayBlue: extractColorScale('grayBlue', colors),\n gray: extractColorScale('gray', colors),\n slate: extractColorScale('slate', colors),\n purple: extractColorScale('purple', colors),\n whiteA: extractSimpleColorScale('whiteA', colors),\n blackA: extractSimpleColorScale('blackA', colors),\n\n // Elevation\n '00dp': colors['00dp'],\n '01dp': colors['01dp'],\n '02dp': colors['02dp'],\n '03dp': colors['03dp'],\n '04dp': colors['04dp'],\n '05dp': colors['05dp'],\n '06dp': colors['06dp'],\n '08dp': colors['08dp'],\n '12dp': colors['12dp'],\n '16dp': colors['16dp'],\n '24dp': colors['24dp'],\n };\n}\n\n// Helper functions to generate button theme colors based on primary color\nfunction getButtonLightColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: lightColors[`${primaryColorName}A6`],\n buttonPrimaryFocusBg: tinycolor(lightColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: lightColors.deepBlue9,\n buttonSecondaryBorder: lightColors.grayBlue9,\n buttonSecondaryFocusBorder: tinycolor(lightColors[`${primaryColorName}9`])\n .setAlpha(0.19)\n .toHslString(),\n buttonRedBg: lightColors.red9,\n buttonRedFocusBg: lightColors.redA8,\n };\n}\n\nfunction getButtonDarkColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: darkColors[`${primaryColorName}A12`],\n buttonPrimaryFocusBg: tinycolor(darkColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: tinycolor(darkColors[`${primaryColorName}9`])\n .lighten(10)\n .toHslString(),\n buttonSecondaryBorder: darkColors.grayBlue9,\n buttonSecondaryFocusBorder: darkColors[`${primaryColorName}9`],\n buttonRedBg: darkColors.red10,\n buttonRedFocusBg: darkColors.redA11,\n };\n}\n\n// Helper functions to generate ButtonSwitch theme colors based on primary color\nfunction getButtonSwitchLightColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: lightColors[`${primaryColorName}9`],\n };\n}\n\nfunction getButtonSwitchDarkColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: darkColors[`${primaryColorName}9`],\n };\n}\n\n// ============================================================================\n// LIGHT THEMES\n// ============================================================================\n\nconst lightSemanticColors = {\n contentBg: lightColors['00dp'],\n hiContrast: lightColors.deepBlue11,\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n background: '#fcfcfc',\n foreground: '#1a1a1a',\n muted: '#f4f4f4',\n mutedForeground: '#646464',\n card: '#ffffff',\n cardForeground: '#1a1a1a',\n popover: '#ffffff',\n popoverForeground: '#1a1a1a',\n border: '#e3e3e3',\n input: '#e3e3e3',\n accent: '#60a5fa',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#3b82f6',\n ...badgeLightTheme,\n ...cardLightTheme,\n ...codeBlockLightTheme,\n ...panelLightTheme,\n ...textLightTheme,\n textInvalid: lightColors.red9,\n textRed: lightColors.red10,\n ...headingLightTheme,\n ...iconButtonLightTheme,\n ...inputLightTheme,\n ...textareaLightTheme,\n ...buttonLightTheme,\n buttonPrimaryText: 'white',\n buttonRedText: 'white',\n buttonRedHoverText: lightColors.red10,\n ...buttonSwitchLightTheme,\n buttonSwitchContainerBg: lightColors['02dp'],\n buttonSwitchOffColor: lightColors.deepBlue11,\n iconButtonHoverBorder: lightColors.slate9,\n iconButtonHoverBackground: lightColors.slateA3,\n iconButtonFocusBorder: lightColors.slate10,\n ...skeletonLightTheme,\n};\n\nexport const lightThemeBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.blue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('blue'),\n ...getButtonSwitchLightColors('blue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeNeon = createTheme(tokens, {\n colors: {\n primary: lightColors.neon9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('neon'),\n ...getButtonSwitchLightColors('neon'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeOrange = createTheme(tokens, {\n colors: {\n primary: lightColors.orange9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('orange'),\n ...getButtonSwitchLightColors('orange'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeRed = createTheme(tokens, {\n colors: {\n primary: lightColors.red9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('red'),\n ...getButtonSwitchLightColors('red'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGreen = createTheme(tokens, {\n colors: {\n primary: lightColors.green9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('green'),\n ...getButtonSwitchLightColors('green'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.deepBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('deepBlue'),\n ...getButtonSwitchLightColors('deepBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.grayBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('grayBlue'),\n ...getButtonSwitchLightColors('grayBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// DARK THEMES\n// ============================================================================\n\nconst darkSemanticColors = {\n contentBg: darkColors['00dp'],\n hiContrast: 'white',\n loContrast: darkColors.deepBlue2,\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(209, 29%, 19%)',\n background: '#0a0a0a',\n foreground: '#ffffff',\n muted: '#1a1a1a',\n mutedForeground: '#b4b4b4',\n card: '#1a1a1a',\n cardForeground: '#ffffff',\n popover: '#1a1a1a',\n popoverForeground: '#ffffff',\n border: '#3a3a3a',\n input: '#3a3a3a',\n accent: '#3b82f6',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#60a5fa',\n ...badgeDarkTheme,\n ...cardDarkTheme,\n ...codeBlockDarkTheme,\n ...panelDarkTheme,\n ...textDarkTheme,\n textInvalid: darkColors.red9,\n textRed: darkColors.red10,\n ...headingDarkTheme,\n ...iconButtonDarkTheme,\n ...inputDarkTheme,\n ...textareaDarkTheme,\n ...buttonDarkTheme,\n buttonPrimaryText: darkColors.deepBlue2,\n buttonRedText: 'white',\n buttonRedHoverText: darkColors.red10,\n ...buttonSwitchDarkTheme,\n buttonSwitchContainerBg: darkColors['02dp'],\n buttonSwitchOffColor: 'white',\n buttonSwitchActiveColor: darkColors.deepBlue2,\n iconButtonBackground: darkColors.deepBlue2,\n iconButtonHoverBorder: darkColors.deepBlue6,\n iconButtonHoverBackground: darkColors.slateA4,\n iconButtonFocusBorder: darkColors.deepBlue7,\n ...skeletonDarkTheme,\n};\n\nexport const darkThemeBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.blue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('blue'),\n ...getButtonSwitchDarkColors('blue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeNeon = createTheme(tokens, {\n colors: {\n primary: darkColors.neon9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('neon'),\n ...getButtonSwitchDarkColors('neon'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeOrange = createTheme(tokens, {\n colors: {\n primary: darkColors.orange9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('orange'),\n ...getButtonSwitchDarkColors('orange'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeRed = createTheme(tokens, {\n colors: {\n primary: darkColors.red9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('red'),\n ...getButtonSwitchDarkColors('red'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGreen = createTheme(tokens, {\n colors: {\n primary: darkColors.green9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('green'),\n ...getButtonSwitchDarkColors('green'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.deepBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('deepBlue'),\n ...getButtonSwitchDarkColors('deepBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.grayBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('grayBlue'),\n ...getButtonSwitchDarkColors('grayBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// THEME MAP FOR EASY LOOKUP\n// ============================================================================\n\nexport const themes = {\n light: {\n neon: lightThemeNeon,\n blue: lightThemeBlue,\n orange: lightThemeOrange,\n red: lightThemeRed,\n green: lightThemeGreen,\n deepBlue: lightThemeDeepBlue,\n grayBlue: lightThemeGrayBlue,\n },\n dark: {\n neon: darkThemeNeon,\n blue: darkThemeBlue,\n orange: darkThemeOrange,\n red: darkThemeRed,\n green: darkThemeGreen,\n deepBlue: darkThemeDeepBlue,\n grayBlue: darkThemeGrayBlue,\n },\n};\n\n// Default exports for backward compatibility\nexport const lightTheme = lightThemeBlue;\nexport const darkTheme = darkThemeBlue;\n"],"mappings":""}
1
+ {"version":3,"file":"themes.css.cjs","names":[],"sources":["../../styles/themes.css.ts"],"sourcesContent":["import { createTheme } from '@vanilla-extract/css';\nimport tinycolor from 'tinycolor2';\n\nimport { darkColors, lightColors } from '../colors';\nimport { badgeDarkTheme, badgeLightTheme } from '../components/Badge/Badge.theme.css';\nimport { buttonDarkTheme, buttonLightTheme } from '../components/Button/Button.theme.css';\nimport {\n buttonSwitchDarkTheme,\n buttonSwitchLightTheme,\n} from '../components/ButtonSwitch/ButtonSwitch.theme.css';\nimport { cardDarkTheme, cardLightTheme } from '../components/Card/Card.theme.css';\nimport {\n codeBlockDarkTheme,\n codeBlockLightTheme,\n} from '../components/CodeBlock/CodeBlock.theme.css';\nimport { headingDarkTheme, headingLightTheme } from '../components/Heading/Heading.theme.css';\nimport {\n iconButtonDarkTheme,\n iconButtonLightTheme,\n} from '../components/IconButton/IconButton.theme.css';\nimport { inputDarkTheme, inputLightTheme } from '../components/Input/Input.theme.css';\nimport { panelDarkTheme, panelLightTheme } from '../components/Panel/Panel.theme.css';\nimport { skeletonDarkTheme, skeletonLightTheme } from '../components/Skeleton/Skeleton.theme.css';\nimport { textDarkTheme, textLightTheme } from '../components/Text/Text.theme.css';\nimport { textareaDarkTheme, textareaLightTheme } from '../components/Textarea/Textarea.theme.css';\nimport { tokens } from './tokens.css';\n\n// Type for primary colors\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\n// Base theme values shared across all variants\nconst baseThemeValues = {\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n },\n sizes: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n },\n fontSizes: {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n },\n fontWeights: {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n },\n radii: {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n button: '8px',\n },\n zIndices: {\n '1': '100',\n '2': '200',\n '3': '300',\n '4': '400',\n max: '999',\n },\n};\n\n// Helper to extract color scale from color map\nfunction extractColorScale(colorName: string, colors: typeof lightColors | typeof darkColors) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n A1: colors[`${colorName}A1`],\n A2: colors[`${colorName}A2`],\n A3: colors[`${colorName}A3`],\n A4: colors[`${colorName}A4`],\n A5: colors[`${colorName}A5`],\n A6: colors[`${colorName}A6`],\n A7: colors[`${colorName}A7`],\n A8: colors[`${colorName}A8`],\n A9: colors[`${colorName}A9`],\n A10: colors[`${colorName}A10`],\n A11: colors[`${colorName}A11`],\n A12: colors[`${colorName}A12`],\n };\n}\n\n// Helper to extract just the scale without alpha\nfunction extractSimpleColorScale(\n colorName: string,\n colors: typeof lightColors | typeof darkColors,\n) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n };\n}\n\n// Helper to create base colors object\nfunction createBaseColors(colors: typeof lightColors | typeof darkColors) {\n return {\n neon: extractColorScale('neon', colors),\n blue: extractColorScale('blue', colors),\n orange: extractColorScale('orange', colors),\n red: extractColorScale('red', colors),\n green: extractColorScale('green', colors),\n deepBlue: extractColorScale('deepBlue', colors),\n grayBlue: extractColorScale('grayBlue', colors),\n gray: extractColorScale('gray', colors),\n slate: extractColorScale('slate', colors),\n purple: extractColorScale('purple', colors),\n whiteA: extractSimpleColorScale('whiteA', colors),\n blackA: extractSimpleColorScale('blackA', colors),\n\n // Elevation\n '00dp': colors['00dp'],\n '01dp': colors['01dp'],\n '02dp': colors['02dp'],\n '03dp': colors['03dp'],\n '04dp': colors['04dp'],\n '05dp': colors['05dp'],\n '06dp': colors['06dp'],\n '08dp': colors['08dp'],\n '12dp': colors['12dp'],\n '16dp': colors['16dp'],\n '24dp': colors['24dp'],\n };\n}\n\n// Helper functions to generate button theme colors based on primary color\nfunction getButtonLightColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: lightColors[`${primaryColorName}A6`],\n buttonPrimaryFocusBg: tinycolor(lightColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: lightColors.deepBlue9,\n buttonSecondaryBorder: lightColors.grayBlue9,\n buttonSecondaryFocusBorder: tinycolor(lightColors[`${primaryColorName}9`])\n .setAlpha(0.19)\n .toHslString(),\n buttonRedBg: lightColors.red9,\n buttonRedFocusBg: lightColors.redA8,\n };\n}\n\nfunction getButtonDarkColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: darkColors[`${primaryColorName}A12`],\n buttonPrimaryFocusBg: tinycolor(darkColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: tinycolor(darkColors[`${primaryColorName}9`])\n .lighten(10)\n .toHslString(),\n buttonSecondaryBorder: darkColors.grayBlue9,\n buttonSecondaryFocusBorder: darkColors[`${primaryColorName}9`],\n buttonRedBg: darkColors.red10,\n buttonRedFocusBg: darkColors.redA11,\n };\n}\n\n// Helper functions to generate ButtonSwitch theme colors based on primary color\nfunction getButtonSwitchLightColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: lightColors[`${primaryColorName}9`],\n };\n}\n\nfunction getButtonSwitchDarkColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: darkColors[`${primaryColorName}9`],\n };\n}\n\n// ============================================================================\n// LIGHT THEMES\n// ============================================================================\n\nconst lightSemanticColors = {\n contentBg: lightColors['00dp'],\n hiContrast: lightColors.deepBlue11,\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n background: '#fcfcfc',\n foreground: '#1a1a1a',\n muted: '#f4f4f4',\n mutedForeground: '#646464',\n card: '#ffffff',\n cardForeground: '#1a1a1a',\n popover: '#ffffff',\n popoverForeground: '#1a1a1a',\n border: '#e3e3e3',\n input: '#e3e3e3',\n accent: '#60a5fa',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#3b82f6',\n ...badgeLightTheme,\n ...cardLightTheme,\n ...codeBlockLightTheme,\n ...panelLightTheme,\n ...textLightTheme,\n textInvalid: lightColors.red9,\n textRed: lightColors.red10,\n ...headingLightTheme,\n ...iconButtonLightTheme,\n ...inputLightTheme,\n ...textareaLightTheme,\n ...buttonLightTheme,\n buttonPrimaryText: 'white',\n buttonRedText: 'white',\n buttonRedHoverText: lightColors.red10,\n ...buttonSwitchLightTheme,\n buttonSwitchContainerBg: lightColors['02dp'],\n buttonSwitchOffColor: lightColors.deepBlue11,\n iconButtonHoverBorder: lightColors.slate9,\n iconButtonHoverBackground: lightColors.slateA3,\n iconButtonFocusBorder: lightColors.slate10,\n ...skeletonLightTheme,\n};\n\nexport const lightThemeBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.blue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('blue'),\n ...getButtonSwitchLightColors('blue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeNeon = createTheme(tokens, {\n colors: {\n primary: lightColors.neon9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('neon'),\n ...getButtonSwitchLightColors('neon'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeOrange = createTheme(tokens, {\n colors: {\n primary: lightColors.orange9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('orange'),\n ...getButtonSwitchLightColors('orange'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeRed = createTheme(tokens, {\n colors: {\n primary: lightColors.red9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('red'),\n ...getButtonSwitchLightColors('red'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGreen = createTheme(tokens, {\n colors: {\n primary: lightColors.green9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('green'),\n ...getButtonSwitchLightColors('green'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.deepBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('deepBlue'),\n ...getButtonSwitchLightColors('deepBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.grayBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('grayBlue'),\n ...getButtonSwitchLightColors('grayBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// DARK THEMES\n// ============================================================================\n\nconst darkSemanticColors = {\n contentBg: darkColors['00dp'],\n hiContrast: 'white',\n loContrast: darkColors.deepBlue2,\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(209, 29%, 19%)',\n background: '#0a0a0a',\n foreground: '#ffffff',\n muted: '#1a1a1a',\n mutedForeground: '#b4b4b4',\n card: '#1a1a1a',\n cardForeground: '#ffffff',\n popover: '#1a1a1a',\n popoverForeground: '#ffffff',\n border: '#3a3a3a',\n input: '#3a3a3a',\n accent: '#3b82f6',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#60a5fa',\n ...badgeDarkTheme,\n ...cardDarkTheme,\n ...codeBlockDarkTheme,\n ...panelDarkTheme,\n ...textDarkTheme,\n textInvalid: darkColors.red9,\n textRed: darkColors.red10,\n ...headingDarkTheme,\n ...iconButtonDarkTheme,\n ...inputDarkTheme,\n ...textareaDarkTheme,\n ...buttonDarkTheme,\n buttonPrimaryText: darkColors.deepBlue2,\n buttonRedText: 'white',\n buttonRedHoverText: darkColors.red10,\n ...buttonSwitchDarkTheme,\n buttonSwitchContainerBg: darkColors['02dp'],\n buttonSwitchOffColor: 'white',\n buttonSwitchActiveColor: darkColors.deepBlue2,\n iconButtonBackground: darkColors.deepBlue2,\n iconButtonHoverBorder: darkColors.deepBlue6,\n iconButtonHoverBackground: darkColors.slateA4,\n iconButtonFocusBorder: darkColors.deepBlue7,\n ...skeletonDarkTheme,\n};\n\nexport const darkThemeBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.blue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('blue'),\n ...getButtonSwitchDarkColors('blue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeNeon = createTheme(tokens, {\n colors: {\n primary: darkColors.neon9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('neon'),\n ...getButtonSwitchDarkColors('neon'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeOrange = createTheme(tokens, {\n colors: {\n primary: darkColors.orange9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('orange'),\n ...getButtonSwitchDarkColors('orange'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeRed = createTheme(tokens, {\n colors: {\n primary: darkColors.red9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('red'),\n ...getButtonSwitchDarkColors('red'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGreen = createTheme(tokens, {\n colors: {\n primary: darkColors.green9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('green'),\n ...getButtonSwitchDarkColors('green'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.deepBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('deepBlue'),\n ...getButtonSwitchDarkColors('deepBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.grayBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('grayBlue'),\n ...getButtonSwitchDarkColors('grayBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// THEME MAP FOR EASY LOOKUP\n// ============================================================================\n\nexport const themes = {\n light: {\n neon: lightThemeNeon,\n blue: lightThemeBlue,\n orange: lightThemeOrange,\n red: lightThemeRed,\n green: lightThemeGreen,\n deepBlue: lightThemeDeepBlue,\n grayBlue: lightThemeGrayBlue,\n },\n dark: {\n neon: darkThemeNeon,\n blue: darkThemeBlue,\n orange: darkThemeOrange,\n red: darkThemeRed,\n green: darkThemeGreen,\n deepBlue: darkThemeDeepBlue,\n grayBlue: darkThemeGrayBlue,\n },\n};\n\n// Default exports for backward compatibility\nexport const lightTheme = lightThemeBlue;\nexport const darkTheme = darkThemeBlue;\n"],"mappings":""}
package/dist/styles/themes.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themes.css.js","names":[],"sources":["../../styles/themes.css.ts"],"sourcesContent":["import { createTheme } from '@vanilla-extract/css';\nimport tinycolor from 'tinycolor2';\n\nimport { darkColors, lightColors } from '../colors';\nimport { badgeDarkTheme, badgeLightTheme } from '../components/Badge/Badge.theme.css';\nimport { buttonDarkTheme, buttonLightTheme } from '../components/Button/Button.theme.css';\nimport {\n buttonSwitchDarkTheme,\n buttonSwitchLightTheme,\n} from '../components/ButtonSwitch/ButtonSwitch.theme.css';\nimport { cardDarkTheme, cardLightTheme } from '../components/Card/Card.theme.css';\nimport {\n codeBlockDarkTheme,\n codeBlockLightTheme,\n} from '../components/CodeBlock/CodeBlock.theme.css';\nimport { headingDarkTheme, headingLightTheme } from '../components/Heading/Heading.theme.css';\nimport {\n iconButtonDarkTheme,\n iconButtonLightTheme,\n} from '../components/IconButton/IconButton.theme.css';\nimport { inputDarkTheme, inputLightTheme } from '../components/Input/Input.theme.css';\nimport { panelDarkTheme, panelLightTheme } from '../components/Panel/Panel.theme.css';\nimport { skeletonDarkTheme, skeletonLightTheme } from '../components/Skeleton/Skeleton.theme.css';\nimport { textDarkTheme, textLightTheme } from '../components/Text/Text.theme.css';\nimport { textareaDarkTheme, textareaLightTheme } from '../components/Textarea/Textarea.theme.css';\nimport { tokens } from './tokens.css';\n\n// Type for primary colors\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\n// Base theme values shared across all variants\nconst baseThemeValues = {\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n },\n sizes: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n },\n fontSizes: {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n },\n fontWeights: {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n },\n radii: {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n },\n zIndices: {\n '1': '100',\n '2': '200',\n '3': '300',\n '4': '400',\n max: '999',\n },\n};\n\n// Helper to extract color scale from color map\nfunction extractColorScale(colorName: string, colors: typeof lightColors | typeof darkColors) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n A1: colors[`${colorName}A1`],\n A2: colors[`${colorName}A2`],\n A3: colors[`${colorName}A3`],\n A4: colors[`${colorName}A4`],\n A5: colors[`${colorName}A5`],\n A6: colors[`${colorName}A6`],\n A7: colors[`${colorName}A7`],\n A8: colors[`${colorName}A8`],\n A9: colors[`${colorName}A9`],\n A10: colors[`${colorName}A10`],\n A11: colors[`${colorName}A11`],\n A12: colors[`${colorName}A12`],\n };\n}\n\n// Helper to extract just the scale without alpha\nfunction extractSimpleColorScale(\n colorName: string,\n colors: typeof lightColors | typeof darkColors,\n) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n };\n}\n\n// Helper to create base colors object\nfunction createBaseColors(colors: typeof lightColors | typeof darkColors) {\n return {\n neon: extractColorScale('neon', colors),\n blue: extractColorScale('blue', colors),\n orange: extractColorScale('orange', colors),\n red: extractColorScale('red', colors),\n green: extractColorScale('green', colors),\n deepBlue: extractColorScale('deepBlue', colors),\n grayBlue: extractColorScale('grayBlue', colors),\n gray: extractColorScale('gray', colors),\n slate: extractColorScale('slate', colors),\n purple: extractColorScale('purple', colors),\n whiteA: extractSimpleColorScale('whiteA', colors),\n blackA: extractSimpleColorScale('blackA', colors),\n\n // Elevation\n '00dp': colors['00dp'],\n '01dp': colors['01dp'],\n '02dp': colors['02dp'],\n '03dp': colors['03dp'],\n '04dp': colors['04dp'],\n '05dp': colors['05dp'],\n '06dp': colors['06dp'],\n '08dp': colors['08dp'],\n '12dp': colors['12dp'],\n '16dp': colors['16dp'],\n '24dp': colors['24dp'],\n };\n}\n\n// Helper functions to generate button theme colors based on primary color\nfunction getButtonLightColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: lightColors[`${primaryColorName}A6`],\n buttonPrimaryFocusBg: tinycolor(lightColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: lightColors.deepBlue9,\n buttonSecondaryBorder: lightColors.grayBlue9,\n buttonSecondaryFocusBorder: tinycolor(lightColors[`${primaryColorName}9`])\n .setAlpha(0.19)\n .toHslString(),\n buttonRedBg: lightColors.red9,\n buttonRedFocusBg: lightColors.redA8,\n };\n}\n\nfunction getButtonDarkColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: darkColors[`${primaryColorName}A12`],\n buttonPrimaryFocusBg: tinycolor(darkColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: tinycolor(darkColors[`${primaryColorName}9`])\n .lighten(10)\n .toHslString(),\n buttonSecondaryBorder: darkColors.grayBlue9,\n buttonSecondaryFocusBorder: darkColors[`${primaryColorName}9`],\n buttonRedBg: darkColors.red10,\n buttonRedFocusBg: darkColors.redA11,\n };\n}\n\n// Helper functions to generate ButtonSwitch theme colors based on primary color\nfunction getButtonSwitchLightColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: lightColors[`${primaryColorName}9`],\n };\n}\n\nfunction getButtonSwitchDarkColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: darkColors[`${primaryColorName}9`],\n };\n}\n\n// ============================================================================\n// LIGHT THEMES\n// ============================================================================\n\nconst lightSemanticColors = {\n contentBg: lightColors['00dp'],\n hiContrast: lightColors.deepBlue11,\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n background: '#fcfcfc',\n foreground: '#1a1a1a',\n muted: '#f4f4f4',\n mutedForeground: '#646464',\n card: '#ffffff',\n cardForeground: '#1a1a1a',\n popover: '#ffffff',\n popoverForeground: '#1a1a1a',\n border: '#e3e3e3',\n input: '#e3e3e3',\n accent: '#60a5fa',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#3b82f6',\n ...badgeLightTheme,\n ...cardLightTheme,\n ...codeBlockLightTheme,\n ...panelLightTheme,\n ...textLightTheme,\n textInvalid: lightColors.red9,\n textRed: lightColors.red10,\n ...headingLightTheme,\n ...iconButtonLightTheme,\n ...inputLightTheme,\n ...textareaLightTheme,\n ...buttonLightTheme,\n buttonPrimaryText: 'white',\n buttonRedText: 'white',\n buttonRedHoverText: lightColors.red10,\n ...buttonSwitchLightTheme,\n buttonSwitchContainerBg: lightColors['02dp'],\n buttonSwitchOffColor: lightColors.deepBlue11,\n iconButtonHoverBorder: lightColors.slate9,\n iconButtonHoverBackground: lightColors.slateA3,\n iconButtonFocusBorder: lightColors.slate10,\n ...skeletonLightTheme,\n};\n\nexport const lightThemeBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.blue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('blue'),\n ...getButtonSwitchLightColors('blue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeNeon = createTheme(tokens, {\n colors: {\n primary: lightColors.neon9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('neon'),\n ...getButtonSwitchLightColors('neon'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeOrange = createTheme(tokens, {\n colors: {\n primary: lightColors.orange9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('orange'),\n ...getButtonSwitchLightColors('orange'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeRed = createTheme(tokens, {\n colors: {\n primary: lightColors.red9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('red'),\n ...getButtonSwitchLightColors('red'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGreen = createTheme(tokens, {\n colors: {\n primary: lightColors.green9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('green'),\n ...getButtonSwitchLightColors('green'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.deepBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('deepBlue'),\n ...getButtonSwitchLightColors('deepBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.grayBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('grayBlue'),\n ...getButtonSwitchLightColors('grayBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// DARK THEMES\n// ============================================================================\n\nconst darkSemanticColors = {\n contentBg: darkColors['00dp'],\n hiContrast: 'white',\n loContrast: darkColors.deepBlue2,\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(209, 29%, 19%)',\n background: '#0a0a0a',\n foreground: '#ffffff',\n muted: '#1a1a1a',\n mutedForeground: '#b4b4b4',\n card: '#1a1a1a',\n cardForeground: '#ffffff',\n popover: '#1a1a1a',\n popoverForeground: '#ffffff',\n border: '#3a3a3a',\n input: '#3a3a3a',\n accent: '#3b82f6',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#60a5fa',\n ...badgeDarkTheme,\n ...cardDarkTheme,\n ...codeBlockDarkTheme,\n ...panelDarkTheme,\n ...textDarkTheme,\n textInvalid: darkColors.red9,\n textRed: darkColors.red10,\n ...headingDarkTheme,\n ...iconButtonDarkTheme,\n ...inputDarkTheme,\n ...textareaDarkTheme,\n ...buttonDarkTheme,\n buttonPrimaryText: darkColors.deepBlue2,\n buttonRedText: 'white',\n buttonRedHoverText: darkColors.red10,\n ...buttonSwitchDarkTheme,\n buttonSwitchContainerBg: darkColors['02dp'],\n buttonSwitchOffColor: 'white',\n buttonSwitchActiveColor: darkColors.deepBlue2,\n iconButtonBackground: darkColors.deepBlue2,\n iconButtonHoverBorder: darkColors.deepBlue6,\n iconButtonHoverBackground: darkColors.slateA4,\n iconButtonFocusBorder: darkColors.deepBlue7,\n ...skeletonDarkTheme,\n};\n\nexport const darkThemeBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.blue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('blue'),\n ...getButtonSwitchDarkColors('blue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeNeon = createTheme(tokens, {\n colors: {\n primary: darkColors.neon9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('neon'),\n ...getButtonSwitchDarkColors('neon'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeOrange = createTheme(tokens, {\n colors: {\n primary: darkColors.orange9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('orange'),\n ...getButtonSwitchDarkColors('orange'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeRed = createTheme(tokens, {\n colors: {\n primary: darkColors.red9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('red'),\n ...getButtonSwitchDarkColors('red'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGreen = createTheme(tokens, {\n colors: {\n primary: darkColors.green9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('green'),\n ...getButtonSwitchDarkColors('green'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.deepBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('deepBlue'),\n ...getButtonSwitchDarkColors('deepBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.grayBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('grayBlue'),\n ...getButtonSwitchDarkColors('grayBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// THEME MAP FOR EASY LOOKUP\n// ============================================================================\n\nexport const themes = {\n light: {\n neon: lightThemeNeon,\n blue: lightThemeBlue,\n orange: lightThemeOrange,\n red: lightThemeRed,\n green: lightThemeGreen,\n deepBlue: lightThemeDeepBlue,\n grayBlue: lightThemeGrayBlue,\n },\n dark: {\n neon: darkThemeNeon,\n blue: darkThemeBlue,\n orange: darkThemeOrange,\n red: darkThemeRed,\n green: darkThemeGreen,\n deepBlue: darkThemeDeepBlue,\n grayBlue: darkThemeGrayBlue,\n },\n};\n\n// Default exports for backward compatibility\nexport const lightTheme = lightThemeBlue;\nexport const darkTheme = darkThemeBlue;\n"],"mappings":""}
1
+ {"version":3,"file":"themes.css.js","names":[],"sources":["../../styles/themes.css.ts"],"sourcesContent":["import { createTheme } from '@vanilla-extract/css';\nimport tinycolor from 'tinycolor2';\n\nimport { darkColors, lightColors } from '../colors';\nimport { badgeDarkTheme, badgeLightTheme } from '../components/Badge/Badge.theme.css';\nimport { buttonDarkTheme, buttonLightTheme } from '../components/Button/Button.theme.css';\nimport {\n buttonSwitchDarkTheme,\n buttonSwitchLightTheme,\n} from '../components/ButtonSwitch/ButtonSwitch.theme.css';\nimport { cardDarkTheme, cardLightTheme } from '../components/Card/Card.theme.css';\nimport {\n codeBlockDarkTheme,\n codeBlockLightTheme,\n} from '../components/CodeBlock/CodeBlock.theme.css';\nimport { headingDarkTheme, headingLightTheme } from '../components/Heading/Heading.theme.css';\nimport {\n iconButtonDarkTheme,\n iconButtonLightTheme,\n} from '../components/IconButton/IconButton.theme.css';\nimport { inputDarkTheme, inputLightTheme } from '../components/Input/Input.theme.css';\nimport { panelDarkTheme, panelLightTheme } from '../components/Panel/Panel.theme.css';\nimport { skeletonDarkTheme, skeletonLightTheme } from '../components/Skeleton/Skeleton.theme.css';\nimport { textDarkTheme, textLightTheme } from '../components/Text/Text.theme.css';\nimport { textareaDarkTheme, textareaLightTheme } from '../components/Textarea/Textarea.theme.css';\nimport { tokens } from './tokens.css';\n\n// Type for primary colors\nexport type PrimaryColor = 'neon' | 'blue' | 'orange' | 'red' | 'green' | 'deepBlue' | 'grayBlue';\n\n// Base theme values shared across all variants\nconst baseThemeValues = {\n fonts: {\n rubik:\n 'Rubik, -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", helvetica, arial, sans-serif',\n },\n space: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '48px',\n '8': '64px',\n '9': '80px',\n },\n sizes: {\n '1': '4px',\n '2': '8px',\n '3': '16px',\n '4': '20px',\n '5': '24px',\n '6': '32px',\n '7': '40px',\n '8': '48px',\n '9': '64px',\n '10': '80px',\n },\n fontSizes: {\n '0': '11px',\n '1': '12px',\n '2': '13px',\n '3': '14px',\n '4': '16px',\n '5': '18px',\n '6': '20px',\n '7': '22px',\n '8': '24px',\n '9': '26px',\n '10': '28px',\n '11': '32px',\n '12': '38px',\n },\n fontWeights: {\n light: '300',\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700',\n },\n radii: {\n '1': '4px',\n '2': '6px',\n '3': '8px',\n '4': '12px',\n round: '50%',\n pill: '9999px',\n button: '8px',\n },\n zIndices: {\n '1': '100',\n '2': '200',\n '3': '300',\n '4': '400',\n max: '999',\n },\n};\n\n// Helper to extract color scale from color map\nfunction extractColorScale(colorName: string, colors: typeof lightColors | typeof darkColors) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n A1: colors[`${colorName}A1`],\n A2: colors[`${colorName}A2`],\n A3: colors[`${colorName}A3`],\n A4: colors[`${colorName}A4`],\n A5: colors[`${colorName}A5`],\n A6: colors[`${colorName}A6`],\n A7: colors[`${colorName}A7`],\n A8: colors[`${colorName}A8`],\n A9: colors[`${colorName}A9`],\n A10: colors[`${colorName}A10`],\n A11: colors[`${colorName}A11`],\n A12: colors[`${colorName}A12`],\n };\n}\n\n// Helper to extract just the scale without alpha\nfunction extractSimpleColorScale(\n colorName: string,\n colors: typeof lightColors | typeof darkColors,\n) {\n return {\n '1': colors[`${colorName}1`],\n '2': colors[`${colorName}2`],\n '3': colors[`${colorName}3`],\n '4': colors[`${colorName}4`],\n '5': colors[`${colorName}5`],\n '6': colors[`${colorName}6`],\n '7': colors[`${colorName}7`],\n '8': colors[`${colorName}8`],\n '9': colors[`${colorName}9`],\n '10': colors[`${colorName}10`],\n '11': colors[`${colorName}11`],\n '12': colors[`${colorName}12`],\n };\n}\n\n// Helper to create base colors object\nfunction createBaseColors(colors: typeof lightColors | typeof darkColors) {\n return {\n neon: extractColorScale('neon', colors),\n blue: extractColorScale('blue', colors),\n orange: extractColorScale('orange', colors),\n red: extractColorScale('red', colors),\n green: extractColorScale('green', colors),\n deepBlue: extractColorScale('deepBlue', colors),\n grayBlue: extractColorScale('grayBlue', colors),\n gray: extractColorScale('gray', colors),\n slate: extractColorScale('slate', colors),\n purple: extractColorScale('purple', colors),\n whiteA: extractSimpleColorScale('whiteA', colors),\n blackA: extractSimpleColorScale('blackA', colors),\n\n // Elevation\n '00dp': colors['00dp'],\n '01dp': colors['01dp'],\n '02dp': colors['02dp'],\n '03dp': colors['03dp'],\n '04dp': colors['04dp'],\n '05dp': colors['05dp'],\n '06dp': colors['06dp'],\n '08dp': colors['08dp'],\n '12dp': colors['12dp'],\n '16dp': colors['16dp'],\n '24dp': colors['24dp'],\n };\n}\n\n// Helper functions to generate button theme colors based on primary color\nfunction getButtonLightColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: lightColors[`${primaryColorName}A6`],\n buttonPrimaryFocusBg: tinycolor(lightColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: lightColors.deepBlue9,\n buttonSecondaryBorder: lightColors.grayBlue9,\n buttonSecondaryFocusBorder: tinycolor(lightColors[`${primaryColorName}9`])\n .setAlpha(0.19)\n .toHslString(),\n buttonRedBg: lightColors.red9,\n buttonRedFocusBg: lightColors.redA8,\n };\n}\n\nfunction getButtonDarkColors(primaryColorName: string) {\n return {\n buttonPrimaryFocusBorder: darkColors[`${primaryColorName}A12`],\n buttonPrimaryFocusBg: tinycolor(darkColors[`${primaryColorName}9`]).lighten(10).toHslString(),\n buttonPrimaryGhostHoverText: tinycolor(darkColors[`${primaryColorName}9`])\n .lighten(10)\n .toHslString(),\n buttonSecondaryBorder: darkColors.grayBlue9,\n buttonSecondaryFocusBorder: darkColors[`${primaryColorName}9`],\n buttonRedBg: darkColors.red10,\n buttonRedFocusBg: darkColors.redA11,\n };\n}\n\n// Helper functions to generate ButtonSwitch theme colors based on primary color\nfunction getButtonSwitchLightColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: lightColors[`${primaryColorName}9`],\n };\n}\n\nfunction getButtonSwitchDarkColors(primaryColorName: string) {\n return {\n buttonSwitchActiveBg: darkColors[`${primaryColorName}9`],\n };\n}\n\n// ============================================================================\n// LIGHT THEMES\n// ============================================================================\n\nconst lightSemanticColors = {\n contentBg: lightColors['00dp'],\n hiContrast: lightColors.deepBlue11,\n loContrast: 'white',\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(207, 10%, 82%)',\n background: '#fcfcfc',\n foreground: '#1a1a1a',\n muted: '#f4f4f4',\n mutedForeground: '#646464',\n card: '#ffffff',\n cardForeground: '#1a1a1a',\n popover: '#ffffff',\n popoverForeground: '#1a1a1a',\n border: '#e3e3e3',\n input: '#e3e3e3',\n accent: '#60a5fa',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#3b82f6',\n ...badgeLightTheme,\n ...cardLightTheme,\n ...codeBlockLightTheme,\n ...panelLightTheme,\n ...textLightTheme,\n textInvalid: lightColors.red9,\n textRed: lightColors.red10,\n ...headingLightTheme,\n ...iconButtonLightTheme,\n ...inputLightTheme,\n ...textareaLightTheme,\n ...buttonLightTheme,\n buttonPrimaryText: 'white',\n buttonRedText: 'white',\n buttonRedHoverText: lightColors.red10,\n ...buttonSwitchLightTheme,\n buttonSwitchContainerBg: lightColors['02dp'],\n buttonSwitchOffColor: lightColors.deepBlue11,\n iconButtonHoverBorder: lightColors.slate9,\n iconButtonHoverBackground: lightColors.slateA3,\n iconButtonFocusBorder: lightColors.slate10,\n ...skeletonLightTheme,\n};\n\nexport const lightThemeBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.blue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('blue'),\n ...getButtonSwitchLightColors('blue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeNeon = createTheme(tokens, {\n colors: {\n primary: lightColors.neon9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('neon'),\n ...getButtonSwitchLightColors('neon'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeOrange = createTheme(tokens, {\n colors: {\n primary: lightColors.orange9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('orange'),\n ...getButtonSwitchLightColors('orange'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeRed = createTheme(tokens, {\n colors: {\n primary: lightColors.red9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('red'),\n ...getButtonSwitchLightColors('red'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGreen = createTheme(tokens, {\n colors: {\n primary: lightColors.green9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('green'),\n ...getButtonSwitchLightColors('green'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.deepBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('deepBlue'),\n ...getButtonSwitchLightColors('deepBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\nexport const lightThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: lightColors.grayBlue9, // Set primary to the actual color value\n ...lightSemanticColors,\n ...getButtonLightColors('grayBlue'),\n ...getButtonSwitchLightColors('grayBlue'),\n ...createBaseColors(lightColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// DARK THEMES\n// ============================================================================\n\nconst darkSemanticColors = {\n contentBg: darkColors['00dp'],\n hiContrast: 'white',\n loContrast: darkColors.deepBlue2,\n focusOutline: 'hsl(216, 100%, 64%)',\n divider: 'hsl(209, 29%, 19%)',\n background: '#0a0a0a',\n foreground: '#ffffff',\n muted: '#1a1a1a',\n mutedForeground: '#b4b4b4',\n card: '#1a1a1a',\n cardForeground: '#ffffff',\n popover: '#1a1a1a',\n popoverForeground: '#ffffff',\n border: '#3a3a3a',\n input: '#3a3a3a',\n accent: '#3b82f6',\n accentForeground: '#ffffff',\n destructive: '#dc2626',\n destructiveForeground: '#ffffff',\n ring: '#60a5fa',\n ...badgeDarkTheme,\n ...cardDarkTheme,\n ...codeBlockDarkTheme,\n ...panelDarkTheme,\n ...textDarkTheme,\n textInvalid: darkColors.red9,\n textRed: darkColors.red10,\n ...headingDarkTheme,\n ...iconButtonDarkTheme,\n ...inputDarkTheme,\n ...textareaDarkTheme,\n ...buttonDarkTheme,\n buttonPrimaryText: darkColors.deepBlue2,\n buttonRedText: 'white',\n buttonRedHoverText: darkColors.red10,\n ...buttonSwitchDarkTheme,\n buttonSwitchContainerBg: darkColors['02dp'],\n buttonSwitchOffColor: 'white',\n buttonSwitchActiveColor: darkColors.deepBlue2,\n iconButtonBackground: darkColors.deepBlue2,\n iconButtonHoverBorder: darkColors.deepBlue6,\n iconButtonHoverBackground: darkColors.slateA4,\n iconButtonFocusBorder: darkColors.deepBlue7,\n ...skeletonDarkTheme,\n};\n\nexport const darkThemeBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.blue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('blue'),\n ...getButtonSwitchDarkColors('blue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeNeon = createTheme(tokens, {\n colors: {\n primary: darkColors.neon9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('neon'),\n ...getButtonSwitchDarkColors('neon'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeOrange = createTheme(tokens, {\n colors: {\n primary: darkColors.orange9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('orange'),\n ...getButtonSwitchDarkColors('orange'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeRed = createTheme(tokens, {\n colors: {\n primary: darkColors.red9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('red'),\n ...getButtonSwitchDarkColors('red'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGreen = createTheme(tokens, {\n colors: {\n primary: darkColors.green9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('green'),\n ...getButtonSwitchDarkColors('green'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeDeepBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.deepBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('deepBlue'),\n ...getButtonSwitchDarkColors('deepBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\nexport const darkThemeGrayBlue = createTheme(tokens, {\n colors: {\n primary: darkColors.grayBlue9, // Set primary to the actual color value\n ...darkSemanticColors,\n ...getButtonDarkColors('grayBlue'),\n ...getButtonSwitchDarkColors('grayBlue'),\n ...createBaseColors(darkColors),\n },\n ...baseThemeValues,\n});\n\n// ============================================================================\n// THEME MAP FOR EASY LOOKUP\n// ============================================================================\n\nexport const themes = {\n light: {\n neon: lightThemeNeon,\n blue: lightThemeBlue,\n orange: lightThemeOrange,\n red: lightThemeRed,\n green: lightThemeGreen,\n deepBlue: lightThemeDeepBlue,\n grayBlue: lightThemeGrayBlue,\n },\n dark: {\n neon: darkThemeNeon,\n blue: darkThemeBlue,\n orange: darkThemeOrange,\n red: darkThemeRed,\n green: darkThemeGreen,\n deepBlue: darkThemeDeepBlue,\n grayBlue: darkThemeGrayBlue,\n },\n};\n\n// Default exports for backward compatibility\nexport const lightTheme = lightThemeBlue;\nexport const darkTheme = darkThemeBlue;\n"],"mappings":""}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@traefik-labs/faency",
3
3
  "description": "Traefik Labs design system",
4
- "version": "12.2.2",
4
+ "version": "12.3.0",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
7
7
  "traefiklabs",
@@ -131,7 +131,7 @@
131
131
  "jest": "30.3.0",
132
132
  "jest-axe": "10.0.0",
133
133
  "jest-environment-jsdom": "30.3.0",
134
- "lint-staged": "13.1.0",
134
+ "lint-staged": "16.4.0",
135
135
  "np": "11.0.3",
136
136
  "patch-package": "8.0.1",
137
137
  "prettier": "3.8.2",