@barguide/style-guide/dist/index.cjs.js

BarGuide.io | CSS Style Guide

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

// Useful
const transparent = 'transparent';
// Roygbiv
const red = '#f00';
const orange = '#f70';
const yellow = '#fd0';
const green = '#0f0';
const blue = '#00f';
const indigo = '#8a2be2';
const violet = '#c77df3';
// Black, white and grays
const black = '#000';
const white = '#fff';
const gray = {
    '0': '#eee',
    '1': '#e5e5e5',
    '2': '#ccc',
    '3': '#b3b3b3',
    '4': '#999',
    '5': '#555',
    '6': '#444',
    '7': '#333',
    '8': '#222',
    '9': '#111'
};
const role = {
    link: blue,
    primary: red,
    secondary: gray[7]
};
const color = {
    transparent,
    // Black, white and grays
    black,
    gray,
    white,
    // Roygbiv
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet,
    // Make these available on the "color" export
    ...role
};

const families = {
    copy: "'Exo', georgia, cursive",
    heading: "'Roboto', sans-serif",
    /** @deprecated Use the "copy" option instead */
    primary: "'Exo', georgia, cursive",
    /** @deprecated Use the "heading" option instead */
    secondary: "'Roboto', sans-serif"
};
const sizes = {
    '10': 10,
    '12': 12,
    '14': 14,
    '16': 16,
    '18': 18,
    '20': 20,
    '24': 24,
    '32': 32,
    '36': 36
};
const weights = {
    light: 300,
    regular: 500,
    bold: 700,
    'extra-bold': 900
};
const font = {
    family: families,
    size: sizes,
    weight: weights
};

/**
 * @name grid
 * @external https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179
 *
 * @description This gives us a ton of measurements out of the box, anything
 * beyond this we can just hard code or bubble up into the global CSS
 */
const grid = {
    '0': 0,
    '1xxs': 2,
    '1xs': 4,
    '1x': 8,
    '2xs': 12,
    '2x': 16,
    '3xs': 20,
    '3x': 24,
    '4xs': 28,
    '4x': 32,
    '5xs': 36,
    '5x': 40,
    '6xs': 44,
    '6x': 48,
    '7xs': 52,
    '7x': 56,
    '8xs': 60,
    '8x': 64,
    '9xs': 68,
    '9x': 72,
    '10xs': 76,
    '10x': 80
};

/* eslint-disable sort-keys-fix/sort-keys-fix */
const light = {
    'theme-background': `#f5f8fa`,
    'theme-background-light': color.white,
    'theme-background-lighter': color.white,
    'theme-background-transparent': `rgb(255 255 255 / 85%)`,
    'theme-border': `#cfd7dd`,
    'theme-border-input': `#cfd7dd`,
    'theme-copy': `#24292e`,
    'theme-copy-light': `#57606a`
};
const dark = {
    'theme-background': `#0e1117`,
    'theme-background-light': `#161b22`,
    'theme-background-lighter': `#161b22`,
    'theme-background-transparent': 'rgb(0 0 0 / 85%)',
    'theme-border': `#30363c`,
    'theme-border-input': `#30363c`,
    'theme-copy': `#c8d1d9`,
    'theme-copy-light': `#8b949e`
};
const theme = {
    dark,
    light
};

exports.color = color;
exports.font = font;
exports.grid = grid;
exports.theme = theme;