Skip to content

[NO-ISSUE] feat!: drop v3 tailwind build and PrimeVue SCSS layer#718

Open
gab-az wants to merge 9 commits into
devfrom
feat/theme-colors-foundations
Open

[NO-ISSUE] feat!: drop v3 tailwind build and PrimeVue SCSS layer#718
gab-az wants to merge 9 commits into
devfrom
feat/theme-colors-foundations

Conversation

@gab-az

@gab-az gab-az commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Summary

Cuts the @aziontech/theme package down to Tailwind v4 only and migrates the Storybook app along with it. Rolls up two logical changes:

  1. docs(storybook) — Theme foundations page (e20950a) documenting every mode-aware semantic color token from @aziontech/theme/globals.css. Swatches render live var(--*) tokens (theme toolbar previews light/dark; click copies the variable). The catalog is generated from source via compileThemeVars, aliased in .storybook/main.js so this internal doc page doesn't widen the theme's public surface.

  2. feat! — drop v3 build + PrimeVue SCSS layer (62e0f21, BREAKING). @aziontech/theme no longer ships:

    • the Tailwind v3 preset (./tailwind-preset*, ./v3/*),
    • the PrimeVue SCSS theme (src/azion/**, 139 files, ~17k lines removed),
    • the v3 tailwind plugin exports (./tailwind/semantic-{spacings,texts,animations}-plugin),
    • the ./widget implicit 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-exports src/tokens/).

    build-tokens.mjs was rewritten to emit only the v4 output. dist/v4/globals.css is now self-contained: @theme (colors, breakpoints, --animate-*) + semantic light/dark selectors via compileThemeCss() + top-level @keyframes blocks + @layer components for .text-* / .gap-* / .p-* / .px-container / .animate-popup-scale-* (needed because Tailwind v4's --animate-* only registers the animation shorthand, so the popup animations' transform-origin lives in a @layer components rule).

    Animation tokens reshuffled so v4 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 primitives/animations/keyframes.js; the v3 plugin (semantic/animations.js) and the deprecated semantic/{spacings,texts}.js plugin files are deleted.

    Storybook migrates to Tailwind v4 in the same change:

    • bump tailwindcss@^3.3.3 → ^4; add @tailwindcss/vite.
    • drop apps/storybook/tailwind.config.js + apps/storybook/postcss.config.js (v4 is CSS-first).
    • drop unused primevue/primeflex/@tailwindcss/typography/autoprefixer deps and the PrimeVue registration in preview.js — 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 every @apply !class to the v4 class! 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).

Release impact

  • @aziontech/thememajor (via feat!). Public surface change (./tailwind-preset*, ./tailwind/semantic-*-plugin, ./globals.css now v4 output, etc.).
  • apps/storybook → no release (not a versioned package).

Test plan

  • pnpm --filter @aziontech/theme build:tokens → regenerates dist/v4/globals.{css,scss} (semantic light/dark blocks + 10 @keyframes + .animate-popup-scale-* extras).
  • pnpm --filter @aziontech/theme build:dts.d.ts for src/tokens/ still generated.
  • pnpm --filter @aziontech/webkit.dev lint && … type-check → passes; the 4 imports of @aziontech/theme/animations still resolve.
  • pnpm --filter storybook build → succeeds with the v4 pipeline (@tailwindcss/vite).
  • Manual smoke visual — pnpm --filter storybook dev, open Button / Table / Skeleton, toggle light/dark, confirm animations and semantic colors respond as before.

@gab-az gab-az requested a review from a team as a code owner July 2, 2026 18:54
@isaquebock

Copy link
Copy Markdown
Contributor

Criar listagem de token e fazer clean up do Theme.

@isaquebock isaquebock force-pushed the feat/theme-colors-foundations branch from 974f01b to e20950a Compare July 6, 2026 00:33
@isaquebock isaquebock changed the title [NO-ISSUE] feat(theme): add Theme foundations page + theme-colors export [NO-ISSUE] feat!: drop v3 tailwind build and PrimeVue SCSS layer Jul 6, 2026
Comment thread apps/storybook/.storybook/main.js Outdated
Comment thread apps/storybook/.storybook/main.js Outdated
Comment thread apps/storybook/.storybook/main.js Outdated
Comment thread apps/storybook/.storybook/preview.js
…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).
@isaquebock isaquebock force-pushed the feat/theme-colors-foundations branch from 168f9f4 to d83c56f Compare July 8, 2026 16:58
- 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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants