@e-burgos/tucu-ui 2.7.2 → 2.8.0

package/macos/sonoma/macos-tables.css

@@ -0,0 +1,318 @@
+/* ============================================================
+   macOS Sonoma 14 — Table & Pagination Overrides
+
+   Targets: BasicTable, Pagination
+   Selectors: html.macos [data-tucu="table"], etc.
+
+   References:
+   - macOS Sonoma Finder list view: hairline separators, 24pt row
+   - Table header: separator bottom, medium 11pt (callout size)
+   - Selection: controlAccent background, white text
+   - Focus: 3px ring, rgba(0,136,255,0.48)
+   ============================================================ */
+
+/* ── Table container ─────────────────────────────────────────── */
+html.macos [data-tucu='table-scroll'] {
+  --basic-table-scrollbar-track: transparent;
+  --basic-table-scrollbar-thumb: color-mix(
+    in srgb,
+    var(--macos-secondary-label) 28%,
+    transparent
+  );
+}
+
+html.macos [data-tucu='table-scroll']::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+html.macos [data-tucu='table-scroll']::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+html.macos [data-tucu='table-scroll']::-webkit-scrollbar-thumb {
+  background-color: color-mix(
+    in srgb,
+    var(--macos-secondary-label) 28%,
+    transparent
+  );
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+
+html.macos [data-tucu='table-scroll']::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--macos-secondary-label) 42%,
+    transparent
+  );
+}
+
+html.macos [data-tucu='table'] {
+  border-radius: calc(var(--macos-radius-xl) + 2px);
+  border: none;
+  box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--macos-separator) 92%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-body);
+  background: color-mix(
+    in srgb,
+    var(--macos-material-sheet) 90%,
+    var(--macos-control-bg) 10%
+  );
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
+    0 8px 24px rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(var(--macos-material-toolbar-blur)) saturate(1.18);
+  -webkit-backdrop-filter: blur(var(--macos-material-toolbar-blur))
+    saturate(1.18);
+  scrollbar-width: thin;
+  scrollbar-color: var(--basic-table-scrollbar-thumb, rgba(0, 0, 0, 0.2))
+    var(--basic-table-scrollbar-track, transparent);
+  overscroll-behavior: contain;
+}
+
+html.macos [data-tucu='table']::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+html.macos [data-tucu='table']::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+html.macos [data-tucu='table']::-webkit-scrollbar-thumb {
+  background-color: var(--basic-table-scrollbar-thumb, rgba(0, 0, 0, 0.2));
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: padding-box;
+}
+
+html.macos [data-tucu='table']::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--basic-table-scrollbar-thumb, rgba(0, 0, 0, 0.2)) 140%,
+    transparent
+  );
+}
+
+html.macos.dark [data-tucu='table'] {
+  background: color-mix(
+    in srgb,
+    var(--macos-material-sheet) 88%,
+    rgba(12, 12, 14, 0.3) 12%
+  );
+  box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--macos-separator) 80%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.28);
+}
+
+html.macos [data-tucu='table'][data-border='false'] {
+  --tw-ring-shadow: 0 0 #0000;
+  box-shadow: none;
+}
+
+/* ── Table header ────────────────────────────────────────────── */
+html.macos [data-tucu='table-header'] {
+  background: linear-gradient(
+    180deg,
+    color-mix(
+        in srgb,
+        var(--macos-selected-content-bg) 7%,
+        var(--macos-material-toolbar) 93%
+      )
+      0%,
+    color-mix(in srgb, var(--macos-gray6) 76%, rgba(215, 223, 236, 0.68) 24%)
+      100%
+  );
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--macos-separator) 100%, rgba(24, 32, 48, 0.16));
+  backdrop-filter: blur(var(--macos-material-toolbar-blur)) saturate(1.12);
+  -webkit-backdrop-filter: blur(var(--macos-material-toolbar-blur))
+    saturate(1.12);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48),
+    inset 0 -1px 0 rgba(24, 32, 48, 0.08), 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+html.macos.dark [data-tucu='table-header'] {
+  background: linear-gradient(
+    180deg,
+    color-mix(
+        in srgb,
+        var(--macos-selected-content-bg) 18%,
+        var(--macos-material-toolbar) 82%
+      )
+      0%,
+    color-mix(in srgb, var(--macos-gray5) 68%, rgba(7, 10, 18, 0.82) 32%) 100%
+  );
+  border-bottom-color: color-mix(
+    in srgb,
+    var(--macos-separator) 88%,
+    rgba(0, 0, 0, 0.42)
+  );
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.42), 0 1px 0 rgba(0, 0, 0, 0.16);
+}
+
+html.macos [data-tucu='table-header'] th,
+html.macos [data-tucu='table-header-cell'] {
+  font-size: var(--macos-font-size-subheadline);
+  line-height: var(--macos-leading-subheadline);
+  font-weight: var(--macos-font-weight-semibold);
+  color: color-mix(
+    in srgb,
+    var(--macos-label) 76%,
+    var(--macos-secondary-label) 24%
+  );
+  text-transform: none;
+  letter-spacing: normal;
+  white-space: nowrap;
+  padding: 7px var(--macos-space-3);
+  border-bottom: none !important;
+  border-right: 1px solid
+    color-mix(in srgb, var(--macos-separator) 82%, rgba(255, 255, 255, 0.14));
+  background: transparent;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
+}
+
+html.macos.dark [data-tucu='table-header'] th,
+html.macos.dark [data-tucu='table-header-cell'] {
+  color: rgba(255, 255, 255, 0.9);
+  border-right-color: color-mix(
+    in srgb,
+    rgba(255, 255, 255, 0.12) 55%,
+    rgba(0, 0, 0, 0.35)
+  );
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
+}
+
+html.macos [data-tucu='table-header'] th:last-child,
+html.macos [data-tucu='table-header-cell']:last-child {
+  border-right: none;
+}
+
+/* ── Column resize handle ────────────────────────────────────── */
+html.macos .basic-table-resize-handle:hover::after {
+  background: color-mix(in srgb, var(--macos-control-accent) 50%, transparent);
+}
+
+html.macos.dark .basic-table-resize-handle:hover::after {
+  background: color-mix(in srgb, var(--macos-control-accent) 60%, transparent);
+}
+
+/* ── Table rows ──────────────────────────────────────────────── */
+html.macos [data-tucu='table-row'] {
+  height: 30px;
+  background: transparent;
+  transition: background-color var(--macos-transition-fast),
+    box-shadow var(--macos-transition-fast), color var(--macos-transition-fast);
+}
+
+/* Alternating row colors (Finder style) */
+html.macos
+  [data-tucu='table'][data-striped='true']
+  [data-tucu='table-row']:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+html.macos.dark
+  [data-tucu='table'][data-striped='true']
+  [data-tucu='table-row']:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.025);
+}
+
+/* Hover */
+html.macos
+  [data-tucu='table'][data-hoverable='true']
+  [data-tucu='table-row']:hover {
+  background-color: rgba(0, 0, 0, 0.045);
+}
+
+html.macos.dark
+  [data-tucu='table'][data-hoverable='true']
+  [data-tucu='table-row']:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Selected row */
+html.macos [data-tucu='table-row'][data-selected='true'] {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--macos-selected-content-bg) 94%, #4da3ff 6%) 0%,
+    color-mix(in srgb, var(--macos-selected-content-bg) 86%, #0045a8 14%) 100%
+  );
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
+}
+
+/* Table cells */
+html.macos [data-tucu='table-cell'] {
+  padding: 7px var(--macos-space-3);
+  font-size: var(--macos-font-size-body);
+  line-height: var(--macos-leading-body);
+  color: var(--macos-label) !important;
+  vertical-align: middle;
+  background: transparent !important;
+  border-right: none !important;
+  border-left: none !important;
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--macos-separator) 62%, transparent) !important;
+}
+
+html.macos.dark [data-tucu='table-cell'] {
+  border-bottom-color: color-mix(
+    in srgb,
+    var(--macos-separator) 72%,
+    transparent
+  ) !important;
+}
+
+html.macos [data-tucu='table-row']:last-child [data-tucu='table-cell'] {
+  border-bottom-color: transparent !important;
+}
+
+html.macos [data-tucu='table'][data-border='false'] [data-tucu='table-cell'] {
+  border-bottom-color: transparent !important;
+}
+
+html.macos
+  [data-tucu='table-row'][data-selected='true']
+  [data-tucu='table-cell'] {
+  color: #ffffff !important;
+  border-bottom-color: transparent !important;
+}
+
+/* ── Pagination ──────────────────────────────────────────────── */
+html.macos [data-tucu='pagination'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-1);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-callout);
+}
+
+html.macos [data-tucu='pagination-button'] {
+  min-width: var(--macos-control-height);
+  min-height: var(--macos-control-height);
+  border-radius: var(--macos-radius-md);
+  border: 1px solid var(--macos-separator);
+  background-color: var(--macos-control-bg);
+  font-size: var(--macos-font-size-callout);
+  transition: all var(--macos-transition-fast);
+}
+
+html.macos [data-tucu='pagination-button']:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+html.macos.dark [data-tucu='pagination-button']:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+html.macos [data-tucu='pagination-button'][data-active='true'] {
+  background-color: var(--macos-control-accent);
+  color: #ffffff;
+  border-color: var(--macos-control-accent);
+}

package/macos/sonoma/macos-toolbar.css

@@ -0,0 +1,302 @@
+/* ============================================================
+   macOS Sonoma 14 — Toolbar
+
+   Scoped to html.macos — no leakage to default theme.
+   References: Apple HIG > Toolbars > macOS Sonoma 14
+   Components: MacOSToolbar, MacOSToolbarGroup, MacOSToolbarButton,
+               MacOSToolbarOverflowMenu, ScrollEdge
+   ============================================================ */
+
+/* ── MacOSToolbar ────────────────────────────────────────────── */
+
+html.macos [data-tucu='toolbar'] {
+  height: var(--macos-toolbar-height);
+  min-height: var(--macos-toolbar-height);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--macos-space-2);
+  gap: var(--macos-space-1);
+  position: relative;
+  flex-shrink: 0;
+
+  /* Liquid Glass regular material */
+  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-separator);
+  z-index: 20;
+}
+
+html.macos.dark [data-tucu='toolbar'] {
+  background-color: var(--macos-glass-regular-bg);
+  border-bottom-color: var(--macos-separator);
+}
+
+/* Fallback: no backdrop-filter support */
+@supports not (backdrop-filter: blur(1px)) {
+  html.macos [data-tucu='toolbar'] {
+    background-color: var(--macos-glass-regular-bg-opaque);
+  }
+}
+
+/* Reduced transparency */
+@media (prefers-reduced-transparency: reduce) {
+  html.macos [data-tucu='toolbar'] {
+    background-color: var(--macos-glass-regular-bg-opaque);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+/* Toolbar slots */
+html.macos [data-tucu='toolbar-leading'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-1);
+  flex-shrink: 0;
+}
+
+html.macos [data-tucu='toolbar-center'] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: var(--macos-space-1);
+}
+
+html.macos [data-tucu='toolbar-trailing'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-1);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Toolbar title */
+html.macos [data-tucu='toolbar-title'] {
+  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;
+  user-select: none;
+}
+
+/* ── MacOSToolbarGroup ───────────────────────────────────────── */
+/* Grouped buttons in a capsule — max 3 groups per toolbar */
+
+html.macos [data-tucu='toolbar-group'] {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--macos-control-bg);
+  border-radius: var(--macos-radius-control);
+  border: 0.5px solid var(--macos-separator);
+  overflow: hidden;
+  gap: 0;
+  height: 28px;
+}
+
+html.macos.dark [data-tucu='toolbar-group'] {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+/* Separator between items in a group */
+html.macos [data-tucu='toolbar-group'] > * + * {
+  border-left: 0.5px solid var(--macos-separator);
+}
+
+html.macos.dark [data-tucu='toolbar-group'] > * + * {
+  border-left-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ── MacOSToolbarButton ──────────────────────────────────────── */
+/* Icon-only — tooltip is required for accessibility */
+
+html.macos [data-tucu='toolbar-button'] {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--macos-radius-small-control);
+  border: none;
+  background-color: transparent;
+  color: var(--macos-label);
+  cursor: default;
+  padding: 0;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  flex-shrink: 0;
+  position: relative;
+}
+
+html.macos [data-tucu='toolbar-button']:hover {
+  background-color: var(--macos-control-bg-hover);
+  color: var(--macos-label);
+}
+
+html.macos.dark [data-tucu='toolbar-button']:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+html.macos [data-tucu='toolbar-button']:active {
+  background-color: var(--macos-control-bg-active);
+  transform: scale(0.95);
+}
+
+html.macos [data-tucu='toolbar-button'][data-active='true'] {
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand, #0088ff) 16%,
+    transparent
+  );
+  color: var(--macos-control-accent);
+}
+
+html.macos.dark [data-tucu='toolbar-button'][data-active='true'] {
+  background-color: color-mix(
+    in srgb,
+    var(--color-brand, #0091ff) 20%,
+    transparent
+  );
+  color: var(--macos-control-accent);
+}
+
+html.macos [data-tucu='toolbar-button'][disabled],
+html.macos [data-tucu='toolbar-button']:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+html.macos [data-tucu='toolbar-button']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+/* Inside a group: square not pill */
+html.macos [data-tucu='toolbar-group'] [data-tucu='toolbar-button'] {
+  border-radius: 0;
+  height: 100%;
+}
+
+html.macos
+  [data-tucu='toolbar-group']
+  [data-tucu='toolbar-button']:first-child {
+  border-radius: calc(var(--macos-radius-control) - 1px) 0 0
+    calc(var(--macos-radius-control) - 1px);
+}
+
+html.macos [data-tucu='toolbar-group'] [data-tucu='toolbar-button']:last-child {
+  border-radius: 0 calc(var(--macos-radius-control) - 1px)
+    calc(var(--macos-radius-control) - 1px) 0;
+}
+
+/* ── Toolbar Separator ───────────────────────────────────────── */
+
+html.macos [data-tucu='toolbar-separator'] {
+  width: 0.5px;
+  height: 18px;
+  background-color: var(--macos-separator);
+  flex-shrink: 0;
+  margin: 0 var(--macos-space-1);
+}
+
+html.macos.dark [data-tucu='toolbar-separator'] {
+  background-color: rgba(255, 255, 255, 0.14);
+}
+
+/* ── Scroll Edge ─────────────────────────────────────────────── */
+/* Appears at bottom of scrollable area to indicate more content */
+
+html.macos [data-tucu='scroll-edge-top'] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 20px;
+  background: linear-gradient(to bottom, var(--macos-window-bg), transparent);
+  pointer-events: none;
+  z-index: 10;
+}
+
+html.macos [data-tucu='scroll-edge-bottom'] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 20px;
+  background: linear-gradient(to top, var(--macos-window-bg), transparent);
+  pointer-events: none;
+  z-index: 10;
+}
+
+html.macos.dark [data-tucu='scroll-edge-top'] {
+  background: linear-gradient(to bottom, var(--macos-window-bg), transparent);
+}
+
+html.macos.dark [data-tucu='scroll-edge-bottom'] {
+  background: linear-gradient(to top, var(--macos-window-bg), transparent);
+}
+
+/* ── MacOSToolbarOverflowMenu ────────────────────────────────── */
+
+html.macos [data-tucu='toolbar-overflow-btn'] {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--macos-radius-small-control);
+  background-color: var(--macos-control-bg);
+  border: 0.5px solid var(--macos-separator);
+  color: var(--macos-label);
+  cursor: default;
+}
+
+html.macos [data-tucu='toolbar-overflow-btn']:hover {
+  background-color: var(--macos-control-bg-hover);
+}
+
+html.macos [data-tucu='toolbar-overflow-menu'] {
+  border-radius: var(--macos-radius-popover);
+  background-color: var(--macos-glass-regular-bg-opaque);
+  backdrop-filter: blur(var(--macos-glass-blur, 28px));
+  -webkit-backdrop-filter: blur(var(--macos-glass-blur, 28px));
+  box-shadow: var(--macos-shadow-popover, var(--macos-shadow-window));
+  border: 0.5px solid var(--macos-glass-border);
+  padding: var(--macos-space-1) 0;
+  min-width: 160px;
+}
+
+html.macos [data-tucu='toolbar-overflow-item'] {
+  display: flex;
+  align-items: center;
+  gap: var(--macos-space-2);
+  padding: 5px var(--macos-space-3);
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-ts-body-size);
+  font-weight: var(--macos-font-weight-regular);
+  color: var(--macos-label);
+  cursor: default;
+  white-space: nowrap;
+}
+
+html.macos [data-tucu='toolbar-overflow-item']:hover {
+  background-color: var(--macos-control-accent);
+  color: #ffffff;
+  border-radius: 4px;
+  margin: 0 4px;
+  padding-left: calc(var(--macos-space-3) - 4px);
+  padding-right: calc(var(--macos-space-3) - 4px);
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos [data-tucu='toolbar-button'] {
+    transition: none;
+    transform: none !important;
+  }
+}