@zvndev/yable-themes 0.1.0

package/dist/themes/forest.css

@@ -0,0 +1,204 @@
+/* ============================================================================
+   @zvndev/yable-themes — Forest Theme
+   Grounded and organic. Deep sage, warm earth, olive undertones.
+   Not neon green — think aged moss, warm clay, worn leather.
+   Borders are warm gray-green, headers are olive-sage.
+
+   Usage:
+     import '@zvndev/yable-themes'
+     import '@zvndev/yable-themes/forest.css'
+     <Table theme="forest" />
+   ============================================================================ */
+
+.yable-theme-forest,
+.yable[data-theme="forest"] {
+  /* Surface — warm off-white with the faintest green warmth */
+  --yable-bg: #fbfcf9;
+  --yable-bg-header: #f3f5ef;
+  --yable-bg-footer: #f3f5ef;
+  --yable-bg-row: transparent;
+  --yable-bg-row-alt: rgba(90, 110, 78, 0.015);
+  --yable-bg-row-hover: rgba(90, 110, 78, 0.03);
+  --yable-bg-row-selected: rgba(90, 130, 60, 0.06);
+  --yable-bg-row-expanded: rgba(90, 110, 78, 0.015);
+  --yable-bg-cell-editing: #ffffff;
+  --yable-bg-pinned: #f7f9f4;
+  --yable-bg-row-drag-over: rgba(90, 130, 60, 0.08);
+
+  /* Text — warm olive-gray, earthy */
+  --yable-text-primary: #1c2118;
+  --yable-text-secondary: #5d6b55;
+  --yable-text-tertiary: #8b9783;
+  --yable-text-header: #4d6340;
+  --yable-text-disabled: #c2cabb;
+  --yable-text-link: #4d7a3e;
+  --yable-text-placeholder: #8b9783;
+
+  /* Borders — warm gray-green, organic feel */
+  --yable-border-color: #e2e7dc;
+  --yable-border-color-strong: #c8d1c0;
+  --yable-border-radius: 6px;
+  --yable-border-radius-lg: 10px;
+
+  /* Accent — sage-green, not emerald */
+  --yable-accent: #5a8a4a;
+  --yable-accent-hover: #4a7340;
+  --yable-accent-light: rgba(90, 138, 74, 0.06);
+  --yable-accent-text: #ffffff;
+
+  /* Focus */
+  --yable-focus-ring: 0 0 0 2px #fbfcf9, 0 0 0 4px rgba(90, 138, 74, 0.3);
+
+  /* Shadows — warm and earthy */
+  --yable-shadow: 0 1px 2px rgba(60, 70, 50, 0.05);
+  --yable-shadow-lg: 0 6px 20px rgba(60, 70, 50, 0.07);
+  --yable-shadow-pinned: 4px 0 10px -2px rgba(60, 70, 50, 0.05);
+
+  /* Scrollbar */
+  --yable-scrollbar-thumb: rgba(90, 110, 78, 0.18);
+  --yable-scrollbar-track: transparent;
+
+  /* Spacing */
+  --yable-cell-padding-x: 14px;
+  --yable-cell-padding-y: 10px;
+  --yable-header-padding-x: 14px;
+  --yable-header-padding-y: 11px;
+
+  /* Form */
+  --yable-input-border: #c8d1c0;
+  --yable-input-border-hover: #9daa92;
+  --yable-input-shadow-focus: 0 0 0 3px rgba(90, 138, 74, 0.08);
+
+  /* Checkbox */
+  --yable-checkbox-border: #c8d1c0;
+  --yable-checkbox-radius: 3px;
+
+  /* Pagination */
+  --yable-pagination-button-radius: 6px;
+  --yable-pagination-button-bg-hover: rgba(90, 110, 78, 0.06);
+
+  /* Loading */
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(90, 110, 78, 0.025) 25%,
+    rgba(90, 110, 78, 0.05) 37%,
+    rgba(90, 110, 78, 0.025) 63%
+  );
+}
+
+/* Header — olive-sage, grounded authority */
+.yable-theme-forest .yable-th,
+.yable[data-theme="forest"] .yable-th {
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: var(--yable-font-size-sm);
+  font-weight: var(--yable-font-weight-medium);
+  color: var(--yable-text-header);
+}
+
+.yable-theme-forest .yable-tr:not(:last-child) .yable-td,
+.yable[data-theme="forest"] .yable-tr:not(:last-child) .yable-td {
+  border-bottom-color: var(--yable-border-color);
+}
+
+/* ── Forest Dark Mode ───────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  .yable-theme-forest:not([data-yable-theme="light"]),
+  .yable[data-theme="forest"]:not([data-yable-theme="light"]) {
+    --yable-bg: #0c100b;
+    --yable-bg-header: #131812;
+    --yable-bg-footer: #131812;
+    --yable-bg-row-alt: rgba(90, 138, 74, 0.025);
+    --yable-bg-row-hover: rgba(90, 138, 74, 0.05);
+    --yable-bg-row-selected: rgba(90, 138, 74, 0.1);
+    --yable-bg-row-expanded: rgba(90, 138, 74, 0.02);
+    --yable-bg-cell-editing: #171e15;
+    --yable-bg-pinned: #10140f;
+    --yable-bg-row-drag-over: rgba(90, 138, 74, 0.12);
+
+    --yable-text-primary: #dae3d5;
+    --yable-text-secondary: #85997d;
+    --yable-text-tertiary: #556c4e;
+    --yable-text-header: #8fc07e;
+
+    --yable-border-color: #1e2a1b;
+    --yable-border-color-strong: #2d3e28;
+
+    --yable-accent: #7ab868;
+    --yable-accent-hover: #96ce88;
+    --yable-accent-light: rgba(122, 184, 104, 0.1);
+
+    --yable-focus-ring: 0 0 0 2px #0c100b, 0 0 0 4px rgba(122, 184, 104, 0.35);
+
+    --yable-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    --yable-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
+
+    --yable-scrollbar-thumb: rgba(122, 184, 104, 0.18);
+    --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+    --yable-input-border: #2d3e28;
+    --yable-input-border-hover: #3f5a38;
+    --yable-input-bg-focus: #171e15;
+    --yable-checkbox-border: #3f5a38;
+    --yable-checkbox-bg: #1e2a1b;
+
+    --yable-pagination-button-bg-hover: rgba(122, 184, 104, 0.08);
+
+    --yable-loading-shimmer: linear-gradient(
+      90deg,
+      rgba(122, 184, 104, 0.02) 25%,
+      rgba(122, 184, 104, 0.05) 37%,
+      rgba(122, 184, 104, 0.02) 63%
+    );
+  }
+}
+
+[data-yable-theme="dark"] .yable-theme-forest,
+[data-yable-theme="dark"] .yable[data-theme="forest"] {
+  --yable-bg: #0c100b;
+  --yable-bg-header: #131812;
+  --yable-bg-footer: #131812;
+  --yable-bg-row-alt: rgba(90, 138, 74, 0.025);
+  --yable-bg-row-hover: rgba(90, 138, 74, 0.05);
+  --yable-bg-row-selected: rgba(90, 138, 74, 0.1);
+  --yable-bg-row-expanded: rgba(90, 138, 74, 0.02);
+  --yable-bg-cell-editing: #171e15;
+  --yable-bg-pinned: #10140f;
+  --yable-bg-row-drag-over: rgba(90, 138, 74, 0.12);
+
+  --yable-text-primary: #dae3d5;
+  --yable-text-secondary: #85997d;
+  --yable-text-tertiary: #556c4e;
+  --yable-text-header: #8fc07e;
+
+  --yable-border-color: #1e2a1b;
+  --yable-border-color-strong: #2d3e28;
+
+  --yable-accent: #7ab868;
+  --yable-accent-hover: #96ce88;
+  --yable-accent-light: rgba(122, 184, 104, 0.1);
+
+  --yable-focus-ring: 0 0 0 2px #0c100b, 0 0 0 4px rgba(122, 184, 104, 0.35);
+
+  --yable-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  --yable-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
+
+  --yable-scrollbar-thumb: rgba(122, 184, 104, 0.18);
+  --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+  --yable-input-border: #2d3e28;
+  --yable-input-border-hover: #3f5a38;
+  --yable-input-bg-focus: #171e15;
+  --yable-checkbox-border: #3f5a38;
+  --yable-checkbox-bg: #1e2a1b;
+
+  --yable-pagination-button-bg-hover: rgba(122, 184, 104, 0.08);
+
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(122, 184, 104, 0.02) 25%,
+    rgba(122, 184, 104, 0.05) 37%,
+    rgba(122, 184, 104, 0.02) 63%
+  );
+}

package/dist/themes/midnight.css

@@ -0,0 +1,235 @@
+/* ============================================================================
+   @zvndev/yable-themes — Midnight Theme
+   Deep navy with electric blue glow. Inspired by VS Code, GitHub dark,
+   and modern developer tools. Headers feel alive with subtle blue tint.
+   Active states carry a soft luminous glow.
+
+   Usage:
+     import '@zvndev/yable-themes'
+     import '@zvndev/yable-themes/midnight.css'
+     <Table theme="midnight" />
+   ============================================================================ */
+
+.yable-theme-midnight,
+.yable[data-theme="midnight"] {
+  /* Surface — truly deep navy, not just dark gray */
+  --yable-bg: #080b16;
+  --yable-bg-header: #0d1025;
+  --yable-bg-footer: #0d1025;
+  --yable-bg-row: transparent;
+  --yable-bg-row-alt: rgba(56, 139, 253, 0.02);
+  --yable-bg-row-hover: rgba(56, 139, 253, 0.05);
+  --yable-bg-row-selected: rgba(56, 139, 253, 0.1);
+  --yable-bg-row-expanded: rgba(56, 139, 253, 0.025);
+  --yable-bg-cell-editing: #0f1330;
+  --yable-bg-pinned: #0a0d1e;
+  --yable-bg-row-drag-over: rgba(56, 139, 253, 0.12);
+
+  /* Text — high-contrast whites with cool blue undertones */
+  --yable-text-primary: #e6edf3;
+  --yable-text-secondary: #8b949e;
+  --yable-text-tertiary: #484f58;
+  --yable-text-header: #79c0ff;
+  --yable-text-disabled: #30363d;
+  --yable-text-link: #58a6ff;
+  --yable-text-placeholder: #484f58;
+
+  /* Borders — subtle blue-tinted navy edges */
+  --yable-border-color: #161b33;
+  --yable-border-color-strong: #21283d;
+  --yable-border-radius: 6px;
+  --yable-border-radius-lg: 10px;
+
+  /* Accent — electric blue, GitHub-style */
+  --yable-accent: #388bfd;
+  --yable-accent-hover: #58a6ff;
+  --yable-accent-light: rgba(56, 139, 253, 0.12);
+  --yable-accent-text: #ffffff;
+
+  /* Focus — electric blue glow ring */
+  --yable-focus-ring: 0 0 0 2px #080b16, 0 0 0 4px rgba(56, 139, 253, 0.5);
+
+  /* Shadows — deep with subtle blue luminance */
+  --yable-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 1px rgba(56, 139, 253, 0.06);
+  --yable-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 1px rgba(56, 139, 253, 0.08);
+  --yable-shadow-pinned: 4px 0 12px -2px rgba(0, 0, 0, 0.5);
+
+  /* Scrollbar */
+  --yable-scrollbar-thumb: rgba(56, 139, 253, 0.2);
+  --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+  /* Spacing — comfortable for long coding sessions */
+  --yable-cell-padding-x: 14px;
+  --yable-cell-padding-y: 10px;
+  --yable-header-padding-x: 14px;
+  --yable-header-padding-y: 11px;
+
+  /* Sizing */
+  --yable-row-min-height: 40px;
+  --yable-header-min-height: 40px;
+
+  /* Typography — monospace-friendly sizing */
+  --yable-font-size: 13px;
+  --yable-font-size-sm: 12px;
+  --yable-font-size-header: 11px;
+
+  /* Form controls */
+  --yable-input-bg: rgba(255, 255, 255, 0.025);
+  --yable-input-bg-hover: rgba(255, 255, 255, 0.05);
+  --yable-input-bg-focus: #0f1330;
+  --yable-input-border: #21283d;
+  --yable-input-border-hover: #30395a;
+  --yable-input-border-focus: var(--yable-accent);
+  --yable-input-shadow-focus: 0 0 0 3px rgba(56, 139, 253, 0.15);
+
+  /* Checkbox */
+  --yable-checkbox-border: #30395a;
+  --yable-checkbox-bg: #161b33;
+
+  /* Pagination */
+  --yable-pagination-button-radius: 6px;
+  --yable-pagination-button-bg-hover: rgba(56, 139, 253, 0.08);
+
+  /* Loading */
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(56, 139, 253, 0.02) 25%,
+    rgba(56, 139, 253, 0.05) 37%,
+    rgba(56, 139, 253, 0.02) 63%
+  );
+
+  /* Cell flash — cool blue palette */
+  --yable-flash-up-color: rgba(56, 211, 159, 0.25);
+  --yable-flash-down-color: rgba(248, 81, 73, 0.25);
+  --yable-flash-change-color: rgba(56, 139, 253, 0.2);
+}
+
+/* Header — alive with blue tint, crisp and technical */
+.yable-theme-midnight .yable-th,
+.yable[data-theme="midnight"] .yable-th {
+  text-transform: none;
+  letter-spacing: 0.02em;
+  font-size: var(--yable-font-size-header);
+  font-weight: var(--yable-font-weight-medium);
+  color: var(--yable-text-header);
+  border-bottom: 1px solid var(--yable-border-color-strong);
+}
+
+/* Rows — razor-thin navy separators */
+.yable-theme-midnight .yable-tr:not(:last-child) .yable-td,
+.yable[data-theme="midnight"] .yable-tr:not(:last-child) .yable-td {
+  border-bottom: 1px solid var(--yable-border-color);
+}
+
+/* Outer border — defined but not heavy */
+.yable-theme-midnight,
+.yable[data-theme="midnight"] {
+  border: 1px solid var(--yable-border-color-strong);
+}
+
+/* ── Midnight Light Variant ─────────────────────────────────────────────── */
+/* Light midnight: steel blue surfaces, deep blue accents — still technical */
+
+[data-yable-theme="light"] .yable-theme-midnight,
+[data-yable-theme="light"] .yable[data-theme="midnight"] {
+  --yable-bg: #f8f9fc;
+  --yable-bg-header: #eef1f8;
+  --yable-bg-footer: #eef1f8;
+  --yable-bg-row-alt: rgba(30, 58, 138, 0.015);
+  --yable-bg-row-hover: rgba(30, 58, 138, 0.03);
+  --yable-bg-row-selected: rgba(56, 139, 253, 0.07);
+  --yable-bg-row-expanded: rgba(30, 58, 138, 0.015);
+  --yable-bg-cell-editing: #ffffff;
+  --yable-bg-pinned: #f2f4fa;
+  --yable-bg-row-drag-over: rgba(56, 139, 253, 0.1);
+
+  --yable-text-primary: #1e293b;
+  --yable-text-secondary: #64748b;
+  --yable-text-tertiary: #94a3b8;
+  --yable-text-header: #1e40af;
+  --yable-text-disabled: #cbd5e1;
+  --yable-text-placeholder: #94a3b8;
+
+  --yable-border-color: #dfe4ef;
+  --yable-border-color-strong: #c1c9db;
+
+  --yable-accent: #2563eb;
+  --yable-accent-hover: #1d4ed8;
+  --yable-accent-light: rgba(37, 99, 235, 0.06);
+
+  --yable-focus-ring: 0 0 0 2px #f8f9fc, 0 0 0 4px rgba(37, 99, 235, 0.35);
+
+  --yable-shadow: 0 1px 2px rgba(30, 58, 138, 0.06);
+  --yable-shadow-lg: 0 4px 12px rgba(30, 58, 138, 0.1);
+
+  --yable-scrollbar-thumb: rgba(30, 58, 138, 0.15);
+  --yable-scrollbar-track: transparent;
+
+  --yable-input-bg: transparent;
+  --yable-input-bg-hover: rgba(0, 0, 0, 0.025);
+  --yable-input-bg-focus: #ffffff;
+  --yable-input-border: #c1c9db;
+  --yable-input-border-hover: #94a3b8;
+  --yable-checkbox-border: #94a3b8;
+  --yable-checkbox-bg: #ffffff;
+
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(30, 58, 138, 0.03) 25%,
+    rgba(30, 58, 138, 0.06) 37%,
+    rgba(30, 58, 138, 0.03) 63%
+  );
+}
+
+@media (prefers-color-scheme: light) {
+  .yable-theme-midnight:not([data-yable-theme="dark"]),
+  .yable[data-theme="midnight"]:not([data-yable-theme="dark"]) {
+    --yable-bg: #f8f9fc;
+    --yable-bg-header: #eef1f8;
+    --yable-bg-footer: #eef1f8;
+    --yable-bg-row-alt: rgba(30, 58, 138, 0.015);
+    --yable-bg-row-hover: rgba(30, 58, 138, 0.03);
+    --yable-bg-row-selected: rgba(56, 139, 253, 0.07);
+    --yable-bg-row-expanded: rgba(30, 58, 138, 0.015);
+    --yable-bg-cell-editing: #ffffff;
+    --yable-bg-pinned: #f2f4fa;
+    --yable-bg-row-drag-over: rgba(56, 139, 253, 0.1);
+
+    --yable-text-primary: #1e293b;
+    --yable-text-secondary: #64748b;
+    --yable-text-tertiary: #94a3b8;
+    --yable-text-header: #1e40af;
+    --yable-text-disabled: #cbd5e1;
+    --yable-text-placeholder: #94a3b8;
+
+    --yable-border-color: #dfe4ef;
+    --yable-border-color-strong: #c1c9db;
+
+    --yable-accent: #2563eb;
+    --yable-accent-hover: #1d4ed8;
+    --yable-accent-light: rgba(37, 99, 235, 0.06);
+
+    --yable-focus-ring: 0 0 0 2px #f8f9fc, 0 0 0 4px rgba(37, 99, 235, 0.35);
+
+    --yable-shadow: 0 1px 2px rgba(30, 58, 138, 0.06);
+    --yable-shadow-lg: 0 4px 12px rgba(30, 58, 138, 0.1);
+
+    --yable-scrollbar-thumb: rgba(30, 58, 138, 0.15);
+    --yable-scrollbar-track: transparent;
+
+    --yable-input-bg: transparent;
+    --yable-input-bg-hover: rgba(0, 0, 0, 0.025);
+    --yable-input-bg-focus: #ffffff;
+    --yable-input-border: #c1c9db;
+    --yable-input-border-hover: #94a3b8;
+    --yable-checkbox-border: #94a3b8;
+    --yable-checkbox-bg: #ffffff;
+
+    --yable-loading-shimmer: linear-gradient(
+      90deg,
+      rgba(30, 58, 138, 0.03) 25%,
+      rgba(30, 58, 138, 0.06) 37%,
+      rgba(30, 58, 138, 0.03) 63%
+    );
+  }
+}

package/dist/themes/mono.css

@@ -0,0 +1,227 @@
+/* ============================================================================
+   @zvndev/yable-themes — Mono Theme
+   Swiss design. Zero color. Pure typography. Maximum contrast.
+   The accent IS black (light) or white (dark). Borders are surgical.
+   This theme makes the data and typography the absolute hero.
+
+   Usage:
+     import '@zvndev/yable-themes'
+     import '@zvndev/yable-themes/mono.css'
+     <Table theme="mono" />
+   ============================================================================ */
+
+.yable-theme-mono,
+.yable[data-theme="mono"] {
+  /* Surface — true white, no warmth, no coolness */
+  --yable-bg: #ffffff;
+  --yable-bg-header: #f7f7f7;
+  --yable-bg-footer: #f7f7f7;
+  --yable-bg-row: transparent;
+  --yable-bg-row-alt: rgba(0, 0, 0, 0.012);
+  --yable-bg-row-hover: rgba(0, 0, 0, 0.025);
+  --yable-bg-row-selected: rgba(0, 0, 0, 0.05);
+  --yable-bg-row-expanded: rgba(0, 0, 0, 0.012);
+  --yable-bg-cell-editing: #ffffff;
+  --yable-bg-pinned: #fafafa;
+  --yable-bg-row-drag-over: rgba(0, 0, 0, 0.06);
+
+  /* Text — pure black scale, no blue or warm tint */
+  --yable-text-primary: #0a0a0a;
+  --yable-text-secondary: #666666;
+  --yable-text-tertiary: #999999;
+  --yable-text-header: #333333;
+  --yable-text-disabled: #cccccc;
+  --yable-text-link: #0a0a0a;
+  --yable-text-placeholder: #999999;
+
+  /* Borders — surgical precision, exact gray */
+  --yable-border-color: #e5e5e5;
+  --yable-border-color-strong: #d0d0d0;
+  --yable-border-radius: 4px;
+  --yable-border-radius-sm: 2px;
+  --yable-border-radius-lg: 6px;
+
+  /* Accent — pure black. Zero color. Typography-first. */
+  --yable-accent: #000000;
+  --yable-accent-hover: #333333;
+  --yable-accent-light: rgba(0, 0, 0, 0.04);
+  --yable-accent-text: #ffffff;
+
+  /* Focus — crisp black ring */
+  --yable-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
+
+  /* Shadows — minimal, structural */
+  --yable-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --yable-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06);
+  --yable-shadow-pinned: 4px 0 8px -2px rgba(0, 0, 0, 0.04);
+
+  /* Scrollbar */
+  --yable-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+  --yable-scrollbar-track: transparent;
+
+  /* Spacing — tight, data-dense */
+  --yable-cell-padding-x: 14px;
+  --yable-cell-padding-y: 9px;
+  --yable-header-padding-x: 14px;
+  --yable-header-padding-y: 10px;
+
+  /* Typography — slightly larger for readability, typography IS the design */
+  --yable-font-size: 13.5px;
+  --yable-font-size-sm: 12px;
+  --yable-font-size-header: 10px;
+  --yable-line-height: 1.5;
+
+  /* Form */
+  --yable-input-border: #d0d0d0;
+  --yable-input-border-hover: #999999;
+  --yable-input-shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.08);
+
+  /* Checkbox */
+  --yable-checkbox-border: #d0d0d0;
+  --yable-checkbox-radius: 2px;
+
+  /* Pagination */
+  --yable-pagination-button-radius: 3px;
+  --yable-pagination-button-bg-hover: rgba(0, 0, 0, 0.04);
+
+  /* Loading */
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.02) 25%,
+    rgba(0, 0, 0, 0.04) 37%,
+    rgba(0, 0, 0, 0.02) 63%
+  );
+}
+
+/* Header — uppercase, tight tracking, Swiss typographic precision */
+.yable-theme-mono .yable-th,
+.yable[data-theme="mono"] .yable-th {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: var(--yable-font-size-header);
+  font-weight: var(--yable-font-weight-semibold);
+  color: var(--yable-text-secondary);
+  border-bottom: 1px solid var(--yable-border-color-strong);
+}
+
+/* Rows — precise 1px rule */
+.yable-theme-mono .yable-tr:not(:last-child) .yable-td,
+.yable[data-theme="mono"] .yable-tr:not(:last-child) .yable-td {
+  border-bottom: 1px solid var(--yable-border-color);
+}
+
+/* Outer border — clean frame */
+.yable-theme-mono,
+.yable[data-theme="mono"] {
+  border: 1px solid var(--yable-border-color-strong);
+}
+
+/* ── Mono Dark Mode ─────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  .yable-theme-mono:not([data-yable-theme="light"]),
+  .yable[data-theme="mono"]:not([data-yable-theme="light"]) {
+    --yable-bg: #0a0a0a;
+    --yable-bg-header: #141414;
+    --yable-bg-footer: #141414;
+    --yable-bg-row-alt: rgba(255, 255, 255, 0.02);
+    --yable-bg-row-hover: rgba(255, 255, 255, 0.035);
+    --yable-bg-row-selected: rgba(255, 255, 255, 0.06);
+    --yable-bg-row-expanded: rgba(255, 255, 255, 0.015);
+    --yable-bg-cell-editing: #1a1a1a;
+    --yable-bg-pinned: #111111;
+    --yable-bg-row-drag-over: rgba(255, 255, 255, 0.07);
+
+    --yable-text-primary: #f5f5f5;
+    --yable-text-secondary: #999999;
+    --yable-text-tertiary: #666666;
+    --yable-text-header: #cccccc;
+    --yable-text-disabled: #444444;
+    --yable-text-link: #f5f5f5;
+
+    --yable-border-color: #262626;
+    --yable-border-color-strong: #393939;
+
+    /* Accent — pure white in dark mode. Inverted Swiss. */
+    --yable-accent: #ffffff;
+    --yable-accent-hover: #e5e5e5;
+    --yable-accent-light: rgba(255, 255, 255, 0.06);
+    --yable-accent-text: #0a0a0a;
+
+    --yable-focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #ffffff;
+
+    --yable-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    --yable-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
+
+    --yable-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+    --yable-scrollbar-track: transparent;
+
+    --yable-input-border: #393939;
+    --yable-input-border-hover: #555555;
+    --yable-input-bg-focus: #1a1a1a;
+    --yable-checkbox-border: #555555;
+    --yable-checkbox-bg: #262626;
+
+    --yable-pagination-button-bg-hover: rgba(255, 255, 255, 0.05);
+
+    --yable-loading-shimmer: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.02) 25%,
+      rgba(255, 255, 255, 0.04) 37%,
+      rgba(255, 255, 255, 0.02) 63%
+    );
+  }
+}
+
+[data-yable-theme="dark"] .yable-theme-mono,
+[data-yable-theme="dark"] .yable[data-theme="mono"] {
+  --yable-bg: #0a0a0a;
+  --yable-bg-header: #141414;
+  --yable-bg-footer: #141414;
+  --yable-bg-row-alt: rgba(255, 255, 255, 0.02);
+  --yable-bg-row-hover: rgba(255, 255, 255, 0.035);
+  --yable-bg-row-selected: rgba(255, 255, 255, 0.06);
+  --yable-bg-row-expanded: rgba(255, 255, 255, 0.015);
+  --yable-bg-cell-editing: #1a1a1a;
+  --yable-bg-pinned: #111111;
+  --yable-bg-row-drag-over: rgba(255, 255, 255, 0.07);
+
+  --yable-text-primary: #f5f5f5;
+  --yable-text-secondary: #999999;
+  --yable-text-tertiary: #666666;
+  --yable-text-header: #cccccc;
+  --yable-text-disabled: #444444;
+  --yable-text-link: #f5f5f5;
+
+  --yable-border-color: #262626;
+  --yable-border-color-strong: #393939;
+
+  /* Accent — pure white in dark mode. Inverted Swiss. */
+  --yable-accent: #ffffff;
+  --yable-accent-hover: #e5e5e5;
+  --yable-accent-light: rgba(255, 255, 255, 0.06);
+  --yable-accent-text: #0a0a0a;
+
+  --yable-focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #ffffff;
+
+  --yable-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --yable-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
+
+  --yable-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --yable-scrollbar-track: transparent;
+
+  --yable-input-border: #393939;
+  --yable-input-border-hover: #555555;
+  --yable-input-bg-focus: #1a1a1a;
+  --yable-checkbox-border: #555555;
+  --yable-checkbox-bg: #262626;
+
+  --yable-pagination-button-bg-hover: rgba(255, 255, 255, 0.05);
+
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.02) 25%,
+    rgba(255, 255, 255, 0.04) 37%,
+    rgba(255, 255, 255, 0.02) 63%
+  );
+}