@magiclabs/ui-components 1.24.3 → 1.24.5
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.
- package/dist/cjs/components/primitives/button.js.map +1 -1
- package/dist/cjs/recipes/button.js +1 -1
- package/dist/cjs/recipes/button.js.map +1 -1
- package/dist/cjs/styles/semantic-tokens.js +1 -1
- package/dist/cjs/styles/semantic-tokens.js.map +1 -1
- package/dist/es/components/primitives/button.js.map +1 -1
- package/dist/es/recipes/button.js +1 -1
- package/dist/es/recipes/button.js.map +1 -1
- package/dist/es/styles/semantic-tokens.js +1 -1
- package/dist/es/styles/semantic-tokens.js.map +1 -1
- package/dist/panda.buildinfo.json +1 -1
- package/dist/types/components/primitives/button.d.ts +1 -1
- package/dist/types/components/primitives/button.d.ts.map +1 -1
- package/dist/types/recipes/button.d.ts +20 -0
- package/dist/types/recipes/button.d.ts.map +1 -1
- package/dist/types/styles/semantic-tokens.d.ts +36 -0
- package/dist/types/styles/semantic-tokens.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n textStyle?: 'negative' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n {trailingIcon && label && expand && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && label && expand && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"6tBAoBMA,EAAcC,EAAAA,WAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAAAA,IAACC,EAAI,KAAA,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAAA,aAAaD,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEKM,EAAeR,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAAAA,IAACC,EAAAA,KAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEKO,EAAa,CAAC,CAAE,QAAAC,EAAU,UAAW,KAAAC,EAAO,IAAI,IAA4B,CAChF,MAAMC,EAAkBF,IAAY,WAAaA,IAAY,WACvDG,EAAiBH,IAAY,WAAaA,IAAY,WAO5D,OACEP,EAAAA,IAACW,iBAAe,CAAA,KAPG,CACnB,GAAI,GACJ,GAAI,GACJ,GAAI,IAI+BH,CAAI,EAAG,YAAa,IAAK,SAAUC,EAAiB,QAASC,CAAkB,CAAA,CAEtH,EAEME,EAAYC,EAAAA,WAA2C,CAACd,EAAOe,IAAgB,CACnF,KAAM,CACJ,MAAAC,EACA,QAAAR,EAAU,UACV,UAAAS,EACA,KAAAR,EAAO,KACP,SAAAS,EACA,OAAAC,EACA,WAAAC,EACA,SAAUC,EACV,QAAAC,CAAO,EACLtB,EAEEuB,EAAWF,IAAqBZ,IAAS,KAAO,GAAK,IAErDe,EAAUC,EAAAA,OAAO,CAAE,QAAAjB,EAAS,UAAAS,EAAW,OAAAE,EAAQ,KAAAV,EAAM,WAAAW,EAAY,SAAU,CAACJ,CAAO,CAAA,EAEnFU,EAAcC,SAAO,IAAI,EACzBC,EAAMb,GAAgBW,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAAA,UACtB,CAAE,GAAG9B,EAAO,WAAYkB,GAAY,EAAO,EAC3CU,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,EAAAA,SAAS,CAAE,WAAYd,GAAY,EAAK,CAAE,EAC3D,CAAE,eAAAe,EAAgB,WAAAC,GAAeC,EAAAA,aAAAA,EAEvC,OAAOC,aAAWpC,EAAM,SAAUqC,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIxC,CAAW,EACnC0C,EAAeF,EAAM,IAAI/B,CAAY,EACrCkC,EAAgBjB,EAAW,EAEjC,OACEtB,gBACE,UAAWwC,EAAAA,GAAGjB,EAAQ,OAAQ,QAAS,CAACR,GAASQ,EAAQ,cAAeS,GAAkBT,EAAQ,KAAK,EACvG,IAAKI,EAAG,GACJc,EAAWb,WAAAA,EAAaE,EAAYG,CAAU,EACnC,gBAAAhB,EACf,aAAcI,EACd,aAAcA,EAEb,SAAAF,EACCnB,EAACM,IAAAA,GAAW,QAASC,EAAS,KAAMC,CAAQ,CAAA,EAE5CkC,OAACC,SAAO,CAAA,EAAE,OAAO,IAAK,EAAG,QAAS5B,IAAUsB,GAAeC,GAAgB,gBAAkB,SAC1F,SAAA,CAAAD,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuB,OAAfd,EAAQ,KAC9C,MAAOD,EACP,OAAQA,CACT,CACF,EACAgB,GAAgBvB,GAASG,GAAUlB,MAAC4C,EAAG,IAAA,CAAC,EAAGL,CAAiB,CAAA,EAC5DxB,GAASf,EAAAA,IAAA,OAAA,CAAM,UAAWuB,EAAQ,eAAQR,CAAK,CAAA,EAC/CsB,GAAetB,GAASG,GAAUlB,MAAC4C,OAAI,EAAGL,CAAiB,CAAA,EAC3DD,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAAuB,OAAff,EAAQ,KAC/C,MAAOD,EACP,OAAQA,CACT,EACF,CACM,CAAA,CAEJ,CAAA,CAEb,CAAC,CACH,CAAC,EAEKuB,EAAS,OAAO,OAAOjC,EAAW,CACtC,YAAAhB,EACA,aAAAS,CACD,CAAA,EAEDO,EAAU,YAAc"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n {trailingIcon && label && expand && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && label && expand && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var r=require("@styled/css");const
|
|
1
|
+
"use strict";var r=require("@styled/css");const o=r.sva({slots:["button","label","focus","icon","iconContainer"],base:{button:{display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",fontWeight:"semibold",boxSizing:"border-box",borderRadius:"button",border:"thin solid",borderColor:"transparent",cursor:"pointer",transition:"all 0.1s ease",outline:"none",willChange:"transform, opacity",bg:"none",_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.3",pointerEvents:"none"},_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.1s ease"},_hover:{_before:{opacity:1}}},label:{display:"flex",textAlign:"center",justifyContent:"center",whiteSpace:"nowrap",transition:"all 0.1s ease"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5},icon:{transition:"all 0.1s ease"}},variants:{size:{sm:{button:{h:9,py:1.5,px:4},label:{fontSize:"sm",lineHeight:"1.5rem"},iconContainer:{w:9,p:1.5}},md:{button:{h:12,py:3,px:6},label:{fontSize:"md",lineHeight:"1.5rem"},iconContainer:{w:12,p:3}},lg:{button:{h:15,py:4,px:6},label:{fontSize:"lg",lineHeight:"1.75rem"},iconContainer:{w:15,p:4}}},variant:{primary:{button:{bg:"brand.base"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},secondary:{button:{bg:"brand.lightest"},label:{color:"brand.darker"},icon:{color:"brand.darker"}},negative:{button:{bg:"negative.darker"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},neutral:{button:{bg:"neutral.tertiary",_light:{mixBlendMode:"multiply"}},label:{color:"text.primary"},icon:{color:"text.primary"}},tertiary:{button:{bg:"transparent",borderColor:"neutral.primary"},label:{color:"text.primary"},icon:{color:"brand.base"}},text:{button:{p:0,h:"fit-content",_hover:{_before:{opacity:0}}},label:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}},icon:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}}},transparent:{button:{bg:{base:"#ffffff14",_hover:"#ffffff4d"},_dark:{bg:"#ffffff29"},backdropFilter:"blur(3px)",_before:{display:"none"}},label:{color:"chalk"},icon:{color:"chalk"}},inverse:{button:{bg:"ink.90",_dark:{bg:"paper"}},label:{color:"chalk",_dark:{color:"ink.90"}},icon:{color:"chalk",_dark:{color:"ink.90"}}}},validating:{true:{button:{pointerEvents:"none"}}},expand:{true:{button:{width:"full"}}},iconOnly:{true:{button:{borderRadius:"full"}}},textStyle:{negative:{},neutral:{},subtle:{}}},compoundVariants:[{variant:"text",textStyle:"negative",css:{label:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}},icon:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}}}},{variant:"text",textStyle:"neutral",css:{label:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}},{variant:"text",textStyle:"subtle",css:{label:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}},{variant:"text",iconOnly:!0,css:{iconContainer:{p:1.5,w:"fit-content"}}}],defaultVariants:{size:"md",variant:"primary"}});exports.button=o;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n base: {\n button: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n fontWeight: 'semibold',\n boxSizing: 'border-box',\n borderRadius: 'button',\n border: 'thin solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n transition: 'all 0.1s ease',\n outline: 'none',\n willChange: 'transform, opacity',\n bg: 'none',\n _active: { transform: 'scale(0.95)' },\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n _before: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n opacity: 0,\n transition: 'opacity 0.1s ease',\n },\n _hover: {\n _before: {\n opacity: 1,\n },\n },\n },\n label: {\n display: 'flex',\n textAlign: 'center',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n transition: 'all 0.1s ease',\n },\n focus: {\n outlineColor: 'brand.base',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n },\n icon: {\n transition: 'all 0.1s ease',\n },\n },\n variants: {\n size: {\n sm: {\n button: {\n h: 9,\n py: 1.5,\n px: 4,\n },\n label: {\n fontSize: 'sm',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 9,\n p: 1.5,\n },\n },\n md: {\n button: {\n h: 12,\n py: 3,\n px: 6,\n },\n label: {\n fontSize: 'md',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 12,\n p: 3,\n },\n },\n lg: {\n button: {\n h: 15,\n py: 4,\n px: 6,\n },\n label: {\n fontSize: 'lg',\n lineHeight: '1.75rem',\n },\n iconContainer: {\n w: 15,\n p: 4,\n },\n },\n },\n variant: {\n primary: {\n button: {\n bg: 'brand.base',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n secondary: {\n button: {\n bg: 'brand.lightest',\n },\n label: {\n color: 'brand.darker',\n },\n icon: {\n color: 'brand.darker',\n },\n },\n negative: {\n button: {\n bg: 'negative.darker',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n neutral: {\n button: {\n bg: 'neutral.tertiary',\n _light: {\n mixBlendMode: 'multiply',\n },\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'text.primary',\n },\n },\n tertiary: {\n button: {\n bg: 'transparent',\n borderColor: 'neutral.primary',\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'brand.base',\n },\n },\n text: {\n button: {\n p: 0,\n h: 'fit-content',\n _hover: {\n _before: {\n opacity: 0,\n },\n },\n },\n label: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n icon: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n },\n transparent: {\n button: {\n bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n _dark: { bg: '#ffffff29' },\n backdropFilter: 'blur(3px)',\n _before: { display: 'none' },\n },\n label: {\n color: 'chalk',\n },\n icon: {\n color: 'chalk',\n },\n },\n },\n validating: {\n true: {\n button: {\n pointerEvents: 'none',\n },\n },\n },\n expand: {\n true: {\n button: {\n width: 'full',\n },\n },\n },\n iconOnly: {\n true: {\n button: {\n borderRadius: 'full',\n },\n },\n },\n textStyle: {\n negative: {},\n neutral: {},\n subtle: {},\n },\n },\n compoundVariants: [\n {\n variant: 'text',\n textStyle: 'negative',\n css: {\n label: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n icon: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'neutral',\n css: {\n label: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'subtle',\n css: {\n label: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n iconOnly: true,\n css: {\n iconContainer: {\n p: 1.5,\n w: 'fit-content',\n },\n },\n },\n ],\n defaultVariants: {\n size: 'md',\n variant: 'primary',\n },\n});\n"],"names":["button","sva"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n base: {\n button: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n fontWeight: 'semibold',\n boxSizing: 'border-box',\n borderRadius: 'button',\n border: 'thin solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n transition: 'all 0.1s ease',\n outline: 'none',\n willChange: 'transform, opacity',\n bg: 'none',\n _active: { transform: 'scale(0.95)' },\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n _before: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n opacity: 0,\n transition: 'opacity 0.1s ease',\n },\n _hover: {\n _before: {\n opacity: 1,\n },\n },\n },\n label: {\n display: 'flex',\n textAlign: 'center',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n transition: 'all 0.1s ease',\n },\n focus: {\n outlineColor: 'brand.base',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n },\n icon: {\n transition: 'all 0.1s ease',\n },\n },\n variants: {\n size: {\n sm: {\n button: {\n h: 9,\n py: 1.5,\n px: 4,\n },\n label: {\n fontSize: 'sm',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 9,\n p: 1.5,\n },\n },\n md: {\n button: {\n h: 12,\n py: 3,\n px: 6,\n },\n label: {\n fontSize: 'md',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 12,\n p: 3,\n },\n },\n lg: {\n button: {\n h: 15,\n py: 4,\n px: 6,\n },\n label: {\n fontSize: 'lg',\n lineHeight: '1.75rem',\n },\n iconContainer: {\n w: 15,\n p: 4,\n },\n },\n },\n variant: {\n primary: {\n button: {\n bg: 'brand.base',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n secondary: {\n button: {\n bg: 'brand.lightest',\n },\n label: {\n color: 'brand.darker',\n },\n icon: {\n color: 'brand.darker',\n },\n },\n negative: {\n button: {\n bg: 'negative.darker',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n neutral: {\n button: {\n bg: 'neutral.tertiary',\n _light: {\n mixBlendMode: 'multiply',\n },\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'text.primary',\n },\n },\n tertiary: {\n button: {\n bg: 'transparent',\n borderColor: 'neutral.primary',\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'brand.base',\n },\n },\n text: {\n button: {\n p: 0,\n h: 'fit-content',\n _hover: {\n _before: {\n opacity: 0,\n },\n },\n },\n label: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n icon: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n },\n transparent: {\n button: {\n bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n _dark: { bg: '#ffffff29' },\n backdropFilter: 'blur(3px)',\n _before: { display: 'none' },\n },\n label: {\n color: 'chalk',\n },\n icon: {\n color: 'chalk',\n },\n },\n inverse: {\n button: {\n bg: 'ink.90',\n _dark: {\n bg: 'paper',\n },\n },\n label: {\n color: 'chalk',\n _dark: {\n color: 'ink.90',\n },\n },\n icon: {\n color: 'chalk',\n _dark: {\n color: 'ink.90',\n },\n },\n },\n },\n validating: {\n true: {\n button: {\n pointerEvents: 'none',\n },\n },\n },\n expand: {\n true: {\n button: {\n width: 'full',\n },\n },\n },\n iconOnly: {\n true: {\n button: {\n borderRadius: 'full',\n },\n },\n },\n textStyle: {\n negative: {},\n neutral: {},\n subtle: {},\n },\n },\n compoundVariants: [\n {\n variant: 'text',\n textStyle: 'negative',\n css: {\n label: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n icon: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'neutral',\n css: {\n label: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'subtle',\n css: {\n label: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n iconOnly: true,\n css: {\n iconContainer: {\n p: 1.5,\n w: 'fit-content',\n },\n },\n },\n ],\n defaultVariants: {\n size: 'md',\n variant: 'primary',\n },\n});\n"],"names":["button","sva"],"mappings":"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ChB,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,YAAa,CACX,MAAO,mBACP,MAAO,CACL,MAAO,SACR,CACF,CACF,EACD,KAAM,CACJ,MAAO,kBACP,YAAa,CACX,MAAO,mBACP,MAAO,CACL,MAAO,SACR,CACF,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,eACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,MAAO,eACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,gBACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,MAAO,gBACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var r=require("@pandacss/dev");const a=r.defineSemanticTokens.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}},quaternary:{value:{base:"var(--text-quaternary, {colors.chalk})",_dark:"var(--text-quaternary-dark, {colors.ink.90})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});exports.semanticColors=a;
|
|
1
|
+
"use strict";var r=require("@pandacss/dev");const a=r.defineSemanticTokens.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_light:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_light:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_light:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_light:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_light:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_light:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}},quaternary:{value:{base:"var(--text-quaternary, {colors.chalk})",_light:"var(--text-quaternary, {colors.chalk})",_dark:"var(--text-quaternary-dark, {colors.ink.90})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_light:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_light:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_light:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_light:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_light:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_light:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_light:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_light:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_light:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_light:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_light:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_light:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_light:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_light:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_light:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_light:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_light:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_light:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_light:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_light:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_light:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_light:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_light:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_light:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_light:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_light:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_light:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_light:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_light:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});exports.semanticColors=a;
|
|
2
2
|
//# sourceMappingURL=semantic-tokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--text-quaternary, {colors.chalk})',\n _dark: 'var(--text-quaternary-dark, {colors.ink.90})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: { value: { base: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n lighter: { value: { base: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n base: { value: { base: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darker: { value: { base: '{colors.sky.70}', _dark: '{colors.sky.30}' } },\n darkest: { value: { base: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"
|
|
1
|
+
{"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _light: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _light: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _light: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _light: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _light: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _light: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--text-quaternary, {colors.chalk})',\n _light: 'var(--text-quaternary, {colors.chalk})',\n _dark: 'var(--text-quaternary-dark, {colors.ink.90})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _light: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _light: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _light: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _light: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _light: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _light: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _light: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _light: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _light: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _light: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _light: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _light: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _light: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _light: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _light: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _light: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _light: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _light: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _light: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _light: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _light: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _light: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _light: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _light: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: { value: { base: '{colors.sky.10}', _light: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n lighter: { value: { base: '{colors.sky.30}', _light: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n base: { value: { base: '{colors.sky.50}', _light: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darker: { value: { base: '{colors.sky.70}', _light: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darkest: { value: { base: '{colors.sky.90}', _light: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';\n textStyle?: 'negative' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n {trailingIcon && label && expand && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && label && expand && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"g1BAoBMA,EAAcC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAElDC,EAACC,EAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEKM,EAAeR,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEnDC,EAACC,EAAI,CAAC,WAAW,SAAS,eAAe,SACtC,SAAAC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACI,CAAA,CAEV,EAEKO,EAAa,CAAC,CAAE,QAAAC,EAAU,UAAW,KAAAC,EAAO,IAAI,IAA4B,CAChF,MAAMC,EAAkBF,IAAY,WAAaA,IAAY,WACvDG,EAAiBH,IAAY,WAAaA,IAAY,WAO5D,OACEP,EAACW,EAAe,CAAA,KAPG,CACnB,GAAI,GACJ,GAAI,GACJ,GAAI,IAI+BH,CAAI,EAAG,YAAa,IAAK,SAAUC,EAAiB,QAASC,CAAkB,CAAA,CAEtH,EAEME,EAAYC,EAA2C,CAACd,EAAOe,IAAgB,CACnF,KAAM,CACJ,MAAAC,EACA,QAAAR,EAAU,UACV,UAAAS,EACA,KAAAR,EAAO,KACP,SAAAS,EACA,OAAAC,EACA,WAAAC,EACA,SAAUC,EACV,QAAAC,CAAO,EACLtB,EAEEuB,EAAWF,IAAqBZ,IAAS,KAAO,GAAK,IAErDe,EAAUC,EAAO,CAAE,QAAAjB,EAAS,UAAAS,EAAW,OAAAE,EAAQ,KAAAV,EAAM,WAAAW,EAAY,SAAU,CAACJ,CAAO,CAAA,EAEnFU,EAAcC,EAAO,IAAI,EACzBC,EAAMb,GAAgBW,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EACtB,CAAE,GAAG9B,EAAO,WAAYkB,GAAY,EAAO,EAC3CU,CAAyC,EAErC,CAAE,WAAAG,CAAU,EAAKC,EAAS,CAAE,WAAYd,GAAY,EAAK,CAAE,EAC3D,CAAE,eAAAe,EAAgB,WAAAC,GAAeC,EAAAA,EAEvC,OAAOC,EAAWpC,EAAM,SAAUqC,GAAQ,CACxC,MAAMC,EAAcD,EAAM,IAAIxC,CAAW,EACnC0C,EAAeF,EAAM,IAAI/B,CAAY,EACrCkC,EAAgBjB,EAAW,EAEjC,OACEtB,YACE,UAAWwC,EAAGjB,EAAQ,OAAQ,QAAS,CAACR,GAASQ,EAAQ,cAAeS,GAAkBT,EAAQ,KAAK,EACvG,IAAKI,EAAG,GACJc,EAAWb,EAAaE,EAAYG,CAAU,EACnC,gBAAAhB,EACf,aAAcI,EACd,aAAcA,EAEb,SAAAF,EACCnB,EAACM,GAAW,QAASC,EAAS,KAAMC,CAAQ,CAAA,EAE5CkC,EAACC,EAAO,CAAA,EAAE,OAAO,IAAK,EAAG,QAAS5B,IAAUsB,GAAeC,GAAgB,gBAAkB,SAC1F,SAAA,CAAAD,GAAe,CACd,GAAGA,EACH,MAAO,CACL,GAAGA,EAAY,MACf,UAAYA,EAAY,MAAM,MAAuB,OAAfd,EAAQ,KAC9C,MAAOD,EACP,OAAQA,CACT,CACF,EACAgB,GAAgBvB,GAASG,GAAUlB,EAAC4C,EAAG,CAAC,EAAGL,CAAiB,CAAA,EAC5DxB,GAASf,EAAA,OAAA,CAAM,UAAWuB,EAAQ,eAAQR,CAAK,CAAA,EAC/CsB,GAAetB,GAASG,GAAUlB,EAAC4C,GAAI,EAAGL,CAAiB,CAAA,EAC3DD,GAAgB,CACf,GAAGA,EACH,MAAO,CACL,GAAGA,EAAa,MAChB,UAAYA,EAAa,MAAM,MAAuB,OAAff,EAAQ,KAC/C,MAAOD,EACP,OAAQA,CACT,EACF,CACM,CAAA,CAEJ,CAAA,CAEb,CAAC,CACH,CAAC,EAEKuB,EAAS,OAAO,OAAOjC,EAAW,CACtC,YAAAhB,EACA,aAAAS,CACD,CAAA,EAEDO,EAAU,YAAc"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/primitives/button.tsx"],"sourcesContent":["import { LoadingSpinner } from '@components/feedback';\nimport { button } from '@recipes/button';\nimport { cx } from '@styled/css';\nimport { Box, Flex, HStack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport React, { Children, MouseEventHandler, TouchEventHandler, cloneElement, forwardRef, useRef } from 'react';\nimport { mergeProps, useButton, useFocusRing, useHover, type AriaButtonProps } from 'react-aria';\n\nexport interface ButtonProps extends AriaButtonProps {\n label?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';\n textStyle?: 'negative' | 'neutral' | 'subtle';\n disabled?: boolean;\n expand?: boolean;\n validating?: boolean;\n iconSize?: number;\n onHover?: MouseEventHandler<HTMLButtonElement> | TouchEventHandler<HTMLButtonElement>;\n}\n\nconst LeadingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst TrailingIcon = createSlot(({ children, ...props }) => {\n return (\n <Flex alignItems=\"center\" justifyContent=\"center\">\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Flex>\n );\n});\n\nconst Validation = ({ variant = 'primary', size = 'md' }: Partial<ButtonProps>) => {\n const spinnerInverted = variant === 'primary' || variant === 'negative';\n const spinnerNeutral = variant === 'neutral' || variant === 'tertiary';\n const spinnerSizes = {\n sm: 20,\n md: 24,\n lg: 28,\n };\n\n return (\n <LoadingSpinner size={spinnerSizes[size]} strokeWidth={2.5} inverted={spinnerInverted} neutral={spinnerNeutral} />\n );\n};\n\nconst Component = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {\n const {\n label,\n variant = 'primary',\n textStyle,\n size = 'md',\n disabled,\n expand,\n validating,\n iconSize: iconSizeOverride,\n onHover,\n } = props;\n\n const iconSize = iconSizeOverride || (size === 'sm' ? 16 : 24);\n\n const classes = button({ variant, textStyle, expand, size, validating, iconOnly: !label });\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton(\n { ...props, isDisabled: disabled ?? false },\n ref as React.RefObject<HTMLButtonElement>,\n );\n const { hoverProps } = useHover({ isDisabled: disabled ?? false });\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const leadingIcon = slots.get(LeadingIcon);\n const trailingIcon = slots.get(TrailingIcon);\n const containerSize = iconSize / 4;\n\n return (\n <button\n className={cx(classes.button, 'group', !label && classes.iconContainer, isFocusVisible && classes.focus)}\n ref={ref}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-disabled={disabled}\n onMouseEnter={onHover as MouseEventHandler}\n onTouchStart={onHover as TouchEventHandler}\n >\n {validating ? (\n <Validation variant={variant} size={size} />\n ) : (\n <HStack w=\"full\" gap={2} justify={label && (leadingIcon || trailingIcon) ? 'space-between' : 'center'}>\n {leadingIcon && {\n ...leadingIcon,\n props: {\n ...leadingIcon.props,\n className: !leadingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n {trailingIcon && label && expand && <Box w={containerSize} />}\n {label && <span className={classes.label}>{label}</span>}\n {leadingIcon && label && expand && <Box w={containerSize} />}\n {trailingIcon && {\n ...trailingIcon,\n props: {\n ...trailingIcon.props,\n className: !trailingIcon.props.color ? classes.icon : undefined,\n width: iconSize,\n height: iconSize,\n },\n }}\n </HStack>\n )}\n </button>\n );\n });\n});\n\nconst Button = Object.assign(Component, {\n LeadingIcon,\n TrailingIcon,\n});\n\nComponent.displayName = 'Button';\n\nexport default Button;\n"],"names":["LeadingIcon","createSlot","children","props","_jsx","Flex","Children","child","cloneElement","TrailingIcon","Validation","variant","size","spinnerInverted","spinnerNeutral","LoadingSpinner","Component","forwardRef","forwardedRef","label","textStyle","disabled","expand","validating","iconSizeOverride","onHover","iconSize","classes","button","internalRef","useRef","ref","buttonProps","useButton","hoverProps","useHover","isFocusVisible","focusProps","useFocusRing","createHost","slots","leadingIcon","trailingIcon","containerSize","cx","mergeProps","_jsxs","HStack","Box","Button"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{sva as r}from"@styled/css";const
|
|
1
|
+
import{sva as r}from"@styled/css";const o=r({slots:["button","label","focus","icon","iconContainer"],base:{button:{display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",fontWeight:"semibold",boxSizing:"border-box",borderRadius:"button",border:"thin solid",borderColor:"transparent",cursor:"pointer",transition:"all 0.1s ease",outline:"none",willChange:"transform, opacity",bg:"none",_active:{transform:"scale(0.95)"},_disabled:{opacity:"0.3",pointerEvents:"none"},_before:{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"inherit",backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))",_dark:{backgroundImage:"linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))"},opacity:0,transition:"opacity 0.1s ease"},_hover:{_before:{opacity:1}}},label:{display:"flex",textAlign:"center",justifyContent:"center",whiteSpace:"nowrap",transition:"all 0.1s ease"},focus:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5},icon:{transition:"all 0.1s ease"}},variants:{size:{sm:{button:{h:9,py:1.5,px:4},label:{fontSize:"sm",lineHeight:"1.5rem"},iconContainer:{w:9,p:1.5}},md:{button:{h:12,py:3,px:6},label:{fontSize:"md",lineHeight:"1.5rem"},iconContainer:{w:12,p:3}},lg:{button:{h:15,py:4,px:6},label:{fontSize:"lg",lineHeight:"1.75rem"},iconContainer:{w:15,p:4}}},variant:{primary:{button:{bg:"brand.base"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},secondary:{button:{bg:"brand.lightest"},label:{color:"brand.darker"},icon:{color:"brand.darker"}},negative:{button:{bg:"negative.darker"},label:{color:"surface.primary"},icon:{color:"surface.primary"}},neutral:{button:{bg:"neutral.tertiary",_light:{mixBlendMode:"multiply"}},label:{color:"text.primary"},icon:{color:"text.primary"}},tertiary:{button:{bg:"transparent",borderColor:"neutral.primary"},label:{color:"text.primary"},icon:{color:"brand.base"}},text:{button:{p:0,h:"fit-content",_hover:{_before:{opacity:0}}},label:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}},icon:{color:"brand.base",_groupHover:{color:"brand.darkest",_dark:{color:"brand.lighter"}}}},transparent:{button:{bg:{base:"#ffffff14",_hover:"#ffffff4d"},_dark:{bg:"#ffffff29"},backdropFilter:"blur(3px)",_before:{display:"none"}},label:{color:"chalk"},icon:{color:"chalk"}},inverse:{button:{bg:"ink.90",_dark:{bg:"paper"}},label:{color:"chalk",_dark:{color:"ink.90"}},icon:{color:"chalk",_dark:{color:"ink.90"}}}},validating:{true:{button:{pointerEvents:"none"}}},expand:{true:{button:{width:"full"}}},iconOnly:{true:{button:{borderRadius:"full"}}},textStyle:{negative:{},neutral:{},subtle:{}}},compoundVariants:[{variant:"text",textStyle:"negative",css:{label:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}},icon:{color:"negative.darker",_groupHover:{color:"negative.darkest",_dark:{color:"ruby.70"}}}}},{variant:"text",textStyle:"neutral",css:{label:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.primary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}},{variant:"text",textStyle:"subtle",css:{label:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}},icon:{color:"text.tertiary",_groupHover:{color:"text.secondary",_dark:{color:"text.secondary"}}}}},{variant:"text",iconOnly:!0,css:{iconContainer:{p:1.5,w:"fit-content"}}}],defaultVariants:{size:"md",variant:"primary"}});export{o as button};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n base: {\n button: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n fontWeight: 'semibold',\n boxSizing: 'border-box',\n borderRadius: 'button',\n border: 'thin solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n transition: 'all 0.1s ease',\n outline: 'none',\n willChange: 'transform, opacity',\n bg: 'none',\n _active: { transform: 'scale(0.95)' },\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n _before: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n opacity: 0,\n transition: 'opacity 0.1s ease',\n },\n _hover: {\n _before: {\n opacity: 1,\n },\n },\n },\n label: {\n display: 'flex',\n textAlign: 'center',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n transition: 'all 0.1s ease',\n },\n focus: {\n outlineColor: 'brand.base',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n },\n icon: {\n transition: 'all 0.1s ease',\n },\n },\n variants: {\n size: {\n sm: {\n button: {\n h: 9,\n py: 1.5,\n px: 4,\n },\n label: {\n fontSize: 'sm',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 9,\n p: 1.5,\n },\n },\n md: {\n button: {\n h: 12,\n py: 3,\n px: 6,\n },\n label: {\n fontSize: 'md',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 12,\n p: 3,\n },\n },\n lg: {\n button: {\n h: 15,\n py: 4,\n px: 6,\n },\n label: {\n fontSize: 'lg',\n lineHeight: '1.75rem',\n },\n iconContainer: {\n w: 15,\n p: 4,\n },\n },\n },\n variant: {\n primary: {\n button: {\n bg: 'brand.base',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n secondary: {\n button: {\n bg: 'brand.lightest',\n },\n label: {\n color: 'brand.darker',\n },\n icon: {\n color: 'brand.darker',\n },\n },\n negative: {\n button: {\n bg: 'negative.darker',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n neutral: {\n button: {\n bg: 'neutral.tertiary',\n _light: {\n mixBlendMode: 'multiply',\n },\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'text.primary',\n },\n },\n tertiary: {\n button: {\n bg: 'transparent',\n borderColor: 'neutral.primary',\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'brand.base',\n },\n },\n text: {\n button: {\n p: 0,\n h: 'fit-content',\n _hover: {\n _before: {\n opacity: 0,\n },\n },\n },\n label: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n icon: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n },\n transparent: {\n button: {\n bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n _dark: { bg: '#ffffff29' },\n backdropFilter: 'blur(3px)',\n _before: { display: 'none' },\n },\n label: {\n color: 'chalk',\n },\n icon: {\n color: 'chalk',\n },\n },\n },\n validating: {\n true: {\n button: {\n pointerEvents: 'none',\n },\n },\n },\n expand: {\n true: {\n button: {\n width: 'full',\n },\n },\n },\n iconOnly: {\n true: {\n button: {\n borderRadius: 'full',\n },\n },\n },\n textStyle: {\n negative: {},\n neutral: {},\n subtle: {},\n },\n },\n compoundVariants: [\n {\n variant: 'text',\n textStyle: 'negative',\n css: {\n label: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n icon: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'neutral',\n css: {\n label: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'subtle',\n css: {\n label: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n iconOnly: true,\n css: {\n iconContainer: {\n p: 1.5,\n w: 'fit-content',\n },\n },\n },\n ],\n defaultVariants: {\n size: 'md',\n variant: 'primary',\n },\n});\n"],"names":["button","sva"],"mappings":"kCAEO,MAAMA,EAASC,EAAI,CACxB,MAAO,CAAC,SAAU,QAAS,QAAS,OAAQ,eAAe,EAC3D,KAAM,CACJ,OAAQ,CACN,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,SAAU,WACV,WAAY,WACZ,UAAW,aACX,aAAc,SACd,OAAQ,aACR,YAAa,cACb,OAAQ,UACR,WAAY,gBACZ,QAAS,OACT,WAAY,qBACZ,GAAI,OACJ,QAAS,CAAE,UAAW,aAAe,EACrC,UAAW,CAAE,QAAS,MAAO,cAAe,MAAQ,EACpD,QAAS,CACP,QAAS,KACT,SAAU,WACV,IAAK,EACL,KAAM,EACN,MAAO,EACP,OAAQ,EACR,aAAc,UACd,gBAAiB,4DACjB,MAAO,CAAE,gBAAiB,uEAAyE,EACnG,QAAS,EACT,WAAY,mBACb,EACD,OAAQ,CACN,QAAS,CACP,QAAS,CACV,CACF,CACF,EACD,MAAO,CACL,QAAS,OACT,UAAW,SACX,eAAgB,SAChB,WAAY,SACZ,WAAY,eACb,EACD,MAAO,CACL,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,EAChB,EACD,KAAM,CACJ,WAAY,eACb,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,CACN,EAAG,EACH,GAAI,IACJ,GAAI,CACL,EACD,MAAO,CACL,SAAU,KACV,WAAY,QACb,EACD,cAAe,CACb,EAAG,EACH,EAAG,GACJ,CACF,EACD,GAAI,CACF,OAAQ,CACN,EAAG,GACH,GAAI,EACJ,GAAI,CACL,EACD,MAAO,CACL,SAAU,KACV,WAAY,QACb,EACD,cAAe,CACb,EAAG,GACH,EAAG,CACJ,CACF,EACD,GAAI,CACF,OAAQ,CACN,EAAG,GACH,GAAI,EACJ,GAAI,CACL,EACD,MAAO,CACL,SAAU,KACV,WAAY,SACb,EACD,cAAe,CACb,EAAG,GACH,EAAG,CACJ,CACF,CACF,EACD,QAAS,CACP,QAAS,CACP,OAAQ,CACN,GAAI,YACL,EACD,MAAO,CACL,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,CACF,EACD,UAAW,CACT,OAAQ,CACN,GAAI,gBACL,EACD,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,cACR,CACF,EACD,SAAU,CACR,OAAQ,CACN,GAAI,iBACL,EACD,MAAO,CACL,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,CACF,EACD,QAAS,CACP,OAAQ,CACN,GAAI,mBACJ,OAAQ,CACN,aAAc,UACf,CACF,EACD,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,cACR,CACF,EACD,SAAU,CACR,OAAQ,CACN,GAAI,cACJ,YAAa,iBACd,EACD,MAAO,CACL,MAAO,cACR,EACD,KAAM,CACJ,MAAO,YACR,CACF,EACD,KAAM,CACJ,OAAQ,CACN,EAAG,EACH,EAAG,cACH,OAAQ,CACN,QAAS,CACP,QAAS,CACV,CACF,CACF,EACD,MAAO,CACL,MAAO,aACP,YAAa,CACX,MAAO,gBACP,MAAO,CACL,MAAO,eACR,CACF,CACF,EACD,KAAM,CACJ,MAAO,aACP,YAAa,CACX,MAAO,gBACP,MAAO,CACL,MAAO,eACR,CACF,CACF,CACF,EACD,YAAa,CACX,OAAQ,CACN,GAAI,CAAE,KAAM,YAAa,OAAQ,WAAa,EAC9C,MAAO,CAAE,GAAI,WAAa,EAC1B,eAAgB,YAChB,QAAS,CAAE,QAAS,MAAQ,CAC7B,EACD,MAAO,CACL,MAAO,OACR,EACD,KAAM,CACJ,MAAO,OACR,CACF,CACF,EACD,WAAY,CACV,KAAM,CACJ,OAAQ,CACN,cAAe,MAChB,CACF,CACF,EACD,OAAQ,CACN,KAAM,CACJ,OAAQ,CACN,MAAO,MACR,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,OAAQ,CACN,aAAc,MACf,CACF,CACF,EACD,UAAW,CACT,SAAU,CACV,EAAA,QAAS,CAAE,EACX,OAAQ,CAAA,CACT,CACF,EACD,iBAAkB,CAChB,CACE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,YAAa,CACX,MAAO,mBACP,MAAO,CACL,MAAO,SACR,CACF,CACF,EACD,KAAM,CACJ,MAAO,kBACP,YAAa,CACX,MAAO,mBACP,MAAO,CACL,MAAO,SACR,CACF,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,eACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,MAAO,eACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,gBACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,MAAO,gBACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../src/recipes/button.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const button = sva({\n slots: ['button', 'label', 'focus', 'icon', 'iconContainer'],\n base: {\n button: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n fontWeight: 'semibold',\n boxSizing: 'border-box',\n borderRadius: 'button',\n border: 'thin solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n transition: 'all 0.1s ease',\n outline: 'none',\n willChange: 'transform, opacity',\n bg: 'none',\n _active: { transform: 'scale(0.95)' },\n _disabled: { opacity: '0.3', pointerEvents: 'none' },\n _before: {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))',\n _dark: { backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))` },\n opacity: 0,\n transition: 'opacity 0.1s ease',\n },\n _hover: {\n _before: {\n opacity: 1,\n },\n },\n },\n label: {\n display: 'flex',\n textAlign: 'center',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n transition: 'all 0.1s ease',\n },\n focus: {\n outlineColor: 'brand.base',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n },\n icon: {\n transition: 'all 0.1s ease',\n },\n },\n variants: {\n size: {\n sm: {\n button: {\n h: 9,\n py: 1.5,\n px: 4,\n },\n label: {\n fontSize: 'sm',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 9,\n p: 1.5,\n },\n },\n md: {\n button: {\n h: 12,\n py: 3,\n px: 6,\n },\n label: {\n fontSize: 'md',\n lineHeight: '1.5rem',\n },\n iconContainer: {\n w: 12,\n p: 3,\n },\n },\n lg: {\n button: {\n h: 15,\n py: 4,\n px: 6,\n },\n label: {\n fontSize: 'lg',\n lineHeight: '1.75rem',\n },\n iconContainer: {\n w: 15,\n p: 4,\n },\n },\n },\n variant: {\n primary: {\n button: {\n bg: 'brand.base',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n secondary: {\n button: {\n bg: 'brand.lightest',\n },\n label: {\n color: 'brand.darker',\n },\n icon: {\n color: 'brand.darker',\n },\n },\n negative: {\n button: {\n bg: 'negative.darker',\n },\n label: {\n color: 'surface.primary',\n },\n icon: {\n color: 'surface.primary',\n },\n },\n neutral: {\n button: {\n bg: 'neutral.tertiary',\n _light: {\n mixBlendMode: 'multiply',\n },\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'text.primary',\n },\n },\n tertiary: {\n button: {\n bg: 'transparent',\n borderColor: 'neutral.primary',\n },\n label: {\n color: 'text.primary',\n },\n icon: {\n color: 'brand.base',\n },\n },\n text: {\n button: {\n p: 0,\n h: 'fit-content',\n _hover: {\n _before: {\n opacity: 0,\n },\n },\n },\n label: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n icon: {\n color: 'brand.base',\n _groupHover: {\n color: 'brand.darkest',\n _dark: {\n color: 'brand.lighter',\n },\n },\n },\n },\n transparent: {\n button: {\n bg: { base: '#ffffff14', _hover: '#ffffff4d' },\n _dark: { bg: '#ffffff29' },\n backdropFilter: 'blur(3px)',\n _before: { display: 'none' },\n },\n label: {\n color: 'chalk',\n },\n icon: {\n color: 'chalk',\n },\n },\n inverse: {\n button: {\n bg: 'ink.90',\n _dark: {\n bg: 'paper',\n },\n },\n label: {\n color: 'chalk',\n _dark: {\n color: 'ink.90',\n },\n },\n icon: {\n color: 'chalk',\n _dark: {\n color: 'ink.90',\n },\n },\n },\n },\n validating: {\n true: {\n button: {\n pointerEvents: 'none',\n },\n },\n },\n expand: {\n true: {\n button: {\n width: 'full',\n },\n },\n },\n iconOnly: {\n true: {\n button: {\n borderRadius: 'full',\n },\n },\n },\n textStyle: {\n negative: {},\n neutral: {},\n subtle: {},\n },\n },\n compoundVariants: [\n {\n variant: 'text',\n textStyle: 'negative',\n css: {\n label: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n icon: {\n color: 'negative.darker',\n _groupHover: {\n color: 'negative.darkest',\n _dark: {\n color: 'ruby.70',\n },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'neutral',\n css: {\n label: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.primary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n textStyle: 'subtle',\n css: {\n label: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n icon: {\n color: 'text.tertiary',\n _groupHover: {\n color: 'text.secondary',\n _dark: { color: 'text.secondary' },\n },\n },\n },\n },\n {\n variant: 'text',\n iconOnly: true,\n css: {\n iconContainer: {\n p: 1.5,\n w: 'fit-content',\n },\n },\n },\n ],\n defaultVariants: {\n size: 'md',\n variant: 'primary',\n },\n});\n"],"names":["button","sva"],"mappings":"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CE,QAAS,OACT,UAAW,WACX,IAAK,CACH,MAAO,CACL,MAAO,kBACP,YAAa,CACX,MAAO,mBACP,MAAO,CACL,MAAO,SACR,CACF,CACF,EACD,KAAM,CACJ,MAAO,kBACP,YAAa,CACX,MAAO,mBACP,MAAO,CACL,MAAO,SACR,CACF,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,UACX,IAAK,CACH,MAAO,CACL,MAAO,eACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,MAAO,eACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,UAAW,SACX,IAAK,CACH,MAAO,CACL,MAAO,gBACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,EACD,KAAM,CACJ,MAAO,gBACP,YAAa,CACX,MAAO,iBACP,MAAO,CAAE,MAAO,gBAAkB,CACnC,CACF,CACF,CACF,EACD,CACE,QAAS,OACT,SAAU,GACV,IAAK,CACH,cAAe,CACb,EAAG,IACH,EAAG,aACJ,CACF,CACF,CACF,EACD,gBAAiB,CACf,KAAM,KACN,QAAS,SACV,CACF,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineSemanticTokens as r}from"@pandacss/dev";const a=r.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}},quaternary:{value:{base:"var(--text-quaternary, {colors.chalk})",_dark:"var(--text-quaternary-dark, {colors.ink.90})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});export{a as semanticColors};
|
|
1
|
+
import{defineSemanticTokens as r}from"@pandacss/dev";const a=r.colors({surface:{primary:{value:{base:"var(--surface-primary, {colors.paper})",_light:"var(--surface-primary, {colors.paper})",_dark:"var(--surface-primary-dark, {colors.slate.0})"}},secondary:{value:{base:"var(--surface-secondary, {colors.ink.10})",_light:"var(--surface-secondary, {colors.ink.10})",_dark:"var(--surface-secondary-dark, {colors.slate.1})"}},tertiary:{value:{base:"var(--surface-tertiary, {colors.ink.20})",_light:"var(--surface-tertiary, {colors.ink.20})",_dark:"var(--surface-tertiary-dark, {colors.slate.2})"}}},text:{primary:{value:{base:"var(--text-primary, {colors.ink.90})",_light:"var(--text-primary, {colors.ink.90})",_dark:"var(--text-primary-dark, {colors.chalk})"}},secondary:{value:{base:"var(--text-secondary, {colors.ink.80})",_light:"var(--text-secondary, {colors.ink.80})",_dark:"var(--text-secondary-dark, {colors.chalk/72})"}},tertiary:{value:{base:"var(--text-tertiary, {colors.ink.70})",_light:"var(--text-tertiary, {colors.ink.70})",_dark:"var(--text-tertiary-dark, {colors.chalk/44})"}},quaternary:{value:{base:"var(--text-quaternary, {colors.chalk})",_light:"var(--text-quaternary, {colors.chalk})",_dark:"var(--text-quaternary-dark, {colors.ink.90})"}}},neutral:{primary:{value:{base:"var(--neutral-primary, {colors.ink.50})",_light:"var(--neutral-primary, {colors.ink.50})",_dark:"var(--neutral-primary-dark, {colors.chalk/16})"}},secondary:{value:{base:"var(--neutral-secondary, {colors.ink.30})",_light:"var(--neutral-secondary, {colors.ink.30})",_dark:"var(--neutral-secondary-dark, {colors.chalk/12})"}},tertiary:{value:{base:"var(--neutral-tertiary, {colors.ink.20})",_light:"var(--neutral-tertiary, {colors.ink.20})",_dark:"var(--neutral-tertiary-dark, {colors.chalk/8})"}},quaternary:{value:{base:"var(--neutral-quaternary, {colors.ink.10})",_light:"var(--neutral-quaternary, {colors.ink.10})",_dark:"var(--neutral-quaternary-dark, {colors.chalk/5})"}}},brand:{lightest:{value:{base:"var(--brand-lightest, {colors.magic.10})",_light:"var(--brand-lightest, {colors.magic.10})",_dark:"var(--brand-lightest-dark, {colors.magic.30/25})"}},lighter:{value:{base:"var(--brand-lighter, {colors.magic.30})",_light:"var(--brand-lighter, {colors.magic.30})",_dark:"var(--brand-lighter-dark, {colors.magic.30/66})"}},base:{value:{base:"var(--brand-base, {colors.magic.50})",_light:"var(--brand-base, {colors.magic.50})",_dark:"var(--brand-base-dark, {colors.magic.30})"}},darker:{value:{base:"var(--brand-darker, {colors.magic.70})",_light:"var(--brand-darker, {colors.magic.70})",_dark:"var(--brand-darker-dark, {colors.magic.10})"}},darkest:{value:{base:"var(--brand-darkest, {colors.magic.90})",_light:"var(--brand-darkest, {colors.magic.90})",_dark:"var(--brand-darkest-dark, {colors.magic.10})"}}},positive:{lightest:{value:{base:"{colors.leaf.10}",_light:"{colors.leaf.10}",_dark:"{colors.leaf.30/8}"}},lighter:{value:{base:"{colors.leaf.30}",_light:"{colors.leaf.30}",_dark:"{colors.leaf.50}"}},base:{value:{base:"{colors.leaf.50}",_light:"{colors.leaf.50}",_dark:"{colors.leaf.50}"}},darker:{value:{base:"{colors.leaf.70}",_light:"{colors.leaf.70}",_dark:"{colors.leaf.50}"}},darkest:{value:{base:"{colors.leaf.90}",_light:"{colors.leaf.90}",_dark:"{colors.leaf.50}"}}},negative:{lightest:{value:{base:"{colors.ruby.10}",_light:"{colors.ruby.10}",_dark:"{colors.ruby.30/8}"}},lighter:{value:{base:"{colors.ruby.30}",_light:"{colors.ruby.30}",_dark:"{colors.ruby.50}"}},base:{value:{base:"{colors.ruby.50}",_light:"{colors.ruby.50}",_dark:"{colors.ruby.50}"}},darker:{value:{base:"{colors.ruby.70}",_light:"{colors.ruby.70}",_dark:"{colors.ruby.50}"}},darkest:{value:{base:"{colors.ruby.90}",_light:"{colors.ruby.90}",_dark:"{colors.ruby.50}"}}},warning:{lightest:{value:{base:"{colors.gold.10}",_light:"{colors.gold.10}",_dark:"{colors.gold.30/8}"}},lighter:{value:{base:"{colors.gold.30}",_light:"{colors.gold.30}",_dark:"{colors.gold.50}"}},base:{value:{base:"{colors.gold.50}",_light:"{colors.gold.50}",_dark:"{colors.gold.50}"}},darker:{value:{base:"{colors.gold.70}",_light:"{colors.gold.70}",_dark:"{colors.gold.50}"}},darkest:{value:{base:"{colors.gold.90}",_light:"{colors.gold.90}",_dark:"{colors.gold.50}"}}},dedicated:{lightest:{value:{base:"{colors.sky.10}",_light:"{colors.sky.10}",_dark:"{colors.sky.30/8}"}},lighter:{value:{base:"{colors.sky.30}",_light:"{colors.sky.30}",_dark:"{colors.sky.30}"}},base:{value:{base:"{colors.sky.50}",_light:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darker:{value:{base:"{colors.sky.70}",_light:"{colors.sky.50}",_dark:"{colors.sky.30}"}},darkest:{value:{base:"{colors.sky.90}",_light:"{colors.sky.90}",_dark:"{colors.sky.30}"}}}});export{a as semanticColors};
|
|
2
2
|
//# sourceMappingURL=semantic-tokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--text-quaternary, {colors.chalk})',\n _dark: 'var(--text-quaternary-dark, {colors.ink.90})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: { value: { base: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n lighter: { value: { base: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n base: { value: { base: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darker: { value: { base: '{colors.sky.70}', _dark: '{colors.sky.30}' } },\n darkest: { value: { base: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"
|
|
1
|
+
{"version":3,"file":"semantic-tokens.js","sources":["../../../src/styles/semantic-tokens.ts"],"sourcesContent":["import { defineSemanticTokens } from '@pandacss/dev';\n\nexport const semanticColors = defineSemanticTokens.colors({\n surface: {\n primary: {\n value: {\n base: 'var(--surface-primary, {colors.paper})',\n _light: 'var(--surface-primary, {colors.paper})',\n _dark: 'var(--surface-primary-dark, {colors.slate.0})',\n },\n },\n secondary: {\n value: {\n base: 'var(--surface-secondary, {colors.ink.10})',\n _light: 'var(--surface-secondary, {colors.ink.10})',\n _dark: 'var(--surface-secondary-dark, {colors.slate.1})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--surface-tertiary, {colors.ink.20})',\n _light: 'var(--surface-tertiary, {colors.ink.20})',\n _dark: 'var(--surface-tertiary-dark, {colors.slate.2})',\n },\n },\n },\n text: {\n primary: {\n value: {\n base: 'var(--text-primary, {colors.ink.90})',\n _light: 'var(--text-primary, {colors.ink.90})',\n _dark: 'var(--text-primary-dark, {colors.chalk})',\n },\n },\n secondary: {\n value: {\n base: 'var(--text-secondary, {colors.ink.80})',\n _light: 'var(--text-secondary, {colors.ink.80})',\n _dark: 'var(--text-secondary-dark, {colors.chalk/72})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--text-tertiary, {colors.ink.70})',\n _light: 'var(--text-tertiary, {colors.ink.70})',\n _dark: 'var(--text-tertiary-dark, {colors.chalk/44})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--text-quaternary, {colors.chalk})',\n _light: 'var(--text-quaternary, {colors.chalk})',\n _dark: 'var(--text-quaternary-dark, {colors.ink.90})',\n },\n },\n },\n neutral: {\n primary: {\n value: {\n base: 'var(--neutral-primary, {colors.ink.50})',\n _light: 'var(--neutral-primary, {colors.ink.50})',\n _dark: 'var(--neutral-primary-dark, {colors.chalk/16})',\n },\n },\n secondary: {\n value: {\n base: 'var(--neutral-secondary, {colors.ink.30})',\n _light: 'var(--neutral-secondary, {colors.ink.30})',\n _dark: 'var(--neutral-secondary-dark, {colors.chalk/12})',\n },\n },\n tertiary: {\n value: {\n base: 'var(--neutral-tertiary, {colors.ink.20})',\n _light: 'var(--neutral-tertiary, {colors.ink.20})',\n _dark: 'var(--neutral-tertiary-dark, {colors.chalk/8})',\n },\n },\n quaternary: {\n value: {\n base: 'var(--neutral-quaternary, {colors.ink.10})',\n _light: 'var(--neutral-quaternary, {colors.ink.10})',\n _dark: 'var(--neutral-quaternary-dark, {colors.chalk/5})',\n },\n },\n },\n brand: {\n lightest: {\n value: {\n base: 'var(--brand-lightest, {colors.magic.10})',\n _light: 'var(--brand-lightest, {colors.magic.10})',\n _dark: 'var(--brand-lightest-dark, {colors.magic.30/25})',\n },\n },\n lighter: {\n value: {\n base: 'var(--brand-lighter, {colors.magic.30})',\n _light: 'var(--brand-lighter, {colors.magic.30})',\n _dark: 'var(--brand-lighter-dark, {colors.magic.30/66})',\n },\n },\n base: {\n value: {\n base: 'var(--brand-base, {colors.magic.50})',\n _light: 'var(--brand-base, {colors.magic.50})',\n _dark: 'var(--brand-base-dark, {colors.magic.30})',\n },\n },\n darker: {\n value: {\n base: 'var(--brand-darker, {colors.magic.70})',\n _light: 'var(--brand-darker, {colors.magic.70})',\n _dark: 'var(--brand-darker-dark, {colors.magic.10})',\n },\n },\n darkest: {\n value: {\n base: 'var(--brand-darkest, {colors.magic.90})',\n _light: 'var(--brand-darkest, {colors.magic.90})',\n _dark: 'var(--brand-darkest-dark, {colors.magic.10})',\n },\n },\n },\n positive: {\n lightest: { value: { base: '{colors.leaf.10}', _light: '{colors.leaf.10}', _dark: '{colors.leaf.30/8}' } },\n lighter: { value: { base: '{colors.leaf.30}', _light: '{colors.leaf.30}', _dark: '{colors.leaf.50}' } },\n base: { value: { base: '{colors.leaf.50}', _light: '{colors.leaf.50}', _dark: '{colors.leaf.50}' } },\n darker: { value: { base: '{colors.leaf.70}', _light: '{colors.leaf.70}', _dark: '{colors.leaf.50}' } },\n darkest: { value: { base: '{colors.leaf.90}', _light: '{colors.leaf.90}', _dark: '{colors.leaf.50}' } },\n },\n negative: {\n lightest: { value: { base: '{colors.ruby.10}', _light: '{colors.ruby.10}', _dark: '{colors.ruby.30/8}' } },\n lighter: { value: { base: '{colors.ruby.30}', _light: '{colors.ruby.30}', _dark: '{colors.ruby.50}' } },\n base: { value: { base: '{colors.ruby.50}', _light: '{colors.ruby.50}', _dark: '{colors.ruby.50}' } },\n darker: { value: { base: '{colors.ruby.70}', _light: '{colors.ruby.70}', _dark: '{colors.ruby.50}' } },\n darkest: { value: { base: '{colors.ruby.90}', _light: '{colors.ruby.90}', _dark: '{colors.ruby.50}' } },\n },\n warning: {\n lightest: { value: { base: '{colors.gold.10}', _light: '{colors.gold.10}', _dark: '{colors.gold.30/8}' } },\n lighter: { value: { base: '{colors.gold.30}', _light: '{colors.gold.30}', _dark: '{colors.gold.50}' } },\n base: { value: { base: '{colors.gold.50}', _light: '{colors.gold.50}', _dark: '{colors.gold.50}' } },\n darker: { value: { base: '{colors.gold.70}', _light: '{colors.gold.70}', _dark: '{colors.gold.50}' } },\n darkest: { value: { base: '{colors.gold.90}', _light: '{colors.gold.90}', _dark: '{colors.gold.50}' } },\n },\n dedicated: {\n lightest: { value: { base: '{colors.sky.10}', _light: '{colors.sky.10}', _dark: '{colors.sky.30/8}' } },\n lighter: { value: { base: '{colors.sky.30}', _light: '{colors.sky.30}', _dark: '{colors.sky.30}' } },\n base: { value: { base: '{colors.sky.50}', _light: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darker: { value: { base: '{colors.sky.70}', _light: '{colors.sky.50}', _dark: '{colors.sky.30}' } },\n darkest: { value: { base: '{colors.sky.90}', _light: '{colors.sky.90}', _dark: '{colors.sky.30}' } },\n },\n});\n"],"names":["semanticColors","defineSemanticTokens"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","height]___[value:100vh]___[cond:@media (min-width: 48rem)","width]___[value:100vw]___[cond:@media (min-width: 48rem)","background]___[value:surface.primary]___[cond:@media (min-width: 48rem)","position]___[value:relative]___[cond:@media (min-width: 48rem)","overflow]___[value:auto]___[cond:@media (min-width: 48rem)","scrollbarWidth]___[value:none]___[cond:@media (min-width: 48rem)","borderRadius]___[value:0]___[cond:@media (min-width: 48rem)","top]___[value:0]___[cond:@media (min-width: 48rem)","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","padding]___[value:6","paddingBottom]___[value:5","fontWeight]___[value:bold","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
|
|
1
|
+
{"schemaVersion":"0.40.1","styles":{"atomic":["display]___[value:inline-flex","alignItems]___[value:center","justifyContent]___[value:center","position]___[value:relative","fontWeight]___[value:semibold","boxSizing]___[value:border-box","borderRadius]___[value:button","border]___[value:thin solid","borderColor]___[value:transparent","cursor]___[value:pointer","transition]___[value:all 0.1s ease","outline]___[value:none","willChange]___[value:transform, opacity","background]___[value:none","transform]___[value:scale(0.95)]___[cond:_active","opacity]___[value:0.3]___[cond:_disabled","pointerEvents]___[value:none]___[cond:_disabled","content]___[value:\"\"]___[cond:_before","position]___[value:absolute]___[cond:_before","top]___[value:0]___[cond:_before","left]___[value:0]___[cond:_before","right]___[value:0]___[cond:_before","bottom]___[value:0]___[cond:_before","borderRadius]___[value:inherit]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))]___[cond:_before","backgroundImage]___[value:linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))]___[cond:_before<___>_dark","opacity]___[value:0]___[cond:_before","transition]___[value:opacity 0.1s ease]___[cond:_before","opacity]___[value:1]___[cond:_hover<___>_before","height]___[value:9","paddingBlock]___[value:1.5","paddingInline]___[value:4","height]___[value:12","paddingBlock]___[value:3","paddingInline]___[value:6","height]___[value:15","paddingBlock]___[value:4","background]___[value:brand.base","background]___[value:brand.lightest","background]___[value:negative.darker","background]___[value:neutral.tertiary","mixBlendMode]___[value:multiply]___[cond:_light","background]___[value:transparent","borderColor]___[value:neutral.primary","padding]___[value:0","height]___[value:fit-content","opacity]___[value:0]___[cond:_hover<___>_before","background]___[value:#ffffff14","background]___[value:#ffffff4d]___[cond:_hover","background]___[value:#ffffff29]___[cond:_dark","backdropFilter]___[value:blur(3px)","display]___[value:none]___[cond:_before","background]___[value:ink.90","background]___[value:paper]___[cond:_dark","pointerEvents]___[value:none","width]___[value:full","borderRadius]___[value:full","display]___[value:flex","textAlign]___[value:center","whiteSpace]___[value:nowrap","fontSize]___[value:sm","lineHeight]___[value:1.5rem","fontSize]___[value:md","fontSize]___[value:lg","lineHeight]___[value:1.75rem","color]___[value:surface.primary","color]___[value:brand.darker","color]___[value:text.primary","color]___[value:brand.base","color]___[value:brand.darkest]___[cond:_groupHover","color]___[value:brand.lighter]___[cond:_groupHover<___>_dark","color]___[value:chalk","color]___[value:ink.90]___[cond:_dark","color]___[value:negative.darker","color]___[value:negative.darkest]___[cond:_groupHover","color]___[value:ruby.70]___[cond:_groupHover<___>_dark","color]___[value:text.secondary]___[cond:_groupHover","color]___[value:text.secondary]___[cond:_groupHover<___>_dark","color]___[value:text.tertiary","outlineColor]___[value:brand.base","outlineStyle]___[value:solid","outlineWidth]___[value:thick","outlineOffset]___[value:0.5","width]___[value:9","padding]___[value:1.5","width]___[value:12","padding]___[value:3","width]___[value:15","padding]___[value:4","width]___[value:fit-content","borderRadius]___[value:10","outlineColor]___[value:brand.lightest]___[cond:_focusVisible","background]___[value:positive.lightest","outlineColor]___[value:positive.lightest]___[cond:_focusVisible","background]___[value:negative.lightest","outlineColor]___[value:negative.lightest]___[cond:_focusVisible","background]___[value:warning.lightest","outlineColor]___[value:warning.lightest]___[cond:_focusVisible","background]___[value:surface.secondary","outlineColor]___[value:surface.secondary]___[cond:_focusVisible","transition]___[value:transform 0.2s ease, opacity 0.2s ease","opacity]___[value:0.8]___[cond:_hover","outlineStyle]___[value:solid]___[cond:_focusVisible","outlineWidth]___[value:thick]___[cond:_focusVisible","outlineOffset]___[value:0.5]___[cond:_focusVisible","animationFillMode]___[value:forwards","animationName]___[value:scaleOut","animationDuration]___[value:150ms","scale]___[value:1]___[cond:_motionReduce","textAlign]___[value:left","color]___[value:brand.darkest","color]___[value:positive.darkest","color]___[value:negative.darkest","color]___[value:warning.darkest","color]___[value:text.secondary","textTransform]___[value:uppercase","fontSize]___[value:xs","letterSpacing]___[value:0.06rem","marginLeft]___[value:7","marginRight]___[value:7","outlineColor]___[value:brand.base]___[cond:_focusVisible","borderRadius]___[value:2]___[cond:_focusVisible","backgroundColor]___[value:surface.primary","borderRadius]___[value:1rem","cursor]___[value:default","height]___[value:10.75rem","width]___[value:10.75rem","alignItems]___[value:flex-start","alignItems]___[value:flex-end","overflow]___[value:hidden","overflow]___[value:visible","gap]___[value:0","gap]___[value:4","gap]___[value:5","gap]___[value:6","boxShadow]___[value:0px 1px 2px rgba(189, 189, 189, 0.3)","boxShadow]___[value:8px 8px 48px rgba(16, 15, 17, 0.14)","paddingInline]___[value:8","paddingBlock]___[value:6","padding]___[value:12","flex]___[value:1","maxWidth]___[value:29.125rem","maxWidth]___[value:full]___[cond:mdDown","opacity]___[value:0.3","backgroundColor]___[value:surface.tertiary","filter]___[value:brightness(0.9)]___[cond:_hover","height]___[value:full","background]___[value:surface.primary","overflow]___[value:auto","scrollbarWidth]___[value:none","top]___[value:12]___[cond:@media (min-width: 48rem)","marginInline]___[value:auto]___[cond:@media (min-width: 48rem)","width]___[value:25rem]___[cond:@media (min-width: 48rem)","height]___[value:fit-content]___[cond:@media (min-width: 48rem)","boxShadow]___[value:0px 12px 56px {colors.ink.70/15}]___[cond:@media (min-width: 48rem)","borderRadius]___[value:container]___[cond:@media (min-width: 48rem)","boxShadow]___[value:none]___[cond:@media (min-width: 48rem)<___>_dark","height]___[value:100vh]___[cond:@media (min-width: 48rem)","width]___[value:100vw]___[cond:@media (min-width: 48rem)","background]___[value:surface.primary]___[cond:@media (min-width: 48rem)","position]___[value:relative]___[cond:@media (min-width: 48rem)","overflow]___[value:auto]___[cond:@media (min-width: 48rem)","scrollbarWidth]___[value:none]___[cond:@media (min-width: 48rem)","borderRadius]___[value:0]___[cond:@media (min-width: 48rem)","top]___[value:0]___[cond:@media (min-width: 48rem)","animationName]___[value:none","scale]___[value:1","padding]___[value:2","paddingBottom]___[value:0","padding]___[value:8","borderWidth]___[value:1]___[cond:@media (min-width: 48rem)<___>_dark","borderBlock]___[value:solid]___[cond:@media (min-width: 48rem)<___>_dark","borderColor]___[value:neutral.secondary]___[cond:@media (min-width: 48rem)<___>_dark","animationName]___[value:scaleIn","animationDuration]___[value:250ms","pointerEvents]___[value:all","position]___[value:fixed","top]___[value:0","left]___[value:0","backdropBlur]___[value:0.375rem","backdropFilter]___[value:auto","backgroundColor]___[value:surface.primary/70","animationName]___[value:fadeIn","animationDuration]___[value:400ms","animationName]___[value:fadeOut","height]___[value:100vh","width]___[value:100vw","maxWidth]___[value:100rem","margin]___[value:0 auto","maxWidth]___[value:none","fontWeight]___[value:medium","backgroundColor]___[value:transparent","borderStyle]___[value:solid","borderWidth]___[value:thin","borderColor]___[value:neutral.secondary","borderRadius]___[value:input","transition]___[value:all linear 120ms","width]___[value:100%","borderColor]___[value:neutral.primary]___[cond:_hover","outlineColor]___[value:brand.base]___[cond:_focusWithin","outlineStyle]___[value:solid]___[cond:_focusWithin","outlineWidth]___[value:thick]___[cond:_focusWithin","outlineOffset]___[value:0.5]___[cond:_focusWithin","height]___[value:10","borderColor]___[value:negative.base","paddingBlock]___[value:2","borderColor]___[value:neutral.secondary]___[cond:_hover","margin]___[value:0","minWidth]___[value:10","fontWeight]___[value:normal","color]___[value:text.tertiary]___[cond:_placeholder","borderColor]___[value:neutral.primary]___[cond:_groupHover","textAlign]___[value:right","fontSize]___[value:xl","transition]___[value:opacity linear 120ms","textWrap]___[value:wrap","color]___[value:positive.base","color]___[value:warning.base","textStyle]___[value:body-xs","textStyle]___[value:body-sm","textStyle]___[value:body-md","textStyle]___[value:body-lg","textStyle]___[value:body-sm-scaled","textStyle]___[value:body-md-scaled","textStyle]___[value:body-lg-scaled","textStyle]___[value:mono-sm","textStyle]___[value:mono-md","textStyle]___[value:mono-lg","padding]___[value:20px","justifyContent]___[value:flex-start","justifyContent]___[value:flex-end","zIndex]___[value:max","boxShadow]___[value:4px 8px 20px 0px rgba(0, 0, 0, 0.15)","backgroundColor]___[value:brand.base","backgroundColor]___[value:positive.darker","backgroundColor]___[value:warning.darker","backgroundColor]___[value:negative.darker","backgroundColor]___[value:text.tertiary","backgroundColor]___[value:text.secondary]___[cond:_dark","height]___[value:1rem","width]___[value:1rem","background]___[value:linear-gradient(#00CC8F, #6851FF)","inset]___[value:0","gap]___[value:10px","flexDirection]___[value:row","display]___[value:grid","gridTemplateColumns]___[value:repeat(6, minmax(0, 1fr))","columnGap]___[value:2rem","rowGap]___[value:2rem","marginTop]___[value:6","flexDirection]___[value:column","fill]___[value:white","truncate]___[value:true","flexShrink]___[value:0","paddingTop]___[value:6","display]___[value:block","display]___[value:none","position]___[value:absolute","bottom]___[value:0","right]___[value:0","background]___[value:text.primary/20","transform]___[value:translateY(0)","transform]___[value:translateY(100%)","transition]___[value:transform 0.3s","borderRadius]___[value:xl","boxShadow]___[value:0px -12px 56px 0px rgba(119, 118, 122, 0.15)","paddingBottom]___[value:8","justifyContent]___[value:space-between","padding]___[value:6","paddingBottom]___[value:5","fontWeight]___[value:bold","minWidth]___[value:8]___[cond:& ><___>_first","minWidth]___[value:8]___[cond:& ><___>_last","outlineStyle]___[value:none","background]___[value:#ffc439","outlineColor]___[value:#ffc439","strokeWidth]___[value:2.5","gap]___[value:1","marginTop]___[value:0.5","width]___[value:60","gap]___[value:1.5","stroke]___[value:text.primary","stroke]___[value:brand.base","stroke]___[value:surface.primary","strokeOpacity]___[value:0.12","animation]___[value:spin 1s linear infinite","transformOrigin]___[value:center center","borderRadius]___[value:2rem","borderWidth]___[value:thick","borderColor]___[value:surface.primary","maxWidth]___[value:72","width]___[value:max","paddingInline]___[value:3","boxShadow]___[value:0px 4px 20px 0px rgba(0, 0, 0, 0.10)","left]___[value:50%","transform]___[value:translateX(-50%) translateY(calc(-100% - 0.75rem))","height]___[value:4","transform]___[value:translateX(-50%) translateY(0.75rem)","overflowWrap]___[value:break-word","wordBreak]___[value:break-word","fontWeight]___[value:600","justifyContent]___[value:space-around","background]___[value:neutral.quaternary","borderRadius]___[value:lg","minWidth]___[value:15rem","width]___[value:40%","borderLeft]___[value:thin solid","borderColor]___[value:neutral.tertiary","height]___[value:8","gap]___[value:3","userSelect]___[value:none","userSelect]___[value:auto","filter]___[value:blur(10px)","textWrap]___[value:nowrap","width]___[value:22","height]___[value:22","color]___[value:positive.darker","outlineOffset]___[value:1","fontVariant]___[value:no-contextual","width]___[value:1.125rem","height]___[value:1.125rem","objectFit]___[value:cover","borderStartRadius]___[value:input","width]___[value:20","background]___[value:surface.tertiary]___[cond:_hover","borderLeftWidth]___[value:thin","borderRadius]___[value:0","gap]___[value:2","background]___[value:brand.lightest]___[cond:_hover","transform]___[value:rotate(180)","width]___[value:14","height]___[value:14","top]___[value:55","maxHeight]___[value:17.5rem","overflowY]___[value:auto","width]___[value:18","height]___[value:18","minWidth]___[value:0","maxWidth]___[value:30rem","caretColor]___[value:transparent","borderRadius]___[value:0.5rem","marginBlock]___[value:4","maxWidth]___[value:8xl","marginInline]___[value:auto","paddingInline]___[value:6]___[cond:md","paddingInline]___[value:8]___[cond:lg","overlay]___[value:true","marginTop]___[value:8","marginTop]___[value:4","transition]___[value:background-color 0.2s","background]___[value:neutral.secondary]___[cond:_hover","color]___[value:neutral.primary","borderRadius]___[value:2xl","boxShadow]___[value:0 6px 8px 2px rgba(0, 0, 0, .18)]___[cond:_hover","width]___[value:30","height]___[value:30","minHeight]___[value:20","opacity]___[value:1","borderRadius]___[value:sm","borderColor]___[value:brand.base","borderColor]___[value:text.tertiary","pointerEvents]___[value:auto","outlineColor]___[value:transparent","width]___[value:5","height]___[value:5","transition]___[value:background-color 0.2s ease, border-color 0.2s ease","cursor]___[value:pointer]___[cond:_hover","borderColor]___[value:brand.base]___[cond:_hover","width]___[value:2.5","height]___[value:0.5","marginLeft]___[value:3","srOnly]___[value:true","height]___[value:16","width]___[value:16","caret]___[value:18","check]___[value:16","height]___[value:3rem","mult]___[value:2.5","width]___[value:4","display]___[value:inline-block","alignItems]___[value:start","borderWidth]___[value:1","maxWidth]___[value:52","gap]___[value:10","transition]___[value:border-color 0.2s ease","width]___[value:6","height]___[value:6","flex]___[value:0 0 auto","width]___[value:3","height]___[value:3","borderRadius]___[value:9999px","padding]___[value:1","background]___[value:ink.10","background]___[value:slate.2]___[cond:_dark","opacity]___[value:0.5","background]___[value:paper","background]___[value:slate.4]___[cond:_dark","boxShadow]___[value:0px 4px 20px 0px {colors.ink.90/10}","transition]___[value:transform 0.2s ease","borderRadius]___[value:inherit","marginLeft]___[value:-1","height]___[value:13","transition]___[value:background 0s","transition]___[value:background 0.2s ease","background]___[value:transparent]___[cond:_hover","background]___[value:ink.20]___[cond:_hover","background]___[value:transparent]___[cond:_hover<___>_dark","background]___[value:slate.1]___[cond:_hover<___>_dark","zIndex]___[value:0","marginRight]___[value:1","marginRight]___[value:2","background]___[value:neutral.primary","background]___[value:ink.70]___[cond:_hover","background]___[value:brand.base]___[cond:_hover","background]___[value:slate.4]___[cond:_hover<___>_dark","background]___[value:brand.base]___[cond:_hover<___>_dark","paddingInline]___[value:0.5","width]___[value:11","transition]___[value:background-color 0.2s ease","left]___[value:6","transition]___[value:left 0.2s ease","textStyle]___[value:h1-scaled","textStyle]___[value:h1","textStyle]___[value:h2-scaled","textStyle]___[value:h2","textStyle]___[value:h3-scaled","textStyle]___[value:h3","textStyle]___[value:h4-scaled","textStyle]___[value:h4","textStyle]___[value:h5-scaled","textStyle]___[value:h5","textStyle]___[value:h6-scaled","textStyle]___[value:h6","truncate]___[value:false","strokeWidth]___[value:4","width]___[value:36","height]___[value:36","marginBlock]___[value:3","height]___[value:2.625rem","width]___[value:2.625rem","boxShadow]___[value:0.125rem 0.125rem 1.5rem {colors.ink.70/15}","fill]___[value:ink.50","fill]___[value:ink.70]___[cond:_dark","fill]___[value:url(\"#logo-gradient\")]___[cond:_hover","fill]___[value:url(\"#logo-gradient\")]___[cond:_active","fill]___[value:url(\"#logo-gradient\")]___[cond:_focus","color]___[value:text.tertiary]___[cond:_groupHover","color]___[value:ink.50","color]___[value:ink.70]___[cond:_dark","backgroundColor]___[value:magic.10","animation]___[value:fadeIn 0.5s, moveRight 1s 0.5s forwards","borderRadius]___[value:50%","borderWidth]___[value:3px","height]___[value:3.875rem","width]___[value:3.875rem","marginTop]___[value:-3px","marginRight]___[value:0.9rem","zIndex]___[value:1","marginLeft]___[value:0.9rem","animation]___[value:fadeIn 0.5s, moveLeft 1s 0.5s forwards","height]___[value:34","width]___[value:34","height]___[value:56","width]___[value:56","marginBlock]___[value:10","height]___[value:250","color]___[value:ink.70","gridTemplateColumns]___[value:2","gap]___[value:8","width]___[value:40","height]___[value:40"],"recipes":{}}}
|
|
@@ -3,7 +3,7 @@ import { type AriaButtonProps } from 'react-aria';
|
|
|
3
3
|
export interface ButtonProps extends AriaButtonProps {
|
|
4
4
|
label?: string;
|
|
5
5
|
size?: 'sm' | 'md' | 'lg';
|
|
6
|
-
variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent';
|
|
6
|
+
variant?: 'primary' | 'secondary' | 'negative' | 'neutral' | 'tertiary' | 'text' | 'transparent' | 'inverse';
|
|
7
7
|
textStyle?: 'negative' | 'neutral' | 'subtle';
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
expand?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAChH,OAAO,EAAiD,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAEjG,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7G,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACvF;AA6GD,QAAA,MAAM,MAAM;;;CAGV,CAAC;AAIH,eAAe,MAAM,CAAC"}
|
|
@@ -156,6 +156,26 @@ export declare const button: import("../../styled-system/types").SlotRecipeRunti
|
|
|
156
156
|
color: "chalk";
|
|
157
157
|
};
|
|
158
158
|
};
|
|
159
|
+
inverse: {
|
|
160
|
+
button: {
|
|
161
|
+
bg: "ink.90";
|
|
162
|
+
_dark: {
|
|
163
|
+
bg: "paper";
|
|
164
|
+
};
|
|
165
|
+
};
|
|
166
|
+
label: {
|
|
167
|
+
color: "chalk";
|
|
168
|
+
_dark: {
|
|
169
|
+
color: "ink.90";
|
|
170
|
+
};
|
|
171
|
+
};
|
|
172
|
+
icon: {
|
|
173
|
+
color: "chalk";
|
|
174
|
+
_dark: {
|
|
175
|
+
color: "ink.90";
|
|
176
|
+
};
|
|
177
|
+
};
|
|
178
|
+
};
|
|
159
179
|
};
|
|
160
180
|
validating: {
|
|
161
181
|
true: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/recipes/button.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/recipes/button.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+UjB,CAAC"}
|
|
@@ -3,18 +3,21 @@ export declare const semanticColors: {
|
|
|
3
3
|
primary: {
|
|
4
4
|
value: {
|
|
5
5
|
base: string;
|
|
6
|
+
_light: string;
|
|
6
7
|
_dark: string;
|
|
7
8
|
};
|
|
8
9
|
};
|
|
9
10
|
secondary: {
|
|
10
11
|
value: {
|
|
11
12
|
base: string;
|
|
13
|
+
_light: string;
|
|
12
14
|
_dark: string;
|
|
13
15
|
};
|
|
14
16
|
};
|
|
15
17
|
tertiary: {
|
|
16
18
|
value: {
|
|
17
19
|
base: string;
|
|
20
|
+
_light: string;
|
|
18
21
|
_dark: string;
|
|
19
22
|
};
|
|
20
23
|
};
|
|
@@ -23,24 +26,28 @@ export declare const semanticColors: {
|
|
|
23
26
|
primary: {
|
|
24
27
|
value: {
|
|
25
28
|
base: string;
|
|
29
|
+
_light: string;
|
|
26
30
|
_dark: string;
|
|
27
31
|
};
|
|
28
32
|
};
|
|
29
33
|
secondary: {
|
|
30
34
|
value: {
|
|
31
35
|
base: string;
|
|
36
|
+
_light: string;
|
|
32
37
|
_dark: string;
|
|
33
38
|
};
|
|
34
39
|
};
|
|
35
40
|
tertiary: {
|
|
36
41
|
value: {
|
|
37
42
|
base: string;
|
|
43
|
+
_light: string;
|
|
38
44
|
_dark: string;
|
|
39
45
|
};
|
|
40
46
|
};
|
|
41
47
|
quaternary: {
|
|
42
48
|
value: {
|
|
43
49
|
base: string;
|
|
50
|
+
_light: string;
|
|
44
51
|
_dark: string;
|
|
45
52
|
};
|
|
46
53
|
};
|
|
@@ -49,24 +56,28 @@ export declare const semanticColors: {
|
|
|
49
56
|
primary: {
|
|
50
57
|
value: {
|
|
51
58
|
base: string;
|
|
59
|
+
_light: string;
|
|
52
60
|
_dark: string;
|
|
53
61
|
};
|
|
54
62
|
};
|
|
55
63
|
secondary: {
|
|
56
64
|
value: {
|
|
57
65
|
base: string;
|
|
66
|
+
_light: string;
|
|
58
67
|
_dark: string;
|
|
59
68
|
};
|
|
60
69
|
};
|
|
61
70
|
tertiary: {
|
|
62
71
|
value: {
|
|
63
72
|
base: string;
|
|
73
|
+
_light: string;
|
|
64
74
|
_dark: string;
|
|
65
75
|
};
|
|
66
76
|
};
|
|
67
77
|
quaternary: {
|
|
68
78
|
value: {
|
|
69
79
|
base: string;
|
|
80
|
+
_light: string;
|
|
70
81
|
_dark: string;
|
|
71
82
|
};
|
|
72
83
|
};
|
|
@@ -75,30 +86,35 @@ export declare const semanticColors: {
|
|
|
75
86
|
lightest: {
|
|
76
87
|
value: {
|
|
77
88
|
base: string;
|
|
89
|
+
_light: string;
|
|
78
90
|
_dark: string;
|
|
79
91
|
};
|
|
80
92
|
};
|
|
81
93
|
lighter: {
|
|
82
94
|
value: {
|
|
83
95
|
base: string;
|
|
96
|
+
_light: string;
|
|
84
97
|
_dark: string;
|
|
85
98
|
};
|
|
86
99
|
};
|
|
87
100
|
base: {
|
|
88
101
|
value: {
|
|
89
102
|
base: string;
|
|
103
|
+
_light: string;
|
|
90
104
|
_dark: string;
|
|
91
105
|
};
|
|
92
106
|
};
|
|
93
107
|
darker: {
|
|
94
108
|
value: {
|
|
95
109
|
base: string;
|
|
110
|
+
_light: string;
|
|
96
111
|
_dark: string;
|
|
97
112
|
};
|
|
98
113
|
};
|
|
99
114
|
darkest: {
|
|
100
115
|
value: {
|
|
101
116
|
base: string;
|
|
117
|
+
_light: string;
|
|
102
118
|
_dark: string;
|
|
103
119
|
};
|
|
104
120
|
};
|
|
@@ -107,30 +123,35 @@ export declare const semanticColors: {
|
|
|
107
123
|
lightest: {
|
|
108
124
|
value: {
|
|
109
125
|
base: string;
|
|
126
|
+
_light: string;
|
|
110
127
|
_dark: string;
|
|
111
128
|
};
|
|
112
129
|
};
|
|
113
130
|
lighter: {
|
|
114
131
|
value: {
|
|
115
132
|
base: string;
|
|
133
|
+
_light: string;
|
|
116
134
|
_dark: string;
|
|
117
135
|
};
|
|
118
136
|
};
|
|
119
137
|
base: {
|
|
120
138
|
value: {
|
|
121
139
|
base: string;
|
|
140
|
+
_light: string;
|
|
122
141
|
_dark: string;
|
|
123
142
|
};
|
|
124
143
|
};
|
|
125
144
|
darker: {
|
|
126
145
|
value: {
|
|
127
146
|
base: string;
|
|
147
|
+
_light: string;
|
|
128
148
|
_dark: string;
|
|
129
149
|
};
|
|
130
150
|
};
|
|
131
151
|
darkest: {
|
|
132
152
|
value: {
|
|
133
153
|
base: string;
|
|
154
|
+
_light: string;
|
|
134
155
|
_dark: string;
|
|
135
156
|
};
|
|
136
157
|
};
|
|
@@ -139,30 +160,35 @@ export declare const semanticColors: {
|
|
|
139
160
|
lightest: {
|
|
140
161
|
value: {
|
|
141
162
|
base: string;
|
|
163
|
+
_light: string;
|
|
142
164
|
_dark: string;
|
|
143
165
|
};
|
|
144
166
|
};
|
|
145
167
|
lighter: {
|
|
146
168
|
value: {
|
|
147
169
|
base: string;
|
|
170
|
+
_light: string;
|
|
148
171
|
_dark: string;
|
|
149
172
|
};
|
|
150
173
|
};
|
|
151
174
|
base: {
|
|
152
175
|
value: {
|
|
153
176
|
base: string;
|
|
177
|
+
_light: string;
|
|
154
178
|
_dark: string;
|
|
155
179
|
};
|
|
156
180
|
};
|
|
157
181
|
darker: {
|
|
158
182
|
value: {
|
|
159
183
|
base: string;
|
|
184
|
+
_light: string;
|
|
160
185
|
_dark: string;
|
|
161
186
|
};
|
|
162
187
|
};
|
|
163
188
|
darkest: {
|
|
164
189
|
value: {
|
|
165
190
|
base: string;
|
|
191
|
+
_light: string;
|
|
166
192
|
_dark: string;
|
|
167
193
|
};
|
|
168
194
|
};
|
|
@@ -171,30 +197,35 @@ export declare const semanticColors: {
|
|
|
171
197
|
lightest: {
|
|
172
198
|
value: {
|
|
173
199
|
base: string;
|
|
200
|
+
_light: string;
|
|
174
201
|
_dark: string;
|
|
175
202
|
};
|
|
176
203
|
};
|
|
177
204
|
lighter: {
|
|
178
205
|
value: {
|
|
179
206
|
base: string;
|
|
207
|
+
_light: string;
|
|
180
208
|
_dark: string;
|
|
181
209
|
};
|
|
182
210
|
};
|
|
183
211
|
base: {
|
|
184
212
|
value: {
|
|
185
213
|
base: string;
|
|
214
|
+
_light: string;
|
|
186
215
|
_dark: string;
|
|
187
216
|
};
|
|
188
217
|
};
|
|
189
218
|
darker: {
|
|
190
219
|
value: {
|
|
191
220
|
base: string;
|
|
221
|
+
_light: string;
|
|
192
222
|
_dark: string;
|
|
193
223
|
};
|
|
194
224
|
};
|
|
195
225
|
darkest: {
|
|
196
226
|
value: {
|
|
197
227
|
base: string;
|
|
228
|
+
_light: string;
|
|
198
229
|
_dark: string;
|
|
199
230
|
};
|
|
200
231
|
};
|
|
@@ -203,30 +234,35 @@ export declare const semanticColors: {
|
|
|
203
234
|
lightest: {
|
|
204
235
|
value: {
|
|
205
236
|
base: string;
|
|
237
|
+
_light: string;
|
|
206
238
|
_dark: string;
|
|
207
239
|
};
|
|
208
240
|
};
|
|
209
241
|
lighter: {
|
|
210
242
|
value: {
|
|
211
243
|
base: string;
|
|
244
|
+
_light: string;
|
|
212
245
|
_dark: string;
|
|
213
246
|
};
|
|
214
247
|
};
|
|
215
248
|
base: {
|
|
216
249
|
value: {
|
|
217
250
|
base: string;
|
|
251
|
+
_light: string;
|
|
218
252
|
_dark: string;
|
|
219
253
|
};
|
|
220
254
|
};
|
|
221
255
|
darker: {
|
|
222
256
|
value: {
|
|
223
257
|
base: string;
|
|
258
|
+
_light: string;
|
|
224
259
|
_dark: string;
|
|
225
260
|
};
|
|
226
261
|
};
|
|
227
262
|
darkest: {
|
|
228
263
|
value: {
|
|
229
264
|
base: string;
|
|
265
|
+
_light: string;
|
|
230
266
|
_dark: string;
|
|
231
267
|
};
|
|
232
268
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/semantic-tokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/semantic-tokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJzB,CAAC"}
|