Theme
Theme publica un tema para su subárbol. No dibuja nada: es un objeto de TypeScript en un contexto de Svelte, no variables CSS, y una superficie es un material de Glass, no un color.
Uso
<script lang="ts">
import { Card, GlassButton, Theme, defineTheme } from 'essentia-ui'
const dark = defineTheme({
material: { primary: { preset: 'dark' }, surface: { preset: 'dark' } },
})
</script>
<Theme theme={dark}>
<Card width={320} height={200} />
<GlassButton label="Guardar" />
</Theme>defineTheme pisa campo por campo dentro de cada namespace, y un material se reemplaza entero. useTheme() devuelve el tema más cercano, para el texto suelto de la app. Sin Theme, los componentes usan defaultTheme.
Costo
Cero por frame en reposo. Cambiar de tema son escrituras de uniforms en un frame, sin recompilar shaders.
Referencia de props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
theme | EssentiaTheme | requerido | Tema del subárbol. Para pisar solo algunos tokens, armalo con defineTheme. |
children | Snippet | — |
Tokens
| Miembro | Tipo | Default | Descripción |
|---|---|---|---|
color | { /** Texto principal. */ foreground: string /** Texto secundario. */ mutedForeground: string /** Texto terciario y metadata. */ subtleForeground: string /** Texto sobre `material.primary`. */ primaryForeground: string /** Placeholder de `<Input>`. */ placeholderForeground: string /** Links y acciones de texto. */ accent: string /** Tinte del vidrio de un `<Input invalid>`. */ destructive: string /** Texto de un control deshabilitado. */ disabledForeground: string /** Caret y subrayado de composición de `<Input>`. */ caret: string /** Selección de texto de `<Input>`, y el `caret-color` nativo con foco táctil. */ selection: string } | — | Colores CSS opacos en sRGB: hex, rgb() o hsl() (no oklch, three no lo entiende). |
material | { /** `<GlassButton variant="primary">`. */ primary: GlassMaterial /** `<GlassButton variant="secondary">`. */ secondary: GlassMaterial /** `<GlassButton variant="ghost">`. */ ghost: GlassMaterial /** Paneles: `<Card>`. */ surface: GlassMaterial /** Fondo de `<Input>`. */ field: GlassMaterial } | — | |
radius | { sm: number; md: number; full: 'full' } | — | Radios en píxeles CSS. md es el radio por defecto de <Card>. |
typography | { /** URL de la fuente (troika carga una sola vez por URL). @default fuente del sistema de troika */ font?: string /** Tamaños de fuente en píxeles CSS. */ size: { xs: number; sm: number; base: number; lg: number } /** Alto de línea como múltiplo del tamaño de fuente. */ lineHeight: number } | — | |
state | { /** Multiplicador de `tintOpacity` de un control deshabilitado [0..1]. */ disabledTintFactor: number /** Opacidad del rect de selección [0..1]. */ selectionOpacity: number /** `tintOpacity` del tinte `destructive` con `invalid` [0..1]. */ invalidTintOpacity: number /** Cuánto sube el `rim` del vidrio con foco visible. */ focusRimBoost: number /** Cuánto sube el `brightness` del vidrio con foco visible. */ focusBrightnessBoost: number } | — |