@breadstone/mosaik-themes 0.0.231 → 0.0.232
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +2155 -2041
- package/index.cjs.map +1 -1
- package/index.d.mts +525 -372
- package/index.d.ts +525 -372
- package/index.js +2153 -2037
- package/index.js.map +1 -1
- package/package.json +3 -4
- package/tailwind/v3/plugins/joyTailwindPlugin.js +4 -0
- package/tailwind/v3/plugins/joyTailwindPlugin.js.map +1 -1
- package/tailwind/v3/presets/joyTailwindPresets.js +4 -0
- package/tailwind/v3/presets/joyTailwindPresets.js.map +1 -1
- package/themes/___joy-tokens.css +8 -0
- package/themes/cosmopolitan.scss +670 -36
- package/themes/joy-tokens.scss +8 -0
- package/themes/joy.scss +1111 -474
- package/themes/memphis.scss +717 -83
package/index.cjs
CHANGED
|
@@ -1,209 +1,564 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var chroma7 = require('chroma-js');
|
|
3
4
|
var mosaikElements = require('@breadstone/mosaik-elements');
|
|
4
|
-
var chroma = require('chroma-js');
|
|
5
5
|
|
|
6
6
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var chroma7__default = /*#__PURE__*/_interopDefault(chroma7);
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
11
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
12
|
+
function adjust(color, amount) {
|
|
13
|
+
return Math.min(255, Math.max(0, color + amount));
|
|
14
|
+
}
|
|
15
|
+
__name(adjust, "adjust");
|
|
16
|
+
function darken(hex, factor) {
|
|
17
|
+
const [r, g, b] = chroma7__default.default(hex).rgb().map((x) => adjust(x, -factor));
|
|
18
|
+
return chroma7__default.default(r, g, b, "rgb").hex();
|
|
19
|
+
}
|
|
20
|
+
__name(darken, "darken");
|
|
21
|
+
function lighten(hex, factor) {
|
|
22
|
+
const [r, g, b] = chroma7__default.default(hex).rgb().map((x) => adjust(x, factor));
|
|
23
|
+
return chroma7__default.default(r, g, b, "rgb").hex();
|
|
24
|
+
}
|
|
25
|
+
__name(lighten, "lighten");
|
|
12
26
|
|
|
13
|
-
// src/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
// src/Colors/common.ts
|
|
28
|
+
function hexToHSL(hex) {
|
|
29
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
30
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
31
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
32
|
+
const max = Math.max(r, g, b);
|
|
33
|
+
const min = Math.min(r, g, b);
|
|
34
|
+
let h = 0;
|
|
35
|
+
let s = 0;
|
|
36
|
+
const l = (max + min) / 2;
|
|
37
|
+
if (max === min) {
|
|
38
|
+
h = 0;
|
|
39
|
+
s = 0;
|
|
40
|
+
} else {
|
|
41
|
+
const d = max - min;
|
|
42
|
+
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
43
|
+
switch (max) {
|
|
44
|
+
case r:
|
|
45
|
+
h = (g - b) / d + (g < b ? 6 : 0);
|
|
46
|
+
break;
|
|
47
|
+
case g:
|
|
48
|
+
h = (b - r) / d + 2;
|
|
49
|
+
break;
|
|
50
|
+
case b:
|
|
51
|
+
h = (r - g) / d + 4;
|
|
52
|
+
break;
|
|
53
|
+
}
|
|
54
|
+
h /= 6;
|
|
34
55
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
56
|
+
return [
|
|
57
|
+
h,
|
|
58
|
+
s,
|
|
59
|
+
l
|
|
60
|
+
];
|
|
61
|
+
}
|
|
62
|
+
__name(hexToHSL, "hexToHSL");
|
|
63
|
+
function hslToHex(h, s, l) {
|
|
64
|
+
const hue2rgb = /* @__PURE__ */ __name((p, q, t) => {
|
|
65
|
+
if (t < 0) {
|
|
66
|
+
t += 1;
|
|
67
|
+
}
|
|
68
|
+
if (t > 1) {
|
|
69
|
+
t -= 1;
|
|
70
|
+
}
|
|
71
|
+
if (t < 1 / 6) {
|
|
72
|
+
return p + (q - p) * 6 * t;
|
|
73
|
+
}
|
|
74
|
+
if (t < 1 / 2) {
|
|
75
|
+
return q;
|
|
76
|
+
}
|
|
77
|
+
if (t < 2 / 3) {
|
|
78
|
+
return p + (q - p) * (2 / 3 - t) * 6;
|
|
79
|
+
}
|
|
80
|
+
return p;
|
|
81
|
+
}, "hue2rgb");
|
|
82
|
+
let r = 0;
|
|
83
|
+
let g = 0;
|
|
84
|
+
let b = 0;
|
|
85
|
+
if (s === 0) {
|
|
86
|
+
r = l;
|
|
87
|
+
g = l;
|
|
88
|
+
b = l;
|
|
89
|
+
} else {
|
|
90
|
+
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
91
|
+
const p = 2 * l - q;
|
|
92
|
+
r = hue2rgb(p, q, h + 1 / 3);
|
|
93
|
+
g = hue2rgb(p, q, h);
|
|
94
|
+
b = hue2rgb(p, q, h - 1 / 3);
|
|
66
95
|
}
|
|
67
|
-
}
|
|
96
|
+
return `#${Math.round(r * 255).toString(16).padStart(2, "0")}${Math.round(g * 255).toString(16).padStart(2, "0")}${Math.round(b * 255).toString(16).padStart(2, "0")}`;
|
|
97
|
+
}
|
|
98
|
+
__name(hslToHex, "hslToHex");
|
|
99
|
+
function adjustHue(hsl, adjustment) {
|
|
100
|
+
return [
|
|
101
|
+
(hsl[0] + adjustment + 1) % 1,
|
|
102
|
+
hsl[1],
|
|
103
|
+
hsl[2]
|
|
104
|
+
];
|
|
105
|
+
}
|
|
106
|
+
__name(adjustHue, "adjustHue");
|
|
68
107
|
|
|
69
|
-
// src/
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
108
|
+
// src/Colors/generators/analogous.ts
|
|
109
|
+
function generateAnalogousPalette(baseHex, adjustment) {
|
|
110
|
+
const baseHSL = hexToHSL(baseHex);
|
|
111
|
+
const adjustedHSL = adjustHue(baseHSL, adjustment);
|
|
112
|
+
const palette = {};
|
|
113
|
+
const steps = [
|
|
114
|
+
0,
|
|
115
|
+
50,
|
|
116
|
+
100,
|
|
117
|
+
200,
|
|
118
|
+
300,
|
|
119
|
+
400,
|
|
120
|
+
500,
|
|
121
|
+
600,
|
|
122
|
+
700,
|
|
123
|
+
800,
|
|
124
|
+
900
|
|
125
|
+
];
|
|
126
|
+
steps.forEach((step) => {
|
|
127
|
+
let [h, s, l] = adjustedHSL;
|
|
128
|
+
if (step === 0) {
|
|
129
|
+
l = 1;
|
|
130
|
+
} else {
|
|
131
|
+
l = 1 - step / 1e3;
|
|
132
|
+
}
|
|
133
|
+
palette[`${step}`] = hslToHex(h, s, Math.max(0, Math.min(1, l)));
|
|
134
|
+
});
|
|
135
|
+
return palette;
|
|
136
|
+
}
|
|
137
|
+
__name(generateAnalogousPalette, "generateAnalogousPalette");
|
|
138
|
+
function generateAnalogousColor(baseHex, adjustment) {
|
|
139
|
+
const baseHSL = hexToHSL(baseHex);
|
|
140
|
+
const adjustedHSL = adjustHue(baseHSL, adjustment);
|
|
141
|
+
const [h, s] = adjustedHSL;
|
|
142
|
+
return hslToHex(h, s, 0.5);
|
|
143
|
+
}
|
|
144
|
+
__name(generateAnalogousColor, "generateAnalogousColor");
|
|
145
|
+
function generateMaterialPalette(hexColor) {
|
|
146
|
+
const baseLight = chroma7__default.default("#ffffff");
|
|
147
|
+
const baseDark = chroma7__default.default("#000000");
|
|
148
|
+
const palette = {};
|
|
149
|
+
const steps = [
|
|
150
|
+
0,
|
|
151
|
+
50,
|
|
152
|
+
100,
|
|
153
|
+
200,
|
|
154
|
+
300,
|
|
155
|
+
400,
|
|
156
|
+
500,
|
|
157
|
+
600,
|
|
158
|
+
700,
|
|
159
|
+
800,
|
|
160
|
+
900
|
|
161
|
+
];
|
|
162
|
+
const amounts = [
|
|
163
|
+
0,
|
|
164
|
+
12,
|
|
165
|
+
30,
|
|
166
|
+
50,
|
|
167
|
+
70,
|
|
168
|
+
85,
|
|
169
|
+
100,
|
|
170
|
+
87,
|
|
171
|
+
70,
|
|
172
|
+
54,
|
|
173
|
+
25
|
|
174
|
+
];
|
|
175
|
+
steps.forEach((step, i) => {
|
|
176
|
+
const base = step <= 500 ? baseLight : baseDark;
|
|
177
|
+
palette[`${step}`] = chroma7__default.default.mix(base, hexColor, amounts[i] / 100, "rgb").hex();
|
|
178
|
+
});
|
|
179
|
+
return palette;
|
|
180
|
+
}
|
|
181
|
+
__name(generateMaterialPalette, "generateMaterialPalette");
|
|
182
|
+
|
|
183
|
+
// src/Colors/generators/complementary.ts
|
|
184
|
+
function generateComplementaryPalette(baseHex) {
|
|
185
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
186
|
+
const complementaryH = (h + 180) % 360;
|
|
187
|
+
return generateMaterialPalette(chroma7__default.default.hsl(complementaryH, s, l).hex());
|
|
188
|
+
}
|
|
189
|
+
__name(generateComplementaryPalette, "generateComplementaryPalette");
|
|
190
|
+
function generateComplementaryColor(baseHex) {
|
|
191
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
192
|
+
const complementaryH = (h + 180) % 360;
|
|
193
|
+
return chroma7__default.default.hsl(complementaryH, s, l).hex();
|
|
194
|
+
}
|
|
195
|
+
__name(generateComplementaryColor, "generateComplementaryColor");
|
|
196
|
+
function generateSplitComplementaryColors(baseHex) {
|
|
197
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
198
|
+
const splitH1 = (h + 150) % 360;
|
|
199
|
+
const splitH2 = (h + 210) % 360;
|
|
200
|
+
return [
|
|
201
|
+
chroma7__default.default.hsl(splitH1, s, l).hex(),
|
|
202
|
+
chroma7__default.default.hsl(splitH2, s, l).hex()
|
|
203
|
+
];
|
|
204
|
+
}
|
|
205
|
+
__name(generateSplitComplementaryColors, "generateSplitComplementaryColors");
|
|
206
|
+
function generateSplitComplementaryColor1(baseHex) {
|
|
207
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
208
|
+
const splitH = (h + 150) % 360;
|
|
209
|
+
return chroma7__default.default.hsl(splitH, s, l).hex();
|
|
210
|
+
}
|
|
211
|
+
__name(generateSplitComplementaryColor1, "generateSplitComplementaryColor1");
|
|
212
|
+
function generateSplitComplementaryColor2(baseHex) {
|
|
213
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
214
|
+
const splitH = (h + 210) % 360;
|
|
215
|
+
return chroma7__default.default.hsl(splitH, s, l).hex();
|
|
216
|
+
}
|
|
217
|
+
__name(generateSplitComplementaryColor2, "generateSplitComplementaryColor2");
|
|
218
|
+
function generateTetradicColors(baseHex) {
|
|
219
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
220
|
+
return [
|
|
221
|
+
chroma7__default.default.hsl((h + 90) % 360, s, l).hex(),
|
|
222
|
+
chroma7__default.default.hsl((h + 180) % 360, s, l).hex(),
|
|
223
|
+
chroma7__default.default.hsl((h + 270) % 360, s, l).hex()
|
|
224
|
+
];
|
|
225
|
+
}
|
|
226
|
+
__name(generateTetradicColors, "generateTetradicColors");
|
|
227
|
+
function generateTetradicColor1(baseHex) {
|
|
228
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
229
|
+
return chroma7__default.default.hsl((h + 90) % 360, s, l).hex();
|
|
230
|
+
}
|
|
231
|
+
__name(generateTetradicColor1, "generateTetradicColor1");
|
|
232
|
+
function generateTetradicColor3(baseHex) {
|
|
233
|
+
const [h, s, l] = chroma7__default.default(baseHex).hsl();
|
|
234
|
+
return chroma7__default.default.hsl((h + 270) % 360, s, l).hex();
|
|
235
|
+
}
|
|
236
|
+
__name(generateTetradicColor3, "generateTetradicColor3");
|
|
237
|
+
|
|
238
|
+
// src/Colors/generators/triadic.ts
|
|
239
|
+
function generateTriadicPalette(baseHex, adjustment) {
|
|
240
|
+
const baseHSL = hexToHSL(baseHex);
|
|
241
|
+
const triadicHSL = adjustHue(baseHSL, adjustment);
|
|
242
|
+
const palette = {};
|
|
243
|
+
const steps = [
|
|
244
|
+
0,
|
|
245
|
+
50,
|
|
246
|
+
100,
|
|
247
|
+
200,
|
|
248
|
+
300,
|
|
249
|
+
400,
|
|
250
|
+
500,
|
|
251
|
+
600,
|
|
252
|
+
700,
|
|
253
|
+
800,
|
|
254
|
+
900
|
|
255
|
+
];
|
|
256
|
+
steps.forEach((step) => {
|
|
257
|
+
let [h, s, l] = triadicHSL;
|
|
258
|
+
if (step === 0) {
|
|
259
|
+
l = 1;
|
|
260
|
+
} else {
|
|
261
|
+
l = 1 - step / 1e3;
|
|
262
|
+
}
|
|
263
|
+
palette[`${step}`] = hslToHex(h, s, Math.max(0, Math.min(1, l)));
|
|
264
|
+
});
|
|
265
|
+
return palette;
|
|
266
|
+
}
|
|
267
|
+
__name(generateTriadicPalette, "generateTriadicPalette");
|
|
268
|
+
function generateTriadicColor(baseHex, adjustment) {
|
|
269
|
+
const baseHSL = hexToHSL(baseHex);
|
|
270
|
+
const triadicHSL = adjustHue(baseHSL, adjustment);
|
|
271
|
+
const [h, s] = triadicHSL;
|
|
272
|
+
return hslToHex(h, s, 0.5);
|
|
273
|
+
}
|
|
274
|
+
__name(generateTriadicColor, "generateTriadicColor");
|
|
275
|
+
|
|
276
|
+
// src/Colors/index.ts
|
|
277
|
+
(function(Colors2) {
|
|
278
|
+
Colors2.toDarken = darken;
|
|
279
|
+
Colors2.toLighten = lighten;
|
|
280
|
+
Colors2.toMaterialPalette = generateMaterialPalette;
|
|
281
|
+
Colors2.toComplementaryPalette = generateComplementaryPalette;
|
|
282
|
+
Colors2.toComplementaryColor = generateComplementaryColor;
|
|
283
|
+
Colors2.toAnalogousPalette = generateAnalogousPalette;
|
|
284
|
+
Colors2.toAnalogousColor = generateAnalogousColor;
|
|
285
|
+
Colors2.toTriadicPalette = generateTriadicPalette;
|
|
286
|
+
Colors2.toTriadicColor = generateTriadicColor;
|
|
287
|
+
Colors2.toSplitComplementaryColors = generateSplitComplementaryColors;
|
|
288
|
+
Colors2.toSplitComplementaryColor1 = generateSplitComplementaryColor1;
|
|
289
|
+
Colors2.toSplitComplementaryColor2 = generateSplitComplementaryColor2;
|
|
290
|
+
Colors2.toTetradicColors = generateTetradicColors;
|
|
291
|
+
Colors2.toTetradicColor1 = generateTetradicColor1;
|
|
292
|
+
Colors2.toTetradicColor3 = generateTetradicColor3;
|
|
293
|
+
})(exports.Colors || (exports.Colors = {}));
|
|
294
|
+
exports.Colors = void 0;
|
|
295
|
+
|
|
296
|
+
// src/Theming/Adapters/BrowserPlatformAdapter.ts
|
|
297
|
+
var BrowserPlatformAdapter = class {
|
|
298
|
+
static {
|
|
299
|
+
__name(this, "BrowserPlatformAdapter");
|
|
300
|
+
}
|
|
301
|
+
// #region Methods
|
|
302
|
+
matchMedia(query) {
|
|
303
|
+
return window.matchMedia(query).matches;
|
|
304
|
+
}
|
|
305
|
+
setDocumentAttribute(name, value) {
|
|
306
|
+
document.documentElement.setAttribute(name, value);
|
|
307
|
+
}
|
|
308
|
+
getDocumentAttribute(name) {
|
|
309
|
+
return document.documentElement.getAttribute(name);
|
|
310
|
+
}
|
|
311
|
+
observeDocumentAttributes(attributes, callback) {
|
|
312
|
+
const observer = new MutationObserver((mutations) => {
|
|
313
|
+
mutations.forEach((mutation) => {
|
|
314
|
+
if (mutation.type === "attributes" && mutation.attributeName) {
|
|
315
|
+
const newValue = document.documentElement.getAttribute(mutation.attributeName);
|
|
316
|
+
callback(mutation.attributeName, newValue);
|
|
317
|
+
}
|
|
318
|
+
});
|
|
319
|
+
});
|
|
320
|
+
observer.observe(document.documentElement, {
|
|
321
|
+
attributes: true,
|
|
322
|
+
attributeFilter: attributes
|
|
323
|
+
});
|
|
324
|
+
return () => observer.disconnect();
|
|
325
|
+
}
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
// src/Theming/Adapters/NodePlatformAdapter.ts
|
|
329
|
+
var NodePlatformAdapter = class {
|
|
330
|
+
static {
|
|
331
|
+
__name(this, "NodePlatformAdapter");
|
|
332
|
+
}
|
|
333
|
+
// #region Methods
|
|
334
|
+
matchMedia(_query) {
|
|
335
|
+
return false;
|
|
336
|
+
}
|
|
337
|
+
setDocumentAttribute(_name, _value) {
|
|
338
|
+
}
|
|
339
|
+
getDocumentAttribute(_name) {
|
|
340
|
+
return null;
|
|
341
|
+
}
|
|
342
|
+
observeDocumentAttributes(_attributes, _callback) {
|
|
343
|
+
return () => {
|
|
344
|
+
};
|
|
345
|
+
}
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
// src/Theming/Adapters/PlatformAdapterFactory.ts
|
|
349
|
+
var PlatformAdapterFactory = class {
|
|
350
|
+
static {
|
|
351
|
+
__name(this, "PlatformAdapterFactory");
|
|
352
|
+
}
|
|
353
|
+
// #region Methods
|
|
354
|
+
/**
|
|
355
|
+
* Creates the appropriate platform adapter based on the current environment.
|
|
356
|
+
* Automatically detects if running in browser or Node.js.
|
|
357
|
+
*
|
|
358
|
+
* @public
|
|
359
|
+
*/
|
|
360
|
+
static create() {
|
|
361
|
+
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
362
|
+
return new BrowserPlatformAdapter();
|
|
363
|
+
}
|
|
364
|
+
return new NodePlatformAdapter();
|
|
365
|
+
}
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
// src/Theming/ThemeFactory.ts
|
|
369
|
+
var ThemeFactory = class {
|
|
370
|
+
static {
|
|
371
|
+
__name(this, "ThemeFactory");
|
|
372
|
+
}
|
|
373
|
+
/**
|
|
374
|
+
* Creates a new theme.
|
|
375
|
+
*
|
|
376
|
+
* @public
|
|
377
|
+
* @static
|
|
378
|
+
*/
|
|
379
|
+
static create(init) {
|
|
380
|
+
return {
|
|
381
|
+
name: init.name,
|
|
382
|
+
scheme: init.scheme,
|
|
383
|
+
palette: init.palette,
|
|
384
|
+
fontFamily: init.fontFamily,
|
|
385
|
+
typography: init.typography,
|
|
386
|
+
layout: init.layout,
|
|
387
|
+
elevation: init.elevation
|
|
388
|
+
};
|
|
389
|
+
}
|
|
390
|
+
/**
|
|
391
|
+
* Merges the given theme with the initial theme.
|
|
392
|
+
*
|
|
393
|
+
* @public
|
|
394
|
+
* @static
|
|
395
|
+
*/
|
|
396
|
+
static merge(init, theme) {
|
|
397
|
+
return {
|
|
398
|
+
name: init.name,
|
|
399
|
+
scheme: {
|
|
400
|
+
...theme.scheme,
|
|
401
|
+
...init.scheme
|
|
402
|
+
},
|
|
403
|
+
palette: {
|
|
404
|
+
...theme.palette,
|
|
405
|
+
...init.palette
|
|
406
|
+
},
|
|
407
|
+
fontFamily: init.fontFamily.length > 0 ? init.fontFamily : theme.fontFamily,
|
|
408
|
+
typography: {
|
|
409
|
+
...theme.typography,
|
|
410
|
+
...init.typography
|
|
411
|
+
},
|
|
412
|
+
layout: {
|
|
413
|
+
...theme.layout,
|
|
414
|
+
...init.layout
|
|
415
|
+
},
|
|
416
|
+
elevation: {
|
|
417
|
+
...theme.elevation,
|
|
418
|
+
...init.elevation
|
|
419
|
+
}
|
|
420
|
+
};
|
|
421
|
+
}
|
|
422
|
+
};
|
|
423
|
+
|
|
424
|
+
// src/Theming/Tokens/CosmopolitanTokens.ts
|
|
425
|
+
var NAME = "cosmopolitan";
|
|
426
|
+
var FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
427
|
+
var LAYOUT_RADIUS = "3px";
|
|
428
|
+
var LAYOUT_SPACE = "8px";
|
|
429
|
+
var LAYOUT_THICKNESS = "1px";
|
|
430
|
+
var SCHEME_LIGHT_SURFACE = "#fefefe";
|
|
431
|
+
var SCHEME_LIGHT_CONTRAST = "#ffffff";
|
|
432
|
+
var SCHEME_LIGHT_BACKGROUND = "#ffffff";
|
|
433
|
+
var SCHEME_LIGHT_FOREGROUND = "#000000";
|
|
434
|
+
var SCHEME_LIGHT_HIGHLIGHT = "#e2e2e2";
|
|
435
|
+
var SCHEME_LIGHT_MIDDLELIGHT = "#777777";
|
|
436
|
+
var SCHEME_LIGHT_LOWLIGHT = "#4d4d4d";
|
|
437
|
+
var SCHEME_LIGHT_TRANSPARENT = "rgba(255, 255, 255, 0)";
|
|
438
|
+
var SCHEME_LIGHT_SEMI_TRANSPARENT = "rgba(255, 255, 255, 0.67)";
|
|
439
|
+
var SCHEME_LIGHT_DISABLED = "#b8b5b2";
|
|
440
|
+
var SCHEME_LIGHT_SELECTION = "#ffaad4";
|
|
441
|
+
var SCHEME_DARK_SURFACE = "#2e2d2d";
|
|
442
|
+
var SCHEME_DARK_CONTRAST = "#ffffff";
|
|
443
|
+
var SCHEME_DARK_BACKGROUND = "#2e2d2d";
|
|
444
|
+
var SCHEME_DARK_FOREGROUND = "#ffffff";
|
|
445
|
+
var SCHEME_DARK_HIGHLIGHT = "#333333";
|
|
446
|
+
var SCHEME_DARK_MIDDLELIGHT = "#666666";
|
|
447
|
+
var SCHEME_DARK_LOWLIGHT = "#999999";
|
|
448
|
+
var SCHEME_DARK_TRANSPARENT = "rgba(23, 23, 23, 0)";
|
|
449
|
+
var SCHEME_DARK_SEMI_TRANSPARENT = "rgba(23, 23, 23, 0.67)";
|
|
450
|
+
var SCHEME_DARK_DISABLED = "#5c5956";
|
|
451
|
+
var SCHEME_DARK_SELECTION = "#ff66aa";
|
|
452
|
+
var COLOR_LIGHT_PRIMARY_0 = "#ffffff";
|
|
453
|
+
var COLOR_LIGHT_PRIMARY_50 = "#fce4ec";
|
|
454
|
+
var COLOR_LIGHT_PRIMARY_100 = "#f8bcd0";
|
|
455
|
+
var COLOR_LIGHT_PRIMARY_200 = "#f48fb1";
|
|
456
|
+
var COLOR_LIGHT_PRIMARY_300 = "#f06292";
|
|
457
|
+
var COLOR_LIGHT_PRIMARY_400 = "#ec407a";
|
|
458
|
+
var COLOR_LIGHT_PRIMARY_500 = "#e91e63";
|
|
459
|
+
var COLOR_LIGHT_PRIMARY_600 = "#cb1a56";
|
|
460
|
+
var COLOR_LIGHT_PRIMARY_700 = "#a31545";
|
|
461
|
+
var COLOR_LIGHT_PRIMARY_800 = "#7e1035";
|
|
462
|
+
var COLOR_LIGHT_PRIMARY_900 = "#3a0819";
|
|
463
|
+
var COLOR_LIGHT_SECONDARY_0 = "#ffffff";
|
|
464
|
+
var COLOR_LIGHT_SECONDARY_50 = "#e6f6e9";
|
|
465
|
+
var COLOR_LIGHT_SECONDARY_100 = "#c3e8c9";
|
|
466
|
+
var COLOR_LIGHT_SECONDARY_200 = "#9bd9a7";
|
|
467
|
+
var COLOR_LIGHT_SECONDARY_300 = "#70cb83";
|
|
468
|
+
var COLOR_LIGHT_SECONDARY_400 = "#4dbf68";
|
|
469
|
+
var COLOR_LIGHT_SECONDARY_500 = "#21b34d";
|
|
470
|
+
var COLOR_LIGHT_SECONDARY_600 = "#16a444";
|
|
471
|
+
var COLOR_LIGHT_SECONDARY_700 = "#009238";
|
|
472
|
+
var COLOR_LIGHT_SECONDARY_800 = "#00812d";
|
|
473
|
+
var COLOR_LIGHT_SECONDARY_900 = "#006218";
|
|
474
|
+
var COLOR_LIGHT_TERTIARY_0 = "#ffffff";
|
|
475
|
+
var COLOR_LIGHT_TERTIARY_50 = "#e1f5fc";
|
|
476
|
+
var COLOR_LIGHT_TERTIARY_100 = "#b4e6f7";
|
|
477
|
+
var COLOR_LIGHT_TERTIARY_200 = "#84d5f3";
|
|
478
|
+
var COLOR_LIGHT_TERTIARY_300 = "#56c5ee";
|
|
479
|
+
var COLOR_LIGHT_TERTIARY_400 = "#35b8eb";
|
|
480
|
+
var COLOR_LIGHT_TERTIARY_500 = "#19ace9";
|
|
481
|
+
var COLOR_LIGHT_TERTIARY_600 = "#139edb";
|
|
482
|
+
var COLOR_LIGHT_TERTIARY_700 = "#098bc7";
|
|
483
|
+
var COLOR_LIGHT_TERTIARY_800 = "#087ab4";
|
|
484
|
+
var COLOR_LIGHT_TERTIARY_900 = "#005a92";
|
|
485
|
+
var COLOR_LIGHT_INFO_0 = "#ffffff";
|
|
486
|
+
var COLOR_LIGHT_INFO_50 = "#f4faff";
|
|
487
|
+
var COLOR_LIGHT_INFO_100 = "#ddf1ff";
|
|
488
|
+
var COLOR_LIGHT_INFO_200 = "#addbff";
|
|
489
|
+
var COLOR_LIGHT_INFO_300 = "#6fb6ff";
|
|
490
|
+
var COLOR_LIGHT_INFO_400 = "#3990ff";
|
|
491
|
+
var COLOR_LIGHT_INFO_500 = "#096bde";
|
|
492
|
+
var COLOR_LIGHT_INFO_600 = "#054da7";
|
|
493
|
+
var COLOR_LIGHT_INFO_700 = "#02367d";
|
|
494
|
+
var COLOR_LIGHT_INFO_800 = "#072859";
|
|
495
|
+
var COLOR_LIGHT_INFO_900 = "#00153c";
|
|
496
|
+
var COLOR_LIGHT_WARNING_0 = "#ffffff";
|
|
497
|
+
var COLOR_LIGHT_WARNING_50 = "#fff8c5";
|
|
498
|
+
var COLOR_LIGHT_WARNING_100 = "#fae17d";
|
|
499
|
+
var COLOR_LIGHT_WARNING_200 = "#eac54f";
|
|
500
|
+
var COLOR_LIGHT_WARNING_300 = "#d4a72c";
|
|
501
|
+
var COLOR_LIGHT_WARNING_400 = "#bf8700";
|
|
502
|
+
var COLOR_LIGHT_WARNING_500 = "#9a6700";
|
|
503
|
+
var COLOR_LIGHT_WARNING_600 = "#7d4e00";
|
|
504
|
+
var COLOR_LIGHT_WARNING_700 = "#633c01";
|
|
505
|
+
var COLOR_LIGHT_WARNING_800 = "#4d2d00";
|
|
506
|
+
var COLOR_LIGHT_WARNING_900 = "#3b2300";
|
|
507
|
+
var COLOR_LIGHT_DANGER_0 = "#ffffff";
|
|
508
|
+
var COLOR_LIGHT_DANGER_50 = "#fff8f6";
|
|
509
|
+
var COLOR_LIGHT_DANGER_100 = "#ffe9e8";
|
|
510
|
+
var COLOR_LIGHT_DANGER_200 = "#ffc7c5";
|
|
511
|
+
var COLOR_LIGHT_DANGER_300 = "#ff9192";
|
|
512
|
+
var COLOR_LIGHT_DANGER_400 = "#fa5255";
|
|
513
|
+
var COLOR_LIGHT_DANGER_500 = "#d3232f";
|
|
514
|
+
var COLOR_LIGHT_DANGER_600 = "#a10e25";
|
|
515
|
+
var COLOR_LIGHT_DANGER_700 = "#77061b";
|
|
516
|
+
var COLOR_LIGHT_DANGER_800 = "#580013";
|
|
517
|
+
var COLOR_LIGHT_DANGER_900 = "#39000d";
|
|
518
|
+
var COLOR_LIGHT_SUCCESS_0 = "#ffffff";
|
|
519
|
+
var COLOR_LIGHT_SUCCESS_50 = "#f3fef5";
|
|
520
|
+
var COLOR_LIGHT_SUCCESS_100 = "#d7f5dd";
|
|
521
|
+
var COLOR_LIGHT_SUCCESS_200 = "#77ec95";
|
|
522
|
+
var COLOR_LIGHT_SUCCESS_300 = "#4cc76e";
|
|
523
|
+
var COLOR_LIGHT_SUCCESS_400 = "#2ca24d";
|
|
524
|
+
var COLOR_LIGHT_SUCCESS_500 = "#1a7d36";
|
|
525
|
+
var COLOR_LIGHT_SUCCESS_600 = "#0f5d26";
|
|
526
|
+
var COLOR_LIGHT_SUCCESS_700 = "#034318";
|
|
527
|
+
var COLOR_LIGHT_SUCCESS_800 = "#002f0f";
|
|
528
|
+
var COLOR_LIGHT_SUCCESS_900 = "#001d09";
|
|
529
|
+
var COLOR_LIGHT_HIGHLIGHT_0 = "#ffffff";
|
|
530
|
+
var COLOR_LIGHT_HIGHLIGHT_50 = "#fdf7ff";
|
|
531
|
+
var COLOR_LIGHT_HIGHLIGHT_100 = "#f4eaff";
|
|
532
|
+
var COLOR_LIGHT_HIGHLIGHT_200 = "#e1cbff";
|
|
533
|
+
var COLOR_LIGHT_HIGHLIGHT_300 = "#c69eff";
|
|
534
|
+
var COLOR_LIGHT_HIGHLIGHT_400 = "#a374f9";
|
|
535
|
+
var COLOR_LIGHT_HIGHLIGHT_500 = "#814dde";
|
|
536
|
+
var COLOR_LIGHT_HIGHLIGHT_600 = "#5f35ae";
|
|
537
|
+
var COLOR_LIGHT_HIGHLIGHT_700 = "#452382";
|
|
538
|
+
var COLOR_LIGHT_HIGHLIGHT_800 = "#301761";
|
|
539
|
+
var COLOR_LIGHT_HIGHLIGHT_900 = "#1d0a42";
|
|
540
|
+
var COLOR_LIGHT_NEUTRAL_0 = "#ffffff";
|
|
541
|
+
var COLOR_LIGHT_NEUTRAL_50 = "#f7f7f8";
|
|
542
|
+
var COLOR_LIGHT_NEUTRAL_100 = "#ebebef";
|
|
543
|
+
var COLOR_LIGHT_NEUTRAL_200 = "#d8d8df";
|
|
544
|
+
var COLOR_LIGHT_NEUTRAL_300 = "#b9b9c6";
|
|
545
|
+
var COLOR_LIGHT_NEUTRAL_400 = "#8f8fa3";
|
|
546
|
+
var COLOR_LIGHT_NEUTRAL_500 = "#73738c";
|
|
547
|
+
var COLOR_LIGHT_NEUTRAL_600 = "#5a5a72";
|
|
548
|
+
var COLOR_LIGHT_NEUTRAL_700 = "#434356";
|
|
549
|
+
var COLOR_LIGHT_NEUTRAL_800 = "#25252d";
|
|
550
|
+
var COLOR_LIGHT_NEUTRAL_900 = "#131318";
|
|
551
|
+
var COLOR_DARK_PRIMARY_0 = "#000000";
|
|
552
|
+
var COLOR_DARK_PRIMARY_50 = "#3a0819";
|
|
553
|
+
var COLOR_DARK_PRIMARY_100 = "#7e1035";
|
|
554
|
+
var COLOR_DARK_PRIMARY_200 = "#a31545";
|
|
555
|
+
var COLOR_DARK_PRIMARY_300 = "#cb1a56";
|
|
556
|
+
var COLOR_DARK_PRIMARY_400 = "#e91e63";
|
|
557
|
+
var COLOR_DARK_PRIMARY_500 = "#ec407a";
|
|
558
|
+
var COLOR_DARK_PRIMARY_600 = "#f06292";
|
|
559
|
+
var COLOR_DARK_PRIMARY_700 = "#f48fb1";
|
|
560
|
+
var COLOR_DARK_PRIMARY_800 = "#f8bcd0";
|
|
561
|
+
var COLOR_DARK_PRIMARY_900 = "#fce4ec";
|
|
207
562
|
var COLOR_DARK_SECONDARY_0 = "#000000";
|
|
208
563
|
var COLOR_DARK_SECONDARY_50 = "#006218";
|
|
209
564
|
var COLOR_DARK_SECONDARY_100 = "#00812d";
|
|
@@ -292,97 +647,70 @@ var COLOR_DARK_NEUTRAL_600 = "#b9b9c6";
|
|
|
292
647
|
var COLOR_DARK_NEUTRAL_700 = "#d8d8df";
|
|
293
648
|
var COLOR_DARK_NEUTRAL_800 = "#ebebef";
|
|
294
649
|
var COLOR_DARK_NEUTRAL_900 = "#f7f7f8";
|
|
295
|
-
var TYPOGRAPHY_HEADLINE1_FONT_FAMILY = "
|
|
296
|
-
var TYPOGRAPHY_HEADLINE1_FONT_SIZE = "
|
|
297
|
-
var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT = "
|
|
650
|
+
var TYPOGRAPHY_HEADLINE1_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
651
|
+
var TYPOGRAPHY_HEADLINE1_FONT_SIZE = "24px";
|
|
652
|
+
var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT = "28px";
|
|
298
653
|
var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT = "300";
|
|
299
654
|
var TYPOGRAPHY_HEADLINE1_LETTER_SPACING = "-0.25px";
|
|
300
655
|
var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION = "none";
|
|
301
656
|
var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM = "none";
|
|
302
|
-
var TYPOGRAPHY_HEADLINE2_FONT_FAMILY = "
|
|
303
|
-
var TYPOGRAPHY_HEADLINE2_FONT_SIZE = "
|
|
304
|
-
var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT = "
|
|
657
|
+
var TYPOGRAPHY_HEADLINE2_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
658
|
+
var TYPOGRAPHY_HEADLINE2_FONT_SIZE = "24px";
|
|
659
|
+
var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT = "28px";
|
|
305
660
|
var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT = "300";
|
|
306
|
-
var TYPOGRAPHY_HEADLINE2_LETTER_SPACING = "-0.
|
|
661
|
+
var TYPOGRAPHY_HEADLINE2_LETTER_SPACING = "-0.25px";
|
|
307
662
|
var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION = "none";
|
|
308
663
|
var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM = "none";
|
|
309
|
-
var TYPOGRAPHY_HEADLINE3_FONT_FAMILY = "
|
|
310
|
-
var TYPOGRAPHY_HEADLINE3_FONT_SIZE = "
|
|
311
|
-
var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT = "
|
|
312
|
-
var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT = "
|
|
313
|
-
var TYPOGRAPHY_HEADLINE3_LETTER_SPACING = "
|
|
664
|
+
var TYPOGRAPHY_HEADLINE3_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
665
|
+
var TYPOGRAPHY_HEADLINE3_FONT_SIZE = "24px";
|
|
666
|
+
var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT = "28px";
|
|
667
|
+
var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT = "300";
|
|
668
|
+
var TYPOGRAPHY_HEADLINE3_LETTER_SPACING = "-0.25px";
|
|
314
669
|
var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION = "none";
|
|
315
670
|
var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM = "none";
|
|
316
|
-
var TYPOGRAPHY_HEADLINE4_FONT_FAMILY = "
|
|
317
|
-
var TYPOGRAPHY_HEADLINE4_FONT_SIZE = "
|
|
318
|
-
var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT = "
|
|
319
|
-
var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT = "
|
|
320
|
-
var TYPOGRAPHY_HEADLINE4_LETTER_SPACING = "0.
|
|
671
|
+
var TYPOGRAPHY_HEADLINE4_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
672
|
+
var TYPOGRAPHY_HEADLINE4_FONT_SIZE = "24px";
|
|
673
|
+
var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT = "28px";
|
|
674
|
+
var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT = "300";
|
|
675
|
+
var TYPOGRAPHY_HEADLINE4_LETTER_SPACING = "-0.25px";
|
|
321
676
|
var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION = "none";
|
|
322
677
|
var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM = "none";
|
|
323
|
-
var TYPOGRAPHY_HEADLINE5_FONT_FAMILY = "
|
|
678
|
+
var TYPOGRAPHY_HEADLINE5_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
324
679
|
var TYPOGRAPHY_HEADLINE5_FONT_SIZE = "24px";
|
|
325
680
|
var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT = "28px";
|
|
326
|
-
var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT = "
|
|
327
|
-
var TYPOGRAPHY_HEADLINE5_LETTER_SPACING = "
|
|
681
|
+
var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT = "300";
|
|
682
|
+
var TYPOGRAPHY_HEADLINE5_LETTER_SPACING = "-0.25px";
|
|
328
683
|
var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION = "none";
|
|
329
684
|
var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM = "none";
|
|
330
|
-
var TYPOGRAPHY_HEADLINE6_FONT_FAMILY = "
|
|
331
|
-
var TYPOGRAPHY_HEADLINE6_FONT_SIZE = "
|
|
332
|
-
var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT = "
|
|
333
|
-
var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT = "
|
|
334
|
-
var TYPOGRAPHY_HEADLINE6_LETTER_SPACING = "0.
|
|
335
|
-
var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION = "none";
|
|
336
|
-
var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM = "none";
|
|
337
|
-
var
|
|
338
|
-
var TYPOGRAPHY_SUBTITLE1_FONT_SIZE = "16px";
|
|
339
|
-
var TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT = "20px";
|
|
340
|
-
var TYPOGRAPHY_SUBTITLE1_FONT_WEIGHT = "400";
|
|
341
|
-
var TYPOGRAPHY_SUBTITLE1_LETTER_SPACING = "0.15px";
|
|
342
|
-
var TYPOGRAPHY_SUBTITLE1_TEXT_DECORATION = "none";
|
|
343
|
-
var TYPOGRAPHY_SUBTITLE1_TEXT_TRANSFORM = "none";
|
|
344
|
-
var TYPOGRAPHY_SUBTITLE2_FONT_FAMILY = "Nunito, sans-serif";
|
|
345
|
-
var TYPOGRAPHY_SUBTITLE2_FONT_SIZE = "14px";
|
|
346
|
-
var TYPOGRAPHY_SUBTITLE2_LINE_HEIGHT = "18px";
|
|
347
|
-
var TYPOGRAPHY_SUBTITLE2_FONT_WEIGHT = "500";
|
|
348
|
-
var TYPOGRAPHY_SUBTITLE2_LETTER_SPACING = "0.1142857142857143px";
|
|
349
|
-
var TYPOGRAPHY_SUBTITLE2_TEXT_DECORATION = "none";
|
|
350
|
-
var TYPOGRAPHY_SUBTITLE2_TEXT_TRANSFORM = "none";
|
|
351
|
-
var TYPOGRAPHY_BODY1_FONT_FAMILY = "Nunito, sans-serif";
|
|
685
|
+
var TYPOGRAPHY_HEADLINE6_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
686
|
+
var TYPOGRAPHY_HEADLINE6_FONT_SIZE = "24px";
|
|
687
|
+
var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT = "28px";
|
|
688
|
+
var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT = "300";
|
|
689
|
+
var TYPOGRAPHY_HEADLINE6_LETTER_SPACING = "-0.25px";
|
|
690
|
+
var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION = "none";
|
|
691
|
+
var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM = "none";
|
|
692
|
+
var TYPOGRAPHY_BODY1_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
352
693
|
var TYPOGRAPHY_BODY1_FONT_SIZE = "16px";
|
|
353
694
|
var TYPOGRAPHY_BODY1_LINE_HEIGHT = "20px";
|
|
354
|
-
var TYPOGRAPHY_BODY1_FONT_WEIGHT = "
|
|
355
|
-
var TYPOGRAPHY_BODY1_LETTER_SPACING = "0.
|
|
695
|
+
var TYPOGRAPHY_BODY1_FONT_WEIGHT = "300";
|
|
696
|
+
var TYPOGRAPHY_BODY1_LETTER_SPACING = "-0.25px";
|
|
356
697
|
var TYPOGRAPHY_BODY1_TEXT_DECORATION = "none";
|
|
357
698
|
var TYPOGRAPHY_BODY1_TEXT_TRANSFORM = "none";
|
|
358
|
-
var TYPOGRAPHY_BODY2_FONT_FAMILY = "
|
|
359
|
-
var TYPOGRAPHY_BODY2_FONT_SIZE = "
|
|
360
|
-
var TYPOGRAPHY_BODY2_LINE_HEIGHT = "
|
|
361
|
-
var TYPOGRAPHY_BODY2_FONT_WEIGHT = "
|
|
362
|
-
var TYPOGRAPHY_BODY2_LETTER_SPACING = "0.
|
|
699
|
+
var TYPOGRAPHY_BODY2_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
700
|
+
var TYPOGRAPHY_BODY2_FONT_SIZE = "16px";
|
|
701
|
+
var TYPOGRAPHY_BODY2_LINE_HEIGHT = "20px";
|
|
702
|
+
var TYPOGRAPHY_BODY2_FONT_WEIGHT = "300";
|
|
703
|
+
var TYPOGRAPHY_BODY2_LETTER_SPACING = "-0.25px";
|
|
363
704
|
var TYPOGRAPHY_BODY2_TEXT_DECORATION = "none";
|
|
364
705
|
var TYPOGRAPHY_BODY2_TEXT_TRANSFORM = "none";
|
|
365
|
-
var
|
|
366
|
-
var
|
|
367
|
-
var
|
|
368
|
-
var TYPOGRAPHY_CAPTION_FONT_WEIGHT = "400";
|
|
369
|
-
var TYPOGRAPHY_CAPTION_LETTER_SPACING = "0.5333333333333333px";
|
|
370
|
-
var TYPOGRAPHY_CAPTION_TEXT_DECORATION = "none";
|
|
371
|
-
var TYPOGRAPHY_CAPTION_TEXT_TRANSFORM = "none";
|
|
372
|
-
var TYPOGRAPHY_BUTTON_FONT_FAMILY = "Nunito, sans-serif";
|
|
373
|
-
var TYPOGRAPHY_BUTTON_FONT_SIZE = "14px";
|
|
374
|
-
var TYPOGRAPHY_BUTTON_LINE_HEIGHT = "18px";
|
|
706
|
+
var TYPOGRAPHY_BUTTON_FONT_FAMILY = "'Noto Sans', sans-serif";
|
|
707
|
+
var TYPOGRAPHY_BUTTON_FONT_SIZE = "16px";
|
|
708
|
+
var TYPOGRAPHY_BUTTON_LINE_HEIGHT = "20px";
|
|
375
709
|
var TYPOGRAPHY_BUTTON_FONT_WEIGHT = "700";
|
|
376
|
-
var TYPOGRAPHY_BUTTON_LETTER_SPACING = "
|
|
710
|
+
var TYPOGRAPHY_BUTTON_LETTER_SPACING = "-0.25px";
|
|
377
711
|
var TYPOGRAPHY_BUTTON_TEXT_DECORATION = "none";
|
|
378
|
-
var TYPOGRAPHY_BUTTON_TEXT_TRANSFORM = "
|
|
379
|
-
var
|
|
380
|
-
var TYPOGRAPHY_OVERLINE_FONT_SIZE = "12px";
|
|
381
|
-
var TYPOGRAPHY_OVERLINE_LINE_HEIGHT = "16px";
|
|
382
|
-
var TYPOGRAPHY_OVERLINE_FONT_WEIGHT = "500";
|
|
383
|
-
var TYPOGRAPHY_OVERLINE_LETTER_SPACING = "2.6666666666666665px";
|
|
384
|
-
var TYPOGRAPHY_OVERLINE_TEXT_DECORATION = "none";
|
|
385
|
-
var TYPOGRAPHY_OVERLINE_TEXT_TRANSFORM = "none";
|
|
712
|
+
var TYPOGRAPHY_BUTTON_TEXT_TRANSFORM = "uppercase";
|
|
713
|
+
var ELEVATION_NONE = "none";
|
|
386
714
|
var ELEVATION_LIGHT_LIGHT = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14)";
|
|
387
715
|
var ELEVATION_LIGHT_SEMILIGHT = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)";
|
|
388
716
|
var ELEVATION_LIGHT_REGULAR = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14)";
|
|
@@ -401,13 +729,9 @@ var TYPOGRAPHY_KEY_HEADLINE3 = "headline3";
|
|
|
401
729
|
var TYPOGRAPHY_KEY_HEADLINE4 = "headline4";
|
|
402
730
|
var TYPOGRAPHY_KEY_HEADLINE5 = "headline5";
|
|
403
731
|
var TYPOGRAPHY_KEY_HEADLINE6 = "headline6";
|
|
404
|
-
var TYPOGRAPHY_KEY_SUBTITLE1 = "subtitle1";
|
|
405
|
-
var TYPOGRAPHY_KEY_SUBTITLE2 = "subtitle2";
|
|
406
732
|
var TYPOGRAPHY_KEY_BODY1 = "body1";
|
|
407
733
|
var TYPOGRAPHY_KEY_BODY2 = "body2";
|
|
408
|
-
var TYPOGRAPHY_KEY_CAPTION = "caption";
|
|
409
734
|
var TYPOGRAPHY_KEY_BUTTON = "button";
|
|
410
|
-
var TYPOGRAPHY_KEY_OVERLINE = "overline";
|
|
411
735
|
var ELEVATION_KEY_LIGHT = "light";
|
|
412
736
|
var ELEVATION_KEY_SEMILIGHT = "semilight";
|
|
413
737
|
var ELEVATION_KEY_REGULAR = "regular";
|
|
@@ -417,20 +741,15 @@ var ELEVATION_KEY_EXTRABOLD = "extrabold";
|
|
|
417
741
|
var VARIANT_PRIMARY = "primary";
|
|
418
742
|
var VARIANT_SECONDARY = "secondary";
|
|
419
743
|
var VARIANT_TERTIARY = "tertiary";
|
|
420
|
-
var VARIANT_DANGER = "danger";
|
|
421
|
-
var VARIANT_WARNING = "warning";
|
|
422
|
-
var VARIANT_SUCCESS = "success";
|
|
423
|
-
var VARIANT_INFO = "info";
|
|
424
|
-
var VARIANT_HIGHLIGHT = "highlight";
|
|
425
|
-
var VARIANT_NEUTRAL = "neutral";
|
|
426
744
|
|
|
427
|
-
// src/Theming/
|
|
428
|
-
(function(
|
|
429
|
-
|
|
745
|
+
// src/Theming/CosmopolitanTheme.ts
|
|
746
|
+
(function(CosmopolitanTheme2) {
|
|
747
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME = ThemeFactory.create({
|
|
430
748
|
name: NAME,
|
|
431
749
|
scheme: {
|
|
432
750
|
light: {
|
|
433
751
|
surface: SCHEME_LIGHT_SURFACE,
|
|
752
|
+
contrast: SCHEME_LIGHT_CONTRAST,
|
|
434
753
|
background: SCHEME_LIGHT_BACKGROUND,
|
|
435
754
|
foreground: SCHEME_LIGHT_FOREGROUND,
|
|
436
755
|
highlight: SCHEME_LIGHT_HIGHLIGHT,
|
|
@@ -439,11 +758,11 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
439
758
|
transparent: SCHEME_LIGHT_TRANSPARENT,
|
|
440
759
|
semiTransparent: SCHEME_LIGHT_SEMI_TRANSPARENT,
|
|
441
760
|
disabled: SCHEME_LIGHT_DISABLED,
|
|
442
|
-
contrast: SCHEME_LIGHT_CONTRAST,
|
|
443
761
|
selection: SCHEME_LIGHT_SELECTION
|
|
444
762
|
},
|
|
445
763
|
dark: {
|
|
446
764
|
surface: SCHEME_DARK_SURFACE,
|
|
765
|
+
contrast: SCHEME_DARK_CONTRAST,
|
|
447
766
|
background: SCHEME_DARK_BACKGROUND,
|
|
448
767
|
foreground: SCHEME_DARK_FOREGROUND,
|
|
449
768
|
highlight: SCHEME_DARK_HIGHLIGHT,
|
|
@@ -452,7 +771,6 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
452
771
|
transparent: SCHEME_DARK_TRANSPARENT,
|
|
453
772
|
semiTransparent: SCHEME_DARK_SEMI_TRANSPARENT,
|
|
454
773
|
disabled: SCHEME_DARK_DISABLED,
|
|
455
|
-
contrast: SCHEME_DARK_CONTRAST,
|
|
456
774
|
selection: SCHEME_DARK_SELECTION
|
|
457
775
|
}
|
|
458
776
|
},
|
|
@@ -752,24 +1070,6 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
752
1070
|
textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION,
|
|
753
1071
|
textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM
|
|
754
1072
|
},
|
|
755
|
-
subtitle1: {
|
|
756
|
-
fontFamily: TYPOGRAPHY_SUBTITLE1_FONT_FAMILY,
|
|
757
|
-
fontSize: TYPOGRAPHY_SUBTITLE1_FONT_SIZE,
|
|
758
|
-
lineHeight: TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT,
|
|
759
|
-
fontWeight: TYPOGRAPHY_SUBTITLE1_FONT_WEIGHT,
|
|
760
|
-
letterSpacing: TYPOGRAPHY_SUBTITLE1_LETTER_SPACING,
|
|
761
|
-
textDecoration: TYPOGRAPHY_SUBTITLE1_TEXT_DECORATION,
|
|
762
|
-
textTransform: TYPOGRAPHY_SUBTITLE1_TEXT_TRANSFORM
|
|
763
|
-
},
|
|
764
|
-
subtitle2: {
|
|
765
|
-
fontFamily: TYPOGRAPHY_SUBTITLE2_FONT_FAMILY,
|
|
766
|
-
fontSize: TYPOGRAPHY_SUBTITLE2_FONT_SIZE,
|
|
767
|
-
lineHeight: TYPOGRAPHY_SUBTITLE2_LINE_HEIGHT,
|
|
768
|
-
fontWeight: TYPOGRAPHY_SUBTITLE2_FONT_WEIGHT,
|
|
769
|
-
letterSpacing: TYPOGRAPHY_SUBTITLE2_LETTER_SPACING,
|
|
770
|
-
textDecoration: TYPOGRAPHY_SUBTITLE2_TEXT_DECORATION,
|
|
771
|
-
textTransform: TYPOGRAPHY_SUBTITLE2_TEXT_TRANSFORM
|
|
772
|
-
},
|
|
773
1073
|
body1: {
|
|
774
1074
|
fontFamily: TYPOGRAPHY_BODY1_FONT_FAMILY,
|
|
775
1075
|
fontSize: TYPOGRAPHY_BODY1_FONT_SIZE,
|
|
@@ -788,24 +1088,6 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
788
1088
|
textDecoration: TYPOGRAPHY_BODY2_TEXT_DECORATION,
|
|
789
1089
|
textTransform: TYPOGRAPHY_BODY2_TEXT_TRANSFORM
|
|
790
1090
|
},
|
|
791
|
-
caption: {
|
|
792
|
-
fontFamily: TYPOGRAPHY_CAPTION_FONT_FAMILY,
|
|
793
|
-
fontSize: TYPOGRAPHY_CAPTION_FONT_SIZE,
|
|
794
|
-
lineHeight: TYPOGRAPHY_CAPTION_LINE_HEIGHT,
|
|
795
|
-
fontWeight: TYPOGRAPHY_CAPTION_FONT_WEIGHT,
|
|
796
|
-
letterSpacing: TYPOGRAPHY_CAPTION_LETTER_SPACING,
|
|
797
|
-
textDecoration: TYPOGRAPHY_CAPTION_TEXT_DECORATION,
|
|
798
|
-
textTransform: TYPOGRAPHY_CAPTION_TEXT_TRANSFORM
|
|
799
|
-
},
|
|
800
|
-
overline: {
|
|
801
|
-
fontFamily: TYPOGRAPHY_OVERLINE_FONT_FAMILY,
|
|
802
|
-
fontSize: TYPOGRAPHY_OVERLINE_FONT_SIZE,
|
|
803
|
-
lineHeight: TYPOGRAPHY_OVERLINE_LINE_HEIGHT,
|
|
804
|
-
fontWeight: TYPOGRAPHY_OVERLINE_FONT_WEIGHT,
|
|
805
|
-
letterSpacing: TYPOGRAPHY_OVERLINE_LETTER_SPACING,
|
|
806
|
-
textDecoration: TYPOGRAPHY_OVERLINE_TEXT_DECORATION,
|
|
807
|
-
textTransform: TYPOGRAPHY_OVERLINE_TEXT_TRANSFORM
|
|
808
|
-
},
|
|
809
1091
|
button: {
|
|
810
1092
|
fontFamily: TYPOGRAPHY_BUTTON_FONT_FAMILY,
|
|
811
1093
|
fontSize: TYPOGRAPHY_BUTTON_FONT_SIZE,
|
|
@@ -828,7 +1110,8 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
828
1110
|
regular: ELEVATION_LIGHT_REGULAR,
|
|
829
1111
|
semibold: ELEVATION_LIGHT_SEMIBOLD,
|
|
830
1112
|
bold: ELEVATION_LIGHT_BOLD,
|
|
831
|
-
extrabold: ELEVATION_LIGHT_EXTRABOLD
|
|
1113
|
+
extrabold: ELEVATION_LIGHT_EXTRABOLD,
|
|
1114
|
+
none: ELEVATION_NONE
|
|
832
1115
|
},
|
|
833
1116
|
dark: {
|
|
834
1117
|
light: ELEVATION_DARK_LIGHT,
|
|
@@ -836,22 +1119,17 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
836
1119
|
regular: ELEVATION_DARK_REGULAR,
|
|
837
1120
|
semibold: ELEVATION_DARK_SEMIBOLD,
|
|
838
1121
|
bold: ELEVATION_DARK_BOLD,
|
|
839
|
-
extrabold: ELEVATION_DARK_EXTRABOLD
|
|
1122
|
+
extrabold: ELEVATION_DARK_EXTRABOLD,
|
|
1123
|
+
none: ELEVATION_NONE
|
|
840
1124
|
}
|
|
841
1125
|
}
|
|
842
1126
|
});
|
|
843
|
-
|
|
1127
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_PALETTES = [
|
|
844
1128
|
VARIANT_PRIMARY,
|
|
845
1129
|
VARIANT_SECONDARY,
|
|
846
|
-
VARIANT_TERTIARY
|
|
847
|
-
VARIANT_DANGER,
|
|
848
|
-
VARIANT_INFO,
|
|
849
|
-
VARIANT_WARNING,
|
|
850
|
-
VARIANT_SUCCESS,
|
|
851
|
-
VARIANT_HIGHLIGHT,
|
|
852
|
-
VARIANT_NEUTRAL
|
|
1130
|
+
VARIANT_TERTIARY
|
|
853
1131
|
];
|
|
854
|
-
|
|
1132
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_PALETTE_VARIANTS = [
|
|
855
1133
|
"0",
|
|
856
1134
|
"50",
|
|
857
1135
|
"100",
|
|
@@ -864,11 +1142,11 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
864
1142
|
"800",
|
|
865
1143
|
"900"
|
|
866
1144
|
];
|
|
867
|
-
|
|
1145
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_SCHEMES = [
|
|
868
1146
|
"light",
|
|
869
1147
|
"dark"
|
|
870
1148
|
];
|
|
871
|
-
|
|
1149
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_SCHEME_VARIANTS = [
|
|
872
1150
|
"surface",
|
|
873
1151
|
"background",
|
|
874
1152
|
"foreground",
|
|
@@ -881,11 +1159,11 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
881
1159
|
"contrast",
|
|
882
1160
|
"selection"
|
|
883
1161
|
];
|
|
884
|
-
|
|
1162
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_ELEVATION = [
|
|
885
1163
|
"light",
|
|
886
1164
|
"dark"
|
|
887
1165
|
];
|
|
888
|
-
|
|
1166
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_ELEVATION_VARIANTS = [
|
|
889
1167
|
ELEVATION_KEY_LIGHT,
|
|
890
1168
|
ELEVATION_KEY_SEMILIGHT,
|
|
891
1169
|
ELEVATION_KEY_REGULAR,
|
|
@@ -893,41 +1171,37 @@ var VARIANT_NEUTRAL = "neutral";
|
|
|
893
1171
|
ELEVATION_KEY_BOLD,
|
|
894
1172
|
ELEVATION_KEY_EXTRABOLD
|
|
895
1173
|
];
|
|
896
|
-
|
|
1174
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_TYPOGRAPHY = [
|
|
897
1175
|
TYPOGRAPHY_KEY_HEADLINE1,
|
|
898
1176
|
TYPOGRAPHY_KEY_HEADLINE2,
|
|
899
1177
|
TYPOGRAPHY_KEY_HEADLINE3,
|
|
900
1178
|
TYPOGRAPHY_KEY_HEADLINE4,
|
|
901
1179
|
TYPOGRAPHY_KEY_HEADLINE5,
|
|
902
1180
|
TYPOGRAPHY_KEY_HEADLINE6,
|
|
903
|
-
TYPOGRAPHY_KEY_SUBTITLE1,
|
|
904
|
-
TYPOGRAPHY_KEY_SUBTITLE2,
|
|
905
1181
|
TYPOGRAPHY_KEY_BODY1,
|
|
906
1182
|
TYPOGRAPHY_KEY_BODY2,
|
|
907
|
-
TYPOGRAPHY_KEY_CAPTION,
|
|
908
|
-
TYPOGRAPHY_KEY_OVERLINE,
|
|
909
1183
|
TYPOGRAPHY_KEY_BUTTON
|
|
910
1184
|
];
|
|
911
|
-
|
|
912
|
-
theme:
|
|
913
|
-
palettes:
|
|
914
|
-
paletteVariants:
|
|
915
|
-
schemes:
|
|
916
|
-
schemeVariants:
|
|
917
|
-
elevation:
|
|
918
|
-
elevationVariants:
|
|
919
|
-
typographies:
|
|
1185
|
+
CosmopolitanTheme2.COSMOPOLITAN_THEME_METADATA = {
|
|
1186
|
+
theme: CosmopolitanTheme2.COSMOPOLITAN_THEME,
|
|
1187
|
+
palettes: CosmopolitanTheme2.COSMOPOLITAN_THEME_PALETTES,
|
|
1188
|
+
paletteVariants: CosmopolitanTheme2.COSMOPOLITAN_THEME_PALETTE_VARIANTS,
|
|
1189
|
+
schemes: CosmopolitanTheme2.COSMOPOLITAN_THEME_SCHEMES,
|
|
1190
|
+
schemeVariants: CosmopolitanTheme2.COSMOPOLITAN_THEME_SCHEME_VARIANTS,
|
|
1191
|
+
elevation: CosmopolitanTheme2.COSMOPOLITAN_THEME_ELEVATION,
|
|
1192
|
+
elevationVariants: CosmopolitanTheme2.COSMOPOLITAN_THEME_ELEVATION_VARIANTS,
|
|
1193
|
+
typographies: CosmopolitanTheme2.COSMOPOLITAN_THEME_TYPOGRAPHY
|
|
920
1194
|
};
|
|
921
|
-
})(exports.
|
|
922
|
-
exports.
|
|
1195
|
+
})(exports.CosmopolitanTheme || (exports.CosmopolitanTheme = {}));
|
|
1196
|
+
exports.CosmopolitanTheme = void 0;
|
|
923
1197
|
|
|
924
|
-
// src/Theming/Tokens/
|
|
925
|
-
var NAME2 = "
|
|
1198
|
+
// src/Theming/Tokens/JoyTokens.ts
|
|
1199
|
+
var NAME2 = "joy";
|
|
926
1200
|
var FONT_FAMILY2 = "Nunito, sans-serif";
|
|
927
|
-
var LAYOUT_RADIUS2 = "
|
|
928
|
-
var LAYOUT_SPACE2 = "
|
|
929
|
-
var LAYOUT_THICKNESS2 = "
|
|
930
|
-
var SCHEME_LIGHT_SURFACE2 = "#
|
|
1201
|
+
var LAYOUT_RADIUS2 = "12px";
|
|
1202
|
+
var LAYOUT_SPACE2 = "8px";
|
|
1203
|
+
var LAYOUT_THICKNESS2 = "2px";
|
|
1204
|
+
var SCHEME_LIGHT_SURFACE2 = "#f5f5f5";
|
|
931
1205
|
var SCHEME_LIGHT_BACKGROUND2 = "#eaeaea";
|
|
932
1206
|
var SCHEME_LIGHT_FOREGROUND2 = "#3c454f";
|
|
933
1207
|
var SCHEME_LIGHT_HIGHLIGHT2 = "#d1d1d1";
|
|
@@ -936,19 +1210,19 @@ var SCHEME_LIGHT_LOWLIGHT2 = "#5c5c5c";
|
|
|
936
1210
|
var SCHEME_LIGHT_TRANSPARENT2 = "rgba(255, 255, 255, 0)";
|
|
937
1211
|
var SCHEME_LIGHT_SEMI_TRANSPARENT2 = "rgba(255, 255, 255, 0.67)";
|
|
938
1212
|
var SCHEME_LIGHT_DISABLED2 = "#686868";
|
|
939
|
-
var SCHEME_LIGHT_CONTRAST2 = "#
|
|
940
|
-
var SCHEME_LIGHT_SELECTION2 = "
|
|
941
|
-
var SCHEME_DARK_SURFACE2 = "#
|
|
1213
|
+
var SCHEME_LIGHT_CONTRAST2 = "#ffffff";
|
|
1214
|
+
var SCHEME_LIGHT_SELECTION2 = "rgba(204, 204, 204, 0.44)";
|
|
1215
|
+
var SCHEME_DARK_SURFACE2 = "#1e1e1e";
|
|
942
1216
|
var SCHEME_DARK_BACKGROUND2 = "#151515";
|
|
943
1217
|
var SCHEME_DARK_FOREGROUND2 = "#c3bab0";
|
|
944
1218
|
var SCHEME_DARK_HIGHLIGHT2 = "#2e2e2e";
|
|
945
1219
|
var SCHEME_DARK_MIDDLELIGHT2 = "#757575";
|
|
946
1220
|
var SCHEME_DARK_LOWLIGHT2 = "#a3a3a3";
|
|
947
1221
|
var SCHEME_DARK_TRANSPARENT2 = "rgba(255, 255, 255, 0)";
|
|
948
|
-
var SCHEME_DARK_SEMI_TRANSPARENT2 = "rgba(
|
|
1222
|
+
var SCHEME_DARK_SEMI_TRANSPARENT2 = "rgba(255, 255, 255, 0.03)";
|
|
949
1223
|
var SCHEME_DARK_DISABLED2 = "#474747";
|
|
950
|
-
var SCHEME_DARK_CONTRAST2 = "#
|
|
951
|
-
var SCHEME_DARK_SELECTION2 = "
|
|
1224
|
+
var SCHEME_DARK_CONTRAST2 = "#000000";
|
|
1225
|
+
var SCHEME_DARK_SELECTION2 = "rgba(204, 204, 204, 0.44)";
|
|
952
1226
|
var COLOR_LIGHT_PRIMARY_02 = "#ffffff";
|
|
953
1227
|
var COLOR_LIGHT_PRIMARY_502 = "#fce4ec";
|
|
954
1228
|
var COLOR_LIGHT_PRIMARY_1002 = "#f8bcd0";
|
|
@@ -1189,20 +1463,20 @@ var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT2 = "500";
|
|
|
1189
1463
|
var TYPOGRAPHY_HEADLINE6_LETTER_SPACING2 = "0.2px";
|
|
1190
1464
|
var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION2 = "none";
|
|
1191
1465
|
var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM2 = "none";
|
|
1192
|
-
var
|
|
1193
|
-
var
|
|
1194
|
-
var
|
|
1195
|
-
var
|
|
1196
|
-
var
|
|
1197
|
-
var
|
|
1198
|
-
var
|
|
1199
|
-
var
|
|
1200
|
-
var
|
|
1201
|
-
var
|
|
1202
|
-
var
|
|
1203
|
-
var
|
|
1204
|
-
var
|
|
1205
|
-
var
|
|
1466
|
+
var TYPOGRAPHY_SUBTITLE1_FONT_FAMILY = "Nunito, sans-serif";
|
|
1467
|
+
var TYPOGRAPHY_SUBTITLE1_FONT_SIZE = "16px";
|
|
1468
|
+
var TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT = "20px";
|
|
1469
|
+
var TYPOGRAPHY_SUBTITLE1_FONT_WEIGHT = "400";
|
|
1470
|
+
var TYPOGRAPHY_SUBTITLE1_LETTER_SPACING = "0.15px";
|
|
1471
|
+
var TYPOGRAPHY_SUBTITLE1_TEXT_DECORATION = "none";
|
|
1472
|
+
var TYPOGRAPHY_SUBTITLE1_TEXT_TRANSFORM = "none";
|
|
1473
|
+
var TYPOGRAPHY_SUBTITLE2_FONT_FAMILY = "Nunito, sans-serif";
|
|
1474
|
+
var TYPOGRAPHY_SUBTITLE2_FONT_SIZE = "14px";
|
|
1475
|
+
var TYPOGRAPHY_SUBTITLE2_LINE_HEIGHT = "18px";
|
|
1476
|
+
var TYPOGRAPHY_SUBTITLE2_FONT_WEIGHT = "500";
|
|
1477
|
+
var TYPOGRAPHY_SUBTITLE2_LETTER_SPACING = "0.1142857142857143px";
|
|
1478
|
+
var TYPOGRAPHY_SUBTITLE2_TEXT_DECORATION = "none";
|
|
1479
|
+
var TYPOGRAPHY_SUBTITLE2_TEXT_TRANSFORM = "none";
|
|
1206
1480
|
var TYPOGRAPHY_BODY1_FONT_FAMILY2 = "Nunito, sans-serif";
|
|
1207
1481
|
var TYPOGRAPHY_BODY1_FONT_SIZE2 = "16px";
|
|
1208
1482
|
var TYPOGRAPHY_BODY1_LINE_HEIGHT2 = "20px";
|
|
@@ -1217,13 +1491,20 @@ var TYPOGRAPHY_BODY2_FONT_WEIGHT2 = "400";
|
|
|
1217
1491
|
var TYPOGRAPHY_BODY2_LETTER_SPACING2 = "0.2857142857142857px";
|
|
1218
1492
|
var TYPOGRAPHY_BODY2_TEXT_DECORATION2 = "none";
|
|
1219
1493
|
var TYPOGRAPHY_BODY2_TEXT_TRANSFORM2 = "none";
|
|
1220
|
-
var
|
|
1221
|
-
var
|
|
1222
|
-
var
|
|
1223
|
-
var
|
|
1224
|
-
var
|
|
1225
|
-
var
|
|
1226
|
-
var
|
|
1494
|
+
var TYPOGRAPHY_SUPPORTING_FONT_FAMILY = "Nunito, sans-serif";
|
|
1495
|
+
var TYPOGRAPHY_SUPPORTING_FONT_SIZE = "12px";
|
|
1496
|
+
var TYPOGRAPHY_SUPPORTING_LINE_HEIGHT = "14px";
|
|
1497
|
+
var TYPOGRAPHY_SUPPORTING_FONT_WEIGHT = "400";
|
|
1498
|
+
var TYPOGRAPHY_SUPPORTING_LETTER_SPACING = "0.2857142857142857px";
|
|
1499
|
+
var TYPOGRAPHY_SUPPORTING_TEXT_DECORATION = "none";
|
|
1500
|
+
var TYPOGRAPHY_SUPPORTING_TEXT_TRANSFORM = "none";
|
|
1501
|
+
var TYPOGRAPHY_CAPTION_FONT_FAMILY = "Nunito, sans-serif";
|
|
1502
|
+
var TYPOGRAPHY_CAPTION_FONT_SIZE = "12px";
|
|
1503
|
+
var TYPOGRAPHY_CAPTION_LINE_HEIGHT = "16px";
|
|
1504
|
+
var TYPOGRAPHY_CAPTION_FONT_WEIGHT = "400";
|
|
1505
|
+
var TYPOGRAPHY_CAPTION_LETTER_SPACING = "0.5333333333333333px";
|
|
1506
|
+
var TYPOGRAPHY_CAPTION_TEXT_DECORATION = "none";
|
|
1507
|
+
var TYPOGRAPHY_CAPTION_TEXT_TRANSFORM = "none";
|
|
1227
1508
|
var TYPOGRAPHY_BUTTON_FONT_FAMILY2 = "Nunito, sans-serif";
|
|
1228
1509
|
var TYPOGRAPHY_BUTTON_FONT_SIZE2 = "14px";
|
|
1229
1510
|
var TYPOGRAPHY_BUTTON_LINE_HEIGHT2 = "18px";
|
|
@@ -1231,38 +1512,39 @@ var TYPOGRAPHY_BUTTON_FONT_WEIGHT2 = "700";
|
|
|
1231
1512
|
var TYPOGRAPHY_BUTTON_LETTER_SPACING2 = "1.4285714285714286px";
|
|
1232
1513
|
var TYPOGRAPHY_BUTTON_TEXT_DECORATION2 = "none";
|
|
1233
1514
|
var TYPOGRAPHY_BUTTON_TEXT_TRANSFORM2 = "none";
|
|
1234
|
-
var
|
|
1235
|
-
var
|
|
1236
|
-
var
|
|
1237
|
-
var
|
|
1238
|
-
var
|
|
1239
|
-
var
|
|
1240
|
-
var
|
|
1241
|
-
var ELEVATION_LIGHT_LIGHT2 = "
|
|
1242
|
-
var ELEVATION_LIGHT_SEMILIGHT2 = "
|
|
1243
|
-
var ELEVATION_LIGHT_REGULAR2 = "
|
|
1244
|
-
var ELEVATION_LIGHT_SEMIBOLD2 = "
|
|
1245
|
-
var ELEVATION_LIGHT_BOLD2 = "
|
|
1246
|
-
var ELEVATION_LIGHT_EXTRABOLD2 = "
|
|
1247
|
-
var ELEVATION_DARK_LIGHT2 = "
|
|
1248
|
-
var ELEVATION_DARK_SEMILIGHT2 = "
|
|
1249
|
-
var ELEVATION_DARK_REGULAR2 = "
|
|
1250
|
-
var ELEVATION_DARK_SEMIBOLD2 = "
|
|
1251
|
-
var ELEVATION_DARK_BOLD2 = "
|
|
1252
|
-
var ELEVATION_DARK_EXTRABOLD2 = "
|
|
1515
|
+
var TYPOGRAPHY_OVERLINE_FONT_FAMILY = "Nunito, sans-serif";
|
|
1516
|
+
var TYPOGRAPHY_OVERLINE_FONT_SIZE = "12px";
|
|
1517
|
+
var TYPOGRAPHY_OVERLINE_LINE_HEIGHT = "16px";
|
|
1518
|
+
var TYPOGRAPHY_OVERLINE_FONT_WEIGHT = "500";
|
|
1519
|
+
var TYPOGRAPHY_OVERLINE_LETTER_SPACING = "2.6666666666666665px";
|
|
1520
|
+
var TYPOGRAPHY_OVERLINE_TEXT_DECORATION = "none";
|
|
1521
|
+
var TYPOGRAPHY_OVERLINE_TEXT_TRANSFORM = "none";
|
|
1522
|
+
var ELEVATION_LIGHT_LIGHT2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14)";
|
|
1523
|
+
var ELEVATION_LIGHT_SEMILIGHT2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)";
|
|
1524
|
+
var ELEVATION_LIGHT_REGULAR2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14)";
|
|
1525
|
+
var ELEVATION_LIGHT_SEMIBOLD2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14)";
|
|
1526
|
+
var ELEVATION_LIGHT_BOLD2 = "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14)";
|
|
1527
|
+
var ELEVATION_LIGHT_EXTRABOLD2 = "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14)";
|
|
1528
|
+
var ELEVATION_DARK_LIGHT2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28)";
|
|
1529
|
+
var ELEVATION_DARK_SEMILIGHT2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28)";
|
|
1530
|
+
var ELEVATION_DARK_REGULAR2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28)";
|
|
1531
|
+
var ELEVATION_DARK_SEMIBOLD2 = "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28)";
|
|
1532
|
+
var ELEVATION_DARK_BOLD2 = "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28)";
|
|
1533
|
+
var ELEVATION_DARK_EXTRABOLD2 = "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28)";
|
|
1253
1534
|
var TYPOGRAPHY_KEY_HEADLINE12 = "headline1";
|
|
1254
1535
|
var TYPOGRAPHY_KEY_HEADLINE22 = "headline2";
|
|
1255
1536
|
var TYPOGRAPHY_KEY_HEADLINE32 = "headline3";
|
|
1256
1537
|
var TYPOGRAPHY_KEY_HEADLINE42 = "headline4";
|
|
1257
1538
|
var TYPOGRAPHY_KEY_HEADLINE52 = "headline5";
|
|
1258
1539
|
var TYPOGRAPHY_KEY_HEADLINE62 = "headline6";
|
|
1259
|
-
var
|
|
1260
|
-
var
|
|
1540
|
+
var TYPOGRAPHY_KEY_SUBTITLE1 = "subtitle1";
|
|
1541
|
+
var TYPOGRAPHY_KEY_SUBTITLE2 = "subtitle2";
|
|
1261
1542
|
var TYPOGRAPHY_KEY_BODY12 = "body1";
|
|
1262
1543
|
var TYPOGRAPHY_KEY_BODY22 = "body2";
|
|
1263
|
-
var
|
|
1544
|
+
var TYPOGRAPHY_KEY_SUPPORTING = "supporting";
|
|
1545
|
+
var TYPOGRAPHY_KEY_CAPTION = "caption";
|
|
1264
1546
|
var TYPOGRAPHY_KEY_BUTTON2 = "button";
|
|
1265
|
-
var
|
|
1547
|
+
var TYPOGRAPHY_KEY_OVERLINE = "overline";
|
|
1266
1548
|
var ELEVATION_KEY_LIGHT2 = "light";
|
|
1267
1549
|
var ELEVATION_KEY_SEMILIGHT2 = "semilight";
|
|
1268
1550
|
var ELEVATION_KEY_REGULAR2 = "regular";
|
|
@@ -1271,15 +1553,17 @@ var ELEVATION_KEY_BOLD2 = "bold";
|
|
|
1271
1553
|
var ELEVATION_KEY_EXTRABOLD2 = "extrabold";
|
|
1272
1554
|
var VARIANT_PRIMARY2 = "primary";
|
|
1273
1555
|
var VARIANT_SECONDARY2 = "secondary";
|
|
1274
|
-
var
|
|
1275
|
-
var
|
|
1276
|
-
var
|
|
1277
|
-
var
|
|
1278
|
-
var
|
|
1556
|
+
var VARIANT_TERTIARY2 = "tertiary";
|
|
1557
|
+
var VARIANT_DANGER = "danger";
|
|
1558
|
+
var VARIANT_WARNING = "warning";
|
|
1559
|
+
var VARIANT_SUCCESS = "success";
|
|
1560
|
+
var VARIANT_INFO = "info";
|
|
1561
|
+
var VARIANT_HIGHLIGHT = "highlight";
|
|
1562
|
+
var VARIANT_NEUTRAL = "neutral";
|
|
1279
1563
|
|
|
1280
|
-
// src/Theming/
|
|
1281
|
-
(function(
|
|
1282
|
-
|
|
1564
|
+
// src/Theming/JoyTheme.ts
|
|
1565
|
+
(function(JoyTheme2) {
|
|
1566
|
+
JoyTheme2.JOY_THEME = ThemeFactory.create({
|
|
1283
1567
|
name: NAME2,
|
|
1284
1568
|
scheme: {
|
|
1285
1569
|
light: {
|
|
@@ -1606,22 +1890,22 @@ var VARIANT_NEUTRAL2 = "neutral";
|
|
|
1606
1890
|
textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM2
|
|
1607
1891
|
},
|
|
1608
1892
|
subtitle1: {
|
|
1609
|
-
fontFamily:
|
|
1610
|
-
fontSize:
|
|
1611
|
-
lineHeight:
|
|
1612
|
-
fontWeight:
|
|
1613
|
-
letterSpacing:
|
|
1614
|
-
textDecoration:
|
|
1615
|
-
textTransform:
|
|
1893
|
+
fontFamily: TYPOGRAPHY_SUBTITLE1_FONT_FAMILY,
|
|
1894
|
+
fontSize: TYPOGRAPHY_SUBTITLE1_FONT_SIZE,
|
|
1895
|
+
lineHeight: TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT,
|
|
1896
|
+
fontWeight: TYPOGRAPHY_SUBTITLE1_FONT_WEIGHT,
|
|
1897
|
+
letterSpacing: TYPOGRAPHY_SUBTITLE1_LETTER_SPACING,
|
|
1898
|
+
textDecoration: TYPOGRAPHY_SUBTITLE1_TEXT_DECORATION,
|
|
1899
|
+
textTransform: TYPOGRAPHY_SUBTITLE1_TEXT_TRANSFORM
|
|
1616
1900
|
},
|
|
1617
1901
|
subtitle2: {
|
|
1618
|
-
fontFamily:
|
|
1619
|
-
fontSize:
|
|
1620
|
-
lineHeight:
|
|
1621
|
-
fontWeight:
|
|
1622
|
-
letterSpacing:
|
|
1623
|
-
textDecoration:
|
|
1624
|
-
textTransform:
|
|
1902
|
+
fontFamily: TYPOGRAPHY_SUBTITLE2_FONT_FAMILY,
|
|
1903
|
+
fontSize: TYPOGRAPHY_SUBTITLE2_FONT_SIZE,
|
|
1904
|
+
lineHeight: TYPOGRAPHY_SUBTITLE2_LINE_HEIGHT,
|
|
1905
|
+
fontWeight: TYPOGRAPHY_SUBTITLE2_FONT_WEIGHT,
|
|
1906
|
+
letterSpacing: TYPOGRAPHY_SUBTITLE2_LETTER_SPACING,
|
|
1907
|
+
textDecoration: TYPOGRAPHY_SUBTITLE2_TEXT_DECORATION,
|
|
1908
|
+
textTransform: TYPOGRAPHY_SUBTITLE2_TEXT_TRANSFORM
|
|
1625
1909
|
},
|
|
1626
1910
|
body1: {
|
|
1627
1911
|
fontFamily: TYPOGRAPHY_BODY1_FONT_FAMILY2,
|
|
@@ -1641,23 +1925,32 @@ var VARIANT_NEUTRAL2 = "neutral";
|
|
|
1641
1925
|
textDecoration: TYPOGRAPHY_BODY2_TEXT_DECORATION2,
|
|
1642
1926
|
textTransform: TYPOGRAPHY_BODY2_TEXT_TRANSFORM2
|
|
1643
1927
|
},
|
|
1928
|
+
supporting: {
|
|
1929
|
+
fontFamily: TYPOGRAPHY_SUPPORTING_FONT_FAMILY,
|
|
1930
|
+
fontSize: TYPOGRAPHY_SUPPORTING_FONT_SIZE,
|
|
1931
|
+
lineHeight: TYPOGRAPHY_SUPPORTING_LINE_HEIGHT,
|
|
1932
|
+
fontWeight: TYPOGRAPHY_SUPPORTING_FONT_WEIGHT,
|
|
1933
|
+
letterSpacing: TYPOGRAPHY_SUPPORTING_LETTER_SPACING,
|
|
1934
|
+
textDecoration: TYPOGRAPHY_SUPPORTING_TEXT_DECORATION,
|
|
1935
|
+
textTransform: TYPOGRAPHY_SUPPORTING_TEXT_TRANSFORM
|
|
1936
|
+
},
|
|
1644
1937
|
caption: {
|
|
1645
|
-
fontFamily:
|
|
1646
|
-
fontSize:
|
|
1647
|
-
lineHeight:
|
|
1648
|
-
fontWeight:
|
|
1649
|
-
letterSpacing:
|
|
1650
|
-
textDecoration:
|
|
1651
|
-
textTransform:
|
|
1938
|
+
fontFamily: TYPOGRAPHY_CAPTION_FONT_FAMILY,
|
|
1939
|
+
fontSize: TYPOGRAPHY_CAPTION_FONT_SIZE,
|
|
1940
|
+
lineHeight: TYPOGRAPHY_CAPTION_LINE_HEIGHT,
|
|
1941
|
+
fontWeight: TYPOGRAPHY_CAPTION_FONT_WEIGHT,
|
|
1942
|
+
letterSpacing: TYPOGRAPHY_CAPTION_LETTER_SPACING,
|
|
1943
|
+
textDecoration: TYPOGRAPHY_CAPTION_TEXT_DECORATION,
|
|
1944
|
+
textTransform: TYPOGRAPHY_CAPTION_TEXT_TRANSFORM
|
|
1652
1945
|
},
|
|
1653
1946
|
overline: {
|
|
1654
|
-
fontFamily:
|
|
1655
|
-
fontSize:
|
|
1656
|
-
lineHeight:
|
|
1657
|
-
fontWeight:
|
|
1658
|
-
letterSpacing:
|
|
1659
|
-
textDecoration:
|
|
1660
|
-
textTransform:
|
|
1947
|
+
fontFamily: TYPOGRAPHY_OVERLINE_FONT_FAMILY,
|
|
1948
|
+
fontSize: TYPOGRAPHY_OVERLINE_FONT_SIZE,
|
|
1949
|
+
lineHeight: TYPOGRAPHY_OVERLINE_LINE_HEIGHT,
|
|
1950
|
+
fontWeight: TYPOGRAPHY_OVERLINE_FONT_WEIGHT,
|
|
1951
|
+
letterSpacing: TYPOGRAPHY_OVERLINE_LETTER_SPACING,
|
|
1952
|
+
textDecoration: TYPOGRAPHY_OVERLINE_TEXT_DECORATION,
|
|
1953
|
+
textTransform: TYPOGRAPHY_OVERLINE_TEXT_TRANSFORM
|
|
1661
1954
|
},
|
|
1662
1955
|
button: {
|
|
1663
1956
|
fontFamily: TYPOGRAPHY_BUTTON_FONT_FAMILY2,
|
|
@@ -1693,16 +1986,18 @@ var VARIANT_NEUTRAL2 = "neutral";
|
|
|
1693
1986
|
}
|
|
1694
1987
|
}
|
|
1695
1988
|
});
|
|
1696
|
-
|
|
1989
|
+
JoyTheme2.JOY_THEME_PALETTES = [
|
|
1697
1990
|
VARIANT_PRIMARY2,
|
|
1698
1991
|
VARIANT_SECONDARY2,
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1992
|
+
VARIANT_TERTIARY2,
|
|
1993
|
+
VARIANT_DANGER,
|
|
1994
|
+
VARIANT_INFO,
|
|
1995
|
+
VARIANT_WARNING,
|
|
1996
|
+
VARIANT_SUCCESS,
|
|
1997
|
+
VARIANT_HIGHLIGHT,
|
|
1998
|
+
VARIANT_NEUTRAL
|
|
1704
1999
|
];
|
|
1705
|
-
|
|
2000
|
+
JoyTheme2.JOY_THEME_PALETTE_VARIANTS = [
|
|
1706
2001
|
"0",
|
|
1707
2002
|
"50",
|
|
1708
2003
|
"100",
|
|
@@ -1715,11 +2010,11 @@ var VARIANT_NEUTRAL2 = "neutral";
|
|
|
1715
2010
|
"800",
|
|
1716
2011
|
"900"
|
|
1717
2012
|
];
|
|
1718
|
-
|
|
2013
|
+
JoyTheme2.JOY_THEME_SCHEMES = [
|
|
1719
2014
|
"light",
|
|
1720
2015
|
"dark"
|
|
1721
2016
|
];
|
|
1722
|
-
|
|
2017
|
+
JoyTheme2.JOY_THEME_SCHEME_VARIANTS = [
|
|
1723
2018
|
"surface",
|
|
1724
2019
|
"background",
|
|
1725
2020
|
"foreground",
|
|
@@ -1732,11 +2027,11 @@ var VARIANT_NEUTRAL2 = "neutral";
|
|
|
1732
2027
|
"contrast",
|
|
1733
2028
|
"selection"
|
|
1734
2029
|
];
|
|
1735
|
-
|
|
2030
|
+
JoyTheme2.JOY_THEME_ELEVATION = [
|
|
1736
2031
|
"light",
|
|
1737
2032
|
"dark"
|
|
1738
2033
|
];
|
|
1739
|
-
|
|
2034
|
+
JoyTheme2.JOY_THEME_ELEVATION_VARIANTS = [
|
|
1740
2035
|
ELEVATION_KEY_LIGHT2,
|
|
1741
2036
|
ELEVATION_KEY_SEMILIGHT2,
|
|
1742
2037
|
ELEVATION_KEY_REGULAR2,
|
|
@@ -1744,62 +2039,63 @@ var VARIANT_NEUTRAL2 = "neutral";
|
|
|
1744
2039
|
ELEVATION_KEY_BOLD2,
|
|
1745
2040
|
ELEVATION_KEY_EXTRABOLD2
|
|
1746
2041
|
];
|
|
1747
|
-
|
|
2042
|
+
JoyTheme2.JOY_THEME_TYPOGRAPHY = [
|
|
1748
2043
|
TYPOGRAPHY_KEY_HEADLINE12,
|
|
1749
2044
|
TYPOGRAPHY_KEY_HEADLINE22,
|
|
1750
2045
|
TYPOGRAPHY_KEY_HEADLINE32,
|
|
1751
2046
|
TYPOGRAPHY_KEY_HEADLINE42,
|
|
1752
2047
|
TYPOGRAPHY_KEY_HEADLINE52,
|
|
1753
2048
|
TYPOGRAPHY_KEY_HEADLINE62,
|
|
1754
|
-
|
|
1755
|
-
|
|
2049
|
+
TYPOGRAPHY_KEY_SUBTITLE1,
|
|
2050
|
+
TYPOGRAPHY_KEY_SUBTITLE2,
|
|
1756
2051
|
TYPOGRAPHY_KEY_BODY12,
|
|
1757
2052
|
TYPOGRAPHY_KEY_BODY22,
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
TYPOGRAPHY_KEY_BUTTON2
|
|
2053
|
+
TYPOGRAPHY_KEY_CAPTION,
|
|
2054
|
+
TYPOGRAPHY_KEY_OVERLINE,
|
|
2055
|
+
TYPOGRAPHY_KEY_BUTTON2,
|
|
2056
|
+
TYPOGRAPHY_KEY_SUPPORTING
|
|
1761
2057
|
];
|
|
1762
|
-
|
|
1763
|
-
theme:
|
|
1764
|
-
palettes:
|
|
1765
|
-
paletteVariants:
|
|
1766
|
-
schemes:
|
|
1767
|
-
schemeVariants:
|
|
1768
|
-
elevation:
|
|
1769
|
-
elevationVariants:
|
|
1770
|
-
typographies:
|
|
2058
|
+
JoyTheme2.JOY_THEME_METADATA = {
|
|
2059
|
+
theme: JoyTheme2.JOY_THEME,
|
|
2060
|
+
palettes: JoyTheme2.JOY_THEME_PALETTES,
|
|
2061
|
+
paletteVariants: JoyTheme2.JOY_THEME_PALETTE_VARIANTS,
|
|
2062
|
+
schemes: JoyTheme2.JOY_THEME_SCHEMES,
|
|
2063
|
+
schemeVariants: JoyTheme2.JOY_THEME_SCHEME_VARIANTS,
|
|
2064
|
+
elevation: JoyTheme2.JOY_THEME_ELEVATION,
|
|
2065
|
+
elevationVariants: JoyTheme2.JOY_THEME_ELEVATION_VARIANTS,
|
|
2066
|
+
typographies: JoyTheme2.JOY_THEME_TYPOGRAPHY
|
|
1771
2067
|
};
|
|
1772
|
-
})(exports.
|
|
1773
|
-
exports.
|
|
2068
|
+
})(exports.JoyTheme || (exports.JoyTheme = {}));
|
|
2069
|
+
exports.JoyTheme = void 0;
|
|
1774
2070
|
|
|
1775
|
-
// src/Theming/Tokens/
|
|
1776
|
-
var NAME3 = "
|
|
1777
|
-
var FONT_FAMILY3 = "
|
|
1778
|
-
var LAYOUT_RADIUS3 = "
|
|
1779
|
-
var LAYOUT_SPACE3 = "
|
|
1780
|
-
var LAYOUT_THICKNESS3 = "
|
|
1781
|
-
var SCHEME_LIGHT_SURFACE3 = "#
|
|
1782
|
-
var
|
|
1783
|
-
var
|
|
1784
|
-
var
|
|
1785
|
-
var
|
|
1786
|
-
var
|
|
1787
|
-
var SCHEME_LIGHT_LOWLIGHT3 = "#4d4d4d";
|
|
2071
|
+
// src/Theming/Tokens/MemphisTokens.ts
|
|
2072
|
+
var NAME3 = "memphis";
|
|
2073
|
+
var FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2074
|
+
var LAYOUT_RADIUS3 = "0px";
|
|
2075
|
+
var LAYOUT_SPACE3 = "10px";
|
|
2076
|
+
var LAYOUT_THICKNESS3 = "3px";
|
|
2077
|
+
var SCHEME_LIGHT_SURFACE3 = "#ffffff";
|
|
2078
|
+
var SCHEME_LIGHT_BACKGROUND3 = "#eaeaea";
|
|
2079
|
+
var SCHEME_LIGHT_FOREGROUND3 = "#3c454f";
|
|
2080
|
+
var SCHEME_LIGHT_HIGHLIGHT3 = "#d1d1d1";
|
|
2081
|
+
var SCHEME_LIGHT_MIDDLELIGHT3 = "#8a8a8a";
|
|
2082
|
+
var SCHEME_LIGHT_LOWLIGHT3 = "#5c5c5c";
|
|
1788
2083
|
var SCHEME_LIGHT_TRANSPARENT3 = "rgba(255, 255, 255, 0)";
|
|
1789
2084
|
var SCHEME_LIGHT_SEMI_TRANSPARENT3 = "rgba(255, 255, 255, 0.67)";
|
|
1790
|
-
var SCHEME_LIGHT_DISABLED3 = "#
|
|
1791
|
-
var
|
|
1792
|
-
var
|
|
2085
|
+
var SCHEME_LIGHT_DISABLED3 = "#686868";
|
|
2086
|
+
var SCHEME_LIGHT_CONTRAST3 = "#333333";
|
|
2087
|
+
var SCHEME_LIGHT_SELECTION3 = "#a8c0ff";
|
|
2088
|
+
var SCHEME_DARK_SURFACE3 = "#2e2e2e";
|
|
2089
|
+
var SCHEME_DARK_BACKGROUND3 = "#151515";
|
|
2090
|
+
var SCHEME_DARK_FOREGROUND3 = "#c3bab0";
|
|
2091
|
+
var SCHEME_DARK_HIGHLIGHT3 = "#2e2e2e";
|
|
2092
|
+
var SCHEME_DARK_MIDDLELIGHT3 = "#757575";
|
|
2093
|
+
var SCHEME_DARK_LOWLIGHT3 = "#a3a3a3";
|
|
2094
|
+
var SCHEME_DARK_TRANSPARENT3 = "rgba(255, 255, 255, 0)";
|
|
2095
|
+
var SCHEME_DARK_SEMI_TRANSPARENT3 = "rgba(0, 0, 0, 0.67)";
|
|
2096
|
+
var SCHEME_DARK_DISABLED3 = "#474747";
|
|
1793
2097
|
var SCHEME_DARK_CONTRAST3 = "#ffffff";
|
|
1794
|
-
var
|
|
1795
|
-
var SCHEME_DARK_FOREGROUND3 = "#ffffff";
|
|
1796
|
-
var SCHEME_DARK_HIGHLIGHT3 = "#333333";
|
|
1797
|
-
var SCHEME_DARK_MIDDLELIGHT3 = "#666666";
|
|
1798
|
-
var SCHEME_DARK_LOWLIGHT3 = "#999999";
|
|
1799
|
-
var SCHEME_DARK_TRANSPARENT3 = "rgba(23, 23, 23, 0)";
|
|
1800
|
-
var SCHEME_DARK_SEMI_TRANSPARENT3 = "rgba(23, 23, 23, 0.67)";
|
|
1801
|
-
var SCHEME_DARK_DISABLED3 = "#5c5956";
|
|
1802
|
-
var SCHEME_DARK_SELECTION3 = "#ff66aa";
|
|
2098
|
+
var SCHEME_DARK_SELECTION3 = "#6666ff";
|
|
1803
2099
|
var COLOR_LIGHT_PRIMARY_03 = "#ffffff";
|
|
1804
2100
|
var COLOR_LIGHT_PRIMARY_503 = "#fce4ec";
|
|
1805
2101
|
var COLOR_LIGHT_PRIMARY_1003 = "#f8bcd0";
|
|
@@ -1998,844 +2294,579 @@ var COLOR_DARK_NEUTRAL_6003 = "#b9b9c6";
|
|
|
1998
2294
|
var COLOR_DARK_NEUTRAL_7003 = "#d8d8df";
|
|
1999
2295
|
var COLOR_DARK_NEUTRAL_8003 = "#ebebef";
|
|
2000
2296
|
var COLOR_DARK_NEUTRAL_9003 = "#f7f7f8";
|
|
2001
|
-
var TYPOGRAPHY_HEADLINE1_FONT_FAMILY3 = "
|
|
2002
|
-
var TYPOGRAPHY_HEADLINE1_FONT_SIZE3 = "
|
|
2003
|
-
var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3 = "
|
|
2297
|
+
var TYPOGRAPHY_HEADLINE1_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2298
|
+
var TYPOGRAPHY_HEADLINE1_FONT_SIZE3 = "96px";
|
|
2299
|
+
var TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3 = "100px";
|
|
2004
2300
|
var TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3 = "300";
|
|
2005
2301
|
var TYPOGRAPHY_HEADLINE1_LETTER_SPACING3 = "-0.25px";
|
|
2006
2302
|
var TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3 = "none";
|
|
2007
2303
|
var TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3 = "none";
|
|
2008
|
-
var TYPOGRAPHY_HEADLINE2_FONT_FAMILY3 = "
|
|
2009
|
-
var TYPOGRAPHY_HEADLINE2_FONT_SIZE3 = "
|
|
2010
|
-
var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3 = "
|
|
2304
|
+
var TYPOGRAPHY_HEADLINE2_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2305
|
+
var TYPOGRAPHY_HEADLINE2_FONT_SIZE3 = "60px";
|
|
2306
|
+
var TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3 = "64px";
|
|
2011
2307
|
var TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3 = "300";
|
|
2012
|
-
var TYPOGRAPHY_HEADLINE2_LETTER_SPACING3 = "-0.
|
|
2308
|
+
var TYPOGRAPHY_HEADLINE2_LETTER_SPACING3 = "-0.13333333333333333px";
|
|
2013
2309
|
var TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3 = "none";
|
|
2014
2310
|
var TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3 = "none";
|
|
2015
|
-
var TYPOGRAPHY_HEADLINE3_FONT_FAMILY3 = "
|
|
2016
|
-
var TYPOGRAPHY_HEADLINE3_FONT_SIZE3 = "
|
|
2017
|
-
var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3 = "
|
|
2018
|
-
var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3 = "
|
|
2019
|
-
var TYPOGRAPHY_HEADLINE3_LETTER_SPACING3 = "
|
|
2311
|
+
var TYPOGRAPHY_HEADLINE3_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2312
|
+
var TYPOGRAPHY_HEADLINE3_FONT_SIZE3 = "48px";
|
|
2313
|
+
var TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3 = "52px";
|
|
2314
|
+
var TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3 = "400";
|
|
2315
|
+
var TYPOGRAPHY_HEADLINE3_LETTER_SPACING3 = "normal";
|
|
2020
2316
|
var TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3 = "none";
|
|
2021
2317
|
var TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3 = "none";
|
|
2022
|
-
var TYPOGRAPHY_HEADLINE4_FONT_FAMILY3 = "
|
|
2023
|
-
var TYPOGRAPHY_HEADLINE4_FONT_SIZE3 = "
|
|
2024
|
-
var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3 = "
|
|
2025
|
-
var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3 = "
|
|
2026
|
-
var TYPOGRAPHY_HEADLINE4_LETTER_SPACING3 = "
|
|
2318
|
+
var TYPOGRAPHY_HEADLINE4_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2319
|
+
var TYPOGRAPHY_HEADLINE4_FONT_SIZE3 = "34px";
|
|
2320
|
+
var TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3 = "38px";
|
|
2321
|
+
var TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3 = "400";
|
|
2322
|
+
var TYPOGRAPHY_HEADLINE4_LETTER_SPACING3 = "0.11764705882352941px";
|
|
2027
2323
|
var TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3 = "none";
|
|
2028
2324
|
var TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3 = "none";
|
|
2029
|
-
var TYPOGRAPHY_HEADLINE5_FONT_FAMILY3 = "
|
|
2325
|
+
var TYPOGRAPHY_HEADLINE5_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2030
2326
|
var TYPOGRAPHY_HEADLINE5_FONT_SIZE3 = "24px";
|
|
2031
2327
|
var TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3 = "28px";
|
|
2032
|
-
var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3 = "
|
|
2033
|
-
var TYPOGRAPHY_HEADLINE5_LETTER_SPACING3 = "
|
|
2328
|
+
var TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3 = "400";
|
|
2329
|
+
var TYPOGRAPHY_HEADLINE5_LETTER_SPACING3 = "normal";
|
|
2034
2330
|
var TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3 = "none";
|
|
2035
2331
|
var TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3 = "none";
|
|
2036
|
-
var TYPOGRAPHY_HEADLINE6_FONT_FAMILY3 = "
|
|
2037
|
-
var TYPOGRAPHY_HEADLINE6_FONT_SIZE3 = "
|
|
2038
|
-
var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3 = "
|
|
2039
|
-
var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3 = "
|
|
2040
|
-
var TYPOGRAPHY_HEADLINE6_LETTER_SPACING3 = "
|
|
2332
|
+
var TYPOGRAPHY_HEADLINE6_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2333
|
+
var TYPOGRAPHY_HEADLINE6_FONT_SIZE3 = "20px";
|
|
2334
|
+
var TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3 = "24px";
|
|
2335
|
+
var TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3 = "500";
|
|
2336
|
+
var TYPOGRAPHY_HEADLINE6_LETTER_SPACING3 = "0.2px";
|
|
2041
2337
|
var TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3 = "none";
|
|
2042
2338
|
var TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3 = "none";
|
|
2043
|
-
var
|
|
2339
|
+
var TYPOGRAPHY_SUBTITLE1_FONT_FAMILY2 = "Nunito, sans-serif";
|
|
2340
|
+
var TYPOGRAPHY_SUBTITLE1_FONT_SIZE2 = "16px";
|
|
2341
|
+
var TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT2 = "20px";
|
|
2342
|
+
var TYPOGRAPHY_SUBTITLE1_FONT_WEIGHT2 = "400";
|
|
2343
|
+
var TYPOGRAPHY_SUBTITLE1_LETTER_SPACING2 = "0.15px";
|
|
2344
|
+
var TYPOGRAPHY_SUBTITLE1_TEXT_DECORATION2 = "none";
|
|
2345
|
+
var TYPOGRAPHY_SUBTITLE1_TEXT_TRANSFORM2 = "none";
|
|
2346
|
+
var TYPOGRAPHY_SUBTITLE2_FONT_FAMILY2 = "Nunito, sans-serif";
|
|
2347
|
+
var TYPOGRAPHY_SUBTITLE2_FONT_SIZE2 = "14px";
|
|
2348
|
+
var TYPOGRAPHY_SUBTITLE2_LINE_HEIGHT2 = "18px";
|
|
2349
|
+
var TYPOGRAPHY_SUBTITLE2_FONT_WEIGHT2 = "500";
|
|
2350
|
+
var TYPOGRAPHY_SUBTITLE2_LETTER_SPACING2 = "0.1142857142857143px";
|
|
2351
|
+
var TYPOGRAPHY_SUBTITLE2_TEXT_DECORATION2 = "none";
|
|
2352
|
+
var TYPOGRAPHY_SUBTITLE2_TEXT_TRANSFORM2 = "none";
|
|
2353
|
+
var TYPOGRAPHY_BODY1_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2044
2354
|
var TYPOGRAPHY_BODY1_FONT_SIZE3 = "16px";
|
|
2045
2355
|
var TYPOGRAPHY_BODY1_LINE_HEIGHT3 = "20px";
|
|
2046
|
-
var TYPOGRAPHY_BODY1_FONT_WEIGHT3 = "
|
|
2047
|
-
var TYPOGRAPHY_BODY1_LETTER_SPACING3 = "
|
|
2356
|
+
var TYPOGRAPHY_BODY1_FONT_WEIGHT3 = "400";
|
|
2357
|
+
var TYPOGRAPHY_BODY1_LETTER_SPACING3 = "0.5px";
|
|
2048
2358
|
var TYPOGRAPHY_BODY1_TEXT_DECORATION3 = "none";
|
|
2049
2359
|
var TYPOGRAPHY_BODY1_TEXT_TRANSFORM3 = "none";
|
|
2050
|
-
var TYPOGRAPHY_BODY2_FONT_FAMILY3 = "
|
|
2051
|
-
var TYPOGRAPHY_BODY2_FONT_SIZE3 = "
|
|
2052
|
-
var TYPOGRAPHY_BODY2_LINE_HEIGHT3 = "
|
|
2053
|
-
var TYPOGRAPHY_BODY2_FONT_WEIGHT3 = "
|
|
2054
|
-
var TYPOGRAPHY_BODY2_LETTER_SPACING3 = "
|
|
2360
|
+
var TYPOGRAPHY_BODY2_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2361
|
+
var TYPOGRAPHY_BODY2_FONT_SIZE3 = "14px";
|
|
2362
|
+
var TYPOGRAPHY_BODY2_LINE_HEIGHT3 = "18px";
|
|
2363
|
+
var TYPOGRAPHY_BODY2_FONT_WEIGHT3 = "400";
|
|
2364
|
+
var TYPOGRAPHY_BODY2_LETTER_SPACING3 = "0.2857142857142857px";
|
|
2055
2365
|
var TYPOGRAPHY_BODY2_TEXT_DECORATION3 = "none";
|
|
2056
2366
|
var TYPOGRAPHY_BODY2_TEXT_TRANSFORM3 = "none";
|
|
2057
|
-
var
|
|
2058
|
-
var
|
|
2059
|
-
var
|
|
2367
|
+
var TYPOGRAPHY_CAPTION_FONT_FAMILY2 = "Nunito, sans-serif";
|
|
2368
|
+
var TYPOGRAPHY_CAPTION_FONT_SIZE2 = "12px";
|
|
2369
|
+
var TYPOGRAPHY_CAPTION_LINE_HEIGHT2 = "16px";
|
|
2370
|
+
var TYPOGRAPHY_CAPTION_FONT_WEIGHT2 = "400";
|
|
2371
|
+
var TYPOGRAPHY_CAPTION_LETTER_SPACING2 = "0.5333333333333333px";
|
|
2372
|
+
var TYPOGRAPHY_CAPTION_TEXT_DECORATION2 = "none";
|
|
2373
|
+
var TYPOGRAPHY_CAPTION_TEXT_TRANSFORM2 = "none";
|
|
2374
|
+
var TYPOGRAPHY_BUTTON_FONT_FAMILY3 = "Nunito, sans-serif";
|
|
2375
|
+
var TYPOGRAPHY_BUTTON_FONT_SIZE3 = "14px";
|
|
2376
|
+
var TYPOGRAPHY_BUTTON_LINE_HEIGHT3 = "18px";
|
|
2060
2377
|
var TYPOGRAPHY_BUTTON_FONT_WEIGHT3 = "700";
|
|
2061
|
-
var TYPOGRAPHY_BUTTON_LETTER_SPACING3 = "
|
|
2062
|
-
var TYPOGRAPHY_BUTTON_TEXT_DECORATION3 = "none";
|
|
2063
|
-
var TYPOGRAPHY_BUTTON_TEXT_TRANSFORM3 = "
|
|
2064
|
-
var
|
|
2065
|
-
var
|
|
2066
|
-
var
|
|
2067
|
-
var
|
|
2068
|
-
var
|
|
2069
|
-
var
|
|
2070
|
-
var
|
|
2071
|
-
var
|
|
2072
|
-
var
|
|
2073
|
-
var
|
|
2074
|
-
var
|
|
2075
|
-
var
|
|
2076
|
-
var
|
|
2077
|
-
var
|
|
2078
|
-
var
|
|
2079
|
-
var
|
|
2080
|
-
var
|
|
2081
|
-
var
|
|
2082
|
-
var
|
|
2083
|
-
var
|
|
2084
|
-
var
|
|
2085
|
-
var
|
|
2086
|
-
var
|
|
2087
|
-
var
|
|
2088
|
-
var
|
|
2089
|
-
var
|
|
2090
|
-
var
|
|
2091
|
-
var
|
|
2092
|
-
var
|
|
2093
|
-
var
|
|
2094
|
-
var
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
background:
|
|
2118
|
-
foreground:
|
|
2119
|
-
highlight:
|
|
2120
|
-
middlelight:
|
|
2121
|
-
lowlight:
|
|
2122
|
-
transparent:
|
|
2123
|
-
semiTransparent:
|
|
2124
|
-
disabled:
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
},
|
|
2128
|
-
palette: {
|
|
2129
|
-
light: {
|
|
2130
|
-
primary: {
|
|
2131
|
-
0: COLOR_LIGHT_PRIMARY_03,
|
|
2132
|
-
50: COLOR_LIGHT_PRIMARY_503,
|
|
2133
|
-
100: COLOR_LIGHT_PRIMARY_1003,
|
|
2134
|
-
200: COLOR_LIGHT_PRIMARY_2003,
|
|
2135
|
-
300: COLOR_LIGHT_PRIMARY_3003,
|
|
2136
|
-
400: COLOR_LIGHT_PRIMARY_4003,
|
|
2137
|
-
500: COLOR_LIGHT_PRIMARY_5003,
|
|
2138
|
-
600: COLOR_LIGHT_PRIMARY_6003,
|
|
2139
|
-
700: COLOR_LIGHT_PRIMARY_7003,
|
|
2140
|
-
800: COLOR_LIGHT_PRIMARY_8003,
|
|
2141
|
-
900: COLOR_LIGHT_PRIMARY_9003
|
|
2142
|
-
},
|
|
2143
|
-
secondary: {
|
|
2144
|
-
0: COLOR_LIGHT_SECONDARY_03,
|
|
2145
|
-
50: COLOR_LIGHT_SECONDARY_503,
|
|
2146
|
-
100: COLOR_LIGHT_SECONDARY_1003,
|
|
2147
|
-
200: COLOR_LIGHT_SECONDARY_2003,
|
|
2148
|
-
300: COLOR_LIGHT_SECONDARY_3003,
|
|
2149
|
-
400: COLOR_LIGHT_SECONDARY_4003,
|
|
2150
|
-
500: COLOR_LIGHT_SECONDARY_5003,
|
|
2151
|
-
600: COLOR_LIGHT_SECONDARY_6003,
|
|
2152
|
-
700: COLOR_LIGHT_SECONDARY_7003,
|
|
2153
|
-
800: COLOR_LIGHT_SECONDARY_8003,
|
|
2154
|
-
900: COLOR_LIGHT_SECONDARY_9003
|
|
2155
|
-
},
|
|
2156
|
-
tertiary: {
|
|
2157
|
-
0: COLOR_LIGHT_TERTIARY_03,
|
|
2158
|
-
50: COLOR_LIGHT_TERTIARY_503,
|
|
2159
|
-
100: COLOR_LIGHT_TERTIARY_1003,
|
|
2160
|
-
200: COLOR_LIGHT_TERTIARY_2003,
|
|
2161
|
-
300: COLOR_LIGHT_TERTIARY_3003,
|
|
2162
|
-
400: COLOR_LIGHT_TERTIARY_4003,
|
|
2163
|
-
500: COLOR_LIGHT_TERTIARY_5003,
|
|
2164
|
-
600: COLOR_LIGHT_TERTIARY_6003,
|
|
2165
|
-
700: COLOR_LIGHT_TERTIARY_7003,
|
|
2166
|
-
800: COLOR_LIGHT_TERTIARY_8003,
|
|
2167
|
-
900: COLOR_LIGHT_TERTIARY_9003
|
|
2168
|
-
},
|
|
2169
|
-
info: {
|
|
2170
|
-
0: COLOR_LIGHT_INFO_03,
|
|
2171
|
-
50: COLOR_LIGHT_INFO_503,
|
|
2172
|
-
100: COLOR_LIGHT_INFO_1003,
|
|
2173
|
-
200: COLOR_LIGHT_INFO_2003,
|
|
2174
|
-
300: COLOR_LIGHT_INFO_3003,
|
|
2175
|
-
400: COLOR_LIGHT_INFO_4003,
|
|
2176
|
-
500: COLOR_LIGHT_INFO_5003,
|
|
2177
|
-
600: COLOR_LIGHT_INFO_6003,
|
|
2178
|
-
700: COLOR_LIGHT_INFO_7003,
|
|
2179
|
-
800: COLOR_LIGHT_INFO_8003,
|
|
2180
|
-
900: COLOR_LIGHT_INFO_9003
|
|
2181
|
-
},
|
|
2182
|
-
warning: {
|
|
2183
|
-
0: COLOR_LIGHT_WARNING_03,
|
|
2184
|
-
50: COLOR_LIGHT_WARNING_503,
|
|
2185
|
-
100: COLOR_LIGHT_WARNING_1003,
|
|
2186
|
-
200: COLOR_LIGHT_WARNING_2003,
|
|
2187
|
-
300: COLOR_LIGHT_WARNING_3003,
|
|
2188
|
-
400: COLOR_LIGHT_WARNING_4003,
|
|
2189
|
-
500: COLOR_LIGHT_WARNING_5003,
|
|
2190
|
-
600: COLOR_LIGHT_WARNING_6003,
|
|
2191
|
-
700: COLOR_LIGHT_WARNING_7003,
|
|
2192
|
-
800: COLOR_LIGHT_WARNING_8003,
|
|
2193
|
-
900: COLOR_LIGHT_WARNING_9003
|
|
2194
|
-
},
|
|
2195
|
-
danger: {
|
|
2196
|
-
0: COLOR_LIGHT_DANGER_03,
|
|
2197
|
-
50: COLOR_LIGHT_DANGER_503,
|
|
2198
|
-
100: COLOR_LIGHT_DANGER_1003,
|
|
2199
|
-
200: COLOR_LIGHT_DANGER_2003,
|
|
2200
|
-
300: COLOR_LIGHT_DANGER_3003,
|
|
2201
|
-
400: COLOR_LIGHT_DANGER_4003,
|
|
2202
|
-
500: COLOR_LIGHT_DANGER_5003,
|
|
2203
|
-
600: COLOR_LIGHT_DANGER_6003,
|
|
2204
|
-
700: COLOR_LIGHT_DANGER_7003,
|
|
2205
|
-
800: COLOR_LIGHT_DANGER_8003,
|
|
2206
|
-
900: COLOR_LIGHT_DANGER_9003
|
|
2207
|
-
},
|
|
2208
|
-
success: {
|
|
2209
|
-
0: COLOR_LIGHT_SUCCESS_03,
|
|
2210
|
-
50: COLOR_LIGHT_SUCCESS_503,
|
|
2211
|
-
100: COLOR_LIGHT_SUCCESS_1003,
|
|
2212
|
-
200: COLOR_LIGHT_SUCCESS_2003,
|
|
2213
|
-
300: COLOR_LIGHT_SUCCESS_3003,
|
|
2214
|
-
400: COLOR_LIGHT_SUCCESS_4003,
|
|
2215
|
-
500: COLOR_LIGHT_SUCCESS_5003,
|
|
2216
|
-
600: COLOR_LIGHT_SUCCESS_6003,
|
|
2217
|
-
700: COLOR_LIGHT_SUCCESS_7003,
|
|
2218
|
-
800: COLOR_LIGHT_SUCCESS_8003,
|
|
2219
|
-
900: COLOR_LIGHT_SUCCESS_9003
|
|
2220
|
-
},
|
|
2221
|
-
highlight: {
|
|
2222
|
-
0: COLOR_LIGHT_HIGHLIGHT_03,
|
|
2223
|
-
50: COLOR_LIGHT_HIGHLIGHT_503,
|
|
2224
|
-
100: COLOR_LIGHT_HIGHLIGHT_1003,
|
|
2225
|
-
200: COLOR_LIGHT_HIGHLIGHT_2003,
|
|
2226
|
-
300: COLOR_LIGHT_HIGHLIGHT_3003,
|
|
2227
|
-
400: COLOR_LIGHT_HIGHLIGHT_4003,
|
|
2228
|
-
500: COLOR_LIGHT_HIGHLIGHT_5003,
|
|
2229
|
-
600: COLOR_LIGHT_HIGHLIGHT_6003,
|
|
2230
|
-
700: COLOR_LIGHT_HIGHLIGHT_7003,
|
|
2231
|
-
800: COLOR_LIGHT_HIGHLIGHT_8003,
|
|
2232
|
-
900: COLOR_LIGHT_HIGHLIGHT_9003
|
|
2233
|
-
},
|
|
2234
|
-
neutral: {
|
|
2235
|
-
0: COLOR_LIGHT_NEUTRAL_03,
|
|
2236
|
-
50: COLOR_LIGHT_NEUTRAL_503,
|
|
2237
|
-
100: COLOR_LIGHT_NEUTRAL_1003,
|
|
2238
|
-
200: COLOR_LIGHT_NEUTRAL_2003,
|
|
2239
|
-
300: COLOR_LIGHT_NEUTRAL_3003,
|
|
2240
|
-
400: COLOR_LIGHT_NEUTRAL_4003,
|
|
2241
|
-
500: COLOR_LIGHT_NEUTRAL_5003,
|
|
2242
|
-
600: COLOR_LIGHT_NEUTRAL_6003,
|
|
2243
|
-
700: COLOR_LIGHT_NEUTRAL_7003,
|
|
2244
|
-
800: COLOR_LIGHT_NEUTRAL_8003,
|
|
2245
|
-
900: COLOR_LIGHT_NEUTRAL_9003
|
|
2246
|
-
}
|
|
2378
|
+
var TYPOGRAPHY_BUTTON_LETTER_SPACING3 = "1.4285714285714286px";
|
|
2379
|
+
var TYPOGRAPHY_BUTTON_TEXT_DECORATION3 = "none";
|
|
2380
|
+
var TYPOGRAPHY_BUTTON_TEXT_TRANSFORM3 = "none";
|
|
2381
|
+
var TYPOGRAPHY_OVERLINE_FONT_FAMILY2 = "Nunito, sans-serif";
|
|
2382
|
+
var TYPOGRAPHY_OVERLINE_FONT_SIZE2 = "12px";
|
|
2383
|
+
var TYPOGRAPHY_OVERLINE_LINE_HEIGHT2 = "16px";
|
|
2384
|
+
var TYPOGRAPHY_OVERLINE_FONT_WEIGHT2 = "500";
|
|
2385
|
+
var TYPOGRAPHY_OVERLINE_LETTER_SPACING2 = "2.6666666666666665px";
|
|
2386
|
+
var TYPOGRAPHY_OVERLINE_TEXT_DECORATION2 = "none";
|
|
2387
|
+
var TYPOGRAPHY_OVERLINE_TEXT_TRANSFORM2 = "none";
|
|
2388
|
+
var ELEVATION_LIGHT_LIGHT3 = "2px 2px 0px 0px #333333";
|
|
2389
|
+
var ELEVATION_LIGHT_SEMILIGHT3 = "3px 3px 0px 0px #333333";
|
|
2390
|
+
var ELEVATION_LIGHT_REGULAR3 = "4px 4px 0px 0px #333333";
|
|
2391
|
+
var ELEVATION_LIGHT_SEMIBOLD3 = "5px 5px 0px 0px #333333";
|
|
2392
|
+
var ELEVATION_LIGHT_BOLD3 = "6px 6px 0px 0px #333333";
|
|
2393
|
+
var ELEVATION_LIGHT_EXTRABOLD3 = "7px 7px 0px 0px #333333";
|
|
2394
|
+
var ELEVATION_DARK_LIGHT3 = "2px 2px 0px 0px #ffffff";
|
|
2395
|
+
var ELEVATION_DARK_SEMILIGHT3 = "3px 3px 0px 0px #ffffff";
|
|
2396
|
+
var ELEVATION_DARK_REGULAR3 = "4px 4px 0px 0px #ffffff";
|
|
2397
|
+
var ELEVATION_DARK_SEMIBOLD3 = "5px 5px 0px 0px #ffffff";
|
|
2398
|
+
var ELEVATION_DARK_BOLD3 = "6px 6px 0px 0px #ffffff";
|
|
2399
|
+
var ELEVATION_DARK_EXTRABOLD3 = "7px 7px 0px 0px #ffffff";
|
|
2400
|
+
var TYPOGRAPHY_KEY_HEADLINE13 = "headline1";
|
|
2401
|
+
var TYPOGRAPHY_KEY_HEADLINE23 = "headline2";
|
|
2402
|
+
var TYPOGRAPHY_KEY_HEADLINE33 = "headline3";
|
|
2403
|
+
var TYPOGRAPHY_KEY_HEADLINE43 = "headline4";
|
|
2404
|
+
var TYPOGRAPHY_KEY_HEADLINE53 = "headline5";
|
|
2405
|
+
var TYPOGRAPHY_KEY_HEADLINE63 = "headline6";
|
|
2406
|
+
var TYPOGRAPHY_KEY_SUBTITLE12 = "subtitle1";
|
|
2407
|
+
var TYPOGRAPHY_KEY_SUBTITLE22 = "subtitle2";
|
|
2408
|
+
var TYPOGRAPHY_KEY_BODY13 = "body1";
|
|
2409
|
+
var TYPOGRAPHY_KEY_BODY23 = "body2";
|
|
2410
|
+
var TYPOGRAPHY_KEY_CAPTION2 = "caption";
|
|
2411
|
+
var TYPOGRAPHY_KEY_BUTTON3 = "button";
|
|
2412
|
+
var TYPOGRAPHY_KEY_OVERLINE2 = "overline";
|
|
2413
|
+
var ELEVATION_KEY_LIGHT3 = "light";
|
|
2414
|
+
var ELEVATION_KEY_SEMILIGHT3 = "semilight";
|
|
2415
|
+
var ELEVATION_KEY_REGULAR3 = "regular";
|
|
2416
|
+
var ELEVATION_KEY_SEMIBOLD3 = "semibold";
|
|
2417
|
+
var ELEVATION_KEY_BOLD3 = "bold";
|
|
2418
|
+
var ELEVATION_KEY_EXTRABOLD3 = "extrabold";
|
|
2419
|
+
var VARIANT_PRIMARY3 = "primary";
|
|
2420
|
+
var VARIANT_SECONDARY3 = "secondary";
|
|
2421
|
+
var VARIANT_DANGER2 = "danger";
|
|
2422
|
+
var VARIANT_WARNING2 = "warning";
|
|
2423
|
+
var VARIANT_SUCCESS2 = "success";
|
|
2424
|
+
var VARIANT_INFO2 = "info";
|
|
2425
|
+
var VARIANT_NEUTRAL2 = "neutral";
|
|
2426
|
+
|
|
2427
|
+
// src/Theming/MemphisTheme.ts
|
|
2428
|
+
(function(MemphisTheme2) {
|
|
2429
|
+
MemphisTheme2.MEMPHIS_THEME = ThemeFactory.create({
|
|
2430
|
+
name: NAME3,
|
|
2431
|
+
scheme: {
|
|
2432
|
+
light: {
|
|
2433
|
+
surface: SCHEME_LIGHT_SURFACE3,
|
|
2434
|
+
background: SCHEME_LIGHT_BACKGROUND3,
|
|
2435
|
+
foreground: SCHEME_LIGHT_FOREGROUND3,
|
|
2436
|
+
highlight: SCHEME_LIGHT_HIGHLIGHT3,
|
|
2437
|
+
middlelight: SCHEME_LIGHT_MIDDLELIGHT3,
|
|
2438
|
+
lowlight: SCHEME_LIGHT_LOWLIGHT3,
|
|
2439
|
+
transparent: SCHEME_LIGHT_TRANSPARENT3,
|
|
2440
|
+
semiTransparent: SCHEME_LIGHT_SEMI_TRANSPARENT3,
|
|
2441
|
+
disabled: SCHEME_LIGHT_DISABLED3,
|
|
2442
|
+
contrast: SCHEME_LIGHT_CONTRAST3,
|
|
2443
|
+
selection: SCHEME_LIGHT_SELECTION3
|
|
2247
2444
|
},
|
|
2248
2445
|
dark: {
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
900: COLOR_DARK_PRIMARY_9003
|
|
2261
|
-
},
|
|
2262
|
-
secondary: {
|
|
2263
|
-
0: COLOR_DARK_SECONDARY_03,
|
|
2264
|
-
50: COLOR_DARK_SECONDARY_503,
|
|
2265
|
-
100: COLOR_DARK_SECONDARY_1003,
|
|
2266
|
-
200: COLOR_DARK_SECONDARY_2003,
|
|
2267
|
-
300: COLOR_DARK_SECONDARY_3003,
|
|
2268
|
-
400: COLOR_DARK_SECONDARY_4003,
|
|
2269
|
-
500: COLOR_DARK_SECONDARY_5003,
|
|
2270
|
-
600: COLOR_DARK_SECONDARY_6003,
|
|
2271
|
-
700: COLOR_DARK_SECONDARY_7003,
|
|
2272
|
-
800: COLOR_DARK_SECONDARY_8003,
|
|
2273
|
-
900: COLOR_DARK_SECONDARY_9003
|
|
2274
|
-
},
|
|
2275
|
-
tertiary: {
|
|
2276
|
-
0: COLOR_DARK_TERTIARY_03,
|
|
2277
|
-
50: COLOR_DARK_TERTIARY_503,
|
|
2278
|
-
100: COLOR_DARK_TERTIARY_1003,
|
|
2279
|
-
200: COLOR_DARK_TERTIARY_2003,
|
|
2280
|
-
300: COLOR_DARK_TERTIARY_3003,
|
|
2281
|
-
400: COLOR_DARK_TERTIARY_4003,
|
|
2282
|
-
500: COLOR_DARK_TERTIARY_5003,
|
|
2283
|
-
600: COLOR_DARK_TERTIARY_6003,
|
|
2284
|
-
700: COLOR_DARK_TERTIARY_7003,
|
|
2285
|
-
800: COLOR_DARK_TERTIARY_8003,
|
|
2286
|
-
900: COLOR_DARK_TERTIARY_9003
|
|
2287
|
-
},
|
|
2288
|
-
info: {
|
|
2289
|
-
0: COLOR_DARK_INFO_03,
|
|
2290
|
-
50: COLOR_DARK_INFO_503,
|
|
2291
|
-
100: COLOR_DARK_INFO_1003,
|
|
2292
|
-
200: COLOR_DARK_INFO_2003,
|
|
2293
|
-
300: COLOR_DARK_INFO_3003,
|
|
2294
|
-
400: COLOR_DARK_INFO_4003,
|
|
2295
|
-
500: COLOR_DARK_INFO_5003,
|
|
2296
|
-
600: COLOR_DARK_INFO_6003,
|
|
2297
|
-
700: COLOR_DARK_INFO_7003,
|
|
2298
|
-
800: COLOR_DARK_INFO_8003,
|
|
2299
|
-
900: COLOR_DARK_INFO_9003
|
|
2300
|
-
},
|
|
2301
|
-
warning: {
|
|
2302
|
-
0: COLOR_DARK_WARNING_03,
|
|
2303
|
-
50: COLOR_DARK_WARNING_503,
|
|
2304
|
-
100: COLOR_DARK_WARNING_1003,
|
|
2305
|
-
200: COLOR_DARK_WARNING_2003,
|
|
2306
|
-
300: COLOR_DARK_WARNING_3003,
|
|
2307
|
-
400: COLOR_DARK_WARNING_4003,
|
|
2308
|
-
500: COLOR_DARK_WARNING_5003,
|
|
2309
|
-
600: COLOR_DARK_WARNING_6003,
|
|
2310
|
-
700: COLOR_DARK_WARNING_7003,
|
|
2311
|
-
800: COLOR_DARK_WARNING_8003,
|
|
2312
|
-
900: COLOR_DARK_WARNING_9003
|
|
2313
|
-
},
|
|
2314
|
-
danger: {
|
|
2315
|
-
0: COLOR_DARK_DANGER_03,
|
|
2316
|
-
50: COLOR_DARK_DANGER_503,
|
|
2317
|
-
100: COLOR_DARK_DANGER_1003,
|
|
2318
|
-
200: COLOR_DARK_DANGER_2003,
|
|
2319
|
-
300: COLOR_DARK_DANGER_3003,
|
|
2320
|
-
400: COLOR_DARK_DANGER_4003,
|
|
2321
|
-
500: COLOR_DARK_DANGER_5003,
|
|
2322
|
-
600: COLOR_DARK_DANGER_6003,
|
|
2323
|
-
700: COLOR_DARK_DANGER_7003,
|
|
2324
|
-
800: COLOR_DARK_DANGER_8003,
|
|
2325
|
-
900: COLOR_DARK_DANGER_9003
|
|
2326
|
-
},
|
|
2327
|
-
success: {
|
|
2328
|
-
0: COLOR_DARK_SUCCESS_03,
|
|
2329
|
-
50: COLOR_DARK_SUCCESS_503,
|
|
2330
|
-
100: COLOR_DARK_SUCCESS_1003,
|
|
2331
|
-
200: COLOR_DARK_SUCCESS_2003,
|
|
2332
|
-
300: COLOR_DARK_SUCCESS_3003,
|
|
2333
|
-
400: COLOR_DARK_SUCCESS_4003,
|
|
2334
|
-
500: COLOR_DARK_SUCCESS_5003,
|
|
2335
|
-
600: COLOR_DARK_SUCCESS_6003,
|
|
2336
|
-
700: COLOR_DARK_SUCCESS_7003,
|
|
2337
|
-
800: COLOR_DARK_SUCCESS_8003,
|
|
2338
|
-
900: COLOR_DARK_SUCCESS_9003
|
|
2339
|
-
},
|
|
2340
|
-
highlight: {
|
|
2341
|
-
0: COLOR_DARK_HIGHLIGHT_03,
|
|
2342
|
-
50: COLOR_DARK_HIGHLIGHT_503,
|
|
2343
|
-
100: COLOR_DARK_HIGHLIGHT_1003,
|
|
2344
|
-
200: COLOR_DARK_HIGHLIGHT_2003,
|
|
2345
|
-
300: COLOR_DARK_HIGHLIGHT_3003,
|
|
2346
|
-
400: COLOR_DARK_HIGHLIGHT_4003,
|
|
2347
|
-
500: COLOR_DARK_HIGHLIGHT_5003,
|
|
2348
|
-
600: COLOR_DARK_HIGHLIGHT_6003,
|
|
2349
|
-
700: COLOR_DARK_HIGHLIGHT_7003,
|
|
2350
|
-
800: COLOR_DARK_HIGHLIGHT_8003,
|
|
2351
|
-
900: COLOR_DARK_HIGHLIGHT_9003
|
|
2352
|
-
},
|
|
2353
|
-
neutral: {
|
|
2354
|
-
0: COLOR_DARK_NEUTRAL_03,
|
|
2355
|
-
50: COLOR_DARK_NEUTRAL_503,
|
|
2356
|
-
100: COLOR_DARK_NEUTRAL_1003,
|
|
2357
|
-
200: COLOR_DARK_NEUTRAL_2003,
|
|
2358
|
-
300: COLOR_DARK_NEUTRAL_3003,
|
|
2359
|
-
400: COLOR_DARK_NEUTRAL_4003,
|
|
2360
|
-
500: COLOR_DARK_NEUTRAL_5003,
|
|
2361
|
-
600: COLOR_DARK_NEUTRAL_6003,
|
|
2362
|
-
700: COLOR_DARK_NEUTRAL_7003,
|
|
2363
|
-
800: COLOR_DARK_NEUTRAL_8003,
|
|
2364
|
-
900: COLOR_DARK_NEUTRAL_9003
|
|
2365
|
-
}
|
|
2366
|
-
}
|
|
2367
|
-
},
|
|
2368
|
-
fontFamily: FONT_FAMILY3,
|
|
2369
|
-
typography: {
|
|
2370
|
-
headline1: {
|
|
2371
|
-
fontFamily: TYPOGRAPHY_HEADLINE1_FONT_FAMILY3,
|
|
2372
|
-
fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE3,
|
|
2373
|
-
lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3,
|
|
2374
|
-
fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3,
|
|
2375
|
-
letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING3,
|
|
2376
|
-
textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3,
|
|
2377
|
-
textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3
|
|
2378
|
-
},
|
|
2379
|
-
headline2: {
|
|
2380
|
-
fontFamily: TYPOGRAPHY_HEADLINE2_FONT_FAMILY3,
|
|
2381
|
-
fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE3,
|
|
2382
|
-
lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3,
|
|
2383
|
-
fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3,
|
|
2384
|
-
letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING3,
|
|
2385
|
-
textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3,
|
|
2386
|
-
textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3
|
|
2387
|
-
},
|
|
2388
|
-
headline3: {
|
|
2389
|
-
fontFamily: TYPOGRAPHY_HEADLINE3_FONT_FAMILY3,
|
|
2390
|
-
fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE3,
|
|
2391
|
-
lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3,
|
|
2392
|
-
fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3,
|
|
2393
|
-
letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING3,
|
|
2394
|
-
textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3,
|
|
2395
|
-
textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3
|
|
2396
|
-
},
|
|
2397
|
-
headline4: {
|
|
2398
|
-
fontFamily: TYPOGRAPHY_HEADLINE4_FONT_FAMILY3,
|
|
2399
|
-
fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE3,
|
|
2400
|
-
lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3,
|
|
2401
|
-
fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3,
|
|
2402
|
-
letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING3,
|
|
2403
|
-
textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3,
|
|
2404
|
-
textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3
|
|
2405
|
-
},
|
|
2406
|
-
headline5: {
|
|
2407
|
-
fontFamily: TYPOGRAPHY_HEADLINE5_FONT_FAMILY3,
|
|
2408
|
-
fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE3,
|
|
2409
|
-
lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3,
|
|
2410
|
-
fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3,
|
|
2411
|
-
letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING3,
|
|
2412
|
-
textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3,
|
|
2413
|
-
textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3
|
|
2414
|
-
},
|
|
2415
|
-
headline6: {
|
|
2416
|
-
fontFamily: TYPOGRAPHY_HEADLINE6_FONT_FAMILY3,
|
|
2417
|
-
fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE3,
|
|
2418
|
-
lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3,
|
|
2419
|
-
fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3,
|
|
2420
|
-
letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING3,
|
|
2421
|
-
textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3,
|
|
2422
|
-
textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3
|
|
2423
|
-
},
|
|
2424
|
-
body1: {
|
|
2425
|
-
fontFamily: TYPOGRAPHY_BODY1_FONT_FAMILY3,
|
|
2426
|
-
fontSize: TYPOGRAPHY_BODY1_FONT_SIZE3,
|
|
2427
|
-
lineHeight: TYPOGRAPHY_BODY1_LINE_HEIGHT3,
|
|
2428
|
-
fontWeight: TYPOGRAPHY_BODY1_FONT_WEIGHT3,
|
|
2429
|
-
letterSpacing: TYPOGRAPHY_BODY1_LETTER_SPACING3,
|
|
2430
|
-
textDecoration: TYPOGRAPHY_BODY1_TEXT_DECORATION3,
|
|
2431
|
-
textTransform: TYPOGRAPHY_BODY1_TEXT_TRANSFORM3
|
|
2432
|
-
},
|
|
2433
|
-
body2: {
|
|
2434
|
-
fontFamily: TYPOGRAPHY_BODY2_FONT_FAMILY3,
|
|
2435
|
-
fontSize: TYPOGRAPHY_BODY2_FONT_SIZE3,
|
|
2436
|
-
lineHeight: TYPOGRAPHY_BODY2_LINE_HEIGHT3,
|
|
2437
|
-
fontWeight: TYPOGRAPHY_BODY2_FONT_WEIGHT3,
|
|
2438
|
-
letterSpacing: TYPOGRAPHY_BODY2_LETTER_SPACING3,
|
|
2439
|
-
textDecoration: TYPOGRAPHY_BODY2_TEXT_DECORATION3,
|
|
2440
|
-
textTransform: TYPOGRAPHY_BODY2_TEXT_TRANSFORM3
|
|
2441
|
-
},
|
|
2442
|
-
button: {
|
|
2443
|
-
fontFamily: TYPOGRAPHY_BUTTON_FONT_FAMILY3,
|
|
2444
|
-
fontSize: TYPOGRAPHY_BUTTON_FONT_SIZE3,
|
|
2445
|
-
lineHeight: TYPOGRAPHY_BUTTON_LINE_HEIGHT3,
|
|
2446
|
-
fontWeight: TYPOGRAPHY_BUTTON_FONT_WEIGHT3,
|
|
2447
|
-
letterSpacing: TYPOGRAPHY_BUTTON_LETTER_SPACING3,
|
|
2448
|
-
textDecoration: TYPOGRAPHY_BUTTON_TEXT_DECORATION3,
|
|
2449
|
-
textTransform: TYPOGRAPHY_BUTTON_TEXT_TRANSFORM3
|
|
2446
|
+
surface: SCHEME_DARK_SURFACE3,
|
|
2447
|
+
background: SCHEME_DARK_BACKGROUND3,
|
|
2448
|
+
foreground: SCHEME_DARK_FOREGROUND3,
|
|
2449
|
+
highlight: SCHEME_DARK_HIGHLIGHT3,
|
|
2450
|
+
middlelight: SCHEME_DARK_MIDDLELIGHT3,
|
|
2451
|
+
lowlight: SCHEME_DARK_LOWLIGHT3,
|
|
2452
|
+
transparent: SCHEME_DARK_TRANSPARENT3,
|
|
2453
|
+
semiTransparent: SCHEME_DARK_SEMI_TRANSPARENT3,
|
|
2454
|
+
disabled: SCHEME_DARK_DISABLED3,
|
|
2455
|
+
contrast: SCHEME_DARK_CONTRAST3,
|
|
2456
|
+
selection: SCHEME_DARK_SELECTION3
|
|
2450
2457
|
}
|
|
2451
2458
|
},
|
|
2452
|
-
|
|
2453
|
-
radius: LAYOUT_RADIUS3,
|
|
2454
|
-
space: LAYOUT_SPACE3,
|
|
2455
|
-
thickness: LAYOUT_THICKNESS3
|
|
2456
|
-
},
|
|
2457
|
-
elevation: {
|
|
2459
|
+
palette: {
|
|
2458
2460
|
light: {
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2461
|
+
primary: {
|
|
2462
|
+
0: COLOR_LIGHT_PRIMARY_03,
|
|
2463
|
+
50: COLOR_LIGHT_PRIMARY_503,
|
|
2464
|
+
100: COLOR_LIGHT_PRIMARY_1003,
|
|
2465
|
+
200: COLOR_LIGHT_PRIMARY_2003,
|
|
2466
|
+
300: COLOR_LIGHT_PRIMARY_3003,
|
|
2467
|
+
400: COLOR_LIGHT_PRIMARY_4003,
|
|
2468
|
+
500: COLOR_LIGHT_PRIMARY_5003,
|
|
2469
|
+
600: COLOR_LIGHT_PRIMARY_6003,
|
|
2470
|
+
700: COLOR_LIGHT_PRIMARY_7003,
|
|
2471
|
+
800: COLOR_LIGHT_PRIMARY_8003,
|
|
2472
|
+
900: COLOR_LIGHT_PRIMARY_9003
|
|
2473
|
+
},
|
|
2474
|
+
secondary: {
|
|
2475
|
+
0: COLOR_LIGHT_SECONDARY_03,
|
|
2476
|
+
50: COLOR_LIGHT_SECONDARY_503,
|
|
2477
|
+
100: COLOR_LIGHT_SECONDARY_1003,
|
|
2478
|
+
200: COLOR_LIGHT_SECONDARY_2003,
|
|
2479
|
+
300: COLOR_LIGHT_SECONDARY_3003,
|
|
2480
|
+
400: COLOR_LIGHT_SECONDARY_4003,
|
|
2481
|
+
500: COLOR_LIGHT_SECONDARY_5003,
|
|
2482
|
+
600: COLOR_LIGHT_SECONDARY_6003,
|
|
2483
|
+
700: COLOR_LIGHT_SECONDARY_7003,
|
|
2484
|
+
800: COLOR_LIGHT_SECONDARY_8003,
|
|
2485
|
+
900: COLOR_LIGHT_SECONDARY_9003
|
|
2486
|
+
},
|
|
2487
|
+
tertiary: {
|
|
2488
|
+
0: COLOR_LIGHT_TERTIARY_03,
|
|
2489
|
+
50: COLOR_LIGHT_TERTIARY_503,
|
|
2490
|
+
100: COLOR_LIGHT_TERTIARY_1003,
|
|
2491
|
+
200: COLOR_LIGHT_TERTIARY_2003,
|
|
2492
|
+
300: COLOR_LIGHT_TERTIARY_3003,
|
|
2493
|
+
400: COLOR_LIGHT_TERTIARY_4003,
|
|
2494
|
+
500: COLOR_LIGHT_TERTIARY_5003,
|
|
2495
|
+
600: COLOR_LIGHT_TERTIARY_6003,
|
|
2496
|
+
700: COLOR_LIGHT_TERTIARY_7003,
|
|
2497
|
+
800: COLOR_LIGHT_TERTIARY_8003,
|
|
2498
|
+
900: COLOR_LIGHT_TERTIARY_9003
|
|
2499
|
+
},
|
|
2500
|
+
info: {
|
|
2501
|
+
0: COLOR_LIGHT_INFO_03,
|
|
2502
|
+
50: COLOR_LIGHT_INFO_503,
|
|
2503
|
+
100: COLOR_LIGHT_INFO_1003,
|
|
2504
|
+
200: COLOR_LIGHT_INFO_2003,
|
|
2505
|
+
300: COLOR_LIGHT_INFO_3003,
|
|
2506
|
+
400: COLOR_LIGHT_INFO_4003,
|
|
2507
|
+
500: COLOR_LIGHT_INFO_5003,
|
|
2508
|
+
600: COLOR_LIGHT_INFO_6003,
|
|
2509
|
+
700: COLOR_LIGHT_INFO_7003,
|
|
2510
|
+
800: COLOR_LIGHT_INFO_8003,
|
|
2511
|
+
900: COLOR_LIGHT_INFO_9003
|
|
2512
|
+
},
|
|
2513
|
+
warning: {
|
|
2514
|
+
0: COLOR_LIGHT_WARNING_03,
|
|
2515
|
+
50: COLOR_LIGHT_WARNING_503,
|
|
2516
|
+
100: COLOR_LIGHT_WARNING_1003,
|
|
2517
|
+
200: COLOR_LIGHT_WARNING_2003,
|
|
2518
|
+
300: COLOR_LIGHT_WARNING_3003,
|
|
2519
|
+
400: COLOR_LIGHT_WARNING_4003,
|
|
2520
|
+
500: COLOR_LIGHT_WARNING_5003,
|
|
2521
|
+
600: COLOR_LIGHT_WARNING_6003,
|
|
2522
|
+
700: COLOR_LIGHT_WARNING_7003,
|
|
2523
|
+
800: COLOR_LIGHT_WARNING_8003,
|
|
2524
|
+
900: COLOR_LIGHT_WARNING_9003
|
|
2525
|
+
},
|
|
2526
|
+
danger: {
|
|
2527
|
+
0: COLOR_LIGHT_DANGER_03,
|
|
2528
|
+
50: COLOR_LIGHT_DANGER_503,
|
|
2529
|
+
100: COLOR_LIGHT_DANGER_1003,
|
|
2530
|
+
200: COLOR_LIGHT_DANGER_2003,
|
|
2531
|
+
300: COLOR_LIGHT_DANGER_3003,
|
|
2532
|
+
400: COLOR_LIGHT_DANGER_4003,
|
|
2533
|
+
500: COLOR_LIGHT_DANGER_5003,
|
|
2534
|
+
600: COLOR_LIGHT_DANGER_6003,
|
|
2535
|
+
700: COLOR_LIGHT_DANGER_7003,
|
|
2536
|
+
800: COLOR_LIGHT_DANGER_8003,
|
|
2537
|
+
900: COLOR_LIGHT_DANGER_9003
|
|
2538
|
+
},
|
|
2539
|
+
success: {
|
|
2540
|
+
0: COLOR_LIGHT_SUCCESS_03,
|
|
2541
|
+
50: COLOR_LIGHT_SUCCESS_503,
|
|
2542
|
+
100: COLOR_LIGHT_SUCCESS_1003,
|
|
2543
|
+
200: COLOR_LIGHT_SUCCESS_2003,
|
|
2544
|
+
300: COLOR_LIGHT_SUCCESS_3003,
|
|
2545
|
+
400: COLOR_LIGHT_SUCCESS_4003,
|
|
2546
|
+
500: COLOR_LIGHT_SUCCESS_5003,
|
|
2547
|
+
600: COLOR_LIGHT_SUCCESS_6003,
|
|
2548
|
+
700: COLOR_LIGHT_SUCCESS_7003,
|
|
2549
|
+
800: COLOR_LIGHT_SUCCESS_8003,
|
|
2550
|
+
900: COLOR_LIGHT_SUCCESS_9003
|
|
2551
|
+
},
|
|
2552
|
+
highlight: {
|
|
2553
|
+
0: COLOR_LIGHT_HIGHLIGHT_03,
|
|
2554
|
+
50: COLOR_LIGHT_HIGHLIGHT_503,
|
|
2555
|
+
100: COLOR_LIGHT_HIGHLIGHT_1003,
|
|
2556
|
+
200: COLOR_LIGHT_HIGHLIGHT_2003,
|
|
2557
|
+
300: COLOR_LIGHT_HIGHLIGHT_3003,
|
|
2558
|
+
400: COLOR_LIGHT_HIGHLIGHT_4003,
|
|
2559
|
+
500: COLOR_LIGHT_HIGHLIGHT_5003,
|
|
2560
|
+
600: COLOR_LIGHT_HIGHLIGHT_6003,
|
|
2561
|
+
700: COLOR_LIGHT_HIGHLIGHT_7003,
|
|
2562
|
+
800: COLOR_LIGHT_HIGHLIGHT_8003,
|
|
2563
|
+
900: COLOR_LIGHT_HIGHLIGHT_9003
|
|
2564
|
+
},
|
|
2565
|
+
neutral: {
|
|
2566
|
+
0: COLOR_LIGHT_NEUTRAL_03,
|
|
2567
|
+
50: COLOR_LIGHT_NEUTRAL_503,
|
|
2568
|
+
100: COLOR_LIGHT_NEUTRAL_1003,
|
|
2569
|
+
200: COLOR_LIGHT_NEUTRAL_2003,
|
|
2570
|
+
300: COLOR_LIGHT_NEUTRAL_3003,
|
|
2571
|
+
400: COLOR_LIGHT_NEUTRAL_4003,
|
|
2572
|
+
500: COLOR_LIGHT_NEUTRAL_5003,
|
|
2573
|
+
600: COLOR_LIGHT_NEUTRAL_6003,
|
|
2574
|
+
700: COLOR_LIGHT_NEUTRAL_7003,
|
|
2575
|
+
800: COLOR_LIGHT_NEUTRAL_8003,
|
|
2576
|
+
900: COLOR_LIGHT_NEUTRAL_9003
|
|
2577
|
+
}
|
|
2466
2578
|
},
|
|
2467
2579
|
dark: {
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
|
|
2502
|
-
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2580
|
+
primary: {
|
|
2581
|
+
0: COLOR_DARK_PRIMARY_03,
|
|
2582
|
+
50: COLOR_DARK_PRIMARY_503,
|
|
2583
|
+
100: COLOR_DARK_PRIMARY_1003,
|
|
2584
|
+
200: COLOR_DARK_PRIMARY_2003,
|
|
2585
|
+
300: COLOR_DARK_PRIMARY_3003,
|
|
2586
|
+
400: COLOR_DARK_PRIMARY_4003,
|
|
2587
|
+
500: COLOR_DARK_PRIMARY_5003,
|
|
2588
|
+
600: COLOR_DARK_PRIMARY_6003,
|
|
2589
|
+
700: COLOR_DARK_PRIMARY_7003,
|
|
2590
|
+
800: COLOR_DARK_PRIMARY_8003,
|
|
2591
|
+
900: COLOR_DARK_PRIMARY_9003
|
|
2592
|
+
},
|
|
2593
|
+
secondary: {
|
|
2594
|
+
0: COLOR_DARK_SECONDARY_03,
|
|
2595
|
+
50: COLOR_DARK_SECONDARY_503,
|
|
2596
|
+
100: COLOR_DARK_SECONDARY_1003,
|
|
2597
|
+
200: COLOR_DARK_SECONDARY_2003,
|
|
2598
|
+
300: COLOR_DARK_SECONDARY_3003,
|
|
2599
|
+
400: COLOR_DARK_SECONDARY_4003,
|
|
2600
|
+
500: COLOR_DARK_SECONDARY_5003,
|
|
2601
|
+
600: COLOR_DARK_SECONDARY_6003,
|
|
2602
|
+
700: COLOR_DARK_SECONDARY_7003,
|
|
2603
|
+
800: COLOR_DARK_SECONDARY_8003,
|
|
2604
|
+
900: COLOR_DARK_SECONDARY_9003
|
|
2605
|
+
},
|
|
2606
|
+
tertiary: {
|
|
2607
|
+
0: COLOR_DARK_TERTIARY_03,
|
|
2608
|
+
50: COLOR_DARK_TERTIARY_503,
|
|
2609
|
+
100: COLOR_DARK_TERTIARY_1003,
|
|
2610
|
+
200: COLOR_DARK_TERTIARY_2003,
|
|
2611
|
+
300: COLOR_DARK_TERTIARY_3003,
|
|
2612
|
+
400: COLOR_DARK_TERTIARY_4003,
|
|
2613
|
+
500: COLOR_DARK_TERTIARY_5003,
|
|
2614
|
+
600: COLOR_DARK_TERTIARY_6003,
|
|
2615
|
+
700: COLOR_DARK_TERTIARY_7003,
|
|
2616
|
+
800: COLOR_DARK_TERTIARY_8003,
|
|
2617
|
+
900: COLOR_DARK_TERTIARY_9003
|
|
2618
|
+
},
|
|
2619
|
+
info: {
|
|
2620
|
+
0: COLOR_DARK_INFO_03,
|
|
2621
|
+
50: COLOR_DARK_INFO_503,
|
|
2622
|
+
100: COLOR_DARK_INFO_1003,
|
|
2623
|
+
200: COLOR_DARK_INFO_2003,
|
|
2624
|
+
300: COLOR_DARK_INFO_3003,
|
|
2625
|
+
400: COLOR_DARK_INFO_4003,
|
|
2626
|
+
500: COLOR_DARK_INFO_5003,
|
|
2627
|
+
600: COLOR_DARK_INFO_6003,
|
|
2628
|
+
700: COLOR_DARK_INFO_7003,
|
|
2629
|
+
800: COLOR_DARK_INFO_8003,
|
|
2630
|
+
900: COLOR_DARK_INFO_9003
|
|
2631
|
+
},
|
|
2632
|
+
warning: {
|
|
2633
|
+
0: COLOR_DARK_WARNING_03,
|
|
2634
|
+
50: COLOR_DARK_WARNING_503,
|
|
2635
|
+
100: COLOR_DARK_WARNING_1003,
|
|
2636
|
+
200: COLOR_DARK_WARNING_2003,
|
|
2637
|
+
300: COLOR_DARK_WARNING_3003,
|
|
2638
|
+
400: COLOR_DARK_WARNING_4003,
|
|
2639
|
+
500: COLOR_DARK_WARNING_5003,
|
|
2640
|
+
600: COLOR_DARK_WARNING_6003,
|
|
2641
|
+
700: COLOR_DARK_WARNING_7003,
|
|
2642
|
+
800: COLOR_DARK_WARNING_8003,
|
|
2643
|
+
900: COLOR_DARK_WARNING_9003
|
|
2644
|
+
},
|
|
2645
|
+
danger: {
|
|
2646
|
+
0: COLOR_DARK_DANGER_03,
|
|
2647
|
+
50: COLOR_DARK_DANGER_503,
|
|
2648
|
+
100: COLOR_DARK_DANGER_1003,
|
|
2649
|
+
200: COLOR_DARK_DANGER_2003,
|
|
2650
|
+
300: COLOR_DARK_DANGER_3003,
|
|
2651
|
+
400: COLOR_DARK_DANGER_4003,
|
|
2652
|
+
500: COLOR_DARK_DANGER_5003,
|
|
2653
|
+
600: COLOR_DARK_DANGER_6003,
|
|
2654
|
+
700: COLOR_DARK_DANGER_7003,
|
|
2655
|
+
800: COLOR_DARK_DANGER_8003,
|
|
2656
|
+
900: COLOR_DARK_DANGER_9003
|
|
2657
|
+
},
|
|
2658
|
+
success: {
|
|
2659
|
+
0: COLOR_DARK_SUCCESS_03,
|
|
2660
|
+
50: COLOR_DARK_SUCCESS_503,
|
|
2661
|
+
100: COLOR_DARK_SUCCESS_1003,
|
|
2662
|
+
200: COLOR_DARK_SUCCESS_2003,
|
|
2663
|
+
300: COLOR_DARK_SUCCESS_3003,
|
|
2664
|
+
400: COLOR_DARK_SUCCESS_4003,
|
|
2665
|
+
500: COLOR_DARK_SUCCESS_5003,
|
|
2666
|
+
600: COLOR_DARK_SUCCESS_6003,
|
|
2667
|
+
700: COLOR_DARK_SUCCESS_7003,
|
|
2668
|
+
800: COLOR_DARK_SUCCESS_8003,
|
|
2669
|
+
900: COLOR_DARK_SUCCESS_9003
|
|
2670
|
+
},
|
|
2671
|
+
highlight: {
|
|
2672
|
+
0: COLOR_DARK_HIGHLIGHT_03,
|
|
2673
|
+
50: COLOR_DARK_HIGHLIGHT_503,
|
|
2674
|
+
100: COLOR_DARK_HIGHLIGHT_1003,
|
|
2675
|
+
200: COLOR_DARK_HIGHLIGHT_2003,
|
|
2676
|
+
300: COLOR_DARK_HIGHLIGHT_3003,
|
|
2677
|
+
400: COLOR_DARK_HIGHLIGHT_4003,
|
|
2678
|
+
500: COLOR_DARK_HIGHLIGHT_5003,
|
|
2679
|
+
600: COLOR_DARK_HIGHLIGHT_6003,
|
|
2680
|
+
700: COLOR_DARK_HIGHLIGHT_7003,
|
|
2681
|
+
800: COLOR_DARK_HIGHLIGHT_8003,
|
|
2682
|
+
900: COLOR_DARK_HIGHLIGHT_9003
|
|
2683
|
+
},
|
|
2684
|
+
neutral: {
|
|
2685
|
+
0: COLOR_DARK_NEUTRAL_03,
|
|
2686
|
+
50: COLOR_DARK_NEUTRAL_503,
|
|
2687
|
+
100: COLOR_DARK_NEUTRAL_1003,
|
|
2688
|
+
200: COLOR_DARK_NEUTRAL_2003,
|
|
2689
|
+
300: COLOR_DARK_NEUTRAL_3003,
|
|
2690
|
+
400: COLOR_DARK_NEUTRAL_4003,
|
|
2691
|
+
500: COLOR_DARK_NEUTRAL_5003,
|
|
2692
|
+
600: COLOR_DARK_NEUTRAL_6003,
|
|
2693
|
+
700: COLOR_DARK_NEUTRAL_7003,
|
|
2694
|
+
800: COLOR_DARK_NEUTRAL_8003,
|
|
2695
|
+
900: COLOR_DARK_NEUTRAL_9003
|
|
2696
|
+
}
|
|
2565
2697
|
}
|
|
2566
|
-
}
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
function pxToRem(pixel) {
|
|
2686
|
-
const value = extractValue(pixel);
|
|
2687
|
-
const baseSize = 16;
|
|
2688
|
-
const sizeInRem = `${value / baseSize}rem`;
|
|
2689
|
-
return sizeInRem;
|
|
2690
|
-
}
|
|
2691
|
-
__name(pxToRem, "pxToRem");
|
|
2692
|
-
CssLength2.pxToRem = pxToRem;
|
|
2693
|
-
function tryParse(value, defaultUnit = "px") {
|
|
2694
|
-
if (value === void 0 || value === null) {
|
|
2695
|
-
return void 0;
|
|
2696
|
-
}
|
|
2697
|
-
if (typeof value === "string") {
|
|
2698
|
-
if (isLength(value)) {
|
|
2699
|
-
return value;
|
|
2698
|
+
},
|
|
2699
|
+
fontFamily: FONT_FAMILY3,
|
|
2700
|
+
typography: {
|
|
2701
|
+
headline1: {
|
|
2702
|
+
fontFamily: TYPOGRAPHY_HEADLINE1_FONT_FAMILY3,
|
|
2703
|
+
fontSize: TYPOGRAPHY_HEADLINE1_FONT_SIZE3,
|
|
2704
|
+
lineHeight: TYPOGRAPHY_HEADLINE1_LINE_HEIGHT3,
|
|
2705
|
+
fontWeight: TYPOGRAPHY_HEADLINE1_FONT_WEIGHT3,
|
|
2706
|
+
letterSpacing: TYPOGRAPHY_HEADLINE1_LETTER_SPACING3,
|
|
2707
|
+
textDecoration: TYPOGRAPHY_HEADLINE1_TEXT_DECORATION3,
|
|
2708
|
+
textTransform: TYPOGRAPHY_HEADLINE1_TEXT_TRANSFORM3
|
|
2709
|
+
},
|
|
2710
|
+
headline2: {
|
|
2711
|
+
fontFamily: TYPOGRAPHY_HEADLINE2_FONT_FAMILY3,
|
|
2712
|
+
fontSize: TYPOGRAPHY_HEADLINE2_FONT_SIZE3,
|
|
2713
|
+
lineHeight: TYPOGRAPHY_HEADLINE2_LINE_HEIGHT3,
|
|
2714
|
+
fontWeight: TYPOGRAPHY_HEADLINE2_FONT_WEIGHT3,
|
|
2715
|
+
letterSpacing: TYPOGRAPHY_HEADLINE2_LETTER_SPACING3,
|
|
2716
|
+
textDecoration: TYPOGRAPHY_HEADLINE2_TEXT_DECORATION3,
|
|
2717
|
+
textTransform: TYPOGRAPHY_HEADLINE2_TEXT_TRANSFORM3
|
|
2718
|
+
},
|
|
2719
|
+
headline3: {
|
|
2720
|
+
fontFamily: TYPOGRAPHY_HEADLINE3_FONT_FAMILY3,
|
|
2721
|
+
fontSize: TYPOGRAPHY_HEADLINE3_FONT_SIZE3,
|
|
2722
|
+
lineHeight: TYPOGRAPHY_HEADLINE3_LINE_HEIGHT3,
|
|
2723
|
+
fontWeight: TYPOGRAPHY_HEADLINE3_FONT_WEIGHT3,
|
|
2724
|
+
letterSpacing: TYPOGRAPHY_HEADLINE3_LETTER_SPACING3,
|
|
2725
|
+
textDecoration: TYPOGRAPHY_HEADLINE3_TEXT_DECORATION3,
|
|
2726
|
+
textTransform: TYPOGRAPHY_HEADLINE3_TEXT_TRANSFORM3
|
|
2727
|
+
},
|
|
2728
|
+
headline4: {
|
|
2729
|
+
fontFamily: TYPOGRAPHY_HEADLINE4_FONT_FAMILY3,
|
|
2730
|
+
fontSize: TYPOGRAPHY_HEADLINE4_FONT_SIZE3,
|
|
2731
|
+
lineHeight: TYPOGRAPHY_HEADLINE4_LINE_HEIGHT3,
|
|
2732
|
+
fontWeight: TYPOGRAPHY_HEADLINE4_FONT_WEIGHT3,
|
|
2733
|
+
letterSpacing: TYPOGRAPHY_HEADLINE4_LETTER_SPACING3,
|
|
2734
|
+
textDecoration: TYPOGRAPHY_HEADLINE4_TEXT_DECORATION3,
|
|
2735
|
+
textTransform: TYPOGRAPHY_HEADLINE4_TEXT_TRANSFORM3
|
|
2736
|
+
},
|
|
2737
|
+
headline5: {
|
|
2738
|
+
fontFamily: TYPOGRAPHY_HEADLINE5_FONT_FAMILY3,
|
|
2739
|
+
fontSize: TYPOGRAPHY_HEADLINE5_FONT_SIZE3,
|
|
2740
|
+
lineHeight: TYPOGRAPHY_HEADLINE5_LINE_HEIGHT3,
|
|
2741
|
+
fontWeight: TYPOGRAPHY_HEADLINE5_FONT_WEIGHT3,
|
|
2742
|
+
letterSpacing: TYPOGRAPHY_HEADLINE5_LETTER_SPACING3,
|
|
2743
|
+
textDecoration: TYPOGRAPHY_HEADLINE5_TEXT_DECORATION3,
|
|
2744
|
+
textTransform: TYPOGRAPHY_HEADLINE5_TEXT_TRANSFORM3
|
|
2745
|
+
},
|
|
2746
|
+
headline6: {
|
|
2747
|
+
fontFamily: TYPOGRAPHY_HEADLINE6_FONT_FAMILY3,
|
|
2748
|
+
fontSize: TYPOGRAPHY_HEADLINE6_FONT_SIZE3,
|
|
2749
|
+
lineHeight: TYPOGRAPHY_HEADLINE6_LINE_HEIGHT3,
|
|
2750
|
+
fontWeight: TYPOGRAPHY_HEADLINE6_FONT_WEIGHT3,
|
|
2751
|
+
letterSpacing: TYPOGRAPHY_HEADLINE6_LETTER_SPACING3,
|
|
2752
|
+
textDecoration: TYPOGRAPHY_HEADLINE6_TEXT_DECORATION3,
|
|
2753
|
+
textTransform: TYPOGRAPHY_HEADLINE6_TEXT_TRANSFORM3
|
|
2754
|
+
},
|
|
2755
|
+
subtitle1: {
|
|
2756
|
+
fontFamily: TYPOGRAPHY_SUBTITLE1_FONT_FAMILY2,
|
|
2757
|
+
fontSize: TYPOGRAPHY_SUBTITLE1_FONT_SIZE2,
|
|
2758
|
+
lineHeight: TYPOGRAPHY_SUBTITLE1_LINE_HEIGHT2,
|
|
2759
|
+
fontWeight: TYPOGRAPHY_SUBTITLE1_FONT_WEIGHT2,
|
|
2760
|
+
letterSpacing: TYPOGRAPHY_SUBTITLE1_LETTER_SPACING2,
|
|
2761
|
+
textDecoration: TYPOGRAPHY_SUBTITLE1_TEXT_DECORATION2,
|
|
2762
|
+
textTransform: TYPOGRAPHY_SUBTITLE1_TEXT_TRANSFORM2
|
|
2763
|
+
},
|
|
2764
|
+
subtitle2: {
|
|
2765
|
+
fontFamily: TYPOGRAPHY_SUBTITLE2_FONT_FAMILY2,
|
|
2766
|
+
fontSize: TYPOGRAPHY_SUBTITLE2_FONT_SIZE2,
|
|
2767
|
+
lineHeight: TYPOGRAPHY_SUBTITLE2_LINE_HEIGHT2,
|
|
2768
|
+
fontWeight: TYPOGRAPHY_SUBTITLE2_FONT_WEIGHT2,
|
|
2769
|
+
letterSpacing: TYPOGRAPHY_SUBTITLE2_LETTER_SPACING2,
|
|
2770
|
+
textDecoration: TYPOGRAPHY_SUBTITLE2_TEXT_DECORATION2,
|
|
2771
|
+
textTransform: TYPOGRAPHY_SUBTITLE2_TEXT_TRANSFORM2
|
|
2772
|
+
},
|
|
2773
|
+
body1: {
|
|
2774
|
+
fontFamily: TYPOGRAPHY_BODY1_FONT_FAMILY3,
|
|
2775
|
+
fontSize: TYPOGRAPHY_BODY1_FONT_SIZE3,
|
|
2776
|
+
lineHeight: TYPOGRAPHY_BODY1_LINE_HEIGHT3,
|
|
2777
|
+
fontWeight: TYPOGRAPHY_BODY1_FONT_WEIGHT3,
|
|
2778
|
+
letterSpacing: TYPOGRAPHY_BODY1_LETTER_SPACING3,
|
|
2779
|
+
textDecoration: TYPOGRAPHY_BODY1_TEXT_DECORATION3,
|
|
2780
|
+
textTransform: TYPOGRAPHY_BODY1_TEXT_TRANSFORM3
|
|
2781
|
+
},
|
|
2782
|
+
body2: {
|
|
2783
|
+
fontFamily: TYPOGRAPHY_BODY2_FONT_FAMILY3,
|
|
2784
|
+
fontSize: TYPOGRAPHY_BODY2_FONT_SIZE3,
|
|
2785
|
+
lineHeight: TYPOGRAPHY_BODY2_LINE_HEIGHT3,
|
|
2786
|
+
fontWeight: TYPOGRAPHY_BODY2_FONT_WEIGHT3,
|
|
2787
|
+
letterSpacing: TYPOGRAPHY_BODY2_LETTER_SPACING3,
|
|
2788
|
+
textDecoration: TYPOGRAPHY_BODY2_TEXT_DECORATION3,
|
|
2789
|
+
textTransform: TYPOGRAPHY_BODY2_TEXT_TRANSFORM3
|
|
2790
|
+
},
|
|
2791
|
+
caption: {
|
|
2792
|
+
fontFamily: TYPOGRAPHY_CAPTION_FONT_FAMILY2,
|
|
2793
|
+
fontSize: TYPOGRAPHY_CAPTION_FONT_SIZE2,
|
|
2794
|
+
lineHeight: TYPOGRAPHY_CAPTION_LINE_HEIGHT2,
|
|
2795
|
+
fontWeight: TYPOGRAPHY_CAPTION_FONT_WEIGHT2,
|
|
2796
|
+
letterSpacing: TYPOGRAPHY_CAPTION_LETTER_SPACING2,
|
|
2797
|
+
textDecoration: TYPOGRAPHY_CAPTION_TEXT_DECORATION2,
|
|
2798
|
+
textTransform: TYPOGRAPHY_CAPTION_TEXT_TRANSFORM2
|
|
2799
|
+
},
|
|
2800
|
+
overline: {
|
|
2801
|
+
fontFamily: TYPOGRAPHY_OVERLINE_FONT_FAMILY2,
|
|
2802
|
+
fontSize: TYPOGRAPHY_OVERLINE_FONT_SIZE2,
|
|
2803
|
+
lineHeight: TYPOGRAPHY_OVERLINE_LINE_HEIGHT2,
|
|
2804
|
+
fontWeight: TYPOGRAPHY_OVERLINE_FONT_WEIGHT2,
|
|
2805
|
+
letterSpacing: TYPOGRAPHY_OVERLINE_LETTER_SPACING2,
|
|
2806
|
+
textDecoration: TYPOGRAPHY_OVERLINE_TEXT_DECORATION2,
|
|
2807
|
+
textTransform: TYPOGRAPHY_OVERLINE_TEXT_TRANSFORM2
|
|
2808
|
+
},
|
|
2809
|
+
button: {
|
|
2810
|
+
fontFamily: TYPOGRAPHY_BUTTON_FONT_FAMILY3,
|
|
2811
|
+
fontSize: TYPOGRAPHY_BUTTON_FONT_SIZE3,
|
|
2812
|
+
lineHeight: TYPOGRAPHY_BUTTON_LINE_HEIGHT3,
|
|
2813
|
+
fontWeight: TYPOGRAPHY_BUTTON_FONT_WEIGHT3,
|
|
2814
|
+
letterSpacing: TYPOGRAPHY_BUTTON_LETTER_SPACING3,
|
|
2815
|
+
textDecoration: TYPOGRAPHY_BUTTON_TEXT_DECORATION3,
|
|
2816
|
+
textTransform: TYPOGRAPHY_BUTTON_TEXT_TRANSFORM3
|
|
2700
2817
|
}
|
|
2701
|
-
|
|
2702
|
-
|
|
2818
|
+
},
|
|
2819
|
+
layout: {
|
|
2820
|
+
radius: LAYOUT_RADIUS3,
|
|
2821
|
+
space: LAYOUT_SPACE3,
|
|
2822
|
+
thickness: LAYOUT_THICKNESS3
|
|
2823
|
+
},
|
|
2824
|
+
elevation: {
|
|
2825
|
+
light: {
|
|
2826
|
+
light: ELEVATION_LIGHT_LIGHT3,
|
|
2827
|
+
semilight: ELEVATION_LIGHT_SEMILIGHT3,
|
|
2828
|
+
regular: ELEVATION_LIGHT_REGULAR3,
|
|
2829
|
+
semibold: ELEVATION_LIGHT_SEMIBOLD3,
|
|
2830
|
+
bold: ELEVATION_LIGHT_BOLD3,
|
|
2831
|
+
extrabold: ELEVATION_LIGHT_EXTRABOLD3
|
|
2832
|
+
},
|
|
2833
|
+
dark: {
|
|
2834
|
+
light: ELEVATION_DARK_LIGHT3,
|
|
2835
|
+
semilight: ELEVATION_DARK_SEMILIGHT3,
|
|
2836
|
+
regular: ELEVATION_DARK_REGULAR3,
|
|
2837
|
+
semibold: ELEVATION_DARK_SEMIBOLD3,
|
|
2838
|
+
bold: ELEVATION_DARK_BOLD3,
|
|
2839
|
+
extrabold: ELEVATION_DARK_EXTRABOLD3
|
|
2703
2840
|
}
|
|
2704
|
-
const num = parseFloat(value);
|
|
2705
|
-
return isNaN(num) ? void 0 : `${num}${defaultUnit}`;
|
|
2706
|
-
}
|
|
2707
|
-
if (typeof value === "number") {
|
|
2708
|
-
return `${String(value)}${defaultUnit}`;
|
|
2709
|
-
}
|
|
2710
|
-
return void 0;
|
|
2711
|
-
}
|
|
2712
|
-
__name(tryParse, "tryParse");
|
|
2713
|
-
CssLength2.tryParse = tryParse;
|
|
2714
|
-
})(exports.CssLength || (exports.CssLength = {}));
|
|
2715
|
-
exports.CssLength = void 0;
|
|
2716
|
-
|
|
2717
|
-
// src/Theming/Utils/CssShadow.ts
|
|
2718
|
-
(function(CssShadow2) {
|
|
2719
|
-
function isCssShadow(value) {
|
|
2720
|
-
if (typeof value !== "string") {
|
|
2721
|
-
return false;
|
|
2722
|
-
}
|
|
2723
|
-
if (value.trim() === "") {
|
|
2724
|
-
return false;
|
|
2725
|
-
}
|
|
2726
|
-
if (value === "none") {
|
|
2727
|
-
return true;
|
|
2728
|
-
}
|
|
2729
|
-
const shadows = value.split(/\s*,\s*/);
|
|
2730
|
-
return shadows.every(isCssShadowSingle);
|
|
2731
|
-
}
|
|
2732
|
-
__name(isCssShadow, "isCssShadow");
|
|
2733
|
-
CssShadow2.isCssShadow = isCssShadow;
|
|
2734
|
-
function isCssShadowSingle(value) {
|
|
2735
|
-
const shadowRegex = new RegExp("^(inset\\s+)?(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)\\s+(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)\\s+(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)?\\s*(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)?\\s*(rgba?\\(\\d{1,3},\\s*\\d{1,3},\\s*\\d{1,3}(,\\s*(0|1|0?\\.\\d+))?\\)|#[0-9a-fA-F]{3,6})$", "i");
|
|
2736
|
-
return shadowRegex.test(value);
|
|
2737
|
-
}
|
|
2738
|
-
__name(isCssShadowSingle, "isCssShadowSingle");
|
|
2739
|
-
})(exports.CssShadow || (exports.CssShadow = {}));
|
|
2740
|
-
exports.CssShadow = void 0;
|
|
2741
|
-
|
|
2742
|
-
// src/Theming/Utils/CssTime.ts
|
|
2743
|
-
(function(CssTime2) {
|
|
2744
|
-
function isCssTime(value) {
|
|
2745
|
-
if (typeof value === "number" || value === 0) {
|
|
2746
|
-
return true;
|
|
2747
|
-
}
|
|
2748
|
-
if (typeof value !== "string") {
|
|
2749
|
-
return false;
|
|
2750
|
-
}
|
|
2751
|
-
if (value.trim() === "") {
|
|
2752
|
-
return false;
|
|
2753
2841
|
}
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
(function(ThemePalette2) {
|
|
2764
|
-
const THEME_SHADE_NAMES = [
|
|
2765
|
-
"0",
|
|
2766
|
-
"50",
|
|
2767
|
-
"100",
|
|
2768
|
-
"200",
|
|
2769
|
-
"300",
|
|
2770
|
-
"400",
|
|
2771
|
-
"500",
|
|
2772
|
-
"600",
|
|
2773
|
-
"700",
|
|
2774
|
-
"800",
|
|
2775
|
-
"900"
|
|
2842
|
+
});
|
|
2843
|
+
MemphisTheme2.MEMPHIS_THEME_PALETTES = [
|
|
2844
|
+
VARIANT_PRIMARY3,
|
|
2845
|
+
VARIANT_SECONDARY3,
|
|
2846
|
+
VARIANT_DANGER2,
|
|
2847
|
+
VARIANT_INFO2,
|
|
2848
|
+
VARIANT_NEUTRAL2,
|
|
2849
|
+
VARIANT_SUCCESS2,
|
|
2850
|
+
VARIANT_WARNING2
|
|
2776
2851
|
];
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
return theme.scheme[mode];
|
|
2796
|
-
}
|
|
2797
|
-
__name(getScheme, "getScheme");
|
|
2798
|
-
ITheme2.getScheme = getScheme;
|
|
2799
|
-
function getPalette(theme, mode, semanticColor) {
|
|
2800
|
-
const paletteEntry = theme.palette[mode][semanticColor];
|
|
2801
|
-
if (!exports.ThemePalette.isThemePalette(paletteEntry)) {
|
|
2802
|
-
throw new Error(`Palette '${semanticColor}' is not a valid theme palette for mode '${mode}'.`);
|
|
2803
|
-
}
|
|
2804
|
-
return paletteEntry;
|
|
2805
|
-
}
|
|
2806
|
-
__name(getPalette, "getPalette");
|
|
2807
|
-
ITheme2.getPalette = getPalette;
|
|
2808
|
-
function getSchemeColor(theme, mode, role) {
|
|
2809
|
-
const scheme = theme.scheme[mode];
|
|
2810
|
-
const color = scheme[role];
|
|
2811
|
-
if (typeof color !== "string") {
|
|
2812
|
-
throw new Error(`Scheme color '${role}' is not defined for mode '${mode}'.`);
|
|
2813
|
-
}
|
|
2814
|
-
return color;
|
|
2815
|
-
}
|
|
2816
|
-
__name(getSchemeColor, "getSchemeColor");
|
|
2817
|
-
ITheme2.getSchemeColor = getSchemeColor;
|
|
2818
|
-
function getPaletteColor(theme, mode, semanticColor, shade) {
|
|
2819
|
-
const palette = getPalette(theme, mode, semanticColor);
|
|
2820
|
-
const color = palette[shade];
|
|
2821
|
-
if (typeof color !== "string") {
|
|
2822
|
-
throw new Error(`Shade '${shade}' is not defined in palette '${semanticColor}' for mode '${mode}'.`);
|
|
2823
|
-
}
|
|
2824
|
-
return color;
|
|
2825
|
-
}
|
|
2826
|
-
__name(getPaletteColor, "getPaletteColor");
|
|
2827
|
-
ITheme2.getPaletteColor = getPaletteColor;
|
|
2828
|
-
function getElevationShadow(theme, mode, key) {
|
|
2829
|
-
return theme.elevation[mode][key];
|
|
2830
|
-
}
|
|
2831
|
-
__name(getElevationShadow, "getElevationShadow");
|
|
2832
|
-
ITheme2.getElevationShadow = getElevationShadow;
|
|
2833
|
-
})(exports.ITheme || (exports.ITheme = {}));
|
|
2834
|
-
exports.ITheme = void 0;
|
|
2835
|
-
|
|
2836
|
-
// src/Theming/Utils/ThemeScheme.ts
|
|
2837
|
-
(function(ThemeScheme2) {
|
|
2838
|
-
const ROLES = [
|
|
2852
|
+
MemphisTheme2.MEMPHIS_THEME_PALETTE_VARIANTS = [
|
|
2853
|
+
"0",
|
|
2854
|
+
"50",
|
|
2855
|
+
"100",
|
|
2856
|
+
"200",
|
|
2857
|
+
"300",
|
|
2858
|
+
"400",
|
|
2859
|
+
"500",
|
|
2860
|
+
"600",
|
|
2861
|
+
"700",
|
|
2862
|
+
"800",
|
|
2863
|
+
"900"
|
|
2864
|
+
];
|
|
2865
|
+
MemphisTheme2.MEMPHIS_THEME_SCHEMES = [
|
|
2866
|
+
"light",
|
|
2867
|
+
"dark"
|
|
2868
|
+
];
|
|
2869
|
+
MemphisTheme2.MEMPHIS_THEME_SCHEME_VARIANTS = [
|
|
2839
2870
|
"surface",
|
|
2840
2871
|
"background",
|
|
2841
2872
|
"foreground",
|
|
@@ -2848,254 +2879,218 @@ exports.ITheme = void 0;
|
|
|
2848
2879
|
"contrast",
|
|
2849
2880
|
"selection"
|
|
2850
2881
|
];
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
const newValue = document.documentElement.getAttribute(mutation.attributeName);
|
|
2892
|
-
callback(mutation.attributeName, newValue);
|
|
2893
|
-
}
|
|
2894
|
-
});
|
|
2895
|
-
});
|
|
2896
|
-
observer.observe(document.documentElement, {
|
|
2897
|
-
attributes: true,
|
|
2898
|
-
attributeFilter: attributes
|
|
2899
|
-
});
|
|
2900
|
-
return () => observer.disconnect();
|
|
2901
|
-
}
|
|
2902
|
-
};
|
|
2903
|
-
|
|
2904
|
-
// src/Theming/Adapters/NodePlatformAdapter.ts
|
|
2905
|
-
var NodePlatformAdapter = class {
|
|
2906
|
-
static {
|
|
2907
|
-
__name(this, "NodePlatformAdapter");
|
|
2908
|
-
}
|
|
2909
|
-
// #region Methods
|
|
2910
|
-
matchMedia(_query) {
|
|
2911
|
-
return false;
|
|
2912
|
-
}
|
|
2913
|
-
setDocumentAttribute(_name, _value) {
|
|
2914
|
-
}
|
|
2915
|
-
getDocumentAttribute(_name) {
|
|
2916
|
-
return null;
|
|
2917
|
-
}
|
|
2918
|
-
observeDocumentAttributes(_attributes, _callback) {
|
|
2919
|
-
return () => {
|
|
2920
|
-
};
|
|
2921
|
-
}
|
|
2922
|
-
};
|
|
2923
|
-
|
|
2924
|
-
// src/Theming/Adapters/PlatformAdapterFactory.ts
|
|
2925
|
-
var PlatformAdapterFactory = class {
|
|
2882
|
+
MemphisTheme2.MEMPHIS_THEME_ELEVATION = [
|
|
2883
|
+
"light",
|
|
2884
|
+
"dark"
|
|
2885
|
+
];
|
|
2886
|
+
MemphisTheme2.MEMPHIS_THEME_ELEVATION_VARIANTS = [
|
|
2887
|
+
ELEVATION_KEY_LIGHT3,
|
|
2888
|
+
ELEVATION_KEY_SEMILIGHT3,
|
|
2889
|
+
ELEVATION_KEY_REGULAR3,
|
|
2890
|
+
ELEVATION_KEY_SEMIBOLD3,
|
|
2891
|
+
ELEVATION_KEY_BOLD3,
|
|
2892
|
+
ELEVATION_KEY_EXTRABOLD3
|
|
2893
|
+
];
|
|
2894
|
+
MemphisTheme2.MEMPHIS_THEME_TYPOGRAPHY = [
|
|
2895
|
+
TYPOGRAPHY_KEY_HEADLINE13,
|
|
2896
|
+
TYPOGRAPHY_KEY_HEADLINE23,
|
|
2897
|
+
TYPOGRAPHY_KEY_HEADLINE33,
|
|
2898
|
+
TYPOGRAPHY_KEY_HEADLINE43,
|
|
2899
|
+
TYPOGRAPHY_KEY_HEADLINE53,
|
|
2900
|
+
TYPOGRAPHY_KEY_HEADLINE63,
|
|
2901
|
+
TYPOGRAPHY_KEY_SUBTITLE12,
|
|
2902
|
+
TYPOGRAPHY_KEY_SUBTITLE22,
|
|
2903
|
+
TYPOGRAPHY_KEY_BODY13,
|
|
2904
|
+
TYPOGRAPHY_KEY_BODY23,
|
|
2905
|
+
TYPOGRAPHY_KEY_CAPTION2,
|
|
2906
|
+
TYPOGRAPHY_KEY_OVERLINE2,
|
|
2907
|
+
TYPOGRAPHY_KEY_BUTTON3
|
|
2908
|
+
];
|
|
2909
|
+
MemphisTheme2.MEMPHIS_THEME_METADATA = {
|
|
2910
|
+
theme: MemphisTheme2.MEMPHIS_THEME,
|
|
2911
|
+
palettes: MemphisTheme2.MEMPHIS_THEME_PALETTES,
|
|
2912
|
+
paletteVariants: MemphisTheme2.MEMPHIS_THEME_PALETTE_VARIANTS,
|
|
2913
|
+
schemes: MemphisTheme2.MEMPHIS_THEME_SCHEMES,
|
|
2914
|
+
schemeVariants: MemphisTheme2.MEMPHIS_THEME_SCHEME_VARIANTS,
|
|
2915
|
+
elevation: MemphisTheme2.MEMPHIS_THEME_ELEVATION,
|
|
2916
|
+
elevationVariants: MemphisTheme2.MEMPHIS_THEME_ELEVATION_VARIANTS,
|
|
2917
|
+
typographies: MemphisTheme2.MEMPHIS_THEME_TYPOGRAPHY
|
|
2918
|
+
};
|
|
2919
|
+
})(exports.MemphisTheme || (exports.MemphisTheme = {}));
|
|
2920
|
+
exports.MemphisTheme = void 0;
|
|
2921
|
+
var HslThemeGeneratorStrategy = class _HslThemeGeneratorStrategy {
|
|
2926
2922
|
static {
|
|
2927
|
-
__name(this, "
|
|
2923
|
+
__name(this, "HslThemeGeneratorStrategy");
|
|
2928
2924
|
}
|
|
2925
|
+
// #region Fields
|
|
2926
|
+
static _LIGHTNESS_THRESHOLD = 0.5;
|
|
2927
|
+
// #endregion
|
|
2929
2928
|
// #region Methods
|
|
2930
2929
|
/**
|
|
2931
|
-
*
|
|
2932
|
-
* Automatically detects if running in browser or Node.js.
|
|
2930
|
+
* Determines whether a color naturally belongs to the given mode's HSL lightness range.
|
|
2933
2931
|
*
|
|
2934
|
-
* @
|
|
2935
|
-
|
|
2936
|
-
static create() {
|
|
2937
|
-
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
2938
|
-
return new BrowserPlatformAdapter();
|
|
2939
|
-
}
|
|
2940
|
-
return new NodePlatformAdapter();
|
|
2941
|
-
}
|
|
2942
|
-
};
|
|
2943
|
-
|
|
2944
|
-
// src/Theming/ThemeObserver.ts
|
|
2945
|
-
function isThemeMode(value) {
|
|
2946
|
-
return value === "system" || value === "dark" || value === "light";
|
|
2947
|
-
}
|
|
2948
|
-
__name(isThemeMode, "isThemeMode");
|
|
2949
|
-
var ThemeObserver = class {
|
|
2950
|
-
static {
|
|
2951
|
-
__name(this, "ThemeObserver");
|
|
2952
|
-
}
|
|
2953
|
-
// #region Fields
|
|
2954
|
-
_themeChanged;
|
|
2955
|
-
_themeModeChanged;
|
|
2956
|
-
_platformAdapter;
|
|
2957
|
-
_currentTheme;
|
|
2958
|
-
_currentThemeMode;
|
|
2959
|
-
_unsubscribe;
|
|
2960
|
-
// #region Ctor
|
|
2961
|
-
/**
|
|
2962
|
-
* Constructs a new instance of the `ThemeObserver` class.
|
|
2932
|
+
* @remarks
|
|
2933
|
+
* A color with HSL lightness > 0.5 is considered "light"; ≤ 0.5 is considered "dark".
|
|
2963
2934
|
*
|
|
2964
|
-
* @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
|
|
2965
2935
|
* @public
|
|
2936
|
+
* @param color - The color to check
|
|
2937
|
+
* @param mode - The target color mode ('dark' | 'light')
|
|
2938
|
+
* @returns `true` if the color is naturally compatible with the given mode
|
|
2966
2939
|
*/
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
|
|
2971
|
-
this._currentTheme = null;
|
|
2972
|
-
this._currentThemeMode = null;
|
|
2973
|
-
this.observe({
|
|
2974
|
-
themeChange: /* @__PURE__ */ __name((theme) => this._themeChanged.emit(theme), "themeChange"),
|
|
2975
|
-
themeModeChange: /* @__PURE__ */ __name((themeMode) => this._themeModeChanged.emit(themeMode), "themeModeChange")
|
|
2976
|
-
});
|
|
2940
|
+
isColorInModeSpectrum(color, mode) {
|
|
2941
|
+
const [, , l] = chroma7__default.default(color).hsl();
|
|
2942
|
+
return mode === "light" ? l > _HslThemeGeneratorStrategy._LIGHTNESS_THRESHOLD : l <= _HslThemeGeneratorStrategy._LIGHTNESS_THRESHOLD;
|
|
2977
2943
|
}
|
|
2978
|
-
// #endregion
|
|
2979
|
-
// #region Properties
|
|
2980
2944
|
/**
|
|
2981
|
-
*
|
|
2945
|
+
* Adapts a color to the opposite mode by symmetrically inverting its HSL lightness
|
|
2946
|
+
* (`L → 1 - L`) while preserving hue and saturation.
|
|
2982
2947
|
*
|
|
2983
|
-
* @
|
|
2984
|
-
*
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
/**
|
|
2990
|
-
* Fires when the theme mode changes.
|
|
2948
|
+
* @remarks
|
|
2949
|
+
* The inversion is symmetric: a light color becomes dark and vice-versa, regardless
|
|
2950
|
+
* of the direction. Therefore no target mode parameter is required.
|
|
2951
|
+
*
|
|
2952
|
+
* The inverted lightness is clamped to [0.05, 0.95] to avoid pure black / pure white.
|
|
2953
|
+
* Subclasses may override this method for theme-specific post-processing.
|
|
2991
2954
|
*
|
|
2992
2955
|
* @public
|
|
2993
|
-
* @
|
|
2956
|
+
* @param color - The color to adapt
|
|
2957
|
+
* @returns The adapted color with inverted lightness
|
|
2994
2958
|
*/
|
|
2995
|
-
|
|
2996
|
-
|
|
2959
|
+
adaptColorToMode(color) {
|
|
2960
|
+
const c = chroma7__default.default(color);
|
|
2961
|
+
const [h, s, l] = c.hsl();
|
|
2962
|
+
const invertedL = Math.min(Math.max(1 - l, 0.05), 0.95);
|
|
2963
|
+
return chroma7__default.default.hsl(isNaN(h) ? 0 : h, s, invertedL).hex();
|
|
2997
2964
|
}
|
|
2998
|
-
// #endregion
|
|
2999
|
-
// #region Methods
|
|
3000
2965
|
/**
|
|
3001
|
-
*
|
|
2966
|
+
* Generates a palette of shades based on a base/accent color using HSL interpolation.
|
|
3002
2967
|
*
|
|
3003
2968
|
* @public
|
|
3004
|
-
* @param
|
|
3005
|
-
* @param
|
|
2969
|
+
* @param baseColor - The base/accent color (e.g. "#3498db")
|
|
2970
|
+
* @param mode - 'light' or 'dark' mode: determines how light or dark the palette extremes are.
|
|
2971
|
+
* @returns The generated theme palette with shade steps 0–900
|
|
3006
2972
|
*/
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
this._currentThemeMode = this._platformAdapter.getDocumentAttribute("theme-mode");
|
|
3030
|
-
this._unsubscribe = this._platformAdapter.observeDocumentAttributes([
|
|
3031
|
-
"theme",
|
|
3032
|
-
"theme-mode"
|
|
3033
|
-
], (attributeName, newValue) => {
|
|
3034
|
-
if (attributeName === "theme" && newValue) {
|
|
3035
|
-
const theme = newValue;
|
|
3036
|
-
if (this._currentTheme !== theme) {
|
|
3037
|
-
this._currentTheme = theme;
|
|
3038
|
-
cb.themeChange(theme);
|
|
3039
|
-
}
|
|
3040
|
-
}
|
|
3041
|
-
if (attributeName === "theme-mode") {
|
|
3042
|
-
const themeMode = newValue;
|
|
3043
|
-
if (!isThemeMode(themeMode)) {
|
|
3044
|
-
throw new Error(`Invalid theme mode: ${String(themeMode)}`);
|
|
3045
|
-
}
|
|
3046
|
-
if (this._currentThemeMode !== themeMode) {
|
|
3047
|
-
this._currentThemeMode = themeMode;
|
|
3048
|
-
cb.themeModeChange(themeMode);
|
|
3049
|
-
}
|
|
3050
|
-
}
|
|
2973
|
+
generatePalette(baseColor, mode) {
|
|
2974
|
+
const steps = [
|
|
2975
|
+
0,
|
|
2976
|
+
50,
|
|
2977
|
+
100,
|
|
2978
|
+
200,
|
|
2979
|
+
300,
|
|
2980
|
+
400,
|
|
2981
|
+
500,
|
|
2982
|
+
600,
|
|
2983
|
+
700,
|
|
2984
|
+
800,
|
|
2985
|
+
900
|
|
2986
|
+
];
|
|
2987
|
+
const base = chroma7__default.default(baseColor);
|
|
2988
|
+
const [h, s] = base.hsl();
|
|
2989
|
+
const palette = {};
|
|
2990
|
+
steps.forEach((step, idx) => {
|
|
2991
|
+
const t = idx / (steps.length - 1);
|
|
2992
|
+
const lightness = mode === "light" ? 0.95 - t * 0.6 : 0.15 + t * 0.6;
|
|
2993
|
+
const col = chroma7__default.default.hsl(h, s, lightness);
|
|
2994
|
+
palette[step.toString()] = col.hex();
|
|
3051
2995
|
});
|
|
2996
|
+
return {
|
|
2997
|
+
"0": palette["0"],
|
|
2998
|
+
"50": palette["50"],
|
|
2999
|
+
"100": palette["100"],
|
|
3000
|
+
"200": palette["200"],
|
|
3001
|
+
"300": palette["300"],
|
|
3002
|
+
"400": palette["400"],
|
|
3003
|
+
"500": palette["500"],
|
|
3004
|
+
"600": palette["600"],
|
|
3005
|
+
"700": palette["700"],
|
|
3006
|
+
"800": palette["800"],
|
|
3007
|
+
"900": palette["900"]
|
|
3008
|
+
};
|
|
3009
|
+
}
|
|
3010
|
+
/**
|
|
3011
|
+
* Generates a semantic color scheme for UI usage, based on the generated palette.
|
|
3012
|
+
*
|
|
3013
|
+
* @public
|
|
3014
|
+
* @param baseColor - The base/accent color
|
|
3015
|
+
* @param mode - 'light' or 'dark'
|
|
3016
|
+
* @returns The generated theme scheme with semantic color roles
|
|
3017
|
+
*/
|
|
3018
|
+
generateScheme(baseColor, mode) {
|
|
3019
|
+
const p = this.generatePalette(baseColor, mode);
|
|
3020
|
+
return {
|
|
3021
|
+
background: p["50"],
|
|
3022
|
+
foreground: p["900"],
|
|
3023
|
+
disabled: p["300"],
|
|
3024
|
+
contrast: p["900"],
|
|
3025
|
+
highlight: p["700"],
|
|
3026
|
+
lowlight: p["300"],
|
|
3027
|
+
middlelight: p["500"],
|
|
3028
|
+
selection: p["500"],
|
|
3029
|
+
semiTransparent: chroma7__default.default(p["500"]).alpha(0.5).hex(),
|
|
3030
|
+
surface: p["50"],
|
|
3031
|
+
transparent: chroma7__default.default(p["500"]).alpha(0).hex()
|
|
3032
|
+
};
|
|
3052
3033
|
}
|
|
3053
3034
|
};
|
|
3054
|
-
var
|
|
3035
|
+
var LchThemeGeneratorStrategy = class _LchThemeGeneratorStrategy {
|
|
3055
3036
|
static {
|
|
3056
|
-
__name(this, "
|
|
3037
|
+
__name(this, "LchThemeGeneratorStrategy");
|
|
3057
3038
|
}
|
|
3058
3039
|
// #region Fields
|
|
3059
|
-
static
|
|
3060
|
-
// #endregion
|
|
3061
|
-
// #region Properties
|
|
3062
|
-
static get current() {
|
|
3063
|
-
if (!_ThemeObserverServiceLocator.isSet()) {
|
|
3064
|
-
throw new Error("'ThemeObserver' not set.");
|
|
3065
|
-
}
|
|
3066
|
-
return _ThemeObserverServiceLocator._current;
|
|
3067
|
-
}
|
|
3040
|
+
static _LUMINANCE_THRESHOLD = 0.5;
|
|
3068
3041
|
// #endregion
|
|
3069
3042
|
// #region Methods
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3043
|
+
/**
|
|
3044
|
+
* Determines whether a color naturally belongs to the given mode's luminance range.
|
|
3045
|
+
*
|
|
3046
|
+
* @remarks
|
|
3047
|
+
* Uses WCAG relative luminance (0 = black, 1 = white).
|
|
3048
|
+
* A color with luminance > 0.5 is considered "light"; ≤ 0.5 is considered "dark".
|
|
3049
|
+
*
|
|
3050
|
+
* @public
|
|
3051
|
+
* @param color - The color to check
|
|
3052
|
+
* @param mode - The target color mode ('dark' | 'light')
|
|
3053
|
+
* @returns `true` if the color is naturally compatible with the given mode
|
|
3054
|
+
*/
|
|
3055
|
+
isColorInModeSpectrum(color, mode) {
|
|
3056
|
+
const luminance = chroma7__default.default(color).luminance();
|
|
3057
|
+
return mode === "light" ? luminance > _LchThemeGeneratorStrategy._LUMINANCE_THRESHOLD : luminance <= _LchThemeGeneratorStrategy._LUMINANCE_THRESHOLD;
|
|
3081
3058
|
}
|
|
3082
|
-
|
|
3083
|
-
|
|
3059
|
+
/**
|
|
3060
|
+
* Adapts a color to the opposite mode by symmetrically inverting its perceptual
|
|
3061
|
+
* lightness in the LCH color space (`L* → 100 - L*`) while preserving hue and chroma.
|
|
3062
|
+
*
|
|
3063
|
+
* @remarks
|
|
3064
|
+
* The inversion is symmetric: a light color becomes dark and vice-versa, regardless
|
|
3065
|
+
* of the direction. Therefore no target mode parameter is required.
|
|
3066
|
+
*
|
|
3067
|
+
* The inverted lightness is clamped to [5, 95] to avoid pure black / pure white,
|
|
3068
|
+
* which cannot carry chromatic information.
|
|
3069
|
+
* Subclasses may override this method to apply theme-specific post-processing
|
|
3070
|
+
* (e.g., chroma reduction for muted palettes).
|
|
3071
|
+
*
|
|
3072
|
+
* @public
|
|
3073
|
+
* @param color - The color to adapt
|
|
3074
|
+
* @returns The adapted color with inverted lightness
|
|
3075
|
+
*/
|
|
3076
|
+
adaptColorToMode(color) {
|
|
3077
|
+
const c = chroma7__default.default(color);
|
|
3078
|
+
const [l, chromaVal, h] = c.lch();
|
|
3079
|
+
const invertedL = Math.min(Math.max(100 - l, 5), 95);
|
|
3080
|
+
return chroma7__default.default.lch(invertedL, chromaVal, isNaN(h) ? 0 : h).hex();
|
|
3084
3081
|
}
|
|
3085
|
-
// #endregion
|
|
3086
|
-
// #region Methods
|
|
3087
3082
|
/**
|
|
3088
|
-
* Generates a color palette for the
|
|
3083
|
+
* Generates a color palette from a base color for the given mode.
|
|
3089
3084
|
*
|
|
3090
3085
|
* @public
|
|
3091
|
-
* @param baseColor The base/accent color
|
|
3092
|
-
* @param mode 'light' or 'dark' mode
|
|
3093
|
-
* @returns The generated theme palette
|
|
3086
|
+
* @param baseColor - The base/accent color
|
|
3087
|
+
* @param mode - 'light' or 'dark' mode
|
|
3088
|
+
* @returns The generated theme palette with shade steps 0–900
|
|
3094
3089
|
*/
|
|
3095
3090
|
generatePalette(baseColor, mode) {
|
|
3096
3091
|
if (mode === "light") {
|
|
3097
|
-
const baseLight2 =
|
|
3098
|
-
const baseDark2 =
|
|
3092
|
+
const baseLight2 = chroma7__default.default("#ffffff");
|
|
3093
|
+
const baseDark2 = chroma7__default.default("#000000");
|
|
3099
3094
|
const palette2 = {};
|
|
3100
3095
|
const steps2 = [
|
|
3101
3096
|
0,
|
|
@@ -3125,12 +3120,24 @@ var MaterialThemeGeneratorStrategy = class {
|
|
|
3125
3120
|
];
|
|
3126
3121
|
steps2.forEach((step, i) => {
|
|
3127
3122
|
const base = step <= 500 ? baseLight2 : baseDark2;
|
|
3128
|
-
palette2[`${step}`] =
|
|
3123
|
+
palette2[`${step}`] = chroma7__default.default.mix(base, baseColor, amounts2[i] / 100, "rgb").hex();
|
|
3129
3124
|
});
|
|
3130
|
-
return
|
|
3125
|
+
return {
|
|
3126
|
+
"0": palette2["0"],
|
|
3127
|
+
"50": palette2["50"],
|
|
3128
|
+
"100": palette2["100"],
|
|
3129
|
+
"200": palette2["200"],
|
|
3130
|
+
"300": palette2["300"],
|
|
3131
|
+
"400": palette2["400"],
|
|
3132
|
+
"500": palette2["500"],
|
|
3133
|
+
"600": palette2["600"],
|
|
3134
|
+
"700": palette2["700"],
|
|
3135
|
+
"800": palette2["800"],
|
|
3136
|
+
"900": palette2["900"]
|
|
3137
|
+
};
|
|
3131
3138
|
}
|
|
3132
|
-
const baseLight =
|
|
3133
|
-
const baseDark =
|
|
3139
|
+
const baseLight = chroma7__default.default("#ffffff");
|
|
3140
|
+
const baseDark = chroma7__default.default("#000000");
|
|
3134
3141
|
const palette = {};
|
|
3135
3142
|
const steps = [
|
|
3136
3143
|
0,
|
|
@@ -3160,30 +3167,42 @@ var MaterialThemeGeneratorStrategy = class {
|
|
|
3160
3167
|
];
|
|
3161
3168
|
steps.forEach((step, i) => {
|
|
3162
3169
|
const base = step <= 600 ? baseDark : baseLight;
|
|
3163
|
-
palette[`${step}`] =
|
|
3170
|
+
palette[`${step}`] = chroma7__default.default.mix(base, baseColor, amounts[i] / 100, "rgb").hex();
|
|
3164
3171
|
});
|
|
3165
|
-
return
|
|
3172
|
+
return {
|
|
3173
|
+
"0": palette["0"],
|
|
3174
|
+
"50": palette["50"],
|
|
3175
|
+
"100": palette["100"],
|
|
3176
|
+
"200": palette["200"],
|
|
3177
|
+
"300": palette["300"],
|
|
3178
|
+
"400": palette["400"],
|
|
3179
|
+
"500": palette["500"],
|
|
3180
|
+
"600": palette["600"],
|
|
3181
|
+
"700": palette["700"],
|
|
3182
|
+
"800": palette["800"],
|
|
3183
|
+
"900": palette["900"]
|
|
3184
|
+
};
|
|
3166
3185
|
}
|
|
3167
3186
|
/**
|
|
3168
|
-
* Generates a semantic color scheme
|
|
3187
|
+
* Generates a semantic color scheme based on a base color and mode.
|
|
3169
3188
|
*
|
|
3170
3189
|
* @public
|
|
3171
|
-
* @param baseColor The base/accent color
|
|
3172
|
-
* @param mode 'light' or 'dark' mode
|
|
3173
|
-
* @returns The generated theme scheme
|
|
3190
|
+
* @param baseColor - The base/accent color
|
|
3191
|
+
* @param mode - 'light' or 'dark' mode
|
|
3192
|
+
* @returns The generated theme scheme with semantic color roles
|
|
3174
3193
|
*/
|
|
3175
3194
|
generateScheme(baseColor, mode) {
|
|
3176
|
-
const baseChroma =
|
|
3195
|
+
const baseChroma = chroma7__default.default(baseColor);
|
|
3177
3196
|
const baseLuminance = baseChroma.luminance();
|
|
3178
3197
|
const adjustColor = /* @__PURE__ */ __name((color, amount, minLuminance = 0.02, maxLuminance = 0.98) => {
|
|
3179
|
-
const c =
|
|
3198
|
+
const c = chroma7__default.default(color);
|
|
3180
3199
|
const factor = Math.abs(amount) / 25.5;
|
|
3181
3200
|
let result = amount > 0 ? c.brighten(factor) : c.darken(factor);
|
|
3182
3201
|
const resultLuminance = result.luminance();
|
|
3183
3202
|
if (resultLuminance < minLuminance) {
|
|
3184
|
-
result =
|
|
3203
|
+
result = chroma7__default.default(result).luminance(minLuminance);
|
|
3185
3204
|
} else if (resultLuminance > maxLuminance) {
|
|
3186
|
-
result =
|
|
3205
|
+
result = chroma7__default.default(result).luminance(maxLuminance);
|
|
3187
3206
|
}
|
|
3188
3207
|
return result.hex();
|
|
3189
3208
|
}, "adjustColor");
|
|
@@ -3191,11 +3210,11 @@ var MaterialThemeGeneratorStrategy = class {
|
|
|
3191
3210
|
if (mode === "light") {
|
|
3192
3211
|
const darkened = baseChroma.darken(4).saturate(-0.3);
|
|
3193
3212
|
const targetLuminance2 = Math.min(darkened.luminance(), 0.08);
|
|
3194
|
-
return
|
|
3213
|
+
return chroma7__default.default(darkened).luminance(targetLuminance2).hex();
|
|
3195
3214
|
}
|
|
3196
3215
|
const lightened = baseChroma.brighten(4).saturate(-0.3);
|
|
3197
3216
|
const targetLuminance = Math.max(lightened.luminance(), 0.85);
|
|
3198
|
-
return
|
|
3217
|
+
return chroma7__default.default(lightened).luminance(targetLuminance).hex();
|
|
3199
3218
|
}, "generateForeground");
|
|
3200
3219
|
const generateSurface = /* @__PURE__ */ __name(() => {
|
|
3201
3220
|
if (mode === "light") {
|
|
@@ -3208,7 +3227,7 @@ var MaterialThemeGeneratorStrategy = class {
|
|
|
3208
3227
|
const generateLowlight = /* @__PURE__ */ __name(() => mode === "light" ? adjustColor(baseColor, -50, 0.15, 0.85) : adjustColor(baseColor, 55, 0.15, 0.85), "generateLowlight");
|
|
3209
3228
|
const generateDisabled = /* @__PURE__ */ __name(() => {
|
|
3210
3229
|
const desaturated = baseChroma.desaturate(2);
|
|
3211
|
-
return mode === "light" ?
|
|
3230
|
+
return mode === "light" ? chroma7__default.default(desaturated).darken(0.5).hex() : chroma7__default.default(desaturated).brighten(0.5).hex();
|
|
3212
3231
|
}, "generateDisabled");
|
|
3213
3232
|
const foreground = generateForeground();
|
|
3214
3233
|
return {
|
|
@@ -3219,38 +3238,95 @@ var MaterialThemeGeneratorStrategy = class {
|
|
|
3219
3238
|
middlelight: generateMiddlelight(),
|
|
3220
3239
|
lowlight: generateLowlight(),
|
|
3221
3240
|
transparent: `${baseColor}00`,
|
|
3222
|
-
semiTransparent:
|
|
3241
|
+
semiTransparent: chroma7__default.default(baseColor).alpha(0.67).hex(),
|
|
3223
3242
|
disabled: generateDisabled(),
|
|
3224
3243
|
contrast: foreground,
|
|
3225
3244
|
selection: generateHighlight()
|
|
3226
3245
|
};
|
|
3227
3246
|
}
|
|
3228
3247
|
};
|
|
3229
|
-
|
|
3230
|
-
const strategy = new MaterialThemeGeneratorStrategy();
|
|
3231
|
-
return () => strategy;
|
|
3232
|
-
}
|
|
3233
|
-
__name(createMaterialTheme, "createMaterialTheme");
|
|
3234
|
-
|
|
3235
|
-
// src/Theming/Strategies/surface/JoyThemeGeneratorStrategy.ts
|
|
3236
|
-
var JoyThemeGeneratorStrategy = class {
|
|
3248
|
+
var CosmopolitanThemeGeneratorStrategy = class _CosmopolitanThemeGeneratorStrategy extends LchThemeGeneratorStrategy {
|
|
3237
3249
|
static {
|
|
3238
|
-
__name(this, "
|
|
3250
|
+
__name(this, "CosmopolitanThemeGeneratorStrategy");
|
|
3239
3251
|
}
|
|
3240
3252
|
// #region Fields
|
|
3241
|
-
|
|
3242
|
-
// #endregion
|
|
3243
|
-
// #region Ctor
|
|
3244
|
-
constructor() {
|
|
3245
|
-
this._materialStrategy = new MaterialThemeGeneratorStrategy();
|
|
3246
|
-
}
|
|
3253
|
+
static _CHROMA_REDUCTION_FACTOR = 0.9;
|
|
3247
3254
|
// #endregion
|
|
3248
3255
|
// #region Methods
|
|
3256
|
+
/**
|
|
3257
|
+
* Adapts a color to the target mode by inverting its perceptual lightness (LCH L*)
|
|
3258
|
+
* with a slight chroma reduction for the Cosmopolitan's muted aesthetic.
|
|
3259
|
+
*
|
|
3260
|
+
* @override
|
|
3261
|
+
* @public
|
|
3262
|
+
* @param color - The color to adapt
|
|
3263
|
+
* @returns The adapted color with inverted lightness and reduced chroma
|
|
3264
|
+
*/
|
|
3265
|
+
adaptColorToMode(color) {
|
|
3266
|
+
const c = chroma7__default.default(color);
|
|
3267
|
+
const [l, chromaVal, h] = c.lch();
|
|
3268
|
+
const invertedL = Math.min(Math.max(100 - l, 5), 95);
|
|
3269
|
+
const reducedChroma = chromaVal * _CosmopolitanThemeGeneratorStrategy._CHROMA_REDUCTION_FACTOR;
|
|
3270
|
+
return chroma7__default.default.lch(invertedL, reducedChroma, isNaN(h) ? 0 : h).hex();
|
|
3271
|
+
}
|
|
3272
|
+
/**
|
|
3273
|
+
* Generates a color palette with Cosmopolitan-specific dark-mode mixing.
|
|
3274
|
+
*
|
|
3275
|
+
* @remarks
|
|
3276
|
+
* Light mode uses the standard LCH base class implementation.
|
|
3277
|
+
* Dark mode uses a simplified three-anchor approach (steps 0, 100, 500)
|
|
3278
|
+
* to produce the flat, muted dark palette that defines Cosmopolitan.
|
|
3279
|
+
*
|
|
3280
|
+
* @override
|
|
3281
|
+
* @public
|
|
3282
|
+
* @param baseColor - The base/accent color
|
|
3283
|
+
* @param mode - 'light' or 'dark' mode
|
|
3284
|
+
* @returns The generated theme palette with shade steps 0–900
|
|
3285
|
+
*/
|
|
3249
3286
|
generatePalette(baseColor, mode) {
|
|
3250
|
-
|
|
3287
|
+
if (mode === "light") {
|
|
3288
|
+
return super.generatePalette(baseColor, mode);
|
|
3289
|
+
}
|
|
3290
|
+
const baseDark = chroma7__default.default("#000000");
|
|
3291
|
+
const palette = {};
|
|
3292
|
+
const steps = [
|
|
3293
|
+
0,
|
|
3294
|
+
100,
|
|
3295
|
+
500
|
|
3296
|
+
];
|
|
3297
|
+
const amounts = [
|
|
3298
|
+
0,
|
|
3299
|
+
30,
|
|
3300
|
+
100
|
|
3301
|
+
];
|
|
3302
|
+
steps.forEach((step, i) => {
|
|
3303
|
+
palette[`${step}`] = chroma7__default.default.mix(baseDark, baseColor, amounts[i] / 100, "rgb").hex();
|
|
3304
|
+
});
|
|
3305
|
+
return {
|
|
3306
|
+
"0": palette["0"],
|
|
3307
|
+
"50": palette["0"],
|
|
3308
|
+
"100": palette["100"],
|
|
3309
|
+
"200": palette["100"],
|
|
3310
|
+
"300": palette["100"],
|
|
3311
|
+
"400": palette["100"],
|
|
3312
|
+
"500": palette["500"],
|
|
3313
|
+
"600": palette["500"],
|
|
3314
|
+
"700": palette["500"],
|
|
3315
|
+
"800": palette["500"],
|
|
3316
|
+
"900": palette["500"]
|
|
3317
|
+
};
|
|
3251
3318
|
}
|
|
3252
|
-
|
|
3253
|
-
|
|
3319
|
+
};
|
|
3320
|
+
function createCosmopolitanTheme() {
|
|
3321
|
+
const strategy = new CosmopolitanThemeGeneratorStrategy();
|
|
3322
|
+
return () => strategy;
|
|
3323
|
+
}
|
|
3324
|
+
__name(createCosmopolitanTheme, "createCosmopolitanTheme");
|
|
3325
|
+
|
|
3326
|
+
// src/Theming/Strategies/surface/JoyThemeGeneratorStrategy.ts
|
|
3327
|
+
var JoyThemeGeneratorStrategy = class extends LchThemeGeneratorStrategy {
|
|
3328
|
+
static {
|
|
3329
|
+
__name(this, "JoyThemeGeneratorStrategy");
|
|
3254
3330
|
}
|
|
3255
3331
|
};
|
|
3256
3332
|
function createJoyTheme() {
|
|
@@ -3260,598 +3336,636 @@ function createJoyTheme() {
|
|
|
3260
3336
|
__name(createJoyTheme, "createJoyTheme");
|
|
3261
3337
|
|
|
3262
3338
|
// src/Theming/Strategies/surface/MemphisThemeGeneratorStrategy.ts
|
|
3263
|
-
var MemphisThemeGeneratorStrategy = class {
|
|
3339
|
+
var MemphisThemeGeneratorStrategy = class extends LchThemeGeneratorStrategy {
|
|
3264
3340
|
static {
|
|
3265
3341
|
__name(this, "MemphisThemeGeneratorStrategy");
|
|
3266
3342
|
}
|
|
3343
|
+
};
|
|
3344
|
+
function createMemphisTheme() {
|
|
3345
|
+
const strategy = new MemphisThemeGeneratorStrategy();
|
|
3346
|
+
return () => strategy;
|
|
3347
|
+
}
|
|
3348
|
+
__name(createMemphisTheme, "createMemphisTheme");
|
|
3349
|
+
|
|
3350
|
+
// src/Theming/ThemeGenerator.ts
|
|
3351
|
+
var ThemeGenerator = class {
|
|
3352
|
+
static {
|
|
3353
|
+
__name(this, "ThemeGenerator");
|
|
3354
|
+
}
|
|
3267
3355
|
// #region Fields
|
|
3268
|
-
|
|
3356
|
+
_strategies;
|
|
3357
|
+
_platformAdapter;
|
|
3269
3358
|
// #endregion
|
|
3270
3359
|
// #region Ctor
|
|
3271
|
-
|
|
3272
|
-
|
|
3360
|
+
/**
|
|
3361
|
+
* @public
|
|
3362
|
+
* @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
|
|
3363
|
+
*/
|
|
3364
|
+
constructor(platformAdapter) {
|
|
3365
|
+
this._strategies = /* @__PURE__ */ new Map([
|
|
3366
|
+
[
|
|
3367
|
+
"joy",
|
|
3368
|
+
new JoyThemeGeneratorStrategy()
|
|
3369
|
+
],
|
|
3370
|
+
[
|
|
3371
|
+
"memphis",
|
|
3372
|
+
new MemphisThemeGeneratorStrategy()
|
|
3373
|
+
],
|
|
3374
|
+
[
|
|
3375
|
+
"cosmopolitan",
|
|
3376
|
+
new CosmopolitanThemeGeneratorStrategy()
|
|
3377
|
+
]
|
|
3378
|
+
]);
|
|
3379
|
+
this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
|
|
3273
3380
|
}
|
|
3274
3381
|
// #endregion
|
|
3275
3382
|
// #region Methods
|
|
3276
|
-
|
|
3277
|
-
|
|
3383
|
+
/**
|
|
3384
|
+
* Generates a complete theme palette (shades 0–900) for the given theme.
|
|
3385
|
+
*
|
|
3386
|
+
* @remarks
|
|
3387
|
+
* 1. If `mode` is `'system'`, it is resolved to `'dark'` or `'light'` via the
|
|
3388
|
+
* platform adapter's `prefers-color-scheme` media query.
|
|
3389
|
+
* 2. The base color is forwarded as-is to the theme-specific strategy which
|
|
3390
|
+
* produces 11 shade steps from lightest (0) to darkest (900).
|
|
3391
|
+
*
|
|
3392
|
+
* No automatic color adaptation is performed. Callers who need mode-compatible
|
|
3393
|
+
* colors can use {@link IThemeGeneratorStrategy.isColorInModeSpectrum} and
|
|
3394
|
+
* {@link IThemeGeneratorStrategy.adaptColorToMode} explicitly before calling
|
|
3395
|
+
* this method.
|
|
3396
|
+
*
|
|
3397
|
+
* @public
|
|
3398
|
+
* @param themeName - The name of the theme (`'joy'`, `'memphis'`, `'cosmopolitan'`).
|
|
3399
|
+
* @param baseColor - The base accent color (any valid CSS color value).
|
|
3400
|
+
* @param mode - The target mode (`'dark'`, `'light'`, or `'system'`).
|
|
3401
|
+
* @returns A fully populated palette with shade keys `0`–`900`.
|
|
3402
|
+
* @throws Error if `themeName` is not a registered theme.
|
|
3403
|
+
*/
|
|
3404
|
+
generatePalette(themeName, baseColor, mode) {
|
|
3405
|
+
const resolvedMode = this.resolveMode(mode);
|
|
3406
|
+
const strategy = this.getStrategy(themeName);
|
|
3407
|
+
return strategy.generatePalette(baseColor, resolvedMode);
|
|
3278
3408
|
}
|
|
3279
|
-
|
|
3280
|
-
|
|
3409
|
+
/**
|
|
3410
|
+
* Generates a semantic color scheme (surface, foreground, highlight, …) for the given theme.
|
|
3411
|
+
*
|
|
3412
|
+
* @remarks
|
|
3413
|
+
* 1. If `mode` is `'system'`, it is resolved to `'dark'` or `'light'` via the
|
|
3414
|
+
* platform adapter's `prefers-color-scheme` media query.
|
|
3415
|
+
* 2. The base color is forwarded as-is to the theme-specific strategy which
|
|
3416
|
+
* maps it to semantic roles such as `surface`, `foreground`, `highlight`,
|
|
3417
|
+
* `contrast`, `disabled`, etc.
|
|
3418
|
+
*
|
|
3419
|
+
* No automatic color adaptation is performed. Callers who need mode-compatible
|
|
3420
|
+
* colors can use {@link IThemeGeneratorStrategy.isColorInModeSpectrum} and
|
|
3421
|
+
* {@link IThemeGeneratorStrategy.adaptColorToMode} explicitly before calling
|
|
3422
|
+
* this method.
|
|
3423
|
+
*
|
|
3424
|
+
* @public
|
|
3425
|
+
* @param themeName - The name of the theme (`'joy'`, `'memphis'`, `'cosmopolitan'`).
|
|
3426
|
+
* @param baseColor - The base background color (any valid CSS color value).
|
|
3427
|
+
* @param mode - The target mode (`'dark'`, `'light'`, or `'system'`).
|
|
3428
|
+
* @returns A fully populated scheme with all semantic color roles.
|
|
3429
|
+
* @throws Error if `themeName` is not a registered theme.
|
|
3430
|
+
*/
|
|
3431
|
+
generateScheme(themeName, baseColor, mode) {
|
|
3432
|
+
const resolvedMode = this.resolveMode(mode);
|
|
3433
|
+
const strategy = this.getStrategy(themeName);
|
|
3434
|
+
return strategy.generateScheme(baseColor, resolvedMode);
|
|
3435
|
+
}
|
|
3436
|
+
/**
|
|
3437
|
+
* Resolves the theme mode, converting 'system' to 'dark' or 'light' based on platform settings.
|
|
3438
|
+
*
|
|
3439
|
+
* @private
|
|
3440
|
+
* @param mode The theme mode to resolve.
|
|
3441
|
+
* @returns The resolved theme mode.
|
|
3442
|
+
*/
|
|
3443
|
+
resolveMode(mode) {
|
|
3444
|
+
if (mode === "system") {
|
|
3445
|
+
const isDark = this._platformAdapter.matchMedia("(prefers-color-scheme: dark)");
|
|
3446
|
+
return isDark ? "dark" : "light";
|
|
3447
|
+
}
|
|
3448
|
+
return mode;
|
|
3449
|
+
}
|
|
3450
|
+
/**
|
|
3451
|
+
* Gets the theme generator strategy for the specified theme name.
|
|
3452
|
+
*
|
|
3453
|
+
* @private
|
|
3454
|
+
* @param themeName The name of the theme ('joy', 'memphis', 'cosmopolitan').
|
|
3455
|
+
* @returns The theme generator strategy.
|
|
3456
|
+
*/
|
|
3457
|
+
getStrategy(themeName) {
|
|
3458
|
+
const strategy = this._strategies.get(themeName);
|
|
3459
|
+
if (!strategy) {
|
|
3460
|
+
throw new Error(`Theme '${themeName}' is not supported.`);
|
|
3461
|
+
}
|
|
3462
|
+
return strategy;
|
|
3281
3463
|
}
|
|
3282
3464
|
};
|
|
3283
|
-
|
|
3284
|
-
const strategy = new MemphisThemeGeneratorStrategy();
|
|
3285
|
-
return () => strategy;
|
|
3286
|
-
}
|
|
3287
|
-
__name(createMemphisTheme, "createMemphisTheme");
|
|
3288
|
-
var CosmopolitanThemeGeneratorStrategy = class {
|
|
3465
|
+
var ThemeGeneratorServiceLocator = class _ThemeGeneratorServiceLocator {
|
|
3289
3466
|
static {
|
|
3290
|
-
__name(this, "
|
|
3467
|
+
__name(this, "ThemeGeneratorServiceLocator");
|
|
3291
3468
|
}
|
|
3292
3469
|
// #region Fields
|
|
3293
|
-
|
|
3470
|
+
static _current = null;
|
|
3294
3471
|
// #endregion
|
|
3295
|
-
// #region
|
|
3296
|
-
|
|
3297
|
-
|
|
3472
|
+
// #region Properties
|
|
3473
|
+
static get current() {
|
|
3474
|
+
if (!_ThemeGeneratorServiceLocator.isSet()) {
|
|
3475
|
+
throw new Error("'ThemeGenerator' not set.");
|
|
3476
|
+
}
|
|
3477
|
+
return _ThemeGeneratorServiceLocator._current;
|
|
3298
3478
|
}
|
|
3299
3479
|
// #endregion
|
|
3300
3480
|
// #region Methods
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
const baseLight2 = chroma__default.default("#ffffff");
|
|
3304
|
-
const baseDark2 = chroma__default.default("#000000");
|
|
3305
|
-
const palette2 = {};
|
|
3306
|
-
const steps2 = [
|
|
3307
|
-
0,
|
|
3308
|
-
50,
|
|
3309
|
-
100,
|
|
3310
|
-
200,
|
|
3311
|
-
300,
|
|
3312
|
-
400,
|
|
3313
|
-
500,
|
|
3314
|
-
600,
|
|
3315
|
-
700,
|
|
3316
|
-
800,
|
|
3317
|
-
900
|
|
3318
|
-
];
|
|
3319
|
-
const amounts2 = [
|
|
3320
|
-
0,
|
|
3321
|
-
12,
|
|
3322
|
-
30,
|
|
3323
|
-
50,
|
|
3324
|
-
70,
|
|
3325
|
-
85,
|
|
3326
|
-
100,
|
|
3327
|
-
87,
|
|
3328
|
-
70,
|
|
3329
|
-
54,
|
|
3330
|
-
25
|
|
3331
|
-
];
|
|
3332
|
-
steps2.forEach((step, i) => {
|
|
3333
|
-
const base = step <= 500 ? baseLight2 : baseDark2;
|
|
3334
|
-
palette2[`${step}`] = chroma__default.default.mix(base, baseColor, amounts2[i] / 100, "rgb").hex();
|
|
3335
|
-
});
|
|
3336
|
-
return palette2;
|
|
3337
|
-
}
|
|
3338
|
-
const baseLight = chroma__default.default("#ffffff");
|
|
3339
|
-
const baseDark = chroma__default.default("#000000");
|
|
3340
|
-
const palette = {};
|
|
3341
|
-
const steps = [
|
|
3342
|
-
0,
|
|
3343
|
-
100,
|
|
3344
|
-
500
|
|
3345
|
-
];
|
|
3346
|
-
const amounts = [
|
|
3347
|
-
0,
|
|
3348
|
-
30,
|
|
3349
|
-
100
|
|
3350
|
-
];
|
|
3351
|
-
steps.forEach((step, i) => {
|
|
3352
|
-
const base = step <= 600 ? baseDark : baseLight;
|
|
3353
|
-
palette[`${step}`] = chroma__default.default.mix(base, baseColor, amounts[i] / 100, "rgb").hex();
|
|
3354
|
-
});
|
|
3355
|
-
return palette;
|
|
3481
|
+
static isSet() {
|
|
3482
|
+
return _ThemeGeneratorServiceLocator._current !== null;
|
|
3356
3483
|
}
|
|
3357
|
-
|
|
3358
|
-
|
|
3484
|
+
static set(current) {
|
|
3485
|
+
_ThemeGeneratorServiceLocator._current = current;
|
|
3359
3486
|
}
|
|
3360
3487
|
};
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
return
|
|
3488
|
+
ThemeGeneratorServiceLocator.set(new ThemeGenerator());
|
|
3489
|
+
function isThemeMode(value) {
|
|
3490
|
+
return value === "system" || value === "dark" || value === "light";
|
|
3364
3491
|
}
|
|
3365
|
-
__name(
|
|
3366
|
-
|
|
3367
|
-
// src/Theming/ThemeGenerator.ts
|
|
3368
|
-
var ThemeGenerator = class {
|
|
3492
|
+
__name(isThemeMode, "isThemeMode");
|
|
3493
|
+
var ThemeObserver = class {
|
|
3369
3494
|
static {
|
|
3370
|
-
__name(this, "
|
|
3495
|
+
__name(this, "ThemeObserver");
|
|
3371
3496
|
}
|
|
3372
3497
|
// #region Fields
|
|
3373
|
-
|
|
3498
|
+
_themeChanged;
|
|
3499
|
+
_themeModeChanged;
|
|
3374
3500
|
_platformAdapter;
|
|
3375
|
-
|
|
3501
|
+
_currentTheme;
|
|
3502
|
+
_currentThemeMode;
|
|
3503
|
+
_unsubscribe;
|
|
3376
3504
|
// #region Ctor
|
|
3377
3505
|
/**
|
|
3378
|
-
*
|
|
3506
|
+
* Constructs a new instance of the `ThemeObserver` class.
|
|
3507
|
+
*
|
|
3379
3508
|
* @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
|
|
3509
|
+
* @public
|
|
3380
3510
|
*/
|
|
3381
3511
|
constructor(platformAdapter) {
|
|
3382
|
-
this.
|
|
3383
|
-
|
|
3384
|
-
"joy",
|
|
3385
|
-
new JoyThemeGeneratorStrategy()
|
|
3386
|
-
],
|
|
3387
|
-
[
|
|
3388
|
-
"memphis",
|
|
3389
|
-
new MemphisThemeGeneratorStrategy()
|
|
3390
|
-
],
|
|
3391
|
-
[
|
|
3392
|
-
"cosmopolitan",
|
|
3393
|
-
new CosmopolitanThemeGeneratorStrategy()
|
|
3394
|
-
]
|
|
3395
|
-
]);
|
|
3512
|
+
this._themeChanged = new mosaikElements.PureEventEmitter();
|
|
3513
|
+
this._themeModeChanged = new mosaikElements.PureEventEmitter();
|
|
3396
3514
|
this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
|
|
3515
|
+
this._currentTheme = null;
|
|
3516
|
+
this._currentThemeMode = null;
|
|
3517
|
+
this.observe({
|
|
3518
|
+
themeChange: /* @__PURE__ */ __name((theme) => this._themeChanged.emit(theme), "themeChange"),
|
|
3519
|
+
themeModeChange: /* @__PURE__ */ __name((themeMode) => this._themeModeChanged.emit(themeMode), "themeModeChange")
|
|
3520
|
+
});
|
|
3397
3521
|
}
|
|
3398
3522
|
// #endregion
|
|
3399
|
-
// #region
|
|
3523
|
+
// #region Properties
|
|
3400
3524
|
/**
|
|
3401
|
-
*
|
|
3525
|
+
* Fires when the theme changes.
|
|
3402
3526
|
*
|
|
3403
3527
|
* @public
|
|
3404
|
-
* @
|
|
3405
|
-
* @param baseColor The base color (typically a 500 level shade).
|
|
3406
|
-
* @param mode The theme mode ('dark', 'light', or 'system').
|
|
3407
|
-
* @returns The generated theme palette.
|
|
3528
|
+
* @readonly
|
|
3408
3529
|
*/
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
const strategy = this.getStrategy(themeName);
|
|
3412
|
-
return strategy.generatePalette(baseColor, resolvedMode);
|
|
3530
|
+
get themeChanged() {
|
|
3531
|
+
return this._themeChanged;
|
|
3413
3532
|
}
|
|
3414
3533
|
/**
|
|
3415
|
-
*
|
|
3534
|
+
* Fires when the theme mode changes.
|
|
3416
3535
|
*
|
|
3417
3536
|
* @public
|
|
3418
|
-
* @
|
|
3419
|
-
* @param baseColor The base color (typically a background level shade).
|
|
3420
|
-
* @param mode The theme mode ('dark', 'light', or 'system').
|
|
3421
|
-
* @returns The generated theme scheme.
|
|
3537
|
+
* @readonly
|
|
3422
3538
|
*/
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
const strategy = this.getStrategy(themeName);
|
|
3426
|
-
return strategy.generateScheme(baseColor, resolvedMode);
|
|
3539
|
+
get themeModeChanged() {
|
|
3540
|
+
return this._themeModeChanged;
|
|
3427
3541
|
}
|
|
3542
|
+
// #endregion
|
|
3543
|
+
// #region Methods
|
|
3428
3544
|
/**
|
|
3429
|
-
*
|
|
3545
|
+
* Applies the given theme and theme mode to the document.
|
|
3430
3546
|
*
|
|
3431
|
-
* @
|
|
3432
|
-
* @param
|
|
3433
|
-
* @
|
|
3547
|
+
* @public
|
|
3548
|
+
* @param theme - The theme to apply (joy, cosmopolitan or memphis).
|
|
3549
|
+
* @param themeMode - The theme mode to apply.
|
|
3434
3550
|
*/
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3551
|
+
applyTheme(theme, themeMode) {
|
|
3552
|
+
this._platformAdapter.setDocumentAttribute("theme", theme);
|
|
3553
|
+
switch (themeMode) {
|
|
3554
|
+
case "dark":
|
|
3555
|
+
case "light":
|
|
3556
|
+
this._platformAdapter.setDocumentAttribute("theme-mode", themeMode);
|
|
3557
|
+
break;
|
|
3558
|
+
case "system":
|
|
3559
|
+
default:
|
|
3560
|
+
const isDark = this._platformAdapter.matchMedia("(prefers-color-scheme: dark)");
|
|
3561
|
+
this._platformAdapter.setDocumentAttribute("theme-mode", isDark ? "dark" : "light");
|
|
3562
|
+
break;
|
|
3439
3563
|
}
|
|
3440
|
-
return mode;
|
|
3441
3564
|
}
|
|
3442
3565
|
/**
|
|
3443
|
-
*
|
|
3566
|
+
* Stops observing document attribute changes and releases the underlying listener.
|
|
3444
3567
|
*
|
|
3445
|
-
* @
|
|
3446
|
-
*
|
|
3447
|
-
*
|
|
3568
|
+
* @remarks
|
|
3569
|
+
* Safe to call multiple times — subsequent calls are no-ops.
|
|
3570
|
+
*
|
|
3571
|
+
* @public
|
|
3448
3572
|
*/
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3573
|
+
dispose() {
|
|
3574
|
+
if (this._unsubscribe) {
|
|
3575
|
+
this._unsubscribe();
|
|
3576
|
+
this._unsubscribe = void 0;
|
|
3577
|
+
}
|
|
3578
|
+
}
|
|
3579
|
+
observe(cb) {
|
|
3580
|
+
this._currentTheme = this._platformAdapter.getDocumentAttribute("theme");
|
|
3581
|
+
this._currentThemeMode = this._platformAdapter.getDocumentAttribute("theme-mode");
|
|
3582
|
+
this._unsubscribe = this._platformAdapter.observeDocumentAttributes([
|
|
3583
|
+
"theme",
|
|
3584
|
+
"theme-mode"
|
|
3585
|
+
], (attributeName, newValue) => {
|
|
3586
|
+
if (attributeName === "theme" && newValue) {
|
|
3587
|
+
const theme = newValue;
|
|
3588
|
+
if (this._currentTheme !== theme) {
|
|
3589
|
+
this._currentTheme = theme;
|
|
3590
|
+
cb.themeChange(theme);
|
|
3591
|
+
}
|
|
3592
|
+
}
|
|
3593
|
+
if (attributeName === "theme-mode") {
|
|
3594
|
+
const themeMode = newValue;
|
|
3595
|
+
if (!isThemeMode(themeMode)) {
|
|
3596
|
+
throw new Error(`Invalid theme mode: ${String(themeMode)}`);
|
|
3597
|
+
}
|
|
3598
|
+
if (this._currentThemeMode !== themeMode) {
|
|
3599
|
+
this._currentThemeMode = themeMode;
|
|
3600
|
+
cb.themeModeChange(themeMode);
|
|
3601
|
+
}
|
|
3602
|
+
}
|
|
3603
|
+
});
|
|
3604
|
+
}
|
|
3605
|
+
};
|
|
3606
|
+
var ThemeObserverServiceLocator = class _ThemeObserverServiceLocator {
|
|
3607
|
+
static {
|
|
3608
|
+
__name(this, "ThemeObserverServiceLocator");
|
|
3609
|
+
}
|
|
3610
|
+
// #region Fields
|
|
3611
|
+
static _current = null;
|
|
3612
|
+
// #endregion
|
|
3613
|
+
// #region Properties
|
|
3614
|
+
static get current() {
|
|
3615
|
+
if (!_ThemeObserverServiceLocator.isSet()) {
|
|
3616
|
+
throw new Error("'ThemeObserver' not set.");
|
|
3617
|
+
}
|
|
3618
|
+
return _ThemeObserverServiceLocator._current;
|
|
3619
|
+
}
|
|
3620
|
+
// #endregion
|
|
3621
|
+
// #region Methods
|
|
3622
|
+
static isSet() {
|
|
3623
|
+
return _ThemeObserverServiceLocator._current !== null;
|
|
3624
|
+
}
|
|
3625
|
+
static set(current) {
|
|
3626
|
+
_ThemeObserverServiceLocator._current = current;
|
|
3627
|
+
}
|
|
3628
|
+
};
|
|
3629
|
+
ThemeObserverServiceLocator.set(new ThemeObserver());
|
|
3630
|
+
|
|
3631
|
+
// src/Theming/Utils/CssAspectRatio.ts
|
|
3632
|
+
(function(CssAspectRatio2) {
|
|
3633
|
+
function isCssAspectRatio(value) {
|
|
3634
|
+
if (typeof value === "string") {
|
|
3635
|
+
if (value.trim() === "") {
|
|
3636
|
+
return false;
|
|
3637
|
+
}
|
|
3638
|
+
if (value === "auto") {
|
|
3639
|
+
return true;
|
|
3640
|
+
}
|
|
3641
|
+
const ratioParts = value.split("/");
|
|
3642
|
+
if (ratioParts.length === 1) {
|
|
3643
|
+
return !isNaN(Number(ratioParts[0])) && Number(ratioParts[0]) >= 0;
|
|
3644
|
+
}
|
|
3645
|
+
if (ratioParts.length === 2) {
|
|
3646
|
+
return !isNaN(Number(ratioParts[0])) && Number(ratioParts[0]) >= 0 && !isNaN(Number(ratioParts[1])) && Number(ratioParts[1]) >= 0;
|
|
3647
|
+
}
|
|
3648
|
+
}
|
|
3649
|
+
return false;
|
|
3650
|
+
}
|
|
3651
|
+
__name(isCssAspectRatio, "isCssAspectRatio");
|
|
3652
|
+
CssAspectRatio2.isCssAspectRatio = isCssAspectRatio;
|
|
3653
|
+
})(exports.CssAspectRatio || (exports.CssAspectRatio = {}));
|
|
3654
|
+
exports.CssAspectRatio = void 0;
|
|
3655
|
+
|
|
3656
|
+
// src/Theming/Utils/CssColor.ts
|
|
3657
|
+
(function(CssColor2) {
|
|
3658
|
+
function isCssColor(value) {
|
|
3659
|
+
if (typeof value !== "string") {
|
|
3660
|
+
return false;
|
|
3661
|
+
}
|
|
3662
|
+
if (value.trim() === "") {
|
|
3663
|
+
return false;
|
|
3664
|
+
}
|
|
3665
|
+
const rgbRegex = /^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/;
|
|
3666
|
+
const rgbaRegex = /^rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*(0(\.\d+)?|1(\.0+)?)\)$/;
|
|
3667
|
+
const hexRegex = /^#[0-9a-fA-F]{3,6}$/;
|
|
3668
|
+
return rgbRegex.test(value) || rgbaRegex.test(value) || hexRegex.test(value);
|
|
3669
|
+
}
|
|
3670
|
+
__name(isCssColor, "isCssColor");
|
|
3671
|
+
CssColor2.isCssColor = isCssColor;
|
|
3672
|
+
})(exports.CssColor || (exports.CssColor = {}));
|
|
3673
|
+
exports.CssColor = void 0;
|
|
3674
|
+
|
|
3675
|
+
// src/Theming/Utils/CssLength.ts
|
|
3676
|
+
(function(CssLength2) {
|
|
3677
|
+
function isCssLength(value) {
|
|
3678
|
+
if (typeof value === "number" || value === "auto") {
|
|
3679
|
+
return true;
|
|
3680
|
+
}
|
|
3681
|
+
if (typeof value !== "string") {
|
|
3682
|
+
return false;
|
|
3683
|
+
}
|
|
3684
|
+
if (value.trim() === "") {
|
|
3685
|
+
return false;
|
|
3686
|
+
}
|
|
3687
|
+
const lengthRegex = /^-?\d+(\.\d+)?(em|ex|ch|rem|vh|vw|vmin|vmax|svw|svh|dvw|dvh|lvw|lvh|px|mm|cm|in|pt|pc|mozmm|%)/;
|
|
3688
|
+
return lengthRegex.test(value);
|
|
3689
|
+
}
|
|
3690
|
+
__name(isCssLength, "isCssLength");
|
|
3691
|
+
CssLength2.isCssLength = isCssLength;
|
|
3692
|
+
function isAuto(value) {
|
|
3693
|
+
return value === "auto";
|
|
3694
|
+
}
|
|
3695
|
+
__name(isAuto, "isAuto");
|
|
3696
|
+
CssLength2.isAuto = isAuto;
|
|
3697
|
+
function isPercentage(value) {
|
|
3698
|
+
if (typeof value !== "string") {
|
|
3699
|
+
return false;
|
|
3700
|
+
}
|
|
3701
|
+
if (value.trim() === "") {
|
|
3702
|
+
return false;
|
|
3703
|
+
}
|
|
3704
|
+
const percentageRegex = /^-?\d+(\.\d+)?%/;
|
|
3705
|
+
return percentageRegex.test(value);
|
|
3706
|
+
}
|
|
3707
|
+
__name(isPercentage, "isPercentage");
|
|
3708
|
+
CssLength2.isPercentage = isPercentage;
|
|
3709
|
+
function isLength(value) {
|
|
3710
|
+
if (typeof value !== "string") {
|
|
3711
|
+
return false;
|
|
3712
|
+
}
|
|
3713
|
+
if (value.trim() === "") {
|
|
3714
|
+
return false;
|
|
3715
|
+
}
|
|
3716
|
+
const lengthRegex = /^-?\d+(\.\d+)?(em|ex|ch|rem|vh|vw|vmin|vmax|svw|svh|dvw|dvh|lvw|lvh|px|mm|cm|in|pt|pc|mozmm)/;
|
|
3717
|
+
return lengthRegex.test(value);
|
|
3718
|
+
}
|
|
3719
|
+
__name(isLength, "isLength");
|
|
3720
|
+
CssLength2.isLength = isLength;
|
|
3721
|
+
function toNumber(value) {
|
|
3722
|
+
if (typeof value === "number") {
|
|
3723
|
+
return value;
|
|
3724
|
+
}
|
|
3725
|
+
if (value === "auto") {
|
|
3726
|
+
throw new Error('Cannot convert "auto" to a number.');
|
|
3453
3727
|
}
|
|
3454
|
-
|
|
3728
|
+
const match = /^-?\d*\.?\d+/.exec(value);
|
|
3729
|
+
if (!match) {
|
|
3730
|
+
throw new Error(`Invalid CSS length: ${value}`);
|
|
3731
|
+
}
|
|
3732
|
+
return parseFloat(match[0]);
|
|
3455
3733
|
}
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3734
|
+
__name(toNumber, "toNumber");
|
|
3735
|
+
CssLength2.toNumber = toNumber;
|
|
3736
|
+
function toString(value, defaultUnit = "px") {
|
|
3737
|
+
if (value === void 0 || value === null) {
|
|
3738
|
+
return "";
|
|
3739
|
+
}
|
|
3740
|
+
if (typeof value === "number") {
|
|
3741
|
+
return `${value}${defaultUnit}`;
|
|
3742
|
+
}
|
|
3743
|
+
return value;
|
|
3460
3744
|
}
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
if (
|
|
3467
|
-
throw new Error(
|
|
3745
|
+
__name(toString, "toString");
|
|
3746
|
+
CssLength2.toString = toString;
|
|
3747
|
+
function extractUnit(cssLength) {
|
|
3748
|
+
const match = /[a-z%]+$/i.exec(cssLength);
|
|
3749
|
+
const lengt = match ? match[0] : null;
|
|
3750
|
+
if (lengt === null) {
|
|
3751
|
+
throw new Error(`Invalid value: ${cssLength}`);
|
|
3468
3752
|
}
|
|
3469
|
-
return
|
|
3753
|
+
return lengt;
|
|
3470
3754
|
}
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3755
|
+
__name(extractUnit, "extractUnit");
|
|
3756
|
+
CssLength2.extractUnit = extractUnit;
|
|
3757
|
+
function extractValue(cssLength) {
|
|
3758
|
+
const match = /^-?\d*\.?\d+/.exec(cssLength);
|
|
3759
|
+
const value = match ? parseFloat(match[0]) : null;
|
|
3760
|
+
if (value === null) {
|
|
3761
|
+
throw new Error(`Invalid value: ${cssLength}`);
|
|
3762
|
+
}
|
|
3763
|
+
return value;
|
|
3475
3764
|
}
|
|
3476
|
-
|
|
3477
|
-
|
|
3765
|
+
__name(extractValue, "extractValue");
|
|
3766
|
+
CssLength2.extractValue = extractValue;
|
|
3767
|
+
function pxToRem(pixel) {
|
|
3768
|
+
const value = extractValue(pixel);
|
|
3769
|
+
const baseSize = 16;
|
|
3770
|
+
const sizeInRem = `${value / baseSize}rem`;
|
|
3771
|
+
return sizeInRem;
|
|
3478
3772
|
}
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3773
|
+
__name(pxToRem, "pxToRem");
|
|
3774
|
+
CssLength2.pxToRem = pxToRem;
|
|
3775
|
+
function tryParse(value, defaultUnit = "px") {
|
|
3776
|
+
if (value === void 0 || value === null) {
|
|
3777
|
+
return void 0;
|
|
3778
|
+
}
|
|
3779
|
+
if (typeof value === "string") {
|
|
3780
|
+
if (isLength(value)) {
|
|
3781
|
+
return value;
|
|
3782
|
+
}
|
|
3783
|
+
if (value.trim() === "") {
|
|
3784
|
+
return void 0;
|
|
3785
|
+
}
|
|
3786
|
+
const num = parseFloat(value);
|
|
3787
|
+
return isNaN(num) ? void 0 : `${num}${defaultUnit}`;
|
|
3788
|
+
}
|
|
3789
|
+
if (typeof value === "number") {
|
|
3790
|
+
return `${String(value)}${defaultUnit}`;
|
|
3791
|
+
}
|
|
3792
|
+
return void 0;
|
|
3484
3793
|
}
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
50,
|
|
3505
|
-
100,
|
|
3506
|
-
200,
|
|
3507
|
-
300,
|
|
3508
|
-
400,
|
|
3509
|
-
500,
|
|
3510
|
-
600,
|
|
3511
|
-
700,
|
|
3512
|
-
800,
|
|
3513
|
-
900
|
|
3514
|
-
];
|
|
3515
|
-
const base = chroma__default.default(baseColor);
|
|
3516
|
-
const [h, s] = base.hsl();
|
|
3517
|
-
const palette = {};
|
|
3518
|
-
steps.forEach((step, idx) => {
|
|
3519
|
-
const t = idx / (steps.length - 1);
|
|
3520
|
-
const lightness = mode === "light" ? 0.95 - t * 0.6 : 0.15 + t * 0.6;
|
|
3521
|
-
const col = chroma__default.default.hsl(h, s, lightness);
|
|
3522
|
-
palette[step.toString()] = col.hex();
|
|
3523
|
-
});
|
|
3524
|
-
return palette;
|
|
3794
|
+
__name(tryParse, "tryParse");
|
|
3795
|
+
CssLength2.tryParse = tryParse;
|
|
3796
|
+
})(exports.CssLength || (exports.CssLength = {}));
|
|
3797
|
+
exports.CssLength = void 0;
|
|
3798
|
+
|
|
3799
|
+
// src/Theming/Utils/CssShadow.ts
|
|
3800
|
+
(function(CssShadow2) {
|
|
3801
|
+
function isCssShadow(value) {
|
|
3802
|
+
if (typeof value !== "string") {
|
|
3803
|
+
return false;
|
|
3804
|
+
}
|
|
3805
|
+
if (value.trim() === "") {
|
|
3806
|
+
return false;
|
|
3807
|
+
}
|
|
3808
|
+
if (value === "none") {
|
|
3809
|
+
return true;
|
|
3810
|
+
}
|
|
3811
|
+
const shadows = value.split(/\s*,\s*/);
|
|
3812
|
+
return shadows.every(isCssShadowSingle);
|
|
3525
3813
|
}
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
* @returns An scheme with semantic color roles.
|
|
3532
|
-
*
|
|
3533
|
-
* Returned keys:
|
|
3534
|
-
* - background → shade "50"
|
|
3535
|
-
* - foreground → shade "900"
|
|
3536
|
-
* - primary → shade "500"
|
|
3537
|
-
* - accent → shade "700"
|
|
3538
|
-
* - muted → shade "300"
|
|
3539
|
-
*/
|
|
3540
|
-
generateScheme(baseColor, mode) {
|
|
3541
|
-
const p = this.generatePalette(baseColor, mode);
|
|
3542
|
-
return {
|
|
3543
|
-
background: p["50"],
|
|
3544
|
-
foreground: p["900"],
|
|
3545
|
-
disabled: p["300"]
|
|
3546
|
-
};
|
|
3814
|
+
__name(isCssShadow, "isCssShadow");
|
|
3815
|
+
CssShadow2.isCssShadow = isCssShadow;
|
|
3816
|
+
function isCssShadowSingle(value) {
|
|
3817
|
+
const shadowRegex = new RegExp("^(inset\\s+)?(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)\\s+(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)\\s+(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)?\\s*(-?\\d+(\\.\\d+)?(px|em|rem|vh|vw|%)?)?\\s*(rgba?\\(\\d{1,3},\\s*\\d{1,3},\\s*\\d{1,3}(,\\s*(0|1|0?\\.\\d+))?\\)|#[0-9a-fA-F]{3,6})$", "i");
|
|
3818
|
+
return shadowRegex.test(value);
|
|
3547
3819
|
}
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
|
|
3551
|
-
return () => strategy;
|
|
3552
|
-
}
|
|
3553
|
-
__name(createTailwindTheme, "createTailwindTheme");
|
|
3554
|
-
function adjust(color, amount) {
|
|
3555
|
-
return Math.min(255, Math.max(0, color + amount));
|
|
3556
|
-
}
|
|
3557
|
-
__name(adjust, "adjust");
|
|
3558
|
-
function darken(hex, factor) {
|
|
3559
|
-
const [r, g, b] = chroma__default.default(hex).rgb().map((x) => adjust(x, -factor));
|
|
3560
|
-
return chroma__default.default(r, g, b, "rgb").hex();
|
|
3561
|
-
}
|
|
3562
|
-
__name(darken, "darken");
|
|
3563
|
-
function lighten(hex, factor) {
|
|
3564
|
-
const [r, g, b] = chroma__default.default(hex).rgb().map((x) => adjust(x, factor));
|
|
3565
|
-
return chroma__default.default(r, g, b, "rgb").hex();
|
|
3566
|
-
}
|
|
3567
|
-
__name(lighten, "lighten");
|
|
3820
|
+
__name(isCssShadowSingle, "isCssShadowSingle");
|
|
3821
|
+
})(exports.CssShadow || (exports.CssShadow = {}));
|
|
3822
|
+
exports.CssShadow = void 0;
|
|
3568
3823
|
|
|
3569
|
-
// src/
|
|
3570
|
-
function
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
const max = Math.max(r, g, b);
|
|
3575
|
-
const min = Math.min(r, g, b);
|
|
3576
|
-
let h = 0;
|
|
3577
|
-
let s = 0;
|
|
3578
|
-
const l = (max + min) / 2;
|
|
3579
|
-
if (max === min) {
|
|
3580
|
-
h = 0;
|
|
3581
|
-
s = 0;
|
|
3582
|
-
} else {
|
|
3583
|
-
const d = max - min;
|
|
3584
|
-
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
3585
|
-
switch (max) {
|
|
3586
|
-
case r:
|
|
3587
|
-
h = (g - b) / d + (g < b ? 6 : 0);
|
|
3588
|
-
break;
|
|
3589
|
-
case g:
|
|
3590
|
-
h = (b - r) / d + 2;
|
|
3591
|
-
break;
|
|
3592
|
-
case b:
|
|
3593
|
-
h = (r - g) / d + 4;
|
|
3594
|
-
break;
|
|
3824
|
+
// src/Theming/Utils/CssTime.ts
|
|
3825
|
+
(function(CssTime2) {
|
|
3826
|
+
function isCssTime(value) {
|
|
3827
|
+
if (typeof value === "number" || value === 0) {
|
|
3828
|
+
return true;
|
|
3595
3829
|
}
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
return [
|
|
3599
|
-
h,
|
|
3600
|
-
s,
|
|
3601
|
-
l
|
|
3602
|
-
];
|
|
3603
|
-
}
|
|
3604
|
-
__name(hexToHSL, "hexToHSL");
|
|
3605
|
-
function hslToHex(h, s, l) {
|
|
3606
|
-
const hue2rgb = /* @__PURE__ */ __name((p, q, t) => {
|
|
3607
|
-
if (t < 0) {
|
|
3608
|
-
t += 1;
|
|
3830
|
+
if (typeof value !== "string") {
|
|
3831
|
+
return false;
|
|
3609
3832
|
}
|
|
3610
|
-
if (
|
|
3611
|
-
|
|
3833
|
+
if (value.trim() === "") {
|
|
3834
|
+
return false;
|
|
3612
3835
|
}
|
|
3613
|
-
|
|
3614
|
-
|
|
3836
|
+
const timeRegex = /^-?\d+(\.\d+)?(s|ms)/;
|
|
3837
|
+
return timeRegex.test(value);
|
|
3838
|
+
}
|
|
3839
|
+
__name(isCssTime, "isCssTime");
|
|
3840
|
+
CssTime2.isCssTime = isCssTime;
|
|
3841
|
+
})(exports.CssTime || (exports.CssTime = {}));
|
|
3842
|
+
exports.CssTime = void 0;
|
|
3843
|
+
|
|
3844
|
+
// src/Theming/Utils/ThemePalette.ts
|
|
3845
|
+
(function(ThemePalette2) {
|
|
3846
|
+
const THEME_SHADE_NAMES = [
|
|
3847
|
+
"0",
|
|
3848
|
+
"50",
|
|
3849
|
+
"100",
|
|
3850
|
+
"200",
|
|
3851
|
+
"300",
|
|
3852
|
+
"400",
|
|
3853
|
+
"500",
|
|
3854
|
+
"600",
|
|
3855
|
+
"700",
|
|
3856
|
+
"800",
|
|
3857
|
+
"900"
|
|
3858
|
+
];
|
|
3859
|
+
function isThemeShadeName(value) {
|
|
3860
|
+
return THEME_SHADE_NAMES.includes(value);
|
|
3861
|
+
}
|
|
3862
|
+
__name(isThemeShadeName, "isThemeShadeName");
|
|
3863
|
+
function isThemePalette(value) {
|
|
3864
|
+
if (typeof value !== "object" || value === null) {
|
|
3865
|
+
return false;
|
|
3615
3866
|
}
|
|
3616
|
-
|
|
3617
|
-
|
|
3867
|
+
return Object.keys(value).every((key) => isThemeShadeName(key) && typeof value[key] === "string");
|
|
3868
|
+
}
|
|
3869
|
+
__name(isThemePalette, "isThemePalette");
|
|
3870
|
+
ThemePalette2.isThemePalette = isThemePalette;
|
|
3871
|
+
})(exports.ThemePalette || (exports.ThemePalette = {}));
|
|
3872
|
+
exports.ThemePalette = void 0;
|
|
3873
|
+
|
|
3874
|
+
// src/Theming/Utils/ITheme.ts
|
|
3875
|
+
(function(ITheme2) {
|
|
3876
|
+
function getScheme(theme, mode) {
|
|
3877
|
+
return theme.scheme[mode];
|
|
3878
|
+
}
|
|
3879
|
+
__name(getScheme, "getScheme");
|
|
3880
|
+
ITheme2.getScheme = getScheme;
|
|
3881
|
+
function getPalette(theme, mode, semanticColor) {
|
|
3882
|
+
const paletteEntry = theme.palette[mode][semanticColor];
|
|
3883
|
+
if (!exports.ThemePalette.isThemePalette(paletteEntry)) {
|
|
3884
|
+
throw new Error(`Palette '${semanticColor}' is not a valid theme palette for mode '${mode}'.`);
|
|
3618
3885
|
}
|
|
3619
|
-
|
|
3620
|
-
|
|
3886
|
+
return paletteEntry;
|
|
3887
|
+
}
|
|
3888
|
+
__name(getPalette, "getPalette");
|
|
3889
|
+
ITheme2.getPalette = getPalette;
|
|
3890
|
+
function getSchemeColor(theme, mode, role) {
|
|
3891
|
+
const scheme = theme.scheme[mode];
|
|
3892
|
+
const color = scheme[role];
|
|
3893
|
+
if (typeof color !== "string") {
|
|
3894
|
+
throw new Error(`Scheme color '${role}' is not defined for mode '${mode}'.`);
|
|
3621
3895
|
}
|
|
3622
|
-
return
|
|
3623
|
-
}, "hue2rgb");
|
|
3624
|
-
let r = 0;
|
|
3625
|
-
let g = 0;
|
|
3626
|
-
let b = 0;
|
|
3627
|
-
if (s === 0) {
|
|
3628
|
-
r = l;
|
|
3629
|
-
g = l;
|
|
3630
|
-
b = l;
|
|
3631
|
-
} else {
|
|
3632
|
-
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
3633
|
-
const p = 2 * l - q;
|
|
3634
|
-
r = hue2rgb(p, q, h + 1 / 3);
|
|
3635
|
-
g = hue2rgb(p, q, h);
|
|
3636
|
-
b = hue2rgb(p, q, h - 1 / 3);
|
|
3896
|
+
return color;
|
|
3637
3897
|
}
|
|
3638
|
-
|
|
3639
|
-
|
|
3640
|
-
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
(
|
|
3644
|
-
|
|
3645
|
-
hsl[2]
|
|
3646
|
-
];
|
|
3647
|
-
}
|
|
3648
|
-
__name(adjustHue, "adjustHue");
|
|
3649
|
-
|
|
3650
|
-
// src/Colors/generators/analogous.ts
|
|
3651
|
-
function generateAnalogousPalette(baseHex, adjustment) {
|
|
3652
|
-
const baseHSL = hexToHSL(baseHex);
|
|
3653
|
-
const adjustedHSL = adjustHue(baseHSL, adjustment);
|
|
3654
|
-
const palette = {};
|
|
3655
|
-
const steps = [
|
|
3656
|
-
0,
|
|
3657
|
-
50,
|
|
3658
|
-
100,
|
|
3659
|
-
200,
|
|
3660
|
-
300,
|
|
3661
|
-
400,
|
|
3662
|
-
500,
|
|
3663
|
-
600,
|
|
3664
|
-
700,
|
|
3665
|
-
800,
|
|
3666
|
-
900
|
|
3667
|
-
];
|
|
3668
|
-
steps.forEach((step) => {
|
|
3669
|
-
let [h, s, l] = adjustedHSL;
|
|
3670
|
-
if (step === 0) {
|
|
3671
|
-
l = 1;
|
|
3672
|
-
} else {
|
|
3673
|
-
l = 1 - step / 1e3;
|
|
3898
|
+
__name(getSchemeColor, "getSchemeColor");
|
|
3899
|
+
ITheme2.getSchemeColor = getSchemeColor;
|
|
3900
|
+
function getPaletteColor(theme, mode, semanticColor, shade) {
|
|
3901
|
+
const palette = getPalette(theme, mode, semanticColor);
|
|
3902
|
+
const color = palette[shade];
|
|
3903
|
+
if (typeof color !== "string") {
|
|
3904
|
+
throw new Error(`Shade '${shade}' is not defined in palette '${semanticColor}' for mode '${mode}'.`);
|
|
3674
3905
|
}
|
|
3675
|
-
|
|
3676
|
-
}
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
__name(generateAnalogousColor, "generateAnalogousColor");
|
|
3687
|
-
function generateMaterialPalette(hexColor) {
|
|
3688
|
-
const baseLight = chroma__default.default("#ffffff");
|
|
3689
|
-
const baseDark = chroma__default.default("#000000");
|
|
3690
|
-
const palette = {};
|
|
3691
|
-
const steps = [
|
|
3692
|
-
0,
|
|
3693
|
-
50,
|
|
3694
|
-
100,
|
|
3695
|
-
200,
|
|
3696
|
-
300,
|
|
3697
|
-
400,
|
|
3698
|
-
500,
|
|
3699
|
-
600,
|
|
3700
|
-
700,
|
|
3701
|
-
800,
|
|
3702
|
-
900
|
|
3703
|
-
];
|
|
3704
|
-
const amounts = [
|
|
3705
|
-
0,
|
|
3706
|
-
12,
|
|
3707
|
-
30,
|
|
3708
|
-
50,
|
|
3709
|
-
70,
|
|
3710
|
-
85,
|
|
3711
|
-
100,
|
|
3712
|
-
87,
|
|
3713
|
-
70,
|
|
3714
|
-
54,
|
|
3715
|
-
25
|
|
3716
|
-
];
|
|
3717
|
-
steps.forEach((step, i) => {
|
|
3718
|
-
const base = step <= 500 ? baseLight : baseDark;
|
|
3719
|
-
palette[`${step}`] = chroma__default.default.mix(base, hexColor, amounts[i] / 100, "rgb").hex();
|
|
3720
|
-
});
|
|
3721
|
-
return palette;
|
|
3722
|
-
}
|
|
3723
|
-
__name(generateMaterialPalette, "generateMaterialPalette");
|
|
3906
|
+
return color;
|
|
3907
|
+
}
|
|
3908
|
+
__name(getPaletteColor, "getPaletteColor");
|
|
3909
|
+
ITheme2.getPaletteColor = getPaletteColor;
|
|
3910
|
+
function getElevationShadow(theme, mode, key) {
|
|
3911
|
+
return theme.elevation[mode][key];
|
|
3912
|
+
}
|
|
3913
|
+
__name(getElevationShadow, "getElevationShadow");
|
|
3914
|
+
ITheme2.getElevationShadow = getElevationShadow;
|
|
3915
|
+
})(exports.ITheme || (exports.ITheme = {}));
|
|
3916
|
+
exports.ITheme = void 0;
|
|
3724
3917
|
|
|
3725
|
-
// src/
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
}
|
|
3731
|
-
__name(generateComplementaryPalette, "generateComplementaryPalette");
|
|
3732
|
-
function generateComplementaryColor(baseHex) {
|
|
3733
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3734
|
-
const complementaryH = (h + 180) % 360;
|
|
3735
|
-
return chroma__default.default.hsl(complementaryH, s, l).hex();
|
|
3736
|
-
}
|
|
3737
|
-
__name(generateComplementaryColor, "generateComplementaryColor");
|
|
3738
|
-
function generateSplitComplementaryColors(baseHex) {
|
|
3739
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3740
|
-
const splitH1 = (h + 150) % 360;
|
|
3741
|
-
const splitH2 = (h + 210) % 360;
|
|
3742
|
-
return [
|
|
3743
|
-
chroma__default.default.hsl(splitH1, s, l).hex(),
|
|
3744
|
-
chroma__default.default.hsl(splitH2, s, l).hex()
|
|
3745
|
-
];
|
|
3746
|
-
}
|
|
3747
|
-
__name(generateSplitComplementaryColors, "generateSplitComplementaryColors");
|
|
3748
|
-
function generateSplitComplementaryColor1(baseHex) {
|
|
3749
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3750
|
-
const splitH = (h + 150) % 360;
|
|
3751
|
-
return chroma__default.default.hsl(splitH, s, l).hex();
|
|
3752
|
-
}
|
|
3753
|
-
__name(generateSplitComplementaryColor1, "generateSplitComplementaryColor1");
|
|
3754
|
-
function generateSplitComplementaryColor2(baseHex) {
|
|
3755
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3756
|
-
const splitH = (h + 210) % 360;
|
|
3757
|
-
return chroma__default.default.hsl(splitH, s, l).hex();
|
|
3758
|
-
}
|
|
3759
|
-
__name(generateSplitComplementaryColor2, "generateSplitComplementaryColor2");
|
|
3760
|
-
function generateTetradicColors(baseHex) {
|
|
3761
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3762
|
-
return [
|
|
3763
|
-
chroma__default.default.hsl((h + 90) % 360, s, l).hex(),
|
|
3764
|
-
chroma__default.default.hsl((h + 180) % 360, s, l).hex(),
|
|
3765
|
-
chroma__default.default.hsl((h + 270) % 360, s, l).hex()
|
|
3766
|
-
];
|
|
3767
|
-
}
|
|
3768
|
-
__name(generateTetradicColors, "generateTetradicColors");
|
|
3769
|
-
function generateTetradicColor1(baseHex) {
|
|
3770
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3771
|
-
return chroma__default.default.hsl((h + 90) % 360, s, l).hex();
|
|
3772
|
-
}
|
|
3773
|
-
__name(generateTetradicColor1, "generateTetradicColor1");
|
|
3774
|
-
function generateTetradicColor3(baseHex) {
|
|
3775
|
-
const [h, s, l] = chroma__default.default(baseHex).hsl();
|
|
3776
|
-
return chroma__default.default.hsl((h + 270) % 360, s, l).hex();
|
|
3777
|
-
}
|
|
3778
|
-
__name(generateTetradicColor3, "generateTetradicColor3");
|
|
3918
|
+
// src/Theming/Utils/ThemeMode.ts
|
|
3919
|
+
var THEME_MODES = [
|
|
3920
|
+
"dark",
|
|
3921
|
+
"light"
|
|
3922
|
+
];
|
|
3779
3923
|
|
|
3780
|
-
// src/
|
|
3781
|
-
function
|
|
3782
|
-
const
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
700,
|
|
3795
|
-
800,
|
|
3796
|
-
900
|
|
3924
|
+
// src/Theming/Utils/ThemeScheme.ts
|
|
3925
|
+
(function(ThemeScheme2) {
|
|
3926
|
+
const ROLES = [
|
|
3927
|
+
"surface",
|
|
3928
|
+
"background",
|
|
3929
|
+
"foreground",
|
|
3930
|
+
"highlight",
|
|
3931
|
+
"middlelight",
|
|
3932
|
+
"lowlight",
|
|
3933
|
+
"transparent",
|
|
3934
|
+
"semiTransparent",
|
|
3935
|
+
"disabled",
|
|
3936
|
+
"contrast",
|
|
3937
|
+
"selection"
|
|
3797
3938
|
];
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3939
|
+
function isRole(value) {
|
|
3940
|
+
return ROLES.includes(value);
|
|
3941
|
+
}
|
|
3942
|
+
__name(isRole, "isRole");
|
|
3943
|
+
function isThemeScheme(value) {
|
|
3944
|
+
if (typeof value !== "object" || value === null) {
|
|
3945
|
+
return false;
|
|
3804
3946
|
}
|
|
3805
|
-
|
|
3806
|
-
}
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
const baseHSL = hexToHSL(baseHex);
|
|
3812
|
-
const triadicHSL = adjustHue(baseHSL, adjustment);
|
|
3813
|
-
const [h, s] = triadicHSL;
|
|
3814
|
-
return hslToHex(h, s, 0.5);
|
|
3815
|
-
}
|
|
3816
|
-
__name(generateTriadicColor, "generateTriadicColor");
|
|
3817
|
-
|
|
3818
|
-
// src/Colors/index.ts
|
|
3819
|
-
(function(Colors2) {
|
|
3820
|
-
Colors2.toDarken = darken;
|
|
3821
|
-
Colors2.toLighten = lighten;
|
|
3822
|
-
Colors2.toMaterialPalette = generateMaterialPalette;
|
|
3823
|
-
Colors2.toComplementaryPalette = generateComplementaryPalette;
|
|
3824
|
-
Colors2.toComplementaryColor = generateComplementaryColor;
|
|
3825
|
-
Colors2.toAnalogousPalette = generateAnalogousPalette;
|
|
3826
|
-
Colors2.toAnalogousColor = generateAnalogousColor;
|
|
3827
|
-
Colors2.toTriadicPalette = generateTriadicPalette;
|
|
3828
|
-
Colors2.toTriadicColor = generateTriadicColor;
|
|
3829
|
-
Colors2.toSplitComplementaryColors = generateSplitComplementaryColors;
|
|
3830
|
-
Colors2.toSplitComplementaryColor1 = generateSplitComplementaryColor1;
|
|
3831
|
-
Colors2.toSplitComplementaryColor2 = generateSplitComplementaryColor2;
|
|
3832
|
-
Colors2.toTetradicColors = generateTetradicColors;
|
|
3833
|
-
Colors2.toTetradicColor1 = generateTetradicColor1;
|
|
3834
|
-
Colors2.toTetradicColor3 = generateTetradicColor3;
|
|
3835
|
-
})(exports.Colors || (exports.Colors = {}));
|
|
3836
|
-
exports.Colors = void 0;
|
|
3947
|
+
return Object.entries(value).every(([key, color]) => isRole(key) && typeof color === "string");
|
|
3948
|
+
}
|
|
3949
|
+
__name(isThemeScheme, "isThemeScheme");
|
|
3950
|
+
ThemeScheme2.isThemeScheme = isThemeScheme;
|
|
3951
|
+
})(exports.ThemeScheme || (exports.ThemeScheme = {}));
|
|
3952
|
+
exports.ThemeScheme = void 0;
|
|
3837
3953
|
|
|
3838
3954
|
exports.BrowserPlatformAdapter = BrowserPlatformAdapter;
|
|
3839
3955
|
exports.CosmopolitanThemeGeneratorStrategy = CosmopolitanThemeGeneratorStrategy;
|
|
3956
|
+
exports.HslThemeGeneratorStrategy = HslThemeGeneratorStrategy;
|
|
3840
3957
|
exports.JoyThemeGeneratorStrategy = JoyThemeGeneratorStrategy;
|
|
3841
|
-
exports.
|
|
3958
|
+
exports.LchThemeGeneratorStrategy = LchThemeGeneratorStrategy;
|
|
3842
3959
|
exports.MemphisThemeGeneratorStrategy = MemphisThemeGeneratorStrategy;
|
|
3843
3960
|
exports.NodePlatformAdapter = NodePlatformAdapter;
|
|
3844
3961
|
exports.PlatformAdapterFactory = PlatformAdapterFactory;
|
|
3845
3962
|
exports.THEME_MODES = THEME_MODES;
|
|
3846
|
-
exports.TailwindThemeGeneratorStrategy = TailwindThemeGeneratorStrategy;
|
|
3847
3963
|
exports.ThemeGenerator = ThemeGenerator;
|
|
3848
3964
|
exports.ThemeGeneratorServiceLocator = ThemeGeneratorServiceLocator;
|
|
3849
3965
|
exports.ThemeObserver = ThemeObserver;
|
|
3850
3966
|
exports.ThemeObserverServiceLocator = ThemeObserverServiceLocator;
|
|
3851
3967
|
exports.createCosmopolitanTheme = createCosmopolitanTheme;
|
|
3852
3968
|
exports.createJoyTheme = createJoyTheme;
|
|
3853
|
-
exports.createMaterialTheme = createMaterialTheme;
|
|
3854
3969
|
exports.createMemphisTheme = createMemphisTheme;
|
|
3855
|
-
exports.createTailwindTheme = createTailwindTheme;
|
|
3856
3970
|
//# sourceMappingURL=index.cjs.map
|
|
3857
3971
|
//# sourceMappingURL=index.cjs.map
|