@tervior-tech/la-voz-de-ellas-design-system

Tokens de design (cores, espaçamento, tipografia, sombras, motion) e ThemeProvider/useTheme para a app La voz de ellas (React Native + Expo).

Instalação

pnpm add @tervior-tech/la-voz-de-ellas-design-system

Peer dependencies: react >= 18.2, react-native >= 0.74.

Uso

// App.tsx
import { ThemeProvider } from '@tervior-tech/la-voz-de-ellas-design-system';

export default function App() {
  return (
    <ThemeProvider brand="la-voz-de-ellas" mode="system">
      {/* árvore da app */}
    </ThemeProvider>
  );
}

// Dentro de um componente
import { View, Text } from 'react-native';
import { useTheme } from '@tervior-tech/la-voz-de-ellas-design-system';

export function Card({ title }: { title: string }) {
  const { colors, spacing, radius, shadow, typography } = useTheme();
  return (
    <View
      style={{
        backgroundColor: colors.card,
        padding: spacing[4],
        borderRadius: radius.lg,
        ...shadow.sm,
      }}
    >
      <Text style={{ color: colors.cardForeground, ...typography.body }}>
        {title}
      </Text>
    </View>
  );
}

Tokens

• colors — paleta resolvida para o mode ativo (light/dark). Inclui pares foreground (ex: primary + primaryForeground).
• spacing — escala 4/8pt: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 (em pt/dp).
• radius — none, sm, md, lg, xl, xxl, full.
• shadow — sombras com formato dual (iOS + Android elevation).
• motion — durações e curvas de easing.
• typography — escala completa (display, h2, h3, h4, bodyLg, body, caption, label) com fontFamily por plataforma.

Scripts

pnpm build              # gera dist/tokens.json + bundles cjs/esm + .d.ts
pnpm contrast-check     # valida WCAG 2.2 AA em todos os pares
pnpm typecheck          # tsc --noEmit

contrast-check aceita --brand <id> e --mode light|dark para escopo.

Conformidade

• WCAG 2.2 AA validado no CI via contrast-check.
• Pares obrigatórios definidos em src/contrast/pairs.ts.

Versionamento

Changesets na raiz do monorepo. Para qualquer mudança em tokens, criar um changeset:

pnpm changeset

Tipos de bump:

• patch — ajuste de valor dentro do mesmo brand
• minor — novo token ou novo brand
• major — token removido/renomeado, mudança de estrutura de exports, mudança de assinatura de ThemeProvider ou useTheme

Histórico da paleta

A paleta partiu do output do Figma Make (PRD §12) e foi ajustada em v0.1 para zerar 2 falhas WCAG 2.2 AA no light mode detectadas pelo contrast-check:

| Token | Valor original (Figma) | Valor v0.1 | Ratio anterior | Ratio v0.1 | |---|---|---|---|---| | primary (light) | #4A90E2 | #3577C6 | 3.29 : 1 | 4.56 : 1 | | warning (light) | #B8721A | #945A14 | 3.85 : 1 | 5.63 : 1 | | info (light) | #4A90E2 | #3577C6 | — | (espelha primary) | | ring (light) | #4A90E2 | #3577C6 | — | (espelha primary) |

Dark mode permanece inalterado (100% AA já no original).

Atual: 28/28 pares passam WCAG 2.2 AA. Ainda assim os valores finais dependem de revisão visual do Design Lead antes de bump para v1.0.0.

Documentação completa

Ver docs/management/LaVozDeEllas_PRD_design-system_v1.0.md.