@siemens/element-theme 51.0.0-rc.9 → 51.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_alert.scss +18 -18
  3. package/src/styles/bootstrap/_badges.scss +37 -37
  4. package/src/styles/bootstrap/_button-group.scss +8 -8
  5. package/src/styles/bootstrap/_buttons.scss +67 -67
  6. package/src/styles/bootstrap/_card.scss +13 -12
  7. package/src/styles/bootstrap/_dropdowns.scss +5 -5
  8. package/src/styles/bootstrap/_images.scss +1 -1
  9. package/src/styles/bootstrap/_list-group.scss +50 -12
  10. package/src/styles/bootstrap/_modals.scss +2 -2
  11. package/src/styles/bootstrap/_nav.scss +6 -6
  12. package/src/styles/bootstrap/_pagination.scss +2 -2
  13. package/src/styles/bootstrap/_popovers.scss +1 -1
  14. package/src/styles/bootstrap/_utilities.scss +38 -37
  15. package/src/styles/bootstrap/_variables.scss +89 -91
  16. package/src/styles/bootstrap/forms/_form-check.scss +20 -20
  17. package/src/styles/bootstrap/forms/_form-control.scss +15 -15
  18. package/src/styles/bootstrap/forms/_form-file.scss +6 -6
  19. package/src/styles/bootstrap/forms/_form-range.scss +12 -12
  20. package/src/styles/components/_application-header.scss +15 -15
  21. package/src/styles/components/_datatable.scss +11 -11
  22. package/src/styles/components/_drag_drop.scss +5 -5
  23. package/src/styles/components/_elevation.scss +4 -4
  24. package/src/styles/components/_layout.scss +1 -1
  25. package/src/styles/components/_links.scss +1 -1
  26. package/src/styles/components/_list-item.scss +14 -19
  27. package/src/styles/components/_markdown.scss +1 -1
  28. package/src/styles/components/_pills.scss +3 -3
  29. package/src/styles/components/_scrollbar.scss +3 -3
  30. package/src/styles/components/_search-bar.scss +6 -6
  31. package/src/styles/components/_skeleton.scss +3 -3
  32. package/src/styles/components/_switch.scss +12 -12
  33. package/src/styles/components/_widgets.scss +1 -1
  34. package/src/styles/mixins/_utilities.scss +94 -82
  35. package/src/styles/variables/_elevation.scss +8 -8
  36. package/src/styles/variables/_focus.scss +3 -3
  37. package/src/styles/variables/_system-tokens.scss +202 -180
  38. package/src/styles/variables/_utilities.scss +4 -4
  39. package/src/theme/_theme-element.scss +326 -302
package/src/styles/variables/_system-tokens.scss CHANGED
@@ -1,180 +1,202 @@
1
- $si-sys-background-0: var(--si-sys-background-0);
2
- $si-sys-background-1: var(--si-sys-background-1);
3
- $si-sys-background-2: var(--si-sys-background-2);
4
- $si-sys-background-3: var(--si-sys-background-3);
5
- $si-sys-background-4: var(--si-sys-background-4);
6
- $si-sys-background-accent: var(--si-sys-background-accent);
7
- $si-sys-background-accent-active: var(--si-sys-background-accent-active);
8
- $si-sys-background-accent-hover: var(--si-sys-background-accent-hover);
9
- $si-sys-background-accent-secondary: var(--si-sys-background-accent-secondary);
10
- $si-sys-background-accent-secondary-active: var(--si-sys-background-accent-secondary-active);
11
- $si-sys-background-accent-secondary-hover: var(--si-sys-background-accent-secondary-hover);
12
- $si-sys-background-caution: var(--si-sys-background-caution);
13
- $si-sys-background-caution-active: var(--si-sys-background-caution-active);
14
- $si-sys-background-caution-hover: var(--si-sys-background-caution-hover);
15
- $si-sys-background-caution-subtle: var(--si-sys-background-caution-subtle);
16
- $si-sys-background-critical: var(--si-sys-background-critical);
17
- $si-sys-background-critical-active: var(--si-sys-background-critical-active);
18
- $si-sys-background-critical-hover: var(--si-sys-background-critical-hover);
19
- $si-sys-background-critical-subtle: var(--si-sys-background-critical-subtle);
20
- $si-sys-background-danger: var(--si-sys-background-danger);
21
- $si-sys-background-danger-active: var(--si-sys-background-danger-active);
22
- $si-sys-background-danger-hover: var(--si-sys-background-danger-hover);
23
- $si-sys-background-danger-secondary: var(--si-sys-background-danger-secondary);
24
- $si-sys-background-danger-subtle: var(--si-sys-background-danger-subtle);
25
- $si-sys-background-hover: var(--si-sys-background-hover);
26
- $si-sys-background-information: var(--si-sys-background-information);
27
- $si-sys-background-information-active: var(--si-sys-background-information-active);
28
- $si-sys-background-information-hover: var(--si-sys-background-information-hover);
29
- $si-sys-background-information-subtle: var(--si-sys-background-information-subtle);
30
- $si-sys-background-inverse: var(--si-sys-background-inverse);
31
- $si-sys-background-neutral: var(--si-sys-background-neutral);
32
- $si-sys-background-active: var(--si-sys-background-active);
33
- $si-sys-background-success: var(--si-sys-background-success);
34
- $si-sys-background-success-active: var(--si-sys-background-success-active);
35
- $si-sys-background-success-hover: var(--si-sys-background-success-hover);
36
- $si-sys-background-success-subtle: var(--si-sys-background-success-subtle);
37
- $si-sys-background-warning: var(--si-sys-background-warning);
38
- $si-sys-background-warning-active: var(--si-sys-background-warning-active);
39
- $si-sys-background-warning-hover: var(--si-sys-background-warning-hover);
40
- $si-sys-background-warning-secondary: var(--si-sys-background-warning-secondary);
41
- $si-sys-background-warning-subtle: var(--si-sys-background-warning-subtle);
42
- $si-sys-border-1: var(--si-sys-border-1);
43
- $si-sys-border-2: var(--si-sys-border-2);
44
- $si-sys-border-3: var(--si-sys-border-3);
45
- $si-sys-border-4: var(--si-sys-border-4);
46
- $si-sys-border-accent: var(--si-sys-border-accent);
47
- $si-sys-border-accent-active: var(--si-sys-border-accent-active);
48
- $si-sys-border-accent-hover: var(--si-sys-border-accent-hover);
49
- $si-sys-border-caution: var(--si-sys-border-caution);
50
- $si-sys-border-critical: var(--si-sys-border-critical);
51
- $si-sys-border-danger: var(--si-sys-border-danger);
52
- $si-sys-border-danger-secondary: var(--si-sys-border-danger-secondary);
53
- $si-sys-border-information: var(--si-sys-border-information);
54
- $si-sys-border-inverse: var(--si-sys-border-inverse);
55
- $si-sys-border-neutral: var(--si-sys-border-neutral);
56
- $si-sys-border-success: var(--si-sys-border-success);
57
- $si-sys-border-warning: var(--si-sys-border-warning);
58
- $si-sys-border-warning-secondary: var(--si-sys-border-warning-secondary);
59
- $si-sys-code-1: var(--si-sys-code-1);
60
- $si-sys-code-10: var(--si-sys-code-10);
61
- $si-sys-code-11: var(--si-sys-code-11);
62
- $si-sys-code-12: var(--si-sys-code-12);
63
- $si-sys-code-2: var(--si-sys-code-2);
64
- $si-sys-code-3: var(--si-sys-code-3);
65
- $si-sys-code-4: var(--si-sys-code-4);
66
- $si-sys-code-5: var(--si-sys-code-5);
67
- $si-sys-code-6: var(--si-sys-code-6);
68
- $si-sys-code-7: var(--si-sys-code-7);
69
- $si-sys-code-8: var(--si-sys-code-8);
70
- $si-sys-code-9: var(--si-sys-code-9);
71
- $si-sys-data-categorical-1: var(--si-sys-data-categorical-1);
72
- $si-sys-data-categorical-10: var(--si-sys-data-categorical-10);
73
- $si-sys-data-categorical-11: var(--si-sys-data-categorical-11);
74
- $si-sys-data-categorical-12: var(--si-sys-data-categorical-12);
75
- $si-sys-data-categorical-13: var(--si-sys-data-categorical-13);
76
- $si-sys-data-categorical-14: var(--si-sys-data-categorical-14);
77
- $si-sys-data-categorical-15: var(--si-sys-data-categorical-15);
78
- $si-sys-data-categorical-16: var(--si-sys-data-categorical-16);
79
- $si-sys-data-categorical-17: var(--si-sys-data-categorical-17);
80
- $si-sys-data-categorical-2: var(--si-sys-data-categorical-2);
81
- $si-sys-data-categorical-3: var(--si-sys-data-categorical-3);
82
- $si-sys-data-categorical-4: var(--si-sys-data-categorical-4);
83
- $si-sys-data-categorical-5: var(--si-sys-data-categorical-5);
84
- $si-sys-data-categorical-6: var(--si-sys-data-categorical-6);
85
- $si-sys-data-categorical-7: var(--si-sys-data-categorical-7);
86
- $si-sys-data-categorical-8: var(--si-sys-data-categorical-8);
87
- $si-sys-data-categorical-9: var(--si-sys-data-categorical-9);
88
- $si-sys-data-rating-average: var(--si-sys-data-rating-average);
89
- $si-sys-data-rating-bad: var(--si-sys-data-rating-bad);
90
- $si-sys-data-rating-excellent: var(--si-sys-data-rating-excellent);
91
- $si-sys-data-rating-good: var(--si-sys-data-rating-good);
92
- $si-sys-data-rating-poor: var(--si-sys-data-rating-poor);
93
- $si-sys-data-sequential-avocado-1: var(--si-sys-data-sequential-avocado-1);
94
- $si-sys-data-sequential-avocado-2: var(--si-sys-data-sequential-avocado-2);
95
- $si-sys-data-sequential-avocado-3: var(--si-sys-data-sequential-avocado-3);
96
- $si-sys-data-sequential-avocado-4: var(--si-sys-data-sequential-avocado-4);
97
- $si-sys-data-sequential-blue-1: var(--si-sys-data-sequential-blue-1);
98
- $si-sys-data-sequential-blue-2: var(--si-sys-data-sequential-blue-2);
99
- $si-sys-data-sequential-blue-3: var(--si-sys-data-sequential-blue-3);
100
- $si-sys-data-sequential-blue-4: var(--si-sys-data-sequential-blue-4);
101
- $si-sys-data-sequential-deep-blue-1: var(--si-sys-data-sequential-deep-blue-1);
102
- $si-sys-data-sequential-deep-blue-2: var(--si-sys-data-sequential-deep-blue-2);
103
- $si-sys-data-sequential-deep-blue-3: var(--si-sys-data-sequential-deep-blue-3);
104
- $si-sys-data-sequential-deep-blue-4: var(--si-sys-data-sequential-deep-blue-4);
105
- $si-sys-data-sequential-green-1: var(--si-sys-data-sequential-green-1);
106
- $si-sys-data-sequential-green-2: var(--si-sys-data-sequential-green-2);
107
- $si-sys-data-sequential-green-3: var(--si-sys-data-sequential-green-3);
108
- $si-sys-data-sequential-green-4: var(--si-sys-data-sequential-green-4);
109
- $si-sys-data-sequential-interactive-coral-1: var(--si-sys-data-sequential-interactive-coral-1);
110
- $si-sys-data-sequential-interactive-coral-2: var(--si-sys-data-sequential-interactive-coral-2);
111
- $si-sys-data-sequential-interactive-coral-3: var(--si-sys-data-sequential-interactive-coral-3);
112
- $si-sys-data-sequential-interactive-coral-4: var(--si-sys-data-sequential-interactive-coral-4);
113
- $si-sys-data-sequential-orange-1: var(--si-sys-data-sequential-orange-1);
114
- $si-sys-data-sequential-orange-2: var(--si-sys-data-sequential-orange-2);
115
- $si-sys-data-sequential-orange-3: var(--si-sys-data-sequential-orange-3);
116
- $si-sys-data-sequential-orange-4: var(--si-sys-data-sequential-orange-4);
117
- $si-sys-data-sequential-orchid-1: var(--si-sys-data-sequential-orchid-1);
118
- $si-sys-data-sequential-orchid-2: var(--si-sys-data-sequential-orchid-2);
119
- $si-sys-data-sequential-orchid-3: var(--si-sys-data-sequential-orchid-3);
120
- $si-sys-data-sequential-orchid-4: var(--si-sys-data-sequential-orchid-4);
121
- $si-sys-data-sequential-plum-1: var(--si-sys-data-sequential-plum-1);
122
- $si-sys-data-sequential-plum-2: var(--si-sys-data-sequential-plum-2);
123
- $si-sys-data-sequential-plum-3: var(--si-sys-data-sequential-plum-3);
124
- $si-sys-data-sequential-plum-4: var(--si-sys-data-sequential-plum-4);
125
- $si-sys-data-sequential-purple-1: var(--si-sys-data-sequential-purple-1);
126
- $si-sys-data-sequential-purple-2: var(--si-sys-data-sequential-purple-2);
127
- $si-sys-data-sequential-purple-3: var(--si-sys-data-sequential-purple-3);
128
- $si-sys-data-sequential-purple-4: var(--si-sys-data-sequential-purple-4);
129
- $si-sys-data-sequential-red-1: var(--si-sys-data-sequential-red-1);
130
- $si-sys-data-sequential-red-2: var(--si-sys-data-sequential-red-2);
131
- $si-sys-data-sequential-red-3: var(--si-sys-data-sequential-red-3);
132
- $si-sys-data-sequential-red-4: var(--si-sys-data-sequential-red-4);
133
- $si-sys-data-sequential-royal-blue-1: var(--si-sys-data-sequential-royal-blue-1);
134
- $si-sys-data-sequential-royal-blue-2: var(--si-sys-data-sequential-royal-blue-2);
135
- $si-sys-data-sequential-royal-blue-3: var(--si-sys-data-sequential-royal-blue-3);
136
- $si-sys-data-sequential-royal-blue-4: var(--si-sys-data-sequential-royal-blue-4);
137
- $si-sys-data-sequential-sand-1: var(--si-sys-data-sequential-sand-1);
138
- $si-sys-data-sequential-sand-2: var(--si-sys-data-sequential-sand-2);
139
- $si-sys-data-sequential-sand-3: var(--si-sys-data-sequential-sand-3);
140
- $si-sys-data-sequential-sand-4: var(--si-sys-data-sequential-sand-4);
141
- $si-sys-data-sequential-turquoise-1: var(--si-sys-data-sequential-turquoise-1);
142
- $si-sys-data-sequential-turquoise-2: var(--si-sys-data-sequential-turquoise-2);
143
- $si-sys-data-sequential-turquoise-3: var(--si-sys-data-sequential-turquoise-3);
144
- $si-sys-data-sequential-turquoise-4: var(--si-sys-data-sequential-turquoise-4);
145
- $si-sys-data-sequential-yellow-1: var(--si-sys-data-sequential-yellow-1);
146
- $si-sys-data-sequential-yellow-2: var(--si-sys-data-sequential-yellow-2);
147
- $si-sys-data-sequential-yellow-3: var(--si-sys-data-sequential-yellow-3);
148
- $si-sys-data-sequential-yellow-4: var(--si-sys-data-sequential-yellow-4);
149
- $si-sys-effects-backdrop: var(--si-sys-effects-backdrop);
150
- $si-sys-effects-focus: var(--si-sys-effects-focus);
151
- $si-sys-effects-logo: var(--si-sys-effects-logo);
152
- $si-sys-effects-shadow-1: var(--si-sys-effects-shadow-1);
153
- $si-sys-effects-shadow-2: var(--si-sys-effects-shadow-2);
154
- $si-sys-effects-shadow-3: var(--si-sys-effects-shadow-3);
155
- $si-sys-effects-shadow-4: var(--si-sys-effects-shadow-4);
156
- $si-sys-text-accent: var(--si-sys-text-accent);
157
- $si-sys-text-accent-active: var(--si-sys-text-accent-active);
158
- $si-sys-text-accent-hover: var(--si-sys-text-accent-hover);
159
- $si-sys-text-caution: var(--si-sys-text-caution);
160
- $si-sys-text-critical: var(--si-sys-text-critical);
161
- $si-sys-text-danger: var(--si-sys-text-danger);
162
- $si-sys-text-disabled: var(--si-sys-text-disabled);
163
- $si-sys-text-information: var(--si-sys-text-information);
164
- $si-sys-text-inverse: var(--si-sys-text-inverse);
165
- $si-sys-text-on-accent: var(--si-sys-text-on-accent);
166
- $si-sys-text-on-accent-secondary: var(--si-sys-text-on-accent-secondary);
167
- $si-sys-text-on-accent-secondary-active: var(--si-sys-text-on-accent-secondary-active);
168
- $si-sys-text-on-accent-secondary-hover: var(--si-sys-text-on-accent-secondary-hover);
169
- $si-sys-text-on-caution: var(--si-sys-text-on-caution);
170
- $si-sys-text-on-critical: var(--si-sys-text-on-critical);
171
- $si-sys-text-on-danger: var(--si-sys-text-on-danger);
172
- $si-sys-text-on-danger-secondary: var(--si-sys-text-on-danger-secondary);
173
- $si-sys-text-on-information: var(--si-sys-text-on-information);
174
- $si-sys-text-on-success: var(--si-sys-text-on-success);
175
- $si-sys-text-on-warning: var(--si-sys-text-on-warning);
176
- $si-sys-text-on-warning-secondary: var(--si-sys-text-on-warning-secondary);
177
- $si-sys-text-primary: var(--si-sys-text-primary);
178
- $si-sys-text-secondary: var(--si-sys-text-secondary);
179
- $si-sys-text-success: var(--si-sys-text-success);
180
- $si-sys-text-warning: var(--si-sys-text-warning);
1
+ /**
2
+ * Copyright (c) Siemens 2026
3
+ * Siemens Design Language Tokens
4
+ * Version 0.12.0
5
+ * Do not edit directly, this file was auto-generated.
6
+ */
7
+
8
+ $si-sys-color-background-0: var(--si-sys-color-background-0);
9
+ $si-sys-color-background-1: var(--si-sys-color-background-1);
10
+ $si-sys-color-background-2: var(--si-sys-color-background-2);
11
+ $si-sys-color-background-3: var(--si-sys-color-background-3);
12
+ $si-sys-color-background-4: var(--si-sys-color-background-4);
13
+ $si-sys-color-background-accent: var(--si-sys-color-background-accent);
14
+ $si-sys-color-background-accent-active: var(--si-sys-color-background-accent-active);
15
+ $si-sys-color-background-accent-hover: var(--si-sys-color-background-accent-hover);
16
+ $si-sys-color-background-accent-secondary: var(--si-sys-color-background-accent-secondary);
17
+ $si-sys-color-background-accent-secondary-active: var(
18
+ --si-sys-color-background-accent-secondary-active
19
+ );
20
+ $si-sys-color-background-accent-secondary-hover: var(
21
+ --si-sys-color-background-accent-secondary-hover
22
+ );
23
+ $si-sys-color-background-active: var(--si-sys-color-background-active);
24
+ $si-sys-color-background-caution: var(--si-sys-color-background-caution);
25
+ $si-sys-color-background-caution-active: var(--si-sys-color-background-caution-active);
26
+ $si-sys-color-background-caution-hover: var(--si-sys-color-background-caution-hover);
27
+ $si-sys-color-background-caution-subtle: var(--si-sys-color-background-caution-subtle);
28
+ $si-sys-color-background-critical: var(--si-sys-color-background-critical);
29
+ $si-sys-color-background-critical-active: var(--si-sys-color-background-critical-active);
30
+ $si-sys-color-background-critical-hover: var(--si-sys-color-background-critical-hover);
31
+ $si-sys-color-background-critical-subtle: var(--si-sys-color-background-critical-subtle);
32
+ $si-sys-color-background-danger: var(--si-sys-color-background-danger);
33
+ $si-sys-color-background-danger-active: var(--si-sys-color-background-danger-active);
34
+ $si-sys-color-background-danger-hover: var(--si-sys-color-background-danger-hover);
35
+ $si-sys-color-background-danger-secondary: var(--si-sys-color-background-danger-secondary);
36
+ $si-sys-color-background-danger-subtle: var(--si-sys-color-background-danger-subtle);
37
+ $si-sys-color-background-hover: var(--si-sys-color-background-hover);
38
+ $si-sys-color-background-information: var(--si-sys-color-background-information);
39
+ $si-sys-color-background-information-active: var(--si-sys-color-background-information-active);
40
+ $si-sys-color-background-information-hover: var(--si-sys-color-background-information-hover);
41
+ $si-sys-color-background-information-subtle: var(--si-sys-color-background-information-subtle);
42
+ $si-sys-color-background-inverse: var(--si-sys-color-background-inverse);
43
+ $si-sys-color-background-neutral: var(--si-sys-color-background-neutral);
44
+ $si-sys-color-background-neutral-active: var(--si-sys-color-background-neutral-active);
45
+ $si-sys-color-background-neutral-hover: var(--si-sys-color-background-neutral-hover);
46
+ $si-sys-color-background-success: var(--si-sys-color-background-success);
47
+ $si-sys-color-background-success-active: var(--si-sys-color-background-success-active);
48
+ $si-sys-color-background-success-hover: var(--si-sys-color-background-success-hover);
49
+ $si-sys-color-background-success-subtle: var(--si-sys-color-background-success-subtle);
50
+ $si-sys-color-background-warning: var(--si-sys-color-background-warning);
51
+ $si-sys-color-background-warning-active: var(--si-sys-color-background-warning-active);
52
+ $si-sys-color-background-warning-hover: var(--si-sys-color-background-warning-hover);
53
+ $si-sys-color-background-warning-secondary: var(--si-sys-color-background-warning-secondary);
54
+ $si-sys-color-background-warning-subtle: var(--si-sys-color-background-warning-subtle);
55
+ $si-sys-color-border-1: var(--si-sys-color-border-1);
56
+ $si-sys-color-border-2: var(--si-sys-color-border-2);
57
+ $si-sys-color-border-3: var(--si-sys-color-border-3);
58
+ $si-sys-color-border-4: var(--si-sys-color-border-4);
59
+ $si-sys-color-border-accent: var(--si-sys-color-border-accent);
60
+ $si-sys-color-border-accent-active: var(--si-sys-color-border-accent-active);
61
+ $si-sys-color-border-accent-hover: var(--si-sys-color-border-accent-hover);
62
+ $si-sys-color-border-caution: var(--si-sys-color-border-caution);
63
+ $si-sys-color-border-critical: var(--si-sys-color-border-critical);
64
+ $si-sys-color-border-danger: var(--si-sys-color-border-danger);
65
+ $si-sys-color-border-danger-secondary: var(--si-sys-color-border-danger-secondary);
66
+ $si-sys-color-border-information: var(--si-sys-color-border-information);
67
+ $si-sys-color-border-inverse: var(--si-sys-color-border-inverse);
68
+ $si-sys-color-border-neutral: var(--si-sys-color-border-neutral);
69
+ $si-sys-color-border-success: var(--si-sys-color-border-success);
70
+ $si-sys-color-border-warning: var(--si-sys-color-border-warning);
71
+ $si-sys-color-border-warning-secondary: var(--si-sys-color-border-warning-secondary);
72
+ $si-sys-color-code-1: var(--si-sys-color-code-1);
73
+ $si-sys-color-code-2: var(--si-sys-color-code-2);
74
+ $si-sys-color-code-3: var(--si-sys-color-code-3);
75
+ $si-sys-color-code-4: var(--si-sys-color-code-4);
76
+ $si-sys-color-code-5: var(--si-sys-color-code-5);
77
+ $si-sys-color-code-6: var(--si-sys-color-code-6);
78
+ $si-sys-color-code-7: var(--si-sys-color-code-7);
79
+ $si-sys-color-code-8: var(--si-sys-color-code-8);
80
+ $si-sys-color-code-9: var(--si-sys-color-code-9);
81
+ $si-sys-color-code-10: var(--si-sys-color-code-10);
82
+ $si-sys-color-code-11: var(--si-sys-color-code-11);
83
+ $si-sys-color-code-12: var(--si-sys-color-code-12);
84
+ $si-sys-color-data-categorical-1: var(--si-sys-color-data-categorical-1);
85
+ $si-sys-color-data-categorical-2: var(--si-sys-color-data-categorical-2);
86
+ $si-sys-color-data-categorical-3: var(--si-sys-color-data-categorical-3);
87
+ $si-sys-color-data-categorical-4: var(--si-sys-color-data-categorical-4);
88
+ $si-sys-color-data-categorical-5: var(--si-sys-color-data-categorical-5);
89
+ $si-sys-color-data-categorical-6: var(--si-sys-color-data-categorical-6);
90
+ $si-sys-color-data-categorical-7: var(--si-sys-color-data-categorical-7);
91
+ $si-sys-color-data-categorical-8: var(--si-sys-color-data-categorical-8);
92
+ $si-sys-color-data-categorical-9: var(--si-sys-color-data-categorical-9);
93
+ $si-sys-color-data-categorical-10: var(--si-sys-color-data-categorical-10);
94
+ $si-sys-color-data-categorical-11: var(--si-sys-color-data-categorical-11);
95
+ $si-sys-color-data-categorical-12: var(--si-sys-color-data-categorical-12);
96
+ $si-sys-color-data-categorical-13: var(--si-sys-color-data-categorical-13);
97
+ $si-sys-color-data-categorical-14: var(--si-sys-color-data-categorical-14);
98
+ $si-sys-color-data-categorical-15: var(--si-sys-color-data-categorical-15);
99
+ $si-sys-color-data-categorical-16: var(--si-sys-color-data-categorical-16);
100
+ $si-sys-color-data-categorical-17: var(--si-sys-color-data-categorical-17);
101
+ $si-sys-color-data-rating-average: var(--si-sys-color-data-rating-average);
102
+ $si-sys-color-data-rating-bad: var(--si-sys-color-data-rating-bad);
103
+ $si-sys-color-data-rating-excellent: var(--si-sys-color-data-rating-excellent);
104
+ $si-sys-color-data-rating-good: var(--si-sys-color-data-rating-good);
105
+ $si-sys-color-data-rating-poor: var(--si-sys-color-data-rating-poor);
106
+ $si-sys-color-data-sequential-avocado-1: var(--si-sys-color-data-sequential-avocado-1);
107
+ $si-sys-color-data-sequential-avocado-2: var(--si-sys-color-data-sequential-avocado-2);
108
+ $si-sys-color-data-sequential-avocado-3: var(--si-sys-color-data-sequential-avocado-3);
109
+ $si-sys-color-data-sequential-avocado-4: var(--si-sys-color-data-sequential-avocado-4);
110
+ $si-sys-color-data-sequential-blue-1: var(--si-sys-color-data-sequential-blue-1);
111
+ $si-sys-color-data-sequential-blue-2: var(--si-sys-color-data-sequential-blue-2);
112
+ $si-sys-color-data-sequential-blue-3: var(--si-sys-color-data-sequential-blue-3);
113
+ $si-sys-color-data-sequential-blue-4: var(--si-sys-color-data-sequential-blue-4);
114
+ $si-sys-color-data-sequential-deep-blue-1: var(--si-sys-color-data-sequential-deep-blue-1);
115
+ $si-sys-color-data-sequential-deep-blue-2: var(--si-sys-color-data-sequential-deep-blue-2);
116
+ $si-sys-color-data-sequential-deep-blue-3: var(--si-sys-color-data-sequential-deep-blue-3);
117
+ $si-sys-color-data-sequential-deep-blue-4: var(--si-sys-color-data-sequential-deep-blue-4);
118
+ $si-sys-color-data-sequential-green-1: var(--si-sys-color-data-sequential-green-1);
119
+ $si-sys-color-data-sequential-green-2: var(--si-sys-color-data-sequential-green-2);
120
+ $si-sys-color-data-sequential-green-3: var(--si-sys-color-data-sequential-green-3);
121
+ $si-sys-color-data-sequential-green-4: var(--si-sys-color-data-sequential-green-4);
122
+ $si-sys-color-data-sequential-interactive-coral-1: var(
123
+ --si-sys-color-data-sequential-interactive-coral-1
124
+ );
125
+ $si-sys-color-data-sequential-interactive-coral-2: var(
126
+ --si-sys-color-data-sequential-interactive-coral-2
127
+ );
128
+ $si-sys-color-data-sequential-interactive-coral-3: var(
129
+ --si-sys-color-data-sequential-interactive-coral-3
130
+ );
131
+ $si-sys-color-data-sequential-interactive-coral-4: var(
132
+ --si-sys-color-data-sequential-interactive-coral-4
133
+ );
134
+ $si-sys-color-data-sequential-orange-1: var(--si-sys-color-data-sequential-orange-1);
135
+ $si-sys-color-data-sequential-orange-2: var(--si-sys-color-data-sequential-orange-2);
136
+ $si-sys-color-data-sequential-orange-3: var(--si-sys-color-data-sequential-orange-3);
137
+ $si-sys-color-data-sequential-orange-4: var(--si-sys-color-data-sequential-orange-4);
138
+ $si-sys-color-data-sequential-orchid-1: var(--si-sys-color-data-sequential-orchid-1);
139
+ $si-sys-color-data-sequential-orchid-2: var(--si-sys-color-data-sequential-orchid-2);
140
+ $si-sys-color-data-sequential-orchid-3: var(--si-sys-color-data-sequential-orchid-3);
141
+ $si-sys-color-data-sequential-orchid-4: var(--si-sys-color-data-sequential-orchid-4);
142
+ $si-sys-color-data-sequential-plum-1: var(--si-sys-color-data-sequential-plum-1);
143
+ $si-sys-color-data-sequential-plum-2: var(--si-sys-color-data-sequential-plum-2);
144
+ $si-sys-color-data-sequential-plum-3: var(--si-sys-color-data-sequential-plum-3);
145
+ $si-sys-color-data-sequential-plum-4: var(--si-sys-color-data-sequential-plum-4);
146
+ $si-sys-color-data-sequential-purple-1: var(--si-sys-color-data-sequential-purple-1);
147
+ $si-sys-color-data-sequential-purple-2: var(--si-sys-color-data-sequential-purple-2);
148
+ $si-sys-color-data-sequential-purple-3: var(--si-sys-color-data-sequential-purple-3);
149
+ $si-sys-color-data-sequential-purple-4: var(--si-sys-color-data-sequential-purple-4);
150
+ $si-sys-color-data-sequential-red-1: var(--si-sys-color-data-sequential-red-1);
151
+ $si-sys-color-data-sequential-red-2: var(--si-sys-color-data-sequential-red-2);
152
+ $si-sys-color-data-sequential-red-3: var(--si-sys-color-data-sequential-red-3);
153
+ $si-sys-color-data-sequential-red-4: var(--si-sys-color-data-sequential-red-4);
154
+ $si-sys-color-data-sequential-royal-blue-1: var(--si-sys-color-data-sequential-royal-blue-1);
155
+ $si-sys-color-data-sequential-royal-blue-2: var(--si-sys-color-data-sequential-royal-blue-2);
156
+ $si-sys-color-data-sequential-royal-blue-3: var(--si-sys-color-data-sequential-royal-blue-3);
157
+ $si-sys-color-data-sequential-royal-blue-4: var(--si-sys-color-data-sequential-royal-blue-4);
158
+ $si-sys-color-data-sequential-sand-1: var(--si-sys-color-data-sequential-sand-1);
159
+ $si-sys-color-data-sequential-sand-2: var(--si-sys-color-data-sequential-sand-2);
160
+ $si-sys-color-data-sequential-sand-3: var(--si-sys-color-data-sequential-sand-3);
161
+ $si-sys-color-data-sequential-sand-4: var(--si-sys-color-data-sequential-sand-4);
162
+ $si-sys-color-data-sequential-turquoise-1: var(--si-sys-color-data-sequential-turquoise-1);
163
+ $si-sys-color-data-sequential-turquoise-2: var(--si-sys-color-data-sequential-turquoise-2);
164
+ $si-sys-color-data-sequential-turquoise-3: var(--si-sys-color-data-sequential-turquoise-3);
165
+ $si-sys-color-data-sequential-turquoise-4: var(--si-sys-color-data-sequential-turquoise-4);
166
+ $si-sys-color-data-sequential-yellow-1: var(--si-sys-color-data-sequential-yellow-1);
167
+ $si-sys-color-data-sequential-yellow-2: var(--si-sys-color-data-sequential-yellow-2);
168
+ $si-sys-color-data-sequential-yellow-3: var(--si-sys-color-data-sequential-yellow-3);
169
+ $si-sys-color-data-sequential-yellow-4: var(--si-sys-color-data-sequential-yellow-4);
170
+ $si-sys-color-effects-backdrop: var(--si-sys-color-effects-backdrop);
171
+ $si-sys-color-effects-focus: var(--si-sys-color-effects-focus);
172
+ $si-sys-color-effects-logo: var(--si-sys-color-effects-logo);
173
+ $si-sys-color-effects-shadow-1: var(--si-sys-color-effects-shadow-1);
174
+ $si-sys-color-effects-shadow-2: var(--si-sys-color-effects-shadow-2);
175
+ $si-sys-color-effects-shadow-3: var(--si-sys-color-effects-shadow-3);
176
+ $si-sys-color-effects-shadow-4: var(--si-sys-color-effects-shadow-4);
177
+ $si-sys-color-text-accent: var(--si-sys-color-text-accent);
178
+ $si-sys-color-text-accent-active: var(--si-sys-color-text-accent-active);
179
+ $si-sys-color-text-accent-hover: var(--si-sys-color-text-accent-hover);
180
+ $si-sys-color-text-caution: var(--si-sys-color-text-caution);
181
+ $si-sys-color-text-critical: var(--si-sys-color-text-critical);
182
+ $si-sys-color-text-danger: var(--si-sys-color-text-danger);
183
+ $si-sys-color-text-disabled: var(--si-sys-color-text-disabled);
184
+ $si-sys-color-text-information: var(--si-sys-color-text-information);
185
+ $si-sys-color-text-inverse: var(--si-sys-color-text-inverse);
186
+ $si-sys-color-text-on-accent: var(--si-sys-color-text-on-accent);
187
+ $si-sys-color-text-on-accent-secondary: var(--si-sys-color-text-on-accent-secondary);
188
+ $si-sys-color-text-on-accent-secondary-active: var(--si-sys-color-text-on-accent-secondary-active);
189
+ $si-sys-color-text-on-accent-secondary-hover: var(--si-sys-color-text-on-accent-secondary-hover);
190
+ $si-sys-color-text-on-caution: var(--si-sys-color-text-on-caution);
191
+ $si-sys-color-text-on-critical: var(--si-sys-color-text-on-critical);
192
+ $si-sys-color-text-on-danger: var(--si-sys-color-text-on-danger);
193
+ $si-sys-color-text-on-danger-secondary: var(--si-sys-color-text-on-danger-secondary);
194
+ $si-sys-color-text-on-information: var(--si-sys-color-text-on-information);
195
+ $si-sys-color-text-on-neutral: var(--si-sys-color-text-on-neutral);
196
+ $si-sys-color-text-on-success: var(--si-sys-color-text-on-success);
197
+ $si-sys-color-text-on-warning: var(--si-sys-color-text-on-warning);
198
+ $si-sys-color-text-on-warning-secondary: var(--si-sys-color-text-on-warning-secondary);
199
+ $si-sys-color-text-primary: var(--si-sys-color-text-primary);
200
+ $si-sys-color-text-secondary: var(--si-sys-color-text-secondary);
201
+ $si-sys-color-text-success: var(--si-sys-color-text-success);
202
+ $si-sys-color-text-warning: var(--si-sys-color-text-warning);
package/src/styles/variables/_utilities.scss CHANGED
@@ -64,10 +64,10 @@ $utilities: (
64
64
  sm: variables.$box-shadow-sm,
65
65
  // Deprecated: Use shadow-3 instead.
66
66
  lg: variables.$box-shadow-lg,
67
- 1: system-tokens.$si-sys-effects-shadow-1,
68
- 2: system-tokens.$si-sys-effects-shadow-2,
69
- 3: system-tokens.$si-sys-effects-shadow-3,
70
- 4: system-tokens.$si-sys-effects-shadow-4,
67
+ 1: system-tokens.$si-sys-color-effects-shadow-1,
68
+ 2: system-tokens.$si-sys-color-effects-shadow-2,
69
+ 3: system-tokens.$si-sys-color-effects-shadow-3,
70
+ 4: system-tokens.$si-sys-color-effects-shadow-4,
71
71
  none: none
72
72
  )
73
73
  ),