@db-ux/core-foundations 3.1.18 → 3.1.20

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 (17) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +41 -0
  3. package/assets/fallback-icon.svg +3 -0
  4. package/assets/icons/fonts/fallback/icon-font-fallback.woff2 +0 -0
  5. package/build/styles/absolute.css +17 -1
  6. package/build/styles/defaults/default-icons.css +1 -1
  7. package/build/styles/icons/_icon-helpers.scss +11 -2
  8. package/build/styles/icons/absolute.css +1 -1
  9. package/build/styles/icons/relative.css +1 -1
  10. package/build/styles/icons/relative.scss +17 -0
  11. package/build/styles/icons/rollup.css +1 -1
  12. package/build/styles/icons/webpack.css +1 -1
  13. package/build/styles/index.css +2 -1
  14. package/build/styles/relative.css +17 -1
  15. package/build/styles/rollup.css +17 -1
  16. package/build/styles/webpack.css +17 -1
  17. package/package.json +4 -2
package/CHANGELOG.md ADDED
@@ -0,0 +1,29 @@
1
+ # @db-ux/core-foundations
2
+
3
+ ## 3.1.20
4
+
5
+ _version bump_
6
+
7
+
8
+ ## 3.1.19
9
+
10
+ ### Patch Changes
11
+
12
+ - fix: added icon fallback font - [see commit 9643085](https://github.com/db-ux-design-system/core-web/commit/964308522935db01b220c681b47960b8191c74a6)
13
+
14
+ ## 3.1.18
15
+
16
+ ### Patch Changes
17
+
18
+ - enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
19
+ - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
20
+
21
+ ## 3.1.17
22
+
23
+ _version bump_
24
+
25
+ ## 3.1.16
26
+
27
+ _version bump_
28
+
29
+ ## 3.1.15
package/README.md CHANGED
@@ -12,11 +12,13 @@ A library containing all tokens (colors, spacings, font formatting, etc.) and as
12
12
  **⚠️ Looking for UI components?** You probably want [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) instead, which **automatically includes** this package.
13
13
 
14
14
  **Use this package when you:**
15
+
15
16
  - Only need design tokens (colors, spacing, fonts) without any component styles
16
17
  - Want to build custom components using the design system tokens
17
18
  - Need just icons and fonts without pre-built components
18
19
 
19
20
  **Use [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) when you:**
21
+
20
22
  - Want to use ready-made UI components (buttons, inputs, navigation, etc.)
21
23
  - Need both design tokens AND component styles (most common use case)
22
24
 
@@ -339,6 +341,45 @@ You are able to optimize the initial settings as well:
339
341
  @import "@db-ux/core-foundations/build/styles/defaults/default-code.css";
340
342
  ```
341
343
 
344
+ ## Font Preloading
345
+
346
+ To ensure optimal performance and reliability — especially in flaky or offline internet conditions — **you could preload or at least prefetch any fonts your application depends on**.
347
+
348
+ ### How to Preload Fonts
349
+
350
+ After identifying the critical fonts required for your application's UI, use the following `<link>` tag in the `<head>` of your HTML to preload them:
351
+
352
+ ```html
353
+ <link
354
+ rel="preload"
355
+ href="/media/dbneoscreensans-regular.woff2"
356
+ as="font"
357
+ type="font/woff2"
358
+ crossorigin="anonymous"
359
+ />
360
+ ```
361
+
362
+ Otherwise, if the font is not initially required but would be requested later or by some dynamically inserted content, you could still [prefetch](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/prefetch) it. Prefetching works at a lower priority than `preload`:
363
+
364
+ ```html
365
+ <link
366
+ rel="prefetch"
367
+ href="/assets/icons/fonts/default/db-ux.woff2"
368
+ crossorigin="anonymous"
369
+ />
370
+ ```
371
+
372
+ ### Tips for identifying fonts to preload
373
+
374
+ - Use browser dev tools to track font requests that are essential to your application
375
+ - Fonts that fail to load during unstable connections should be prioritized.
376
+
377
+ ### Important notes
378
+
379
+ - Make sure the `href` path is correct and accessible at runtime.
380
+ - Always use `crossorigin="anonymous"` for fonts served from your domain or a CDN, unless your server requires credentials (rare for fonts).
381
+ - By preloading fonts this way, you improve perceived performance and avoid layout shifts or invisible text during initial rendering.
382
+
342
383
  ## Migration
343
384
 
344
385
  We provide a [CLI tool](https://github.com/db-ux-design-system/core-web/blob/main/packages/migration/README.md) to auto migrate your source code.
package/assets/fallback-icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1" height="1">
2
+ <path d="M0 0 L0 0 L0 0 Z" stroke="none" fill-rule="evenodd" fill="transparent"></path>
3
+ </svg>
package/build/styles/absolute.css CHANGED
@@ -292,7 +292,7 @@ select,
292
292
  color: var(--db-icon-color, inherit);
293
293
  display: inline-block;
294
294
  /*** icon - placeholder ***/
295
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
295
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
296
296
  font-size: var(--db-icon-font-size, 1.5rem);
297
297
  -webkit-font-smoothing: antialiased;
298
298
  -moz-osx-font-smoothing: grayscale;
@@ -305,6 +305,7 @@ select,
305
305
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
306
306
  speak: never;
307
307
  text-transform: none;
308
+ overflow: clip;
308
309
  vertical-align: var(--db-icon-vertical-align, middle);
309
310
  block-size: var(--db-icon-font-size, 1.5rem);
310
311
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -553,6 +554,21 @@ select,
553
554
  --db-icon-font-family: "db-ux-filled";
554
555
  }
555
556
 
557
+ @font-face {
558
+ font-display: block;
559
+ font-family: icon-font-fallback;
560
+ font-style: normal;
561
+ font-weight: normal;
562
+ src: url("/assets/icons/fonts/fallback/icon-font-fallback.woff2") format("woff2");
563
+ }
564
+ /* pre-load icon fallback font */
565
+ html::after {
566
+ content: "";
567
+ position: absolute;
568
+ z-index: -1;
569
+ font-family: icon-font-fallback, sans-serif;
570
+ }
571
+
556
572
  @property --db-base-icon-weight-regular-desktop-headline-3xl {
557
573
  syntax: "<number>";
558
574
  initial-value: 96;
package/build/styles/defaults/default-icons.css CHANGED
@@ -1 +1 @@
1
- @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));inline-size:var(--db-icon-font-size,1.5rem);text-transform:none;vertical-align:var(--db-icon-vertical-align,middle)}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:baseline}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing));margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-leading]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-trailing]{font-size:0!important}.is-icon-text-replace[data-icon-trailing]:after{--db-icon-margin-start:0}
1
+ @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default","icon-font-fallback"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));inline-size:var(--db-icon-font-size,1.5rem);overflow:clip;text-transform:none;vertical-align:var(--db-icon-vertical-align,middle)}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:baseline}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing));margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-leading]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-trailing]{font-size:0!important}.is-icon-text-replace[data-icon-trailing]:after{--db-icon-margin-start:0}
package/build/styles/icons/_icon-helpers.scss CHANGED
@@ -51,7 +51,11 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
51
51
  }
52
52
 
53
53
  @mixin to-filled-icon() {
54
- --db-icon-font-family: var(--db-icon-filled-font-family, "db-ux-filled");
54
+ --db-icon-font-family: var(
55
+ --db-icon-filled-font-family,
56
+ "db-ux-filled",
57
+ "icon-font-fallback"
58
+ );
55
59
  }
56
60
 
57
61
  // Icon SCSS mixin
@@ -134,7 +138,11 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
134
138
  // * use !important to prevent issues with browser extensions that change fonts
135
139
  font-family: var(
136
140
  --db-icon-font-family,
137
- var(--db-icon-default-font-family, "db-ux-default")
141
+ var(
142
+ --db-icon-default-font-family,
143
+ "db-ux-default",
144
+ "icon-font-fallback"
145
+ )
138
146
  ) !important;
139
147
  font-size: $default-icon-font-size;
140
148
 
@@ -150,6 +158,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
150
158
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
151
159
  speak: never; // Hiding icon from screenreaders
152
160
  text-transform: none;
161
+ overflow: clip;
153
162
  vertical-align: var(--db-icon-vertical-align, middle);
154
163
  block-size: $default-icon-font-size;
155
164
  inline-size: $default-icon-font-size;
package/build/styles/icons/absolute.css CHANGED
@@ -1 +1 @@
1
- @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(/assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(/assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(/assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(/assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(/assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(/assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(/assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(/assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(/assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(/assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(/assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(/assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(/assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(/assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}
1
+ @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(/assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(/assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(/assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(/assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(/assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(/assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(/assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(/assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(/assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(/assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(/assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(/assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(/assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(/assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}@font-face{font-display:block;font-family:icon-font-fallback;font-style:normal;font-weight:400;src:url(/assets/icons/fonts/fallback/icon-font-fallback.woff2) format("woff2")}html:after{content:"";font-family:icon-font-fallback,sans-serif;position:absolute;z-index:-1}
package/build/styles/icons/relative.css CHANGED
@@ -1 +1 @@
1
- @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(../assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(../assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(../assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(../assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(../assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(../assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(../assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(../assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(../assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(../assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(../assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(../assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(../assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(../assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}
1
+ @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(../assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(../assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(../assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(../assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(../assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(../assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(../assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(../assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(../assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(../assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(../assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(../assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(../assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(../assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}@font-face{font-display:block;font-family:icon-font-fallback;font-style:normal;font-weight:400;src:url(../assets/icons/fonts/fallback/icon-font-fallback.woff2) format("woff2")}html:after{content:"";font-family:icon-font-fallback,sans-serif;position:absolute;z-index:-1}
package/build/styles/icons/relative.scss CHANGED
@@ -48,3 +48,20 @@
48
48
  }
49
49
  }
50
50
  }
51
+
52
+ @font-face {
53
+ font-display: block;
54
+ font-family: icon-font-fallback;
55
+ font-style: normal;
56
+ font-weight: normal;
57
+ src: url("#{assets-paths.$icons-path}fonts/fallback/icon-font-fallback.woff2")
58
+ format("woff2");
59
+ }
60
+
61
+ /* pre-load icon fallback font */
62
+ html::after {
63
+ content: "";
64
+ position: absolute;
65
+ z-index: -1;
66
+ font-family: icon-font-fallback,sans-serif;
67
+ }
package/build/styles/icons/rollup.css CHANGED
@@ -1 +1 @@
1
- @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(@db-ux/core-foundations/assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(@db-ux/core-foundations/assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(@db-ux/core-foundations/assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(@db-ux/core-foundations/assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(@db-ux/core-foundations/assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(@db-ux/core-foundations/assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(@db-ux/core-foundations/assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(@db-ux/core-foundations/assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}
1
+ @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(@db-ux/core-foundations/assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(@db-ux/core-foundations/assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(@db-ux/core-foundations/assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(@db-ux/core-foundations/assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(@db-ux/core-foundations/assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(@db-ux/core-foundations/assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(@db-ux/core-foundations/assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(@db-ux/core-foundations/assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(@db-ux/core-foundations/assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}@font-face{font-display:block;font-family:icon-font-fallback;font-style:normal;font-weight:400;src:url(@db-ux/core-foundations/assets/icons/fonts/fallback/icon-font-fallback.woff2) format("woff2")}html:after{content:"";font-family:icon-font-fallback,sans-serif;position:absolute;z-index:-1}
package/build/styles/icons/webpack.css CHANGED
@@ -1 +1 @@
1
- @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(~@db-ux/core-foundations/assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}
1
+ @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:400;src:url(~@db-ux/core-foundations/assets/icons/fonts/default/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:16;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_16/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:20;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_20/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:24;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_24/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:32;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_32/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:48;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_48/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-default;font-style:normal;font-weight:64;src:url(~@db-ux/core-foundations/assets/icons/fonts/default_64/db-ux.woff2) format("woff2")}[data-icon-variant-after=default]:after,[data-icon-variant-before=default]:before,[data-icon-variant=default]:before{--db-icon-font-family:"db-ux-default"}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:400;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled/db-ux.woff2) format("woff2")}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:16;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_16/db-ux.woff2) format("woff2")}[data-icon-weight-after="16"]:after,[data-icon-weight-before="16"]:before,[data-icon-weight="16"]:before{--db-icon-font-weight:16}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:20;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_20/db-ux.woff2) format("woff2")}[data-icon-weight-after="20"]:after,[data-icon-weight-before="20"]:before,[data-icon-weight="20"]:before{--db-icon-font-weight:20}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:24;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_24/db-ux.woff2) format("woff2")}[data-icon-weight-after="24"]:after,[data-icon-weight-before="24"]:before,[data-icon-weight="24"]:before{--db-icon-font-weight:24}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:32;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_32/db-ux.woff2) format("woff2")}[data-icon-weight-after="32"]:after,[data-icon-weight-before="32"]:before,[data-icon-weight="32"]:before{--db-icon-font-weight:32}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:48;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_48/db-ux.woff2) format("woff2")}[data-icon-weight-after="48"]:after,[data-icon-weight-before="48"]:before,[data-icon-weight="48"]:before{--db-icon-font-weight:48}@font-face{font-display:block;font-family:db-ux-filled;font-style:normal;font-weight:64;src:url(~@db-ux/core-foundations/assets/icons/fonts/filled_64/db-ux.woff2) format("woff2")}[data-icon-weight-after="64"]:after,[data-icon-weight-before="64"]:before,[data-icon-weight="64"]:before{--db-icon-font-weight:64}[data-icon-variant-after=filled]:after,[data-icon-variant-before=filled]:before,[data-icon-variant=filled]:before{--db-icon-font-family:"db-ux-filled"}@font-face{font-display:block;font-family:icon-font-fallback;font-style:normal;font-weight:400;src:url(~@db-ux/core-foundations/assets/icons/fonts/fallback/icon-font-fallback.woff2) format("woff2")}html:after{content:"";font-family:icon-font-fallback,sans-serif;position:absolute;z-index:-1}
package/build/styles/index.css CHANGED
@@ -869,7 +869,7 @@ blockquote:not([class]) {
869
869
  color: var(--db-icon-color, inherit);
870
870
  display: inline-block;
871
871
  /*** icon - placeholder ***/
872
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
872
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
873
873
  font-size: var(--db-icon-font-size, 1.5rem);
874
874
  -webkit-font-smoothing: antialiased;
875
875
  -moz-osx-font-smoothing: grayscale;
@@ -882,6 +882,7 @@ blockquote:not([class]) {
882
882
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
883
883
  speak: never;
884
884
  text-transform: none;
885
+ overflow: clip;
885
886
  vertical-align: var(--db-icon-vertical-align, middle);
886
887
  block-size: var(--db-icon-font-size, 1.5rem);
887
888
  inline-size: var(--db-icon-font-size, 1.5rem);
package/build/styles/relative.css CHANGED
@@ -292,7 +292,7 @@ select,
292
292
  color: var(--db-icon-color, inherit);
293
293
  display: inline-block;
294
294
  /*** icon - placeholder ***/
295
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
295
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
296
296
  font-size: var(--db-icon-font-size, 1.5rem);
297
297
  -webkit-font-smoothing: antialiased;
298
298
  -moz-osx-font-smoothing: grayscale;
@@ -305,6 +305,7 @@ select,
305
305
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
306
306
  speak: never;
307
307
  text-transform: none;
308
+ overflow: clip;
308
309
  vertical-align: var(--db-icon-vertical-align, middle);
309
310
  block-size: var(--db-icon-font-size, 1.5rem);
310
311
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -553,6 +554,21 @@ select,
553
554
  --db-icon-font-family: "db-ux-filled";
554
555
  }
555
556
 
557
+ @font-face {
558
+ font-display: block;
559
+ font-family: icon-font-fallback;
560
+ font-style: normal;
561
+ font-weight: normal;
562
+ src: url("../assets/icons/fonts/fallback/icon-font-fallback.woff2") format("woff2");
563
+ }
564
+ /* pre-load icon fallback font */
565
+ html::after {
566
+ content: "";
567
+ position: absolute;
568
+ z-index: -1;
569
+ font-family: icon-font-fallback, sans-serif;
570
+ }
571
+
556
572
  @property --db-base-icon-weight-regular-desktop-headline-3xl {
557
573
  syntax: "<number>";
558
574
  initial-value: 96;
package/build/styles/rollup.css CHANGED
@@ -292,7 +292,7 @@ select,
292
292
  color: var(--db-icon-color, inherit);
293
293
  display: inline-block;
294
294
  /*** icon - placeholder ***/
295
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
295
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
296
296
  font-size: var(--db-icon-font-size, 1.5rem);
297
297
  -webkit-font-smoothing: antialiased;
298
298
  -moz-osx-font-smoothing: grayscale;
@@ -305,6 +305,7 @@ select,
305
305
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
306
306
  speak: never;
307
307
  text-transform: none;
308
+ overflow: clip;
308
309
  vertical-align: var(--db-icon-vertical-align, middle);
309
310
  block-size: var(--db-icon-font-size, 1.5rem);
310
311
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -553,6 +554,21 @@ select,
553
554
  --db-icon-font-family: "db-ux-filled";
554
555
  }
555
556
 
557
+ @font-face {
558
+ font-display: block;
559
+ font-family: icon-font-fallback;
560
+ font-style: normal;
561
+ font-weight: normal;
562
+ src: url("@db-ux/core-foundations/assets/icons/fonts/fallback/icon-font-fallback.woff2") format("woff2");
563
+ }
564
+ /* pre-load icon fallback font */
565
+ html::after {
566
+ content: "";
567
+ position: absolute;
568
+ z-index: -1;
569
+ font-family: icon-font-fallback, sans-serif;
570
+ }
571
+
556
572
  @property --db-base-icon-weight-regular-desktop-headline-3xl {
557
573
  syntax: "<number>";
558
574
  initial-value: 96;
package/build/styles/webpack.css CHANGED
@@ -292,7 +292,7 @@ select,
292
292
  color: var(--db-icon-color, inherit);
293
293
  display: inline-block;
294
294
  /*** icon - placeholder ***/
295
- font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
295
+ font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
296
296
  font-size: var(--db-icon-font-size, 1.5rem);
297
297
  -webkit-font-smoothing: antialiased;
298
298
  -moz-osx-font-smoothing: grayscale;
@@ -305,6 +305,7 @@ select,
305
305
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
306
306
  speak: never;
307
307
  text-transform: none;
308
+ overflow: clip;
308
309
  vertical-align: var(--db-icon-vertical-align, middle);
309
310
  block-size: var(--db-icon-font-size, 1.5rem);
310
311
  inline-size: var(--db-icon-font-size, 1.5rem);
@@ -553,6 +554,21 @@ select,
553
554
  --db-icon-font-family: "db-ux-filled";
554
555
  }
555
556
 
557
+ @font-face {
558
+ font-display: block;
559
+ font-family: icon-font-fallback;
560
+ font-style: normal;
561
+ font-weight: normal;
562
+ src: url("~@db-ux/core-foundations/assets/icons/fonts/fallback/icon-font-fallback.woff2") format("woff2");
563
+ }
564
+ /* pre-load icon fallback font */
565
+ html::after {
566
+ content: "";
567
+ position: absolute;
568
+ z-index: -1;
569
+ font-family: icon-font-fallback, sans-serif;
570
+ }
571
+
556
572
  @property --db-base-icon-weight-regular-desktop-headline-3xl {
557
573
  syntax: "<number>";
558
574
  initial-value: 96;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/core-foundations",
3
- "version": "3.1.18",
3
+ "version": "3.1.20",
4
4
  "type": "module",
5
5
  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
6
6
  "repository": {
@@ -12,8 +12,8 @@
12
12
  "types": "./build/index.d.ts",
13
13
  "module": "./build/index.js",
14
14
  "files": [
15
- "agent",
16
15
  "CHANGELOG.md",
16
+ "agent",
17
17
  "assets",
18
18
  "build"
19
19
  ],
@@ -31,6 +31,7 @@
31
31
  "copy-build": "npm-run-all copy-build:*",
32
32
  "copy-build:agent": "cpr agent ../../build-outputs/foundations/agent --overwrite",
33
33
  "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
34
+ "copy-build:changelog": "cpr CHANGELOG.md ../../build-outputs/foundations/CHANGELOG.md --overwrite",
34
35
  "copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
35
36
  "copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",
36
37
  "copy-build:web": "cpr build ../../build-outputs/foundations/build --overwrite",
@@ -38,6 +39,7 @@
38
39
  "copy-prepare:normalize": "cpr ../../node_modules/@csstools/normalize.css/normalize.css scss/_normalize.scss --overwrite",
39
40
  "copy:scss": "cpr scss build/styles --overwrite",
40
41
  "dev": "vite --open",
42
+ "generate:fallback-icon-font": "tsx scripts/local/generate-fallback-icon-font.ts",
41
43
  "generate:fonts": "tsx assets/fonts/generate-eu-fonts.ts",
42
44
  "generate:icons": "tsx scripts/local/generate-icon-font.ts",
43
45
  "postcopy-prepare:icon-overview": "prettier dev/icons.html --write",