Empezar

Tokens y uso

Todos los valores de diseño viven en un único fichero TypeScript. De él salen las variables CSS y el tema de Tailwind para la web y el tema nativo para la app Expo.

Arquitectura#

Tres capas: palette (primitivos, no usar directamente), semantic (roles por tema: claro y oscuro) y tokens de componente/dominio (alturas, tipos de lugar, servicios).

text

packages/
  tokens/   src/index.ts  → fuente única (TS)
            src/build-css.ts → dist/tokens.css (Tailwind v4 @theme + variables --pn-*)
  ui/       componentes React web (Radix + Tailwind) — los de esta web
apps/
  web/      Next.js — escritorio + vista app
  mobile/   Expo — importa @pernocta/tokens directamente
  design/   este sitio

Web (Next.js + Tailwind v4)#

Importa la hoja de estilos y declara la ruta de los componentes para que Tailwind genere sus clases. Usa siempre clases semánticas: cambian solas con el tema.

css

@import "tailwindcss";
@import "@pernocta/ui/styles.css";
@source "../../../packages/ui/src";

tsx

import { Button, PlaceCard } from "@pernocta/ui";

<div className="bg-surface text-fg border border-border rounded-lg shadow-md p-6">
  <p className="text-body-sm text-fg-muted">Clases semánticas</p>
  <Button variant="primary">Reservar sitio</Button>
</div>

App (Expo / React Native)#

tsx

import { semantic, typography, radius, nativeShadow } from "@pernocta/tokens";

const t = semantic[colorScheme]; "c">// "light" | "dark"
const styles = StyleSheet.create({
  card: { backgroundColor: t.surface, borderRadius: radius.lg, ...nativeShadow.md },
  title: { color: t.fg, fontSize: typography.h4.size, lineHeight: typography.h4.line },
});

Reglas#

Nunca escribas un color hexadecimal en un componente

Si falta un rol, añádelo a semantic en los dos temas y regenera con npm run tokens.

Descargas#

tokens.json tokens.css