Skip to content

refactor: unify UnoCSS config with shared tokens#208

Merged
antfu merged 1 commit intomainfrom
antfu/unocss-config-consistency
Mar 16, 2026
Merged

refactor: unify UnoCSS config with shared tokens#208
antfu merged 1 commit intomainfrom
antfu/unocss-config-consistency

Conversation

@antfu
Copy link
Copy Markdown
Member

@antfu antfu commented Mar 16, 2026

Description

Extract shared UnoCSS base semantic tokens into a reusable sharedShortcuts constant in packages/ui, enabling Wind3 (webcomponents) and Wind4 (Nuxt UIs) to share the same visual identity tokens while maintaining their respective preset requirements.

Consolidate duplicate global CSS across packages into packages/ui/src/styles/global.css. Each package now imports the shared base and only defines its own specific styles. Fix packages/vite to use CSS variables for scrollbar colors, aligning it with rolldown and self-inspect.

Align all base shortcuts to webcomponents canonical values: color-base: neutral-200, border-base: #8882, bg-glass: opacity:50/blur-7. Add clarifying comment explaining the getHashColorFromString divergence between webcomponents and UI packages.

Linked Issues

None

Additional context

  • Reduces duplication of theme tokens and global styles by ~90 lines
  • All 203 tests pass, no visual changes
  • Improves maintainability by centralizing design tokens in packages/ui

Extract shared base semantic tokens (colors, borders, glass effects) from webcomponents config into a reusable `sharedShortcuts` constant in packages/ui. This allows Wind3 (webcomponents) and Wind4 (Nuxt UIs) to share the same visual identity tokens while maintaining their respective preset requirements.

Consolidate global CSS across packages into a shared base (packages/ui/src/styles/global.css) to eliminate duplication. Each package imports the shared base and only defines its own-specific styles. Fix packages/vite to use CSS variables for scrollbar colors, aligning it with rolldown and self-inspect.

Align all base shortcuts to webcomponents canonical values for consistency: color-base neutral-200, border-base #8882, bg-glass opacity:50/blur-7.

Changes:
- Create shared-shortcuts.ts with base semantic tokens
- Create shared global.css with common styles (reset, scrollbar, bg-dots)
- Update all uno.config files to import shared tokens
- Simplify package-specific global.css files
- Add exports in package.json for new modules
- Add clarifying comment on getHashColorFromString divergence

No visual changes. All tests pass.

Co-Authored-By: Claude Haiku 4.5 <[email protected]>
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 16, 2026

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@208

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@208

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@208

@vitejs/devtools-rpc

npm i https://pkg.pr.new/@vitejs/devtools-rpc@208

@vitejs/devtools-self-inspect

npm i https://pkg.pr.new/@vitejs/devtools-self-inspect@208

commit: 11106c9

@antfu antfu merged commit 15371bf into main Mar 16, 2026
9 checks passed
@antfu antfu deleted the antfu/unocss-config-consistency branch March 16, 2026 23:32
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.

1 participant