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