UNPKG

3.3 kBJavaScriptView Raw
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3var tslib_1 = require("tslib");
4var styled_components_1 = require("styled-components");
5var colors_1 = require("./colors");
6exports.FLATTENED = '__FLATTENED__';
7exports.CHANNEL = '__ATLASKIT_THEME__';
8exports.DEFAULT_THEME_MODE = 'light';
9exports.THEME_MODES = ['light', 'dark'];
10/*
11 These theme values are expressed as functions so that if we decide to make
12 them dependent on props in the future, it wouldn't require a significant
13 refactor everywhere they are being used.
14*/
15exports.borderRadius = function () { return 3; };
16exports.gridSize = function () { return 8; };
17exports.fontSize = function () { return 14; };
18exports.fontSizeSmall = function () { return 11; };
19exports.fontFamily = function () {
20 return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
21};
22exports.codeFontFamily = function () {
23 return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
24};
25exports.focusRing = function (color, outlineWidth) {
26 if (color === void 0) { color = colors_1.B100; }
27 if (outlineWidth === void 0) { outlineWidth = exports.gridSize() / 4; }
28 return "\n &:focus {\n outline: none;\n box-shadow: 0px 0px 0px " + outlineWidth + "px " + color + ";\n }\n";
29};
30exports.noFocusRing = function () { return "\n box-shadow: none;\n"; };
31exports.layers = {
32 card: function () { return 100; },
33 dialog: function () { return 300; },
34 navigation: function () { return 200; },
35 layer: function () { return 400; },
36 blanket: function () { return 500; },
37 modal: function () { return 510; },
38 flag: function () { return 600; },
39 spotlight: function () { return 700; },
40 tooltip: function () { return 800; },
41};
42exports.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"]))); };
43exports.skeletonShimmer = function () { return ({
44 css: {
45 backgroundColor: colors_1.skeleton(),
46 backgroundImage: "linear-gradient(to right, " + colors_1.skeleton() + " 0%, " + colors_1.N30 + " 20%, " + colors_1.skeleton() + " 40%, " + colors_1.skeleton() + " 100%)",
47 backgroundRepeat: 'no-repeat',
48 backgroundSize: '800px 104px',
49 animationDuration: '1.5s',
50 animationFillMode: 'forwards',
51 animationIterationCount: 'infinite',
52 animationTimingFunction: 'linear',
53 },
54 keyframes: {
55 '0%': {
56 backgroundPosition: '-468px 0',
57 },
58 '100%': {
59 backgroundPosition: '468px 0',
60 },
61 },
62}); };
63var templateObject_1;
64//# sourceMappingURL=constants.js.map
\No newline at end of file