Tokens de diseño

src/lib/appearance.ts contiene la configuración pura de apariencia. El generador usa scripts/lib/appearance-tokens.mjs para actualizar colores, paletas, materiales, efectos y radios en tokens/aureform.tokens.json y src/styles/tokens.css, incluidos --af-control-color-1 a --af-control-color-4 para controles con gradiente. Los colores semánticos describen una función; los primitivos, un valor. Los conteos vienen de la salida generada. Personaliza la configuración de source o los colores del estudio.

Paletas, materiales y tipografía

Elige Aurora, Violet, Ocean, Mint, Ember o Rose en claro u oscuro. Aurora es la opción inicial, con Manrope para la interfaz moderna; Instrument Serif es una alternativa editorial para títulos. Cada configuración resuelve 33 shades: 11 pasos para cada color primario, secundario y terciario. Los materiales son flat, elevated, glass y gradient.

Profundidad con intención

Las sombras suaves, los gradientes, el cristal y hover comparten tokens de apariencia. Card acepta flat, elevated, glass o gradient mediante la prop aditiva appearance. Button y Badge aceptan solid, soft, outline, glass o gradient junto con sus props variant existentes. Button también acepta shape="rounded", "pill" o "square" con sus controles de tamaño, carga y deshabilitado.

Un ejemplo completo de apariencia

Guárdalo como componente cliente en un proyecto con los estilos globales y fuentes del kit, como el starter de la CLI. AppearanceScope aísla la configuración Ocean; el botón cambia claro/oscuro localmente sin alterar el resto de la aplicación.

"use client";

import { useState } from "react";
import { AppearanceScope } from "@/components/appearance-provider";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card, CardHeader, CardTitle, CardContent,
} from "@/components/ui/card";
import { createAppearance } from "@/lib/appearance";

export default function AppearanceExample() {
  const [appearance, setAppearance] = useState(
    () => createAppearance("ocean", "light"),
  );

  return (
    <AppearanceScope appearance={appearance} className="p-6">
      <Card appearance={appearance.material}>
        <CardHeader>
          <Badge appearance="soft">{"Paleta Ocean"}</Badge>
          <CardTitle>{"Tu paleta, tu superficie"}</CardTitle>
        </CardHeader>
        <CardContent>
          <Button
            appearance="gradient"
            onClick={() => setAppearance((current) => ({
              ...current,
              theme: current.theme === "light" ? "dark" : "light",
            }))}
          >
            {"Cambiar claro / oscuro"}
          </Button>
        </CardContent>
      </Card>
    </AppearanceScope>
  );
}

Un ritmo cuidado

Elige movimiento desactivado, suave o expresivo. GSAP añade entradas finitas y Lenis suaviza la landing con mouse; el espacio de trabajo conserva su desplazamiento nativo. El modo desactivado y la preferencia de movimiento reducido del sistema detienen el movimiento decorativo. El contenido permanece visible antes de cargar JavaScript.

import { MotionSystem } from "@/components/motion-system";

<MotionSystem smoothScroll>
  <h1 data-motion="intro">A good beginning.</h1>
  <section data-motion="reveal">Always-visible content</section>
</MotionSystem>

// Install the reusable runtime:
// node bin/aureform.mjs add motion-system --cwd ../my-product

Cambia la base y regenera

# Customize palettePresets / createAppearance in src/lib/appearance.ts
pnpm tokens
pnpm registry
# Generated: tokens/aureform.tokens.json and src/styles/tokens.css
# pnpm tokens uses Node --experimental-strip-types.
# Review matching Figma variables before releasing.

El espaciado sigue un ritmo de 4 px. El radio de apariencia se ajusta entre 0 y 24 px; el valor inicial actual de 16 px resuelve los alias pequeño/mediano/grande/extra grande a 6.4/10.4/16/16 px. Los valores siguen la configuración. Personaliza colores en src/lib/appearance.ts o en el estudio. pnpm tokens sobrescribe los cambios al JSON generado.

Estudio, presets y exportaciones

En el estudio visual, elige una paleta, edita sus colores y material, y guarda, aplica o elimina un preset con nombre. Los ajustes y presets permanecen en tu navegador. Exporta JSON para una configuración completa, CSS para variables resueltas o React para un ejemplo completo configurado. Importa un JSON de apariencia exportado o pega su contenido; se valida antes de aplicarlo.

Para un tema personalizado en otro proyecto, carga el CSS exportado del estudio después de los estilos del kit. Si AppearanceProvider controla ese proyecto, aplica la configuración JSON mediante el proveedor: sus valores resueltos controlan el documento. El JSON de apariencia usa el esquema versión 1, independiente de la versión del kit.

Vincula la función al componente

Prefiere clases semánticas y props de apariencia a colores fijos. El código incluye movimiento reducido, foco visible y licencias de las fuentes. Revisa el contraste en ambos temas al cambiar colores.