My stitches config

stitches.config.ts

import { createStitches } from '@stitches/react';
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,
    grayA,
    mauveA,
    slateA,
    sageA,
    oliveA,
    sandA,
    tomatoA,
    redA,
    crimsonA,
    pinkA,
    plumA,
    purpleA,
    violetA,
    indigoA,
    blueA,
    skyA,
    mintA,
    cyanA,
    tealA,
    greenA,
    grassA,
    limeA,
    yellowA,
    amberA,
    orangeA,
    brownA,
    bronzeA,
    goldA,
    whiteA,
    blackA,
    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,
    grayDarkA,
    mauveDarkA,
    slateDarkA,
    sageDarkA,
    oliveDarkA,
    sandDarkA,
    tomatoDarkA,
    redDarkA,
    crimsonDarkA,
    pinkDarkA,
    plumDarkA,
    purpleDarkA,
    violetDarkA,
    indigoDarkA,
    blueDarkA,
    skyDarkA,
    mintDarkA,
    cyanDarkA,
    tealDarkA,
    greenDarkA,
    grassDarkA,
    limeDarkA,
    yellowDarkA,
    amberDarkA,
    orangeDarkA,
    brownDarkA,
    bronzeDarkA,
    goldDarkA,
} from '@radix-ui/colors';
import type * as Stitches from '@stitches/react';
export type { VariantProps } from '@stitches/react';

const space = {
    0: '0px',
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    11: '2.75rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    20: '5rem',
    24: '6rem',
    28: '7rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem',
};

export const {
    styled,
    css,
    theme,
    createTheme,
    getCssText,
    globalCss,
    keyframes,
    config,
    reset,
} = 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,

            ...grayA,
            ...mauveA,
            ...slateA,
            ...sageA,
            ...oliveA,
            ...sandA,
            ...tomatoA,
            ...redA,
            ...crimsonA,
            ...pinkA,
            ...plumA,
            ...purpleA,
            ...violetA,
            ...indigoA,
            ...blueA,
            ...skyA,
            ...mintA,
            ...cyanA,
            ...tealA,
            ...greenA,
            ...grassA,
            ...limeA,
            ...yellowA,
            ...amberA,
            ...orangeA,
            ...brownA,
            ...bronzeA,
            ...goldA,

            ...whiteA,
            ...blackA,

            // Semantic colors
            hiContrast: '$slate12',
            // loContrast: '$slate1',
            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: {
            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`,
        },
        space,
        sizes: {
            ...space,
            '1/2': '50%',
            '1/3': '33.333333%',
            '2/3': '66.666667%',
            '1/4': '25%',
            '2/4': '50%',
            '3/4': '75%',
            '1/5': '20%',
            '2/5': '40%',
            '3/5': '60%',
            '4/5': '80%',
            '1/6': '16.666667%',
            '2/6': '33.333333%',
            '3/6': '50%',
            '4/6': '66.666667%',
            '5/6': '83.333333%',
            '1/12': '8.333333%',
            '2/12': '16.666667%',
            '3/12': '25%',
            '4/12': '33.333333%',
            '5/12': '41.666667%',
            '6/12': '50%',
            '7/12': '58.333333%',
            '8/12': '66.666667%',
            '9/12': '75%',
            '10/12': '83.333333%',
            '11/12': '91.666667%',
            full: '100%',
            screen: '100vh',
            screenW: '100vw',
            min: 'min-content',
            max: 'max-content',
        },
        fontSizes: {
            'xs': '0.75rem',
            'sm': '0.875rem',
            'base': '1rem',
            'lg': '1.125rem',
            'xl': '1.25rem',
            '2xl': '1.5rem',
            '3xl': '1.875rem',
            '4xl': '2.25rem',
            '5xl': '3rem',
            '6xl': '3.75rem',
            '7xl': '4.5rem',
            '8xl': '6rem',
            '9xl': '8rem',
        },
        radii: {
            none: '0px',
            sm: '0.125rem',
            DEFAULT: '0.25rem',
            md: '0.375rem',
            lg: '0.5rem',
            xl: '0.75rem',
            '2xl': '1rem',
            '3xl': '1.5rem',
            full: '9999px',
        },
        zIndices: {
            auto: 'auto',
            0: '0',
            10: '10',
            20: '20',
            30: '30',
            40: '40',
            50: '50',
        },
        borderStyles: {
            none: 'none',
            solid: 'solid',
            double: 'double',
            dashed: 'dashed',
            dotted: 'dotted',
            dashedDotted: 'dashed dotted',
            dashedDottedDotted: 'dashed dotted dotted',
        },
        borderWidths: {
            none: '0px',
            0: '0px',
            1: '1px',
            2: '2px',
            3: '3px',
            4: '4px',
            5: '5px',
        },
        lineHeights: {
            none: '1',
            tight: '1.25',
            snug: '1.375',
            normal: '1.5',
            relaxed: '1.625',
            loose: '2',
            3: '.75rem',
            4: '1rem',
            5: '1.25rem',
            6: '1.5rem',
            7: '1.75rem',
            8: '2rem',
            9: '2.25rem',
            10: '2.5rem',
        },
        shadows: {
            sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
            DEFAULT: '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)',
            none: 'none',
        },
        transitions: {
            'default': '250ms ease-in-out',
            'ease-in': '250ms ease-in',
            'ease-out': '250ms ease-out',
            'ease-in-out': '250ms ease-in-out',
            'ease-in-quad': '250ms ease-in-quad',
            'ease-out-quad': '250ms ease-out-quad',
            'ease-in-out-quad': '250ms ease-in-out-quad',
            'ease-in-cubic': '250ms ease-in-cubic',
            'ease-out-cubic': '250ms ease-out-cubic',
            'ease-in-out-cubic': '250ms ease-in-out-cubic',
            'ease-in-quart': '250ms ease-in-quart',
            'ease-out-quart': '250ms ease-out-quart',
            'ease-in-out-quart': '250ms ease-in-out-quart',
            'ease-in-quint': '250ms ease-in-quint',
            'ease-out-quint': '250ms ease-out-quint',
            'ease-in-out-quint': '250ms ease-in-out-quint',
            'ease-in-sine': '250ms ease-in-sine',
            'ease-out-sine': '250ms ease-out-sine',
            'ease-in-out-sine': '250ms ease-in-out-sine',
            'ease-in-expo': '250ms ease-in-expo',
            'ease-out-expo': '250ms ease-out-expo',
            'ease-in-out-expo': '250ms ease-in-out-expo',
            'ease-in-circ': '250ms ease-in-circ',
            'ease-out-circ': '250ms ease-out-circ',
            'ease-in-out-circ': '250ms ease-in-out-circ',
            'ease-in-back': '250ms ease-in-back',
            'ease-out-back': '250ms ease-out-back',
            'ease-in-out-back': '250ms ease-in-out-back',
        },
        fontWeights: {
            100: '100',
            200: '200',
            300: '300',
            400: '400',
            500: '500',
            600: '600',
            700: '700',
            800: '800',
            900: '900',
        },
        letterSpacings: {
            tighter: '-0.05em',
            tight: '-0.025em',
            normal: '0',
            wide: '0.025em',
            wider: '0.05em',
            widest: '0.1em',
        },
    },
    media: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
        motion: '(prefers-reduced-motion)',
        hover: '(any-hover: hover)',
        dark: '(prefers-color-scheme: dark)',
        light: '(prefers-color-scheme: light)',
    },
    utils: {
        p: (value: Stitches.PropertyValue<'padding'>) => ({
            padding: value,
        }),
        pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({
            paddingTop: value,
        }),
        pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({
            paddingRight: value,
        }),
        pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({
            paddingBottom: value,
        }),
        pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
            paddingLeft: value,
        }),
        px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
            paddingLeft: value,
            paddingRight: value,
        }),
        py: (value: Stitches.PropertyValue<'paddingTop'>) => ({
            paddingTop: value,
            paddingBottom: value,
        }),

        m: (value: Stitches.PropertyValue<'margin'>) => ({
            margin: value,
        }),
        mt: (value: Stitches.PropertyValue<'marginTop'>) => ({
            marginTop: value,
        }),
        mr: (value: Stitches.PropertyValue<'marginRight'>) => ({
            marginRight: value,
        }),
        mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({
            marginBottom: value,
        }),
        ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({
            marginLeft: value,
        }),
        mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({
            marginLeft: value,
            marginRight: value,
        }),
        my: (value: Stitches.PropertyValue<'marginTop'>) => ({
            marginTop: value,
            marginBottom: value,
        }),

        ta: (value: Stitches.PropertyValue<'textAlign'>) => ({ textAlign: value }),

        fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({ flexDirection: value }),
        fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),

        ai: (value: Stitches.PropertyValue<'alignItems'>) => ({ alignItems: value }),
        ac: (value: Stitches.PropertyValue<'alignContent'>) => ({ alignContent: value }),
        jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({ justifyContent: value }),
        as: (value: Stitches.PropertyValue<'alignSelf'>) => ({ alignSelf: value }),
        fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),
        fs: (value: Stitches.PropertyValue<'flexShrink'>) => ({ flexShrink: value }),
        fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({ flexBasis: value }),

        bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
            backgroundColor: value,
        }),

        br: (value: Stitches.PropertyValue<'borderRadius'>) => ({
            borderRadius: value,
        }),
        btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({
            borderTopRightRadius: value,
        }),
        bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({
            borderBottomRightRadius: value,
        }),
        bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({
            borderBottomLeftRadius: value,
        }),
        btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({
            borderTopLeftRadius: value,
        }),

        bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({ boxShadow: value }),

        lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({ lineHeight: value }),

        ox: (value: Stitches.PropertyValue<'overflowX'>) => ({ overflowX: value }),
        oy: (value: Stitches.PropertyValue<'overflowY'>) => ({ overflowY: value }),

        pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({ pointerEvents: value }),
        us: (value: Stitches.PropertyValue<'userSelect'>) => ({
            WebkitUserSelect: value,
            userSelect: value,
        }),

        userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({
            WebkitUserSelect: value,
            userSelect: value,
        }),

        size: (value: Stitches.PropertyValue<'width'>) => ({
            width: value,
            height: value,
        }),

        appearance: (value: Stitches.PropertyValue<'appearance'>) => ({
            WebkitAppearance: value,
            appearance: value,
        }),
        backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({
            WebkitBackgroundClip: value,
            backgroundClip: value,
        }),
        w: (value: Stitches.PropertyValue<'width'>) => ({ width: value }),
    },
});

export type CSS = Stitches.CSS<typeof config>;

export const darkTheme = createTheme('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,

        ...grayDarkA,
        ...mauveDarkA,
        ...slateDarkA,
        ...sageDarkA,
        ...oliveDarkA,
        ...sandDarkA,
        ...tomatoDarkA,
        ...redDarkA,
        ...crimsonDarkA,
        ...pinkDarkA,
        ...plumDarkA,
        ...purpleDarkA,
        ...violetDarkA,
        ...indigoDarkA,
        ...blueDarkA,
        ...skyDarkA,
        ...mintDarkA,
        ...cyanDarkA,
        ...tealDarkA,
        ...greenDarkA,
        ...grassDarkA,
        ...limeDarkA,
        ...yellowDarkA,
        ...amberDarkA,
        ...orangeDarkA,
        ...brownDarkA,
        ...bronzeDarkA,
        ...goldDarkA,

        // Semantic colors
        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%)',
    },
});