@barguide/style-guide/dist/tailwind.config.js

BarGuide.io | CSS Style Guide

// 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
};

/**
 * @description A helper to take the {number} type "values" and add the
 * suffix of "px" for use in tailwinds config. Now we get to use the same
 * variables in JS and CSS quickly
 */
const valueToPixels = (data) => {
    const gridInPixels = {};
    Object.keys(data).forEach((key) => {
        gridInPixels[key] = `${data[key]}px`;
    });
    return gridInPixels;
};
/**
 * @description Build up our custom tailwind config
 * @external https://tailwindcss.com/docs/installation
 */
const config = {
    prefix: 'u-',
    purge: false,
    theme: {
        borderRadius: {
            4: `${grid['1xs']}px`,
            full: '100%'
        },
        colors: color,
        fontFamily: font.family,
        fontSize: valueToPixels(font.size),
        letterSpacing: {
            normal: 0,
            wide: `${grid['1xxs']}px`
        },
        spacing: valueToPixels(grid),
        width: {
            auto: 'auto',
            full: '100%'
        }
    }
};
module.exports = config;