Skip to content

Commit 7d9cbdc

Browse files
lertelerte
committed
0.5.0 for tailwindcss v4
1 parent eca6112 commit 7d9cbdc

File tree

70 files changed

+1237
-1269
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1237
-1269
lines changed

‎apps/docs/content/getting-started/installation.md

+81-116
Original file line numberDiff line numberDiff line change
@@ -11,129 +11,94 @@ title: Installation
1111
<tabs language="shell" items='[{"label":"pnpm","icon":"pnpm","content":"pnpm add actify"},{"label":"yarn","icon":"yarn","content":"yarn add actify"},{"label":"npm","icon":"npm","content":"npm i actify"}]'>
1212
</tabs>
1313

14-
## globals.css
14+
## app.css
1515

1616
```css
17-
@tailwind base;
18-
@tailwind components;
19-
@tailwind utilities;
17+
@import 'tailwindcss';
2018

2119
:root {
22-
--md-sys-color-background: 255 248 243;
23-
--md-sys-color-on-background: 32 27 18;
24-
--md-sys-color-surface: 255 248 243;
25-
--md-sys-color-surface-dim: 228 216 203;
26-
--md-sys-color-surface-bright: 255 248 243;
27-
--md-sys-color-surface-container-lowest: 255 255 255;
28-
--md-sys-color-surface-container-low: 254 242 228;
29-
--md-sys-color-surface-container: 248 236 222;
30-
--md-sys-color-surface-container-high: 243 230 216;
31-
--md-sys-color-surface-container-highest: 237 225 211;
32-
--md-sys-color-on-surface: 32 27 18;
33-
--md-sys-color-surface-variant: 242 225 201;
34-
--md-sys-color-on-surface-variant: 80 69 52;
35-
--md-sys-color-inverse-surface: 54 47 38;
36-
--md-sys-color-inverse-on-surface: 251 239 225;
37-
--md-sys-color-outline: 131 117 98;
38-
--md-sys-color-outline-variant: 213 196 174;
39-
--md-sys-color-shadow: 0 0 0;
40-
--md-sys-color-scrim: 0 0 0;
41-
--md-sys-color-surface-tint: 127 87 0;
42-
--md-sys-color-primary: 127 87 0;
43-
--md-sys-color-on-primary: 255 255 255;
44-
--md-sys-color-primary-container: 247 179 55;
45-
--md-sys-color-on-primary-container: 68 45 0;
46-
--md-sys-color-inverse-primary: 255 186 62;
47-
--md-sys-color-secondary: 118 90 43;
48-
--md-sys-color-on-secondary: 255 255 255;
49-
--md-sys-color-secondary-container: 255 220 169;
50-
--md-sys-color-on-secondary-container: 92 67 22;
51-
--md-sys-color-tertiary: 86 101 0;
52-
--md-sys-color-on-tertiary: 255 255 255;
53-
--md-sys-color-tertiary-container: 182 202 84;
54-
--md-sys-color-on-tertiary-container: 45 54 0;
55-
--md-sys-color-error: 186 26 26;
56-
--md-sys-color-on-error: 255 255 255;
57-
--md-sys-color-error-container: 255 218 214;
58-
--md-sys-color-on-error-container: 65 0 2;
20+
--md-sys-color-background: #18130b;
21+
--md-sys-color-on-background: #ede1d3;
22+
--md-sys-color-surface: #18130b;
23+
--md-sys-color-surface-dim: #18130b;
24+
--md-sys-color-surface-bright: #3f382f;
25+
--md-sys-color-surface-container-lowest: #120d06;
26+
--md-sys-color-surface-container-low: #201b12;
27+
--md-sys-color-surface-container: #251f16;
28+
--md-sys-color-surface-container-high: #2f2920;
29+
--md-sys-color-surface-container-highest: #3b342a;
30+
--md-sys-color-on-surface: #ede1d3;
31+
--md-sys-color-surface-variant: #504534;
32+
--md-sys-color-on-surface-variant: #d5c4ae;
33+
--md-sys-color-inverse-surface: #ede1d3;
34+
--md-sys-color-inverse-on-surface: #362f26;
35+
--md-sys-color-outline: #9d8f7b;
36+
--md-sys-color-outline-variant: #504534;
37+
--md-sys-color-shadow: #000000;
38+
--md-sys-color-scrim: #000000;
39+
--md-sys-color-surface-tint: #ffba3e;
40+
--md-sys-color-primary: #ffc971;
41+
--md-sys-color-on-primary: #432c00;
42+
--md-sys-color-primary-container: #ecaa2e;
43+
--md-sys-color-on-primary-container: #614100;
44+
--md-sys-color-inverse-primary: #7f5700;
45+
--md-sys-color-secondary: #e6c188;
46+
--md-sys-color-on-secondary: #432c02;
47+
--md-sys-color-secondary-container: #5e4518;
48+
--md-sys-color-on-secondary-container: #d7b37c;
49+
--md-sys-color-tertiary: #c7dc64;
50+
--md-sys-color-on-tertiary: #2c3400;
51+
--md-sys-color-tertiary-container: #acc04b;
52+
--md-sys-color-on-tertiary-container: #414d00;
53+
--md-sys-color-error: #ffb4ab;
54+
--md-sys-color-on-error: #690005;
55+
--md-sys-color-error-container: #93000a;
56+
--md-sys-color-on-error-container: #ffdad6;
5957
}
60-
```
61-
62-
## tailwind.config.js
6358

64-
```ts
65-
import { Config } from 'tailwindcss'
66-
67-
const config: Config = {
68-
content: ['./src/**/*.{ts,tsx}'],
69-
theme: {
70-
extend: {
71-
colors: {
72-
background: 'rgb(var(--md-sys-color-background) / <alpha-value>)',
73-
'on-background':
74-
'rgb(var(--md-sys-color-on-background) / <alpha-value>)',
75-
surface: 'rgb(var(--md-sys-color-surface) / <alpha-value>)',
76-
'surface-dim': 'rgb(var(--md-sys-color-surface-dim) / <alpha-value>)',
77-
'surface-bright':
78-
'rgb(var(--md-sys-color-surface-bright) / <alpha-value>)',
79-
'surface-container-lowest':
80-
'rgb(var(--md-sys-color-surface-container-lowest) / <alpha-value>)',
81-
'surface-container-low':
82-
'rgb(var(--md-sys-color-surface-container-low) / <alpha-value>)',
83-
'surface-container':
84-
'rgb(var(--md-sys-color-surface-container) / <alpha-value>)',
85-
'surface-container-high':
86-
'rgb(var(--md-sys-color-surface-container-high) / <alpha-value>)',
87-
'surface-container-highest':
88-
'rgb(var(--md-sys-color-surface-container-highest) / <alpha-value>)',
89-
'on-surface': 'rgb(var(--md-sys-color-on-surface) / <alpha-value>)',
90-
'surface-variant':
91-
'rgb(var(--md-sys-color-surface-variant) / <alpha-value>)',
92-
'on-surface-variant':
93-
'rgb(var(--md-sys-color-on-surface-variant) / <alpha-value>)',
94-
'inverse-surface':
95-
'rgb(var(--md-sys-color-inverse-surface) / <alpha-value>)',
96-
'inverse-on-surface':
97-
'rgb(var(--md-sys-color-inverse-on-surface) / <alpha-value>)',
98-
outline: 'rgb(var(--md-sys-color-outline) / <alpha-value>)',
99-
'outline-variant':
100-
'rgb(var(--md-sys-color-outline-variant) / <alpha-value>)',
101-
shadow: 'rgb(var(--md-sys-color-shadow) / <alpha-value>)',
102-
scrim: 'rgb(var(--md-sys-color-scrim) / <alpha-value>)',
103-
'surface-tint': 'rgb(var(--md-sys-color-surface-tint) / <alpha-value>)',
104-
primary: 'rgb(var(--md-sys-color-primary) / <alpha-value>)',
105-
'on-primary': 'rgb(var(--md-sys-color-on-primary) / <alpha-value>)',
106-
'primary-container':
107-
'rgb(var(--md-sys-color-primary-container) / <alpha-value>)',
108-
'on-primary-container':
109-
'rgb(var(--md-sys-color-on-primary-container) / <alpha-value>)',
110-
'inverse-primary':
111-
'rgb(var(--md-sys-color-inverse-primary) / <alpha-value>)',
112-
secondary: 'rgb(var(--md-sys-color-secondary) / <alpha-value>)',
113-
'on-secondary': 'rgb(var(--md-sys-color-on-secondary) / <alpha-value>)',
114-
'secondary-container':
115-
'rgb(var(--md-sys-color-secondary-container) / <alpha-value>)',
116-
'on-secondary-container':
117-
'rgb(var(--md-sys-color-on-secondary-container) / <alpha-value>)',
118-
tertiary: 'rgb(var(--md-sys-color-tertiary) / <alpha-value>)',
119-
'on-tertiary': 'rgb(var(--md-sys-color-on-tertiary) / <alpha-value>)',
120-
'tertiary-container':
121-
'rgb(var(--md-sys-color-tertiary-container) / <alpha-value>)',
122-
'on-tertiary-container':
123-
'rgb(var(--md-sys-color-on-tertiary-container) / <alpha-value>)',
124-
error: 'rgb(var(--md-sys-color-error) / <alpha-value>)',
125-
'on-error': 'rgb(var(--md-sys-color-on-error) / <alpha-value>)',
126-
'error-container':
127-
'rgb(var(--md-sys-color-error-container) / <alpha-value>)',
128-
'on-error-container':
129-
'rgb(var(--md-sys-color-on-error-container) / <alpha-value>)'
130-
}
131-
}
132-
},
133-
plugins: []
59+
@theme {
60+
--color-background: var(--md-sys-color-background);
61+
--color-on-background: var(--md-sys-color-on-background);
62+
--color-surface: var(--md-sys-color-surface);
63+
--color-surface-dim: var(--md-sys-color-surface-dim);
64+
--color-surface-bright: var(--md-sys-color-surface-bright);
65+
--color-surface-container-lowest: var(
66+
--md-sys-color-surface-container-lowest
67+
);
68+
--color-surface-container-low: var(--md-sys-color-surface-container-low);
69+
--color-surface-container: var(--md-sys-color-surface-container);
70+
--color-surface-container-high: var(--md-sys-color-surface-container-high);
71+
--color-surface-container-highest: var(
72+
--md-sys-color-surface-container-highest
73+
);
74+
--color-on-surface: var(--md-sys-color-on-surface);
75+
--color-surface-variant: var(--md-sys-color-surface-variant);
76+
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
77+
--color-inverse-surface: var(--md-sys-color-inverse-surface);
78+
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
79+
--color-outline: var(--md-sys-color-outline);
80+
--color-outline-variant: var(--md-sys-color-outline-variant);
81+
--color-shadow: var(--md-sys-color-shadow);
82+
--color-scrim: var(--md-sys-color-scrim);
83+
--color-surface-tint: var(--md-sys-color-surface-tint);
84+
--color-primary: var(--md-sys-color-primary);
85+
--color-on-primary: var(--md-sys-color-on-primary);
86+
--color-primary-container: var(--md-sys-color-primary-container);
87+
--color-on-primary-container: var(--md-sys-color-on-primary-container);
88+
--color-inverse-primary: var(--md-sys-color-inverse-primary);
89+
--color-secondary: var(--md-sys-color-secondary);
90+
--color-on-secondary: var(--md-sys-color-on-secondary);
91+
--color-secondary-container: var(--md-sys-color-secondary-container);
92+
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
93+
--color-tertiary: var(--md-sys-color-tertiary);
94+
--color-on-tertiary: var(--md-sys-color-on-tertiary);
95+
--color-tertiary-container: var(--md-sys-color-tertiary-container);
96+
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
97+
--color-error: var(--md-sys-color-error);
98+
--color-on-error: var(--md-sys-color-on-error);
99+
--color-error-container: var(--md-sys-color-error-container);
100+
--color-on-error-container: var(--md-sys-color-on-error-container);
134101
}
135-
136-
export default config
137102
```
138103

139104
## Example

‎apps/docs/package.json

+4-7
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,17 @@
2727
"sonner": "^1.7.0"
2828
},
2929
"devDependencies": {
30-
"@tailwindcss/typography": "^0.5.13",
30+
"@tailwindcss/postcss": "^4.1.4",
31+
"@tailwindcss/typography": "^0.5.16",
3132
"@types/node": "^20.12.12",
3233
"@types/react": "catalog:",
3334
"@types/react-dom": "catalog:",
3435
"clsx": "^2.1.1",
35-
"postcss": "^8.4.38",
36+
"postcss": "^8.5.3",
3637
"react-live": "^4.1.6",
3738
"tailwind-merge": "^2.5.4",
3839
"tailwind-variants": "^0.2.1",
39-
"tailwindcss": "^3.4.3",
40+
"tailwindcss": "^4.1.4",
4041
"typescript": "^5.4.5"
41-
},
42-
"overrides": {
43-
"@types/react": "catalog:",
44-
"@types/react-dom": "catalog:"
4542
}
4643
}

‎apps/docs/postcss.config.mjs

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
/** @type {import('postcss-load-config').Config} */
21
const config = {
32
plugins: {
4-
tailwindcss: {},
5-
},
6-
};
7-
8-
export default config;
3+
'@tailwindcss/postcss': {}
4+
}
5+
}
6+
export default config

‎apps/docs/src/app/app.css

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
@import 'tailwindcss';
2+
@plugin "@tailwindcss/typography";
3+
4+
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
5+
6+
html {
7+
scroll-behavior: smooth;
8+
}
9+
10+
:root,
11+
:host {
12+
--md-sys-color-background: #fff8f3;
13+
--md-sys-color-on-background: #201b12;
14+
--md-sys-color-surface: #fff8f3;
15+
--md-sys-color-surface-dim: #e4d8cb;
16+
--md-sys-color-surface-bright: #fff8f3;
17+
--md-sys-color-surface-container-lowest: #ffffff;
18+
--md-sys-color-surface-container-low: #fef2e4;
19+
--md-sys-color-surface-container: #f8ecde;
20+
--md-sys-color-surface-container-high: #f3e6d8;
21+
--md-sys-color-surface-container-highest: #ede1d3;
22+
--md-sys-color-on-surface: #201b12;
23+
--md-sys-color-surface-variant: #f2e0c9;
24+
--md-sys-color-on-surface-variant: #504534;
25+
--md-sys-color-inverse-surface: #362f26;
26+
--md-sys-color-inverse-on-surface: #fbefe1;
27+
--md-sys-color-outline: #837562;
28+
--md-sys-color-outline-variant: #d5c4ae;
29+
--md-sys-color-shadow: #000000;
30+
--md-sys-color-scrim: #000000;
31+
--md-sys-color-surface-tint: #7f5700;
32+
--md-sys-color-primary: #7f5700;
33+
--md-sys-color-on-primary: #ffffff;
34+
--md-sys-color-primary-container: #ecaa2e;
35+
--md-sys-color-on-primary-container: #614100;
36+
--md-sys-color-inverse-primary: #ffba3e;
37+
--md-sys-color-secondary: #765a2b;
38+
--md-sys-color-on-secondary: #ffffff;
39+
--md-sys-color-secondary-container: #fed79d;
40+
--md-sys-color-on-secondary-container: #785c2d;
41+
--md-sys-color-tertiary: #566500;
42+
--md-sys-color-on-tertiary: #ffffff;
43+
--md-sys-color-tertiary-container: #acc04b;
44+
--md-sys-color-on-tertiary-container: #414d00;
45+
--md-sys-color-error: #ba1a1a;
46+
--md-sys-color-on-error: #ffffff;
47+
--md-sys-color-error-container: #ffdad6;
48+
--md-sys-color-on-error-container: #93000a;
49+
}
50+
51+
[data-theme='dark'] {
52+
--md-sys-color-background: #18130b;
53+
--md-sys-color-on-background: #ede1d3;
54+
--md-sys-color-surface: #18130b;
55+
--md-sys-color-surface-dim: #18130b;
56+
--md-sys-color-surface-bright: #3f382f;
57+
--md-sys-color-surface-container-lowest: #120d06;
58+
--md-sys-color-surface-container-low: #201b12;
59+
--md-sys-color-surface-container: #251f16;
60+
--md-sys-color-surface-container-high: #2f2920;
61+
--md-sys-color-surface-container-highest: #3b342a;
62+
--md-sys-color-on-surface: #ede1d3;
63+
--md-sys-color-surface-variant: #504534;
64+
--md-sys-color-on-surface-variant: #d5c4ae;
65+
--md-sys-color-inverse-surface: #ede1d3;
66+
--md-sys-color-inverse-on-surface: #362f26;
67+
--md-sys-color-outline: #9d8f7b;
68+
--md-sys-color-outline-variant: #504534;
69+
--md-sys-color-shadow: #000000;
70+
--md-sys-color-scrim: #000000;
71+
--md-sys-color-surface-tint: #ffba3e;
72+
--md-sys-color-primary: #ffc971;
73+
--md-sys-color-on-primary: #432c00;
74+
--md-sys-color-primary-container: #ecaa2e;
75+
--md-sys-color-on-primary-container: #614100;
76+
--md-sys-color-inverse-primary: #7f5700;
77+
--md-sys-color-secondary: #e6c188;
78+
--md-sys-color-on-secondary: #432c02;
79+
--md-sys-color-secondary-container: #5e4518;
80+
--md-sys-color-on-secondary-container: #d7b37c;
81+
--md-sys-color-tertiary: #c7dc64;
82+
--md-sys-color-on-tertiary: #2c3400;
83+
--md-sys-color-tertiary-container: #acc04b;
84+
--md-sys-color-on-tertiary-container: #414d00;
85+
--md-sys-color-error: #ffb4ab;
86+
--md-sys-color-on-error: #690005;
87+
--md-sys-color-error-container: #93000a;
88+
--md-sys-color-on-error-container: #ffdad6;
89+
}
90+
91+
@theme {
92+
--color-background: var(--md-sys-color-background);
93+
--color-on-background: var(--md-sys-color-on-background);
94+
--color-surface: var(--md-sys-color-surface);
95+
--color-surface-dim: var(--md-sys-color-surface-dim);
96+
--color-surface-bright: var(--md-sys-color-surface-bright);
97+
--color-surface-container-lowest: var(
98+
--md-sys-color-surface-container-lowest
99+
);
100+
--color-surface-container-low: var(--md-sys-color-surface-container-low);
101+
--color-surface-container: var(--md-sys-color-surface-container);
102+
--color-surface-container-high: var(--md-sys-color-surface-container-high);
103+
--color-surface-container-highest: var(
104+
--md-sys-color-surface-container-highest
105+
);
106+
--color-on-surface: var(--md-sys-color-on-surface);
107+
--color-surface-variant: var(--md-sys-color-surface-variant);
108+
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
109+
--color-inverse-surface: var(--md-sys-color-inverse-surface);
110+
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
111+
--color-outline: var(--md-sys-color-outline);
112+
--color-outline-variant: var(--md-sys-color-outline-variant);
113+
--color-shadow: var(--md-sys-color-shadow);
114+
--color-scrim: var(--md-sys-color-scrim);
115+
--color-surface-tint: var(--md-sys-color-surface-tint);
116+
--color-primary: var(--md-sys-color-primary);
117+
--color-on-primary: var(--md-sys-color-on-primary);
118+
--color-primary-container: var(--md-sys-color-primary-container);
119+
--color-on-primary-container: var(--md-sys-color-on-primary-container);
120+
--color-inverse-primary: var(--md-sys-color-inverse-primary);
121+
--color-secondary: var(--md-sys-color-secondary);
122+
--color-on-secondary: var(--md-sys-color-on-secondary);
123+
--color-secondary-container: var(--md-sys-color-secondary-container);
124+
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
125+
--color-tertiary: var(--md-sys-color-tertiary);
126+
--color-on-tertiary: var(--md-sys-color-on-tertiary);
127+
--color-tertiary-container: var(--md-sys-color-tertiary-container);
128+
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
129+
--color-error: var(--md-sys-color-error);
130+
--color-on-error: var(--md-sys-color-on-error);
131+
--color-error-container: var(--md-sys-color-error-container);
132+
--color-on-error-container: var(--md-sys-color-on-error-container);
133+
}

0 commit comments

Comments
 (0)