rendition/dist/theme.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.header = exports.lineHeight = exports.monospace = exports.font = exports.radius = exports.weights = exports.fontSizes = exports.space = exports.breakpoints = void 0;
var styled_system_1 = require("styled-system");
var primary = '#00AEEF';
var secondary = '#2A506F';
var tertiary = '#527699';
var quartenary = '#DDE1f0';
var danger = '#FF423D';
var warning = '#FCA321';
var success = '#1AC135';
var info = '#1496E1';
var colors = {
    primary: {
        main: primary,
        semilight: '#aedff9',
        light: '#08bcff',
        dark: '#009dd7',
    },
    secondary: {
        main: secondary,
        semilight: '#abb9c5',
        light: '#2e587a',
        dark: '#23445e',
    },
    tertiary: {
        main: tertiary,
        light: '#5b82a7',
        semilight: '#bbc8d6',
        dark: '#456482',
    },
    quartenary: {
        main: quartenary,
        light: '#f8f9fd',
        dark: '#b7bed3',
    },
    danger: {
        main: danger,
        semilight: '#ffa1a1',
        light: '#feebeb',
        dark: '#eb0800',
    },
    warning: {
        main: warning,
        semilight: '#fdd190',
        light: '#fef3e5',
        dark: '#ad6800',
    },
    success: {
        main: success,
        semilight: '#8ce09a',
        light: '#e8f8ea',
        dark: '#138b27',
    },
    info: {
        main: info,
        semilight: '#90cbee',
        light: '#e8f5fc',
        dark: '#107dbc',
    },
    text: {
        main: '#2A506F',
        light: '#527699',
        dark: '#23445e',
    },
    statusIdle: {
        main: '#89c683',
    },
    statusConfiguring: {
        main: '#ffb25e',
    },
    statusUpdating: {
        main: '#75C5F5',
    },
    statusPostProvisioning: {
        main: '#aa96d5',
    },
    statusOffline: {
        main: '#fd7c7c',
    },
    statusInactive: {
        main: '#d3d6db',
    },
    gray: {
        main: '#c6c8c9',
        light: '#f4f4f4',
        dark: '#9f9f9f',
    },
};
var defaultControlHeight = 38;
var emphasizedControlHeight = 48;
exports.breakpoints = [576, 768, 992, 1200];
exports.space = [
    0,
    4,
    8,
    16,
    defaultControlHeight,
    emphasizedControlHeight,
    128,
];
exports.fontSizes = [10, 12, 14, 16, 18, 24, 34, 58, 72];
exports.weights = [400, 600];
exports.radius = 3;
exports.font = "'Source Sans Pro', Arial, sans-serif";
exports.monospace = "'Ubuntu Mono', 'Courier New', monospace";
exports.lineHeight = 1.5;
exports.header = {
    height: '0',
};
var theme = {
    breakpoints: exports.breakpoints,
    space: exports.space,
    fontSizes: exports.fontSizes,
    weights: exports.weights,
    font: exports.font,
    monospace: exports.monospace,
    lineHeight: exports.lineHeight,
    colors: colors,
    radius: exports.radius,
    header: exports.header,
    global: {
        font: {
            family: exports.font,
            size: styled_system_1.px(exports.fontSizes[2]),
            height: exports.lineHeight,
        },
        control: {
            disabled: {
                opacity: 0.4,
            },
            border: {
                radius: '4px',
                color: colors.quartenary.main,
            },
        },
        colors: {
            focus: 'none',
            placeholder: colors.secondary.semilight,
        },
        selected: {
            background: colors.primary.main,
        },
        hover: {
            background: {
                color: colors.quartenary.main,
                opacity: 1,
            },
            color: {
                dark: 'inherit',
                light: 'inherit',
            },
        },
        active: {
            background: {
                color: colors.quartenary.main,
                opacity: 1,
            },
            color: {
                dark: 'inherit',
                light: 'inherit',
            },
        },
        drop: {
            border: {
                radius: '4px',
            },
            zIndex: 45,
            extend: "\n\t\t\t\tcolor: " + colors.secondary.main + "; border: 1px solid " + colors.quartenary.main + ";\n\t\t\t\tanimation-duration: 0s;\n\t\t\t",
        },
        input: {
            weight: 400,
        },
    },
    button: {
        height: '38px',
        font: {
            weight: 600,
            size: styled_system_1.px(13),
        },
        border: {
            width: '1px',
            radius: '20px',
            color: colors.text.main,
        },
        padding: {
            horizontal: '30px',
        },
    },
    navBar: {
        font: {
            size: styled_system_1.px(13),
        },
    },
    radioButton: {
        border: {
            width: '1px',
            color: {
                dark: colors.quartenary.main,
                light: colors.quartenary.main,
            },
        },
        hover: {
            border: {
                color: {
                    dark: colors.tertiary.main,
                    light: colors.tertiary.main,
                },
            },
        },
        check: {
            color: {
                dark: 'white',
                light: 'white',
            },
        },
        icon: { size: '12px' },
        gap: '10px',
        size: '20px',
    },
    select: {
        icons: {
            color: colors.secondary.main,
        },
        control: {
            extend: "color: " + colors.secondary.main,
        },
    },
    layer: {
        container: {
            zIndex: 40,
        },
        zIndex: 30,
    },
    text: {
        medium: {
            size: styled_system_1.px(exports.fontSizes[2]),
            height: exports.lineHeight,
        },
    },
    tab: {
        extend: "padding: " + styled_system_1.px(exports.space[1]) + " " + styled_system_1.px(exports.space[3]),
        color: colors.secondary.main,
        margin: 'none',
        border: {
            size: 'xsmall',
            color: colors.quartenary.main,
            active: {
                color: colors.primary.main,
            },
            hover: {
                color: colors.quartenary.main,
            },
        },
        hover: {
            color: colors.primary.dark,
        },
        active: {
            color: colors.primary.main,
        },
    },
    checkBox: {
        size: '20px',
        color: colors.primary.main,
        border: {
            color: {
                dark: colors.quartenary.main,
                light: colors.quartenary.main,
            },
            width: '1px',
        },
        check: {
            radius: '4px',
            thickness: '2px',
        },
        hover: {
            border: {
                color: {
                    dark: colors.quartenary.main,
                    light: colors.quartenary.main,
                },
            },
        },
        toggle: {
            color: {
                dark: colors.primary.main,
                light: colors.quartenary.main,
            },
            radius: '20px',
            size: '40px',
            knob: {},
        },
    },
    accordion: {
        border: {
            side: 'bottom',
        },
    },
};
exports.default = theme;