Skip to content

Commit 0903682

Browse files
nmergetnmerget
authored
fix: issues with tailwind v4 (#4151)
* fix: issues with tailwind v4 * fix: issues for tailwind build
1 parent fb47759 commit 0903682

File tree

6 files changed

+207
-141
lines changed

6 files changed

+207
-141
lines changed

‎packages/foundations/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles --fatal-deprecation=mixed-decls",
2323
"build:04_tailwind": "cpr tailwind build/tailwind -o",
2424
"build:05_postcss": "postcss build/styles/**/*.css --replace",
25+
"build:05_tailwind_scss": "sass --no-source-map build/tailwind/theme --fatal-deprecation=mixed-decls",
2526
"build:06_ide": "cpr ide build/ide -o",
2627
"build:06_ts": "tsc",
2728
"clean": "rm -rf build",

‎packages/foundations/tailwind/tailwind-tokens.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
"sans": "var(--db-font-family-sans)",
101101
"head": "var(--db-font-family-head)"
102102
},
103-
"fontSize": {
103+
"font": {
104104
"base": "var(--db-type-body-md)",
105105
"body-3xs": "var(--db-type-body-3xs)",
106106
"body-2xs": "var(--db-type-body-2xs)",

‎packages/foundations/tailwind/theme/_variables.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
}

‎packages/foundations/tailwind/theme/dimensions.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
}

‎packages/foundations/tailwind/theme/index.css

Lines changed: 77 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,94 @@
11
/* stylelint-disable custom-property-pattern, custom-property-empty-line-before */
22

33
/* The prefix for variables are predefined by Tailwind, stylelint would throw an error */
4-
/* stylelint-disable-next-line import-notation */
5-
@import "./colors.css";
4+
@import "colors.css";
5+
@import "revert-theme.css";
6+
@import "dimensions.css";
67

78
/* 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);
129

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);
10+
@utility text-body-3xs {
11+
font: var(--db-type-body-3xs);
12+
}
13+
@utility text-body-2xs {
14+
font: var(--db-type-body-2xs);
15+
}
16+
@utility text-body-xs {
17+
font: var(--db-type-body-xs);
18+
}
19+
@utility text-body-sm {
20+
font: var(--db-type-body-sm);
21+
}
22+
@utility text-body-md {
23+
font: var(--db-type-body-md);
24+
}
25+
@utility text-body-lg {
26+
font: var(--db-type-body-lg);
27+
}
28+
@utility text-body-xl {
29+
font: var(--db-type-body-xl);
30+
}
31+
@utility text-body-2xl {
32+
font: var(--db-type-body-2xl);
33+
}
34+
@utility text-body-3xl {
35+
font: var(--db-type-body-3xl);
36+
}
11337

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);
38+
@utility text-head-3xs {
39+
font: var(--db-type-headline-3xs);
40+
}
41+
@utility text-head-2xs {
42+
font: var(--db-type-headline-2xs);
43+
}
44+
@utility text-head-xs {
45+
font: var(--db-type-headline-xs);
46+
}
47+
@utility text-head-sm {
48+
font: var(--db-type-headline-sm);
49+
}
50+
@utility text-head-md {
51+
font: var(--db-type-headline-md);
52+
}
53+
@utility text-head-lg {
54+
font: var(--db-type-headline-lg);
55+
}
56+
@utility text-head-xl {
57+
font: var(--db-type-headline-xl);
58+
}
59+
@utility text-head-2xl {
60+
font: var(--db-type-headline-2xl);
61+
}
62+
@utility text-head-3xl {
63+
font: var(--db-type-headline-3xl);
11964
}
12065

121-
@layer components {
122-
.typography {
123-
p {
124-
font-size: var(--text-body-md);
125-
}
66+
@layer base {
67+
p {
68+
font: var(--db-type-body-md);
69+
}
12670

127-
h1 {
128-
font-size: var(--text-xl);
129-
line-height: var(--text-xl--line-height);
130-
}
71+
h1 {
72+
font: var(--db-type-headline-xl);
73+
}
13174

132-
h2 {
133-
font-size: var(--text-lg);
134-
line-height: var(--text-lg--line-height);
135-
}
75+
h2 {
76+
font: var(--db-type-headline-lg);
77+
}
13678

137-
h3 {
138-
font-size: var(--text-md);
139-
line-height: var(--text-md--line-height);
140-
}
79+
h3 {
80+
font: var(--db-type-headline-md);
81+
}
14182

142-
h4 {
143-
font-size: var(--text-sm);
144-
line-height: var(--text-sm--line-height);
145-
}
83+
h4 {
84+
font: var(--db-type-headline-sm);
85+
}
14686

147-
h5 {
148-
font-size: var(--text-xs);
149-
line-height: var(--text-xs--line-height);
150-
}
87+
h5 {
88+
font: var(--db-type-headline-xs);
89+
}
15190

152-
h6 {
153-
font-size: var(--text-2xs);
154-
line-height: var(--text-2xs--line-height);
155-
}
91+
h6 {
92+
font: var(--db-type-headline-2xs);
15693
}
15794
}

‎packages/foundations/tailwind/theme/revert-theme.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@theme {
2+
--font-*: initial; /* Font family utilities like font-sans */
3+
--font-sans: var(--db-font-family-sans);
4+
--font-head: var(--db-font-family-head);
5+
6+
--text-*: initial; /* Font size utilities like text-body-xl */
7+
/* We overwrite those with custom utilities, those are just for auto complete */
8+
--text-base: var(--db-type-body-md);
9+
--text-body-3xs: var(--db-type-body-3xs);
10+
--text-body-2xs: var(--db-type-body-2xs);
11+
--text-body-xs: var(--db-type-body-xs);
12+
--text-body-sm: var(--db-type-body-sm);
13+
--text-body-md: var(--db-type-body-md);
14+
--text-body-lg: var(--db-type-body-lg);
15+
--text-body-xl: var(--db-type-body-xl);
16+
--text-body-2xl: var(--db-type-body-2xl);
17+
--text-body-3xl: var(--db-type-body-3xl);
18+
--text-head-3xs: var(--db-type-headline-3xs);
19+
--text-head-2xs: var(--db-type-headline-2xs);
20+
--text-head-xs: var(--db-type-headline-xs);
21+
--text-head-sm: var(--db-type-headline-sm);
22+
--text-head-md: var(--db-type-headline-md);
23+
--text-head-lg: var(--db-type-headline-lg);
24+
--text-head-xl: var(--db-type-headline-xl);
25+
--text-head-2xl: var(--db-type-headline-2xl);
26+
--text-head-3xl: var(--db-type-headline-3xl);
27+
28+
--spacing-*: initial; /* Spacing and sizing utilities like px-fix-md, max-h-siz-xl, and many more */
29+
--spacing-none: 0;
30+
--spacing-0: 0;
31+
--gap-*: initial; /* Gap */
32+
--gap-none: 0;
33+
--gap-0: 0;
34+
--border-*: initial; /* Border width */
35+
--border-none: 0;
36+
--border-0: 0;
37+
--radius-*: initial; /* Border radius utilities like rounded-sm */
38+
--radius-none: 0;
39+
--radius-0: 0;
40+
--shadow-*: initial; /* Box shadow utilities like shadow-md */
41+
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+
}

0 commit comments

Comments
 (0)