@siemens/element-theme 51.0.0 → 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 +12 -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 -38
- package/src/styles/bootstrap/_variables.scss +84 -84
- package/src/styles/bootstrap/forms/_form-check.scss +20 -20
- package/src/styles/bootstrap/forms/_form-control.scss +14 -14
- 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 +10 -10
- 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 +86 -86
- package/src/styles/variables/_elevation.scss +8 -8
- package/src/styles/variables/_focus.scss +3 -3
- package/src/styles/variables/_system-tokens.scss +196 -184
- package/src/styles/variables/_utilities.scss +4 -4
- package/src/theme/_theme-element.scss +326 -326
|
@@ -17,9 +17,9 @@ $nav-tabs-min-width: 100px;
|
|
|
17
17
|
|
|
18
18
|
.nav-link {
|
|
19
19
|
&:hover {
|
|
20
|
-
color: system-tokens.$si-sys-text-on-accent-secondary-hover;
|
|
21
|
-
background: system-tokens.$si-sys-background-accent-secondary-hover;
|
|
22
|
-
border-color: system-tokens.$si-sys-border-accent-hover;
|
|
20
|
+
color: system-tokens.$si-sys-color-text-on-accent-secondary-hover;
|
|
21
|
+
background: system-tokens.$si-sys-color-background-accent-secondary-hover;
|
|
22
|
+
border-color: system-tokens.$si-sys-color-border-accent-hover;
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
}
|
|
@@ -58,12 +58,12 @@ $nav-tabs-min-width: 100px;
|
|
|
58
58
|
inset-inline: 0;
|
|
59
59
|
inset-block-end: 0;
|
|
60
60
|
block-size: 1px;
|
|
61
|
-
background: system-tokens.$si-sys-border-4;
|
|
61
|
+
background: system-tokens.$si-sys-color-border-4;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&:focus-visible::before {
|
|
65
65
|
// because otherwise the focus is cut off
|
|
66
|
-
background: system-tokens.$si-sys-effects-focus;
|
|
66
|
+
background: system-tokens.$si-sys-color-effects-focus;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.nav-link {
|
|
@@ -86,7 +86,7 @@ $nav-tabs-min-width: 100px;
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
&.active {
|
|
89
|
-
border-color: system-tokens.$si-sys-border-accent-hover;
|
|
89
|
+
border-color: system-tokens.$si-sys-color-border-accent-hover;
|
|
90
90
|
font-size: typography.$si-font-size-body-lg-sbold;
|
|
91
91
|
font-weight: typography.$si-font-weight-body-lg-sbold;
|
|
92
92
|
line-height: typography.$si-line-height-body-lg-sbold;
|
|
@@ -28,11 +28,11 @@ $page-button-size: 1.5rem;
|
|
|
28
28
|
background: transparent;
|
|
29
29
|
font-size: typography.$si-font-size-h5;
|
|
30
30
|
font-weight: typography.$si-font-weight-h5;
|
|
31
|
-
color: system-tokens.$si-sys-text-primary;
|
|
31
|
+
color: system-tokens.$si-sys-color-text-primary;
|
|
32
32
|
border: 0;
|
|
33
33
|
|
|
34
34
|
&:is(.active, :hover:not(:disabled)):not(.separator) {
|
|
35
|
-
background: system-tokens.$si-sys-background-active;
|
|
35
|
+
background: system-tokens.$si-sys-color-background-active;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:has(.icon) {
|
|
@@ -28,7 +28,7 @@ $si-popover-bg: var(--popover-bg-color, variables.$popover-bg);
|
|
|
28
28
|
word-wrap: break-word;
|
|
29
29
|
background-color: $si-popover-bg;
|
|
30
30
|
background-clip: padding-box;
|
|
31
|
-
box-shadow: system-tokens.$si-sys-effects-shadow-3;
|
|
31
|
+
box-shadow: system-tokens.$si-sys-color-effects-shadow-3;
|
|
32
32
|
border-radius: semantic-tokens.$element-radius-2;
|
|
33
33
|
|
|
34
34
|
&.auto-width {
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
|
|
38
38
|
// Deprecated legacy utilities. Use system-token text utilities instead.
|
|
39
39
|
$text-colors: (
|
|
40
|
-
'body': system-tokens.$si-sys-text-primary,
|
|
41
|
-
'tertiary': system-tokens.$si-sys-text-disabled,
|
|
42
|
-
'info': system-tokens.$si-sys-text-information,
|
|
43
|
-
'muted': system-tokens.$si-sys-text-disabled
|
|
40
|
+
'body': system-tokens.$si-sys-color-text-primary,
|
|
41
|
+
'tertiary': system-tokens.$si-sys-color-text-disabled,
|
|
42
|
+
'info': system-tokens.$si-sys-color-text-information,
|
|
43
|
+
'muted': system-tokens.$si-sys-color-text-disabled
|
|
44
44
|
) !default;
|
|
45
45
|
|
|
46
46
|
@each $color, $value in $text-colors {
|
|
@@ -51,26 +51,26 @@ $text-colors: (
|
|
|
51
51
|
|
|
52
52
|
// Deprecated legacy utilities. Use system-token background utilities instead.
|
|
53
53
|
$background-colors: (
|
|
54
|
-
'primary': system-tokens.$si-sys-background-accent,
|
|
55
|
-
'secondary': system-tokens.$si-sys-text-secondary,
|
|
56
|
-
'tertiary': system-tokens.$si-sys-text-disabled,
|
|
57
|
-
'success': system-tokens.$si-sys-background-success,
|
|
58
|
-
'info': system-tokens.$si-sys-background-information,
|
|
59
|
-
'warning': system-tokens.$si-sys-background-warning,
|
|
60
|
-
'danger': system-tokens.$si-sys-background-danger,
|
|
61
|
-
'base-0': system-tokens.$si-sys-background-0,
|
|
62
|
-
'base-1': system-tokens.$si-sys-background-1,
|
|
63
|
-
'base-2': system-tokens.$si-sys-background-2,
|
|
64
|
-
'base-3': system-tokens.$si-sys-background-3,
|
|
65
|
-
'base-4': system-tokens.$si-sys-background-4,
|
|
66
|
-
'base-success': system-tokens.$si-sys-background-success-subtle,
|
|
67
|
-
'base-info': system-tokens.$si-sys-background-information-subtle,
|
|
68
|
-
'base-caution': system-tokens.$si-sys-background-caution-subtle,
|
|
69
|
-
'base-warning': system-tokens.$si-sys-background-warning-subtle,
|
|
70
|
-
'base-danger': system-tokens.$si-sys-background-danger-subtle,
|
|
71
|
-
'base-critical': system-tokens.$si-sys-background-critical-subtle,
|
|
72
|
-
'base-translucent-1': system-tokens.$si-sys-effects-backdrop,
|
|
73
|
-
'base-translucent-2': system-tokens.$si-sys-background-inverse
|
|
54
|
+
'primary': system-tokens.$si-sys-color-background-accent,
|
|
55
|
+
'secondary': system-tokens.$si-sys-color-text-secondary,
|
|
56
|
+
'tertiary': system-tokens.$si-sys-color-text-disabled,
|
|
57
|
+
'success': system-tokens.$si-sys-color-background-success,
|
|
58
|
+
'info': system-tokens.$si-sys-color-background-information,
|
|
59
|
+
'warning': system-tokens.$si-sys-color-background-warning,
|
|
60
|
+
'danger': system-tokens.$si-sys-color-background-danger,
|
|
61
|
+
'base-0': system-tokens.$si-sys-color-background-0,
|
|
62
|
+
'base-1': system-tokens.$si-sys-color-background-1,
|
|
63
|
+
'base-2': system-tokens.$si-sys-color-background-2,
|
|
64
|
+
'base-3': system-tokens.$si-sys-color-background-3,
|
|
65
|
+
'base-4': system-tokens.$si-sys-color-background-4,
|
|
66
|
+
'base-success': system-tokens.$si-sys-color-background-success-subtle,
|
|
67
|
+
'base-info': system-tokens.$si-sys-color-background-information-subtle,
|
|
68
|
+
'base-caution': system-tokens.$si-sys-color-background-caution-subtle,
|
|
69
|
+
'base-warning': system-tokens.$si-sys-color-background-warning-subtle,
|
|
70
|
+
'base-danger': system-tokens.$si-sys-color-background-danger-subtle,
|
|
71
|
+
'base-critical': system-tokens.$si-sys-color-background-critical-subtle,
|
|
72
|
+
'base-translucent-1': system-tokens.$si-sys-color-effects-backdrop,
|
|
73
|
+
'base-translucent-2': system-tokens.$si-sys-color-background-inverse
|
|
74
74
|
) !default;
|
|
75
75
|
|
|
76
76
|
@each $color, $value in $background-colors {
|
|
@@ -80,20 +80,20 @@ $background-colors: (
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
$status-colors: (
|
|
83
|
-
'success': system-tokens.$si-sys-background-success,
|
|
84
|
-
'info': system-tokens.$si-sys-background-information,
|
|
85
|
-
'caution': system-tokens.$si-sys-background-caution,
|
|
86
|
-
'warning': system-tokens.$si-sys-background-warning,
|
|
87
|
-
'danger': system-tokens.$si-sys-background-danger,
|
|
88
|
-
'critical': system-tokens.$si-sys-background-critical,
|
|
89
|
-
'neutral': system-tokens.$si-sys-background-neutral,
|
|
90
|
-
'success-contrast': system-tokens.$si-sys-text-on-success,
|
|
91
|
-
'info-contrast': system-tokens.$si-sys-text-on-information,
|
|
92
|
-
'caution-contrast': system-tokens.$si-sys-text-on-caution,
|
|
93
|
-
'warning-contrast': system-tokens.$si-sys-text-on-warning,
|
|
94
|
-
'danger-contrast': system-tokens.$si-sys-text-on-danger,
|
|
95
|
-
'critical-contrast': system-tokens.$si-sys-text-on-critical,
|
|
96
|
-
'neutral-contrast': system-tokens.$si-sys-text-on-neutral
|
|
83
|
+
'success': system-tokens.$si-sys-color-background-success,
|
|
84
|
+
'info': system-tokens.$si-sys-color-background-information,
|
|
85
|
+
'caution': system-tokens.$si-sys-color-background-caution,
|
|
86
|
+
'warning': system-tokens.$si-sys-color-background-warning,
|
|
87
|
+
'danger': system-tokens.$si-sys-color-background-danger,
|
|
88
|
+
'critical': system-tokens.$si-sys-color-background-critical,
|
|
89
|
+
'neutral': system-tokens.$si-sys-color-background-neutral,
|
|
90
|
+
'success-contrast': system-tokens.$si-sys-color-text-on-success,
|
|
91
|
+
'info-contrast': system-tokens.$si-sys-color-text-on-information,
|
|
92
|
+
'caution-contrast': system-tokens.$si-sys-color-text-on-caution,
|
|
93
|
+
'warning-contrast': system-tokens.$si-sys-color-text-on-warning,
|
|
94
|
+
'danger-contrast': system-tokens.$si-sys-color-text-on-danger,
|
|
95
|
+
'critical-contrast': system-tokens.$si-sys-color-text-on-critical,
|
|
96
|
+
'neutral-contrast': system-tokens.$si-sys-color-text-on-neutral
|
|
97
97
|
) !default;
|
|
98
98
|
|
|
99
99
|
@each $color, $value in $status-colors {
|
|
@@ -43,18 +43,18 @@ $position-values: (
|
|
|
43
43
|
//
|
|
44
44
|
// Settings for the `<body>` element.
|
|
45
45
|
|
|
46
|
-
$body-bg: system-tokens.$si-sys-background-0 !default;
|
|
47
|
-
$body-color: system-tokens.$si-sys-text-primary !default;
|
|
46
|
+
$body-bg: system-tokens.$si-sys-color-background-0 !default;
|
|
47
|
+
$body-color: system-tokens.$si-sys-color-text-primary !default;
|
|
48
48
|
$body-text-align: null !default;
|
|
49
49
|
|
|
50
50
|
// Links
|
|
51
51
|
//
|
|
52
52
|
// Style anchor elements.
|
|
53
53
|
|
|
54
|
-
$link-color: system-tokens.$si-sys-text-accent;
|
|
54
|
+
$link-color: system-tokens.$si-sys-color-text-accent;
|
|
55
55
|
$link-decoration: none !default;
|
|
56
56
|
$link-shade-percentage: 20% !default;
|
|
57
|
-
$link-hover-color: system-tokens.$si-sys-text-accent-hover;
|
|
57
|
+
$link-hover-color: system-tokens.$si-sys-color-text-accent-hover;
|
|
58
58
|
$link-hover-decoration: underline !default;
|
|
59
59
|
$link-border-radius: semantic-tokens.$element-button-radius;
|
|
60
60
|
|
|
@@ -127,19 +127,19 @@ $border-widths: (
|
|
|
127
127
|
5: 5px
|
|
128
128
|
) !default;
|
|
129
129
|
|
|
130
|
-
$border-color: system-tokens.$si-sys-border-4 !default;
|
|
130
|
+
$border-color: system-tokens.$si-sys-color-border-4 !default;
|
|
131
131
|
|
|
132
132
|
$border-radius: semantic-tokens.$element-radius-2 !default;
|
|
133
133
|
$border-radius-sm: semantic-tokens.$element-radius-1 !default;
|
|
134
134
|
$border-radius-lg: semantic-tokens.$element-radius-2 !default;
|
|
135
135
|
$border-radius-pill: 50rem !default;
|
|
136
136
|
|
|
137
|
-
// DEPRECATED: Use $si-sys-effects-shadow-2 instead.
|
|
138
|
-
$box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
|
|
139
|
-
// DEPRECATED: Use $si-sys-effects-shadow-1 instead.
|
|
140
|
-
$box-shadow-sm: system-tokens.$si-sys-effects-shadow-1 !default;
|
|
141
|
-
// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
|
|
142
|
-
$box-shadow-lg: system-tokens.$si-sys-effects-shadow-3 !default;
|
|
137
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-2 instead.
|
|
138
|
+
$box-shadow: system-tokens.$si-sys-color-effects-shadow-2 !default;
|
|
139
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-1 instead.
|
|
140
|
+
$box-shadow-sm: system-tokens.$si-sys-color-effects-shadow-1 !default;
|
|
141
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-3 instead.
|
|
142
|
+
$box-shadow-lg: system-tokens.$si-sys-color-effects-shadow-3 !default;
|
|
143
143
|
// DEPRECATED: There is no replacement.
|
|
144
144
|
$box-shadow-inset: inset 0 1px 1px var(--element-box-shadow-color-2);
|
|
145
145
|
|
|
@@ -206,7 +206,7 @@ $headings-font-family: null !default;
|
|
|
206
206
|
$headings-font-style: null !default;
|
|
207
207
|
$headings-font-weight: typography.$si-font-weight-sbold !default;
|
|
208
208
|
$headings-line-height: 1.2 !default;
|
|
209
|
-
$headings-color: system-tokens.$si-sys-text-primary !default;
|
|
209
|
+
$headings-color: system-tokens.$si-sys-color-text-primary !default;
|
|
210
210
|
|
|
211
211
|
$lead-font-size: typography.$si-font-size-body-lg !default;
|
|
212
212
|
$lead-line-height: typography.$si-line-height-body-lg !default;
|
|
@@ -218,15 +218,15 @@ $sub-sup-font-size: 0.75em !default;
|
|
|
218
218
|
|
|
219
219
|
$initialism-font-size: $small-font-size !default;
|
|
220
220
|
|
|
221
|
-
$text-disabled: system-tokens.$si-sys-text-disabled !default;
|
|
221
|
+
$text-disabled: system-tokens.$si-sys-color-text-disabled !default;
|
|
222
222
|
|
|
223
223
|
$blockquote-margin-y: map.get(spacers.$spacers-block, 6) !default;
|
|
224
224
|
$blockquote-font-size: typography.$si-font-size-body-lg !default;
|
|
225
|
-
$blockquote-footer-color: system-tokens.$si-sys-text-secondary !default;
|
|
225
|
+
$blockquote-footer-color: system-tokens.$si-sys-color-text-secondary !default;
|
|
226
226
|
$blockquote-footer-font-size: $small-font-size !default;
|
|
227
227
|
|
|
228
228
|
$hr-margin-y: map.get(spacers.$spacers-block, 6) !default;
|
|
229
|
-
$hr-color: system-tokens.$si-sys-border-4 !default;
|
|
229
|
+
$hr-color: system-tokens.$si-sys-color-border-4 !default;
|
|
230
230
|
$hr-height: $border-width !default;
|
|
231
231
|
$hr-opacity: 1 !default;
|
|
232
232
|
|
|
@@ -242,8 +242,8 @@ $nested-kbd-font-weight: $font-weight-bold !default;
|
|
|
242
242
|
|
|
243
243
|
$list-inline-padding: 0.5rem !default;
|
|
244
244
|
|
|
245
|
-
$mark-bg: system-tokens.$si-sys-background-caution;
|
|
246
|
-
$mark-color: system-tokens.$si-sys-text-on-caution;
|
|
245
|
+
$mark-bg: system-tokens.$si-sys-color-background-caution;
|
|
246
|
+
$mark-color: system-tokens.$si-sys-color-text-on-caution;
|
|
247
247
|
|
|
248
248
|
// Tables
|
|
249
249
|
//
|
|
@@ -257,19 +257,19 @@ $table-cell-padding-x-sm: map.get(spacers.$spacers-inline, 4) !default;
|
|
|
257
257
|
$table-cell-vertical-align: top !default;
|
|
258
258
|
|
|
259
259
|
$table-color: $body-color !default;
|
|
260
|
-
$table-bg: system-tokens.$si-sys-background-1 !default;
|
|
260
|
+
$table-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
261
261
|
$table-accent-bg: transparent !default;
|
|
262
262
|
|
|
263
263
|
$table-th-font-weight: null !default;
|
|
264
264
|
|
|
265
265
|
$table-striped-color: $table-color !default;
|
|
266
|
-
$table-striped-bg: system-tokens.$si-sys-background-0 !default;
|
|
266
|
+
$table-striped-bg: system-tokens.$si-sys-color-background-0 !default;
|
|
267
267
|
|
|
268
268
|
$table-active-color: $table-color !default;
|
|
269
|
-
$table-active-bg: system-tokens.$si-sys-background-active !default;
|
|
269
|
+
$table-active-bg: system-tokens.$si-sys-color-background-active !default;
|
|
270
270
|
|
|
271
271
|
$table-hover-color: $table-color !default;
|
|
272
|
-
$table-hover-bg: system-tokens.$si-sys-background-hover !default;
|
|
272
|
+
$table-hover-bg: system-tokens.$si-sys-color-background-hover !default;
|
|
273
273
|
|
|
274
274
|
$table-border-width: $border-width !default;
|
|
275
275
|
$table-border-color: $border-color !default;
|
|
@@ -281,10 +281,10 @@ $table-group-separator-color: currentColor !default;
|
|
|
281
281
|
$table-caption-color: semantic-tokens.$element-text-secondary !default;
|
|
282
282
|
|
|
283
283
|
$table-variants: (
|
|
284
|
-
'success': system-tokens.$si-sys-background-success-subtle,
|
|
285
|
-
'info': system-tokens.$si-sys-background-information-subtle,
|
|
286
|
-
'warning': system-tokens.$si-sys-background-warning-subtle,
|
|
287
|
-
'danger': system-tokens.$si-sys-background-danger-subtle
|
|
284
|
+
'success': system-tokens.$si-sys-color-background-success-subtle,
|
|
285
|
+
'info': system-tokens.$si-sys-color-background-information-subtle,
|
|
286
|
+
'warning': system-tokens.$si-sys-color-background-warning-subtle,
|
|
287
|
+
'danger': system-tokens.$si-sys-color-background-danger-subtle
|
|
288
288
|
) !default;
|
|
289
289
|
|
|
290
290
|
// Buttons
|
|
@@ -302,7 +302,7 @@ $btn-padding-y-lg: map.get(spacers.$spacers-block, 5);
|
|
|
302
302
|
|
|
303
303
|
$btn-link-color: $link-color !default;
|
|
304
304
|
$btn-link-hover-color: $link-hover-color !default;
|
|
305
|
-
$btn-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
|
|
305
|
+
$btn-link-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
|
|
306
306
|
|
|
307
307
|
// Allows for customizing button radius independently from global border radius
|
|
308
308
|
$btn-border-radius: semantic-tokens.$element-button-radius !default;
|
|
@@ -322,13 +322,13 @@ $form-text-margin-top: map.get(spacers.$spacers-block, 2);
|
|
|
322
322
|
$form-text-font-size: $small-font-size !default;
|
|
323
323
|
$form-text-font-style: null !default;
|
|
324
324
|
$form-text-font-weight: null !default;
|
|
325
|
-
$form-text-color: system-tokens.$si-sys-text-secondary !default;
|
|
325
|
+
$form-text-color: system-tokens.$si-sys-color-text-secondary !default;
|
|
326
326
|
|
|
327
327
|
$form-label-margin-bottom: 4px !default;
|
|
328
328
|
$form-label-font-size: typography.$si-font-size-body !default;
|
|
329
329
|
$form-label-font-style: null !default;
|
|
330
330
|
$form-label-font-weight: null !default;
|
|
331
|
-
$form-label-color: system-tokens.$si-sys-text-secondary !default;
|
|
331
|
+
$form-label-color: system-tokens.$si-sys-color-text-secondary !default;
|
|
332
332
|
|
|
333
333
|
$input-padding-y-full: map.get(spacers.$spacers-block, 4);
|
|
334
334
|
$input-padding-y: calc(map.get(spacers.$spacers-block, 4) - 1px); // 8px including 1px border
|
|
@@ -341,14 +341,14 @@ $input-font-weight: $font-weight-base;
|
|
|
341
341
|
// rounding differences (Safari rounds 14 × 1.1428... to 15px, Chrome to 16px). See #2031
|
|
342
342
|
$input-line-height: calc(typography.$si-font-size-body * typography.$si-line-height-body);
|
|
343
343
|
|
|
344
|
-
$input-bg: system-tokens.$si-sys-background-1 !default;
|
|
345
|
-
$input-disabled-bg: system-tokens.$si-sys-background-1 !default;
|
|
346
|
-
$input-disabled-color: system-tokens.$si-sys-text-disabled !default;
|
|
347
|
-
$input-disabled-border-color: system-tokens.$si-sys-border-4 !default;
|
|
344
|
+
$input-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
345
|
+
$input-disabled-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
346
|
+
$input-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
|
|
347
|
+
$input-disabled-border-color: system-tokens.$si-sys-color-border-4 !default;
|
|
348
348
|
|
|
349
|
-
$input-color: system-tokens.$si-sys-text-primary !default;
|
|
350
|
-
$input-border-color: system-tokens.$si-sys-border-2 !default;
|
|
351
|
-
$input-focus-border-color: system-tokens.$si-sys-border-1 !default;
|
|
349
|
+
$input-color: system-tokens.$si-sys-color-text-primary !default;
|
|
350
|
+
$input-border-color: system-tokens.$si-sys-color-border-2 !default;
|
|
351
|
+
$input-focus-border-color: system-tokens.$si-sys-color-border-1 !default;
|
|
352
352
|
$input-border-width: $border-width !default;
|
|
353
353
|
// DEPRECATED: There is no replacement.
|
|
354
354
|
$input-box-shadow: $box-shadow-inset !default;
|
|
@@ -358,7 +358,7 @@ $input-border-radius: semantic-tokens.$element-input-radius !default;
|
|
|
358
358
|
$input-focus-bg: $input-bg !default;
|
|
359
359
|
$input-focus-color: $input-color !default;
|
|
360
360
|
|
|
361
|
-
$input-placeholder-color: system-tokens.$si-sys-text-secondary !default;
|
|
361
|
+
$input-placeholder-color: system-tokens.$si-sys-color-text-secondary !default;
|
|
362
362
|
$input-placeholder-disabled-color: transparent !default;
|
|
363
363
|
$input-plaintext-color: $body-color !default;
|
|
364
364
|
|
|
@@ -380,15 +380,15 @@ $input-group-addon-padding-y: $input-padding-y !default;
|
|
|
380
380
|
$input-group-addon-padding-x: $input-padding-x !default;
|
|
381
381
|
$input-group-addon-font-weight: $input-font-weight !default;
|
|
382
382
|
$input-group-addon-color: $input-color !default;
|
|
383
|
-
$input-group-addon-bg: system-tokens.$si-sys-background-1 !default;
|
|
383
|
+
$input-group-addon-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
384
384
|
$input-group-addon-border-color: $input-border-color !default;
|
|
385
385
|
|
|
386
386
|
// Form validation
|
|
387
387
|
|
|
388
388
|
$form-feedback-font-size: $form-text-font-size !default;
|
|
389
389
|
$form-feedback-valid-color: null !default;
|
|
390
|
-
$form-feedback-warning-color: system-tokens.$si-sys-text-warning !default;
|
|
391
|
-
$form-feedback-invalid-color: system-tokens.$si-sys-text-danger !default;
|
|
390
|
+
$form-feedback-warning-color: system-tokens.$si-sys-color-text-warning !default;
|
|
391
|
+
$form-feedback-invalid-color: system-tokens.$si-sys-color-text-danger !default;
|
|
392
392
|
|
|
393
393
|
$form-feedback-icon-valid: semantic-tokens.$element-feedback-icon-valid;
|
|
394
394
|
$form-feedback-icon-invalid: semantic-tokens.$element-feedback-icon-invalid;
|
|
@@ -401,12 +401,12 @@ $form-validation-states: (
|
|
|
401
401
|
'icon': $form-feedback-icon-valid
|
|
402
402
|
),
|
|
403
403
|
'invalid': (
|
|
404
|
-
'color': system-tokens.$si-sys-border-danger,
|
|
404
|
+
'color': system-tokens.$si-sys-color-border-danger,
|
|
405
405
|
'text-color': $form-feedback-invalid-color,
|
|
406
406
|
'icon': $form-feedback-icon-invalid
|
|
407
407
|
),
|
|
408
408
|
'warning': (
|
|
409
|
-
'color': system-tokens.$si-sys-border-warning,
|
|
409
|
+
'color': system-tokens.$si-sys-color-border-warning,
|
|
410
410
|
'text-color': $form-feedback-warning-color,
|
|
411
411
|
'icon': $form-feedback-icon-warning
|
|
412
412
|
)
|
|
@@ -426,22 +426,22 @@ $nav-link-padding-x: map.get(spacers.$spacers-inline, 8);
|
|
|
426
426
|
$nav-link-font-size: typography.$si-font-size-h4;
|
|
427
427
|
$nav-link-font-weight: typography.$si-font-weight-h4;
|
|
428
428
|
$nav-link-line-height: typography.$si-line-height-h4;
|
|
429
|
-
$nav-link-color: system-tokens.$si-sys-text-primary !default;
|
|
429
|
+
$nav-link-color: system-tokens.$si-sys-color-text-primary !default;
|
|
430
430
|
$nav-link-hover-color: $link-hover-color !default;
|
|
431
431
|
$nav-link-transition: ();
|
|
432
|
-
$nav-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
|
|
432
|
+
$nav-link-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
|
|
433
433
|
|
|
434
434
|
$nav-tabs-border-color: transparent;
|
|
435
435
|
$nav-tabs-border-width: 2px;
|
|
436
436
|
$nav-tabs-border-radius: 0;
|
|
437
437
|
$nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-color !default;
|
|
438
|
-
$nav-tabs-link-active-color: system-tokens.$si-sys-text-accent-active !default;
|
|
438
|
+
$nav-tabs-link-active-color: system-tokens.$si-sys-color-text-accent-active !default;
|
|
439
439
|
$nav-tabs-link-active-bg: transparent !default;
|
|
440
440
|
|
|
441
441
|
// Badges
|
|
442
442
|
$badge-font-size: typography.$si-font-size-body;
|
|
443
443
|
$badge-font-weight: typography.$si-font-weight-body;
|
|
444
|
-
$badge-color: system-tokens.$si-sys-text-inverse !default;
|
|
444
|
+
$badge-color: system-tokens.$si-sys-color-text-inverse !default;
|
|
445
445
|
$badge-padding-y: map.get(spacers.$spacers-block, 1);
|
|
446
446
|
$badge-padding-x: map.get(spacers.$spacers-inline, 4);
|
|
447
447
|
$badge-border-radius: 0.75rem;
|
|
@@ -460,16 +460,16 @@ $dropdown-font-size: $font-size-base !default;
|
|
|
460
460
|
// this is to have room for icon and badges
|
|
461
461
|
$dropdown-line-height: $badge-height;
|
|
462
462
|
$dropdown-color: $body-color !default;
|
|
463
|
-
$dropdown-bg: system-tokens.$si-sys-background-3 !default;
|
|
463
|
+
$dropdown-bg: system-tokens.$si-sys-color-background-3 !default;
|
|
464
464
|
$dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
|
|
465
|
-
$dropdown-divider-bg: system-tokens.$si-sys-border-4 !default;
|
|
465
|
+
$dropdown-divider-bg: system-tokens.$si-sys-color-border-4 !default;
|
|
466
466
|
$dropdown-divider-margin-y: 4px !default;
|
|
467
|
-
$dropdown-box-shadow: system-tokens.$si-sys-effects-shadow-2 !default;
|
|
468
|
-
$dropdown-link-color: system-tokens.$si-sys-text-primary !default;
|
|
469
|
-
$dropdown-link-disabled-color: system-tokens.$si-sys-text-disabled !default;
|
|
467
|
+
$dropdown-box-shadow: system-tokens.$si-sys-color-effects-shadow-2 !default;
|
|
468
|
+
$dropdown-link-color: system-tokens.$si-sys-color-text-primary !default;
|
|
469
|
+
$dropdown-link-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
|
|
470
470
|
$dropdown-item-padding-y: map.get(spacers.$spacers-block, 2);
|
|
471
471
|
$dropdown-item-padding-x: map.get(spacers.$spacers-inline, 5);
|
|
472
|
-
$dropdown-header-color: system-tokens.$si-sys-text-primary !default;
|
|
472
|
+
$dropdown-header-color: system-tokens.$si-sys-color-text-primary !default;
|
|
473
473
|
|
|
474
474
|
// Cards
|
|
475
475
|
|
|
@@ -480,11 +480,11 @@ $card-border-radius: $border-radius !default;
|
|
|
480
480
|
$card-inner-border-radius: $card-border-radius;
|
|
481
481
|
$card-cap-padding-y: map.get(spacers.$spacers-block, 5) !default;
|
|
482
482
|
$card-cap-padding-x: $card-spacer-x !default;
|
|
483
|
-
$card-cap-bg: system-tokens.$si-sys-background-1 !default;
|
|
483
|
+
$card-cap-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
484
484
|
$card-cap-color: null !default;
|
|
485
485
|
$card-height: null !default;
|
|
486
486
|
$card-color: null !default;
|
|
487
|
-
$card-bg: system-tokens.$si-sys-background-1 !default;
|
|
487
|
+
$card-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
488
488
|
$card-img-overlay-padding: map.get(spacers.$spacers-block, 6) map.get(spacers.$spacers-inline, 6) !default;
|
|
489
489
|
$card-group-margin: $grid-gutter-width !default;
|
|
490
490
|
|
|
@@ -492,8 +492,8 @@ $card-group-margin: $grid-gutter-width !default;
|
|
|
492
492
|
|
|
493
493
|
$tooltip-font-size: $font-size-base !default;
|
|
494
494
|
$tooltip-max-width: 200px !default;
|
|
495
|
-
$tooltip-color: system-tokens.$si-sys-text-inverse !default;
|
|
496
|
-
$tooltip-bg: system-tokens.$si-sys-background-inverse !default;
|
|
495
|
+
$tooltip-color: system-tokens.$si-sys-color-text-inverse !default;
|
|
496
|
+
$tooltip-bg: system-tokens.$si-sys-color-background-inverse !default;
|
|
497
497
|
$tooltip-border-radius: semantic-tokens.$element-radius-2 !default;
|
|
498
498
|
$tooltip-opacity: 0.9 !default;
|
|
499
499
|
$tooltip-padding-y: map.get(spacers.$spacers-block, 4) !default;
|
|
@@ -507,24 +507,24 @@ $tooltip-arrow-color: $tooltip-bg !default;
|
|
|
507
507
|
// Popovers
|
|
508
508
|
|
|
509
509
|
$popover-font-size: $font-size-base;
|
|
510
|
-
$popover-bg: system-tokens.$si-sys-background-3 !default;
|
|
510
|
+
$popover-bg: system-tokens.$si-sys-color-background-3 !default;
|
|
511
511
|
$popover-max-width: 276px !default;
|
|
512
512
|
$popover-border-width: $border-width !default;
|
|
513
|
-
$popover-border-color: system-tokens.$si-sys-border-4 !default;
|
|
513
|
+
$popover-border-color: system-tokens.$si-sys-color-border-4 !default;
|
|
514
514
|
$popover-border-radius: $border-radius-lg !default;
|
|
515
515
|
$popover-inner-border-radius: functions.subtract(
|
|
516
516
|
$popover-border-radius,
|
|
517
517
|
$popover-border-width
|
|
518
518
|
) !default;
|
|
519
|
-
// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
|
|
519
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-3 instead.
|
|
520
520
|
$popover-box-shadow: $box-shadow !default;
|
|
521
521
|
|
|
522
|
-
$popover-header-bg: system-tokens.$si-sys-background-3 !default;
|
|
523
|
-
$popover-header-color: system-tokens.$si-sys-text-accent;
|
|
522
|
+
$popover-header-bg: system-tokens.$si-sys-color-background-3 !default;
|
|
523
|
+
$popover-header-color: system-tokens.$si-sys-color-text-accent;
|
|
524
524
|
$popover-header-padding-y: map.get(spacers.$spacers-block, 5) !default;
|
|
525
525
|
$popover-header-padding-x: map.get(spacers.$spacers-inline, 5) !default;
|
|
526
526
|
|
|
527
|
-
$popover-body-color: system-tokens.$si-sys-text-primary !default;
|
|
527
|
+
$popover-body-color: system-tokens.$si-sys-color-text-primary !default;
|
|
528
528
|
$popover-body-padding-y: $popover-header-padding-y !default;
|
|
529
529
|
$popover-body-padding-x: $popover-header-padding-x !default;
|
|
530
530
|
|
|
@@ -548,19 +548,19 @@ $modal-dialog-margin-y-sm-up: map.get(spacers.$spacers-block, 9);
|
|
|
548
548
|
$modal-title-line-height: typography.$si-line-height-h4 !default;
|
|
549
549
|
|
|
550
550
|
$modal-content-color: null !default;
|
|
551
|
-
$modal-content-bg: system-tokens.$si-sys-background-1 !default;
|
|
551
|
+
$modal-content-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
552
552
|
$modal-content-border-width: $border-width !default;
|
|
553
553
|
$modal-content-border-radius: $border-radius-lg !default;
|
|
554
554
|
$modal-content-inner-border-radius: functions.subtract(
|
|
555
555
|
$modal-content-border-radius,
|
|
556
556
|
$modal-content-border-width
|
|
557
557
|
) !default;
|
|
558
|
-
// DEPRECATED: Use $si-sys-effects-shadow-3 instead.
|
|
558
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-3 instead.
|
|
559
559
|
$modal-content-box-shadow-xs: $box-shadow-sm !default;
|
|
560
|
-
// DEPRECATED: Use $si-sys-effects-shadow-2 instead.
|
|
560
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-2 instead.
|
|
561
561
|
$modal-content-box-shadow-sm-up: $box-shadow !default;
|
|
562
562
|
|
|
563
|
-
$modal-backdrop-bg: system-tokens.$si-sys-effects-backdrop !default;
|
|
563
|
+
$modal-backdrop-bg: system-tokens.$si-sys-color-effects-backdrop !default;
|
|
564
564
|
$modal-backdrop-opacity: 1 !default;
|
|
565
565
|
$modal-header-border-color: $border-color !default;
|
|
566
566
|
$modal-footer-border-color: $modal-header-border-color !default;
|
|
@@ -597,11 +597,11 @@ $alert-dismissible-padding-r: calc(
|
|
|
597
597
|
|
|
598
598
|
$progress-height: 0.5rem !default;
|
|
599
599
|
$progress-font-size: calc(#{$font-size-base} * 0.75) !default;
|
|
600
|
-
$progress-bg: system-tokens.$si-sys-border-4 !default;
|
|
600
|
+
$progress-bg: system-tokens.$si-sys-color-border-4 !default;
|
|
601
601
|
$progress-border-radius: $progress-height * 0.5 !default;
|
|
602
602
|
$progress-box-shadow: none !default;
|
|
603
|
-
$progress-bar-color: system-tokens.$si-sys-background-accent !default;
|
|
604
|
-
$progress-bar-bg: system-tokens.$si-sys-background-accent !default;
|
|
603
|
+
$progress-bar-color: system-tokens.$si-sys-color-background-accent !default;
|
|
604
|
+
$progress-bar-bg: system-tokens.$si-sys-color-background-accent !default;
|
|
605
605
|
$progress-bar-animation-timing: 1s linear infinite !default;
|
|
606
606
|
$progress-bar-transition: width animations.element-transition-duration(0.6s) ease;
|
|
607
607
|
|
|
@@ -609,8 +609,8 @@ $progress-bar-transition: width animations.element-transition-duration(0.6s) eas
|
|
|
609
609
|
// @deprecated All `$list-group-*` variables below belong to the deprecated
|
|
610
610
|
// Bootstrap list group. Use the Element list (`.list` / `.list-item`) instead.
|
|
611
611
|
|
|
612
|
-
$list-group-color: system-tokens.$si-sys-text-primary !default;
|
|
613
|
-
$list-group-bg: system-tokens.$si-sys-background-1 !default;
|
|
612
|
+
$list-group-color: system-tokens.$si-sys-color-text-primary !default;
|
|
613
|
+
$list-group-bg: system-tokens.$si-sys-color-background-1 !default;
|
|
614
614
|
$list-group-border-color: $border-color !default;
|
|
615
615
|
$list-group-border-width: $border-width !default;
|
|
616
616
|
$list-group-border-radius: $border-radius !default;
|
|
@@ -618,19 +618,19 @@ $list-group-border-radius: $border-radius !default;
|
|
|
618
618
|
$list-group-item-padding-y: map.get(spacers.$spacers-block, 4) !default;
|
|
619
619
|
$list-group-item-padding-x: map.get(spacers.$spacers-inline, 6) !default; // 1.25rem !default;
|
|
620
620
|
|
|
621
|
-
$list-group-hover-bg: system-tokens.$si-sys-background-hover !default;
|
|
621
|
+
$list-group-hover-bg: system-tokens.$si-sys-color-background-hover !default;
|
|
622
622
|
$list-group-active-color: $body-color !default;
|
|
623
|
-
$list-group-active-bg: system-tokens.$si-sys-background-active !default;
|
|
623
|
+
$list-group-active-bg: system-tokens.$si-sys-color-background-active !default;
|
|
624
624
|
$list-group-active-border-color: $border-color !default;
|
|
625
625
|
|
|
626
|
-
$list-group-disabled-color: system-tokens.$si-sys-text-disabled !default;
|
|
626
|
+
$list-group-disabled-color: system-tokens.$si-sys-color-text-disabled !default;
|
|
627
627
|
$list-group-disabled-bg: $list-group-bg !default;
|
|
628
628
|
|
|
629
|
-
$list-group-action-color: system-tokens.$si-sys-text-primary !default;
|
|
629
|
+
$list-group-action-color: system-tokens.$si-sys-color-text-primary !default;
|
|
630
630
|
$list-group-action-hover-color: $list-group-action-color !important !default;
|
|
631
631
|
|
|
632
632
|
$list-group-action-active-color: $body-color !default;
|
|
633
|
-
$list-group-action-active-bg: system-tokens.$si-sys-background-0 !default;
|
|
633
|
+
$list-group-action-active-bg: system-tokens.$si-sys-color-background-0 !default;
|
|
634
634
|
|
|
635
635
|
// Image thumbnails
|
|
636
636
|
|
|
@@ -639,13 +639,13 @@ $thumbnail-bg: $body-bg !default;
|
|
|
639
639
|
$thumbnail-border-width: $border-width !default;
|
|
640
640
|
$thumbnail-border-color: $border-color !default;
|
|
641
641
|
$thumbnail-border-radius: $border-radius !default;
|
|
642
|
-
// DEPRECATED: Use $si-sys-effects-shadow-1 instead.
|
|
642
|
+
// DEPRECATED: Use $si-sys-color-effects-shadow-1 instead.
|
|
643
643
|
$thumbnail-box-shadow: $box-shadow-sm !default;
|
|
644
644
|
|
|
645
645
|
// Figures
|
|
646
646
|
|
|
647
647
|
$figure-caption-font-size: $small-font-size !default;
|
|
648
|
-
$figure-caption-color: system-tokens.$si-sys-text-secondary !default;
|
|
648
|
+
$figure-caption-color: system-tokens.$si-sys-color-text-secondary !default;
|
|
649
649
|
|
|
650
650
|
// Breadcrumbs
|
|
651
651
|
|
|
@@ -655,7 +655,7 @@ $breadcrumb-padding-x: 0;
|
|
|
655
655
|
$breadcrumb-item-padding-x: map.get(spacers.$spacers-inline, 5);
|
|
656
656
|
$breadcrumb-margin-bottom: 0;
|
|
657
657
|
$breadcrumb-bg: inherit !default;
|
|
658
|
-
$breadcrumb-divider-color: system-tokens.$si-sys-text-secondary !default;
|
|
658
|
+
$breadcrumb-divider-color: system-tokens.$si-sys-color-text-secondary !default;
|
|
659
659
|
$breadcrumb-active-color: $link-color !default;
|
|
660
660
|
$breadcrumb-divider: string.quote('>') !default;
|
|
661
661
|
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
|
@@ -665,22 +665,22 @@ $breadcrumb-border-radius: 0 !default;
|
|
|
665
665
|
|
|
666
666
|
$code-font-size: typography.$si-font-size-body !default;
|
|
667
667
|
$code-line-height: typography.$si-line-height-body !default;
|
|
668
|
-
$code-color: system-tokens.$si-sys-text-primary !default;
|
|
669
|
-
$code-background: system-tokens.$si-sys-background-active !default;
|
|
668
|
+
$code-color: system-tokens.$si-sys-color-text-primary !default;
|
|
669
|
+
$code-background: system-tokens.$si-sys-color-background-active !default;
|
|
670
670
|
$code-padding-y: map.get(spacers.$spacers-block, 1) !default;
|
|
671
671
|
$code-padding-x: map.get(spacers.$spacers-inline, 2) !default;
|
|
672
672
|
$code-border-radius: semantic-tokens.$element-radius-1 !default;
|
|
673
673
|
|
|
674
674
|
$kbd-padding-y: 0.2rem !default;
|
|
675
675
|
$kbd-padding-x: 0.4rem !default;
|
|
676
|
-
$kbd-color: system-tokens.$si-sys-text-primary !default;
|
|
677
|
-
$kbd-bg: system-tokens.$si-sys-background-3 !default;
|
|
676
|
+
$kbd-color: system-tokens.$si-sys-color-text-primary !default;
|
|
677
|
+
$kbd-bg: system-tokens.$si-sys-color-background-3 !default;
|
|
678
678
|
// variable is unused. TODO: remove it.
|
|
679
679
|
$kbd-font-size: $code-font-size !default;
|
|
680
680
|
|
|
681
|
-
$pre-color: system-tokens.$si-sys-text-primary !default;
|
|
681
|
+
$pre-color: system-tokens.$si-sys-color-text-primary !default;
|
|
682
682
|
$pre-padding-y: map.get(spacers.$spacers-block, 4) !default;
|
|
683
683
|
$pre-padding-x: map.get(spacers.$spacers-inline, 4) !default;
|
|
684
|
-
$pre-border-color: system-tokens.$si-sys-border-4 !default;
|
|
684
|
+
$pre-border-color: system-tokens.$si-sys-color-border-4 !default;
|
|
685
685
|
$pre-border-width: $border-width !default;
|
|
686
686
|
$pre-border-radius: semantic-tokens.$element-radius-1 !default;
|