@e-burgos/tucu-ui 2.7.3 → 2.8.1

package/macos/index.css

@@ -0,0 +1,15 @@
+/* ============================================================
+   macOS Themes — CSS Overrides Barrel
+   Sonoma 14 and Tahoe 26 are fully independent.
+   Each sub-barrel imports fonts → foundations → components.
+   ============================================================ */
+
+@import './sonoma/index.css';
+@import './tahoe/index.css';
+
+/* ── Navbar typography overrides ────────────────────────────────── */
+html.macos [data-tucu*='navbar-toolbar'] a,
+html.macos [data-tucu*='navbar-toolbar'] span {
+  font-family: var(--macos-font-family) !important;
+  text-transform: none !important;
+}

package/macos/sonoma/index.css

@@ -0,0 +1,34 @@
+/* ============================================================
+   macOS Sonoma 14 — CSS Overrides Barrel
+   Import order matters: fonts first, then foundations, then components
+   ============================================================ */
+
+@import './macos-fonts.css';
+@import './macos-foundations.css';
+@import './macos-liquid-glass.css';
+@import './macos-backgrounds.css';
+
+/* Shell: Window, Toolbar, Sidebar */
+@import './macos-window.css';
+@import './macos-toolbar.css';
+@import './macos-sidebar.css';
+
+/* High-visibility components */
+@import './macos-buttons.css';
+@import './macos-selection.css';
+@import './macos-cards.css';
+@import './macos-inputs.css';
+@import './macos-dialogs.css';
+
+/* Data & navigation */
+@import './macos-tables.css';
+@import './macos-navigation.css';
+@import './macos-menus.css';
+@import './macos-content.css';
+@import './macos-feedback.css';
+
+/* Typography, layouts, misc */
+@import './macos-typography.css';
+@import './macos-layouts.css';
+@import './macos-auth.css';
+@import './macos-misc.css';

package/macos/sonoma/macos-auth.css

@@ -0,0 +1,162 @@
+/* ============================================================
+   macOS Sonoma 14 — Auth & Blockchain Component Overrides
+
+   Targets: SignInForm, SignUpForm, ForgetPasswordForm, ResetPinForm,
+            CoinCard, CoinInfoCard, CollectionCard, LivePriceFeed
+   Selectors: html.macos [data-tucu="auth-form"], etc.
+
+   References:
+   - Apple HIG > Forms: grouped table style, radius-xl
+   - Apple HIG > Typography: Label/SecondaryLabel system colors
+   - Crypto: monospace numbers, system green/red for price changes
+   ============================================================ */
+
+/* ══ AUTH FORMS ══════════════════════════════════════════════ */
+
+html.macos [data-tucu='auth-form'] {
+  font-family: var(--macos-font-family);
+}
+
+html.macos [data-tucu='auth-form-panel'] {
+  background-color: var(--macos-content-bg) !important;
+  border: 0.5px solid var(--macos-separator);
+  border-radius: var(--macos-radius-xl);
+  box-shadow: var(--macos-shadow-window);
+  padding: var(--macos-space-6) !important;
+}
+
+html.macos.dark [data-tucu='auth-form-panel'] {
+  background-color: var(--macos-content-bg) !important;
+  border-color: var(--macos-separator);
+}
+
+/* Auth form headings use macOS title2 */
+html.macos [data-tucu='auth-form-panel'] h2 {
+  font-size: 17px;
+  font-weight: var(--macos-font-weight-semibold);
+  letter-spacing: -0.4px;
+  color: var(--macos-label);
+}
+
+/* Auth form description */
+html.macos [data-tucu='auth-form-panel'] p {
+  font-size: var(--macos-font-size-body);
+  color: var(--macos-secondary-label);
+}
+
+/* Inline error in auth form */
+html.macos [data-tucu='auth-form-panel'] [role='alert'] {
+  border-radius: var(--macos-radius-control);
+  border-color: var(--macos-system-red) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--macos-system-red) 10%,
+    var(--macos-content-bg)
+  ) !important;
+  color: var(--macos-system-red) !important;
+  font-size: var(--macos-font-size-callout);
+  font-family: var(--macos-font-family);
+}
+
+/* Inline success in auth form */
+html.macos [data-tucu='auth-form-panel'] .bg-green-50,
+html.macos [data-tucu='auth-form-panel'] [class*='bg-green'] {
+  border-color: var(--macos-system-green) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--macos-system-green) 10%,
+    var(--macos-content-bg)
+  ) !important;
+  color: var(--macos-system-green) !important;
+  border-radius: var(--macos-radius-control);
+}
+
+/* ══ BLOCKCHAIN COMPONENTS ═══════════════════════════════════ */
+
+/* ── Coin Card ───────────────────────────────────────────────── */
+
+html.macos [data-tucu='coin-card'] {
+  border-radius: var(--macos-radius-xl) !important;
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  box-shadow: var(--macos-shadow-card);
+  transition: box-shadow var(--macos-transition-fast);
+  font-family: var(--macos-font-family);
+}
+
+html.macos [data-tucu='coin-card']:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+html.macos.dark [data-tucu='coin-card'] {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Coin card label: use callout uppercase */
+html.macos [data-tucu='coin-card'] h4 {
+  font-size: var(--macos-font-size-callout);
+  font-weight: var(--macos-font-weight-semibold);
+  letter-spacing: 0.04em;
+}
+
+/* ── Coin Info Card ──────────────────────────────────────────── */
+
+html.macos [data-tucu='coin-info-card'] {
+  background-color: var(--macos-content-bg) !important;
+  border: 0.5px solid var(--macos-separator);
+  border-radius: var(--macos-radius-control) !important;
+  box-shadow: var(--macos-shadow-card);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-body);
+}
+
+html.macos [data-tucu='coin-info-card'] > div:first-child {
+  gap: 0.75rem;
+}
+
+html.macos.dark [data-tucu='coin-info-card'] {
+  background-color: var(--macos-content-bg) !important;
+  border-color: var(--macos-separator);
+}
+
+/* ── Collection Card ─────────────────────────────────────────── */
+
+html.macos [data-tucu='collection-card'] {
+  border-radius: var(--macos-radius-xl) !important;
+  overflow: hidden;
+  box-shadow: var(--macos-shadow-card);
+  transition: transform var(--macos-transition-fast),
+    box-shadow var(--macos-transition-fast);
+  font-family: var(--macos-font-family);
+}
+
+html.macos [data-tucu='collection-card']:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+}
+
+/* ── Live Price Feed (positive/negative) ─────────────────────── */
+
+html.macos .price-up,
+html.macos [class*='text-green'] {
+  color: var(--macos-system-green) !important;
+}
+
+html.macos .price-down,
+html.macos [class*='text-red-5'] {
+  color: var(--macos-system-red) !important;
+}
+
+/* Monospace for crypto values */
+html.macos [data-tucu='coin-card'] span[class*='font-medium'],
+html.macos [data-tucu='coin-info-card'] span[class*='font-medium'] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos [data-tucu='coin-card'],
+  html.macos [data-tucu='collection-card'] {
+    transition: none;
+  }
+}

package/macos/sonoma/macos-backgrounds.css

@@ -0,0 +1,314 @@
+/* ============================================================
+   macOS Sonoma 14 — Spatial Backgrounds
+
+   Original CSS-generated spatial backgrounds inspired by macOS Sonoma.
+   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 {
+  /* ── 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.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 .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 .macos-bg-spatial-aurora {
+  position: relative;
+  background-color: var(--macos-spatial-bg);
+  overflow: hidden;
+  isolation: isolate;
+}
+
+html.macos .macos-bg-spatial-aurora::before,
+html.macos .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 .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 .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 .macos-bg-spatial-depth {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+html.macos:not(.dark) .macos-bg-spatial-depth {
+  background: linear-gradient(
+    160deg,
+    #f0f2f6 0%,
+    #eaedf4 40%,
+    #f2f0f8 70%,
+    #eef2f6 100%
+  );
+}
+
+html.macos.dark .macos-bg-spatial-depth {
+  background: linear-gradient(
+    160deg,
+    #141418 0%,
+    #18181e 40%,
+    #191520 70%,
+    #141418 100%
+  );
+}
+
+/* Subtle halo using the token */
+html.macos .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 .macos-bg-spatial-demo {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+html.macos: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.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 .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 .macos-wallpaper-overlay {
+  background: var(--macos-wallpaper-overlay);
+}
+
+/* ============================================================
+   Accessibility: Reduced Motion
+   Disable aurora animations — keep static gradients.
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  html.macos .macos-bg-spatial-aurora::before,
+  html.macos .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 .macos-bg-spatial-aurora::before,
+  html.macos .macos-bg-spatial-aurora::after {
+    opacity: 0.15 !important;
+    filter: blur(120px) !important;
+  }
+
+  html.macos:not(.dark) .macos-bg-spatial-demo {
+    background: #f5f5f7;
+  }
+
+  html.macos.dark .macos-bg-spatial-demo {
+    background: #141418;
+  }
+}
+
+/* ============================================================
+   Accessibility: Reduced Transparency
+   Replace translucid overlay with opaque background.
+   ============================================================ */
+@media (prefers-reduced-transparency: reduce) {
+  html.macos {
+    --macos-wallpaper-overlay: #f5f5f7;
+  }
+  html.macos.dark {
+    --macos-wallpaper-overlay: #1a1a20;
+  }
+
+  html.macos .macos-bg-spatial-aurora::before,
+  html.macos .macos-bg-spatial-aurora::after {
+    display: none !important;
+  }
+
+  html.macos .macos-bg-spatial-aurora {
+    background-color: var(--macos-spatial-bg-muted) !important;
+  }
+
+  html.macos .macos-bg-spatial-demo::before {
+    background: var(--macos-wallpaper-overlay) !important;
+  }
+}