@kalamazoo/theme
Version:
The Atlaskit theme framework
64 lines • 3.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var styled_components_1 = require("styled-components");
var colors_1 = require("./colors");
exports.FLATTENED = '__FLATTENED__';
exports.CHANNEL = '__ATLASKIT_THEME__';
exports.DEFAULT_THEME_MODE = 'light';
exports.THEME_MODES = ['light', 'dark'];
/*
These theme values are expressed as functions so that if we decide to make
them dependent on props in the future, it wouldn't require a significant
refactor everywhere they are being used.
*/
exports.borderRadius = function () { return 3; };
exports.gridSize = function () { return 8; };
exports.fontSize = function () { return 14; };
exports.fontSizeSmall = function () { return 11; };
exports.fontFamily = function () {
return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
};
exports.codeFontFamily = function () {
return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
};
exports.focusRing = function (color, outlineWidth) {
if (color === void 0) { color = colors_1.B100; }
if (outlineWidth === void 0) { outlineWidth = exports.gridSize() / 4; }
return "\n &:focus {\n outline: none;\n box-shadow: 0px 0px 0px " + outlineWidth + "px " + color + ";\n }\n";
};
exports.noFocusRing = function () { return "\n box-shadow: none;\n"; };
exports.layers = {
card: function () { return 100; },
dialog: function () { return 300; },
navigation: function () { return 200; },
layer: function () { return 400; },
blanket: function () { return 500; },
modal: function () { return 510; },
flag: function () { return 600; },
spotlight: function () { return 700; },
tooltip: function () { return 800; },
};
exports.assistive = function () { return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n height: 1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"], ["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n height: 1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"]))); };
exports.skeletonShimmer = function () { return ({
css: {
backgroundColor: colors_1.skeleton(),
backgroundImage: "linear-gradient(to right, " + colors_1.skeleton() + " 0%, " + colors_1.N30 + " 20%, " + colors_1.skeleton() + " 40%, " + colors_1.skeleton() + " 100%)",
backgroundRepeat: 'no-repeat',
backgroundSize: '800px 104px',
animationDuration: '1.5s',
animationFillMode: 'forwards',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
},
keyframes: {
'0%': {
backgroundPosition: '-468px 0',
},
'100%': {
backgroundPosition: '468px 0',
},
},
}); };
var templateObject_1;
//# sourceMappingURL=constants.js.map