Skip to content

Commit 15e4549

Browse files
FRSgitFRSgit
authored
feat: tailwind 4 migration (#3281)
1 parent 56d80d3 commit 15e4549

File tree

233 files changed

+2762
-3332
lines changed

Some content is hidden

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

233 files changed

+2762
-3332
lines changed

‎.changeset/five-geese-serve.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@storefront-ui/react': major
3+
'@storefront-ui/vue': major
4+
---
5+
6+
Breaking Change - Padding size for square variant of SfButton changed

‎.changeset/flat-radios-do.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@storefront-ui/react': major
3+
'@storefront-ui/vue': major
4+
---
5+
6+
Breaking Change - removed flex classes from wrapper for slot in SfListItem

‎.changeset/fresh-emus-care.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@storefront-ui/react': major
3+
'@storefront-ui/vue': major
4+
---
5+
6+
Breaking Change - Padding left and right in SfSelect changed from 14px and 16px to 12px

‎.changeset/mighty-monkeys-occur.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@storefront-ui/react': major
3+
'@storefront-ui/vue': major
4+
---
5+
6+
BREAKING CHANGE: Deprecated option `arrowKeysOn` from `useTrapFocus` is removed.
7+
This option was separated and replaced by two more specialised options `arrowKeysLeftRight` and `arrowKeysUpDown`.
8+
In order to migrate please one of those options or both.

‎.yarn/patches/sf-docs-base-npm-1.3.2-2dba5f0f27.patch‎

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
2+
index 3cb249fb096e670af68af7304dc6fa3934dc9460..ef67903c48c39899929a06deae2bec6074a036b6 100644
3+
--- a/assets/css/tailwind.css
4+
+++ b/assets/css/tailwind.css
5+
@@ -1,101 +1,30 @@
6+
@import url(https://fonts.bunny.net/css?family=red-hat-display:400,500,600,700,800,900|red-hat-text:400,500,600,700);
7+
+@import "tailwindcss";
8+
+@import "#build/tailwindcss/sources.css";
9+
+@import "@storefront-ui/vue/tailwind-config";
10+
+@plugin "@storefront-ui/typography";
11+
12+
-:root {
13+
- /* Primary */
14+
- --colors-primary-50: 229 255 238;
15+
- --colors-primary-100: 213 255 234;
16+
- --colors-primary-200: 192 242 208;
17+
- --colors-primary-300: 112 255 183;
18+
- --colors-primary-400: 43 253 144;
19+
- --colors-primary-500: 0 225 109;
20+
- --colors-primary-600: 0 192 88;
21+
- --colors-primary-700: 0 128 62;
22+
- --colors-primary-800: 6 117 61;
23+
- --colors-primary-900: 0 51 25;
24+
-
25+
- /* Secondary */
26+
- --colors-secondary-50: 245 243 255;
27+
- --colors-secondary-100: 237 233 254;
28+
- --colors-secondary-200: 221 214 254;
29+
- --colors-secondary-300: 196 181 253;
30+
- --colors-secondary-400: 167 139 250;
31+
- --colors-secondary-500: 135 92 246;
32+
- --colors-secondary-600: 111 64 236;
33+
- --colors-secondary-700: 97 49 221;
34+
- --colors-secondary-800: 83 30 211;
35+
- --colors-secondary-900: 68 21 178;
36+
-
37+
- /* Positive */
38+
- --colors-positive-50: 240 253 244;
39+
- --colors-positive-100: 220 252 231;
40+
- --colors-positive-200: 187 247 208;
41+
- --colors-positive-300: 134 239 172;
42+
- --colors-positive-400: 74 222 128;
43+
- --colors-positive-500: 2 198 82;
44+
- --colors-positive-600: 10 171 69;
45+
- --colors-positive-700: 1 137 55;
46+
- --colors-positive-800: 22 101 52;
47+
- --colors-positive-900: 20 83 45;
48+
-
49+
- /* Negative */
50+
- --colors-negative-50: 255 241 242;
51+
- --colors-negative-100: 255 228 230;
52+
- --colors-negative-200: 254 205 211;
53+
- --colors-negative-300: 253 164 175;
54+
- --colors-negative-400: 251 113 133;
55+
- --colors-negative-500: 244 63 94;
56+
- --colors-negative-600: 225 29 72;
57+
- --colors-negative-700: 190 18 60;
58+
- --colors-negative-800: 159 18 57;
59+
- --colors-negative-900: 136 19 55 1;
60+
-
61+
- /* Warning */
62+
- --colors-warning-50: 254 252 232;
63+
- --colors-warning-100: 254 249 195;
64+
- --colors-warning-200: 254 240 138;
65+
- --colors-warning-300: 253 224 71;
66+
- --colors-warning-400: 250 204 21;
67+
- --colors-warning-500: 234 179 8;
68+
- --colors-warning-600: 202 138 4;
69+
- --colors-warning-700: 161 98 7;
70+
- --colors-warning-800: 133 77 14;
71+
- --colors-warning-900: 113 63 18;
72+
-
73+
- /* Neutral */
74+
- --colors-neutral-50: 249 251 250;
75+
- --colors-neutral-100: 242 247 244;
76+
- --colors-neutral-200: 215 224 219;
77+
- --colors-neutral-300: 168 178 171;
78+
- --colors-neutral-400: 129 140 133;
79+
- --colors-neutral-500: 92 102 95;
80+
- --colors-neutral-600: 67 77 70;
81+
- --colors-neutral-700: 44 51 46;
82+
- --colors-neutral-800: 32 38 34;
83+
- --colors-neutral-900: 21 26 22;
84+
-
85+
- /* Disabled */
86+
- --colors-disabled-50: 250 250 250;
87+
- --colors-disabled-100: 244 244 245;
88+
- --colors-disabled-200: 228 228 231;
89+
- --colors-disabled-300: 212 212 216;
90+
- --colors-disabled-400: 161 161 170;
91+
- --colors-disabled-500: 113 113 122;
92+
- --colors-disabled-600: 82 82 91;
93+
- --colors-disabled-700: 63 63 70;
94+
- --colors-disabled-800: 39 39 42;
95+
- --colors-disabled-900: 24 24 27;
96+
-}
97+
-
98+
-* {
99+
- @apply dark:border-neutral-700;
100+
+@source "./node_modules/sf-docs-base/**/*.vue";
101+
+
102+
+@layer base {
103+
+ *,
104+
+ ::before,
105+
+ ::after {
106+
+ border-color: var(--color-neutral-100);
107+
+ }
108+
+
109+
+ * {
110+
+ @apply dark:border-neutral-700;
111+
+ }
112+
}
113+
114+
+
115+
.dark:root {
116+
color-scheme: dark;
117+
}
118+
119+
.prose code:not(pre code) {
120+
- @apply text-sm bg-neutral-50/20 px-2 py-1 rounded bg-opacity-30 text-neutral-800 dark:bg-neutral-800 dark:text-white font-bold;
121+
+ @apply text-sm bg-neutral-50/20 px-2 py-1 rounded text-neutral-800 dark:bg-neutral-800/30 dark:text-white font-bold;
122+
}
123+
124+
.prose h1 a,
125+
@@ -138,6 +67,10 @@
126+
@apply decoration-dashed underline-offset-[4px] font-semibold text-primary-600 dark:text-primary-500 decoration-1 underline hover:decoration-solid transition-all;
127+
}
128+
129+
+.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
130+
+ @apply my-5;
131+
+}
132+
+
133+
.prose table:not(.\!not-prose table):not(.not-prose table) {
134+
@apply table-fixed;
135+
}
136+
@@ -153,3 +86,5 @@
137+
.has-diff .line.diff.add {
138+
@apply bg-green-400/20;
139+
}
140+
+
141+
+@config "../../tailwind.config.ts";
142+
diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
143+
index 2ed81567d25decc39d636a3e73a792d4c9c95fd5..701e1143c501af4795363d63e892dae50428ce11 100644
144+
--- a/components/app/AppFooter.vue
145+
+++ b/components/app/AppFooter.vue
146+
@@ -22,11 +22,11 @@ const socialsLinks = [
147+
class="mt-48 text-sm px-6 lg:px-12 2xl:max-w-7xl w-full flex items-center border-t py-4"
148+
>
149+
<div class="opacity-80 flex-1 text-xs">
150+
- <p>© 2024 Alokai.</p>
151+
+ <p>© {{ new Date().getFullYear() }} Alokai.</p>
152+
</div>
153+
<nav class="flex items-center mx-auto font-medium gap-x-8">
154+
<NuxtLink
155+
- to="/contributing"
156+
+ to="https://docs.alokai.com/contributing"
157+
class="opacity-80 hover:opacity-100 transition-opacity"
158+
>
159+
Contributing
160+
diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
161+
index d6e7977d68497431f89ab680134a4a58cb6e501f..91978a51681e29fcecefb6afbbbe6afaa7e5869d 100644
162+
--- a/components/app/AppLayout.vue
163+
+++ b/components/app/AppLayout.vue
164+
@@ -16,16 +16,21 @@ const { storefrontUi } = useRuntimeConfig().public
165+
height="2rem"
166+
class="[&>*]:!fill-white"
167+
/>
168+
- <NuxtLink
169+
- to="https://docs.vuestorefront.io"
170+
- class="font-medium flex items-center text-sm group text-white"
171+
- >
172+
- Build Better Storefronts
173+
- <Icon
174+
- name="ri:arrow-right-s-fill"
175+
- class="text-xl group-hover:translate-x-px transition-transform"
176+
- />
177+
- </NuxtLink>
178+
+ <div class="flex items-center gap-x-2 text-white">
179+
+ Vue Storefront is now Alokai!
180+
+ <NuxtLink
181+
+ to="https://alokai.com/news/vue-storefront-is-now-alokai"
182+
+ target="_blank"
183+
+ external
184+
+ class="font-medium flex items-center text-sm group underline hover:no-underline focus-visible:no-underline"
185+
+ >
186+
+ Learn More
187+
+ <Icon
188+
+ name="ri:arrow-right-s-fill"
189+
+ class="text-xl group-hover:translate-x-px transition-transform"
190+
+ />
191+
+ </NuxtLink>
192+
+ </div>
193+
</div>
194+
<div
195+
v-else
196+
@@ -84,6 +89,8 @@ const { storefrontUi } = useRuntimeConfig().public
197+
</template>
198+
199+
<style>
200+
+@reference "../../assets/css/tailwind.css";
201+
+
202+
.dark {
203+
@apply bg-neutral-900;
204+
}
205+
diff --git a/components/content/Info.vue b/components/content/Info.vue
206+
index 843dfad268b9601d5cc3df739da859e8e54322f0..c186336ab418d58d51ac944d63af2273dc229e21 100644
207+
--- a/components/content/Info.vue
208+
+++ b/components/content/Info.vue
209+
@@ -1,6 +1,6 @@
210+
<template>
211+
<div
212+
- class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-secondary-800/20 [&>*>code]:!text-secondary-900 [&>*>code]:dark:!text-secondary-50 border-secondary-500 dark:border-secondary-500 border rounded-lg bg-secondary-500 bg-opacity-20 text-sm dark:text-secondary-100 text-secondary-800"
213+
+ class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-secondary-800/20 [&>*>code]:!text-secondary-900 [&>*>code]:dark:!text-secondary-50 border-secondary-500 dark:border-secondary-500 dark:bg-secondary-800 border rounded-lg bg-secondary-200 bg-opacity-20 text-sm dark:text-secondary-100 text-secondary-800"
214+
>
215+
<p v-if="$slots.title" class="text-base font-bold mb-2">
216+
<ContentSlot :use="$slots.title" unwrap="p" />
217+
diff --git a/components/content/ReadMore.vue b/components/content/ReadMore.vue
218+
index 843dfad268b9601d5cc3df739da859e8e54322f0..c186336ab418d58d51ac944d63af2273dc229e21 100644
219+
--- a/components/content/ReadMore.vue
220+
+++ b/components/content/ReadMore.vue
221+
@@ -1,6 +1,6 @@
222+
<template>
223+
<div
224+
- class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-secondary-800/20 [&>*>code]:!text-secondary-900 [&>*>code]:dark:!text-secondary-50 border-secondary-500 dark:border-secondary-500 border rounded-lg bg-secondary-500 bg-opacity-20 text-sm dark:text-secondary-100 text-secondary-800"
225+
+ class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-secondary-800/20 [&>*>code]:!text-secondary-900 [&>*>code]:dark:!text-secondary-50 border-secondary-500 dark:border-secondary-500 dark:bg-secondary-800 border rounded-lg bg-secondary-200 bg-opacity-20 text-sm dark:text-secondary-100 text-secondary-800"
226+
>
227+
<p v-if="$slots.title" class="text-base font-bold mb-2">
228+
<ContentSlot :use="$slots.title" unwrap="p" />
229+
diff --git a/components/content/ReferenceToggle.vue b/components/content/ReferenceToggle.vue
230+
index aea94bc0b7338822f34e2ec1d960d714f9d036aa..96ecc3b3dba5e484a1432d1ad308db409534f646 100644
231+
--- a/components/content/ReferenceToggle.vue
232+
+++ b/components/content/ReferenceToggle.vue
233+
@@ -32,6 +32,8 @@ const open = ref(true)
234+
</template>
235+
236+
<style scoped>
237+
+@reference "../../assets/css/tailwind.css";
238+
+
239+
:slotted(hr) {
240+
@apply my-4;
241+
}
242+
diff --git a/components/content/Tip.vue b/components/content/Tip.vue
243+
index a7e89bf3e92e9cf338ea26e5aeacb78c03a333eb..040a51314836b9c2cb9643723fba385f2b948e0a 100644
244+
--- a/components/content/Tip.vue
245+
+++ b/components/content/Tip.vue
246+
@@ -1,6 +1,6 @@
247+
<template>
248+
<div
249+
- class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-primary-800/20 [&>*>code]:!text-primary-900 [&>*>code]:dark:!text-primary-50 border-primary-500 dark:border-primary-500 border rounded-lg bg-primary-500 bg-opacity-20 text-sm dark:text-primary-100 text-primary-800"
250+
+ class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-primary-800/20 [&>*>code]:!text-primary-900 [&>*>code]:dark:!text-primary-50 border-primary-500 dark:border-primary-500 border rounded-lg dark:bg-primary-800 bg-primary-200 bg-opacity-20 text-sm dark:text-primary-100 text-primary-800"
251+
>
252+
<p v-if="$slots.title" class="text-base font-bold mb-2">
253+
<ContentSlot :use="$slots.title" unwrap="p" />
254+
diff --git a/components/content/Warning.vue b/components/content/Warning.vue
255+
index 7006837f6030ad8cc3a836c7dfbeea1b958b1be7..253ed324aac9bad8a703444235dac85ac2e4f349 100644
256+
--- a/components/content/Warning.vue
257+
+++ b/components/content/Warning.vue
258+
@@ -1,6 +1,6 @@
259+
<template>
260+
<div
261+
- class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-yellow-800/20 [&>*>code]:!text-yellow-900 [&>*>code]:dark:!text-yellow-50 border-yellow-500 dark:border-yellow-500 border rounded-lg bg-yellow-500 bg-opacity-20 text-sm dark:text-yellow-100 text-yellow-800"
262+
+ class="mt-5 leading-relaxed not-prose [&>*>a]:underline px-6 py-4 [&>*>code]:!bg-yellow-800/20 [&>*>code]:!text-yellow-900 [&>*>code]:dark:!text-yellow-50 border-yellow-500 dark:border-yellow-500 border rounded-lg dark:bg-yellow-950 bg-yellow-50 bg-opacity-20 text-sm dark:text-yellow-100 text-yellow-800"
263+
>
264+
<p v-if="$slots.title" class="text-base font-bold mb-2">
265+
<ContentSlot :use="$slots.title" unwrap="p" />
266+
diff --git a/components/content/prose/ProseCode.vue b/components/content/prose/ProseCode.vue
267+
index fe4772a0eacbe0d6a135c98a895f35d372083b22..c864836cfbbd8d8ac6dafcc1acd1313955c377d7 100644
268+
--- a/components/content/prose/ProseCode.vue
269+
+++ b/components/content/prose/ProseCode.vue
270+
@@ -57,13 +57,15 @@ const copyCode = async () => {
271+
</template>
272+
273+
<style scoped>
274+
+@reference "../../../assets/css/tailwind.css";
275+
+
276+
.code-wrapper {
277+
@apply rounded-lg bg-neutral-800;
278+
counter-reset: lines;
279+
}
280+
281+
:slotted(pre) {
282+
- @apply bg-neutral-800 overflow-x-auto w-full !important;
283+
+ @apply bg-neutral-800 overflow-x-auto w-full;
284+
}
285+
286+
:deep(pre code .line) {
287+
diff --git a/layouts/fullscreen.vue b/layouts/fullscreen.vue
288+
index 394e012a754e1cfce1a9a29f58b95bf7e08b4766..28be2b8fce92fe0d2b14f173e652a0f4aeb3690d 100644
289+
--- a/layouts/fullscreen.vue
290+
+++ b/layouts/fullscreen.vue
291+
@@ -5,6 +5,8 @@
292+
</template>
293+
294+
<style>
295+
+@reference "../assets/css/tailwind.css";
296+
+
297+
.fullscreen article > div > p {
298+
@apply max-w-3xl;
299+
}
300+
diff --git a/package.json b/package.json
301+
index f95d0989b5bf8453075bd6b751a4435e3cd6dc00..c1f5b9bcfbfa9bc62104126f4e9be73f48ce48bb 100644
302+
--- a/package.json
303+
+++ b/package.json
304+
@@ -14,7 +14,7 @@
305+
"@nuxtjs/algolia": "^1.8.0",
306+
"@nuxtjs/color-mode": "^3.2.0",
307+
"@nuxtjs/seo": "^2.0.0-rc.10",
308+
- "@nuxtjs/tailwindcss": "^6.11.4",
309+
+ "@nuxtjs/tailwindcss": "^7.0.0-beta.1",
310+
"@storefront-ui/typography": "^2.1.0",
311+
"@storefront-ui/vue": "^2.1.0",
312+
"@tailwindcss/typography": "^0.5.9",
313+
diff --git a/tailwind.config.ts b/tailwind.config.ts
314+
index 27f5ddd96f83fa77254d9845cacab9244e2b297a..90141390f624afa977dce61211901f42433e5f43 100644
315+
--- a/tailwind.config.ts
316+
+++ b/tailwind.config.ts
317+
@@ -1,6 +1,4 @@
318+
import type { Config } from 'tailwindcss'
319+
-import { tailwindConfig } from '@storefront-ui/vue/tailwind-config'
320+
-import tailwindTypography from '@tailwindcss/typography'
321+
322+
const disabledCss = {
323+
'code::before': false,
324+
@@ -14,10 +12,6 @@ const disabledCss = {
325+
}
326+
327+
export default <Config>{
328+
- presets: [tailwindConfig],
329+
- darkMode: 'class',
330+
- content: [],
331+
- safelist: ['dark:fill-white', 'dark:invert', '!text-xs}'],
332+
theme: {
333+
extend: {
334+
typography: {
335+
@@ -29,5 +23,4 @@ export default <Config>{
336+
},
337+
},
338+
},
339+
- plugins: [tailwindTypography],
340+
}

‎CONTRIBUTING.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ We're very excited to see that **you are thinking about contribution to Storefro
1818

1919
## Pull Request Guidelines
2020

21-
- Learn about our branch structure [here](https://docs.vuestorefront.io/v2/contributing/branching-model.html).
21+
- Learn about our branch structure [here](https://docs.alokai.com/v2/contributing/branching-model.html).
2222
<br>
2323
**Important:**
2424
<br>
@@ -32,7 +32,7 @@ We're very excited to see that **you are thinking about contribution to Storefro
3232

3333
- Make sure test pass when running `yarn test`. See [development guide](https://github.com/vuestorefront/storefront-ui/blob/v2/apps/docs/development/hello.md) for details.
3434

35-
- Detailed description available [here](https://docs.vuestorefront.io/v2/contributing/how-to-submit-pull-request.html).
35+
- Detailed description available [here](https://docs.alokai.com/v2/contributing/how-to-submit-pull-request.html).
3636

3737
### Committing Changes
3838

‎apps/docs/components/assets/css/fonts.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Inter:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
2+
3+
:root {
4+
--font-sans: 'Inter', sans-serif;
5+
--font-body: 'Inter', sans-serif;
6+
--font-headings: 'Inter', sans-serif;
7+
}

0 commit comments

Comments
 (0)