@e-burgos/tucu-ui 2.7.3 → 2.8.1

package/macos/sonoma/macos-window.css

@@ -0,0 +1,273 @@
+/* ============================================================
+   macOS Sonoma 14 — Window, TitleBar, TrafficLights
+
+   Scoped to html.macos — no leakage to default theme.
+   References: Apple HIG > Windows > macOS Sonoma 14
+   Components: MacOSWindow, MacOSTitleBar, MacOSTrafficLights
+   ============================================================ */
+
+/* ── MacOSWindow ─────────────────────────────────────────────── */
+
+html.macos [data-tucu='window'] {
+  border-radius: var(--macos-radius-window);
+  background-color: var(--macos-window-bg);
+  box-shadow: var(--macos-shadow-window);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+html.macos.dark [data-tucu='window'] {
+  background-color: var(--macos-window-bg);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: var(--macos-shadow-window);
+}
+
+/* Window states */
+html.macos [data-tucu='window'][data-window-state='key'] {
+  box-shadow: var(--macos-shadow-window);
+}
+
+html.macos [data-tucu='window'][data-window-state='main'] {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+html.macos [data-tucu='window'][data-window-state='inactive'] {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  opacity: 0.95;
+}
+
+/* ── MacOSTitleBar ───────────────────────────────────────────── */
+
+html.macos [data-tucu='title-bar'] {
+  height: var(--macos-titlebar-height);
+  min-height: var(--macos-titlebar-height);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--macos-space-2);
+  position: relative;
+  /* Drag region for window movement */
+  -webkit-app-region: drag;
+  user-select: none;
+  flex-shrink: 0;
+  background-color: transparent;
+  border-bottom: 1px solid var(--macos-separator);
+}
+
+html.macos [data-tucu='title-bar'] > * {
+  /* Buttons inside are not draggable */
+  -webkit-app-region: no-drag;
+}
+
+html.macos [data-tucu='title-bar-title'] {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-ts-body-size);
+  font-weight: var(--macos-font-weight-semibold);
+  line-height: var(--macos-ts-body-leading);
+  letter-spacing: var(--macos-ts-body-tracking);
+  color: var(--macos-label);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+html.macos [data-tucu='title-bar-leading'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-2);
+  flex-shrink: 0;
+}
+
+html.macos [data-tucu='title-bar-trailing'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-2);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* ── MacOSTrafficLights ──────────────────────────────────────── */
+
+html.macos [data-tucu='traffic-lights'] {
+  display: flex;
+  align-items: center;
+  gap: 8px; /* Apple HIG: 8px gap */
+  flex-shrink: 0;
+}
+
+/* Individual traffic light button */
+html.macos [data-tucu='traffic-light'] {
+  width: 12px;
+  height: 12px;
+  border-radius: var(--macos-radius-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  outline: none;
+  cursor: default;
+  padding: 0;
+  transition: filter 0.1s ease;
+  position: relative;
+  flex-shrink: 0;
+}
+
+html.macos [data-tucu='traffic-light']:focus-visible {
+  box-shadow: 0 0 0 2px var(--macos-focus-ring);
+}
+
+/* Close — red */
+html.macos [data-tucu='traffic-light'][data-type='close'] {
+  background-color: var(--macos-traffic-close, #ff5f57);
+  border: 0.5px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Minimize — yellow */
+html.macos [data-tucu='traffic-light'][data-type='minimize'] {
+  background-color: var(--macos-traffic-minimize, #febc2e);
+  border: 0.5px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Maximize — green */
+html.macos [data-tucu='traffic-light'][data-type='maximize'] {
+  background-color: var(--macos-traffic-maximize, #28c840);
+  border: 0.5px solid rgba(0, 0, 0, 0.12);
+}
+
+/* Hover: show glyph, brighten */
+html.macos [data-tucu='traffic-lights']:hover [data-tucu='traffic-light'] {
+  filter: brightness(0.92);
+}
+
+/* Glyph icons inside each button */
+html.macos [data-tucu='traffic-light-glyph'] {
+  display: none;
+  pointer-events: none;
+}
+
+html.macos
+  [data-tucu='traffic-lights']:hover
+  [data-tucu='traffic-light-glyph'] {
+  display: block;
+}
+
+/* Inactive state: all gray */
+html.macos
+  [data-tucu='traffic-lights'][data-inactive='true']
+  [data-tucu='traffic-light'],
+html.macos
+  [data-tucu='window'][data-window-state='inactive']
+  [data-tucu='traffic-light'] {
+  background-color: var(--macos-gray4);
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+html.macos.dark
+  [data-tucu='traffic-lights'][data-inactive='true']
+  [data-tucu='traffic-light'],
+html.macos.dark
+  [data-tucu='window'][data-window-state='inactive']
+  [data-tucu='traffic-light'] {
+  background-color: var(--macos-gray4);
+}
+
+/* Dark mode: slightly different tones */
+html.macos.dark [data-tucu='traffic-light'][data-type='close'] {
+  background-color: #ff5f57;
+}
+
+html.macos.dark [data-tucu='traffic-light'][data-type='minimize'] {
+  background-color: #febc2e;
+}
+
+html.macos.dark [data-tucu='traffic-light'][data-type='maximize'] {
+  background-color: #28c840;
+}
+
+/* ── Window Content Area ─────────────────────────────────────── */
+
+html.macos [data-tucu='window-content'] {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--macos-content-bg);
+}
+
+/* ── Resize handles ──────────────────────────────────────────── */
+
+html.macos [data-tucu='resize-handle'] {
+  position: absolute;
+  z-index: 10;
+}
+
+html.macos [data-tucu='resize-handle'][data-edge='n'],
+html.macos [data-tucu='resize-handle'][data-edge='s'] {
+  left: var(--macos-radius-window);
+  right: var(--macos-radius-window);
+  height: 6px;
+  cursor: ns-resize;
+}
+
+html.macos [data-tucu='resize-handle'][data-edge='n'] {
+  top: 0;
+}
+html.macos [data-tucu='resize-handle'][data-edge='s'] {
+  bottom: 0;
+}
+
+html.macos [data-tucu='resize-handle'][data-edge='e'],
+html.macos [data-tucu='resize-handle'][data-edge='w'] {
+  top: var(--macos-radius-window);
+  bottom: var(--macos-radius-window);
+  width: 6px;
+  cursor: ew-resize;
+}
+
+html.macos [data-tucu='resize-handle'][data-edge='e'] {
+  right: 0;
+}
+html.macos [data-tucu='resize-handle'][data-edge='w'] {
+  left: 0;
+}
+
+html.macos [data-tucu='resize-handle'][data-edge='ne'],
+html.macos [data-tucu='resize-handle'][data-edge='nw'],
+html.macos [data-tucu='resize-handle'][data-edge='se'],
+html.macos [data-tucu='resize-handle'][data-edge='sw'] {
+  width: 18px;
+  height: 18px;
+}
+
+html.macos [data-tucu='resize-handle'][data-edge='ne'] {
+  top: 0;
+  right: 0;
+  cursor: ne-resize;
+}
+html.macos [data-tucu='resize-handle'][data-edge='nw'] {
+  top: 0;
+  left: 0;
+  cursor: nw-resize;
+}
+html.macos [data-tucu='resize-handle'][data-edge='se'] {
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+}
+html.macos [data-tucu='resize-handle'][data-edge='sw'] {
+  bottom: 0;
+  left: 0;
+  cursor: sw-resize;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos [data-tucu='window'],
+  html.macos [data-tucu='traffic-light'] {
+    transition: none;
+  }
+}

package/macos/tahoe/index.css

@@ -0,0 +1,34 @@
+/* ============================================================
+   macOS Tahoe 26 — 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/tahoe/macos-auth.css

@@ -0,0 +1,162 @@
+/* ============================================================
+   macOS Tahoe 26 — Auth & Blockchain Component Overrides
+
+   Targets: SignInForm, SignUpForm, ForgetPasswordForm, ResetPinForm,
+            CoinCard, CoinInfoCard, CollectionCard, LivePriceFeed
+   Selectors: html.macos-tahoe [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-tahoe [data-tucu='auth-form'] {
+  font-family: var(--macos-font-family);
+}
+
+html.macos-tahoe [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-tahoe.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-tahoe [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-tahoe [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-tahoe [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-tahoe [data-tucu='auth-form-panel'] .bg-green-50,
+html.macos-tahoe [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-tahoe [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-tahoe [data-tucu='coin-card']:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+html.macos-tahoe.dark [data-tucu='coin-card'] {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+/* Coin card label: use callout uppercase */
+html.macos-tahoe [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-tahoe [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-tahoe [data-tucu='coin-info-card'] > div:first-child {
+  gap: 0.75rem;
+}
+
+html.macos-tahoe.dark [data-tucu='coin-info-card'] {
+  background-color: var(--macos-content-bg) !important;
+  border-color: var(--macos-separator);
+}
+
+/* ── Collection Card ─────────────────────────────────────────── */
+
+html.macos-tahoe [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-tahoe [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-tahoe .price-up,
+html.macos-tahoe [class*='text-green'] {
+  color: var(--macos-system-green) !important;
+}
+
+html.macos-tahoe .price-down,
+html.macos-tahoe [class*='text-red-5'] {
+  color: var(--macos-system-red) !important;
+}
+
+/* Monospace for crypto values */
+html.macos-tahoe [data-tucu='coin-card'] span[class*='font-medium'],
+html.macos-tahoe [data-tucu='coin-info-card'] span[class*='font-medium'] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos-tahoe [data-tucu='coin-card'],
+  html.macos-tahoe [data-tucu='collection-card'] {
+    transition: none;
+  }
+}