@vimeo/iris/themes/index.js

Vimeo Design System

'use strict';

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

var polished = require('polished');
var color_colors = require('../color/colors.js');

var a11yDefaults = {
    textMultiplier: 1,
    contrast: false,
    motion: false,
};
var themes = {
    light: {
        name: 'light',
        a11y: a11yDefaults,
        content: {
            background: color_colors.white,
            color: color_colors.black,
            color2: color_colors.slate(800),
            disabled: color_colors.grayscale(50),
            focus: color_colors.blue(500),
            // focus: rgba(blue(500), 0.5),
        },
        item: {
            bg: color_colors.white,
            bg2: color_colors.slate(50),
            locked: color_colors.grayscale(50),
        },
        formats: {
            primary: color_colors.blue(500),
            secondary: color_colors.grayscale(50),
            alternative: '#3a5161',
            soft: color_colors.slate(800),
            basic: color_colors.black,
            positive: color_colors.green(500),
            negative: color_colors.red(500),
        },
        inputs: {
            primary: color_colors.blue(500),
            small: color_colors.red(400),
        },
        shadows: {
            small: "box-shadow: 0 0 0.334rem -0.05rem ".concat(polished.rgba(color_colors.black, 0.15), ";"),
            0: "box-shadow: 0 0 0.334rem -0.05rem ".concat(polished.rgba(color_colors.black, 0.1), ";"),
            200: "box-shadow: 0 0 0.445rem -0.0475rem ".concat(polished.rgba(color_colors.black, 0.15), ";"),
            400: "box-shadow: 0 0 0.556rem -0.045rem ".concat(polished.rgba(color_colors.black, 0.2), ";"),
            600: "box-shadow: 0 0 0.667rem -0.0425rem ".concat(polished.rgba(color_colors.black, 0.25), ";"),
            800: "box-shadow: 0 0 0.778rem -0.04rem ".concat(polished.rgba(color_colors.black, 0.3), ";"),
            1000: "box-shadow: 0 0 0.889rem -0.0375rem ".concat(polished.rgba(color_colors.black, 0.35), ";"),
        },
    },
    dark: {
        name: 'dark',
        a11y: a11yDefaults,
        content: {
            background: color_colors.grayscale(910),
            color: color_colors.white,
            color2: color_colors.grayscale(50),
            disabled: color_colors.grayscale(850),
            focus: color_colors.blue(400),
        },
        item: {
            bg: color_colors.grayscale(850),
            bg2: color_colors.slate(800),
            locked: color_colors.grayscale(800),
        },
        formats: {
            primary: color_colors.blue(500),
            secondary: color_colors.grayscale(700),
            alternative: color_colors.slate(700),
            soft: color_colors.slate(100),
            basic: color_colors.white,
            positive: color_colors.green(500),
            negative: color_colors.red(500),
        },
        inputs: {
            primary: color_colors.blue(400),
            small: color_colors.red(400),
        },
        shadows: {
            small: "box-shadow: 0 0 0.334rem -0.05rem ".concat(polished.rgba(color_colors.black, 0.15), ";"),
            0: "box-shadow: 0 0 0.334rem -0.05rem ".concat(polished.rgba(color_colors.black, 0.1), ";"),
            200: "box-shadow: 0 0 0.445rem -0.0475rem ".concat(polished.rgba(color_colors.black, 0.15), ";"),
            400: "box-shadow: 0 0 0.556rem -0.045rem ".concat(polished.rgba(color_colors.black, 0.2), ";"),
            600: "box-shadow: 0 0 0.667rem -0.0425rem ".concat(polished.rgba(color_colors.black, 0.25), ";"),
            800: "box-shadow: 0 0 0.778rem -0.04rem ".concat(polished.rgba(color_colors.black, 0.3), ";"),
            1000: "box-shadow: 0 0 0.889rem -0.0375rem ".concat(polished.rgba(color_colors.black, 0.35), ";"),
        },
    },
};
function a11yColor(color) {
    return function (_a) {
        var theme = _a.theme;
        return (theme.a11y.contrast ? polished.readableColor(polished.lighten(0.1, color)) : polished.readableColor(polished.darken(0.3, color)));
    };
}
function a11yText(size) {
    return function (_a) {
        var theme = _a.theme;
        return size * (1 + theme.a11y.textMultiplier / 5);
    };
}
function a11yContrast(color) {
    return function (_a) {
        var theme = _a.theme;
        return (theme.a11y.contrast ? (polished.getLuminance(color) > 0.179 ? polished.darken(0.15, polished.saturate(0.1, color)) : polished.lighten(0.15, polished.saturate(0.1, color))) : color);
    };
}

exports.a11yColor = a11yColor;
exports.a11yContrast = a11yContrast;
exports.a11yText = a11yText;
exports.themes = themes;