@fluid-theme/core 0.4.3

package/src/components/button.css

@@ -0,0 +1,387 @@
+/**
+ * Fluid Framework - Button Component
+ * @layer components
+ *
+ * Buttons should invite interaction, not demand it.
+ * Clear affordance, gentle feedback, natural transitions.
+ *
+ * Usage:
+ *   <button>Default</button>
+ *   <button data-variant="secondary">Secondary</button>
+ *   <button data-variant="ghost">Ghost</button>
+ *   <button data-variant="danger">Danger</button>
+ *   <button data-size="sm">Small</button>
+ *   <button data-size="lg">Large</button>
+ */
+
+@layer components {
+  /* Base button - the foundation */
+  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);
+    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));
+    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 */
+    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);
+  }
+
+  /* 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);
+  }
+
+  /* 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 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 {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+
+  /* ========================================
+     VARIANTS
+     Each with its own personality
+     ======================================== */
+
+  /* Secondary - understated, supportive */
+  button[data-variant="secondary"],
+  .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);
+  }
+
+  /* Ghost - minimal, text-like */
+  button[data-variant="ghost"],
+  .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 */
+  }
+
+  /* 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 */
+  }
+
+  /* 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));
+  }
+
+  /* Subtle danger - less alarming */
+  button[data-variant="danger-subtle"],
+  .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));
+  }
+
+
+  /* ========================================
+     SIZES
+     Small for tight spaces, large for emphasis
+     ======================================== */
+
+  /* Extra small */
+  button[data-size="xs"],
+  .button[data-size="xs"] {
+    --_btn-padding-block: var(--space-1);
+    --_btn-padding-inline: var(--space-2);
+    --_btn-font-size: var(--font-size-xs);
+    --_btn-min-height: 1.75rem;
+    border-radius: var(--radius-sm);
+  }
+
+  /* Small */
+  button[data-size="sm"],
+  .button[data-size="sm"] {
+    --_btn-padding-block: var(--space-2);
+    --_btn-padding-inline: var(--space-4);
+    --_btn-font-size: var(--font-size-sm);
+    --_btn-min-height: 2.25rem;
+  }
+
+  /* Large */
+  button[data-size="lg"],
+  .button[data-size="lg"] {
+    --_btn-padding-block: var(--space-4);
+    --_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 */
+  button[data-size="xl"],
+  .button[data-size="xl"] {
+    --_btn-padding-block: var(--space-5);
+    --_btn-padding-inline: var(--space-8);
+    --_btn-font-size: var(--font-size-xl);
+    --_btn-min-height: 4rem;
+    border-radius: var(--radius-lg);
+  }
+
+
+  /* ========================================
+     MODIFIERS
+     Additional behavioral variations
+     ======================================== */
+
+  /* Full width */
+  button[data-full],
+  .button[data-full] {
+    inline-size: 100%;
+  }
+
+  /* Icon only - square aspect */
+  button[data-icon],
+  .button[data-icon] {
+    --_btn-padding-inline: var(--_btn-padding-block);
+    aspect-ratio: 1;
+  }
+
+  /* Pill shape */
+  button[data-pill],
+  .button[data-pill] {
+    border-radius: var(--radius-full);
+  }
+
+  /* Loading state */
+  button[data-loading],
+  .button[data-loading] {
+    position: relative;
+    color: transparent;
+    pointer-events: none;
+  }
+
+  button[data-loading]::after,
+  .button[data-loading]::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: 1.25em;
+    block-size: 1.25em;
+    margin-inline-start: -0.625em;
+    margin-block-start: -0.625em;
+    border: 2px 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));
+    opacity: 0.8;
+  }
+
+  @keyframes button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+
+  /* ========================================
+     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
+     ======================================== */
+
+  .button-group {
+    display: inline-flex;
+    isolation: isolate;
+  }
+
+  .button-group > button,
+  .button-group > .button {
+    border-radius: 0;
+    position: relative;
+  }
+
+  .button-group > button:first-child,
+  .button-group > .button:first-child {
+    border-start-start-radius: var(--radius-md);
+    border-end-start-radius: var(--radius-md);
+  }
+
+  .button-group > button:last-child,
+  .button-group > .button:last-child {
+    border-start-end-radius: var(--radius-md);
+    border-end-end-radius: var(--radius-md);
+  }
+
+  .button-group > button:not(:first-child),
+  .button-group > .button:not(:first-child) {
+    margin-inline-start: -1px;
+  }
+
+  .button-group > button:hover,
+  .button-group > button:focus-visible,
+  .button-group > .button:hover,
+  .button-group > .button:focus-visible {
+    z-index: 1;
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @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;
+    }
+  }
+}