fix: after upgrade base components (#3313)

FRSgit · web-flow · commit 1deaa0a56c38 · 2025-11-03T18:21:52.000+01:00
add focus-visible-within custom variant with docs
change disabled color for fit our tailwind@3 implementation
remove support for tailwind@3 from the packages it's not compatible anymore
add docs about default focus styles
docs - update example about customizing tailwind theme
add &amp; reword changesets
diff --git a/.changeset/five-geese-serve.md b/.changeset/five-geese-serve.md
@@ -3,4 +3,4 @@
 '@storefront-ui/vue': major
 ---
 
-Breaking Change - Padding size for square variant of SfButton changed
+- **[BREAKING][CHANGED]** Padding size for square variant of SfButton changed
diff --git a/.changeset/flat-radios-do.md b/.changeset/flat-radios-do.md
@@ -3,4 +3,4 @@
 '@storefront-ui/vue': major
 ---
 
-Breaking Change - removed flex classes from wrapper for slot in SfListItem
+- **[BREAKING][CHANGED]** removed flex classes from wrapper for slot in SfListItem
diff --git a/.changeset/fresh-emus-care.md b/.changeset/fresh-emus-care.md
@@ -3,4 +3,4 @@
 '@storefront-ui/vue': major
 ---
 
-Breaking Change - Padding left and right in SfSelect changed from 14px and 16px to 12px
+- **[BREAKING][CHANGED]** Padding left and right in SfSelect changed from 14px and 16px to 12px
diff --git a/.changeset/giant-geckos-perform.md b/.changeset/giant-geckos-perform.md
@@ -3,4 +3,4 @@
 '@storefront-ui/vue': major
 ---
 
-- **[CHANGED]** default badge background color. Add className `!bg-secondary-700` explicitly in order to migrate.
+- **[BREAKING][CHANGED]** default badge background color. Add className `!bg-secondary-700` explicitly in order to migrate.
diff --git a/.changeset/mighty-monkeys-occur.md b/.changeset/mighty-monkeys-occur.md
@@ -3,6 +3,6 @@
 '@storefront-ui/vue': major
 ---
 
-BREAKING CHANGE: Deprecated option `arrowKeysOn` from `useTrapFocus` is removed.
+- **[BREAKING][CHANGED]** Deprecated option `arrowKeysOn` from `useTrapFocus` is removed.
 This option was separated and replaced by two more specialised options `arrowKeysLeftRight` and `arrowKeysUpDown`.
 In order to migrate please one of those options or both.
diff --git a/.changeset/selfish-readers-tickle.md b/.changeset/selfish-readers-tickle.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/typography': major
+---
+
+- **[BREAKING][CHANGED]** Support for Tailwind@4, dropped support for Tailwind@3. If you'd like to use Tailwind@3, please us `@storefront-ui/typography` in version `2.x`.
diff --git a/.changeset/sharp-pets-beam.md b/.changeset/sharp-pets-beam.md
@@ -3,4 +3,4 @@
 '@storefront-ui/vue': major
 ---
 
-**[BREAKING][CHANGED]** Moved from `rounded-md` to `rounded-xl` as a default styling for `SfInput`.
+- **[BREAKING][CHANGED]** Moved from `rounded-md` to `rounded-xl` as a default styling for `SfInput`.
diff --git a/.changeset/slow-insects-travel.md b/.changeset/slow-insects-travel.md
@@ -0,0 +1,7 @@
+---
+'@storefront-ui/tailwind-config': major
+---
+
+- **[BREAKING][CHANGED]** Migrate to Tailwind@4 new configuration syntax. If you're using Tailwind@3, please stick to `@storefront-ui/tailwind-config` in version 2.x.
+- **[BREAKING][CHANGED]** Introduce OOTB dark mode handling instead of relying on `@mertasan/tailwindcss-variables` package.
+- **[REMOVED]** The `@mertasan/tailwindcss-variables` dependency has been removed as Tailwind support CSS variables out of the box now.
diff --git a/.changeset/small-carrots-rescue.md b/.changeset/small-carrots-rescue.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/tw-plugin-peer-next': major
+---
+
+- **[BREAKING][CHANGED]** - Migrate to Tailwind@4. If you're using Tailwind@3 - please use tw-plugin-peer-next in version 2.x.
diff --git a/.changeset/strange-pants-smile.md b/.changeset/strange-pants-smile.md
@@ -0,0 +1,9 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/nuxt': major
+'@storefront-ui/vue': major
+'@storefront-ui/shared': major
+---
+
+- **[BREAKING][CHANGED]** Migrate to Tailwind@4. SFUI tries to defer some of Tailwinds' breaking changes, e.g. the default outline width or border-radius size scale, but not everything was possible. Please refer to all breaking changes described in the [Tailwind upgrade guide](https://tailwindcss.com/docs/upgrade-guide) and [updated storefront-ui docs](https://docs.storefrontui.io/v2/).
+
diff --git a/.changeset/tidy-otters-deliver.md b/.changeset/tidy-otters-deliver.md
@@ -0,0 +1,7 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+- **[BREAKING][CHANGED]** Added `tailwind-merge` to all base components & blocks. From now on it will be easier to override default SFUI styles. See [`tailwind-merge` docs for more details](https://www.npmjs.com/package/tailwind-merge).
+
diff --git a/apps/docs/components/components/content/ColorPalette.vue b/apps/docs/components/components/content/ColorPalette.vue
@@ -91,16 +91,16 @@ const colors = {
     '900': '0.210975 0.0108426 151.158',
   },
   disabled: {
-    '50': '0.986252 0.00245284 164.375',
-    '100': '0.962452 0.00658519 159.784',
-    '200': '0.90417 0.0125382 156.831',
-    '300': '0.815695 0.0163149 154.295',
-    '400': '0.62887 0.0164423 157.928',
-    '500': '0.530109 0.017136 157.798',
-    '600': '0.442872 0.016032 152.177',
-    '700': '0.364935 0.0156449 156.31',
-    '800': '0.281681 0.0111333 156.387',
-    '900': '0.210975 0.0108426 151.158',
+    '50': '0.986252 0.00245284 164.375 / 0.5',
+    '100': '0.962452 0.00658519 159.784 / 0.5',
+    '200': '0.90417 0.0125382 156.831 / 0.5',
+    '300': '0.815695 0.0163149 154.295 / 0.5',
+    '400': '0.62887 0.0164423 157.928 / 0.5',
+    '500': '0.530109 0.017136 157.798 / 0.5',
+    '600': '0.442872 0.016032 152.177 / 0.5',
+    '700': '0.364935 0.0156449 156.31 / 0.5',
+    '800': '0.281681 0.0111333 156.387 / 0.5',
+    '900': '0.210975 0.0108426 151.158 / 0.5',
   },
 };
 export default {
diff --git a/apps/docs/components/content/3.customization/theming.md b/apps/docs/components/content/3.customization/theming.md
@@ -11,9 +11,24 @@ In addition to [Tailwind's default colors](https://tailwindcss.com/docs/customiz
 :color-palette
 
 :::tip Want to see our default Tailwind preset?
-You can see all of the default colors, classes, variants, and more in our [Tailwind preset](https://github.com/vuestorefront/storefront-ui/blob/v2/packages/config/tailwind/index.ts)
+You can see all of the default colors, classes, variants, and more in our [Tailwind preset](https://github.com/vuestorefront/storefront-ui/blob/v2/packages/config/tailwind/config.css)
 :::
 
+### Default outline styles (focus)
+
+You can easily adjust the focus outline styles across your entire storefront by customizing the `default-outline` variables in your global CSS. These variables ensure a consistent focus style throughout your application, and you can update them globally to match your brand or accessibility needs.
+
+For example, if you want a thicker, blue outline with increased spacing, you could do:
+
+```css
+:root {
+  --default-outline-color: oklch(0.427 0.186 264.834); /* a custom blue color */
+  --default-outline-width: 4px;
+  --default-outline-offset: 4px;
+}
+```
+
+
 ## Customizing colors
 
 ### CSS Variables
@@ -58,10 +73,12 @@ The CSS classes for Storefront UI colors follow the pattern of `--color-{color}-
 <summary>Full List of CSS Variables</summary>
 
 
-
 ```css
 :root {
-
+  /* Default values for outline properties (used for focus states) */
+  --default-outline-color: var(--color-secondary-600);
+  --default-outline-offset: 2px;
+  --default-outline-width: 2px;
 
   /* Primary */
   --color-primary-50: oklch(0.980165 0.0205041 156.723);
@@ -136,30 +153,23 @@ The CSS classes for Storefront UI colors follow the pattern of `--color-{color}-
   --color-neutral-900: oklch(0.210975 0.0108426 151.158);
 
   /* Disabled */
-  --color-disabled-50: oklch(0.986252 0.00245284 164.375);
-  --color-disabled-100: oklch(0.962452 0.00658519 159.784);
-  --color-disabled-200: oklch(0.90417 0.0125382 156.831);
-  --color-disabled-300: oklch(0.815695 0.0163149 154.295);
-  --color-disabled-400: oklch(0.62887 0.0164423 157.928);
-  --color-disabled-500: oklch(0.530109 0.017136 157.798);
-  --color-disabled-600: oklch(0.442872 0.016032 152.177);
-  --color-disabled-700: oklch(0.364935 0.0156449 156.31);
-  --color-disabled-800: oklch(0.281681 0.0111333 156.387);
-  --color-disabled-900: oklch(0.210975 0.0108426 151.158);
+  --color-disabled-50: oklch(0.986252 0.00245284 164.375 / 0.5);
+  --color-disabled-100: oklch(0.962452 0.00658519 159.784 / 0.5);
+  --color-disabled-200: oklch(0.90417 0.0125382 156.831 / 0.5);
+  --color-disabled-300: oklch(0.815695 0.0163149 154.295 / 0.5);
+  --color-disabled-400: oklch(0.62887 0.0164423 157.928 / 0.5);
+  --color-disabled-500: oklch(0.530109 0.017136 157.798 / 0.5);
+  --color-disabled-600: oklch(0.442872 0.016032 152.177 / 0.5);
+  --color-disabled-700: oklch(0.364935 0.0156449 156.31 / 0.5);
+  --color-disabled-800: oklch(0.281681 0.0111333 156.387 / 0.5);
+  --color-disabled-900: oklch(0.210975 0.0108426 151.158 / 0.5);
 }
 ```
 
 </details>
 
 ### Dark mode
 
-
-### Dark-mode specific colors
-
-
-
-
-
 Storefront UI comes with a pre-configured dark variant that applies styling based on the selector `&:where(.dark, .dark *)`. This means dark mode styles will be applied when either an element or any of its parents has the `.dark` class. This approach allows for nested dark mode contexts and follows a similar pattern to popular dark mode implementations like Tailwind's dark mode.
 
 Based on it, you can build a dark mode handling in your app using a code snippet from [official Tailwind documentation](https://v3.tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection).
@@ -182,36 +192,35 @@ In the example below color `0.43 0.11 153.7` (oklch) will be used as `primary-40
 
 ### Tailwind Configuration
 
-If you don't need to support multiple themes, or if you'd prefer to use Tailwind variants to implement your themes, you can customize Storefront UI's colors inside of your Tailwind configuration.
-
-
-
-```js
-export default {
-  //...
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#f5f9ff',
-          100: '#e9f3ff',
-          200: '#c8e0ff',
-          300: '#a6ccff',
-          400: '#6ea1ff',
-          500: '#3375ff',
-          600: '#2e6ae6',
-          700: '#264ebf',
-          800: '#1d3f99',
-          900: '#132f72',
-        }
-      },
-    },
-  },
-  //...
-};
-```
+If you don't need to support multiple themes, or if you'd prefer to use Tailwind variants to implement your themes, you can customize Storefront UI's on the build time using [Tailwind `@theme` configuration directive](https://tailwindcss.com/docs/theme).
 
+```css
+/* ... */
+@theme {
+  --color-primary-50: oklch(0.98 0.01 0);
+  --color-primary-100: oklch(0.96 0.02 252.98);
+  --color-primary-200: oklch(0.9 0.05 254.93);
+  --color-primary-300: oklch(0.84 0.08 255.92);
+  --color-primary-400: oklch(0.71 0.15 261.78);
+  --color-primary-500: oklch(0.6 0.22 262.58);
+  --color-primary-600: oklch(0.56 0.2 262.48);
+  --color-primary-700: oklch(0.47 0.18 265.04);
+  --color-primary-800: oklch(0.4 0.15 264.63);
+  --color-primary-900: oklch(0.33 0.12 263.84);
+}
+/* ... */
+```
 
 :::read-more
-To learn more about the different ways to declare colors in Tailwind, check out the [Tailwind documentation](https://tailwindcss.com/docs/customizing-colors#using-custom-colors).
+To learn more about the different ways to declare colors in Tailwind, check out the [Tailwind documentation](https://tailwindcss.com/docs/theme).
 :::
+
+## Custom Tailwind Variants
+
+Our Tailwind configuration includes several custom variants designed to simplify your workflow.
+
+### `focus-visible-within` Custom Variant
+
+We've added a `focus-visible-within` custom variant to help you visually indicate when any nested child element is focus-visible. This is especially useful for styling components that require a clear focus state, even if the focus is within a child element.
+
+You can use this variant just like any other Tailwind variant. For example: `focus-visible-within:bg-primary-800`.
diff --git a/apps/docs/components/content/_hooks/useFocusVisible.md b/apps/docs/components/content/_hooks/useFocusVisible.md
@@ -4,7 +4,9 @@
 
 #tab-1
 
-`useFocusVisible` helps you determine whether keyboard focus is visible globally. Sometimes standard `:focus-visible` pseudo-class is not enough. In some cases, you may want to style a wrapper element based on nested input. You can't fully rely on `:has()` pseudo-class yet, as it is still not fully [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility).
+`useFocusVisible` helps you determine whether keyboard focus is visible globally. Sometimes standard `:focus-visible` pseudo-class is not enough. In those cases, you may want to style a wrapper element based on nested input.
+
+In many cases, our custom Tailwind CSS `focus-visible-within` variant will might be enough an shuold be preferred. However, if you require information about focus state in JavaScript, this hook provides a solution.
 
 ## Input default behaviour
 
diff --git a/apps/docs/components/package.json b/apps/docs/components/package.json
@@ -37,7 +37,7 @@
     "nuxt-content-assets": "^1.4.3",
     "nuxt-icon": "^0.6.10",
     "sf-docs-base": "^1.3.2",
-    "tailwindcss": "4.1.11",
+    "tailwindcss": "^4.1.11",
     "unstorage": "^1.10.2",
     "vite-svg-loader": "^5.1.0"
   },
diff --git a/apps/preview/next/package.json b/apps/preview/next/package.json
@@ -43,7 +43,7 @@
     "prettier": "^3.0.0",
     "rimraf": "^6.0.1",
     "string-replace-loader": "^3.1.0",
-    "tailwindcss": "4.1.11",
+    "tailwindcss": "^4.1.11",
     "ts-loader": "^9.4.2"
   }
 }
diff --git a/apps/preview/nuxt/package.json b/apps/preview/nuxt/package.json
@@ -34,7 +34,7 @@
     "prettier": "^3.0.0",
     "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
-    "tailwindcss": "4.1.11"
+    "tailwindcss": "^4.1.11"
   },
   "dependencies": {
     "@storefront-ui/preview-shared": "workspace:^",
diff --git a/apps/preview/nuxt/pages/examples/SfInput.vue b/apps/preview/nuxt/pages/examples/SfInput.vue
@@ -8,7 +8,7 @@
         v-bind="state"
         v-model="value"
         :wrapper-class="[
-          ' mt-0.5',
+          'mt-0.5',
           {
             'peer bg-disabled-100 ring-disabled-300 ring-1 text-disabled-500': disabled || readonly,
           },
diff --git a/apps/test/react/package.json b/apps/test/react/package.json
@@ -49,7 +49,7 @@
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",
     "rimraf": "^6.0.1",
-    "tailwindcss": "4.1.11",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
     "vite-plugin-istanbul": "^4.0.1"
diff --git a/apps/test/vue/package.json b/apps/test/vue/package.json
@@ -51,7 +51,7 @@
     "postcss-import": "^15.1.0",
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
-    "tailwindcss": "4.1.11",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
     "vite-plugin-istanbul": "^4.0.0",
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "remark-stringify": "^11.0.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "tailwindcss": "4.1.11",
+    "tailwindcss": "^4.1.11",
     "turbo": "^2.0.9",
     "typescript": "^5.5.4",
     "unified": "^11.0.5",
diff --git a/packages/config/tailwind/config.css b/packages/config/tailwind/config.css
@@ -11,6 +11,12 @@
   }
 }
 
+@custom-variant focus-visible-within {
+  &:has(:focus-visible) {
+    @slot;
+  }
+}
+
 @theme {
   --default-outline-color: var(--color-secondary-600);
   --default-outline-offset: 2px;
@@ -85,16 +91,16 @@
   --color-neutral-800: oklch(0.281681 0.0111333 156.387);
   --color-neutral-900: oklch(0.210975 0.0108426 151.158);
 
-  --color-disabled-50: oklch(0.986252 0.00245284 164.375);
-  --color-disabled-100: oklch(0.962452 0.00658519 159.784);
-  --color-disabled-200: oklch(0.90417 0.0125382 156.831);
-  --color-disabled-300: oklch(0.815695 0.0163149 154.295);
-  --color-disabled-400: oklch(0.62887 0.0164423 157.928);
-  --color-disabled-500: oklch(0.530109 0.017136 157.798);
-  --color-disabled-600: oklch(0.442872 0.016032 152.177);
-  --color-disabled-700: oklch(0.364935 0.0156449 156.31);
-  --color-disabled-800: oklch(0.281681 0.0111333 156.387);
-  --color-disabled-900: oklch(0.210975 0.0108426 151.158);
+  --color-disabled-50: oklch(0.986252 0.00245284 164.375 / 0.5);
+  --color-disabled-100: oklch(0.962452 0.00658519 159.784 / 0.5);
+  --color-disabled-200: oklch(0.90417 0.0125382 156.831 / 0.5);
+  --color-disabled-300: oklch(0.815695 0.0163149 154.295 / 0.5);
+  --color-disabled-400: oklch(0.62887 0.0164423 157.928 / 0.5);
+  --color-disabled-500: oklch(0.530109 0.017136 157.798 / 0.5);
+  --color-disabled-600: oklch(0.442872 0.016032 152.177 / 0.5);
+  --color-disabled-700: oklch(0.364935 0.0156449 156.31 / 0.5);
+  --color-disabled-800: oklch(0.281681 0.0111333 156.387 / 0.5);
+  --color-disabled-900: oklch(0.210975 0.0108426 151.158 / 0.5);
 
   --font-headings: "Inter", "sans-serif";
   --font-body: "Inter", "sans-serif";
diff --git a/packages/config/tailwind/package.json b/packages/config/tailwind/package.json
@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "@tailwindcss/typography": ">=0.5.19",
-    "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1 || >= 4.0.0"
+    "tailwindcss": ">= 4.0.0-alpha.20 || >= 4.0.0-beta.1 || >= 4.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx b/packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx
@@ -39,7 +39,7 @@ const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
     return (
       <WrapperTag
         className={twMerge(
-          'flex cursor-pointer focus-visible:outline-primary-700 focus-visible:outline focus-visible:outline-offset-2 rounded-md',
+          'flex cursor-pointer focus-visible-within:outline focus-visible-within:outline-offset-2 rounded-md',
           {
             'text-neutral-500 hover:text-primary-800 active:text-primary-900': !invalid && !attributes.disabled,
             'text-negative-700 hover:text-negative-800 active:text-negative-900': invalid && !attributes.disabled,
@@ -50,7 +50,7 @@ const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
         data-testid="checkbox"
       >
         <input
-          className={twMerge('hidden', className)}
+          className={twMerge('sr-only', className)}
           type="checkbox"
           ref={mergeRefs([inputRef, ref])}
           {...attributes}
diff --git a/packages/sfui/frameworks/react/components/SfCounter/SfCounter.tsx b/packages/sfui/frameworks/react/components/SfCounter/SfCounter.tsx
diff --git a/packages/sfui/frameworks/vue/components/SfCheckbox/SfCheckbox.vue b/packages/sfui/frameworks/vue/components/SfCheckbox/SfCheckbox.vue
diff --git a/packages/sfui/frameworks/vue/components/SfCounter/SfCounter.vue b/packages/sfui/frameworks/vue/components/SfCounter/SfCounter.vue
diff --git a/packages/sfui/frameworks/vue/composables/useTwMergeRoot/useTwMergeRoot.ts b/packages/sfui/frameworks/vue/composables/useTwMergeRoot/useTwMergeRoot.ts
diff --git a/packages/sfui/tw-plugin-peer-next/README.md b/packages/sfui/tw-plugin-peer-next/README.md
diff --git a/packages/sfui/tw-plugin-peer-next/index.ts b/packages/sfui/tw-plugin-peer-next/index.ts
diff --git a/packages/sfui/tw-plugin-peer-next/package.json b/packages/sfui/tw-plugin-peer-next/package.json
diff --git a/packages/sfui/typography/package.json b/packages/sfui/typography/package.json
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@storefront-ui/typography': major
 +---
++
 +- **[BREAKING][CHANGED]** Support for Tailwind@4, dropped support for Tailwind@3. If you'd like to use Tailwind@3, please us `@storefront-ui/typography` in version `2.x`.