@traefik-labs/faency 12.2.3 → 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 (23) hide show
  1. package/dist/components/Button/Button.cjs +3 -3
  2. package/dist/components/Button/Button.cjs.map +1 -1
  3. package/dist/components/Button/Button.js +3 -3
  4. package/dist/components/Button/Button.js.map +1 -1
  5. package/dist/components/Button/Button.vanilla.css.cjs.map +1 -1
  6. package/dist/components/Button/Button.vanilla.css.js.map +1 -1
  7. package/dist/components/Card/Card.vanilla.css.cjs +1 -0
  8. package/dist/components/Card/Card.vanilla.css.js +1 -0
  9. package/dist/components/Paragraph/Paragraph.vanilla.css.cjs +0 -1
  10. package/dist/components/Paragraph/Paragraph.vanilla.css.js +0 -1
  11. package/dist/faency.css +87 -73
  12. package/dist/index.d.ts +93 -1
  13. package/dist/stitches.config.cjs +2 -1
  14. package/dist/stitches.config.cjs.map +1 -1
  15. package/dist/stitches.config.js +2 -1
  16. package/dist/stitches.config.js.map +1 -1
  17. package/dist/styles/cssProps.cjs +2 -1
  18. package/dist/styles/cssProps.cjs.map +1 -1
  19. package/dist/styles/cssProps.js +2 -1
  20. package/dist/styles/cssProps.js.map +1 -1
  21. package/dist/styles/themes.css.cjs.map +1 -1
  22. package/dist/styles/themes.css.js.map +1 -1
  23. package/package.json +1 -1
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,iBAA+B;AAErC,IAAM,sBAAsB,4BAAA,QAAoB,gBAAgB,cAAA,YAAY;AAE5E,IAAa,SAAyC;CACpD,GAAG,cAAA;CAGH,SAAS;CACT,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,cAAc;CACd,SAAS;CACV;AA+KD,IAAa,EAAE,QAAQ,KAAK,aAAa,YAAY,WAAW,WAAW,YA7KrE,GAAA,gBAAA,gBAA0B;CAC9B,OAAO;EACL,QAAQ;GACN,GAAG;GACH,GAAG,yBAAA,MAAe,SAAS,oBAAoB;GAC/C,GAAG,qBAAA,MAAW,SAAS,oBAAoB;GAC3C,GAAG,sBAAA,MAAY,SAAS,oBAAoB;GAC5C,GAAG,4BAAA,MAAkB,SAAS,oBAAoB;GAClD,GAAG,sBAAA,MAAY,SAAS,oBAAoB;GAC5C,GAAG,oBAAA,MAAU,SAAS,oBAAoB;GAC1C,GAAG,wBAAA,MAAc,SAAS,oBAAoB;GAC9C,GAAG,yBAAA,MAAe,UAAU;GAC5B,GAAG,oBAAA,MAAU,SAAS,oBAAoB;GAC1C,GAAG,oBAAA,MAAU,SAAS,oBAAoB;GAC1C,GAAG,qBAAA,MAAW,SAAS,oBAAoB;GAC3C,GAAG,qBAAA,MAAW,SAAS,oBAAoB;GAC3C,GAAG,qBAAA,MAAW,SAAS,oBAAoB;GAC3C,GAAG,oBAAA,MAAU,SAAS,oBAAoB;GAC1C,GAAG,sBAAA,MAAY,SAAS,oBAAoB;GAC5C,GAAG,wBAAA,MAAc,SAAS,oBAAoB;GAC9C,GAAG,sBAAA,MAAY,SAAS,oBAAoB;GAC5C,GAAG,0BAAA,MAAgB,SAAS,oBAAoB;GAChD,GAAG,uBAAA,MAAa,SAAS,oBAAoB;GAC7C,GAAG,wBAAA,MAAc,SAAS,oBAAoB;GAC9C,GAAG,uBAAA,MAAa,SAAS,oBAAoB;GAC7C,GAAG,yBAAA,MAAe,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,4BAAA,QAAoB,SAAS,cAAA,WAAW;AAEjE,QAAO,YAAY,MAAM,EACvB,QAAQ;EACN,GAAG,cAAA;EAGH,SAAS,iBAAiB;EAC1B,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,GAAG,yBAAA,MAAe,QAAQ,iBAAiB;EAC3C,GAAG,qBAAA,MAAW,QAAQ,iBAAiB;EACvC,GAAG,sBAAA,MAAY,QAAQ,iBAAiB;EACxC,GAAG,4BAAA,MAAkB,QAAQ,iBAAiB;EAC9C,GAAG,0BAAA,MAAgB,QAAQ,iBAAiB;EAC5C,GAAG,sBAAA,MAAY,QAAQ,iBAAiB;EACxC,GAAG,oBAAA,MAAU,QAAQ,iBAAiB;EACtC,GAAG,wBAAA,MAAc,QAAQ,iBAAiB;EAC1C,GAAG,yBAAA,MAAe,SAAS;EAC3B,GAAG,oBAAA,MAAU,QAAQ,iBAAiB;EACtC,GAAG,oBAAA,MAAU,QAAQ,iBAAiB;EACtC,GAAG,qBAAA,MAAW,QAAQ,iBAAiB;EACvC,GAAG,qBAAA,MAAW,QAAQ,iBAAiB;EACvC,GAAG,qBAAA,MAAW,QAAQ,iBAAiB;EACvC,GAAG,oBAAA,MAAU,QAAQ,iBAAiB;EACtC,GAAG,sBAAA,MAAY,QAAQ,iBAAiB;EACxC,GAAG,wBAAA,MAAc,QAAQ,iBAAiB;EAC1C,GAAG,sBAAA,MAAY,QAAQ,iBAAiB;EACxC,GAAG,0BAAA,MAAgB,QAAQ,iBAAiB;EAC5C,GAAG,uBAAA,MAAa,QAAQ,iBAAiB;EACzC,GAAG,wBAAA,MAAc,QAAQ,iBAAiB;EAC1C,GAAG,uBAAA,MAAa,QAAQ,iBAAiB;EACzC,GAAG,yBAAA,MAAe,QAAQ,iBAAiB;EAC5C,EACF,CAAC;;AAGJ,IAAa,cAAc,SAAuB,OAAO,YAAY;CACnE,MAAM,oBAAoB,4BAAA,QAAoB,SAAS,cAAA,YAAY;AAEnE,QAAO,YAAY,MAAM,EACvB,QAAQ;EACN,SAAS,kBAAkB;EAC3B,GAAG,yBAAA,MAAe,SAAS,kBAAkB;EAC7C,GAAG,qBAAA,MAAW,SAAS,kBAAkB;EACzC,GAAG,sBAAA,MAAY,SAAS,kBAAkB;EAC1C,GAAG,4BAAA,MAAkB,SAAS,kBAAkB;EAChD,GAAG,0BAAA,MAAgB,SAAS,kBAAkB;EAC9C,GAAG,sBAAA,MAAY,SAAS,kBAAkB;EAC1C,GAAG,oBAAA,MAAU,SAAS,kBAAkB;EACxC,GAAG,wBAAA,MAAc,SAAS,kBAAkB;EAC5C,GAAG,yBAAA,MAAe,UAAU;EAC5B,GAAG,oBAAA,MAAU,SAAS,kBAAkB;EACxC,GAAG,oBAAA,MAAU,SAAS,kBAAkB;EACxC,GAAG,qBAAA,MAAW,SAAS,kBAAkB;EACzC,GAAG,qBAAA,MAAW,SAAS,kBAAkB;EACzC,GAAG,qBAAA,MAAW,SAAS,kBAAkB;EACzC,GAAG,oBAAA,MAAU,SAAS,kBAAkB;EACxC,GAAG,sBAAA,MAAY,SAAS,kBAAkB;EAC1C,GAAG,wBAAA,MAAc,SAAS,kBAAkB;EAC5C,GAAG,sBAAA,MAAY,SAAS,kBAAkB;EAC1C,GAAG,0BAAA,MAAgB,SAAS,kBAAkB;EAC9C,GAAG,uBAAA,MAAa,SAAS,kBAAkB;EAC3C,GAAG,wBAAA,MAAc,SAAS,kBAAkB;EAC5C,GAAG,uBAAA,MAAa,SAAS,kBAAkB;EAC3C,GAAG,yBAAA,MAAe,SAAS,kBAAkB;EAC9C,EACF,CAAC"}
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":"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"}
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;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,QAAQ;GAAO;EAC/F,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"}
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":"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"}
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":";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/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.3",
4
+ "version": "12.3.0",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
7
7
  "traefiklabs",