@traefik-labs/faency 12.2.3 → 12.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/Button.cjs +3 -3
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js +3 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.vanilla.css.cjs.map +1 -1
- package/dist/components/Button/Button.vanilla.css.js.map +1 -1
- package/dist/components/Card/Card.vanilla.css.cjs +1 -0
- package/dist/components/Card/Card.vanilla.css.js +1 -0
- package/dist/components/Paragraph/Paragraph.vanilla.css.cjs +0 -1
- package/dist/components/Paragraph/Paragraph.vanilla.css.js +0 -1
- package/dist/faency.css +87 -73
- package/dist/index.d.ts +93 -1
- package/dist/stitches.config.cjs +2 -1
- package/dist/stitches.config.cjs.map +1 -1
- package/dist/stitches.config.js +2 -1
- package/dist/stitches.config.js.map +1 -1
- package/dist/styles/cssProps.cjs +2 -1
- package/dist/styles/cssProps.cjs.map +1 -1
- package/dist/styles/cssProps.js +2 -1
- package/dist/styles/cssProps.js.map +1 -1
- package/dist/styles/themes.css.cjs.map +1 -1
- package/dist/styles/themes.css.js.map +1 -1
- package/package.json +1 -1
|
@@ -74,21 +74,21 @@ var StyledButton = require_stitches_config.styled("button", BUTTON_BASE_STYLES,
|
|
|
74
74
|
variants: {
|
|
75
75
|
size: {
|
|
76
76
|
small: {
|
|
77
|
-
borderRadius: "$
|
|
77
|
+
borderRadius: "$button",
|
|
78
78
|
height: "$5",
|
|
79
79
|
px: "$2",
|
|
80
80
|
fontSize: "$1",
|
|
81
81
|
lineHeight: "$sizes$5"
|
|
82
82
|
},
|
|
83
83
|
medium: {
|
|
84
|
-
borderRadius: "$
|
|
84
|
+
borderRadius: "$button",
|
|
85
85
|
height: "$6",
|
|
86
86
|
px: "$3",
|
|
87
87
|
fontSize: "$3",
|
|
88
88
|
lineHeight: "$sizes$6"
|
|
89
89
|
},
|
|
90
90
|
large: {
|
|
91
|
-
borderRadius: "$
|
|
91
|
+
borderRadius: "$button",
|
|
92
92
|
height: "$7",
|
|
93
93
|
px: "$3",
|
|
94
94
|
fontSize: "$3",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.cjs","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -72,21 +72,21 @@ var StyledButton = styled("button", BUTTON_BASE_STYLES, {
|
|
|
72
72
|
variants: {
|
|
73
73
|
size: {
|
|
74
74
|
small: {
|
|
75
|
-
borderRadius: "$
|
|
75
|
+
borderRadius: "$button",
|
|
76
76
|
height: "$5",
|
|
77
77
|
px: "$2",
|
|
78
78
|
fontSize: "$1",
|
|
79
79
|
lineHeight: "$sizes$5"
|
|
80
80
|
},
|
|
81
81
|
medium: {
|
|
82
|
-
borderRadius: "$
|
|
82
|
+
borderRadius: "$button",
|
|
83
83
|
height: "$6",
|
|
84
84
|
px: "$3",
|
|
85
85
|
fontSize: "$3",
|
|
86
86
|
lineHeight: "$sizes$6"
|
|
87
87
|
},
|
|
88
88
|
large: {
|
|
89
|
-
borderRadius: "$
|
|
89
|
+
borderRadius: "$button",
|
|
90
90
|
height: "$7",
|
|
91
91
|
px: "$3",
|
|
92
92
|
fontSize: "$3",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$button',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$button',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$button',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n boxShadow: 'none',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.css.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii
|
|
1
|
+
{"version":3,"file":"Button.vanilla.css.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.css.js","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii
|
|
1
|
+
{"version":3,"file":"Button.vanilla.css.js","names":[],"sources":["../../../components/Button/Button.vanilla.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\nimport { recipe, RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\n// Background size constants for waiting animation\nconst BG_SIZES = {\n small: tokens.sizes['8'],\n medium: tokens.sizes['9'],\n large: tokens.sizes['10'],\n};\n\n// Keyframe animation for waiting state\nconst backgroundSlide = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['9']})` },\n});\n\nconst backgroundSlideSmall = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['8']})` },\n});\n\nconst backgroundSlideLarge = keyframes({\n '100%': { transform: `translateX(${tokens.sizes['10']})` },\n});\n\n// Base button styles\nconst baseButton = style({\n // Reset\n appearance: 'none',\n all: 'unset',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n // Layout\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n position: 'relative',\n overflow: 'hidden',\n\n // Typography\n fontFamily: tokens.fonts.rubik,\n fontWeight: tokens.fontWeights.medium,\n fontVariantNumeric: 'tabular-nums',\n lineHeight: '1',\n\n // Pseudo-elements for hover/active effects\n selectors: {\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.focusOutline}`,\n },\n '&:focus-visible::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:focus-visible::after': {\n opacity: 0.15,\n },\n '&:active::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n },\n '&:hover::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&:hover::after': {\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport const buttonRecipe = recipe({\n base: baseButton,\n\n variants: {\n size: {\n small: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['5'],\n paddingLeft: tokens.space['2'],\n paddingRight: tokens.space['2'],\n fontSize: tokens.fontSizes['1'],\n lineHeight: tokens.sizes['5'],\n },\n medium: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['6'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['6'],\n },\n large: {\n borderRadius: tokens.radii.button,\n height: tokens.sizes['7'],\n paddingLeft: tokens.space['3'],\n paddingRight: tokens.space['3'],\n fontSize: tokens.fontSizes['3'],\n lineHeight: tokens.sizes['7'],\n },\n },\n variant: {\n primary: {\n backgroundColor: tokens.colors.primary,\n color: tokens.colors.buttonPrimaryText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonPrimaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n secondary: {\n backgroundColor: tokens.colors.buttonSecondaryBg,\n color: tokens.colors.buttonSecondaryText,\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryBorder}`,\n selectors: {\n '&:active': {\n boxShadow: `inset 0 0 0 1px ${tokens.colors.buttonSecondaryBorder}`,\n },\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonSecondaryFocusBorder}`,\n },\n },\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover::after': {\n backgroundColor: tokens.colors.primary,\n },\n },\n },\n },\n },\n red: {\n backgroundColor: tokens.colors.buttonRedBg,\n color: tokens.colors.buttonRedText,\n selectors: {\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px ${tokens.colors.buttonRedFocusBg}`,\n },\n },\n },\n },\n state: {\n active: {\n backgroundColor: tokens.colors.deepBlue['5'],\n color: tokens.colors.deepBlue['11'],\n selectors: {\n '&:active': {\n backgroundColor: tokens.colors.deepBlue['5'],\n },\n },\n },\n waiting: {\n backgroundColor: tokens.colors.deepBlue['3'],\n boxShadow: `inset 0 0 0 1px ${tokens.colors.deepBlue['4']}`,\n color: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n selectors: {\n '&::after': {\n left: '-100%',\n width: '200%',\n backgroundSize: BG_SIZES.medium,\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n ${tokens.colors.deepBlue['4']} 33%,\n ${tokens.colors.deepBlue['4']} 66%,\n transparent 66%\n )`,\n animation: `${backgroundSlide} 500ms linear infinite`,\n },\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: tokens.radii.pill,\n },\n },\n },\n\n compoundVariants: [\n // Primary + Ghost\n {\n variants: { variant: 'primary', ghost: true },\n style: {\n color: tokens.colors.primary,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonPrimaryGhostHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Primary + Active\n {\n variants: { variant: 'primary', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonPrimaryFocusBg,\n color: tokens.colors.buttonPrimaryText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Secondary + Waiting\n {\n variants: { variant: 'secondary', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Secondary + Ghost\n {\n variants: { variant: 'secondary', ghost: true },\n style: {\n backgroundColor: 'transparent',\n color: tokens.colors.buttonSecondaryText,\n boxShadow: 'none',\n },\n },\n // Red + Waiting\n {\n variants: { variant: 'red', state: 'waiting' },\n style: {\n backgroundColor: tokens.colors.deepBlue['3'],\n color: 'transparent',\n },\n },\n // Red + Active\n {\n variants: { variant: 'red', state: 'active' },\n style: {\n backgroundColor: tokens.colors.buttonRedFocusBg,\n color: tokens.colors.buttonRedText,\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n // Red + Ghost\n {\n variants: { variant: 'red', ghost: true },\n style: {\n color: tokens.colors.buttonRedBg,\n backgroundColor: 'transparent',\n '@media': {\n '(hover: hover)': {\n selectors: {\n '&:hover': {\n color: tokens.colors.buttonRedHoverText,\n backgroundColor: 'transparent',\n },\n },\n },\n },\n },\n },\n // Small + Waiting (specific animation)\n {\n variants: { size: 'small', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.small,\n animation: `${backgroundSlideSmall} 500ms linear infinite`,\n },\n },\n },\n },\n // Large + Waiting (specific animation)\n {\n variants: { size: 'large', state: 'waiting' },\n style: {\n selectors: {\n '&::after': {\n backgroundSize: BG_SIZES.large,\n animation: `${backgroundSlideLarge} 500ms linear infinite`,\n },\n },\n },\n },\n ],\n\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\n\nexport type ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n"],"mappings":""}
|
package/dist/faency.css
CHANGED
|
@@ -506,11 +506,12 @@
|
|
|
506
506
|
--_17h2n96ay: 12px;
|
|
507
507
|
--_17h2n96az: 50%;
|
|
508
508
|
--_17h2n96b0: 9999px;
|
|
509
|
-
--_17h2n96b1:
|
|
510
|
-
--_17h2n96b2:
|
|
511
|
-
--_17h2n96b3:
|
|
512
|
-
--_17h2n96b4:
|
|
513
|
-
--_17h2n96b5:
|
|
509
|
+
--_17h2n96b1: 8px;
|
|
510
|
+
--_17h2n96b2: 100;
|
|
511
|
+
--_17h2n96b3: 200;
|
|
512
|
+
--_17h2n96b4: 300;
|
|
513
|
+
--_17h2n96b5: 400;
|
|
514
|
+
--_17h2n96b6: 999;
|
|
514
515
|
}
|
|
515
516
|
._6oteex1 {
|
|
516
517
|
--_17h2n960: hsl(68, 53.0%, 36.0%);
|
|
@@ -910,11 +911,12 @@
|
|
|
910
911
|
--_17h2n96ay: 12px;
|
|
911
912
|
--_17h2n96az: 50%;
|
|
912
913
|
--_17h2n96b0: 9999px;
|
|
913
|
-
--_17h2n96b1:
|
|
914
|
-
--_17h2n96b2:
|
|
915
|
-
--_17h2n96b3:
|
|
916
|
-
--_17h2n96b4:
|
|
917
|
-
--_17h2n96b5:
|
|
914
|
+
--_17h2n96b1: 8px;
|
|
915
|
+
--_17h2n96b2: 100;
|
|
916
|
+
--_17h2n96b3: 200;
|
|
917
|
+
--_17h2n96b4: 300;
|
|
918
|
+
--_17h2n96b5: 400;
|
|
919
|
+
--_17h2n96b6: 999;
|
|
918
920
|
}
|
|
919
921
|
._6oteex2 {
|
|
920
922
|
--_17h2n960: hsl(24 94.0% 50.0%);
|
|
@@ -1314,11 +1316,12 @@
|
|
|
1314
1316
|
--_17h2n96ay: 12px;
|
|
1315
1317
|
--_17h2n96az: 50%;
|
|
1316
1318
|
--_17h2n96b0: 9999px;
|
|
1317
|
-
--_17h2n96b1:
|
|
1318
|
-
--_17h2n96b2:
|
|
1319
|
-
--_17h2n96b3:
|
|
1320
|
-
--_17h2n96b4:
|
|
1321
|
-
--_17h2n96b5:
|
|
1319
|
+
--_17h2n96b1: 8px;
|
|
1320
|
+
--_17h2n96b2: 100;
|
|
1321
|
+
--_17h2n96b3: 200;
|
|
1322
|
+
--_17h2n96b4: 300;
|
|
1323
|
+
--_17h2n96b5: 400;
|
|
1324
|
+
--_17h2n96b6: 999;
|
|
1322
1325
|
}
|
|
1323
1326
|
._6oteex3 {
|
|
1324
1327
|
--_17h2n960: hsl(347, 100%, 60.0%);
|
|
@@ -1718,11 +1721,12 @@
|
|
|
1718
1721
|
--_17h2n96ay: 12px;
|
|
1719
1722
|
--_17h2n96az: 50%;
|
|
1720
1723
|
--_17h2n96b0: 9999px;
|
|
1721
|
-
--_17h2n96b1:
|
|
1722
|
-
--_17h2n96b2:
|
|
1723
|
-
--_17h2n96b3:
|
|
1724
|
-
--_17h2n96b4:
|
|
1725
|
-
--_17h2n96b5:
|
|
1724
|
+
--_17h2n96b1: 8px;
|
|
1725
|
+
--_17h2n96b2: 100;
|
|
1726
|
+
--_17h2n96b3: 200;
|
|
1727
|
+
--_17h2n96b4: 300;
|
|
1728
|
+
--_17h2n96b5: 400;
|
|
1729
|
+
--_17h2n96b6: 999;
|
|
1726
1730
|
}
|
|
1727
1731
|
._6oteex4 {
|
|
1728
1732
|
--_17h2n960: hsl(151, 55.0%, 41.5%);
|
|
@@ -2122,11 +2126,12 @@
|
|
|
2122
2126
|
--_17h2n96ay: 12px;
|
|
2123
2127
|
--_17h2n96az: 50%;
|
|
2124
2128
|
--_17h2n96b0: 9999px;
|
|
2125
|
-
--_17h2n96b1:
|
|
2126
|
-
--_17h2n96b2:
|
|
2127
|
-
--_17h2n96b3:
|
|
2128
|
-
--_17h2n96b4:
|
|
2129
|
-
--_17h2n96b5:
|
|
2129
|
+
--_17h2n96b1: 8px;
|
|
2130
|
+
--_17h2n96b2: 100;
|
|
2131
|
+
--_17h2n96b3: 200;
|
|
2132
|
+
--_17h2n96b4: 300;
|
|
2133
|
+
--_17h2n96b5: 400;
|
|
2134
|
+
--_17h2n96b6: 999;
|
|
2130
2135
|
}
|
|
2131
2136
|
._6oteex5 {
|
|
2132
2137
|
--_17h2n960: hsl(208, 24.0%, 27.0%);
|
|
@@ -2526,11 +2531,12 @@
|
|
|
2526
2531
|
--_17h2n96ay: 12px;
|
|
2527
2532
|
--_17h2n96az: 50%;
|
|
2528
2533
|
--_17h2n96b0: 9999px;
|
|
2529
|
-
--_17h2n96b1:
|
|
2530
|
-
--_17h2n96b2:
|
|
2531
|
-
--_17h2n96b3:
|
|
2532
|
-
--_17h2n96b4:
|
|
2533
|
-
--_17h2n96b5:
|
|
2534
|
+
--_17h2n96b1: 8px;
|
|
2535
|
+
--_17h2n96b2: 100;
|
|
2536
|
+
--_17h2n96b3: 200;
|
|
2537
|
+
--_17h2n96b4: 300;
|
|
2538
|
+
--_17h2n96b5: 400;
|
|
2539
|
+
--_17h2n96b6: 999;
|
|
2534
2540
|
}
|
|
2535
2541
|
._6oteex6 {
|
|
2536
2542
|
--_17h2n960: hsl(208, 9.0%, 73.0%);
|
|
@@ -2930,11 +2936,12 @@
|
|
|
2930
2936
|
--_17h2n96ay: 12px;
|
|
2931
2937
|
--_17h2n96az: 50%;
|
|
2932
2938
|
--_17h2n96b0: 9999px;
|
|
2933
|
-
--_17h2n96b1:
|
|
2934
|
-
--_17h2n96b2:
|
|
2935
|
-
--_17h2n96b3:
|
|
2936
|
-
--_17h2n96b4:
|
|
2937
|
-
--_17h2n96b5:
|
|
2939
|
+
--_17h2n96b1: 8px;
|
|
2940
|
+
--_17h2n96b2: 100;
|
|
2941
|
+
--_17h2n96b3: 200;
|
|
2942
|
+
--_17h2n96b4: 300;
|
|
2943
|
+
--_17h2n96b5: 400;
|
|
2944
|
+
--_17h2n96b6: 999;
|
|
2938
2945
|
}
|
|
2939
2946
|
._6oteex7 {
|
|
2940
2947
|
--_17h2n960: hsl(206, 100%, 50.0%);
|
|
@@ -3334,11 +3341,12 @@
|
|
|
3334
3341
|
--_17h2n96ay: 12px;
|
|
3335
3342
|
--_17h2n96az: 50%;
|
|
3336
3343
|
--_17h2n96b0: 9999px;
|
|
3337
|
-
--_17h2n96b1:
|
|
3338
|
-
--_17h2n96b2:
|
|
3339
|
-
--_17h2n96b3:
|
|
3340
|
-
--_17h2n96b4:
|
|
3341
|
-
--_17h2n96b5:
|
|
3344
|
+
--_17h2n96b1: 8px;
|
|
3345
|
+
--_17h2n96b2: 100;
|
|
3346
|
+
--_17h2n96b3: 200;
|
|
3347
|
+
--_17h2n96b4: 300;
|
|
3348
|
+
--_17h2n96b5: 400;
|
|
3349
|
+
--_17h2n96b6: 999;
|
|
3342
3350
|
}
|
|
3343
3351
|
._6oteex8 {
|
|
3344
3352
|
--_17h2n960: hsl(68, 79.0%, 60.0%);
|
|
@@ -3738,11 +3746,12 @@
|
|
|
3738
3746
|
--_17h2n96ay: 12px;
|
|
3739
3747
|
--_17h2n96az: 50%;
|
|
3740
3748
|
--_17h2n96b0: 9999px;
|
|
3741
|
-
--_17h2n96b1:
|
|
3742
|
-
--_17h2n96b2:
|
|
3743
|
-
--_17h2n96b3:
|
|
3744
|
-
--_17h2n96b4:
|
|
3745
|
-
--_17h2n96b5:
|
|
3749
|
+
--_17h2n96b1: 8px;
|
|
3750
|
+
--_17h2n96b2: 100;
|
|
3751
|
+
--_17h2n96b3: 200;
|
|
3752
|
+
--_17h2n96b4: 300;
|
|
3753
|
+
--_17h2n96b5: 400;
|
|
3754
|
+
--_17h2n96b6: 999;
|
|
3746
3755
|
}
|
|
3747
3756
|
._6oteex9 {
|
|
3748
3757
|
--_17h2n960: hsl(24 94.0% 50.0%);
|
|
@@ -4142,11 +4151,12 @@
|
|
|
4142
4151
|
--_17h2n96ay: 12px;
|
|
4143
4152
|
--_17h2n96az: 50%;
|
|
4144
4153
|
--_17h2n96b0: 9999px;
|
|
4145
|
-
--_17h2n96b1:
|
|
4146
|
-
--_17h2n96b2:
|
|
4147
|
-
--_17h2n96b3:
|
|
4148
|
-
--_17h2n96b4:
|
|
4149
|
-
--_17h2n96b5:
|
|
4154
|
+
--_17h2n96b1: 8px;
|
|
4155
|
+
--_17h2n96b2: 100;
|
|
4156
|
+
--_17h2n96b3: 200;
|
|
4157
|
+
--_17h2n96b4: 300;
|
|
4158
|
+
--_17h2n96b5: 400;
|
|
4159
|
+
--_17h2n96b6: 999;
|
|
4150
4160
|
}
|
|
4151
4161
|
._6oteexa {
|
|
4152
4162
|
--_17h2n960: hsl(347, 100%, 60.0%);
|
|
@@ -4546,11 +4556,12 @@
|
|
|
4546
4556
|
--_17h2n96ay: 12px;
|
|
4547
4557
|
--_17h2n96az: 50%;
|
|
4548
4558
|
--_17h2n96b0: 9999px;
|
|
4549
|
-
--_17h2n96b1:
|
|
4550
|
-
--_17h2n96b2:
|
|
4551
|
-
--_17h2n96b3:
|
|
4552
|
-
--_17h2n96b4:
|
|
4553
|
-
--_17h2n96b5:
|
|
4559
|
+
--_17h2n96b1: 8px;
|
|
4560
|
+
--_17h2n96b2: 100;
|
|
4561
|
+
--_17h2n96b3: 200;
|
|
4562
|
+
--_17h2n96b4: 300;
|
|
4563
|
+
--_17h2n96b5: 400;
|
|
4564
|
+
--_17h2n96b6: 999;
|
|
4554
4565
|
}
|
|
4555
4566
|
._6oteexb {
|
|
4556
4567
|
--_17h2n960: hsl(151, 55.0%, 41.5%);
|
|
@@ -4950,11 +4961,12 @@
|
|
|
4950
4961
|
--_17h2n96ay: 12px;
|
|
4951
4962
|
--_17h2n96az: 50%;
|
|
4952
4963
|
--_17h2n96b0: 9999px;
|
|
4953
|
-
--_17h2n96b1:
|
|
4954
|
-
--_17h2n96b2:
|
|
4955
|
-
--_17h2n96b3:
|
|
4956
|
-
--_17h2n96b4:
|
|
4957
|
-
--_17h2n96b5:
|
|
4964
|
+
--_17h2n96b1: 8px;
|
|
4965
|
+
--_17h2n96b2: 100;
|
|
4966
|
+
--_17h2n96b3: 200;
|
|
4967
|
+
--_17h2n96b4: 300;
|
|
4968
|
+
--_17h2n96b5: 400;
|
|
4969
|
+
--_17h2n96b6: 999;
|
|
4958
4970
|
}
|
|
4959
4971
|
._6oteexc {
|
|
4960
4972
|
--_17h2n960: hsl(208, 40.0%, 58.0%);
|
|
@@ -5354,11 +5366,12 @@
|
|
|
5354
5366
|
--_17h2n96ay: 12px;
|
|
5355
5367
|
--_17h2n96az: 50%;
|
|
5356
5368
|
--_17h2n96b0: 9999px;
|
|
5357
|
-
--_17h2n96b1:
|
|
5358
|
-
--_17h2n96b2:
|
|
5359
|
-
--_17h2n96b3:
|
|
5360
|
-
--_17h2n96b4:
|
|
5361
|
-
--_17h2n96b5:
|
|
5369
|
+
--_17h2n96b1: 8px;
|
|
5370
|
+
--_17h2n96b2: 100;
|
|
5371
|
+
--_17h2n96b3: 200;
|
|
5372
|
+
--_17h2n96b4: 300;
|
|
5373
|
+
--_17h2n96b5: 400;
|
|
5374
|
+
--_17h2n96b6: 999;
|
|
5362
5375
|
}
|
|
5363
5376
|
._6oteexd {
|
|
5364
5377
|
--_17h2n960: hsl(208, 11.0%, 45.0%);
|
|
@@ -5758,11 +5771,12 @@
|
|
|
5758
5771
|
--_17h2n96ay: 12px;
|
|
5759
5772
|
--_17h2n96az: 50%;
|
|
5760
5773
|
--_17h2n96b0: 9999px;
|
|
5761
|
-
--_17h2n96b1:
|
|
5762
|
-
--_17h2n96b2:
|
|
5763
|
-
--_17h2n96b3:
|
|
5764
|
-
--_17h2n96b4:
|
|
5765
|
-
--_17h2n96b5:
|
|
5774
|
+
--_17h2n96b1: 8px;
|
|
5775
|
+
--_17h2n96b2: 100;
|
|
5776
|
+
--_17h2n96b3: 200;
|
|
5777
|
+
--_17h2n96b4: 300;
|
|
5778
|
+
--_17h2n96b5: 400;
|
|
5779
|
+
--_17h2n96b6: 999;
|
|
5766
5780
|
}._16nnnz60 {
|
|
5767
5781
|
align-items: center;
|
|
5768
5782
|
appearance: none;
|
|
@@ -6229,7 +6243,7 @@
|
|
|
6229
6243
|
background-color: rgba(0, 0, 0, 0.15);
|
|
6230
6244
|
}
|
|
6231
6245
|
.krhgwq5 {
|
|
6232
|
-
border-radius: var(--
|
|
6246
|
+
border-radius: var(--_17h2n96b1);
|
|
6233
6247
|
height: var(--_17h2n96a7);
|
|
6234
6248
|
padding-left: var(--_17h2n969v);
|
|
6235
6249
|
padding-right: var(--_17h2n969v);
|
|
@@ -6237,7 +6251,7 @@
|
|
|
6237
6251
|
line-height: var(--_17h2n96a7);
|
|
6238
6252
|
}
|
|
6239
6253
|
.krhgwq6 {
|
|
6240
|
-
border-radius: var(--
|
|
6254
|
+
border-radius: var(--_17h2n96b1);
|
|
6241
6255
|
height: var(--_17h2n96a8);
|
|
6242
6256
|
padding-left: var(--_17h2n969w);
|
|
6243
6257
|
padding-right: var(--_17h2n969w);
|
|
@@ -6245,7 +6259,7 @@
|
|
|
6245
6259
|
line-height: var(--_17h2n96a8);
|
|
6246
6260
|
}
|
|
6247
6261
|
.krhgwq7 {
|
|
6248
|
-
border-radius: var(--
|
|
6262
|
+
border-radius: var(--_17h2n96b1);
|
|
6249
6263
|
height: var(--_17h2n96a9);
|
|
6250
6264
|
padding-left: var(--_17h2n969w);
|
|
6251
6265
|
padding-right: var(--_17h2n969w);
|