@matteoaliano/forest-ui 0.2.11 → 0.3.1
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/README.md +123 -0
- package/dist/{chunk-6W3RIXXY.mjs → chunk-GZ6FQWHG.mjs} +1317 -607
- package/dist/chunk-GZ6FQWHG.mjs.map +1 -0
- package/dist/{index-DJDmMb_c.d.mts → index-CSpNzZHg.d.mts} +350 -223
- package/dist/{index-DJDmMb_c.d.ts → index-CSpNzZHg.d.ts} +350 -223
- package/dist/index.d.mts +36 -11
- package/dist/index.d.ts +36 -11
- package/dist/index.js +1286 -644
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +87 -16
- package/dist/index.mjs.map +1 -1
- package/dist/theme.d.mts +1 -1
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +1324 -606
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +1 -1
- package/fonts/alkemy-beta/AlkemyBETA-Medium.otf +0 -0
- package/fonts/alkemy-beta/alkemy-beta.css +10 -0
- package/guidelines/FOREST_BE_GUIDELINES.md +1 -1
- package/guidelines/FOREST_FE_GUIDELINES.md +1 -1
- package/guidelines/FOREST_UI_GUIDELINES.md +1 -1
- package/package.json +20 -6
- package/dist/chunk-6W3RIXXY.mjs.map +0 -1
package/dist/theme.js
CHANGED
|
@@ -2,184 +2,296 @@
|
|
|
2
2
|
|
|
3
3
|
var styles = require('@mui/material/styles');
|
|
4
4
|
|
|
5
|
-
// src/theme/
|
|
5
|
+
// src/theme/buildTheme.ts
|
|
6
6
|
|
|
7
7
|
// src/theme/tokens.ts
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
700: "#067647",
|
|
80
|
-
800: "#085d3a",
|
|
81
|
-
900: "#074d31",
|
|
82
|
-
950: "#053321"
|
|
83
|
-
},
|
|
84
|
-
blue: {
|
|
85
|
-
25: "#f5faff",
|
|
86
|
-
50: "#eff8ff",
|
|
87
|
-
100: "#d1e9ff",
|
|
88
|
-
200: "#b2ddff",
|
|
89
|
-
300: "#84caff",
|
|
90
|
-
400: "#53b1fd",
|
|
91
|
-
500: "#2e90fa",
|
|
92
|
-
600: "#1570ef",
|
|
93
|
-
700: "#175cd3",
|
|
94
|
-
800: "#1849a9",
|
|
95
|
-
900: "#194185",
|
|
96
|
-
950: "#102a56"
|
|
97
|
-
},
|
|
8
|
+
var violet = {
|
|
9
|
+
25: "#faf8ff",
|
|
10
|
+
50: "#f5f0ff",
|
|
11
|
+
100: "#ebe0ff",
|
|
12
|
+
200: "#d6c0ff",
|
|
13
|
+
300: "#b090ff",
|
|
14
|
+
400: "#9D5FFF",
|
|
15
|
+
500: "#7c4de6",
|
|
16
|
+
600: "#5b3acc",
|
|
17
|
+
700: "#3a1aad",
|
|
18
|
+
800: "#190a8a",
|
|
19
|
+
900: "#000066",
|
|
20
|
+
950: "#000033"
|
|
21
|
+
};
|
|
22
|
+
var magenta = {
|
|
23
|
+
25: "#fff8fd",
|
|
24
|
+
50: "#fff0fa",
|
|
25
|
+
100: "#ffe0f5",
|
|
26
|
+
200: "#ffc0eb",
|
|
27
|
+
300: "#ff90d8",
|
|
28
|
+
400: "#FF78F3",
|
|
29
|
+
500: "#e650d4",
|
|
30
|
+
600: "#cc28b5",
|
|
31
|
+
700: "#a3008c",
|
|
32
|
+
800: "#7a0066",
|
|
33
|
+
900: "#520044",
|
|
34
|
+
950: "#290022"
|
|
35
|
+
};
|
|
36
|
+
var gray = {
|
|
37
|
+
25: "#fdfcfc",
|
|
38
|
+
50: "#faf9f8",
|
|
39
|
+
100: "#f5f3f1",
|
|
40
|
+
200: "#e8e5e3",
|
|
41
|
+
300: "#d8d8dc",
|
|
42
|
+
400: "#a0a0a6",
|
|
43
|
+
500: "#71717a",
|
|
44
|
+
600: "#52525b",
|
|
45
|
+
700: "#3f3f46",
|
|
46
|
+
800: "#27272a",
|
|
47
|
+
900: "#18181b",
|
|
48
|
+
950: "#09090b"
|
|
49
|
+
};
|
|
50
|
+
var red = {
|
|
51
|
+
25: "#fff8f7",
|
|
52
|
+
50: "#fff0ee",
|
|
53
|
+
100: "#ffe0dd",
|
|
54
|
+
200: "#ffc0bb",
|
|
55
|
+
300: "#ff9090",
|
|
56
|
+
400: "#FF2821",
|
|
57
|
+
500: "#e61a1a",
|
|
58
|
+
600: "#cc1010",
|
|
59
|
+
700: "#a30808",
|
|
60
|
+
800: "#7a0000",
|
|
61
|
+
900: "#520000",
|
|
62
|
+
950: "#290000"
|
|
63
|
+
};
|
|
64
|
+
var info = {
|
|
65
|
+
25: "#f5faff",
|
|
66
|
+
50: "#eff8ff",
|
|
67
|
+
100: "#d1e9ff",
|
|
68
|
+
200: "#b2ddff",
|
|
69
|
+
300: "#84caff",
|
|
70
|
+
400: "#53b1fd",
|
|
71
|
+
500: "#2e90fa",
|
|
72
|
+
600: "#1570ef",
|
|
73
|
+
700: "#175cd3",
|
|
74
|
+
800: "#1849a9",
|
|
75
|
+
900: "#194185",
|
|
76
|
+
950: "#102a56"
|
|
77
|
+
};
|
|
78
|
+
var misc = {
|
|
98
79
|
teal: {
|
|
80
|
+
25: "#f6fefc",
|
|
99
81
|
50: "#f0fdf9",
|
|
100
82
|
100: "#ccfbef",
|
|
101
83
|
200: "#99f6e0",
|
|
102
84
|
300: "#5fe9d0",
|
|
103
85
|
400: "#2ed3b7",
|
|
86
|
+
500: "#15b79e",
|
|
104
87
|
600: "#0e9384",
|
|
105
|
-
700: "#107569"
|
|
88
|
+
700: "#107569",
|
|
89
|
+
800: "#125d56",
|
|
90
|
+
900: "#134e48",
|
|
91
|
+
950: "#0a2926"
|
|
106
92
|
},
|
|
107
93
|
orange: {
|
|
94
|
+
25: "#fefaf5",
|
|
95
|
+
50: "#fef6ee",
|
|
108
96
|
100: "#fdead7",
|
|
109
97
|
200: "#f9dbaf",
|
|
110
98
|
300: "#f7b27a",
|
|
111
99
|
400: "#f38744",
|
|
100
|
+
500: "#ef6820",
|
|
112
101
|
600: "#e04f16",
|
|
113
|
-
700: "#b93815"
|
|
102
|
+
700: "#b93815",
|
|
103
|
+
800: "#932f19",
|
|
104
|
+
900: "#772917",
|
|
105
|
+
950: "#511c10"
|
|
114
106
|
},
|
|
115
107
|
purple: {
|
|
108
|
+
25: "#fafaff",
|
|
109
|
+
50: "#f4f3ff",
|
|
116
110
|
100: "#ebe9fe",
|
|
117
111
|
200: "#d9d6fe",
|
|
112
|
+
300: "#bdb4fe",
|
|
113
|
+
400: "#9b8afb",
|
|
114
|
+
500: "#7a5af8",
|
|
118
115
|
600: "#6938ef",
|
|
119
|
-
700: "#5925dc"
|
|
116
|
+
700: "#5925dc",
|
|
117
|
+
800: "#4a1fb8",
|
|
118
|
+
900: "#3e1c96",
|
|
119
|
+
950: "#27115f"
|
|
120
120
|
},
|
|
121
121
|
pink: {
|
|
122
|
+
25: "#fef6fb",
|
|
123
|
+
50: "#fdf2fa",
|
|
122
124
|
100: "#fce7f6",
|
|
123
125
|
200: "#fcceee",
|
|
126
|
+
300: "#faa7e0",
|
|
124
127
|
400: "#f670c7",
|
|
125
128
|
500: "#ee46bc",
|
|
126
129
|
600: "#dd2590",
|
|
127
|
-
700: "#c11574"
|
|
130
|
+
700: "#c11574",
|
|
131
|
+
800: "#9e165f",
|
|
132
|
+
900: "#851651",
|
|
133
|
+
950: "#4e0d30"
|
|
128
134
|
},
|
|
129
135
|
fuchsia: {
|
|
136
|
+
25: "#fefaff",
|
|
137
|
+
50: "#fdf4ff",
|
|
130
138
|
100: "#fbe8ff",
|
|
131
139
|
200: "#f6d0fe",
|
|
140
|
+
300: "#eeaafd",
|
|
132
141
|
400: "#e478fa",
|
|
133
142
|
500: "#d444f1",
|
|
134
143
|
600: "#ba24d5",
|
|
135
|
-
700: "#9f1ab1"
|
|
144
|
+
700: "#9f1ab1",
|
|
145
|
+
800: "#821890",
|
|
146
|
+
900: "#6f1877",
|
|
147
|
+
950: "#47104c"
|
|
136
148
|
},
|
|
137
149
|
orangeDark: {
|
|
150
|
+
25: "#fff9f5",
|
|
151
|
+
50: "#fff4ed",
|
|
138
152
|
100: "#ffe6d5",
|
|
139
153
|
200: "#ffd6ae",
|
|
154
|
+
300: "#ff9c66",
|
|
140
155
|
400: "#ff692e",
|
|
141
156
|
500: "#ff4405",
|
|
142
157
|
600: "#e62e05",
|
|
143
|
-
700: "#bc1b06"
|
|
158
|
+
700: "#bc1b06",
|
|
159
|
+
800: "#97180c",
|
|
160
|
+
900: "#771a0d",
|
|
161
|
+
950: "#57130a"
|
|
144
162
|
},
|
|
145
163
|
green: {
|
|
164
|
+
25: "#f6fef9",
|
|
165
|
+
50: "#edfcf2",
|
|
146
166
|
100: "#d3f8df",
|
|
147
167
|
200: "#aaf0c4",
|
|
168
|
+
300: "#73e2a3",
|
|
169
|
+
400: "#3ccb7f",
|
|
148
170
|
500: "#16b364",
|
|
149
171
|
600: "#099250",
|
|
150
|
-
700: "#087443"
|
|
172
|
+
700: "#087443",
|
|
173
|
+
800: "#095c37",
|
|
174
|
+
900: "#084c2e",
|
|
175
|
+
950: "#052e1c"
|
|
151
176
|
},
|
|
152
177
|
indigo: {
|
|
178
|
+
25: "#f5f8ff",
|
|
179
|
+
50: "#eef4ff",
|
|
153
180
|
100: "#e0eaff",
|
|
154
181
|
200: "#c7d7fe",
|
|
182
|
+
300: "#a4bcfd",
|
|
183
|
+
400: "#8098f9",
|
|
184
|
+
500: "#6172f3",
|
|
155
185
|
600: "#444ce7",
|
|
156
|
-
700: "#3538cd"
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
200: "#ddd6fe",
|
|
161
|
-
500: "#875bf7",
|
|
162
|
-
600: "#7839ee"
|
|
186
|
+
700: "#3538cd",
|
|
187
|
+
800: "#2d31a6",
|
|
188
|
+
900: "#2d3282",
|
|
189
|
+
950: "#1f235b"
|
|
163
190
|
},
|
|
164
191
|
rose: {
|
|
192
|
+
25: "#fff5f6",
|
|
193
|
+
50: "#fff1f3",
|
|
165
194
|
100: "#ffe4e8",
|
|
166
195
|
200: "#fecdd6",
|
|
196
|
+
300: "#fea3b4",
|
|
167
197
|
400: "#fd6f8e",
|
|
168
|
-
500: "#f63d68"
|
|
198
|
+
500: "#f63d68",
|
|
199
|
+
600: "#e31b54",
|
|
200
|
+
700: "#c01048",
|
|
201
|
+
800: "#a11043",
|
|
202
|
+
900: "#89123e",
|
|
203
|
+
950: "#510b24"
|
|
169
204
|
},
|
|
170
205
|
blueLight: {
|
|
206
|
+
25: "#f5fbff",
|
|
207
|
+
50: "#f0f9ff",
|
|
171
208
|
100: "#e0f2fe",
|
|
172
209
|
200: "#b9e6fe",
|
|
210
|
+
300: "#7cd4fd",
|
|
173
211
|
400: "#36bffa",
|
|
174
|
-
500: "#0ba5ec"
|
|
212
|
+
500: "#0ba5ec",
|
|
213
|
+
600: "#0086c9",
|
|
214
|
+
700: "#026aa2",
|
|
215
|
+
800: "#065986",
|
|
216
|
+
900: "#0b4a6f",
|
|
217
|
+
950: "#062c41"
|
|
175
218
|
},
|
|
176
219
|
cyan: {
|
|
220
|
+
25: "#f5feff",
|
|
221
|
+
50: "#ecfdff",
|
|
177
222
|
100: "#cff9fe",
|
|
178
223
|
200: "#a5f0fc",
|
|
224
|
+
300: "#67e3f9",
|
|
225
|
+
400: "#22ccee",
|
|
226
|
+
500: "#06aed4",
|
|
179
227
|
600: "#088ab2",
|
|
180
|
-
700: "#0e7090"
|
|
228
|
+
700: "#0e7090",
|
|
229
|
+
800: "#155b75",
|
|
230
|
+
900: "#164c63",
|
|
231
|
+
950: "#0d2d3a"
|
|
181
232
|
}
|
|
182
233
|
};
|
|
234
|
+
var radiusSharp = {
|
|
235
|
+
xxs: 1,
|
|
236
|
+
xs: 2,
|
|
237
|
+
sm: 3,
|
|
238
|
+
md: 4,
|
|
239
|
+
lg: 5,
|
|
240
|
+
xl: 6,
|
|
241
|
+
"2xl": 8,
|
|
242
|
+
"3xl": 10,
|
|
243
|
+
"4xl": 12
|
|
244
|
+
};
|
|
245
|
+
var colors = {
|
|
246
|
+
base: {
|
|
247
|
+
white: "#ffffff",
|
|
248
|
+
black: "#000000",
|
|
249
|
+
transparent: "#ffffff00"
|
|
250
|
+
},
|
|
251
|
+
error: {
|
|
252
|
+
25: "#fffbfa",
|
|
253
|
+
50: "#fef3f2",
|
|
254
|
+
100: "#fee4e2",
|
|
255
|
+
200: "#fecdca",
|
|
256
|
+
300: "#fda29b",
|
|
257
|
+
400: "#f97066",
|
|
258
|
+
500: "#f04438",
|
|
259
|
+
600: "#d92d20",
|
|
260
|
+
700: "#b42318",
|
|
261
|
+
800: "#912018",
|
|
262
|
+
900: "#7a271a",
|
|
263
|
+
950: "#55160c"
|
|
264
|
+
},
|
|
265
|
+
warning: {
|
|
266
|
+
25: "#fffcf5",
|
|
267
|
+
50: "#fffaeb",
|
|
268
|
+
100: "#fef0c7",
|
|
269
|
+
200: "#fedf89",
|
|
270
|
+
300: "#fec84b",
|
|
271
|
+
400: "#fdb022",
|
|
272
|
+
500: "#f79009",
|
|
273
|
+
600: "#dc6803",
|
|
274
|
+
700: "#b54708",
|
|
275
|
+
800: "#93370d",
|
|
276
|
+
900: "#7a2e0e",
|
|
277
|
+
950: "#4e1d09"
|
|
278
|
+
},
|
|
279
|
+
success: {
|
|
280
|
+
25: "#f6fef9",
|
|
281
|
+
50: "#ecfdf3",
|
|
282
|
+
100: "#dcfae6",
|
|
283
|
+
200: "#abefc6",
|
|
284
|
+
300: "#75e0a7",
|
|
285
|
+
400: "#47cd89",
|
|
286
|
+
500: "#17b26a",
|
|
287
|
+
600: "#079455",
|
|
288
|
+
700: "#067647",
|
|
289
|
+
800: "#085d3a",
|
|
290
|
+
900: "#074d31",
|
|
291
|
+
950: "#053321"
|
|
292
|
+
},
|
|
293
|
+
info
|
|
294
|
+
};
|
|
183
295
|
var spacing = {
|
|
184
296
|
none: 0,
|
|
185
297
|
xxs: 2,
|
|
@@ -222,12 +334,12 @@ var shadows = {
|
|
|
222
334
|
"3xl": "0px 32px 64px -12px #10182824"
|
|
223
335
|
};
|
|
224
336
|
var focusRings = {
|
|
225
|
-
brand: "0px 0px 0px 4px #
|
|
226
|
-
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #
|
|
227
|
-
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #
|
|
228
|
-
gray: "0px 0px 0px 4px #
|
|
229
|
-
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #
|
|
230
|
-
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #
|
|
337
|
+
brand: "0px 0px 0px 4px #7c4de63d",
|
|
338
|
+
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #7c4de63d",
|
|
339
|
+
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #7c4de63d",
|
|
340
|
+
gray: "0px 0px 0px 4px #a0a0a624",
|
|
341
|
+
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
|
|
342
|
+
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
|
|
231
343
|
error: "0px 0px 0px 4px #f044383d",
|
|
232
344
|
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
233
345
|
};
|
|
@@ -281,51 +393,51 @@ var widths = {
|
|
|
281
393
|
"6xl": 1920
|
|
282
394
|
};
|
|
283
395
|
var text = {
|
|
284
|
-
primary:
|
|
285
|
-
secondary:
|
|
286
|
-
secondaryHover:
|
|
287
|
-
tertiary:
|
|
288
|
-
tertiaryHover:
|
|
289
|
-
quaternary:
|
|
290
|
-
disabled:
|
|
291
|
-
placeholder:
|
|
292
|
-
placeholderSubtle:
|
|
396
|
+
primary: gray[900],
|
|
397
|
+
secondary: gray[700],
|
|
398
|
+
secondaryHover: gray[800],
|
|
399
|
+
tertiary: gray[600],
|
|
400
|
+
tertiaryHover: gray[700],
|
|
401
|
+
quaternary: gray[500],
|
|
402
|
+
disabled: gray[500],
|
|
403
|
+
placeholder: gray[500],
|
|
404
|
+
placeholderSubtle: gray[300],
|
|
293
405
|
white: colors.base.white,
|
|
294
|
-
brandPrimary:
|
|
295
|
-
brandSecondary:
|
|
296
|
-
brandTertiary:
|
|
297
|
-
brandTertiaryAlt:
|
|
406
|
+
brandPrimary: violet[900],
|
|
407
|
+
brandSecondary: violet[700],
|
|
408
|
+
brandTertiary: violet[600],
|
|
409
|
+
brandTertiaryAlt: violet[600],
|
|
298
410
|
primaryOnBrand: colors.base.white,
|
|
299
|
-
secondaryOnBrand:
|
|
300
|
-
tertiaryOnBrand:
|
|
301
|
-
quaternaryOnBrand:
|
|
411
|
+
secondaryOnBrand: violet[200],
|
|
412
|
+
tertiaryOnBrand: violet[200],
|
|
413
|
+
quaternaryOnBrand: violet[300],
|
|
302
414
|
errorPrimary: colors.error[600],
|
|
303
415
|
warningPrimary: colors.warning[600],
|
|
304
416
|
successPrimary: colors.success[600]
|
|
305
417
|
};
|
|
306
418
|
var bg = {
|
|
307
|
-
primary:
|
|
308
|
-
primaryAlt:
|
|
309
|
-
primaryHover:
|
|
310
|
-
primarySolid:
|
|
419
|
+
primary: gray[50],
|
|
420
|
+
primaryAlt: gray[50],
|
|
421
|
+
primaryHover: gray[100],
|
|
422
|
+
primarySolid: gray[950],
|
|
311
423
|
secondary: colors.base.white,
|
|
312
424
|
secondaryAlt: colors.base.white,
|
|
313
|
-
secondarySubtle:
|
|
314
|
-
secondaryHover:
|
|
315
|
-
secondarySolid:
|
|
316
|
-
tertiary:
|
|
317
|
-
quaternary:
|
|
318
|
-
active:
|
|
319
|
-
disabled:
|
|
320
|
-
disabledSubtle:
|
|
321
|
-
overlay:
|
|
322
|
-
brandPrimary:
|
|
323
|
-
brandPrimaryAlt:
|
|
324
|
-
brandSecondary:
|
|
325
|
-
brandSolid:
|
|
326
|
-
brandSolidHover:
|
|
327
|
-
brandSection:
|
|
328
|
-
brandSectionSubtle:
|
|
425
|
+
secondarySubtle: gray[25],
|
|
426
|
+
secondaryHover: gray[50],
|
|
427
|
+
secondarySolid: gray[600],
|
|
428
|
+
tertiary: gray[100],
|
|
429
|
+
quaternary: gray[200],
|
|
430
|
+
active: gray[200],
|
|
431
|
+
disabled: gray[100],
|
|
432
|
+
disabledSubtle: gray[50],
|
|
433
|
+
overlay: gray[950],
|
|
434
|
+
brandPrimary: violet[50],
|
|
435
|
+
brandPrimaryAlt: violet[50],
|
|
436
|
+
brandSecondary: violet[100],
|
|
437
|
+
brandSolid: violet[600],
|
|
438
|
+
brandSolidHover: violet[700],
|
|
439
|
+
brandSection: violet[800],
|
|
440
|
+
brandSectionSubtle: violet[700],
|
|
329
441
|
errorPrimary: colors.error[50],
|
|
330
442
|
errorSecondary: colors.error[100],
|
|
331
443
|
errorSolid: colors.error[600],
|
|
@@ -337,22 +449,22 @@ var bg = {
|
|
|
337
449
|
successSolid: colors.success[600]
|
|
338
450
|
};
|
|
339
451
|
var fg = {
|
|
340
|
-
primary:
|
|
341
|
-
secondary:
|
|
342
|
-
secondaryHover:
|
|
343
|
-
tertiary:
|
|
344
|
-
tertiaryHover:
|
|
345
|
-
quaternary:
|
|
346
|
-
quaternaryHover:
|
|
347
|
-
quinary:
|
|
348
|
-
quinaryHover:
|
|
349
|
-
senary:
|
|
452
|
+
primary: gray[900],
|
|
453
|
+
secondary: gray[700],
|
|
454
|
+
secondaryHover: gray[800],
|
|
455
|
+
tertiary: gray[600],
|
|
456
|
+
tertiaryHover: gray[700],
|
|
457
|
+
quaternary: gray[500],
|
|
458
|
+
quaternaryHover: gray[600],
|
|
459
|
+
quinary: gray[400],
|
|
460
|
+
quinaryHover: gray[500],
|
|
461
|
+
senary: gray[300],
|
|
350
462
|
white: colors.base.white,
|
|
351
|
-
disabled:
|
|
352
|
-
disabledSubtle:
|
|
353
|
-
brandPrimary:
|
|
354
|
-
brandPrimaryAlt:
|
|
355
|
-
brandSecondary:
|
|
463
|
+
disabled: gray[400],
|
|
464
|
+
disabledSubtle: gray[300],
|
|
465
|
+
brandPrimary: violet[600],
|
|
466
|
+
brandPrimaryAlt: violet[600],
|
|
467
|
+
brandSecondary: violet[500],
|
|
356
468
|
errorPrimary: colors.error[600],
|
|
357
469
|
errorSecondary: colors.error[500],
|
|
358
470
|
warningPrimary: colors.warning[600],
|
|
@@ -361,51 +473,51 @@ var fg = {
|
|
|
361
473
|
successSecondary: colors.success[500]
|
|
362
474
|
};
|
|
363
475
|
var border = {
|
|
364
|
-
primary:
|
|
365
|
-
secondary:
|
|
366
|
-
tertiary:
|
|
367
|
-
disabled:
|
|
368
|
-
disabledSubtle:
|
|
369
|
-
brand:
|
|
370
|
-
brandSolid:
|
|
371
|
-
brandSolidAlt:
|
|
476
|
+
primary: gray[300],
|
|
477
|
+
secondary: gray[200],
|
|
478
|
+
tertiary: gray[100],
|
|
479
|
+
disabled: gray[300],
|
|
480
|
+
disabledSubtle: gray[200],
|
|
481
|
+
brand: violet[300],
|
|
482
|
+
brandSolid: violet[600],
|
|
483
|
+
brandSolidAlt: violet[600],
|
|
372
484
|
error: colors.error[300],
|
|
373
485
|
errorSolid: colors.error[600]
|
|
374
486
|
};
|
|
375
487
|
var buttonColors = {
|
|
376
488
|
primary: {
|
|
377
|
-
bg:
|
|
378
|
-
bgHover:
|
|
489
|
+
bg: violet[600],
|
|
490
|
+
bgHover: violet[700],
|
|
379
491
|
fg: colors.base.white,
|
|
380
492
|
fgHover: colors.base.white,
|
|
381
|
-
border:
|
|
382
|
-
borderHover:
|
|
493
|
+
border: violet[600],
|
|
494
|
+
borderHover: violet[700]
|
|
383
495
|
},
|
|
384
496
|
secondary: {
|
|
385
497
|
bg: colors.base.white,
|
|
386
|
-
bgHover:
|
|
387
|
-
fg:
|
|
388
|
-
fgHover:
|
|
389
|
-
border:
|
|
390
|
-
borderHover:
|
|
498
|
+
bgHover: gray[50],
|
|
499
|
+
fg: gray[700],
|
|
500
|
+
fgHover: gray[800],
|
|
501
|
+
border: gray[300],
|
|
502
|
+
borderHover: gray[300]
|
|
391
503
|
},
|
|
392
504
|
secondaryColor: {
|
|
393
505
|
bg: colors.base.white,
|
|
394
|
-
bgHover:
|
|
395
|
-
fg:
|
|
396
|
-
fgHover:
|
|
397
|
-
border:
|
|
398
|
-
borderHover:
|
|
506
|
+
bgHover: violet[50],
|
|
507
|
+
fg: violet[700],
|
|
508
|
+
fgHover: violet[800],
|
|
509
|
+
border: violet[300],
|
|
510
|
+
borderHover: violet[300]
|
|
399
511
|
},
|
|
400
512
|
tertiary: {
|
|
401
|
-
fg:
|
|
402
|
-
fgHover:
|
|
403
|
-
bgHover:
|
|
513
|
+
fg: gray[600],
|
|
514
|
+
fgHover: gray[700],
|
|
515
|
+
bgHover: gray[50]
|
|
404
516
|
},
|
|
405
517
|
tertiaryColor: {
|
|
406
|
-
fg:
|
|
407
|
-
fgHover:
|
|
408
|
-
bgHover:
|
|
518
|
+
fg: violet[700],
|
|
519
|
+
fgHover: violet[800],
|
|
520
|
+
bgHover: violet[50]
|
|
409
521
|
},
|
|
410
522
|
primaryError: {
|
|
411
523
|
bg: colors.error[600],
|
|
@@ -430,27 +542,27 @@ var buttonColors = {
|
|
|
430
542
|
}
|
|
431
543
|
};
|
|
432
544
|
var avatarColors = {
|
|
433
|
-
bg:
|
|
545
|
+
bg: gray[100],
|
|
434
546
|
contrastBorder: "#00000014",
|
|
435
547
|
profilePhotoBorder: colors.base.white,
|
|
436
|
-
focusBorder: "#
|
|
548
|
+
focusBorder: "#a0a0a624"
|
|
437
549
|
};
|
|
438
550
|
var breadcrumbColors = {
|
|
439
|
-
fg:
|
|
440
|
-
fgHover:
|
|
441
|
-
bgHover:
|
|
442
|
-
brandBgHover:
|
|
443
|
-
brandFgHover:
|
|
444
|
-
iconFg:
|
|
445
|
-
iconFgHover:
|
|
446
|
-
brandIconFgHover:
|
|
551
|
+
fg: gray[600],
|
|
552
|
+
fgHover: gray[700],
|
|
553
|
+
bgHover: gray[50],
|
|
554
|
+
brandBgHover: violet[50],
|
|
555
|
+
brandFgHover: violet[700],
|
|
556
|
+
iconFg: gray[500],
|
|
557
|
+
iconFgHover: gray[700],
|
|
558
|
+
brandIconFgHover: violet[700]
|
|
447
559
|
};
|
|
448
560
|
var iconColors = {
|
|
449
|
-
fgBrand:
|
|
450
|
-
fgBrandOnBrand:
|
|
451
|
-
featuredModernBorder:
|
|
452
|
-
featuredLightFgBrand:
|
|
453
|
-
featuredLightFgGray:
|
|
561
|
+
fgBrand: violet[600],
|
|
562
|
+
fgBrandOnBrand: violet[200],
|
|
563
|
+
featuredModernBorder: gray[200],
|
|
564
|
+
featuredLightFgBrand: violet[600],
|
|
565
|
+
featuredLightFgGray: gray[500],
|
|
454
566
|
featuredLightFgError: colors.error[600],
|
|
455
567
|
featuredLightFgWarning: colors.warning[600],
|
|
456
568
|
featuredLightFgSuccess: colors.success[600],
|
|
@@ -461,42 +573,42 @@ var iconColors = {
|
|
|
461
573
|
featuredDarkFgSuccess: colors.base.white
|
|
462
574
|
};
|
|
463
575
|
var navColors = {
|
|
464
|
-
itemIconFg:
|
|
465
|
-
itemIconFgActive:
|
|
466
|
-
itemButtonIconFg:
|
|
467
|
-
itemButtonIconFgActive:
|
|
576
|
+
itemIconFg: gray[500],
|
|
577
|
+
itemIconFgActive: gray[700],
|
|
578
|
+
itemButtonIconFg: gray[500],
|
|
579
|
+
itemButtonIconFgActive: gray[700]
|
|
468
580
|
};
|
|
469
581
|
var sliderColors = {
|
|
470
|
-
handleBorder:
|
|
582
|
+
handleBorder: violet[600],
|
|
471
583
|
handleBg: colors.base.white
|
|
472
584
|
};
|
|
473
585
|
var toggleColors = {
|
|
474
|
-
buttonFgDisabled:
|
|
586
|
+
buttonFgDisabled: gray[50]
|
|
475
587
|
};
|
|
476
588
|
var chartColors = {
|
|
477
|
-
axisFg:
|
|
478
|
-
gridlineFg:
|
|
479
|
-
labelFg:
|
|
480
|
-
labelFgEmphasis:
|
|
589
|
+
axisFg: gray[100],
|
|
590
|
+
gridlineFg: gray[100],
|
|
591
|
+
labelFg: gray[600],
|
|
592
|
+
labelFgEmphasis: gray[700],
|
|
481
593
|
bg: colors.base.white,
|
|
482
|
-
bgAlt:
|
|
483
|
-
tooltipBg:
|
|
594
|
+
bgAlt: gray[50],
|
|
595
|
+
tooltipBg: gray[950],
|
|
484
596
|
tooltipFg: colors.base.white,
|
|
485
|
-
crosshairFg:
|
|
597
|
+
crosshairFg: gray[500],
|
|
486
598
|
legendFg: text.tertiary,
|
|
487
599
|
series: [
|
|
488
|
-
{ fg:
|
|
489
|
-
{ fg:
|
|
490
|
-
{ fg:
|
|
600
|
+
{ fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
|
|
601
|
+
{ fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
|
|
602
|
+
{ fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
|
|
491
603
|
{ fg: colors.warning[400], fgHover: colors.warning[500], bg: colors.warning[100], bgHover: colors.warning[200] },
|
|
492
|
-
{ fg:
|
|
493
|
-
{ fg:
|
|
494
|
-
{ fg:
|
|
495
|
-
{ fg:
|
|
496
|
-
{ fg:
|
|
497
|
-
{ fg:
|
|
498
|
-
{ fg:
|
|
499
|
-
{ fg:
|
|
604
|
+
{ fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
|
|
605
|
+
{ fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
|
|
606
|
+
{ fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
|
|
607
|
+
{ fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
|
|
608
|
+
{ fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
|
|
609
|
+
{ fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
|
|
610
|
+
{ fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
|
|
611
|
+
{ fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
|
|
500
612
|
]
|
|
501
613
|
};
|
|
502
614
|
var alpha = {
|
|
@@ -529,60 +641,60 @@ var alpha = {
|
|
|
529
641
|
// src/theme/palette.ts
|
|
530
642
|
function buildPalette(tokens) {
|
|
531
643
|
var _a;
|
|
532
|
-
const { colors:
|
|
644
|
+
const { colors: colors5, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
|
|
533
645
|
return {
|
|
534
646
|
primary: {
|
|
535
|
-
main:
|
|
536
|
-
light:
|
|
537
|
-
dark:
|
|
538
|
-
contrastText:
|
|
647
|
+
main: violet[600],
|
|
648
|
+
light: violet[400],
|
|
649
|
+
dark: violet[700],
|
|
650
|
+
contrastText: tokens.colors.base.white
|
|
539
651
|
},
|
|
540
652
|
secondary: {
|
|
541
|
-
main:
|
|
542
|
-
light:
|
|
543
|
-
dark:
|
|
544
|
-
contrastText:
|
|
653
|
+
main: gray[600],
|
|
654
|
+
light: gray[400],
|
|
655
|
+
dark: gray[700],
|
|
656
|
+
contrastText: tokens.colors.base.white
|
|
545
657
|
},
|
|
546
658
|
error: {
|
|
547
|
-
main:
|
|
548
|
-
light:
|
|
549
|
-
dark:
|
|
550
|
-
contrastText:
|
|
659
|
+
main: colors5.error[600],
|
|
660
|
+
light: colors5.error[300],
|
|
661
|
+
dark: colors5.error[700],
|
|
662
|
+
contrastText: colors5.base.white
|
|
551
663
|
},
|
|
552
664
|
warning: {
|
|
553
|
-
main:
|
|
554
|
-
light:
|
|
555
|
-
dark:
|
|
556
|
-
contrastText:
|
|
665
|
+
main: colors5.warning[600],
|
|
666
|
+
light: colors5.warning[300],
|
|
667
|
+
dark: colors5.warning[700],
|
|
668
|
+
contrastText: colors5.base.white
|
|
557
669
|
},
|
|
558
670
|
success: {
|
|
559
|
-
main:
|
|
560
|
-
light:
|
|
561
|
-
dark:
|
|
562
|
-
contrastText:
|
|
671
|
+
main: colors5.success[600],
|
|
672
|
+
light: colors5.success[300],
|
|
673
|
+
dark: colors5.success[700],
|
|
674
|
+
contrastText: colors5.base.white
|
|
563
675
|
},
|
|
564
676
|
info: {
|
|
565
|
-
main:
|
|
566
|
-
light:
|
|
567
|
-
dark:
|
|
568
|
-
contrastText:
|
|
677
|
+
main: tokens.colors.info[600],
|
|
678
|
+
light: tokens.colors.info[300],
|
|
679
|
+
dark: tokens.colors.info[700],
|
|
680
|
+
contrastText: tokens.colors.base.white
|
|
569
681
|
},
|
|
570
682
|
background: {
|
|
571
|
-
default:
|
|
572
|
-
paper:
|
|
683
|
+
default: bg5.primary,
|
|
684
|
+
paper: bg5.secondary
|
|
573
685
|
},
|
|
574
686
|
text: {
|
|
575
|
-
primary:
|
|
576
|
-
secondary:
|
|
577
|
-
disabled:
|
|
687
|
+
primary: text5.primary,
|
|
688
|
+
secondary: text5.secondary,
|
|
689
|
+
disabled: text5.disabled
|
|
578
690
|
},
|
|
579
|
-
divider:
|
|
691
|
+
divider: border5.secondary,
|
|
580
692
|
action: {
|
|
581
|
-
active:
|
|
582
|
-
hover:
|
|
583
|
-
selected:
|
|
584
|
-
disabled:
|
|
585
|
-
disabledBackground:
|
|
693
|
+
active: fg5.tertiary,
|
|
694
|
+
hover: bg5.primaryHover,
|
|
695
|
+
selected: bg5.brandPrimary,
|
|
696
|
+
disabled: fg5.disabled,
|
|
697
|
+
disabledBackground: bg5.disabled
|
|
586
698
|
},
|
|
587
699
|
chart: (_a = tokens.chartColors) != null ? _a : chartColors
|
|
588
700
|
};
|
|
@@ -686,18 +798,78 @@ var typography = buildTypography({
|
|
|
686
798
|
fontWeight
|
|
687
799
|
});
|
|
688
800
|
|
|
801
|
+
// src/theme/shadows.ts
|
|
802
|
+
function buildShadows(tokens) {
|
|
803
|
+
const tokenShadows = tokens.shadows;
|
|
804
|
+
return [
|
|
805
|
+
"none",
|
|
806
|
+
// 0
|
|
807
|
+
tokenShadows.xs,
|
|
808
|
+
// 1
|
|
809
|
+
tokenShadows.sm,
|
|
810
|
+
// 2
|
|
811
|
+
tokenShadows.sm,
|
|
812
|
+
// 3
|
|
813
|
+
tokenShadows.md,
|
|
814
|
+
// 4
|
|
815
|
+
tokenShadows.md,
|
|
816
|
+
// 5
|
|
817
|
+
tokenShadows.md,
|
|
818
|
+
// 6
|
|
819
|
+
tokenShadows.lg,
|
|
820
|
+
// 7
|
|
821
|
+
tokenShadows.lg,
|
|
822
|
+
// 8
|
|
823
|
+
tokenShadows.lg,
|
|
824
|
+
// 9
|
|
825
|
+
tokenShadows.xl,
|
|
826
|
+
// 10
|
|
827
|
+
tokenShadows.xl,
|
|
828
|
+
// 11
|
|
829
|
+
tokenShadows.xl,
|
|
830
|
+
// 12
|
|
831
|
+
tokenShadows["2xl"],
|
|
832
|
+
// 13
|
|
833
|
+
tokenShadows["2xl"],
|
|
834
|
+
// 14
|
|
835
|
+
tokenShadows["2xl"],
|
|
836
|
+
// 15
|
|
837
|
+
tokenShadows["3xl"],
|
|
838
|
+
// 16
|
|
839
|
+
tokenShadows["3xl"],
|
|
840
|
+
// 17
|
|
841
|
+
tokenShadows["3xl"],
|
|
842
|
+
// 18
|
|
843
|
+
tokenShadows["3xl"],
|
|
844
|
+
// 19
|
|
845
|
+
tokenShadows["3xl"],
|
|
846
|
+
// 20
|
|
847
|
+
tokenShadows["3xl"],
|
|
848
|
+
// 21
|
|
849
|
+
tokenShadows["3xl"],
|
|
850
|
+
// 22
|
|
851
|
+
tokenShadows["3xl"],
|
|
852
|
+
// 23
|
|
853
|
+
tokenShadows["3xl"]
|
|
854
|
+
// 24
|
|
855
|
+
];
|
|
856
|
+
}
|
|
857
|
+
var shadows2 = buildShadows({
|
|
858
|
+
shadows
|
|
859
|
+
});
|
|
860
|
+
|
|
689
861
|
// src/theme/components.ts
|
|
690
862
|
function buildComponents(tokens) {
|
|
691
863
|
const {
|
|
692
|
-
colors:
|
|
693
|
-
radius:
|
|
694
|
-
focusRings:
|
|
864
|
+
colors: colors5,
|
|
865
|
+
radius: radius5,
|
|
866
|
+
focusRings: focusRings5,
|
|
695
867
|
shadows: tokenShadows,
|
|
696
|
-
text:
|
|
697
|
-
bg:
|
|
698
|
-
fg:
|
|
699
|
-
border:
|
|
700
|
-
buttonColors:
|
|
868
|
+
text: text5,
|
|
869
|
+
bg: bg5,
|
|
870
|
+
fg: fg5,
|
|
871
|
+
border: border5,
|
|
872
|
+
buttonColors: buttonColors5
|
|
701
873
|
} = tokens;
|
|
702
874
|
return {
|
|
703
875
|
// ─── Button ─────────────────────────────────────────────────────
|
|
@@ -707,7 +879,7 @@ function buildComponents(tokens) {
|
|
|
707
879
|
},
|
|
708
880
|
styleOverrides: {
|
|
709
881
|
root: {
|
|
710
|
-
borderRadius:
|
|
882
|
+
borderRadius: radius5.md,
|
|
711
883
|
fontWeight: 600,
|
|
712
884
|
boxShadow: tokenShadows.xs,
|
|
713
885
|
height: 32,
|
|
@@ -715,36 +887,36 @@ function buildComponents(tokens) {
|
|
|
715
887
|
fontSize: 14,
|
|
716
888
|
lineHeight: "20px",
|
|
717
889
|
"&:focus-visible": {
|
|
718
|
-
boxShadow:
|
|
890
|
+
boxShadow: focusRings5.brandShadowXs
|
|
719
891
|
}
|
|
720
892
|
},
|
|
721
893
|
containedPrimary: {
|
|
722
|
-
backgroundColor:
|
|
894
|
+
backgroundColor: buttonColors5.primary.bg,
|
|
723
895
|
"&:hover": {
|
|
724
|
-
backgroundColor:
|
|
896
|
+
backgroundColor: buttonColors5.primary.bgHover
|
|
725
897
|
}
|
|
726
898
|
},
|
|
727
899
|
outlinedPrimary: {
|
|
728
|
-
borderColor:
|
|
729
|
-
color:
|
|
900
|
+
borderColor: buttonColors5.secondaryColor.border,
|
|
901
|
+
color: buttonColors5.secondaryColor.fg,
|
|
730
902
|
"&:hover": {
|
|
731
|
-
backgroundColor:
|
|
732
|
-
borderColor:
|
|
903
|
+
backgroundColor: buttonColors5.secondaryColor.bgHover,
|
|
904
|
+
borderColor: buttonColors5.secondaryColor.borderHover
|
|
733
905
|
}
|
|
734
906
|
},
|
|
735
907
|
outlinedSecondary: {
|
|
736
|
-
borderColor:
|
|
908
|
+
borderColor: buttonColors5.secondary.border,
|
|
737
909
|
"&:hover": {
|
|
738
|
-
borderColor:
|
|
910
|
+
borderColor: buttonColors5.secondary.borderHover
|
|
739
911
|
}
|
|
740
912
|
},
|
|
741
913
|
text: {
|
|
742
914
|
boxShadow: "none"
|
|
743
915
|
},
|
|
744
916
|
textPrimary: {
|
|
745
|
-
color:
|
|
917
|
+
color: buttonColors5.tertiaryColor.fg,
|
|
746
918
|
"&:hover": {
|
|
747
|
-
backgroundColor:
|
|
919
|
+
backgroundColor: buttonColors5.tertiaryColor.bgHover
|
|
748
920
|
}
|
|
749
921
|
}
|
|
750
922
|
}
|
|
@@ -756,11 +928,11 @@ function buildComponents(tokens) {
|
|
|
756
928
|
},
|
|
757
929
|
styleOverrides: {
|
|
758
930
|
root: {
|
|
759
|
-
borderRadius:
|
|
931
|
+
borderRadius: radius5.md
|
|
760
932
|
},
|
|
761
933
|
grouped: {
|
|
762
934
|
"&:not(:last-of-type)": {
|
|
763
|
-
borderRight: `1px solid ${
|
|
935
|
+
borderRight: `1px solid ${buttonColors5.primary.borderHover}`
|
|
764
936
|
}
|
|
765
937
|
}
|
|
766
938
|
}
|
|
@@ -774,13 +946,13 @@ function buildComponents(tokens) {
|
|
|
774
946
|
boxShadow: tokenShadows.lg
|
|
775
947
|
},
|
|
776
948
|
"&:focus-visible": {
|
|
777
|
-
boxShadow:
|
|
949
|
+
boxShadow: focusRings5.brandShadowSm
|
|
778
950
|
}
|
|
779
951
|
},
|
|
780
952
|
primary: {
|
|
781
|
-
backgroundColor:
|
|
953
|
+
backgroundColor: buttonColors5.primary.bg,
|
|
782
954
|
"&:hover": {
|
|
783
|
-
backgroundColor:
|
|
955
|
+
backgroundColor: buttonColors5.primary.bgHover
|
|
784
956
|
}
|
|
785
957
|
}
|
|
786
958
|
}
|
|
@@ -795,8 +967,8 @@ function buildComponents(tokens) {
|
|
|
795
967
|
styleOverrides: {
|
|
796
968
|
input: {
|
|
797
969
|
"&::placeholder": {
|
|
798
|
-
color:
|
|
799
|
-
WebkitTextFillColor:
|
|
970
|
+
color: text5.placeholder,
|
|
971
|
+
WebkitTextFillColor: text5.placeholder,
|
|
800
972
|
fontWeight: 400,
|
|
801
973
|
opacity: 1
|
|
802
974
|
}
|
|
@@ -806,26 +978,26 @@ function buildComponents(tokens) {
|
|
|
806
978
|
MuiOutlinedInput: {
|
|
807
979
|
styleOverrides: {
|
|
808
980
|
root: {
|
|
809
|
-
borderRadius:
|
|
981
|
+
borderRadius: radius5.md,
|
|
810
982
|
boxShadow: tokenShadows.xs,
|
|
811
983
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
812
|
-
borderColor:
|
|
984
|
+
borderColor: border5.brand
|
|
813
985
|
},
|
|
814
986
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
815
|
-
borderColor:
|
|
987
|
+
borderColor: border5.brandSolid,
|
|
816
988
|
borderWidth: 1,
|
|
817
989
|
boxShadow: "none"
|
|
818
990
|
},
|
|
819
991
|
"&.Mui-error .MuiOutlinedInput-notchedOutline": {
|
|
820
|
-
borderColor:
|
|
992
|
+
borderColor: border5.error
|
|
821
993
|
},
|
|
822
994
|
"&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
823
|
-
borderColor:
|
|
995
|
+
borderColor: border5.errorSolid,
|
|
824
996
|
boxShadow: "none"
|
|
825
997
|
}
|
|
826
998
|
},
|
|
827
999
|
notchedOutline: {
|
|
828
|
-
borderColor:
|
|
1000
|
+
borderColor: border5.primary
|
|
829
1001
|
},
|
|
830
1002
|
input: {
|
|
831
1003
|
padding: "6px 12px",
|
|
@@ -837,12 +1009,12 @@ function buildComponents(tokens) {
|
|
|
837
1009
|
MuiFormLabel: {
|
|
838
1010
|
styleOverrides: {
|
|
839
1011
|
root: {
|
|
840
|
-
color:
|
|
1012
|
+
color: text5.placeholder,
|
|
841
1013
|
"&.Mui-focused": {
|
|
842
|
-
color:
|
|
1014
|
+
color: text5.placeholder
|
|
843
1015
|
},
|
|
844
1016
|
"&.Mui-error": {
|
|
845
|
-
color:
|
|
1017
|
+
color: text5.errorPrimary
|
|
846
1018
|
}
|
|
847
1019
|
}
|
|
848
1020
|
}
|
|
@@ -852,12 +1024,12 @@ function buildComponents(tokens) {
|
|
|
852
1024
|
root: {
|
|
853
1025
|
fontSize: 14,
|
|
854
1026
|
fontWeight: 500,
|
|
855
|
-
color:
|
|
1027
|
+
color: text5.placeholder,
|
|
856
1028
|
"&.Mui-focused": {
|
|
857
|
-
color:
|
|
1029
|
+
color: text5.placeholder
|
|
858
1030
|
},
|
|
859
1031
|
"&.Mui-error": {
|
|
860
|
-
color:
|
|
1032
|
+
color: text5.errorPrimary
|
|
861
1033
|
}
|
|
862
1034
|
},
|
|
863
1035
|
outlined: {
|
|
@@ -876,7 +1048,7 @@ function buildComponents(tokens) {
|
|
|
876
1048
|
marginTop: 6,
|
|
877
1049
|
marginLeft: 0,
|
|
878
1050
|
"&.Mui-error": {
|
|
879
|
-
color:
|
|
1051
|
+
color: text5.errorPrimary
|
|
880
1052
|
}
|
|
881
1053
|
}
|
|
882
1054
|
}
|
|
@@ -906,18 +1078,18 @@ function buildComponents(tokens) {
|
|
|
906
1078
|
}
|
|
907
1079
|
},
|
|
908
1080
|
icon: {
|
|
909
|
-
color:
|
|
1081
|
+
color: text5.placeholder
|
|
910
1082
|
}
|
|
911
1083
|
}
|
|
912
1084
|
},
|
|
913
1085
|
MuiMenuItem: {
|
|
914
1086
|
styleOverrides: {
|
|
915
1087
|
root: {
|
|
916
|
-
borderRadius:
|
|
1088
|
+
borderRadius: radius5.md,
|
|
917
1089
|
padding: "6px 8px",
|
|
918
1090
|
gap: 4,
|
|
919
1091
|
"&:hover": {
|
|
920
|
-
backgroundColor:
|
|
1092
|
+
backgroundColor: bg5.primaryHover
|
|
921
1093
|
}
|
|
922
1094
|
}
|
|
923
1095
|
}
|
|
@@ -926,9 +1098,9 @@ function buildComponents(tokens) {
|
|
|
926
1098
|
MuiAutocomplete: {
|
|
927
1099
|
styleOverrides: {
|
|
928
1100
|
paper: {
|
|
929
|
-
borderRadius:
|
|
1101
|
+
borderRadius: radius5.md,
|
|
930
1102
|
boxShadow: tokenShadows.lg,
|
|
931
|
-
border: `1px solid ${
|
|
1103
|
+
border: `1px solid ${border5.secondary}`,
|
|
932
1104
|
marginTop: 4
|
|
933
1105
|
},
|
|
934
1106
|
inputRoot: {
|
|
@@ -945,10 +1117,10 @@ function buildComponents(tokens) {
|
|
|
945
1117
|
lineHeight: "20px",
|
|
946
1118
|
padding: "6px 12px",
|
|
947
1119
|
"&.Mui-focused": {
|
|
948
|
-
backgroundColor:
|
|
1120
|
+
backgroundColor: bg5.primaryHover
|
|
949
1121
|
},
|
|
950
1122
|
'&[aria-selected="true"]': {
|
|
951
|
-
backgroundColor:
|
|
1123
|
+
backgroundColor: bg5.brandPrimary
|
|
952
1124
|
}
|
|
953
1125
|
},
|
|
954
1126
|
listbox: {
|
|
@@ -963,28 +1135,28 @@ function buildComponents(tokens) {
|
|
|
963
1135
|
},
|
|
964
1136
|
styleOverrides: {
|
|
965
1137
|
root: {
|
|
966
|
-
color:
|
|
967
|
-
borderRadius:
|
|
1138
|
+
color: border5.primary,
|
|
1139
|
+
borderRadius: radius5.xs,
|
|
968
1140
|
padding: 0,
|
|
969
1141
|
width: 20,
|
|
970
1142
|
height: 20,
|
|
971
1143
|
"&:hover": {
|
|
972
1144
|
backgroundColor: "transparent",
|
|
973
|
-
color:
|
|
1145
|
+
color: fg5.brandPrimary
|
|
974
1146
|
},
|
|
975
1147
|
"&.Mui-checked": {
|
|
976
|
-
color:
|
|
1148
|
+
color: fg5.brandPrimary
|
|
977
1149
|
},
|
|
978
1150
|
"&.Mui-checked:hover": {
|
|
979
|
-
color:
|
|
1151
|
+
color: violet[700]
|
|
980
1152
|
},
|
|
981
1153
|
"&.Mui-focusVisible": {
|
|
982
1154
|
outline: "none",
|
|
983
|
-
boxShadow:
|
|
984
|
-
borderRadius:
|
|
1155
|
+
boxShadow: focusRings5.brand,
|
|
1156
|
+
borderRadius: radius5.xs
|
|
985
1157
|
},
|
|
986
1158
|
"&.Mui-disabled": {
|
|
987
|
-
color:
|
|
1159
|
+
color: border5.primary
|
|
988
1160
|
}
|
|
989
1161
|
}
|
|
990
1162
|
}
|
|
@@ -996,25 +1168,25 @@ function buildComponents(tokens) {
|
|
|
996
1168
|
},
|
|
997
1169
|
styleOverrides: {
|
|
998
1170
|
root: {
|
|
999
|
-
color:
|
|
1171
|
+
color: border5.primary,
|
|
1000
1172
|
padding: 0,
|
|
1001
1173
|
"&:hover": {
|
|
1002
1174
|
backgroundColor: "transparent",
|
|
1003
|
-
color:
|
|
1175
|
+
color: fg5.brandPrimary
|
|
1004
1176
|
},
|
|
1005
1177
|
"&.Mui-checked": {
|
|
1006
|
-
color:
|
|
1178
|
+
color: fg5.brandPrimary
|
|
1007
1179
|
},
|
|
1008
1180
|
"&.Mui-checked:hover": {
|
|
1009
|
-
color:
|
|
1181
|
+
color: violet[700]
|
|
1010
1182
|
},
|
|
1011
1183
|
"&.Mui-focusVisible": {
|
|
1012
1184
|
outline: "none",
|
|
1013
|
-
boxShadow:
|
|
1014
|
-
borderRadius:
|
|
1185
|
+
boxShadow: focusRings5.brand,
|
|
1186
|
+
borderRadius: radius5.full
|
|
1015
1187
|
},
|
|
1016
1188
|
"&.Mui-disabled": {
|
|
1017
|
-
color:
|
|
1189
|
+
color: border5.primary
|
|
1018
1190
|
}
|
|
1019
1191
|
}
|
|
1020
1192
|
}
|
|
@@ -1034,20 +1206,20 @@ function buildComponents(tokens) {
|
|
|
1034
1206
|
padding: 2,
|
|
1035
1207
|
"&.Mui-checked": {
|
|
1036
1208
|
transform: "translateX(20px)",
|
|
1037
|
-
color:
|
|
1209
|
+
color: fg5.white,
|
|
1038
1210
|
"& + .MuiSwitch-track": {
|
|
1039
|
-
backgroundColor:
|
|
1211
|
+
backgroundColor: fg5.brandPrimary,
|
|
1040
1212
|
opacity: 1
|
|
1041
1213
|
}
|
|
1042
1214
|
},
|
|
1043
1215
|
"&.Mui-checked:hover + .MuiSwitch-track": {
|
|
1044
|
-
backgroundColor:
|
|
1216
|
+
backgroundColor: violet[700]
|
|
1045
1217
|
},
|
|
1046
1218
|
"&.Mui-focusVisible .MuiSwitch-thumb": {
|
|
1047
|
-
boxShadow:
|
|
1219
|
+
boxShadow: focusRings5.brand
|
|
1048
1220
|
},
|
|
1049
1221
|
"&.Mui-disabled .MuiSwitch-thumb": {
|
|
1050
|
-
color:
|
|
1222
|
+
color: bg5.disabled
|
|
1051
1223
|
},
|
|
1052
1224
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
1053
1225
|
opacity: 0.5
|
|
@@ -1059,8 +1231,8 @@ function buildComponents(tokens) {
|
|
|
1059
1231
|
boxShadow: "0px 1px 2px 0px #1018280d"
|
|
1060
1232
|
},
|
|
1061
1233
|
track: {
|
|
1062
|
-
borderRadius:
|
|
1063
|
-
backgroundColor:
|
|
1234
|
+
borderRadius: radius5.full,
|
|
1235
|
+
backgroundColor: border5.secondary,
|
|
1064
1236
|
opacity: 1
|
|
1065
1237
|
}
|
|
1066
1238
|
}
|
|
@@ -1069,8 +1241,8 @@ function buildComponents(tokens) {
|
|
|
1069
1241
|
MuiToggleButton: {
|
|
1070
1242
|
styleOverrides: {
|
|
1071
1243
|
root: {
|
|
1072
|
-
borderColor:
|
|
1073
|
-
color:
|
|
1244
|
+
borderColor: border5.primary,
|
|
1245
|
+
color: text5.secondary,
|
|
1074
1246
|
fontSize: 14,
|
|
1075
1247
|
fontWeight: 600,
|
|
1076
1248
|
lineHeight: "20px",
|
|
@@ -1078,19 +1250,19 @@ function buildComponents(tokens) {
|
|
|
1078
1250
|
padding: "6px 12px",
|
|
1079
1251
|
textTransform: "none",
|
|
1080
1252
|
"&:hover": {
|
|
1081
|
-
backgroundColor:
|
|
1082
|
-
borderColor:
|
|
1253
|
+
backgroundColor: bg5.primaryHover,
|
|
1254
|
+
borderColor: border5.primary
|
|
1083
1255
|
},
|
|
1084
1256
|
"&.Mui-selected": {
|
|
1085
|
-
backgroundColor:
|
|
1086
|
-
color:
|
|
1087
|
-
borderColor:
|
|
1257
|
+
backgroundColor: bg5.brandPrimary,
|
|
1258
|
+
color: buttonColors5.secondaryColor.fg,
|
|
1259
|
+
borderColor: border5.brandSolid,
|
|
1088
1260
|
"&:hover": {
|
|
1089
|
-
backgroundColor:
|
|
1261
|
+
backgroundColor: bg5.brandSecondary
|
|
1090
1262
|
}
|
|
1091
1263
|
},
|
|
1092
1264
|
"&:focus-visible": {
|
|
1093
|
-
boxShadow:
|
|
1265
|
+
boxShadow: focusRings5.brandShadowXs
|
|
1094
1266
|
}
|
|
1095
1267
|
}
|
|
1096
1268
|
}
|
|
@@ -1098,7 +1270,7 @@ function buildComponents(tokens) {
|
|
|
1098
1270
|
MuiToggleButtonGroup: {
|
|
1099
1271
|
styleOverrides: {
|
|
1100
1272
|
root: {
|
|
1101
|
-
borderRadius:
|
|
1273
|
+
borderRadius: radius5.md,
|
|
1102
1274
|
overflow: "hidden"
|
|
1103
1275
|
},
|
|
1104
1276
|
grouped: {
|
|
@@ -1107,12 +1279,12 @@ function buildComponents(tokens) {
|
|
|
1107
1279
|
marginLeft: -1
|
|
1108
1280
|
},
|
|
1109
1281
|
"&:first-of-type": {
|
|
1110
|
-
borderTopLeftRadius:
|
|
1111
|
-
borderBottomLeftRadius:
|
|
1282
|
+
borderTopLeftRadius: radius5.md,
|
|
1283
|
+
borderBottomLeftRadius: radius5.md
|
|
1112
1284
|
},
|
|
1113
1285
|
"&:last-of-type": {
|
|
1114
|
-
borderTopRightRadius:
|
|
1115
|
-
borderBottomRightRadius:
|
|
1286
|
+
borderTopRightRadius: radius5.md,
|
|
1287
|
+
borderBottomRightRadius: radius5.md
|
|
1116
1288
|
}
|
|
1117
1289
|
}
|
|
1118
1290
|
}
|
|
@@ -1121,8 +1293,8 @@ function buildComponents(tokens) {
|
|
|
1121
1293
|
MuiDrawer: {
|
|
1122
1294
|
styleOverrides: {
|
|
1123
1295
|
paper: {
|
|
1124
|
-
backgroundColor:
|
|
1125
|
-
borderRight: `1px solid ${
|
|
1296
|
+
backgroundColor: bg5.primary,
|
|
1297
|
+
borderRight: `1px solid ${border5.secondary}`
|
|
1126
1298
|
}
|
|
1127
1299
|
}
|
|
1128
1300
|
},
|
|
@@ -1133,9 +1305,9 @@ function buildComponents(tokens) {
|
|
|
1133
1305
|
},
|
|
1134
1306
|
styleOverrides: {
|
|
1135
1307
|
root: {
|
|
1136
|
-
borderRadius:
|
|
1137
|
-
border: `1px solid ${
|
|
1138
|
-
backgroundColor:
|
|
1308
|
+
borderRadius: radius5.xl,
|
|
1309
|
+
border: `1px solid ${border5.secondary}`,
|
|
1310
|
+
backgroundColor: bg5.primary,
|
|
1139
1311
|
boxShadow: tokenShadows.xs,
|
|
1140
1312
|
overflow: "hidden"
|
|
1141
1313
|
}
|
|
@@ -1182,35 +1354,35 @@ function buildComponents(tokens) {
|
|
|
1182
1354
|
backgroundImage: "none"
|
|
1183
1355
|
},
|
|
1184
1356
|
rounded: {
|
|
1185
|
-
borderRadius:
|
|
1357
|
+
borderRadius: radius5.lg
|
|
1186
1358
|
},
|
|
1187
1359
|
elevation1: {
|
|
1188
1360
|
boxShadow: tokenShadows.xs,
|
|
1189
|
-
border: `1px solid ${
|
|
1361
|
+
border: `1px solid ${border5.secondary}`
|
|
1190
1362
|
},
|
|
1191
1363
|
elevation2: {
|
|
1192
1364
|
boxShadow: tokenShadows.sm,
|
|
1193
|
-
border: `1px solid ${
|
|
1365
|
+
border: `1px solid ${border5.secondary}`
|
|
1194
1366
|
},
|
|
1195
1367
|
elevation3: {
|
|
1196
1368
|
boxShadow: tokenShadows.md,
|
|
1197
|
-
border: `1px solid ${
|
|
1369
|
+
border: `1px solid ${border5.secondary}`
|
|
1198
1370
|
},
|
|
1199
1371
|
elevation4: {
|
|
1200
1372
|
boxShadow: tokenShadows.lg,
|
|
1201
|
-
border: `1px solid ${
|
|
1373
|
+
border: `1px solid ${border5.secondary}`
|
|
1202
1374
|
},
|
|
1203
1375
|
elevation8: {
|
|
1204
1376
|
boxShadow: tokenShadows.xl,
|
|
1205
|
-
border: `1px solid ${
|
|
1377
|
+
border: `1px solid ${border5.secondary}`
|
|
1206
1378
|
},
|
|
1207
1379
|
elevation16: {
|
|
1208
1380
|
boxShadow: tokenShadows["2xl"],
|
|
1209
|
-
border: `1px solid ${
|
|
1381
|
+
border: `1px solid ${border5.secondary}`
|
|
1210
1382
|
},
|
|
1211
1383
|
elevation24: {
|
|
1212
1384
|
boxShadow: tokenShadows["3xl"],
|
|
1213
|
-
border: `1px solid ${
|
|
1385
|
+
border: `1px solid ${border5.secondary}`
|
|
1214
1386
|
}
|
|
1215
1387
|
}
|
|
1216
1388
|
},
|
|
@@ -1222,8 +1394,8 @@ function buildComponents(tokens) {
|
|
|
1222
1394
|
},
|
|
1223
1395
|
styleOverrides: {
|
|
1224
1396
|
root: {
|
|
1225
|
-
border: `1px solid ${
|
|
1226
|
-
borderRadius:
|
|
1397
|
+
border: `1px solid ${border5.secondary}`,
|
|
1398
|
+
borderRadius: radius5.lg,
|
|
1227
1399
|
"&:not(:last-child)": {
|
|
1228
1400
|
marginBottom: 8
|
|
1229
1401
|
},
|
|
@@ -1233,7 +1405,7 @@ function buildComponents(tokens) {
|
|
|
1233
1405
|
"&.Mui-expanded": {
|
|
1234
1406
|
margin: 0,
|
|
1235
1407
|
marginBottom: 8,
|
|
1236
|
-
borderRadius:
|
|
1408
|
+
borderRadius: radius5.lg
|
|
1237
1409
|
}
|
|
1238
1410
|
}
|
|
1239
1411
|
}
|
|
@@ -1245,7 +1417,7 @@ function buildComponents(tokens) {
|
|
|
1245
1417
|
minHeight: 56,
|
|
1246
1418
|
"&.Mui-expanded": {
|
|
1247
1419
|
minHeight: 56,
|
|
1248
|
-
borderBottom: `1px solid ${
|
|
1420
|
+
borderBottom: `1px solid ${border5.secondary}`
|
|
1249
1421
|
}
|
|
1250
1422
|
},
|
|
1251
1423
|
content: {
|
|
@@ -1271,8 +1443,8 @@ function buildComponents(tokens) {
|
|
|
1271
1443
|
},
|
|
1272
1444
|
styleOverrides: {
|
|
1273
1445
|
root: {
|
|
1274
|
-
borderBottom: `1px solid ${
|
|
1275
|
-
backgroundColor:
|
|
1446
|
+
borderBottom: `1px solid ${border5.secondary}`,
|
|
1447
|
+
backgroundColor: bg5.primary
|
|
1276
1448
|
}
|
|
1277
1449
|
}
|
|
1278
1450
|
},
|
|
@@ -1296,7 +1468,7 @@ function buildComponents(tokens) {
|
|
|
1296
1468
|
MuiChip: {
|
|
1297
1469
|
styleOverrides: {
|
|
1298
1470
|
root: {
|
|
1299
|
-
borderRadius:
|
|
1471
|
+
borderRadius: radius5.md
|
|
1300
1472
|
},
|
|
1301
1473
|
label: {
|
|
1302
1474
|
fontWeight: 500
|
|
@@ -1312,51 +1484,51 @@ function buildComponents(tokens) {
|
|
|
1312
1484
|
},
|
|
1313
1485
|
colorDefault: {
|
|
1314
1486
|
"&.MuiChip-filled": {
|
|
1315
|
-
backgroundColor:
|
|
1316
|
-
color:
|
|
1317
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1487
|
+
backgroundColor: gray[50],
|
|
1488
|
+
color: gray[700],
|
|
1489
|
+
"& .MuiChip-deleteIcon": { color: gray[400] }
|
|
1318
1490
|
}
|
|
1319
1491
|
},
|
|
1320
1492
|
colorPrimary: {
|
|
1321
1493
|
"&.MuiChip-filled": {
|
|
1322
|
-
backgroundColor:
|
|
1323
|
-
color:
|
|
1324
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1494
|
+
backgroundColor: violet[50],
|
|
1495
|
+
color: violet[700],
|
|
1496
|
+
"& .MuiChip-deleteIcon": { color: violet[400] }
|
|
1325
1497
|
}
|
|
1326
1498
|
},
|
|
1327
1499
|
colorSecondary: {
|
|
1328
1500
|
"&.MuiChip-filled": {
|
|
1329
|
-
backgroundColor:
|
|
1330
|
-
color:
|
|
1331
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1501
|
+
backgroundColor: gray[50],
|
|
1502
|
+
color: gray[700],
|
|
1503
|
+
"& .MuiChip-deleteIcon": { color: gray[400] }
|
|
1332
1504
|
}
|
|
1333
1505
|
},
|
|
1334
1506
|
colorError: {
|
|
1335
1507
|
"&.MuiChip-filled": {
|
|
1336
|
-
backgroundColor:
|
|
1337
|
-
color:
|
|
1338
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1508
|
+
backgroundColor: colors5.error[50],
|
|
1509
|
+
color: colors5.error[700],
|
|
1510
|
+
"& .MuiChip-deleteIcon": { color: colors5.error[400] }
|
|
1339
1511
|
}
|
|
1340
1512
|
},
|
|
1341
1513
|
colorWarning: {
|
|
1342
1514
|
"&.MuiChip-filled": {
|
|
1343
|
-
backgroundColor:
|
|
1344
|
-
color:
|
|
1345
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1515
|
+
backgroundColor: colors5.warning[50],
|
|
1516
|
+
color: colors5.warning[700],
|
|
1517
|
+
"& .MuiChip-deleteIcon": { color: colors5.warning[400] }
|
|
1346
1518
|
}
|
|
1347
1519
|
},
|
|
1348
1520
|
colorSuccess: {
|
|
1349
1521
|
"&.MuiChip-filled": {
|
|
1350
|
-
backgroundColor:
|
|
1351
|
-
color:
|
|
1352
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1522
|
+
backgroundColor: colors5.success[50],
|
|
1523
|
+
color: colors5.success[700],
|
|
1524
|
+
"& .MuiChip-deleteIcon": { color: colors5.success[400] }
|
|
1353
1525
|
}
|
|
1354
1526
|
},
|
|
1355
1527
|
colorInfo: {
|
|
1356
1528
|
"&.MuiChip-filled": {
|
|
1357
|
-
backgroundColor:
|
|
1358
|
-
color:
|
|
1359
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1529
|
+
backgroundColor: info[50],
|
|
1530
|
+
color: info[700],
|
|
1531
|
+
"& .MuiChip-deleteIcon": { color: info[400] }
|
|
1360
1532
|
}
|
|
1361
1533
|
}
|
|
1362
1534
|
}
|
|
@@ -1372,7 +1544,7 @@ function buildComponents(tokens) {
|
|
|
1372
1544
|
fontSize: 14,
|
|
1373
1545
|
lineHeight: "20px",
|
|
1374
1546
|
fontWeight: 500,
|
|
1375
|
-
color:
|
|
1547
|
+
color: text5.secondary
|
|
1376
1548
|
}
|
|
1377
1549
|
}
|
|
1378
1550
|
},
|
|
@@ -1388,29 +1560,29 @@ function buildComponents(tokens) {
|
|
|
1388
1560
|
MuiTableCell: {
|
|
1389
1561
|
styleOverrides: {
|
|
1390
1562
|
root: {
|
|
1391
|
-
borderBottom: `1px solid ${
|
|
1563
|
+
borderBottom: `1px solid ${border5.secondary}`,
|
|
1392
1564
|
padding: "16px 24px",
|
|
1393
1565
|
fontSize: 14,
|
|
1394
1566
|
lineHeight: "20px",
|
|
1395
|
-
color:
|
|
1567
|
+
color: fg5.tertiary
|
|
1396
1568
|
},
|
|
1397
1569
|
head: {
|
|
1398
|
-
backgroundColor:
|
|
1399
|
-
color:
|
|
1570
|
+
backgroundColor: bg5.secondary,
|
|
1571
|
+
color: fg5.tertiary,
|
|
1400
1572
|
fontWeight: 500,
|
|
1401
1573
|
fontSize: 12,
|
|
1402
1574
|
lineHeight: "18px"
|
|
1403
1575
|
},
|
|
1404
1576
|
body: {
|
|
1405
|
-
color:
|
|
1577
|
+
color: fg5.tertiary
|
|
1406
1578
|
}
|
|
1407
1579
|
}
|
|
1408
1580
|
},
|
|
1409
1581
|
MuiTableHead: {
|
|
1410
1582
|
styleOverrides: {
|
|
1411
1583
|
root: {
|
|
1412
|
-
backgroundColor:
|
|
1413
|
-
borderBottom: `1px solid ${
|
|
1584
|
+
backgroundColor: bg5.secondary,
|
|
1585
|
+
borderBottom: `1px solid ${border5.secondary}`
|
|
1414
1586
|
}
|
|
1415
1587
|
}
|
|
1416
1588
|
},
|
|
@@ -1421,12 +1593,12 @@ function buildComponents(tokens) {
|
|
|
1421
1593
|
border: 0
|
|
1422
1594
|
},
|
|
1423
1595
|
"&:hover": {
|
|
1424
|
-
backgroundColor:
|
|
1596
|
+
backgroundColor: bg5.primaryHover
|
|
1425
1597
|
},
|
|
1426
1598
|
"&.Mui-selected": {
|
|
1427
|
-
backgroundColor:
|
|
1599
|
+
backgroundColor: bg5.brandPrimary,
|
|
1428
1600
|
"&:hover": {
|
|
1429
|
-
backgroundColor:
|
|
1601
|
+
backgroundColor: bg5.brandPrimary
|
|
1430
1602
|
}
|
|
1431
1603
|
}
|
|
1432
1604
|
}
|
|
@@ -1435,8 +1607,8 @@ function buildComponents(tokens) {
|
|
|
1435
1607
|
MuiTableContainer: {
|
|
1436
1608
|
styleOverrides: {
|
|
1437
1609
|
root: {
|
|
1438
|
-
borderRadius:
|
|
1439
|
-
border: `1px solid ${
|
|
1610
|
+
borderRadius: radius5.xl,
|
|
1611
|
+
border: `1px solid ${border5.secondary}`,
|
|
1440
1612
|
boxShadow: "none"
|
|
1441
1613
|
}
|
|
1442
1614
|
}
|
|
@@ -1450,24 +1622,24 @@ function buildComponents(tokens) {
|
|
|
1450
1622
|
lineHeight: "18px",
|
|
1451
1623
|
minWidth: 20,
|
|
1452
1624
|
height: 20,
|
|
1453
|
-
borderRadius:
|
|
1625
|
+
borderRadius: radius5.full
|
|
1454
1626
|
},
|
|
1455
1627
|
colorPrimary: {
|
|
1456
|
-
backgroundColor:
|
|
1628
|
+
backgroundColor: bg5.brandSolid
|
|
1457
1629
|
},
|
|
1458
1630
|
colorError: {
|
|
1459
|
-
backgroundColor:
|
|
1631
|
+
backgroundColor: bg5.errorSolid
|
|
1460
1632
|
},
|
|
1461
1633
|
colorSuccess: {
|
|
1462
|
-
backgroundColor:
|
|
1634
|
+
backgroundColor: bg5.successSolid
|
|
1463
1635
|
},
|
|
1464
1636
|
colorWarning: {
|
|
1465
|
-
backgroundColor:
|
|
1637
|
+
backgroundColor: bg5.warningSolid
|
|
1466
1638
|
},
|
|
1467
1639
|
dot: {
|
|
1468
1640
|
minWidth: 8,
|
|
1469
1641
|
height: 8,
|
|
1470
|
-
borderRadius:
|
|
1642
|
+
borderRadius: radius5.full
|
|
1471
1643
|
}
|
|
1472
1644
|
}
|
|
1473
1645
|
},
|
|
@@ -1475,7 +1647,7 @@ function buildComponents(tokens) {
|
|
|
1475
1647
|
MuiDivider: {
|
|
1476
1648
|
styleOverrides: {
|
|
1477
1649
|
root: {
|
|
1478
|
-
borderColor:
|
|
1650
|
+
borderColor: border5.secondary
|
|
1479
1651
|
}
|
|
1480
1652
|
}
|
|
1481
1653
|
},
|
|
@@ -1490,16 +1662,16 @@ function buildComponents(tokens) {
|
|
|
1490
1662
|
MuiListItemButton: {
|
|
1491
1663
|
styleOverrides: {
|
|
1492
1664
|
root: {
|
|
1493
|
-
borderRadius:
|
|
1665
|
+
borderRadius: radius5.sm,
|
|
1494
1666
|
padding: "8px 12px",
|
|
1495
1667
|
"&:hover": {
|
|
1496
|
-
backgroundColor:
|
|
1668
|
+
backgroundColor: bg5.primaryHover
|
|
1497
1669
|
},
|
|
1498
1670
|
"&.Mui-selected": {
|
|
1499
|
-
backgroundColor:
|
|
1500
|
-
color:
|
|
1671
|
+
backgroundColor: bg5.brandPrimary,
|
|
1672
|
+
color: buttonColors5.secondaryColor.fg,
|
|
1501
1673
|
"&:hover": {
|
|
1502
|
-
backgroundColor:
|
|
1674
|
+
backgroundColor: bg5.brandSecondary
|
|
1503
1675
|
}
|
|
1504
1676
|
}
|
|
1505
1677
|
}
|
|
@@ -1509,7 +1681,7 @@ function buildComponents(tokens) {
|
|
|
1509
1681
|
styleOverrides: {
|
|
1510
1682
|
root: {
|
|
1511
1683
|
minWidth: 36,
|
|
1512
|
-
color:
|
|
1684
|
+
color: fg5.quaternary
|
|
1513
1685
|
}
|
|
1514
1686
|
}
|
|
1515
1687
|
},
|
|
@@ -1519,12 +1691,12 @@ function buildComponents(tokens) {
|
|
|
1519
1691
|
fontSize: 14,
|
|
1520
1692
|
lineHeight: "20px",
|
|
1521
1693
|
fontWeight: 500,
|
|
1522
|
-
color:
|
|
1694
|
+
color: text5.secondary
|
|
1523
1695
|
},
|
|
1524
1696
|
secondary: {
|
|
1525
1697
|
fontSize: 14,
|
|
1526
1698
|
lineHeight: "20px",
|
|
1527
|
-
color:
|
|
1699
|
+
color: text5.quaternary
|
|
1528
1700
|
}
|
|
1529
1701
|
}
|
|
1530
1702
|
},
|
|
@@ -1532,17 +1704,17 @@ function buildComponents(tokens) {
|
|
|
1532
1704
|
MuiTooltip: {
|
|
1533
1705
|
styleOverrides: {
|
|
1534
1706
|
tooltip: {
|
|
1535
|
-
backgroundColor:
|
|
1536
|
-
color:
|
|
1707
|
+
backgroundColor: bg5.primarySolid,
|
|
1708
|
+
color: text5.white,
|
|
1537
1709
|
fontSize: 12,
|
|
1538
1710
|
lineHeight: "18px",
|
|
1539
1711
|
fontWeight: 600,
|
|
1540
1712
|
padding: "8px 12px",
|
|
1541
|
-
borderRadius:
|
|
1713
|
+
borderRadius: radius5.md,
|
|
1542
1714
|
boxShadow: tokenShadows.lg
|
|
1543
1715
|
},
|
|
1544
1716
|
arrow: {
|
|
1545
|
-
color:
|
|
1717
|
+
color: bg5.primarySolid
|
|
1546
1718
|
}
|
|
1547
1719
|
}
|
|
1548
1720
|
},
|
|
@@ -1553,42 +1725,42 @@ function buildComponents(tokens) {
|
|
|
1553
1725
|
},
|
|
1554
1726
|
styleOverrides: {
|
|
1555
1727
|
root: {
|
|
1556
|
-
borderRadius:
|
|
1728
|
+
borderRadius: radius5.xl,
|
|
1557
1729
|
fontSize: 14,
|
|
1558
1730
|
lineHeight: "20px",
|
|
1559
1731
|
padding: "12px 16px",
|
|
1560
1732
|
alignItems: "center"
|
|
1561
1733
|
},
|
|
1562
1734
|
standardError: {
|
|
1563
|
-
backgroundColor:
|
|
1564
|
-
color:
|
|
1565
|
-
border: `1px solid ${
|
|
1735
|
+
backgroundColor: bg5.errorPrimary,
|
|
1736
|
+
color: colors5.error[700],
|
|
1737
|
+
border: `1px solid ${border5.error}`,
|
|
1566
1738
|
"& .MuiAlert-icon": {
|
|
1567
|
-
color:
|
|
1739
|
+
color: fg5.errorPrimary
|
|
1568
1740
|
}
|
|
1569
1741
|
},
|
|
1570
1742
|
standardWarning: {
|
|
1571
|
-
backgroundColor:
|
|
1572
|
-
color:
|
|
1573
|
-
border: `1px solid ${
|
|
1743
|
+
backgroundColor: bg5.warningPrimary,
|
|
1744
|
+
color: colors5.warning[700],
|
|
1745
|
+
border: `1px solid ${colors5.warning[300]}`,
|
|
1574
1746
|
"& .MuiAlert-icon": {
|
|
1575
|
-
color:
|
|
1747
|
+
color: fg5.warningPrimary
|
|
1576
1748
|
}
|
|
1577
1749
|
},
|
|
1578
1750
|
standardSuccess: {
|
|
1579
|
-
backgroundColor:
|
|
1580
|
-
color:
|
|
1581
|
-
border: `1px solid ${
|
|
1751
|
+
backgroundColor: bg5.successPrimary,
|
|
1752
|
+
color: colors5.success[700],
|
|
1753
|
+
border: `1px solid ${colors5.success[300]}`,
|
|
1582
1754
|
"& .MuiAlert-icon": {
|
|
1583
|
-
color:
|
|
1755
|
+
color: fg5.successPrimary
|
|
1584
1756
|
}
|
|
1585
1757
|
},
|
|
1586
1758
|
standardInfo: {
|
|
1587
|
-
backgroundColor:
|
|
1588
|
-
color:
|
|
1589
|
-
border: `1px solid ${
|
|
1759
|
+
backgroundColor: info[50],
|
|
1760
|
+
color: info[700],
|
|
1761
|
+
border: `1px solid ${info[300]}`,
|
|
1590
1762
|
"& .MuiAlert-icon": {
|
|
1591
|
-
color:
|
|
1763
|
+
color: info[600]
|
|
1592
1764
|
}
|
|
1593
1765
|
},
|
|
1594
1766
|
icon: {
|
|
@@ -1619,7 +1791,7 @@ function buildComponents(tokens) {
|
|
|
1619
1791
|
MuiDialog: {
|
|
1620
1792
|
styleOverrides: {
|
|
1621
1793
|
paper: {
|
|
1622
|
-
borderRadius:
|
|
1794
|
+
borderRadius: radius5.xl,
|
|
1623
1795
|
boxShadow: tokenShadows.xl,
|
|
1624
1796
|
padding: 0
|
|
1625
1797
|
}
|
|
@@ -1631,7 +1803,7 @@ function buildComponents(tokens) {
|
|
|
1631
1803
|
fontSize: 18,
|
|
1632
1804
|
lineHeight: "28px",
|
|
1633
1805
|
fontWeight: 600,
|
|
1634
|
-
color:
|
|
1806
|
+
color: text5.primary,
|
|
1635
1807
|
padding: "24px 24px 0"
|
|
1636
1808
|
}
|
|
1637
1809
|
}
|
|
@@ -1642,7 +1814,7 @@ function buildComponents(tokens) {
|
|
|
1642
1814
|
padding: "20px 24px",
|
|
1643
1815
|
fontSize: 14,
|
|
1644
1816
|
lineHeight: "20px",
|
|
1645
|
-
color:
|
|
1817
|
+
color: text5.tertiary
|
|
1646
1818
|
}
|
|
1647
1819
|
}
|
|
1648
1820
|
},
|
|
@@ -1658,27 +1830,27 @@ function buildComponents(tokens) {
|
|
|
1658
1830
|
MuiLinearProgress: {
|
|
1659
1831
|
styleOverrides: {
|
|
1660
1832
|
root: {
|
|
1661
|
-
borderRadius:
|
|
1833
|
+
borderRadius: radius5.full,
|
|
1662
1834
|
height: 8,
|
|
1663
|
-
backgroundColor:
|
|
1835
|
+
backgroundColor: border5.secondary
|
|
1664
1836
|
},
|
|
1665
1837
|
barColorPrimary: {
|
|
1666
|
-
backgroundColor:
|
|
1667
|
-
borderRadius:
|
|
1838
|
+
backgroundColor: fg5.brandPrimary,
|
|
1839
|
+
borderRadius: radius5.full
|
|
1668
1840
|
},
|
|
1669
1841
|
barColorSecondary: {
|
|
1670
|
-
backgroundColor:
|
|
1671
|
-
borderRadius:
|
|
1842
|
+
backgroundColor: bg5.secondarySolid,
|
|
1843
|
+
borderRadius: radius5.full
|
|
1672
1844
|
}
|
|
1673
1845
|
}
|
|
1674
1846
|
},
|
|
1675
1847
|
MuiCircularProgress: {
|
|
1676
1848
|
styleOverrides: {
|
|
1677
1849
|
colorPrimary: {
|
|
1678
|
-
color:
|
|
1850
|
+
color: fg5.brandPrimary
|
|
1679
1851
|
},
|
|
1680
1852
|
colorSecondary: {
|
|
1681
|
-
color:
|
|
1853
|
+
color: bg5.secondarySolid
|
|
1682
1854
|
}
|
|
1683
1855
|
}
|
|
1684
1856
|
},
|
|
@@ -1689,13 +1861,13 @@ function buildComponents(tokens) {
|
|
|
1689
1861
|
},
|
|
1690
1862
|
styleOverrides: {
|
|
1691
1863
|
root: {
|
|
1692
|
-
backgroundColor:
|
|
1864
|
+
backgroundColor: bg5.tertiary
|
|
1693
1865
|
},
|
|
1694
1866
|
rounded: {
|
|
1695
|
-
borderRadius:
|
|
1867
|
+
borderRadius: radius5.md
|
|
1696
1868
|
},
|
|
1697
1869
|
circular: {
|
|
1698
|
-
borderRadius:
|
|
1870
|
+
borderRadius: radius5.full
|
|
1699
1871
|
}
|
|
1700
1872
|
}
|
|
1701
1873
|
},
|
|
@@ -1703,9 +1875,9 @@ function buildComponents(tokens) {
|
|
|
1703
1875
|
MuiSnackbarContent: {
|
|
1704
1876
|
styleOverrides: {
|
|
1705
1877
|
root: {
|
|
1706
|
-
backgroundColor:
|
|
1707
|
-
color:
|
|
1708
|
-
borderRadius:
|
|
1878
|
+
backgroundColor: bg5.primarySolid,
|
|
1879
|
+
color: text5.white,
|
|
1880
|
+
borderRadius: radius5.xl,
|
|
1709
1881
|
boxShadow: tokenShadows.lg,
|
|
1710
1882
|
fontSize: 14,
|
|
1711
1883
|
lineHeight: "20px",
|
|
@@ -1739,21 +1911,21 @@ function buildComponents(tokens) {
|
|
|
1739
1911
|
MuiDataGrid: {
|
|
1740
1912
|
styleOverrides: {
|
|
1741
1913
|
root: {
|
|
1742
|
-
border: `1px solid ${
|
|
1743
|
-
borderRadius:
|
|
1914
|
+
border: `1px solid ${border5.secondary}`,
|
|
1915
|
+
borderRadius: radius5.xl,
|
|
1744
1916
|
fontFamily: "inherit",
|
|
1745
1917
|
"& .MuiDataGrid-withBorderColor": {
|
|
1746
|
-
borderColor:
|
|
1918
|
+
borderColor: border5.secondary
|
|
1747
1919
|
}
|
|
1748
1920
|
},
|
|
1749
1921
|
columnHeaders: {
|
|
1750
|
-
backgroundColor:
|
|
1922
|
+
backgroundColor: bg5.secondary
|
|
1751
1923
|
},
|
|
1752
1924
|
columnHeader: {
|
|
1753
1925
|
fontSize: 12,
|
|
1754
1926
|
lineHeight: "18px",
|
|
1755
1927
|
fontWeight: 500,
|
|
1756
|
-
color:
|
|
1928
|
+
color: fg5.tertiary,
|
|
1757
1929
|
"&:focus, &:focus-within": {
|
|
1758
1930
|
outline: "none"
|
|
1759
1931
|
}
|
|
@@ -1764,27 +1936,27 @@ function buildComponents(tokens) {
|
|
|
1764
1936
|
cell: {
|
|
1765
1937
|
fontSize: 14,
|
|
1766
1938
|
lineHeight: "20px",
|
|
1767
|
-
color:
|
|
1939
|
+
color: fg5.tertiary,
|
|
1768
1940
|
"&:focus, &:focus-within": {
|
|
1769
1941
|
outline: "none"
|
|
1770
1942
|
}
|
|
1771
1943
|
},
|
|
1772
1944
|
row: {
|
|
1773
1945
|
"&:hover": {
|
|
1774
|
-
backgroundColor:
|
|
1946
|
+
backgroundColor: bg5.primaryHover
|
|
1775
1947
|
},
|
|
1776
1948
|
"&.Mui-selected": {
|
|
1777
|
-
backgroundColor:
|
|
1949
|
+
backgroundColor: bg5.brandPrimary,
|
|
1778
1950
|
"&:hover": {
|
|
1779
|
-
backgroundColor:
|
|
1951
|
+
backgroundColor: bg5.brandPrimary
|
|
1780
1952
|
}
|
|
1781
1953
|
}
|
|
1782
1954
|
},
|
|
1783
1955
|
footerContainer: {
|
|
1784
|
-
borderTop: `1px solid ${
|
|
1956
|
+
borderTop: `1px solid ${border5.secondary}`
|
|
1785
1957
|
},
|
|
1786
1958
|
columnSeparator: {
|
|
1787
|
-
color:
|
|
1959
|
+
color: border5.secondary
|
|
1788
1960
|
}
|
|
1789
1961
|
}
|
|
1790
1962
|
}
|
|
@@ -1802,65 +1974,7 @@ var components = buildComponents({
|
|
|
1802
1974
|
border,
|
|
1803
1975
|
buttonColors});
|
|
1804
1976
|
|
|
1805
|
-
// src/theme/
|
|
1806
|
-
function buildShadows(tokens) {
|
|
1807
|
-
const tokenShadows = tokens.shadows;
|
|
1808
|
-
return [
|
|
1809
|
-
"none",
|
|
1810
|
-
// 0
|
|
1811
|
-
tokenShadows.xs,
|
|
1812
|
-
// 1
|
|
1813
|
-
tokenShadows.sm,
|
|
1814
|
-
// 2
|
|
1815
|
-
tokenShadows.sm,
|
|
1816
|
-
// 3
|
|
1817
|
-
tokenShadows.md,
|
|
1818
|
-
// 4
|
|
1819
|
-
tokenShadows.md,
|
|
1820
|
-
// 5
|
|
1821
|
-
tokenShadows.md,
|
|
1822
|
-
// 6
|
|
1823
|
-
tokenShadows.lg,
|
|
1824
|
-
// 7
|
|
1825
|
-
tokenShadows.lg,
|
|
1826
|
-
// 8
|
|
1827
|
-
tokenShadows.lg,
|
|
1828
|
-
// 9
|
|
1829
|
-
tokenShadows.xl,
|
|
1830
|
-
// 10
|
|
1831
|
-
tokenShadows.xl,
|
|
1832
|
-
// 11
|
|
1833
|
-
tokenShadows.xl,
|
|
1834
|
-
// 12
|
|
1835
|
-
tokenShadows["2xl"],
|
|
1836
|
-
// 13
|
|
1837
|
-
tokenShadows["2xl"],
|
|
1838
|
-
// 14
|
|
1839
|
-
tokenShadows["2xl"],
|
|
1840
|
-
// 15
|
|
1841
|
-
tokenShadows["3xl"],
|
|
1842
|
-
// 16
|
|
1843
|
-
tokenShadows["3xl"],
|
|
1844
|
-
// 17
|
|
1845
|
-
tokenShadows["3xl"],
|
|
1846
|
-
// 18
|
|
1847
|
-
tokenShadows["3xl"],
|
|
1848
|
-
// 19
|
|
1849
|
-
tokenShadows["3xl"],
|
|
1850
|
-
// 20
|
|
1851
|
-
tokenShadows["3xl"],
|
|
1852
|
-
// 21
|
|
1853
|
-
tokenShadows["3xl"],
|
|
1854
|
-
// 22
|
|
1855
|
-
tokenShadows["3xl"],
|
|
1856
|
-
// 23
|
|
1857
|
-
tokenShadows["3xl"]
|
|
1858
|
-
// 24
|
|
1859
|
-
];
|
|
1860
|
-
}
|
|
1861
|
-
var shadows2 = buildShadows({
|
|
1862
|
-
shadows
|
|
1863
|
-
});
|
|
1977
|
+
// src/theme/buildTheme.ts
|
|
1864
1978
|
function buildThemeOptions(tokens) {
|
|
1865
1979
|
return {
|
|
1866
1980
|
palette: buildPalette(tokens),
|
|
@@ -1876,60 +1990,23 @@ function buildTheme(tokens) {
|
|
|
1876
1990
|
return styles.createTheme(buildThemeOptions(tokens));
|
|
1877
1991
|
}
|
|
1878
1992
|
|
|
1879
|
-
// src/theme/presets/forest.ts
|
|
1880
|
-
var forestPreset = {
|
|
1881
|
-
name: "forest",
|
|
1882
|
-
defaultVariant: "light",
|
|
1883
|
-
variants: {
|
|
1884
|
-
light: {
|
|
1885
|
-
tokens: {
|
|
1886
|
-
colors,
|
|
1887
|
-
spacing,
|
|
1888
|
-
radius,
|
|
1889
|
-
shadows,
|
|
1890
|
-
focusRings,
|
|
1891
|
-
fontFamily,
|
|
1892
|
-
fontSize,
|
|
1893
|
-
lineHeight,
|
|
1894
|
-
fontWeight,
|
|
1895
|
-
display,
|
|
1896
|
-
container,
|
|
1897
|
-
widths,
|
|
1898
|
-
text,
|
|
1899
|
-
bg,
|
|
1900
|
-
fg,
|
|
1901
|
-
border,
|
|
1902
|
-
buttonColors,
|
|
1903
|
-
avatarColors,
|
|
1904
|
-
breadcrumbColors,
|
|
1905
|
-
iconColors,
|
|
1906
|
-
navColors,
|
|
1907
|
-
sliderColors,
|
|
1908
|
-
toggleColors,
|
|
1909
|
-
chartColors,
|
|
1910
|
-
alpha
|
|
1911
|
-
}
|
|
1912
|
-
}
|
|
1913
|
-
}
|
|
1914
|
-
};
|
|
1915
|
-
|
|
1916
|
-
// src/theme/presets/alkemy-plus.ts
|
|
1993
|
+
// src/theme/presets/forest-external.ts
|
|
1917
1994
|
var colors2 = {
|
|
1918
1995
|
...colors,
|
|
1919
|
-
/** Brand scale —
|
|
1996
|
+
/** Brand scale — purple for client-facing products (#9D5FFF) */
|
|
1920
1997
|
brand: {
|
|
1921
|
-
25: "#
|
|
1922
|
-
50: "#
|
|
1923
|
-
100: "#
|
|
1924
|
-
200: "#
|
|
1925
|
-
300: "#
|
|
1926
|
-
400: "#
|
|
1927
|
-
500: "#
|
|
1928
|
-
600: "#
|
|
1929
|
-
700: "#
|
|
1930
|
-
800: "#
|
|
1931
|
-
900: "#
|
|
1932
|
-
950: "#
|
|
1998
|
+
25: "#faf8ff",
|
|
1999
|
+
50: "#f5f0ff",
|
|
2000
|
+
100: "#ebe0ff",
|
|
2001
|
+
200: "#d6c0ff",
|
|
2002
|
+
300: "#b090ff",
|
|
2003
|
+
400: "#9D5FFF",
|
|
2004
|
+
500: "#7c4de6",
|
|
2005
|
+
600: "#5b3acc",
|
|
2006
|
+
700: "#3a1aad",
|
|
2007
|
+
800: "#190a8a",
|
|
2008
|
+
900: "#000066",
|
|
2009
|
+
950: "#000033"
|
|
1933
2010
|
},
|
|
1934
2011
|
/** Warm-neutral gray scale */
|
|
1935
2012
|
gray: {
|
|
@@ -2165,18 +2242,18 @@ var chartColors2 = {
|
|
|
2165
2242
|
crosshairFg: colors2.gray[500],
|
|
2166
2243
|
legendFg: text2.tertiary,
|
|
2167
2244
|
series: [
|
|
2168
|
-
{ fg:
|
|
2169
|
-
{ fg:
|
|
2170
|
-
{ fg:
|
|
2245
|
+
{ fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
|
|
2246
|
+
{ fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
|
|
2247
|
+
{ fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
|
|
2171
2248
|
{ fg: colors2.warning[400], fgHover: colors2.warning[500], bg: colors2.warning[100], bgHover: colors2.warning[200] },
|
|
2172
|
-
{ fg:
|
|
2173
|
-
{ fg:
|
|
2174
|
-
{ fg:
|
|
2175
|
-
{ fg:
|
|
2176
|
-
{ fg:
|
|
2177
|
-
{ fg:
|
|
2178
|
-
{ fg:
|
|
2179
|
-
{ fg:
|
|
2249
|
+
{ fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
|
|
2250
|
+
{ fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
|
|
2251
|
+
{ fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
|
|
2252
|
+
{ fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
|
|
2253
|
+
{ fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
|
|
2254
|
+
{ fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
|
|
2255
|
+
{ fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
|
|
2256
|
+
{ fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
|
|
2180
2257
|
]
|
|
2181
2258
|
};
|
|
2182
2259
|
var focusRings2 = {
|
|
@@ -2189,8 +2266,8 @@ var focusRings2 = {
|
|
|
2189
2266
|
error: "0px 0px 0px 4px #f044383d",
|
|
2190
2267
|
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2191
2268
|
};
|
|
2192
|
-
var
|
|
2193
|
-
name: "
|
|
2269
|
+
var forestExternalPreset = {
|
|
2270
|
+
name: "forest-external",
|
|
2194
2271
|
defaultVariant: "light",
|
|
2195
2272
|
variants: {
|
|
2196
2273
|
light: {
|
|
@@ -2225,10 +2302,650 @@ var alkemyPlusPreset = {
|
|
|
2225
2302
|
}
|
|
2226
2303
|
};
|
|
2227
2304
|
|
|
2305
|
+
// src/theme/presets/forest-agency.ts
|
|
2306
|
+
var colors3 = {
|
|
2307
|
+
...colors,
|
|
2308
|
+
/** Brand scale — black-based for primary actions */
|
|
2309
|
+
brand: {
|
|
2310
|
+
25: "#fafafa",
|
|
2311
|
+
50: "#f5f5f5",
|
|
2312
|
+
100: "#ebebeb",
|
|
2313
|
+
200: "#d6d6d6",
|
|
2314
|
+
300: "#b0b0b0",
|
|
2315
|
+
400: "#737373",
|
|
2316
|
+
500: "#404040",
|
|
2317
|
+
600: "#1a1a1a",
|
|
2318
|
+
700: "#0d0d0d",
|
|
2319
|
+
800: "#050505",
|
|
2320
|
+
900: "#000000",
|
|
2321
|
+
950: "#000000"
|
|
2322
|
+
},
|
|
2323
|
+
/** Accent color — red/orange sparingly used (#FF2821) */
|
|
2324
|
+
accent: {
|
|
2325
|
+
25: "#fff8f7",
|
|
2326
|
+
50: "#fff0ee",
|
|
2327
|
+
100: "#ffe0dd",
|
|
2328
|
+
200: "#ffc0bb",
|
|
2329
|
+
300: "#ff9090",
|
|
2330
|
+
400: "#FF2821",
|
|
2331
|
+
500: "#e61a1a",
|
|
2332
|
+
600: "#cc1010",
|
|
2333
|
+
700: "#a30808",
|
|
2334
|
+
800: "#7a0000",
|
|
2335
|
+
900: "#520000",
|
|
2336
|
+
950: "#290000"
|
|
2337
|
+
},
|
|
2338
|
+
/** Warm-neutral gray scale */
|
|
2339
|
+
gray: {
|
|
2340
|
+
25: "#fdfcfc",
|
|
2341
|
+
50: "#faf9f8",
|
|
2342
|
+
100: "#f5f3f1",
|
|
2343
|
+
200: "#e8e5e3",
|
|
2344
|
+
300: "#d8d8dc",
|
|
2345
|
+
400: "#a0a0a6",
|
|
2346
|
+
500: "#71717a",
|
|
2347
|
+
600: "#52525b",
|
|
2348
|
+
700: "#3f3f46",
|
|
2349
|
+
800: "#27272a",
|
|
2350
|
+
900: "#18181b",
|
|
2351
|
+
950: "#09090b"
|
|
2352
|
+
}
|
|
2353
|
+
};
|
|
2354
|
+
var radius3 = {
|
|
2355
|
+
...radius,
|
|
2356
|
+
xxs: 1,
|
|
2357
|
+
xs: 2,
|
|
2358
|
+
sm: 3,
|
|
2359
|
+
md: 4,
|
|
2360
|
+
lg: 5,
|
|
2361
|
+
xl: 6,
|
|
2362
|
+
"2xl": 8,
|
|
2363
|
+
"3xl": 10,
|
|
2364
|
+
"4xl": 12
|
|
2365
|
+
};
|
|
2366
|
+
var text3 = {
|
|
2367
|
+
primary: colors3.gray[900],
|
|
2368
|
+
secondary: colors3.gray[700],
|
|
2369
|
+
secondaryHover: colors3.gray[800],
|
|
2370
|
+
tertiary: colors3.gray[600],
|
|
2371
|
+
tertiaryHover: colors3.gray[700],
|
|
2372
|
+
quaternary: colors3.gray[500],
|
|
2373
|
+
disabled: colors3.gray[500],
|
|
2374
|
+
placeholder: colors3.gray[500],
|
|
2375
|
+
placeholderSubtle: colors3.gray[300],
|
|
2376
|
+
white: colors3.base.white,
|
|
2377
|
+
brandPrimary: colors3.brand[900],
|
|
2378
|
+
brandSecondary: colors3.brand[700],
|
|
2379
|
+
brandTertiary: colors3.brand[600],
|
|
2380
|
+
brandTertiaryAlt: colors3.brand[600],
|
|
2381
|
+
primaryOnBrand: colors3.base.white,
|
|
2382
|
+
secondaryOnBrand: colors3.brand[200],
|
|
2383
|
+
tertiaryOnBrand: colors3.brand[200],
|
|
2384
|
+
quaternaryOnBrand: colors3.brand[300],
|
|
2385
|
+
errorPrimary: colors3.error[600],
|
|
2386
|
+
warningPrimary: colors3.warning[600],
|
|
2387
|
+
successPrimary: colors3.success[600]
|
|
2388
|
+
};
|
|
2389
|
+
var bg3 = {
|
|
2390
|
+
primary: colors3.gray[50],
|
|
2391
|
+
primaryAlt: colors3.gray[50],
|
|
2392
|
+
primaryHover: colors3.gray[100],
|
|
2393
|
+
primarySolid: colors3.gray[950],
|
|
2394
|
+
secondary: colors3.base.white,
|
|
2395
|
+
secondaryAlt: colors3.base.white,
|
|
2396
|
+
secondarySubtle: colors3.gray[25],
|
|
2397
|
+
secondaryHover: colors3.gray[50],
|
|
2398
|
+
secondarySolid: colors3.gray[600],
|
|
2399
|
+
tertiary: colors3.gray[100],
|
|
2400
|
+
quaternary: colors3.gray[200],
|
|
2401
|
+
active: colors3.gray[200],
|
|
2402
|
+
disabled: colors3.gray[100],
|
|
2403
|
+
disabledSubtle: colors3.gray[50],
|
|
2404
|
+
overlay: colors3.gray[950],
|
|
2405
|
+
brandPrimary: colors3.brand[50],
|
|
2406
|
+
brandPrimaryAlt: colors3.brand[50],
|
|
2407
|
+
brandSecondary: colors3.brand[100],
|
|
2408
|
+
brandSolid: colors3.brand[600],
|
|
2409
|
+
brandSolidHover: colors3.brand[700],
|
|
2410
|
+
brandSection: colors3.brand[800],
|
|
2411
|
+
brandSectionSubtle: colors3.brand[700],
|
|
2412
|
+
errorPrimary: colors3.error[50],
|
|
2413
|
+
errorSecondary: colors3.error[100],
|
|
2414
|
+
errorSolid: colors3.error[600],
|
|
2415
|
+
warningPrimary: colors3.warning[50],
|
|
2416
|
+
warningSecondary: colors3.warning[100],
|
|
2417
|
+
warningSolid: colors3.warning[600],
|
|
2418
|
+
successPrimary: colors3.success[50],
|
|
2419
|
+
successSecondary: colors3.success[100],
|
|
2420
|
+
successSolid: colors3.success[600]
|
|
2421
|
+
};
|
|
2422
|
+
var fg3 = {
|
|
2423
|
+
primary: colors3.gray[900],
|
|
2424
|
+
secondary: colors3.gray[700],
|
|
2425
|
+
secondaryHover: colors3.gray[800],
|
|
2426
|
+
tertiary: colors3.gray[600],
|
|
2427
|
+
tertiaryHover: colors3.gray[700],
|
|
2428
|
+
quaternary: colors3.gray[500],
|
|
2429
|
+
quaternaryHover: colors3.gray[600],
|
|
2430
|
+
quinary: colors3.gray[400],
|
|
2431
|
+
quinaryHover: colors3.gray[500],
|
|
2432
|
+
senary: colors3.gray[300],
|
|
2433
|
+
white: colors3.base.white,
|
|
2434
|
+
disabled: colors3.gray[400],
|
|
2435
|
+
disabledSubtle: colors3.gray[300],
|
|
2436
|
+
brandPrimary: colors3.brand[600],
|
|
2437
|
+
brandPrimaryAlt: colors3.brand[600],
|
|
2438
|
+
brandSecondary: colors3.brand[500],
|
|
2439
|
+
errorPrimary: colors3.error[600],
|
|
2440
|
+
errorSecondary: colors3.error[500],
|
|
2441
|
+
warningPrimary: colors3.warning[600],
|
|
2442
|
+
warningSecondary: colors3.warning[500],
|
|
2443
|
+
successPrimary: colors3.success[600],
|
|
2444
|
+
successSecondary: colors3.success[500]
|
|
2445
|
+
};
|
|
2446
|
+
var border3 = {
|
|
2447
|
+
primary: colors3.gray[300],
|
|
2448
|
+
secondary: colors3.gray[200],
|
|
2449
|
+
tertiary: colors3.gray[100],
|
|
2450
|
+
disabled: colors3.gray[300],
|
|
2451
|
+
disabledSubtle: colors3.gray[200],
|
|
2452
|
+
brand: colors3.brand[300],
|
|
2453
|
+
brandSolid: colors3.brand[600],
|
|
2454
|
+
brandSolidAlt: colors3.brand[600],
|
|
2455
|
+
error: colors3.error[300],
|
|
2456
|
+
errorSolid: colors3.error[600]
|
|
2457
|
+
};
|
|
2458
|
+
var buttonColors3 = {
|
|
2459
|
+
primary: {
|
|
2460
|
+
bg: colors3.brand[600],
|
|
2461
|
+
bgHover: colors3.brand[700],
|
|
2462
|
+
fg: colors3.base.white,
|
|
2463
|
+
fgHover: colors3.base.white,
|
|
2464
|
+
border: colors3.brand[600],
|
|
2465
|
+
borderHover: colors3.brand[700]
|
|
2466
|
+
},
|
|
2467
|
+
secondary: {
|
|
2468
|
+
bg: colors3.base.white,
|
|
2469
|
+
bgHover: colors3.gray[50],
|
|
2470
|
+
fg: colors3.gray[700],
|
|
2471
|
+
fgHover: colors3.gray[800],
|
|
2472
|
+
border: colors3.gray[300],
|
|
2473
|
+
borderHover: colors3.gray[300]
|
|
2474
|
+
},
|
|
2475
|
+
secondaryColor: {
|
|
2476
|
+
bg: colors3.base.white,
|
|
2477
|
+
bgHover: colors3.brand[50],
|
|
2478
|
+
fg: colors3.brand[700],
|
|
2479
|
+
fgHover: colors3.brand[800],
|
|
2480
|
+
border: colors3.brand[300],
|
|
2481
|
+
borderHover: colors3.brand[300]
|
|
2482
|
+
},
|
|
2483
|
+
tertiary: {
|
|
2484
|
+
fg: colors3.gray[600],
|
|
2485
|
+
fgHover: colors3.gray[700],
|
|
2486
|
+
bgHover: colors3.gray[50]
|
|
2487
|
+
},
|
|
2488
|
+
tertiaryColor: {
|
|
2489
|
+
fg: colors3.brand[700],
|
|
2490
|
+
fgHover: colors3.brand[800],
|
|
2491
|
+
bgHover: colors3.brand[50]
|
|
2492
|
+
},
|
|
2493
|
+
primaryError: {
|
|
2494
|
+
bg: colors3.error[600],
|
|
2495
|
+
bgHover: colors3.error[700],
|
|
2496
|
+
fg: colors3.base.white,
|
|
2497
|
+
fgHover: colors3.base.white,
|
|
2498
|
+
border: colors3.error[600],
|
|
2499
|
+
borderHover: colors3.error[700]
|
|
2500
|
+
},
|
|
2501
|
+
secondaryError: {
|
|
2502
|
+
bg: colors3.base.white,
|
|
2503
|
+
bgHover: colors3.error[50],
|
|
2504
|
+
fg: colors3.error[700],
|
|
2505
|
+
fgHover: colors3.error[800],
|
|
2506
|
+
border: colors3.error[300],
|
|
2507
|
+
borderHover: colors3.error[300]
|
|
2508
|
+
},
|
|
2509
|
+
tertiaryError: {
|
|
2510
|
+
fg: colors3.error[700],
|
|
2511
|
+
fgHover: colors3.error[800],
|
|
2512
|
+
bgHover: colors3.error[50]
|
|
2513
|
+
}
|
|
2514
|
+
};
|
|
2515
|
+
var avatarColors3 = {
|
|
2516
|
+
bg: colors3.gray[100],
|
|
2517
|
+
contrastBorder: "#00000014",
|
|
2518
|
+
profilePhotoBorder: colors3.base.white,
|
|
2519
|
+
focusBorder: "#a0a0a624"
|
|
2520
|
+
// gray[400] + 14% alpha
|
|
2521
|
+
};
|
|
2522
|
+
var breadcrumbColors3 = {
|
|
2523
|
+
fg: colors3.gray[600],
|
|
2524
|
+
fgHover: colors3.gray[700],
|
|
2525
|
+
bgHover: colors3.gray[50],
|
|
2526
|
+
brandBgHover: colors3.brand[50],
|
|
2527
|
+
brandFgHover: colors3.brand[700],
|
|
2528
|
+
iconFg: colors3.gray[500],
|
|
2529
|
+
iconFgHover: colors3.gray[700],
|
|
2530
|
+
brandIconFgHover: colors3.brand[700]
|
|
2531
|
+
};
|
|
2532
|
+
var iconColors3 = {
|
|
2533
|
+
fgBrand: colors3.brand[600],
|
|
2534
|
+
fgBrandOnBrand: colors3.brand[200],
|
|
2535
|
+
featuredModernBorder: colors3.gray[200],
|
|
2536
|
+
featuredLightFgBrand: colors3.brand[600],
|
|
2537
|
+
featuredLightFgGray: colors3.gray[500],
|
|
2538
|
+
featuredLightFgError: colors3.error[600],
|
|
2539
|
+
featuredLightFgWarning: colors3.warning[600],
|
|
2540
|
+
featuredLightFgSuccess: colors3.success[600],
|
|
2541
|
+
featuredDarkFgBrand: colors3.base.white,
|
|
2542
|
+
featuredDarkFgGray: colors3.base.white,
|
|
2543
|
+
featuredDarkFgError: colors3.base.white,
|
|
2544
|
+
featuredDarkFgWarning: colors3.base.white,
|
|
2545
|
+
featuredDarkFgSuccess: colors3.base.white
|
|
2546
|
+
};
|
|
2547
|
+
var navColors3 = {
|
|
2548
|
+
itemIconFg: colors3.gray[500],
|
|
2549
|
+
itemIconFgActive: colors3.gray[700],
|
|
2550
|
+
itemButtonIconFg: colors3.gray[500],
|
|
2551
|
+
itemButtonIconFgActive: colors3.gray[700]
|
|
2552
|
+
};
|
|
2553
|
+
var sliderColors3 = {
|
|
2554
|
+
handleBorder: colors3.brand[600],
|
|
2555
|
+
handleBg: colors3.base.white
|
|
2556
|
+
};
|
|
2557
|
+
var toggleColors3 = {
|
|
2558
|
+
buttonFgDisabled: colors3.gray[50]
|
|
2559
|
+
};
|
|
2560
|
+
var chartColors3 = {
|
|
2561
|
+
axisFg: colors3.gray[100],
|
|
2562
|
+
gridlineFg: colors3.gray[100],
|
|
2563
|
+
labelFg: colors3.gray[600],
|
|
2564
|
+
labelFgEmphasis: colors3.gray[700],
|
|
2565
|
+
bg: colors3.base.white,
|
|
2566
|
+
bgAlt: colors3.gray[50],
|
|
2567
|
+
tooltipBg: colors3.gray[950],
|
|
2568
|
+
tooltipFg: colors3.base.white,
|
|
2569
|
+
crosshairFg: colors3.gray[500],
|
|
2570
|
+
legendFg: text3.tertiary,
|
|
2571
|
+
series: [
|
|
2572
|
+
{ fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
|
|
2573
|
+
{ fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
|
|
2574
|
+
{ fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
|
|
2575
|
+
{ fg: colors3.warning[400], fgHover: colors3.warning[500], bg: colors3.warning[100], bgHover: colors3.warning[200] },
|
|
2576
|
+
{ fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
|
|
2577
|
+
{ fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
|
|
2578
|
+
{ fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
|
|
2579
|
+
{ fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
|
|
2580
|
+
{ fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
|
|
2581
|
+
{ fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
|
|
2582
|
+
{ fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
|
|
2583
|
+
{ fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
|
|
2584
|
+
]
|
|
2585
|
+
};
|
|
2586
|
+
var focusRings3 = {
|
|
2587
|
+
brand: "0px 0px 0px 4px #4040403d",
|
|
2588
|
+
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
|
|
2589
|
+
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
|
|
2590
|
+
gray: "0px 0px 0px 4px #a0a0a624",
|
|
2591
|
+
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
|
|
2592
|
+
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
|
|
2593
|
+
error: "0px 0px 0px 4px #f044383d",
|
|
2594
|
+
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2595
|
+
};
|
|
2596
|
+
var forestAgencyPreset = {
|
|
2597
|
+
name: "forest-agency",
|
|
2598
|
+
defaultVariant: "light",
|
|
2599
|
+
variants: {
|
|
2600
|
+
light: {
|
|
2601
|
+
tokens: {
|
|
2602
|
+
colors: colors3,
|
|
2603
|
+
spacing,
|
|
2604
|
+
radius: radius3,
|
|
2605
|
+
shadows,
|
|
2606
|
+
focusRings: focusRings3,
|
|
2607
|
+
fontFamily: '"Aeonik", sans-serif',
|
|
2608
|
+
fontSize,
|
|
2609
|
+
lineHeight,
|
|
2610
|
+
fontWeight,
|
|
2611
|
+
display,
|
|
2612
|
+
container,
|
|
2613
|
+
widths,
|
|
2614
|
+
text: text3,
|
|
2615
|
+
bg: bg3,
|
|
2616
|
+
fg: fg3,
|
|
2617
|
+
border: border3,
|
|
2618
|
+
buttonColors: buttonColors3,
|
|
2619
|
+
avatarColors: avatarColors3,
|
|
2620
|
+
breadcrumbColors: breadcrumbColors3,
|
|
2621
|
+
iconColors: iconColors3,
|
|
2622
|
+
navColors: navColors3,
|
|
2623
|
+
sliderColors: sliderColors3,
|
|
2624
|
+
toggleColors: toggleColors3,
|
|
2625
|
+
chartColors: chartColors3,
|
|
2626
|
+
alpha
|
|
2627
|
+
}
|
|
2628
|
+
}
|
|
2629
|
+
}
|
|
2630
|
+
};
|
|
2631
|
+
|
|
2632
|
+
// src/theme/presets/forest-internal.ts
|
|
2633
|
+
var colors4 = {
|
|
2634
|
+
...colors,
|
|
2635
|
+
/** Brand scale — pink/magenta for internal tools (#FF78F3) */
|
|
2636
|
+
brand: {
|
|
2637
|
+
25: "#fff8fd",
|
|
2638
|
+
50: "#fff0fa",
|
|
2639
|
+
100: "#ffe0f5",
|
|
2640
|
+
200: "#ffc0eb",
|
|
2641
|
+
300: "#ff90d8",
|
|
2642
|
+
400: "#FF78F3",
|
|
2643
|
+
500: "#e650d4",
|
|
2644
|
+
600: "#cc28b5",
|
|
2645
|
+
700: "#a3008c",
|
|
2646
|
+
800: "#7a0066",
|
|
2647
|
+
900: "#520044",
|
|
2648
|
+
950: "#290022"
|
|
2649
|
+
},
|
|
2650
|
+
/** Warm-neutral gray scale */
|
|
2651
|
+
gray: {
|
|
2652
|
+
25: "#fdfcfc",
|
|
2653
|
+
50: "#faf9f8",
|
|
2654
|
+
100: "#f5f3f1",
|
|
2655
|
+
200: "#e8e5e3",
|
|
2656
|
+
300: "#d8d8dc",
|
|
2657
|
+
400: "#a0a0a6",
|
|
2658
|
+
500: "#71717a",
|
|
2659
|
+
600: "#52525b",
|
|
2660
|
+
700: "#3f3f46",
|
|
2661
|
+
800: "#27272a",
|
|
2662
|
+
900: "#18181b",
|
|
2663
|
+
950: "#09090b"
|
|
2664
|
+
}
|
|
2665
|
+
};
|
|
2666
|
+
var radius4 = {
|
|
2667
|
+
...radius,
|
|
2668
|
+
xxs: 1,
|
|
2669
|
+
xs: 2,
|
|
2670
|
+
sm: 3,
|
|
2671
|
+
md: 4,
|
|
2672
|
+
lg: 5,
|
|
2673
|
+
xl: 6,
|
|
2674
|
+
"2xl": 8,
|
|
2675
|
+
"3xl": 10,
|
|
2676
|
+
"4xl": 12
|
|
2677
|
+
};
|
|
2678
|
+
var text4 = {
|
|
2679
|
+
primary: colors4.gray[900],
|
|
2680
|
+
secondary: colors4.gray[700],
|
|
2681
|
+
secondaryHover: colors4.gray[800],
|
|
2682
|
+
tertiary: colors4.gray[600],
|
|
2683
|
+
tertiaryHover: colors4.gray[700],
|
|
2684
|
+
quaternary: colors4.gray[500],
|
|
2685
|
+
disabled: colors4.gray[500],
|
|
2686
|
+
placeholder: colors4.gray[500],
|
|
2687
|
+
placeholderSubtle: colors4.gray[300],
|
|
2688
|
+
white: colors4.base.white,
|
|
2689
|
+
brandPrimary: colors4.brand[900],
|
|
2690
|
+
brandSecondary: colors4.brand[700],
|
|
2691
|
+
brandTertiary: colors4.brand[600],
|
|
2692
|
+
brandTertiaryAlt: colors4.brand[600],
|
|
2693
|
+
primaryOnBrand: colors4.base.white,
|
|
2694
|
+
secondaryOnBrand: colors4.brand[200],
|
|
2695
|
+
tertiaryOnBrand: colors4.brand[200],
|
|
2696
|
+
quaternaryOnBrand: colors4.brand[300],
|
|
2697
|
+
errorPrimary: colors4.error[600],
|
|
2698
|
+
warningPrimary: colors4.warning[600],
|
|
2699
|
+
successPrimary: colors4.success[600]
|
|
2700
|
+
};
|
|
2701
|
+
var bg4 = {
|
|
2702
|
+
primary: colors4.gray[50],
|
|
2703
|
+
primaryAlt: colors4.gray[50],
|
|
2704
|
+
primaryHover: colors4.gray[100],
|
|
2705
|
+
primarySolid: colors4.gray[950],
|
|
2706
|
+
secondary: colors4.base.white,
|
|
2707
|
+
secondaryAlt: colors4.base.white,
|
|
2708
|
+
secondarySubtle: colors4.gray[25],
|
|
2709
|
+
secondaryHover: colors4.gray[50],
|
|
2710
|
+
secondarySolid: colors4.gray[600],
|
|
2711
|
+
tertiary: colors4.gray[100],
|
|
2712
|
+
quaternary: colors4.gray[200],
|
|
2713
|
+
active: colors4.gray[200],
|
|
2714
|
+
disabled: colors4.gray[100],
|
|
2715
|
+
disabledSubtle: colors4.gray[50],
|
|
2716
|
+
overlay: colors4.gray[950],
|
|
2717
|
+
brandPrimary: colors4.brand[50],
|
|
2718
|
+
brandPrimaryAlt: colors4.brand[50],
|
|
2719
|
+
brandSecondary: colors4.brand[100],
|
|
2720
|
+
brandSolid: colors4.brand[600],
|
|
2721
|
+
brandSolidHover: colors4.brand[700],
|
|
2722
|
+
brandSection: colors4.brand[800],
|
|
2723
|
+
brandSectionSubtle: colors4.brand[700],
|
|
2724
|
+
errorPrimary: colors4.error[50],
|
|
2725
|
+
errorSecondary: colors4.error[100],
|
|
2726
|
+
errorSolid: colors4.error[600],
|
|
2727
|
+
warningPrimary: colors4.warning[50],
|
|
2728
|
+
warningSecondary: colors4.warning[100],
|
|
2729
|
+
warningSolid: colors4.warning[600],
|
|
2730
|
+
successPrimary: colors4.success[50],
|
|
2731
|
+
successSecondary: colors4.success[100],
|
|
2732
|
+
successSolid: colors4.success[600]
|
|
2733
|
+
};
|
|
2734
|
+
var fg4 = {
|
|
2735
|
+
primary: colors4.gray[900],
|
|
2736
|
+
secondary: colors4.gray[700],
|
|
2737
|
+
secondaryHover: colors4.gray[800],
|
|
2738
|
+
tertiary: colors4.gray[600],
|
|
2739
|
+
tertiaryHover: colors4.gray[700],
|
|
2740
|
+
quaternary: colors4.gray[500],
|
|
2741
|
+
quaternaryHover: colors4.gray[600],
|
|
2742
|
+
quinary: colors4.gray[400],
|
|
2743
|
+
quinaryHover: colors4.gray[500],
|
|
2744
|
+
senary: colors4.gray[300],
|
|
2745
|
+
white: colors4.base.white,
|
|
2746
|
+
disabled: colors4.gray[400],
|
|
2747
|
+
disabledSubtle: colors4.gray[300],
|
|
2748
|
+
brandPrimary: colors4.brand[600],
|
|
2749
|
+
brandPrimaryAlt: colors4.brand[600],
|
|
2750
|
+
brandSecondary: colors4.brand[500],
|
|
2751
|
+
errorPrimary: colors4.error[600],
|
|
2752
|
+
errorSecondary: colors4.error[500],
|
|
2753
|
+
warningPrimary: colors4.warning[600],
|
|
2754
|
+
warningSecondary: colors4.warning[500],
|
|
2755
|
+
successPrimary: colors4.success[600],
|
|
2756
|
+
successSecondary: colors4.success[500]
|
|
2757
|
+
};
|
|
2758
|
+
var border4 = {
|
|
2759
|
+
primary: colors4.gray[300],
|
|
2760
|
+
secondary: colors4.gray[200],
|
|
2761
|
+
tertiary: colors4.gray[100],
|
|
2762
|
+
disabled: colors4.gray[300],
|
|
2763
|
+
disabledSubtle: colors4.gray[200],
|
|
2764
|
+
brand: colors4.brand[300],
|
|
2765
|
+
brandSolid: colors4.brand[600],
|
|
2766
|
+
brandSolidAlt: colors4.brand[600],
|
|
2767
|
+
error: colors4.error[300],
|
|
2768
|
+
errorSolid: colors4.error[600]
|
|
2769
|
+
};
|
|
2770
|
+
var buttonColors4 = {
|
|
2771
|
+
primary: {
|
|
2772
|
+
bg: colors4.brand[600],
|
|
2773
|
+
bgHover: colors4.brand[700],
|
|
2774
|
+
fg: colors4.base.white,
|
|
2775
|
+
fgHover: colors4.base.white,
|
|
2776
|
+
border: colors4.brand[600],
|
|
2777
|
+
borderHover: colors4.brand[700]
|
|
2778
|
+
},
|
|
2779
|
+
secondary: {
|
|
2780
|
+
bg: colors4.base.white,
|
|
2781
|
+
bgHover: colors4.gray[50],
|
|
2782
|
+
fg: colors4.gray[700],
|
|
2783
|
+
fgHover: colors4.gray[800],
|
|
2784
|
+
border: colors4.gray[300],
|
|
2785
|
+
borderHover: colors4.gray[300]
|
|
2786
|
+
},
|
|
2787
|
+
secondaryColor: {
|
|
2788
|
+
bg: colors4.base.white,
|
|
2789
|
+
bgHover: colors4.brand[50],
|
|
2790
|
+
fg: colors4.brand[700],
|
|
2791
|
+
fgHover: colors4.brand[800],
|
|
2792
|
+
border: colors4.brand[300],
|
|
2793
|
+
borderHover: colors4.brand[300]
|
|
2794
|
+
},
|
|
2795
|
+
tertiary: {
|
|
2796
|
+
fg: colors4.gray[600],
|
|
2797
|
+
fgHover: colors4.gray[700],
|
|
2798
|
+
bgHover: colors4.gray[50]
|
|
2799
|
+
},
|
|
2800
|
+
tertiaryColor: {
|
|
2801
|
+
fg: colors4.brand[700],
|
|
2802
|
+
fgHover: colors4.brand[800],
|
|
2803
|
+
bgHover: colors4.brand[50]
|
|
2804
|
+
},
|
|
2805
|
+
primaryError: {
|
|
2806
|
+
bg: colors4.error[600],
|
|
2807
|
+
bgHover: colors4.error[700],
|
|
2808
|
+
fg: colors4.base.white,
|
|
2809
|
+
fgHover: colors4.base.white,
|
|
2810
|
+
border: colors4.error[600],
|
|
2811
|
+
borderHover: colors4.error[700]
|
|
2812
|
+
},
|
|
2813
|
+
secondaryError: {
|
|
2814
|
+
bg: colors4.base.white,
|
|
2815
|
+
bgHover: colors4.error[50],
|
|
2816
|
+
fg: colors4.error[700],
|
|
2817
|
+
fgHover: colors4.error[800],
|
|
2818
|
+
border: colors4.error[300],
|
|
2819
|
+
borderHover: colors4.error[300]
|
|
2820
|
+
},
|
|
2821
|
+
tertiaryError: {
|
|
2822
|
+
fg: colors4.error[700],
|
|
2823
|
+
fgHover: colors4.error[800],
|
|
2824
|
+
bgHover: colors4.error[50]
|
|
2825
|
+
}
|
|
2826
|
+
};
|
|
2827
|
+
var avatarColors4 = {
|
|
2828
|
+
bg: colors4.gray[100],
|
|
2829
|
+
contrastBorder: "#00000014",
|
|
2830
|
+
profilePhotoBorder: colors4.base.white,
|
|
2831
|
+
focusBorder: "#a0a0a624"
|
|
2832
|
+
// gray[400] + 14% alpha
|
|
2833
|
+
};
|
|
2834
|
+
var breadcrumbColors4 = {
|
|
2835
|
+
fg: colors4.gray[600],
|
|
2836
|
+
fgHover: colors4.gray[700],
|
|
2837
|
+
bgHover: colors4.gray[50],
|
|
2838
|
+
brandBgHover: colors4.brand[50],
|
|
2839
|
+
brandFgHover: colors4.brand[700],
|
|
2840
|
+
iconFg: colors4.gray[500],
|
|
2841
|
+
iconFgHover: colors4.gray[700],
|
|
2842
|
+
brandIconFgHover: colors4.brand[700]
|
|
2843
|
+
};
|
|
2844
|
+
var iconColors4 = {
|
|
2845
|
+
fgBrand: colors4.brand[600],
|
|
2846
|
+
fgBrandOnBrand: colors4.brand[200],
|
|
2847
|
+
featuredModernBorder: colors4.gray[200],
|
|
2848
|
+
featuredLightFgBrand: colors4.brand[600],
|
|
2849
|
+
featuredLightFgGray: colors4.gray[500],
|
|
2850
|
+
featuredLightFgError: colors4.error[600],
|
|
2851
|
+
featuredLightFgWarning: colors4.warning[600],
|
|
2852
|
+
featuredLightFgSuccess: colors4.success[600],
|
|
2853
|
+
featuredDarkFgBrand: colors4.base.white,
|
|
2854
|
+
featuredDarkFgGray: colors4.base.white,
|
|
2855
|
+
featuredDarkFgError: colors4.base.white,
|
|
2856
|
+
featuredDarkFgWarning: colors4.base.white,
|
|
2857
|
+
featuredDarkFgSuccess: colors4.base.white
|
|
2858
|
+
};
|
|
2859
|
+
var navColors4 = {
|
|
2860
|
+
itemIconFg: colors4.gray[500],
|
|
2861
|
+
itemIconFgActive: colors4.gray[700],
|
|
2862
|
+
itemButtonIconFg: colors4.gray[500],
|
|
2863
|
+
itemButtonIconFgActive: colors4.gray[700]
|
|
2864
|
+
};
|
|
2865
|
+
var sliderColors4 = {
|
|
2866
|
+
handleBorder: colors4.brand[600],
|
|
2867
|
+
handleBg: colors4.base.white
|
|
2868
|
+
};
|
|
2869
|
+
var toggleColors4 = {
|
|
2870
|
+
buttonFgDisabled: colors4.gray[50]
|
|
2871
|
+
};
|
|
2872
|
+
var chartColors4 = {
|
|
2873
|
+
axisFg: colors4.gray[100],
|
|
2874
|
+
gridlineFg: colors4.gray[100],
|
|
2875
|
+
labelFg: colors4.gray[600],
|
|
2876
|
+
labelFgEmphasis: colors4.gray[700],
|
|
2877
|
+
bg: colors4.base.white,
|
|
2878
|
+
bgAlt: colors4.gray[50],
|
|
2879
|
+
tooltipBg: colors4.gray[950],
|
|
2880
|
+
tooltipFg: colors4.base.white,
|
|
2881
|
+
crosshairFg: colors4.gray[500],
|
|
2882
|
+
legendFg: text4.tertiary,
|
|
2883
|
+
series: [
|
|
2884
|
+
{ fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
|
|
2885
|
+
{ fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
|
|
2886
|
+
{ fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
|
|
2887
|
+
{ fg: colors4.warning[400], fgHover: colors4.warning[500], bg: colors4.warning[100], bgHover: colors4.warning[200] },
|
|
2888
|
+
{ fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
|
|
2889
|
+
{ fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
|
|
2890
|
+
{ fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
|
|
2891
|
+
{ fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
|
|
2892
|
+
{ fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
|
|
2893
|
+
{ fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
|
|
2894
|
+
{ fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
|
|
2895
|
+
{ fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
|
|
2896
|
+
]
|
|
2897
|
+
};
|
|
2898
|
+
var focusRings4 = {
|
|
2899
|
+
brand: "0px 0px 0px 4px #4040403d",
|
|
2900
|
+
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
|
|
2901
|
+
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
|
|
2902
|
+
gray: "0px 0px 0px 4px #a0a0a624",
|
|
2903
|
+
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
|
|
2904
|
+
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
|
|
2905
|
+
error: "0px 0px 0px 4px #f044383d",
|
|
2906
|
+
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2907
|
+
};
|
|
2908
|
+
var forestInternalPreset = {
|
|
2909
|
+
name: "forest-internal",
|
|
2910
|
+
defaultVariant: "light",
|
|
2911
|
+
variants: {
|
|
2912
|
+
light: {
|
|
2913
|
+
tokens: {
|
|
2914
|
+
colors: colors4,
|
|
2915
|
+
spacing,
|
|
2916
|
+
radius: radius4,
|
|
2917
|
+
shadows,
|
|
2918
|
+
focusRings: focusRings4,
|
|
2919
|
+
fontFamily: '"Aeonik", sans-serif',
|
|
2920
|
+
fontSize,
|
|
2921
|
+
lineHeight,
|
|
2922
|
+
fontWeight,
|
|
2923
|
+
display,
|
|
2924
|
+
container,
|
|
2925
|
+
widths,
|
|
2926
|
+
text: text4,
|
|
2927
|
+
bg: bg4,
|
|
2928
|
+
fg: fg4,
|
|
2929
|
+
border: border4,
|
|
2930
|
+
buttonColors: buttonColors4,
|
|
2931
|
+
avatarColors: avatarColors4,
|
|
2932
|
+
breadcrumbColors: breadcrumbColors4,
|
|
2933
|
+
iconColors: iconColors4,
|
|
2934
|
+
navColors: navColors4,
|
|
2935
|
+
sliderColors: sliderColors4,
|
|
2936
|
+
toggleColors: toggleColors4,
|
|
2937
|
+
chartColors: chartColors4,
|
|
2938
|
+
alpha
|
|
2939
|
+
}
|
|
2940
|
+
}
|
|
2941
|
+
}
|
|
2942
|
+
};
|
|
2943
|
+
|
|
2228
2944
|
// src/theme/presets/index.ts
|
|
2229
2945
|
var presetRegistry = /* @__PURE__ */ new Map();
|
|
2230
|
-
presetRegistry.set(
|
|
2231
|
-
presetRegistry.set(
|
|
2946
|
+
presetRegistry.set(forestExternalPreset.name, forestExternalPreset);
|
|
2947
|
+
presetRegistry.set(forestAgencyPreset.name, forestAgencyPreset);
|
|
2948
|
+
presetRegistry.set(forestInternalPreset.name, forestInternalPreset);
|
|
2232
2949
|
function getPreset(name) {
|
|
2233
2950
|
return presetRegistry.get(name);
|
|
2234
2951
|
}
|
|
@@ -2240,18 +2957,10 @@ function getAvailablePresets() {
|
|
|
2240
2957
|
}
|
|
2241
2958
|
|
|
2242
2959
|
// src/theme/index.ts
|
|
2243
|
-
var
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
components,
|
|
2247
|
-
shadows: shadows2,
|
|
2248
|
-
shape: {
|
|
2249
|
-
borderRadius: 8
|
|
2250
|
-
}
|
|
2251
|
-
};
|
|
2252
|
-
var forestTheme = styles.createTheme(forestThemeOptions);
|
|
2960
|
+
var agencyTokens = forestAgencyPreset.variants.light.tokens;
|
|
2961
|
+
var forestTheme = buildTheme(agencyTokens);
|
|
2962
|
+
var forestThemeOptions = buildThemeOptions(agencyTokens);
|
|
2253
2963
|
|
|
2254
|
-
exports.alkemyPlusPreset = alkemyPlusPreset;
|
|
2255
2964
|
exports.alpha = alpha;
|
|
2256
2965
|
exports.avatarColors = avatarColors;
|
|
2257
2966
|
exports.bg = bg;
|
|
@@ -2270,16 +2979,24 @@ exports.focusRings = focusRings;
|
|
|
2270
2979
|
exports.fontFamily = fontFamily;
|
|
2271
2980
|
exports.fontSize = fontSize;
|
|
2272
2981
|
exports.fontWeight = fontWeight;
|
|
2273
|
-
exports.
|
|
2982
|
+
exports.forestAgencyPreset = forestAgencyPreset;
|
|
2983
|
+
exports.forestExternalPreset = forestExternalPreset;
|
|
2984
|
+
exports.forestInternalPreset = forestInternalPreset;
|
|
2274
2985
|
exports.forestTheme = forestTheme;
|
|
2275
2986
|
exports.forestThemeOptions = forestThemeOptions;
|
|
2276
2987
|
exports.getAvailablePresets = getAvailablePresets;
|
|
2277
2988
|
exports.getPreset = getPreset;
|
|
2989
|
+
exports.gray = gray;
|
|
2278
2990
|
exports.iconColors = iconColors;
|
|
2991
|
+
exports.info = info;
|
|
2279
2992
|
exports.lineHeight = lineHeight;
|
|
2993
|
+
exports.magenta = magenta;
|
|
2994
|
+
exports.misc = misc;
|
|
2280
2995
|
exports.navColors = navColors;
|
|
2281
2996
|
exports.palette = palette;
|
|
2282
2997
|
exports.radius = radius;
|
|
2998
|
+
exports.radiusSharp = radiusSharp;
|
|
2999
|
+
exports.red = red;
|
|
2283
3000
|
exports.registerPreset = registerPreset;
|
|
2284
3001
|
exports.shadows = shadows2;
|
|
2285
3002
|
exports.sliderColors = sliderColors;
|
|
@@ -2287,6 +3004,7 @@ exports.spacing = spacing;
|
|
|
2287
3004
|
exports.text = text;
|
|
2288
3005
|
exports.toggleColors = toggleColors;
|
|
2289
3006
|
exports.typography = typography;
|
|
3007
|
+
exports.violet = violet;
|
|
2290
3008
|
exports.widths = widths;
|
|
2291
3009
|
//# sourceMappingURL=theme.js.map
|
|
2292
3010
|
//# sourceMappingURL=theme.js.map
|