1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | var tslib_1 = require("tslib");
|
4 | var styled_components_1 = require("styled-components");
|
5 | var colors_1 = require("./colors");
|
6 | exports.FLATTENED = '__FLATTENED__';
|
7 | exports.CHANNEL = '__ATLASKIT_THEME__';
|
8 | exports.DEFAULT_THEME_MODE = 'light';
|
9 | exports.THEME_MODES = ['light', 'dark'];
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | exports.borderRadius = function () { return 3; };
|
16 | exports.gridSize = function () { return 8; };
|
17 | exports.fontSize = function () { return 14; };
|
18 | exports.fontSizeSmall = function () { return 11; };
|
19 | exports.fontFamily = function () {
|
20 | return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
|
21 | };
|
22 | exports.codeFontFamily = function () {
|
23 | return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
|
24 | };
|
25 | exports.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 | };
|
30 | exports.noFocusRing = function () { return "\n box-shadow: none;\n"; };
|
31 | exports.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 | };
|
42 | 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"]))); };
|
43 | exports.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 | }); };
|
63 | var templateObject_1;
|
64 |
|
\ | No newline at end of file |