1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | var tslib_1 = require("tslib");
|
4 | var components_1 = require("@kalamazoo/theme/components");
|
5 | var colors = tslib_1.__importStar(require("@kalamazoo/theme/colors"));
|
6 | var utils_1 = require("./components/utils");
|
7 | var getStyles_1 = require("./components/getStyles");
|
8 | exports.fallbacks = {
|
9 | background: { light: colors.N20A, dark: colors.DN70 },
|
10 | color: { light: colors.N400, dark: colors.DN400 },
|
11 | textDecoration: { light: 'none', dark: 'none' },
|
12 | };
|
13 | exports.baseTheme = {
|
14 |
|
15 | background: {
|
16 | default: {
|
17 | default: { light: colors.N20A, dark: colors.DN70 },
|
18 | hover: { light: colors.N30A, dark: colors.DN60 },
|
19 | active: { light: utils_1.hex2rgba(colors.B75, 0.6), dark: colors.B75 },
|
20 | disabled: { light: colors.N20A, dark: colors.DN70 },
|
21 | selected: { light: colors.N700, dark: colors.DN0 },
|
22 | focusSelected: { light: colors.N700, dark: colors.DN0 },
|
23 | },
|
24 | primary: {
|
25 | default: { light: colors.B400, dark: colors.B100 },
|
26 | hover: { light: colors.B300, dark: colors.B75 },
|
27 | active: { light: colors.B500, dark: colors.B200 },
|
28 | disabled: { light: colors.N20A, dark: colors.DN70 },
|
29 | selected: { light: colors.N700, dark: colors.DN0 },
|
30 | focusSelected: { light: colors.N700, dark: colors.DN0 },
|
31 | },
|
32 | warning: {
|
33 | default: { light: colors.Y300, dark: colors.Y300 },
|
34 | hover: { light: colors.Y200, dark: colors.Y200 },
|
35 | active: { light: colors.Y400, dark: colors.Y400 },
|
36 | disabled: { light: colors.N20A, dark: colors.DN70 },
|
37 | selected: { light: colors.Y400, dark: colors.Y400 },
|
38 | focusSelected: { light: colors.Y400, dark: colors.Y400 },
|
39 | },
|
40 | danger: {
|
41 | default: { light: colors.R400, dark: colors.R400 },
|
42 | hover: { light: colors.R300, dark: colors.R300 },
|
43 | active: { light: colors.R500, dark: colors.R500 },
|
44 | disabled: { light: colors.N20A, dark: colors.DN70 },
|
45 | selected: { light: colors.R500, dark: colors.R500 },
|
46 | focusSelected: { light: colors.R500, dark: colors.R500 },
|
47 | },
|
48 | link: {
|
49 | default: { light: 'none', dark: 'none' },
|
50 | selected: { light: colors.N700, dark: colors.N20 },
|
51 | focusSelected: { light: colors.N700, dark: colors.N20 },
|
52 | },
|
53 | subtle: {
|
54 | default: { light: 'none', dark: 'none' },
|
55 | hover: { light: colors.N30A, dark: colors.DN60 },
|
56 | active: { light: utils_1.hex2rgba(colors.B75, 0.6), dark: colors.B75 },
|
57 | disabled: { light: 'none', dark: 'none' },
|
58 | selected: { light: colors.N700, dark: colors.DN0 },
|
59 | focusSelected: { light: colors.N700, dark: colors.DN0 },
|
60 | },
|
61 | 'subtle-link': {
|
62 | default: { light: 'none', dark: 'none' },
|
63 | selected: { light: colors.N700, dark: colors.N20 },
|
64 | focusSelected: { light: colors.N700, dark: colors.N20 },
|
65 | },
|
66 | },
|
67 | boxShadowColor: {
|
68 | default: {
|
69 | focus: { light: utils_1.hex2rgba(colors.B200, 0.6), dark: colors.B75 },
|
70 | focusSelected: {
|
71 | light: utils_1.hex2rgba(colors.B200, 0.6),
|
72 | dark: colors.B75,
|
73 | },
|
74 | },
|
75 | primary: {
|
76 | focus: { light: utils_1.hex2rgba(colors.B200, 0.6), dark: colors.B75 },
|
77 | focusSelected: {
|
78 | light: utils_1.hex2rgba(colors.B200, 0.6),
|
79 | dark: colors.B75,
|
80 | },
|
81 | },
|
82 | warning: {
|
83 | focus: { light: colors.Y500, dark: colors.Y500 },
|
84 | focusSelected: { light: colors.Y500, dark: colors.Y500 },
|
85 | },
|
86 | danger: {
|
87 | focus: { light: colors.R100, dark: colors.R100 },
|
88 | focusSelected: { light: colors.R100, dark: colors.R100 },
|
89 | },
|
90 | link: {
|
91 | focus: { light: utils_1.hex2rgba(colors.B200, 0.6), dark: colors.B75 },
|
92 | focusSelected: {
|
93 | light: utils_1.hex2rgba(colors.B200, 0.6),
|
94 | dark: colors.B75,
|
95 | },
|
96 | },
|
97 | subtle: {
|
98 | focus: { light: utils_1.hex2rgba(colors.B200, 0.6), dark: colors.B75 },
|
99 | focusSelected: {
|
100 | light: utils_1.hex2rgba(colors.B200, 0.6),
|
101 | dark: colors.B75,
|
102 | },
|
103 | },
|
104 | 'subtle-link': {
|
105 | focus: { light: utils_1.hex2rgba(colors.B200, 0.6), dark: colors.B75 },
|
106 | focusSelected: {
|
107 | light: utils_1.hex2rgba(colors.B200, 0.6),
|
108 | dark: colors.B75,
|
109 | },
|
110 | },
|
111 | },
|
112 | color: {
|
113 | default: {
|
114 | default: { light: colors.N500, dark: colors.DN400 },
|
115 | active: { light: colors.B400, dark: colors.B400 },
|
116 | disabled: { light: colors.N70, dark: colors.DN30 },
|
117 | selected: { light: colors.N20, dark: colors.DN400 },
|
118 | focusSelected: { light: colors.N20, dark: colors.DN400 },
|
119 | },
|
120 | primary: {
|
121 | default: { light: colors.N0, dark: colors.DN30 },
|
122 | disabled: { light: colors.N70, dark: colors.DN30 },
|
123 | selected: { light: colors.N20, dark: colors.DN400 },
|
124 | focusSelected: { light: colors.N20, dark: colors.DN400 },
|
125 | },
|
126 | warning: {
|
127 | default: { light: colors.N800, dark: colors.N800 },
|
128 | disabled: { light: colors.N70, dark: colors.DN30 },
|
129 | selected: { light: colors.N800, dark: colors.N800 },
|
130 | focusSelected: { light: colors.N800, dark: colors.N800 },
|
131 | },
|
132 | danger: {
|
133 | default: { light: colors.N0, dark: colors.N0 },
|
134 | disabled: { light: colors.N70, dark: colors.DN30 },
|
135 | selected: { light: colors.N0, dark: colors.N0 },
|
136 | focusSelected: { light: colors.N0, dark: colors.N0 },
|
137 | },
|
138 | link: {
|
139 | default: { light: colors.B400, dark: colors.B100 },
|
140 | hover: { light: colors.B300, dark: colors.B75 },
|
141 | active: { light: colors.B500, dark: colors.B200 },
|
142 | disabled: { light: colors.N70, dark: colors.DN100 },
|
143 | selected: { light: colors.N20, dark: colors.N700 },
|
144 | focusSelected: { light: colors.N20, dark: colors.N700 },
|
145 | },
|
146 | subtle: {
|
147 | default: { light: colors.N500, dark: colors.DN400 },
|
148 | active: { light: colors.B400, dark: colors.B400 },
|
149 | disabled: { light: colors.N70, dark: colors.DN100 },
|
150 | selected: { light: colors.N20, dark: colors.DN400 },
|
151 | focusSelected: { light: colors.N20, dark: colors.DN400 },
|
152 | },
|
153 | 'subtle-link': {
|
154 | default: { light: colors.N200, dark: colors.DN400 },
|
155 | hover: { light: colors.N90, dark: colors.B50 },
|
156 | active: { light: colors.N400, dark: colors.DN300 },
|
157 | disabled: { light: colors.N70, dark: colors.DN100 },
|
158 | selected: { light: colors.N20, dark: colors.DN400 },
|
159 | focusSelected: { light: colors.N20, dark: colors.DN400 },
|
160 | },
|
161 | },
|
162 | };
|
163 | function applyPropertyStyle(property, _a, theme) {
|
164 | var _b = _a.appearance, appearance = _b === void 0 ? 'default' : _b, _c = _a.state, state = _c === void 0 ? 'default' : _c, _d = _a.mode, mode = _d === void 0 ? 'light' : _d;
|
165 | var propertyStyles = theme[property];
|
166 | if (!propertyStyles) {
|
167 | return 'initial';
|
168 | }
|
169 |
|
170 | if (!propertyStyles[appearance]) {
|
171 | if (!propertyStyles['default']) {
|
172 | return exports.fallbacks[property][mode] ? exports.fallbacks[property][mode] : 'initial';
|
173 | }
|
174 | appearance = 'default';
|
175 | }
|
176 |
|
177 |
|
178 | if (!propertyStyles[appearance][state]) {
|
179 | state = 'default';
|
180 | }
|
181 | var appearanceStyles = propertyStyles[appearance];
|
182 | var stateStyles = appearanceStyles[state];
|
183 | if (!stateStyles) {
|
184 | return 'inherit';
|
185 | }
|
186 | return stateStyles[mode] || appearanceStyles.default[mode];
|
187 | }
|
188 | exports.applyPropertyStyle = applyPropertyStyle;
|
189 | exports.Theme = components_1.createTheme(function (themeProps) { return ({
|
190 | buttonStyles: getStyles_1.getButtonStyles(themeProps),
|
191 | spinnerStyles: getStyles_1.getSpinnerStyles(),
|
192 | }); });
|
193 |
|
\ | No newline at end of file |