@fluid-theme/core 0.4.3 → 2.0.0

package/src/components/avatar.css

@@ -39,8 +39,8 @@
     inline-size: var(--_avatar-size);
     block-size: var(--_avatar-size);
     border-radius: var(--radius-full);
-    background: color-mix(in oklch, var(--accent) 20%, var(--color-surface));
-    color: var(--accent);
+    background: color-mix(in oklab, var(--accent) 20%, var(--color-surface));
+    color: var(--accent-ink);
     font-weight: var(--weight-semibold);
     font-size: calc(var(--_avatar-size) * 0.4);
     line-height: 1;
@@ -106,7 +106,7 @@
     inline-size: calc(var(--_avatar-size) * 0.3);
     block-size: calc(var(--_avatar-size) * 0.3);
     border-radius: var(--radius-full);
-    border: 2px solid var(--color-background);
+    border: var(--border-width-thick) solid var(--color-background);
     background: var(--color-text-subtle);
   }
 
@@ -144,17 +144,13 @@
 
   .avatar-group .avatar {
     box-shadow: 0 0 0 2px var(--color-background);
-    transition: transform var(--duration-fast) var(--ease-settle);
   }
 
   .avatar-group .avatar + .avatar {
     margin-inline-start: calc(var(--_avatar-size) * -0.3);
   }
 
-  .avatar-group .avatar:hover {
-    z-index: var(--z-raised);
-    transform: scale(1.1);
-  }
+  .avatar-group .avatar:hover { z-index: var(--z-raised); }
 
   /* Overflow counter: +5 more */
   .avatar-group__overflow {
@@ -176,17 +172,5 @@
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Tsunami: asymmetric corners on square */
-  [data-motion="tsunami"] .avatar[data-shape="square"] {
-    border-radius: var(--radius-asymmetric, 0 12px 0 0);
-  }
 
-  /* Rapids: hard shadow on group */
-  [data-motion="rapids"] .avatar-group .avatar {
-    box-shadow: 2px 2px 0 oklch(0 0 0 / 0.1), 0 0 0 2px var(--color-background);
-  }
 }

package/src/components/badge.css

@@ -21,23 +21,21 @@
      BASE BADGE
      ======================================== */
 
+  /* The label voice in a 1px box: square (--radius-control), transparent. */
   .badge {
     display: inline-flex;
     align-items: center;
     gap: var(--space-1);
-    padding: var(--space-1) var(--space-3);
-    font-size: var(--font-size-xs);
-    font-weight: var(--weight-semibold);
-    line-height: var(--leading-tight);
-    letter-spacing: var(--tracking-wide);
+    padding: 0.35em 0.6em;
+    font: calc(600 + var(--_dark-weight)) var(--step--2) / 1.2 var(--font-body);
+    letter-spacing: var(--tracking-caps);
     text-transform: uppercase;
-    border-radius: var(--radius-full);
+    border: var(--border-width) solid currentColor;
+    border-radius: var(--radius-control);
     white-space: nowrap;
     vertical-align: middle;
-
-    /* Default: accent-tinted */
-    color: var(--accent);
-    background: var(--accent-subtle);
+    color: var(--color-text);
+    background: transparent;
   }
 
 
@@ -47,8 +45,9 @@
 
   /* Filled - solid accent background */
   .badge[data-variant="filled"] {
-    color: var(--white);
+    color: var(--on-accent);
     background: var(--accent);
+    border-color: transparent;
   }
 
   /* Outline - border only */
@@ -61,6 +60,7 @@
   .badge[data-variant="muted"] {
     color: var(--color-text-muted);
     background: var(--color-surface);
+    border-color: transparent;
   }
 
 
@@ -69,6 +69,8 @@
      Semantic states for indicators
      ======================================== */
 
+  /* The status colours are text colours (4.5:1 on their own tint in light
+     and dark); filled badges use the status fill and its on-colour. */
   .badge[data-status="good"] {
     color: var(--color-success);
     background: var(--color-success-subtle);
@@ -89,25 +91,24 @@
     background: var(--color-info-subtle);
   }
 
-  /* Status + filled combo */
   .badge[data-status="good"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-success);
+    color: var(--color-success-on);
+    background: var(--color-success-fill);
   }
 
   .badge[data-status="warning"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-warning);
+    color: var(--color-warning-on);
+    background: var(--color-warning-fill);
   }
 
   .badge[data-status="error"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-error);
+    color: var(--color-error-on);
+    background: var(--color-error-fill);
   }
 
   .badge[data-status="info"][data-variant="filled"] {
-    color: var(--white);
-    background: var(--color-info);
+    color: var(--color-info-on);
+    background: var(--color-info-fill);
   }
 
 
@@ -116,14 +117,13 @@
      ======================================== */
 
   .badge[data-size="sm"] {
-    padding: var(--space-0-5) var(--space-2);
-    font-size: var(--font-size-2xs, 0.6875rem);
-    letter-spacing: var(--tracking-wider);
+    padding: 0.2em 0.45em;
+    font-size: 0.6875rem;
   }
 
   .badge[data-size="lg"] {
-    padding: var(--space-2) var(--space-4);
-    font-size: var(--font-size-sm);
+    padding: 0.5em 0.8em;
+    font-size: var(--step--1);
   }
 
 
@@ -151,32 +151,9 @@
     min-inline-size: 1.5rem;
     justify-content: center;
     padding: var(--space-1);
-    border-radius: var(--radius-full);
     font-variant-numeric: tabular-nums;
   }
 
 
-  /* ========================================
-     THEME-SPECIFIC STYLES
-     ======================================== */
-
-  /* Still: square badges */
-  [data-motion="still"] .badge {
-    border-radius: 0;
-    letter-spacing: var(--tracking-wider);
-  }
-
-  /* Brutalist: hard edges, bold */
-  [data-motion="brutalist"] .badge {
-    border-radius: 0;
-    text-transform: uppercase;
-    font-weight: var(--weight-bold);
-    border: 2px solid currentColor;
-    background: transparent;
-  }
 
-  /* Tsunami: asymmetric corners */
-  [data-motion="tsunami"] .badge {
-    border-radius: var(--radius-asymmetric, 0 12px 0 0);
-  }
 }

package/src/components/button.css

@@ -15,79 +15,51 @@
  */
 
 @layer components {
-  /* Base button - the foundation */
+  /* Base button: sans 600, square, no shadow, no transform. Colour comes
+     through the --_btn-* hooks, so a band (data-bg="inverse|accent-strong",
+     a themed hero) re-points <button> and .button alike. */
   button,
   [role="button"],
   .button {
-    /* Reset */
     appearance: none;
-    border: none;
-    background: none;
-
-    /* Layout */
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-2);
-
-    /* Sizing */
-    padding-block: var(--_btn-padding-block, var(--space-3));
-    padding-inline: var(--_btn-padding-inline, var(--space-5));
-    min-block-size: var(--_btn-min-height, 2.75rem);
-
-    /* Typography */
-    font-family: inherit;
-    font-size: var(--_btn-font-size, var(--font-size-base));
-    font-weight: var(--weight-medium);
+    padding-block: var(--_btn-padding-block, 0.9em);
+    padding-inline: var(--_btn-padding-inline, 1.6em);
+    min-block-size: var(--_btn-min-height, 3rem);
+    font-family: var(--font-body);
+    font-size: var(--_btn-font-size, var(--step-0));
+    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
+    letter-spacing: 0.01em;
     line-height: var(--leading-none);
     text-decoration: none;
     white-space: nowrap;
-
-    /* Visual */
-    color: var(--_btn-color, var(--white));
-    background-color: var(--_btn-bg, var(--accent));
+    color: var(--_btn-color, var(--on-accent-fill));
+    background-color: var(--_btn-bg, var(--accent-fill));
     border: var(--border-width) solid var(--_btn-border, transparent);
-    border-radius: var(--radius-button, var(--radius-md));
-    box-shadow: var(--_btn-shadow, var(--shadow-xs)); /* Subtle depth at rest */
+    border-radius: var(--radius-control);
     cursor: pointer;
-
-    /* Transitions - smooth like flowing water */
     transition:
-      background-color var(--duration-normal) var(--ease-fluid),
-      border-color var(--duration-normal) var(--ease-fluid),
-      color var(--duration-normal) var(--ease-fluid),
-      box-shadow var(--duration-normal) var(--ease-fluid),
-      transform var(--duration-fast) var(--ease-settle);
+      background-color var(--duration-fast) var(--ease-fluid),
+      border-color var(--duration-fast) var(--ease-fluid),
+      color var(--duration-fast) var(--ease-fluid),
+      text-decoration-color var(--duration-fast) var(--ease-fluid);
   }
 
-  /* Hover state - gentle lift */
-  button:hover:not(:disabled),
-  [role="button"]:hover:not(:disabled),
-  .button:hover:not(:disabled) {
-    background-color: var(--_btn-bg-hover, var(--accent-hover));
-    box-shadow: var(--shadow-sm);
+  :is(button, [role="button"], .button):hover:not(:disabled) {
+    color: var(--_btn-color-hover, var(--_btn-color, var(--on-accent-fill)));
+    background-color: var(--_btn-bg-hover, var(--accent-fill-hover));
   }
 
-  /* Active state - subtle press */
-  button:active:not(:disabled),
-  [role="button"]:active:not(:disabled),
-  .button:active:not(:disabled) {
-    transform: scale(0.98);
-    box-shadow: none;
+  /* Focus: a real outline, so no shadow a site adds can hide it (#50),
+     and it survives forced-colors mode. */
+  :is(button, [role="button"], .button):focus-visible {
+    outline: var(--focus-ring-width) solid var(--color-focus);
+    outline-offset: 2px;
   }
 
-  /* Focus state - clear ring */
-  button:focus-visible,
-  [role="button"]:focus-visible,
-  .button:focus-visible {
-    outline: 2px solid transparent;
-    box-shadow:
-      var(--shadow-glow),
-      0 0 0 2px var(--color-background),
-      0 0 0 4px var(--accent);
-  }
-
-  /* Disabled state */
   button:disabled,
   [role="button"][aria-disabled="true"],
   .button:disabled {
@@ -99,54 +71,60 @@
 
   /* ========================================
      VARIANTS
-     Each with its own personality
      ======================================== */
 
-  /* Secondary - understated, supportive */
-  button[data-variant="secondary"],
-  .button[data-variant="secondary"] {
+  :is(button, .button)[data-variant="secondary"] {
     --_btn-color: var(--color-text);
     --_btn-bg: var(--color-surface);
     --_btn-bg-hover: var(--color-surface-raised);
     --_btn-border: var(--color-border);
   }
 
-  button[data-variant="secondary"]:hover:not(:disabled),
-  .button[data-variant="secondary"]:hover:not(:disabled) {
-    --_btn-border: var(--color-text-subtle);
+  /* Outline: an ink edge; hover inverts to an ink fill. */
+  :is(button, .button)[data-variant="outline"] {
+    --_btn-color: var(--color-text);
+    --_btn-bg: transparent;
+    --_btn-border: var(--color-border-strong);
+    --_btn-bg-hover: var(--color-text);
+    --_btn-color-hover: var(--color-background);
   }
 
-  /* Ghost - minimal, text-like */
-  button[data-variant="ghost"],
-  .button[data-variant="ghost"] {
+  /* Ghost: underlined text and an arrow that steps forward on hover.
+     data-arrow="none" drops the arrow. */
+  :is(button, .button)[data-variant="ghost"] {
     --_btn-color: var(--color-text);
     --_btn-bg: transparent;
-    --_btn-bg-hover: var(--color-surface);
-    --_btn-border: transparent;
-    --_btn-shadow: none; /* No shadow for ghost buttons */
+    --_btn-bg-hover: transparent;
+    --_btn-padding-inline: 0;
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklch, var(--accent-ink) 55%, transparent);
+    text-decoration-thickness: 0.06em;
+    text-underline-offset: 0.22em;
   }
 
-  /* Outline - bordered, no fill */
-  button[data-variant="outline"],
-  .button[data-variant="outline"] {
-    --_btn-color: var(--accent);
-    --_btn-bg: transparent;
-    --_btn-bg-hover: var(--accent-subtle);
-    --_btn-border: var(--accent);
-    --_btn-shadow: none; /* Border provides visual boundary */
+  :is(button, .button)[data-variant="ghost"]:hover {
+    text-decoration-color: var(--accent-ink);
   }
 
-  /* Danger - for destructive actions */
-  button[data-variant="danger"],
-  .button[data-variant="danger"] {
-    --_btn-color: var(--white);
-    --_btn-bg: var(--color-error);
-    --_btn-bg-hover: color-mix(in oklch, var(--color-error) 85%, var(--black));
+  :is(button, .button)[data-variant="ghost"]:not([data-icon], [data-arrow="none"], [aria-current], [aria-disabled="true"])::after {
+    content: "→";
+    transition: translate var(--duration-fast) var(--ease-settle);
   }
 
-  /* Subtle danger - less alarming */
-  button[data-variant="danger-subtle"],
-  .button[data-variant="danger-subtle"] {
+  :is(button, .button)[data-variant="ghost"]:dir(rtl)::after { content: "←"; }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :is(button, .button)[data-variant="ghost"]:hover::after { translate: 0.2em; }
+    :is(button, .button)[data-variant="ghost"]:dir(rtl):hover::after { translate: -0.2em; }
+  }
+
+  :is(button, .button)[data-variant="danger"] {
+    --_btn-color: var(--color-error-on);
+    --_btn-bg: var(--color-error-fill);
+    --_btn-bg-hover: color-mix(in oklch, var(--color-error-fill) 85%, var(--black));
+  }
+
+  :is(button, .button)[data-variant="danger-subtle"] {
     --_btn-color: var(--color-error);
     --_btn-bg: var(--color-error-subtle);
     --_btn-bg-hover: color-mix(in oklch, var(--color-error-subtle) 80%, var(--color-error));
@@ -165,7 +143,6 @@
     --_btn-padding-inline: var(--space-2);
     --_btn-font-size: var(--font-size-xs);
     --_btn-min-height: 1.75rem;
-    border-radius: var(--radius-sm);
   }
 
   /* Small */
@@ -184,7 +161,6 @@
     --_btn-padding-inline: var(--space-6);
     --_btn-font-size: var(--font-size-lg);
     --_btn-min-height: 3.25rem;
-    border-radius: var(--radius-lg);
   }
 
   /* Extra large */
@@ -194,7 +170,6 @@
     --_btn-padding-inline: var(--space-8);
     --_btn-font-size: var(--font-size-xl);
     --_btn-min-height: 4rem;
-    border-radius: var(--radius-lg);
   }
 
 
@@ -219,7 +194,7 @@
   /* Pill shape */
   button[data-pill],
   .button[data-pill] {
-    border-radius: var(--radius-full);
+    border-radius: var(--radius-pill);
   }
 
   /* Loading state */
@@ -240,11 +215,11 @@
     block-size: 1.25em;
     margin-inline-start: -0.625em;
     margin-block-start: -0.625em;
-    border: 2px solid currentColor;
+    border: var(--border-width-thick) solid currentColor;
     border-inline-end-color: transparent;
     border-radius: var(--radius-full);
     animation: button-spin 0.6s linear infinite;
-    color: var(--_btn-color, var(--white));
+    color: var(--_btn-color, var(--on-accent));
     opacity: 0.8;
   }
 
@@ -255,50 +230,6 @@
   }
 
 
-  /* ========================================
-     TSUNAMI MOTION EFFECTS
-     Bold, wave-like interactions
-     Uses transform only to avoid CLS
-     ======================================== */
-
-  /* Tsunami button hover - noticeable growth like a wave rising */
-  [data-motion="tsunami"] button:hover:not(:disabled),
-  [data-motion="tsunami"] [role="button"]:hover:not(:disabled),
-  [data-motion="tsunami"] .button:hover:not(:disabled) {
-    transform: scale(1.08);
-    box-shadow: var(--shadow-lg);
-    transition:
-      transform var(--duration-normal) var(--ease-fluid),
-      box-shadow var(--duration-normal) var(--ease-fluid),
-      background-color var(--duration-normal) var(--ease-fluid);
-  }
-
-  /* Tsunami button active/click - crash down effect */
-  [data-motion="tsunami"] button:active:not(:disabled),
-  [data-motion="tsunami"] [role="button"]:active:not(:disabled),
-  [data-motion="tsunami"] .button:active:not(:disabled) {
-    transform: scale(0.92) translateY(4px);
-    box-shadow: var(--shadow-xs);
-    transition:
-      transform 150ms var(--ease-settle),
-      box-shadow 150ms var(--ease-settle);
-  }
-
-  /* Tsunami button leave - wave crash with bounce settle */
-  @keyframes tsunami-button-settle {
-    0% { transform: scale(1.08); }
-    40% { transform: scale(0.95) translateY(3px); }
-    70% { transform: scale(1.02) translateY(-1px); }
-    100% { transform: scale(1) translateY(0); }
-  }
-
-  [data-motion="tsunami"] button:not(:hover):not(:active):not(:disabled),
-  [data-motion="tsunami"] [role="button"]:not(:hover):not(:active):not([aria-disabled="true"]),
-  [data-motion="tsunami"] .button:not(:hover):not(:active):not(:disabled) {
-    animation: tsunami-button-settle var(--duration-normal) var(--ease-settle);
-  }
-
-
   /* ========================================
      BUTTON GROUPS
      Multiple buttons together
@@ -317,14 +248,14 @@
 
   .button-group > button:first-child,
   .button-group > .button:first-child {
-    border-start-start-radius: var(--radius-md);
-    border-end-start-radius: var(--radius-md);
+    border-start-start-radius: var(--radius-control);
+    border-end-start-radius: var(--radius-control);
   }
 
   .button-group > button:last-child,
   .button-group > .button:last-child {
-    border-start-end-radius: var(--radius-md);
-    border-end-end-radius: var(--radius-md);
+    border-start-end-radius: var(--radius-control);
+    border-end-end-radius: var(--radius-control);
   }
 
   .button-group > button:not(:first-child),
@@ -345,43 +276,6 @@
      ======================================== */
 
   @media (prefers-reduced-motion: reduce) {
-    button,
-    [role="button"],
-    .button {
-      transition: none;
-    }
-
-    button:active:not(:disabled),
-    [role="button"]:active:not(:disabled),
-    .button:active:not(:disabled) {
-      transform: none;
-    }
-
-    button[data-loading]::after,
-    .button[data-loading]::after {
-      animation: none;
-      /* Static indicator instead of spinning */
-      opacity: 0.6;
-    }
-
-    [data-motion="tsunami"] button:hover:not(:disabled),
-    [data-motion="tsunami"] [role="button"]:hover:not(:disabled),
-    [data-motion="tsunami"] .button:hover:not(:disabled) {
-      transform: none;
-      transition: none;
-    }
-
-    [data-motion="tsunami"] button:active:not(:disabled),
-    [data-motion="tsunami"] [role="button"]:active:not(:disabled),
-    [data-motion="tsunami"] .button:active:not(:disabled) {
-      transform: none;
-      transition: none;
-    }
-
-    [data-motion="tsunami"] button:not(:hover):not(:active):not(:disabled),
-    [data-motion="tsunami"] [role="button"]:not(:hover):not(:active):not([aria-disabled="true"]),
-    [data-motion="tsunami"] .button:not(:hover):not(:active):not(:disabled) {
-      animation: none;
-    }
+    :is(button, .button)[data-loading]::after { animation: none; opacity: 0.6; }
   }
 }