@e-burgos/tucu-ui 2.7.3 → 2.8.0

package/macos/tahoe/macos-backgrounds.css

@@ -0,0 +1,314 @@
+/* ============================================================
+   macOS Tahoe 26 — Spatial Backgrounds
+
+   Original CSS-generated spatial backgrounds inspired by macOS Tahoe.
+   DO NOT include, copy or derive proprietary Apple assets:
+   no Apple wallpapers, screenshots, SF Symbols, UI Kit images or
+   promotional materials.
+
+   All gradients are original project assets.
+
+   Usage rules:
+   - Apply to root/window background, hero/demo surfaces or
+     wallpaper-like app backgrounds ONLY.
+   - Never apply inside cards, tables, buttons, forms or per-row elements.
+   - Content surfaces (Card, BasicTable, Form) must use solid or standard
+     material backgrounds for legibility.
+   - Text over spatial backgrounds must maintain WCAG AA contrast.
+     Add --macos-wallpaper-overlay or a dim layer if contrast fails.
+   - prefers-reduced-transparency: replace with opaque tokenised bg.
+   - prefers-contrast: more → reduce aurora opacity.
+   - prefers-reduced-motion: disable aurora animations.
+   ============================================================ */
+
+html.macos-tahoe {
+  /* ── Spatial Background Tokens — Light ──────────────────── */
+
+  /* Root/window base (uses window-bg from foundations) */
+  --macos-spatial-bg: #f0f2f7;
+  --macos-spatial-bg-muted: #f5f5f7; /* Low-saturation, docs/demos */
+  --macos-wallpaper-overlay: rgba(
+    255,
+    255,
+    255,
+    0.62
+  ); /* Holds contrast over bright surfaces */
+  --macos-spatial-halo: radial-gradient(
+    ellipse 70% 50% at 50% 0%,
+    rgba(180, 210, 255, 0.55) 0%,
+    transparent 70%
+  );
+  --macos-spatial-blur: 80px;
+
+  /* Aurora color stops — light (original, not Apple assets) */
+  --macos-aurora-1: rgba(142, 200, 255, 0.45); /* soft blue */
+  --macos-aurora-2: rgba(100, 200, 240, 0.35); /* cyan-blue */
+  --macos-aurora-3: rgba(170, 150, 255, 0.28); /* soft indigo */
+  --macos-aurora-4: rgba(200, 160, 255, 0.22); /* soft violet */
+}
+
+html.macos-tahoe.dark {
+  /* ── Spatial Background Tokens — Dark ───────────────────── */
+  --macos-spatial-bg: #131318;
+  --macos-spatial-bg-muted: #1a1a20;
+  --macos-wallpaper-overlay: rgba(0, 0, 0, 0.52);
+  --macos-spatial-halo: radial-gradient(
+    ellipse 70% 50% at 50% 0%,
+    rgba(0, 80, 180, 0.3) 0%,
+    transparent 70%
+  );
+  --macos-spatial-blur: 80px;
+
+  /* Aurora color stops — dark */
+  --macos-aurora-1: rgba(18, 60, 100, 0.8); /* deep blue */
+  --macos-aurora-2: rgba(30, 50, 110, 0.7); /* indigo-navy */
+  --macos-aurora-3: rgba(55, 30, 100, 0.6); /* deep violet */
+  --macos-aurora-4: rgba(80, 20, 80, 0.45); /* deep purple */
+}
+
+/* ============================================================
+   .macos-window-surface
+   Plain surface using the window background token.
+   Use for standard window/panel areas without aurora.
+   ============================================================ */
+html.macos-tahoe .macos-window-surface {
+  background-color: var(--macos-spatial-bg);
+}
+
+/* ============================================================
+   .macos-bg-spatial-aurora
+   Primary spatial background: blue/cyan/indigo aurora gradients.
+   For root/window/hero — NOT inside components.
+   Light: soft blue aurora. Dark: deep navy/violet aurora.
+   ============================================================ */
+html.macos-tahoe .macos-bg-spatial-aurora {
+  position: relative;
+  background-color: var(--macos-spatial-bg);
+  overflow: hidden;
+  isolation: isolate;
+}
+
+html.macos-tahoe .macos-bg-spatial-aurora::before,
+html.macos-tahoe .macos-bg-spatial-aurora::after {
+  content: '';
+  position: absolute;
+  inset: -50%;
+  width: 200%;
+  height: 200%;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: 50%;
+  filter: blur(var(--macos-spatial-blur));
+  opacity: 1;
+  will-change: transform;
+}
+
+html.macos-tahoe .macos-bg-spatial-aurora::before {
+  background: radial-gradient(
+      circle at 28% 32%,
+      var(--macos-aurora-1) 0%,
+      transparent 42%
+    ),
+    radial-gradient(
+      circle at 72% 68%,
+      var(--macos-aurora-3) 0%,
+      transparent 42%
+    );
+  animation: macos-aurora-drift 22s ease-in-out infinite alternate;
+}
+
+html.macos-tahoe .macos-bg-spatial-aurora::after {
+  background: radial-gradient(
+      circle at 68% 28%,
+      var(--macos-aurora-2) 0%,
+      transparent 42%
+    ),
+    radial-gradient(
+      circle at 32% 72%,
+      var(--macos-aurora-4) 0%,
+      transparent 42%
+    );
+  animation: macos-aurora-drift 28s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes macos-aurora-drift {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(3%, -2%) scale(1.04);
+  }
+  66% {
+    transform: translate(-2%, 3%) scale(0.97);
+  }
+  100% {
+    transform: translate(2%, 1%) scale(1.02);
+  }
+}
+
+/* ============================================================
+   .macos-bg-spatial-depth
+   Sober/data-focused spatial background.
+   Light: warm neutral. Dark: graphite with subtle depth.
+   ============================================================ */
+html.macos-tahoe .macos-bg-spatial-depth {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+html.macos-tahoe:not(.dark) .macos-bg-spatial-depth {
+  background: linear-gradient(
+    160deg,
+    #f0f2f6 0%,
+    #eaedf4 40%,
+    #f2f0f8 70%,
+    #eef2f6 100%
+  );
+}
+
+html.macos-tahoe.dark .macos-bg-spatial-depth {
+  background: linear-gradient(
+    160deg,
+    #141418 0%,
+    #18181e 40%,
+    #191520 70%,
+    #141418 100%
+  );
+}
+
+/* Subtle halo using the token */
+html.macos-tahoe .macos-bg-spatial-depth::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--macos-spatial-halo);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ============================================================
+   .macos-bg-spatial-demo
+   Expressive spatial background for hero sections and showcases.
+   Includes a dim layer by default for text legibility.
+   Use only in documentation, landing, or showcase contexts.
+   ============================================================ */
+html.macos-tahoe .macos-bg-spatial-demo {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+html.macos-tahoe:not(.dark) .macos-bg-spatial-demo {
+  background: radial-gradient(
+      ellipse 80% 60% at 20% 10%,
+      rgba(100, 180, 255, 0.4) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 80% 80%,
+      rgba(160, 120, 255, 0.3) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 50% 40% at 60% 30%,
+      rgba(80, 210, 220, 0.22) 0%,
+      transparent 50%
+    ),
+    #f0f2f7;
+}
+
+html.macos-tahoe.dark .macos-bg-spatial-demo {
+  background: radial-gradient(
+      ellipse 80% 60% at 20% 10%,
+      rgba(0, 60, 160, 0.55) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 80% 80%,
+      rgba(80, 0, 160, 0.4) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 50% 40% at 60% 30%,
+      rgba(0, 100, 140, 0.3) 0%,
+      transparent 50%
+    ),
+    #101014;
+}
+
+/* Default dim layer on demo — keeps text legible */
+html.macos-tahoe .macos-bg-spatial-demo::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--macos-wallpaper-overlay);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ============================================================
+   .macos-wallpaper-overlay
+   Standalone overlay class for holding contrast over any
+   spatial background. Apply as a sibling/child element.
+   ============================================================ */
+html.macos-tahoe .macos-wallpaper-overlay {
+  background: var(--macos-wallpaper-overlay);
+}
+
+/* ============================================================
+   Accessibility: Reduced Motion
+   Disable aurora animations — keep static gradients.
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  html.macos-tahoe .macos-bg-spatial-aurora::before,
+  html.macos-tahoe .macos-bg-spatial-aurora::after {
+    animation: none !important;
+  }
+}
+
+/* ============================================================
+   Accessibility: Increased Contrast
+   Reduce aurora opacity to prevent interference with text contrast.
+   ============================================================ */
+@media (prefers-contrast: more) {
+  html.macos-tahoe .macos-bg-spatial-aurora::before,
+  html.macos-tahoe .macos-bg-spatial-aurora::after {
+    opacity: 0.15 !important;
+    filter: blur(120px) !important;
+  }
+
+  html.macos-tahoe:not(.dark) .macos-bg-spatial-demo {
+    background: #f5f5f7;
+  }
+
+  html.macos-tahoe.dark .macos-bg-spatial-demo {
+    background: #141418;
+  }
+}
+
+/* ============================================================
+   Accessibility: Reduced Transparency
+   Replace translucid overlay with opaque background.
+   ============================================================ */
+@media (prefers-reduced-transparency: reduce) {
+  html.macos-tahoe {
+    --macos-wallpaper-overlay: #f5f5f7;
+  }
+  html.macos-tahoe.dark {
+    --macos-wallpaper-overlay: #1a1a20;
+  }
+
+  html.macos-tahoe .macos-bg-spatial-aurora::before,
+  html.macos-tahoe .macos-bg-spatial-aurora::after {
+    display: none !important;
+  }
+
+  html.macos-tahoe .macos-bg-spatial-aurora {
+    background-color: var(--macos-spatial-bg-muted) !important;
+  }
+
+  html.macos-tahoe .macos-bg-spatial-demo::before {
+    background: var(--macos-wallpaper-overlay) !important;
+  }
+}

package/macos/tahoe/macos-buttons.css

@@ -0,0 +1,286 @@
+/* ============================================================
+   macOS Tahoe 26 — Button Overrides
+
+   Targets: Button (solid|ghost|transparent), Hamburger, TopupButton
+   Selector: html.macos-tahoe [data-tucu="button"]
+
+   References:
+   - Apple HIG > Buttons > macOS Tahoe 26 > Push Buttons
+   - Push button height: 22pt (regular), 28pt (large)
+   - Radius: 10pt (Tahoe control), font: 13pt Inter Medium
+   - Focus ring: 3px accent 48% opacity
+   6 states: default, hover, pressed, disabled, focus-visible, loading
+   ============================================================ */
+
+/* ── Base button ─────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='button'] {
+  border-radius: var(--macos-radius-control);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-body);
+  font-weight: var(--macos-font-weight-medium);
+  letter-spacing: var(--macos-tracking-13);
+  line-height: 1.4;
+  transition: background-color 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
+}
+
+/* Suppress the generic hover translate that conflicts with our overrides */
+html.macos-tahoe [data-tucu='button']:not(:disabled):not([aria-busy='true']) {
+  transform: none !important;
+}
+
+/* ── Solid variant: subtle shadow like native push button ──── */
+html.macos-tahoe [data-tucu='button'][data-variant='solid'] {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0.5px 0.5px rgba(0, 0, 0, 0.08),
+    inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
+}
+html.macos-tahoe [data-tucu='button'][data-variant='solid']:hover {
+  filter: brightness(1.06);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 0.5px 0.5px rgba(0, 0, 0, 0.1),
+    inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
+}
+html.macos-tahoe [data-tucu='button'][data-variant='solid']:active {
+  filter: brightness(0.94);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='solid'] {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
+    inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='solid']:hover {
+  filter: brightness(1.08);
+}
+
+/* ── Ghost variant: subtle border ──────────────────────────── */
+html.macos-tahoe [data-tucu='button'][data-variant='ghost'] {
+  background-color: var(--macos-control-bg) !important;
+  border: 0.5px solid var(--macos-separator) !important;
+  color: var(--macos-label) !important;
+  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1),
+    inset 0 0.5px 0 rgba(255, 255, 255, 0.6);
+}
+html.macos-tahoe [data-tucu='button'][data-variant='ghost']:hover {
+  background-color: var(--macos-control-bg-hover) !important;
+  filter: none;
+}
+html.macos-tahoe [data-tucu='button'][data-variant='ghost']:active {
+  background-color: var(--macos-control-bg-active) !important;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='ghost'] {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.12) !important;
+  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.25);
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='ghost']:hover {
+  background-color: rgba(255, 255, 255, 0.14) !important;
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='ghost']:active {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* ── Transparent variant ───────────────────────────────────── */
+html.macos-tahoe [data-tucu='button'][data-variant='transparent'] {
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--macos-control-accent) !important;
+}
+html.macos-tahoe [data-tucu='button'][data-variant='transparent']:hover {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+html.macos-tahoe [data-tucu='button'][data-variant='transparent']:active {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='transparent'] {
+  color: var(--macos-control-accent) !important;
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='transparent']:hover {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+html.macos-tahoe.dark [data-tucu='button'][data-variant='transparent']:active {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ── Shape overrides ───────────────────────────────────────── */
+html.macos-tahoe [data-tucu='button'][data-shape='pill'],
+html.macos-tahoe [data-tucu='button'][data-shape='circle'] {
+  border-radius: var(--macos-radius-full);
+}
+
+/* ── Size overrides: match macOS native control sizes ──────── */
+html.macos-tahoe [data-tucu='button'][data-size='large'] {
+  min-height: 28px;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: var(--macos-font-size-title3);
+}
+html.macos-tahoe [data-tucu='button'][data-size='medium'] {
+  min-height: var(--macos-control-height);
+  padding-left: 16px;
+  padding-right: 16px;
+  font-size: var(--macos-font-size-body);
+}
+html.macos-tahoe [data-tucu='button'][data-size='small'] {
+  min-height: var(--macos-control-height);
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: var(--macos-font-size-body);
+}
+html.macos-tahoe [data-tucu='button'][data-size='mini'] {
+  min-height: var(--macos-control-height-sm);
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: var(--macos-font-size-callout);
+}
+html.macos-tahoe [data-tucu='button'][data-size='tiny'] {
+  min-height: var(--macos-control-height-mini);
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: var(--macos-font-size-subheadline);
+}
+
+/* ── Focus ring ────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='button']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+/* ── Disabled state ────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='button']:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* ── Responsive: larger touch targets on mobile ──────────────── */
+@media (max-width: 767px) {
+  html.macos-tahoe [data-tucu='button'] {
+    min-height: 44px;
+  }
+}
+
+/* ============================================================
+   macOS Tahoe 26 — Button Overrides (Liquid Glass)
+   ============================================================ */
+
+/* ── Tahoe Solid (Prominent Material) ───────────────────────── */
+html.macos-tahoe [data-tucu='button'][data-variant='solid'] {
+  background: var(--macos-glass-prominent-bg);
+  backdrop-filter: blur(var(--macos-glass-prominent-blur)) saturate(200%);
+  -webkit-backdrop-filter: blur(var(--macos-glass-prominent-blur))
+    saturate(200%);
+  border: 1px solid var(--macos-glass-prominent-border);
+  box-shadow: var(--macos-glass-shadow), var(--macos-glass-highlight);
+  color: var(--macos-label);
+}
+html.macos-tahoe [data-tucu='button'][data-variant='solid']:hover {
+  background: var(--macos-glass-regular-bg);
+  filter: brightness(1.1);
+}
+html.macos-tahoe [data-tucu='button'][data-variant='solid']:active {
+  background: var(--macos-glass-dim-layer);
+  filter: brightness(0.9);
+}
+
+/* ── Tahoe Ghost (Clear/Regular Material) ───────────────────── */
+html.macos-tahoe [data-tucu='button'][data-variant='ghost'] {
+  background: var(--macos-glass-clear-bg);
+  backdrop-filter: blur(var(--macos-glass-clear-blur));
+  -webkit-backdrop-filter: blur(var(--macos-glass-clear-blur));
+  border: 1px solid var(--macos-glass-clear-border);
+}
+html.macos-tahoe [data-tucu='button'][data-variant='ghost']:hover {
+  background: var(--macos-glass-regular-bg);
+  backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%);
+  -webkit-backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%);
+  border: 1px solid var(--macos-glass-regular-border);
+  box-shadow: var(--macos-glass-shadow), var(--macos-glass-highlight);
+}
+
+/* ── Tahoe Transparent (Plain) ──────────────────────────────── */
+html.macos-tahoe [data-tucu='button'][data-variant='transparent']:hover {
+  background: var(--macos-glass-clear-bg);
+  backdrop-filter: blur(var(--macos-glass-clear-blur));
+  -webkit-backdrop-filter: blur(var(--macos-glass-clear-blur));
+  border-radius: var(--macos-radius-md);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  html.macos-tahoe [data-tucu='button'][data-variant='solid'],
+  html.macos-tahoe [data-tucu='button'][data-variant='ghost'],
+  html.macos-tahoe [data-tucu='button'][data-variant='transparent']:hover {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+}
+
+/* ── Hamburger button ────────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='hamburger'] {
+  border-radius: var(--macos-radius-control);
+  background-color: transparent;
+  border: none;
+  transition: background-color 0.1s ease;
+}
+
+html.macos-tahoe [data-tucu='hamburger']:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+html.macos-tahoe [data-tucu='hamburger']:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+html.macos-tahoe [data-tucu='hamburger']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos-tahoe.dark [data-tucu='hamburger']:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+html.macos-tahoe.dark [data-tucu='hamburger']:active {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+/* ── TopupButton ─────────────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='topup-button'] {
+  border-radius: var(--macos-radius-control);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-body);
+  font-weight: var(--macos-font-weight-medium);
+  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
+  transition: filter 0.1s ease, box-shadow 0.1s ease;
+}
+
+html.macos-tahoe [data-tucu='topup-button']:hover {
+  filter: brightness(1.05);
+}
+
+html.macos-tahoe [data-tucu='topup-button']:active {
+  filter: brightness(0.95);
+}
+
+html.macos-tahoe [data-tucu='topup-button']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+/* ── Loading state ───────────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='button'][aria-busy='true'] {
+  opacity: 0.7;
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos-tahoe [data-tucu='button'],
+  html.macos-tahoe [data-tucu='hamburger'],
+  html.macos-tahoe [data-tucu='topup-button'] {
+    transition: none;
+  }
+}