feat: migrate tailwind color palette

.changeset/grumpy-geckos-burn.md

@@ -0,0 +1,5 @@
+---
+'@storefront-ui/vue': major
+---
+
+- **[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

@@ -0,0 +1,5 @@
+---
+'@storefront-ui/tailwind-config': minor
+---
+
+- **[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

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/tailwind-config': major
+---
+
+- **[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.
+  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

@@ -0,0 +1,87 @@
+/* TODO: remove after release of new sf-docs-base version */
+/* needed to override tailwind color configuration coming from sf-docs-base */
+:root:root {
+  /* Primary */
+  --colors-primary-50: 0.982 0.027 157.322;
+  --colors-primary-100: 0.962 0.05 155.017;
+  --colors-primary-200: 0.899 0.097 153.574;
+  --colors-primary-300: 0.855 0.144 151.03;
+  --colors-primary-400: 0.801 0.196 150.807;
+  --colors-primary-500: 0.716 0.19 150.726;
+  --colors-primary-600: 0.621 0.165 151.142;
+  --colors-primary-700: 0.524 0.135 151.385;
+  --colors-primary-800: 0.401 0.095 152.918;
+  --colors-primary-900: 0.285 0.055 155.368;
+
+  /* Secondary */
+  --colors-secondary-50: 0.974 0.011 297.885;
+  --colors-secondary-100: 0.95 0.02 295.319;
+  --colors-secondary-200: 0.902 0.039 297.129;
+  --colors-secondary-300: 0.866 0.059 299.356;
+  --colors-secondary-400: 0.802 0.098 298.146;
+  --colors-secondary-500: 0.741 0.141 296.447;
+  --colors-secondary-600: 0.64 0.184 295.246;
+  --colors-secondary-700: 0.54 0.191 293.104;
+  --colors-secondary-800: 0.419 0.156 291.93;
+  --colors-secondary-900: 0.295 0.094 293.497;
+
+  /* Positive */
+  --colors-positive-50: 0.982 0.027 157.322;
+  --colors-positive-100: 0.962 0.05 155.017;
+  --colors-positive-200: 0.899 0.097 153.574;
+  --colors-positive-300: 0.855 0.144 151.03;
+  --colors-positive-400: 0.801 0.196 150.807;
+  --colors-positive-500: 0.716 0.19 150.726;
+  --colors-positive-600: 0.621 0.165 151.142;
+  --colors-positive-700: 0.524 0.135 151.385;
+  --colors-positive-800: 0.401 0.095 152.918;
+  --colors-positive-900: 0.285 0.055 155.368;
+
+  /* Negative */
+  --colors-negative-50: 0.978 0.011 3.577;
+  --colors-negative-100: 0.951 0.026 2.797;
+  --colors-negative-200: 0.906 0.049 5.563;
+  --colors-negative-300: 0.867 0.07 8.609;
+  --colors-negative-400: 0.81 0.11 11.318;
+  --colors-negative-500: 0.746 0.156 13.807;
+  --colors-negative-600: 0.634 0.215 16.447;
+  --colors-negative-700: 0.545 0.215 22.13;
+  --colors-negative-800: 0.41 0.16 20.89;
+  --colors-negative-900: 0.28 0.09 18.166;
+
+  /* Warning */
+  --colors-warning-50: 0.979 0.016 79.212;
+  --colors-warning-100: 0.956 0.04 79.425;
+  --colors-warning-200: 0.91 0.08 79.414;
+  --colors-warning-300: 0.87 0.106 73.914;
+  --colors-warning-400: 0.825 0.145 72.253;
+  --colors-warning-500: 0.75 0.16 70.078;
+  --colors-warning-600: 0.636 0.135 68.487;
+  --colors-warning-700: 0.539 0.12 64.869;
+  --colors-warning-800: 0.415 0.089 62.994;
+  --colors-warning-900: 0.286 0.055 60.071;
+
+  /* Neutral */
+  --colors-neutral-50: 0.986 0.002 0;
+  --colors-neutral-100: 0.963 0.007 0;
+  --colors-neutral-200: 0.904 0.013 156.832;
+  --colors-neutral-300: 0.816 0.016 154.297;
+  --colors-neutral-400: 0.629 0.016 157.933;
+  --colors-neutral-500: 0.53 0.017 157.808;
+  --colors-neutral-600: 0.443 0.016 152.174;
+  --colors-neutral-700: 0.365 0.016 156.314;
+  --colors-neutral-800: 0.282 0.011 156.383;
+  --colors-neutral-900: 0.211 0.011 151.165;
+
+  /* Disabled */
+  --colors-disabled-50: 0.986 0.002 0;
+  --colors-disabled-100: 0.963 0.007 0;
+  --colors-disabled-200: 0.904 0.013 156.832;
+  --colors-disabled-300: 0.816 0.016 154.297;
+  --colors-disabled-400: 0.629 0.016 157.933;
+  --colors-disabled-500: 0.53 0.017 157.808;
+  --colors-disabled-600: 0.443 0.016 152.174;
+  --colors-disabled-700: 0.365 0.016 156.314;
+  --colors-disabled-800: 0.282 0.011 156.383;
+  --colors-disabled-900: 0.211 0.011 151.165;
+}

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

@@ -6,7 +6,8 @@
         v-for="shade in Object.keys(colors[color])"
         :key="shade"
         class="col-span-5 md:col-span-3 xl:col-span-2"
-        :rgb-color="colors[color][shade]"
+        :oklch-color="colors[color][shade]"
+        :shade="shade"
         :name="`${color}-${shade}`"
       />
     </div>
@@ -18,88 +19,88 @@ import ColorPaletteBlock from './ColorPaletteBlock.vue';
 // copied over from: packages/config/tailwind/index.ts
 const colors = {
   primary: {
-    '50': '240 253 244',
-    '100': '220 252 231',
-    '200': '187 247 208',
-    '300': '134 239 172',
-    '400': '74 222 128',
-    '500': '2 198 82',
-    '600': '10 171 69',
-    '700': '1 137 55',
-    '800': '22 101 52',
-    '900': '20 83 45',
+    '50': '0.983 0.06 189.5',
+    '100': '0.948 0.06 186.8',
+    '200': '0.892 0.09 180.8',
+    '300': '0.812 0.1 175.2',
+    '400': '0.734 0.09 175',
+    '500': '0.64 0.08 174.8',
+    '600': '0.53 0.07 173.7',
+    '700': '0.47 0.06 175.1',
+    '800': '0.369 0.04 177.1',
+    '900': '0.272 0.03 177.5'
   },
   secondary: {
-    '50': '245 243 255',
-    '100': '237 233 254',
-    '200': '221 214 254',
-    '300': '196 181 253',
-    '400': '167 139 250',
-    '500': '135 92 246',
-    '600': '111 64 236',
-    '700': '97 49 221',
-    '800': '83 30 211',
-    '900': '68 21 178',
+    '50': '0.985 0.06 185.3',
+    '100': '0.968 0.09 173.5',
+    '200': '0.91 0.15 162.7',
+    '300': '0.871 0.21 156',
+    '400': '0.822 0.29 153',
+    '500': '0.737 0.28 152.3',
+    '600': '0.639 0.24 152.8',
+    '700': '0.539 0.2 153.2',
+    '800': '0.411 0.14 155.6',
+    '900': '0.291 0.08 159.5'
   },
   positive: {
-    '50': '240 253 244',
-    '100': '220 252 231',
-    '200': '187 247 208',
-    '300': '134 239 172',
-    '400': '74 222 128',
-    '500': '2 198 82',
-    '600': '10 171 69',
-    '700': '1 137 55',
-    '800': '22 101 52',
-    '900': '20 83 45',
+    '50': '0.985 0.06 185.3',
+    '100': '0.968 0.09 173.5',
+    '200': '0.91 0.15 162.7',
+    '300': '0.871 0.21 156',
+    '400': '0.822 0.29 153',
+    '500': '0.737 0.28 152.3',
+    '600': '0.639 0.24 152.8',
+    '700': '0.539 0.2 153.2',
+    '800': '0.411 0.14 155.6',
+    '900': '0.291 0.08 159.5'
   },
   negative: {
-    '50': '255 241 242',
-    '100': '255 228 230',
-    '200': '254 205 211',
-    '300': '253 164 175',
-    '400': '251 113 133',
-    '500': '244 63 94',
-    '600': '225 29 72',
-    '700': '190 18 60',
-    '800': '159 18 57',
-    '900': '136 19 55',
+    '50': '0.977 0.03 229.6',
+    '100': '0.948 0.02 276.2',
+    '200': '0.899 0.03 338',
+    '300': '0.859 0.06 356.3',
+    '400': '0.797 0.11 7.6',
+    '500': '0.727 0.16 13.9',
+    '600': '0.607 0.25 19.7',
+    '700': '0.518 0.27 29',
+    '800': '0.39 0.19 27',
+    '900': '0.269 0.1 21.9'
   },
   warning: {
-    '50': '254 252 232',
-    '100': '254 249 195',
-    '200': '254 240 138',
-    '300': '253 224 71',
-    '400': '250 204 21',
-    '500': '234 179 8',
-    '600': '202 138 4',
-    '700': '161 98 7',
-    '800': '133 77 14',
-    '900': '113 63 18',
+    '50': '0.978 0.03 175.2',
+    '100': '0.96 0.04 128.6',
+    '200': '0.908 0.1 97.4',
+    '300': '0.866 0.14 86.1',
+    '400': '0.819 0.22 80',
+    '500': '0.742 0.27 77.1',
+    '600': '0.628 0.22 75.9',
+    '700': '0.531 0.2 73',
+    '800': '0.409 0.14 71.4',
+    '900': '0.282 0.08 68.5'
   },
   neutral: {
-    '50': '250 250 250',
-    '100': '244 244 245',
-    '200': '228 228 231',
-    '300': '212 212 216',
-    '400': '161 161 170',
-    '500': '113 113 122',
-    '600': '82 82 91',
-    '700': '63 63 70',
-    '800': '39 39 42',
-    '900': '24 24 27',
+    '50': '0.987 0.04 210.8',
+    '100': '0.963 0.04 204.5',
+    '200': '0.906 0.04 195.7',
+    '300': '0.818 0.05 189.1',
+    '400': '0.631 0.04 186.4',
+    '500': '0.532 0.04 182.9',
+    '600': '0.445 0.03 177.5',
+    '700': '0.367 0.03 177.4',
+    '800': '0.283 0.02 178.7',
+    '900': '0.212 0.02 170.6'
   },
   disabled: {
-    '50': '250 250 250',
-    '100': '244 244 245',
-    '200': '228 228 231',
-    '300': '212 212 216',
-    '400': '161 161 170',
-    '500': '113 113 122',
-    '600': '82 82 91',
-    '700': '63 63 70',
-    '800': '39 39 42',
-    '900': '24 24 27',
+    '50': '0.987 0.04 210.8',
+    '100': '0.963 0.04 204.5',
+    '200': '0.906 0.04 195.7',
+    '300': '0.818 0.05 189.1',
+    '400': '0.631 0.04 186.4',
+    '500': '0.532 0.04 182.9',
+    '600': '0.445 0.03 177.5',
+    '700': '0.367 0.03 177.4',
+    '800': '0.283 0.02 178.7',
+    '900': '0.212 0.02 170.6',
   },
 };
 export default {

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

@@ -1,56 +1,76 @@
 <template>
-  <div role="button" tabindex="0" @click="copyColorToClipboard" @keydown.enter="copyColorToClipboard">
+  <div class="text-xs">
     <div
-      class="h-10 rounded border dark:border-zinc-700 mb-1"
+      role="button"
+      tabindex="0"
+      @click="copyColorToClipboard"
+      @keydown.enter="copyColorToClipboard"
+      class="relative h-12 rounded border dark:border-zinc-700 group"
       :style="{
-        backgroundColor: `rgb(${rgbColor})`,
+        backgroundColor: `oklch(${oklchColor})`,
       }"
-    />
-    <p v-if="copied" class="flex items-center text-xs">
-      <Icon name="ri:check-line" height="16" class="text-green" />
-      Copied
-    </p>
-    <p v-else class="text-xs flex items-center justify-between">
-      <span>{{ name }}</span>
-      <span class="font-mono">{{ hex }}</span>
-    </p>
+    >
+      <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 }">
+        <template v-if="copied">
+          <span>Copied&nbsp;</span>
+          <span><Icon name="ri:check-line" height="16" class="text-green" /></span>
+        </template>
+        <template v-else>
+          oklch({{oklchColor}})&nbsp;
+          <Icon name="ri:file-copy-fill" height="16" class="text-green" />
+        </template>
+      </p>
+    </div>
+
+    <div role="button" tabindex="0" @click="copyColorNameToClipboard" @keydown.enter="copyColorNameToClipboard" class="pt-2 pb-1">
+      <template v-if="copiedName">
+        Copied&nbsp;
+        <Icon name="ri:check-line" height="16" class="text-green" />
+      </template>
+      <template v-else>
+        {{ name }}&nbsp;
+        <Icon name="ri:file-copy-fill" height="16" class="text-green" />
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
-function componentToHex(c) {
-  var hex = parseInt(c).toString(16);
-  return hex.length == 1 ? '0' + hex : hex;
-}
 export default {
   props: {
-    rgbColor: {
+    oklchColor: {
       type: String,
       required: true,
     },
     name: {
       type: String,
       required: true,
     },
+    shade: {
+      type: String,
+      required: true,
+    }
   },
   data() {
     return {
       copied: false,
+      copiedName: false,
     };
   },
   methods: {
     async copyColorToClipboard() {
-      await navigator.clipboard.writeText(this.name);
+      await navigator.clipboard.writeText(`oklch(${this.oklchColor})`);
       this.copied = true;
       setTimeout(() => {
         this.copied = false;
       }, 1000);
     },
-  },
-  computed: {
-    hex() {
-      const [r, g, b] = this.rgbColor.split(' ');
-      return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+    async copyColorNameToClipboard() {
+      await navigator.clipboard.writeText(this.name);
+      this.copiedName = true;
+      setTimeout(() => {
+        this.copiedName = false;
+      }, 1000);
     },
   },
 };