@siemens/element-theme 51.0.0-rc.5 → 51.0.0-rc.7

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 (46) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_accessibility.scss +4 -2
  3. package/src/styles/_reboot-shadow-dom.scss +5 -0
  4. package/src/styles/_root-font-size.scss +4 -2
  5. package/src/styles/_selectors.scss +3 -0
  6. package/src/styles/_themes.scss +15 -3
  7. package/src/styles/_variables.scss +1 -0
  8. package/src/styles/bootstrap/_alert.scss +19 -19
  9. package/src/styles/bootstrap/_badges.scss +38 -38
  10. package/src/styles/bootstrap/_button-group.scss +9 -8
  11. package/src/styles/bootstrap/_buttons.scss +83 -82
  12. package/src/styles/bootstrap/_card.scss +13 -14
  13. package/src/styles/bootstrap/_dropdowns.scss +6 -6
  14. package/src/styles/bootstrap/_list-group.scss +13 -13
  15. package/src/styles/bootstrap/_nav.scss +17 -8
  16. package/src/styles/bootstrap/_pagination.scss +3 -2
  17. package/src/styles/bootstrap/_reboot.scss +8 -2
  18. package/src/styles/bootstrap/_root.scss +2 -1
  19. package/src/styles/bootstrap/_tables.scss +2 -2
  20. package/src/styles/bootstrap/_type.scss +64 -2
  21. package/src/styles/bootstrap/_utilities.scss +45 -45
  22. package/src/styles/bootstrap/_variables.scss +77 -75
  23. package/src/styles/bootstrap/forms/_form-check.scss +34 -62
  24. package/src/styles/bootstrap/forms/_form-control.scss +15 -15
  25. package/src/styles/bootstrap/forms/_form-file.scss +7 -7
  26. package/src/styles/bootstrap/forms/_form-layout.scss +36 -0
  27. package/src/styles/bootstrap/forms/_form-range.scss +13 -13
  28. package/src/styles/bootstrap/mixins/_form-layout.scss +3 -1
  29. package/src/styles/components/_application-header.scss +23 -22
  30. package/src/styles/components/_datatable.scss +29 -29
  31. package/src/styles/components/_drag_drop.scss +6 -5
  32. package/src/styles/components/_layout.scss +14 -1
  33. package/src/styles/components/_links.scss +2 -2
  34. package/src/styles/components/_list-item.scss +7 -7
  35. package/src/styles/components/_markdown.scss +28 -14
  36. package/src/styles/components/_pills.scss +3 -3
  37. package/src/styles/components/_scrollbar.scss +6 -5
  38. package/src/styles/components/_skeleton.scss +4 -3
  39. package/src/styles/components/_switch.scss +12 -14
  40. package/src/styles/components/_widgets.scss +1 -1
  41. package/src/styles/variables/_focus.scss +4 -3
  42. package/src/styles/variables/_system-tokens.scss +180 -0
  43. package/src/styles/variables/_typography.scss +53 -18
  44. package/src/theme/_theme-element.scss +362 -2
  45. package/src/theme-shadow-dom.scss +17 -0
  46. package/src/theme.scss +11 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "51.0.0-rc.5",
3
+ "version": "51.0.0-rc.7",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/_accessibility.scss CHANGED
@@ -1,4 +1,6 @@
1
- :root {
1
+ @use 'selectors';
2
+
3
+ #{selectors.$root} {
2
4
  --element-animations-enabled: 1;
3
5
  }
4
6
 
@@ -7,7 +9,7 @@
7
9
  }
8
10
 
9
11
  @media (prefers-reduced-motion) {
10
- :root {
12
+ #{selectors.$root} {
11
13
  --element-animations-enabled: 0;
12
14
  }
13
15
  }
package/src/styles/_reboot-shadow-dom.scss ADDED
@@ -0,0 +1,5 @@
1
+ // by default shadow dom inherits certain browser styles from parent DOM.
2
+ // To avoid this, we reset all styles to initial values. This is a reboot for shadow dom.
3
+ :host {
4
+ all: initial;
5
+ }
package/src/styles/_root-font-size.scss CHANGED
@@ -1,11 +1,13 @@
1
+ @use 'selectors';
2
+
1
3
  $element-root-font-size: initial !default;
2
4
 
3
- html {
5
+ #{selectors.$document} {
4
6
  // defines the default with low specificity, i.e. easy overridable with :root
5
7
  --element-root-font-size: #{$element-root-font-size};
6
8
  }
7
9
 
8
- :root {
10
+ #{selectors.$root} {
9
11
  font-size: var(--element-root-font-size);
10
12
  }
11
13
 
package/src/styles/_selectors.scss ADDED
@@ -0,0 +1,3 @@
1
+ $root: ':root' !default;
2
+ $document: 'html' !default;
3
+ $body: 'body' !default;
package/src/styles/_themes.scss CHANGED
@@ -2,8 +2,9 @@
2
2
 
3
3
  $_theme-default: 'element';
4
4
  $_themes: () !default;
5
+ $_root-selector: ':root';
5
6
 
6
- @mixin configure($defaultTheme: null, $themes: ()) {
7
+ @mixin configure($defaultTheme: null, $themes: (), $rootSelector: null) {
7
8
  @if $defaultTheme {
8
9
  $_theme-default: $defaultTheme !global;
9
10
  }
@@ -11,11 +12,17 @@ $_themes: () !default;
11
12
  @if $themes {
12
13
  $_themes: $themes !global;
13
14
  }
15
+
16
+ @if $rootSelector {
17
+ $_root-selector: $rootSelector !global;
18
+ }
14
19
  }
15
20
 
16
- @mixin make-theme($vars, $name, $dark: false, $force-generate: false) {
21
+ @mixin make-theme($vars, $name, $dark: false, $force-generate: false, $root-selector: null) {
17
22
  $theme-name: '';
18
23
  $mode: '';
24
+ $actual-root-selector: $root-selector or $_root-selector;
25
+ $selector: '';
19
26
 
20
27
  @if list.index($_themes, $name) or $name == $_theme-default or $force-generate {
21
28
  @if $name != $_theme-default {
@@ -26,7 +33,12 @@ $_themes: () !default;
26
33
  $mode: '.app--dark';
27
34
  }
28
35
 
29
- :root#{$theme-name}#{$mode} {
36
+ $selector: '#{$actual-root-selector}#{$theme-name}#{$mode}';
37
+ @if $actual-root-selector == ':host' and ($theme-name != '' or $mode != '') {
38
+ $selector: ':host(#{$theme-name}#{$mode})';
39
+ }
40
+
41
+ #{$selector} {
30
42
  @each $token, $val in $vars {
31
43
  --#{$token}: #{$val};
32
44
  }
package/src/styles/_variables.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  // the minimal set of variables w/o all the heavy bootstrap stuff
2
2
  @forward './variables/animations';
3
3
  @forward './variables/semantic-tokens';
4
+ @forward './variables/system-tokens';
4
5
  @forward './variables/typography';
5
6
  @forward './variables/elevation';
6
7
  @forward './variables/focus';
package/src/styles/bootstrap/_alert.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../variables/semantic-tokens';
1
+ @use '../variables/system-tokens';
2
2
  @use '../variables/typography';
3
3
  @use 'variables';
4
4
 
@@ -36,37 +36,37 @@
36
36
  }
37
37
 
38
38
  .alert-success {
39
- --color-bar: #{semantic-tokens.$element-status-success};
40
- color: semantic-tokens.$element-text-success;
41
- background: semantic-tokens.$element-base-success;
39
+ --color-bar: #{system-tokens.$si-sys-border-success};
40
+ color: system-tokens.$si-sys-text-success;
41
+ background: system-tokens.$si-sys-background-success-subtle;
42
42
  }
43
43
 
44
44
  .alert-warning {
45
- --color-bar: #{semantic-tokens.$element-status-warning};
46
- color: semantic-tokens.$element-text-warning;
47
- background: semantic-tokens.$element-base-warning;
45
+ --color-bar: #{system-tokens.$si-sys-border-warning};
46
+ color: system-tokens.$si-sys-text-warning;
47
+ background: system-tokens.$si-sys-background-warning-subtle;
48
48
  }
49
49
 
50
50
  .alert-caution {
51
- --color-bar: #{semantic-tokens.$element-status-caution};
52
- color: semantic-tokens.$element-text-caution;
53
- background: semantic-tokens.$element-base-caution;
51
+ --color-bar: #{system-tokens.$si-sys-border-caution};
52
+ color: system-tokens.$si-sys-text-caution;
53
+ background: system-tokens.$si-sys-background-caution-subtle;
54
54
  }
55
55
 
56
56
  .alert-danger {
57
- --color-bar: #{semantic-tokens.$element-status-danger};
58
- color: semantic-tokens.$element-text-danger;
59
- background: semantic-tokens.$element-base-danger;
57
+ --color-bar: #{system-tokens.$si-sys-border-danger};
58
+ color: system-tokens.$si-sys-text-danger;
59
+ background: system-tokens.$si-sys-background-danger-subtle;
60
60
  }
61
61
 
62
62
  .alert-critical {
63
- --color-bar: #{semantic-tokens.$element-status-critical};
64
- color: semantic-tokens.$element-text-critical;
65
- background: semantic-tokens.$element-base-critical;
63
+ --color-bar: #{system-tokens.$si-sys-border-critical};
64
+ color: system-tokens.$si-sys-text-critical;
65
+ background: system-tokens.$si-sys-background-critical-subtle;
66
66
  }
67
67
 
68
68
  .alert-info {
69
- --color-bar: #{semantic-tokens.$element-status-information};
70
- color: semantic-tokens.$element-text-information;
71
- background: semantic-tokens.$element-base-information;
69
+ --color-bar: #{system-tokens.$si-sys-border-information};
70
+ color: system-tokens.$si-sys-text-information;
71
+ background: system-tokens.$si-sys-background-information-subtle;
72
72
  }
package/src/styles/bootstrap/_badges.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../variables/semantic-tokens';
1
+ @use '../variables/system-tokens';
2
2
  @use '../variables/spacers';
3
3
  @use '../variables/typography';
4
4
  @use './mixins/badge-text';
@@ -15,7 +15,7 @@
15
15
 
16
16
  .badge {
17
17
  display: inline-block;
18
- color: semantic-tokens.$element-text-primary;
18
+ color: system-tokens.$si-sys-text-primary;
19
19
  padding-block: variables.$badge-padding-y;
20
20
  padding-inline: variables.$badge-padding-x;
21
21
  margin-block: 0;
@@ -41,89 +41,89 @@
41
41
  }
42
42
 
43
43
  &.bg-default {
44
- background-color: semantic-tokens.$element-base-0 !important;
45
- color: semantic-tokens.$element-text-primary;
46
- outline: 1px solid semantic-tokens.$element-ui-4;
44
+ background-color: system-tokens.$si-sys-background-0 !important;
45
+ color: system-tokens.$si-sys-text-primary;
46
+ outline: 1px solid system-tokens.$si-sys-border-4;
47
47
  }
48
48
 
49
49
  &.bg-primary {
50
- background-color: semantic-tokens.$element-ui-0 !important;
51
- color: semantic-tokens.$element-text-inverse;
50
+ background-color: system-tokens.$si-sys-background-accent !important;
51
+ color: system-tokens.$si-sys-text-on-accent;
52
52
  }
53
53
 
54
54
  &.bg-secondary {
55
- background-color: semantic-tokens.$element-ui-4 !important;
56
- color: semantic-tokens.$element-text-primary;
55
+ background-color: system-tokens.$si-sys-background-neutral !important;
56
+ color: system-tokens.$si-sys-text-primary;
57
57
  }
58
58
 
59
59
  &.bg-info {
60
- background-color: semantic-tokens.$element-base-information !important;
61
- color: semantic-tokens.$element-text-information;
60
+ background-color: system-tokens.$si-sys-background-information-subtle !important;
61
+ color: system-tokens.$si-sys-text-information;
62
62
  }
63
63
 
64
64
  &.bg-success {
65
- background-color: semantic-tokens.$element-base-success !important;
66
- color: semantic-tokens.$element-text-success;
65
+ background-color: system-tokens.$si-sys-background-success-subtle !important;
66
+ color: system-tokens.$si-sys-text-success;
67
67
  }
68
68
 
69
69
  &.bg-caution {
70
- background-color: semantic-tokens.$element-base-caution !important;
71
- color: semantic-tokens.$element-text-caution;
70
+ background-color: system-tokens.$si-sys-background-caution-subtle !important;
71
+ color: system-tokens.$si-sys-text-caution;
72
72
  }
73
73
 
74
74
  &.bg-warning {
75
- background-color: semantic-tokens.$element-base-warning !important;
76
- color: semantic-tokens.$element-text-warning;
75
+ background-color: system-tokens.$si-sys-background-warning-subtle !important;
76
+ color: system-tokens.$si-sys-text-warning;
77
77
  }
78
78
 
79
79
  &.bg-danger {
80
- background-color: semantic-tokens.$element-base-danger !important;
81
- color: semantic-tokens.$element-text-danger;
80
+ background-color: system-tokens.$si-sys-background-danger-subtle !important;
81
+ color: system-tokens.$si-sys-text-danger;
82
82
  }
83
83
 
84
84
  &.bg-critical {
85
- background-color: semantic-tokens.$element-base-critical !important;
86
- color: semantic-tokens.$element-text-critical;
85
+ background-color: system-tokens.$si-sys-background-critical-subtle !important;
86
+ color: system-tokens.$si-sys-text-critical;
87
87
  }
88
88
 
89
89
  &.bg-inverse {
90
- background-color: semantic-tokens.$element-ui-1 !important;
91
- color: semantic-tokens.$element-text-inverse;
90
+ background-color: system-tokens.$si-sys-background-inverse !important;
91
+ color: system-tokens.$si-sys-text-inverse;
92
92
  }
93
93
 
94
94
  &.bg-info-emphasis {
95
- background: semantic-tokens.$element-status-information;
96
- color: semantic-tokens.$element-status-information-contrast;
95
+ background: system-tokens.$si-sys-background-information;
96
+ color: system-tokens.$si-sys-text-on-information;
97
97
  @extend %badge-text-emphasis;
98
98
  }
99
99
 
100
100
  &.bg-success-emphasis {
101
- background: semantic-tokens.$element-status-success;
102
- color: semantic-tokens.$element-status-success-contrast;
101
+ background: system-tokens.$si-sys-background-success;
102
+ color: system-tokens.$si-sys-text-on-success;
103
103
  @extend %badge-text-emphasis;
104
104
  }
105
105
 
106
106
  &.bg-warning-emphasis {
107
- background: semantic-tokens.$element-status-warning;
108
- color: semantic-tokens.$element-status-warning-contrast;
107
+ background: system-tokens.$si-sys-background-warning;
108
+ color: system-tokens.$si-sys-text-on-warning;
109
109
  @extend %badge-text-emphasis;
110
110
  }
111
111
 
112
112
  &.bg-danger-emphasis {
113
- background: semantic-tokens.$element-status-danger;
114
- color: semantic-tokens.$element-status-danger-contrast;
113
+ background: system-tokens.$si-sys-background-danger;
114
+ color: system-tokens.$si-sys-text-on-danger;
115
115
  @extend %badge-text-emphasis;
116
116
  }
117
117
 
118
118
  &.bg-critical-emphasis {
119
- background: semantic-tokens.$element-status-critical;
120
- color: semantic-tokens.$element-status-critical-contrast;
119
+ background: system-tokens.$si-sys-background-critical;
120
+ color: system-tokens.$si-sys-text-on-critical;
121
121
  @extend %badge-text-emphasis;
122
122
  }
123
123
 
124
124
  &.bg-caution-emphasis {
125
- background: semantic-tokens.$element-status-caution;
126
- color: semantic-tokens.$element-status-caution-contrast;
125
+ background: system-tokens.$si-sys-background-caution;
126
+ color: system-tokens.$si-sys-text-on-caution;
127
127
  @extend %badge-text-emphasis;
128
128
  }
129
129
 
@@ -146,14 +146,14 @@
146
146
  position: absolute;
147
147
  inset-block-start: 0;
148
148
  inset-inline-end: 0;
149
- background-color: semantic-tokens.$element-status-danger;
149
+ background-color: system-tokens.$si-sys-background-danger;
150
150
  }
151
151
  }
152
152
 
153
153
  .badge-text {
154
154
  @include badge-text.badge-text();
155
- background-color: semantic-tokens.$element-action-danger;
156
- color: semantic-tokens.$element-action-danger-text;
155
+ background-color: system-tokens.$si-sys-background-danger;
156
+ color: system-tokens.$si-sys-text-on-danger;
157
157
  position: relative;
158
158
  }
159
159
 
package/src/styles/bootstrap/_button-group.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use '../variables/focus';
2
2
  @use '../variables/semantic-tokens';
3
3
  @use '../variables/spacers';
4
+ @use '../variables/system-tokens';
4
5
  @use '../variables/typography';
5
6
  @use './variables';
6
7
 
@@ -87,11 +88,11 @@
87
88
  .btn-check + .btn,
88
89
  label.btn:has(.btn-check) {
89
90
  --btn-border-width: 1px;
90
- --btn-border-color: #{semantic-tokens.$element-ui-4};
91
- --btn-border-color-hover: #{semantic-tokens.$element-ui-4};
91
+ --btn-border-color: #{system-tokens.$si-sys-border-4};
92
+ --btn-border-color-hover: #{system-tokens.$si-sys-border-4};
92
93
  cursor: pointer;
93
94
  background: transparent;
94
- color: semantic-tokens.$element-text-primary;
95
+ color: system-tokens.$si-sys-text-primary;
95
96
  transition: none;
96
97
 
97
98
  &.btn-icon {
@@ -113,20 +114,20 @@
113
114
 
114
115
  .btn-check + .btn:hover,
115
116
  label:has(.btn-check:not(:checked)):hover > * {
116
- color: semantic-tokens.$element-ui-0-hover;
117
+ color: system-tokens.$si-sys-text-accent-hover;
117
118
  }
118
119
 
119
120
  .btn-check:checked {
120
121
  + .btn {
121
- background: semantic-tokens.$element-action-secondary-active;
122
- border-color: semantic-tokens.$element-action-secondary-border-hover;
123
- color: semantic-tokens.$element-ui-0-hover;
122
+ background: system-tokens.$si-sys-background-accent-secondary-active;
123
+ border-color: system-tokens.$si-sys-border-accent-active;
124
+ color: system-tokens.$si-sys-text-accent-active;
124
125
  z-index: 2;
125
126
  }
126
127
 
127
128
  + .btn:hover,
128
129
  &:hover + .btn {
129
- color: semantic-tokens.$element-text-primary;
130
+ color: system-tokens.$si-sys-text-primary;
130
131
  }
131
132
  }
132
133
 
package/src/styles/bootstrap/_buttons.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use '../variables/focus';
3
3
  @use '../variables/semantic-tokens';
4
4
  @use '../variables/spacers';
5
+ @use '../variables/system-tokens';
5
6
  @use '../variables/typography';
6
7
  @use './mixins/transition';
7
8
  @use './variables' as bootstrap-variables;
@@ -12,7 +13,7 @@ $btn-icon-font-size: variables.$si-icon-font-size;
12
13
 
13
14
  // there are some non .btn buttons used in element
14
15
  button {
15
- color: semantic-tokens.$element-text-primary;
16
+ color: system-tokens.$si-sys-text-primary;
16
17
  }
17
18
 
18
19
  :is(.btn, .btn-close) {
@@ -73,55 +74,55 @@ button {
73
74
  }
74
75
 
75
76
  .btn-primary {
76
- --btn-bg: #{semantic-tokens.$element-action-primary};
77
- --btn-bg-hover: #{semantic-tokens.$element-action-primary-hover};
78
- --btn-bg-active: #{semantic-tokens.$element-action-primary-active};
79
- --btn-color: #{semantic-tokens.$element-action-primary-text};
80
- --btn-color-hover: #{semantic-tokens.$element-action-primary-text};
81
- --btn-color-active: #{semantic-tokens.$element-action-primary-text};
77
+ --btn-bg: #{system-tokens.$si-sys-background-accent};
78
+ --btn-bg-hover: #{system-tokens.$si-sys-background-accent-hover};
79
+ --btn-bg-active: #{system-tokens.$si-sys-background-accent-active};
80
+ --btn-color: #{system-tokens.$si-sys-text-on-accent};
81
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-accent};
82
+ --btn-color-active: #{system-tokens.$si-sys-text-on-accent};
82
83
  }
83
84
 
84
85
  .btn-danger {
85
- --btn-bg: #{semantic-tokens.$element-action-danger};
86
- --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
87
- --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
88
- --btn-color: #{semantic-tokens.$element-action-danger-text};
89
- --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
90
- --btn-color-active: #{semantic-tokens.$element-action-danger-text};
86
+ --btn-bg: #{system-tokens.$si-sys-background-danger};
87
+ --btn-bg-hover: #{system-tokens.$si-sys-background-danger-hover};
88
+ --btn-bg-active: #{system-tokens.$si-sys-background-danger-active};
89
+ --btn-color: #{system-tokens.$si-sys-text-on-danger};
90
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-danger};
91
+ --btn-color-active: #{system-tokens.$si-sys-text-on-danger};
91
92
  }
92
93
 
93
94
  .btn-warning {
94
- --btn-bg: #{semantic-tokens.$element-action-warning};
95
- --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
96
- --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
97
- --btn-color: #{semantic-tokens.$element-action-warning-text};
98
- --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
99
- --btn-color-active: #{semantic-tokens.$element-action-warning-text};
95
+ --btn-bg: #{system-tokens.$si-sys-background-warning};
96
+ --btn-bg-hover: #{system-tokens.$si-sys-background-warning-hover};
97
+ --btn-bg-active: #{system-tokens.$si-sys-background-warning-active};
98
+ --btn-color: #{system-tokens.$si-sys-text-on-warning};
99
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-warning};
100
+ --btn-color-active: #{system-tokens.$si-sys-text-on-warning};
100
101
  }
101
102
 
102
103
  .btn-ghost {
103
- --btn-bg: #{semantic-tokens.$element-base-1};
104
- --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
105
- --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
106
- --btn-color: #{semantic-tokens.$element-text-primary};
107
- --btn-color-hover: #{semantic-tokens.$element-text-primary};
108
- --btn-color-active: #{semantic-tokens.$element-text-primary};
104
+ --btn-bg: #{system-tokens.$si-sys-background-1};
105
+ --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
106
+ --btn-bg-active: #{system-tokens.$si-sys-background-selected};
107
+ --btn-color: #{system-tokens.$si-sys-text-primary};
108
+ --btn-color-hover: #{system-tokens.$si-sys-text-primary};
109
+ --btn-color-active: #{system-tokens.$si-sys-text-primary};
109
110
  }
110
111
 
111
112
  .btn-secondary,
112
113
  .btn-secondary-warning,
113
114
  .btn-secondary-danger,
114
115
  .btn-secondary-ghost {
115
- --btn-bg: #{semantic-tokens.$element-action-secondary};
116
- --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
117
- --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
118
- --btn-color: #{semantic-tokens.$element-action-secondary-text};
119
- --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
120
- --btn-color-active: #{semantic-tokens.$element-action-primary-active};
116
+ --btn-bg: #{system-tokens.$si-sys-background-accent-secondary};
117
+ --btn-bg-hover: #{system-tokens.$si-sys-background-accent-secondary-hover};
118
+ --btn-bg-active: #{system-tokens.$si-sys-background-accent-secondary-active};
119
+ --btn-color: #{system-tokens.$si-sys-text-on-accent-secondary};
120
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-accent-secondary-hover};
121
+ --btn-color-active: #{system-tokens.$si-sys-text-on-accent-secondary-active};
121
122
  --btn-border-width: 1px;
122
- --btn-border-color: #{semantic-tokens.$element-action-secondary-border};
123
- --btn-border-color-hover: #{semantic-tokens.$element-action-secondary-border-hover};
124
- --btn-border-color-active: #{semantic-tokens.$element-action-secondary-border-active};
123
+ --btn-border-color: #{system-tokens.$si-sys-border-accent};
124
+ --btn-border-color-hover: #{system-tokens.$si-sys-border-accent-hover};
125
+ --btn-border-color-active: #{system-tokens.$si-sys-border-accent-active};
125
126
  }
126
127
 
127
128
  .btn-tertiary,
@@ -129,45 +130,45 @@ button {
129
130
  .btn-tertiary-danger,
130
131
  .btn-tertiary-ghost {
131
132
  --btn-bg: transparent;
132
- --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
133
- --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
134
- --btn-color: #{semantic-tokens.$element-action-secondary-text};
135
- --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
136
- --btn-color-active: #{semantic-tokens.$element-action-primary-active};
133
+ --btn-bg-hover: #{system-tokens.$si-sys-background-accent-secondary-hover};
134
+ --btn-bg-active: #{system-tokens.$si-sys-background-accent-secondary-active};
135
+ --btn-color: #{system-tokens.$si-sys-text-on-accent-secondary};
136
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-accent-secondary-hover};
137
+ --btn-color-active: #{system-tokens.$si-sys-text-on-accent-secondary-active};
137
138
  }
138
139
 
139
140
  .btn-secondary-warning,
140
141
  .btn-tertiary-warning {
141
- --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
142
- --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
143
- --btn-color: #{semantic-tokens.$element-action-secondary-warning};
144
- --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
145
- --btn-color-active: #{semantic-tokens.$element-action-warning-text};
146
- --btn-border-color: #{semantic-tokens.$element-action-secondary-warning};
147
- --btn-border-color-hover: #{semantic-tokens.$element-action-warning-hover};
148
- --btn-border-color-active: #{semantic-tokens.$element-action-warning-active};
142
+ --btn-bg-hover: #{system-tokens.$si-sys-background-warning-hover};
143
+ --btn-bg-active: #{system-tokens.$si-sys-background-warning-active};
144
+ --btn-color: #{system-tokens.$si-sys-text-on-warning-secondary};
145
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-warning};
146
+ --btn-color-active: #{system-tokens.$si-sys-text-on-warning};
147
+ --btn-border-color: #{system-tokens.$si-sys-border-warning-secondary};
148
+ --btn-border-color-hover: transparent;
149
+ --btn-border-color-active: transparent;
149
150
  }
150
151
 
151
152
  .btn-secondary-danger,
152
153
  .btn-tertiary-danger {
153
- --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
154
- --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
155
- --btn-color: #{semantic-tokens.$element-action-secondary-danger};
156
- --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
157
- --btn-color-active: #{semantic-tokens.$element-action-danger-text};
158
- --btn-border-color: #{semantic-tokens.$element-action-secondary-danger};
159
- --btn-border-color-hover: #{semantic-tokens.$element-action-danger-hover};
160
- --btn-border-color-active: #{semantic-tokens.$element-action-danger-active};
154
+ --btn-bg-hover: #{system-tokens.$si-sys-background-danger-hover};
155
+ --btn-bg-active: #{system-tokens.$si-sys-background-danger-active};
156
+ --btn-color: #{system-tokens.$si-sys-text-on-danger-secondary};
157
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-danger};
158
+ --btn-color-active: #{system-tokens.$si-sys-text-on-danger};
159
+ --btn-border-color: #{system-tokens.$si-sys-border-danger-secondary};
160
+ --btn-border-color-hover: transparent;
161
+ --btn-border-color-active: transparent;
161
162
  }
162
163
 
163
164
  .btn-secondary-ghost,
164
165
  .btn-tertiary-ghost {
165
- --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
166
- --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
167
- --btn-color: #{semantic-tokens.$element-text-primary};
168
- --btn-color-hover: #{semantic-tokens.$element-text-primary};
169
- --btn-color-active: #{semantic-tokens.$element-text-primary};
170
- --btn-border-color: #{semantic-tokens.$element-ui-3};
166
+ --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
167
+ --btn-bg-active: #{system-tokens.$si-sys-background-selected};
168
+ --btn-color: #{system-tokens.$si-sys-text-primary};
169
+ --btn-color-hover: #{system-tokens.$si-sys-text-primary};
170
+ --btn-color-active: #{system-tokens.$si-sys-text-primary};
171
+ --btn-border-color: #{system-tokens.$si-sys-border-3};
171
172
  --btn-border-color-hover: transparent;
172
173
  --btn-border-color-active: transparent;
173
174
  }
@@ -175,7 +176,7 @@ button {
175
176
  .btn-link {
176
177
  --btn-color: #{bootstrap-variables.$btn-link-color};
177
178
  --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
178
- --btn-color-active: #{semantic-tokens.$element-action-primary-active};
179
+ --btn-color-active: #{system-tokens.$si-sys-text-accent-active};
179
180
  --btn-font-weight: #{typography.$si-font-weight-body};
180
181
  justify-content: flex-start;
181
182
  text-decoration: bootstrap-variables.$link-decoration;
@@ -226,17 +227,17 @@ button {
226
227
  .btn-close {
227
228
  --btn-font-weight: #{typography.$si-font-weight-normal};
228
229
  --btn-bg: transparent;
229
- --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
230
- --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
231
- --btn-color: #{semantic-tokens.$element-ui-1};
232
- --btn-color-active: #{semantic-tokens.$element-ui-1};
230
+ --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
231
+ --btn-bg-active: #{system-tokens.$si-sys-background-selected};
232
+ --btn-color: #{system-tokens.$si-sys-text-primary};
233
+ --btn-color-active: #{system-tokens.$si-sys-text-primary};
233
234
 
234
235
  &.btn-tertiary {
235
- --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
236
- --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
237
- --btn-color: #{semantic-tokens.$element-action-secondary-text};
238
- --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
239
- --btn-color-active: #{semantic-tokens.$element-action-primary-active};
236
+ --btn-bg-hover: #{system-tokens.$si-sys-background-accent-secondary-hover};
237
+ --btn-bg-active: #{system-tokens.$si-sys-background-accent-secondary-active};
238
+ --btn-color: #{system-tokens.$si-sys-text-on-accent-secondary};
239
+ --btn-color-hover: #{system-tokens.$si-sys-text-on-accent-secondary-hover};
240
+ --btn-color-active: #{system-tokens.$si-sys-text-on-accent-secondary-active};
240
241
  }
241
242
 
242
243
  &::before {
@@ -257,29 +258,29 @@ button {
257
258
  --btn-color: #{bootstrap-variables.$input-color};
258
259
  --btn-color-hover: #{bootstrap-variables.$input-color};
259
260
  --btn-color-active: #{bootstrap-variables.$input-color};
260
- --btn-border-width: 1px;
261
- --btn-border-color: #{semantic-tokens.$element-ui-2};
262
- --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
263
- --btn-border-color-active: #{semantic-tokens.$element-ui-1};
261
+ --btn-border-width: #{bootstrap-variables.$input-border-width};
262
+ --btn-border-color: #{bootstrap-variables.$input-border-color};
263
+ --btn-border-color-hover: #{bootstrap-variables.$input-focus-border-color};
264
+ --btn-border-color-active: #{bootstrap-variables.$input-focus-border-color};
264
265
 
265
266
  @include typography.si-font(
266
- typography.$si-font-size-body,
267
- typography.$si-line-height-body,
268
- typography.$si-font-weight-body
267
+ bootstrap-variables.$input-font-size,
268
+ bootstrap-variables.$input-line-height,
269
+ bootstrap-variables.$input-font-weight
269
270
  );
270
271
  padding-block: bootstrap-variables.$input-padding-y;
271
- padding-inline: bootstrap-variables.$btn-padding-x - bootstrap-variables.$input-border-width;
272
+ padding-inline: bootstrap-variables.$input-padding-x;
272
273
 
273
274
  border-radius: bootstrap-variables.$input-border-radius;
274
275
  justify-content: flex-start;
275
276
 
276
277
  &:is(:disabled, .disabled) {
277
- --btn-border-color: #{semantic-tokens.$element-ui-3};
278
- --btn-color: #{semantic-tokens.$element-text-disabled};
278
+ --btn-border-color: #{bootstrap-variables.$input-disabled-border-color};
279
+ --btn-color: #{bootstrap-variables.$input-disabled-color};
279
280
  opacity: unset;
280
281
  }
281
282
 
282
283
  &:focus {
283
- --btn-border-color: #{semantic-tokens.$element-ui-1};
284
+ --btn-border-color: #{bootstrap-variables.$input-focus-border-color};
284
285
  }
285
286
  }