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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_alert.scss +18 -18
  3. package/src/styles/bootstrap/_badges.scss +37 -37
  4. package/src/styles/bootstrap/_button-group.scss +8 -8
  5. package/src/styles/bootstrap/_buttons.scss +67 -67
  6. package/src/styles/bootstrap/_card.scss +13 -12
  7. package/src/styles/bootstrap/_dropdowns.scss +5 -5
  8. package/src/styles/bootstrap/_images.scss +1 -1
  9. package/src/styles/bootstrap/_list-group.scss +50 -12
  10. package/src/styles/bootstrap/_modals.scss +2 -2
  11. package/src/styles/bootstrap/_nav.scss +6 -6
  12. package/src/styles/bootstrap/_pagination.scss +2 -2
  13. package/src/styles/bootstrap/_popovers.scss +1 -1
  14. package/src/styles/bootstrap/_utilities.scss +38 -37
  15. package/src/styles/bootstrap/_variables.scss +89 -91
  16. package/src/styles/bootstrap/forms/_form-check.scss +20 -20
  17. package/src/styles/bootstrap/forms/_form-control.scss +15 -15
  18. package/src/styles/bootstrap/forms/_form-file.scss +6 -6
  19. package/src/styles/bootstrap/forms/_form-range.scss +12 -12
  20. package/src/styles/components/_application-header.scss +15 -15
  21. package/src/styles/components/_datatable.scss +11 -11
  22. package/src/styles/components/_drag_drop.scss +5 -5
  23. package/src/styles/components/_elevation.scss +4 -4
  24. package/src/styles/components/_layout.scss +1 -1
  25. package/src/styles/components/_links.scss +1 -1
  26. package/src/styles/components/_list-item.scss +14 -19
  27. package/src/styles/components/_markdown.scss +1 -1
  28. package/src/styles/components/_pills.scss +3 -3
  29. package/src/styles/components/_scrollbar.scss +3 -3
  30. package/src/styles/components/_search-bar.scss +6 -6
  31. package/src/styles/components/_skeleton.scss +3 -3
  32. package/src/styles/components/_switch.scss +12 -12
  33. package/src/styles/components/_widgets.scss +1 -1
  34. package/src/styles/mixins/_utilities.scss +94 -82
  35. package/src/styles/variables/_elevation.scss +8 -8
  36. package/src/styles/variables/_focus.scss +3 -3
  37. package/src/styles/variables/_system-tokens.scss +202 -180
  38. package/src/styles/variables/_utilities.scss +4 -4
  39. package/src/theme/_theme-element.scss +326 -302
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "51.0.0-rc.9",
3
+ "version": "51.0.1",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/bootstrap/_alert.scss CHANGED
@@ -36,37 +36,37 @@
36
36
  }
37
37
 
38
38
  .alert-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;
39
+ --color-bar: #{system-tokens.$si-sys-color-border-success};
40
+ color: system-tokens.$si-sys-color-text-success;
41
+ background: system-tokens.$si-sys-color-background-success-subtle;
42
42
  }
43
43
 
44
44
  .alert-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;
45
+ --color-bar: #{system-tokens.$si-sys-color-border-warning};
46
+ color: system-tokens.$si-sys-color-text-warning;
47
+ background: system-tokens.$si-sys-color-background-warning-subtle;
48
48
  }
49
49
 
50
50
  .alert-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;
51
+ --color-bar: #{system-tokens.$si-sys-color-border-caution};
52
+ color: system-tokens.$si-sys-color-text-caution;
53
+ background: system-tokens.$si-sys-color-background-caution-subtle;
54
54
  }
55
55
 
56
56
  .alert-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;
57
+ --color-bar: #{system-tokens.$si-sys-color-border-danger};
58
+ color: system-tokens.$si-sys-color-text-danger;
59
+ background: system-tokens.$si-sys-color-background-danger-subtle;
60
60
  }
61
61
 
62
62
  .alert-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;
63
+ --color-bar: #{system-tokens.$si-sys-color-border-critical};
64
+ color: system-tokens.$si-sys-color-text-critical;
65
+ background: system-tokens.$si-sys-color-background-critical-subtle;
66
66
  }
67
67
 
68
68
  .alert-info {
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;
69
+ --color-bar: #{system-tokens.$si-sys-color-border-information};
70
+ color: system-tokens.$si-sys-color-text-information;
71
+ background: system-tokens.$si-sys-color-background-information-subtle;
72
72
  }
package/src/styles/bootstrap/_badges.scss CHANGED
@@ -15,7 +15,7 @@
15
15
 
16
16
  .badge {
17
17
  display: inline-block;
18
- color: system-tokens.$si-sys-text-primary;
18
+ color: system-tokens.$si-sys-color-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: 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;
44
+ background-color: system-tokens.$si-sys-color-background-0 !important;
45
+ color: system-tokens.$si-sys-color-text-primary;
46
+ outline: 1px solid system-tokens.$si-sys-color-border-4;
47
47
  }
48
48
 
49
49
  &.bg-primary {
50
- background-color: system-tokens.$si-sys-background-accent !important;
51
- color: system-tokens.$si-sys-text-on-accent;
50
+ background-color: system-tokens.$si-sys-color-background-accent !important;
51
+ color: system-tokens.$si-sys-color-text-on-accent;
52
52
  }
53
53
 
54
54
  &.bg-secondary {
55
- background-color: system-tokens.$si-sys-background-neutral !important;
56
- color: system-tokens.$si-sys-text-primary;
55
+ background-color: system-tokens.$si-sys-color-background-neutral !important;
56
+ color: system-tokens.$si-sys-color-text-on-neutral;
57
57
  }
58
58
 
59
59
  &.bg-info {
60
- background-color: system-tokens.$si-sys-background-information-subtle !important;
61
- color: system-tokens.$si-sys-text-information;
60
+ background-color: system-tokens.$si-sys-color-background-information-subtle !important;
61
+ color: system-tokens.$si-sys-color-text-information;
62
62
  }
63
63
 
64
64
  &.bg-success {
65
- background-color: system-tokens.$si-sys-background-success-subtle !important;
66
- color: system-tokens.$si-sys-text-success;
65
+ background-color: system-tokens.$si-sys-color-background-success-subtle !important;
66
+ color: system-tokens.$si-sys-color-text-success;
67
67
  }
68
68
 
69
69
  &.bg-caution {
70
- background-color: system-tokens.$si-sys-background-caution-subtle !important;
71
- color: system-tokens.$si-sys-text-caution;
70
+ background-color: system-tokens.$si-sys-color-background-caution-subtle !important;
71
+ color: system-tokens.$si-sys-color-text-caution;
72
72
  }
73
73
 
74
74
  &.bg-warning {
75
- background-color: system-tokens.$si-sys-background-warning-subtle !important;
76
- color: system-tokens.$si-sys-text-warning;
75
+ background-color: system-tokens.$si-sys-color-background-warning-subtle !important;
76
+ color: system-tokens.$si-sys-color-text-warning;
77
77
  }
78
78
 
79
79
  &.bg-danger {
80
- background-color: system-tokens.$si-sys-background-danger-subtle !important;
81
- color: system-tokens.$si-sys-text-danger;
80
+ background-color: system-tokens.$si-sys-color-background-danger-subtle !important;
81
+ color: system-tokens.$si-sys-color-text-danger;
82
82
  }
83
83
 
84
84
  &.bg-critical {
85
- background-color: system-tokens.$si-sys-background-critical-subtle !important;
86
- color: system-tokens.$si-sys-text-critical;
85
+ background-color: system-tokens.$si-sys-color-background-critical-subtle !important;
86
+ color: system-tokens.$si-sys-color-text-critical;
87
87
  }
88
88
 
89
89
  &.bg-inverse {
90
- background-color: system-tokens.$si-sys-background-inverse !important;
91
- color: system-tokens.$si-sys-text-inverse;
90
+ background-color: system-tokens.$si-sys-color-background-inverse !important;
91
+ color: system-tokens.$si-sys-color-text-inverse;
92
92
  }
93
93
 
94
94
  &.bg-info-emphasis {
95
- background: system-tokens.$si-sys-background-information;
96
- color: system-tokens.$si-sys-text-on-information;
95
+ background: system-tokens.$si-sys-color-background-information;
96
+ color: system-tokens.$si-sys-color-text-on-information;
97
97
  @extend %badge-text-emphasis;
98
98
  }
99
99
 
100
100
  &.bg-success-emphasis {
101
- background: system-tokens.$si-sys-background-success;
102
- color: system-tokens.$si-sys-text-on-success;
101
+ background: system-tokens.$si-sys-color-background-success;
102
+ color: system-tokens.$si-sys-color-text-on-success;
103
103
  @extend %badge-text-emphasis;
104
104
  }
105
105
 
106
106
  &.bg-warning-emphasis {
107
- background: system-tokens.$si-sys-background-warning;
108
- color: system-tokens.$si-sys-text-on-warning;
107
+ background: system-tokens.$si-sys-color-background-warning;
108
+ color: system-tokens.$si-sys-color-text-on-warning;
109
109
  @extend %badge-text-emphasis;
110
110
  }
111
111
 
112
112
  &.bg-danger-emphasis {
113
- background: system-tokens.$si-sys-background-danger;
114
- color: system-tokens.$si-sys-text-on-danger;
113
+ background: system-tokens.$si-sys-color-background-danger;
114
+ color: system-tokens.$si-sys-color-text-on-danger;
115
115
  @extend %badge-text-emphasis;
116
116
  }
117
117
 
118
118
  &.bg-critical-emphasis {
119
- background: system-tokens.$si-sys-background-critical;
120
- color: system-tokens.$si-sys-text-on-critical;
119
+ background: system-tokens.$si-sys-color-background-critical;
120
+ color: system-tokens.$si-sys-color-text-on-critical;
121
121
  @extend %badge-text-emphasis;
122
122
  }
123
123
 
124
124
  &.bg-caution-emphasis {
125
- background: system-tokens.$si-sys-background-caution;
126
- color: system-tokens.$si-sys-text-on-caution;
125
+ background: system-tokens.$si-sys-color-background-caution;
126
+ color: system-tokens.$si-sys-color-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: system-tokens.$si-sys-background-danger;
149
+ background-color: system-tokens.$si-sys-color-background-danger;
150
150
  }
151
151
  }
152
152
 
153
153
  .badge-text {
154
154
  @include badge-text.badge-text();
155
- background-color: system-tokens.$si-sys-background-danger;
156
- color: system-tokens.$si-sys-text-on-danger;
155
+ background-color: system-tokens.$si-sys-color-background-danger;
156
+ color: system-tokens.$si-sys-color-text-on-danger;
157
157
  position: relative;
158
158
  }
159
159
 
package/src/styles/bootstrap/_button-group.scss CHANGED
@@ -88,11 +88,11 @@
88
88
  .btn-check + .btn,
89
89
  label.btn:has(.btn-check) {
90
90
  --btn-border-width: 1px;
91
- --btn-border-color: #{system-tokens.$si-sys-border-4};
92
- --btn-border-color-hover: #{system-tokens.$si-sys-border-4};
91
+ --btn-border-color: #{system-tokens.$si-sys-color-border-4};
92
+ --btn-border-color-hover: #{system-tokens.$si-sys-color-border-4};
93
93
  cursor: pointer;
94
94
  background: transparent;
95
- color: system-tokens.$si-sys-text-primary;
95
+ color: system-tokens.$si-sys-color-text-primary;
96
96
  transition: none;
97
97
 
98
98
  &.btn-icon {
@@ -114,20 +114,20 @@
114
114
 
115
115
  .btn-check + .btn:hover,
116
116
  label:has(.btn-check:not(:checked)):hover > * {
117
- color: system-tokens.$si-sys-text-accent-hover;
117
+ color: system-tokens.$si-sys-color-text-accent-hover;
118
118
  }
119
119
 
120
120
  .btn-check:checked {
121
121
  + .btn {
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;
122
+ background: system-tokens.$si-sys-color-background-accent-secondary-active;
123
+ border-color: system-tokens.$si-sys-color-border-accent-active;
124
+ color: system-tokens.$si-sys-color-text-accent-active;
125
125
  z-index: 2;
126
126
  }
127
127
 
128
128
  + .btn:hover,
129
129
  &:hover + .btn {
130
- color: system-tokens.$si-sys-text-primary;
130
+ color: system-tokens.$si-sys-color-text-primary;
131
131
  }
132
132
  }
133
133
 
package/src/styles/bootstrap/_buttons.scss CHANGED
@@ -13,7 +13,7 @@ $btn-icon-font-size: variables.$si-icon-font-size;
13
13
 
14
14
  // there are some non .btn buttons used in element
15
15
  button {
16
- color: system-tokens.$si-sys-text-primary;
16
+ color: system-tokens.$si-sys-color-text-primary;
17
17
  }
18
18
 
19
19
  :is(.btn, .btn-close) {
@@ -74,55 +74,55 @@ button {
74
74
  }
75
75
 
76
76
  .btn-primary {
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};
77
+ --btn-bg: #{system-tokens.$si-sys-color-background-accent};
78
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-accent-hover};
79
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-accent-active};
80
+ --btn-color: #{system-tokens.$si-sys-color-text-on-accent};
81
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-accent};
82
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-accent};
83
83
  }
84
84
 
85
85
  .btn-danger {
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};
86
+ --btn-bg: #{system-tokens.$si-sys-color-background-danger};
87
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-danger-hover};
88
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-danger-active};
89
+ --btn-color: #{system-tokens.$si-sys-color-text-on-danger};
90
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-danger};
91
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-danger};
92
92
  }
93
93
 
94
94
  .btn-warning {
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};
95
+ --btn-bg: #{system-tokens.$si-sys-color-background-warning};
96
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-warning-hover};
97
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-warning-active};
98
+ --btn-color: #{system-tokens.$si-sys-color-text-on-warning};
99
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-warning};
100
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-warning};
101
101
  }
102
102
 
103
103
  .btn-ghost {
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-active};
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};
104
+ --btn-bg: #{system-tokens.$si-sys-color-background-1};
105
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-hover};
106
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-active};
107
+ --btn-color: #{system-tokens.$si-sys-color-text-primary};
108
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-primary};
109
+ --btn-color-active: #{system-tokens.$si-sys-color-text-primary};
110
110
  }
111
111
 
112
112
  .btn-secondary,
113
113
  .btn-secondary-warning,
114
114
  .btn-secondary-danger,
115
115
  .btn-secondary-ghost {
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};
116
+ --btn-bg: #{system-tokens.$si-sys-color-background-accent-secondary};
117
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-accent-secondary-hover};
118
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-accent-secondary-active};
119
+ --btn-color: #{system-tokens.$si-sys-color-text-on-accent-secondary};
120
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-accent-secondary-hover};
121
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-accent-secondary-active};
122
122
  --btn-border-width: 1px;
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};
123
+ --btn-border-color: #{system-tokens.$si-sys-color-border-accent};
124
+ --btn-border-color-hover: #{system-tokens.$si-sys-color-border-accent-hover};
125
+ --btn-border-color-active: #{system-tokens.$si-sys-color-border-accent-active};
126
126
  }
127
127
 
128
128
  .btn-tertiary,
@@ -130,45 +130,45 @@ button {
130
130
  .btn-tertiary-danger,
131
131
  .btn-tertiary-ghost {
132
132
  --btn-bg: transparent;
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};
133
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-accent-secondary-hover};
134
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-accent-secondary-active};
135
+ --btn-color: #{system-tokens.$si-sys-color-text-on-accent-secondary};
136
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-accent-secondary-hover};
137
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-accent-secondary-active};
138
138
  }
139
139
 
140
140
  .btn-secondary-warning,
141
141
  .btn-tertiary-warning {
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};
142
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-warning-hover};
143
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-warning-active};
144
+ --btn-color: #{system-tokens.$si-sys-color-text-on-warning-secondary};
145
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-warning};
146
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-warning};
147
+ --btn-border-color: #{system-tokens.$si-sys-color-border-warning-secondary};
148
148
  --btn-border-color-hover: transparent;
149
149
  --btn-border-color-active: transparent;
150
150
  }
151
151
 
152
152
  .btn-secondary-danger,
153
153
  .btn-tertiary-danger {
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};
154
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-danger-hover};
155
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-danger-active};
156
+ --btn-color: #{system-tokens.$si-sys-color-text-on-danger-secondary};
157
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-danger};
158
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-danger};
159
+ --btn-border-color: #{system-tokens.$si-sys-color-border-danger-secondary};
160
160
  --btn-border-color-hover: transparent;
161
161
  --btn-border-color-active: transparent;
162
162
  }
163
163
 
164
164
  .btn-secondary-ghost,
165
165
  .btn-tertiary-ghost {
166
- --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
167
- --btn-bg-active: #{system-tokens.$si-sys-background-active};
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};
166
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-hover};
167
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-active};
168
+ --btn-color: #{system-tokens.$si-sys-color-text-primary};
169
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-primary};
170
+ --btn-color-active: #{system-tokens.$si-sys-color-text-primary};
171
+ --btn-border-color: #{system-tokens.$si-sys-color-border-3};
172
172
  --btn-border-color-hover: transparent;
173
173
  --btn-border-color-active: transparent;
174
174
  }
@@ -176,7 +176,7 @@ button {
176
176
  .btn-link {
177
177
  --btn-color: #{bootstrap-variables.$btn-link-color};
178
178
  --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
179
- --btn-color-active: #{system-tokens.$si-sys-text-accent-active};
179
+ --btn-color-active: #{system-tokens.$si-sys-color-text-accent-active};
180
180
  --btn-font-weight: #{typography.$si-font-weight-body};
181
181
  justify-content: flex-start;
182
182
  text-decoration: bootstrap-variables.$link-decoration;
@@ -227,17 +227,17 @@ button {
227
227
  .btn-close {
228
228
  --btn-font-weight: #{typography.$si-font-weight-normal};
229
229
  --btn-bg: transparent;
230
- --btn-bg-hover: #{system-tokens.$si-sys-background-hover};
231
- --btn-bg-active: #{system-tokens.$si-sys-background-active};
232
- --btn-color: #{system-tokens.$si-sys-text-primary};
233
- --btn-color-active: #{system-tokens.$si-sys-text-primary};
230
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-hover};
231
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-active};
232
+ --btn-color: #{system-tokens.$si-sys-color-text-primary};
233
+ --btn-color-active: #{system-tokens.$si-sys-color-text-primary};
234
234
 
235
235
  &.btn-tertiary {
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};
236
+ --btn-bg-hover: #{system-tokens.$si-sys-color-background-accent-secondary-hover};
237
+ --btn-bg-active: #{system-tokens.$si-sys-color-background-accent-secondary-active};
238
+ --btn-color: #{system-tokens.$si-sys-color-text-on-accent-secondary};
239
+ --btn-color-hover: #{system-tokens.$si-sys-color-text-on-accent-secondary-hover};
240
+ --btn-color-active: #{system-tokens.$si-sys-color-text-on-accent-secondary-active};
241
241
  }
242
242
 
243
243
  &::before {
package/src/styles/bootstrap/_card.scss CHANGED
@@ -44,61 +44,62 @@
44
44
 
45
45
  &.accent-primary {
46
46
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
47
- system-tokens.$si-sys-border-accent;
47
+ system-tokens.$si-sys-color-border-accent;
48
48
  }
49
49
 
50
50
  &.accent-inactive {
51
- border-inline-start: map.get(spacers.$spacers-inline, 4) solid system-tokens.$si-sys-border-4;
51
+ border-inline-start: map.get(spacers.$spacers-inline, 4) solid
52
+ system-tokens.$si-sys-color-border-4;
52
53
  }
53
54
 
54
55
  &.accent-info {
55
56
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
56
- system-tokens.$si-sys-border-information;
57
+ system-tokens.$si-sys-color-border-information;
57
58
  }
58
59
 
59
60
  &.accent-success {
60
61
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
61
- system-tokens.$si-sys-border-success;
62
+ system-tokens.$si-sys-color-border-success;
62
63
  }
63
64
 
64
65
  &.accent-warning {
65
66
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
66
- system-tokens.$si-sys-border-warning;
67
+ system-tokens.$si-sys-color-border-warning;
67
68
  }
68
69
 
69
70
  &.accent-caution {
70
71
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
71
- system-tokens.$si-sys-border-caution;
72
+ system-tokens.$si-sys-color-border-caution;
72
73
  }
73
74
 
74
75
  &.accent-danger {
75
76
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
76
- system-tokens.$si-sys-border-danger;
77
+ system-tokens.$si-sys-color-border-danger;
77
78
  }
78
79
 
79
80
  &.accent-critical {
80
81
  border-inline-start: map.get(spacers.$spacers-inline, 4) solid
81
- system-tokens.$si-sys-border-critical;
82
+ system-tokens.$si-sys-color-border-critical;
82
83
  }
83
84
 
84
85
  &.action-card:not(:disabled) {
85
86
  &:hover {
86
87
  &,
87
88
  .card-footer {
88
- background-color: system-tokens.$si-sys-background-hover;
89
+ background-color: system-tokens.$si-sys-color-background-hover;
89
90
  }
90
91
  }
91
92
 
92
93
  &:active {
93
94
  &,
94
95
  .card-footer {
95
- background-color: system-tokens.$si-sys-background-active;
96
+ background-color: system-tokens.$si-sys-color-background-active;
96
97
  }
97
98
  }
98
99
  }
99
100
 
100
101
  &.selected {
101
- box-shadow: 0 0 0 1px system-tokens.$si-sys-border-accent-active;
102
+ box-shadow: 0 0 0 1px system-tokens.$si-sys-color-border-accent-active;
102
103
  }
103
104
 
104
105
  &:focus-visible {
@@ -107,7 +108,7 @@
107
108
 
108
109
  &.card-outline {
109
110
  background-color: transparent;
110
- box-shadow: inset 0 0 0 1px system-tokens.$si-sys-border-4;
111
+ box-shadow: inset 0 0 0 1px system-tokens.$si-sys-color-border-4;
111
112
  }
112
113
  }
113
114
 
package/src/styles/bootstrap/_dropdowns.scss CHANGED
@@ -126,15 +126,15 @@
126
126
 
127
127
  // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
128
128
  &:hover {
129
- color: system-tokens.$si-sys-text-primary;
130
- background-color: system-tokens.$si-sys-background-hover;
129
+ color: system-tokens.$si-sys-color-text-primary;
130
+ background-color: system-tokens.$si-sys-color-background-hover;
131
131
  text-decoration: none;
132
132
  }
133
133
 
134
134
  // duplicating hover styles from bootstrap. To split them from focus styles. Otherwise hover on focus elements will not work.
135
135
  &:is(:active, .active) {
136
- color: var(--si-sys-text-primary);
137
- background-color: var(--si-sys-background-active);
136
+ color: var(--si-sys-color-text-primary);
137
+ background-color: var(--si-sys-color-background-active);
138
138
  }
139
139
 
140
140
  &:is(.disabled, :disabled) {
@@ -162,7 +162,7 @@
162
162
  // FIXME: drop when dropping si-menu-legacy
163
163
  .dropdown-item-static {
164
164
  &:is(.active, :active, :hover, :hover:focus:not(:focus-visible), :focus) {
165
- background-color: system-tokens.$si-sys-background-1;
165
+ background-color: system-tokens.$si-sys-color-background-1;
166
166
  }
167
167
  }
168
168
 
package/src/styles/bootstrap/_images.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  background-color: variables.$thumbnail-bg;
22
22
  border: variables.$thumbnail-border-width solid variables.$thumbnail-border-color;
23
23
  border-radius: variables.$thumbnail-border-radius;
24
- box-shadow: system-tokens.$si-sys-effects-shadow-1;
24
+ box-shadow: system-tokens.$si-sys-color-effects-shadow-1;
25
25
 
26
26
  // Keep them at most 100% wide
27
27
  @include image.img-fluid();