CSS Variables Design System

BaseStyle.jsx

import { createGlobalStyle } from 'styled-components';

import {
    createColorVariables,
    createPlainVariables,
    createSizeVariables,
    toREM,
} from '~/css-in-js';
import {
    COLORS,
    BORDER_RADIUS,
    BREAKPOINTS,
    COLORS_THIRD_PARTY,
    FONT_FAMILIES,
    FONT_SIZE_BASE_PX,
    FONT_SIZES,
    FONT_WEIGHTS,
    LINE_HEIGHT,
    SIZINGS,
    TRANSITION,
    Z_INDEX,
} from '~/system-values';

const BaseStyle = createGlobalStyle`
    :root{
        ${createColorVariables(COLORS)}
        ${createSizeVariables(BREAKPOINTS, 'breakpoint')}
        ${createSizeVariables(FONT_SIZES, 'font-size')}
        ${createSizeVariables(SIZINGS, 'sizing')}
        ${createPlainVariables(BORDER_RADIUS, 'border-radius')}
        ${createPlainVariables(COLORS_THIRD_PARTY, 'color-third-party')}
        ${createPlainVariables(FONT_FAMILIES, 'font-family')}
        ${createPlainVariables(FONT_WEIGHTS, 'font-weight')}
        ${createPlainVariables(LINE_HEIGHT, 'line-height')}
        ${createPlainVariables(TRANSITION, 'transition')}
        ${createPlainVariables(Z_INDEX, 'z-index')}
        --font-size-px: ${FONT_SIZE_BASE_PX};
        --box: ${toREM(1000)};
    }
`;

css-in-js.js

import Case from 'case';
import { css } from 'styled-components';

const forVariables = (obj, fn) => Object.entries(obj).map(fn).join('\n');

export const createColorVariables = (colors) =>
    forVariables(
        colors,
        ([name, value]) => `--color-${Case.kebab(name)}: ${value};`
    );

export const createSizeVariables = (sizes, varName) =>
    forVariables(
        sizes,
        ([name, percentage]) => `--${varName}-${name}: ${percentage}rem;`
    );

export const createPlainVariables = (variables, varName) =>
    forVariables(
        variables,
        ([name, value]) => `--${varName}-${name}: ${value};`
    );

const withMedia = (size, rules) => css`
    @media (min-width: ${BREAKPOINTS[size] || BREAKPOINTS.desktop}rem) {
        ${rules}
    }
`;

export const toREM = (size) => `calc(${size} / var(--font-size-px) * 1rem)`;

system-values.js

export const COLORS = {
    primary : '#EB2764',
    accent: '#34FCD8',
    contrast: '#2ECC5E',
    text: '#FFFFFF',

    //  Neutrals
    black: '#292A2B',
    gray: '#BCBFC3',
    grayDark: '#444444',
    grayHighlight: '#F0F1F4',
    grayLight: '#E0E0E4',
    grayMedium: '#888B93',
    offWhite: '#F5F5F6',
    white: '#FFFFFF',
};

export const FONT_SIZE_BASE_PX = 16;

export const FONT_SIZES = {
    XS: 0.6875,
    SM: 0.8125,
    MD: 0.9375,
    LG: 1,
    XL: 1.25,
    '2XL': 1.5,
    '3XL': 2,
    '4XL': 2.5,
    '5XL': 3,
    '6XL': 3.5,
};

export const SIZINGS = {
    '2XS': 0.125,
    XS: 0.25,
    SM: 0.5,
    MD: 0.75,
    LG: 1,
    XL: 1.5,
    '2XL': 2,
    '3XL': 2.5,
    '4XL': 3,
    '5XL': 3.5,
    '6XL': 4,
};

export const BORDER_RADIUS = {
    XS: '0.125rem',
    SM: '0.1875rem',
    MD: '0.375rem',
    LG: '0.75rem',
    XL: '4rem',
    round: '50%',
};

export const BREAKPOINTS = {
    tablet: 768 / FONT_SIZE_BASE_PX,
    desktop: 1024 / FONT_SIZE_BASE_PX,
    'desktop-XL': 1440 / FONT_SIZE_BASE_PX,
};

export const FONT_FAMILIES = {
    main:
        "'REPLACE_ME, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
};

export const FONT_WEIGHTS = {
    reg: 400,
    med: 500,
    bld: 700,
    blk: 900,
};

export const LINE_HEIGHT = {
    XS: 1,
    SM: 1.125,
    MD: 1.25,
    LG: 1.5,
    XL: 2,
};

export const TRANSITION = {
    1: '200ms ease-in-out',
    2: '300ms ease-in-out',
    3: '500ms ease-in-out',
    4: '750ms ease-in-out',
};

export const Z_INDEX = {
    backtap: -1,
    fab: 1000,
    tooltip: 2000,
    toast: 3000,
    dropdown: 4000,
    backdrop: 5000,
    banner: 5050,
    nav: 6000,
    modal: 7000,
    spinner: 8000,
};

export const COLORS_THIRD_PARTY = {
    behance: '#1769FF',
    dropbox: '#007ee5',
    facebook: '#4b6eaa',
    foursquare: '#0072b1',
    linkedin: '#007bb5',
    pinterest: '#CB2027',
    snapchat: '#fffc00',
    spotify: '#00E461',
    tumblr: '#32506d',
    twitter: '#55ACEE',
    whatsapp: '#4DC247',
    youtube: '#ff0000',
};