@db-ux/core-foundations 3.1.17 → 3.1.19

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 (21) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +41 -0
  3. package/agent/_instructions.md +15 -0
  4. package/agent/css/Variables.md +130 -0
  5. package/agent/scss/Variables.md +131 -0
  6. package/agent/tailwind/Variables.md +75 -0
  7. package/assets/fallback-icon.svg +3 -0
  8. package/assets/icons/fonts/fallback/icon-font-fallback.woff2 +0 -0
  9. package/build/styles/absolute.css +17 -1
  10. package/build/styles/defaults/default-icons.css +1 -1
  11. package/build/styles/icons/_icon-helpers.scss +11 -2
  12. package/build/styles/icons/absolute.css +1 -1
  13. package/build/styles/icons/relative.css +1 -1
  14. package/build/styles/icons/relative.scss +17 -0
  15. package/build/styles/icons/rollup.css +1 -1
  16. package/build/styles/icons/webpack.css +1 -1
  17. package/build/styles/index.css +2 -1
  18. package/build/styles/relative.css +17 -1
  19. package/build/styles/rollup.css +17 -1
  20. package/build/styles/webpack.css +17 -1
  21. package/package.json +6 -2
package/CHANGELOG.md ADDED
@@ -0,0 +1,24 @@
1
+ # @db-ux/core-foundations
2
+
3
+ ## 3.1.19
4
+
5
+ ### Patch Changes
6
+
7
+ - fix: added icon fallback font - [see commit 9643085](https://github.com/db-ux-design-system/core-web/commit/964308522935db01b220c681b47960b8191c74a6)
8
+
9
+ ## 3.1.18
10
+
11
+ ### Patch Changes
12
+
13
+ - 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):
14
+ - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
15
+
16
+ ## 3.1.17
17
+
18
+ _version bump_
19
+
20
+ ## 3.1.16
21
+
22
+ _version bump_
23
+
24
+ ## 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/agent/_instructions.md ADDED
@@ -0,0 +1,15 @@
1
+ ## CSS
2
+
3
+ - If you use CSS, follow these rules:
4
+ - for `variables` like, sizing, spacing, elevation, border or container-size use the file **agent-path**/agent/css/Variables.md
5
+
6
+ ## SCSS
7
+
8
+ - If you use SCSS, follow these rules:
9
+ - for `variables` like, sizing, spacing, elevation, border or container-size use the file **agent-path**/agent/scss/Variables.md
10
+
11
+ ## Tailwind
12
+
13
+ - If you use Tailwind, follow these rules:
14
+ - for `variables` like, sizing, spacing, elevation, border or container-size use the file **agent-path**/agent/tailwind/Variables.md
15
+ - Always stick to the variables. Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
package/agent/css/Variables.md ADDED
@@ -0,0 +1,130 @@
1
+ ```css
2
+ .my-component {
3
+ inline-size: var(--db-sizing-md); /* Use sizing for fixed widths */
4
+ block-size: var(--db-sizing-lg); /* Use sizing for fixed heights */
5
+ padding: var(--db-spacing-fixed-sm); /* Use fixed spacing for paddings */
6
+ margin: var(
7
+ --db-spacing-responsive-md
8
+ ); /* Use responsive spacing for margins */
9
+ border-radius: var(--db-border-radius-md); /* Use border radius */
10
+ transition-duration: var(
11
+ --db-transition-duration-medium
12
+ ); /* Use transition duration */
13
+ border-width: var(--db-border-width-md); /* Use border width */
14
+ }
15
+ ```
16
+
17
+ ## CSS Variables List
18
+
19
+ Use sizing's for fixed heights/widths, e.g. the db-button always has a fixed height
20
+
21
+ - `--db-sizing-3xs`
22
+ - `--db-sizing-2xs`
23
+ - `--db-sizing-xs`
24
+ - `--db-sizing-sm`
25
+ - `--db-sizing-md`
26
+ - `--db-sizing-lg`
27
+ - `--db-sizing-xl`
28
+ - `--db-sizing-2xl`
29
+ - `--db-sizing-3xl`
30
+
31
+ Use fixed spacings for all types of distances, such as margins and padding.
32
+
33
+ - `--db-spacing-fixed-3xs`
34
+ - `--db-spacing-fixed-2xs`
35
+ - `--db-spacing-fixed-xs`
36
+ - `--db-spacing-fixed-sm`
37
+ - `--db-spacing-fixed-md`
38
+ - `--db-spacing-fixed-lg`
39
+ - `--db-spacing-fixed-xl`
40
+ - `--db-spacing-fixed-2xl`
41
+ - `--db-spacing-fixed-3xl`
42
+
43
+ Responsive spacings are primarily used for paddings and gaps in an application. For example, the <main> HTML element should have responsive padding.
44
+
45
+ - `--db-spacing-responsive-3xs`
46
+ - `--db-spacing-responsive-2xs`
47
+ - `--db-spacing-responsive-xs`
48
+ - `--db-spacing-responsive-sm`
49
+ - `--db-spacing-responsive-md`
50
+ - `--db-spacing-responsive-lg`
51
+ - `--db-spacing-responsive-xl`
52
+ - `--db-spacing-responsive-2xl`
53
+ - `--db-spacing-responsive-3xl`
54
+
55
+ ### Elevation
56
+
57
+ - `--db-elevation-sm`
58
+ - `--db-elevation-md`
59
+ - `--db-elevation-lg`
60
+
61
+ ### Border
62
+
63
+ - `--db-border-width-3xs`
64
+ - `--db-border-width-2xs`
65
+ - `--db-border-width-xs`
66
+ - `--db-border-width-sm`
67
+ - `--db-border-width-md`
68
+ - `--db-border-width-lg`
69
+ - `--db-border-width-xl`
70
+ - `--db-border-width-2xl`
71
+ - `--db-border-width-3xl`
72
+ - `--db-border-radius-3xs`
73
+ - `--db-border-radius-2xs`
74
+ - `--db-border-radius-xs`
75
+ - `--db-border-radius-sm`
76
+ - `--db-border-radius-md`
77
+ - `--db-border-radius-lg`
78
+ - `--db-border-radius-xl`
79
+ - `--db-border-radius-2xl`
80
+ - `--db-border-radius-3xl`
81
+ - `--db-border-radius-full`
82
+
83
+ ### Opacity
84
+
85
+ - `--db-opacity-3xs`
86
+ - `--db-opacity-2xs`
87
+ - `--db-opacity-xs`
88
+ - `--db-opacity-sm`
89
+ - `--db-opacity-md`
90
+ - `--db-opacity-lg`
91
+ - `--db-opacity-xl`
92
+ - `--db-opacity-2xl`
93
+ - `--db-opacity-3xl`
94
+ - `--db-opacity-full`
95
+
96
+ ### Transitions
97
+
98
+ - `--db-transition-duration-extra-slow`
99
+ - `--db-transition-duration-slow`
100
+ - `--db-transition-duration-medium`
101
+ - `--db-transition-duration-fast`
102
+ - `--db-transition-duration-extra-fast`
103
+ - `--db-transition-timing-emotional`
104
+ - `--db-transition-timing-functional`
105
+ - `--db-transition-timing-show`
106
+ - `--db-transition-timing-hide`
107
+ - `--db-transition-straight-emotional`
108
+ - `--db-transition-straight-functional`
109
+ - `--db-transition-straight-show`
110
+ - `--db-transition-straight-hide`
111
+
112
+ ### Screen sizes
113
+
114
+ - `--db-screen-xs`
115
+ - `--db-screen-sm`
116
+ - `--db-screen-md`
117
+ - `--db-screen-lg`
118
+ - `--db-screen-xl`
119
+
120
+ ### Container sizes
121
+
122
+ - `--db-container-3xs`
123
+ - `--db-container-2xs`
124
+ - `--db-container-xs`
125
+ - `--db-container-sm`
126
+ - `--db-container-md`
127
+ - `--db-container-lg`
128
+ - `--db-container-xl`
129
+ - `--db-container-2xl`
130
+ - `--db-container-3xl`
package/agent/scss/Variables.md ADDED
@@ -0,0 +1,131 @@
1
+ ```scss
2
+ @use "@db-ux/core-foundations/build/styles/variables";
3
+
4
+ .my-component {
5
+ inline-size: variables.$db-sizing-md; // Use sizing for fixed widths
6
+ block-size: variables.$db-sizing-lg; // Use sizing for fixed heights
7
+ padding: variables.$db-spacing-fixed-sm; // Use fixed spacing for paddings
8
+ margin: variables.$db-spacing-responsive-md; // Use responsive spacing for margins
9
+ border-radius: variables.$db-border-radius-md; // Use border radius
10
+ transition-duration: variables.$db-transition-duration-medium; // Use transition duration
11
+ border-width: variables.$db-border-width-md; // Use border width
12
+ }
13
+ ```
14
+
15
+ ### SCSS Variables List
16
+
17
+ Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height
18
+
19
+ - `$db-sizing-3xs`
20
+ - `$db-sizing-2xs`
21
+ - `$db-sizing-xs`
22
+ - `$db-sizing-sm`
23
+ - `$db-sizing-md`
24
+ - `$db-sizing-lg`
25
+ - `$db-sizing-xl`
26
+ - `$db-sizing-2xl`
27
+ - `$db-sizing-3xl`
28
+
29
+ Use fixed spacings for all kind of distances (margin, padding, ...)
30
+
31
+ - `$db-spacing-fixed-3xs`
32
+ - `$db-spacing-fixed-2xs`
33
+ - `$db-spacing-fixed-xs`
34
+ - `$db-spacing-fixed-sm`
35
+ - `$db-spacing-fixed-md`
36
+ - `$db-spacing-fixed-lg`
37
+ - `$db-spacing-fixed-xl`
38
+ - `$db-spacing-fixed-2xl`
39
+ - `$db-spacing-fixed-3xl`
40
+
41
+ The primary use case for responsive spacings are paddings/gaps in an application e.g. the <main> should have a responsive padding.
42
+
43
+ - `$db-spacing-responsive-3xs`
44
+ - `$db-spacing-responsive-2xs`
45
+ - `$db-spacing-responsive-xs`
46
+ - `$db-spacing-responsive-sm`
47
+ - `$db-spacing-responsive-md`
48
+ - `$db-spacing-responsive-lg`
49
+ - `$db-spacing-responsive-xl`
50
+ - `$db-spacing-responsive-2xl`
51
+ - `$db-spacing-responsive-3xl`
52
+
53
+ Use elevation for shadows
54
+
55
+ - `$db-elevation-sm`
56
+ - `$db-elevation-md`
57
+ - `$db-elevation-lg`
58
+
59
+ ### Use border widths for borders
60
+
61
+ - `$db-border-width-3xs`
62
+ - `$db-border-width-2xs`
63
+ - `$db-border-width-xs`
64
+ - `$db-border-width-sm`
65
+ - `$db-border-width-md`
66
+ - `$db-border-width-lg`
67
+ - `$db-border-width-xl`
68
+ - `$db-border-width-2xl`
69
+ - `$db-border-width-3xl`
70
+
71
+ Use border radius for rounded corners
72
+
73
+ - `$db-border-radius-3xs`
74
+ - `$db-border-radius-2xs`
75
+ - `$db-border-radius-xs`
76
+ - `$db-border-radius-sm`
77
+ - `$db-border-radius-md`
78
+ - `$db-border-radius-lg`
79
+ - `$db-border-radius-xl`
80
+ - `$db-border-radius-2xl`
81
+ - `$db-border-radius-3xl`
82
+ - `$db-border-radius-full`
83
+
84
+ Use opacity for transparency effects
85
+
86
+ - `$db-opacity-3xs`
87
+ - `$db-opacity-2xs`
88
+ - `$db-opacity-xs`
89
+ - `$db-opacity-sm`
90
+ - `$db-opacity-md`
91
+ - `$db-opacity-lg`
92
+ - `$db-opacity-xl`
93
+ - `$db-opacity-2xl`
94
+ - `$db-opacity-3xl`
95
+ - `$db-opacity-full`
96
+
97
+ Use transition durations for animations
98
+
99
+ - `$db-transition-duration-extra-slow`
100
+ - `$db-transition-duration-slow`
101
+ - `$db-transition-duration-medium`
102
+ - `$db-transition-duration-fast`
103
+ - `$db-transition-duration-extra-fast`
104
+ - `$db-transition-timing-emotional`
105
+ - `$db-transition-timing-functional`
106
+ - `$db-transition-timing-show`
107
+ - `$db-transition-timing-hide`
108
+ - `$db-transition-straight-emotional`
109
+ - `$db-transition-straight-functional`
110
+ - `$db-transition-straight-show`
111
+ - `$db-transition-straight-hide`
112
+
113
+ Use screen sizes for responsive design breakpoints
114
+
115
+ - `$db-screen-xs`
116
+ - `$db-screen-sm`
117
+ - `$db-screen-md`
118
+ - `$db-screen-lg`
119
+ - `$db-screen-xl`
120
+
121
+ Use container sizes for fixed containers
122
+
123
+ - `$db-container-3xs`
124
+ - `$db-container-2xs`
125
+ - `$db-container-xs`
126
+ - `$db-container-sm`
127
+ - `$db-container-md`
128
+ - `$db-container-lg`
129
+ - `$db-container-xl`
130
+ - `$db-container-2xl`
131
+ - `$db-container-3xl`
package/agent/tailwind/Variables.md ADDED
@@ -0,0 +1,75 @@
1
+ ```html
2
+ <div class="flex flex-col gap-md">
3
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-xs">
4
+ <div class="w-siz-md h-siz-lg p-fix-md m-res-sm border-sm radius-md">
5
+ Example
6
+ </div>
7
+ </div>
8
+ </div>
9
+ ```
10
+
11
+ ## Available Variables
12
+
13
+ ```css
14
+ --spacing-fix-3xs: var(--db-spacing-fixed-3xs);
15
+ --spacing-fix-2xs: var(--db-spacing-fixed-2xs);
16
+ --spacing-fix-xs: var(--db-spacing-fixed-xs);
17
+ --spacing-fix-sm: var(--db-spacing-fixed-sm);
18
+ --spacing-fix-md: var(--db-spacing-fixed-md);
19
+ --spacing-fix-lg: var(--db-spacing-fixed-lg);
20
+ --spacing-fix-xl: var(--db-spacing-fixed-xl);
21
+ --spacing-fix-2xl: var(--db-spacing-fixed-2xl);
22
+ --spacing-fix-3xl: var(--db-spacing-fixed-3xl);
23
+ --spacing-res-3xs: var(--db-spacing-responsive-3xs);
24
+ --spacing-res-2xs: var(--db-spacing-responsive-2xs);
25
+ --spacing-res-xs: var(--db-spacing-responsive-xs);
26
+ --spacing-res-sm: var(--db-spacing-responsive-sm);
27
+ --spacing-res-md: var(--db-spacing-responsive-md);
28
+ --spacing-res-lg: var(--db-spacing-responsive-lg);
29
+ --spacing-res-xl: var(--db-spacing-responsive-xl);
30
+ --spacing-res-2xl: var(--db-spacing-responsive-2xl);
31
+ --spacing-res-3xl: var(--db-spacing-responsive-3xl);
32
+ --spacing-siz-3xs: var(--db-sizing-3xs);
33
+ --spacing-siz-2xs: var(--db-sizing-2xs);
34
+ --spacing-siz-xs: var(--db-sizing-xs);
35
+ --spacing-siz-sm: var(--db-sizing-sm);
36
+ --spacing-siz-md: var(--db-sizing-md);
37
+ --spacing-siz-lg: var(--db-sizing-lg);
38
+ --spacing-siz-xl: var(--db-sizing-xl);
39
+ --spacing-siz-2xl: var(--db-sizing-2xl);
40
+ --spacing-siz-3xl: var(--db-sizing-3xl);
41
+ --gap-3xs: var(--db-spacing-fixed-3xs);
42
+ --gap-2xs: var(--db-spacing-fixed-2xs);
43
+ --gap-xs: var(--db-spacing-fixed-xs);
44
+ --gap-sm: var(--db-spacing-fixed-sm);
45
+ --gap-md: var(--db-spacing-fixed-md);
46
+ --gap-lg: var(--db-spacing-fixed-lg);
47
+ --gap-xl: var(--db-spacing-fixed-xl);
48
+ --gap-2xl: var(--db-spacing-fixed-2xl);
49
+ --gap-3xl: var(--db-spacing-fixed-3xl);
50
+ --border: var(--db-border-width-3xs);
51
+ --border-3xs: var(--db-border-width-3xs);
52
+ --border-2xs: var(--db-border-width-2xs);
53
+ --border-xs: var(--db-border-width-xs);
54
+ --border-sm: var(--db-border-width-sm);
55
+ --border-md: var(--db-border-width-md);
56
+ --border-lg: var(--db-border-width-lg);
57
+ --border-xl: var(--db-border-width-xl);
58
+ --border-2xl: var(--db-border-width-2xl);
59
+ --border-3xl: var(--db-border-width-3xl);
60
+ --radius: var(--db-border-radius-xs);
61
+ --radius-3xs: var(--db-border-radius-3xs);
62
+ --radius-2xs: var(--db-border-radius-2xs);
63
+ --radius-xs: var(--db-border-radius-xs);
64
+ --radius-sm: var(--db-border-radius-sm);
65
+ --radius-md: var(--db-border-radius-md);
66
+ --radius-lg: var(--db-border-radius-lg);
67
+ --radius-xl: var(--db-border-radius-xl);
68
+ --radius-2xl: var(--db-border-radius-2xl);
69
+ --radius-3xl: var(--db-border-radius-3xl);
70
+ --radius-full: var(--db-border-radius-full);
71
+ --shadow: var(--db-elevation-md);
72
+ --shadow-sm: var(--db-elevation-sm);
73
+ --shadow-md: var(--db-elevation-md);
74
+ --shadow-lg: var(--db-elevation-lg);
75
+ ```
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.17",
3
+ "version": "3.1.19",
4
4
  "type": "module",
5
5
  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
6
6
  "repository": {
@@ -13,6 +13,7 @@
13
13
  "module": "./build/index.js",
14
14
  "files": [
15
15
  "CHANGELOG.md",
16
+ "agent",
16
17
  "assets",
17
18
  "build"
18
19
  ],
@@ -28,7 +29,9 @@
28
29
  "build:06_ts": "tsc",
29
30
  "clean": "rm --recursive --force build",
30
31
  "copy-build": "npm-run-all copy-build:*",
32
+ "copy-build:agent": "cpr agent ../../build-outputs/foundations/agent --overwrite",
31
33
  "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets --overwrite",
34
+ "copy-build:changelog": "cpr CHANGELOG.md ../../build-outputs/foundations/CHANGELOG.md --overwrite",
32
35
  "copy-build:package.json": "cpr package.json ../../build-outputs/foundations/package.json --overwrite",
33
36
  "copy-build:readme": "cpr README.md ../../build-outputs/foundations/README.md --overwrite",
34
37
  "copy-build:web": "cpr build ../../build-outputs/foundations/build --overwrite",
@@ -36,6 +39,7 @@
36
39
  "copy-prepare:normalize": "cpr ../../node_modules/@csstools/normalize.css/normalize.css scss/_normalize.scss --overwrite",
37
40
  "copy:scss": "cpr scss build/styles --overwrite",
38
41
  "dev": "vite --open",
42
+ "generate:fallback-icon-font": "tsx scripts/local/generate-fallback-icon-font.ts",
39
43
  "generate:fonts": "tsx assets/fonts/generate-eu-fonts.ts",
40
44
  "generate:icons": "tsx scripts/local/generate-icon-font.ts",
41
45
  "postcopy-prepare:icon-overview": "prettier dev/icons.html --write",
@@ -59,7 +63,7 @@
59
63
  "sass": "1.85.0",
60
64
  "tsx": "4.20.6",
61
65
  "typescript": "5.8.3",
62
- "vite": "7.1.7"
66
+ "vite": "7.1.9"
63
67
  },
64
68
  "publishConfig": {
65
69
  "registry": "https://registry.npmjs.org/",