@fluid-theme/core 0.4.3 → 2.1.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; }
   }
 }