Skip to content

Commit 31aa18f

Browse files
FRSgitFRSgit
authored
feat: migrate tailwind color palette (#3282)
upgrade vueuse add rgbToOklch script pin cypress/code-coverage pkg version
1 parent 83f19e8 commit 31aa18f

File tree

24 files changed

+1308
-334
lines changed

24 files changed

+1308
-334
lines changed

‎.changeset/grumpy-geckos-burn.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@storefront-ui/vue': major
3+
---
4+
5+
- **[BREAKING][UPDATED]** `@vueuse/core` package to major version 12 with the biggest change being **dropped support for Vue 2**. Please consult `@vuseuse/core` [release notes to see the details](https://github.com/vueuse/vueuse/releases?page=3#:~:text=Compare-,v12.0.0,-%F0%9F%9A%A8%20Breaking%20Changes).

‎.changeset/strong-badgers-run.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@storefront-ui/tailwind-config': minor
3+
---
4+
5+
- **[ADDED]** Add `@tailwindcss/container-queries`. Now container queries are available out-of-the-box when using `@storefront-ui/tailwind-config`.

‎.changeset/witty-singers-wait.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@storefront-ui/tailwind-config': major
3+
---
4+
5+
- **[BREAKING][CHANGED]** The default color palette for `primary`, `neutral` and `secondary` colors. Copy [old color palette](https://github.com/vuestorefront/storefront-ui/blob/8b35d6507ee3ae93538539400947e2f86d0c5529/packages/config/tailwind/index.ts#L360-L381) to your local `tailwind.config.js` if you need to keep some of them.
6+
Also, now the palette is converted from rgb to oklch colors to [fit with tailwind 4](https://tailwindcss.com/blog/tailwindcss-v4#modernized-p3-color-palette).

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* TODO: remove after release of new sf-docs-base version */
2+
/* needed to override tailwind color configuration coming from sf-docs-base */
3+
:root:root {
4+
/* Primary */
5+
--colors-primary-50: 0.982 0.027 157.322;
6+
--colors-primary-100: 0.962 0.05 155.017;
7+
--colors-primary-200: 0.899 0.097 153.574;
8+
--colors-primary-300: 0.855 0.144 151.03;
9+
--colors-primary-400: 0.801 0.196 150.807;
10+
--colors-primary-500: 0.716 0.19 150.726;
11+
--colors-primary-600: 0.621 0.165 151.142;
12+
--colors-primary-700: 0.524 0.135 151.385;
13+
--colors-primary-800: 0.401 0.095 152.918;
14+
--colors-primary-900: 0.285 0.055 155.368;
15+
16+
/* Secondary */
17+
--colors-secondary-50: 0.974 0.011 297.885;
18+
--colors-secondary-100: 0.95 0.02 295.319;
19+
--colors-secondary-200: 0.902 0.039 297.129;
20+
--colors-secondary-300: 0.866 0.059 299.356;
21+
--colors-secondary-400: 0.802 0.098 298.146;
22+
--colors-secondary-500: 0.741 0.141 296.447;
23+
--colors-secondary-600: 0.64 0.184 295.246;
24+
--colors-secondary-700: 0.54 0.191 293.104;
25+
--colors-secondary-800: 0.419 0.156 291.93;
26+
--colors-secondary-900: 0.295 0.094 293.497;
27+
28+
/* Positive */
29+
--colors-positive-50: 0.982 0.027 157.322;
30+
--colors-positive-100: 0.962 0.05 155.017;
31+
--colors-positive-200: 0.899 0.097 153.574;
32+
--colors-positive-300: 0.855 0.144 151.03;
33+
--colors-positive-400: 0.801 0.196 150.807;
34+
--colors-positive-500: 0.716 0.19 150.726;
35+
--colors-positive-600: 0.621 0.165 151.142;
36+
--colors-positive-700: 0.524 0.135 151.385;
37+
--colors-positive-800: 0.401 0.095 152.918;
38+
--colors-positive-900: 0.285 0.055 155.368;
39+
40+
/* Negative */
41+
--colors-negative-50: 0.978 0.011 3.577;
42+
--colors-negative-100: 0.951 0.026 2.797;
43+
--colors-negative-200: 0.906 0.049 5.563;
44+
--colors-negative-300: 0.867 0.07 8.609;
45+
--colors-negative-400: 0.81 0.11 11.318;
46+
--colors-negative-500: 0.746 0.156 13.807;
47+
--colors-negative-600: 0.634 0.215 16.447;
48+
--colors-negative-700: 0.545 0.215 22.13;
49+
--colors-negative-800: 0.41 0.16 20.89;
50+
--colors-negative-900: 0.28 0.09 18.166;
51+
52+
/* Warning */
53+
--colors-warning-50: 0.979 0.016 79.212;
54+
--colors-warning-100: 0.956 0.04 79.425;
55+
--colors-warning-200: 0.91 0.08 79.414;
56+
--colors-warning-300: 0.87 0.106 73.914;
57+
--colors-warning-400: 0.825 0.145 72.253;
58+
--colors-warning-500: 0.75 0.16 70.078;
59+
--colors-warning-600: 0.636 0.135 68.487;
60+
--colors-warning-700: 0.539 0.12 64.869;
61+
--colors-warning-800: 0.415 0.089 62.994;
62+
--colors-warning-900: 0.286 0.055 60.071;
63+
64+
/* Neutral */
65+
--colors-neutral-50: 0.986 0.002 0;
66+
--colors-neutral-100: 0.963 0.007 0;
67+
--colors-neutral-200: 0.904 0.013 156.832;
68+
--colors-neutral-300: 0.816 0.016 154.297;
69+
--colors-neutral-400: 0.629 0.016 157.933;
70+
--colors-neutral-500: 0.53 0.017 157.808;
71+
--colors-neutral-600: 0.443 0.016 152.174;
72+
--colors-neutral-700: 0.365 0.016 156.314;
73+
--colors-neutral-800: 0.282 0.011 156.383;
74+
--colors-neutral-900: 0.211 0.011 151.165;
75+
76+
/* Disabled */
77+
--colors-disabled-50: 0.986 0.002 0;
78+
--colors-disabled-100: 0.963 0.007 0;
79+
--colors-disabled-200: 0.904 0.013 156.832;
80+
--colors-disabled-300: 0.816 0.016 154.297;
81+
--colors-disabled-400: 0.629 0.016 157.933;
82+
--colors-disabled-500: 0.53 0.017 157.808;
83+
--colors-disabled-600: 0.443 0.016 152.174;
84+
--colors-disabled-700: 0.365 0.016 156.314;
85+
--colors-disabled-800: 0.282 0.011 156.383;
86+
--colors-disabled-900: 0.211 0.011 151.165;
87+
}

‎apps/docs/components/components/content/ColorPalette.vue

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
v-for="shade in Object.keys(colors[color])"
77
:key="shade"
88
class="col-span-5 md:col-span-3 xl:col-span-2"
9-
:rgb-color="colors[color][shade]"
9+
:oklch-color="colors[color][shade]"
10+
:shade="shade"
1011
:name="`${color}-${shade}`"
1112
/>
1213
</div>
@@ -18,88 +19,88 @@ import ColorPaletteBlock from './ColorPaletteBlock.vue';
1819
// copied over from: packages/config/tailwind/index.ts
1920
const colors = {
2021
primary: {
21-
'50': '240 253 244',
22-
'100': '220 252 231',
23-
'200': '187 247 208',
24-
'300': '134 239 172',
25-
'400': '74 222 128',
26-
'500': '2 198 82',
27-
'600': '10 171 69',
28-
'700': '1 137 55',
29-
'800': '22 101 52',
30-
'900': '20 83 45',
22+
'50': '0.983 0.06 189.5',
23+
'100': '0.948 0.06 186.8',
24+
'200': '0.892 0.09 180.8',
25+
'300': '0.812 0.1 175.2',
26+
'400': '0.734 0.09 175',
27+
'500': '0.64 0.08 174.8',
28+
'600': '0.53 0.07 173.7',
29+
'700': '0.47 0.06 175.1',
30+
'800': '0.369 0.04 177.1',
31+
'900': '0.272 0.03 177.5'
3132
},
3233
secondary: {
33-
'50': '245 243 255',
34-
'100': '237 233 254',
35-
'200': '221 214 254',
36-
'300': '196 181 253',
37-
'400': '167 139 250',
38-
'500': '135 92 246',
39-
'600': '111 64 236',
40-
'700': '97 49 221',
41-
'800': '83 30 211',
42-
'900': '68 21 178',
34+
'50': '0.985 0.06 185.3',
35+
'100': '0.968 0.09 173.5',
36+
'200': '0.91 0.15 162.7',
37+
'300': '0.871 0.21 156',
38+
'400': '0.822 0.29 153',
39+
'500': '0.737 0.28 152.3',
40+
'600': '0.639 0.24 152.8',
41+
'700': '0.539 0.2 153.2',
42+
'800': '0.411 0.14 155.6',
43+
'900': '0.291 0.08 159.5'
4344
},
4445
positive: {
45-
'50': '240 253 244',
46-
'100': '220 252 231',
47-
'200': '187 247 208',
48-
'300': '134 239 172',
49-
'400': '74 222 128',
50-
'500': '2 198 82',
51-
'600': '10 171 69',
52-
'700': '1 137 55',
53-
'800': '22 101 52',
54-
'900': '20 83 45',
46+
'50': '0.985 0.06 185.3',
47+
'100': '0.968 0.09 173.5',
48+
'200': '0.91 0.15 162.7',
49+
'300': '0.871 0.21 156',
50+
'400': '0.822 0.29 153',
51+
'500': '0.737 0.28 152.3',
52+
'600': '0.639 0.24 152.8',
53+
'700': '0.539 0.2 153.2',
54+
'800': '0.411 0.14 155.6',
55+
'900': '0.291 0.08 159.5'
5556
},
5657
negative: {
57-
'50': '255 241 242',
58-
'100': '255 228 230',
59-
'200': '254 205 211',
60-
'300': '253 164 175',
61-
'400': '251 113 133',
62-
'500': '244 63 94',
63-
'600': '225 29 72',
64-
'700': '190 18 60',
65-
'800': '159 18 57',
66-
'900': '136 19 55',
58+
'50': '0.977 0.03 229.6',
59+
'100': '0.948 0.02 276.2',
60+
'200': '0.899 0.03 338',
61+
'300': '0.859 0.06 356.3',
62+
'400': '0.797 0.11 7.6',
63+
'500': '0.727 0.16 13.9',
64+
'600': '0.607 0.25 19.7',
65+
'700': '0.518 0.27 29',
66+
'800': '0.39 0.19 27',
67+
'900': '0.269 0.1 21.9'
6768
},
6869
warning: {
69-
'50': '254 252 232',
70-
'100': '254 249 195',
71-
'200': '254 240 138',
72-
'300': '253 224 71',
73-
'400': '250 204 21',
74-
'500': '234 179 8',
75-
'600': '202 138 4',
76-
'700': '161 98 7',
77-
'800': '133 77 14',
78-
'900': '113 63 18',
70+
'50': '0.978 0.03 175.2',
71+
'100': '0.96 0.04 128.6',
72+
'200': '0.908 0.1 97.4',
73+
'300': '0.866 0.14 86.1',
74+
'400': '0.819 0.22 80',
75+
'500': '0.742 0.27 77.1',
76+
'600': '0.628 0.22 75.9',
77+
'700': '0.531 0.2 73',
78+
'800': '0.409 0.14 71.4',
79+
'900': '0.282 0.08 68.5'
7980
},
8081
neutral: {
81-
'50': '250 250 250',
82-
'100': '244 244 245',
83-
'200': '228 228 231',
84-
'300': '212 212 216',
85-
'400': '161 161 170',
86-
'500': '113 113 122',
87-
'600': '82 82 91',
88-
'700': '63 63 70',
89-
'800': '39 39 42',
90-
'900': '24 24 27',
82+
'50': '0.987 0.04 210.8',
83+
'100': '0.963 0.04 204.5',
84+
'200': '0.906 0.04 195.7',
85+
'300': '0.818 0.05 189.1',
86+
'400': '0.631 0.04 186.4',
87+
'500': '0.532 0.04 182.9',
88+
'600': '0.445 0.03 177.5',
89+
'700': '0.367 0.03 177.4',
90+
'800': '0.283 0.02 178.7',
91+
'900': '0.212 0.02 170.6'
9192
},
9293
disabled: {
93-
'50': '250 250 250',
94-
'100': '244 244 245',
95-
'200': '228 228 231',
96-
'300': '212 212 216',
97-
'400': '161 161 170',
98-
'500': '113 113 122',
99-
'600': '82 82 91',
100-
'700': '63 63 70',
101-
'800': '39 39 42',
102-
'900': '24 24 27',
94+
'50': '0.987 0.04 210.8',
95+
'100': '0.963 0.04 204.5',
96+
'200': '0.906 0.04 195.7',
97+
'300': '0.818 0.05 189.1',
98+
'400': '0.631 0.04 186.4',
99+
'500': '0.532 0.04 182.9',
100+
'600': '0.445 0.03 177.5',
101+
'700': '0.367 0.03 177.4',
102+
'800': '0.283 0.02 178.7',
103+
'900': '0.212 0.02 170.6',
103104
},
104105
};
105106
export default {

‎apps/docs/components/components/content/ColorPaletteBlock.vue

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,76 @@
11
<template>
2-
<div role="button" tabindex="0" @click="copyColorToClipboard" @keydown.enter="copyColorToClipboard">
2+
<div class="text-xs">
33
<div
4-
class="h-10 rounded border dark:border-zinc-700 mb-1"
4+
role="button"
5+
tabindex="0"
6+
@click="copyColorToClipboard"
7+
@keydown.enter="copyColorToClipboard"
8+
class="relative h-12 rounded border dark:border-zinc-700 group"
59
:style="{
6-
backgroundColor: `rgb(${rgbColor})`,
10+
backgroundColor: `oklch(${oklchColor})`,
711
}"
8-
/>
9-
<p v-if="copied" class="flex items-center text-xs">
10-
<Icon name="ri:check-line" height="16" class="text-green" />
11-
Copied
12-
</p>
13-
<p v-else class="text-xs flex items-center justify-between">
14-
<span>{{ name }}</span>
15-
<span class="font-mono">{{ hex }}</span>
16-
</p>
12+
>
13+
<p class="hidden group-hover:inline-flex group-active:inline-flex group-focus:inline-flex absolute inset-0 m-0 px-2 items-center bg-black/20 backdrop-blur-md" :class="{ 'text-black': parseInt(shade) <= 400 }">
14+
<template v-if="copied">
15+
<span>Copied&nbsp;</span>
16+
<span><Icon name="ri:check-line" height="16" class="text-green" /></span>
17+
</template>
18+
<template v-else>
19+
oklch({{oklchColor}})&nbsp;
20+
<Icon name="ri:file-copy-fill" height="16" class="text-green" />
21+
</template>
22+
</p>
23+
</div>
24+
25+
<div role="button" tabindex="0" @click="copyColorNameToClipboard" @keydown.enter="copyColorNameToClipboard" class="pt-2 pb-1">
26+
<template v-if="copiedName">
27+
Copied&nbsp;
28+
<Icon name="ri:check-line" height="16" class="text-green" />
29+
</template>
30+
<template v-else>
31+
{{ name }}&nbsp;
32+
<Icon name="ri:file-copy-fill" height="16" class="text-green" />
33+
</template>
34+
</div>
1735
</div>
1836
</template>
1937

2038
<script>
21-
function componentToHex(c) {
22-
var hex = parseInt(c).toString(16);
23-
return hex.length == 1 ? '0' + hex : hex;
24-
}
2539
export default {
2640
props: {
27-
rgbColor: {
41+
oklchColor: {
2842
type: String,
2943
required: true,
3044
},
3145
name: {
3246
type: String,
3347
required: true,
3448
},
49+
shade: {
50+
type: String,
51+
required: true,
52+
}
3553
},
3654
data() {
3755
return {
3856
copied: false,
57+
copiedName: false,
3958
};
4059
},
4160
methods: {
4261
async copyColorToClipboard() {
43-
await navigator.clipboard.writeText(this.name);
62+
await navigator.clipboard.writeText(`oklch(${this.oklchColor})`);
4463
this.copied = true;
4564
setTimeout(() => {
4665
this.copied = false;
4766
}, 1000);
4867
},
49-
},
50-
computed: {
51-
hex() {
52-
const [r, g, b] = this.rgbColor.split(' ');
53-
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
68+
async copyColorNameToClipboard() {
69+
await navigator.clipboard.writeText(this.name);
70+
this.copiedName = true;
71+
setTimeout(() => {
72+
this.copiedName = false;
73+
}, 1000);
5474
},
5575
},
5676
};

0 commit comments

Comments
 (0)