@redgate/brand-web-toolkit 0.0.2 → 0.0.4

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 (20) hide show
  1. package/components/icons/Icon.d.ts +11 -1
  2. package/components/icons/Icon.js +6 -3
  3. package/components/icons/Icon.js.map +1 -1
  4. package/components/icons/Icons.d.ts +59 -59
  5. package/components/testing/Test.d.ts +1 -0
  6. package/package.json +1 -1
  7. package/tailwindcss/pass.css +560 -0
  8. package/tailwindcss/{output.css → redgate.css} +142 -47
  9. package/tailwindcss/sql-server-central.css +560 -0
  10. package/tailwindcss/src/global/base.css +39 -0
  11. package/tailwindcss/src/global/colours.css +112 -0
  12. package/tailwindcss/src/global/containers.css +6 -0
  13. package/tailwindcss/src/global/radius.css +15 -0
  14. package/tailwindcss/src/global/spacing.css +54 -0
  15. package/tailwindcss/src/global/theme.css +1 -0
  16. package/tailwindcss/src/global/typography.css +146 -0
  17. package/tailwindcss/src/global/widths.css +15 -0
  18. package/tailwindcss/src/pass/input.css +381 -0
  19. package/tailwindcss/src/redgate/input.css +330 -0
  20. package/tailwindcss/src/sql-server-central/input.css +347 -0
package/tailwindcss/src/redgate/input.css ADDED
@@ -0,0 +1,330 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2
+ @import 'tailwindcss';
3
+
4
+ @font-face {
5
+ font-family: Gatebase;
6
+ font-style: normal;
7
+ font-weight: 500;
8
+ font-display: swap;
9
+ src: url('https://cdn.red-gate.com/assets/fonts/redgate-type/redgate-type-medium.woff') format('woff');
10
+ }
11
+
12
+ @import '../global/theme.css';
13
+ @import '../global/colours.css';
14
+ @import '../global/spacing.css';
15
+ @import '../global/radius.css';
16
+ @import '../global/widths.css';
17
+ @import '../global/containers.css';
18
+ @import '../global/typography.css';
19
+ @import '../global/base.css';
20
+
21
+ @theme {
22
+
23
+ /* COLOUR MODES */
24
+ --color-text-primary: var(--color-gray-950);
25
+ --color-text-primary_hover: var(--color-red-600);
26
+ --color-text-primary_on-accent-subtle: var(--color-red-950);
27
+ --color-text-primary_on-accent-strong: var(--color-white);
28
+ --color-text-primary_on-accent-strongest: var(--color-white);
29
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
30
+ --color-text-secondary: var(--color-gray-700);
31
+ --color-text-secondary_hover: var(--color-gray-950);
32
+ --color-text-secondary_on-accent-subtle: var(--color-red-700);
33
+ --color-text-secondary_on-accent-strong: var(--color-red-50);
34
+ --color-text-secondary_on-accent-strongest: var(--color-red-50);
35
+ --color-text-tertiary: var(--color-gray-600);
36
+ --color-text-tertiary_hover: var(--color-gray-700);
37
+ --color-text-tertiary_on-accent-subtle: var(--color-red-600);
38
+ --color-text-tertiary_on-accent-strong: var(--color-red-100);
39
+ --color-text-tertiary_on-accent-strongest: var(--color-red-100);
40
+ --color-text-accent-primary: var(--color-red-600);
41
+ --color-text-accent-primary_hover: var(--color-red-700);
42
+ --color-text-accent-primary_on-accent-subtle: var(--color-red-600);
43
+ --color-text-accent-primary_on-accent-strong: var(--color-red-100);
44
+ --color-text-accent-primary_on-accent-strongest: var(--color-red-100);
45
+ --color-text-accent-secondary: var(--color-red-600);
46
+ --color-text-accent-secondary_hover: var(--color-red-700);
47
+ --color-text-accent-secondary_on-accent-subtle: var(--color-red-600);
48
+ --color-text-accent-secondary_on-accent-strong: var(--color-red-600);
49
+ --color-text-accent-secondary_on-accent-strongest: var(--color-red-600);
50
+ --color-text-accent-tertiary: var(--color-red-500);
51
+ --color-text-accent-tertiary_on-hover: var(--color-red-600);
52
+ --color-text-accent-tertiary_on-accent-subtle: var(--color-red-600);
53
+ --color-text-accent-tertiary_on-accent-strong: var(--color-red-600);
54
+ --color-text-accent-tertiary_on-accent-strongest: var(--color-red-600);
55
+ --color-border-primary: var(--color-gray-500);
56
+ --color-border-primary_on-accent-subtle: var(--color-gray-500);
57
+ --color-border-primary_on-accent-strong: var(--color-gray-500);
58
+ --color-border-primary_on-accent-strongest: var(--color-gray-500);
59
+ --color-border-secondary: var(--color-gray-400);
60
+ --color-border-secondary_on-accent-subtle: var(--color-gray-400);
61
+ --color-border-secondary_on-accent-strong: var(--color-gray-400);
62
+ --color-border-secondary_on-accent-strongest: var(--color-gray-400);
63
+ --color-border-secondary_alt: rgba(0, 0, 0, 0.1);
64
+ --color-border-tertiary: var(--color-gray-300);
65
+ --color-border-tertiary_on-accent-subtle: var(--color-gray-300);
66
+ --color-border-tertiary_on-accent-strong: var(--color-gray-300);
67
+ --color-border-tertiary_on-accent-strongest: var(--color-gray-300);
68
+ --color-border-accent: var(--color-red-600);
69
+ --color-border-accent_on-accent-subtle: var(--color-red-400);
70
+ --color-border-accent_on-accent-strong: var(--color-red-600);
71
+ --color-border-accent_on-accent-strongest: var(--color-red-600);
72
+ --color-border-accent_alt: var(--color-red-600);
73
+ --color-border-accent_interactive: var(--color-blue-600);
74
+ --color-border-accent-interactive_on-subtle: var(--color-blue-600);
75
+ --color-border-accent-interactive_on-strong: var(--color-blue-600);
76
+ --color-border-accent-interactive_on-strongest: var(--color-blue-600);
77
+ --color-border-error: var(--color-red-500);
78
+ --color-border-error_subtle: var(--color-red-300);
79
+ --color-fg-primary: 0;
80
+ --color-fg-primary_alt: 0;
81
+ --color-fg-primary_on-accent-subtle: 0;
82
+ --color-fg-primary_on-accent-strong: 0;
83
+ --color-fg-primary_on-accent-strongest: 0;
84
+ --color-fg-primary_on-accent-strongest-alt: var(--color-white);
85
+ --color-fg-secondary: var(--color-gray-700);
86
+ --color-fg-secondary_hover: var(--color-gray-950);
87
+ --color-fg-secondary_on-accent-subtle: var(--color-red-700);
88
+ --color-fg-secondary_on-accent-strong: var(--color-red-50);
89
+ --color-fg-secondary_on-accent-strongest: var(--color-red-50);
90
+ --color-fg-tertiary: var(--color-gray-600);
91
+ --color-fg-tertiary_hover: var(--color-gray-700);
92
+ --color-fg-tertiary_on-accent-subtle: var(--color-red-600);
93
+ --color-fg-tertiary_on-accent-strong: var(--color-red-100);
94
+ --color-fg-tertiary_on-accent-strongest: var(--color-red-100);
95
+ --color-fg-accent-primary: var(--color-red-600);
96
+ --color-fg-accent-primary_alt: var(--color-fg-accent-primary);
97
+ --color-fg-accent-secondary: var(--color-red-500);
98
+ --color-fg-accent-secondary_alt: var(--color-fg-accent-secondary);
99
+ --color-fg-accent-secondary_hover: var(--color-red-600);
100
+ --color-fg-error-primary: var(--color-red-600);
101
+ --color-fg-error-secondary: var(--color-red-500);
102
+ --color-fg-warning-primary: var(--color-yellow-600);
103
+ --color-fg-warning-secondary: var(--color-yellow-500);
104
+ --color-fg-success-primary: var(--color-green-600);
105
+ --color-fg-success-secondary: var(--color-green-500);
106
+ --color-bg-quaternary: var(--color-gray-200);
107
+ --color-bg-quaternary-hover: var(--color-gray-200);
108
+ --color-bg-overlay: var(--color-gray-950);
109
+ --color-bg-primary: var(--color-white);
110
+ --color-bg-primary_hover: var(--color-gray-50);
111
+ --color-bg-primary_on-accent-subtle: var(--color-red-25);
112
+ --color-bg-primary_alt: var(--color-white);
113
+ --color-bg-primary-static: var(--color-gray-950);
114
+ --color-bg-secondary: var(--color-gray-50);
115
+ --color-bg-secondary_hover: var(--color-gray-100);
116
+ --color-bg-secondary_alt: var(--color-gray-50);
117
+ --color-bg-secondary-static: var(--color-gray-600);
118
+ --color-bg-tertiary: var(--color-gray-100);
119
+ --color-bg-tertiary-hover: var(--color-gray-200);
120
+ --color-bg-accent-subtlest: var(--color-red-25);
121
+ --color-bg-accent-subtlest-hover: var(--color-red-50);
122
+ --color-bg-accent-subtle: var(--color-red-100);
123
+ --color-bg-accent-subtle-hover: var(--color-red-50);
124
+ --color-bg-accent-subtle_alt: var(--color-red-50);
125
+ --color-bg-accent-strong: var(--color-red-800);
126
+ --color-bg-accent-strong-hover: var(--color-red-700);
127
+ --color-bg-accent-strongest: var(--color-red-600);
128
+ --color-bg-accent-strongest_hover: var(--color-red-700);
129
+ --color-bg-accent-strongest-alt: var(--color-red-600);
130
+ --color-bg-accent-strongest-alt_hover: var(--color-red-700);
131
+ --color-bg-accent-strongest-alt_on-subtle: var(--color-red-600);
132
+ --color-bg-accent-strongest-alt_on-strong: var(--color-red-600);
133
+ --color-bg-accent-strongest-alt_on-strongest: var(--color-black);
134
+ --color-bg-accent-strong-primary-alt: var(--color-red-600);
135
+ --color-bg-accent-strong-primary-alt-hover: var(--color-red-600);
136
+ --color-bg-error-primary: var(--color-red-50);
137
+ --color-bg-error-secondary: var(--color-red-100);
138
+ --color-bg-error-solid: var(--color-red-600);
139
+ --color-bg-error-solid_hover: var(--color-red-700);
140
+ --color-bg-warning-primary: var(--color-yellow-50);
141
+ --color-bg-warning-secondary: var(--color-yellow-100);
142
+ --color-bg-warning-solid: var(--color-yellow-600);
143
+ --color-bg-success-primary: var(--color-green-50);
144
+ --color-bg-success-secondary: var(--color-green-100);
145
+ --color-bg-success-solid: var(--color-green-600);
146
+ --color-focus-ring: var(--color-red-500);
147
+ --color-focus-ring-error: var(--color-red-500);
148
+ --color-shadow-xs: rgba(0, 0, 0, 0.05);
149
+ --color-shadow-sm_01: rgba(0, 0, 0, 0.1);
150
+ --color-shadow-sm_02: rgba(0, 0, 0, 0.1);
151
+ --color-shadow-md_01: rgba(0, 0, 0, 0.1);
152
+ --color-shadow-md_02: rgba(0, 0, 0, 0.06);
153
+ --color-shadow-lg_01: rgba(0, 0, 0, 0.08);
154
+ --color-shadow-lg_02: rgba(0, 0, 0, 0.03);
155
+ --color-shadow-lg_03: rgba(0, 0, 0, 0.04);
156
+ --color-shadow-xl_01: rgba(0, 0, 0, 0.08);
157
+ --color-shadow-xl_02: rgba(0, 0, 0, 0.03);
158
+ --color-shadow-xl_03: rgba(0, 0, 0, 0.04);
159
+ --color-shadow-2xl_01: rgba(0, 0, 0, 0.18);
160
+ --color-shadow-2xl_02: rgba(0, 0, 0, 0.04);
161
+ --color-shadow-3xl_01: rgba(0, 0, 0, 0.14);
162
+ --color-shadow-3xl_02: rgba(0, 0, 0, 0.04);
163
+ --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
164
+ --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
165
+
166
+ --default-font-color: var(--color-text-secondary);
167
+ --default-background-color: var(--color-bg-primary);
168
+
169
+ /* Radius modes */
170
+ --radius-button-default: var(--radius-sm);
171
+ --radius-field-default: var(--radius-sm);
172
+ --radius-checkbox-default: var(--radius-xs);
173
+ --radius-dropdown: var(--radius-sm);
174
+ --radius-dropdown-item: var(--radius-sm);
175
+ --radius-card-default: var(--radius-lg);
176
+ --radius-card-medium: var(--radius-2xl);
177
+
178
+ /* TYPOGRAPHY */
179
+ /* Font family */
180
+ --font-family-display: "Gatebase", sans-serif;
181
+ --font-family-body: "Roboto", sans-serif;
182
+ --default-font-family: var(--font-family-body);
183
+ }
184
+
185
+ /* Dark mode overrides, using @variant rule */
186
+ :root {
187
+ @variant dark {
188
+ --color-text-primary: var(--color-gray-25);
189
+ --color-text-primary_hover: var(--color-gray-50);
190
+ --color-text-primary_on-accent-subtle: var(--color-red-25);
191
+ --color-text-primary_on-accent-strong: var(--color-red-25);
192
+ --color-text-primary_on-accent-strongest: var(--color-red-25);
193
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
194
+ --color-text-secondary: var(--color-gray-100);
195
+ --color-text-secondary_hover: var(--color-gray-50);
196
+ --color-text-secondary_on-accent-subtle: var(--color-red-100);
197
+ --color-text-secondary_on-accent-strong: var(--color-red-50);
198
+ --color-text-secondary_on-accent-strongest: var(--color-red-50);
199
+ --color-text-tertiary: var(--color-gray-400);
200
+ --color-text-tertiary_hover: var(--color-gray-300);
201
+ --color-text-tertiary_on-accent-subtle: var(--color-red-100);
202
+ --color-text-tertiary_on-accent-strong: var(--color-red-100);
203
+ --color-text-tertiary_on-accent-strongest: var(--color-red-100);
204
+ --color-text-accent-primary: var(--color-red-200);
205
+ --color-text-accent-primary_hover: var(--color-red-100);
206
+ --color-text-accent-primary_on-accent-subtle: var(--color-red-100);
207
+ --color-text-accent-primary_on-accent-strong: var(--color-red-100);
208
+ --color-text-accent-primary_on-accent-strongest: var(--color-red-100);
209
+ --color-text-accent-secondary: var(--color-red-200);
210
+ --color-text-accent-secondary_hover: var(--color-red-200);
211
+ --color-text-accent-secondary_on-accent-subtle: var(--color-red-200);
212
+ --color-text-accent-secondary_on-accent-strong: var(--color-red-200);
213
+ --color-text-accent-secondary_on-accent-strongest: var(--color-red-200);
214
+ --color-text-accent-tertiary: var(--color-red-300);
215
+ --color-text-accent-tertiary_on-hover: var(--color-red-300);
216
+ --color-text-accent-tertiary_on-accent-subtle: var(--color-red-300);
217
+ --color-text-accent-tertiary_on-accent-strong: var(--color-red-300);
218
+ --color-text-accent-tertiary_on-accent-strongest: var(--color-red-300);
219
+ --color-border-primary: var(--color-gray-300);
220
+ --color-border-primary_on-accent-subtle: var(--color-gray-300);
221
+ --color-border-primary_on-accent-strong: var(--color-gray-300);
222
+ --color-border-primary_on-accent-strongest: var(--color-gray-300);
223
+ --color-border-secondary: var(--color-gray-400);
224
+ --color-border-secondary_on-accent-subtle: var(--color-gray-400);
225
+ --color-border-secondary_on-accent-strong: var(--color-gray-400);
226
+ --color-border-secondary_on-accent-strongest: var(--color-gray-400);
227
+ --color-border-secondary_alt: 0;
228
+ --color-border-tertiary: var(--color-gray-500);
229
+ --color-border-tertiary_on-accent-subtle: var(--color-gray-500);
230
+ --color-border-tertiary_on-accent-strong: var(--color-gray-500);
231
+ --color-border-tertiary_on-accent-strongest: var(--color-gray-500);
232
+ --color-border-accent: var(--color-red-500);
233
+ --color-border-accent_on-accent-subtle: var(--color-red-200);
234
+ --color-border-accent_on-accent-strong: var(--color-red-500);
235
+ --color-border-accent_on-accent-strongest: var(--color-red-500);
236
+ --color-border-accent_alt: 0;
237
+ --color-border-accent_interactive: var(--color-blue-400);
238
+ --color-border-accent-interactive_on-subtle: var(--color-blue-400);
239
+ --color-border-accent-interactive_on-strong: var(--color-blue-400);
240
+ --color-border-accent-interactive_on-strongest: var(--color-blue-400);
241
+ --color-border-error: var(--color-red-400);
242
+ --color-border-error_subtle: var(--color-red-500);
243
+ --color-fg-primary: var(--color-white);
244
+ --color-fg-primary_alt: var(--color-white);
245
+ --color-fg-primary_on-accent-subtle: var(--color-white);
246
+ --color-fg-primary_on-accent-strong: var(--color-white);
247
+ --color-fg-primary_on-accent-strongest: var(--color-white);
248
+ --color-fg-primary_on-accent-strongest-alt: var(--color-red-25);
249
+ --color-fg-secondary: var(--color-gray-100);
250
+ --color-fg-secondary_hover: var(--color-gray-50);
251
+ --color-fg-secondary_on-accent-subtle: var(--color-red-100);
252
+ --color-fg-secondary_on-accent-strong: var(--color-red-50);
253
+ --color-fg-secondary_on-accent-strongest: var(--color-red-50);
254
+ --color-fg-tertiary: var(--color-gray-400);
255
+ --color-fg-tertiary_hover: var(--color-gray-300);
256
+ --color-fg-tertiary_on-accent-subtle: var(--color-red-100);
257
+ --color-fg-tertiary_on-accent-strong: var(--color-red-100);
258
+ --color-fg-tertiary_on-accent-strongest: var(--color-red-100);
259
+ --color-fg-accent-primary: var(--color-red-500);
260
+ --color-fg-accent-primary_alt: 0;
261
+ --color-fg-accent-secondary: var(--color-red-500);
262
+ --color-fg-accent-secondary_alt: 0;
263
+ --color-fg-accent-secondary_hover: 0;
264
+ --color-fg-error-primary: var(--color-red-500);
265
+ --color-fg-error-secondary: var(--color-red-400);
266
+ --color-fg-warning-primary: var(--color-yellow-500);
267
+ --color-fg-warning-secondary: var(--color-yellow-400);
268
+ --color-fg-success-primary: var(--color-green-500);
269
+ --color-fg-success-secondary: var(--color-green-400);
270
+ --color-bg-quaternary: var(--color-gray-700);
271
+ --color-bg-quaternary-hover: var(--color-gray-700);
272
+ --color-bg-overlay: var(--color-gray-800);
273
+ --color-bg-primary: var(--color-gray-950);
274
+ --color-bg-primary_hover: var(--color-gray-900);
275
+ --color-bg-primary_on-accent-subtle: var(--color-red-800);
276
+ --color-bg-primary_alt: var(--color-bg-secondary);
277
+ --color-bg-primary-static: var(--color-bg-tertiary);
278
+ --color-bg-secondary: var(--color-gray-900);
279
+ --color-bg-secondary_hover: var(--color-gray-800);
280
+ --color-bg-secondary_alt: var(--color-bg-primary);
281
+ --color-bg-secondary-static: var(--color-gray-600);
282
+ --color-bg-tertiary: var(--color-gray-800);
283
+ --color-bg-tertiary-hover: var(--color-gray-700);
284
+ --color-bg-accent-subtlest: var(--color-red-900);
285
+ --color-bg-accent-subtlest-hover: var(--color-red-800);
286
+ --color-bg-accent-subtle: var(--color-red-800);
287
+ --color-bg-accent-subtle-hover: var(--color-red-700);
288
+ --color-bg-accent-subtle_alt: var(--color-bg-secondary);
289
+ --color-bg-accent-strong: var(--color-red-700);
290
+ --color-bg-accent-strong-hover: var(--color-red-600);
291
+ --color-bg-accent-strongest: var(--color-red-600);
292
+ --color-bg-accent-strongest_hover: var(--color-red-700);
293
+ --color-bg-accent-strongest-alt: var(--color-red-600);
294
+ --color-bg-accent-strongest-alt_hover: var(--color-red-500);
295
+ --color-bg-accent-strongest-alt_on-subtle: var(--color-red-600);
296
+ --color-bg-accent-strongest-alt_on-strong: var(--color-red-600);
297
+ --color-bg-accent-strongest-alt_on-strongest: var(--color-black);
298
+ --color-bg-accent-strong-primary-alt: var(--color-red-400);
299
+ --color-bg-accent-strong-primary-alt-hover: var(--color-red-600);
300
+ --color-bg-error-primary: var(--color-red-950);
301
+ --color-bg-error-secondary: var(--color-red-600);
302
+ --color-bg-error-solid: var(--color-red-600);
303
+ --color-bg-error-solid_hover: var(--color-red-500);
304
+ --color-bg-warning-primary: var(--color-yellow-950);
305
+ --color-bg-warning-secondary: var(--color-yellow-600);
306
+ --color-bg-warning-solid: var(--color-yellow-600);
307
+ --color-bg-success-primary: var(--color-green-950);
308
+ --color-bg-success-secondary: var(--color-green-600);
309
+ --color-bg-success-solid: var(--color-green-600);
310
+ --color-focus-ring: var(--color-red-500);
311
+ --color-focus-ring-error: var(--color-red-500);
312
+ --color-shadow-xs: var(--color-transparent);
313
+ --color-shadow-sm_01: var(--color-transparent);
314
+ --color-shadow-sm_02: var(--color-transparent);
315
+ --color-shadow-md_01: var(--color-transparent);
316
+ --color-shadow-md_02: var(--color-transparent);
317
+ --color-shadow-lg_01: var(--color-transparent);
318
+ --color-shadow-lg_02: var(--color-transparent);
319
+ --color-shadow-lg_03: var(--color-transparent);
320
+ --color-shadow-xl_01: var(--color-transparent);
321
+ --color-shadow-xl_02: var(--color-transparent);
322
+ --color-shadow-xl_03: var(--color-transparent);
323
+ --color-shadow-2xl_01: var(--color-transparent);
324
+ --color-shadow-2xl_02: var(--color-transparent);
325
+ --color-shadow-3xl_01: var(--color-transparent);
326
+ --color-shadow-3xl_02: var(--color-transparent);
327
+ --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
328
+ --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
329
+ }
330
+ }
package/tailwindcss/src/sql-server-central/input.css ADDED
@@ -0,0 +1,347 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
2
+ @import 'tailwindcss';
3
+
4
+ @import '../global/theme.css';
5
+ @import '../global/colours.css';
6
+ @import '../global/spacing.css';
7
+ @import '../global/radius.css';
8
+ @import '../global/widths.css';
9
+ @import '../global/containers.css';
10
+ @import '../global/typography.css';
11
+ @import '../global/base.css';
12
+
13
+ @theme {
14
+
15
+ /* COLOUR MODES */
16
+ --color-text-primary: var(--color-blue-800);
17
+ --color-text-primary_hover: var(--color-blue-600);
18
+ --color-text-primary_on-accent-subtle: var(--color-blue-800);
19
+ --color-text-primary_on-accent-strong: var(--color-white);
20
+ --color-text-primary_on-accent-strongest: var(--color-blue-900);
21
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
22
+ --color-text-secondary: var(--color-gray-700);
23
+ --color-text-secondary_hover: var(--color-gray-950);
24
+ --color-text-secondary_on-accent-subtle: var(--color-blue-700);
25
+ --color-text-secondary_on-accent-strong: var(--color-blue-50);
26
+ --color-text-secondary_on-accent-strongest: var(--color-blue-800);
27
+ --color-text-tertiary: var(--color-gray-600);
28
+ --color-text-tertiary_hover: var(--color-gray-700);
29
+ --color-text-tertiary_on-accent-subtle: var(--color-blue-600);
30
+ --color-text-tertiary_on-accent-strong: var(--color-blue-50);
31
+ --color-text-tertiary_on-accent-strongest: var(--color-blue-700);
32
+ --color-text-accent-primary: var(--color-blue-600);
33
+ --color-text-accent-primary_hover: var(--color-blue-700);
34
+ --color-text-accent-primary_on-accent-subtle: var(--color-blue-700);
35
+ --color-text-accent-primary_on-accent-strong: var(--color-blue-50);
36
+ --color-text-accent-primary_on-accent-strongest: var(--color-blue-700);
37
+ --color-text-accent-secondary: var(--color-blue-600);
38
+ --color-text-accent-secondary_hover: var(--color-blue-700);
39
+ --color-text-accent-secondary_on-accent-subtle: var(--color-blue-600);
40
+ --color-text-accent-secondary_on-accent-strong: var(--color-blue-600);
41
+ --color-text-accent-secondary_on-accent-strongest: var(--color-blue-600);
42
+
43
+ --color-text-accent-tertiary: var(--color-blue-500);
44
+ --color-text-accent-tertiary_on-hover: var(--color-blue-600);
45
+ --color-text-accent-tertiary_on-accent-subtle: var(--color-blue-600);
46
+ --color-text-accent-tertiary_on-accent-strong: var(--color-blue-600);
47
+ --color-text-accent-tertiary_on-accent-strongest: var(--color-blue-600);
48
+
49
+ --color-border-primary: var(--color-gray-500);
50
+ --color-border-primary_on-accent-subtle: var(--color-gray-500);
51
+ --color-border-primary_on-accent-strong: var(--color-gray-500);
52
+ --color-border-primary_on-accent-strongest: var(--color-gray-500);
53
+
54
+ --color-border-secondary: var(--color-gray-200);
55
+ --color-border-secondary_on-accent-subtle: var(--color-gray-200);
56
+ --color-border-secondary_on-accent-strong: var(--color-gray-200);
57
+ --color-border-secondary_on-accent-strongest: var(--color-gray-200);
58
+ --color-border-secondary_alt: rgba(0, 0, 0, 0.1);
59
+
60
+ --color-border-tertiary: var(--color-gray-100);
61
+ --color-border-tertiary_on-accent-subtle: var(--color-gray-100);
62
+ --color-border-tertiary_on-accent-strong: var(--color-gray-100);
63
+ --color-border-tertiary_on-accent-strongest: var(--color-gray-100);
64
+
65
+ --color-border-accent: var(--color-blue-600);
66
+ --color-border-accent_on-accent-subtle: var(--color-blue-600);
67
+ --color-border-accent_on-accent-strong: var(--color-blue-500);
68
+ --color-border-accent_on-accent-strongest: var(--color-blue-500);
69
+ --color-border-accent_alt: var(--color-blue-600);
70
+
71
+ --color-border-accent_interactive: var(--color-blue-600);
72
+ --color-border-accent-interactive_on-subtle: var(--color-blue-600);
73
+ --color-border-accent-interactive_on-strong: var(--color-blue-600);
74
+ --color-border-accent-interactive_on-strongest: var(--color-blue-600);
75
+
76
+ --color-border-error: var(--color-red-500);
77
+ --color-border-error_subtle: var(--color-red-300);
78
+
79
+ --color-fg-primary: var(--color-gray-900);
80
+ --color-fg-primary_alt: var(--color-gray-900);
81
+ --color-fg-primary_on-accent-subtle: var(--color-gray-900);
82
+ --color-fg-primary_on-accent-strong: var(--color-gray-900);
83
+ --color-fg-primary_on-accent-strongest: var(--color-gray-900);
84
+ --color-fg-primary_on-accent-strongest-alt: var(--color-white);
85
+
86
+ --color-fg-secondary: var(--color-gray-700);
87
+ --color-fg-secondary_hover: var(--color-gray-950);
88
+ --color-fg-secondary_on-accent-subtle: var(--color-blue-700);
89
+ --color-fg-secondary_on-accent-strong: var(--color-blue-50);
90
+ --color-fg-secondary_on-accent-strongest: var(--color-blue-800);
91
+
92
+ --color-fg-tertiary: var(--color-gray-600);
93
+ --color-fg-tertiary_hover: var(--color-gray-700);
94
+ --color-fg-tertiary_on-accent-subtle: var(--color-blue-600);
95
+ --color-fg-tertiary_on-accent-strong: var(--color-blue-50);
96
+ --color-fg-tertiary_on-accent-strongest: var(--color-blue-700);
97
+
98
+ --color-fg-accent-primary: var(--color-blue-600);
99
+ --color-fg-accent-primary_alt: var(--color-blue-600);
100
+ --color-fg-accent-secondary: var(--color-blue-500);
101
+ --color-fg-accent-secondary_alt: var(--color-blue-500);
102
+ --color-fg-accent-secondary_hover: var(--color-blue-600);
103
+
104
+ --color-fg-error-primary: var(--color-red-600);
105
+ --color-fg-error-secondary: var(--color-red-500);
106
+ --color-fg-warning-primary: var(--color-yellow-600);
107
+ --color-fg-warning-secondary: var(--color-yellow-500);
108
+ --color-fg-success-primary: var(--color-green-600);
109
+ --color-fg-success-secondary: var(--color-green-500);
110
+
111
+ --color-bg-quaternary: var(--color-gray-200);
112
+ --color-bg-quaternary-hover: var(--color-gray-200);
113
+ --color-bg-overlay: var(--color-gray-950);
114
+
115
+ --color-bg-primary: var(--color-white);
116
+ --color-bg-primary_hover: var(--color-gray-50);
117
+ --color-bg-primary_on-accent-subtle: var(--color-blue-25);
118
+ --color-bg-primary_alt: var(--color-white);
119
+ --color-bg-primary-static: var(--color-gray-950);
120
+
121
+ --color-bg-secondary: var(--color-gray-50);
122
+ --color-bg-secondary_hover: var(--color-gray-100);
123
+ --color-bg-secondary_alt: var(--color-gray-50);
124
+ --color-bg-secondary-static: var(--color-gray-600);
125
+
126
+ --color-bg-tertiary: var(--color-gray-100);
127
+ --color-bg-tertiary-hover: var(--color-gray-200);
128
+
129
+ --color-bg-accent-subtlest: var(--color-blue-25);
130
+ --color-bg-accent-subtlest-hover: var(--color-blue-50);
131
+
132
+ --color-bg-accent-subtle: var(--color-blue-50);
133
+ --color-bg-accent-subtle-hover: var(--color-blue-25);
134
+ --color-bg-accent-subtle_alt: var(--color-blue-50);
135
+
136
+ --color-bg-accent-strong: var(--color-blue-800);
137
+ --color-bg-accent-strong-hover: var(--color-blue-700);
138
+
139
+ --color-bg-accent-strongest: var(--color-yellow-200);
140
+ --color-bg-accent-strongest_hover: var(--color-yellow-100);
141
+
142
+ --color-bg-accent-strongest-alt: var(--color-blue-600);
143
+ --color-bg-accent-strongest-alt_hover: var(--color-blue-700);
144
+ --color-bg-accent-strongest-alt_on-subtle: var(--color-blue-600);
145
+ --color-bg-accent-strongest-alt_on-strong: var(--color-blue-600);
146
+ --color-bg-accent-strongest-alt_on-strongest: var(--color-blue-600);
147
+
148
+ --color-bg-accent-strong-primary-alt: var(--color-yellow-300);
149
+ --color-bg-accent-strong-primary-alt-hover: var(--color-blue-600);
150
+
151
+ --color-bg-error-primary: var(--color-red-50);
152
+ --color-bg-error-secondary: var(--color-red-100);
153
+ --color-bg-error-solid: var(--color-red-600);
154
+ --color-bg-error-solid_hover: var(--color-red-700);
155
+ --color-bg-warning-primary: var(--color-yellow-50);
156
+ --color-bg-warning-secondary: var(--color-yellow-100);
157
+ --color-bg-warning-solid: var(--color-yellow-600);
158
+ --color-bg-success-primary: var(--color-green-50);
159
+ --color-bg-success-secondary: var(--color-green-100);
160
+ --color-bg-success-solid: var(--color-green-600);
161
+
162
+ --color-focus-ring: var(--color-blue-500);
163
+ --color-focus-ring-error: var(--color-blue-500);
164
+
165
+ --color-shadow-xs: rgba(0, 0, 0, 0.05);
166
+ --color-shadow-sm_01: rgba(0, 0, 0, 0.1);
167
+ --color-shadow-sm_02: rgba(0, 0, 0, 0.1);
168
+ --color-shadow-md_01: rgba(0, 0, 0, 0.1);
169
+ --color-shadow-md_02: rgba(0, 0, 0, 0.06);
170
+ --color-shadow-lg_01: rgba(0, 0, 0, 0.08);
171
+ --color-shadow-lg_02: rgba(0, 0, 0, 0.03);
172
+ --color-shadow-lg_03: rgba(0, 0, 0, 0.04);
173
+ --color-shadow-xl_01: rgba(0, 0, 0, 0.08);
174
+ --color-shadow-xl_02: rgba(0, 0, 0, 0.03);
175
+ --color-shadow-xl_03: rgba(0, 0, 0, 0.04);
176
+ --color-shadow-2xl_01: rgba(0, 0, 0, 0.18);
177
+ --color-shadow-2xl_02: rgba(0, 0, 0, 0.04);
178
+ --color-shadow-3xl_01: rgba(0, 0, 0, 0.14);
179
+ --color-shadow-3xl_02: rgba(0, 0, 0, 0.04);
180
+ --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
181
+ --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
182
+
183
+ --default-font-color: var(--color-text-secondary);
184
+ --default-background-color: var(--color-bg-primary);
185
+
186
+ /* Radius modes */
187
+ --radius-button-default: var(--radius-xs);
188
+ --radius-field-default: var(--radius-xs);
189
+ --radius-checkbox-default: var(--radius-xxs);
190
+ --radius-dropdown: var(--radius-xs);
191
+ --radius-dropdown-item: var(--radius-xs);
192
+ --radius-card-default: var(--radius-sm);
193
+ --radius-card-medium: var(--radius-lg);
194
+
195
+ /* TYPOGRAPHY */
196
+ /* Font family */
197
+ --font-family-display: "Roboto", sans-serif;
198
+ --font-family-body: "Roboto", sans-serif;
199
+ --default-font-family: var(--font-family-body);
200
+ }
201
+
202
+ /* Dark mode overrides, using @variant rule */
203
+ :root {
204
+ @variant dark {
205
+ --color-text-primary: var(--color-gray-50);
206
+ --color-text-primary_hover: var(--color-white);
207
+ --color-text-primary_on-accent-subtle: var(--color-blue-25);
208
+ --color-text-primary_on-accent-strong: var(--color-white);
209
+ --color-text-primary_on-accent-strongest: var(--color-blue-900);
210
+ --color-text-primary_on-accent-strongest-alt: var(--color-white);
211
+ --color-text-secondary: var(--color-gray-100);
212
+ --color-text-secondary_hover: var(--color-gray-50);
213
+ --color-text-secondary_on-accent-subtle: var(--color-blue-50);
214
+ --color-text-secondary_on-accent-strong: var(--color-blue-50);
215
+ --color-text-secondary_on-accent-strongest: var(--color-blue-800);
216
+ --color-text-tertiary: var(--color-gray-400);
217
+ --color-text-tertiary_hover: var(--color-gray-300);
218
+ --color-text-tertiary_on-accent-subtle: var(--color-blue-50);
219
+ --color-text-tertiary_on-accent-strong: var(--color-blue-50);
220
+ --color-text-tertiary_on-accent-strongest: var(--color-blue-700);
221
+ --color-text-accent-primary: var(--color-blue-200);
222
+ --color-text-accent-primary_hover: var(--color-blue-100);
223
+ --color-text-accent-primary_on-accent-subtle: var(--color-blue-100);
224
+ --color-text-accent-primary_on-accent-strong: var(--color-blue-100);
225
+ --color-text-accent-primary_on-accent-strongest: var(--color-blue-800);
226
+ --color-text-accent-secondary: var(--color-blue-400);
227
+ --color-text-accent-secondary_hover: var(--color-gray-200);
228
+ --color-text-accent-secondary_on-accent-subtle: var(--color-blue-400);
229
+ --color-text-accent-secondary_on-accent-strong: var(--color-blue-400);
230
+ --color-text-accent-secondary_on-accent-strongest: var(--color-blue-400);
231
+ --color-text-accent-tertiary: var(--color-gray-500);
232
+ --color-text-accent-tertiary_on-hover: var(--color-gray-500);
233
+ --color-text-accent-tertiary_on-accent-subtle: var(--color-gray-500);
234
+ --color-text-accent-tertiary_on-accent-strong: var(--color-gray-500);
235
+ --color-text-accent-tertiary_on-accent-strongest: var(--color-gray-500);
236
+ --color-border-primary: var(--color-gray-300);
237
+ --color-border-primary_on-accent-subtle: var(--color-gray-300);
238
+ --color-border-primary_on-accent-strong: var(--color-gray-300);
239
+ --color-border-primary_on-accent-strongest: var(--color-gray-300);
240
+ --color-border-secondary: var(--color-gray-900);
241
+ --color-border-secondary_on-accent-subtle: var(--color-gray-900);
242
+ --color-border-secondary_on-accent-strong: var(--color-gray-900);
243
+ --color-border-secondary_on-accent-strongest: var(--color-gray-900);
244
+ --color-border-secondary_alt: var(--color-gray-900);
245
+ --color-border-tertiary: var(--color-gray-900);
246
+ --color-border-tertiary_on-accent-subtle: var(--color-gray-900);
247
+ --color-border-tertiary_on-accent-strong: var(--color-gray-900);
248
+ --color-border-tertiary_on-accent-strongest: var(--color-gray-900);
249
+ --color-border-accent: var(--color-blue-600);
250
+ --color-border-accent_on-accent-subtle: var(--color-blue-50);
251
+ --color-border-accent_on-accent-strong: var(--color-red-400);
252
+ --color-border-accent_on-accent-strongest: var(--color-red-400);
253
+ --color-border-accent_alt: var(--color-gray-700);
254
+ --color-border-accent_interactive: var(--color-blue-400);
255
+ --color-border-accent-interactive_on-subtle: var(--color-blue-400);
256
+ --color-border-accent-interactive_on-strong: var(--color-blue-400);
257
+ --color-border-accent-interactive_on-strongest: var(--color-blue-400);
258
+ --color-border-error: var(--color-red-400);
259
+ --color-border-error_subtle: var(--color-red-500);
260
+ --color-fg-primary: var(--color-white);
261
+ --color-fg-primary_alt: var(--color-white);
262
+ --color-fg-primary_on-accent-subtle: var(--color-white);
263
+ --color-fg-primary_on-accent-strong: var(--color-white);
264
+ --color-fg-primary_on-accent-strongest: var(--color-white);
265
+ --color-fg-primary_on-accent-strongest-alt: var(--color-blue-25);
266
+ --color-fg-secondary: var(--color-gray-100);
267
+ --color-fg-secondary_hover: var(--color-gray-50);
268
+ --color-fg-secondary_on-accent-subtle: var(--color-blue-50);
269
+ --color-fg-secondary_on-accent-strong: var(--color-blue-50);
270
+ --color-fg-secondary_on-accent-strongest: var(--color-blue-800);
271
+ --color-fg-tertiary: var(--color-gray-400);
272
+ --color-fg-tertiary_hover: var(--color-gray-300);
273
+ --color-fg-tertiary_on-accent-subtle: var(--color-blue-50);
274
+ --color-fg-tertiary_on-accent-strong: var(--color-blue-50);
275
+ --color-fg-tertiary_on-accent-strongest: var(--color-blue-700);
276
+ --color-fg-accent-primary: var(--color-red-500);
277
+ --color-fg-accent-primary_alt: var(--color-gray-300);
278
+ --color-fg-accent-secondary: var(--color-red-500);
279
+ --color-fg-accent-secondary_alt: var(--color-gray-600);
280
+ --color-fg-accent-secondary_hover: var(--color-gray-500);
281
+ --color-fg-error-primary: var(--color-red-500);
282
+ --color-fg-error-secondary: var(--color-red-400);
283
+ --color-fg-warning-primary: var(--color-yellow-500);
284
+ --color-fg-warning-secondary: var(--color-yellow-400);
285
+ --color-fg-success-primary: var(--color-green-500);
286
+ --color-fg-success-secondary: var(--color-green-400);
287
+ --color-bg-quaternary: var(--color-gray-700);
288
+ --color-bg-quaternary-hover: var(--color-gray-700);
289
+ --color-bg-overlay: var(--color-gray-800);
290
+ --color-bg-primary: var(--color-blue-950);
291
+ --color-bg-primary_hover: var(--color-gray-900);
292
+ --color-bg-primary_on-accent-subtle: var(--color-blue-800);
293
+ --color-bg-primary_alt: var(--color-gray-900);
294
+ --color-bg-primary-static: var(--color-gray-800);
295
+ --color-bg-secondary: var(--color-gray-900);
296
+ --color-bg-secondary_hover: var(--color-gray-800);
297
+ --color-bg-secondary_alt: var(--color-blue-950);
298
+ --color-bg-secondary-static: var(--color-gray-600);
299
+ --color-bg-tertiary: var(--color-gray-800);
300
+ --color-bg-tertiary-hover: var(--color-gray-700);
301
+ --color-bg-accent-subtlest: var(--color-blue-900);
302
+ --color-bg-accent-subtlest-hover: var(--color-blue-800);
303
+ --color-bg-accent-subtle: var(--color-blue-800);
304
+ --color-bg-accent-subtle-hover: var(--color-blue-700);
305
+ --color-bg-accent-subtle_alt: var(--color-gray-900);
306
+ --color-bg-accent-strong: var(--color-blue-600);
307
+ --color-bg-accent-strong-hover: var(--color-blue-700);
308
+ --color-bg-accent-strongest: var(--color-yellow-200);
309
+ --color-bg-accent-strongest_hover: var(--color-yellow-100);
310
+ --color-bg-accent-strongest-alt: var(--color-blue-600);
311
+ --color-bg-accent-strongest-alt_hover: var(--color-blue-500);
312
+ --color-bg-accent-strongest-alt_on-subtle: var(--color-blue-600);
313
+ --color-bg-accent-strongest-alt_on-strong: var(--color-blue-600);
314
+ --color-bg-accent-strongest-alt_on-strongest: var(--color-blue-600);
315
+ --color-bg-accent-strong-primary-alt: var(--color-yellow-300);
316
+ --color-bg-accent-strong-primary-alt-hover: var(--color-blue-400);
317
+ --color-bg-error-primary: var(--color-red-950);
318
+ --color-bg-error-secondary: var(--color-red-600);
319
+ --color-bg-error-solid: var(--color-red-600);
320
+ --color-bg-error-solid_hover: var(--color-red-500);
321
+ --color-bg-warning-primary: var(--color-yellow-950);
322
+ --color-bg-warning-secondary: var(--color-yellow-600);
323
+ --color-bg-warning-solid: var(--color-yellow-600);
324
+ --color-bg-success-primary: var(--color-green-950);
325
+ --color-bg-success-secondary: var(--color-green-600);
326
+ --color-bg-success-solid: var(--color-green-600);
327
+ --color-focus-ring: var(--color-blue-500);
328
+ --color-focus-ring-error: var(--color-blue-500);
329
+ --color-shadow-xs: var(--color-transparent);
330
+ --color-shadow-sm_01: var(--color-transparent);
331
+ --color-shadow-sm_02: var(--color-transparent);
332
+ --color-shadow-md_01: var(--color-transparent);
333
+ --color-shadow-md_02: var(--color-transparent);
334
+ --color-shadow-lg_01: var(--color-transparent);
335
+ --color-shadow-lg_02: var(--color-transparent);
336
+ --color-shadow-lg_03: var(--color-transparent);
337
+ --color-shadow-xl_01: var(--color-transparent);
338
+ --color-shadow-xl_02: var(--color-transparent);
339
+ --color-shadow-xl_03: var(--color-transparent);
340
+ --color-shadow-2xl_01: var(--color-transparent);
341
+ --color-shadow-2xl_02: var(--color-transparent);
342
+ --color-shadow-3xl_01: var(--color-transparent);
343
+ --color-shadow-3xl_02: var(--color-transparent);
344
+ --color-shadow-skeumorphic-inner: rgba(0, 0, 0, 0.05);
345
+ --color-shadow-skeumorphic-inner-border: rgba(0, 0, 0, 0.18);
346
+ }
347
+ }