Skip to content

Conversation

FRSgit
Copy link
Contributor

@FRSgit FRSgit commented Jul 6, 2025

Related issue

Closes #

Scope of work

https://tailwindcss.com/docs/upgrade-guide

To avoid some of the breaking changes introduced by Tailwind 4 and to keep sensible defaults we want to give to out users, SFUI Tailwind configuration:

  • brings back the possibility to set the default outline width, color and offset (see the discussion here). I think it might be good to add those back for all affected utilities (borders/rings/divides).
  • adds the cursor: pointer style for button elements.
  • reimplements automated dark mode that will support both media AND classname mode.

Screenshots of visual changes

Checklist

  • Self code-reviewed
  • Changes documented
  • Semantic HTML
  • SSR-friendly
  • Caching friendly
  • a11y for WCAG 2.0 AA
  • examples created
  • blocks created
  • cypress tests created

aniamusial and others added 6 commits June 29, 2023 10:56
* fix: changed paddings in sfselect

* chore: adjusted padding left

* chore: updated changelog

* Update .changeset/fresh-emus-care.md

Co-authored-by: Jakub Freisler <[email protected]>

---------

Co-authored-by: Jakub Freisler <[email protected]>
* BREAKING CHANGE: remove flex classes form wrapper slot in list item

* fix: lint fixes

* fix: lint fixes
#3008)

BREAKING CHANGE: remove deprecated useTrapFocus arrowKeysOn option
Copy link

changeset-bot bot commented Jul 6, 2025

🦋 Changeset detected

Latest commit: 4aff1ae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@storefront-ui/react Major
@storefront-ui/vue Major
@storefront-ui/nuxt Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@maksym-arturIn
Copy link

looking forward to use it with tailwind v4

FRSgit and others added 7 commits September 3, 2025 23:56
# Conflicts:
#	apps/docs/components/content/_hooks/useTrapFocus.md
#	packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx
#	packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue
#	packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts
#	packages/tests/components/SfButton/SfButton.cy.tsx
# Conflicts:
#	apps/docs/components/components/content/ColorPaletteBlock.vue
#	apps/preview/next/package.json
#	apps/preview/next/pages/examples/SfAccordionItem.tsx
#	apps/preview/next/pages/showcases/ProductCard/Details.tsx
#	apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx
#	apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx
#	apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx
#	apps/preview/next/pages/showcases/QuantitySelector/Rounded.tsx
#	apps/preview/nuxt/pages/examples/SfAccordionItem.vue
#	apps/test/react/package.json
#	apps/test/vue/package.json
#	package.json
#	packages/config/tailwind/index.ts
#	packages/config/tailwind/package.json
#	packages/sfui/frameworks/react/components/SfButton/SfButton.tsx
#	packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx
#	packages/sfui/frameworks/react/components/SfChip/SfChip.tsx
#	packages/sfui/frameworks/react/components/SfInput/SfInput.tsx
#	packages/sfui/frameworks/react/components/SfLink/SfLink.tsx
#	packages/sfui/frameworks/react/components/SfModal/SfModal.tsx
#	packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
#	packages/sfui/frameworks/react/components/SfTextarea/SfTextarea.tsx
#	packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue
#	packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
#	packages/sfui/frameworks/vue/components/SfCheckbox/SfCheckbox.vue
#	packages/sfui/frameworks/vue/components/SfChip/SfChip.vue
#	packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
#	packages/sfui/frameworks/vue/components/SfLink/SfLink.vue
#	packages/sfui/frameworks/vue/components/SfModal/SfModal.vue
#	packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
#	packages/sfui/frameworks/vue/components/SfTextarea/SfTextarea.vue
#	yarn.lock
@FRSgit FRSgit marked this pull request as ready for review October 9, 2025 16:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants