@e-burgos/tucu-ui 2.7.3 → 2.8.0

package/macos/sonoma/macos-buttons.css

@@ -0,0 +1,231 @@
+/* ============================================================
+   macOS Sonoma 14 — Button Overrides
+
+   Targets: Button (solid|ghost|transparent), Hamburger, TopupButton
+   Selector: html.macos [data-tucu="button"]
+
+   References:
+   - Apple HIG > Buttons > macOS Sonoma 14 > Push Buttons
+   - Push button height: 22pt (regular), 28pt (large)
+   - Radius: 10pt (Sonoma), font: 13pt Inter Medium
+   - Focus ring: 3px accent 48% opacity
+   6 states: default, hover, pressed, disabled, focus-visible, loading
+   ============================================================ */
+
+/* ── Base button ─────────────────────────────────────────────── */
+html.macos [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 [data-tucu='button']:not(:disabled):not([aria-busy='true']) {
+  transform: none !important;
+}
+
+/* ── Solid variant: subtle shadow like native push button ──── */
+html.macos [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 [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 [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.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.dark [data-tucu='button'][data-variant='solid']:hover {
+  filter: brightness(1.08);
+}
+
+/* ── Ghost variant: subtle border ──────────────────────────── */
+html.macos [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 [data-tucu='button'][data-variant='ghost']:hover {
+  background-color: var(--macos-control-bg-hover) !important;
+  filter: none;
+}
+html.macos [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.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.dark [data-tucu='button'][data-variant='ghost']:hover {
+  background-color: rgba(255, 255, 255, 0.14) !important;
+}
+html.macos.dark [data-tucu='button'][data-variant='ghost']:active {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* ── Transparent variant ───────────────────────────────────── */
+html.macos [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 [data-tucu='button'][data-variant='transparent']:hover {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+html.macos [data-tucu='button'][data-variant='transparent']:active {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+html.macos.dark [data-tucu='button'][data-variant='transparent'] {
+  color: var(--macos-control-accent) !important;
+}
+html.macos.dark [data-tucu='button'][data-variant='transparent']:hover {
+  background-color: rgba(255, 255, 255, 0.06) !important;
+}
+html.macos.dark [data-tucu='button'][data-variant='transparent']:active {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ── Shape overrides ───────────────────────────────────────── */
+html.macos [data-tucu='button'][data-shape='pill'],
+html.macos [data-tucu='button'][data-shape='circle'] {
+  border-radius: var(--macos-radius-full);
+}
+
+/* ── Size overrides: match macOS native control sizes ──────── */
+html.macos [data-tucu='button'][data-size='large'] {
+  min-height: 28px;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: var(--macos-font-size-title3);
+}
+html.macos [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 [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 [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 [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 [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 [data-tucu='button']:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* ── Responsive: larger touch targets on mobile ──────────────── */
+@media (max-width: 767px) {
+  html.macos [data-tucu='button'] {
+    min-height: 44px;
+  }
+}
+
+/* ── Hamburger button ────────────────────────────────────────── */
+
+html.macos [data-tucu='hamburger'] {
+  border-radius: var(--macos-radius-control);
+  background-color: transparent;
+  border: none;
+  transition: background-color 0.1s ease;
+}
+
+html.macos [data-tucu='hamburger']:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+html.macos [data-tucu='hamburger']:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+html.macos [data-tucu='hamburger']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos.dark [data-tucu='hamburger']:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+html.macos.dark [data-tucu='hamburger']:active {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+/* ── TopupButton ─────────────────────────────────────────────── */
+
+html.macos [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 [data-tucu='topup-button']:hover {
+  filter: brightness(1.05);
+}
+
+html.macos [data-tucu='topup-button']:active {
+  filter: brightness(0.95);
+}
+
+html.macos [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 [data-tucu='button'][aria-busy='true'] {
+  opacity: 0.7;
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos [data-tucu='button'],
+  html.macos [data-tucu='hamburger'],
+  html.macos [data-tucu='topup-button'] {
+    transition: none;
+  }
+}

package/macos/sonoma/macos-cards.css

@@ -0,0 +1,104 @@
+/* ============================================================
+   macOS Sonoma 14 — Card Overrides
+
+   Targets: Card, CardContainer, InfoCard, PanelCard, StatsCard,
+            WalletCard, TransactionCard
+   Selector: html.macos [data-tucu="card"]
+
+   References:
+   - Apple HIG Sonoma > 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 [data-tucu='card'] {
+  border-radius: var(--macos-radius-xl);
+  border: 0.5px solid var(--macos-separator);
+  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 [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.dark [data-tucu='card'] {
+  background-color: var(--macos-content-bg) !important;
+  border-color: var(--macos-separator);
+  box-shadow: var(--macos-shadow-card);
+}
+
+html.macos.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 [data-tucu='card-header'] {
+  border-bottom: 1px solid var(--macos-separator);
+  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 [data-tucu='card-body'] {
+  padding: var(--macos-space-4);
+}
+
+/* ── Stats / Info cards: tighter padding ─────────────────────── */
+html.macos [data-tucu='stats-card'] {
+  border-radius: var(--macos-radius-xl);
+  border: 0.5px solid var(--macos-separator);
+  background-color: var(--macos-content-bg);
+  box-shadow: var(--macos-shadow-card);
+  padding: var(--macos-space-3) var(--macos-space-4);
+}
+
+html.macos.dark [data-tucu='stats-card'] {
+  background-color: var(--macos-content-bg);
+  border-color: var(--macos-separator);
+}
+
+/* ── Panel card (section containers) ─────────────────────────── */
+html.macos [data-tucu='panel-card'] {
+  border-radius: var(--macos-radius-xl);
+  border: 1px solid var(--macos-separator);
+  background-color: var(--macos-gray6);
+  box-shadow: none;
+}
+
+html.macos.dark [data-tucu='panel-card'] {
+  background-color: var(--macos-gray5);
+  border-color: var(--macos-separator);
+}
+
+/* ── CardTitle (section with floating label) ─────────────────── */
+html.macos [data-tucu='card-title'] {
+  border-radius: var(--macos-radius-xl);
+  border-color: var(--macos-separator);
+}
+
+html.macos.dark [data-tucu='card-title'] {
+  border-color: var(--macos-separator);
+}
+
+/* Floating label inherits card bg so it blends with the parent */
+html.macos [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.dark [data-tucu='card-title-label'] {
+  background-color: var(--macos-control-bg);
+  color: var(--macos-label);
+}

package/macos/sonoma/macos-content.css

@@ -0,0 +1,157 @@
+/* ============================================================
+   macOS Sonoma 14 — Content Organization Overrides
+
+   Targets: ListContainer, ListItem, Collapse, Pagination
+   Selectors: html.macos [data-tucu="list-item"], etc.
+
+   References:
+   - Apple HIG Sonoma > Lists: 44pt touch / 24pt desktop row height
+   - Disclosure: chevron 6pt, rotate 90° on expand
+   - Pagination: segmented-like compact control
+   ============================================================ */
+
+/* ══ LIST CONTAINER ══════════════════════════════════════════ */
+
+html.macos [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 [data-tucu='list-trigger']:hover {
+  background-color: var(--macos-gray5);
+}
+
+html.macos.dark [data-tucu='list-trigger']:hover {
+  background-color: var(--macos-gray4);
+}
+
+html.macos [data-tucu='list-trigger']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos [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 [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 [data-tucu='list-item']:last-child {
+  border-bottom: none;
+}
+
+html.macos [data-tucu='list-item']:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--macos-control-accent) 10%,
+    transparent
+  );
+}
+
+/* ══ PAGINATION ══════════════════════════════════════════════ */
+
+html.macos [data-tucu='pagination'] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-family: var(--macos-font-family);
+}
+
+html.macos [data-tucu='pagination-btn'],
+html.macos [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 [data-tucu='pagination-btn']:hover,
+html.macos [data-tucu='pagination-page']:hover {
+  background-color: var(--macos-gray5);
+  color: var(--macos-label);
+}
+
+html.macos.dark [data-tucu='pagination-btn']:hover,
+html.macos.dark [data-tucu='pagination-page']:hover {
+  background-color: var(--macos-gray4);
+}
+
+html.macos [data-tucu='pagination-page'][data-active='true'] {
+  background-color: var(--macos-control-accent);
+  color: white;
+  font-weight: var(--macos-font-weight-medium);
+}
+
+html.macos [data-tucu='pagination-btn']:disabled,
+html.macos [data-tucu='pagination-btn'][disabled] {
+  color: var(--macos-quaternary-label);
+  pointer-events: none;
+  background: transparent;
+}
+
+html.macos [data-tucu='pagination-btn']:focus-visible,
+html.macos [data-tucu='pagination-page']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos [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 [data-tucu='list-trigger'],
+  html.macos [data-tucu='collapse-trigger'],
+  html.macos [data-tucu='pagination-btn'],
+  html.macos [data-tucu='pagination-page'] {
+    transition: none;
+  }
+}

package/macos/sonoma/macos-dialogs.css

@@ -0,0 +1,122 @@
+/* ============================================================
+   macOS Sonoma 14 — Dialog Overrides
+
+   Targets: Modal, Drawer, Sidebar, SettingsDrawer
+   Selectors: html.macos [data-tucu="modal"], etc.
+
+   References:
+   - Apple HIG Sonoma > Sheets: glass regular, 24pt radius
+   - Apple HIG Sonoma > Sidebars: 220pt width, glass thin
+   - Apple HIG Sonoma > Dialogs: centered, radius-popover
+   ============================================================ */
+
+/* ── Modal / Sheet ───────────────────────────────────────────── */
+html.macos [data-tucu='modal'] {
+  border-radius: var(--macos-radius-popover);
+  background-color: var(--macos-window-bg);
+  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;
+}
+
+html.macos.dark [data-tucu='modal'] {
+  background-color: var(--macos-window-bg);
+  border-color: var(--macos-separator);
+}
+
+/* Modal overlay */
+html.macos [data-tucu='modal-overlay'] {
+  background-color: rgba(0, 0, 0, 0.32) !important;
+}
+
+html.macos.dark [data-tucu='modal-overlay'] {
+  background-color: rgba(0, 0, 0, 0.48) !important;
+}
+
+/* Modal header */
+html.macos [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 [data-tucu='modal-body'] {
+  padding: var(--macos-space-4) var(--macos-space-5);
+}
+
+/* Modal footer */
+html.macos [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 [data-tucu='drawer'] {
+  background-color: var(--macos-window-bg);
+  border-left: 0.5px solid var(--macos-separator);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.16);
+}
+
+html.macos.dark [data-tucu='drawer'] {
+  background-color: var(--macos-window-bg);
+  border-left-color: var(--macos-separator);
+}
+
+/* ── Sidebar ─────────────────────────────────────────────────── */
+html.macos [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.dark [data-tucu='sidebar'] {
+  background-color: var(--macos-material-toolbar);
+  border-right-color: var(--macos-separator);
+}
+
+/* Sidebar item */
+html.macos [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 [data-tucu='sidebar-item']:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+html.macos.dark [data-tucu='sidebar-item']:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+html.macos [data-tucu='sidebar-item'][data-active='true'] {
+  background-color: var(--macos-selected-content-bg);
+  color: #ffffff;
+}
+
+/* Sidebar section title */
+html.macos [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 [data-tucu='sidebar-icon'] {
+  width: var(--macos-sidebar-icon-size);
+  height: var(--macos-sidebar-icon-size);
+  margin-right: var(--macos-space-2);
+}