@e-burgos/tucu-ui 2.7.2 → 2.8.0

package/macos/tahoe/macos-layouts.css

@@ -0,0 +1,438 @@
+/* ============================================================
+   macOS Tahoe 26 — Layout Overrides (updated Fase 6)
+
+   Targets: Header, AdminLayout, HorizontalLayout, Sidebar,
+            Menus, Scrollbar, Main content
+   Selectors: html.macos-tahoe [data-tucu="..."]
+
+   References:
+   - Apple HIG > Sidebars: 240pt width, translucent material
+   - Apple HIG > Toolbars: 52pt height, glass regular
+   - macOS titlebar: 28pt, scrollbar: thin auto-hide overlay
+   ============================================================ */
+
+/* ── Header / Toolbar area ───────────────────────────────────── */
+html.macos-tahoe [data-tucu='header'] {
+  height: var(--macos-toolbar-height);
+  background-color: var(--macos-glass-regular-bg);
+  backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6);
+  -webkit-backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6);
+  border-bottom: 0.5px solid var(--macos-glass-border);
+  padding: 0 var(--macos-space-4);
+  display: flex;
+  align-items: center;
+}
+
+html.macos-tahoe.dark [data-tucu='header'] {
+  background-color: var(--macos-glass-regular-bg);
+  border-bottom-color: var(--macos-glass-border);
+}
+
+/* ── Admin Header ────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='admin-header'] {
+  height: var(--macos-toolbar-height) !important;
+  min-height: var(--macos-toolbar-height) !important;
+  background-color: var(--macos-glass-regular-bg) !important;
+  backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6) !important;
+  -webkit-backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6) !important;
+  border-bottom: 0.5px solid var(--macos-glass-border) !important;
+  box-shadow: none !important;
+  padding: 0 var(--macos-space-4) !important;
+}
+
+html.macos-tahoe.dark [data-tucu='admin-header'] {
+  background-color: var(--macos-glass-regular-bg) !important;
+  border-bottom-color: var(--macos-glass-border) !important;
+}
+
+/* ── Horizontal Header ───────────────────────────────────────── */
+html.macos-tahoe [data-tucu='horizontal-header'] {
+  height: var(--macos-toolbar-height) !important;
+  min-height: var(--macos-toolbar-height) !important;
+  background-color: var(--macos-glass-regular-bg) !important;
+  backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6) !important;
+  -webkit-backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6) !important;
+  border-bottom: 0.5px solid var(--macos-glass-border) !important;
+  box-shadow: none !important;
+  font-family: var(--macos-font-family) !important;
+}
+
+html.macos-tahoe.dark [data-tucu='horizontal-header'] {
+  background-color: var(--macos-glass-regular-bg) !important;
+  border-bottom-color: var(--macos-glass-border) !important;
+}
+
+/* ── Admin Layout ────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='admin-layout'] {
+  background-color: var(--macos-window-bg);
+  font-family: var(--macos-font-family);
+}
+
+html.macos-tahoe.dark [data-tucu='admin-layout'] {
+  background-color: var(--macos-window-bg);
+}
+
+html.macos-tahoe [data-tucu='admin-content'] {
+  background-color: var(--macos-window-bg);
+}
+
+html.macos-tahoe.dark [data-tucu='admin-content'] {
+  background-color: var(--macos-window-bg);
+}
+
+/* ── Horizontal Layout ───────────────────────────────────────── */
+html.macos-tahoe [data-tucu='horizontal-layout'] {
+  background-color: var(--macos-window-bg);
+  font-family: var(--macos-font-family);
+}
+
+html.macos-tahoe.dark [data-tucu='horizontal-layout'] {
+  background-color: var(--macos-window-bg);
+}
+
+html.macos-tahoe [data-tucu='horizontal-content'] {
+  background-color: var(--macos-window-bg);
+}
+
+html.macos-tahoe.dark [data-tucu='horizontal-content'] {
+  background-color: var(--macos-window-bg);
+}
+
+/* ── Expandable Sidebar ──────────────────────────────────────── */
+html.macos-tahoe [data-tucu='expandable-sidebar'] {
+  background-color: var(--macos-glass-regular-bg) !important;
+  backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6) !important;
+  -webkit-backdrop-filter: blur(var(--macos-glass-blur, 28px)) saturate(1.6) !important;
+  border-right: 0.5px solid var(--macos-glass-border) !important;
+  border-left: none !important;
+  font-family: var(--macos-font-family) !important;
+}
+
+html.macos-tahoe.dark [data-tucu='expandable-sidebar'] {
+  background-color: var(--macos-glass-regular-bg) !important;
+  border-right-color: var(--macos-glass-border) !important;
+}
+
+/* Fallback for no backdrop-filter */
+@supports not (backdrop-filter: blur(1px)) {
+  html.macos-tahoe [data-tucu='admin-header'],
+  html.macos-tahoe [data-tucu='horizontal-header'],
+  html.macos-tahoe [data-tucu='expandable-sidebar'] {
+    background-color: var(--macos-glass-regular-bg-opaque) !important;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  html.macos-tahoe [data-tucu='admin-header'],
+  html.macos-tahoe [data-tucu='horizontal-header'],
+  html.macos-tahoe [data-tucu='expandable-sidebar'] {
+    background-color: var(--macos-glass-regular-bg-opaque) !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+}
+
+/* ── Main content area ───────────────────────────────────────── */
+html.macos-tahoe [data-tucu='main-content'] {
+  background-color: var(--macos-window-bg);
+  padding: var(--macos-content-padding);
+}
+
+html.macos-tahoe.dark [data-tucu='main-content'] {
+  background-color: var(--macos-window-bg);
+}
+
+/* ── macOS-style scrollbars ──────────────────────────────────── */
+html.macos-tahoe ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+html.macos-tahoe ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+html.macos-tahoe ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: var(--macos-radius-full);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+html.macos-tahoe ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+html.macos-tahoe.dark ::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+html.macos-tahoe.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+/* Auto-hide scrollbar when not scrolling (overlay style) */
+html.macos-tahoe {
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  scrollbar-width: thin;
+}
+
+html.macos-tahoe.dark {
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+}
+
+/* ── Window-level background ─────────────────────────────────── */
+html.macos-tahoe body {
+  background-color: var(--macos-window-bg);
+}
+
+html.macos-tahoe.dark body {
+  background-color: var(--macos-window-bg);
+}
+
+/* In Tahoe mode, body gets the aurora gradient (visible in padding areas) */
+html.dark.macos-tahoe body {
+  background: radial-gradient(
+      ellipse at 15% 20%,
+      rgba(30, 100, 255, 0.85),
+      transparent 42%
+    ),
+    radial-gradient(
+      ellipse at 82% 72%,
+      rgba(120, 60, 240, 0.72),
+      transparent 46%
+    ),
+    radial-gradient(
+      ellipse at 50% 100%,
+      rgba(60, 40, 160, 0.45),
+      transparent 36%
+    ),
+    linear-gradient(170deg, #0c1428 0%, #090e1e 60%, #060b16 100%);
+}
+
+html.light.macos-tahoe body {
+  background: radial-gradient(
+      ellipse at 10% 15%,
+      rgba(90, 170, 255, 0.44),
+      transparent 38%
+    ),
+    radial-gradient(
+      ellipse at 85% 80%,
+      rgba(160, 210, 255, 0.46),
+      transparent 42%
+    ),
+    linear-gradient(170deg, #c8e6ff 0%, #d4edff 50%, #bcd8f0 100%);
+}
+
+/* ── Documentation content width in macOS ───────────────────── */
+html.macos-tahoe
+  [data-tucu='macos-layout-content-inner']
+  > div[class*='space-y-8'][class*='pt-8'][class*='max-w-6xl'] {
+  max-width: 96rem !important;
+}
+
+html.macos-tahoe
+  [data-tucu='macos-layout-content-inner']
+  > div.relative.scroll-smooth
+  div[class*='space-y-8'][class*='pt-8'][class*='max-w-7xl'] {
+  max-width: 96rem !important;
+}
+
+/* ── Divider / Separator ─────────────────────────────────────── */
+html.macos-tahoe hr,
+html.macos-tahoe [data-tucu='divider'] {
+  border: none;
+  height: 1px;
+  background-color: var(--macos-separator);
+  margin: var(--macos-space-4) 0;
+}
+
+/* ── Container max-widths (for content areas) ────────────────── */
+html.macos-tahoe [data-tucu='container'] {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--macos-content-padding);
+  padding-right: var(--macos-content-padding);
+}
+
+/* ── macOS Tahoe layout surface tokens ───────────────────────── */
+html.light.macos-tahoe {
+  --macos-tahoe-root-bg: radial-gradient(
+      ellipse at 10% 15%,
+      rgba(90, 170, 255, 0.46),
+      transparent 38%
+    ),
+    radial-gradient(
+      ellipse at 85% 80%,
+      rgba(160, 210, 255, 0.5),
+      transparent 42%
+    ),
+    radial-gradient(
+      ellipse at 50% 0%,
+      rgba(120, 190, 250, 0.34),
+      transparent 28%
+    ),
+    linear-gradient(170deg, #c8e6ff 0%, #d4edff 50%, #bcd8f0 100%);
+  --macos-tahoe-sidebar-bg: rgba(227, 241, 249, 0.72);
+  --macos-tahoe-panel-bg: rgba(255, 255, 255, 0.58);
+  --macos-tahoe-toolbar-bg: rgba(255, 255, 255, 0.32);
+  --macos-separator: var(--color-semantic-line-primary-subtle);
+  --macos-tahoe-border: var(--color-semantic-line-primary-subtle);
+  --macos-tahoe-text: var(--color-semantic-fg, #273642);
+  --macos-tahoe-text-muted: var(--color-semantic-fg-muted, rgba(39, 54, 66, 0.66));
+  --macos-tahoe-accent: var(--color-brand, #0b84ff);
+  --macos-tahoe-selection: color-mix(
+    in srgb,
+    var(--color-brand, #0b84ff) 15%,
+    transparent
+  );
+  --macos-tahoe-hover: rgba(255, 255, 255, 0.3);
+  --macos-tahoe-sidebar-item-text: var(--color-semantic-fg, rgba(41, 54, 65, 0.9));
+  --macos-tahoe-sidebar-item-icon: var(--color-semantic-fg-muted, rgba(67, 82, 95, 0.82));
+  --macos-tahoe-sidebar-item-active-bg: rgba(231, 237, 243, 0.88);
+  --macos-tahoe-sidebar-item-active-text: color-mix(
+    in srgb,
+    var(--color-brand, #0b84ff) 70%,
+    #000
+  );
+  --macos-tahoe-sidebar-item-active-icon: color-mix(
+    in srgb,
+    var(--color-brand, #0b84ff) 70%,
+    #000
+  );
+  --macos-tahoe-sidebar-item-active-stroke: rgba(162, 178, 192, 0.6);
+  --macos-tahoe-sidebar-item-hover-bg: rgba(255, 255, 255, 0.14);
+  --macos-tahoe-sidebar-shadow: 0 28px 60px rgba(89, 120, 141, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.55);
+  --macos-tahoe-shell-shadow: 0 32px 72px rgba(84, 109, 130, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.48);
+}
+
+html.dark.macos-tahoe {
+  --macos-tahoe-root-bg: radial-gradient(
+      ellipse at 15% 20%,
+      rgba(30, 100, 255, 0.88),
+      transparent 42%
+    ),
+    radial-gradient(
+      ellipse at 80% 75%,
+      rgba(120, 60, 240, 0.75),
+      transparent 46%
+    ),
+    radial-gradient(ellipse at 55% 5%, rgba(20, 70, 200, 0.55), transparent 30%),
+    radial-gradient(
+      ellipse at 50% 100%,
+      rgba(60, 30, 150, 0.42),
+      transparent 36%
+    ),
+    linear-gradient(170deg, #0c1428 0%, #090e1e 60%, #060b16 100%);
+  --macos-tahoe-sidebar-bg: rgba(14, 20, 30, 0.76);
+  --macos-tahoe-panel-bg: rgba(34, 40, 47, 0.74);
+  --macos-tahoe-toolbar-bg: rgba(19, 24, 30, 0.48);
+  --macos-separator: var(--color-semantic-dark-line-primary-subtle);
+  --macos-tahoe-border: var(--color-semantic-dark-line-primary-subtle);
+  --macos-tahoe-text: var(--color-semantic-dark-fg, rgba(255, 255, 255, 0.92));
+  --macos-tahoe-text-muted: var(--color-semantic-dark-fg-muted, rgba(255, 255, 255, 0.5));
+  --macos-tahoe-accent: var(--color-brand, #3aa5ff);
+  --macos-tahoe-selection: color-mix(
+    in srgb,
+    var(--color-brand, #3aa5ff) 18%,
+    transparent
+  );
+  --macos-tahoe-hover: rgba(255, 255, 255, 0.06);
+  --macos-tahoe-sidebar-item-text: var(--color-semantic-dark-fg, rgba(255, 255, 255, 0.88));
+  --macos-tahoe-sidebar-item-icon: var(--color-semantic-dark-fg-muted, rgba(255, 255, 255, 0.5));
+  --macos-tahoe-sidebar-item-active-bg: color-mix(
+    in srgb,
+    var(--color-brand, #3aa5ff) 15%,
+    transparent
+  );
+  --macos-tahoe-sidebar-item-active-text: rgba(255, 255, 255, 0.96);
+  --macos-tahoe-sidebar-item-active-icon: var(--color-brand, #3aa5ff);
+  --macos-tahoe-sidebar-item-active-stroke: color-mix(
+    in srgb,
+    var(--color-brand, #3aa5ff) 30%,
+    transparent
+  );
+  --macos-tahoe-sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
+  --macos-tahoe-sidebar-shadow: 0 28px 60px rgba(0, 0, 0, 0.34),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --macos-tahoe-shell-shadow: 0 36px 84px rgba(0, 0, 0, 0.34),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-root'] {
+  background: transparent !important;
+}
+
+/* Override --color-body so the fixed theme-wrapper becomes transparent in Tahoe,
+   allowing the body aurora gradient to show through */
+html.macos-tahoe {
+  --color-body: transparent;
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-sidebar'] {
+  box-shadow: var(--macos-tahoe-sidebar-shadow);
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-shell'] {
+  box-shadow: var(--macos-tahoe-shell-shadow);
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-sidebar-top'] {
+  border-bottom: 1px solid var(--macos-tahoe-border);
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-content'] {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.08),
+    transparent 22%
+  );
+}
+
+html.dark.macos-tahoe [data-tucu='macos-tahoe-content'] {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.03),
+    transparent 22%
+  );
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-toolbar-center'] {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+html.macos-tahoe [data-tucu='macos-tahoe-drawer'] {
+  box-shadow: var(--macos-tahoe-sidebar-shadow);
+}
+
+/* Reset link color inside Tahoe sidebar & TOC — items use Tailwind text classes */
+html.macos-tahoe.macos-tahoe [data-tucu='macos-tahoe-sidebar'] a,
+html.macos-tahoe.macos-tahoe [data-tucu='macos-tahoe-drawer'] a,
+html.macos-tahoe.macos-tahoe [data-tucu='macos-tahoe-toc'] a,
+html.macos-tahoe.macos-tahoe [data-tucu='macos-tahoe-sidebar'] a:hover,
+html.macos-tahoe.macos-tahoe [data-tucu='macos-tahoe-drawer'] a:hover,
+html.macos-tahoe.macos-tahoe [data-tucu='macos-tahoe-toc'] a:hover {
+  color: inherit;
+}
+
+html.macos-tahoe.macos-tahoe [data-tucu='drawer'] {
+  background: transparent;
+  background-color: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
+  border-left: 0;
+}
+
+html.macos-tahoe.dark.macos-tahoe [data-tucu='drawer'] {
+  background: transparent;
+  background-color: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  box-shadow: none;
+  border-left: 0;
+  border-left-color: transparent;
+}