Skip to content

Instantly share code, notes, and snippets.

@Nikodermus
Last active Jul 21, 2021
Embed
What would you like to do?
CSS Variables Design System
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)};
}
`;
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)`;
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',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment