fast design system + tailwind

tailwind.config.js

// TODO: Create a configuration preset to allow npm based projects to bundle their own tailwind and tree shake? #JoshD
module.exports = {
    purge: [],
    theme: {
        colors: {
            accent: {
                default: 'var(--accent-fill-rest)',
                hover: 'var(--accent-fill-hover)',
                active: 'var(--accent-fill-active)'
            },
            neutral: {
                default: 'var(--neutral-foreground-rest)',
                hover: 'var(--neutral-foreground-hover)',
                active: 'var(--neutral-foreground-active)',
                focus: 'var(--neutral-foreground-focus)'
            },
            error: 'var(--error-color)',
            success: 'var(--success-color)',
            white: '#fff',
            black: '#000'
        },
        spacing: {
            px: '1px',
            '0': '0',
            '1': 'calc(var(--design-unit) * 1px)',
            '2': 'calc(var(--design-unit) * 2px)',
            '3': 'calc(var(--design-unit) * 3px)',
            '4': 'calc(var(--design-unit) * 4px)',
            '5': 'calc(var(--design-unit) * 5px)',
            '6': 'calc(var(--design-unit) * 6px)',
            '8': 'calc(var(--design-unit) * 8px)',
            '10': 'calc(var(--design-unit) * 10px)',
            '12': 'calc(var(--design-unit) * 12px)',
            '16': 'calc(var(--design-unit) * 16px)',
            '20': 'calc(var(--design-unit) * 20px)',
            '24': 'calc(var(--design-unit) * 24px)',
            '32': 'calc(var(--design-unit) * 32px)',
            '48': 'calc(var(--design-unit) * 48px)',
            '64': 'calc(var(--design-unit) * 64px)',
            '72': 'calc(var(--design-unit) * 72px)',
            '96': 'calc(var(--design-unit) * 96px)'
        },
        backgroundColor: {
            accent: {
                default: 'var(--accent-fill-rest)',
                hover: 'var(--accent-fill-hover)',
                active: 'var(--accent-fill-active)',
                focus: 'var(--accent-fill-focus)',
                selected: 'var(--accent-fill-selected)'
            },
            neutral: {
                default: 'var(--neutral-fill-rest)',
                hover: 'var(--neutral-fill-hover)',
                active: 'var(--neutral-fill-active)',
                focus: 'var(--neutral-fill-focus)',
                selected: 'var(--neutral-fill-selected)'
            },
            input: {
                default: 'var(--neutral-input-fill-rest)',
                hover: 'var(--neutral-input-fill-hover)',
                active: 'var(--neutral-input-fill-active)',
                focus: 'var(--neutral-input-fill-focus)',
                selected: 'var(--neutral-input-fill-selected)'
            },
            stealth: {
                default: 'var(--neutral-stealth-fill-rest)',
                hover: 'var(--neutral-stealth-fill-hover)',
                active: 'var(--neutral-stealth-fill-active)',
                focus: 'var(--neutral-stealth-fill-focus)',
                selected: 'var(--neutral-stealth-fill-selected)'
            },
            error: 'var(--error-color)',
            success: 'var(--success-color)',
            white: '#fff',
            black: '#000',
            transparent: 'rgba(0, 0, 0, 0)'
        },
        borderColor: {
            default: 'var(--neutral-stroke-rest)',
            hover: 'var(--neutral-stroke-hover)',
            active: 'var(--neutral-stroke-active)',
            focus: 'var(--neutral-stroke-focus)',
            error: 'var(--error-color)',
            success: 'var(--success-color)',
            white: '#fff',
            black: '#000'
        },
        borderRadius: {
            none: '0',
            sm: '0.125rem',
            default: 'calc(var(--corner-radius) * 1px)',
            md: '0.375rem',
            lg: '0.5rem',
            full: '9999px',
        },
        borderWidth: {
            default: 'calc(var(--stroke-width) * 1px)',
            '0': '0',
            '2': 'calc(var(--stroke-width) * 2px)',
            '4': 'calc(var(--stroke-width) * 4px)',
            '8': 'calc(var(--stroke-width) * 8px)',
        },
        // TODO: Use elevation? #JoshD
        boxShadow: {
            blur: '0 0 30px 0 rgba(0, 0, 0, 0.1)',
            xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
            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)',
            outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
            none: 'none',
        },
        container: {},
        divideColor: {
            default: 'var(--neutral-divider)'
        },
        divideOpacity: theme => theme('borderOpacity'),
        divideWidth: theme => theme('borderWidth'),
        fontFamily: {
            sans: ['var(--font-family)'],
            // TODO: Multiple font family feature? #JoshD
            serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
            mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
        },
        fontSize: {
            // TODO: xss for minus-3? #JoshD
            xs: 'var(--type-ramp-minus-2-font-size)',
            sm: 'var(--type-ramp-minus-1-font-size)',
            base: 'var(--type-ramp-base-font-size)',
            lg: 'var(--type-ramp-plus-1-font-size)',
            xl: 'var(--type-ramp-plus-2-font-size)',
            '2xl': 'var(--type-ramp-plus-3-font-size)',
            '3xl': 'var(--type-ramp-plus-4-font-size)',
            '4xl': 'var(--type-ramp-plus-5-font-size)',
            '5xl': 'var(--type-ramp-plus-6-font-size)'
        },
        height: theme => ({
            auto: 'auto',
            ...theme('spacing'),
            full: '100%',
            screen: '100vh',
        }),
        lineHeight: {
            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',
        },
        margin: (theme, { negative }) => ({
            auto: 'auto',
            ...theme('spacing'),
            ...negative(theme('spacing')),
        }),
        padding: theme => theme('spacing'),
        space: (theme, { negative }) => ({
            ...theme('spacing'),
            ...negative(theme('spacing')),
        }),
        textColor: theme => theme('colors'),
        textOpacity: theme => theme('opacity'),
    },
    // NOTE: Need to add active? #JoshD
    variants: {

    },
    corePlugins: {},
    plugins: [],
}