@db-ux/core-components 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +7 -2
  2. package/build/components/accordion-item/accordion-item.css +0 -2
  3. package/build/components/badge/badge.css +0 -4
  4. package/build/components/brand/brand.css +0 -2
  5. package/build/components/button/button.css +0 -4
  6. package/build/components/checkbox/checkbox.css +4 -8
  7. package/build/components/header/header.css +4 -2
  8. package/build/components/infotext/infotext.css +0 -4
  9. package/build/components/input/input.css +5 -13
  10. package/build/components/link/link.css +0 -4
  11. package/build/components/navigation-item/navigation-item.css +5 -4
  12. package/build/components/navigation-item/navigation-item.scss +5 -1
  13. package/build/components/notification/notification.css +4 -8
  14. package/build/components/notification/notification.scss +4 -4
  15. package/build/components/radio/radio.css +4 -8
  16. package/build/components/select/select.css +5 -13
  17. package/build/components/select/select.scss +2 -1
  18. package/build/components/switch/switch.css +13 -19
  19. package/build/components/tab-item/tab-item.css +4 -4
  20. package/build/components/tab-list/tab-list.css +1 -3
  21. package/build/components/tabs/tabs.css +1 -1
  22. package/build/components/tag/tag.css +1 -5
  23. package/build/components/textarea/textarea.css +7 -15
  24. package/build/components/tooltip/tooltip.css +0 -2
  25. package/build/styles/absolute.css +7 -7
  26. package/build/styles/index.css +7 -7
  27. package/build/styles/internal/_form-components.scss +3 -10
  28. package/build/styles/internal/_icon-passing.scss +1 -1
  29. package/build/styles/relative.css +7 -7
  30. package/build/styles/rollup.css +7 -7
  31. package/build/styles/webpack.css +7 -7
  32. package/package.json +5 -5
package/build/components/tab-list/tab-list.css CHANGED
@@ -113,8 +113,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
113
113
  /* Those variables are only for components to calculate heights and change icons */
114
114
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
115
115
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
116
- --db-base-line-height: var(--db-type-body-line-height-md);
117
- --db-base-font-size: var(--db-type-body-font-size-md);
118
116
  line-height: var(--db-type-body-line-height-md);
119
117
  font-size: var(--db-type-body-font-size-md);
120
118
  }
@@ -148,7 +146,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
148
146
  background-size: 0.5rem;
149
147
  background-repeat: no-repeat;
150
148
  background-position: center;
151
- block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-type-body-font-size-2xs) * var(--db-type-body-line-height-2xs)));
149
+ block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
152
150
  }
153
151
  .db-tab-list > ul::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
154
152
  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
package/build/components/tabs/tabs.css CHANGED
@@ -223,7 +223,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
223
223
  block-size: var(--db-border-height-xs);
224
224
  inset-inline: var(--db-spacing-fixed-xs);
225
225
  /* top position equals sum of: margin xs + padding xs + line-height + padding xs + margin 2xs */
226
- inset-block-start: calc(3 * var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
226
+ inset-block-start: calc(3 * var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-2xs) + var(--db-icon-font-size));
227
227
  }
228
228
  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul {
229
229
  overflow: auto hidden;
package/build/components/tag/tag.css CHANGED
@@ -95,8 +95,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
95
95
  /* Those variables are only for components to calculate heights and change icons */
96
96
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
97
97
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
98
- --db-base-line-height: var(--db-type-body-line-height-sm);
99
- --db-base-font-size: var(--db-type-body-font-size-sm);
100
98
  line-height: var(--db-type-body-line-height-sm);
101
99
  font-size: var(--db-type-body-font-size-sm);
102
100
  }
@@ -1382,7 +1380,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1382
1380
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-icon]:not([data-hide-icon=true]) label {
1383
1381
  --db-padding-inline-start: calc(
1384
1382
  var(--db-spacing-fixed-2xs) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
1385
- var(--db-base-font-size) * var(--db-base-line-height)
1383
+ var(--db-icon-font-size)
1386
1384
  );
1387
1385
  /* stylelint-disable-next-line db-ux/use-spacings */
1388
1386
  padding-inline-start: var(--db-padding-inline-start);
@@ -1453,8 +1451,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1453
1451
  /* Those variables are only for components to calculate heights and change icons */
1454
1452
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
1455
1453
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
1456
- --db-base-line-height: var(--db-type-body-line-height-xs);
1457
- --db-base-font-size: var(--db-type-body-font-size-xs);
1458
1454
  }
1459
1455
  .db-tag label:has(input:checked) {
1460
1456
  border-width: var(--db-border-height-3xs);
package/build/components/textarea/textarea.css CHANGED
@@ -15,8 +15,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
15
15
  /* Those variables are only for components to calculate heights and change icons */
16
16
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
17
17
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
18
- --db-base-line-height: var(--db-type-body-line-height-md);
19
- --db-base-font-size: var(--db-type-body-font-size-md);
20
18
  line-height: var(--db-type-body-line-height-md);
21
19
  font-size: var(--db-type-body-font-size-md);
22
20
  }
@@ -25,8 +23,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
25
23
  /* Those variables are only for components to calculate heights and change icons */
26
24
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
27
25
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
28
- --db-base-line-height: var(--db-type-body-line-height-sm);
29
- --db-base-font-size: var(--db-type-body-font-size-sm);
30
26
  line-height: var(--db-type-body-line-height-sm);
31
27
  font-size: var(--db-type-body-font-size-sm);
32
28
  }
@@ -35,8 +31,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
35
31
  /* Those variables are only for components to calculate heights and change icons */
36
32
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
37
33
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
38
- --db-base-line-height: var(--db-type-body-line-height-xs);
39
- --db-base-font-size: var(--db-type-body-font-size-xs);
40
34
  line-height: var(--db-type-body-line-height-xs);
41
35
  font-size: var(--db-type-body-font-size-xs);
42
36
  }
@@ -47,8 +41,6 @@ textarea:is(input, textarea):not(:placeholder-shown),
47
41
  /* Those variables are only for components to calculate heights and change icons */
48
42
  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
49
43
  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
50
- --db-base-line-height: var(--db-type-body-line-height-2xs);
51
- --db-base-font-size: var(--db-type-body-font-size-2xs);
52
44
  line-height: var(--db-type-body-line-height-2xs);
53
45
  font-size: var(--db-type-body-font-size-2xs);
54
46
  }
@@ -199,7 +191,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
199
191
  background-size: 0.5rem;
200
192
  background-repeat: no-repeat;
201
193
  background-position: center;
202
- block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-type-body-font-size-2xs) * var(--db-type-body-line-height-2xs)));
194
+ block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
203
195
  }
204
196
  .db-textarea textarea::-webkit-scrollbar-button:single-button:is(:hover, :focus) {
205
197
  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
@@ -254,18 +246,18 @@ textarea:is(input, textarea):not(:placeholder-shown),
254
246
  opacity: 0.69;
255
247
  position: absolute;
256
248
  z-index: 2;
257
- inset-block-start: calc((var(--db-sizing-md) - calc(var(--db-base-font-size) * var(--db-base-line-height))) / 2);
249
+ inset-block-start: calc((var(--db-sizing-md) - var(--db-icon-font-size)) / 2);
258
250
  inset-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm));
259
251
  pointer-events: none;
260
252
  }
261
253
  .db-textarea[data-variant=floating]::after, .db-textarea[data-variant=floating]::before {
262
- inset-block-start: calc(var(--db-sizing-md) / 2 - calc(var(--db-base-font-size) * var(--db-base-line-height)) / 2);
254
+ inset-block-start: calc(var(--db-sizing-md) / 2 - var(--db-icon-font-size) / 2);
263
255
  }
264
256
  .db-textarea[data-variant=floating] [id$=-placeholder] {
265
257
  inset-block-start: calc(50% - 0.5em + var(--db-spacing-fixed-3xs));
266
258
  }
267
259
  .db-textarea[data-variant=floating] textarea {
268
- padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-type-body-font-size-2xs) * var(--db-type-body-line-height-2xs)));
260
+ padding-block-start: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
269
261
  /* stylelint-disable-next-line at-rule-empty-line-before */
270
262
  }
271
263
  .db-textarea[data-variant=floating] textarea::placeholder,
@@ -487,7 +479,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
487
479
  .db-textarea::after, .db-textarea::before {
488
480
  position: absolute;
489
481
  pointer-events: none;
490
- 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);
482
+ 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);
491
483
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
492
484
  }
493
485
  .db-textarea::before {
@@ -508,7 +500,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
508
500
  position: absolute;
509
501
  content: "";
510
502
  inset-block-start: 0;
511
- block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-type-body-font-size-2xs) * var(--db-type-body-line-height-2xs)));
503
+ block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
512
504
  margin-inline: 0;
513
505
  inline-size: calc(100% - 0.5rem - 1px);
514
506
  inset-inline: 0;
@@ -519,7 +511,7 @@ textarea:is(input, textarea):not(:placeholder-shown),
519
511
  position: absolute;
520
512
  content: "";
521
513
  inset-block-start: 0;
522
- block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-type-body-font-size-2xs) * var(--db-type-body-line-height-2xs)));
514
+ block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-2xs) + var(--db-base-body-icon-font-size-2xs));
523
515
  margin-inline: 0;
524
516
  inline-size: calc(100% - 0.5rem - 1px);
525
517
  inset-inline: 0;
package/build/components/tooltip/tooltip.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
  }