Tu tema
Prueba aquí tu color de marca: la biblioteca deriva todos los roles de color del tema claro y del oscuro respetando el contraste. Lo que ves es la biblioteca de verdad, no una imagen.
De tu hex salen tono 219.5° y croma 0.146. La luminosidad de cada rol no se toca: por eso el contraste aguanta.
Como aparece en el documento
Forma de envío
Antes de confirmar
El plan Profesional incluye soporte prioritario y usuarios ilimitados.
ActivoPendienteRevisar
Expediente completado72 %
Los tres colores de marca
SecundarioTerciario
data-tone="secondary"Perfil completado72 %
data-tone="tertiary"Perfil completado72 %
Tu tema en un fichero
En tu proyecto el tema no se escribe a mano: se declara en amset-ui.config.js y se genera con npx amset-ui theme. Todas las claves son opcionales.
| Clave | Qué es |
|---|---|
palette | Hasta ocho colores en hexadecimal: brand, secondary, tertiary, error, success, warning, info y neutral. Cada uno se deriva: de un color salen todos sus roles (el normal, el del ratón encima, el pulsado, el suave, el texto…) conservando la luminosidad de cada uno, en claro y en oscuro. |
colors | Un rol exacto, sin derivar: colors: { dark: { ink: '#E6FAFF' } }. Para que un color que ya existe en tu producto salga tal cual. |
base | Los tokens globales que no son color: radius, border-width, font… |
components | Los mandos de cada componente: components: { button: { radius: '999px' } } escribe --amset-button-radius. La lista sale de npx amset-ui knobs. |
selector | La raíz del tema. Por defecto :root; con otro selector, una marca distinta por sección. |
out | El fichero que escribe. Por defecto amset-theme.css. |
Una clave mal escrita no pasa en silencio: el comando la nombra y dice cuáles valen. Este es un ejemplo real, con lo que escribe:
export default { palette: { brand: '#7c3aed', secondary: '#0f766e' }, colors: { dark: { ink: '#f5f3ff' } }, base: { radius: '10px' }, components: { button: { radius: '999px' } }, out: 'app/amset-theme.css',}Aviso: accent-active (light) pedia una saturacion de 0.2336 y la pantalla solo llega a 0.2222. Se ha bajado para que el color sea el mismo en todas partes.Aviso: accent-soft (light) pedia una saturacion de 0.0273 y la pantalla solo llega a 0.0234. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-hover (light) pedia una saturacion de 0.0861 y la pantalla solo llega a 0.0787. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-active (light) pedia una saturacion de 0.081 y la pantalla solo llega a 0.07. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-text (light) pedia una saturacion de 0.0861 y la pantalla solo llega a 0.0823. Se ha bajado para que el color sea el mismo en todas partes.Aviso: accent-text (dark) pedia una saturacion de 0.1363 y la pantalla solo llega a 0.117. Se ha bajado para que el color sea el mismo en todas partes.Aviso: focus (dark) pedia una saturacion de 0.1363 y la pantalla solo llega a 0.117. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-hover (dark) pedia una saturacion de 0.0861 y la pantalla solo llega a 0.0823. Se ha bajado para que el color sea el mismo en todas partes.Aviso: secondary-active (dark) pedia una saturacion de 0.081 y la pantalla solo llega a 0.0735. Se ha bajado para que el color sea el mismo en todas partes.Escrito app/amset-theme.css (3.1 kB).Importalo despues de @amset/ui/styles.css./* Generado por "npx amset-ui theme" - no editar a mano. * Va sin @layer a proposito: asi gana sobre la capa amset-ui sin !important. * Importalo DESPUES de @amset/ui/styles.css. */:root { --amset-accent: oklch(0.5 0.2466 293.01); --amset-accent-hover: oklch(0.45 0.2466 293.01); --amset-accent-active: oklch(0.4 0.2222 293.01); --amset-accent-text: oklch(0.47 0.2466 293.01); --amset-accent-soft: oklch(0.955 0.0234 293.01); --amset-accent-ink: oklch(0.985 0.0077 293.01); --amset-secondary: oklch(0.5 0.0861 186.39); --amset-secondary-hover: oklch(0.45 0.0787 186.39); --amset-secondary-active: oklch(0.4 0.07 186.39); --amset-secondary-text: oklch(0.47 0.0823 186.39); --amset-secondary-soft: oklch(0.955 0.0101 186.39); --amset-secondary-ink: oklch(0.985 0.003 186.39); --amset-focus: oklch(0.5 0.2466 293.01); --amset-radius: 10px;} [data-theme='dark'] { --amset-accent: oklch(0.52 0.2466 293.01); --amset-accent-hover: oklch(0.47 0.2466 293.01); --amset-accent-active: oklch(0.42 0.2334 293.01); --amset-accent-text: oklch(0.79 0.117 293.01); --amset-accent-soft: oklch(0.32 0.0908 293.01); --amset-accent-ink: oklch(0.985 0.0077 293.01); --amset-secondary: oklch(0.52 0.0861 186.39); --amset-secondary-hover: oklch(0.47 0.0823 186.39); --amset-secondary-active: oklch(0.42 0.0735 186.39); --amset-secondary-text: oklch(0.79 0.0506 186.39); --amset-secondary-soft: oklch(0.32 0.0329 186.39); --amset-secondary-ink: oklch(0.985 0.003 186.39); --amset-focus: oklch(0.79 0.117 293.01); --amset-ink: #f5f3ff;} @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --amset-accent: oklch(0.52 0.2466 293.01); --amset-accent-hover: oklch(0.47 0.2466 293.01); --amset-accent-active: oklch(0.42 0.2334 293.01); --amset-accent-text: oklch(0.79 0.117 293.01); --amset-accent-soft: oklch(0.32 0.0908 293.01); --amset-accent-ink: oklch(0.985 0.0077 293.01); --amset-secondary: oklch(0.52 0.0861 186.39); --amset-secondary-hover: oklch(0.47 0.0823 186.39); --amset-secondary-active: oklch(0.42 0.0735 186.39); --amset-secondary-text: oklch(0.79 0.0506 186.39); --amset-secondary-soft: oklch(0.32 0.0329 186.39); --amset-secondary-ink: oklch(0.985 0.003 186.39); --amset-focus: oklch(0.79 0.117 293.01); --amset-ink: #f5f3ff; }} @media print { :root, [data-theme='dark'], :root:not([data-theme='light']) { --amset-accent: oklch(0.5 0.2466 293.01); --amset-accent-hover: oklch(0.45 0.2466 293.01); --amset-accent-active: oklch(0.4 0.2222 293.01); --amset-accent-text: oklch(0.47 0.2466 293.01); --amset-accent-soft: oklch(0.955 0.0234 293.01); --amset-accent-ink: oklch(0.985 0.0077 293.01); --amset-secondary: oklch(0.5 0.0861 186.39); --amset-secondary-hover: oklch(0.45 0.0787 186.39); --amset-secondary-active: oklch(0.4 0.07 186.39); --amset-secondary-text: oklch(0.47 0.0823 186.39); --amset-secondary-soft: oklch(0.955 0.0101 186.39); --amset-secondary-ink: oklch(0.985 0.003 186.39); --amset-focus: oklch(0.5 0.2466 293.01); }} .amset-button { --amset-button-radius: 999px;}Dónde va el CSS generado
Se importa después de la biblioteca. Va sin @layer a propósito: así gana a la capa amset-ui sin un solo !important. Y los mandos se escriben sobre el selector de cada componente, no en :root, porque la hoja de cada componente declara su mando dentro de su propia regla.
/* El CSS global: primero la biblioteca, después tu tema */@import '@amset/ui/styles/base.css';@import './amset-theme.css';Tres colores de marca
Además del acento (brand) hay un segundo y un tercer color, secondary y tertiary, con sus pares de contraste medidos en claro y en oscuro. Los componentes con tone los aceptan directamente; los que no lo tienen (casillas, interruptores, deslizadores, pestañas, pasos, el calendario, el aro de foco) los toman de data-tone en el propio componente o en cualquier contenedor.
<Button tone="secondary">Segundo color</Button> <section data-tone="tertiary"> {/* Casillas, interruptores, pestañas y el aro de foco toman el tercer color */}</section>Los mismos tokens en Figma
El repositorio de la biblioteca trae un plugin de Figma que mete los tokens como Variables con sus dos modos, claro y oscuro. Solo los tokens: no hay un kit de componentes.
Qué exporta el plugin y qué no.