@vimeo/iris/themes/index.esm.js

Vimeo Design System

import { rgba, readableColor, lighten, darken, getLuminance, saturate } from 'polished';
import { white, black, slate, grayscale, blue, green, red } from '../color/colors.esm.js';

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

export { a11yColor, a11yContrast, a11yText, themes };