tycho-components 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 (17) hide show
  1. package/.storybook/preview.tsx +2 -2
  2. package/package.json +17 -13
  3. package/src/AppModal/style.scss +1 -1
  4. package/src/Participants/ParticipantCreate/ParticipantCreate.tsx +1 -1
  5. package/src/Participants/Participants.tsx +5 -5
  6. package/src/configs/Localization.ts +13 -11
  7. package/src/configs/localization/CommonTexts.ts +1 -0
  8. package/src/configs/localization/ParticipantsTexts.ts +1 -1
  9. package/src/index.ts +2 -0
  10. package/src/new-styles/base/_borders.scss +30 -0
  11. package/src/new-styles/base/_colors.scss +100 -0
  12. package/src/new-styles/base/_displays.scss +207 -0
  13. package/src/new-styles/base/_margins.css +174 -0
  14. package/src/new-styles/base/_spacing.scss +26 -0
  15. package/src/new-styles/base/_tokens.scss +329 -0
  16. package/src/new-styles/base/_typographs.scss +348 -0
  17. package/src/new-styles/main.scss +27 -0
package/src/new-styles/base/_margins.css ADDED
@@ -0,0 +1,174 @@
1
+ /* Margin for all sides */
2
+ .m-0 {
3
+ margin: 0 !important;
4
+ }
5
+ .m-1 {
6
+ margin: 0.25rem !important;
7
+ }
8
+ .m-2 {
9
+ margin: 0.5rem !important;
10
+ }
11
+ .m-3 {
12
+ margin: 1rem !important;
13
+ }
14
+ .m-4 {
15
+ margin: 1.5rem !important;
16
+ }
17
+ .m-5 {
18
+ margin: 3rem !important;
19
+ }
20
+ .m-auto {
21
+ margin: auto !important;
22
+ }
23
+
24
+ /* Margin-top */
25
+ .mt-0 {
26
+ margin-top: 0 !important;
27
+ }
28
+ .mt-1 {
29
+ margin-top: 0.25rem !important;
30
+ }
31
+ .mt-2 {
32
+ margin-top: 0.5rem !important;
33
+ }
34
+ .mt-3 {
35
+ margin-top: 1rem !important;
36
+ }
37
+ .mt-4 {
38
+ margin-top: 1.5rem !important;
39
+ }
40
+ .mt-5 {
41
+ margin-top: 3rem !important;
42
+ }
43
+ .mt-auto {
44
+ margin-top: auto !important;
45
+ }
46
+
47
+ /* Margin-right */
48
+ .me-0 {
49
+ margin-right: 0 !important;
50
+ }
51
+ .me-1 {
52
+ margin-right: 0.25rem !important;
53
+ }
54
+ .me-2 {
55
+ margin-right: 0.5rem !important;
56
+ }
57
+ .me-3 {
58
+ margin-right: 1rem !important;
59
+ }
60
+ .me-4 {
61
+ margin-right: 1.5rem !important;
62
+ }
63
+ .me-5 {
64
+ margin-right: 3rem !important;
65
+ }
66
+ .me-auto {
67
+ margin-right: auto !important;
68
+ }
69
+
70
+ /* Margin-bottom */
71
+ .mb-0 {
72
+ margin-bottom: 0 !important;
73
+ }
74
+ .mb-1 {
75
+ margin-bottom: 0.25rem !important;
76
+ }
77
+ .mb-2 {
78
+ margin-bottom: 0.5rem !important;
79
+ }
80
+ .mb-3 {
81
+ margin-bottom: 1rem !important;
82
+ }
83
+ .mb-4 {
84
+ margin-bottom: 1.5rem !important;
85
+ }
86
+ .mb-5 {
87
+ margin-bottom: 3rem !important;
88
+ }
89
+ .mb-auto {
90
+ margin-bottom: auto !important;
91
+ }
92
+
93
+ /* Margin-left */
94
+ .ms-0 {
95
+ margin-left: 0 !important;
96
+ }
97
+ .ms-1 {
98
+ margin-left: 0.25rem !important;
99
+ }
100
+ .ms-2 {
101
+ margin-left: 0.5rem !important;
102
+ }
103
+ .ms-3 {
104
+ margin-left: 1rem !important;
105
+ }
106
+ .ms-4 {
107
+ margin-left: 1.5rem !important;
108
+ }
109
+ .ms-5 {
110
+ margin-left: 3rem !important;
111
+ }
112
+ .ms-auto {
113
+ margin-left: auto !important;
114
+ }
115
+
116
+ /* Horizontal (left + right) margin */
117
+ .mx-0 {
118
+ margin-left: 0 !important;
119
+ margin-right: 0 !important;
120
+ }
121
+ .mx-1 {
122
+ margin-left: 0.25rem !important;
123
+ margin-right: 0.25rem !important;
124
+ }
125
+ .mx-2 {
126
+ margin-left: 0.5rem !important;
127
+ margin-right: 0.5rem !important;
128
+ }
129
+ .mx-3 {
130
+ margin-left: 1rem !important;
131
+ margin-right: 1rem !important;
132
+ }
133
+ .mx-4 {
134
+ margin-left: 1.5rem !important;
135
+ margin-right: 1.5rem !important;
136
+ }
137
+ .mx-5 {
138
+ margin-left: 3rem !important;
139
+ margin-right: 3rem !important;
140
+ }
141
+ .mx-auto {
142
+ margin-left: auto !important;
143
+ margin-right: auto !important;
144
+ }
145
+
146
+ /* Vertical (top + bottom) margin */
147
+ .my-0 {
148
+ margin-top: 0 !important;
149
+ margin-bottom: 0 !important;
150
+ }
151
+ .my-1 {
152
+ margin-top: 0.25rem !important;
153
+ margin-bottom: 0.25rem !important;
154
+ }
155
+ .my-2 {
156
+ margin-top: 0.5rem !important;
157
+ margin-bottom: 0.5rem !important;
158
+ }
159
+ .my-3 {
160
+ margin-top: 1rem !important;
161
+ margin-bottom: 1rem !important;
162
+ }
163
+ .my-4 {
164
+ margin-top: 1.5rem !important;
165
+ margin-bottom: 1.5rem !important;
166
+ }
167
+ .my-5 {
168
+ margin-top: 3rem !important;
169
+ margin-bottom: 3rem !important;
170
+ }
171
+ .my-auto {
172
+ margin-top: auto !important;
173
+ margin-bottom: auto !important;
174
+ }
package/src/new-styles/base/_spacing.scss ADDED
@@ -0,0 +1,26 @@
1
+ // spaces
2
+
3
+ :root {
4
+ --spacing-0: 0px;
5
+ --spacing-050: 4px;
6
+ --spacing-075: 6px;
7
+ --spacing-100: 8px;
8
+ --spacing-125: 10px;
9
+ --spacing-150: 12px;
10
+ --spacing-200: 16px;
11
+ --spacing-250: 20px;
12
+ --spacing-300: 24px;
13
+ --spacing-350: 28px;
14
+ --spacing-400: 32px;
15
+ --spacing-500: 40px;
16
+ --spacing-600: 48px;
17
+ --spacing-700: 56px;
18
+ --spacing-800: 64px;
19
+ --spacing-900: 72px;
20
+ --spacing-1000: 80px;
21
+ --spacing-1100: 88px;
22
+ --spacing-1200: 96px;
23
+ --spacing-1300: 104px;
24
+ --spacing-1400: 112px;
25
+ --spacing-1500: 120px;
26
+ }
package/src/new-styles/base/_tokens.scss ADDED
@@ -0,0 +1,329 @@
1
+ :root {
2
+ --background-accent: var(--accent-30);
3
+ --background-default: var(--neutral-light-100);
4
+ --background-inverse: var(--neutral-dark-99);
5
+ --border-accent-1: var(--neutral-light-50);
6
+ --border-accent-2: var(--neutral-light-40);
7
+ --border-accent-3: var(--accent-20);
8
+ --border-button: var(--accent-30);
9
+ --border-button-white: var(--accent-100);
10
+ --border-error: var(--semantic-danger-50);
11
+ --border-error-hover: var(--semantic-danger-30);
12
+ --border-hover: var(--accent-50);
13
+ --border-only-high-contrast: #ffffff00;
14
+ --border-subtle-1: var(--neutral-light-90);
15
+ --border-subtle-2: var(--neutral-light-80);
16
+ --border-subtle-3: var(--neutral-light-80);
17
+ --border-subtle-4: var(--neutral-light-100);
18
+ --button-contrast: #00000000;
19
+ --button-danger-active: var(--semantic-danger-70);
20
+ --button-danger-default: var(--semantic-danger-50);
21
+ --button-danger-hover: var(--semantic-danger-60);
22
+ --button-primary-active: var(--accent-50);
23
+ --button-primary-default: var(--accent-30);
24
+ --button-primary-hover: var(--accent-40);
25
+ --button-secondary-active: var(--neutral-dark-40);
26
+ --button-secondary-default: var(--neutral-dark-20);
27
+ --button-secondary-hover: var(--neutral-dark-30);
28
+ --button-tertiary-active: var(--accent-90);
29
+ --button-tertiary-default: var(--accent-100);
30
+ --button-tertiary-hover: var(--accent-95);
31
+ --icon-accent: var(--accent-30);
32
+ --icon-accent-hover: var(--accent-50);
33
+ --icon-dark-fixed: var(--neutral-light-0);
34
+ --icon-disabled: var(--neutral-light-70);
35
+ --icon-error: var(--semantic-danger-40);
36
+ --icon-error-hover: var(--semantic-danger-30);
37
+ --icon-error-on-hover: var(--semantic-danger-30);
38
+ --icon-info: var(--semantic-info-50);
39
+ --icon-light-fixed: var(--neutral-light-100);
40
+ --icon-on-color-accent: var(--accent-30);
41
+ --icon-on-color-dark: var(--neutral-light-0);
42
+ --icon-on-color-light: var(--neutral-light-100);
43
+ --icon-on-disabled: var(--neutral-light-60);
44
+ --icon-placeholder: var(--neutral-light-50);
45
+ --icon-primary: var(--neutral-light-0);
46
+ --icon-secondary: var(--neutral-light-30);
47
+ --icon-success: var(--semantic-success-60);
48
+ --icon-tertiary: var(--neutral-light-40);
49
+ --icon-warning: var(--semantic-warning-50);
50
+ --layer-disabled: var(--neutral-dark-10);
51
+ --layer-field: var(--neutral-dark-20);
52
+ --layer-field-active: var(--accent-99);
53
+ --layer-field-hover: var(--accent-95);
54
+ --layer-hover-1: var(--neutral-light-95);
55
+ --layer-hover-2: var(--neutral-light-90);
56
+ --layer-hover-3: var(--neutral-light-80);
57
+ --layer-layer-1: var(--neutral-light-99);
58
+ --layer-layer-2: var(--neutral-light-95);
59
+ --layer-layer-3: var(--neutral-light-90);
60
+ --layer-semantic-danger: var(--semantic-danger-95);
61
+ --layer-semantic-info: var(--semantic-info-95);
62
+ --layer-semantic-success: var(--semantic-success-95);
63
+ --layer-semantic-warning: var(--semantic-warning-95);
64
+ --layer-tooltip: var(--neutral-dark-99);
65
+ --link-default: var(--semantic-info-40);
66
+ --link-hover: var(--semantic-info-60);
67
+ --link-visited: var(--neutral-dark-60);
68
+ --miscellaneous-brand-gradient-1: #0a5dff00;
69
+ --miscellaneous-brand-gradient-2: #0a5dff14;
70
+ --miscellaneous-scrim: #00000080;
71
+ --miscellaneous-scroll: #00000040;
72
+ --miscellaneous-scroll-hover: var(--neutral-dark-40);
73
+ --miscellaneous-shadow-1: #18274b1f;
74
+ --miscellaneous-shadow-2: #18274b14;
75
+ --miscellaneous-skeleton: var(--neutral-dark-10);
76
+ --miscellaneous-skeleton-light: var(--neutral-dark-30);
77
+ --tag-blue-accent: var(--accent-60);
78
+ --tag-blue-low: var(--accent-90);
79
+ --tag-gray-accent: var(--neutral-light-20);
80
+ --tag-gray-low: var(--neutral-light-90);
81
+ --tag-green-accent: var(--semantic-success-70);
82
+ --tag-green-low: var(--semantic-success-90);
83
+ --tag-red-accent: var(--semantic-danger-50);
84
+ --tag-red-low: var(--semantic-danger-90);
85
+ --tag-violet-accent: var(--semantic-info-50);
86
+ --tag-violet-low: var(--semantic-info-90);
87
+ --tag-yellow-accent: var(--semantic-warning-80);
88
+ --tag-yellow-low: var(--semantic-warning-95);
89
+ --text-accent: var(--accent-30);
90
+ --text-accent-hover: var(--accent-50);
91
+ --text-dark-fixed: var(--neutral-light-0);
92
+ --text-disabled: var(--neutral-light-70);
93
+ --text-error: var(--semantic-danger-40);
94
+ --text-error-hover: var(--semantic-danger-30);
95
+ --text-error-on-hover: var(--semantic-danger-30);
96
+ --text-info: var(--semantic-info-50);
97
+ --text-light-fixed: var(--neutral-light-100);
98
+ --text-on-color-accent: var(--accent-30);
99
+ --text-on-color-dark: var(--neutral-light-0);
100
+ --text-on-color-light: var(--neutral-light-100);
101
+ --text-on-disabled: var(--neutral-light-60);
102
+ --text-placeholder: var(--neutral-light-50);
103
+ --text-placeholder-hover: var(--neutral-light-40);
104
+ --text-primary: var(--neutral-light-0);
105
+ --text-secondary: var(--neutral-light-30);
106
+ --text-success: var(--semantic-success-60);
107
+ --text-tertiary: var(--neutral-light-40);
108
+ --text-warning: var(--semantic-warning-50);
109
+ }
110
+
111
+ body.dark-mode {
112
+ --background-accent: var(--accent-10);
113
+ --background-default: var(--neutral-dark-99);
114
+ --background-inverse: var(--neutral-light-100);
115
+ --border-accent-1: var(--neutral-dark-40);
116
+ --border-accent-2: var(--neutral-dark-30);
117
+ --border-accent-3: var(--accent-95);
118
+ --border-button: var(--accent-60);
119
+ --border-button-white: var(--accent-100);
120
+ --border-error: var(--semantic-danger-70);
121
+ --border-error-hover: var(--semantic-danger-80);
122
+ --border-hover: var(--accent-80);
123
+ --border-only-high-contrast: #ffffff00;
124
+ --border-subtle-1: var(--neutral-dark-80);
125
+ --border-subtle-2: var(--neutral-dark-70);
126
+ --border-subtle-3: var(--neutral-dark-70);
127
+ --border-subtle-4: var(--neutral-dark-100);
128
+ --button-contrast: #00000000;
129
+ --button-danger-active: var(--semantic-danger-80);
130
+ --button-danger-default: var(--semantic-danger-60);
131
+ --button-danger-hover: var(--semantic-danger-70);
132
+ --button-primary-active: var(--accent-80);
133
+ --button-primary-default: var(--accent-60);
134
+ --button-primary-hover: var(--accent-70);
135
+ --button-secondary-active: var(--neutral-light-20);
136
+ --button-secondary-default: var(--neutral-light-0);
137
+ --button-secondary-hover: var(--neutral-light-10);
138
+ --button-tertiary-active: var(--accent-40);
139
+ --button-tertiary-default: var(--accent-10);
140
+ --button-tertiary-hover: var(--accent-20);
141
+ --icon-accent: var(--accent-80);
142
+ --icon-accent-hover: var(--accent-60);
143
+ --icon-dark-fixed: var(--neutral-dark-100);
144
+ --icon-disabled: var(--neutral-dark-70);
145
+ --icon-error: var(--semantic-danger-70);
146
+ --icon-error-hover: var(--semantic-danger-80);
147
+ --icon-error-on-hover: var(--semantic-danger-80);
148
+ --icon-info: var(--semantic-info-80);
149
+ --icon-light-fixed: var(--neutral-dark-0);
150
+ --icon-on-color-accent: var(--accent-95);
151
+ --icon-on-color-dark: var(--neutral-dark-0);
152
+ --icon-on-color-light: var(--neutral-dark-100);
153
+ --icon-on-disabled: var(--neutral-dark-60);
154
+ --icon-placeholder: var(--neutral-dark-50);
155
+ --icon-primary: var(--neutral-dark-0);
156
+ --icon-secondary: var(--neutral-dark-30);
157
+ --icon-success: var(--semantic-success-80);
158
+ --icon-tertiary: var(--neutral-dark-40);
159
+ --icon-warning: var(--semantic-warning-70);
160
+ --layer-disabled: var(--neutral-dark-95);
161
+ --layer-field: var(--neutral-light-30);
162
+ --layer-field-active: var(--neutral-dark-100);
163
+ --layer-field-hover: var(--neutral-dark-80);
164
+ --layer-hover-1: var(--neutral-dark-90);
165
+ --layer-hover-2: var(--neutral-dark-80);
166
+ --layer-hover-3: var(--neutral-dark-70);
167
+ --layer-layer-1: var(--neutral-dark-95);
168
+ --layer-layer-2: var(--neutral-dark-90);
169
+ --layer-layer-3: var(--neutral-light-80);
170
+ --layer-semantic-danger: var(--semantic-danger-20);
171
+ --layer-semantic-info: var(--semantic-info-20);
172
+ --layer-semantic-success: var(--semantic-success-20);
173
+ --layer-semantic-warning: var(--semantic-warning-40);
174
+ --layer-tooltip: var(--neutral-dark-0);
175
+ --link-default: var(--semantic-info-80);
176
+ --link-hover: var(--semantic-info-50);
177
+ --link-visited: var(--neutral-dark-40);
178
+ --miscellaneous-brand-gradient-1: #0a5dff00;
179
+ --miscellaneous-brand-gradient-2: #0a5dff26;
180
+ --miscellaneous-scrim: #000000b2;
181
+ --miscellaneous-scroll: var(--neutral-dark-80);
182
+ --miscellaneous-scroll-hover: var(--neutral-dark-60);
183
+ --miscellaneous-shadow-1: #000000e5;
184
+ --miscellaneous-shadow-2: #000000b2;
185
+ --miscellaneous-skeleton: var(--neutral-dark-99);
186
+ --miscellaneous-skeleton-light: var(--neutral-dark-80);
187
+ --tag-blue-accent: var(--accent-60);
188
+ --tag-blue-low: var(--accent-40);
189
+ --tag-gray-accent: var(--neutral-dark-20);
190
+ --tag-gray-low: var(--neutral-dark-80);
191
+ --tag-green-accent: var(--semantic-success-80);
192
+ --tag-green-low: var(--semantic-success-40);
193
+ --tag-red-accent: var(--semantic-danger-70);
194
+ --tag-red-low: var(--semantic-danger-20);
195
+ --tag-violet-accent: var(--semantic-info-80);
196
+ --tag-violet-low: var(--semantic-info-20);
197
+ --tag-yellow-accent: var(--semantic-warning-80);
198
+ --tag-yellow-low: var(--semantic-warning-20);
199
+ --text-accent: var(--accent-80);
200
+ --text-accent-hover: var(--accent-60);
201
+ --text-dark-fixed: var(--neutral-dark-100);
202
+ --text-disabled: var(--neutral-dark-70);
203
+ --text-error: var(--semantic-danger-70);
204
+ --text-error-hover: var(--semantic-danger-80);
205
+ --text-error-on-hover: var(--semantic-danger-80);
206
+ --text-info: var(--semantic-info-80);
207
+ --text-light-fixed: var(--neutral-dark-0);
208
+ --text-on-color-accent: var(--accent-95);
209
+ --text-on-color-dark: var(--neutral-dark-0);
210
+ --text-on-color-light: var(--neutral-dark-100);
211
+ --text-on-disabled: var(--neutral-dark-60);
212
+ --text-placeholder: var(--neutral-dark-50);
213
+ --text-placeholder-hover: var(--neutral-dark-40);
214
+ --text-primary: var(--neutral-dark-0);
215
+ --text-secondary: var(--neutral-dark-30);
216
+ --text-success: var(--semantic-success-80);
217
+ --text-tertiary: var(--neutral-dark-40);
218
+ --text-warning: var(--semantic-warning-70);
219
+ }
220
+
221
+ body.high-contrast {
222
+ --background-accent: var(--high-contrast-dark);
223
+ --background-default: var(--high-contrast-dark);
224
+ --background-inverse: var(--high-contrast-dark);
225
+ --border-accent-1: var(--high-contrast-light);
226
+ --border-accent-2: var(--high-contrast-light);
227
+ --border-accent-3: var(--high-contrast-light);
228
+ --border-button: var(--high-contrast-light);
229
+ --border-button-white: var(--high-contrast-light);
230
+ --border-error: var(--high-contrast-light);
231
+ --border-error-hover: var(--high-contrast-yellow);
232
+ --border-hover: var(--high-contrast-yellow);
233
+ --border-only-high-contrast: var(--high-contrast-light);
234
+ --border-subtle-1: var(--high-contrast-light);
235
+ --border-subtle-2: var(--high-contrast-light);
236
+ --border-subtle-3: var(--high-contrast-light);
237
+ --border-subtle-4: var(--high-contrast-light);
238
+ --button-contrast: var(--high-contrast-dark);
239
+ --button-danger-active: var(--high-contrast-blue);
240
+ --button-danger-default: var(--high-contrast-light);
241
+ --button-danger-hover: var(--high-contrast-yellow);
242
+ --button-primary-active: var(--high-contrast-blue);
243
+ --button-primary-default: var(--high-contrast-light);
244
+ --button-primary-hover: var(--high-contrast-yellow);
245
+ --button-secondary-active: var(--high-contrast-light);
246
+ --button-secondary-default: var(--high-contrast-light);
247
+ --button-secondary-hover: var(--high-contrast-green);
248
+ --button-tertiary-active: var(--high-contrast-blue);
249
+ --button-tertiary-default: var(--high-contrast-light);
250
+ --button-tertiary-hover: var(--high-contrast-yellow);
251
+ --icon-accent: var(--high-contrast-light);
252
+ --icon-accent-hover: var(--high-contrast-yellow);
253
+ --icon-dark-fixed: var(--high-contrast-dark);
254
+ --icon-disabled: var(--high-contrast-light);
255
+ --icon-error: var(--high-contrast-light);
256
+ --icon-error-hover: var(--high-contrast-yellow);
257
+ --icon-error-on-hover: var(--high-contrast-dark);
258
+ --icon-info: var(--high-contrast-light);
259
+ --icon-light-fixed: var(--high-contrast-light);
260
+ --icon-on-color-accent: var(--high-contrast-dark);
261
+ --icon-on-color-dark: var(--high-contrast-dark);
262
+ --icon-on-color-light: var(--high-contrast-dark);
263
+ --icon-on-disabled: var(--high-contrast-dark);
264
+ --icon-placeholder: var(--high-contrast-dark);
265
+ --icon-primary: var(--high-contrast-light);
266
+ --icon-secondary: var(--high-contrast-yellow);
267
+ --icon-success: var(--high-contrast-light);
268
+ --icon-tertiary: var(--high-contrast-green);
269
+ --icon-warning: var(--high-contrast-light);
270
+ --layer-disabled: var(--high-contrast-light);
271
+ --layer-field: var(--high-contrast-light);
272
+ --layer-field-active: var(--high-contrast-blue);
273
+ --layer-field-hover: var(--high-contrast-yellow);
274
+ --layer-hover-1: var(--high-contrast-yellow);
275
+ --layer-hover-2: var(--high-contrast-yellow);
276
+ --layer-hover-3: var(--high-contrast-yellow);
277
+ --layer-layer-1: var(--high-contrast-dark);
278
+ --layer-layer-2: var(--high-contrast-dark);
279
+ --layer-layer-3: var(--high-contrast-dark);
280
+ --layer-semantic-danger: var(--high-contrast-dark);
281
+ --layer-semantic-info: var(--high-contrast-dark);
282
+ --layer-semantic-success: var(--high-contrast-dark);
283
+ --layer-semantic-warning: var(--high-contrast-dark);
284
+ --layer-tooltip: var(--high-contrast-light);
285
+ --link-default: var(--high-contrast-light);
286
+ --link-hover: var(--high-contrast-yellow);
287
+ --link-visited: var(--high-contrast-blue);
288
+ --miscellaneous-brand-gradient-1: var(--high-contrast-dark);
289
+ --miscellaneous-brand-gradient-2: var(--high-contrast-dark);
290
+ --miscellaneous-scrim: #000000e5;
291
+ --miscellaneous-scroll: var(--high-contrast-light);
292
+ --miscellaneous-scroll-hover: var(--high-contrast-yellow);
293
+ --miscellaneous-shadow-1: #00000000;
294
+ --miscellaneous-shadow-2: #00000000;
295
+ --miscellaneous-skeleton: var(--high-contrast-dark);
296
+ --miscellaneous-skeleton-light: var(--high-contrast-light);
297
+ --tag-blue-accent: var(--high-contrast-green);
298
+ --tag-blue-low: var(--high-contrast-light);
299
+ --tag-gray-accent: var(--high-contrast-green);
300
+ --tag-gray-low: var(--high-contrast-light);
301
+ --tag-green-accent: var(--high-contrast-green);
302
+ --tag-green-low: var(--high-contrast-light);
303
+ --tag-red-accent: var(--high-contrast-green);
304
+ --tag-red-low: var(--high-contrast-light);
305
+ --tag-violet-accent: var(--high-contrast-green);
306
+ --tag-violet-low: var(--high-contrast-light);
307
+ --tag-yellow-accent: var(--high-contrast-green);
308
+ --tag-yellow-low: var(--high-contrast-light);
309
+ --text-accent: var(--high-contrast-light);
310
+ --text-accent-hover: var(--high-contrast-yellow);
311
+ --text-dark-fixed: var(--high-contrast-dark);
312
+ --text-disabled: var(--high-contrast-light);
313
+ --text-error: var(--high-contrast-light);
314
+ --text-error-hover: var(--high-contrast-yellow);
315
+ --text-error-on-hover: var(--high-contrast-dark);
316
+ --text-info: var(--high-contrast-light);
317
+ --text-light-fixed: var(--high-contrast-light);
318
+ --text-on-color-accent: var(--high-contrast-dark);
319
+ --text-on-color-dark: var(--high-contrast-dark);
320
+ --text-on-color-light: var(--high-contrast-dark);
321
+ --text-on-disabled: var(--high-contrast-dark);
322
+ --text-placeholder: var(--high-contrast-yellow);
323
+ --text-placeholder-hover: var(--high-contrast-dark);
324
+ --text-primary: var(--high-contrast-light);
325
+ --text-secondary: var(--high-contrast-yellow);
326
+ --text-success: var(--high-contrast-light);
327
+ --text-tertiary: var(--high-contrast-green);
328
+ --text-warning: var(--high-contrast-light);
329
+ }