@db-ux/core-components 2.0.6 → 2.0.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 (23) hide show
  1. package/build/components/badge/badge.css +48 -41
  2. package/build/components/badge/badge.scss +2 -0
  3. package/build/components/checkbox/checkbox.css +169 -263
  4. package/build/components/checkbox/checkbox.scss +76 -7
  5. package/build/components/custom-select/custom-select.css +1 -0
  6. package/build/components/header/header.css +6 -0
  7. package/build/components/header/header.scss +13 -0
  8. package/build/components/input/input.css +1 -0
  9. package/build/components/radio/radio.css +102 -264
  10. package/build/components/radio/radio.scss +39 -7
  11. package/build/components/select/select.css +1 -0
  12. package/build/components/switch/switch.css +37 -289
  13. package/build/components/switch/switch.scss +21 -7
  14. package/build/components/tag/tag.css +69 -52
  15. package/build/components/textarea/textarea.css +1 -0
  16. package/build/styles/absolute.css +121 -63
  17. package/build/styles/index.css +121 -63
  18. package/build/styles/internal/_form-components.scss +33 -59
  19. package/build/styles/internal/_tag-components.scss +41 -44
  20. package/build/styles/relative.css +121 -63
  21. package/build/styles/rollup.css +121 -63
  22. package/build/styles/webpack.css +121 -63
  23. package/package.json +6 -6
package/build/components/badge/badge.css CHANGED
@@ -137,45 +137,33 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
137
137
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
138
138
  }
139
139
 
140
- .db-badge {
141
- border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
142
- background-color: var(--db-adaptive-bg-basic-level-3-default);
143
- color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
144
- }
145
- .db-badge::before, .db-badge::after {
146
- --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
147
- }
148
-
149
- .db-badge[data-emphasis=strong], .db-badge[data-emphasis=strong] .db-tab-remove-button {
140
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
150
141
  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
151
142
  background-color: var(--db-adaptive-bg-vibrant-default);
152
143
  color: var(--db-adaptive-on-bg-vibrant-default);
144
+ /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
153
145
  }
154
- .db-badge[data-emphasis=strong]::before, .db-badge[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-emphasis=strong]::after, .db-badge[data-emphasis=strong] .db-tab-remove-button::after {
146
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after {
155
147
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
156
148
  }
157
-
158
- .db-badge[data-emphasis=strong] .db-tab-remove-button {
159
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
160
- }
161
- .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]) {
149
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]) {
162
150
  cursor: var(--db-overwrite-cursor, pointer);
163
151
  background-color: var(--db-adaptive-bg-vibrant-hovered);
164
152
  }
165
- .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
153
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
166
154
  cursor: initial;
167
155
  }
168
- .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
156
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
169
157
  cursor: pointer;
170
158
  }
171
- .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]) {
159
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]) {
172
160
  cursor: var(--db-overwrite-cursor, pointer);
173
161
  background-color: var(--db-adaptive-bg-vibrant-pressed);
174
162
  }
175
- .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input) {
163
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input) {
176
164
  cursor: initial;
177
165
  }
178
- .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
166
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
179
167
  cursor: pointer;
180
168
  }
181
169
 
@@ -210,13 +198,31 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
210
198
  padding-inline: var(--db-spacing-fixed-2xs);
211
199
  block-size: fit-content;
212
200
  inline-size: fit-content;
201
+ font-weight: 700;
213
202
  }
214
- .db-badge[data-semantic=neutral] {
215
- border-color: var(--db-neutral-on-bg-basic-emphasis-60-default);
216
- background-color: var(--db-neutral-bg-basic-level-1-default);
203
+ .db-badge:not([data-semantic]):not([data-emphasis]), .db-badge:not([data-semantic])[data-emphasis=weak], .db-badge[data-semantic=adaptive]:not([data-emphasis]), .db-badge[data-semantic=adaptive][data-emphasis=weak] {
204
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
205
+ background-color: var(--db-adaptive-bg-basic-level-3-default);
206
+ color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
207
+ /* stylelint-disable-next-line at-rule-empty-line-before */
208
+ }
209
+ .db-badge:not([data-semantic]):not([data-emphasis])::before, .db-badge:not([data-semantic]):not([data-emphasis])::after, .db-badge:not([data-semantic])[data-emphasis=weak]::before, .db-badge:not([data-semantic])[data-emphasis=weak]::after, .db-badge[data-semantic=adaptive]:not([data-emphasis])::before, .db-badge[data-semantic=adaptive]:not([data-emphasis])::after, .db-badge[data-semantic=adaptive][data-emphasis=weak]::before, .db-badge[data-semantic=adaptive][data-emphasis=weak]::after {
210
+ --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
211
+ }
212
+ .db-badge:not([data-semantic])[data-emphasis=strong], .db-badge[data-semantic=adaptive][data-emphasis=strong] {
213
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
214
+ background-color: var(--db-adaptive-bg-vibrant-default);
215
+ color: var(--db-adaptive-on-bg-vibrant-default);
216
+ }
217
+ .db-badge:not([data-semantic])[data-emphasis=strong]::before, .db-badge:not([data-semantic])[data-emphasis=strong]::after, .db-badge[data-semantic=adaptive][data-emphasis=strong]::before, .db-badge[data-semantic=adaptive][data-emphasis=strong]::after {
218
+ --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
219
+ }
220
+ .db-badge[data-semantic=neutral]:not([data-emphasis]), .db-badge[data-semantic=neutral][data-emphasis=weak] {
221
+ border-color: var(--db-neutral-on-bg-basic-emphasis-70-default);
222
+ background-color: var(--db-neutral-bg-basic-level-3-default);
217
223
  color: var(--db-neutral-on-bg-basic-emphasis-80-default);
218
224
  }
219
- .db-badge[data-semantic=neutral]::before, .db-badge[data-semantic=neutral]::after {
225
+ .db-badge[data-semantic=neutral]:not([data-emphasis])::before, .db-badge[data-semantic=neutral]:not([data-emphasis])::after, .db-badge[data-semantic=neutral][data-emphasis=weak]::before, .db-badge[data-semantic=neutral][data-emphasis=weak]::after {
220
226
  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-80-default);
221
227
  }
222
228
  .db-badge[data-semantic=neutral][data-emphasis=strong] {
@@ -227,12 +233,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
227
233
  .db-badge[data-semantic=neutral][data-emphasis=strong]::before, .db-badge[data-semantic=neutral][data-emphasis=strong]::after {
228
234
  --db-icon-color: var(--db-neutral-on-bg-vibrant-default);
229
235
  }
230
- .db-badge[data-semantic=critical] {
231
- border-color: var(--db-critical-on-bg-basic-emphasis-60-default);
232
- background-color: var(--db-critical-bg-basic-level-1-default);
236
+ .db-badge[data-semantic=critical]:not([data-emphasis]), .db-badge[data-semantic=critical][data-emphasis=weak] {
237
+ border-color: var(--db-critical-on-bg-basic-emphasis-70-default);
238
+ background-color: var(--db-critical-bg-basic-level-3-default);
233
239
  color: var(--db-critical-on-bg-basic-emphasis-80-default);
234
240
  }
235
- .db-badge[data-semantic=critical]::before, .db-badge[data-semantic=critical]::after {
241
+ .db-badge[data-semantic=critical]:not([data-emphasis])::before, .db-badge[data-semantic=critical]:not([data-emphasis])::after, .db-badge[data-semantic=critical][data-emphasis=weak]::before, .db-badge[data-semantic=critical][data-emphasis=weak]::after {
236
242
  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-80-default);
237
243
  }
238
244
  .db-badge[data-semantic=critical][data-emphasis=strong] {
@@ -243,12 +249,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
243
249
  .db-badge[data-semantic=critical][data-emphasis=strong]::before, .db-badge[data-semantic=critical][data-emphasis=strong]::after {
244
250
  --db-icon-color: var(--db-critical-on-bg-vibrant-default);
245
251
  }
246
- .db-badge[data-semantic=successful] {
247
- border-color: var(--db-successful-on-bg-basic-emphasis-60-default);
248
- background-color: var(--db-successful-bg-basic-level-1-default);
252
+ .db-badge[data-semantic=successful]:not([data-emphasis]), .db-badge[data-semantic=successful][data-emphasis=weak] {
253
+ border-color: var(--db-successful-on-bg-basic-emphasis-70-default);
254
+ background-color: var(--db-successful-bg-basic-level-3-default);
249
255
  color: var(--db-successful-on-bg-basic-emphasis-80-default);
250
256
  }
251
- .db-badge[data-semantic=successful]::before, .db-badge[data-semantic=successful]::after {
257
+ .db-badge[data-semantic=successful]:not([data-emphasis])::before, .db-badge[data-semantic=successful]:not([data-emphasis])::after, .db-badge[data-semantic=successful][data-emphasis=weak]::before, .db-badge[data-semantic=successful][data-emphasis=weak]::after {
252
258
  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-80-default);
253
259
  }
254
260
  .db-badge[data-semantic=successful][data-emphasis=strong] {
@@ -259,12 +265,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
259
265
  .db-badge[data-semantic=successful][data-emphasis=strong]::before, .db-badge[data-semantic=successful][data-emphasis=strong]::after {
260
266
  --db-icon-color: var(--db-successful-on-bg-vibrant-default);
261
267
  }
262
- .db-badge[data-semantic=warning] {
263
- border-color: var(--db-warning-on-bg-basic-emphasis-60-default);
264
- background-color: var(--db-warning-bg-basic-level-1-default);
268
+ .db-badge[data-semantic=warning]:not([data-emphasis]), .db-badge[data-semantic=warning][data-emphasis=weak] {
269
+ border-color: var(--db-warning-on-bg-basic-emphasis-70-default);
270
+ background-color: var(--db-warning-bg-basic-level-3-default);
265
271
  color: var(--db-warning-on-bg-basic-emphasis-80-default);
266
272
  }
267
- .db-badge[data-semantic=warning]::before, .db-badge[data-semantic=warning]::after {
273
+ .db-badge[data-semantic=warning]:not([data-emphasis])::before, .db-badge[data-semantic=warning]:not([data-emphasis])::after, .db-badge[data-semantic=warning][data-emphasis=weak]::before, .db-badge[data-semantic=warning][data-emphasis=weak]::after {
268
274
  --db-icon-color: var(--db-warning-on-bg-basic-emphasis-80-default);
269
275
  }
270
276
  .db-badge[data-semantic=warning][data-emphasis=strong] {
@@ -275,12 +281,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
275
281
  .db-badge[data-semantic=warning][data-emphasis=strong]::before, .db-badge[data-semantic=warning][data-emphasis=strong]::after {
276
282
  --db-icon-color: var(--db-warning-on-bg-vibrant-default);
277
283
  }
278
- .db-badge[data-semantic=informational] {
279
- border-color: var(--db-informational-on-bg-basic-emphasis-60-default);
280
- background-color: var(--db-informational-bg-basic-level-1-default);
284
+ .db-badge[data-semantic=informational]:not([data-emphasis]), .db-badge[data-semantic=informational][data-emphasis=weak] {
285
+ border-color: var(--db-informational-on-bg-basic-emphasis-70-default);
286
+ background-color: var(--db-informational-bg-basic-level-3-default);
281
287
  color: var(--db-informational-on-bg-basic-emphasis-80-default);
282
288
  }
283
- .db-badge[data-semantic=informational]::before, .db-badge[data-semantic=informational]::after {
289
+ .db-badge[data-semantic=informational]:not([data-emphasis])::before, .db-badge[data-semantic=informational]:not([data-emphasis])::after, .db-badge[data-semantic=informational][data-emphasis=weak]::before, .db-badge[data-semantic=informational][data-emphasis=weak]::after {
284
290
  --db-icon-color: var(--db-informational-on-bg-basic-emphasis-80-default);
285
291
  }
286
292
  .db-badge[data-semantic=informational][data-emphasis=strong] {
@@ -297,6 +303,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
297
303
  .db-badge[data-size=medium] {
298
304
  --badge-size: var(--db-spacing-fixed-sm);
299
305
  padding-inline: var(--db-spacing-fixed-xs);
306
+ font-weight: 700;
300
307
  }
301
308
  .db-badge[data-size=medium]:has(.db-icon) {
302
309
  padding: var(--db-spacing-fixed-2xs);
package/build/components/badge/badge.scss CHANGED
@@ -53,6 +53,7 @@
53
53
  padding-inline: variables.$db-spacing-fixed-2xs;
54
54
  block-size: fit-content;
55
55
  inline-size: fit-content;
56
+ font-weight: 700;
56
57
 
57
58
  &:has(.db-icon) {
58
59
  padding: variables.$db-spacing-fixed-3xs;
@@ -69,6 +70,7 @@
69
70
  @extend %db-overwrite-font-size-sm;
70
71
 
71
72
  padding-inline: variables.$db-spacing-fixed-xs;
73
+ font-weight: 700;
72
74
 
73
75
  &:has(.db-icon) {
74
76
  padding: variables.$db-spacing-fixed-2xs;