@db-ux/core-foundations 2.0.6 → 2.0.7

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 (9) hide show
  1. package/build/styles/defaults/_default-variables.scss +3 -6
  2. package/build/styles/helpers/_functions.scss +3 -1
  3. package/build/tailwind/tailwind-tokens.json +1 -1
  4. package/build/tailwind/theme/_variables.scss +63 -0
  5. package/build/tailwind/theme/dimensions.css +133 -0
  6. package/build/tailwind/theme/dimensions.scss +17 -0
  7. package/build/tailwind/theme/index.css +104 -153
  8. package/build/tailwind/theme/revert-theme.css +48 -0
  9. package/package.json +4 -3
package/build/styles/defaults/_default-variables.scss CHANGED
@@ -347,14 +347,11 @@
347
347
  --db-border-radius-3xl: 2rem;
348
348
  --db-border-radius-full: 500rem;
349
349
  --db-elevation-sm:
350
- 0 0 1px -1px #0003, 0 0 4px 1px #0000001f,
351
- 0 0 2px #00000024;
350
+ 0 0 1px -1px #0003, 0 0 4px 1px #0000001f, 0 0 2px #00000024;
352
351
  --db-elevation-md:
353
- 0 0 2px -1px #0003, 0 0 8px 1px #0000001f,
354
- 0 0 4px #00000024;
352
+ 0 0 2px -1px #0003, 0 0 8px 1px #0000001f, 0 0 4px #00000024;
355
353
  --db-elevation-lg:
356
- 0 0 4px -3px #0003, 0 0 16px 3px #0000001f,
357
- 0 0 8px 1px #00000024;
354
+ 0 0 4px -3px #0003, 0 0 16px 3px #0000001f, 0 0 8px 1px #00000024;
358
355
  --db-font-family-sans: "OpenSans", helvetica, arial, sans-serif;
359
356
  --db-font-family-head: "OpenSans Head", helvetica, arial, sans-serif;
360
357
  --db-sizing-fixed-mobile-header: 3.5rem;
package/build/styles/helpers/_functions.scss CHANGED
@@ -10,8 +10,10 @@
10
10
  @return #{$pxValue * 0.0625}em;
11
11
  }
12
12
 
13
+ $cursor-pointer: var(--db-overwrite-cursor, pointer);
14
+
13
15
  @mixin cursor-pointer() {
14
- cursor: var(--db-overwrite-cursor, pointer);
16
+ cursor: $cursor-pointer;
15
17
  @content;
16
18
 
17
19
  &:is(textarea),
package/build/tailwind/tailwind-tokens.json CHANGED
@@ -100,7 +100,7 @@
100
100
  "sans": "var(--db-font-family-sans)",
101
101
  "head": "var(--db-font-family-head)"
102
102
  },
103
- "fontSize": {
103
+ "font": {
104
104
  "base": "var(--db-type-body-md)",
105
105
  "body-3xs": "var(--db-type-body-3xs)",
106
106
  "body-2xs": "var(--db-type-body-2xs)",
package/build/tailwind/theme/_variables.scss ADDED
@@ -0,0 +1,63 @@
1
+ @mixin get_variables() {
2
+ --spacing-fix-3xs: var(--db-spacing-fixed-3xs);
3
+ --spacing-fix-2xs: var(--db-spacing-fixed-2xs);
4
+ --spacing-fix-xs: var(--db-spacing-fixed-xs);
5
+ --spacing-fix-sm: var(--db-spacing-fixed-sm);
6
+ --spacing-fix-md: var(--db-spacing-fixed-md);
7
+ --spacing-fix-lg: var(--db-spacing-fixed-lg);
8
+ --spacing-fix-xl: var(--db-spacing-fixed-xl);
9
+ --spacing-fix-2xl: var(--db-spacing-fixed-2xl);
10
+ --spacing-fix-3xl: var(--db-spacing-fixed-3xl);
11
+ --spacing-res-3xs: var(--db-spacing-responsive-3xs);
12
+ --spacing-res-2xs: var(--db-spacing-responsive-2xs);
13
+ --spacing-res-xs: var(--db-spacing-responsive-xs);
14
+ --spacing-res-sm: var(--db-spacing-responsive-sm);
15
+ --spacing-res-md: var(--db-spacing-responsive-md);
16
+ --spacing-res-lg: var(--db-spacing-responsive-lg);
17
+ --spacing-res-xl: var(--db-spacing-responsive-xl);
18
+ --spacing-res-2xl: var(--db-spacing-responsive-2xl);
19
+ --spacing-res-3xl: var(--db-spacing-responsive-3xl);
20
+ --spacing-siz-3xs: var(--db-sizing-3xs);
21
+ --spacing-siz-2xs: var(--db-sizing-2xs);
22
+ --spacing-siz-xs: var(--db-sizing-xs);
23
+ --spacing-siz-sm: var(--db-sizing-sm);
24
+ --spacing-siz-md: var(--db-sizing-md);
25
+ --spacing-siz-lg: var(--db-sizing-lg);
26
+ --spacing-siz-xl: var(--db-sizing-xl);
27
+ --spacing-siz-2xl: var(--db-sizing-2xl);
28
+ --spacing-siz-3xl: var(--db-sizing-3xl);
29
+ --gap-3xs: var(--db-spacing-fixed-3xs);
30
+ --gap-2xs: var(--db-spacing-fixed-2xs);
31
+ --gap-xs: var(--db-spacing-fixed-xs);
32
+ --gap-sm: var(--db-spacing-fixed-sm);
33
+ --gap-md: var(--db-spacing-fixed-md);
34
+ --gap-lg: var(--db-spacing-fixed-lg);
35
+ --gap-xl: var(--db-spacing-fixed-xl);
36
+ --gap-2xl: var(--db-spacing-fixed-2xl);
37
+ --gap-3xl: var(--db-spacing-fixed-3xl);
38
+ --border: var(--db-border-width-3xs);
39
+ --border-3xs: var(--db-border-width-3xs);
40
+ --border-2xs: var(--db-border-width-2xs);
41
+ --border-xs: var(--db-border-width-xs);
42
+ --border-sm: var(--db-border-width-sm);
43
+ --border-md: var(--db-border-width-md);
44
+ --border-lg: var(--db-border-width-lg);
45
+ --border-xl: var(--db-border-width-xl);
46
+ --border-2xl: var(--db-border-width-2xl);
47
+ --border-3xl: var(--db-border-width-3xl);
48
+ --radius: var(--db-border-radius-xs);
49
+ --radius-3xs: var(--db-border-radius-3xs);
50
+ --radius-2xs: var(--db-border-radius-2xs);
51
+ --radius-xs: var(--db-border-radius-xs);
52
+ --radius-sm: var(--db-border-radius-sm);
53
+ --radius-md: var(--db-border-radius-md);
54
+ --radius-lg: var(--db-border-radius-lg);
55
+ --radius-xl: var(--db-border-radius-xl);
56
+ --radius-2xl: var(--db-border-radius-2xl);
57
+ --radius-3xl: var(--db-border-radius-3xl);
58
+ --radius-full: var(--db-border-radius-full);
59
+ --shadow: var(--db-elevation-md);
60
+ --shadow-sm: var(--db-elevation-sm);
61
+ --shadow-md: var(--db-elevation-md);
62
+ --shadow-lg: var(--db-elevation-lg);
63
+ }
package/build/tailwind/theme/dimensions.css ADDED
@@ -0,0 +1,133 @@
1
+ @theme {
2
+ --spacing-fix-3xs: var(--db-spacing-fixed-3xs);
3
+ --spacing-fix-2xs: var(--db-spacing-fixed-2xs);
4
+ --spacing-fix-xs: var(--db-spacing-fixed-xs);
5
+ --spacing-fix-sm: var(--db-spacing-fixed-sm);
6
+ --spacing-fix-md: var(--db-spacing-fixed-md);
7
+ --spacing-fix-lg: var(--db-spacing-fixed-lg);
8
+ --spacing-fix-xl: var(--db-spacing-fixed-xl);
9
+ --spacing-fix-2xl: var(--db-spacing-fixed-2xl);
10
+ --spacing-fix-3xl: var(--db-spacing-fixed-3xl);
11
+ --spacing-res-3xs: var(--db-spacing-responsive-3xs);
12
+ --spacing-res-2xs: var(--db-spacing-responsive-2xs);
13
+ --spacing-res-xs: var(--db-spacing-responsive-xs);
14
+ --spacing-res-sm: var(--db-spacing-responsive-sm);
15
+ --spacing-res-md: var(--db-spacing-responsive-md);
16
+ --spacing-res-lg: var(--db-spacing-responsive-lg);
17
+ --spacing-res-xl: var(--db-spacing-responsive-xl);
18
+ --spacing-res-2xl: var(--db-spacing-responsive-2xl);
19
+ --spacing-res-3xl: var(--db-spacing-responsive-3xl);
20
+ --spacing-siz-3xs: var(--db-sizing-3xs);
21
+ --spacing-siz-2xs: var(--db-sizing-2xs);
22
+ --spacing-siz-xs: var(--db-sizing-xs);
23
+ --spacing-siz-sm: var(--db-sizing-sm);
24
+ --spacing-siz-md: var(--db-sizing-md);
25
+ --spacing-siz-lg: var(--db-sizing-lg);
26
+ --spacing-siz-xl: var(--db-sizing-xl);
27
+ --spacing-siz-2xl: var(--db-sizing-2xl);
28
+ --spacing-siz-3xl: var(--db-sizing-3xl);
29
+ --gap-3xs: var(--db-spacing-fixed-3xs);
30
+ --gap-2xs: var(--db-spacing-fixed-2xs);
31
+ --gap-xs: var(--db-spacing-fixed-xs);
32
+ --gap-sm: var(--db-spacing-fixed-sm);
33
+ --gap-md: var(--db-spacing-fixed-md);
34
+ --gap-lg: var(--db-spacing-fixed-lg);
35
+ --gap-xl: var(--db-spacing-fixed-xl);
36
+ --gap-2xl: var(--db-spacing-fixed-2xl);
37
+ --gap-3xl: var(--db-spacing-fixed-3xl);
38
+ --border: var(--db-border-width-3xs);
39
+ --border-3xs: var(--db-border-width-3xs);
40
+ --border-2xs: var(--db-border-width-2xs);
41
+ --border-xs: var(--db-border-width-xs);
42
+ --border-sm: var(--db-border-width-sm);
43
+ --border-md: var(--db-border-width-md);
44
+ --border-lg: var(--db-border-width-lg);
45
+ --border-xl: var(--db-border-width-xl);
46
+ --border-2xl: var(--db-border-width-2xl);
47
+ --border-3xl: var(--db-border-width-3xl);
48
+ --radius: var(--db-border-radius-xs);
49
+ --radius-3xs: var(--db-border-radius-3xs);
50
+ --radius-2xs: var(--db-border-radius-2xs);
51
+ --radius-xs: var(--db-border-radius-xs);
52
+ --radius-sm: var(--db-border-radius-sm);
53
+ --radius-md: var(--db-border-radius-md);
54
+ --radius-lg: var(--db-border-radius-lg);
55
+ --radius-xl: var(--db-border-radius-xl);
56
+ --radius-2xl: var(--db-border-radius-2xl);
57
+ --radius-3xl: var(--db-border-radius-3xl);
58
+ --radius-full: var(--db-border-radius-full);
59
+ --shadow: var(--db-elevation-md);
60
+ --shadow-sm: var(--db-elevation-sm);
61
+ --shadow-md: var(--db-elevation-md);
62
+ --shadow-lg: var(--db-elevation-lg);
63
+ }
64
+ @layer densities {
65
+ .db-density-expressive,
66
+ [data-density=expressive],
67
+ .db-density-regular,
68
+ [data-density=regular],
69
+ .db-density-functional,
70
+ [data-density=functional] {
71
+ --spacing-fix-3xs: var(--db-spacing-fixed-3xs);
72
+ --spacing-fix-2xs: var(--db-spacing-fixed-2xs);
73
+ --spacing-fix-xs: var(--db-spacing-fixed-xs);
74
+ --spacing-fix-sm: var(--db-spacing-fixed-sm);
75
+ --spacing-fix-md: var(--db-spacing-fixed-md);
76
+ --spacing-fix-lg: var(--db-spacing-fixed-lg);
77
+ --spacing-fix-xl: var(--db-spacing-fixed-xl);
78
+ --spacing-fix-2xl: var(--db-spacing-fixed-2xl);
79
+ --spacing-fix-3xl: var(--db-spacing-fixed-3xl);
80
+ --spacing-res-3xs: var(--db-spacing-responsive-3xs);
81
+ --spacing-res-2xs: var(--db-spacing-responsive-2xs);
82
+ --spacing-res-xs: var(--db-spacing-responsive-xs);
83
+ --spacing-res-sm: var(--db-spacing-responsive-sm);
84
+ --spacing-res-md: var(--db-spacing-responsive-md);
85
+ --spacing-res-lg: var(--db-spacing-responsive-lg);
86
+ --spacing-res-xl: var(--db-spacing-responsive-xl);
87
+ --spacing-res-2xl: var(--db-spacing-responsive-2xl);
88
+ --spacing-res-3xl: var(--db-spacing-responsive-3xl);
89
+ --spacing-siz-3xs: var(--db-sizing-3xs);
90
+ --spacing-siz-2xs: var(--db-sizing-2xs);
91
+ --spacing-siz-xs: var(--db-sizing-xs);
92
+ --spacing-siz-sm: var(--db-sizing-sm);
93
+ --spacing-siz-md: var(--db-sizing-md);
94
+ --spacing-siz-lg: var(--db-sizing-lg);
95
+ --spacing-siz-xl: var(--db-sizing-xl);
96
+ --spacing-siz-2xl: var(--db-sizing-2xl);
97
+ --spacing-siz-3xl: var(--db-sizing-3xl);
98
+ --gap-3xs: var(--db-spacing-fixed-3xs);
99
+ --gap-2xs: var(--db-spacing-fixed-2xs);
100
+ --gap-xs: var(--db-spacing-fixed-xs);
101
+ --gap-sm: var(--db-spacing-fixed-sm);
102
+ --gap-md: var(--db-spacing-fixed-md);
103
+ --gap-lg: var(--db-spacing-fixed-lg);
104
+ --gap-xl: var(--db-spacing-fixed-xl);
105
+ --gap-2xl: var(--db-spacing-fixed-2xl);
106
+ --gap-3xl: var(--db-spacing-fixed-3xl);
107
+ --border: var(--db-border-width-3xs);
108
+ --border-3xs: var(--db-border-width-3xs);
109
+ --border-2xs: var(--db-border-width-2xs);
110
+ --border-xs: var(--db-border-width-xs);
111
+ --border-sm: var(--db-border-width-sm);
112
+ --border-md: var(--db-border-width-md);
113
+ --border-lg: var(--db-border-width-lg);
114
+ --border-xl: var(--db-border-width-xl);
115
+ --border-2xl: var(--db-border-width-2xl);
116
+ --border-3xl: var(--db-border-width-3xl);
117
+ --radius: var(--db-border-radius-xs);
118
+ --radius-3xs: var(--db-border-radius-3xs);
119
+ --radius-2xs: var(--db-border-radius-2xs);
120
+ --radius-xs: var(--db-border-radius-xs);
121
+ --radius-sm: var(--db-border-radius-sm);
122
+ --radius-md: var(--db-border-radius-md);
123
+ --radius-lg: var(--db-border-radius-lg);
124
+ --radius-xl: var(--db-border-radius-xl);
125
+ --radius-2xl: var(--db-border-radius-2xl);
126
+ --radius-3xl: var(--db-border-radius-3xl);
127
+ --radius-full: var(--db-border-radius-full);
128
+ --shadow: var(--db-elevation-md);
129
+ --shadow-sm: var(--db-elevation-sm);
130
+ --shadow-md: var(--db-elevation-md);
131
+ --shadow-lg: var(--db-elevation-lg);
132
+ }
133
+ }
package/build/tailwind/theme/dimensions.scss ADDED
@@ -0,0 +1,17 @@
1
+ @use "variables";
2
+
3
+ // stylelint-disable-next-line scss/at-rule-no-unknown
4
+ @theme {
5
+ @include variables.get_variables();
6
+ }
7
+
8
+ @layer densities {
9
+ .db-density-expressive,
10
+ [data-density="expressive"],
11
+ .db-density-regular,
12
+ [data-density="regular"],
13
+ .db-density-functional,
14
+ [data-density="functional"] {
15
+ @include variables.get_variables();
16
+ }
17
+ }
package/build/tailwind/theme/index.css CHANGED
@@ -1,157 +1,108 @@
1
- /* stylelint-disable custom-property-pattern, custom-property-empty-line-before */
1
+ /* stylelint-disable custom-property-pattern, custom-property-empty-line-before, scss/at-rule-no-unknown */
2
2
 
3
3
  /* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
4
- /* stylelint-disable-next-line import-notation */
5
- @import "./colors.css";
6
-
7
- /* stylelint-disable-next-line scss/at-rule-no-unknown */
8
- @theme {
9
- --font-*: initial; /* Font family utilities like font-sans */
10
- --font-sans: var(--db-font-family-sans);
11
- --font-head: var(--db-font-family-head);
12
-
13
- --text-*: initial; /* Font size utilities like text-body-xl */
14
- --text-base: var(--db-type-body-md);
15
- --text-body-3xs: var(--db-type-body-3xs);
16
- --text-body-2xs: var(--db-type-body-2xs);
17
- --text-body-xs: var(--db-type-body-xs);
18
- --text-body-sm: var(--db-type-body-sm);
19
- --text-body-md: var(--db-type-body-md);
20
- --text-body-lg: var(--db-type-body-lg);
21
- --text-body-xl: var(--db-type-body-xl);
22
- --text-body-2xl: var(--db-type-body-2xl);
23
- --text-body-3xl: var(--db-type-body-3xl);
24
- --text-head-3xs: var(--db-type-headline-3xs);
25
- --text-head-2xs: var(--db-type-headline-2xs);
26
- --text-head-xs: var(--db-type-headline-xs);
27
- --text-head-sm: var(--db-type-headline-sm);
28
- --text-head-md: var(--db-type-headline-md);
29
- --text-head-lg: var(--db-type-headline-lg);
30
- --text-head-xl: var(--db-type-headline-xl);
31
- --text-head-2xl: var(--db-type-headline-2xl);
32
- --text-head-3xl: var(--db-type-headline-3xl);
33
-
34
- --breakpoint-*: initial; /* Responsive breakpoint variants like sm:* */
35
- --breakpoint-xs: 360px;
36
- --breakpoint-sm: 720px;
37
- --breakpoint-md: 1024px;
38
- --breakpoint-lg: 1440px;
39
- --breakpoint-xl: 1920px;
40
-
41
- --spacing-*: initial; /* Spacing and sizing utilities like px-fix-md, max-h-siz-xl, and many more */
42
- --spacing-none: 0;
43
- --spacing-0: 0;
44
- --spacing-fix-3xs: var(--db-spacing-fixed-3xs);
45
- --spacing-fix-2xs: var(--db-spacing-fixed-2xs);
46
- --spacing-fix-xs: var(--db-spacing-fixed-xs);
47
- --spacing-fix-sm: var(--db-spacing-fixed-sm);
48
- --spacing-fix-md: var(--db-spacing-fixed-md);
49
- --spacing-fix-lg: var(--db-spacing-fixed-lg);
50
- --spacing-fix-xl: var(--db-spacing-fixed-xl);
51
- --spacing-fix-2xl: var(--db-spacing-fixed-2xl);
52
- --spacing-fix-3xl: var(--db-spacing-fixed-3xl);
53
- --spacing-res-3xs: var(--db-spacing-responsive-3xs);
54
- --spacing-res-2xs: var(--db-spacing-responsive-2xs);
55
- --spacing-res-xs: var(--db-spacing-responsive-xs);
56
- --spacing-res-sm: var(--db-spacing-responsive-sm);
57
- --spacing-res-md: var(--db-spacing-responsive-md);
58
- --spacing-res-lg: var(--db-spacing-responsive-lg);
59
- --spacing-res-xl: var(--db-spacing-responsive-xl);
60
- --spacing-res-2xl: var(--db-spacing-responsive-2xl);
61
- --spacing-res-3xl: var(--db-spacing-responsive-3xl);
62
- --spacing-siz-3xs: var(--db-sizing-3xs);
63
- --spacing-siz-2xs: var(--db-sizing-2xs);
64
- --spacing-siz-xs: var(--db-sizing-xs);
65
- --spacing-siz-sm: var(--db-sizing-sm);
66
- --spacing-siz-md: var(--db-sizing-md);
67
- --spacing-siz-lg: var(--db-sizing-lg);
68
- --spacing-siz-xl: var(--db-sizing-xl);
69
- --spacing-siz-2xl: var(--db-sizing-2xl);
70
- --spacing-siz-3xl: var(--db-sizing-3xl);
71
-
72
- --gap-*: initial; /* Gap */
73
- --gap-none: 0;
74
- --gap-0: 0;
75
- --gap-3xs: var(--db-gap-fixed-3xs);
76
- --gap-2xs: var(--db-gap-fixed-2xs);
77
- --gap-xs: var(--db-gap-fixed-xs);
78
- --gap-sm: var(--db-gap-fixed-sm);
79
- --gap-md: var(--db-gap-fixed-md);
80
- --gap-lg: var(--db-gap-fixed-lg);
81
- --gap-xl: var(--db-gap-fixed-xl);
82
- --gap-2xl: var(--db-gap-fixed-2xl);
83
- --gap-3xl: var(--db-gap-fixed-3xl);
84
-
85
- --border-*: initial; /* Border width */
86
- --border: var(--db-border-width-3xs);
87
- --border-none: 0;
88
- --border-0: 0;
89
- --border-3xs: var(--db-border-width-3xs);
90
- --border-2xs: var(--db-border-width-2xs);
91
- --border-xs: var(--db-border-width-xs);
92
- --border-sm: var(--db-border-width-sm);
93
- --border-md: var(--db-border-width-md);
94
- --border-lg: var(--db-border-width-lg);
95
- --border-xl: var(--db-border-width-xl);
96
- --border-2xl: var(--db-border-width-2xl);
97
- --border-3xl: var(--db-border-width-3xl);
98
-
99
- --radius-*: initial; /* Border radius utilities like rounded-sm */
100
- --radius: var(--db-border-radius-xs);
101
- --radius-none: 0;
102
- --radius-0: 0;
103
- --radius-3xs: var(--db-border-radius-3xs);
104
- --radius-2xs: var(--db-border-radius-2xs);
105
- --radius-xs: var(--db-border-radius-xs);
106
- --radius-sm: var(--db-border-radius-sm);
107
- --radius-md: var(--db-border-radius-md);
108
- --radius-lg: var(--db-border-radius-lg);
109
- --radius-xl: var(--db-border-radius-xl);
110
- --radius-2xl: var(--db-border-radius-2xl);
111
- --radius-3xl: var(--db-border-radius-3xl);
112
- --radius-full: var(--db-border-radius-full);
113
-
114
- --shadow-*: initial; /* Box shadow utilities like shadow-md */
115
- --shadow: var(--db-elevation-md);
116
- --shadow-sm: var(--db-elevation-sm);
117
- --shadow-md: var(--db-elevation-md);
118
- --shadow-lg: var(--db-elevation-lg);
119
- }
120
-
121
- @layer components {
122
- .typography {
123
- p {
124
- font-size: var(--text-body-md);
125
- }
126
-
127
- h1 {
128
- font-size: var(--text-xl);
129
- line-height: var(--text-xl--line-height);
130
- }
131
-
132
- h2 {
133
- font-size: var(--text-lg);
134
- line-height: var(--text-lg--line-height);
135
- }
136
-
137
- h3 {
138
- font-size: var(--text-md);
139
- line-height: var(--text-md--line-height);
140
- }
141
-
142
- h4 {
143
- font-size: var(--text-sm);
144
- line-height: var(--text-sm--line-height);
145
- }
146
-
147
- h5 {
148
- font-size: var(--text-xs);
149
- line-height: var(--text-xs--line-height);
150
- }
151
-
152
- h6 {
153
- font-size: var(--text-2xs);
154
- line-height: var(--text-2xs--line-height);
155
- }
4
+ @import url("colors.css");
5
+ @import url("revert-theme.css");
6
+ @import url("dimensions.css");
7
+
8
+ @utility text-body-3xs {
9
+ font: var(--db-type-body-3xs);
10
+ }
11
+
12
+ @utility text-body-2xs {
13
+ font: var(--db-type-body-2xs);
14
+ }
15
+
16
+ @utility text-body-xs {
17
+ font: var(--db-type-body-xs);
18
+ }
19
+
20
+ @utility text-body-sm {
21
+ font: var(--db-type-body-sm);
22
+ }
23
+
24
+ @utility text-body-md {
25
+ font: var(--db-type-body-md);
26
+ }
27
+
28
+ @utility text-body-lg {
29
+ font: var(--db-type-body-lg);
30
+ }
31
+
32
+ @utility text-body-xl {
33
+ font: var(--db-type-body-xl);
34
+ }
35
+
36
+ @utility text-body-2xl {
37
+ font: var(--db-type-body-2xl);
38
+ }
39
+
40
+ @utility text-body-3xl {
41
+ font: var(--db-type-body-3xl);
42
+ }
43
+
44
+ @utility text-head-3xs {
45
+ font: var(--db-type-headline-3xs);
46
+ }
47
+
48
+ @utility text-head-2xs {
49
+ font: var(--db-type-headline-2xs);
50
+ }
51
+
52
+ @utility text-head-xs {
53
+ font: var(--db-type-headline-xs);
54
+ }
55
+
56
+ @utility text-head-sm {
57
+ font: var(--db-type-headline-sm);
58
+ }
59
+
60
+ @utility text-head-md {
61
+ font: var(--db-type-headline-md);
62
+ }
63
+
64
+ @utility text-head-lg {
65
+ font: var(--db-type-headline-lg);
66
+ }
67
+
68
+ @utility text-head-xl {
69
+ font: var(--db-type-headline-xl);
70
+ }
71
+
72
+ @utility text-head-2xl {
73
+ font: var(--db-type-headline-2xl);
74
+ }
75
+
76
+ @utility text-head-3xl {
77
+ font: var(--db-type-headline-3xl);
78
+ }
79
+
80
+ @layer base {
81
+ p {
82
+ font: var(--db-type-body-md);
83
+ }
84
+
85
+ h1 {
86
+ font: var(--db-type-headline-xl);
87
+ }
88
+
89
+ h2 {
90
+ font: var(--db-type-headline-lg);
91
+ }
92
+
93
+ h3 {
94
+ font: var(--db-type-headline-md);
95
+ }
96
+
97
+ h4 {
98
+ font: var(--db-type-headline-sm);
99
+ }
100
+
101
+ h5 {
102
+ font: var(--db-type-headline-xs);
103
+ }
104
+
105
+ h6 {
106
+ font: var(--db-type-headline-2xs);
156
107
  }
157
108
  }
package/build/tailwind/theme/revert-theme.css ADDED
@@ -0,0 +1,48 @@
1
+ /* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
2
+ /* stylelint-disable scss/at-rule-no-unknown, custom-property-pattern */
3
+ @theme {
4
+ --font-*: initial; /* Font family utilities like font-sans */
5
+ --font-sans: var(--db-font-family-sans);
6
+ --font-head: var(--db-font-family-head);
7
+ --text-*: initial; /* Font size utilities like text-body-xl */
8
+
9
+ /* We overwrite those with custom utilities, those are just for auto complete */
10
+ --text-base: var(--db-type-body-md);
11
+ --text-body-3xs: var(--db-type-body-3xs);
12
+ --text-body-2xs: var(--db-type-body-2xs);
13
+ --text-body-xs: var(--db-type-body-xs);
14
+ --text-body-sm: var(--db-type-body-sm);
15
+ --text-body-md: var(--db-type-body-md);
16
+ --text-body-lg: var(--db-type-body-lg);
17
+ --text-body-xl: var(--db-type-body-xl);
18
+ --text-body-2xl: var(--db-type-body-2xl);
19
+ --text-body-3xl: var(--db-type-body-3xl);
20
+ --text-head-3xs: var(--db-type-headline-3xs);
21
+ --text-head-2xs: var(--db-type-headline-2xs);
22
+ --text-head-xs: var(--db-type-headline-xs);
23
+ --text-head-sm: var(--db-type-headline-sm);
24
+ --text-head-md: var(--db-type-headline-md);
25
+ --text-head-lg: var(--db-type-headline-lg);
26
+ --text-head-xl: var(--db-type-headline-xl);
27
+ --text-head-2xl: var(--db-type-headline-2xl);
28
+ --text-head-3xl: var(--db-type-headline-3xl);
29
+ --spacing-*: initial; /* Spacing and sizing utilities like px-fix-md, max-h-siz-xl, and many more */
30
+ --spacing-none: 0;
31
+ --spacing-0: 0;
32
+ --gap-*: initial; /* Gap */
33
+ --gap-none: 0;
34
+ --gap-0: 0;
35
+ --border-*: initial; /* Border width */
36
+ --border-none: 0;
37
+ --border-0: 0;
38
+ --radius-*: initial; /* Border radius utilities like rounded-sm */
39
+ --radius-none: 0;
40
+ --radius-0: 0;
41
+ --shadow-*: initial; /* Box shadow utilities like shadow-md */
42
+ --breakpoint-*: initial; /* Responsive breakpoint variants like sm:* */
43
+ --breakpoint-xs: 360px;
44
+ --breakpoint-sm: 720px;
45
+ --breakpoint-md: 1024px;
46
+ --breakpoint-lg: 1440px;
47
+ --breakpoint-xl: 1920px;
48
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/core-foundations",
3
- "version": "2.0.6",
3
+ "version": "2.0.7",
4
4
  "type": "module",
5
5
  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
6
6
  "repository": {
@@ -22,6 +22,7 @@
22
22
  "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles --fatal-deprecation=mixed-decls",
23
23
  "build:04_tailwind": "cpr tailwind build/tailwind -o",
24
24
  "build:05_postcss": "postcss build/styles/**/*.css --replace",
25
+ "build:05_tailwind_scss": "sass --no-source-map build/tailwind/theme --fatal-deprecation=mixed-decls",
25
26
  "build:06_ide": "cpr ide build/ide -o",
26
27
  "build:06_ts": "tsc",
27
28
  "clean": "rm -rf build",
@@ -47,7 +48,7 @@
47
48
  "@csstools/normalize.css": "12.1.1",
48
49
  "@db-ux/icon-font-tools": "0.3.2",
49
50
  "cpr": "3.0.1",
50
- "cssnano": "^7.0.6",
51
+ "cssnano": "^7.0.7",
51
52
  "dotenv": "^16.5.0",
52
53
  "glob": "11.0.2",
53
54
  "nodemon": "3.1.10",
@@ -55,7 +56,7 @@
55
56
  "sass": "1.85.0",
56
57
  "tsx": "^4.19.4",
57
58
  "typescript": "^5.4.5",
58
- "vite": "^6.3.3"
59
+ "vite": "^6.3.5"
59
60
  },
60
61
  "publishConfig": {
61
62
  "registry": "https://registry.npmjs.org/",