holygrail5 1.0.19 → 1.0.21

package/themes/dutti/README.md

@@ -14,27 +14,56 @@ Sistema de componentes UI basado en las variables CSS de **HolyGrail5**. Todos l
 <link rel="stylesheet" href="themes/dutti/theme.css">
 ```
 
-**Nota**: El archivo `theme.css` importa automáticamente todos los módulos. Si solo necesitas ciertos componentes, puedes importar los archivos individuales:
+**Nota**: El archivo `theme.css` importa automáticamente todos los módulos. Los componentes (botones, inputs, checkboxes, radios, switches, labels, forms, containers, grid, icons) **no viven dentro de `themes/dutti/`**: se comparten desde `themes/_base/` y el `theme.css` hace `@import url('../_base/_buttons.css')` para cada uno. Si solo necesitas ciertos componentes, puedes importarlos directamente desde `_base/`:
 
 ```html
-<!-- Solo variables y botones -->
+<!-- Solo variables del tema y botones compartidos -->
 <link rel="stylesheet" href="themes/dutti/_variables.css">
-<link rel="stylesheet" href="themes/dutti/_buttons.css">
+<link rel="stylesheet" href="themes/_base/_buttons.css">
 ```
 
 ## 📁 Estructura de Archivos
 
-El sistema está dividido en módulos para facilitar el mantenimiento:
+La carpeta del tema solo contiene **lo que hace distinto a Dutti** — el resto se hereda de `themes/_base/`:
 
-- **`theme.css`** - Archivo principal que importa todos los módulos
-- **`_variables.css`** - Variables del tema (colores, espaciados, tipografía)
-- **`_buttons.css`** - Estilos de botones
-- **`_inputs.css`** - Estilos de inputs, selects y textareas
-- **`_labels.css`** - Estilos de labels
-- **`_checkboxes.css`** - Estilos de checkboxes
-- **`_radios.css`** - Estilos de radios
-- **`_switches.css`** - Estilos de switches/toggles
-- **`_forms.css`** - Form groups, form rows y helper text
+```
+themes/
+├── _base/                # Componentes compartidos (fuente única de verdad)
+│   ├── _buttons.css
+│   ├── _inputs.css
+│   ├── _labels.css
+│   ├── _checkboxes.css
+│   ├── _radios.css
+│   ├── _switches.css
+│   ├── _forms.css
+│   ├── _containers.css
+│   ├── objects/_grid.css
+│   └── components/_icons.css
+│
+└── dutti/
+    ├── theme.json        # Meta + tokenOverrides + componentVars + design
+    ├── _variables.css    # Overrides de --hg-color-* y mapeo de componentVars (--btn-*, --input-*, …)
+    ├── theme.css         # @import de _variables.css + @import de ../_base/*.css
+    └── demo.html         # Demo interactiva (usa placeholders HG_THEME_BLOCK y HG_TYPO_TABLE)
+```
+
+Los componentes apuntan a los componentVars (`var(--btn-primary-bg)`, `var(--input-border-focus)`, …) y esos componentVars se mapean en `_variables.css` a los tokens base `--hg-color-*`. Como todos los temas comparten `_base/`, cambiar la paleta en `_variables.css` repinta automáticamente todos los componentes sin duplicar CSS.
+
+### Sobrescribir un componente SOLO en Dutti
+
+Si Dutti necesita un componente distinto al de `_base/`:
+
+1. Copia, p. ej., `themes/_base/_inputs.css` → `themes/dutti/_inputs.css` y modifícalo.
+2. En `themes/dutti/theme.css` cambia el `@import` correspondiente:
+
+   ```css
+   /* antes */
+   @import url('../_base/_inputs.css');
+   /* después */
+   @import url('_inputs.css');
+   ```
+
+El resto de componentes sigue heredando de `_base/`.
 
 ## 🎨 Componentes Disponibles
 
@@ -234,7 +263,12 @@ Mensajes de ayuda, error, éxito o advertencia:
 
 ## 🎨 Personalización
 
-Todos los componentes utilizan variables CSS de HolyGrail5. Puedes personalizar el tema editando el archivo `config.json` de HolyGrail5 y regenerando el CSS.
+Todos los componentes utilizan variables CSS de HolyGrail5. Hay **dos niveles** de personalización:
+
+1. **Globales** — edita `config.json` de HolyGrail5 (colores base, spacing, tipografías). Afecta a todos los temas.
+2. **Por tema** — edita `themes/dutti/theme.json` o `themes/dutti/_variables.css` para overridear los tokens solo para Dutti. Esto es lo que usa, por ejemplo, el tema `limited` para cambiar toda su paleta y tipografía sin tocar `config.json`.
+
+En ambos casos, después regenera con `npm run build`.
 
 ### Variables principales
 
@@ -256,14 +290,14 @@ El sistema de theming Dutti utiliza estas variables de HolyGrail5:
 - `--hg-spacing-4`, `--hg-spacing-8`, `--hg-spacing-12`, `--hg-spacing-16`, etc.
 
 #### Tipografía
-- `--hg-typo-font-family-primary`: Fuente principal
+- `--hg-typo-font-family-primary-regular`: Fuente principal
 - `--hg-typo-font-size-*`: Tamaños de fuente
 - `--hg-typo-font-weight-*`: Pesos de fuente
 - `--hg-typo-line-height-*`: Alturas de línea
 
-### Personalizar el tema
+### Personalizar globalmente (todos los temas)
 
-Para cambiar los colores, edita `config.json`:
+Para cambiar los colores base compartidos, edita `config.json`:
 
 ```json
 {
@@ -277,13 +311,25 @@ Para cambiar los colores, edita `config.json`:
 }
 ```
 
-Luego regenera el CSS:
+### Personalizar solo Dutti
 
-```bash
-npm run generate
+Para cambiar la paleta o la tipografía únicamente del tema Dutti, edita `themes/dutti/_variables.css` y añade overrides sobre los tokens base:
+
+```css
+:root {
+  --hg-color-primary: #111;
+  --hg-color-feel: #fb9962;
+  --hg-typo-font-family-primary-regular: "Inter", sans-serif;
+}
 ```
 
-Los cambios se reflejarán automáticamente en todos los componentes del tema Dutti.
+Los componentes de `themes/_base/` consumen estas variables a través del mapeo en `componentVars`, así que se repintan automáticamente sin duplicar CSS.
+
+Luego regenera:
+
+```bash
+npm run build
+```
 
 ## 📱 Responsive
 

package/themes/dutti/_variables.css

@@ -66,7 +66,13 @@
   
   --form-group-gap: var(--hg-spacing-16);
   
-  /* Tipografía - se usan directamente las variables de HolyGrail5 */
+  /* Tipografía del tema Dutti — Suisse Intl (sans) por peso.
+     Cada peso es una font-family propia (suisse-light/regular/
+     medium/semibold) declaradas en guide-styles.css. */
+  --hg-typo-font-family-primary-light: "suisse-light", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
   
   /* Bordes y radios */
   --border-radius: 0;

package/themes/dutti/demo.html

@@ -16,26 +16,30 @@
       <h2 class="demo-title">Dutti Theme</h2>
 
       
-      <div class="demo-section-2" >
-        <h3 > ¿Dónde se customiza el tema?</h3>
-        <div> </div>
-        <p >
-          El tema Dutti se customiza en <strong>dos niveles</strong>:
+      <div class="demo-section-2">
+        <h3>¿Dónde se customiza el tema?</h3>
+        <p class="mb-16">
+          Dutti se construye en <strong>dos capas</strong> sobre HolyGrail5:
         </p>
-        <div> </div>
 
-          <div class="mb-24">
-            <strong>Variables base (HolyGrail5) :</strong> <br> Edita <code>config.json</code> en la raíz del proyecto para cambiar colores, espaciados y tipografía base. Luego ejecuta <code>npm run build</code> para regenerar <code>dist/output.css</code>.
-          </div>
-          <div class="mb-24">
-            <strong>Variables del tema (Dutti)</strong>: <br>   Edita <code>themes/dutti/_variables.css</code> para mapear las variables de HolyGrail5 a las variables específicas del tema (ej: <code>--btn-primary-bg: var(--hg-color-primary)</code>).
-          </div>
-     
+        <div class="mb-16">
+          <strong>1. Tokens base</strong> — <code>config.json</code> define la paleta, espaciados y tipografía compartidos. <code>npm run build</code> regenera <code>dist/output.css</code>.
+        </div>
+        <div class="mb-16">
+          <strong>2. Overrides del tema</strong> — <code>themes/dutti/theme.json</code> declara los metadatos y overrides del tema. <code>themes/dutti/_variables.css</code> los materializa como CSS custom properties y mapea las variables de componente (ej. <code>--btn-primary-bg: var(--hg-color-primary)</code>).
+        </div>
+
         <p class="mb-24">
-          <strong>Archivo principal:</strong> <br> <code>themes/dutti/theme.css</code> importa automáticamente todos los módulos CSS del tema. Los componentes individuales (<code>_buttons.css</code>, <code>_inputs.css</code>, etc.) usan las variables definidas en <code>_variables.css</code>.
+          <code>themes/dutti/theme.css</code> es el punto de entrada: importa todos los módulos (<code>_buttons.css</code>, <code>_inputs.css</code>, etc.) que consumen esas variables.
         </p>
       </div>
 
+      <!-- BLOQUE DEL TEMA (meta + variables) generado en build a partir de themes/<tema>/theme.json -->
+      <!-- HG_THEME_BLOCK -->
+
+      <!-- TIPOGRAFÍA (tabla generada en build a partir de config.json → typo) -->
+      <!-- HG_TYPO_TABLE -->
+
       <!-- BOTONES -->
       <section class="demo-section" id="buttons">
         <h2 class="demo-title">Botones</h2>

package/themes/dutti/theme.css

@@ -1,51 +1,29 @@
 /**
  * Sistema de Theming Dutti
  * Basado en HolyGrail5 CSS Variables
- * 
- * Este archivo importa todos los módulos del sistema de theming.
- * 
- * Componentes disponibles:
- * - Botones (primary, secondary, outline, ghost, disabled)
- * - Inputs (text, email, password, number, etc.)
- * - Checkboxes
- * - Radios
- * - Switches/Toggles
- * - Labels
- * - Form Groups
- * - Estados (error, success, warning, disabled)
+ *
+ * Los componentes (botones, inputs, checkboxes, radios, switches, labels,
+ * forms, containers, grid, icons) son compartidos desde `themes/_base/`.
+ * Para personalizar un componente SOLO en este tema, crea una copia
+ * local del fichero en `themes/dutti/` y cambia su @import aquí para
+ * que apunte a esa versión en vez de a `../_base/`.
  */
 
-/* Variables del tema */
+/* Variables del tema (colores, tipografía y mapeo de componentVars) */
 @import url('_variables.css');
 
-/* Componentes */
-/* @import url('_buttons.css'); */
-/* @import url('_inputs.css'); */
-/* @import url('_labels.css'); */
-/* @import url('_checkboxes.css');*/
-/* @import url('_radios.css'); */
-/* @import url('_switches.css'); */
-/* @import url('_forms.css'); */
-
-/** ITCSS esctructurado 
-  * basado en HolyGrail5 
-  * para las nuevas necesidades 
-  * del tema Dutti 
-  */
-
-/* Settings - Variables y configuración */
-
-/* Tools - Mixins y funciones */
-
-/* Generic - Resets, normalize */
-
-/* Elements - Estilos de elementos HTML (h1, p, a) */
-
-/* Objects - Patrones de layout */
-@import url('./_containers.css');
-/* @import url('./objects/_grid.css');
-
-/* Components - Componentes de UI específicos */
-/* @import url('./components/_icons.css');
-
-/* Utilities - Helpers y utilidades */
+/* Componentes compartidos ─ themes/_base/ */
+@import url('../_base/_buttons.css');
+@import url('../_base/_inputs.css');
+@import url('../_base/_labels.css');
+@import url('../_base/_checkboxes.css');
+@import url('../_base/_radios.css');
+@import url('../_base/_switches.css');
+@import url('../_base/_forms.css');
+
+/* Objects (layout) compartidos ─ themes/_base/ */
+@import url('../_base/_containers.css');
+@import url('../_base/objects/_grid.css');
+
+/* Components (icons) compartidos ─ themes/_base/ */
+@import url('../_base/components/_icons.css');

package/themes/dutti/theme.json

@@ -0,0 +1,86 @@
+{
+  "meta": {
+    "name": "dutti",
+    "displayName": "Dutti",
+    "description": "Tema base que extiende HolyGrail5 con variables específicas para botones, inputs, formularios, switches y radios. Las variables del tema referencian los tokens de --hg-color-* y --hg-spacing-* para mantener coherencia con el design system global.",
+    "version": "1.0.0",
+    "author": "HolyGrail CSS"
+  },
+  "tokenOverrides": {
+    "color": {},
+    "spacing": {}
+  },
+  "componentVars": {
+    "btn": {
+      "primary-bg": "var(--hg-color-primary)",
+      "primary-color": "var(--hg-color-white)",
+      "primary-hover-bg": "var(--hg-color-dark-grey)",
+
+      "secondary-bg": "var(--hg-color-dark-grey)",
+      "secondary-color": "var(--hg-color-white)",
+      "secondary-hover-bg": "var(--hg-color-middle-grey)",
+
+      "outline-border": "var(--hg-color-primary)",
+      "outline-color": "var(--hg-color-primary)",
+      "outline-hover-bg": "var(--hg-color-primary)",
+      "outline-hover-color": "var(--hg-color-white)",
+
+      "ghost-color": "var(--hg-color-primary)",
+      "ghost-hover-bg": "var(--hg-color-light-grey)",
+
+      "feel-bg": "var(--hg-color-feel)",
+      "feel-color": "var(--hg-color-white)",
+      "feel-hover-bg": "var(--hg-color-feel-dark)",
+
+      "padding-x-sm": "var(--hg-spacing-12)",
+      "padding-y-sm": "var(--hg-spacing-8)",
+      "padding-x-md": "var(--hg-spacing-16)",
+      "padding-y-md": "var(--hg-spacing-12)",
+      "padding-x-lg": "var(--hg-spacing-24)",
+      "padding-y-lg": "var(--hg-spacing-16)"
+    },
+    "input": {
+      "border": "var(--hg-color-middle-grey)",
+      "border-focus": "var(--hg-color-primary)",
+      "bg": "var(--hg-color-white)",
+      "color": "var(--hg-color-primary)",
+      "placeholder": "var(--hg-color-middle-grey)",
+      "error-border": "var(--hg-color-error)",
+      "success-border": "var(--hg-color-success)",
+      "warning-border": "var(--hg-color-warning)",
+      "padding-x": "var(--hg-spacing-16)",
+      "padding-y": "var(--hg-spacing-12)",
+      "gap": "var(--hg-spacing-8)"
+    },
+    "label": {
+      "color": "var(--hg-color-primary)",
+      "required": "var(--hg-color-error)"
+    },
+    "checkbox": {
+      "bg": "var(--hg-color-white)",
+      "border": "var(--hg-color-middle-grey)",
+      "checked-bg": "var(--hg-color-primary)",
+      "checked-border": "var(--hg-color-primary)"
+    },
+    "radio": {
+      "bg": "var(--hg-color-white)",
+      "border": "var(--hg-color-middle-grey)",
+      "checked-bg": "var(--hg-color-primary)",
+      "checked-border": "var(--hg-color-primary)"
+    },
+    "switch": {
+      "bg": "var(--hg-color-middle-grey)",
+      "active-bg": "var(--hg-color-primary)",
+      "thumb": "var(--hg-color-white)"
+    },
+    "form-group": {
+      "gap": "var(--hg-spacing-16)"
+    }
+  },
+  "design": {
+    "border-radius": "0",
+    "border-width": "1px",
+    "border-style": "solid",
+    "transition": "all 0.2s ease"
+  }
+}

package/themes/limited/_variables.css

@@ -0,0 +1,123 @@
+/**
+ * Variables del Tema Limited
+ * Paleta: lujo cálido (dorados, bronces y crema)
+ * Tipografía 100% serif: Suisse Works (titulares + texto corrido).
+ *
+ * Las @font-face de Suisse Works se declaran en guide-styles.css
+ * y se sirven desde dist/assets/fonts/ como woff2.
+ *
+ * Sobrescribe los tokens de color base de HolyGrail5 (--hg-color-*)
+ * y los tokens de tipografía (--hg-typo-font-family-*) para aplicar
+ * el look & feel del tema sin tocar config.json.
+ */
+
+:root {
+  /* ─────────────────────────────────────────────
+     Overrides de tokens base HolyGrail5 (colores)
+     Estos valores prevalecen sobre config.json y
+     actualizan automáticamente los componentVars
+     que apuntan con var(--hg-color-*).
+     ───────────────────────────────────────────── */
+  --hg-color-primary: #1D1D1D;
+  --hg-color-feel: #A38A6B;
+  --hg-color-feel-dark: #7A6346;
+  --hg-color-error: #9B2A1E;
+  --hg-color-success: #7A8D5F;
+  --hg-color-warning: #D4A84B;
+  --hg-color-info: #5B7FA1;
+  --hg-color-bg-light: #F4F2ED;
+  --hg-color-bg-cream: #F4F2ED;
+
+  /* ─────────────────────────────────────────────
+     Overrides de tipografía del tema (100% serif)
+     Suisse Works → titulares y texto corrido
+     ───────────────────────────────────────────── */
+  --hg-typo-font-family-primary-light: "suisse-works-regular", Georgia, "Times New Roman", serif;
+  --hg-typo-font-family-primary-regular: "suisse-works-regular", Georgia, "Times New Roman", serif;
+  --hg-typo-font-family-primary-bold: "suisse-works-bold", Georgia, "Times New Roman", serif;
+  --hg-typo-font-family-secondary: "suisse-works-medium", Georgia, "Times New Roman", serif;
+
+  /* ─────────────────────────────────────────────
+     Variables del tema (mapeo a los tokens base)
+     ───────────────────────────────────────────── */
+  --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);
+
+  --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);
+
+  --label-color: var(--hg-color-primary);
+  --label-required: var(--hg-color-error);
+
+  --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);
+
+  --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);
+
+  --switch-bg: var(--hg-color-middle-grey);
+  --switch-active-bg: var(--hg-color-feel);
+  --switch-thumb: var(--hg-color-white);
+
+  /* Espaciados - usando variables de HolyGrail5 */
+  --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);
+
+  --input-padding-x: var(--hg-spacing-16);
+  --input-padding-y: var(--hg-spacing-12);
+  --input-gap: var(--hg-spacing-8);
+
+  --form-group-gap: var(--hg-spacing-16);
+
+  /* Bordes y radios */
+  --border-radius: 0;
+  --border-width: 1px;
+  --border-style: solid;
+
+  /* Transiciones */
+  --transition: all 0.3s ease;
+}
+
+/* ─────────────────────────────────────────────
+   Refuerzo tipográfico: titulares en Suisse Works
+   ───────────────────────────────────────────── */
+.demo-container h1,
+.demo-container h2,
+.demo-container .demo-title,
+.demo-container .hg-vars-section__title {
+  font-family: var(--hg-typo-font-family-secondary);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}