@medway-ui/core 0.4.10 → 0.5.0

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.
Files changed (9) hide show
  1. package/dist/assets/css/tokens.css +607 -120
  2. package/dist/assets/js/tokens.ts +393 -60
  3. package/dist/index.d.mts +2 -2
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +2 -2
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +2 -2
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +1 -1
package/dist/assets/css/tokens.css CHANGED
@@ -2,137 +2,483 @@
2
2
  @variant dark (&:where(.dark *));
3
3
 
4
4
  :root {
5
+ /* === White colors === */
6
+ --color-white: rgba(255, 255, 255, 1);
7
+ --color-white-80: rgba(255, 255, 255, 0.8);
8
+ --color-white-48: rgba(255, 255, 255, 0.48);
9
+ --color-white-24: rgba(255, 255, 255, 0.24);
10
+ --color-white-16: rgba(255, 255, 255, 0.16);
11
+ --color-white-12: rgba(255, 255, 255, 0.12);
12
+ --color-white-8: rgba(255, 255, 255, 0.08);
13
+ --color-white-6: rgba(255, 255, 255, 0.06);
14
+ --color-white-4: rgba(255, 255, 255, 0.04);
15
+ --color-white-0: rgba(255, 255, 255, 0);
16
+
17
+ /* === Black colors === */
18
+ --color-black: rgba(0, 0, 0, 1);
19
+ --color-black-80: rgba(0, 0, 0, 0.8);
20
+ --color-black-48: rgba(0, 0, 0, 0.48);
21
+ --color-black-24: rgba(0, 0, 0, 0.24);
22
+ --color-black-16: rgba(0, 0, 0, 0.16);
23
+ --color-black-12: rgba(0, 0, 0, 0.12);
24
+ --color-black-8: rgba(0, 0, 0, 0.08);
25
+ --color-black-6: rgba(0, 0, 0, 0.06);
26
+ --color-black-4: rgba(0, 0, 0, 0.04);
27
+ --color-black-0: rgba(0, 0, 0, 0);
28
+
29
+ /* === Gray colors === */
30
+ --color-gray-950: rgba(8, 10, 12, 1);
31
+ --color-gray-900: rgba(12, 14, 18, 1);
32
+ --color-gray-850: rgba(16, 19, 24, 1);
33
+ --color-gray-800: rgba(24, 29, 37, 1);
34
+ --color-gray-700: rgba(33, 38, 49, 1);
35
+ --color-gray-600: rgba(49, 57, 73, 1);
36
+ --color-gray-500: rgba(73, 86, 110, 1);
37
+ --color-gray-450: rgba(90, 105, 135, 1);
38
+ --color-gray-400: rgba(98, 114, 147, 1);
39
+ --color-gray-300: rgba(133, 146, 173, 1);
40
+ --color-gray-200: rgba(169, 179, 198, 1);
41
+ --color-gray-150: rgba(206, 211, 222, 1);
42
+ --color-gray-100: rgba(231, 233, 239, 1);
43
+ --color-gray-70: rgba(240, 241, 245, 1);
44
+ --color-gray-50: rgba(246, 247, 249, 1);
45
+ --color-gray-30: rgba(249, 250, 251, 1);
46
+ --color-gray-10: rgba(252, 252, 253, 1);
47
+ --color-gray-0: rgba(252, 252, 253, 0);
48
+
49
+ /* === Green colors === */
50
+ --color-green: rgba(12, 187, 102, 1);
51
+ --color-green-darken-1: rgba(16, 152, 86, 1);
52
+ --color-green-darken-2: rgba(17, 120, 71, 1);
53
+ --color-green-darken-3: rgba(16, 91, 55, 1);
54
+ --color-green-darken-4: rgba(14, 63, 39, 1);
55
+ --color-green-darken-5: rgba(9, 37, 23, 1);
56
+ --color-green-darken-6: rgba(3, 12, 8, 1);
57
+ --color-green-lighten-1: rgba(22, 208, 118, 1);
58
+ --color-green-lighten-2: rgba(36, 224, 133, 1);
59
+ --color-green-lighten-3: rgba(69, 222, 148, 1);
60
+ --color-green-lighten-4: rgba(100, 221, 163, 1);
61
+ --color-green-lighten-5: rgba(129, 223, 178, 1);
62
+ --color-green-lighten-6: rgba(156, 226, 192, 1);
63
+ --color-green-80: rgba(12, 187, 102, 0.8);
64
+ --color-green-64: rgba(12, 187, 102, 0.64);
65
+ --color-green-48: rgba(12, 187, 102, 0.48);
66
+ --color-green-24: rgba(12, 187, 102, 0.24);
67
+ --color-green-16: rgba(12, 187, 102, 0.16);
68
+ --color-green-12: rgba(12, 187, 102, 0.12);
69
+ --color-green-8: rgba(12, 187, 102, 0.08);
70
+ --color-green-6: rgba(12, 187, 102, 0.06);
71
+ --color-green-4: rgba(12, 187, 102, 0.04);
72
+ --color-green-0: rgba(12, 187, 102, 0);
73
+
74
+ /* === Red colors === */
75
+ --color-red: rgba(238, 32, 56, 1);
76
+ --color-red-darken-1: rgba(216, 24, 46, 1);
77
+ --color-red-darken-2: rgba(182, 27, 45, 1);
78
+ --color-red-darken-3: rgba(150, 29, 43, 1);
79
+ --color-red-darken-4: rgba(121, 27, 38, 1);
80
+ --color-red-darken-5: rgba(93, 25, 33, 1);
81
+ --color-red-darken-6: rgba(67, 20, 25, 1);
82
+ --color-red-darken-7: rgba(42, 14, 17, 1);
83
+ --color-red-lighten-1: rgba(234, 67, 86, 1);
84
+ --color-red-lighten-2: rgba(232, 100, 115, 1);
85
+ --color-red-lighten-3: rgba(231, 131, 142, 1);
86
+ --color-red-lighten-4: rgba(233, 159, 168, 1);
87
+ --color-red-lighten-5: rgba(237, 187, 192, 1);
88
+ --color-red-lighten-6: rgba(242, 212, 215, 1);
89
+ --color-red-80: rgba(238, 32, 56, 0.8);
90
+ --color-red-64: rgba(238, 32, 56, 0.64);
91
+ --color-red-48: rgba(238, 32, 56, 0.48);
92
+ --color-red-24: rgba(238, 32, 56, 0.24);
93
+ --color-red-16: rgba(238, 32, 56, 0.16);
94
+ --color-red-12: rgba(238, 32, 56, 0.12);
95
+ --color-red-8: rgba(238, 32, 56, 0.08);
96
+ --color-red-6: rgba(238, 32, 56, 0.06);
97
+ --color-red-4: rgba(238, 32, 56, 0.04);
98
+ --color-red-0: rgba(238, 32, 56, 0);
99
+
100
+ /* === Yellow colors === */
101
+ --color-yellow: rgba(241, 194, 4, 1);
102
+ --color-yellow-darken-1: rgba(203, 165, 11, 1);
103
+ --color-yellow-darken-2: rgba(168, 138, 16, 1);
104
+ --color-yellow-darken-3: rgba(135, 112, 18, 1);
105
+ --color-yellow-darken-4: rgba(105, 87, 18, 1);
106
+ --color-yellow-darken-5: rgba(76, 64, 16, 1);
107
+ --color-yellow-darken-6: rgba(49, 42, 12, 1);
108
+ --color-yellow-lighten-1: rgba(243, 201, 32, 1);
109
+ --color-yellow-lighten-2: rgba(238, 204, 68, 1);
110
+ --color-yellow-lighten-3: rgba(235, 208, 102, 1);
111
+ --color-yellow-lighten-4: rgba(234, 214, 133, 1);
112
+ --color-yellow-lighten-5: rgba(236, 221, 162, 1);
113
+ --color-yellow-lighten-6: rgba(239, 229, 189, 1);
114
+ --color-yellow-80: rgba(241, 194, 4, 0.8);
115
+ --color-yellow-64: rgba(241, 194, 4, 0.64);
116
+ --color-yellow-48: rgba(241, 194, 4, 0.48);
117
+ --color-yellow-24: rgba(241, 194, 4, 0.24);
118
+ --color-yellow-16: rgba(241, 194, 4, 0.16);
119
+ --color-yellow-12: rgba(241, 194, 4, 0.12);
120
+ --color-yellow-8: rgba(241, 194, 4, 0.08);
121
+ --color-yellow-6: rgba(241, 194, 4, 0.06);
122
+ --color-yellow-4: rgba(241, 194, 4, 0.04);
123
+ --color-yellow-0: rgba(241, 194, 4, 0);
124
+
125
+ /* === Cm colors === */
126
+ --color-cm: rgba(64, 126, 201, 1);
127
+ --color-cm-darken-1: rgba(56, 112, 178, 1);
128
+ --color-cm-darken-2: rgba(53, 97, 151, 1);
129
+ --color-cm-darken-3: rgba(49, 83, 125, 1);
130
+ --color-cm-darken-4: rgba(42, 69, 101, 1);
131
+ --color-cm-darken-5: rgba(35, 54, 77, 1);
132
+ --color-cm-darken-6: rgba(27, 39, 55, 1);
133
+ --color-cm-lighten-1: rgba(92, 143, 204, 1);
134
+ --color-cm-lighten-2: rgba(119, 159, 207, 1);
135
+ --color-cm-lighten-3: rgba(145, 175, 212, 1);
136
+ --color-cm-lighten-4: rgba(169, 191, 219, 1);
137
+ --color-cm-lighten-5: rgba(192, 207, 227, 1);
138
+ --color-cm-lighten-6: rgba(214, 223, 235, 1);
139
+ --color-cm-80: rgba(64, 126, 201, 0.8);
140
+ --color-cm-64: rgba(64, 126, 201, 0.64);
141
+ --color-cm-48: rgba(64, 126, 201, 0.48);
142
+ --color-cm-24: rgba(64, 126, 201, 0.24);
143
+ --color-cm-16: rgba(64, 126, 201, 0.16);
144
+ --color-cm-12: rgba(64, 126, 201, 0.12);
145
+ --color-cm-8: rgba(64, 126, 201, 0.08);
146
+ --color-cm-6: rgba(64, 126, 201, 0.06);
147
+ --color-cm-4: rgba(64, 126, 201, 0.04);
148
+ --color-cm-0: rgba(64, 126, 201, 0);
149
+
150
+ /* === Go colors === */
151
+ --color-go: rgba(172, 20, 90, 1);
152
+ --color-go-darken-1: rgba(141, 22, 77, 1);
153
+ --color-go-darken-2: rgba(111, 21, 63, 1);
154
+ --color-go-darken-3: rgba(83, 19, 48, 1);
155
+ --color-go-darken-4: rgba(56, 15, 34, 1);
156
+ --color-go-darken-5: rgba(31, 10, 20, 1);
157
+ --color-go-darken-6: rgba(8, 3, 5, 1);
158
+ --color-go-lighten-1: rgba(194, 30, 106, 1);
159
+ --color-go-lighten-2: rgba(214, 41, 121, 1);
160
+ --color-go-lighten-3: rgba(213, 72, 137, 1);
161
+ --color-go-lighten-4: rgba(214, 102, 154, 1);
162
+ --color-go-lighten-5: rgba(217, 130, 170, 1);
163
+ --color-go-lighten-6: rgba(221, 156, 186, 1);
164
+ --color-go-80: rgba(172, 20, 90, 0.8);
165
+ --color-go-64: rgba(172, 20, 90, 0.64);
166
+ --color-go-48: rgba(172, 20, 90, 0.48);
167
+ --color-go-24: rgba(172, 20, 90, 0.24);
168
+ --color-go-16: rgba(172, 20, 90, 0.16);
169
+ --color-go-12: rgba(172, 20, 90, 0.12);
170
+ --color-go-8: rgba(172, 20, 90, 0.08);
171
+ --color-go-6: rgba(172, 20, 90, 0.06);
172
+ --color-go-4: rgba(172, 20, 90, 0.04);
173
+ --color-go-0: rgba(172, 20, 90, 0);
174
+
175
+ /* === Cir colors === */
176
+ --color-cir: rgba(0, 239, 200, 1);
177
+ --color-cir-darken-1: rgba(7, 202, 170, 1);
178
+ --color-cir-darken-2: rgba(12, 166, 141, 1);
179
+ --color-cir-darken-3: rgba(16, 132, 113, 1);
180
+ --color-cir-darken-4: rgba(16, 101, 87, 1);
181
+ --color-cir-darken-5: rgba(14, 73, 63, 1);
182
+ --color-cir-darken-6: rgba(10, 46, 40, 1);
183
+ --color-cir-lighten-1: rgba(24, 247, 210, 1);
184
+ --color-cir-lighten-2: rgba(61, 240, 211, 1);
185
+ --color-cir-lighten-3: rgba(95, 236, 213, 1);
186
+ --color-cir-lighten-4: rgba(127, 235, 217, 1);
187
+ --color-cir-lighten-5: rgba(156, 236, 223, 1);
188
+ --color-cir-lighten-6: rgba(184, 239, 230, 1);
189
+ --color-cir-80: rgba(0, 239, 200, 0.8);
190
+ --color-cir-64: rgba(0, 239, 200, 0.64);
191
+ --color-cir-48: rgba(0, 239, 200, 0.48);
192
+ --color-cir-24: rgba(0, 239, 200, 0.24);
193
+ --color-cir-16: rgba(0, 239, 200, 0.16);
194
+ --color-cir-12: rgba(0, 239, 200, 0.12);
195
+ --color-cir-8: rgba(0, 239, 200, 0.08);
196
+ --color-cir-6: rgba(0, 239, 200, 0.06);
197
+ --color-cir-4: rgba(0, 239, 200, 0.04);
198
+ --color-cir-0: rgba(0, 239, 200, 0);
199
+
200
+ /* === Ped colors === */
201
+ --color-ped: rgba(255, 198, 73, 1);
202
+ --color-ped-darken-1: rgba(248, 185, 48, 1);
203
+ --color-ped-darken-2: rgba(238, 172, 27, 1);
204
+ --color-ped-darken-3: rgba(210, 152, 25, 1);
205
+ --color-ped-darken-4: rgba(176, 130, 28, 1);
206
+ --color-ped-darken-5: rgba(146, 109, 28, 1);
207
+ --color-ped-darken-6: rgba(116, 88, 26, 1);
208
+ --color-ped-darken-7: rgba(89, 68, 24, 1);
209
+ --color-ped-lighten-1: rgba(250, 205, 107, 1);
210
+ --color-ped-lighten-2: rgba(246, 213, 141, 1);
211
+ --color-ped-lighten-3: rgba(245, 223, 173, 1);
212
+ --color-ped-lighten-4: rgba(247, 233, 202, 1);
213
+ --color-ped-lighten-5: rgba(250, 244, 229, 1);
214
+ --color-ped-lighten-6: rgba(255, 255, 255, 1);
215
+ --color-ped-80: rgba(255, 198, 73, 0.8);
216
+ --color-ped-64: rgba(255, 198, 73, 0.64);
217
+ --color-ped-48: rgba(255, 198, 73, 0.48);
218
+ --color-ped-24: rgba(255, 198, 73, 0.24);
219
+ --color-ped-16: rgba(255, 198, 73, 0.16);
220
+ --color-ped-12: rgba(255, 198, 73, 0.12);
221
+ --color-ped-8: rgba(255, 198, 73, 0.08);
222
+ --color-ped-6: rgba(255, 198, 73, 0.06);
223
+ --color-ped-4: rgba(255, 198, 73, 0.04);
224
+ --color-ped-0: rgba(255, 198, 73, 0);
225
+
226
+ /* === Prev colors === */
227
+ --color-prev: rgba(59, 63, 182, 1);
228
+ --color-prev-darken-1: rgba(55, 59, 154, 1);
229
+ --color-prev-darken-2: rgba(50, 53, 129, 1);
230
+ --color-prev-darken-3: rgba(44, 46, 104, 1);
231
+ --color-prev-darken-4: rgba(37, 38, 80, 1);
232
+ --color-prev-darken-5: rgba(28, 29, 59, 1);
233
+ --color-prev-darken-6: rgba(19, 20, 37, 1);
234
+ --color-prev-lighten-1: rgba(79, 82, 191, 1);
235
+ --color-prev-lighten-2: rgba(104, 107, 196, 1);
236
+ --color-prev-lighten-3: rgba(130, 132, 201, 1);
237
+ --color-prev-lighten-4: rgba(154, 155, 208, 1);
238
+ --color-prev-lighten-5: rgba(176, 177, 217, 1);
239
+ --color-prev-lighten-6: rgba(198, 199, 226, 1);
240
+ --color-prev-80: rgba(59, 63, 182, 0.8);
241
+ --color-prev-64: rgba(59, 63, 182, 0.64);
242
+ --color-prev-48: rgba(59, 63, 182, 0.48);
243
+ --color-prev-24: rgba(59, 63, 182, 0.24);
244
+ --color-prev-16: rgba(59, 63, 182, 0.16);
245
+ --color-prev-12: rgba(59, 63, 182, 0.12);
246
+ --color-prev-8: rgba(59, 63, 182, 0.08);
247
+ --color-prev-6: rgba(59, 63, 182, 0.06);
248
+ --color-prev-4: rgba(59, 63, 182, 0.04);
249
+ --color-prev-0: rgba(59, 63, 182, 0);
250
+
251
+ /* === Brand Primary colors === */
252
+ --color-primary: rgba(0, 32, 91, 1);
253
+ --color-primary-darken-1: rgba(2, 22, 59, 1);
254
+ --color-primary-darken-2: rgba(2, 11, 28, 1);
255
+ --color-primary-lighten-1: rgba(4, 44, 118, 1);
256
+ --color-primary-lighten-2: rgba(11, 57, 142, 1);
257
+ --color-primary-lighten-3: rgba(19, 70, 164, 1);
258
+ --color-primary-lighten-4: rgba(29, 80, 185, 1);
259
+ --color-primary-lighten-5: rgba(39, 94, 206, 1);
260
+ --color-primary-lighten-6: rgba(64, 112, 212, 1);
261
+ --color-primary-80: rgba(0, 32, 91, 0.8);
262
+ --color-primary-64: rgba(0, 32, 91, 0.64);
263
+ --color-primary-48: rgba(0, 32, 91, 0.48);
264
+ --color-primary-24: rgba(0, 32, 91, 0.24);
265
+ --color-primary-16: rgba(0, 32, 91, 0.16);
266
+ --color-primary-12: rgba(0, 32, 91, 0.12);
267
+ --color-primary-8: rgba(0, 32, 91, 0.08);
268
+ --color-primary-6: rgba(0, 32, 91, 0.06);
269
+ --color-primary-4: rgba(0, 32, 91, 0.04);
270
+ --color-primary-0: rgba(0, 32, 91, 0);
271
+
272
+ /* === Brand Secondary colors === */
273
+ --color-secondary: rgba(1, 208, 180, 1);
274
+ --color-secondary-darken-1: rgba(7, 171, 149, 1);
275
+ --color-secondary-darken-2: rgba(11, 137, 120, 1);
276
+ --color-secondary-darken-3: rgba(13, 104, 92, 1);
277
+ --color-secondary-darken-4: rgba(12, 75, 66, 1);
278
+ --color-secondary-darken-5: rgba(9, 47, 42, 1);
279
+ --color-secondary-darken-6: rgba(5, 21, 19, 1);
280
+ --color-secondary-lighten-1: rgba(10, 230, 201, 1);
281
+ --color-secondary-lighten-2: rgba(33, 237, 210, 1);
282
+ --color-secondary-lighten-3: rgba(69, 232, 210, 1);
283
+ --color-secondary-lighten-4: rgba(101, 230, 213, 1);
284
+ --color-secondary-lighten-5: rgba(132, 231, 217, 1);
285
+ --color-secondary-lighten-6: rgba(160, 233, 223, 1);
286
+ --color-secondary-80: rgba(1, 208, 180, 0.8);
287
+ --color-secondary-64: rgba(1, 208, 180, 0.64);
288
+ --color-secondary-48: rgba(1, 208, 180, 0.48);
289
+ --color-secondary-24: rgba(1, 208, 180, 0.24);
290
+ --color-secondary-16: rgba(1, 208, 180, 0.16);
291
+ --color-secondary-12: rgba(1, 208, 180, 0.12);
292
+ --color-secondary-8: rgba(1, 208, 180, 0.08);
293
+ --color-secondary-6: rgba(1, 208, 180, 0.06);
294
+ --color-secondary-4: rgba(1, 208, 180, 0.04);
295
+ --color-secondary-0: rgba(1, 208, 180, 0);
296
+
297
+ /* === Base drop-shadow colors === */
298
+ --color-drop-shadow-layer-a: rgba(33, 38, 49, 0.16);
299
+ --color-drop-shadow-layer-b: rgba(73, 85, 110, 0.16);
300
+
5
301
  /* === Base colors === */
6
- --color-background: #ffffff;
7
- --color-foreground: #212631;
8
- --color-ring: #ced3de;
9
- --color-input: #e7e9ef;
10
- --color-border: #e7e9ef;
11
-
12
- /* === Utility colors === */
13
- --color-gray-950: #080a0c;
14
- --color-gray-900: #0c0e12;
15
- --color-gray-850: #101318;
16
- --color-gray-800: #181d25;
17
- --color-gray-700: #212631;
18
- --color-gray-600: #313949;
19
- --color-gray-500: #49566e;
20
- --color-gray-400: #627293;
21
- --color-gray-300: #8592ad;
22
- --color-gray-200: #a9b3c6;
23
- --color-gray-150: #ced3de;
24
- --color-gray-100: #e7e9ef;
25
- --color-gray-50: #f6f7f9;
26
- --color-green: #0cbb66;
27
- --color-green-darken-1: #109856;
28
- --color-green-darken-2: #117847;
29
- --color-green-80: #0cbb66cc;
30
- --color-green-48: #0cbb667a;
31
- --color-green-24: #0cbb663d;
32
- --color-green-16: #0cbb6629;
33
- --color-green-8: #0cbb6614;
34
- --color-green-4: #0cbb660a;
35
- --color-red: #ee2038;
36
- --color-red-darken-1: #d8182e;
37
- --color-red-darken-2: #b61b2d;
38
- --color-red-darken-3: #961d2b;
39
- --color-red-80: #ee2038cc;
40
- --color-red-48: #ee20387a;
41
- --color-red-24: #ee20383d;
42
- --color-red-16: #ee203829;
43
- --color-red-8: #ee203814;
44
- --color-red-4: #ee20380a;
45
- --color-yellow: #f1c204;
46
- --color-yellow-darken-1: #cba50b;
47
- --color-yellow-darken-2: #a88a10;
48
- --color-yellow-80: #f1c204cc;
49
- --color-yellow-48: #f1c2047a;
50
- --color-yellow-24: #f1c2043d;
51
- --color-yellow-16: #f1c20429;
52
- --color-yellow-8: #f1c20414;
53
- --color-yellow-4: #f1c2040a;
54
-
55
- /* === Brand Medway utility === */
56
- --color-primary: #00205b;
57
- --color-primary-darken-1: #02163b;
58
- --color-primary-darken-2: #020b1c;
59
- --color-primary-80: #00205bcc;
60
- --color-primary-48: #00205b7a;
61
- --color-primary-24: #00205b3d;
62
- --color-primary-16: #00205b29;
63
- --color-primary-8: #00205b14;
64
- --color-primary-4: #00205b0a;
65
-
66
- /* === Brand Secondary utility === */
67
- --color-secondary: #01d0b4;
68
- --color-secondary-darken-1: #07ab95;
69
- --color-secondary-darken-2: #0b8978;
70
- --color-secondary-darken-3: #0d685c;
71
- --color-secondary-darken-4: #0c4b42;
72
- --color-secondary-80: #01d0b4cc;
73
- --color-secondary-48: #01d0b47a;
74
- --color-secondary-24: #01d0b43d;
75
- --color-secondary-16: #01d0b429;
76
- --color-secondary-8: #01d0b414;
77
- --color-secondary-4: #01d0b40a;
78
-
79
- /* === Brand Other utility === */
80
- --color-other-primary: #1649ac;
81
- --color-other-primary-darken-1: #133d91;
82
- --color-other-primary-darken-2: #0f3276;
83
- --color-other-primary-80: #1649accc;
84
- --color-other-primary-48: #1649ac7a;
85
- --color-other-primary-24: #1649ac3d;
86
- --color-other-primary-16: #1649ac29;
87
- --color-other-primary-8: #1649ac14;
88
- --color-other-primary-4: #1649ac0a;
89
- --color-other-secondary: #eb152b;
90
- --color-other-secondary-darken-1: #cf1225;
91
- --color-other-secondary-darken-2: #b30f20;
92
- --color-other-secondary-80: #eb152bcc;
93
- --color-other-secondary-48: #eb152b7a;
94
- --color-other-secondary-24: #eb152b3d;
95
- --color-other-secondary-16: #eb152b29;
96
- --color-other-secondary-8: #eb152b14;
97
- --color-other-secondary-4: #eb152b0a;
302
+ --color-background: var(--color-white);
303
+ --color-foreground: var(--color-gray-700);
304
+ --color-border: var(--color-gray-100);
305
+ --color-input: var(--color-gray-100);
306
+ --color-ring: var(--color-gray-150);
307
+
308
+ /* === Base surfacecolors === */
309
+ --color-surface-elevated: var(--color-white);
310
+ --color-surface-card: var(--color-white);
311
+ --color-surface-navigation: var(--color-white);
312
+ --color-surface-section: var(--color-white);
313
+ --color-surface-page: var(--color-gray-30);
314
+
315
+ /* === Base gray colors === */
316
+ --color-gray-foreground: var(--color-gray-600);
317
+ --color-gray-foreground-emphasis: var(--color-gray-700);
318
+ --color-gray-foreground-muted: var(--color-gray-450);
319
+ --color-gray-foreground-onfill: var(--color-white);
320
+ --color-gray-stroke: var(--color-gray-150);
321
+ --color-gray-stroke-emphasis: var(--color-gray-200);
322
+ --color-gray-stroke-muted: var(--color-gray-100);
323
+ --color-gray-background-fill: var(--color-gray-700);
324
+ --color-gray-background-fill-emphasis: var(--color-gray-850);
325
+ --color-gray-background-fill-muted: var(--color-gray-400);
326
+ --color-gray-background-soft: var(--color-gray-70);
327
+ --color-gray-background-soft-emphasis: var(--color-gray-50);
328
+ --color-gray-background-soft-muted: var(--color-gray-30);
329
+
330
+ /* === Base green colors === */
331
+ --color-green-foreground: var(--color-green-darken-3);
332
+ --color-green-foreground-emphasis: var(--color-green-darken-4);
333
+ --color-green-foreground-onfill: var(--color-white);
334
+ --color-green-stroke: var(--color-green);
335
+ --color-green-stroke-emphasis: var(--color-green-darken-2);
336
+ --color-green-background-fill: var(--color-green-darken-2);
337
+ --color-green-background-fill-emphasis: var(--color-green-darken-3);
338
+ --color-green-background-soft: var(--color-green-16);
339
+ --color-green-background-soft-emphasis: var(--color-green-12);
340
+ --color-green-background-soft-muted: var(--color-green-6);
341
+
342
+ /* === Base red colors === */
343
+ --color-red-foreground: var(--color-red-darken-2);
344
+ --color-red-foreground-emphasis: var(--color-red-darken-3);
345
+ --color-red-foreground-onfill: var(--color-white);
346
+ --color-red-stroke: var(--color-red);
347
+ --color-red-stroke-emphasis: var(--color-red-darken-1);
348
+ --color-red-background-fill: var(--color-red-darken-1);
349
+ --color-red-background-fill-emphasis: var(--color-red-darken-2);
350
+ --color-red-background-soft: var(--color-red-12);
351
+ --color-red-background-soft-emphasis: var(--color-red-8);
352
+ --color-red-background-soft-muted: var(--color-red-4);
353
+
354
+ /* === Base yellow colors === */
355
+ --color-yellow-foreground: var(--color-yellow-darken-4);
356
+ --color-yellow-foreground-emphasis: var(--color-yellow-darken-5);
357
+ --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
358
+ --color-yellow-stroke: var(--color-yellow-lighten-1);
359
+ --color-yellow-stroke-emphasis: var(--color-yellow);
360
+ --color-yellow-background-fill: var(--color-yellow-lighten-2);
361
+ --color-yellow-background-fill-emphasis: var(--color-yellow);
362
+ --color-yellow-background-soft: var(--color-yellow-24);
363
+ --color-yellow-background-soft-emphasis: var(--color-yellow-16);
364
+ --color-yellow-background-soft-muted: var(--color-yellow-8);
365
+
366
+ /* === Base cm colors === */
367
+ --color-cm-foreground: var(--color-cm-darken-2);
368
+ --color-cm-foreground-emphasis: var(--color-cm-darken-4);
369
+ --color-cm-foreground-onfill: var(--color-white);
370
+ --color-cm-background-fill: var(--color-cm-darken-1);
371
+ --color-cm-background-fill-emphasis: var(--color-cm-darken-3);
372
+ --color-cm-background-soft: var(--color-cm-8);
373
+ --color-cm-background-soft-emphasis: var(--color-cm-4);
374
+
375
+ /* === Base go colors === */
376
+ --color-go-foreground: var(--color-go-darken-1);
377
+ --color-go-foreground-emphasis: var(--color-go-darken-3);
378
+ --color-go-foreground-onfill: var(--color-white);
379
+ --color-go-background-fill: var(--color-go);
380
+ --color-go-background-fill-emphasis: var(--color-go-darken-1);
381
+ --color-go-background-soft: var(--color-go-8);
382
+ --color-go-background-soft-emphasis: var(--color-go-4);
383
+
384
+ /* === Base cir colors === */
385
+ --color-cir-foreground: var(--color-cir-darken-4);
386
+ --color-cir-foreground-emphasis: var(--color-cir-darken-5);
387
+ --color-cir-foreground-onfill: var(--color-cir-darken-6);
388
+ --color-cir-background-fill: var(--color-cir);
389
+ --color-cir-background-fill-emphasis: var(--color-cir-darken-1);
390
+ --color-cir-background-soft: var(--color-cir-16);
391
+ --color-cir-background-soft-emphasis: var(--color-cir-8);
392
+
393
+ /* === Base ped colors === */
394
+ --color-ped-foreground: var(--color-ped-darken-6);
395
+ --color-ped-foreground-emphasis: var(--color-ped-darken-7);
396
+ --color-ped-foreground-onfill: var(--color-ped-darken-7);
397
+ --color-ped-background-fill: var(--color-ped-lighten-1);
398
+ --color-ped-background-fill-emphasis: var(--color-ped);
399
+ --color-ped-background-soft: var(--color-ped-16);
400
+ --color-ped-background-soft-emphasis: var(--color-ped-8);
401
+
402
+ /* === Base prev colors === */
403
+ --color-prev-foreground: var(--color-prev);
404
+ --color-prev-foreground-emphasis: var(--color-prev-darken-2);
405
+ --color-prev-foreground-onfill: var(--color-white);
406
+ --color-prev-background-fill: var(--color-prev);
407
+ --color-prev-background-fill-emphasis: var(--color-prev-darken-2);
408
+ --color-prev-background-soft: var(--color-prev-8);
409
+ --color-prev-background-soft-emphasis: var(--color-prev-4);
410
+
411
+ /* === Base primary colors === */
412
+ --color-primary-foreground: var(--color-primary);
413
+ --color-primary-foreground-emphasis: var(--color-primary-darken-1);
414
+ --color-primary-foreground-muted: var(--color-primary-64);
415
+ --color-primary-foreground-onfill: var(--color-white);
416
+ --color-primary-stroke: var(--color-primary);
417
+ --color-primary-stroke-emphasis: var(--color-primary-darken-1);
418
+ --color-primary-background-fill: var(--color-primary);
419
+ --color-primary-background-fill-emphasis: var(--color-primary-darken-1);
420
+ --color-primary-background-soft: var(--color-primary-8);
421
+ --color-primary-background-soft-emphasis: var(--color-primary-6);
422
+ --color-primary-background-soft-muted: var(--color-primary-4);
423
+
424
+ /* === Base secondary colors === */
425
+ --color-secondary-foreground: var(--color-secondary-darken-3);
426
+ --color-secondary-foreground-emphasis: var(--color-secondary-darken-4);
427
+ --color-secondary-foreground-muted: var(--color-secondary-darken-2);
428
+ --color-secondary-foreground-onfill: var(--color-white);
429
+ --color-secondary-stroke: var(--color-secondary);
430
+ --color-secondary-stroke-emphasis: var(--color-secondary-darken-1);
431
+ --color-secondary-background-fill: var(--color-secondary-darken-2);
432
+ --color-secondary-background-fill-emphasis: var(--color-secondary-darken-3);
433
+ --color-secondary-background-soft: var(--color-secondary-12);
434
+ --color-secondary-background-soft-emphasis: var(--color-secondary-8);
435
+ --color-secondary-background-soft-muted: var(--color-secondary-6);
98
436
 
99
437
  /* === Typography fontfamily === */
100
438
  --font-sans:
101
439
  "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
102
440
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
103
441
 
442
+ /* === Typography weight === */
443
+ --font-weight-regular: 400;
444
+ --font-weight-medium: 500;
445
+ --font-weight-semibold: 600;
446
+ --font-weight-bold: 700;
447
+ --font-weight-extrabold: 900;
448
+
104
449
  /* === Typography size === */
105
450
  --text-xxs: 10px;
106
451
  --text-xs: 12px;
107
452
  --text-sm: 14px;
108
453
  --text-base: 16px;
109
454
  --text-lg: 18px;
110
- --text-xl: 20px;
111
- --text-2xl: 24px;
112
- --text-3xl: 28px;
113
- --text-4xl: 32px;
114
- --text-5xl: 36px;
115
- --text-6xl: 40px;
116
- --text-7xl: 46px;
117
- --text-8xl: 52px;
118
- --text-9xl: 58px;
119
-
120
- /* === Typography leading === */
455
+ --text-title-xs: 20px;
456
+ --text-title-sm: 24px;
457
+ --text-title-md: 28px;
458
+ --text-title-lg: 32px;
459
+ --text-title-xl: 36px;
460
+ --text-title-xxl: 40px;
461
+ --text-display-sm: 46px;
462
+ --text-display-md: 52px;
463
+ --text-display-lg: 58px;
464
+
465
+ /* === Line Height === */
121
466
  --leading-xxs: 12px;
122
467
  --leading-xs: 16px;
123
468
  --leading-sm: 20px;
124
469
  --leading-md: 24px;
125
470
  --leading-lg: 28px;
126
- --leading-2xl: 32px;
127
- --leading-3xl: 36px;
128
- --leading-4xl: 40px;
129
- --leading-5xl: 44px;
130
- --leading-6xl: 52px;
131
- --leading-7xl: 62px;
132
- --leading-8xl: 70px;
133
- --leading-9xl: 78px;
134
-
135
- /* === Utility radius === */
471
+ --leading-title-xs: 28px;
472
+ --leading-title-sm: 32px;
473
+ --leading-title-md: 36px;
474
+ --leading-title-lg: 40px;
475
+ --leading-title-xl: 44px;
476
+ --leading-title-xxl: 52px;
477
+ --leading-display-sm: 62px;
478
+ --leading-display-md: 70px;
479
+ --leading-display-lg: 78px;
480
+
481
+ /* === Radius === */
136
482
  --radius-none: 0;
137
483
  --radius-sm: 4px;
138
484
  --radius-md: 8px;
@@ -140,23 +486,164 @@
140
486
  --radius-pill: 320px;
141
487
  --radius-circular: 1600px;
142
488
 
143
- /* === Container utility === */
489
+ /* === Breakpoints === */
490
+ --breakpoint-tv: 1920px;
491
+ --breakpoint-desktop: 1024px;
492
+ --breakpoint-tablet: 600px;
493
+ --breakpoint-mobile: 320px;
494
+
495
+ /* === Container === */
496
+ --container-tv: 1288px;
144
497
  --container-desktop: 1288px;
145
498
  --container-tablet: 768px;
146
499
  --container-mobile: 480px;
147
500
 
148
- /* === Sidebar utility === */
501
+ /* === Sidebar === */
149
502
  --sidebar-width: 256px;
150
503
  --sidebar-width-mobile: 256px;
151
504
  --sidebar-width-icon: 72px;
152
505
  }
153
506
 
154
507
  .dark {
155
- --color-background: #000000;
156
- --color-foreground: #ffffff;
157
- --color-border: oklch(0.371 0 0);
158
- --color-input: oklch(0.371 0 0);
159
- --color-ring: oklch(0.556 0 0);
508
+ /* === Dark base colors === */
509
+ --color-background: var(--color-gray-850);
510
+ --color-foreground: var(--color-white);
511
+ --color-border: var(--color-gray-600);
512
+ --color-input: var(--color-gray-600);
513
+ --color-ring: var(--color-gray-500);
514
+
515
+ /* === Dark surface colors === */
516
+ --color-surface-elevated: var(--color-gray-800);
517
+ --color-surface-card: var(--color-gray-850);
518
+ --color-surface-navigation: var(--color-gray-850);
519
+ --color-surface-section: var(--color-gray-900);
520
+ --color-surface-page: var(--color-gray-950);
521
+
522
+ /* === Dark drop-shadow colors === */
523
+ --color-drop-shadow-layer-a: var(--color-black-24);
524
+ --color-drop-shadow-layer-b: var(--color-black-16);
525
+
526
+ /* === Dark gray colors === */
527
+ --color-gray-foreground: var(--color-gray-100);
528
+ --color-gray-foreground-emphasis: var(--color-white);
529
+ --color-gray-foreground-muted: var(--color-gray-150);
530
+ --color-gray-foreground-onfill: var(--color-gray-700);
531
+ --color-gray-stroke: var(--color-gray-600);
532
+ --color-gray-stroke-emphasis: var(--color-gray-500);
533
+ --color-gray-stroke-muted: var(--color-gray-700);
534
+ --color-gray-background-fill: var(--color-gray-100);
535
+ --color-gray-background-fill-emphasis: var(--color-gray-30);
536
+ --color-gray-background-fill-muted: var(--color-gray-300);
537
+ --color-gray-background-soft: var(--color-gray-800);
538
+ --color-gray-background-soft-emphasis: var(--color-gray-600);
539
+ --color-gray-background-soft-muted: var(--color-gray-700);
540
+
541
+ /* === Dark green colors === */
542
+ --color-green-foreground: var(--color-green-lighten-4);
543
+ --color-green-foreground-emphasis: var(--color-green-lighten-6);
544
+ --color-green-foreground-onfill: var(--color-white);
545
+ --color-green-stroke: var(--color-green-darken-2);
546
+ --color-green-stroke-emphasis: var(--color-green);
547
+ --color-green-background-fill: var(--color-green-darken-3);
548
+ --color-green-background-fill-emphasis: var(--color-green-darken-2);
549
+ --color-green-background-soft: var(--color-green-8);
550
+ --color-green-background-soft-emphasis: var(--color-green-24);
551
+ --color-green-background-soft-muted: var(--color-green-16);
552
+
553
+ /* === Dark red colors === */
554
+ --color-red-foreground: var(--color-red-lighten-3);
555
+ --color-red-foreground-emphasis: var(--color-red-lighten-4);
556
+ --color-red-foreground-onfill: var(--color-white);
557
+ --color-red-stroke: var(--color-red-darken-1);
558
+ --color-red-stroke-emphasis: var(--color-red);
559
+ --color-red-background-fill: var(--color-red-darken-2);
560
+ --color-red-background-fill-emphasis: var(--color-red-darken-1);
561
+ --color-red-background-soft: var(--color-red-12);
562
+ --color-red-background-soft-emphasis: var(--color-red-24);
563
+ --color-red-background-soft-muted: var(--color-red-16);
564
+
565
+ /* === Dark yellow colors === */
566
+ --color-yellow-foreground: var(--color-yellow-lighten-2);
567
+ --color-yellow-foreground-emphasis: var(--color-yellow-lighten-4);
568
+ --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
569
+ --color-yellow-stroke: var(--color-yellow);
570
+ --color-yellow-stroke-emphasis: var(--color-yellow-lighten-1);
571
+ --color-yellow-background-fill: var(--color-yellow);
572
+ --color-yellow-background-fill-emphasis: var(--color-yellow-lighten-2);
573
+ --color-yellow-background-soft: var(--color-yellow-8);
574
+ --color-yellow-background-soft-emphasis: var(--color-yellow-24);
575
+ --color-yellow-background-soft-muted: var(--color-yellow-16);
576
+
577
+ /* === Dark cm colors === */
578
+ --color-cm-foreground: var(--color-cm-lighten-4);
579
+ --color-cm-foreground-emphasis: var(--color-cm-lighten-6);
580
+ --color-cm-foreground-onfill: var(--color-white);
581
+ --color-cm-background-fill: var(--color-cm-darken-2);
582
+ --color-cm-background-fill-emphasis: var(--color-cm);
583
+ --color-cm-background-soft: var(--color-cm-12);
584
+ --color-cm-background-soft-emphasis: var(--color-cm-24);
585
+
586
+ /* === Dark go colors === */
587
+ --color-go-foreground: var(--color-go-lighten-5);
588
+ --color-go-foreground-emphasis: var(--color-go-lighten-6);
589
+ --color-go-foreground-onfill: var(--color-white);
590
+ --color-go-background-fill: var(--color-go-darken-1);
591
+ --color-go-background-fill-emphasis: var(--color-go);
592
+ --color-go-background-soft: var(--color-go-16);
593
+ --color-go-background-soft-emphasis: var(--color-go-24);
594
+
595
+ /* === Dark cir colors === */
596
+ --color-cir-foreground: var(--color-cir);
597
+ --color-cir-foreground-emphasis: var(--color-cir-lighten-3);
598
+ --color-cir-foreground-onfill: var(--color-cir-darken-6);
599
+ --color-cir-background-fill: var(--color-cir-darken-1);
600
+ --color-cir-background-fill-emphasis: var(--color-cir);
601
+ --color-cir-background-soft: var(--color-cir-8);
602
+ --color-cir-background-soft-emphasis: var(--color-cir-16);
603
+
604
+ /* === Dark ped colors === */
605
+ --color-ped-foreground: var(--color-ped);
606
+ --color-ped-foreground-emphasis: var(--color-ped-lighten-1);
607
+ --color-ped-foreground-onfill: var(--color-ped-darken-7);
608
+ --color-ped-background-fill: var(--color-ped);
609
+ --color-ped-background-fill-emphasis: var(--color-ped-lighten-1);
610
+ --color-ped-background-soft: var(--color-ped-8);
611
+ --color-ped-background-soft-emphasis: var(--color-ped-16);
612
+
613
+ /* === Dark prev colors === */
614
+ --color-prev-foreground: var(--color-prev-lighten-5);
615
+ --color-prev-foreground-emphasis: var(--color-prev-lighten-6);
616
+ --color-prev-foreground-onfill: var(--color-white);
617
+ --color-prev-background-fill: var(--color-prev-darken-1);
618
+ --color-prev-background-fill-emphasis: var(--color-prev);
619
+ --color-prev-background-soft: var(--color-prev-24);
620
+ --color-prev-background-soft-emphasis: var(--color-prev-48);
621
+
622
+ /* === Dark primary colors === */
623
+ --color-primary-foreground: var(--color-gray-100);
624
+ --color-primary-foreground-emphasis: var(--color-white);
625
+ --color-primary-foreground-muted: var(--color-gray-200);
626
+ --color-primary-foreground-onfill: var(--color-primary);
627
+ --color-primary-stroke: var(--color-gray-100);
628
+ --color-primary-stroke-emphasis: var(--color-white);
629
+ --color-primary-background-fill: var(--color-gray-70);
630
+ --color-primary-background-fill-emphasis: var(--color-white);
631
+ --color-primary-background-soft: var(--color-white-8);
632
+ --color-primary-background-soft-emphasis: var(--color-white-16);
633
+ --color-primary-background-soft-muted: var(--color-white-12);
634
+
635
+ /* === Dark secondary colors === */
636
+ --color-secondary-foreground: var(--color-secondary-lighten-1);
637
+ --color-secondary-foreground-emphasis: var(--color-secondary-lighten-2);
638
+ --color-secondary-foreground-muted: var(--color-secondary);
639
+ --color-secondary-foreground-onfill: var(--color-secondary-darken-6);
640
+ --color-secondary-stroke: var(--color-secondary-darken-1);
641
+ --color-secondary-stroke-emphasis: var(--color-secondary);
642
+ --color-secondary-background-fill: var(--color-secondary-darken-1);
643
+ --color-secondary-background-fill-emphasis: var(--color-secondary);
644
+ --color-secondary-background-soft: var(--color-secondary-8);
645
+ --color-secondary-background-soft-emphasis: var(--color-secondary-24);
646
+ --color-secondary-background-soft-muted: var(--color-secondary-12);
160
647
  }
161
648
 
162
649
  @layer components {