Skip to content

docs(theme): rewrite tokens README to match build-tokens pipeline#562

Merged
isaquebock merged 1 commit into
mainfrom
docs/theme-tokens-readme
May 20, 2026
Merged

docs(theme): rewrite tokens README to match build-tokens pipeline#562
isaquebock merged 1 commit into
mainfrom
docs/theme-tokens-readme

Conversation

@isaquebock
Copy link
Copy Markdown
Collaborator

Summary

O packages/theme/src/tokens/README.md ainda descrevia a pipeline antiga (compilação direta no browser via compile-primitives + compile-theme) e a árvore de arquivos divergiu da realidade. Este PR realinha a doc com o estado atual.

O que mudou

Pipeline real

  • Documenta que o entrypoint principal de build hoje é scripts/build-tokens.mjs, que emite dist/v3/ (preset Tailwind + globals.css) e dist/v4/ (CSS-first com @theme).
  • compile-primitives.js / compile-theme.js / resolve.js / css-vars.js / refs.js são listados como blocos de construção usados pelo build-tokens.mjs, não mais como APIs de runtime.

Árvore de arquivos

Corrigida para refletir o estado atual:

  • tokens/primitives/animations/{animate.js,ease.js} (não constava).
  • typography/ agora inclui font-weight, leading, tracking.
  • effects/ agora inclui drop-shadow, inset-shadow, perspective, shadow.
  • shape/ inclui aspect-video.js e shape.js.
  • Palette neutral removida da listagem (foi excluída em bcf7cb4gray é o sucessor).
  • tokens/semantic/ documentada com as tabelas responsivas *.data.js consumidas pelo build-tokens.mjs.

Como consumir

Nova seção explicando:

  • Tailwind v3 → presets: [import '@aziontech/theme/tailwind-preset/v3'] + @import '@aziontech/theme/v3/globals.css'.
  • Tailwind v4 → só @import '@aziontech/theme/v4/globals.css'.
  • Acesso programático via createCssVars / cssVarsString / injectCssVars.

tokenRef

A tabela de prefixos foi atualizada para bater com o scripts/resolve.js real (inclui surfacePrimitives.surface.N, troca primitives.neutral.* por primitives.gray.*).

Theme switching

Documenta as três estratégias que o CSS emitido suporta ([data-theme=…], .dark, .azion azion-*) em vez de só duas.

Como adicionar tokens

Adicionada seção "Add a new responsive semantic token" explicando o fluxo via tokens/semantic/*.data.js, que não existia.

Test plan

  • Estrutura de arquivos conferida contra packages/theme/src/.
  • Scripts (build:tokens, build:tokens:v3, build:tokens:v4, build:css:v3) conferidos contra package.json.
  • Exports (./tailwind-preset/v3, ./v3/globals.css, ./v4/globals.css) conferidos contra package.json.
  • Prefixos de tokenRef conferidos contra src/scripts/resolve.js.

The README still described the older inject-from-browser pipeline
(compile-primitives + compile-theme as the entrypoints) and was out of
sync with the file tree. Update it to reflect:

- The package now ships dist/v3 (tailwind preset + globals.css) and
  dist/v4 (CSS-first @theme) artifacts emitted by build-tokens.mjs.
- Primitives tree includes animations/, more typography (font-weight,
  leading, tracking), more effects (drop-shadow, inset-shadow,
  perspective, shadow), and the colors palette no longer has 'neutral'
  (removed in bcf7cb4 — gray took over).
- Both tokens/theme/ and tokens/semantic/ exist; semantic includes the
  responsive *.data.js tables consumed by build-tokens.mjs.
- Documents how to consume the package in Tailwind v3 (preset +
  globals.css) and v4 (@import globals.css).
- Adds 'responsive semantic token' workflow.
- Updates tokenRef path table to match the resolver in scripts/resolve.js
  (surfacePrimitives entry; primitives.gray references).
- Lists tests/tokens.html alongside primitives.html and theme.html.
- Describes the three theme-switching strategies the emitted CSS
  supports (data-theme attr, .dark class, azion-* namespace).
@isaquebock isaquebock requested a review from a team as a code owner May 20, 2026 20:32
@isaquebock isaquebock merged commit ea27679 into main May 20, 2026
11 checks passed
@robsongajunior
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

3 participants