@zvndev/yable-themes 0.1.0

package/dist/themes/ocean.css

@@ -0,0 +1,209 @@
+/* ============================================================================
+   @zvndev/yable-themes — Ocean Theme
+   Calm and fluid. Desaturated sage-teal palette with gentle transitions.
+   Think soft tide pools, not bright Caribbean. Muted teal headers,
+   borders that blend into backgrounds.
+
+   Usage:
+     import '@zvndev/yable-themes'
+     import '@zvndev/yable-themes/ocean.css'
+     <Table theme="ocean" />
+   ============================================================================ */
+
+.yable-theme-ocean,
+.yable[data-theme="ocean"] {
+  /* Surface — barely tinted white, calm */
+  --yable-bg: #fafcfb;
+  --yable-bg-header: #f2f7f6;
+  --yable-bg-footer: #f2f7f6;
+  --yable-bg-row: transparent;
+  --yable-bg-row-alt: rgba(107, 142, 135, 0.02);
+  --yable-bg-row-hover: rgba(107, 142, 135, 0.04);
+  --yable-bg-row-selected: rgba(94, 162, 155, 0.07);
+  --yable-bg-row-expanded: rgba(107, 142, 135, 0.02);
+  --yable-bg-cell-editing: #ffffff;
+  --yable-bg-pinned: #f5f9f8;
+  --yable-bg-row-drag-over: rgba(94, 162, 155, 0.1);
+
+  /* Text — muted sage, not bright teal */
+  --yable-text-primary: #1a2421;
+  --yable-text-secondary: #5f756e;
+  --yable-text-tertiary: #8fa39c;
+  --yable-text-header: #4a736a;
+  --yable-text-disabled: #c5d1cd;
+  --yable-text-link: #3d7a73;
+  --yable-text-placeholder: #8fa39c;
+
+  /* Borders — blend into the surface, barely there */
+  --yable-border-color: #e3ece9;
+  --yable-border-color-strong: #c9d9d4;
+  --yable-border-radius: 8px;
+  --yable-border-radius-lg: 12px;
+
+  /* Accent — muted sage-teal, not cyan */
+  --yable-accent: #3d8b80;
+  --yable-accent-hover: #327268;
+  --yable-accent-light: rgba(61, 139, 128, 0.06);
+  --yable-accent-text: #ffffff;
+
+  /* Focus */
+  --yable-focus-ring: 0 0 0 2px #fafcfb, 0 0 0 4px rgba(61, 139, 128, 0.3);
+
+  /* Shadows — cool and subtle */
+  --yable-shadow: 0 1px 2px rgba(61, 90, 82, 0.05);
+  --yable-shadow-lg: 0 6px 20px rgba(61, 90, 82, 0.07);
+  --yable-shadow-pinned: 4px 0 10px -2px rgba(61, 90, 82, 0.06);
+
+  /* Scrollbar */
+  --yable-scrollbar-thumb: rgba(61, 139, 128, 0.15);
+  --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: #c9d9d4;
+  --yable-input-border-hover: #9bb8b0;
+  --yable-input-shadow-focus: 0 0 0 3px rgba(61, 139, 128, 0.08);
+
+  /* Checkbox */
+  --yable-checkbox-border: #c9d9d4;
+  --yable-checkbox-radius: 4px;
+
+  /* Pagination */
+  --yable-pagination-button-radius: 6px;
+  --yable-pagination-button-bg-hover: rgba(61, 139, 128, 0.06);
+
+  /* Loading */
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(61, 139, 128, 0.025) 25%,
+    rgba(61, 139, 128, 0.05) 37%,
+    rgba(61, 139, 128, 0.025) 63%
+  );
+
+  /* Transitions — slightly slower for fluidity */
+  --yable-transition-fast: 120ms ease;
+  --yable-transition: 180ms ease;
+  --yable-transition-slow: 280ms ease;
+}
+
+/* Header — muted sage, understated authority */
+.yable-theme-ocean .yable-th,
+.yable[data-theme="ocean"] .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-ocean .yable-tr:not(:last-child) .yable-td,
+.yable[data-theme="ocean"] .yable-tr:not(:last-child) .yable-td {
+  border-bottom-color: var(--yable-border-color);
+}
+
+/* ── Ocean Dark Mode ────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  .yable-theme-ocean:not([data-yable-theme="light"]),
+  .yable[data-theme="ocean"]:not([data-yable-theme="light"]) {
+    --yable-bg: #0b1210;
+    --yable-bg-header: #0f1916;
+    --yable-bg-footer: #0f1916;
+    --yable-bg-row-alt: rgba(94, 162, 155, 0.025);
+    --yable-bg-row-hover: rgba(94, 162, 155, 0.05);
+    --yable-bg-row-selected: rgba(94, 162, 155, 0.1);
+    --yable-bg-row-expanded: rgba(94, 162, 155, 0.02);
+    --yable-bg-cell-editing: #121e1b;
+    --yable-bg-pinned: #0d1613;
+    --yable-bg-row-drag-over: rgba(94, 162, 155, 0.12);
+
+    --yable-text-primary: #dce8e5;
+    --yable-text-secondary: #7d9e96;
+    --yable-text-tertiary: #506b64;
+    --yable-text-header: #82c0b6;
+
+    --yable-border-color: #1a2b27;
+    --yable-border-color-strong: #253d37;
+
+    --yable-accent: #5eb8ab;
+    --yable-accent-hover: #7ecec3;
+    --yable-accent-light: rgba(94, 184, 171, 0.1);
+
+    --yable-focus-ring: 0 0 0 2px #0b1210, 0 0 0 4px rgba(94, 184, 171, 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(94, 184, 171, 0.18);
+    --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+    --yable-input-border: #253d37;
+    --yable-input-border-hover: #356a60;
+    --yable-input-bg-focus: #121e1b;
+    --yable-checkbox-border: #356a60;
+    --yable-checkbox-bg: #1a2b27;
+
+    --yable-pagination-button-bg-hover: rgba(94, 184, 171, 0.08);
+
+    --yable-loading-shimmer: linear-gradient(
+      90deg,
+      rgba(94, 184, 171, 0.02) 25%,
+      rgba(94, 184, 171, 0.05) 37%,
+      rgba(94, 184, 171, 0.02) 63%
+    );
+  }
+}
+
+[data-yable-theme="dark"] .yable-theme-ocean,
+[data-yable-theme="dark"] .yable[data-theme="ocean"] {
+  --yable-bg: #0b1210;
+  --yable-bg-header: #0f1916;
+  --yable-bg-footer: #0f1916;
+  --yable-bg-row-alt: rgba(94, 162, 155, 0.025);
+  --yable-bg-row-hover: rgba(94, 162, 155, 0.05);
+  --yable-bg-row-selected: rgba(94, 162, 155, 0.1);
+  --yable-bg-row-expanded: rgba(94, 162, 155, 0.02);
+  --yable-bg-cell-editing: #121e1b;
+  --yable-bg-pinned: #0d1613;
+  --yable-bg-row-drag-over: rgba(94, 162, 155, 0.12);
+
+  --yable-text-primary: #dce8e5;
+  --yable-text-secondary: #7d9e96;
+  --yable-text-tertiary: #506b64;
+  --yable-text-header: #82c0b6;
+
+  --yable-border-color: #1a2b27;
+  --yable-border-color-strong: #253d37;
+
+  --yable-accent: #5eb8ab;
+  --yable-accent-hover: #7ecec3;
+  --yable-accent-light: rgba(94, 184, 171, 0.1);
+
+  --yable-focus-ring: 0 0 0 2px #0b1210, 0 0 0 4px rgba(94, 184, 171, 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(94, 184, 171, 0.18);
+  --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+  --yable-input-border: #253d37;
+  --yable-input-border-hover: #356a60;
+  --yable-input-bg-focus: #121e1b;
+  --yable-checkbox-border: #356a60;
+  --yable-checkbox-bg: #1a2b27;
+
+  --yable-pagination-button-bg-hover: rgba(94, 184, 171, 0.08);
+
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(94, 184, 171, 0.02) 25%,
+    rgba(94, 184, 171, 0.05) 37%,
+    rgba(94, 184, 171, 0.02) 63%
+  );
+}

package/dist/themes/rose.css

@@ -0,0 +1,204 @@
+/* ============================================================================
+   @zvndev/yable-themes — Rose Theme
+   Elegant editorial warmth. Sophisticated, not sweet. Rose-500 accent
+   over warm stone grays. Think Notion's rose variant — subtle, warm,
+   with an editorial quality that feels intentional.
+
+   Usage:
+     import '@zvndev/yable-themes'
+     import '@zvndev/yable-themes/rose.css'
+     <Table theme="rose" />
+   ============================================================================ */
+
+.yable-theme-rose,
+.yable[data-theme="rose"] {
+  /* Surface — warm parchment, not pink */
+  --yable-bg: #fefcfb;
+  --yable-bg-header: #faf5f3;
+  --yable-bg-footer: #faf5f3;
+  --yable-bg-row: transparent;
+  --yable-bg-row-alt: rgba(168, 126, 118, 0.015);
+  --yable-bg-row-hover: rgba(168, 126, 118, 0.03);
+  --yable-bg-row-selected: rgba(244, 63, 94, 0.06);
+  --yable-bg-row-expanded: rgba(168, 126, 118, 0.015);
+  --yable-bg-cell-editing: #ffffff;
+  --yable-bg-pinned: #fcf8f7;
+  --yable-bg-row-drag-over: rgba(244, 63, 94, 0.08);
+
+  /* Text — warm stone, not cool gray */
+  --yable-text-primary: #292524;
+  --yable-text-secondary: #78716c;
+  --yable-text-tertiary: #a8a29e;
+  --yable-text-header: #8b5c59;
+  --yable-text-disabled: #d6d3d1;
+  --yable-text-link: #e11d48;
+  --yable-text-placeholder: #a8a29e;
+
+  /* Borders — warm blush that fades into surface */
+  --yable-border-color: #f0e6e3;
+  --yable-border-color-strong: #e0cdc8;
+  --yable-border-radius: 8px;
+  --yable-border-radius-lg: 12px;
+
+  /* Accent — rose-500, warm and confident */
+  --yable-accent: #f43f5e;
+  --yable-accent-hover: #e11d48;
+  --yable-accent-light: rgba(244, 63, 94, 0.05);
+  --yable-accent-text: #ffffff;
+
+  /* Focus */
+  --yable-focus-ring: 0 0 0 2px #fefcfb, 0 0 0 4px rgba(244, 63, 94, 0.25);
+
+  /* Shadows — warm undertone */
+  --yable-shadow: 0 1px 2px rgba(120, 80, 70, 0.05);
+  --yable-shadow-lg: 0 6px 20px rgba(120, 80, 70, 0.07);
+  --yable-shadow-pinned: 4px 0 10px -2px rgba(120, 80, 70, 0.05);
+
+  /* Scrollbar */
+  --yable-scrollbar-thumb: rgba(168, 126, 118, 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: #e0cdc8;
+  --yable-input-border-hover: #c4a8a0;
+  --yable-input-shadow-focus: 0 0 0 3px rgba(244, 63, 94, 0.06);
+
+  /* Checkbox */
+  --yable-checkbox-border: #e0cdc8;
+  --yable-checkbox-radius: 3px;
+
+  /* Pagination */
+  --yable-pagination-button-radius: 6px;
+  --yable-pagination-button-bg-hover: rgba(168, 126, 118, 0.06);
+
+  /* Loading */
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(168, 126, 118, 0.025) 25%,
+    rgba(168, 126, 118, 0.05) 37%,
+    rgba(168, 126, 118, 0.025) 63%
+  );
+}
+
+/* Header — warm muted rose, editorial feel */
+.yable-theme-rose .yable-th,
+.yable[data-theme="rose"] .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-rose .yable-tr:not(:last-child) .yable-td,
+.yable[data-theme="rose"] .yable-tr:not(:last-child) .yable-td {
+  border-bottom-color: var(--yable-border-color);
+}
+
+/* ── Rose Dark Mode ─────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  .yable-theme-rose:not([data-yable-theme="light"]),
+  .yable[data-theme="rose"]:not([data-yable-theme="light"]) {
+    --yable-bg: #110d0d;
+    --yable-bg-header: #1a1414;
+    --yable-bg-footer: #1a1414;
+    --yable-bg-row-alt: rgba(244, 63, 94, 0.02);
+    --yable-bg-row-hover: rgba(244, 63, 94, 0.04);
+    --yable-bg-row-selected: rgba(244, 63, 94, 0.1);
+    --yable-bg-row-expanded: rgba(244, 63, 94, 0.02);
+    --yable-bg-cell-editing: #1e1616;
+    --yable-bg-pinned: #151010;
+    --yable-bg-row-drag-over: rgba(244, 63, 94, 0.12);
+
+    --yable-text-primary: #f0e4e4;
+    --yable-text-secondary: #b09090;
+    --yable-text-tertiary: #7a5a5a;
+    --yable-text-header: #e88d9a;
+
+    --yable-border-color: #2d1f1f;
+    --yable-border-color-strong: #3d2b2b;
+
+    --yable-accent: #f43f5e;
+    --yable-accent-hover: #fb7185;
+    --yable-accent-light: rgba(244, 63, 94, 0.12);
+
+    --yable-focus-ring: 0 0 0 2px #110d0d, 0 0 0 4px rgba(244, 63, 94, 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(244, 63, 94, 0.18);
+    --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+    --yable-input-border: #3d2b2b;
+    --yable-input-border-hover: #5c3e3e;
+    --yable-input-bg-focus: #1e1616;
+    --yable-checkbox-border: #5c3e3e;
+    --yable-checkbox-bg: #2d1f1f;
+
+    --yable-pagination-button-bg-hover: rgba(244, 63, 94, 0.08);
+
+    --yable-loading-shimmer: linear-gradient(
+      90deg,
+      rgba(244, 63, 94, 0.02) 25%,
+      rgba(244, 63, 94, 0.05) 37%,
+      rgba(244, 63, 94, 0.02) 63%
+    );
+  }
+}
+
+[data-yable-theme="dark"] .yable-theme-rose,
+[data-yable-theme="dark"] .yable[data-theme="rose"] {
+  --yable-bg: #110d0d;
+  --yable-bg-header: #1a1414;
+  --yable-bg-footer: #1a1414;
+  --yable-bg-row-alt: rgba(244, 63, 94, 0.02);
+  --yable-bg-row-hover: rgba(244, 63, 94, 0.04);
+  --yable-bg-row-selected: rgba(244, 63, 94, 0.1);
+  --yable-bg-row-expanded: rgba(244, 63, 94, 0.02);
+  --yable-bg-cell-editing: #1e1616;
+  --yable-bg-pinned: #151010;
+  --yable-bg-row-drag-over: rgba(244, 63, 94, 0.12);
+
+  --yable-text-primary: #f0e4e4;
+  --yable-text-secondary: #b09090;
+  --yable-text-tertiary: #7a5a5a;
+  --yable-text-header: #e88d9a;
+
+  --yable-border-color: #2d1f1f;
+  --yable-border-color-strong: #3d2b2b;
+
+  --yable-accent: #f43f5e;
+  --yable-accent-hover: #fb7185;
+  --yable-accent-light: rgba(244, 63, 94, 0.12);
+
+  --yable-focus-ring: 0 0 0 2px #110d0d, 0 0 0 4px rgba(244, 63, 94, 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(244, 63, 94, 0.18);
+  --yable-scrollbar-track: rgba(255, 255, 255, 0.02);
+
+  --yable-input-border: #3d2b2b;
+  --yable-input-border-hover: #5c3e3e;
+  --yable-input-bg-focus: #1e1616;
+  --yable-checkbox-border: #5c3e3e;
+  --yable-checkbox-bg: #2d1f1f;
+
+  --yable-pagination-button-bg-hover: rgba(244, 63, 94, 0.08);
+
+  --yable-loading-shimmer: linear-gradient(
+    90deg,
+    rgba(244, 63, 94, 0.02) 25%,
+    rgba(244, 63, 94, 0.05) 37%,
+    rgba(244, 63, 94, 0.02) 63%
+  );
+}

package/dist/themes/stripe.css

@@ -0,0 +1,167 @@
+/* ============================================================================
+   @zvndev/yable-themes — Stripe Theme
+   Inspired by Stripe's dashboard — warm grays, crisp typography,
+   refined borders, and a professional polish.
+
+   Usage:
+     import '@zvndev/yable-themes'
+     import '@zvndev/yable-themes/stripe.css'
+     <Table className="yable-theme-stripe" />
+   ============================================================================ */
+
+.yable-theme-stripe,
+.yable[data-theme="stripe"] {
+  /* Surface — warm gray palette */
+  --yable-bg: #ffffff;
+  --yable-bg-header: #f6f8fa;
+  --yable-bg-footer: #f6f8fa;
+  --yable-bg-row-alt: transparent;
+  --yable-bg-row-hover: #f6f8fa;
+  --yable-bg-row-selected: rgba(99, 91, 255, 0.05);
+  --yable-bg-pinned: #ffffff;
+
+  /* Text — Stripe's characteristic dark + purple tones */
+  --yable-text-primary: #1a1f36;
+  --yable-text-secondary: #697386;
+  --yable-text-tertiary: #a3acb9;
+  --yable-text-header: #697386;
+
+  /* Borders — visible but refined */
+  --yable-border-color: #e3e8ee;
+  --yable-border-color-strong: #d8dee4;
+  --yable-border-radius: 8px;
+
+  /* Accent — Stripe's signature indigo/purple */
+  --yable-accent: #635bff;
+  --yable-accent-hover: #5851eb;
+  --yable-accent-light: rgba(99, 91, 255, 0.06);
+  --yable-accent-text: #ffffff;
+
+  /* Shadows — crisp, defined */
+  --yable-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --yable-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.08);
+  --yable-shadow-pinned: 3px 0 6px -2px rgba(0, 0, 0, 0.08);
+
+  /* Spacing — slightly more generous */
+  --yable-cell-padding-x: 16px;
+  --yable-cell-padding-y: 12px;
+  --yable-header-padding-x: 16px;
+  --yable-header-padding-y: 10px;
+
+  /* Sizing */
+  --yable-row-min-height: 44px;
+  --yable-header-min-height: 40px;
+
+  /* Typography — Stripe's characteristic weights */
+  --yable-font-size: 14px;
+  --yable-font-size-sm: 13px;
+  --yable-font-size-header: 12px;
+
+  /* Form controls — clean, precise */
+  --yable-input-border: #d8dee4;
+  --yable-input-border-hover: #a3acb9;
+  --yable-input-border-radius: 6px;
+  --yable-input-height: 30px;
+  --yable-input-shadow-focus: 0 0 0 3px rgba(99, 91, 255, 0.1), 0 0 0 1px rgba(99, 91, 255, 0.3);
+
+  /* Checkbox — Stripe-style */
+  --yable-checkbox-radius: 3px;
+  --yable-checkbox-bg-checked: var(--yable-accent);
+  --yable-checkbox-border-checked: var(--yable-accent);
+
+  /* Pagination */
+  --yable-pagination-button-radius: 6px;
+  --yable-pagination-button-bg-active: var(--yable-accent);
+}
+
+/* Header — uppercase labels with Stripe's signature style */
+.yable-theme-stripe .yable-th,
+.yable[data-theme="stripe"] .yable-th {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 11px;
+  font-weight: var(--yable-font-weight-semibold);
+  color: var(--yable-text-secondary);
+  border-bottom: var(--yable-border-width) solid var(--yable-border-color-strong);
+}
+
+/* Rows — clean separators */
+.yable-theme-stripe .yable-tr:not(:last-child) .yable-td,
+.yable[data-theme="stripe"] .yable-tr:not(:last-child) .yable-td {
+  border-bottom: var(--yable-border-width) solid var(--yable-border-color);
+}
+
+/* Outer border: crisp box-shadow instead of border for cleaner look */
+.yable-theme-stripe,
+.yable[data-theme="stripe"] {
+  border: none;
+  box-shadow: var(--yable-shadow);
+}
+
+/* ── Stripe Dark Mode ────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  .yable-theme-stripe:not([data-yable-theme="light"]),
+  .yable[data-theme="stripe"]:not([data-yable-theme="light"]) {
+    --yable-bg: #0a0d16;
+    --yable-bg-header: #0f1221;
+    --yable-bg-footer: #0f1221;
+    --yable-bg-row-hover: rgba(255, 255, 255, 0.03);
+    --yable-bg-row-selected: rgba(99, 91, 255, 0.1);
+    --yable-bg-pinned: #0d1019;
+
+    --yable-text-primary: #e6e9ef;
+    --yable-text-secondary: #8792a2;
+    --yable-text-tertiary: #5e6b80;
+    --yable-text-header: #8792a2;
+
+    --yable-border-color: #1c2033;
+    --yable-border-color-strong: #2a2f45;
+
+    --yable-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    --yable-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
+    --yable-shadow-pinned: 3px 0 6px -2px rgba(0, 0, 0, 0.4);
+
+    --yable-accent: #7a73ff;
+    --yable-accent-hover: #9c96ff;
+    --yable-accent-light: rgba(122, 115, 255, 0.12);
+
+    --yable-input-border: #2a2f45;
+    --yable-input-border-hover: #3d4460;
+    --yable-input-bg-focus: #131729;
+    --yable-checkbox-border: #3d4460;
+    --yable-checkbox-bg: #1c2033;
+  }
+}
+
+[data-yable-theme="dark"] .yable-theme-stripe,
+[data-yable-theme="dark"] .yable[data-theme="stripe"] {
+  --yable-bg: #0a0d16;
+  --yable-bg-header: #0f1221;
+  --yable-bg-footer: #0f1221;
+  --yable-bg-row-hover: rgba(255, 255, 255, 0.03);
+  --yable-bg-row-selected: rgba(99, 91, 255, 0.1);
+  --yable-bg-pinned: #0d1019;
+
+  --yable-text-primary: #e6e9ef;
+  --yable-text-secondary: #8792a2;
+  --yable-text-tertiary: #5e6b80;
+  --yable-text-header: #8792a2;
+
+  --yable-border-color: #1c2033;
+  --yable-border-color-strong: #2a2f45;
+
+  --yable-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --yable-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
+  --yable-shadow-pinned: 3px 0 6px -2px rgba(0, 0, 0, 0.4);
+
+  --yable-accent: #7a73ff;
+  --yable-accent-hover: #9c96ff;
+  --yable-accent-light: rgba(122, 115, 255, 0.12);
+
+  --yable-input-border: #2a2f45;
+  --yable-input-border-hover: #3d4460;
+  --yable-input-bg-focus: #131729;
+  --yable-checkbox-border: #3d4460;
+  --yable-checkbox-bg: #1c2033;
+}