@kalamazoo/theme
Version:
The Atlaskit theme framework
156 lines • 5.96 kB
JavaScript
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var themed_1 = tslib_1.__importDefault(require("./utils/themed"));
// Reds
exports.R50 = '#FFEBE6';
exports.R75 = '#FFBDAD';
exports.R100 = '#FF8F73';
exports.R200 = '#FF7452';
exports.R300 = '#FF5630';
exports.R400 = '#DE350B';
exports.R500 = '#BF2600';
// Yellows
exports.Y50 = '#FFFAE6';
exports.Y75 = '#FFF0B3';
exports.Y100 = '#FFE380';
exports.Y200 = '#FFC400';
exports.Y300 = '#FFAB00';
exports.Y400 = '#FF991F';
exports.Y500 = '#FF8B00';
// Greens
exports.G50 = '#E3FCEF';
exports.G75 = '#ABF5D1';
exports.G100 = '#79F2C0';
exports.G200 = '#57D9A3';
exports.G300 = '#36B37E';
exports.G400 = '#00875A';
exports.G500 = '#006644';
// Blues
exports.B50 = '#DEEBFF';
exports.B75 = '#B3D4FF';
exports.B100 = '#4C9AFF';
exports.B200 = '#2684FF';
exports.B300 = '#0065FF';
exports.B400 = '#0052CC';
exports.B500 = '#0747A6';
// Purples
exports.P50 = '#EAE6FF';
exports.P75 = '#C0B6F2';
exports.P100 = '#998DD9';
exports.P200 = '#8777D9';
exports.P300 = '#6554C0';
exports.P400 = '#5243AA';
exports.P500 = '#403294';
// Teals
exports.T50 = '#E6FCFF';
exports.T75 = '#B3F5FF';
exports.T100 = '#79E2F2';
exports.T200 = '#00C7E6';
exports.T300 = '#00B8D9';
exports.T400 = '#00A3BF';
exports.T500 = '#008DA6';
// Neutrals
exports.N0 = '#FFFFFF';
exports.N10 = '#FAFBFC';
exports.N20 = '#F4F5F7';
exports.N30 = '#EBECF0';
exports.N40 = '#DFE1E6';
exports.N50 = '#C1C7D0';
exports.N60 = '#B3BAC5';
exports.N70 = '#A5ADBA';
exports.N80 = '#97A0AF';
exports.N90 = '#8993A4';
exports.N100 = '#7A869A';
exports.N200 = '#6B778C';
exports.N300 = '#5E6C84';
exports.N400 = '#505F79';
exports.N500 = '#42526E';
exports.N600 = '#344563';
exports.N700 = '#253858';
exports.N800 = '#172B4D';
// ATTENTION: update the tints if you update this
exports.N900 = '#091E42';
// Each tint is made of N900 and an alpha channel
exports.N10A = 'rgba(9, 30, 66, 0.02)';
exports.N20A = 'rgba(9, 30, 66, 0.04)';
exports.N30A = 'rgba(9, 30, 66, 0.08)';
exports.N40A = 'rgba(9, 30, 66, 0.13)';
exports.N50A = 'rgba(9, 30, 66, 0.25)';
exports.N60A = 'rgba(9, 30, 66, 0.31)';
exports.N70A = 'rgba(9, 30, 66, 0.36)';
exports.N80A = 'rgba(9, 30, 66, 0.42)';
exports.N90A = 'rgba(9, 30, 66, 0.48)';
exports.N100A = 'rgba(9, 30, 66, 0.54)';
exports.N200A = 'rgba(9, 30, 66, 0.60)';
exports.N300A = 'rgba(9, 30, 66, 0.66)';
exports.N400A = 'rgba(9, 30, 66, 0.71)';
exports.N500A = 'rgba(9, 30, 66, 0.77)';
exports.N600A = 'rgba(9, 30, 66, 0.82)';
exports.N700A = 'rgba(9, 30, 66, 0.89)';
exports.N800A = 'rgba(9, 30, 66, 0.95)';
// Dark Mode Neutrals
exports.DN900 = '#E6EDFA';
exports.DN800 = '#DCE5F5';
exports.DN700 = '#CED9EB';
exports.DN600 = '#B8C7E0';
exports.DN500 = '#ABBBD6';
exports.DN400 = '#9FB0CC';
exports.DN300 = '#8C9CB8';
exports.DN200 = '#7988A3';
exports.DN100 = '#67758F';
exports.DN90 = '#56637A';
exports.DN80 = '#455166';
exports.DN70 = '#3B475C';
exports.DN60 = '#313D52';
exports.DN50 = '#283447';
exports.DN40 = '#202B3D';
exports.DN30 = '#1B2638';
exports.DN20 = '#121A29';
exports.DN10 = '#0E1624';
// ATTENTION: update the tints if you update this
exports.DN0 = '#0D1424';
// Each dark tint is made of DN0 and an alpha channel
exports.DN800A = 'rgba(13, 20, 36, 0.06)';
exports.DN700A = 'rgba(13, 20, 36, 0.14)';
exports.DN600A = 'rgba(13, 20, 36, 0.18)';
exports.DN500A = 'rgba(13, 20, 36, 0.29)';
exports.DN400A = 'rgba(13, 20, 36, 0.36)';
exports.DN300A = 'rgba(13, 20, 36, 0.40)';
exports.DN200A = 'rgba(13, 20, 36, 0.47)';
exports.DN100A = 'rgba(13, 20, 36, 0.53)';
exports.DN90A = 'rgba(13, 20, 36, 0.63)';
exports.DN80A = 'rgba(13, 20, 36, 0.73)';
exports.DN70A = 'rgba(13, 20, 36, 0.78)';
exports.DN60A = 'rgba(13, 20, 36, 0.81)';
exports.DN50A = 'rgba(13, 20, 36, 0.85)';
exports.DN40A = 'rgba(13, 20, 36, 0.89)';
exports.DN30A = 'rgba(13, 20, 36, 0.92)';
exports.DN20A = 'rgba(13, 20, 36, 0.95)';
exports.DN10A = 'rgba(13, 20, 36, 0.97)';
// Themed colors
exports.background = themed_1.default({ light: exports.N0, dark: exports.DN30 });
exports.backgroundActive = themed_1.default({ light: exports.B50, dark: exports.B75 });
exports.backgroundHover = themed_1.default({ light: exports.N30, dark: exports.DN70 });
exports.backgroundOnLayer = themed_1.default({ light: exports.N0, dark: exports.DN50 });
exports.text = themed_1.default({ light: exports.N900, dark: exports.DN600 });
exports.textHover = themed_1.default({ light: exports.N800, dark: exports.DN600 });
exports.textActive = themed_1.default({ light: exports.B400, dark: exports.B400 });
exports.subtleText = themed_1.default({ light: exports.N200, dark: exports.DN300 });
exports.placeholderText = themed_1.default({ light: exports.N100, dark: exports.DN200 });
exports.heading = themed_1.default({ light: exports.N800, dark: exports.DN600 });
exports.subtleHeading = themed_1.default({ light: exports.N200, dark: exports.DN300 });
exports.codeBlock = themed_1.default({ light: exports.N20, dark: exports.DN50 });
exports.link = themed_1.default({ light: exports.B400, dark: exports.B100 });
exports.linkHover = themed_1.default({ light: exports.B300, dark: exports.B200 });
exports.linkActive = themed_1.default({ light: exports.B500, dark: exports.B100 });
exports.linkOutline = themed_1.default({ light: exports.B100, dark: exports.B200 });
exports.primary = themed_1.default({ light: exports.B400, dark: exports.B100 });
exports.blue = themed_1.default({ light: exports.B400, dark: exports.B100 });
exports.teal = themed_1.default({ light: exports.T300, dark: exports.T200 });
exports.purple = themed_1.default({ light: exports.P300, dark: exports.P100 });
exports.red = themed_1.default({ light: exports.R300, dark: exports.R300 });
exports.yellow = themed_1.default({ light: exports.Y300, dark: exports.Y300 });
exports.green = themed_1.default({ light: exports.G300, dark: exports.G300 });
exports.skeleton = function () { return exports.N20; };
//# sourceMappingURL=colors.js.map
;