@db-ux/core-components 1.1.0 → 1.2.0

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 (36) hide show
  1. package/README.md +8 -3
  2. package/build/components/accordion-item/accordion-item.css +0 -2
  3. package/build/components/badge/badge.css +2 -6
  4. package/build/components/badge/badge.scss +1 -1
  5. package/build/components/brand/brand.css +0 -2
  6. package/build/components/button/button.css +0 -4
  7. package/build/components/checkbox/checkbox.css +4 -8
  8. package/build/components/header/header.css +4 -2
  9. package/build/components/infotext/infotext.css +0 -4
  10. package/build/components/input/input.css +5 -13
  11. package/build/components/link/link.css +0 -4
  12. package/build/components/navigation-item/navigation-item.css +5 -4
  13. package/build/components/navigation-item/navigation-item.scss +5 -1
  14. package/build/components/notification/notification.css +4 -8
  15. package/build/components/notification/notification.scss +4 -4
  16. package/build/components/radio/radio.css +4 -8
  17. package/build/components/select/select.css +5 -13
  18. package/build/components/select/select.scss +2 -1
  19. package/build/components/switch/switch.css +13 -19
  20. package/build/components/tab-item/tab-item.css +4 -4
  21. package/build/components/tab-list/tab-list.css +3 -4
  22. package/build/components/tabs/tabs.css +1 -1
  23. package/build/components/tag/tag.css +1 -5
  24. package/build/components/textarea/textarea.css +9 -17
  25. package/build/components/textarea/textarea.scss +0 -1
  26. package/build/components/tooltip/tooltip.css +0 -2
  27. package/build/styles/absolute.css +7 -7
  28. package/build/styles/index.css +7 -7
  29. package/build/styles/internal/_form-components.scss +3 -10
  30. package/build/styles/internal/_icon-passing.scss +1 -1
  31. package/build/styles/internal/_scrollbar.scss +2 -1
  32. package/build/styles/internal/_tag-components.scss +16 -2
  33. package/build/styles/relative.css +7 -7
  34. package/build/styles/rollup.css +7 -7
  35. package/build/styles/webpack.css +7 -7
  36. package/package.json +6 -6
package/README.md CHANGED
@@ -27,7 +27,7 @@ If you just need the styling follow this:
27
27
 
28
28
  `npm i @db-ux/core-components`
29
29
 
30
- ## Dependencies
30
+ ## Styling Dependencies
31
31
 
32
32
  Import the styles in `scss` or `css`. Based on your technology the file names could be different.
33
33
 
@@ -60,6 +60,10 @@ Or within your JavaScript files, with the related bundler as a prefix (in this c
60
60
  import "@db-ux/core-components/build/styles/rollup.css";
61
61
  ```
62
62
 
63
+ ### DB Theme
64
+
65
+ In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
66
+
63
67
  ### Optimize dependencies
64
68
 
65
69
  If you only need some of the components or some features from [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations), you shouldn't include the bundled file.
@@ -88,10 +92,11 @@ In the case you want to include only some components, and you could do it like t
88
92
 
89
93
  ## Deutsche Bahn brand
90
94
 
91
- As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
95
+ As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
92
96
  Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
93
97
 
94
- You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
98
+ For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and
99
+ design assets as well as protected characteristics and trademarks, that for not including the DB Theme.
95
100
 
96
101
  ## Contributions
97
102
 
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -145,8 +145,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
145
145
  /* Those variables are only for components to calculate heights and change icons */
146
146
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
147
147
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
148
- --db-base-line-height: var(--db-type-body-line-height-md);
149
- --db-base-font-size: var(--db-type-body-font-size-md);
150
148
  line-height: var(--db-type-body-line-height-md);
151
149
  font-size: var(--db-type-body-font-size-md);
152
150
  }
package/build/components/badge/badge.css CHANGED
@@ -16,8 +16,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
16
16
  /* Those variables are only for components to calculate heights and change icons */
17
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
18
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
19
- --db-base-line-height: var(--db-type-body-line-height-sm);
20
- --db-base-font-size: var(--db-type-body-font-size-sm);
21
19
  line-height: var(--db-type-body-line-height-sm);
22
20
  font-size: var(--db-type-body-font-size-sm);
23
21
  }
@@ -27,8 +25,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
27
25
  /* Those variables are only for components to calculate heights and change icons */
28
26
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
29
27
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
30
- --db-base-line-height: var(--db-type-body-line-height-2xs);
31
- --db-base-font-size: var(--db-type-body-font-size-2xs);
32
28
  line-height: var(--db-type-body-line-height-2xs);
33
29
  font-size: var(--db-type-body-font-size-2xs);
34
30
  }
@@ -48,8 +44,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
48
44
  }
49
45
 
50
46
  .db-badge {
51
- border-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
52
- background-color: var(--db-adaptive-bg-basic-level-1-default);
47
+ border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
48
+ background-color: var(--db-adaptive-bg-basic-level-3-default);
53
49
  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
54
50
  }
55
51
  .db-badge::before, .db-badge::after {
package/build/components/badge/badge.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  @extend %db-overwrite-font-size-2xs;
48
48
  @extend %default-button;
49
49
 
50
- @include tag-components.get-tag-colors();
50
+ @include tag-components.get-tag-colors("badge");
51
51
 
52
52
  border-radius: variables.$db-border-radius-full;
53
53
  padding-inline: variables.$db-spacing-fixed-2xs;
package/build/components/brand/brand.css CHANGED
@@ -16,8 +16,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
16
16
  /* Those variables are only for components to calculate heights and change icons */
17
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
18
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
19
- --db-base-line-height: var(--db-type-body-line-height-md);
20
- --db-base-font-size: var(--db-type-body-font-size-md);
21
19
  line-height: var(--db-type-body-line-height-md);
22
20
  font-size: var(--db-type-body-font-size-md);
23
21
  }
package/build/components/button/button.css CHANGED
@@ -8,8 +8,6 @@
8
8
  /* Those variables are only for components to calculate heights and change icons */
9
9
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
10
10
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
11
- --db-base-line-height: var(--db-type-body-line-height-md);
12
- --db-base-font-size: var(--db-type-body-font-size-md);
13
11
  line-height: var(--db-type-body-line-height-md);
14
12
  font-size: var(--db-type-body-font-size-md);
15
13
  }
@@ -18,8 +16,6 @@
18
16
  /* Those variables are only for components to calculate heights and change icons */
19
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
20
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
21
- --db-base-line-height: var(--db-type-body-line-height-sm);
22
- --db-base-font-size: var(--db-type-body-font-size-sm);
23
19
  line-height: var(--db-type-body-line-height-sm);
24
20
  font-size: var(--db-type-body-font-size-sm);
25
21
  }
package/build/components/checkbox/checkbox.css CHANGED
@@ -71,8 +71,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
71
71
  /* Those variables are only for components to calculate heights and change icons */
72
72
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
73
73
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
74
- --db-base-line-height: var(--db-type-body-line-height-md);
75
- --db-base-font-size: var(--db-type-body-font-size-md);
76
74
  line-height: var(--db-type-body-line-height-md);
77
75
  font-size: var(--db-type-body-font-size-md);
78
76
  }
@@ -81,8 +79,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
81
79
  /* Those variables are only for components to calculate heights and change icons */
82
80
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
83
81
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
84
- --db-base-line-height: var(--db-type-body-line-height-sm);
85
- --db-base-font-size: var(--db-type-body-font-size-sm);
86
82
  line-height: var(--db-type-body-line-height-sm);
87
83
  font-size: var(--db-type-body-font-size-sm);
88
84
  }
@@ -99,8 +95,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
99
95
  display: inline-flex;
100
96
  align-items: center;
101
97
  justify-content: center;
102
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 2 * var(--db-border-height-3xs));
103
- inline-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 2 * var(--db-border-height-3xs));
98
+ block-size: calc(var(--db-icon-font-size) - 2 * var(--db-border-height-3xs));
99
+ inline-size: calc(var(--db-icon-font-size) - 2 * var(--db-border-height-3xs));
104
100
  }
105
101
 
106
102
  .db-checkbox {
@@ -385,8 +381,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
385
381
  aspect-ratio: 1;
386
382
  /* stylelint-disable-next-line db-ux/use-border-height */
387
383
  border: min(var(--db-border-height-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
388
- block-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
389
- inline-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
384
+ block-size: var(--db-icon-font-size);
385
+ inline-size: var(--db-icon-font-size);
390
386
  padding: 0;
391
387
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
392
388
  }
package/build/components/header/header.css CHANGED
@@ -16,8 +16,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
16
16
  /* Those variables are only for components to calculate heights and change icons */
17
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
18
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
19
- --db-base-line-height: var(--db-type-body-line-height-md);
20
- --db-base-font-size: var(--db-type-body-font-size-md);
21
19
  line-height: var(--db-type-body-line-height-md);
22
20
  font-size: var(--db-type-body-font-size-md);
23
21
  }
@@ -340,6 +338,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
340
338
  }
341
339
  }
342
340
 
341
+ .db-header-meta-navigation {
342
+ --db-density-functional: 1;
343
+ }
344
+
343
345
  .db-header {
344
346
  background-color: var(--db-adaptive-bg-basic-level-1-default);
345
347
  display: flex;
package/build/components/infotext/infotext.css CHANGED
@@ -8,8 +8,6 @@
8
8
  /* Those variables are only for components to calculate heights and change icons */
9
9
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
10
10
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
11
- --db-base-line-height: var(--db-type-body-line-height-sm);
12
- --db-base-font-size: var(--db-type-body-font-size-sm);
13
11
  line-height: var(--db-type-body-line-height-sm);
14
12
  font-size: var(--db-type-body-font-size-sm);
15
13
  }
@@ -18,8 +16,6 @@
18
16
  /* Those variables are only for components to calculate heights and change icons */
19
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
20
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
21
- --db-base-line-height: var(--db-type-body-line-height-xs);
22
- --db-base-font-size: var(--db-type-body-font-size-xs);
23
19
  line-height: var(--db-type-body-line-height-xs);
24
20
  font-size: var(--db-type-body-font-size-xs);
25
21
  }
package/build/components/input/input.css CHANGED
@@ -359,8 +359,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
359
359
  /* Those variables are only for components to calculate heights and change icons */
360
360
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
361
361
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
362
- --db-base-line-height: var(--db-type-body-line-height-md);
363
- --db-base-font-size: var(--db-type-body-font-size-md);
364
362
  line-height: var(--db-type-body-line-height-md);
365
363
  font-size: var(--db-type-body-font-size-md);
366
364
  }
@@ -369,8 +367,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
369
367
  /* Those variables are only for components to calculate heights and change icons */
370
368
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
371
369
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
372
- --db-base-line-height: var(--db-type-body-line-height-sm);
373
- --db-base-font-size: var(--db-type-body-font-size-sm);
374
370
  line-height: var(--db-type-body-line-height-sm);
375
371
  font-size: var(--db-type-body-font-size-sm);
376
372
  }
@@ -379,8 +375,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
379
375
  /* Those variables are only for components to calculate heights and change icons */
380
376
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
381
377
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
382
- --db-base-line-height: var(--db-type-body-line-height-xs);
383
- --db-base-font-size: var(--db-type-body-font-size-xs);
384
378
  line-height: var(--db-type-body-line-height-xs);
385
379
  font-size: var(--db-type-body-font-size-xs);
386
380
  }
@@ -391,8 +385,6 @@ input:is(input, textarea):not(:placeholder-shown),
391
385
  /* Those variables are only for components to calculate heights and change icons */
392
386
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
393
387
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
394
- --db-base-line-height: var(--db-type-body-line-height-2xs);
395
- --db-base-font-size: var(--db-type-body-font-size-2xs);
396
388
  line-height: var(--db-type-body-line-height-2xs);
397
389
  font-size: var(--db-type-body-font-size-2xs);
398
390
  }
@@ -450,12 +442,12 @@ input:is(input, textarea):not(:placeholder-shown),
450
442
  opacity: 0.69;
451
443
  position: absolute;
452
444
  z-index: 2;
453
- inset-block-start: calc((var(--db-sizing-md) - calc(var(--db-base-font-size) * var(--db-base-line-height))) / 2);
445
+ inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
454
446
  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm));
455
447
  pointer-events: none;
456
448
  }
457
449
  .db-input[data-variant=floating]::after, .db-input[data-variant=floating]::before {
458
- inset-block-start: calc(var(--db-sizing-md) / 2 - calc(var(--db-base-font-size) * var(--db-base-line-height)) / 2);
450
+ inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-icon-font-size) / 2);
459
451
  }
460
452
  .db-input[data-variant=floating] [id$=-placeholder] {
461
453
  inset-block-start: calc(50% - 0.5em + var(--db-spacing-fixed-3xs));
@@ -610,7 +602,7 @@ input:is(input, textarea):not(:placeholder-shown),
610
602
  .db-input::after, .db-input::before {
611
603
  position: absolute;
612
604
  pointer-events: none;
613
- inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + calc(var(--db-type-body-font-size-xs) * var(--db-type-body-line-height-xs)) * var(--db-label-visible-height, 1) - 1px);
605
+ inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + var(--db-base-body-icon-font-size-xs) * var(--db-label-visible-height, 1) - 1px);
614
606
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
615
607
  }
616
608
  .db-input::before {
@@ -626,10 +618,10 @@ input:is(input, textarea):not(:placeholder-shown),
626
618
  text-overflow: ellipsis;
627
619
  }
628
620
  .db-input[data-icon], .db-input:has(input[type=search]) {
629
- --db-form-component-padding-inline-start: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
621
+ --db-form-component-padding-inline-start: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
630
622
  }
631
623
  .db-input[data-icon-after], .db-input:has(input[type=search]), .db-input:has(datalist) {
632
- --db-form-component-padding-inline-end: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
624
+ --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
633
625
  }
634
626
  .db-input[data-hide-label=true] {
635
627
  --db-label-visible-height: 0;
package/build/components/link/link.css CHANGED
@@ -8,8 +8,6 @@
8
8
  /* Those variables are only for components to calculate heights and change icons */
9
9
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
10
10
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
11
- --db-base-line-height: var(--db-type-body-line-height-md);
12
- --db-base-font-size: var(--db-type-body-font-size-md);
13
11
  line-height: var(--db-type-body-line-height-md);
14
12
  font-size: var(--db-type-body-font-size-md);
15
13
  }
@@ -18,8 +16,6 @@
18
16
  /* Those variables are only for components to calculate heights and change icons */
19
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
20
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
21
- --db-base-line-height: var(--db-type-body-line-height-sm);
22
- --db-base-font-size: var(--db-type-body-font-size-sm);
23
19
  line-height: var(--db-type-body-line-height-sm);
24
20
  font-size: var(--db-type-body-font-size-sm);
25
21
  }
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -17,8 +17,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
17
17
  /* Those variables are only for components to calculate heights and change icons */
18
18
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
19
19
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
20
- --db-base-line-height: var(--db-type-body-line-height-md);
21
- --db-base-font-size: var(--db-type-body-font-size-md);
22
20
  line-height: var(--db-type-body-line-height-md);
23
21
  font-size: var(--db-type-body-font-size-md);
24
22
  }
@@ -235,7 +233,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
235
233
  .db-navigation-item[data-icon]:not([data-hide-icon=true]) label {
236
234
  --db-padding-inline-start: calc(
237
235
  var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
238
- var(--db-base-font-size) * var(--db-base-line-height)
236
+ var(--db-icon-font-size)
239
237
  );
240
238
  /* stylelint-disable-next-line db-ux/use-spacings */
241
239
  padding-inline-start: var(--db-padding-inline-start);
@@ -382,9 +380,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
382
380
  transform: translateX(-100%);
383
381
  inset-inline-start: 100%;
384
382
  }
385
- .db-sub-navigation:not([data-force-mobile]):is(:hover, :focus-within), .db-sub-navigation[data-force-mobile=false]:is(:hover, :focus-within) {
383
+ .db-sub-navigation:not([data-force-mobile]):is(:hover, :focus-within):not([data-force-close=true]), .db-sub-navigation[data-force-mobile=false]:is(:hover, :focus-within):not([data-force-close=true]) {
386
384
  visibility: visible;
387
385
  }
386
+ .db-sub-navigation:not([data-force-mobile])[data-force-close=true], .db-sub-navigation[data-force-mobile=false][data-force-close=true] {
387
+ pointer-events: none;
388
+ }
388
389
  .db-sub-navigation:not([data-force-mobile])::before, .db-sub-navigation[data-force-mobile=false]::before {
389
390
  content: "";
390
391
  position: absolute;
package/build/components/navigation-item/navigation-item.scss CHANGED
@@ -207,10 +207,14 @@
207
207
  inset-inline-start: 100%;
208
208
  }
209
209
 
210
- &:is(:hover, :focus-within) {
210
+ &:is(:hover, :focus-within):not([data-force-close="true"]) {
211
211
  visibility: visible;
212
212
  }
213
213
 
214
+ &[data-force-close="true"] {
215
+ pointer-events: none;
216
+ }
217
+
214
218
  &::before {
215
219
  content: "";
216
220
  position: absolute;
package/build/components/notification/notification.css CHANGED
@@ -8,8 +8,6 @@
8
8
  /* Those variables are only for components to calculate heights and change icons */
9
9
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
10
10
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
11
- --db-base-line-height: var(--db-type-body-line-height-md);
12
- --db-base-font-size: var(--db-type-body-font-size-md);
13
11
  line-height: var(--db-type-body-line-height-md);
14
12
  font-size: var(--db-type-body-font-size-md);
15
13
  }
@@ -18,8 +16,6 @@
18
16
  /* Those variables are only for components to calculate heights and change icons */
19
17
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
20
18
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
21
- --db-base-line-height: var(--db-type-body-line-height-sm);
22
- --db-base-font-size: var(--db-type-body-font-size-sm);
23
19
  line-height: var(--db-type-body-line-height-sm);
24
20
  font-size: var(--db-type-body-font-size-sm);
25
21
  }
@@ -1061,8 +1057,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1061
1057
  .db-notification header h6 {
1062
1058
  font-family: var(--db-font-family-sans);
1063
1059
  margin: 0;
1064
- line-height: var(--db-type-headline-line-height-2xs);
1065
- font-size: var(--db-type-headline-font-size-2xs);
1060
+ line-height: var(--db-type-body-line-height-md);
1061
+ font-size: var(--db-type-body-font-size-md);
1066
1062
  }
1067
1063
  .db-notification header::before, .db-notification header::after,
1068
1064
  .db-notification header h1::before,
@@ -1077,8 +1073,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1077
1073
  .db-notification header h5::after,
1078
1074
  .db-notification header h6::before,
1079
1075
  .db-notification header h6::after {
1080
- --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
1081
- --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
1076
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
1077
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
1082
1078
  }
1083
1079
  .db-notification p {
1084
1080
  grid-area: content;
package/build/components/notification/notification.scss CHANGED
@@ -74,13 +74,13 @@
74
74
  h6 {
75
75
  font-family: var(--db-font-family-sans);
76
76
  margin: 0;
77
- line-height: var(--db-type-headline-line-height-2xs);
78
- font-size: var(--db-type-headline-font-size-2xs);
77
+ line-height: var(--db-type-body-line-height-md);
78
+ font-size: var(--db-type-body-font-size-md);
79
79
 
80
80
  &::before,
81
81
  &::after {
82
- --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
83
- --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
82
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
83
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
84
84
  }
85
85
  }
86
86
  }
package/build/components/radio/radio.css CHANGED
@@ -35,8 +35,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
35
35
  /* Those variables are only for components to calculate heights and change icons */
36
36
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
37
37
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
38
- --db-base-line-height: var(--db-type-body-line-height-md);
39
- --db-base-font-size: var(--db-type-body-font-size-md);
40
38
  line-height: var(--db-type-body-line-height-md);
41
39
  font-size: var(--db-type-body-font-size-md);
42
40
  }
@@ -45,8 +43,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
45
43
  /* Those variables are only for components to calculate heights and change icons */
46
44
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
47
45
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
48
- --db-base-line-height: var(--db-type-body-line-height-sm);
49
- --db-base-font-size: var(--db-type-body-font-size-sm);
50
46
  line-height: var(--db-type-body-line-height-sm);
51
47
  font-size: var(--db-type-body-font-size-sm);
52
48
  }
@@ -333,8 +329,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
333
329
  aspect-ratio: 1;
334
330
  /* stylelint-disable-next-line db-ux/use-border-height */
335
331
  border: min(var(--db-border-height-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
336
- block-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
337
- inline-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
332
+ block-size: var(--db-icon-font-size);
333
+ inline-size: var(--db-icon-font-size);
338
334
  padding: 0;
339
335
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
340
336
  }
@@ -380,10 +376,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
380
376
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
381
377
  }
382
378
  .db-radio input:checked:not([data-size=small]) {
383
- border-width: calc((calc(var(--db-base-font-size) * var(--db-base-line-height)) - var(--db-sizing-2xs)) / 2);
379
+ border-width: calc((var(--db-icon-font-size) - var(--db-sizing-2xs)) / 2);
384
380
  }
385
381
  .db-radio input:checked[data-size=small] {
386
- border-width: calc((calc(var(--db-base-font-size) * var(--db-base-line-height)) - var(--db-sizing-3xs)) / 2);
382
+ border-width: calc((var(--db-icon-font-size) - var(--db-sizing-3xs)) / 2);
387
383
  }
388
384
  .db-radio input:focus-visible {
389
385
  border-radius: var(--db-border-radius-full);
package/build/components/select/select.css CHANGED
@@ -359,8 +359,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
359
359
  /* Those variables are only for components to calculate heights and change icons */
360
360
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
361
361
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
362
- --db-base-line-height: var(--db-type-body-line-height-md);
363
- --db-base-font-size: var(--db-type-body-font-size-md);
364
362
  line-height: var(--db-type-body-line-height-md);
365
363
  font-size: var(--db-type-body-font-size-md);
366
364
  }
@@ -369,8 +367,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
369
367
  /* Those variables are only for components to calculate heights and change icons */
370
368
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
371
369
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
372
- --db-base-line-height: var(--db-type-body-line-height-sm);
373
- --db-base-font-size: var(--db-type-body-font-size-sm);
374
370
  line-height: var(--db-type-body-line-height-sm);
375
371
  font-size: var(--db-type-body-font-size-sm);
376
372
  }
@@ -379,8 +375,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
379
375
  /* Those variables are only for components to calculate heights and change icons */
380
376
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
381
377
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
382
- --db-base-line-height: var(--db-type-body-line-height-xs);
383
- --db-base-font-size: var(--db-type-body-font-size-xs);
384
378
  line-height: var(--db-type-body-line-height-xs);
385
379
  font-size: var(--db-type-body-font-size-xs);
386
380
  }
@@ -391,8 +385,6 @@ select:is(input, textarea):not(:placeholder-shown),
391
385
  /* Those variables are only for components to calculate heights and change icons */
392
386
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
393
387
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
394
- --db-base-line-height: var(--db-type-body-line-height-2xs);
395
- --db-base-font-size: var(--db-type-body-font-size-2xs);
396
388
  line-height: var(--db-type-body-line-height-2xs);
397
389
  font-size: var(--db-type-body-font-size-2xs);
398
390
  }
@@ -437,7 +429,7 @@ select:is(input, textarea):not(:placeholder-shown),
437
429
 
438
430
  .db-select {
439
431
  --db-form-component-padding-inline-end: calc(
440
- calc(var(--db-base-font-size) * var(--db-base-line-height)) + var(--db-spacing-fixed-sm)
432
+ var(--db-icon-font-size) + var(--db-spacing-fixed-sm)
441
433
  );
442
434
  min-inline-size: calc(4 * var(--db-sizing-md) + var(--db-form-has-before) * var(--db-sizing-md));
443
435
  --db-form-has-before: 0;
@@ -449,12 +441,12 @@ select:is(input, textarea):not(:placeholder-shown),
449
441
  opacity: 0.69;
450
442
  position: absolute;
451
443
  z-index: 2;
452
- inset-block-start: calc((var(--db-sizing-md) - calc(var(--db-base-font-size) * var(--db-base-line-height))) / 2);
444
+ inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
453
445
  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm));
454
446
  pointer-events: none;
455
447
  }
456
448
  .db-select[data-variant=floating]::after, .db-select[data-variant=floating]::before {
457
- inset-block-start: calc(var(--db-sizing-md) / 2 - calc(var(--db-base-font-size) * var(--db-base-line-height)) / 2);
449
+ inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-icon-font-size) / 2);
458
450
  }
459
451
  .db-select[data-variant=floating] [id$=-placeholder] {
460
452
  inset-block-start: calc(50% - 0.5em + var(--db-spacing-fixed-3xs));
@@ -609,7 +601,7 @@ select:is(input, textarea):not(:placeholder-shown),
609
601
  .db-select::after, .db-select::before {
610
602
  position: absolute;
611
603
  pointer-events: none;
612
- inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + calc(var(--db-type-body-font-size-xs) * var(--db-type-body-line-height-xs)) * var(--db-label-visible-height, 1) - 1px);
604
+ inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-spacing-fixed-xs) * var(--db-label-visible-spacing, 0) + var(--db-base-body-icon-font-size-xs) * var(--db-label-visible-height, 1) - 1px);
613
605
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
614
606
  }
615
607
  .db-select::before {
@@ -638,7 +630,7 @@ select:is(input, textarea):not(:placeholder-shown),
638
630
  .db-select [id$=-placeholder] {
639
631
  position: absolute;
640
632
  pointer-events: none;
641
- inset-block-start: calc(0% + (calc(var(--db-type-body-font-size-xs) * var(--db-type-body-line-height-xs)) + var(--db-spacing-fixed-xs)) * var(--db-label-visible-height, 1) + var(--db-base-font-size) / 2 - var(--db-density-functional, 0) * 1px);
633
+ inset-block-start: calc(0% + (var(--db-base-body-icon-font-size-xs) + var(--db-spacing-fixed-xs)) * var(--db-label-visible-height, 1) + var(--db-type-body-font-size-md) / 2 - var(--db-density-functional, 0) * 1px);
642
634
  inset-inline: calc(var(--db-form-has-before) * (var(--db-base-body-icon-font-size-sm) + var(--db-spacing-fixed-sm)));
643
635
  margin-inline-start: var(--db-spacing-fixed-sm);
644
636
  overflow: hidden;
package/build/components/select/select.scss CHANGED
@@ -61,7 +61,8 @@ $has-before-padding: calc(
61
61
  #{form-components.$label-size-height-xs} +
62
62
  #{variables.$db-spacing-fixed-xs}
63
63
  ) *
64
- var(--db-label-visible-height, 1) + var(--db-base-font-size) /
64
+ var(--db-label-visible-height, 1) +
65
+ var(--db-type-body-font-size-md) /
65
66
  2 - var(--db-density-functional, 0) * 1px
66
67
  );
67
68
  inset-inline: $has-before-padding;
package/build/components/switch/switch.css CHANGED
@@ -323,8 +323,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
323
323
  /* Those variables are only for components to calculate heights and change icons */
324
324
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
325
325
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
326
- --db-base-line-height: var(--db-type-body-line-height-md);
327
- --db-base-font-size: var(--db-type-body-font-size-md);
328
326
  line-height: var(--db-type-body-line-height-md);
329
327
  font-size: var(--db-type-body-font-size-md);
330
328
  }
@@ -333,8 +331,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
333
331
  /* Those variables are only for components to calculate heights and change icons */
334
332
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
335
333
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
336
- --db-base-line-height: var(--db-type-body-line-height-sm);
337
- --db-base-font-size: var(--db-type-body-font-size-sm);
338
334
  line-height: var(--db-type-body-line-height-sm);
339
335
  font-size: var(--db-type-body-font-size-sm);
340
336
  }
@@ -343,8 +339,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
343
339
  /* Those variables are only for components to calculate heights and change icons */
344
340
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
345
341
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
346
- --db-base-line-height: var(--db-type-body-line-height-xs);
347
- --db-base-font-size: var(--db-type-body-font-size-xs);
348
342
  line-height: var(--db-type-body-line-height-xs);
349
343
  font-size: var(--db-type-body-font-size-xs);
350
344
  }
@@ -387,11 +381,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
387
381
 
388
382
  /* stylelint-disable-next-line db-ux/use-spacings */
389
383
  .db-switch:active:not(:disabled, [aria-disabled=true]) > input::before {
390
- inline-size: calc(calc(calc(var(--db-base-font-size) * var(--db-base-line-height))) - 0.125rem * 2 + var(--db-spacing-fixed-2xs));
384
+ inline-size: calc(calc(var(--db-icon-font-size)) - 0.125rem * 2 + var(--db-spacing-fixed-2xs));
391
385
  margin: 0;
392
386
  }
393
387
  .db-switch:active:not(:disabled, [aria-disabled=true]) > input:checked::before {
394
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 0.125rem * 2);
388
+ block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
395
389
  }
396
390
 
397
391
  .db-switch {
@@ -677,8 +671,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
677
671
  aspect-ratio: 1;
678
672
  /* stylelint-disable-next-line db-ux/use-border-height */
679
673
  border: min(var(--db-border-height-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
680
- block-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
681
- inline-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
674
+ block-size: var(--db-icon-font-size);
675
+ inline-size: var(--db-icon-font-size);
682
676
  padding: 0;
683
677
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
684
678
  }
@@ -724,8 +718,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
724
718
  --db-icon-margin-start: 0;
725
719
  --thumb-offset-x: 0.125rem;
726
720
  appearance: none;
727
- inline-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) * 2 + 0.125rem);
728
- block-size: calc(var(--db-base-font-size) * var(--db-base-line-height));
721
+ inline-size: calc(var(--db-icon-font-size) * 2 + 0.125rem);
722
+ block-size: var(--db-icon-font-size);
729
723
  box-sizing: content-box;
730
724
  display: flex;
731
725
  align-items: center;
@@ -751,12 +745,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
751
745
  text-align: center;
752
746
  align-content: center;
753
747
  aspect-ratio: 1;
754
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 0.125rem * 2);
748
+ block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
755
749
  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
756
750
  color: var(--db-adaptive-bg-inverted-contrast-max-default);
757
751
  border-radius: var(--db-border-radius-full);
758
752
  transform: translateX(var(--thumb-offset-x));
759
- margin-inline-end: calc(calc(calc(var(--db-base-font-size) * var(--db-base-line-height))) - calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 0.125rem * 2));
753
+ margin-inline-end: calc(calc(var(--db-icon-font-size)) - calc(var(--db-icon-font-size) - 0.125rem * 2));
760
754
  }
761
755
  @media screen and (prefers-reduced-motion: no-preference) {
762
756
  .db-switch > input::before {
@@ -815,7 +809,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
815
809
  cursor: pointer;
816
810
  }
817
811
  .db-switch > input:checked::before {
818
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)));
812
+ block-size: calc(var(--db-icon-font-size));
819
813
  background-color: var(--db-adaptive-on-bg-inverted-default);
820
814
  color: var(--db-adaptive-on-bg-inverted-default);
821
815
  margin: 0;
@@ -864,7 +858,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
864
858
  border-color: var(--db-adaptive-on-bg-basic-emphasis-70-pressed);
865
859
  }
866
860
  .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true])::before {
867
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) - 0.125rem * 2);
861
+ block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
868
862
  }
869
863
  .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input) {
870
864
  cursor: initial;
@@ -882,12 +876,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
882
876
  .db-switch[data-emphasis=strong] > input::before {
883
877
  background-color: var(--db-adaptive-on-bg-inverted-default);
884
878
  color: var(--db-adaptive-on-bg-inverted-default);
885
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)));
879
+ block-size: calc(var(--db-icon-font-size));
886
880
  margin: 0;
887
881
  }
888
882
  .db-switch[data-emphasis=strong] > input::after, .db-switch[data-visual-aid=true] > input::after {
889
883
  visibility: visible;
890
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)));
884
+ block-size: calc(var(--db-icon-font-size));
891
885
  }
892
886
  .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
893
887
  --db-icon-after: "check";
@@ -897,5 +891,5 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
897
891
  }
898
892
  .db-switch[data-emphasis=strong] > input:checked::after, .db-switch[data-visual-aid=true] > input:checked::after {
899
893
  transform: translateX(calc(-100% - 0.125rem));
900
- block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)));
894
+ block-size: calc(var(--db-icon-font-size));
901
895
  }