refactor: @aziontech/theme align token exports with available semantic plugins#550
Merged
Conversation
robsongajunior
changed the title
feat(pricing-card): use Tag component for popular badge
fix: adjust stories
## [2.0.1](https://github.com/aziontech/webkit/compare/@aziontech/webkit@2.0.0...@aziontech/webkit@2.0.1) (2026-05-14) ### Bug Fixes * adjust props ([4704eb8](4704eb8)) * adjust stories ([720b495](720b495))
fix(tag): adjust icon alignment and spacing
## [2.0.2](https://github.com/aziontech/webkit/compare/@aziontech/webkit@2.0.1...@aziontech/webkit@2.0.2) (2026-05-15) ### Bug Fixes * adjust tag component icon alignment and spacing ([6d1d355](6d1d355))
Move semantic colors (text-*, bg-*, border-*) out of the addUtilities plugin
and into theme.extend.{textColor,backgroundColor,borderColor} as var(--…)
references. Tailwind now generates the utilities natively with full modifier
support (hover, dark, focus, arbitrary values).
Restore the tokens/build pipeline (refs, resolve, css-vars) so :root / .dark
CSS variables are emitted from a single source of truth in semantic/colors.js,
which exports both the ref data (consumed by css-vars) and the var-map
(consumed by theme.js).
- semantic/colors.js: was a plugin, now data + derived var-map
- theme.js: adds textColor / backgroundColor / borderColor extensions
- tokens/index.js: drop broken colors-brand re-export, add new exports
- package.json: expose ./tokens, ./semantic/colors, ./css-vars
- .gitignore: exception for src/tokens/build/ (was hidden by build/ rule)
- remove orphan src/tokens/colors-brand.js (no consumers)
Breaking change: the semanticColors() plugin export from the previous
structure is gone. Consumers should drop it from tailwind.config plugins —
the same classes are now produced via theme.extend.
Move refs, resolve and css-vars helpers from tokens/build/ to a top-level scripts/ folder so they sit alongside upcoming compile pipelines and are decoupled from the token data tree.
…alpha Move the single primitives/colors.js into a colors/ folder and extract the brand (primary, accent, absolute) and alpha (white, black and per- palette variants) blocks into dedicated modules. Source-of-truth for each concern now lives in its own file; primitives.brand and primitives.alpha continue to be composed in colors.js, so existing tokenRef paths keep resolving.
Rename camelCase entries (linkHover, primaryHover, accentHover, dangerHover, warningHover, successHover) to kebab-case so semantic keys map 1:1 to CSS variable names emitted downstream.
…eight, radius) Introduce the shape/ primitive group with the full Figma scale: - container-3xs..7xl, size-2..96, spacing-1..96, height-2..96, radius (none/sm/DEFAULT/md/lg/xl/2xl/3xl/full) - width-3xs..7xl as tokenRef aliases to container.X, preserving the Figma intent of "width inherits from container"
Standalone single-scale primitives: - breakpoints sm/md/lg/xl/2xl (640..1536px) - border-widths 0..4 (0, 0.8px, 2px, 3px, 4px) - ring-offset (0.5px)
…height) Introduce the typography/ primitive group: - font-family: sans (Sora), code (Roboto Mono), display (Proto Mono) - font-size: text-xs..9xl (12..128px) - line-height: leading-none + leading-3..10 (12..40px)
Introduce the effects/ primitive group: - blur xs..3xl (4..64px) - opacity 25/50/75/100 as 0..1 decimals for direct CSS consumption
scripts/compile-primitives.js imports every primitive module, resolves tokenRef aliases (e.g. width → shape.container.X), flattens to a single :root block, and exposes compile*/inject* helpers. The shape/typography/effects group wrappers are stripped from the emitted CSS var names while preserved internally so refs stay resolvable, yielding clean names like --container-md, --font-size-xs and --blur-md. tests/primitives.html injects the output in the browser and renders swatches/scales for every category (colors, spacing, size, radius, container, typography, blur, opacity, breakpoints) for visual review.
…urfaces, background, border, text, ring) Introduce tokens/theme/ for v4 semantic tokens with light/dark variants composed via tokenRef: - primary/secondary/accent: base + mask/selected/hover/active/contrast states; secondary inverts vs surface for contrast buttons - surfaces: surface-0..950, aliases for primitives.gray (shared across themes) - background: bg-canvas/surface/raised/mask/overlay/hover/active/ backdrop/selected/contrast, referencing theme.surfaces - border: border-default/muted/strong/selected - text: text-default/muted - ring: ring-color, inverts with theme Refs use primitives.*, brand.* and the new theme.surfaces.* prefix; the latter still needs resolver support in the compile pipeline.
Each feedback group exports light/dark variants with three tokens: <name>, <name>-border (alpha variant) and <name>-contrast (text/icon color tuned for legibility on the matching background). Maps Figma "lavander" references to the violet primitive palette, keeping info aligned with brand.accent semantics.
scripts/compile-theme.js resolves tokenRef aliases from tokens/theme/* against primitives, brand and (chained) surfaces, emitting two CSS blocks: ':root, [data-theme=light]' and '[data-theme=dark]'. Surfaces are resolved first so background/border/ring/etc. can chain through theme.surfaces.surface-X. tests/theme.html injects the output and adds a toggle button that flips data-theme on the documentElement. Body, buttons, alerts, surface tiles and swatch labels all react to the toggle via CSS variables and a MutationObserver on the data-theme attribute.
Replace Tailwind v3 config snippets and outdated semantic class names
(bg-layer1, text-base) with the new CSS-first model:
- file structure tree covering primitives/{colors,shape,typography,
effects} and theme/{...,feedback}
- compile & inject usage in browser, Node and as JS objects
- tokenRef prefix table documenting supported resolvers
- how-to recipes for adding primitives, semantic tokens and new
semantic groups
- test page instructions and theme-switching hooks
Compares @aziontech/theme against top-tier design systems (Material, Polaris, Primer, Spectrum, Carbon) and direct competitors (Cloudflare, Vercel, Netlify, AWS Cloudscape) to inform the in-flight refactor. Includes a gap analysis table and prioritized recommendations.
Introduce src/scripts/build-tokens.mjs as a single builder emitting both Tailwind v3 (preset + @layer) and v4 (@theme + :root) outputs from the same source. Migrate containers, spacings, and texts from imperative Tailwind plugins to declarative .data.js files (mobile-first, explicit breakpoint maps). Mark legacy plugins as deprecated stubs for the migration window. Add docs/IMPLEMENTATION.md describing the pipeline and src/tests/tokens.html as a visual harness.
…mations) - typography: add font-weight, leading, tracking primitives; rewrite font-size to emit --text-* with paired --line-height vars - effects: add drop-shadow, shadow, inset-shadow, perspective primitives - shape: add aspect-video primitive - animations: add ease and animate primitives under new animations group - compile-primitives: register the new groups in refsTree/varsTree so the vars surface at :root - build-tokens: extend the Tailwind v3 preset with fontWeight, dropShadow, lineHeight, and letterSpacing mappings backed by the new vars
isaquebock
force-pushed
the
refactoring-tokens
branch
from
4a01f6e to
576a4c8
Compare
Use Tailwind-style keys (none, sm, DEFAULT, md…) for radius primitives and collapse DEFAULT leaves to the parent CSS var name during flattening. Group font-family under the `font` namespace alongside font-size/weight.
isaquebock
force-pushed
the
refactoring-tokens
branch
from
a87eed5 to
e2a2907
Compare
HerbertJulio
approved these changes
May 20, 2026
The v3 token build was emitting primitive vars and component classes but never wired in tokens/semantic/colors.js, so dist/v3/globals.css had no --text-*/--background-*/--border-* vars, dist/v3/tailwind.config.js had no textColor/backgroundColor/borderColor extensions, and there was no dark block at all — breaking text-default, bg-surface, border-default and every other semantic utility downstream consumers relied on. - build-tokens.mjs: import semanticColors + createCssVars, emit semantic vars in :root (light), add an @layer base block for [data-theme=dark], .dark, .azion.azion-dark, and extend the v3 preset with textColor/backgroundColor/borderColor. - resolve.js: keep primitives/surfacePrimitives/brandPrimitives nested under their root keys instead of spreading flat, so tokenRef paths like primitives.gray.900 and surfacePrimitives.surface.0 resolve. - semantic/colors.js: rename data key 'bg' → 'background' (css-vars.js and the semanticColors derivation both looked up .background.light and threw on import); rename stale primitives.neutral.* refs to primitives.gray.* (the neutral palette was removed in bcf7cb4). Two refs remain unresolved and emit invalid CSS values pending product decision: primitives.alpha.neutral.25 (bg-backdrop) and primitives.alpha.brand.primary.65 (bg-primary-mask).
HerbertJulio
approved these changes
May 20, 2026
Scope this branch back to packages/theme only. The storybook adjustments live on branch refactoring-tokens-storybook.
isaquebock
force-pushed
the
refactoring-tokens
branch
from
2ab3c99 to
ad44b05
Compare
Collaborator
|
🎉 This PR is included in version 2.0.0 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
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
5 participants
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
primitives/colors.jsand removing the legacyprimitives/brand.jssplit.@aziontech/themepackage exports with files that actually exist, and exposes semantic plugins directly from the currentsrc/tokens/semantic/*entrypoints.Validation
pnpm --filter storybook run build✅pnpm webkit:build:dtsTS5055declaration overwrite errors inpackages/webkit/src/**/*.vue.d.ts