Plataformas

O CSS que as edições React e Angular importam é uma das saídas do @gremorie/tokens. Os tokens vivem como JSON W3C DTCG 2025.10, e o mesmo build os escreve para cada plataforma que não lê CSS.

Toda saída cobre os mesmos sete temas: Default, Claude, ChatGPT, Gemini, Perplexity, Mistral e Purple, o tema violeta adaptado do preset Purple do Fumadocs.

TypeScript e React Native

import { themes } from '@gremorie/tokens';

const { colors, radius } = themes.purple.dark;
const style = {
  backgroundColor: colors.background.hex,
  color: colors.foreground.hex,
  borderRadius: radius.lg,
};

Os nomes das cores são os tokens semânticos em camelCase: --primary-foreground vira primaryForeground. Cada cor traz hex (sRGB) e oklch (o valor da fonte). O radius vem em pixels. Além de themes, o index.js e o index.d.ts exportam themeNames, m3Roles (os 48 papéis do Material 3 na ordem do Compose), m3Sources (a origem de cada papel) e version. O tokens.json tem os mesmos dados para ferramentas que leem JSON.

O Node roda módulos ES e só lê JSON com um atributo de import, então importe o tokens.json com with { type: 'json' } (os bundlers aceitam com ou sem):

import tokens from '@gremorie/tokens/tokens.json' with { type: 'json' };

O TypeScript só resolve os subpath exports do pacote (tokens.json, compose/*, swift/*) com moduleResolution em node16, nodenext ou bundler; importar o JSON também pede resolveJsonModule.

Jetpack Compose

Copie GremorieColorSchemes.kt (pacote com.gremorie.tokens) para o seu módulo e passe um esquema ao MaterialTheme:

MaterialTheme(colorScheme = GremorieColorSchemes.of("purple", dark = isSystemInDarkTheme())) {
    App()
}

Cada esquema preenche os 48 papéis do ColorScheme atual do Compose. Veja em Material 3 de onde vem cada papel.

SwiftUI

let colors = GremorieTheme.purple.colors(dark: colorScheme == .dark)
Text("Olá").foregroundStyle(colors.foreground).background(colors.background)

Gamut de cor

Os primitivos são OKLCH, e algumas cores do Tailwind v4 ficam um pouco fora do sRGB. Hex, Kotlin e Swift só carregam sRGB, então essas cores são mapeadas para dentro do gamut pelo algoritmo do CSS Color 4: o croma cai com luminosidade e matiz fixas até a cor caber, e ela continua reconhecível. O CSS mantém o OKLCH original, e telas de gamut amplo continuam recebendo a cor inteira.

Editando tokens

Toda saída é gerada, então nunca edite styles/ nem dist/ à mão. Edite o JSON DTCG em packages/tokens/tokens/ (ou use o editor visual em apps/tokens) e rode nx build tokens:

Todas as saídas, CSS incluído, são regeneradas. Um teste mantém o CSS igual aos valores do 0.8.0, a menos que a mudança esteja listada, com o motivo, em reference/intentional-changes.json.