@db-ux/core-foundations 4.0.0 → 4.0.1-1-540218c
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.
- package/CHANGELOG.md +6 -1
- package/agent/_instructions.md +43 -3
- package/agent/css/Variables.md +3 -1
- package/agent/scss/Variables.md +1 -1
- package/agent/tailwind/Variables.md +127 -66
- package/build/styles/absolute.css +4 -1
- package/build/styles/defaults/default-icons.css +1 -1
- package/build/styles/density/classes/all.css +2 -0
- package/build/styles/density/classes/expressive.css +2 -0
- package/build/styles/density/classes/functional.css +2 -0
- package/build/styles/density/classes/regular.css +2 -0
- package/build/styles/fonts/_index.scss +1 -0
- package/build/styles/fonts/_variables.scss +23 -0
- package/build/styles/fonts/classes/all.css +3 -0
- package/build/styles/fonts/classes/body/2xl.css +3 -0
- package/build/styles/fonts/classes/body/2xs.css +3 -0
- package/build/styles/fonts/classes/body/3xl.css +3 -0
- package/build/styles/fonts/classes/body/3xs.css +3 -0
- package/build/styles/fonts/classes/body/all.css +3 -0
- package/build/styles/fonts/classes/body/lg.css +3 -0
- package/build/styles/fonts/classes/body/md.css +3 -0
- package/build/styles/fonts/classes/body/sm.css +3 -0
- package/build/styles/fonts/classes/body/xl.css +3 -0
- package/build/styles/fonts/classes/body/xs.css +3 -0
- package/build/styles/fonts/classes/headline/2xl.css +3 -0
- package/build/styles/fonts/classes/headline/2xs.css +3 -0
- package/build/styles/fonts/classes/headline/3xl.css +3 -0
- package/build/styles/fonts/classes/headline/3xs.css +3 -0
- package/build/styles/fonts/classes/headline/all.css +3 -0
- package/build/styles/fonts/classes/headline/lg.css +3 -0
- package/build/styles/fonts/classes/headline/md.css +3 -0
- package/build/styles/fonts/classes/headline/sm.css +3 -0
- package/build/styles/fonts/classes/headline/xl.css +3 -0
- package/build/styles/fonts/classes/headline/xs.css +3 -0
- package/build/styles/icons/_icon-helpers.scss +2 -1
- package/build/styles/index.css +4 -1
- package/build/styles/relative.css +4 -1
- package/build/styles/rollup.css +4 -1
- package/build/styles/webpack.css +4 -1
- package/build/tailwind/theme/_variables.scss +14 -0
- package/build/tailwind/theme/dimensions.css +28 -0
- package/build/tailwind/theme/index.css +45 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
# @db-ux/core-foundations
|
|
2
2
|
|
|
3
|
+
## 4.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix: prevent cropped icons in webkit - [see commit 76c3459](https://github.com/db-ux-design-system/core-web/commit/76c3459d8a043f0320ec8d6bc3b520d3f69f055b)
|
|
8
|
+
|
|
3
9
|
## 4.0.0
|
|
4
10
|
|
|
5
11
|
_version bump_
|
|
6
12
|
|
|
7
|
-
|
|
8
13
|
## 3.1.20
|
|
9
14
|
|
|
10
15
|
_version bump_
|
package/agent/_instructions.md
CHANGED
|
@@ -1,15 +1,55 @@
|
|
|
1
1
|
## CSS
|
|
2
2
|
|
|
3
3
|
- If you use CSS, follow these rules:
|
|
4
|
-
- for
|
|
4
|
+
- Always reference the file `**agent-path**/agent/css/Variables.md` for variables like sizing, spacing, elevation, border, or container-size. This file contains the authoritative list of available variables.
|
|
5
|
+
- Use the examples provided in `Variables.md` to ensure correct usage like:
|
|
6
|
+
- `padding: var(--db-spacing-fixed-md);`
|
|
7
|
+
- `height: var(--db-sizing-md);`
|
|
8
|
+
- `width: var(--db-container-xs);`
|
|
9
|
+
- `color: var(--db-adaptive-on-bg-basic-emphasis-90-default);`
|
|
10
|
+
- `background-color: var(--db-adaptive-bg-basic-level-2-default);`
|
|
11
|
+
- `font: var(--db-type-body-sm);`
|
|
5
12
|
|
|
6
13
|
## SCSS
|
|
7
14
|
|
|
8
15
|
- If you use SCSS, follow these rules:
|
|
9
|
-
- for
|
|
16
|
+
- Always reference the file `**agent-path**/agent/scss/Variables.md` for variables like sizing, spacing, elevation, border, or container-size. This file contains the authoritative list of available variables.
|
|
17
|
+
- Use the examples provided in `Variables.md` to ensure correct usage.
|
|
18
|
+
- Always use `@use` for imports:
|
|
19
|
+
- Variables: `@use "@db-ux/core-foundations/build/styles/variables";`
|
|
20
|
+
- Colors: `@use "@db-ux/core-foundations/build/styles/colors";`
|
|
21
|
+
- Fonts: `@use "@db-ux/core-foundations/build/styles/fonts";`
|
|
22
|
+
- Never use `as *` for the `@use`, use it like this:
|
|
23
|
+
- `padding: variables.$db-spacing-fixed-md;`
|
|
24
|
+
- `height: variables.$db-sizing-md;`
|
|
25
|
+
- `width: variables.$db-container-xs;`
|
|
26
|
+
- `color: colors.$db-adaptive-on-bg-basic-emphasis-90-default;`
|
|
27
|
+
- `background-color: colors.$db-adaptive-bg-basic-level-2-default;`
|
|
28
|
+
- `font: fonts.$db-type-body-sm;`
|
|
10
29
|
|
|
11
30
|
## Tailwind
|
|
12
31
|
|
|
13
32
|
- If you use Tailwind, follow these rules:
|
|
14
|
-
- for
|
|
33
|
+
- Always reference the file `**agent-path**/agent/tailwind/Variables.md` for variables like sizing, spacing, elevation, border, or container-size. This file contains the authoritative list of available variables.
|
|
34
|
+
- Use the examples provided in `Variables.md` to ensure correct usage like:
|
|
35
|
+
- padding: `p-fix-md`
|
|
36
|
+
- height: `h-siz-md`
|
|
37
|
+
- width: `w-container-xs`
|
|
38
|
+
- color: `text-adaptive-on-bg-basic-emphasis-90-default`
|
|
39
|
+
- background-color: `bg-adaptive-bg-basic-level-2-default`
|
|
40
|
+
- font: `text-body-sm`
|
|
15
41
|
- Always stick to the variables. Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
|
|
42
|
+
|
|
43
|
+
## Figma MCP
|
|
44
|
+
|
|
45
|
+
- If you use Figma MCP always generate code with project's conventions, such as using @db-ux/core-components and @db-ux/core-foundations.
|
|
46
|
+
- If a code snippet from Figma MCP has a font-family with "DB Neo Screen Head" use HTML headlines (`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` HTML tags).
|
|
47
|
+
- If the headline has a `font-weight: 300;` use `data-variant="light"` additionally.
|
|
48
|
+
- If a code snippet has a Figma `Mode`, add it as `data-xxx`, where `xxx` is the mode in lower-case.
|
|
49
|
+
|
|
50
|
+
### Tailwind
|
|
51
|
+
|
|
52
|
+
If you use tailwind follow those rules as well:
|
|
53
|
+
|
|
54
|
+
- Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
|
|
55
|
+
- Never use something like `font-['DB_Neo_Screen_Head']` and `leading-[48px]` instead use `text-head-xx` class, where `-xx` can be a t-shirt size from `3xs` to `3xl`; If it has a `font-wight:300;` use `text-head-light-xx` instead.
|
package/agent/css/Variables.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
```css
|
|
2
2
|
.my-component {
|
|
3
|
-
inline-size: var(
|
|
3
|
+
inline-size: var(
|
|
4
|
+
--db-container-sm
|
|
5
|
+
); /* Use container for larger fixed widths */
|
|
4
6
|
block-size: var(--db-sizing-lg); /* Use sizing for fixed heights */
|
|
5
7
|
padding: var(--db-spacing-fixed-sm); /* Use fixed spacing for paddings */
|
|
6
8
|
margin: var(
|
package/agent/scss/Variables.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use "@db-ux/core-foundations/build/styles/variables";
|
|
3
3
|
|
|
4
4
|
.my-component {
|
|
5
|
-
inline-size: variables.$db-
|
|
5
|
+
inline-size: variables.$db-container-sm; // Use container for larger fixed widths
|
|
6
6
|
block-size: variables.$db-sizing-lg; // Use sizing for fixed heights
|
|
7
7
|
padding: variables.$db-spacing-fixed-sm; // Use fixed spacing for paddings
|
|
8
8
|
margin: variables.$db-spacing-responsive-md; // Use responsive spacing for margins
|
|
@@ -1,75 +1,136 @@
|
|
|
1
1
|
```html
|
|
2
2
|
<div class="flex flex-col gap-md">
|
|
3
3
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-xs">
|
|
4
|
-
<div
|
|
5
|
-
|
|
4
|
+
<div
|
|
5
|
+
class="w-container-md h-siz-lg p-fix-md m-res-sm border-sm radius-md"
|
|
6
|
+
>
|
|
7
|
+
<h1 class="text-head-lg">Headline</h1>
|
|
8
|
+
<h2 class="text-head-light-md">Subline</h2>
|
|
9
|
+
<p class="text-body-md">Normal Text</p>
|
|
10
|
+
<p class="text-body-sm">Smaller Text</p>
|
|
6
11
|
</div>
|
|
7
12
|
</div>
|
|
8
13
|
</div>
|
|
9
14
|
```
|
|
10
15
|
|
|
11
|
-
##
|
|
16
|
+
## Custom utility classes
|
|
12
17
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
18
|
+
### Padding
|
|
19
|
+
|
|
20
|
+
- `p-fix-3xs`
|
|
21
|
+
- `p-fix-2xs`
|
|
22
|
+
- `p-fix-xs`
|
|
23
|
+
- `p-fix-sm`
|
|
24
|
+
- `p-fix-md`
|
|
25
|
+
- `p-fix-lg`
|
|
26
|
+
- `p-fix-xl`
|
|
27
|
+
- `p-fix-2xl`
|
|
28
|
+
- `p-fix-3xl`
|
|
29
|
+
- `p-res-3xs`
|
|
30
|
+
- `p-res-2xs`
|
|
31
|
+
- `p-res-xs`
|
|
32
|
+
- `p-res-sm`
|
|
33
|
+
- `p-res-md`
|
|
34
|
+
- `p-res-lg`
|
|
35
|
+
- `p-res-xl`
|
|
36
|
+
- `p-res-2xl`
|
|
37
|
+
- `p-res-3xl`
|
|
38
|
+
|
|
39
|
+
### Margin
|
|
40
|
+
|
|
41
|
+
- `m-fix-3xs`
|
|
42
|
+
- `m-fix-2xs`
|
|
43
|
+
- `m-fix-xs`
|
|
44
|
+
- `m-fix-sm`
|
|
45
|
+
- `m-fix-md`
|
|
46
|
+
- `m-fix-lg`
|
|
47
|
+
- `m-fix-xl`
|
|
48
|
+
- `m-fix-2xl`
|
|
49
|
+
- `m-fix-3xl`
|
|
50
|
+
- `m-res-3xs`
|
|
51
|
+
- `m-res-2xs`
|
|
52
|
+
- `m-res-xs`
|
|
53
|
+
- `m-res-sm`
|
|
54
|
+
- `m-res-md`
|
|
55
|
+
- `m-res-lg`
|
|
56
|
+
- `m-res-xl`
|
|
57
|
+
- `m-res-2xl`
|
|
58
|
+
- `m-res-3xl`
|
|
59
|
+
|
|
60
|
+
### Width
|
|
61
|
+
|
|
62
|
+
- `w-container-3xs`
|
|
63
|
+
- `w-container-2xs`
|
|
64
|
+
- `w-container-xs`
|
|
65
|
+
- `w-container-sm`
|
|
66
|
+
- `w-container-md`
|
|
67
|
+
- `w-container-lg`
|
|
68
|
+
- `w-container-xl`
|
|
69
|
+
- `w-container-2xl`
|
|
70
|
+
- `w-container-3xl`
|
|
71
|
+
- `w-siz-3xs`
|
|
72
|
+
- `w-siz-2xs`
|
|
73
|
+
- `w-siz-xs`
|
|
74
|
+
- `w-siz-sm`
|
|
75
|
+
- `w-siz-md`
|
|
76
|
+
- `w-siz-lg`
|
|
77
|
+
- `w-siz-xl`
|
|
78
|
+
- `w-siz-2xl`
|
|
79
|
+
- `w-siz-3xl`
|
|
80
|
+
|
|
81
|
+
### Height
|
|
82
|
+
|
|
83
|
+
- `h-container-3xs`
|
|
84
|
+
- `h-container-2xs`
|
|
85
|
+
- `h-container-xs`
|
|
86
|
+
- `h-container-sm`
|
|
87
|
+
- `h-container-md`
|
|
88
|
+
- `h-container-lg`
|
|
89
|
+
- `h-container-xl`
|
|
90
|
+
- `h-container-2xl`
|
|
91
|
+
- `h-container-3xl`
|
|
92
|
+
- `h-siz-3xs`
|
|
93
|
+
- `h-siz-2xs`
|
|
94
|
+
- `h-siz-xs`
|
|
95
|
+
- `h-siz-sm`
|
|
96
|
+
- `h-siz-md`
|
|
97
|
+
- `h-siz-lg`
|
|
98
|
+
- `h-siz-xl`
|
|
99
|
+
- `h-siz-2xl`
|
|
100
|
+
- `h-siz-3xl`
|
|
101
|
+
|
|
102
|
+
### Border
|
|
103
|
+
|
|
104
|
+
- `border-3xs`
|
|
105
|
+
- `border-2xs`
|
|
106
|
+
- `border-xs`
|
|
107
|
+
- `border-sm`
|
|
108
|
+
- `border-md`
|
|
109
|
+
- `border-lg`
|
|
110
|
+
- `border-xl`
|
|
111
|
+
- `border-2xl`
|
|
112
|
+
- `border-3xl`
|
|
113
|
+
|
|
114
|
+
### Border Radius
|
|
115
|
+
|
|
116
|
+
- `radius-3xs`
|
|
117
|
+
- `radius-2xs`
|
|
118
|
+
- `radius-xs`
|
|
119
|
+
- `radius-sm`
|
|
120
|
+
- `radius-md`
|
|
121
|
+
- `radius-lg`
|
|
122
|
+
- `radius-xl`
|
|
123
|
+
- `radius-2xl`
|
|
124
|
+
- `radius-3xl`
|
|
125
|
+
|
|
126
|
+
### Gap
|
|
127
|
+
|
|
128
|
+
- `gap-3xs`
|
|
129
|
+
- `gap-2xs`
|
|
130
|
+
- `gap-xs`
|
|
131
|
+
- `gap-sm`
|
|
132
|
+
- `gap-md`
|
|
133
|
+
- `gap-lg`
|
|
134
|
+
- `gap-xl`
|
|
135
|
+
- `gap-2xl`
|
|
136
|
+
- `gap-3xl`
|
|
@@ -308,7 +308,8 @@ select,
|
|
|
308
308
|
overflow: clip;
|
|
309
309
|
vertical-align: var(--db-icon-vertical-align, middle);
|
|
310
310
|
block-size: var(--db-icon-font-size, 1.5rem);
|
|
311
|
-
|
|
311
|
+
aspect-ratio: 1;
|
|
312
|
+
flex-shrink: 0;
|
|
312
313
|
content: var(--db-icon, attr(data-icon));
|
|
313
314
|
}
|
|
314
315
|
@supports (content: ""/"") {
|
|
@@ -6105,6 +6106,8 @@ code {
|
|
|
6105
6106
|
|
|
6106
6107
|
@layer variables {}
|
|
6107
6108
|
|
|
6109
|
+
/* Use for body tags like <p> */
|
|
6110
|
+
/* Use for headline tags like <h1> */
|
|
6108
6111
|
/**
|
|
6109
6112
|
* @mixin screen-min-max
|
|
6110
6113
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -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","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));
|
|
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;aspect-ratio:1;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));flex-shrink:0;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}
|
|
@@ -126,6 +126,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
|
|
|
126
126
|
|
|
127
127
|
@layer variables {}
|
|
128
128
|
|
|
129
|
+
/* Use for body tags like <p> */
|
|
130
|
+
/* Use for headline tags like <h1> */
|
|
129
131
|
/**
|
|
130
132
|
* @mixin screen-min-max
|
|
131
133
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -120,6 +120,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
|
|
|
120
120
|
|
|
121
121
|
@layer variables {}
|
|
122
122
|
|
|
123
|
+
/* Use for body tags like <p> */
|
|
124
|
+
/* Use for headline tags like <h1> */
|
|
123
125
|
/**
|
|
124
126
|
* @mixin screen-min-max
|
|
125
127
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -120,6 +120,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
|
|
|
120
120
|
|
|
121
121
|
@layer variables {}
|
|
122
122
|
|
|
123
|
+
/* Use for body tags like <p> */
|
|
124
|
+
/* Use for headline tags like <h1> */
|
|
123
125
|
/**
|
|
124
126
|
* @mixin screen-min-max
|
|
125
127
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -120,6 +120,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
|
|
|
120
120
|
|
|
121
121
|
@layer variables {}
|
|
122
122
|
|
|
123
|
+
/* Use for body tags like <p> */
|
|
124
|
+
/* Use for headline tags like <h1> */
|
|
123
125
|
/**
|
|
124
126
|
* @mixin screen-min-max
|
|
125
127
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* Use for body tags like <p> */
|
|
2
|
+
|
|
3
|
+
$db-type-body-3xs: var(--db-type-body-3xs);
|
|
4
|
+
$db-type-body-2xs: var(--db-type-body-2xs);
|
|
5
|
+
$db-type-body-xs: var(--db-type-body-xs);
|
|
6
|
+
$db-type-body-sm: var(--db-type-body-sm);
|
|
7
|
+
$db-type-body-md: var(--db-type-body-md);
|
|
8
|
+
$db-type-body-lg: var(--db-type-body-lg);
|
|
9
|
+
$db-type-body-xl: var(--db-type-body-xl);
|
|
10
|
+
$db-type-body-2xl: var(--db-type-body-2xl);
|
|
11
|
+
$db-type-body-3xl: var(--db-type-body-3xl);
|
|
12
|
+
|
|
13
|
+
/* Use for headline tags like <h1> */
|
|
14
|
+
|
|
15
|
+
$db-type-headline-3xs: var(--db-type-headline-3xs);
|
|
16
|
+
$db-type-headline-2xs: var(--db-type-headline-2xs);
|
|
17
|
+
$db-type-headline-xs: var(--db-type-headline-xs);
|
|
18
|
+
$db-type-headline-sm: var(--db-type-headline-sm);
|
|
19
|
+
$db-type-headline-md: var(--db-type-headline-md);
|
|
20
|
+
$db-type-headline-lg: var(--db-type-headline-lg);
|
|
21
|
+
$db-type-headline-xl: var(--db-type-headline-xl);
|
|
22
|
+
$db-type-headline-2xl: var(--db-type-headline-2xl);
|
|
23
|
+
$db-type-headline-3xl: var(--db-type-headline-3xl);
|
|
@@ -161,7 +161,8 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
|
|
|
161
161
|
overflow: clip;
|
|
162
162
|
vertical-align: var(--db-icon-vertical-align, middle);
|
|
163
163
|
block-size: $default-icon-font-size;
|
|
164
|
-
|
|
164
|
+
aspect-ratio: 1;
|
|
165
|
+
flex-shrink: 0;
|
|
165
166
|
|
|
166
167
|
@include icon-content($default-icon-content); // TODO: ONLY FOR data-icon
|
|
167
168
|
|
package/build/styles/index.css
CHANGED
|
@@ -334,6 +334,8 @@ code {
|
|
|
334
334
|
|
|
335
335
|
@layer variables {}
|
|
336
336
|
|
|
337
|
+
/* Use for body tags like <p> */
|
|
338
|
+
/* Use for headline tags like <h1> */
|
|
337
339
|
/**
|
|
338
340
|
* @mixin screen-min-max
|
|
339
341
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -885,7 +887,8 @@ blockquote:not([class]) {
|
|
|
885
887
|
overflow: clip;
|
|
886
888
|
vertical-align: var(--db-icon-vertical-align, middle);
|
|
887
889
|
block-size: var(--db-icon-font-size, 1.5rem);
|
|
888
|
-
|
|
890
|
+
aspect-ratio: 1;
|
|
891
|
+
flex-shrink: 0;
|
|
889
892
|
content: var(--db-icon, attr(data-icon));
|
|
890
893
|
}
|
|
891
894
|
@supports (content: ""/"") {
|
|
@@ -308,7 +308,8 @@ select,
|
|
|
308
308
|
overflow: clip;
|
|
309
309
|
vertical-align: var(--db-icon-vertical-align, middle);
|
|
310
310
|
block-size: var(--db-icon-font-size, 1.5rem);
|
|
311
|
-
|
|
311
|
+
aspect-ratio: 1;
|
|
312
|
+
flex-shrink: 0;
|
|
312
313
|
content: var(--db-icon, attr(data-icon));
|
|
313
314
|
}
|
|
314
315
|
@supports (content: ""/"") {
|
|
@@ -6105,6 +6106,8 @@ code {
|
|
|
6105
6106
|
|
|
6106
6107
|
@layer variables {}
|
|
6107
6108
|
|
|
6109
|
+
/* Use for body tags like <p> */
|
|
6110
|
+
/* Use for headline tags like <h1> */
|
|
6108
6111
|
/**
|
|
6109
6112
|
* @mixin screen-min-max
|
|
6110
6113
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
package/build/styles/rollup.css
CHANGED
|
@@ -308,7 +308,8 @@ select,
|
|
|
308
308
|
overflow: clip;
|
|
309
309
|
vertical-align: var(--db-icon-vertical-align, middle);
|
|
310
310
|
block-size: var(--db-icon-font-size, 1.5rem);
|
|
311
|
-
|
|
311
|
+
aspect-ratio: 1;
|
|
312
|
+
flex-shrink: 0;
|
|
312
313
|
content: var(--db-icon, attr(data-icon));
|
|
313
314
|
}
|
|
314
315
|
@supports (content: ""/"") {
|
|
@@ -6105,6 +6106,8 @@ code {
|
|
|
6105
6106
|
|
|
6106
6107
|
@layer variables {}
|
|
6107
6108
|
|
|
6109
|
+
/* Use for body tags like <p> */
|
|
6110
|
+
/* Use for headline tags like <h1> */
|
|
6108
6111
|
/**
|
|
6109
6112
|
* @mixin screen-min-max
|
|
6110
6113
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
package/build/styles/webpack.css
CHANGED
|
@@ -308,7 +308,8 @@ select,
|
|
|
308
308
|
overflow: clip;
|
|
309
309
|
vertical-align: var(--db-icon-vertical-align, middle);
|
|
310
310
|
block-size: var(--db-icon-font-size, 1.5rem);
|
|
311
|
-
|
|
311
|
+
aspect-ratio: 1;
|
|
312
|
+
flex-shrink: 0;
|
|
312
313
|
content: var(--db-icon, attr(data-icon));
|
|
313
314
|
}
|
|
314
315
|
@supports (content: ""/"") {
|
|
@@ -6105,6 +6106,8 @@ code {
|
|
|
6105
6106
|
|
|
6106
6107
|
@layer variables {}
|
|
6107
6108
|
|
|
6109
|
+
/* Use for body tags like <p> */
|
|
6110
|
+
/* Use for headline tags like <h1> */
|
|
6108
6111
|
/**
|
|
6109
6112
|
* @mixin screen-min-max
|
|
6110
6113
|
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
--spacing-siz-xl: var(--db-sizing-xl);
|
|
27
27
|
--spacing-siz-2xl: var(--db-sizing-2xl);
|
|
28
28
|
--spacing-siz-3xl: var(--db-sizing-3xl);
|
|
29
|
+
--spacing-screen-xs: var(--db-screen-xs);
|
|
30
|
+
--spacing-screen-sm: var(--db-screen-sm);
|
|
31
|
+
--spacing-screen-md: var(--db-screen-md);
|
|
32
|
+
--spacing-screen-lg: var(--db-screen-lg);
|
|
33
|
+
--spacing-screen-xl: var(--db-screen-xl);
|
|
34
|
+
--spacing-container-3xs: var(--db-container-3xs);
|
|
35
|
+
--spacing-container-2xs: var(--db-container-2xs);
|
|
36
|
+
--spacing-container-xs: var(--db-container-xs);
|
|
37
|
+
--spacing-container-sm: var(--db-container-sm);
|
|
38
|
+
--spacing-container-md: var(--db-container-md);
|
|
39
|
+
--spacing-container-lg: var(--db-container-lg);
|
|
40
|
+
--spacing-container-xl: var(--db-container-xl);
|
|
41
|
+
--spacing-container-2xl: var(--db-container-2xl);
|
|
42
|
+
--spacing-container-3xl: var(--db-container-3xl);
|
|
29
43
|
--gap-3xs: var(--db-spacing-fixed-3xs);
|
|
30
44
|
--gap-2xs: var(--db-spacing-fixed-2xs);
|
|
31
45
|
--gap-xs: var(--db-spacing-fixed-xs);
|
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
--spacing-siz-xl: var(--db-sizing-xl);
|
|
27
27
|
--spacing-siz-2xl: var(--db-sizing-2xl);
|
|
28
28
|
--spacing-siz-3xl: var(--db-sizing-3xl);
|
|
29
|
+
--spacing-screen-xs: var(--db-screen-xs);
|
|
30
|
+
--spacing-screen-sm: var(--db-screen-sm);
|
|
31
|
+
--spacing-screen-md: var(--db-screen-md);
|
|
32
|
+
--spacing-screen-lg: var(--db-screen-lg);
|
|
33
|
+
--spacing-screen-xl: var(--db-screen-xl);
|
|
34
|
+
--spacing-container-3xs: var(--db-container-3xs);
|
|
35
|
+
--spacing-container-2xs: var(--db-container-2xs);
|
|
36
|
+
--spacing-container-xs: var(--db-container-xs);
|
|
37
|
+
--spacing-container-sm: var(--db-container-sm);
|
|
38
|
+
--spacing-container-md: var(--db-container-md);
|
|
39
|
+
--spacing-container-lg: var(--db-container-lg);
|
|
40
|
+
--spacing-container-xl: var(--db-container-xl);
|
|
41
|
+
--spacing-container-2xl: var(--db-container-2xl);
|
|
42
|
+
--spacing-container-3xl: var(--db-container-3xl);
|
|
29
43
|
--gap-3xs: var(--db-spacing-fixed-3xs);
|
|
30
44
|
--gap-2xs: var(--db-spacing-fixed-2xs);
|
|
31
45
|
--gap-xs: var(--db-spacing-fixed-xs);
|
|
@@ -95,6 +109,20 @@
|
|
|
95
109
|
--spacing-siz-xl: var(--db-sizing-xl);
|
|
96
110
|
--spacing-siz-2xl: var(--db-sizing-2xl);
|
|
97
111
|
--spacing-siz-3xl: var(--db-sizing-3xl);
|
|
112
|
+
--spacing-screen-xs: var(--db-screen-xs);
|
|
113
|
+
--spacing-screen-sm: var(--db-screen-sm);
|
|
114
|
+
--spacing-screen-md: var(--db-screen-md);
|
|
115
|
+
--spacing-screen-lg: var(--db-screen-lg);
|
|
116
|
+
--spacing-screen-xl: var(--db-screen-xl);
|
|
117
|
+
--spacing-container-3xs: var(--db-container-3xs);
|
|
118
|
+
--spacing-container-2xs: var(--db-container-2xs);
|
|
119
|
+
--spacing-container-xs: var(--db-container-xs);
|
|
120
|
+
--spacing-container-sm: var(--db-container-sm);
|
|
121
|
+
--spacing-container-md: var(--db-container-md);
|
|
122
|
+
--spacing-container-lg: var(--db-container-lg);
|
|
123
|
+
--spacing-container-xl: var(--db-container-xl);
|
|
124
|
+
--spacing-container-2xl: var(--db-container-2xl);
|
|
125
|
+
--spacing-container-3xl: var(--db-container-3xl);
|
|
98
126
|
--gap-3xs: var(--db-spacing-fixed-3xs);
|
|
99
127
|
--gap-2xs: var(--db-spacing-fixed-2xs);
|
|
100
128
|
--gap-xs: var(--db-spacing-fixed-xs);
|
|
@@ -77,6 +77,51 @@
|
|
|
77
77
|
font: var(--db-type-headline-3xl);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
@utility text-head-light-3xs {
|
|
81
|
+
font: var(--db-type-headline-3xs);
|
|
82
|
+
font-weight: 300;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@utility text-head-light-2xs {
|
|
86
|
+
font: var(--db-type-headline-2xs);
|
|
87
|
+
font-weight: 300;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@utility text-head-light-xs {
|
|
91
|
+
font: var(--db-type-headline-xs);
|
|
92
|
+
font-weight: 300;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@utility text-head-light-sm {
|
|
96
|
+
font: var(--db-type-headline-sm);
|
|
97
|
+
font-weight: 300;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@utility text-head-light-md {
|
|
101
|
+
font: var(--db-type-headline-md);
|
|
102
|
+
font-weight: 300;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@utility text-head-light-lg {
|
|
106
|
+
font: var(--db-type-headline-lg);
|
|
107
|
+
font-weight: 300;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@utility text-head-light-xl {
|
|
111
|
+
font: var(--db-type-headline-xl);
|
|
112
|
+
font-weight: 300;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
@utility text-head-light-2xl {
|
|
116
|
+
font: var(--db-type-headline-2xl);
|
|
117
|
+
font-weight: 300;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@utility text-head-light-3xl {
|
|
121
|
+
font: var(--db-type-headline-3xl);
|
|
122
|
+
font-weight: 300;
|
|
123
|
+
}
|
|
124
|
+
|
|
80
125
|
@layer base {
|
|
81
126
|
p {
|
|
82
127
|
font: var(--db-type-body-md);
|