@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.
- package/package.json +1 -1
- package/src/styles/bootstrap/_alert.scss +18 -18
- package/src/styles/bootstrap/_badges.scss +37 -37
- package/src/styles/bootstrap/_button-group.scss +8 -8
- package/src/styles/bootstrap/_buttons.scss +67 -67
- package/src/styles/bootstrap/_card.scss +13 -12
- package/src/styles/bootstrap/_dropdowns.scss +5 -5
- package/src/styles/bootstrap/_images.scss +1 -1
- package/src/styles/bootstrap/_list-group.scss +50 -12
- package/src/styles/bootstrap/_modals.scss +2 -2
- package/src/styles/bootstrap/_nav.scss +6 -6
- package/src/styles/bootstrap/_pagination.scss +2 -2
- package/src/styles/bootstrap/_popovers.scss +1 -1
- package/src/styles/bootstrap/_utilities.scss +38 -37
- package/src/styles/bootstrap/_variables.scss +89 -91
- package/src/styles/bootstrap/forms/_form-check.scss +20 -20
- package/src/styles/bootstrap/forms/_form-control.scss +15 -15
- package/src/styles/bootstrap/forms/_form-file.scss +6 -6
- package/src/styles/bootstrap/forms/_form-range.scss +12 -12
- package/src/styles/components/_application-header.scss +15 -15
- package/src/styles/components/_datatable.scss +11 -11
- package/src/styles/components/_drag_drop.scss +5 -5
- package/src/styles/components/_elevation.scss +4 -4
- package/src/styles/components/_layout.scss +1 -1
- package/src/styles/components/_links.scss +1 -1
- package/src/styles/components/_list-item.scss +14 -19
- package/src/styles/components/_markdown.scss +1 -1
- package/src/styles/components/_pills.scss +3 -3
- package/src/styles/components/_scrollbar.scss +3 -3
- package/src/styles/components/_search-bar.scss +6 -6
- package/src/styles/components/_skeleton.scss +3 -3
- package/src/styles/components/_switch.scss +12 -12
- package/src/styles/components/_widgets.scss +1 -1
- package/src/styles/mixins/_utilities.scss +94 -82
- package/src/styles/variables/_elevation.scss +8 -8
- package/src/styles/variables/_focus.scss +3 -3
- package/src/styles/variables/_system-tokens.scss +202 -180
- package/src/styles/variables/_utilities.scss +4 -4
- package/src/theme/_theme-element.scss +326 -302
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
$si-switch-size: max(1.25rem, 20px) !default;
|
|
6
6
|
$si-switch-inline-size: calc(2 * #{$si-switch-size});
|
|
7
7
|
$si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers-inline, 4));
|
|
8
|
-
$si-switch-background-off-color: variables.$si-sys-background-1 !default;
|
|
9
|
-
$si-switch-background-on-color: variables.$si-sys-background-accent !default;
|
|
8
|
+
$si-switch-background-off-color: variables.$si-sys-color-background-1 !default;
|
|
9
|
+
$si-switch-background-on-color: variables.$si-sys-color-background-accent !default;
|
|
10
10
|
$si-switch-slider-margin: calc($si-switch-size / 5);
|
|
11
|
-
$si-switch-slider-on-color: variables.$si-sys-text-on-accent !default;
|
|
11
|
+
$si-switch-slider-on-color: variables.$si-sys-color-text-on-accent !default;
|
|
12
12
|
$si-switch-transition-length: variables.element-transition-duration(0.4s) !default;
|
|
13
13
|
|
|
14
14
|
$si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin});
|
|
@@ -24,9 +24,9 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
|
|
|
24
24
|
margin-inline-start: calc(-1 * $si-switch-inline-spacing);
|
|
25
25
|
inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
|
|
26
26
|
block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important
|
|
27
|
-
background-color: variables.$si-sys-background-1;
|
|
27
|
+
background-color: variables.$si-sys-color-background-1;
|
|
28
28
|
transition: $si-switch-transition-length;
|
|
29
|
-
border: 1px solid variables.$si-sys-border-2;
|
|
29
|
+
border: 1px solid variables.$si-sys-color-border-2;
|
|
30
30
|
border-radius: #{$si-switch-size};
|
|
31
31
|
appearance: none;
|
|
32
32
|
|
|
@@ -37,7 +37,7 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
|
|
|
37
37
|
inline-size: $si-switch-knob-size !important; // stylelint-disable-line declaration-no-important
|
|
38
38
|
inset-inline-start: calc(#{$si-switch-slider-margin} - 1px);
|
|
39
39
|
inset-block-end: calc(#{$si-switch-slider-margin} - 1px);
|
|
40
|
-
background-color: variables.$si-sys-text-secondary;
|
|
40
|
+
background-color: variables.$si-sys-color-text-secondary;
|
|
41
41
|
transition: $si-switch-transition-length;
|
|
42
42
|
border-radius: 50%;
|
|
43
43
|
}
|
|
@@ -47,23 +47,23 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
&:hover {
|
|
50
|
-
background-color: variables.$si-sys-background-hover;
|
|
50
|
+
background-color: variables.$si-sys-color-background-hover;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
&:is(:checked, .checked) {
|
|
54
|
-
background-color: variables.$si-sys-background-accent;
|
|
54
|
+
background-color: variables.$si-sys-color-background-accent;
|
|
55
55
|
|
|
56
56
|
&:hover {
|
|
57
|
-
background-color: variables.$si-sys-background-accent-hover;
|
|
57
|
+
background-color: variables.$si-sys-color-background-accent-hover;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
&:active {
|
|
61
|
-
background-color: variables.$si-sys-background-accent-active;
|
|
61
|
+
background-color: variables.$si-sys-color-background-accent-active;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&:is(:disabled, .disabled) {
|
|
65
|
-
background-color: variables.$si-sys-background-accent;
|
|
66
|
-
border-color: variables.$si-sys-border-accent;
|
|
65
|
+
background-color: variables.$si-sys-color-background-accent;
|
|
66
|
+
border-color: variables.$si-sys-color-border-accent;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -5,255 +5,267 @@
|
|
|
5
5
|
|
|
6
6
|
@mixin background-utilities($prefix: 'background-') {
|
|
7
7
|
.#{$prefix}0 {
|
|
8
|
-
background-color: tokens.$si-sys-background-0 !important;
|
|
8
|
+
background-color: tokens.$si-sys-color-background-0 !important;
|
|
9
9
|
}
|
|
10
10
|
.#{$prefix}1 {
|
|
11
|
-
background-color: tokens.$si-sys-background-1 !important;
|
|
11
|
+
background-color: tokens.$si-sys-color-background-1 !important;
|
|
12
12
|
}
|
|
13
13
|
.#{$prefix}2 {
|
|
14
|
-
background-color: tokens.$si-sys-background-2 !important;
|
|
14
|
+
background-color: tokens.$si-sys-color-background-2 !important;
|
|
15
15
|
}
|
|
16
16
|
.#{$prefix}3 {
|
|
17
|
-
background-color: tokens.$si-sys-background-3 !important;
|
|
17
|
+
background-color: tokens.$si-sys-color-background-3 !important;
|
|
18
18
|
}
|
|
19
19
|
.#{$prefix}4 {
|
|
20
|
-
background-color: tokens.$si-sys-background-4 !important;
|
|
20
|
+
background-color: tokens.$si-sys-color-background-4 !important;
|
|
21
21
|
}
|
|
22
22
|
.#{$prefix}accent {
|
|
23
|
-
background-color: tokens.$si-sys-background-accent !important;
|
|
23
|
+
background-color: tokens.$si-sys-color-background-accent !important;
|
|
24
24
|
}
|
|
25
25
|
.#{$prefix}accent-active {
|
|
26
|
-
background-color: tokens.$si-sys-background-accent-active !important;
|
|
26
|
+
background-color: tokens.$si-sys-color-background-accent-active !important;
|
|
27
27
|
}
|
|
28
28
|
.#{$prefix}accent-hover {
|
|
29
|
-
background-color: tokens.$si-sys-background-accent-hover !important;
|
|
29
|
+
background-color: tokens.$si-sys-color-background-accent-hover !important;
|
|
30
30
|
}
|
|
31
31
|
.#{$prefix}accent-secondary {
|
|
32
|
-
background-color: tokens.$si-sys-background-accent-secondary !important;
|
|
32
|
+
background-color: tokens.$si-sys-color-background-accent-secondary !important;
|
|
33
33
|
}
|
|
34
34
|
.#{$prefix}accent-secondary-active {
|
|
35
|
-
background-color: tokens.$si-sys-background-accent-secondary-active !important;
|
|
35
|
+
background-color: tokens.$si-sys-color-background-accent-secondary-active !important;
|
|
36
36
|
}
|
|
37
37
|
.#{$prefix}accent-secondary-hover {
|
|
38
|
-
background-color: tokens.$si-sys-background-accent-secondary-hover !important;
|
|
38
|
+
background-color: tokens.$si-sys-color-background-accent-secondary-hover !important;
|
|
39
|
+
}
|
|
40
|
+
.#{$prefix}active {
|
|
41
|
+
background-color: tokens.$si-sys-color-background-active !important;
|
|
39
42
|
}
|
|
40
43
|
.#{$prefix}caution {
|
|
41
|
-
background-color: tokens.$si-sys-background-caution !important;
|
|
44
|
+
background-color: tokens.$si-sys-color-background-caution !important;
|
|
42
45
|
}
|
|
43
46
|
.#{$prefix}caution-active {
|
|
44
|
-
background-color: tokens.$si-sys-background-caution-active !important;
|
|
47
|
+
background-color: tokens.$si-sys-color-background-caution-active !important;
|
|
45
48
|
}
|
|
46
49
|
.#{$prefix}caution-hover {
|
|
47
|
-
background-color: tokens.$si-sys-background-caution-hover !important;
|
|
50
|
+
background-color: tokens.$si-sys-color-background-caution-hover !important;
|
|
48
51
|
}
|
|
49
52
|
.#{$prefix}caution-subtle {
|
|
50
|
-
background-color: tokens.$si-sys-background-caution-subtle !important;
|
|
53
|
+
background-color: tokens.$si-sys-color-background-caution-subtle !important;
|
|
51
54
|
}
|
|
52
55
|
.#{$prefix}critical {
|
|
53
|
-
background-color: tokens.$si-sys-background-critical !important;
|
|
56
|
+
background-color: tokens.$si-sys-color-background-critical !important;
|
|
54
57
|
}
|
|
55
58
|
.#{$prefix}critical-active {
|
|
56
|
-
background-color: tokens.$si-sys-background-critical-active !important;
|
|
59
|
+
background-color: tokens.$si-sys-color-background-critical-active !important;
|
|
57
60
|
}
|
|
58
61
|
.#{$prefix}critical-hover {
|
|
59
|
-
background-color: tokens.$si-sys-background-critical-hover !important;
|
|
62
|
+
background-color: tokens.$si-sys-color-background-critical-hover !important;
|
|
60
63
|
}
|
|
61
64
|
.#{$prefix}critical-subtle {
|
|
62
|
-
background-color: tokens.$si-sys-background-critical-subtle !important;
|
|
65
|
+
background-color: tokens.$si-sys-color-background-critical-subtle !important;
|
|
63
66
|
}
|
|
64
67
|
.#{$prefix}danger {
|
|
65
|
-
background-color: tokens.$si-sys-background-danger !important;
|
|
68
|
+
background-color: tokens.$si-sys-color-background-danger !important;
|
|
66
69
|
}
|
|
67
70
|
.#{$prefix}danger-active {
|
|
68
|
-
background-color: tokens.$si-sys-background-danger-active !important;
|
|
71
|
+
background-color: tokens.$si-sys-color-background-danger-active !important;
|
|
69
72
|
}
|
|
70
73
|
.#{$prefix}danger-hover {
|
|
71
|
-
background-color: tokens.$si-sys-background-danger-hover !important;
|
|
74
|
+
background-color: tokens.$si-sys-color-background-danger-hover !important;
|
|
72
75
|
}
|
|
73
76
|
.#{$prefix}danger-secondary {
|
|
74
|
-
background-color: tokens.$si-sys-background-danger-secondary !important;
|
|
77
|
+
background-color: tokens.$si-sys-color-background-danger-secondary !important;
|
|
75
78
|
}
|
|
76
79
|
.#{$prefix}danger-subtle {
|
|
77
|
-
background-color: tokens.$si-sys-background-danger-subtle !important;
|
|
80
|
+
background-color: tokens.$si-sys-color-background-danger-subtle !important;
|
|
78
81
|
}
|
|
79
82
|
.#{$prefix}hover {
|
|
80
|
-
background-color: tokens.$si-sys-background-hover !important;
|
|
83
|
+
background-color: tokens.$si-sys-color-background-hover !important;
|
|
81
84
|
}
|
|
82
85
|
.#{$prefix}information {
|
|
83
|
-
background-color: tokens.$si-sys-background-information !important;
|
|
86
|
+
background-color: tokens.$si-sys-color-background-information !important;
|
|
84
87
|
}
|
|
85
88
|
.#{$prefix}information-active {
|
|
86
|
-
background-color: tokens.$si-sys-background-information-active !important;
|
|
89
|
+
background-color: tokens.$si-sys-color-background-information-active !important;
|
|
87
90
|
}
|
|
88
91
|
.#{$prefix}information-hover {
|
|
89
|
-
background-color: tokens.$si-sys-background-information-hover !important;
|
|
92
|
+
background-color: tokens.$si-sys-color-background-information-hover !important;
|
|
90
93
|
}
|
|
91
94
|
.#{$prefix}information-subtle {
|
|
92
|
-
background-color: tokens.$si-sys-background-information-subtle !important;
|
|
95
|
+
background-color: tokens.$si-sys-color-background-information-subtle !important;
|
|
93
96
|
}
|
|
94
97
|
.#{$prefix}inverse {
|
|
95
|
-
background-color: tokens.$si-sys-background-inverse !important;
|
|
98
|
+
background-color: tokens.$si-sys-color-background-inverse !important;
|
|
96
99
|
}
|
|
97
100
|
.#{$prefix}neutral {
|
|
98
|
-
background-color: tokens.$si-sys-background-neutral !important;
|
|
101
|
+
background-color: tokens.$si-sys-color-background-neutral !important;
|
|
102
|
+
}
|
|
103
|
+
.#{$prefix}neutral-active {
|
|
104
|
+
background-color: tokens.$si-sys-color-background-neutral-active !important;
|
|
105
|
+
}
|
|
106
|
+
.#{$prefix}neutral-hover {
|
|
107
|
+
background-color: tokens.$si-sys-color-background-neutral-hover !important;
|
|
99
108
|
}
|
|
100
109
|
.#{$prefix}success {
|
|
101
|
-
background-color: tokens.$si-sys-background-success !important;
|
|
110
|
+
background-color: tokens.$si-sys-color-background-success !important;
|
|
102
111
|
}
|
|
103
112
|
.#{$prefix}success-active {
|
|
104
|
-
background-color: tokens.$si-sys-background-success-active !important;
|
|
113
|
+
background-color: tokens.$si-sys-color-background-success-active !important;
|
|
105
114
|
}
|
|
106
115
|
.#{$prefix}success-hover {
|
|
107
|
-
background-color: tokens.$si-sys-background-success-hover !important;
|
|
116
|
+
background-color: tokens.$si-sys-color-background-success-hover !important;
|
|
108
117
|
}
|
|
109
118
|
.#{$prefix}success-subtle {
|
|
110
|
-
background-color: tokens.$si-sys-background-success-subtle !important;
|
|
119
|
+
background-color: tokens.$si-sys-color-background-success-subtle !important;
|
|
111
120
|
}
|
|
112
121
|
.#{$prefix}warning {
|
|
113
|
-
background-color: tokens.$si-sys-background-warning !important;
|
|
122
|
+
background-color: tokens.$si-sys-color-background-warning !important;
|
|
114
123
|
}
|
|
115
124
|
.#{$prefix}warning-active {
|
|
116
|
-
background-color: tokens.$si-sys-background-warning-active !important;
|
|
125
|
+
background-color: tokens.$si-sys-color-background-warning-active !important;
|
|
117
126
|
}
|
|
118
127
|
.#{$prefix}warning-hover {
|
|
119
|
-
background-color: tokens.$si-sys-background-warning-hover !important;
|
|
128
|
+
background-color: tokens.$si-sys-color-background-warning-hover !important;
|
|
120
129
|
}
|
|
121
130
|
.#{$prefix}warning-secondary {
|
|
122
|
-
background-color: tokens.$si-sys-background-warning-secondary !important;
|
|
131
|
+
background-color: tokens.$si-sys-color-background-warning-secondary !important;
|
|
123
132
|
}
|
|
124
133
|
.#{$prefix}warning-subtle {
|
|
125
|
-
background-color: tokens.$si-sys-background-warning-subtle !important;
|
|
134
|
+
background-color: tokens.$si-sys-color-background-warning-subtle !important;
|
|
126
135
|
}
|
|
127
136
|
}
|
|
128
137
|
|
|
129
138
|
@mixin text-utilities($prefix: 'text-') {
|
|
130
139
|
.#{$prefix}accent {
|
|
131
|
-
color: tokens.$si-sys-text-accent !important;
|
|
140
|
+
color: tokens.$si-sys-color-text-accent !important;
|
|
132
141
|
}
|
|
133
142
|
.#{$prefix}accent-active {
|
|
134
|
-
color: tokens.$si-sys-text-accent-active !important;
|
|
143
|
+
color: tokens.$si-sys-color-text-accent-active !important;
|
|
135
144
|
}
|
|
136
145
|
.#{$prefix}accent-hover {
|
|
137
|
-
color: tokens.$si-sys-text-accent-hover !important;
|
|
146
|
+
color: tokens.$si-sys-color-text-accent-hover !important;
|
|
138
147
|
}
|
|
139
148
|
.#{$prefix}caution {
|
|
140
|
-
color: tokens.$si-sys-text-caution !important;
|
|
149
|
+
color: tokens.$si-sys-color-text-caution !important;
|
|
141
150
|
}
|
|
142
151
|
.#{$prefix}critical {
|
|
143
|
-
color: tokens.$si-sys-text-critical !important;
|
|
152
|
+
color: tokens.$si-sys-color-text-critical !important;
|
|
144
153
|
}
|
|
145
154
|
.#{$prefix}danger {
|
|
146
|
-
color: tokens.$si-sys-text-danger !important;
|
|
155
|
+
color: tokens.$si-sys-color-text-danger !important;
|
|
147
156
|
}
|
|
148
157
|
.#{$prefix}disabled {
|
|
149
|
-
color: tokens.$si-sys-text-disabled !important;
|
|
158
|
+
color: tokens.$si-sys-color-text-disabled !important;
|
|
150
159
|
}
|
|
151
160
|
.#{$prefix}information {
|
|
152
|
-
color: tokens.$si-sys-text-information !important;
|
|
161
|
+
color: tokens.$si-sys-color-text-information !important;
|
|
153
162
|
}
|
|
154
163
|
.#{$prefix}inverse {
|
|
155
|
-
color: tokens.$si-sys-text-inverse !important;
|
|
164
|
+
color: tokens.$si-sys-color-text-inverse !important;
|
|
156
165
|
}
|
|
157
166
|
.#{$prefix}on-accent {
|
|
158
|
-
color: tokens.$si-sys-text-on-accent !important;
|
|
167
|
+
color: tokens.$si-sys-color-text-on-accent !important;
|
|
159
168
|
}
|
|
160
169
|
.#{$prefix}on-accent-secondary {
|
|
161
|
-
color: tokens.$si-sys-text-on-accent-secondary !important;
|
|
170
|
+
color: tokens.$si-sys-color-text-on-accent-secondary !important;
|
|
162
171
|
}
|
|
163
172
|
.#{$prefix}on-accent-secondary-active {
|
|
164
|
-
color: tokens.$si-sys-text-on-accent-secondary-active !important;
|
|
173
|
+
color: tokens.$si-sys-color-text-on-accent-secondary-active !important;
|
|
165
174
|
}
|
|
166
175
|
.#{$prefix}on-accent-secondary-hover {
|
|
167
|
-
color: tokens.$si-sys-text-on-accent-secondary-hover !important;
|
|
176
|
+
color: tokens.$si-sys-color-text-on-accent-secondary-hover !important;
|
|
168
177
|
}
|
|
169
178
|
.#{$prefix}on-caution {
|
|
170
|
-
color: tokens.$si-sys-text-on-caution !important;
|
|
179
|
+
color: tokens.$si-sys-color-text-on-caution !important;
|
|
171
180
|
}
|
|
172
181
|
.#{$prefix}on-critical {
|
|
173
|
-
color: tokens.$si-sys-text-on-critical !important;
|
|
182
|
+
color: tokens.$si-sys-color-text-on-critical !important;
|
|
174
183
|
}
|
|
175
184
|
.#{$prefix}on-danger {
|
|
176
|
-
color: tokens.$si-sys-text-on-danger !important;
|
|
185
|
+
color: tokens.$si-sys-color-text-on-danger !important;
|
|
177
186
|
}
|
|
178
187
|
.#{$prefix}on-danger-secondary {
|
|
179
|
-
color: tokens.$si-sys-text-on-danger-secondary !important;
|
|
188
|
+
color: tokens.$si-sys-color-text-on-danger-secondary !important;
|
|
180
189
|
}
|
|
181
190
|
.#{$prefix}on-information {
|
|
182
|
-
color: tokens.$si-sys-text-on-information !important;
|
|
191
|
+
color: tokens.$si-sys-color-text-on-information !important;
|
|
192
|
+
}
|
|
193
|
+
.#{$prefix}on-neutral {
|
|
194
|
+
color: tokens.$si-sys-color-text-on-neutral !important;
|
|
183
195
|
}
|
|
184
196
|
.#{$prefix}on-success {
|
|
185
|
-
color: tokens.$si-sys-text-on-success !important;
|
|
197
|
+
color: tokens.$si-sys-color-text-on-success !important;
|
|
186
198
|
}
|
|
187
199
|
.#{$prefix}on-warning {
|
|
188
|
-
color: tokens.$si-sys-text-on-warning !important;
|
|
200
|
+
color: tokens.$si-sys-color-text-on-warning !important;
|
|
189
201
|
}
|
|
190
202
|
.#{$prefix}on-warning-secondary {
|
|
191
|
-
color: tokens.$si-sys-text-on-warning-secondary !important;
|
|
203
|
+
color: tokens.$si-sys-color-text-on-warning-secondary !important;
|
|
192
204
|
}
|
|
193
205
|
.#{$prefix}primary {
|
|
194
|
-
color: tokens.$si-sys-text-primary !important;
|
|
206
|
+
color: tokens.$si-sys-color-text-primary !important;
|
|
195
207
|
}
|
|
196
208
|
.#{$prefix}secondary {
|
|
197
|
-
color: tokens.$si-sys-text-secondary !important;
|
|
209
|
+
color: tokens.$si-sys-color-text-secondary !important;
|
|
198
210
|
}
|
|
199
211
|
.#{$prefix}success {
|
|
200
|
-
color: tokens.$si-sys-text-success !important;
|
|
212
|
+
color: tokens.$si-sys-color-text-success !important;
|
|
201
213
|
}
|
|
202
214
|
.#{$prefix}warning {
|
|
203
|
-
color: tokens.$si-sys-text-warning !important;
|
|
215
|
+
color: tokens.$si-sys-color-text-warning !important;
|
|
204
216
|
}
|
|
205
217
|
}
|
|
206
218
|
|
|
207
219
|
@mixin border-utilities($prefix: 'border-') {
|
|
208
220
|
.#{$prefix}1 {
|
|
209
|
-
border-color: tokens.$si-sys-border-1 !important;
|
|
221
|
+
border-color: tokens.$si-sys-color-border-1 !important;
|
|
210
222
|
}
|
|
211
223
|
.#{$prefix}2 {
|
|
212
|
-
border-color: tokens.$si-sys-border-2 !important;
|
|
224
|
+
border-color: tokens.$si-sys-color-border-2 !important;
|
|
213
225
|
}
|
|
214
226
|
.#{$prefix}3 {
|
|
215
|
-
border-color: tokens.$si-sys-border-3 !important;
|
|
227
|
+
border-color: tokens.$si-sys-color-border-3 !important;
|
|
216
228
|
}
|
|
217
229
|
.#{$prefix}4 {
|
|
218
|
-
border-color: tokens.$si-sys-border-4 !important;
|
|
230
|
+
border-color: tokens.$si-sys-color-border-4 !important;
|
|
219
231
|
}
|
|
220
232
|
.#{$prefix}accent {
|
|
221
|
-
border-color: tokens.$si-sys-border-accent !important;
|
|
233
|
+
border-color: tokens.$si-sys-color-border-accent !important;
|
|
222
234
|
}
|
|
223
235
|
.#{$prefix}accent-active {
|
|
224
|
-
border-color: tokens.$si-sys-border-accent-active !important;
|
|
236
|
+
border-color: tokens.$si-sys-color-border-accent-active !important;
|
|
225
237
|
}
|
|
226
238
|
.#{$prefix}accent-hover {
|
|
227
|
-
border-color: tokens.$si-sys-border-accent-hover !important;
|
|
239
|
+
border-color: tokens.$si-sys-color-border-accent-hover !important;
|
|
228
240
|
}
|
|
229
241
|
.#{$prefix}caution {
|
|
230
|
-
border-color: tokens.$si-sys-border-caution !important;
|
|
242
|
+
border-color: tokens.$si-sys-color-border-caution !important;
|
|
231
243
|
}
|
|
232
244
|
.#{$prefix}critical {
|
|
233
|
-
border-color: tokens.$si-sys-border-critical !important;
|
|
245
|
+
border-color: tokens.$si-sys-color-border-critical !important;
|
|
234
246
|
}
|
|
235
247
|
.#{$prefix}danger {
|
|
236
|
-
border-color: tokens.$si-sys-border-danger !important;
|
|
248
|
+
border-color: tokens.$si-sys-color-border-danger !important;
|
|
237
249
|
}
|
|
238
250
|
.#{$prefix}danger-secondary {
|
|
239
|
-
border-color: tokens.$si-sys-border-danger-secondary !important;
|
|
251
|
+
border-color: tokens.$si-sys-color-border-danger-secondary !important;
|
|
240
252
|
}
|
|
241
253
|
.#{$prefix}information {
|
|
242
|
-
border-color: tokens.$si-sys-border-information !important;
|
|
254
|
+
border-color: tokens.$si-sys-color-border-information !important;
|
|
243
255
|
}
|
|
244
256
|
.#{$prefix}inverse {
|
|
245
|
-
border-color: tokens.$si-sys-border-inverse !important;
|
|
257
|
+
border-color: tokens.$si-sys-color-border-inverse !important;
|
|
246
258
|
}
|
|
247
259
|
.#{$prefix}neutral {
|
|
248
|
-
border-color: tokens.$si-sys-border-neutral !important;
|
|
260
|
+
border-color: tokens.$si-sys-color-border-neutral !important;
|
|
249
261
|
}
|
|
250
262
|
.#{$prefix}success {
|
|
251
|
-
border-color: tokens.$si-sys-border-success !important;
|
|
263
|
+
border-color: tokens.$si-sys-color-border-success !important;
|
|
252
264
|
}
|
|
253
265
|
.#{$prefix}warning {
|
|
254
|
-
border-color: tokens.$si-sys-border-warning !important;
|
|
266
|
+
border-color: tokens.$si-sys-color-border-warning !important;
|
|
255
267
|
}
|
|
256
268
|
.#{$prefix}warning-secondary {
|
|
257
|
-
border-color: tokens.$si-sys-border-warning-secondary !important;
|
|
269
|
+
border-color: tokens.$si-sys-color-border-warning-secondary !important;
|
|
258
270
|
}
|
|
259
271
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
@use 'system-tokens';
|
|
2
2
|
|
|
3
|
-
// @deprecated Use $si-sys-effects-shadow-1 instead.
|
|
4
|
-
$element-elevation-1: system-tokens.$si-sys-effects-shadow-1;
|
|
5
|
-
// @deprecated Use $si-sys-effects-shadow-2 instead.
|
|
6
|
-
$element-elevation-2: system-tokens.$si-sys-effects-shadow-2;
|
|
7
|
-
// @deprecated Use $si-sys-effects-shadow-3 instead.
|
|
8
|
-
$element-elevation-3: system-tokens.$si-sys-effects-shadow-3;
|
|
9
|
-
// @deprecated Use $si-sys-effects-shadow-4 instead.
|
|
10
|
-
$element-elevation-4: system-tokens.$si-sys-effects-shadow-4;
|
|
3
|
+
// @deprecated Use $si-sys-color-effects-shadow-1 instead.
|
|
4
|
+
$element-elevation-1: system-tokens.$si-sys-color-effects-shadow-1;
|
|
5
|
+
// @deprecated Use $si-sys-color-effects-shadow-2 instead.
|
|
6
|
+
$element-elevation-2: system-tokens.$si-sys-color-effects-shadow-2;
|
|
7
|
+
// @deprecated Use $si-sys-color-effects-shadow-3 instead.
|
|
8
|
+
$element-elevation-3: system-tokens.$si-sys-color-effects-shadow-3;
|
|
9
|
+
// @deprecated Use $si-sys-color-effects-shadow-4 instead.
|
|
10
|
+
$element-elevation-4: system-tokens.$si-sys-color-effects-shadow-4;
|
|
11
11
|
|
|
12
12
|
// @deprecated There is no replacement.
|
|
13
13
|
$element-elevation-inset-1:
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
// Building focus< with outline
|
|
5
5
|
$focus-style-outline: semantic-tokens.$element-button-focus-width solid
|
|
6
|
-
system-tokens.$si-sys-effects-focus;
|
|
6
|
+
system-tokens.$si-sys-color-effects-focus;
|
|
7
7
|
$focus-style-outline-offset: semantic-tokens.$element-button-focus-overlay-width;
|
|
8
8
|
$focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-focus-width});
|
|
9
9
|
|
|
@@ -52,5 +52,5 @@ $focus-style-outline-inside-offset: calc(-1 * #{semantic-tokens.$element-button-
|
|
|
52
52
|
@return inset 0 0 0 semantic-tokens.$element-button-focus-width $focus-color;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
$si-focus-styling-box-shadow: make-focus(system-tokens.$si-sys-effects-focus);
|
|
56
|
-
$si-focus-styling-inside-box-shadow: make-focus-inside(system-tokens.$si-sys-effects-focus);
|
|
55
|
+
$si-focus-styling-box-shadow: make-focus(system-tokens.$si-sys-color-effects-focus);
|
|
56
|
+
$si-focus-styling-inside-box-shadow: make-focus-inside(system-tokens.$si-sys-color-effects-focus);
|