/* ============================================================ Hitz DS — primitive-button — .btn (+ action .chip) Canonical importable CSS. Extracted from primitives/primitive-button.html. Tokens only (tokens-all.css). Consume via /@import; never copy-paste. ============================================================ */ /* ─── Chip group labels (action chips section) ───────────── */ .chip-group { display: flex; flex-direction: column; gap: var(--space-2); } .chip-group-lbl { font-family: "Inconsolata", ui-monospace, monospace; font-weight: 600; font-size: var(--text-badge-size); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.4; } .dk .chip-group-lbl { color: var(--color-tertiary); } .lt .chip-group-lbl { color: var(--color-secondary); } /* ============================================================ BUTTON BASE h 40px · px space-4 (20px) · Inconsolata 600 · gap space-2 (8px) radius-xl (pill) · icon-only 40×40px · transition 140ms "Icon Button" = any variant + .icon-only shape ============================================================ */ .btn { height: 32px; width: fit-content; padding: 0 var(--space-3); box-sizing: border-box; border-radius: var(--radius-xl); /* radius-xl */ border: none; font-family: "Inconsolata", ui-monospace, monospace; font-weight: 600; font-size: var(--text-button-size); line-height: 2; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-spring) var(--ease-spring); } .btn svg { color: currentColor; flex-shrink: 0; } .btn.icon-only { padding: 0; width: 32px; flex: 0 0 32px; } /* Mini — 2/3 del tamaño normal (36px → 24px). Pensado para acciones secundarias de baja jerarquía (p.ej. acciones por mensaje). */ .btn.mini { height: var(--space-5); padding: 0 var(--space-2); font-size: var(--text-badge-size); gap: var(--space-1); } .btn.mini.icon-only { padding: 0; width: var(--space-5); flex: 0 0 var(--space-5); } .btn:disabled, .btn.disabled { cursor: default; } .btn:not(:disabled):not(.disabled):active { transform: scale(0.97); } /* ============================================================ 01 — PRIMARY (solid fill · highest emphasis) ============================================================ */ .btn.primary-dark { background: var(--color-primary); color: var(--color-secondary); } .btn.primary-dark:not(:disabled):not(.disabled):hover, .btn.primary-dark.hover { background: var(--color-hover-primary-dark); } .btn.primary-dark:not(:disabled):not(.disabled):active, .btn.primary-dark.active { background: var(--color-active-primary-dark); } .btn.primary-dark:disabled, .btn.primary-dark.disabled { background: var(--color-primary-dark); color: var(--color-secondary); } .btn.primary-light { background: var(--color-secondary); color: var(--color-primary); } .btn.primary-light:not(:disabled):not(.disabled):hover, .btn.primary-light.hover { background: var(--color-secondary-dark); } .btn.primary-light:not(:disabled):not(.disabled):active, .btn.primary-light.active { background: var(--color-secondary-medium); } .btn.primary-light:disabled, .btn.primary-light.disabled { background: var(--color-tertiary-dark); color: var(--color-primary-light); } /* ============================================================ 02 — SECONDARY (tinted fill + 1px inset stroke) ============================================================ */ .btn.secondary-dark { background: var(--color-secondary-dark); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } .btn.secondary-dark:not(:disabled):not(.disabled):hover, .btn.secondary-dark.hover { background: var(--color-hover-secondary-dark); } .btn.secondary-dark:not(:disabled):not(.disabled):active, .btn.secondary-dark.active { background: var(--color-active-secondary-dark); } .btn.secondary-dark:disabled, .btn.secondary-dark.disabled { background: var(--color-secondary-dark); color: var(--color-primary-dark); box-shadow: inset 0 0 0 1px var(--color-primary-dark); } .btn.secondary-light { background: var(--color-primary-light); color: var(--color-secondary); box-shadow: inset 0 0 0 1px var(--color-secondary); } .btn.secondary-light:not(:disabled):not(.disabled):hover, .btn.secondary-light.hover { background: var(--color-hover-secondary-light); } .btn.secondary-light:not(:disabled):not(.disabled):active, .btn.secondary-light.active { background: var(--color-active-secondary-light); } .btn.secondary-light:disabled, .btn.secondary-light.disabled { background: var(--color-tertiary); color: var(--color-tertiary-dark); box-shadow: inset 0 0 0 1px var(--color-tertiary-dark); } /* ============================================================ 03 — TERTIARY (transparent default · fill on hover) ============================================================ */ .btn.tertiary-dark { background: transparent; color: var(--color-primary); } .btn.tertiary-dark:not(:disabled):not(.disabled):hover, .btn.tertiary-dark.hover { background: var(--color-hover-secondary-dark); } .btn.tertiary-dark:not(:disabled):not(.disabled):active, .btn.tertiary-dark.active { background: var(--color-active-secondary-dark); } .btn.tertiary-dark:disabled, .btn.tertiary-dark.disabled { background: transparent; color: var(--color-primary-dark); } .btn.tertiary-light { background: transparent; color: var(--color-secondary); } .btn.tertiary-light:not(:disabled):not(.disabled):hover, .btn.tertiary-light.hover { background: var(--color-hover-secondary-light); } .btn.tertiary-light:not(:disabled):not(.disabled):active, .btn.tertiary-light.active { background: var(--color-active-secondary-light); } .btn.tertiary-light:disabled, .btn.tertiary-light.disabled { background: transparent; color: var(--color-tertiary-dark); } /* ============================================================ 04 — QUATERNARY (lowest emphasis · muted label) Typical use: close, expand, dot-menu — this IS the "Icon Button" ============================================================ */ .btn.quaternary-dark { background: transparent; color: var(--color-tertiary-dark); } .btn.quaternary-dark:not(:disabled):not(.disabled):hover, .btn.quaternary-dark.hover { background: var(--color-hover-secondary-dark); } .btn.quaternary-dark:not(:disabled):not(.disabled):active, .btn.quaternary-dark.active { background: var(--color-active-secondary-dark); } .btn.quaternary-dark:disabled, .btn.quaternary-dark.disabled { background: transparent; color: var(--color-secondary-medium); } .btn.quaternary-light { background: transparent; color: var(--color-secondary-light); } .btn.quaternary-light:not(:disabled):not(.disabled):hover, .btn.quaternary-light.hover { background: var(--color-hover-secondary-light); } .btn.quaternary-light:not(:disabled):not(.disabled):active, .btn.quaternary-light.active { background: var(--color-active-secondary-light); } .btn.quaternary-light:disabled, .btn.quaternary-light.disabled { background: transparent; color: var(--color-tertiary-medium); } /* ============================================================ 05 — NEGATIVE (destructive action · color-negative fill · label color-tertiary) Same visual in dark and light — semantic red is mode-agnostic. ============================================================ */ .btn.negative-dark { background: var(--color-negative); color: var(--color-tertiary); } .btn.negative-dark:not(:disabled):not(.disabled):hover, .btn.negative-dark.hover { background: var(--color-negative-hover); } .btn.negative-dark:not(:disabled):not(.disabled):active, .btn.negative-dark.active { background: var(--color-negative-active); } .btn.negative-dark:disabled, .btn.negative-dark.disabled { background: var(--color-negative); color: var(--color-tertiary); opacity: 0.35; } .btn.negative-light { background: var(--color-negative); color: var(--color-tertiary); } .btn.negative-light:not(:disabled):not(.disabled):hover, .btn.negative-light.hover { background: var(--color-negative-hover); } .btn.negative-light:not(:disabled):not(.disabled):active, .btn.negative-light.active { background: var(--color-negative-active); } .btn.negative-light:disabled, .btn.negative-light.disabled { background: var(--color-negative); color: var(--color-tertiary); opacity: 0.35; } /* ============================================================ ACTION CHIP BASE h 32px · px 14px · Inconsolata 600 14px · gap space-2 (8px) radius-xl (pill) · icon-only 32×32px · transition 140ms ============================================================ */ .chip { height: 32px; padding: 0 var(--space-3); box-sizing: border-box; border-radius: var(--radius-xl); border: none; font-family: "Inconsolata", ui-monospace, monospace; font-weight: 600; font-size: var(--text-caption-size); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), transform var(--dur-spring) var(--ease-spring); } .chip svg { color: currentColor; flex-shrink: 0; } .chip.icon-only { padding: 0; width: 32px; flex: 0 0 32px; } .chip:disabled, .chip.disabled { cursor: default; } .chip:not(:disabled):not(.disabled):active { transform: scale(0.97); } /* Negative — color-negative var(--color-negative) · label color-tertiary */ .chip.chip-negative { background: var(--color-negative); color: var(--color-tertiary); } .chip.chip-negative:not(:disabled):not(.disabled):hover, .chip.chip-negative.hover { background: var(--color-negative-hover); } .chip.chip-negative:not(:disabled):not(.disabled):active, .chip.chip-negative.active { background: var(--color-negative-active); } .chip.chip-negative:disabled, .chip.chip-negative.disabled { opacity: 0.35; } /* Warning — color-warning var(--color-warning) · label color-secondary (dark label for contrast) */ .chip.chip-warning { background: var(--color-warning); color: var(--color-secondary); } .chip.chip-warning:not(:disabled):not(.disabled):hover, .chip.chip-warning.hover { background: var(--color-warning-hover); } .chip.chip-warning:not(:disabled):not(.disabled):active, .chip.chip-warning.active { background: var(--color-warning-active); } .chip.chip-warning:disabled, .chip.chip-warning.disabled { opacity: 0.35; } /* Positive — color-positive var(--color-positive) · label color-tertiary */ .chip.chip-positive { background: var(--color-positive); color: var(--color-tertiary); } .chip.chip-positive:not(:disabled):not(.disabled):hover, .chip.chip-positive.hover { background: var(--color-positive-hover); } .chip.chip-positive:not(:disabled):not(.disabled):active, .chip.chip-positive.active { background: var(--color-positive-active); } .chip.chip-positive:disabled, .chip.chip-positive.disabled { opacity: 0.35; }