import { createStitches } from '@stitches/react-vc17' ; import { gray , mauve , slate , sage , olive , sand , tomato , red , crimson , pink , plum , purple , violet , indigo , blue , sky , mint , cyan , teal , green , grass , lime , yellow , amber , orange , brown , bronze , gold , grayDark , mauveDark , slateDark , sageDark , oliveDark , sandDark , tomatoDark , redDark , crimsonDark , pinkDark , plumDark , purpleDark , violetDark , indigoDark , blueDark , skyDark , mintDark , cyanDark , tealDark , greenDark , grassDark , limeDark , yellowDark , amberDark , orangeDark , brownDark , bronzeDark , goldDark , } from '@radix-ui/colors' ; export type { VariantProps } from '@stitches/react' ; const stitches = createStitches ( { theme : { colors : { ... gray , ... mauve , ... slate , ... sage , ... olive , ... sand , ... tomato , ... red , ... crimson , ... pink , ... plum , ... purple , ... violet , ... indigo , ... blue , ... sky , ... mint , ... cyan , ... teal , ... green , ... grass , ... lime , ... yellow , ... amber , ... orange , ... brown , ... bronze , ... gold , hiContrast : '$slate12' , loContrast : 'white' , canvas : 'hsl(0 0% 93%)' , panel : 'white' , transparentPanel : 'hsl(0 0% 0% / 97%)' , shadowLight : 'hsl(206 22% 7% / 35%)' , shadowDark : 'hsl(206 22% 7% / 20%)' , } , fonts : { untitled : 'Untitled Sans, -apple-system, system-ui, sans-serif' , mono : 'Söhne Mono, menlo, monospace' , } , space : { 1 : '5px' , 2 : '10px' , 3 : '15px' , 4 : '20px' , 5 : '25px' , 6 : '35px' , 7 : '45px' , 8 : '65px' , 9 : '80px' , } , sizes : { 1 : '5px' , 2 : '10px' , 3 : '15px' , 4 : '20px' , 5 : '25px' , 6 : '35px' , 7 : '45px' , 8 : '65px' , 9 : '80px' , } , fontSizes : { 1 : '12px' , 2 : '13px' , 3 : '15px' , 4 : '17px' , 5 : '19px' , 6 : '21px' , 7 : '27px' , 8 : '35px' , 9 : '59px' , } , radii : { 1 : '4px' , 2 : '6px' , 3 : '8px' , 4 : '12px' , round : '50%' , pill : '9999px' , } , zIndices : { 1 : '100' , 2 : '200' , 3 : '300' , 4 : '400' , max : '999' , } , } , media : { bp1 : '(min-width: 520px)' , bp2 : '(min-width: 900px)' , bp3 : '(min-width: 1200px)' , bp4 : '(min-width: 1800px)' , motion : '(prefers-reduced-motion)' , hover : '(any-hover: hover)' , dark : '(prefers-color-scheme: dark)' , light : '(prefers-color-scheme: light)' , } , utils : { p : ( config ) => ( value ) => ( { paddingTop : value , paddingBottom : value , paddingLeft : value , paddingRight : value , } ) , pt : ( config ) => ( value ) => ( { paddingTop : value , } ) , pr : ( config ) => ( value ) => ( { paddingRight : value , } ) , pb : ( config ) => ( value ) => ( { paddingBottom : value , } ) , pl : ( config ) => ( value ) => ( { paddingLeft : value , } ) , px : ( config ) => ( value ) => ( { paddingLeft : value , paddingRight : value , } ) , py : ( config ) => ( value ) => ( { paddingTop : value , paddingBottom : value , } ) , m : ( config ) => ( value ) => ( { marginTop : value , marginBottom : value , marginLeft : value , marginRight : value , } ) , mt : ( config ) => ( value ) => ( { marginTop : value , } ) , mr : ( config ) => ( value ) => ( { marginRight : value , } ) , mb : ( config ) => ( value ) => ( { marginBottom : value , } ) , ml : ( config ) => ( value ) => ( { marginLeft : value , } ) , mx : ( config ) => ( value ) => ( { marginLeft : value , marginRight : value , } ) , my : ( config ) => ( value ) => ( { marginTop : value , marginBottom : value , } ) , ta : ( config ) => ( value ) => ( { textAlign : value } ) , fd : ( config ) => ( value ) => ( { flexDirection : value } ) , fw : ( config ) => ( value ) => ( { flexWrap : value } ) , ai : ( config ) => ( value ) => ( { alignItems : value } ) , ac : ( config ) => ( value ) => ( { alignContent : value } ) , jc : ( config ) => ( value ) => ( { justifyContent : value } ) , as : ( config ) => ( value ) => ( { alignSelf : value } ) , fg : ( config ) => ( value ) => ( { flexGrow : value } ) , fs : ( config ) => ( value ) => ( { flexShrink : value } ) , fb : ( config ) => ( value ) => ( { flexBasis : value } ) , bc : ( config ) => ( value ) => ( { backgroundColor : value , } ) , br : ( config ) => ( value ) => ( { borderRadius : value , } ) , btrr : ( config ) => ( value ) => ( { borderTopRightRadius : value , } ) , bbrr : ( config ) => ( value ) => ( { borderBottomRightRadius : value , } ) , bblr : ( config ) => ( value ) => ( { borderBottomLeftRadius : value , } ) , btlr : ( config ) => ( value ) => ( { borderTopLeftRadius : value , } ) , bs : ( config ) => ( value ) => ( { boxShadow : value } ) , lh : ( config ) => ( value ) => ( { lineHeight : value } ) , ox : ( config ) => ( value ) => ( { overflowX : value } ) , oy : ( config ) => ( value ) => ( { overflowY : value } ) , pe : ( config ) => ( value ) => ( { pointerEvents : value } ) , us : ( config ) => ( value ) => ( { WebkitUserSelect : value , userSelect : value } ) , size : ( config ) => ( value ) => ( { width : value , height : value , } ) , linearGradient : ( config ) => ( value ) => ( { backgroundImage : `linear-gradient(${ value })` , } ) , appearance : ( config ) => ( value ) => ( { WebkitAppearance : value , appearance : value , } ) , userSelect : ( config ) => ( value ) => ( { WebkitUserSelect : value , userSelect : value , } ) , backgroundClip : ( config ) => ( value ) => ( { WebkitBackgroundClip : value , backgroundClip : value , } ) , } , } ) ; export type CSS = StitchesCss < typeof stitches > ; export const { styled , css , theme , getCssString , global , keyframes , config } = stitches ; export const utils = config . utils ; export const darkTheme = theme ( 'dark-theme' , { colors : { ... grayDark , ... mauveDark , ... slateDark , ... sageDark , ... oliveDark , ... sandDark , ... tomatoDark , ... redDark , ... crimsonDark , ... pinkDark , ... plumDark , ... purpleDark , ... violetDark , ... indigoDark , ... blueDark , ... skyDark , ... mintDark , ... cyanDark , ... tealDark , ... greenDark , ... grassDark , ... limeDark , ... yellowDark , ... amberDark , ... orangeDark , ... brownDark , ... bronzeDark , ... goldDark , hiContrast : '$slate12' , loContrast : '$slate1' , canvas : 'hsl(0 0% 15%)' , panel : '$slate3' , transparentPanel : 'hsl(0 100% 100% / 97%)' , shadowLight : 'hsl(206 22% 7% / 35%)' , shadowDark : 'hsl(206 22% 7% / 20%)' , } , } ) ;