@attrus-ds/core 0.1.0

package/dist/css/components/buttons.css

@@ -0,0 +1,301 @@
+/* ============================================================
+   BUTTONS — ATTRUS Design System
+   Component CSS — pure tokens, no hardcoded values.
+
+   Anatomy:
+     [leading icon?] [label] [trailing icon?]
+
+   Variants (semantic):
+     .btn-primary     | brand fill — main action
+     .btn-secondary   | neutral fill + hairline border — alternative actions
+     .btn-tertiary    | soft neutral fill (borderless) — quiet affirmative
+     .btn-ghost       | no chrome — toolbar / cancel / low priority
+     .btn-link        | inline text-link styling
+     .btn-danger      | destructive solid — irreversible
+     .btn-danger-outline | destructive secondary — contextual remove
+     .btn-success     | strong positive — approve / confirm
+     .btn-inverse     | white pill on dark/brand surfaces
+
+   Modifier:
+     .btn-icon        | icon-only (square hit-area)
+
+   Sizes:
+     .btn-xs (24h)  .btn-sm (32h)  default (40h)  .btn-lg (48h)
+
+   States: default | :hover | :active | :focus-visible | [disabled] | .is-loading
+   ============================================================ */
+
+
+/* ----------------------------------------------------------------
+   1. BASE
+   ---------------------------------------------------------------- */
+.btn {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  /* Box — default size = md (40px tall) */
+  height: 40px;
+  padding: 0 var(--space-5);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+
+  /* Type */
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+  font-weight: var(--w-semibold);
+  line-height: 1;
+  letter-spacing: var(--ls-body);
+
+  /* Behavior */
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  background: transparent;
+  color: inherit;
+
+  /* Motion */
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.btn:active { transform: translateY(0.5px); }
+
+.btn:focus { outline: none; }
+.btn:focus-visible { box-shadow: var(--shadow-focus); }
+
+.btn[disabled],
+.btn.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Icon sizing inside buttons (Lucide replaces <i> with <svg>) */
+.btn > i, .btn > svg,
+.btn > svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  stroke-width: var(--icon-stroke);
+  flex-shrink: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   2. SIZES
+   ---------------------------------------------------------------- */
+.btn-xs {
+  height: 24px;
+  padding: 0 var(--space-3);
+  font-size: var(--fs-sm);
+  gap: var(--space-1);
+}
+.btn-xs > i, .btn-xs > svg, .btn-xs > svg { width: var(--icon-xs); height: var(--icon-xs); }
+
+.btn-sm {
+  height: 32px;
+  padding: 0 var(--space-4);
+  font-size: var(--fs-md);
+}
+.btn-sm > i, .btn-sm > svg, .btn-sm > svg { width: var(--icon-xs); height: var(--icon-xs); }
+
+/* default = md (40px) — defined in .btn */
+
+.btn-lg {
+  height: 48px;
+  padding: 0 var(--space-6);
+  font-size: var(--fs-base);
+  gap: var(--space-3);
+}
+.btn-lg > i, .btn-lg > svg, .btn-lg > svg { width: var(--icon-md); height: var(--icon-md); }
+
+
+/* ----------------------------------------------------------------
+   3. ICON-ONLY MODIFIER
+   ---------------------------------------------------------------- */
+.btn-icon { padding: 0; aspect-ratio: 1 / 1; }
+.btn-icon.btn-xs { width: 24px; }
+.btn-icon.btn-sm { width: 32px; }
+.btn-icon          { width: 40px; }
+.btn-icon.btn-lg { width: 48px; }
+
+
+/* ----------------------------------------------------------------
+   4. VARIANTS
+   ---------------------------------------------------------------- */
+
+/* PRIMARY — brand-blue solid */
+.btn-primary {
+  background: var(--color-brand-secondary-500);
+  color: var(--color-foreground-on-solid);
+}
+.btn-primary:hover  { background: var(--color-brand-secondary-600); }
+.btn-primary:active { background: var(--color-brand-secondary-700); }
+.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* SECONDARY — soft neutral fill + hairline border */
+.btn-secondary {
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-default);
+  border-color: var(--color-border-default);
+}
+.btn-secondary:hover  { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.btn-secondary:active { background: var(--color-background-press); }
+.btn-secondary:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* TERTIARY — soft neutral fill, borderless (quieter than secondary) */
+.btn-tertiary {
+  background: color-mix(in srgb, var(--color-foreground-default) 7%, transparent);
+  color: var(--color-foreground-default);
+  border-color: transparent;
+}
+.btn-tertiary:hover  { background: color-mix(in srgb, var(--color-foreground-default) 12%, transparent); }
+.btn-tertiary:active { background: color-mix(in srgb, var(--color-foreground-default) 16%, transparent); }
+.btn-tertiary:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* GHOST — no chrome until hover */
+.btn-ghost {
+  background: transparent;
+  color: var(--color-foreground-secondary);
+}
+.btn-ghost:hover  { background: var(--color-background-hover);  color: var(--color-foreground-default); }
+.btn-ghost:active { background: var(--color-background-press); }
+.btn-ghost:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* LINK — looks like inline text link */
+.btn-link {
+  background: transparent;
+  color: var(--color-foreground-highlight);
+  height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-2xs);
+  text-decoration: none;
+}
+.btn-link:hover  { color: var(--color-brand-secondary-700); text-decoration: underline; text-underline-offset: 2px; }
+.btn-link:active { color: var(--color-brand-secondary-800); }
+.btn-link:focus-visible { box-shadow: var(--shadow-focus); }
+
+
+/* DANGER — destructive solid */
+.btn-danger {
+  background: var(--color-danger-500);
+  color: var(--color-foreground-on-solid);
+}
+.btn-danger:hover  { background: var(--color-danger-700); }
+.btn-danger:active { background: var(--color-danger-900); }
+.btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }
+
+
+/* DANGER OUTLINE — destructive contextual */
+.btn-danger-outline {
+  background: var(--color-background-surface);
+  color: var(--color-danger-500);
+  border-color: var(--color-feedback-danger-border);
+}
+.btn-danger-outline:hover  { background: var(--color-feedback-danger-background); border-color: var(--color-danger-500); }
+.btn-danger-outline:active { background: color-mix(in srgb, var(--color-feedback-danger-background) 60%, var(--color-danger-100)); }
+.btn-danger-outline:focus-visible { box-shadow: var(--shadow-focus-danger); }
+
+
+/* SUCCESS — strong positive (rare) */
+.btn-success {
+  background: var(--color-success-500);
+  color: var(--color-foreground-on-solid);
+}
+.btn-success:hover  { background: var(--color-success-700); }
+.btn-success:active { background: var(--color-success-900); }
+.btn-success:focus-visible { box-shadow: var(--shadow-focus-success); }
+
+
+/* INVERSE — white pill on dark/brand surfaces */
+.btn-inverse {
+  background: var(--color-pure-white);
+  color: var(--color-brand-secondary-700);
+}
+.btn-inverse:hover  { background: var(--color-neutral-100); color: var(--color-brand-secondary-800); }
+.btn-inverse:active { background: var(--color-neutral-150); }
+.btn-inverse:focus-visible { box-shadow: var(--shadow-focus-sky); }
+
+
+/* ----------------------------------------------------------------
+   5. ON-INVERSE GHOSTS  —  for use inside .inverse / dark surfaces
+   Apply BOTH .btn-ghost AND .on-inverse
+   ---------------------------------------------------------------- */
+.btn-ghost.on-inverse {
+  color: var(--color-foreground-inverse-secondary);
+}
+.btn-ghost.on-inverse:hover  { background: var(--color-background-inverse-hover); color: var(--color-foreground-inverse-default); }
+.btn-ghost.on-inverse:active { background: var(--color-background-inverse-press); }
+
+/* Outline ghost on inverse — pairs with .btn-secondary semantics */
+.btn-secondary.on-inverse {
+  background: transparent;
+  color: var(--color-foreground-inverse-default);
+  border-color: var(--color-border-inverse-strong);
+}
+.btn-secondary.on-inverse:hover  { background: var(--color-background-inverse-hover); border-color: var(--color-foreground-inverse-secondary); }
+.btn-secondary.on-inverse:active { background: var(--color-background-inverse-press); }
+
+
+/* ----------------------------------------------------------------
+   6. LOADING STATE
+   Add .is-loading; keeps current width but hides label/icons,
+   shows a centered spinner.
+   ---------------------------------------------------------------- */
+.btn.is-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+.btn.is-loading > * { visibility: hidden; }
+.btn.is-loading::after {
+  content: "";
+  position: absolute;
+  top: 50%; left: 50%;
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  margin: calc(var(--icon-sm) / -2) 0 0 calc(var(--icon-sm) / -2);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-pill);
+  animation: btn-spin var(--duration-slower) linear infinite;
+  /* Re-introduce currentColor where the variant set it; ::after inherits the parent's color BEFORE the !important override */
+  color: var(--color-foreground-default);
+}
+.btn-primary.is-loading::after,
+.btn-danger.is-loading::after,
+.btn-success.is-loading::after { color: var(--color-pure-white); }
+.btn-tertiary.is-loading::after { color: var(--color-foreground-default); }
+
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+
+/* ----------------------------------------------------------------
+   7. BUTTON GROUP  —  segmented / toolbar
+   ---------------------------------------------------------------- */
+.btn-group {
+  display: inline-flex;
+}
+.btn-group .btn {
+  border-radius: 0;
+}
+.btn-group .btn:first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
+.btn-group .btn:last-child  { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
+.btn-group .btn + .btn { margin-left: -1px; }
+.btn-group .btn:focus-visible,
+.btn-group .btn:hover { z-index: 1; }

package/dist/css/components/callout.css

@@ -0,0 +1,195 @@
+/* ============================================================
+   CALLOUT — note / aside / alert-bar for documentation & UI
+   ------------------------------------------------------------
+   An icon + message in a tinted, bordered box. Theme-aware: tint
+   is mixed against --color-background-surface so it adapts to
+   light & dark; the icon uses a theme-aware foreground token.
+
+   Scales from a one-line note up to a rich panel (title + body +
+   action buttons + dismiss) and a full-width alert bar.
+
+   Simple:
+     <div class="callout">                     (info — default)
+       <i data-lucide="info"></i>
+       <div class="callout-body">…<code>x</code>…</div>
+     </div>
+
+   Rich (vertical: title + body + actions + dismiss):
+     <div class="callout callout-warn">
+       <i data-lucide="alert-triangle"></i>
+       <div class="callout-content">
+         <div class="callout-title">Heading</div>
+         <div class="callout-body">Longer message…</div>
+         <div class="callout-actions">
+           <button class="btn btn-primary btn-sm">Confirm</button>
+           <button class="btn btn-ghost btn-sm">Later</button>
+         </div>
+       </div>
+       <button class="callout-dismiss" aria-label="Dismiss"><i data-lucide="x"></i></button>
+     </div>
+
+   Alert bar (full-width banner; actions + dismiss inline-right):
+     <div class="callout callout-bar callout-danger"> … </div>
+
+   Tonal: .callout-warn .callout-success .callout-danger .callout-neutral
+   Size:  .callout-sm (compact)
+   Two props drive every tone:
+     --callout-tint  raw family color → background + border mix
+     --callout-fg    theme-aware foreground → icon color
+   ============================================================ */
+.callout {
+  --callout-tint: var(--color-brand-secondary-500);  /* info / royal */
+  --callout-fg:   var(--color-foreground-accent);     /* sky, theme-aware */
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--callout-tint) 8%, var(--color-background-surface));
+  border: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent);
+}
+
+.callout > i,
+.callout > svg,
+.callout-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--callout-fg);
+  stroke-width: var(--icon-stroke);
+}
+
+/* content column — wrap title + body + actions for rich callouts */
+.callout-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.callout-title {
+  font-size: var(--fs-md);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-title);
+  color: var(--color-foreground-default);
+  line-height: var(--lh-tight);
+}
+
+.callout-body {
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-snug);
+}
+.callout-body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+.callout-body code {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--color-foreground-accent);
+}
+.callout-body a { color: var(--color-foreground-accent); text-decoration: none; font-weight: var(--w-semibold); }
+.callout-body p { margin: 0 0 var(--space-2); }
+.callout-body p:last-child { margin-bottom: 0; }
+.callout-body ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
+.callout-body li { margin-bottom: var(--space-1); }
+
+/* action row — buttons use the canonical .btn system.
+   Convention: keep callout actions SMALL (.btn-xs). Use .btn-secondary
+   for the action — its border stays legible on the tinted box, where
+   borderless ghost/tertiary read as plain text. .btn-ghost for the
+   soft/secondary option; .btn-danger for destructive actions. */
+.callout-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2-5);
+  margin-top: var(--space-3);
+}
+
+/* Action buttons adopt the callout's TONE so they belong to the tinted box.
+   .btn-secondary → tonal soft button (tint fill + tint border + tint text);
+   .btn-ghost → picks up the tone for text/hover.
+   .btn-danger / .btn-primary stay canonical (solid) for strong/destructive. */
+.callout-actions .btn-secondary {
+  background: color-mix(in srgb, var(--callout-tint) 14%, var(--color-background-surface));
+  border-color: color-mix(in srgb, var(--callout-tint) 34%, transparent);
+  color: var(--callout-fg);
+}
+.callout-actions .btn-secondary:hover {
+  background: color-mix(in srgb, var(--callout-tint) 22%, var(--color-background-surface));
+  border-color: color-mix(in srgb, var(--callout-tint) 50%, transparent);
+}
+.callout-actions .btn-ghost { color: var(--callout-fg); }
+.callout-actions .btn-ghost:hover { background: color-mix(in srgb, var(--callout-tint) 12%, transparent); color: var(--callout-fg); }
+
+/* dismiss — ghost icon button, top-aligned */
+.callout-dismiss {
+  flex-shrink: 0;
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin: -2px -2px 0 var(--space-2);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+.callout-dismiss:hover { background: color-mix(in srgb, var(--callout-tint) 14%, transparent); color: var(--color-foreground-default); }
+.callout-dismiss > i, .callout-dismiss > svg { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
+
+/* ---- tonal variants ---- */
+.callout-warn    { --callout-tint: var(--color-warning-500); --callout-fg: var(--color-feedback-warning-foreground); }
+.callout-success { --callout-tint: var(--color-success-500); --callout-fg: var(--color-feedback-success-foreground); }
+.callout-danger  { --callout-tint: var(--color-danger-500);  --callout-fg: var(--color-feedback-danger-foreground); }
+.callout-neutral { --callout-tint: var(--color-neutral-500);  --callout-fg: var(--color-foreground-muted); }
+
+/* ---- compact size ---- */
+.callout-sm { padding: var(--space-3) var(--space-4); gap: var(--space-2-5); }
+.callout-sm > i, .callout-sm > svg, .callout-sm .callout-icon { width: 16px; height: 16px; }
+.callout-sm .callout-body { font-size: var(--fs-xs); }
+.callout-sm .callout-title { font-size: var(--fs-sm); }
+
+/* ---- alert bar — full-width banner, items centered, actions right ---- */
+.callout-bar {
+  align-items: center;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  padding: var(--space-3) var(--space-6);
+  border-left: 3px solid var(--callout-tint);   /* accent rule for scannability */
+}
+.callout-bar > i, .callout-bar > svg, .callout-bar .callout-icon { margin-top: 0; }
+.callout-bar .callout-content { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
+.callout-bar .callout-actions { margin-top: 0; margin-left: auto; }
+.callout-bar .callout-dismiss { align-self: center; margin-top: 0; }
+.callout-bar .callout-title { font-size: var(--fs-sm); }
+
+/* rounded alert bar (when not edge-to-edge) */
+.callout-bar.callout-rounded { border-radius: var(--radius-md); border-left-width: 3px; border-top: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent); border-right: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent); }
+
+/* ---- Inline: content-sized, single-line (badges, hero notices) ---- */
+.callout-inline { display: inline-flex; width: auto; align-items: center; }
+
+/* ---- On inverse: glassy translucent tint + light text, for dark
+   surfaces (hero, photo). Mirrors .pill.on-inverse. ---- */
+.callout.on-inverse {
+  background: color-mix(in srgb, var(--callout-tint) 20%, transparent);
+  border-color: color-mix(in srgb, var(--callout-tint) 38%, transparent);
+  color: var(--color-foreground-inverse-default);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+}
+.callout.on-inverse > i, .callout.on-inverse > svg, .callout.on-inverse .callout-icon { color: var(--callout-fg-inv, currentColor); }
+.callout.on-inverse .callout-title { color: var(--color-foreground-inverse-default); }
+.callout.on-inverse .callout-body { color: var(--color-foreground-inverse-secondary); }
+.callout.on-inverse .callout-body strong { color: var(--color-foreground-inverse-default); }
+.callout-warn.on-inverse    { --callout-fg-inv: var(--color-warning-300); }
+.callout-success.on-inverse { --callout-fg-inv: var(--color-success-300); }
+.callout-danger.on-inverse  { --callout-fg-inv: var(--color-danger-300); }
+.callout-info.on-inverse    { --callout-fg-inv: var(--color-brand-accent-300); }
+.callout-neutral.on-inverse { --callout-fg-inv: var(--color-foreground-inverse-muted); }