Sistema de Theming Black&Yellow

Black&Yellow Theme

¿Dónde se customiza el tema?

Black&Yellow 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/black-yellow/theme.json declara los metadatos y overrides del tema. themes/black-yellow/_variables.css los materializa como CSS custom properties y mapea las variables de componente (ej. --btn-primary-bg: var(--hg-color-primary)).

themes/black-yellow/theme.css es el punto de entrada: importa todos los módulos (_buttons.css, _inputs.css, etc.) que consumen esas variables.

black-yellow · v1.0.0 · holygrailcss

Black&Yellow

Tema con CTA solar yellow (#e4f222) sobre tinta casi-negra y grises cálidos. Inspiración: la paleta y geometría de ramp.com — botón primario amarillo solar, esquinas cuadradas, tipografía sans-serif geométrica. Las variables del tema referencian tokens --hg-color-* (incluidos los nuevos --hg-color-solar y --hg-color-solar-light) para mantener coherencia con el design system global.

Variables del tema

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

Colores semánticos (23)

--hg-color-orange

#e96516

--hg-color-mustard

#FFE693

--hg-color-primary

#0c0a08

--hg-color-error

#dd2d01

--hg-color-info

#5683d2

--hg-color-success

#12882C

--hg-color-warning

#ffce4e

--hg-color-feel

#fb9962

--hg-color-feel-dark

#c94c07

--hg-color-silver

#87888D

--hg-color-gold

#A38A6B

--hg-color-platinum

#5B7FA1

--hg-color-solartema

#e4f222

--hg-color-solar-lighttema

#f5ff78

--hg-color-smolder

#17332d

--hg-color-blaze

#e96516

--hg-color-spring

#5683d2

--hg-color-spring-light

#e4ebf6

--hg-color-inktema

#0c0a08

--hg-color-papertema

#ffffff

--hg-color-surfacetema

#f4f2f0

--hg-color-bordertema

#d2cecb

--hg-color-mutedtema

#6e6a68

Componente: form-group (1)

--form-group-gap

var(--hg-spacing-16)

Componente: btn (21)

--btn-primary-bg

var(--hg-color-solar)

--btn-primary-color

var(--hg-color-primary)

--btn-primary-hover-bg

var(--hg-color-solar-light)

--btn-secondary-bg

var(--hg-color-primary)

--btn-secondary-color

var(--hg-color-white)

--btn-secondary-hover-bg

var(--hg-color-grey-ultra)

--btn-outline-border

var(--hg-color-primary)

--btn-outline-color

var(--hg-color-primary)

--btn-outline-hover-bg

var(--hg-color-primary)

--btn-outline-hover-color

var(--hg-color-white)

--btn-ghost-color

var(--hg-color-primary)

--btn-ghost-hover-bg

var(--hg-color-light-grey)

--btn-feel-bg

var(--hg-color-blaze)

--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: switch (3)

--switch-bg

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

--switch-active-bg

var(--hg-color-primary)

--switch-thumb

var(--hg-color-white)

Componente: input (11)

--input-border

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

--input-border-focus

var(--hg-color-primary)

--input-bg

var(--hg-color-white)

--input-color

var(--hg-color-primary)

--input-placeholder

var(--hg-color-dark-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-primary)

--checkbox-checked-border

var(--hg-color-primary)

Componente: radio (4)

--radio-bg

var(--hg-color-white)

--radio-border

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

--radio-checked-bg

var(--hg-color-primary)

--radio-checked-border

var(--hg-color-primary)

Design tokens (4)

--border-radius

0

--border-width

1px

--border-style

solid

--transition

all 0.2s ease

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-semibold", Arial, Helvetica, sans-serif	600	20px	24px	24px / 28px	0	—
Aa Bb Cc 123	`.headline-s`	`primary-bold` "neutrif-semibold", Arial, Helvetica, sans-serif	600	22px	28px	26px / 32px	0	—
Aa Bb Cc 123	`.headline-m`	`primary-bold` "neutrif-semibold", Arial, Helvetica, sans-serif	600	28px	40px	32px / 42px	-0.005em	—
Aa Bb Cc 123	`.headline-l`	`primary-bold` "neutrif-semibold", Arial, Helvetica, sans-serif	600	34px	48px	38px / 50px	-0.01em	—
Aa Bb Cc 123	`.headline-xl`	`primary-bold` "neutrif-semibold", Arial, Helvetica, sans-serif	700	40px	64px	42px / 64px	-0.01em	—
Aa Bb Cc 123	`.body-xs`	`primary-regular` "neutrif-regular", Arial, Helvetica, sans-serif	400	12px	13px	18px / 19px	0	—
Aa Bb Cc 123	`.body-s`	`primary-regular` "neutrif-regular", Arial, Helvetica, sans-serif	400	14px	14px	20px	0	—
Aa Bb Cc 123	`.body-m`	`primary-regular` "neutrif-regular", Arial, Helvetica, sans-serif	400	15px	16px	21px / 22px	0	—
Aa Bb Cc 123	`.body-l`	`primary-regular` "neutrif-regular", Arial, Helvetica, sans-serif	400	17px	18px	23px / 24px	0	—
Aa Bb Cc 123	`.body-xl`	`primary-regular` "neutrif-regular", Arial, Helvetica, sans-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