import { createStitches } from '@stitches/react' ; import type * as Stitches from '@stitches/react' ; import * as palette from './palette' ; const themeTokens = { colors : { body : '$accent2' , text : '$accent12' , dark : palette . accentDark . accent3 , darker : palette . accentDark . accent1 , ... palette . accent , ... palette . neutral , ... palette . positive , ... palette . info , ... palette . caution , ... palette . critical , } , space : { xxsm : '0.25rem' , xsm : '0.5rem' , sm : '0.75rem' , md : '1.25rem' , safe : 'calc(var(--scale, 1) * 1.5rem)' , gap : 'calc(var(--scale, 1) * 1.25rem)' , paragraph : 'calc(var(--scale-sm, 1) * 0.9rem)' , gutter : '1.5rem' , lg : '2rem' , xl : '4rem' , xxl : '6rem' , } , fontSizes : { xs : '0.75rem' , sm : '0.875rem' , lg : '1.125rem' , xl : '1.25rem' , '2xl' : '1.5rem' , '3xl' : '1.875rem' , '4xl' : '2.25rem' , '5xl' : '3rem' , } , fonts : { sans : 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"' , serif : 'ui-serif,Georgia,Cambria,"Times New Roman",Times,serif' , mono : 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace' , logo : 'Roboto,$fonts$sans' , } , fontWeights : { thin : '100' , extralight : '200' , light : '300' , normal : '400' , medium : '500' , semibold : '600' , bold : '700' , extrabold : '800' , black : '900' , } , lineHeights : { tight : '1.25' , snug : '1.375' , normal : '1.5' , relaxed : '1.625' , loose : '2' , } , letterSpacings : { tighter : '-0.05em' , tight : '-0.025em' , normal : '0' , wide : '0.025em' , wider : '0.05em' , widest : '0.1em' , } , sizes : { } , radii : { sm : '0.125rem' , rounded : '0.25rem' , md : '0.375rem' , lg : '0.5rem' , xl : '0.75rem' , '2xl' : '1rem' , '3xl' : '1.5rem' , full : '50%' , } , shadows : { xs : '0 0 0 1px rgba(0, 0, 0, 0.1)' , sm : '0 1px 2px 0 rgba(0, 0, 0, 0.15)' , shadow : '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)' , md : '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' , lg : '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)' , xl : '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)' , '2xl' : '0 25px 50px -12px rgba(0, 0, 0, 0.25)' , inner : 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)' , outline : '0 0 0 3px rgba(161, 161, 170, 0.45)' , solid : '0 0 0 2px currentColor' , } , } ; const stitchesConfig = createStitches ( { theme : themeTokens , media : { 'sm-down' : `(max-width:${ 576 - 0.02 }px)` , sm : '(min-width:576px)' , 'md-down' : `(max-width:${ 768 - 0.02 }px)` , md : '(min-width:768px)' , 'lg-down' : ` (max-width:${ 992 - 0.02 }px)` , lg : '(min-width:992px)' , 'xl-down' : `(max-width:${ 1200 - 0.02 }px)` , xl : '(min-width:1200px)' , 'xxl-down' : `(max-width:${ 1400 - 0.02 }px)` , xxl : '(min-width:1400px)' , all : 'all' , } , utils : { mt : ( value ) => ( { marginTop : value } ) , mr : ( value ) => ( { marginRight : value } ) , mb : ( value ) => ( { marginBottom : value } ) , ml : ( value ) => ( { marginLeft : value } ) , mx : ( value ) => ( { marginLeft : value , marginRight : value } ) , my : ( value ) => ( { marginTop : value , marginBottom : value } ) , pt : ( value ) => ( { paddingTop : value } ) , pr : ( value ) => ( { paddingRight : value } ) , pb : ( value ) => ( { paddingBottom : value } ) , pl : ( value ) => ( { paddingLeft : value } ) , px : ( value ) => ( { paddingLeft : value , paddingRight : value } ) , py : ( value ) => ( { paddingTop : value , paddingBottom : value } ) , square : ( value ) => ( { width : value , height : value } ) , hgap : ( value ) => ( { '& > * + *' : { marginLeft : value } } ) , vgap : ( value ) => ( { '& > * + *' : { marginTop : value } } ) , gap : ( value ) => { if ( typeof value === 'string' ) { let val = value ; if ( val . charAt ( 0 ) === '$' ) { if ( val . charAt ( 1 ) === '$' ) { val = `var(---${ val . slice ( 2 ) })` ; } else { let [ scale , token ] = val . slice ( 1 ) . split ( '$' ) ; if ( token === undefined ) { token = scale ; scale = 'space' ; } if ( scale in config . theme && token in config . theme [ scale ] ) { val = `var(--${ scale }-${ token })` ; } } } return { gridGap : val , gap : val , } ; } else { return { gridGap : value , gap : value , } ; } } , overflow : ( overflow ) => ( { overflow : overflow === 'clip' ? 'hidden;overflow:clip' : overflow , } ) , wrap : ( value ) => { switch ( value ) { case 'normal' : return { overflowWrap : 'normal' , wordBreak : 'normal' } ; case 'word' : return { overflowWrap : 'break-word' } ; case 'all' : return { wordBreak : 'break-all' } ; case 'truncate' : return { overflow : 'hidden' , textOverflow : 'ellipsis' , whiteSpace : 'nowrap' } ; } } , } , } ) ; export const { config , prefix , globalCss , keyframes , createTheme , theme , reset , getCssText , css , styled } = stitchesConfig ; export type CSS = Stitches . CSS < typeof stitchesConfig > ; export const themes = { light : theme , dark : createTheme ( 'dark' , { colors : { body : '$accent2' , text : '$accent12' , ... palette . accentDark , ... palette . neutralDark , ... palette . positiveDark , ... palette . infoDark , ... palette . cautionDark , ... palette . criticalDark , } , } ) , } ; theme . toString ( ) ; themes . dark . toString ( ) ;