🐦 Hummingbird — tema por defecto de PS 9.x

themes/hummingbird/
├── assets/
│   ├── css/
│   │   └── theme.css         ← CSS compilado
│   ├── js/
│   │   └── theme.js          ← JS compilado
│   └── img/
├── config/
│   └── theme.yml             ← Configuracion del tema
├── modules/                  ← Overrides de modulos
├── templates/
│   ├── catalog/
│   ├── checkout/
│   ├── customer/
│   └── layouts/
│       ├── layout-full-width.tpl
│       └── layout-left-column.tpl
├── _dev/                     ← Fuentes SCSS y JS (no incluido en la distribucion)
│   ├── scss/
│   │   ├── _variables.scss
│   │   ├── _tokens.scss      ← CSS Custom Properties
│   │   └── components/
│   └── js/
│       └── components/
├── preview.jpg
└── theme.yml

// En _dev/scss/_tokens.scss (o en tu child theme)
:root {
  // ── Colores ──
  --color-primary:        #1a73e8;
  --color-primary-light:  #4a90e8;
  --color-secondary:      #6c757d;
  --color-success:        #28a745;
  --color-danger:         #dc3545;
  --color-warning:        #ffc107;

  // ── Tipografia ──
  --font-family-base:     'Inter', system-ui, sans-serif;
  --font-size-base:       1rem;
  --font-size-sm:         0.875rem;
  --font-size-lg:         1.125rem;
  --line-height-base:     1.5;

  // ── Espaciado ──
  --spacer:               1rem;
  --spacer-xs:            calc(var(--spacer) * .25);
  --spacer-sm:            calc(var(--spacer) * .5);
  --spacer-lg:            calc(var(--spacer) * 1.5);
  --spacer-xl:            calc(var(--spacer) * 3);

  // ── Bordes ──
  --border-radius:        0.375rem;
  --border-radius-lg:     0.5rem;
  --border-color:         #dee2e6;
}

// En _dev/js/components/myComponent.js

export default class MyComponent {
  constructor(el, options = {}) {
    this.el = el;
    this.options = {
      animationDuration: 300,
      ...options,
    };
    this.init();
  }

  init() {
    this.el.addEventListener('click', (e) => this.handleClick(e));
  }

  handleClick(event) {
    event.preventDefault();
    // ...
  }
}

// En _dev/js/theme.js — punto de entrada
import MyComponent from './components/myComponent';

// Inicializar cuando el DOM esta listo
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-my-component]').forEach(el => {
    new MyComponent(el);
  });
});

// Exponer en window para compatibilidad con modulos legacy
window.MyTheme = { MyComponent };