@e-burgos/tucu-ui 2.7.2 → 2.8.0

package/macos/tahoe/macos-cards.css

@@ -0,0 +1,125 @@
+/* ============================================================
+   macOS Tahoe 26 — Card Overrides
+
+   Targets: Card, CardContainer, InfoCard, PanelCard, StatsCard,
+            WalletCard, TransactionCard
+   Selector: html.macos-tahoe [data-tucu="card"]
+
+   References:
+   - Apple HIG Tahoe > Grouped content: solid surface, radius-xl
+   - Radius: var(--macos-radius-xl) = 12pt
+   - Shadow: diffuse multi-layer (light), heavier (dark)
+   - Border: 0.5px separator color
+   ============================================================ */
+
+/* ── Base card ───────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='card'] {
+  border-radius: var(--macos-radius-xl);
+  border: 0.5px solid var(--macos-tahoe-border);
+  background-color: var(--macos-content-bg);
+  box-shadow: var(--macos-shadow-card);
+  transition: box-shadow var(--macos-transition-normal),
+    border-color var(--macos-transition-normal);
+}
+
+html.macos-tahoe [data-tucu='card']:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Dark mode ───────────────────────────────────────────────── */
+html.macos-tahoe.dark [data-tucu='card'] {
+  background-color: var(--macos-content-bg);
+  border-color: var(--macos-tahoe-border);
+  box-shadow: var(--macos-shadow-card);
+}
+
+html.macos-tahoe.dark [data-tucu='card']:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+/* ── Card header (internal) ──────────────────────────────────── */
+html.macos-tahoe [data-tucu='card-header'] {
+  border-bottom: 1px solid var(--macos-tahoe-border);
+  padding: var(--macos-space-3) var(--macos-space-4);
+  font-weight: var(--macos-font-weight-semibold);
+  font-size: var(--macos-font-size-body);
+}
+
+/* ── Card body ───────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='card-body'] {
+  padding: var(--macos-space-4);
+}
+
+/* ── Stats / Info cards: tighter padding ─────────────────────── */
+html.macos-tahoe [data-tucu='stats-card'] {
+  border-radius: var(--macos-radius-xl);
+  border: 0.5px solid var(--macos-tahoe-border);
+  background-color: var(--macos-content-bg);
+  box-shadow: var(--macos-shadow-card);
+  padding: var(--macos-space-3) var(--macos-space-4);
+}
+
+html.macos-tahoe.dark [data-tucu='stats-card'] {
+  background-color: var(--macos-content-bg);
+  border-color: var(--macos-tahoe-border);
+}
+
+/* ── Panel card (section containers) ─────────────────────────── */
+html.macos-tahoe [data-tucu='panel-card'] {
+  border-radius: var(--macos-radius-xl);
+  border: 1px solid var(--macos-tahoe-border);
+  background-color: var(--macos-gray6);
+  box-shadow: none;
+}
+
+html.macos-tahoe.dark [data-tucu='panel-card'] {
+  background-color: var(--macos-gray5);
+  border-color: var(--macos-tahoe-border);
+}
+
+/* ── CardTitle (section with floating label) ─────────────────── */
+html.macos-tahoe [data-tucu='card-title'] {
+  border-radius: var(--macos-radius-xl);
+  border-color: var(--macos-tahoe-border);
+}
+
+html.macos-tahoe.dark [data-tucu='card-title'] {
+  border-color: var(--macos-tahoe-border);
+}
+
+/* Floating label inherits card bg so it blends with the parent */
+html.macos-tahoe [data-tucu='card-title-label'] {
+  background-color: var(--macos-control-bg);
+  border-radius: var(--macos-radius-md);
+  font-size: var(--macos-type-heading-lg-size);
+  line-height: var(--macos-type-heading-lg-leading);
+  font-weight: var(--macos-font-weight-semibold);
+  letter-spacing: var(--macos-type-heading-lg-tracking);
+  color: var(--macos-label);
+}
+
+html.macos-tahoe.dark [data-tucu='card-title-label'] {
+  background-color: var(--macos-control-bg);
+  color: var(--macos-label);
+}
+
+/* ============================================================
+   macOS Tahoe 26 — Cards & Data (Standard material)
+   ============================================================ */
+
+/* Data Display cards should keep readability using standard or opaque materials */
+html.macos-tahoe [data-tucu='card'],
+html.macos-tahoe [data-tucu='panel-card'],
+html.macos-tahoe [data-tucu='info-card'] {
+  background: var(--color-semantic-elevation-1);
+  border: 1px solid var(--macos-tahoe-border);
+  border-radius: var(--macos-radius-lg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+html.macos-tahoe.dark [data-tucu='card'],
+html.macos-tahoe.dark [data-tucu='panel-card'],
+html.macos-tahoe.dark [data-tucu='info-card'] {
+  background: var(--color-semantic-elevation-2);
+  border-color: var(--macos-tahoe-border);
+}

package/macos/tahoe/macos-content.css

@@ -0,0 +1,157 @@
+/* ============================================================
+   macOS Tahoe 26 — Content Organization Overrides
+
+   Targets: ListContainer, ListItem, Collapse, Pagination
+   Selectors: html.macos-tahoe [data-tucu="list-item"], etc.
+
+   References:
+   - Apple HIG Tahoe > Lists: 44pt touch / 24pt desktop row height
+   - Disclosure: chevron 6pt, rotate 90° on expand
+   - Pagination: segmented-like compact control
+   ============================================================ */
+
+/* ══ LIST CONTAINER ══════════════════════════════════════════ */
+
+html.macos-tahoe [data-tucu='list-trigger'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-2);
+  height: 28px;
+  padding: 0 var(--macos-space-2);
+  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-regular);
+  color: var(--macos-label);
+  background: transparent;
+  cursor: default;
+  transition: background-color 0.1s ease;
+}
+
+html.macos-tahoe [data-tucu='list-trigger']:hover {
+  background-color: var(--macos-gray5);
+}
+
+html.macos-tahoe.dark [data-tucu='list-trigger']:hover {
+  background-color: var(--macos-gray4);
+}
+
+html.macos-tahoe [data-tucu='list-trigger']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos-tahoe [data-tucu='list-dropdown'] {
+  background-color: var(--macos-content-bg);
+  border: 0.5px solid var(--macos-separator);
+  border-radius: var(--macos-radius-control);
+  box-shadow: var(--macos-shadow-card);
+  padding: var(--macos-space-1) 0;
+  overflow: hidden;
+}
+
+/* ── List Item ───────────────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='list-item'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 2px var(--macos-space-3);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-body);
+  font-weight: var(--macos-font-weight-regular);
+  color: var(--macos-label);
+  border-bottom: 0.5px solid var(--macos-separator);
+  transition: background-color 0.08s ease;
+}
+
+html.macos-tahoe [data-tucu='list-item']:last-child {
+  border-bottom: none;
+}
+
+html.macos-tahoe [data-tucu='list-item']:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--macos-control-accent) 10%,
+    transparent
+  );
+}
+
+/* ══ PAGINATION ══════════════════════════════════════════════ */
+
+html.macos-tahoe [data-tucu='pagination'] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-family: var(--macos-font-family);
+}
+
+html.macos-tahoe [data-tucu='pagination-btn'],
+html.macos-tahoe [data-tucu='pagination-page'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  min-width: 24px;
+  padding: 0 6px;
+  border-radius: var(--macos-radius-small-control);
+  font-size: var(--macos-font-size-callout);
+  font-weight: var(--macos-font-weight-regular);
+  color: var(--macos-secondary-label);
+  background: transparent;
+  border: none;
+  cursor: default;
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+html.macos-tahoe [data-tucu='pagination-btn']:hover,
+html.macos-tahoe [data-tucu='pagination-page']:hover {
+  background-color: var(--macos-gray5);
+  color: var(--macos-label);
+}
+
+html.macos-tahoe.dark [data-tucu='pagination-btn']:hover,
+html.macos-tahoe.dark [data-tucu='pagination-page']:hover {
+  background-color: var(--macos-gray4);
+}
+
+html.macos-tahoe [data-tucu='pagination-page'][data-active='true'] {
+  background-color: var(--macos-control-accent);
+  color: white;
+  font-weight: var(--macos-font-weight-medium);
+}
+
+html.macos-tahoe [data-tucu='pagination-btn']:disabled,
+html.macos-tahoe [data-tucu='pagination-btn'][disabled] {
+  color: var(--macos-quaternary-label);
+  pointer-events: none;
+  background: transparent;
+}
+
+html.macos-tahoe [data-tucu='pagination-btn']:focus-visible,
+html.macos-tahoe [data-tucu='pagination-page']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos-tahoe [data-tucu='pagination-ellipsis'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  min-width: 16px;
+  font-size: var(--macos-font-size-callout);
+  color: var(--macos-tertiary-label);
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos-tahoe [data-tucu='list-trigger'],
+  html.macos-tahoe [data-tucu='collapse-trigger'],
+  html.macos-tahoe [data-tucu='pagination-btn'],
+  html.macos-tahoe [data-tucu='pagination-page'] {
+    transition: none;
+  }
+}

package/macos/tahoe/macos-dialogs.css

@@ -0,0 +1,195 @@
+/* ============================================================
+   macOS Tahoe 26 — Dialog Overrides
+
+   Targets: Modal, Drawer, Sidebar, SettingsDrawer
+   Selectors: html.macos-tahoe [data-tucu="modal"], etc.
+
+   References:
+   - Apple HIG Tahoe > Sheets: glass regular, 24pt radius
+   - Apple HIG Tahoe > Sidebars: 220pt width, glass thin
+   - Apple HIG Tahoe > Dialogs: centered, radius-popover
+   ============================================================ */
+
+/* ── Modal / Sheet ───────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='modal'] {
+  border-radius: var(--macos-radius-popover);
+  background-color: var(--macos-glass-regular-bg-opaque);
+  border: 0.5px solid var(--macos-glass-border);
+  box-shadow: var(--macos-shadow-window), 0 0 0 0.5px rgba(0, 0, 0, 0.06) inset;
+  overflow: hidden;
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  html.macos-tahoe [data-tucu='modal'] {
+    background-color: 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%);
+  }
+}
+
+html.macos-tahoe.dark [data-tucu='modal'] {
+  border-color: var(--macos-separator);
+}
+
+/* Modal overlay */
+html.macos-tahoe [data-tucu='modal-overlay'] {
+  background-color: rgba(0, 0, 0, 0.32) !important;
+}
+
+html.macos-tahoe.dark [data-tucu='modal-overlay'] {
+  background-color: rgba(0, 0, 0, 0.48) !important;
+}
+
+/* Modal overlay Tahoe */
+html.macos-tahoe [data-tucu='modal-overlay'] {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  backdrop-filter: blur(2px) !important;
+  -webkit-backdrop-filter: blur(2px) !important;
+}
+
+html.macos-tahoe.dark [data-tucu='modal-overlay'] {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Modal header */
+html.macos-tahoe [data-tucu='modal-header'] {
+  padding: var(--macos-space-4);
+  border-bottom: 1px solid var(--macos-separator);
+  font-weight: var(--macos-font-weight-semibold);
+  font-size: var(--macos-font-size-body);
+}
+
+/* Modal body */
+html.macos-tahoe [data-tucu='modal-body'] {
+  padding: var(--macos-space-4) var(--macos-space-5);
+}
+
+/* Modal footer */
+html.macos-tahoe [data-tucu='modal-footer'] {
+  padding: var(--macos-space-3) var(--macos-space-4);
+  border-top: 1px solid var(--macos-separator);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--macos-space-2);
+}
+
+/* ── Drawer ──────────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='drawer'] {
+  background-color: var(--macos-glass-regular-bg-opaque);
+  border-left: 0.5px solid var(--macos-separator);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.16);
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  html.macos-tahoe [data-tucu='drawer'] {
+    background-color: var(--macos-glass-regular-bg);
+    backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(140%);
+    -webkit-backdrop-filter: blur(var(--macos-glass-regular-blur))
+      saturate(140%);
+  }
+}
+
+html.macos-tahoe.dark [data-tucu='drawer'] {
+  border-left-color: var(--macos-separator);
+}
+
+/* ── Sidebar ─────────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='sidebar'] {
+  width: var(--macos-sidebar-width);
+  background-color: var(--macos-material-toolbar);
+  backdrop-filter: blur(var(--macos-material-sidebar-blur));
+  -webkit-backdrop-filter: blur(var(--macos-material-sidebar-blur));
+  border-right: 1px solid var(--macos-separator);
+}
+
+html.macos-tahoe.dark [data-tucu='sidebar'] {
+  background-color: var(--macos-material-toolbar);
+  border-right-color: var(--macos-separator);
+}
+
+/* Sidebar item */
+html.macos-tahoe [data-tucu='sidebar-item'] {
+  height: var(--macos-sidebar-row-height);
+  padding: 0 var(--macos-space-3);
+  border-radius: var(--macos-radius-md);
+  font-size: var(--macos-font-size-body);
+  color: var(--macos-label);
+  transition: background-color var(--macos-transition-fast);
+}
+
+html.macos-tahoe [data-tucu='sidebar-item']:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+html.macos-tahoe.dark [data-tucu='sidebar-item']:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+html.macos-tahoe [data-tucu='sidebar-item'][data-active='true'] {
+  background-color: var(--macos-selected-content-bg);
+  color: #ffffff;
+}
+
+/* Sidebar section title */
+html.macos-tahoe [data-tucu='sidebar-section'] {
+  font-size: var(--macos-font-size-subheadline);
+  font-weight: var(--macos-font-weight-semibold);
+  color: var(--macos-secondary-label);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--macos-space-3) var(--macos-space-3) var(--macos-space-1);
+}
+
+/* Sidebar icon */
+html.macos-tahoe [data-tucu='sidebar-icon'] {
+  width: var(--macos-sidebar-icon-size);
+  height: var(--macos-sidebar-icon-size);
+  margin-right: var(--macos-space-2);
+}
+
+/* ============================================================
+   macOS Tahoe 26 — Dialogs & Overlays (Liquid Glass)
+   ============================================================ */
+
+/* ── Modals / Dialogs ────────────────────────────────────────── */
+/* Note: [data-tucu='drawer'] is intentionally excluded from Tahoe glass rules.
+   It is the full-screen positioning wrapper inside DrawerContainer — it must stay
+   transparent. In Tahoe, the actual glass panel is [data-tucu='macos-tahoe-drawer']. */
+html.macos-tahoe [data-tucu='modal'],
+html.macos-tahoe [data-tucu='sidebar'],
+html.macos-tahoe [data-tucu='popover'] {
+  background: var(--macos-glass-regular-bg) !important;
+  backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%) !important;
+  -webkit-backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%) !important;
+  border: 1px solid var(--macos-glass-border) !important;
+  box-shadow: var(--macos-shadow-window), var(--macos-glass-highlight) !important;
+  border-radius: var(--macos-radius-2xl) !important;
+}
+
+/* In Tahoe, the DrawerContainer wrapper must be fully transparent.
+   The glass panel is the macos-tahoe-drawer aside — not this wrapper. */
+html.macos-tahoe [data-tucu='drawer'] {
+  background: transparent !important;
+  background-color: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  html.macos-tahoe [data-tucu='modal'],
+  html.macos-tahoe [data-tucu='sidebar'],
+  html.macos-tahoe [data-tucu='popover'] {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+    background: var(--color-semantic-elevation-1) !important;
+    box-shadow: var(--macos-shadow-window) !important;
+  }
+}
+
+html.macos-tahoe [data-tucu='modal'] h3 {
+  border-bottom: none !important;
+  margin-bottom: var(--macos-space-2);
+}