[NO-ISSUE] feat!: drop v3 tailwind build and PrimeVue SCSS layer#718
Open
gab-az wants to merge 9 commits into
Open
[NO-ISSUE] feat!: drop v3 tailwind build and PrimeVue SCSS layer#718gab-az wants to merge 9 commits into
gab-az wants to merge 9 commits into
Conversation
Contributor
|
Criar listagem de token e fazer clean up do Theme. |
974f01b to
e20950a
Compare
robsongajunior
requested changes
Jul 7, 2026
…olor tokens Documents every mode-aware semantic color token from `@aziontech/theme/globals.css`. Swatches render the live `var(--*)` tokens (theme toolbar previews light/dark; click copies the variable). The catalog is generated from the token source via `compileThemeVars`, aliased in `.storybook/main.js` to `packages/theme/src/scripts/compile-theme.js` so this internal doc page doesn't widen `@aziontech/theme`'s public surface.
BREAKING CHANGE: `@aziontech/theme` no longer ships the Tailwind v3
preset, the PrimeVue SCSS theme (`src/azion/*`), or the
`./tailwind-preset*` / `./tailwind/semantic-*-plugin` / `./v3/*` /
`./widget` exports. The package now ships a single Tailwind v4
stylesheet at `@aziontech/theme/globals.{css,scss}` (formerly the
`./v4/*` alias) plus the JS tokens under `./animations`, `./colors`,
`./texts`, and `.` (re-exports `src/tokens/`).
`build-tokens.mjs` now emits only the v4 output. `dist/v4/globals.css`
is self-contained: `@theme` block (colors, breakpoints, `--animate-*`)
+ semantic light/dark selectors (`--bg-*`, `--primary`, `--text-*`, …
via `compileThemeCss()`) + top-level `@keyframes` blocks + `@layer
components` for `.text-*` / `.gap-*` / `.p-*` / `.px-container` /
`.animate-popup-scale-*` (`transform-origin` for the popup animations
lives here because Tailwind v4's `--animate-*` only registers the
`animation` shorthand).
Reshuffled the animation tokens so the v4 build is self-sufficient:
`primitives/animations/animate.js` gains the utilities that used to
live in the v3 `semantic/animations.js` plugin (blink, fade-in,
fade-out, slide-down, highlight-fade); the raw `@keyframes` bodies
now live in the new `primitives/animations/keyframes.js`; the v3
plugin (`semantic/animations.js`) and the deprecated
`semantic/{spacings,texts}.js` plugin files are deleted.
Storybook (`apps/storybook`) migrates to Tailwind v4 in the same
change so it keeps building against the theme:
- bump `tailwindcss` `^3.3.3` → `^4`; add `@tailwindcss/vite`.
- drop `tailwind.config.js` + `postcss.config.js` (v4 is CSS-first).
- drop the unused PrimeVue registration and `primeflex`/`primevue`/
`@tailwindcss/typography`/`autoprefixer` deps from `preview.js` and
`package.json` — no story or webkit component consumes them.
- add `@reference "@aziontech/theme/globals.css"` on `preview.css`
(v4 requires it for `@apply` outside the main entry) and rewrite
the `@apply !class` uses to the v4 `!` suffix form.
- rewrite every `!prefix` important class to the v4 `suffix!` form
across foundations components, story templates, and the affected
webkit components (`split-button`, `deploy-success`, `table`,
`link`, `mini-button`, `tag`).
Follow-up to the v3 → v4 drop that missed three consumer-visible bits of the previous behavior: - **Fonts**: the removed `@aziontech/theme` bare import used to pull in `src/azion/_fonts.scss` which registered 19 `@font-face` blocks (Roboto, Roboto Mono, Sora, Proto Mono, Roboto Condensed, Titillium Web). Bringing them back as `src/tokens/primitives/fonts.css` and splicing them into `dist/v4/globals.css` after `@import "tailwindcss"` (CSS spec requires `@import` before every other at-rule, so a naive prepend of the font block would silently invalidate the import and skip Tailwind's setup). - **Utility scan of webkit components**: Tailwind v4 auto-detect only scans the CWD. `packages/webkit/src` lives outside `apps/storybook`, so `bg-[var(--bg-hover)]`, `text-[var(--primary-contrast)]`, etc. used only in webkit `.vue` files never made it into the output CSS. `@source` in `preview.css` did not help — it only takes effect in the file that also has `@import "tailwindcss"`. Moved the directive into the emitted `dist/v4/globals.css` (`@source "../../../webkit/src"`). - **Brand color namespace**: the primitive color scale was exposed under the raw names `--color-primary-*` / `--color-accent-*`. That collides with the semantic `--primary` / `--accent` tokens in Tailwind v4's namespace model. Renamed the primitives to `--color-brand-primary-*` / `--color-brand-accent-*` (matching the already-used `bg-brand-accent-400` convention), and updated the two direct `var(--color-primary-500)` / `var(--color-accent-*)` refs in `button-highlight.vue`. BREAKING CHANGE: `@aziontech/theme` primitives no longer expose `--color-primary-*` and `--color-accent-*`. Consumers must migrate to `--color-brand-primary-*` and `--color-brand-accent-*` (and to `bg-brand-primary-*` / `bg-brand-accent-*` utilities, respectively).
168f9f4 to
d83c56f
Compare
- Expose @aziontech/theme/theme-colors as a public export (was reached via an internal path alias in .storybook/main.js). - Drop the stale @aziontech/webkit → @aziontech/webkit.dev alias; the workspace package is @aziontech/webkit again — rename the dep in apps/storybook/package.json and refresh README references. - Remove the color matcher from Storybook controls parameters (unused).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Cuts the
@aziontech/themepackage down to Tailwind v4 only and migrates the Storybook app along with it. Rolls up two logical changes:docs(storybook)— Theme foundations page (e20950a) documenting every mode-aware semantic color token from@aziontech/theme/globals.css. Swatches render livevar(--*)tokens (theme toolbar previews light/dark; click copies the variable). The catalog is generated from source viacompileThemeVars, aliased in.storybook/main.jsso this internal doc page doesn't widen the theme's public surface.feat!— drop v3 build + PrimeVue SCSS layer (62e0f21, BREAKING).@aziontech/themeno longer ships:./tailwind-preset*,./v3/*),src/azion/**, 139 files, ~17k lines removed),./tailwind/semantic-{spacings,texts,animations}-plugin),./widgetimplicit entry.The package now exposes a single Tailwind v4 stylesheet at
@aziontech/theme/globals.{css,scss}(formerly aliased under./v4/*) plus the JS token entries under./animations,./colors,./texts, and.(re-exportssrc/tokens/).build-tokens.mjswas rewritten to emit only the v4 output.dist/v4/globals.cssis now self-contained:@theme(colors, breakpoints,--animate-*) + semantic light/dark selectors viacompileThemeCss()+ top-level@keyframesblocks +@layer componentsfor.text-*/.gap-*/.p-*/.px-container/.animate-popup-scale-*(needed because Tailwind v4's--animate-*only registers theanimationshorthand, so the popup animations'transform-originlives in a@layer componentsrule).Animation tokens reshuffled so v4 is self-sufficient:
primitives/animations/animate.jsgains the utilities that used to live in the v3semantic/animations.jsplugin (blink,fade-in,fade-out,slide-down,highlight-fade); the raw@keyframesbodies now live inprimitives/animations/keyframes.js; the v3 plugin (semantic/animations.js) and the deprecatedsemantic/{spacings,texts}.jsplugin files are deleted.Storybook migrates to Tailwind v4 in the same change:
tailwindcss@^3.3.3 → ^4; add@tailwindcss/vite.apps/storybook/tailwind.config.js+apps/storybook/postcss.config.js(v4 is CSS-first).primevue/primeflex/@tailwindcss/typography/autoprefixerdeps and the PrimeVue registration inpreview.js— no story or webkit component consumes them.@reference "@aziontech/theme/globals.css"onpreview.css(v4 requires it for@applyoutside the main entry) and rewrite every@apply !classto the v4class!suffix form.!prefiximportant class to the v4!suffixform across foundations components, story templates, and the affected webkit components (split-button,deploy-success,table,link,mini-button,tag).Release impact
@aziontech/theme→ major (viafeat!). Public surface change (./tailwind-preset*,./tailwind/semantic-*-plugin,./globals.cssnow v4 output, etc.).apps/storybook→ no release (not a versioned package).Test plan
pnpm --filter @aziontech/theme build:tokens→ regeneratesdist/v4/globals.{css,scss}(semantic light/dark blocks + 10@keyframes+.animate-popup-scale-*extras).pnpm --filter @aziontech/theme build:dts→.d.tsforsrc/tokens/still generated.pnpm --filter @aziontech/webkit.dev lint && … type-check→ passes; the 4 imports of@aziontech/theme/animationsstill resolve.pnpm --filter storybook build→ succeeds with the v4 pipeline (@tailwindcss/vite).pnpm --filter storybook dev, open Button / Table / Skeleton, toggle light/dark, confirm animations and semantic colors respond as before.