@db-ux/core-foundations 2.0.4 → 2.0.5

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 (15) hide show
  1. package/build/styles/absolute.css +27 -29
  2. package/build/styles/colors/_default-color-mappings.scss +1 -1
  3. package/build/styles/defaults/_default-variables.scss +1263 -0
  4. package/build/styles/defaults/default-icons.css +1 -1
  5. package/build/styles/defaults/default-icons.scss +2 -2
  6. package/build/styles/defaults/default-required.css +1 -1
  7. package/build/styles/defaults/default-required.scss +1 -1
  8. package/build/styles/defaults/default-root.css +2 -2
  9. package/build/styles/defaults/default-root.scss +1 -1
  10. package/build/styles/icons/_icon-helpers.scss +4 -6
  11. package/build/styles/index.css +27 -29
  12. package/build/styles/relative.css +27 -29
  13. package/build/styles/rollup.css +27 -29
  14. package/build/styles/webpack.css +27 -29
  15. package/package.json +4 -4
package/build/styles/absolute.css CHANGED
@@ -49,11 +49,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
49
49
  /* Border */
50
50
  /* Transitions */
51
51
  /* Variants for adaptive components like input, select, notification, ... */
52
- blockquote:not([class]), [data-mode], :root {
52
+ blockquote:not([class]), [data-mode], :is(:root, :host) {
53
53
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
54
54
  }
55
55
  @layer variables {
56
- blockquote:not([class]), [data-mode], :root {
56
+ blockquote:not([class]), [data-mode], :is(:root, :host) {
57
57
  --db-adaptive-bg-basic-level-1-default: var(
58
58
  --db-neutral-bg-basic-level-1-default
59
59
  );
@@ -198,11 +198,11 @@ blockquote:not([class]), [data-mode], :root {
198
198
  }
199
199
  }
200
200
 
201
- [data-mode], :root {
201
+ [data-mode], :is(:root, :host) {
202
202
  background-color: var(--db-neutral-bg-basic-level-1-default);
203
203
  color: var(--db-neutral-on-bg-basic-emphasis-100-default);
204
204
  }
205
- [data-mode]::before, :root::before, [data-mode]::after, :root::after {
205
+ [data-mode]::before, :is(:root, :host)::before, [data-mode]::after, :is(:root, :host)::after {
206
206
  --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-100-default);
207
207
  }
208
208
 
@@ -276,9 +276,6 @@ select,
276
276
 
277
277
  [data-icon]::before,
278
278
  [data-icon-before]::before, [data-icon-after]::after {
279
- content: var(--db-icon, attr(data-icon));
280
- -webkit-alt: "";
281
- alt: "";
282
279
  color: var(--db-icon-color, inherit);
283
280
  display: inline-block;
284
281
  /*** icon - placeholder ***/
@@ -298,6 +295,7 @@ select,
298
295
  vertical-align: middle;
299
296
  block-size: var(--db-icon-font-size, 1.5rem);
300
297
  inline-size: var(--db-icon-font-size, 1.5rem);
298
+ content: var(--db-icon, attr(data-icon));
301
299
  }
302
300
  @supports (content: ""/"") {
303
301
  [data-icon]::before,
@@ -5680,16 +5678,16 @@ select,
5680
5678
 
5681
5679
  @layer variables {}
5682
5680
 
5683
- :root {
5681
+ :is(:root, :host) {
5684
5682
  font: var(--db-type-body-md);
5685
5683
  }
5686
5684
 
5687
- :root {
5685
+ :is(:root, :host) {
5688
5686
  font: var(--db-type-body-md);
5689
5687
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5690
5688
  }
5691
5689
  @layer variables {
5692
- :root {
5690
+ :is(:root, :host) {
5693
5691
  /* Those variables are only for components to calculate heights and change icons */
5694
5692
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
5695
5693
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -5740,11 +5738,11 @@ code {
5740
5738
  */
5741
5739
  @layer variables {}
5742
5740
 
5743
- :root {
5741
+ :is(:root, :host) {
5744
5742
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5745
5743
  }
5746
5744
  @layer variables {
5747
- :root {
5745
+ :is(:root, :host) {
5748
5746
  --db-sizing-3xs: var(--db-sizing-regular-3xs);
5749
5747
  --db-sizing-2xs: var(--db-sizing-regular-2xs);
5750
5748
  --db-sizing-xs: var(--db-sizing-regular-xs);
@@ -5771,7 +5769,7 @@ code {
5771
5769
  /* stylelint-disable-next-line at-rule-empty-line-before */
5772
5770
  }
5773
5771
  @media screen and (width <= 45em) {
5774
- :root {
5772
+ :is(:root, :host) {
5775
5773
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
5776
5774
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
5777
5775
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
@@ -5784,7 +5782,7 @@ code {
5784
5782
  }
5785
5783
  }
5786
5784
  @media screen and (45em < width <= 64em) {
5787
- :root {
5785
+ :is(:root, :host) {
5788
5786
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
5789
5787
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
5790
5788
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
@@ -5797,7 +5795,7 @@ code {
5797
5795
  }
5798
5796
  }
5799
5797
  @media screen and (64em < width) {
5800
- :root {
5798
+ :is(:root, :host) {
5801
5799
  --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
5802
5800
  --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
5803
5801
  --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
@@ -5817,11 +5815,11 @@ code {
5817
5815
 
5818
5816
  @layer variables {}
5819
5817
 
5820
- :root {
5818
+ :is(:root, :host) {
5821
5819
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5822
5820
  }
5823
5821
  @layer variables {
5824
- :root {
5822
+ :is(:root, :host) {
5825
5823
  /* stylelint-disable-next-line media-query-no-invalid */
5826
5824
  /* stylelint-disable-next-line at-rule-empty-line-before */
5827
5825
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -5830,7 +5828,7 @@ code {
5830
5828
  /* stylelint-disable-next-line at-rule-empty-line-before */
5831
5829
  }
5832
5830
  @media screen and (width <= 45em) {
5833
- :root {
5831
+ :is(:root, :host) {
5834
5832
  --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
5835
5833
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
5836
5834
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
@@ -5861,7 +5859,7 @@ code {
5861
5859
  }
5862
5860
  }
5863
5861
  @media screen and (45em < width <= 64em) {
5864
- :root {
5862
+ :is(:root, :host) {
5865
5863
  --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
5866
5864
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
5867
5865
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
@@ -5892,7 +5890,7 @@ code {
5892
5890
  }
5893
5891
  }
5894
5892
  @media screen and (64em < width) {
5895
- :root {
5893
+ :is(:root, :host) {
5896
5894
  --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
5897
5895
  --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
5898
5896
  --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
@@ -5924,11 +5922,11 @@ code {
5924
5922
  }
5925
5923
  }
5926
5924
 
5927
- :root {
5925
+ :is(:root, :host) {
5928
5926
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5929
5927
  }
5930
5928
  @layer variables {
5931
- :root {
5929
+ :is(:root, :host) {
5932
5930
  /* stylelint-disable-next-line media-query-no-invalid */
5933
5931
  /* stylelint-disable-next-line at-rule-empty-line-before */
5934
5932
  /* stylelint-disable-next-line media-query-no-invalid */
@@ -5937,7 +5935,7 @@ code {
5937
5935
  /* stylelint-disable-next-line at-rule-empty-line-before */
5938
5936
  }
5939
5937
  @media screen and (width <= 45em) {
5940
- :root {
5938
+ :is(:root, :host) {
5941
5939
  --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
5942
5940
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
5943
5941
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
@@ -5968,7 +5966,7 @@ code {
5968
5966
  }
5969
5967
  }
5970
5968
  @media screen and (45em < width <= 64em) {
5971
- :root {
5969
+ :is(:root, :host) {
5972
5970
  --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
5973
5971
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
5974
5972
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
@@ -5999,7 +5997,7 @@ code {
5999
5997
  }
6000
5998
  }
6001
5999
  @media screen and (64em < width) {
6002
- :root {
6000
+ :is(:root, :host) {
6003
6001
  --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
6004
6002
  --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
6005
6003
  --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
@@ -6277,8 +6275,8 @@ strong {
6277
6275
  }
6278
6276
 
6279
6277
  [data-icon-after]::after {
6280
- content: var(--db-icon-after, attr(data-icon-after));
6281
6278
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
6279
+ content: var(--db-icon-after, attr(data-icon-after));
6282
6280
  }
6283
6281
  @supports (content: ""/"") {
6284
6282
  [data-icon-after]::after {
@@ -6307,7 +6305,7 @@ strong {
6307
6305
 
6308
6306
  /* Required styles to normalize default css */
6309
6307
  @layer variables {
6310
- :root {
6308
+ :is(:root, :host) {
6311
6309
  --db-neutral-origin-default: light-dark(
6312
6310
  var(--db-neutral-origin-light-default),
6313
6311
  var(--db-neutral-origin-dark-default)
@@ -9498,14 +9496,14 @@ strong {
9498
9496
  }
9499
9497
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
9500
9498
  @layer variables {
9501
- :root {
9499
+ :is(:root, :host) {
9502
9500
  /* COLORS */
9503
9501
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
9504
9502
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
9505
9503
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
9506
9504
  }
9507
9505
  @media (prefers-color-scheme: dark) {
9508
- :root {
9506
+ :is(:root, :host) {
9509
9507
  --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
9510
9508
  --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
9511
9509
  --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
package/build/styles/colors/_default-color-mappings.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer variables {
2
- :root {
2
+ :is(:root, :host) {
3
3
  --db-neutral-origin-default: light-dark(
4
4
  var(--db-neutral-origin-light-default),
5
5
  var(--db-neutral-origin-dark-default)