Tokens de diseño

Qué cambia un token

NeuTokens expone 28 propiedades de tema. NeuThemeComponent también genera 45 variables CSS a partir del tema resuelto. Las propiedades y las variables permiten utilizar las mismas decisiones de diseño; no son catálogos independientes. Utiliza Partial<NeuTokens> para personalizar solo las propiedades que necesites.

Los tokens afectan a los componentes y estilos que los utilizan. No sobrescriben universalmente todas las primitivas nativas. Por ejemplo, spacing controla el padding de Card y tus estilos que usan --neu-spacing; no sustituye todos los gaps y paddings fijos de la biblioteca.

Tokens de color: valores predeterminados exactos

Todas las propiedades de color son strings. Estos son los valores claros y oscuros distribuidos con Neural Native 0.1.0. Personaliza conjuntamente las parejas semánticas y revisa el contraste del texto en ambos modos.

Las variables de estilo utilizan el prefijo --neu-: --neu-accent, --neu-surface, --neu-canvas, --neu-text, --neu-muted, --neu-border, --neu-tonal, --neu-danger, --neu-success, --neu-info y --neu-warning. La propiedad onAccent pasa a llamarse --neu-on-accent.

Texto semántico, superficies y visores de imágenes

Estas propiedades opcionales de NeuTokens también forman parte de la API pública del tema. Los objetos predeterminados proporcionan los valores de superficies y del visor de imágenes. Si se omite una personalización de texto semántico, la biblioteca resuelve un color de texto legible para ese tono.

Dimensiones, tipografía y movimiento

Estas cuatro propiedades son números. Pasa radius: 16, no radius: "16px". El layout nativo resuelve px según las unidades del framework; no los interpretes como píxeles físicos de la pantalla.

El tema deriva de fontSize los tamaños e interlineados de ayudas, etiquetas, filas, encabezados y métricas; los componentes utilizan esas variables donde corresponde. No selecciona una familia de fuente ni sustituye todos los tamaños fijos. Comprueba la ampliación del texto del sistema. El token duration no desactiva todas las animaciones: el movimiento reducido también depende del componente y del framework.

Referencia CSS completa del tema

Las siguientes variables se generan en neu-theme. Utilízalas en tus estilos nativos para compartir su paleta y escala. Para cambiar el tema de forma coherente, pasa las propiedades correspondientes de NeuTokens mediante [tokens]; una personalización CSS local no actualiza el valor inyectado de NEU_THEME ni los componentes que calculan sus colores a partir de él.

En las variables numéricas, la columna de origen indica el multiplicador y la unidad resultante. Los radios, tamaños, interlineados y espacios utilizan px; duration utiliza ms. Las variables de texto semántico pueden calcularse a partir del tema en lugar de copiar directamente un color de acento.

Conserva los tokens personalizados en un archivo tipado

Crea src/app/theme-tokens.ts y exporta las personalizaciones que utilizará el tema raíz. El operador satisfies comprueba nombres y tipos sin perder la inferencia de TypeScript. Este ejemplo distingue el texto de controles, las superficies decorativas y el fondo de imágenes a pantalla completa.

import type { NeuTokens } from '@neural-ui/native/foundation';

export const brandLight = {
  accent: '#3B5BDB',
  accentText: '#3048A5',
  onAccent: '#FFFFFF',
  tonal: '#EBEFFF',
  surfaceBorder: '#D8DEEB',
  divider: '#E8ECF3',
  surfaceSecondary: '#F0F3FA',
  mediaCanvas: '#101828',
  mediaText: '#F1F5F9',
  mediaBarStyle: 'light',
  radius: 16,
} satisfies Partial<NeuTokens>;

export const brandDark = {
  accent: '#B8C6FF',
  accentText: '#C6D0FF',
  onAccent: '#172955',
  tonal: '#293756',
  surfaceBorder: '#3B4863',
  divider: '#33405A',
  surfaceSecondary: '#263249',
  mediaCanvas: '#101828',
  mediaText: '#F1F5F9',
  mediaBarStyle: 'light',
  radius: 16,
} satisfies Partial<NeuTokens>;

Los cuatro colores opcionales de texto semántico son personalizaciones explícitas: si los proporcionas, se utilizan tal cual. Comprueba su contraste con tus superficies. Los valores de mediaBarStyle son light y dark en ambos idiomas; describen el contenido de las barras del sistema, no el tema de la aplicación.

Si necesitas una paleta completa, combina el valor predeterminado exportado en lugar de mutarlo. Los valores predeterminados son objetos readonly congelados. El siguiente src/app/complete-tokens.ts es una alternativa a los objetos parciales anteriores, útil cuando un servicio necesita un valor NeuTokens completo.

import {
  NEU_LIGHT_TOKENS,
  NEU_DARK_TOKENS,
  type NeuTokens,
} from '@neural-ui/native/foundation';

export const completeLight: Readonly<NeuTokens> = {
  ...NEU_LIGHT_TOKENS,
  accent: '#3B5BDB',
  onAccent: '#FFFFFF',
};

export const completeDark: Readonly<NeuTokens> = {
  ...NEU_DARK_TOKENS,
  accent: '#B8C6FF',
  onAccent: '#172955',
};

Utiliza tokens en tus componentes nativos

Crea src/app/summary.component.ts y coloca app-summary dentro del neu-theme raíz. Las variables --neu-* permiten que los estilos nativos compartan la paleta. Para propiedades calculadas en TypeScript o enlaces de estilo, inyecta NEU_THEME y lee su signal. Un valor computed sigue los cambios del tema sin guardar una copia desactualizada.

import { Component, computed, inject } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NEU_THEME } from '@neural-ui/native/foundation';

@Component({
  selector: 'app-summary',
  imports: [Text, View],
  template: `
    <view class="panel" [style.borderColor]="borderColor()">
      <text class="title">Your workspace</text>
      <text class="description">Shared with your team</text>
    </view>
  `,
  styles: `
    .panel {
      padding: var(--neu-space-20);
      gap: var(--neu-space-8);
      background-color: var(--neu-surface);
      border-width: 1px;
      border-radius: var(--neu-surface-radius);
    }
    .title { color: var(--neu-text); font-size: var(--neu-heading-size); line-height: var(--neu-heading-line); font-weight: 600; }
    .description { color: var(--neu-muted); font-size: var(--neu-caption-size); line-height: var(--neu-caption-line); }
  `,
})
export class SummaryComponent {
  private readonly theme = inject(NEU_THEME);
  readonly borderColor = computed(() => this.theme().surfaceBorder ?? this.theme().border);
}

Este ejemplo necesita un tema antecesor porque inyecta NEU_THEME directamente. Conserva los estilos de tokens nativos dentro de la app o playground nativo. La documentación utiliza Neural UI v2 y su propio tema web; no apliques sus estilos web al preview Native.