Sistema de Theming Limited

Limited Theme

¿Dónde se customiza el tema?

Limited se construye en dos capas sobre holygrailcss:

1. Tokens base — config.json define la paleta, espaciados y tipografía compartidos. npm run build regenera dist/output.css.

2. Overrides del tema — themes/limited/theme.json declara los metadatos y overrides (paleta dorada, Neutrif serif). themes/limited/_variables.css los materializa como CSS custom properties y mapea las variables de componente (ej. --btn-primary-bg: var(--hg-color-primary)).

themes/limited/theme.css es el punto de entrada: importa todos los módulos del tema. Las variables tipográficas (--hg-typo-font-family-*) se redefinen para aplicar Neutrif a titulares y texto corrido.

limited · v1.0.0 · holygrailcss

Limited

Tema de lujo cálido con paleta dorada, bronces y crema, y tipografía 100% serif: Neutrif tanto en titulares como en texto corrido. Redefine los colores semánticos sobre la base holygrailcss, manteniendo los componentVars mapeados a los tokens --hg-color-* para heredar automáticamente la paleta del tema.

Variables del tema

Definidas en themes/limited/theme.json. La fuente del CSS sigue siendo themes/limited/_variables.css; este JSON sirve como manifiesto del tema y para que la demo muestre tablas siempre coherentes con sus tokens.

Colores semánticos (19)

--hg-color-orange

#e96516

--hg-color-mustard

#FFE693

--hg-color-primarytema

#1D1D1D

--hg-color-errortema

#9B2A1E

--hg-color-infotema

#5B7FA1

--hg-color-successtema

#7A8D5F

--hg-color-warningtema

#D4A84B

--hg-color-feeltema

#A38A6B

--hg-color-feel-darktema

#7A6346

--hg-color-silver

#87888D

--hg-color-gold

#A38A6B

--hg-color-platinum

#5B7FA1

--hg-color-solar

#e4f222

--hg-color-solar-light

#f5ff78

--hg-color-smolder

#17332d

--hg-color-blaze

#e96516

--hg-color-spring

#5683d2

--hg-color-spring-light

#e4ebf6

--hg-color-specialtema

#B99D6B

Componente: radio (4)

--radio-bg

var(--hg-color-white)

--radio-border

var(--hg-color-middle-grey)

--radio-checked-bg

var(--hg-color-feel-dark)

--radio-checked-border

var(--hg-color-feel-dark)

Componente: btn (21)

--btn-primary-bg

var(--hg-color-primary)

--btn-primary-color

var(--hg-color-white)

--btn-primary-hover-bg

var(--hg-color-feel-dark)

--btn-secondary-bg

var(--hg-color-feel)

--btn-secondary-color

var(--hg-color-white)

--btn-secondary-hover-bg

var(--hg-color-feel-dark)

--btn-outline-border

var(--hg-color-feel-dark)

--btn-outline-color

var(--hg-color-feel-dark)

--btn-outline-hover-bg

var(--hg-color-feel-dark)

--btn-outline-hover-color

var(--hg-color-white)

--btn-ghost-color

var(--hg-color-primary)

--btn-ghost-hover-bg

var(--hg-color-bg-cream)

--btn-feel-bg

var(--hg-color-feel)

--btn-feel-color

var(--hg-color-white)

--btn-feel-hover-bg

var(--hg-color-feel-dark)

--btn-padding-x-sm

var(--hg-spacing-12)

--btn-padding-y-sm

var(--hg-spacing-8)

--btn-padding-x-md

var(--hg-spacing-16)

--btn-padding-y-md

var(--hg-spacing-12)

--btn-padding-x-lg

var(--hg-spacing-24)

--btn-padding-y-lg

var(--hg-spacing-16)

Componente: form-group (1)

--form-group-gap

var(--hg-spacing-16)

Design tokens (4)

--border-radius

0

--border-width

1px

--border-style

solid

--transition

all 0.3s ease

Componente: input (11)

--input-border

var(--hg-color-middle-grey)

--input-border-focus

var(--hg-color-feel-dark)

--input-bg

var(--hg-color-white)

--input-color

var(--hg-color-primary)

--input-placeholder

var(--hg-color-middle-grey)

--input-error-border

var(--hg-color-error)

--input-success-border

var(--hg-color-success)

--input-warning-border

var(--hg-color-warning)

--input-padding-x

var(--hg-spacing-16)

--input-padding-y

var(--hg-spacing-12)

--input-gap

var(--hg-spacing-8)

Componente: label (2)

--label-color

var(--hg-color-primary)

--label-required

var(--hg-color-error)

Componente: checkbox (4)

--checkbox-bg

var(--hg-color-white)

--checkbox-border

var(--hg-color-middle-grey)

--checkbox-checked-bg

var(--hg-color-feel-dark)

--checkbox-checked-border

var(--hg-color-feel-dark)

Componente: switch (3)

--switch-bg

var(--hg-color-middle-grey)

--switch-active-bg

var(--hg-color-feel)

--switch-thumb

var(--hg-color-white)

Tipografía

Cada fila usa la clase real generada en dist/output.css a partir de config.json → typo. La columna Preview aplica la clase tal cual, así puedes comparar el valor numérico con el render en vivo.

Preview	Clase	Font family	Weight	Mobile	Desktop	Line height	Letter spacing	Text transform
Aa Bb Cc 123	`.headline-xs`	`primary-bold` "neutrif-bold", Georgia, "Times New Roman", serif	600	20px	24px	24px / 28px	0	—
Aa Bb Cc 123	`.headline-s`	`primary-bold` "neutrif-bold", Georgia, "Times New Roman", serif	600	22px	28px	26px / 32px	0	—
Aa Bb Cc 123	`.headline-m`	`primary-bold` "neutrif-bold", Georgia, "Times New Roman", serif	600	28px	40px	32px / 42px	-0.005em	—
Aa Bb Cc 123	`.headline-l`	`primary-bold` "neutrif-bold", Georgia, "Times New Roman", serif	600	34px	48px	38px / 50px	-0.01em	—
Aa Bb Cc 123	`.headline-xl`	`primary-bold` "neutrif-bold", Georgia, "Times New Roman", serif	700	40px	64px	42px / 64px	-0.01em	—
Aa Bb Cc 123	`.body-xs`	`primary-light` "neutrif-regular", Georgia, "Times New Roman", serif	400	12px	13px	18px / 19px	0	—
Aa Bb Cc 123	`.body-s`	`primary-light` "neutrif-regular", Georgia, "Times New Roman", serif	400	14px	14px	20px	0	—
Aa Bb Cc 123	`.body-m`	`primary-light` "neutrif-regular", Georgia, "Times New Roman", serif	400	15px	16px	21px / 22px	0	—
Aa Bb Cc 123	`.body-l`	`primary-light` "neutrif-regular", Georgia, "Times New Roman", serif	400	17px	18px	23px / 24px	0	—
Aa Bb Cc 123	`.body-xl`	`primary-light` "neutrif-regular", Georgia, "Times New Roman", serif	400	18px	20px	22px / 26px	0	—

Botones

Variantes

.btn .btn-primary

.btn .btn-secondary

.btn .btn-tertiary

.btn .btn-label-m

.btn .btn-link

.btn .btn-badge

.btn[disabled]

Tamaños

.btn-sm

.btn-lg

Ancho completo

.btn-full

Inputs

Tipos básicos

Texto

.input

type="email"

Contraseña

type="password"

Número

type="number"

Estados

Error

Este campo tiene un error

.input-error

Success

Campo válido

.input-success

Warning

Revisa este campo

.input-warning

Disabled

input[disabled]

Checkboxes

Checkbox sin marcar

.checkbox

Checkbox marcado

input[checked]

Checkbox disabled

input[disabled]

Radios

checkbox-radio

.checkbox-radio

Switches / Toggles

Checkbox-item-2

checkbox-item-2

.checkbox-item-2

checkbox-item-2 activado

input[checked]

checkbox-item-2 disabled

input[disabled]

checkbox-item-2 error

.is-error