platformscode-new-react 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 (71) hide show
  1. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff +0 -0
  2. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff +0 -0
  4. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff +0 -0
  6. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-Regular.woff2 +0 -0
  7. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff +0 -0
  8. package/dist/assets/fonts/IBM-Plex-Sans-Arabic/IBMPlexSansArabic-SemiBold.woff2 +0 -0
  9. package/dist/components.d.ts +12 -1
  10. package/dist/index.cjs.js +68346 -1161
  11. package/dist/index.js +69302 -1852
  12. package/dist/style.css +1 -0
  13. package/package.json +5 -3
  14. package/src/assets/styles/abstracts/_functions.scss +3 -0
  15. package/src/assets/styles/abstracts/_mixins.scss +60 -0
  16. package/src/assets/styles/abstracts/_variables.scss +46 -0
  17. package/src/assets/styles/abstracts/variables/_colors.scss +145 -0
  18. package/src/assets/styles/abstracts/variables/_radius.scss +19 -0
  19. package/src/assets/styles/abstracts/variables/_shadows.scss +9 -0
  20. package/src/assets/styles/abstracts/variables/_spacing.scss +35 -0
  21. package/src/assets/styles/abstracts/variables/_widths.scss +306 -0
  22. package/src/assets/styles/base/_animation.scss +0 -0
  23. package/src/assets/styles/base/_base.scss +29 -0
  24. package/src/assets/styles/base/_typography.scss +73 -0
  25. package/src/assets/styles/base/_utilities.scss +260 -0
  26. package/src/assets/styles/components/_accordions.scss +184 -0
  27. package/src/assets/styles/components/_avatar.scss +87 -0
  28. package/src/assets/styles/components/_breadcrumbs.scss +63 -0
  29. package/src/assets/styles/components/_btns.scss +815 -0
  30. package/src/assets/styles/components/_card.scss +91 -0
  31. package/src/assets/styles/components/_checkbox.scss +241 -0
  32. package/src/assets/styles/components/_content-switcher.scss +108 -0
  33. package/src/assets/styles/components/_data-table.scss +155 -0
  34. package/src/assets/styles/components/_date-picker.scss +257 -0
  35. package/src/assets/styles/components/_dropdown.scss +479 -0
  36. package/src/assets/styles/components/_featured-icons.scss +127 -0
  37. package/src/assets/styles/components/_file-upload.scss +164 -0
  38. package/src/assets/styles/components/_icons.scss +3 -0
  39. package/src/assets/styles/components/_inline-alert.scss +166 -0
  40. package/src/assets/styles/components/_input.scss +473 -0
  41. package/src/assets/styles/components/_links.scss +130 -0
  42. package/src/assets/styles/components/_list.scss +130 -0
  43. package/src/assets/styles/components/_loading.scss +135 -0
  44. package/src/assets/styles/components/_menu.scss +85 -0
  45. package/src/assets/styles/components/_modals.scss +108 -0
  46. package/src/assets/styles/components/_notification-toast.scss +177 -0
  47. package/src/assets/styles/components/_notifications.scss +139 -0
  48. package/src/assets/styles/components/_pagination.scss +79 -0
  49. package/src/assets/styles/components/_progress-indicator.scss +230 -0
  50. package/src/assets/styles/components/_radio.scss +183 -0
  51. package/src/assets/styles/components/_rating.scss +77 -0
  52. package/src/assets/styles/components/_shadows.scss +23 -0
  53. package/src/assets/styles/components/_structured-list.scss +95 -0
  54. package/src/assets/styles/components/_switch.scss +192 -0
  55. package/src/assets/styles/components/_tabs.scss +231 -0
  56. package/src/assets/styles/components/_tag.scss +191 -0
  57. package/src/assets/styles/components/_textarea.scss +294 -0
  58. package/src/assets/styles/components/_tooltip.scss +257 -0
  59. package/src/assets/styles/layout/_footer.scss +186 -0
  60. package/src/assets/styles/layout/_grid.scss +73 -0
  61. package/src/assets/styles/layout/_header.scss +0 -0
  62. package/src/assets/styles/layout/_layouts.scss +33 -0
  63. package/src/assets/styles/layout/_nav-header.scss +449 -0
  64. package/src/assets/styles/layout/_sidepanel.scss +340 -0
  65. package/src/assets/styles/layout/_table-of-content.scss +179 -0
  66. package/src/assets/styles/main.scss +54 -0
  67. package/src/assets/styles/themes/_dark.scss +416 -0
  68. package/src/assets/styles/themes/_light.scss +404 -0
  69. package/src/components.ts +45 -1
  70. package/src/index.ts +1 -0
  71. package/vite.config.ts +21 -1
package/src/assets/styles/themes/_dark.scss ADDED
@@ -0,0 +1,416 @@
1
+ :root {
2
+ --background-white: var(--colors-neutral-950);
3
+ --background-body: var(--colors-neutral-900);
4
+ --background-menu: var(--colors-neutral-800);
5
+ --background-card: var(--colors-neutral-800);
6
+ --background-surface-oncolor: var(--colors-base-white);
7
+ --background-black: var(--colors-base-white);
8
+ --background-neutral-800: var(--colors-neutral-600);
9
+ --background-neutral-400: var(--colors-neutral-400);
10
+ --background-neutral-300: var(--colors-neutral-500);
11
+ --background-neutral-200: var(--colors-neutral-600);
12
+ --background-neutral-100: var(--colors-neutral-800);
13
+ --background-neutral-50: var(--colors-neutral-900);
14
+ --background-neutral-25: var(--colors-neutral-950);
15
+ --background-primary: var(--colors-primary-sa-flag-600-primary);
16
+ --background-primary-400: var(--colors-primary-sa-flag-400);
17
+ --background-primary-200: var(--colors-neutral-700);
18
+ --background-primary-50: var(--colors-alpha-alpha-green-10);
19
+ --background-primary-25: var(--colors-primary-sa-flag-950);
20
+ --background-secondary: var(--colors-secondary-gold-600-primary);
21
+ --background-secondary-50: var(--colors-neutral-800);
22
+ --background-secondary-25: var(--colors-neutral-900);
23
+ --background-tertiary: var(--colors-tertiary-lavendar-600);
24
+ --background-tertiary-50: var(--colors-neutral-800);
25
+ --background-tertiary-25: var(--colors-neutral-900);
26
+ --background-success: var(--colors-green-600);
27
+ --background-success-50: var(--colors-neutral-800);
28
+ --background-success-25: var(--colors-neutral-900);
29
+ --background-info: var(--colors-blue-600);
30
+ --background-info-50: var(--colors-neutral-800);
31
+ --background-info-25: var(--colors-neutral-900);
32
+ --background-warning: var(--colors-yellow-600);
33
+ --background-warning-50: var(--colors-neutral-800);
34
+ --background-warning-25: var(--colors-neutral-900);
35
+ --background-error: var(--colors-red-600);
36
+ --background-error-50: var(--colors-neutral-800);
37
+ --background-error-25: var(--colors-neutral-900);
38
+ --background-sa-flag: var(--colors-primary-sa-flag-600-primary);
39
+ --background-sa-flag-50: var(--colors-neutral-800);
40
+ --background-sa-flag-25: var(--colors-neutral-900);
41
+ --background-notification-white: var(--colors-neutral-900);
42
+ --text-default: var(--colors-base-white);
43
+ --text-primary: var(--colors-primary-sa-flag-600-primary);
44
+ --text-secondary: var(--colors-secondary-gold-600-primary);
45
+ --text-tertiary: var(--colors-tertiary-lavendar-500-primary);
46
+ --text-primary-sa-flag: var(--colors-primary-sa-flag-100);
47
+ --text-display: var(--colors-neutral-50);
48
+ --text-primary-paragraph: var(--colors-neutral-100);
49
+ --text-secondary-paragraph: var(--colors-neutral-200);
50
+ --text-oncolor-primary: var(--colors-base-white);
51
+ --text-oncolor-secondary: var(--alpha-white-80);
52
+ --text-oncolor-tertiary: var(--alpha-white-70);
53
+ --text-success: var(--colors-green-600);
54
+ --text-info: var(--colors-blue-600);
55
+ --text-warning: var(--colors-yellow-600);
56
+ --text-error: var(--colors-red-700);
57
+ --text-primary-light: var(--colors-primary-sa-flag-300);
58
+ --text-secondary-light: var(--colors-secondary-gold-300);
59
+ --text-tertiary-light: var(--colors-tertiary-lavendar-300);
60
+ --text-default-disabled: var(--colors-neutral-400);
61
+ --text-default-oncolor-disabled: var(--alpha-black-40);
62
+ --border-white: var(--colors-base-black);
63
+ --border-white-40: var(--alpha-white-40);
64
+ --button-background-black-default: var(--colors-neutral-950);
65
+ --button-background-black-hovered: var(--colors-neutral-800);
66
+ --button-background-black-pressed: var(--colors-neutral-600);
67
+ --button-background-black-selected: var(--colors-neutral-700);
68
+ --button-background-black-focused: var(--colors-neutral-950);
69
+ --button-background-primary-default: var(
70
+ --colors-primary-sa-flag-600-primary
71
+ );
72
+ --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
73
+ --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
74
+ --button-background-primary-selected: var(--colors-primary-sa-flag-800);
75
+ --button-background-primary-focused: var(
76
+ --colors-primary-sa-flag-600-primary
77
+ );
78
+ --button-background-neutral-default: var(--colors-neutral-800);
79
+ --button-background-neutral-hovered: var(--colors-neutral-700);
80
+ --button-background-neutral-pressed: var(--colors-neutral-600);
81
+ --button-background-neutral-selected: var(--colors-neutral-700);
82
+ --button-background-neutral-focused: var(--colors-neutral-800);
83
+ --button-background-danger-primary-default: var(--colors-red-600);
84
+ --button-background-danger-primary-hovered: var(--colors-red-700);
85
+ --button-background-danger-primary-pressed: var(--colors-red-900);
86
+ --button-background-danger-primary-selected: var(--colors-red-800);
87
+ --button-background-danger-primary-focused: var(--colors-red-600);
88
+ --button-label-danger-primary-default-oncolor: var(--colors-red-200);
89
+ --button-label-danger-primary-hovered-oncolor: var(--colors-red-300);
90
+ --button-label-danger-primary-pressed-oncolor: var(--colors-red-400);
91
+ --button-background-danger-secondary-default: var(--colors-red-50);
92
+ --button-background-danger-secondary-hovered: var(--colors-red-100);
93
+ --button-background-danger-secondary-pressed: var(--colors-red-200);
94
+ --button-background-danger-secondary-selected: var(--colors-red-50);
95
+ --button-background-danger-secondary-focused: var(--colors-red-50);
96
+ --button-background-oncolor-default: var(--colors-base-black);
97
+ --button-background-oncolor-hovered: var(--alpha-white-80);
98
+ --button-background-oncolor-pressed: var(--alpha-white-60);
99
+ --button-background-oncolor-selected: var(--alpha-white-70);
100
+ --button-background-oncolor-focused: var(--alpha-white-100);
101
+ --button-background-transparent-default: var(--alpha-white-0);
102
+ --button-background-transparent-hovered: var(--alpha-white-20);
103
+ --button-background-transparent-pressed: var(--alpha-white-40);
104
+ --button-background-transparent-selected: var(--alpha-white-30);
105
+ --button-background-transparent-focused: var(--alpha-white-0);
106
+ --button-background-disabled-on-color: var(--alpha-white-20);
107
+ --button-label-transparent-hovered-on-color: var(
108
+ --colors-primary-sa-flag-400
109
+ );
110
+ --border-black: var(--colors-base-white);
111
+ --border-primary: var(--colors-primary-sa-flag-600-primary);
112
+ --border-primary-light: var(--colors-green-200);
113
+ --border-secondary: var(--colors-secondary-gold-600-primary);
114
+ --border-secondary-light: var(--colors-secondary-gold-200);
115
+ --border-tertiary: var(--colors-tertiary-lavendar-500-primary);
116
+ --border-tertiary-light: var(--colors-tertiary-lavendar-200);
117
+ --border-neutral-primary: var(--colors-neutral-500);
118
+ --border-neutral-secondary: var(--colors-neutral-700);
119
+ --border-neutral-tertiary: var(--colors-neutral-800);
120
+ --border-background-white: var(--colors-neutral-600);
121
+ --border-background-neutral: var(--colors-neutral-600);
122
+ --border-transparent-10: var(--alpha-white-10);
123
+ --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
124
+ --border-success: var(--colors-green-500);
125
+ --button-label-transparent-pressed-on-color: var(
126
+ --colors-primary-sa-flag-300
127
+ );
128
+ --border-success-light: var(--colors-green-200);
129
+ --border-info: var(--colors-blue-700);
130
+ --button-label-transparent-selected-on-color: var(
131
+ --colors-primary-sa-flag-400
132
+ );
133
+ --border-info-light: var(--colors-blue-200);
134
+ --button-icon-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
135
+ --border-warning: var(--colors-yellow-700);
136
+ --border-warning-light: var(--colors-yellow-200);
137
+ --border-error: var(--colors-red-700);
138
+ --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
139
+ --border-error-light: var(--colors-red-200);
140
+ --button-icon-transparent-selected-on-color: var(
141
+ --colors-primary-sa-flag-400
142
+ );
143
+ --border-disabled: var(--colors-neutral-400);
144
+ --link-primary: var(--colors-primary-sa-flag-600-primary);
145
+ --link-primary-hovered: var(--colors-primary-sa-flag-400);
146
+ --link-primary-pressed: var(--colors-primary-sa-flag-300);
147
+ --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
148
+ --link-primary-visited: var(--colors-primary-sa-flag-800);
149
+ --link-icon-primary-hovered: var(--colors-primary-sa-flag-400);
150
+ --link-icon-primary-pressed: var(--colors-primary-sa-flag-300);
151
+ --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
152
+ --link-icon-primary-visited: var(--colors-primary-sa-flag-800);
153
+ --link-secondary: var(--colors-secondary-gold-600-primary);
154
+ --link-secondary-hovered: var(--colors-secondary-gold-400);
155
+ --link-secondary-pressed: var(--colors-secondary-gold-300);
156
+ --link-secondary-focused: var(--colors-secondary-gold-600-primary);
157
+ --link-secondary-visited: var(--colors-secondary-gold-900);
158
+ --link-tertiary: var(--colors-tertiary-lavendar-500-primary);
159
+ --link-tertiary-hovered: var(--colors-tertiary-lavendar-400);
160
+ --link-tertiary-pressed: var(--colors-tertiary-lavendar-300);
161
+ --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary);
162
+ --link-tertiary-visited: var(--colors-tertiary-lavendar-800);
163
+ --link-neutral: var(--colors-neutral-200);
164
+ --link-neutral-hovered: var(--colors-neutral-400);
165
+ --link-icon-neutral-hovered: var(--colors-neutral-400);
166
+ --link-neutral-pressed: var(--colors-neutral-500);
167
+ --link-icon-neutral-pressed: var(--colors-neutral-500);
168
+ --link-neutral-focused: var(--colors-neutral-200);
169
+ --link-icon-neutral-focused: var(--colors-neutral-200);
170
+ --link-neutral-visited: var(--colors-neutral-300);
171
+ --link-icon-neutral-visited: var(--colors-neutral-300);
172
+ --link-danger: var(--colors-red-600);
173
+ --link-danger-hovered: var(--colors-red-700);
174
+ --link-icon-danger-hovered: var(--colors-red-700);
175
+ --link-danger-pressed: var(--colors-red-900);
176
+ --link-icon-danger-pressed: var(--colors-red-900);
177
+ --link-danger-focused: var(--colors-red-600);
178
+ --link-icon-danger-focused: var(--colors-red-600);
179
+ --link-danger-visited: var(--colors-red-800);
180
+ --link-icon-danger-visited: var(--colors-red-800);
181
+ --link-oncolor: var(--colors-base-white);
182
+ --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
183
+ --link-icon-oncolor-hovered: var(--alpha-white-80);
184
+ --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
185
+ --link-icon-oncolor-pressed: var(--alpha-white-60);
186
+ --link-oncolor-focused: var(--colors-base-white);
187
+ --link-link-oncolor-focused: var(--colors-base-white);
188
+ --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
189
+ --link-icon-oncolor-visited: var(--alpha-white-90);
190
+ --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
191
+ --link-icon-oncolor-disabled: var(--alpha-white-30);
192
+ --icon-oncolor: var(--colors-base-white);
193
+ --tag-background-neutral: var(--colors-primary-sa-flag-600-primary);
194
+ --tag-background-neutral-light: var(--colors-neutral-800);
195
+ --tag-background-on-color: var(--colors-alpha-alpha-white-20);
196
+ --tag-text-neutral: var(--colors-neutral-100);
197
+ --tag-text-success: var(--colors-green-800);
198
+ --tag-text-info: var(--colors-blue-800);
199
+ --tag-text-warning: var(--colors-yellow-800);
200
+ --tag-text-error: var(--colors-red-800);
201
+ --tag-icon-neutral: var(--colors-neutral-100);
202
+ --tag-icon-success: var(--colors-green-800);
203
+ --tag-icon-info: var(--colors-blue-800);
204
+ --tag-icon-warning: var(--colors-yellow-800);
205
+ --tag-icon-error: var(--colors-red-800);
206
+ --tag-background-success: var(--colors-green-700);
207
+ --tag-background-success-light: var(--colors-green-50);
208
+ --tag-background-info: var(--colors-blue-600);
209
+ --tag-background-info-light: var(--colors-blue-50);
210
+ --tag-background-warning: var(--colors-yellow-700);
211
+ --tag-background-warning-light: var(--colors-yellow-50);
212
+ --tag-background-error: var(--colors-red-600);
213
+ --tag-background-error-light: var(--colors-red-50);
214
+ --tag-border-neutral: var(--colors-neutral-300);
215
+ --tag-border-neutral-light: var(--colors-neutral-800);
216
+ --tag-border-on-color: var(--colors-alpha-alpha-white-60);
217
+ --tag-border-success: var(--colors-green-700);
218
+ --tag-border-success-light: var(--colors-green-200);
219
+ --tag-border-info: var(--colors-blue-700);
220
+ --tag-border-info-light: var(--colors-blue-200);
221
+ --tag-border-warning: var(--colors-red-700);
222
+ --tag-border-warning-light: var(--colors-yellow-200);
223
+ --tag-border-error: var(--colors-red-700);
224
+ --tag-border-error-light: var(--colors-red-200);
225
+ --tag-dot: var(--colors-alpha-alpha-white-60);
226
+ --form-text-form-title: var(--text-default);
227
+ --controls-control-primary: var(--alpha-white-0);
228
+ --table-cell-border: var(--colors-neutral-600);
229
+ --table-cell-border-inverse: var(--border-black);
230
+ --table-text-head: var(--colors-neutral-300);
231
+ --table-text-body: var(--text-default);
232
+ --table-background-disabled: var(--background-disabled);
233
+ --table-background-hover-selected: var(--colors-neutral-900);
234
+ --table-background-header: var(--colors-neutral-900);
235
+ --table-background-row: var(--colors-neutral-900);
236
+ --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
237
+ --controls-control-primary-hovered: var(--colors-primary-sa-flag-300);
238
+ --controls-control-primary-pressed: var(--colors-primary-sa-flag-400);
239
+ --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
240
+ --controls-control-neutral-checked: var(--colors-neutral-600);
241
+ --controls-control-neutral-hovered: var(--colors-neutral-400);
242
+ --controls-control-neutral-pressed: var(--colors-neutral-400);
243
+ --controls-control-neutral-focused: var(--colors-neutral-600);
244
+ --controls-control-primary--readonly: var(--alpha-white-0);
245
+ --controls-control-pressed: var(--colors-neutral-600);
246
+ --controls-control-ripple-effect: var(--colors-neutral-950);
247
+ --controls-control-border: var(--colors-neutral-400);
248
+ --form-text-form-paragraph: var(--text-secondary-paragraph);
249
+ --form-field-text-label: var(--text-default);
250
+ --form-field-text-placeholder: var(--text-secondary-paragraph);
251
+ --form-field-text-hovered: var(--text-default);
252
+ --stepper-button-completed: var(--colors-green-600);
253
+ --tooltip-background-light: var(--colors-neutral-800);
254
+ --tooltip-text-heading-light: var(--text-display);
255
+ --tooltip-text-paragraph-light: var(--text-primary-paragraph);
256
+ --tooltip-background-dark: var(--colors-base-white);
257
+ --tooltip-text-heading-dark: var(--colors-neutral-800);
258
+ --tooltip-text-paragraph-dark: var(--colors-neutral-700);
259
+ --alpha-white-0: var(--colors-alpha-alpha-black-10);
260
+ --alpha-white-10: var(--colors-alpha-alpha-black-10);
261
+ --alpha-white-20: var(--colors-alpha-alpha-black-20);
262
+ --alpha-white-30: var(--colors-alpha-alpha-black-30);
263
+ --alpha-white-40: var(--colors-alpha-alpha-black-40);
264
+ --alpha-white-50: var(--colors-alpha-alpha-black-50);
265
+ --alpha-white-60: var(--colors-alpha-alpha-black-60);
266
+ --alpha-white-70: var(--colors-alpha-alpha-black-70);
267
+ --alpha-white-80: var(--colors-alpha-alpha-black-80);
268
+ --alpha-white-90: var(--colors-alpha-alpha-black-90);
269
+ --alpha-white-100: var(--colors-alpha-alpha-black-100);
270
+ --alpha-black-0: var(--colors-alpha-alpha-white-10);
271
+ --alpha-black-10: var(--colors-alpha-alpha-white-10);
272
+ --alpha-black-20: var(--colors-alpha-alpha-white-20);
273
+ --alpha-black-30: var(--colors-alpha-alpha-white-30);
274
+ --alpha-black-40: var(--colors-alpha-alpha-white-40);
275
+ --alpha-black-50: var(--colors-alpha-alpha-white-50);
276
+ --alpha-black-60: var(--colors-alpha-alpha-white-60);
277
+ --alpha-black-70: var(--colors-alpha-alpha-white-70);
278
+ --alpha-black-80: var(--colors-alpha-alpha-white-80);
279
+ --alpha-black-90: var(--colors-alpha-alpha-white-90);
280
+ --alpha-black-100: var(--colors-alpha-alpha-white-100);
281
+ --background-disabled: var(--colors-neutral-700);
282
+ --background-disabled-primary: var(--colors-primary-sa-flag-700);
283
+ --background-inverse-disabled: var(--colors-neutral-700);
284
+ --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
285
+ --stepper-button-current: var(--colors-green-600);
286
+ --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
287
+ --stepper-button-upcomming: var(--colors-neutral-600);
288
+ --stepper-button-upcomming-hovered: var(--colors-neutral-600);
289
+ --stepper-button-background: var(--colors-base-white);
290
+ --stepper-text-primary: var(--text-default);
291
+ --stepper-text-secondary: var(--text-primary-paragraph);
292
+ --stepper-text-tertiary: var(--text-secondary-paragraph);
293
+ --stepper-line-completed: var(--colors-primary-sa-flag-600-primary);
294
+ --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700);
295
+ --stepper-line-current: var(--colors-neutral-700);
296
+ --stepper-line-upcomming: var(--colors-neutral-700);
297
+ --stepper-line-upcomming-hovered: var(--colors-neutral-700);
298
+ --form-field-text-focused: var(--text-primary-paragraph);
299
+ --form-field-text-pressed: var(--text-primary-paragraph);
300
+ --form-field-text-filled: var(--text-default);
301
+ --form-field-text-readonly: var(--text-default);
302
+ --form-field-text-helper: var(--text-secondary-paragraph);
303
+ --form-field-background-default: var(--colors-neutral-800);
304
+ --form-field-background-lighter: var(--colors-neutral-600);
305
+ --form-field-background-darker: var(--colors-neutral-800);
306
+ --form-field-background-pressed: #4d5761;
307
+ --form-field-border-default: var(--colors-neutral-500);
308
+ --form-field-border-hovered: var(--colors-neutral-200);
309
+ --form-field-border-pressed: var(--colors-neutral-25);
310
+ --form-field-border-error: var(--border-error);
311
+ --form-option-background-hover: var(--colors-neutral-500);
312
+ --form-option-background-pressed: var(--colors-neutral-700);
313
+ --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
314
+ --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
315
+ --icon-default: var(--colors-base-white);
316
+ --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
317
+ --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
318
+ --form-datecell-today-background-default: var(--alpha-white-0);
319
+ --form-datecell-today-background-hovered: var(--colors-neutral-700);
320
+ --form-datecell-today-background-pressed: var(--colors-neutral-600);
321
+ --icon-default-500: var(--colors-neutral-200);
322
+ --form-datecell-today-background-focused: var(--alpha-white-0);
323
+ --form-datecell-background-disabled: #ffffff;
324
+ --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
325
+ --form-datecell-background-300: var(--colors-primary-sa-flag-300);
326
+ --form-datecell-background-200: var(--colors-primary-sa-flag-400);
327
+ --form-datecell-background-100: var(--colors-primary-sa-flag-300);
328
+ --controls-control-icon-hovered: var(--colors-primary-sa-flag-800);
329
+ --alpha-primary-10: #166a4519;
330
+ --icon-default-400: var(--colors-neutral-500);
331
+ --icon-primary: var(--colors-primary-sa-flag-600-primary);
332
+ --alpha-primary-20: #166a4533;
333
+ --icon-primary-light: var(--colors-primary-sa-flag-50);
334
+ --alpha-warning-10: #fec84b19;
335
+ --icon-primary-400: var(--colors-primary-sa-flag-400);
336
+ --alpha-warning-20: #fec84b33;
337
+ --alpha-error-10: #b4231819;
338
+ --alpha-error-20: #b4231833;
339
+ --alpha-info-10: #156fee19;
340
+ --alpha-info-20: #156fee33;
341
+ --alpha-success-10: #06945419;
342
+ --alpha-success-20: #06945433;
343
+ --icon-neutral: var(--colors-neutral-500);
344
+ --icon-neutral-light: var(--colors-neutral-950);
345
+ --icon-secondary: var(--colors-secondary-gold-600-primary);
346
+ --icon-secondary-light: var(--colors-secondary-gold-50);
347
+ --icon-tertiary: var(--colors-tertiary-lavendar-600);
348
+ --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
349
+ --icon-success: var(--colors-green-600);
350
+ --icon-success-light: var(--colors-green-50);
351
+ --icon-info: var(--colors-blue-700);
352
+ --icon-info-light: var(--colors-blue-50);
353
+ --icon-warning: var(--colors-yellow-700);
354
+ --icon-warning-light: var(--colors-yellow-50);
355
+ --icon-error: var(--colors-red-700);
356
+ --icon-error-light: var(--colors-red-50);
357
+ --icon-default-disabled: var(--colors-base-white);
358
+ --icon-default-oncolor-disabled: var(--colors-base-white);
359
+ --control-disabled: var(--colors-alpha-alpha-white-30);
360
+ --featuredicons-icon-oncolor: var(--colors-base-white);
361
+ --featuredicons-icon-success: var(--colors-green-600);
362
+ --featuredicons-icon-default: var(--colors-base-white);
363
+ --featuredicons-icon-error: var(--colors-red-700);
364
+ --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
365
+ --featuredicons-icon-default-500: var(--colors-neutral-200);
366
+ --featuredicons-background-error-light: var(--colors-red-50);
367
+ --featuredicons-background-info-light: var(--colors-blue-50);
368
+ --featuredicons-background-warning-light: var(--colors-yellow-50);
369
+ --featuredicons-background-success-light: var(--colors-green-50);
370
+ --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50);
371
+ --featuredicons-background-default-light: var(--colors-neutral-50);
372
+ --featuredicons-icon-default-400: var(--colors-neutral-500);
373
+ --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
374
+ --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
375
+ --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
376
+ --featuredicons-icon-neutral: var(--colors-neutral-500);
377
+ --featuredicons-icon-neutral-light: var(--colors-neutral-950);
378
+ --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
379
+ --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-600);
380
+ --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
381
+ --featuredicons-icon-success-light: var(--colors-green-50);
382
+ --featuredicons-icon-info: var(--colors-blue-700);
383
+ --featuredicons-icon-info-light: var(--colors-blue-50);
384
+ --featuredicons-icon-warning: var(--colors-yellow-700);
385
+ --featuredicons-bg-icon-warning-light: var(--alpha-warning-10);
386
+ --featuredicons-bg-icon-error-light: var(--alpha-error-10);
387
+ --featuredicons-bg-icon-brand-light: var(--alpha-primary-10);
388
+ --featuredicons-bg-icon-info-light: var(--alpha-info-10);
389
+ --featuredicons-bg-icon-success-light: var(--alpha-success-10);
390
+ --controls-control-icon-pressed: var(--colors-primary-sa-flag-800);
391
+ --controls-control-icon-disabled: var(--colors-neutral-400);
392
+ --notification-background-error-light: var(--colors-red-50);
393
+ --notification-background-info-light: var(--colors-blue-50);
394
+ --notification-background-warning-light: var(--colors-yellow-50);
395
+ --notification-background-success-light: var(--colors-green-50);
396
+ --notification-background-brand-light: var(--colors-primary-sa-flag-50);
397
+ --notification-background-default-light: var(--colors-neutral-50);
398
+ --notification-background-default-50: var(--alpha-white-10);
399
+ --notification-background-success-50: var(--alpha-success-20);
400
+ --notification-background-warning-50: var(--alpha-warning-20);
401
+ --notification-background-error-50: var(--alpha-error-20);
402
+ --notification-background-brand-50: var(--alpha-primary-20);
403
+ --notification-background-info-50: var(--alpha-info-20);
404
+ --notification-background-default-25: var(--alpha-white-0);
405
+ --notification-background-success-25: var(--alpha-primary-10);
406
+ --notification-background-warning-25: var(--alpha-warning-10);
407
+ --notification-background-error-25: var(--alpha-error-10);
408
+ --notification-background-brand-25: var(--alpha-primary-10);
409
+ --notification-background-info-25: var(--alpha-info-10);
410
+ --notification-text-success: var(--colors-green-300);
411
+ --notification-text-error: var(--colors-red-300);
412
+ --notification-text-info: var(--colors-blue-300);
413
+ --notification-text-warning: var(--colors-yellow-300);
414
+ --notification-text-brand: var(--colors-primary-sa-flag-300);
415
+ --controls-control-text-error: var(--colors-red-300);
416
+ }