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.

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
.btn-lg

Ancho completo

.btn-full

Inputs

Tipos básicos

.input
type="email"
type="password"
type="number"

Estados

Este campo tiene un error
.input-error
Campo válido
.input-success
Revisa este campo
.input-warning
input[disabled]

Checkboxes

.checkbox
input[checked]
input[disabled]

Radios

.checkbox-radio

Switches / Toggles

Checkbox-item-2

.checkbox-item-2
input[checked]
input[disabled]
.is-error