@siemens/element-theme 49.0.0-rc.1 → 49.0.0-rc.2

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_badges.scss +5 -5
  3. package/src/styles/bootstrap/_button-group.scss +31 -3
  4. package/src/styles/bootstrap/_buttons.scss +75 -34
  5. package/src/styles/bootstrap/_dropdowns.scss +2 -2
  6. package/src/styles/bootstrap/_modals.scss +2 -1
  7. package/src/styles/bootstrap/_tooltip.scss +1 -1
  8. package/src/styles/bootstrap/forms/_form-check.scss +30 -12
  9. package/src/styles/bootstrap/forms/_form-file.scss +5 -0
  10. package/src/styles/bootstrap/forms/_form-range.scss +10 -0
  11. package/src/styles/bootstrap/forms/_validation.scss +41 -31
  12. package/src/styles/components/_application-header.scss +5 -6
  13. package/src/styles/components/_datatable.scss +1 -0
  14. package/src/styles/components/_icons.scss +6 -2
  15. package/src/styles/components/_links.scss +8 -15
  16. package/src/styles/components/_switch.scss +4 -0
  17. package/src/styles/variables/_semantic-tokens.scss +6 -0
  18. package/src/styles/variables/_si-vars.scss +4 -3
  19. package/src/theme/_theme-element.scss +6 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "49.0.0-rc.1",
3
+ "version": "49.0.0-rc.2",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/bootstrap/_badges.scss CHANGED
@@ -125,10 +125,10 @@
125
125
  }
126
126
 
127
127
  .icon {
128
- font-size: 20px;
129
- margin-inline-start: -4px;
130
- vertical-align: top;
131
128
  padding-block: map.get(spacers.$spacers, 1);
129
+ margin-inline-start: -4px;
130
+ margin-inline-end: map.get(spacers.$spacers, 1);
131
+ vertical-align: bottom;
132
132
  }
133
133
  }
134
134
 
@@ -162,8 +162,8 @@
162
162
  font-weight: typography.$si-font-weight-semibold;
163
163
  }
164
164
 
165
- .icon + .badge-text {
166
- inset-block-start: -5px;
165
+ :is(.icon, .icon-sm, .icon-lg) + .badge-text {
166
+ inset-block-start: -8px;
167
167
  inset-inline-start: -12px;
168
168
  margin-inline-end: -12px;
169
169
  }
package/src/styles/bootstrap/_button-group.scss CHANGED
@@ -6,6 +6,10 @@
6
6
 
7
7
  @use 'sass:map';
8
8
 
9
+ $btn-size-default: 32px !default;
10
+ $btn-size-lg: 40px !default;
11
+ $btn-size-sm: 24px !default;
12
+
9
13
  .btn-group {
10
14
  position: relative;
11
15
  display: inline-flex;
@@ -52,9 +56,31 @@
52
56
  margin-inline-start: -1px;
53
57
  }
54
58
 
59
+ .btn {
60
+ block-size: $btn-size-default;
61
+
62
+ &.btn-lg {
63
+ block-size: $btn-size-lg;
64
+ }
65
+
66
+ &.btn-sm {
67
+ block-size: $btn-size-sm;
68
+ }
69
+ }
70
+
71
+ .btn-icon,
72
+ // @deprecated Will be removed in a future major version, use .btn-icon instead.
73
+ .icon-only {
74
+ inline-size: $btn-size-default;
75
+
76
+ &.btn-lg {
77
+ inline-size: $btn-size-lg;
78
+ }
79
+ }
80
+
55
81
  // Dropdown toggle styling for split buttons
56
82
  .btn.dropdown-toggle {
57
- inline-size: 24px;
83
+ inline-size: $btn-size-sm;
58
84
  padding: 0;
59
85
  border-start-start-radius: 0;
60
86
  border-end-start-radius: 0;
@@ -81,11 +107,13 @@
81
107
  transition: none;
82
108
 
83
109
  &.btn-icon {
110
+ inline-size: auto;
84
111
  padding-inline: map.get(spacers.$spacers, 5) - 1px;
85
112
  }
86
113
 
87
114
  // @deprecated Will be removed in a future major version, use .btn-icon instead.
88
115
  &.icon-only {
116
+ inline-size: auto;
89
117
  min-inline-size: unset;
90
118
  padding-inline: map.get(spacers.$spacers, 5) - 1px;
91
119
 
@@ -97,11 +125,11 @@
97
125
 
98
126
  &:checked + .btn,
99
127
  + .btn:hover {
100
- color: semantic-tokens.$element-action-secondary-text-hover;
128
+ color: semantic-tokens.$element-ui-0-hover;
101
129
  }
102
130
 
103
131
  &:checked + .btn {
104
- background: semantic-tokens.$element-action-secondary-hover;
132
+ background: semantic-tokens.$element-action-secondary-active;
105
133
  border-color: semantic-tokens.$element-action-secondary-border-hover;
106
134
  z-index: 2;
107
135
 
package/src/styles/bootstrap/_buttons.scss CHANGED
@@ -8,18 +8,19 @@
8
8
 
9
9
  @use 'sass:map';
10
10
 
11
- $btn-circle-font-size-default: 32px !default;
12
- $btn-circle-font-size-sm: 24px !default;
13
- $btn-circle-size-default: 40px !default;
14
- $btn-circle-size-sm: 32px !default;
15
- $btn-circle-size-xs: 24px !default;
11
+ $btn-icon-font-size-default: variables.$si-icon-font-size !default;
12
+ $btn-icon-font-size-lg: variables.$si-icon-font-size-lg !default;
13
+ $btn-icon-font-size-sm: variables.$si-icon-font-size !default;
14
+ $btn-icon-size-default: 32px !default;
15
+ $btn-icon-size-lg: 40px !default;
16
+ $btn-icon-size-sm: 24px !default;
16
17
 
17
18
  // there are some non .btn buttons used in element
18
19
  button {
19
20
  color: semantic-tokens.$element-text-primary;
20
21
  }
21
22
 
22
- @mixin button-circle-size($btn-size, $font-size) {
23
+ @mixin button-icon-size($btn-size, $font-size) {
23
24
  inline-size: $btn-size;
24
25
  block-size: $btn-size;
25
26
  font-size: $font-size;
@@ -49,29 +50,27 @@ button {
49
50
  }
50
51
 
51
52
  // If the case of a link looking like a button <a class="btn btn-primary" href="#" target="_blank">Go Back</a>,
52
- // the hover effect from the <a> element needs to be reset.
53
- &:hover {
53
+ // the hover/active effect from the <a> element needs to be reset.
54
+ &:is(:hover, :active) {
54
55
  text-decoration: none;
55
56
  }
56
57
 
57
- &:not(:is(:disabled, .disabled)):is(:active, .active, :hover, .hover) {
58
+ &:not(:is(:disabled, .disabled)):is(:hover, .hover) {
58
59
  color: var(--btn-color-hover, inherit);
59
60
  background: var(--btn-bg-hover, inherit);
60
61
  border-color: var(--btn-border-color-hover);
61
62
  }
62
63
 
64
+ &:not(:is(:disabled, .disabled)):is(:active, .active) {
65
+ color: var(--btn-color-active, inherit);
66
+ background: var(--btn-bg-active, inherit);
67
+ border-color: var(--btn-border-color-active);
68
+ }
69
+
63
70
  .icon {
64
71
  margin-block: -#{map.get(spacers.$spacers, 2)};
65
72
  margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
66
73
  }
67
-
68
- &.btn-icon {
69
- padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));
70
-
71
- .icon {
72
- margin-inline: 0;
73
- }
74
- }
75
74
  }
76
75
 
77
76
  .btn:not(:is(.btn-circle, .btn-link, .btn-close, .btn-icon)) {
@@ -81,22 +80,28 @@ button {
81
80
  .btn-primary {
82
81
  --btn-bg: #{semantic-tokens.$element-action-primary};
83
82
  --btn-bg-hover: #{semantic-tokens.$element-action-primary-hover};
83
+ --btn-bg-active: #{semantic-tokens.$element-action-primary-active};
84
84
  --btn-color: #{semantic-tokens.$element-action-primary-text};
85
85
  --btn-color-hover: #{semantic-tokens.$element-action-primary-text};
86
+ --btn-color-active: #{semantic-tokens.$element-action-primary-text};
86
87
  }
87
88
 
88
89
  .btn-danger {
89
90
  --btn-bg: #{semantic-tokens.$element-action-danger};
90
91
  --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
92
+ --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
91
93
  --btn-color: #{semantic-tokens.$element-action-danger-text};
92
94
  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
95
+ --btn-color-active: #{semantic-tokens.$element-action-danger-text};
93
96
  }
94
97
 
95
98
  .btn-warning {
96
99
  --btn-bg: #{semantic-tokens.$element-action-warning};
97
100
  --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
101
+ --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
98
102
  --btn-color: #{semantic-tokens.$element-action-warning-text};
99
103
  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
104
+ --btn-color-active: #{semantic-tokens.$element-action-warning-text};
100
105
  }
101
106
 
102
107
  .btn-secondary,
@@ -104,11 +109,14 @@ button {
104
109
  .btn-secondary-danger {
105
110
  --btn-bg: #{semantic-tokens.$element-action-secondary};
106
111
  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
112
+ --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
107
113
  --btn-color: #{semantic-tokens.$element-action-secondary-text};
108
114
  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
115
+ --btn-color-active: #{semantic-tokens.$element-action-primary-active};
109
116
  --btn-border-width: 1px;
110
117
  --btn-border-color: #{semantic-tokens.$element-action-secondary-border};
111
118
  --btn-border-color-hover: #{semantic-tokens.$element-action-secondary-border-hover};
119
+ --btn-border-color-active: #{semantic-tokens.$element-action-secondary-border-active};
112
120
  }
113
121
 
114
122
  .btn-tertiary,
@@ -116,37 +124,46 @@ button {
116
124
  .btn-tertiary-danger {
117
125
  --btn-bg: transparent;
118
126
  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
127
+ --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
119
128
  --btn-color: #{semantic-tokens.$element-action-secondary-text};
120
129
  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
130
+ --btn-color-active: #{semantic-tokens.$element-action-primary-active};
121
131
  }
122
132
 
123
133
  .btn-secondary-warning,
124
134
  .btn-tertiary-warning {
125
135
  --btn-bg-hover: #{semantic-tokens.$element-action-warning-hover};
136
+ --btn-bg-active: #{semantic-tokens.$element-action-warning-active};
126
137
  --btn-color: #{semantic-tokens.$element-action-secondary-warning};
127
138
  --btn-color-hover: #{semantic-tokens.$element-action-warning-text};
139
+ --btn-color-active: #{semantic-tokens.$element-action-warning-text};
128
140
  --btn-border-color: #{semantic-tokens.$element-action-secondary-warning};
129
141
  --btn-border-color-hover: #{semantic-tokens.$element-action-warning-hover};
142
+ --btn-border-color-active: #{semantic-tokens.$element-action-warning-active};
130
143
  }
131
144
 
132
145
  .btn-secondary-danger,
133
146
  .btn-tertiary-danger {
134
147
  --btn-bg-hover: #{semantic-tokens.$element-action-danger-hover};
148
+ --btn-bg-active: #{semantic-tokens.$element-action-danger-active};
135
149
  --btn-color: #{semantic-tokens.$element-action-secondary-danger};
136
150
  --btn-color-hover: #{semantic-tokens.$element-action-danger-text};
151
+ --btn-color-active: #{semantic-tokens.$element-action-danger-text};
137
152
  --btn-border-color: #{semantic-tokens.$element-action-secondary-danger};
138
153
  --btn-border-color-hover: #{semantic-tokens.$element-action-danger-hover};
154
+ --btn-border-color-active: #{semantic-tokens.$element-action-danger-active};
139
155
  }
140
156
 
141
157
  .btn-link {
142
158
  --btn-color: #{bootstrap-variables.$btn-link-color};
143
159
  --btn-color-hover: #{bootstrap-variables.$btn-link-hover-color};
160
+ --btn-color-active: #{semantic-tokens.$element-action-primary-active};
144
161
  font-weight: typography.$si-font-weight-body;
145
162
  justify-content: flex-start;
146
163
  text-decoration: bootstrap-variables.$link-decoration;
147
164
  padding: 0;
148
165
 
149
- &:hover {
166
+ &:is(:hover, :active) {
150
167
  text-decoration: bootstrap-variables.$link-hover-decoration;
151
168
  }
152
169
 
@@ -156,26 +173,38 @@ button {
156
173
  }
157
174
  }
158
175
 
159
- // Circle Buttons
176
+ // Icon buttons with circle variant
160
177
  // --------------
161
- :is(.btn-circle, .btn-close) {
162
- padding: 0 !important; // stylelint-disable-line declaration-no-important
163
- border-radius: 50%;
178
+ .btn:is(.btn-circle, .btn-icon, .btn-close) {
179
+ display: inline-flex;
180
+ padding: 0;
164
181
  flex-shrink: 0;
182
+
183
+ .icon {
184
+ margin-inline: 0;
185
+ }
186
+ }
187
+
188
+ .btn-icon {
189
+ border-radius: semantic-tokens.$element-button-radius;
165
190
  }
166
191
 
167
192
  .btn-circle {
168
- &,
169
- &.btn-lg {
170
- @include button-circle-size($btn-circle-size-default, $btn-circle-font-size-default);
193
+ border-radius: 50%;
194
+ }
195
+
196
+ .btn-circle,
197
+ .btn-icon {
198
+ & {
199
+ @include button-icon-size($btn-icon-size-default, $btn-icon-font-size-default);
171
200
  }
172
201
 
173
- &.btn-sm {
174
- @include button-circle-size($btn-circle-size-sm, $btn-circle-font-size-sm);
202
+ &.btn-lg {
203
+ @include button-icon-size($btn-icon-size-lg, $btn-icon-font-size-lg);
175
204
  }
176
205
 
177
- &.btn-xs {
178
- @include button-circle-size($btn-circle-size-xs, $btn-circle-font-size-sm);
206
+ &.btn-sm {
207
+ @include button-icon-size($btn-icon-size-sm, $btn-icon-font-size-sm);
179
208
  }
180
209
 
181
210
  .icon {
@@ -185,11 +214,21 @@ button {
185
214
  }
186
215
 
187
216
  .btn-circle.btn-ghost,
217
+ .btn-icon.btn-ghost,
188
218
  .btn-close {
189
219
  --btn-bg: transparent;
220
+ --btn-bg-hover: #{variables.$element-base-1-hover};
221
+ --btn-bg-active: #{variables.$element-base-1-selected};
222
+ --btn-color: #{semantic-tokens.$element-ui-1};
223
+ --btn-color-active: #{semantic-tokens.$element-ui-1};
224
+ }
225
+
226
+ .btn-close.btn-tertiary {
190
227
  --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
191
- --btn-color: #{semantic-tokens.$element-ui-2};
192
- --btn-color-hover: #{semantic-tokens.$element-ui-1};
228
+ --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
229
+ --btn-color: #{semantic-tokens.$element-action-secondary-text};
230
+ --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
231
+ --btn-color-active: #{semantic-tokens.$element-action-primary-active};
193
232
  }
194
233
 
195
234
  .btn-lg {
@@ -199,19 +238,18 @@ button {
199
238
 
200
239
  .btn-sm {
201
240
  font-size: bootstrap-variables.$btn-font-size-sm;
202
- line-height: 1;
241
+ line-height: map.get(spacers.$spacers, 4);
203
242
  }
204
243
 
205
244
  // this is for compatibility so that old markup looks ok-ish
206
245
  .btn-close {
207
- @include button-circle-size($btn-circle-size-sm, $btn-circle-font-size-sm);
246
+ @include button-icon-size($btn-icon-size-default, $btn-icon-font-size-default);
208
247
 
209
248
  font-weight: typography.$si-font-weight-normal;
210
249
 
211
250
  &::before {
212
251
  content: '\002715';
213
252
  font-size: 1rem;
214
- margin-block-start: 2px;
215
253
  }
216
254
 
217
255
  > * {
@@ -223,11 +261,14 @@ button {
223
261
  .btn-input {
224
262
  --btn-bg: #{bootstrap-variables.$input-bg};
225
263
  --btn-bg-hover: #{bootstrap-variables.$input-bg};
264
+ --btn-bg-active: #{bootstrap-variables.$input-bg};
226
265
  --btn-color: #{bootstrap-variables.$input-color};
227
266
  --btn-color-hover: #{bootstrap-variables.$input-color};
267
+ --btn-color-active: #{bootstrap-variables.$input-color};
228
268
  --btn-border-width: 1px;
229
269
  --btn-border-color: #{semantic-tokens.$element-ui-2};
230
270
  --btn-border-color-hover: #{semantic-tokens.$element-ui-1};
271
+ --btn-border-color-active: #{semantic-tokens.$element-ui-1};
231
272
 
232
273
  @include typography.si-font(
233
274
  typography.$si-font-size-body,
package/src/styles/bootstrap/_dropdowns.scss CHANGED
@@ -53,8 +53,8 @@
53
53
  .dropdown-caret {
54
54
  padding-inline-start: map.get(spacers.$spacers, 2);
55
55
  margin-block: -#{map.get(spacers.$spacers, 2)};
56
- margin-inline: auto -#{map.get(spacers.$spacers, 4)};
57
- font-size: 1.5rem !important; // stylelint-disable-line declaration-no-important
56
+ margin-inline: auto -#{map.get(spacers.$spacers, 2)};
57
+ font-size: variables.$si-icon-font-size !important; // stylelint-disable-line declaration-no-important
58
58
  transform: rotate(var(--caret-rotate));
59
59
  // adjust the origin to account for the negative margin. Otherwise the element would visually not rotate around the center.
60
60
  transform-origin: calc(50% + #{map.get(spacers.$spacers, 1)}) 50%;
package/src/styles/bootstrap/_modals.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use '../variables/spacers';
2
2
  @use '../variables/typography';
3
3
  @use '../variables/zindex';
4
+ @use '../variables/si-vars';
4
5
  @use './functions';
5
6
  @use './mixins/backdrop';
6
7
  @use './mixins/breakpoints';
@@ -86,7 +87,7 @@
86
87
  }
87
88
 
88
89
  .icon {
89
- font-size: 2rem;
90
+ font-size: si-vars.$si-icon-font-size-lg;
90
91
  margin-inline-end: map.get(spacers.$spacers, 4);
91
92
  }
92
93
 
package/src/styles/bootstrap/_tooltip.scss CHANGED
@@ -13,10 +13,10 @@
13
13
  font-size: variables.$tooltip-font-size;
14
14
  // Allow breaking very long words so they don't overflow the tooltip's bounds
15
15
  word-wrap: break-word;
16
- opacity: 0;
17
16
 
18
17
  &.show {
19
18
  opacity: variables.$tooltip-opacity;
19
+ transform: scale(1);
20
20
  }
21
21
 
22
22
  .tooltip-arrow {
package/src/styles/bootstrap/forms/_form-check.scss CHANGED
@@ -52,6 +52,11 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
52
52
  background: semantic-tokens.$element-action-secondary-hover;
53
53
  }
54
54
 
55
+ &:is(:active, .active) {
56
+ border-color: semantic-tokens.$element-action-primary-active;
57
+ background: semantic-tokens.$element-action-secondary-active;
58
+ }
59
+
55
60
  &:is([disabled], .disabled) {
56
61
  border-color: semantic-tokens.$element-ui-3;
57
62
  background-color: semantic-tokens.$element-ui-5;
@@ -77,12 +82,17 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
77
82
  }
78
83
 
79
84
  &:is(:checked, .checked) {
80
- background-color: semantic-tokens.$element-ui-0;
81
- border-color: semantic-tokens.$element-ui-0;
85
+ background-color: semantic-tokens.$element-action-primary;
86
+ border-color: semantic-tokens.$element-action-primary;
82
87
 
83
88
  &:hover {
84
- background-color: semantic-tokens.$element-ui-0-hover;
85
- border-color: semantic-tokens.$element-ui-0-hover;
89
+ background-color: semantic-tokens.$element-action-primary-hover;
90
+ border-color: semantic-tokens.$element-action-primary-hover;
91
+ }
92
+
93
+ &:active {
94
+ background-color: semantic-tokens.$element-action-primary-active;
95
+ border-color: semantic-tokens.$element-action-primary-active;
86
96
  }
87
97
 
88
98
  &::after {
@@ -97,11 +107,11 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
97
107
  }
98
108
 
99
109
  &:indeterminate {
100
- border-color: semantic-tokens.$element-ui-0;
110
+ border-color: semantic-tokens.$element-action-primary;
101
111
 
102
112
  &::after {
103
113
  mask-image: none;
104
- background-color: semantic-tokens.$element-ui-0;
114
+ background-color: semantic-tokens.$element-action-primary;
105
115
  inline-size: 10px;
106
116
  block-size: 2px;
107
117
  opacity: 1;
@@ -110,10 +120,10 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
110
120
  }
111
121
 
112
122
  &:hover {
113
- border-color: semantic-tokens.$element-ui-0-hover;
123
+ border-color: semantic-tokens.$element-action-primary-hover;
114
124
 
115
125
  &::after {
116
- background-color: semantic-tokens.$element-ui-0-hover;
126
+ background-color: semantic-tokens.$element-action-primary-hover;
117
127
  }
118
128
  }
119
129
 
@@ -145,17 +155,25 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
145
155
  }
146
156
 
147
157
  &:checked {
148
- border-color: semantic-tokens.$element-ui-0;
158
+ border-color: semantic-tokens.$element-action-primary;
149
159
 
150
160
  &::after {
151
- background-color: semantic-tokens.$element-ui-0;
161
+ background-color: semantic-tokens.$element-action-primary;
152
162
  }
153
163
 
154
164
  &:hover {
155
- border-color: semantic-tokens.$element-ui-0-hover;
165
+ border-color: semantic-tokens.$element-action-primary-hover;
166
+
167
+ &::after {
168
+ background-color: semantic-tokens.$element-action-primary-hover;
169
+ }
170
+ }
171
+
172
+ &:active {
173
+ border-color: semantic-tokens.$element-action-primary-active;
156
174
 
157
175
  &::after {
158
- background-color: semantic-tokens.$element-ui-0-hover;
176
+ background-color: semantic-tokens.$element-action-primary-active;
159
177
  }
160
178
  }
161
179
 
package/src/styles/bootstrap/forms/_form-file.scss CHANGED
@@ -26,4 +26,9 @@
26
26
  color: semantic-tokens.$element-action-secondary-text-hover;
27
27
  background: semantic-tokens.$element-action-secondary-hover;
28
28
  }
29
+
30
+ &:active::file-selector-button {
31
+ color: semantic-tokens.$element-action-primary-active;
32
+ background: semantic-tokens.$element-action-secondary-active;
33
+ }
29
34
  }
package/src/styles/bootstrap/forms/_form-range.scss CHANGED
@@ -31,6 +31,16 @@ $thumb-size: 24px !default;
31
31
  semantic-tokens.$element-action-secondary-hover 36%
32
32
  );
33
33
  }
34
+
35
+ &:active {
36
+ border-color: semantic-tokens.$element-action-primary-active;
37
+ background: radial-gradient(
38
+ circle,
39
+ semantic-tokens.$element-action-primary-active 0%,
40
+ semantic-tokens.$element-action-primary-active 35%,
41
+ semantic-tokens.$element-action-secondary-active 36%
42
+ );
43
+ }
34
44
  }
35
45
 
36
46
  .form-range {
package/src/styles/bootstrap/forms/_validation.scss CHANGED
@@ -24,6 +24,41 @@
24
24
  }
25
25
  }
26
26
 
27
+ @mixin form-validation-state-selector-wrapper($state) {
28
+ @if ($state == 'invalid') {
29
+ &:has(.was-validated &:#{$state}),
30
+ &:has(.ng-touched.ng-#{$state}),
31
+ &:has(.is-#{$state}) {
32
+ @content;
33
+ }
34
+ } @else {
35
+ &.is-#{$state},
36
+ &:has(.is-#{$state}) {
37
+ @content;
38
+ }
39
+ }
40
+ }
41
+
42
+ // Apply common styles for form validation states
43
+ @mixin form-validation-styles($state, $color, $icon) {
44
+ @if ($state and $icon) {
45
+ --si-feedback-icon: #{$icon};
46
+ --si-feedback-icon-offset: 1.5rem;
47
+ }
48
+
49
+ @if $color {
50
+ &:not(.no-validation):not(:hover),
51
+ &:not(.no-validation):focus {
52
+ --border-color: #{$color};
53
+ }
54
+ }
55
+
56
+ ~ .#{$state}-feedback {
57
+ display: flex !important; // stylelint-disable-line declaration-no-important
58
+ flex-direction: column;
59
+ }
60
+ }
61
+
27
62
  %state-feedback {
28
63
  font-size: variables.$form-feedback-font-size;
29
64
  display: none;
@@ -39,44 +74,19 @@
39
74
  color: $text-color;
40
75
  }
41
76
 
42
- :is(.form-control, .form-select, .form-control-wrapper) {
77
+ :is(.form-control, .form-select) {
43
78
  @include form-validation-state-selector($state) {
44
- @if ($state and $icon) {
45
- --si-feedback-icon: #{$icon};
46
- --si-feedback-icon-offset: 1.5rem;
47
- }
48
-
49
- @if $color {
50
- &:not(.no-validation):not(:hover),
51
- &:not(.no-validation):focus {
52
- --border-color: #{$color};
53
- }
54
- }
55
-
56
- ~ .#{$state}-feedback {
57
- display: flex !important; // stylelint-disable-line declaration-no-important
58
- flex-direction: column;
59
- }
79
+ @include form-validation-styles($state, $color, $icon);
60
80
  }
61
81
  }
62
82
 
63
- .form-control-file {
64
- @include form-validation-state-selector($state) {
65
- ~ .#{$state}-feedback {
66
- display: block;
67
- }
68
- }
69
- }
70
-
71
- .form-check-input {
72
- @include form-validation-state-selector($state) {
73
- ~ .#{$state}-feedback {
74
- display: block;
75
- }
83
+ .form-control-wrapper {
84
+ @include form-validation-state-selector-wrapper($state) {
85
+ @include form-validation-styles($state, $color, $icon);
76
86
  }
77
87
  }
78
88
 
79
- .form-custom-control {
89
+ :is(.form-control-file, .form-check-input, .form-custom-control) {
80
90
  @include form-validation-state-selector($state) {
81
91
  ~ .#{$state}-feedback {
82
92
  display: block;
package/src/styles/components/_application-header.scss CHANGED
@@ -31,8 +31,9 @@
31
31
  align-items: stretch;
32
32
  border-block-end: 1px solid semantic-tokens.$element-ui-4;
33
33
 
34
- // hide border when mobile styles are applied and either the dropdown-menu or header-toggle is shown
35
- &:has(.dropdown-menu.show, .header-toggle.show) {
34
+ // hide border when mobile styles are applied and either the dropdown-menu is shown or navigation is expanded
35
+ &:has(.dropdown-menu.show),
36
+ &.show-navigation {
36
37
  border-block-end: none;
37
38
  }
38
39
 
@@ -119,9 +120,7 @@
119
120
  .header-toggle {
120
121
  color: semantic-tokens.$element-text-primary;
121
122
  border: 0;
122
- line-height: 0;
123
- padding: map.get(spacers.$spacers, 4);
124
- font-size: 32px;
123
+ padding: map.get(spacers.$spacers, 5);
125
124
  background-color: transparent; // remove default button style
126
125
 
127
126
  &:is(:hover, .show, :active) {
@@ -148,7 +147,7 @@
148
147
  border: 0;
149
148
  white-space: nowrap;
150
149
 
151
- .icon {
150
+ .icon-lg {
152
151
  margin-block: -3px;
153
152
 
154
153
  ~ .item-title {
package/src/styles/components/_datatable.scss CHANGED
@@ -214,6 +214,7 @@ $datatable-ghost-cell-strip-radius: 0 !default;
214
214
 
215
215
  .sort-btn {
216
216
  color: $datatable-header-color !important; // stylelint-disable-line declaration-no-important
217
+ margin-inline-start: map.get(spacers.$spacers, 1);
217
218
  }
218
219
 
219
220
  // Resizable handle
package/src/styles/components/_icons.scss CHANGED
@@ -5,8 +5,12 @@
5
5
  font-size: variables.$si-icon-font-size;
6
6
  }
7
7
 
8
- .icon-small {
9
- font-size: variables.$si-icon-font-size-small;
8
+ .icon-sm {
9
+ font-size: variables.$si-icon-font-size-sm;
10
+ }
11
+
12
+ .icon-lg {
13
+ font-size: variables.$si-icon-font-size-lg;
10
14
  }
11
15
 
12
16
  .spinning {
package/src/styles/components/_links.scss CHANGED
@@ -1,15 +1,16 @@
1
1
  @use '../variables/semantic-tokens';
2
+ @use '../variables/si-vars';
2
3
 
3
4
  @use 'sass:math';
4
5
  // so that @extend works
5
6
  @use '../bootstrap/reboot';
6
7
 
7
- $si-link-icon-size: math.div(20em, 14);
8
- $si-link-icon-line-height: math.div(14em, 20);
9
- $si-link-icon-spacing: math.div(4em, 20);
8
+ $si-link-icon-size: math.div(16em, 14);
9
+ $si-link-icon-line-height: math.div(14em, 16);
10
+ $si-link-icon-spacing: math.div(4em, 16);
10
11
 
11
12
  a:active {
12
- color: semantic-tokens.$element-ui-0-hover;
13
+ color: semantic-tokens.$element-action-primary-active;
13
14
  text-decoration: underline;
14
15
  }
15
16
 
@@ -23,17 +24,9 @@ a:active {
23
24
  }
24
25
 
25
26
  .link-icon {
26
- font-size: $si-link-icon-size !important; // stylelint-disable-line declaration-no-important
27
+ font-size: si-vars.$si-icon-font-size-sm !important; // stylelint-disable-line declaration-no-important
27
28
  line-height: $si-link-icon-line-height !important; // stylelint-disable-line declaration-no-important
28
- margin-block-start: -(math.div(20em - 14em, 2 * 20) + math.div(2.5em, 20));
29
- margin-block-end: math.div(20em - 14em, -2 * 20);
29
+ margin-block-start: -(math.div(16em - 14em, 2 * 16) + math.div(2.5em, 16));
30
+ margin-block-end: math.div(16em - 14em, -2 * 16);
30
31
  vertical-align: middle;
31
32
  }
32
-
33
- .link-start {
34
- margin-inline-end: $si-link-icon-spacing;
35
- }
36
-
37
- .link-end {
38
- margin-inline-start: $si-link-icon-spacing;
39
- }
package/src/styles/components/_switch.scss CHANGED
@@ -59,6 +59,10 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
59
59
  background-color: variables.$element-ui-0-hover;
60
60
  }
61
61
 
62
+ &:active {
63
+ background-color: variables.$element-action-primary-active;
64
+ }
65
+
62
66
  &:is(:disabled, .disabled) {
63
67
  background-color: $si-switch-background-on-color;
64
68
  }
package/src/styles/variables/_semantic-tokens.scss CHANGED
@@ -34,20 +34,25 @@ $element-radius-3: var(--element-radius-3);
34
34
 
35
35
  $element-action-primary: var(--element-action-primary);
36
36
  $element-action-primary-hover: var(--element-action-primary-hover);
37
+ $element-action-primary-active: var(--element-action-primary-active);
37
38
  $element-action-primary-text: var(--element-action-primary-text);
38
39
  $element-action-secondary: var(--element-action-secondary);
39
40
  $element-action-secondary-hover: var(--element-action-secondary-hover);
41
+ $element-action-secondary-active: var(--element-action-secondary-active);
40
42
  $element-action-secondary-text: var(--element-action-secondary-text);
41
43
  $element-action-secondary-text-hover: var(--element-action-secondary-text-hover);
42
44
  $element-action-secondary-border: var(--element-action-secondary-border);
43
45
  $element-action-secondary-border-hover: var(--element-action-secondary-border-hover);
46
+ $element-action-secondary-border-active: var(--element-action-secondary-border-active);
44
47
  $element-action-secondary-warning: var(--element-action-secondary-warning);
45
48
  $element-action-secondary-danger: var(--element-action-secondary-danger);
46
49
  $element-action-warning: var(--element-action-warning);
47
50
  $element-action-warning-hover: var(--element-action-warning-hover);
51
+ $element-action-warning-active: var(--element-action-warning-active);
48
52
  $element-action-warning-text: var(--element-action-warning-text);
49
53
  $element-action-danger: var(--element-action-danger);
50
54
  $element-action-danger-hover: var(--element-action-danger-hover);
55
+ $element-action-danger-active: var(--element-action-danger-active);
51
56
  $element-action-danger-text: var(--element-action-danger-text);
52
57
  $element-action-disabled-opacity: var(--element-action-disabled-opacity);
53
58
 
@@ -88,6 +93,7 @@ $element-brand-logo: var(--element-brand-logo);
88
93
  $element-brand-logo-width: var(--element-brand-logo-width);
89
94
  $element-brand-logo-height: var(--element-brand-logo-height);
90
95
  $element-brand-logo-text: var(--element-brand-logo-text);
96
+ $element-brand-ai-key-visual: var(--element-brand-ai-key-visual);
91
97
 
92
98
  $element-company-name: var(--element-company-name);
93
99
 
package/src/styles/variables/_si-vars.scss CHANGED
@@ -2,10 +2,11 @@
2
2
 
3
3
  // Custom variables
4
4
  $si-caret-transition-duration: animations.element-transition-duration(0.4s);
5
- $si-icon-font-size: 1.5rem;
6
- $si-icon-font-size-small: 1rem;
5
+ $si-icon-font-size: 1.25rem;
6
+ $si-icon-font-size-sm: 1rem;
7
+ $si-icon-font-size-lg: 1.5rem;
7
8
 
8
- $btn-width-normal: 100px;
9
+ $btn-width-normal: 80px;
9
10
 
10
11
  // Component styling
11
12
  $si-application-header-height: 48px;
package/src/theme/_theme-element.scss CHANGED
@@ -217,7 +217,9 @@ $theme-element-light: (
217
217
  element-feedback-icon-valid:
218
218
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c703f' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
219
219
  element-launchpad-app-background: base.$color-blue-300,
220
- element-launchpad-app-color: base.$color-black
220
+ element-launchpad-app-color: base.$color-black,
221
+ element-ai-key-visual:
222
+ url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='black'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='black'/></svg>")
221
223
  );
222
224
 
223
225
  $theme-element-dark: (
@@ -366,5 +368,7 @@ $theme-element-dark: (
366
368
  element-feedback-icon-valid:
367
369
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328bf66' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bstroke-width:0%7D%3C/style%3E%3C/defs%3E%3Cpath d='M222.25 345.88c-5.12 0-10.24-1.95-14.14-5.86l-56.25-56.25c-7.81-7.81-7.81-20.47 0-28.28s20.47-7.81 28.28 0l42.11 42.11 109.61-109.61c7.81-7.81 20.47-7.81 28.28 0s7.81 20.47 0 28.28L236.39 340.02a19.92 19.92 0 0 1-14.14 5.86Z'/%3E%3Cpath d='M256 448c-105.87 0-192-86.13-192-192S150.13 64 256 64s192 86.13 192 192-86.13 192-192 192Zm0-348c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/%3E%3C/svg%3E"),
368
370
  element-launchpad-app-background: base.$color-blue-300,
369
- element-launchpad-app-color: base.$color-black
371
+ element-launchpad-app-color: base.$color-black,
372
+ element-ai-key-visual:
373
+ url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168' fill='none'><path d='M97.2819 76.1142L95.3187 76.5196C94.4108 76.7071 93.7007 77.4165 93.5132 78.3251L93.1077 80.2884C92.971 80.9493 92.0272 80.9493 91.8905 80.2884L91.4851 78.3251C91.2976 77.4173 90.5882 76.7071 89.6796 76.5196L87.7163 76.1142C87.0554 75.9774 87.0554 75.0337 87.7163 74.897L89.6796 74.4915C90.5874 74.304 91.2976 73.5946 91.4851 72.686L91.8905 70.7228C92.0272 70.0618 92.971 70.0618 93.1077 70.7228L93.5132 72.686C93.7007 73.5938 94.4101 74.304 95.3187 74.4915L97.2819 74.897C97.9429 75.0337 97.9429 75.9774 97.2819 76.1142Z' fill='white'/><path d='M91.3179 86.7454L87.046 87.979C85.8296 88.3306 84.8788 89.2813 84.5288 90.4978L83.2976 94.772C83.0241 95.722 81.678 95.722 81.4046 94.772L80.1733 90.4978C79.8226 89.2813 78.8726 88.3298 77.6562 87.979L73.3843 86.7454C72.4351 86.4712 72.4351 85.1267 73.3843 84.8524L77.6562 83.6188C78.8726 83.2673 79.8233 82.3165 80.1733 81.1001L81.4046 76.8259C81.678 75.8759 83.0241 75.8759 83.2976 76.8259L84.5288 81.1001C84.8796 82.3165 85.8296 83.2681 87.046 83.6188L91.3179 84.8524C92.2671 85.1267 92.2671 86.4712 91.3179 86.7454Z' fill='white'/></svg>")
370
374
  );