@mimi-ng/cli 0.1.1 → 0.3.0

package/dist/templates/components/badge/badge.ts

@@ -1,21 +1,56 @@
-import { Directive, computed, input } from '@angular/core';
+import { Directive, computed, input, isDevMode } from '@angular/core';
 import { cn } from '@/components/ui/utils/cn';
-import { type BadgeVariant, badgeVariants } from './badge.variants';
+import {
+  type BadgeTone,
+  type BadgeVariant,
+  badgeVariants,
+  resolveBadgeStyle,
+} from './badge.variants';
 
-/** Etiqueta estática de Mimi sobre el `<span>` nativo: `<span mimiBadge>Nuevo</span>`. */
+/** El aviso de atajo + tone sale una sola vez por página. */
+let warnedShortcutWithTone = false;
+
+/**
+ * Etiqueta estática de Mimi sobre el `<span>` nativo: `<span mimiBadge>Nuevo</span>`.
+ *
+ * - `variant` (solid, soft, outline) y `tone` (primary, secondary, success, warning, info,
+ *   danger). Sin `tone`, cada variante usa su tono natural: outline es neutro (secondary); las
+ *   demás, primary. `data-variant` y `data-tone` muestran los valores resueltos.
+ * - Los atajos de la 0.1.0 (`default`, `secondary`, `destructive`) siguen funcionando y ganan
+ *   sobre `tone` (en modo desarrollo, avisa una vez).
+ */
 @Directive({
   selector: 'span[mimiBadge]',
   exportAs: 'mimiBadge',
   host: {
     '[class]': 'classes()',
-    '[attr.data-variant]': 'variant()',
+    '[attr.data-variant]': 'resolved().variant',
+    '[attr.data-tone]': 'resolved().tone',
   },
 })
 export class MimiBadge {
-  readonly variant = input<BadgeVariant>('default');
+  /** Incluye los atajos de la 0.1.x (`BadgeVariantShortcut`, deprecados). */
+  readonly variant = input<BadgeVariant>('solid');
+  readonly tone = input<BadgeTone>();
   readonly userClass = input('', { alias: 'class' });
 
+  protected readonly resolved = computed(() => {
+    const style = resolveBadgeStyle(this.variant(), this.tone());
+    if (style.ignoredTone && isDevMode() && !warnedShortcutWithTone) {
+      warnedShortcutWithTone = true;
+      console.warn(
+        `[Mimi] Badge: variant="${this.variant()}" ya define el color; se ignora ` +
+          `tone="${this.tone()}". Usa variant="${style.variant}" con tone (los atajos se ` +
+          `quitan en la 1.0).`,
+      );
+    }
+    return style;
+  });
+
   protected readonly classes = computed(() =>
-    cn(badgeVariants({ variant: this.variant() }), this.userClass()),
+    cn(
+      badgeVariants({ variant: this.resolved().variant, tone: this.resolved().tone }),
+      this.userClass(),
+    ),
   );
 }

package/dist/templates/components/badge/badge.variants.ts

@@ -1,4 +1,68 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Cómo se ve el badge (spec 4, «Variante y tono»), sin los atajos de la 0.1.x. Sin ghost ni link:
+ * el diseño no los tiene.
+ */
+export type BadgeStyleVariant = 'solid' | 'soft' | 'outline';
+
+/** De qué color es. `danger` usa los tokens `destructive`. */
+export type BadgeTone = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger';
+
+/**
+ * Atajos de la 0.1.0, cuando el color era una variante. Siguen funcionando, sin error ni aviso:
+ * `default` = solid + primary, `secondary` = solid + secondary, `destructive` = solid + danger.
+ * @deprecated Se quitan en la 1.0 (spec 12). Usa `variant` y `tone`.
+ */
+export type BadgeVariantShortcut = 'default' | 'secondary' | 'destructive';
+
+/**
+ * Lo que acepta `variant`: las variantes y, hasta la 1.0, los atajos de la 0.1.x (deprecados), para
+ * que el código que tipaba `BadgeVariant` con `'default'` o `'destructive'` siga compilando.
+ */
+export type BadgeVariant = BadgeStyleVariant | BadgeVariantShortcut;
+
+/** Punto decorativo de outline (un ::before vacío: no lo leen los lectores de pantalla). */
+const DOT = "gap-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:content-['']";
+
+/**
+ * Colores de cada tono en cada variante. Clases completas y literales para Tailwind. Diseño:
+ * docs/design/«Mimi F2 Tokens y Tonos» (Tonos en Badge). Outline lleva un punto del color del
+ * tono; sin tono (secondary) se ve como en la 0.1.0, sin punto. El tono secondary es
+ * provisional, sin diseño (spec 13).
+ */
+const TONE_CLASSES = {
+  primary: {
+    solid: 'border-transparent bg-primary text-primary-foreground',
+    soft: 'border-transparent bg-secondary text-secondary-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-primary`,
+  },
+  secondary: {
+    solid: 'border-transparent bg-secondary text-secondary-foreground',
+    soft: 'border-transparent bg-muted text-foreground',
+    outline: 'border-border bg-transparent text-foreground',
+  },
+  success: {
+    solid: 'border-transparent bg-success text-success-foreground',
+    soft: 'border-transparent bg-success-soft text-success-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-success`,
+  },
+  warning: {
+    solid: 'border-transparent bg-warning text-warning-foreground',
+    soft: 'border-transparent bg-warning-soft text-warning-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-warning`,
+  },
+  info: {
+    solid: 'border-transparent bg-info text-info-foreground',
+    soft: 'border-transparent bg-info-soft text-info-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-info`,
+  },
+  danger: {
+    solid: 'border-transparent bg-destructive text-destructive-foreground',
+    soft: 'border-transparent bg-destructive-soft-bg text-destructive-soft-foreground',
+    outline: `border-border bg-transparent text-foreground ${DOT} before:bg-destructive`,
+  },
+} as const satisfies Record<BadgeTone, Record<BadgeStyleVariant, string>>;
 
 /**
  * Clases de mimiBadge (docs/design/Mimi Componentes.dc.html, sección 5). Literales para que
@@ -7,21 +71,51 @@ import { cva, type VariantProps } from 'class-variance-authority';
  */
 export const badgeVariants = cva(
   [
-    'inline-flex h-[22px] shrink-0 items-center gap-1 rounded-badge border px-2.5',
-    'font-sans text-xs leading-none font-semibold whitespace-nowrap',
+    'inline-flex h-[var(--mimi-badge-height,22px)] shrink-0 items-center gap-1 rounded-badge border px-[var(--mimi-badge-px,0.625rem)]',
+    'font-sans text-[length:var(--mimi-badge-font-size,0.75rem)] leading-none font-[weight:var(--mimi-badge-font-weight,600)] whitespace-nowrap',
     '[&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0',
   ],
   {
     variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'border-border bg-transparent text-foreground',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground',
-      },
+      variant: { solid: '', soft: '', outline: '' },
+      tone: { primary: '', secondary: '', success: '', warning: '', info: '', danger: '' },
     },
-    defaultVariants: { variant: 'default' },
+    compoundVariants: Object.entries(TONE_CLASSES).flatMap(([tone, byVariant]) =>
+      Object.entries(byVariant).map(([variant, cls]) => ({
+        tone: tone as BadgeTone,
+        variant: variant as BadgeStyleVariant,
+        class: cls,
+      })),
+    ),
+    defaultVariants: { variant: 'solid', tone: 'primary' },
   },
 );
 
-export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
+/** Sin `tone`, cada variante usa su tono natural: outline es neutro, como en la 0.1.0. */
+const NATURAL_TONE: Record<BadgeStyleVariant, BadgeTone> = {
+  solid: 'primary',
+  soft: 'primary',
+  outline: 'secondary',
+};
+
+const SHORTCUTS: Record<BadgeVariantShortcut, { variant: BadgeStyleVariant; tone: BadgeTone }> = {
+  default: { variant: 'solid', tone: 'primary' },
+  secondary: { variant: 'solid', tone: 'secondary' },
+  destructive: { variant: 'solid', tone: 'danger' },
+};
+
+/**
+ * Resuelve variante y tono. Un atajo de la 0.1.0 gana siempre; `ignoredTone` indica que además
+ * se pasó un `tone` que no se aplicó.
+ */
+export function resolveBadgeStyle(
+  variant: BadgeVariant,
+  tone: BadgeTone | undefined,
+): { variant: BadgeStyleVariant; tone: BadgeTone; ignoredTone: boolean } {
+  if (variant in SHORTCUTS) {
+    const shortcut = SHORTCUTS[variant as BadgeVariantShortcut];
+    return { ...shortcut, ignoredTone: tone !== undefined && tone !== shortcut.tone };
+  }
+  const v = variant as BadgeStyleVariant;
+  return { variant: v, tone: tone ?? NATURAL_TONE[v], ignoredTone: false };
+}

package/dist/templates/components/button/button.ts

@@ -3,17 +3,35 @@ import {
   Component,
   DestroyRef,
   ElementRef,
+  Renderer2,
   booleanAttribute,
   computed,
+  effect,
   inject,
   input,
+  isDevMode,
 } from '@angular/core';
 import { cn } from '@/components/ui/utils/cn';
-import { type ButtonSize, type ButtonVariant, buttonVariants } from './button.variants';
+import {
+  type ButtonSize,
+  type ButtonTone,
+  type ButtonVariant,
+  buttonVariants,
+  resolveButtonStyle,
+} from './button.variants';
+
+/** El aviso de atajo + tone sale una sola vez por página. */
+let warnedShortcutWithTone = false;
 
 /**
  * Botón de Mimi sobre el elemento nativo: `<button mimiBtn>` o `<a mimiBtn>`.
  *
+ * - `variant` (cómo se ve: solid, soft, outline, ghost, link) y `tone` (de qué color: primary,
+ *   secondary, success, warning, info, danger). Sin `tone`, cada variante usa su tono natural:
+ *   outline y ghost son neutros (secondary); las demás, primary. `data-variant` y `data-tone`
+ *   muestran los valores resueltos.
+ * - Los atajos de la 0.1.0 (`default`, `secondary`, `destructive`) siguen funcionando y ganan
+ *   sobre `tone` (en modo desarrollo, avisa una vez).
  * - `disabled` o `loading` deshabilitan: `disabled` nativo en <button>; en <a>,
  *   `aria-disabled="true"`, `tabindex="-1"` y el clic se cancela.
  * - `loading` muestra un spinner centrado encima del contenido, que queda transparente en su
@@ -48,19 +66,21 @@ import { type ButtonSize, type ButtonVariant, buttonVariants } from './button.va
   `,
   host: {
     '[class]': 'classes()',
-    '[attr.data-variant]': 'variant()',
+    '[attr.data-variant]': 'resolved().variant',
+    '[attr.data-tone]': 'resolved().tone',
     '[attr.data-size]': 'size()',
     '[attr.data-loading]': 'loading() ? "" : null',
     '[attr.data-disabled]': 'isDisabled() ? "" : null',
     '[attr.disabled]': 'isNativeButton && isDisabled() ? "" : null',
-    '[attr.aria-disabled]': '!isNativeButton && isDisabled() ? "true" : null',
-    '[attr.tabindex]': '!isNativeButton && isDisabled() ? "-1" : null',
-    '[attr.aria-busy]': 'loading() ? "true" : null',
+    // aria-disabled, tabindex y aria-busy no van aquí: un binding de host que vale null borra el
+    // atributo que haya puesto el usuario. Los pone `ownAttributes` solo cuando hacen falta.
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MimiButton {
-  readonly variant = input<ButtonVariant>('default');
+  /** Incluye los atajos de la 0.1.x (`ButtonVariantShortcut`, deprecados). */
+  readonly variant = input<ButtonVariant>('solid');
+  readonly tone = input<ButtonTone>();
   readonly size = input<ButtonSize>('default');
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly loading = input(false, { transform: booleanAttribute });
@@ -71,15 +91,62 @@ export class MimiButton {
 
   protected readonly isDisabled = computed(() => this.disabled() || this.loading());
 
+  protected readonly resolved = computed(() => {
+    const style = resolveButtonStyle(this.variant(), this.tone());
+    if (style.ignoredTone && isDevMode() && !warnedShortcutWithTone) {
+      warnedShortcutWithTone = true;
+      console.warn(
+        `[Mimi] Button: variant="${this.variant()}" ya define el color; se ignora ` +
+          `tone="${this.tone()}". Usa variant="${style.variant}" con tone (los atajos se ` +
+          `quitan en la 1.0).`,
+      );
+    }
+    return style;
+  });
+
   protected readonly classes = computed(() =>
     cn(
-      buttonVariants({ variant: this.variant(), size: this.size() }),
+      buttonVariants({
+        variant: this.resolved().variant,
+        tone: this.resolved().tone,
+        size: this.size(),
+      }),
       // El diseño deshabilitado no tiene sombra; cargando la conserva.
       this.disabled() && !this.loading() && 'shadow-none',
       this.userClass(),
     ),
   );
 
+  /**
+   * `aria-disabled="true"` y `tabindex="-1"` en un <a> deshabilitado, y `aria-busy="true"` mientras
+   * carga. Solo se escriben cuando hacen falta; al dejar de hacer falta vuelve el valor que tenía el
+   * elemento (el del usuario, fijo o enlazado) o se quitan. Así `<button mimiBtn aria-disabled="true">`
+   * (un botón deshabilitado que sigue enfocable) conserva su atributo.
+   */
+  private readonly ownAttributes = (() => {
+    const renderer = inject(Renderer2);
+    /** Lo que había antes de que Mimi escribiera cada atributo (null: no había). */
+    const previous = new Map<string, string | null>();
+    const apply = (name: string, value: string | null) => {
+      if (value !== null) {
+        if (!previous.has(name)) previous.set(name, this.element.getAttribute(name));
+        renderer.setAttribute(this.element, name, value);
+        return;
+      }
+      if (!previous.has(name)) return;
+      const before = previous.get(name) ?? null;
+      previous.delete(name);
+      if (before === null) renderer.removeAttribute(this.element, name);
+      else renderer.setAttribute(this.element, name, before);
+    };
+    return effect(() => {
+      const disabledLink = !this.isNativeButton && this.isDisabled();
+      apply('aria-disabled', disabledLink ? 'true' : null);
+      apply('tabindex', disabledLink ? '-1' : null);
+      apply('aria-busy', this.loading() ? 'true' : null);
+    });
+  })();
+
   /**
    * En <a> deshabilitado cancela el clic (en <button> el navegador ya lo bloquea). Se escucha
    * en la fase de captura: en el propio elemento corre antes que los (click) del usuario, que

package/dist/templates/components/button/button.variants.ts

@@ -1,14 +1,96 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  buttonFocusStyles,
-  controlDisabledStyles,
-  controlPressStyles,
-} from '@/components/ui/utils/control-styles';
+import { buttonFocusStyles, controlDisabledStyles } from '@/components/ui/utils/control-styles';
+
+/** Cómo se ve el botón (spec 4, «Variante y tono»), sin los atajos de la 0.1.x. */
+export type ButtonStyleVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
+
+/** De qué color es. `danger` usa los tokens `destructive`. */
+export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'danger';
+
+/**
+ * Atajos de la 0.1.0, cuando el color era una variante. Siguen funcionando, sin error ni aviso:
+ * `default` = solid + primary, `secondary` = solid + secondary, `destructive` = solid + danger.
+ * @deprecated Se quitan en la 1.0 (spec 12). Usa `variant` y `tone`.
+ */
+export type ButtonVariantShortcut = 'default' | 'secondary' | 'destructive';
+
+/**
+ * Lo que acepta `variant`: las variantes y, hasta la 1.0, los atajos de la 0.1.x (deprecados), para
+ * que el código que tipaba `ButtonVariant` con `'default'` o `'destructive'` siga compilando.
+ */
+export type ButtonVariant = ButtonStyleVariant | ButtonVariantShortcut;
+
+/**
+ * Colores de cada tono en cada variante: una fila por tono, una entrada por variante. Todas las
+ * clases van completas y literales para que Tailwind las detecte. Diseño: docs/design/
+ * «Mimi F2 Tokens y Tonos» (solid, soft y outline con tono). Las celdas de secondary, ghost y
+ * link con tono son provisionales, sin diseño (spec 13).
+ */
+const TONE_CLASSES = {
+  primary: {
+    solid:
+      'bg-primary text-primary-foreground shadow-primary hover:not-disabled:bg-primary-hover hover:not-disabled:shadow-primary-hover active:ring-3 active:ring-ring-soft',
+    soft: 'bg-secondary text-secondary-foreground hover:not-disabled:bg-primary-soft-hover',
+    outline:
+      'border-primary-border bg-transparent text-secondary-foreground hover:not-disabled:bg-primary-subtle',
+    ghost:
+      'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+    link: 'bg-transparent text-primary',
+  },
+  secondary: {
+    solid:
+      'bg-secondary text-secondary-foreground shadow-neutral hover:not-disabled:bg-secondary-hover hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
+    soft: 'bg-muted text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+    outline:
+      'border-border bg-card text-foreground shadow-neutral hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
+    ghost:
+      'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
+    link: 'bg-transparent text-foreground',
+  },
+  success: {
+    solid:
+      'bg-success text-success-foreground shadow-success hover:not-disabled:bg-success-hover hover:not-disabled:shadow-success-hover active:ring-3 active:ring-success-ring',
+    soft: 'bg-success-soft text-success-soft-foreground hover:not-disabled:bg-success-soft-hover',
+    outline:
+      'border-success-border bg-transparent text-success-soft-foreground hover:not-disabled:bg-success-subtle',
+    ghost: 'bg-transparent text-success-soft-foreground hover:not-disabled:bg-success-soft',
+    link: 'bg-transparent text-success-soft-foreground',
+  },
+  warning: {
+    solid:
+      'bg-warning text-warning-foreground shadow-warning hover:not-disabled:bg-warning-hover hover:not-disabled:shadow-warning-hover active:ring-3 active:ring-warning-ring',
+    soft: 'bg-warning-soft text-warning-soft-foreground hover:not-disabled:bg-warning-soft-hover',
+    outline:
+      'border-warning-border bg-transparent text-warning-soft-foreground hover:not-disabled:bg-warning-subtle',
+    ghost: 'bg-transparent text-warning-soft-foreground hover:not-disabled:bg-warning-soft',
+    link: 'bg-transparent text-warning-soft-foreground',
+  },
+  info: {
+    solid:
+      'bg-info text-info-foreground shadow-info hover:not-disabled:bg-info-hover hover:not-disabled:shadow-info-hover active:ring-3 active:ring-info-ring',
+    soft: 'bg-info-soft text-info-soft-foreground hover:not-disabled:bg-info-soft-hover',
+    outline:
+      'border-info-border bg-transparent text-info-soft-foreground hover:not-disabled:bg-info-subtle',
+    ghost: 'bg-transparent text-info-soft-foreground hover:not-disabled:bg-info-soft',
+    link: 'bg-transparent text-info-soft-foreground',
+  },
+  danger: {
+    solid:
+      'bg-destructive text-destructive-foreground shadow-destructive hover:not-disabled:bg-destructive-hover hover:not-disabled:shadow-destructive-hover active:ring-3 active:ring-destructive-ring',
+    soft: 'bg-destructive-soft-bg text-destructive-soft-foreground hover:not-disabled:bg-destructive-soft-hover',
+    outline:
+      'border-destructive-border bg-transparent text-destructive-soft-foreground hover:not-disabled:bg-destructive-subtle',
+    ghost:
+      'bg-transparent text-destructive-soft-foreground hover:not-disabled:bg-destructive-soft-bg',
+    link: 'bg-transparent text-destructive-soft-foreground',
+  },
+} as const satisfies Record<ButtonTone, Record<ButtonStyleVariant, string>>;
 
 /**
  * Clases de mimiBtn (docs/design/Mimi Componentes.dc.html, sección 1). Todas literales para
  * que Tailwind las detecte. Las medidas siguen la cascada de la spec 6.2:
- * --mimi-btn-* → --mimi-control-* / --mimi-radius → valor del diseño.
+ * --mimi-btn-* → --mimi-control-* / --mimi-radius → valor del diseño. La variante da la forma
+ * y el tono, los colores (TONE_CLASSES).
  */
 export const buttonVariants = cva(
   [
@@ -20,41 +102,83 @@ export const buttonVariants = cva(
     buttonFocusStyles,
     'focus-visible:outline-[length:var(--mimi-btn-focus-ring-width,2px)]',
     controlDisabledStyles,
-    controlPressStyles,
+    // Escala al presionar: --mimi-btn-press-scale → --mimi-press-scale (spec 6.6).
+    'mimi-transition active:scale-[var(--mimi-btn-press-scale,var(--mimi-press-scale))]',
     // Cargando: deshabilitado, pero con opacidad 85% y cursor de progreso (gana a disabled:).
     'aria-busy:disabled:cursor-progress aria-busy:disabled:opacity-85 aria-busy:aria-disabled:opacity-85',
   ],
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-primary hover:not-disabled:bg-primary-hover hover:not-disabled:shadow-primary-hover active:ring-3 active:ring-ring-soft',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-neutral hover:not-disabled:bg-secondary-hover hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-destructive hover:not-disabled:bg-destructive-hover hover:not-disabled:shadow-destructive-hover active:ring-3 active:ring-destructive-soft',
-        outline:
-          'border-border bg-card text-foreground shadow-neutral hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground hover:not-disabled:shadow-neutral-hover active:ring-3 active:ring-ring-soft',
-        ghost:
-          'bg-transparent text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground',
-        link: 'bg-transparent text-primary underline-offset-4 hover:not-disabled:underline',
+        solid: '',
+        soft: '',
+        outline: '',
+        ghost: '',
+        link: 'underline-offset-4 hover:not-disabled:underline',
+      },
+      tone: {
+        primary: '',
+        secondary: '',
+        success: '',
+        warning: '',
+        info: '',
+        danger: '',
       },
       size: {
         default:
-          'h-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] gap-2 px-[var(--mimi-btn-padding-x,1rem)] text-[length:var(--mimi-btn-font-size,0.875rem)]',
+          'h-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] gap-[var(--mimi-btn-gap,0.5rem)] px-[var(--mimi-btn-px,var(--mimi-btn-padding-x,1rem))] text-[length:var(--mimi-btn-font-size,0.875rem)]',
         sm: 'h-[var(--mimi-btn-height-sm,var(--mimi-control-height-sm,2rem))] gap-1.5 px-3 text-[13px]',
         lg: 'h-[var(--mimi-btn-height-lg,var(--mimi-control-height-lg,3rem))] gap-2 px-6 text-[15px]',
         icon: 'size-[var(--mimi-btn-height,var(--mimi-control-height,2.5rem))] p-0',
       },
     },
     compoundVariants: [
+      // Los colores: una combinación por cada tono y variante de TONE_CLASSES.
+      ...Object.entries(TONE_CLASSES).flatMap(([tone, byVariant]) =>
+        Object.entries(byVariant).map(([variant, cls]) => ({
+          tone: tone as ButtonTone,
+          variant: variant as ButtonStyleVariant,
+          class: cls,
+        })),
+      ),
       // El enlace del diseño solo tiene 4px de padding horizontal.
       { variant: 'link', size: ['default', 'sm', 'lg'], class: 'px-1' },
     ],
-    defaultVariants: { variant: 'default', size: 'default' },
+    defaultVariants: { variant: 'solid', tone: 'primary', size: 'default' },
   },
 );
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-export type ButtonVariant = NonNullable<ButtonVariantProps['variant']>;
 export type ButtonSize = NonNullable<ButtonVariantProps['size']>;
+
+/** Sin `tone`, cada variante usa su tono natural: outline y ghost son neutros, como en la 0.1.0. */
+const NATURAL_TONE: Record<ButtonStyleVariant, ButtonTone> = {
+  solid: 'primary',
+  soft: 'primary',
+  outline: 'secondary',
+  ghost: 'secondary',
+  link: 'primary',
+};
+
+const SHORTCUTS: Record<ButtonVariantShortcut, { variant: ButtonStyleVariant; tone: ButtonTone }> =
+  {
+    default: { variant: 'solid', tone: 'primary' },
+    secondary: { variant: 'solid', tone: 'secondary' },
+    destructive: { variant: 'solid', tone: 'danger' },
+  };
+
+/**
+ * Resuelve variante y tono. Un atajo de la 0.1.0 gana siempre; `ignoredTone` indica que además
+ * se pasó un `tone` que no se aplicó.
+ */
+export function resolveButtonStyle(
+  variant: ButtonVariant,
+  tone: ButtonTone | undefined,
+): { variant: ButtonStyleVariant; tone: ButtonTone; ignoredTone: boolean } {
+  if (variant in SHORTCUTS) {
+    const shortcut = SHORTCUTS[variant as ButtonVariantShortcut];
+    return { ...shortcut, ignoredTone: tone !== undefined && tone !== shortcut.tone };
+  }
+  const v = variant as ButtonStyleVariant;
+  return { variant: v, tone: tone ?? NATURAL_TONE[v], ignoredTone: false };
+}

package/dist/templates/components/calendar/calendar-texts.ts

@@ -0,0 +1,72 @@
+import { InjectionToken, type Provider } from '@angular/core';
+
+/*
+ * Textos del calendario, del Date Picker y del Date Range, en archivo propio: así se pueden
+ * proveer en `app.config.ts` sin llevar los componentes al chunk inicial. Los nombres de meses y
+ * días no van aquí: salen de `Intl.DateTimeFormat` con el idioma.
+ */
+
+export interface MimiDatePickerText {
+  /** Nombre del panel del Date Picker. */
+  pickDate: string;
+  /** Nombre del panel del Date Range. */
+  pickRange: string;
+  /** Botones de mes (o año, o página de años) anterior y siguiente. */
+  previous: string;
+  next: string;
+  /** Botón del título, que cambia la vista (días → meses → años). */
+  changeView: string;
+  /** Leyenda del punto de hoy. */
+  today: string;
+  /** Botón que lleva al mes de hoy. */
+  goToday: string;
+  /** Se agrega al nombre de un día que no se puede elegir. */
+  unavailable: string;
+  /** Ayuda del rango con el inicio elegido. */
+  pickEnd: string;
+  /** Ayuda del rango sin elegir o con el periodo completo. */
+  pickStart: string;
+  /** Cuenta de días del rango: «7 días». */
+  days: (count: number) => string;
+}
+
+/** Textos predeterminados (inglés). */
+export const MIMI_DATE_PICKER_TEXT_EN: MimiDatePickerText = {
+  pickDate: 'Choose date',
+  pickRange: 'Choose period',
+  previous: 'Previous',
+  next: 'Next',
+  changeView: 'Change view',
+  today: 'Today',
+  goToday: 'Go to today',
+  unavailable: 'unavailable',
+  pickEnd: 'Choose the end date.',
+  pickStart: 'Click a day to start a new period.',
+  days: (count) => `${count} ${count === 1 ? 'day' : 'days'}`,
+};
+
+/** Textos en español: `provideMimiDatePickerText(MIMI_DATE_PICKER_TEXT_ES)`. */
+export const MIMI_DATE_PICKER_TEXT_ES: MimiDatePickerText = {
+  pickDate: 'Elegir fecha',
+  pickRange: 'Elegir periodo',
+  previous: 'Anterior',
+  next: 'Siguiente',
+  changeView: 'Cambiar vista',
+  today: 'Hoy',
+  goToday: 'Ir a hoy',
+  unavailable: 'no disponible',
+  pickEnd: 'Elige el día final.',
+  pickStart: 'Haz clic en un día para empezar un periodo nuevo.',
+  days: (count) => `${count} ${count === 1 ? 'día' : 'días'}`,
+};
+
+/** Textos activos. Sin `provideMimiDatePickerText`, los predeterminados en inglés. */
+export const MIMI_DATE_PICKER_TEXT = new InjectionToken<MimiDatePickerText>(
+  'MIMI_DATE_PICKER_TEXT',
+  { providedIn: 'root', factory: () => MIMI_DATE_PICKER_TEXT_EN },
+);
+
+/** Cambia los textos del calendario, el Date Picker y el Date Range. Lo que no definas sigue en inglés. */
+export function provideMimiDatePickerText(text: Partial<MimiDatePickerText>): Provider {
+  return { provide: MIMI_DATE_PICKER_TEXT, useValue: { ...MIMI_DATE_PICKER_TEXT_EN, ...text } };
+}