@rovula/ui 0.1.28 → 0.1.30

package/src/theme/global.css

@@ -12,13 +12,29 @@
 @tailwind utilities;
 
 @layer base {
-  * {
-    /* @apply border-border; */
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
-  }
-
+  /*
+   * Scrollbar baseline
+   *
+   * Chrome 121+ conflict: when scrollbar-width is set on an element,
+   * Chrome IGNORES -webkit-scrollbar width/height entirely.
+   * They are mutually exclusive for sizing.
+   *
+   * Solution: apply scrollbar-width only in Firefox (where -webkit-scrollbar
+   * is not supported). Chrome/Safari use -webkit-scrollbar exclusively.
+   */
+
+  /* Firefox only — standard scrollbar API */
+  @supports (-moz-appearance: none) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
+    }
+  }
+
+  /* Chrome / Safari / Edge — WebKit scrollbar API */
+  /* scrollbar-width must NOT be set on these elements or sizes are ignored */
   *::-webkit-scrollbar {
+    -webkit-appearance: none;
     width: var(--scrollbar-s-thickness);
     height: var(--scrollbar-s-thickness);
     background: transparent;
@@ -47,11 +63,9 @@
 
   body {
     /* @apply bg-background text-foreground; */
-    /* @apply bg-[var(--background)] text-[var(--foreground)]; */
   }
 
-  /* hide input number arrow */
-  /* Chrome, Safari, Edge, Opera */
+  /* hide input number arrow — Chrome, Safari, Edge, Opera */
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -67,68 +81,93 @@
 @layer utilities {
 
   /* ------------------------------------------------------------------ */
-  /* Scrollbar utility — applies the design-system scrollbar style        */
-  /* Default size: S (6px thumb, matches Figma Size=S)                   */
-  /* Usage: add `ui-scrollbar` + optional size modifier to any           */
-  /* overflow-auto / overflow-y-auto / overflow-x-auto container.        */
+  /* ui-scrollbar — design-system themed scrollbar                       */
+  /*                                                                      */
+  /* Sizing uses COMPOUND SELECTORS (not CSS variables) because          */
+  /* -webkit-scrollbar pseudo-elements don't reliably inherit custom     */
+  /* properties in Chrome. Compound selectors have higher specificity    */
+  /* and directly override the base width/height.                        */
+  /*                                                                      */
+  /* Usage:                                                               */
+  /*   <div class="ui-scrollbar">                     default M+M        */
+  /*   <div class="ui-scrollbar ui-scrollbar-y-s">    M horiz + S vert  */
   /* ------------------------------------------------------------------ */
 
-  /* --- Track --- */
+  /* Firefox: standard API */
+  @supports (-moz-appearance: none) {
+    .ui-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
+    }
+  }
+
+  /* ── Base track: default M on both axes ────────────────────────────── */
   .ui-scrollbar::-webkit-scrollbar {
-    width: var(--scrollbar-s-thickness);
-    height: var(--scrollbar-s-thickness);
+    -webkit-appearance: none;
+    height: var(--scrollbar-m-thickness);   /* horizontal bar height */
+    width:  var(--scrollbar-m-thickness);   /* vertical   bar width  */
     background: transparent;
   }
 
-  /* --- Thumb --- */
   .ui-scrollbar::-webkit-scrollbar-thumb {
     border-radius: 12px;
     background: var(--scrollbar-thumb-default-color);
+    /* 2px inset from track edges — matches Figma py-[2px] */
+    border: 2px solid transparent;
+    background-clip: padding-box;
   }
 
   .ui-scrollbar::-webkit-scrollbar-thumb:hover {
     background: var(--scrollbar-thumb-hover-color);
-    cursor: pointer;
   }
 
-  /* --- Track border (vertical) --- */
+  /* Track border — M only (Figma: S and XS have no border) */
   .ui-scrollbar::-webkit-scrollbar-track:vertical {
     border-left: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
   }
-
-  /* --- Track border (horizontal) --- */
   .ui-scrollbar::-webkit-scrollbar-track:horizontal {
     border-top: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
   }
 
-  .ui-scrollbar::-webkit-scrollbar-corner {
-    background: transparent;
+  /* S and XS: no track border, no thumb inset (compound selector removes it) */
+  .ui-scrollbar.ui-scrollbar-s::-webkit-scrollbar-track,
+  .ui-scrollbar.ui-scrollbar-x-s::-webkit-scrollbar-track:horizontal,
+  .ui-scrollbar.ui-scrollbar-y-s::-webkit-scrollbar-track:vertical,
+  .ui-scrollbar.ui-scrollbar-xs::-webkit-scrollbar-track,
+  .ui-scrollbar.ui-scrollbar-x-xs::-webkit-scrollbar-track:horizontal,
+  .ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar-track:vertical {
+    border: none;
   }
 
-  /* --- Size variants --- */
+  .ui-scrollbar::-webkit-scrollbar-corner { background: transparent; }
 
-  /* Size M — 12px */
-  .ui-scrollbar-m::-webkit-scrollbar {
-    width: var(--scrollbar-m-thickness);
-    height: var(--scrollbar-m-thickness);
-  }
+  /* ── Size overrides — compound selectors (0,0,2,0 > 0,0,1,0)
+   *
+   * IMPORTANT source order: "both axes" MUST come before per-axis rules.
+   * Same specificity → last declared wins. Per-axis (x-s, y-s …) must win
+   * over both-axes (m, s …) so they are placed AFTER both-axes below.    */
 
-  /* Size S — 6px (default, same as base .ui-scrollbar) */
-  .ui-scrollbar-s::-webkit-scrollbar {
-    width: var(--scrollbar-s-thickness);
-    height: var(--scrollbar-s-thickness);
-  }
+  /* Both axes — set height AND width together */
+  .ui-scrollbar.ui-scrollbar-m::-webkit-scrollbar  { height: var(--scrollbar-m-thickness);  width: var(--scrollbar-m-thickness);  }
+  .ui-scrollbar.ui-scrollbar-s::-webkit-scrollbar  { height: var(--scrollbar-s-thickness);  width: var(--scrollbar-s-thickness);  }
+  .ui-scrollbar.ui-scrollbar-xs::-webkit-scrollbar { height: var(--scrollbar-xs-thickness); width: var(--scrollbar-xs-thickness); }
 
-  /* Size XS — 2px */
-  .ui-scrollbar-xs::-webkit-scrollbar {
-    width: var(--scrollbar-xs-thickness);
-    height: var(--scrollbar-xs-thickness);
-  }
+  /* Per-axis horizontal (height only) — declared after both-axes so they win */
+  .ui-scrollbar.ui-scrollbar-x-m::-webkit-scrollbar  { height: var(--scrollbar-m-thickness);  }
+  .ui-scrollbar.ui-scrollbar-x-s::-webkit-scrollbar  { height: var(--scrollbar-s-thickness);  }
+  .ui-scrollbar.ui-scrollbar-x-xs::-webkit-scrollbar { height: var(--scrollbar-xs-thickness); }
+
+  /* Per-axis vertical (width only) — declared after both-axes so they win */
+  .ui-scrollbar.ui-scrollbar-y-m::-webkit-scrollbar  { width: var(--scrollbar-m-thickness);  }
+  .ui-scrollbar.ui-scrollbar-y-s::-webkit-scrollbar  { width: var(--scrollbar-s-thickness);  }
+  .ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar { width: var(--scrollbar-xs-thickness); }
 
-  /* XS size has no track border */
-  .ui-scrollbar-xs::-webkit-scrollbar-track:vertical,
-  .ui-scrollbar-xs::-webkit-scrollbar-track:horizontal {
+  /* XS: no border inset on thumb (4px track has no room) */
+  .ui-scrollbar.ui-scrollbar-xs::-webkit-scrollbar-thumb,
+  .ui-scrollbar.ui-scrollbar-x-xs::-webkit-scrollbar-thumb:horizontal,
+  .ui-scrollbar.ui-scrollbar-y-xs::-webkit-scrollbar-thumb:vertical {
     border: none;
+    background-clip: border-box;
   }
 
 }

package/src/theme/presets/colors.js

@@ -170,6 +170,18 @@ module.exports = {
         "table-panel-main-line": withColorMixin("--table-panel-main-line"),
         "table-panel-selected": withColorMixin("--table-panel-selected"),
 
+        // Table component-scoped aliases (resolve from table.css tokens;
+        // swap automatically when an ancestor has data-surface="panel")
+        "table-c-header-bg":   withColorMixin("--table-c-header-bg"),
+        "table-c-header-line": withColorMixin("--table-c-header-line"),
+        "table-c-border":      withColorMixin("--table-c-border"),
+        "table-c-row-bg":      withColorMixin("--table-c-row-bg"),
+        "table-c-row-bg-even": withColorMixin("--table-c-row-bg-even"),
+        "table-c-row-line":    withColorMixin("--table-c-row-line"),
+        "table-c-col-line":    withColorMixin("--table-c-col-line"),
+        "table-c-hover":       withColorMixin("--table-c-hover"),
+        "table-c-selected":    withColorMixin("--table-c-selected"),
+
         // Modal dropdown surface
         "modal-dropdown-surface": withColorMixin("--modal-dropdown-surface"),
 

package/src/theme/themes/variable.css

@@ -77,64 +77,64 @@
   --state-primary-text-pressed-skyller: #1e40af;
   --state-secondary-default-xspector: #ececec;
   --state-secondary-default-report-xspector-light-mode: #9b8f00;
-  --state-secondary-default-skyller: #60a5fa;
+  --state-secondary-default-skyller: #171717;
   --state-secondary-hover-xspector: #fafafa;
   --state-secondary-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-hover-skyller: #90c0fc;
+  --state-secondary-hover-skyller: #424242;
   --state-secondary-stroke-xspector: rgba(236 236 236 / 0.48);
   --state-secondary-stroke-report-xspector-light-mode: rgba(155 143 0 / 0.64);
   --state-secondary-stroke-skyller: rgba(189 189 189 / 0.64);
   --state-secondary-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --state-secondary-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
-  --state-secondary-hover-bg-skyller: rgba(144 192 252 / 0.08);
+  --state-secondary-hover-bg-skyller: rgba(66 66 66 / 0.08);
   --state-secondary-pressed-xspector: #bbbbbb;
   --state-secondary-pressed-report-xspector-light-mode: #6f6700;
-  --state-secondary-pressed-skyller: #1e40af;
+  --state-secondary-pressed-skyller: #000000;
   --state-secondary-active-xspector: #fafafa;
   --state-secondary-active-report-xspector-light-mode: #b1a400;
-  --state-secondary-active-skyller: #1e3a8a;
+  --state-secondary-active-skyller: #000000;
   --state-secondary-text-solid-xspector: #212b36;
   --state-secondary-text-solid-report-xspector-light-mode: #ffffff;
   --state-secondary-text-solid-skyller: #ffffff;
   --state-secondary-text-outline-xspector: #ececec;
   --state-secondary-text-outline-report-xspector-light-mode: #9b8f00;
-  --state-secondary-text-outline-skyller: #60a5fa;
+  --state-secondary-text-outline-skyller: #171717;
   --state-secondary-text-hover-xspector: #fafafa;
   --state-secondary-text-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-text-hover-skyller: #90c0fc;
+  --state-secondary-text-hover-skyller: #424242;
   --state-secondary-text-pressed-xspector: #c5c5c5;
   --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
-  --state-secondary-text-pressed-skyller: #1e40af;
+  --state-secondary-text-pressed-skyller: #000000;
   --state-tertiary-default-xspector: #8aa2ab;
   --state-tertiary-default-report-xspector-light-mode: #4f4f4f;
-  --state-tertiary-default-skyller: #0891b2;
+  --state-tertiary-default-skyller: #60a5fa;
   --state-tertiary-hover-xspector: #adcad6;
   --state-tertiary-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-hover-skyller: #52b2c9;
+  --state-tertiary-hover-skyller: #90c0fc;
   --state-tertiary-stroke-xspector: rgba(138 162 171 / 0.48);
   --state-tertiary-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
-  --state-tertiary-stroke-skyller: rgba(8 145 178 / 0.48);
+  --state-tertiary-stroke-skyller: rgba(189 189 189 / 0.48);
   --state-tertiary-hover-bg-xspector: rgba(173 202 214 / 0.08);
   --state-tertiary-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
-  --state-tertiary-hover-bg-skyller: rgba(82 178 201 / 0.08);
+  --state-tertiary-hover-bg-skyller: rgba(144 192 252 / 0.08);
   --state-tertiary-pressed-xspector: #57656b;
   --state-tertiary-pressed-report-xspector-light-mode: #b1b1b1;
-  --state-tertiary-pressed-skyller: #06667d;
+  --state-tertiary-pressed-skyller: #1e40af;
   --state-tertiary-active-xspector: #adcad6;
   --state-tertiary-active-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-active-skyller: #044959;
+  --state-tertiary-active-skyller: #1e3a8a;
   --state-tertiary-text-solid-xspector: #212b36;
   --state-tertiary-text-solid-report-xspector-light-mode: #ffffff;
   --state-tertiary-text-solid-skyller: #ffffff;
   --state-tertiary-text-outline-xspector: #8aa2ab;
   --state-tertiary-text-outline-report-xspector-light-mode: #4f4f4f;
-  --state-tertiary-text-outline-skyller: #0891b2;
+  --state-tertiary-text-outline-skyller: #60a5fa;
   --state-tertiary-text-hover-xspector: #adcad6;
   --state-tertiary-text-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-text-hover-skyller: #52b2c9;
+  --state-tertiary-text-hover-skyller: #90c0fc;
   --state-tertiary-text-pressed-xspector: #57656b;
   --state-tertiary-text-pressed-report-xspector-light-mode: #b1b1b1;
-  --state-tertiary-text-pressed-skyller: #06667d;
+  --state-tertiary-text-pressed-skyller: #1e40af;
   --state-info-default-xspector: #1b7df5;
   --state-info-default-report-xspector-light-mode: #1b7df5;
   --state-info-default-skyller: #2563eb;
@@ -869,13 +869,13 @@
   --input-error-skyller: #dc2626;
   --function-default-solid-xspector: #ececec;
   --function-default-solid-report-xspector-light-mode: #1e3249;
-  --function-default-solid-skyller: #2563eb;
+  --function-default-solid-skyller: #171717;
   --function-default-hover-xspector: #fafafa;
   --function-default-hover-report-xspector-light-mode: #35475b;
-  --function-default-hover-skyller: #90c0fc;
+  --function-default-hover-skyller: #424242;
   --function-default-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --function-default-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
-  --function-default-hover-bg-skyller: rgba(144 192 252 / 0.08);
+  --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
   --function-default-stroke-skyller: rgba(189 189 189 / 0.48);
@@ -884,19 +884,19 @@
   --function-default-icon-skyller: #ffffff;
   --function-default-outline-icon-xspector: #9e9e9e;
   --function-default-outline-icon-report-xspector-light-mode: #1e3249;
-  --function-default-outline-icon-skyller: #2563eb;
+  --function-default-outline-icon-skyller: #171717;
   --function-active-solid-xspector: #b1a400;
   --function-active-solid-report-xspector-light-mode: #9b8f00;
-  --function-active-solid-skyller: #60a5fa;
+  --function-active-solid-skyller: #2563eb;
   --function-active-hover-xspector: #ddcd00;
   --function-active-hover-report-xspector-light-mode: #b1a400;
-  --function-active-hover-skyller: #80b7fb;
+  --function-active-hover-skyller: #5182ef;
   --function-active-hover-bg-xspector: rgba(221 205 0 / 0.08);
   --function-active-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
-  --function-active-hover-bg-skyller: rgba(128 183 251 / 0.08);
+  --function-active-hover-bg-skyller: rgba(81 130 239 / 0.08);
   --function-active-stroke-xspector: rgba(177 164 0 / 0.48);
   --function-active-stroke-report-xspector-light-mode: rgba(177 164 0 / 0.48);
-  --function-active-stroke-skyller: rgba(96 165 250 / 0.48);
+  --function-active-stroke-skyller: rgba(37 99 235 / 0.48);
   --function-active-icon-xspector: #212b36;
   --function-active-icon-report-xspector-light-mode: #ffffff;
   --function-active-icon-skyller: #ffffff;
@@ -1038,7 +1038,7 @@
   --modal-line-xspector: #4a4a4a;
   --modal-line-report-xspector-light-mode: #cfcfcf;
   --modal-line-skyller: #d4d4d4;
-  --bg-bg4-xspector: #0f2a46;
+  --bg-bg4-xspector: #0c2948;
   --bg-bg4-report-xspector-light-mode: #ffffff;
   --bg-bg4-skyller: #ffffff;
   --bg-bg5-xspector: #000000;
@@ -1055,7 +1055,7 @@
   --bg-stroke5-skyller: #000000;
   --table-bg-main-xspector: #091a2a;
   --table-bg-main-report-xspector-light-mode: #e5e5e5;
-  --table-bg-main-skyller: #f5f5f5;
+  --table-bg-main-skyller: #d4d4d6;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
   --table-bg-line-skyller: #ececec;
@@ -1083,7 +1083,6 @@
   --modal-dropdown-surface-xspector: #252628;
   --modal-dropdown-surface-report-xspector-light-mode: #ffffff;
   --modal-dropdown-surface-skyller: #ffffff;
-  --modal-dropdown-surface-skyller: #ffffff;
 
   /* BUTTON RADIUS */
   --button-l-round: 8px;

package/src/theme/tokens/baseline.css

@@ -9,4 +9,5 @@
 @import url(components/dropdown-menu.css);
 @import url(components/switch.css);
 @import url(components/scrollbar.css);
-@import url(components/badge.css);
+@import url(components/badge.css);
+@import url(components/table.css);

package/src/theme/tokens/components/scrollbar.css

@@ -1,12 +1,17 @@
 :root {
   /* ------------------------------------------------------------------ */
   /* Scrollbar Component Tokens                                          */
+  /* Values represent TOTAL TRACK SIZE (thumb + padding + border).      */
+  /* Figma node: 9466-13957                                             */
   /* ------------------------------------------------------------------ */
 
-  /* Thumb sizes (track width/height) */
-  --scrollbar-m-thickness: 12px;
-  --scrollbar-s-thickness: 6px;
-  --scrollbar-xs-thickness: 2px;
+  /* Track thickness (= thumb + 2×2px padding)
+   * M:  16px  = 12px thumb + 2px top + 2px bottom
+   * S:  10px  = 6px  thumb + 2px top + 2px bottom  (no track border)
+   * XS:  4px  = 4px  thumb, no padding, no border                     */
+  --scrollbar-m-thickness: 16px;
+  --scrollbar-s-thickness: 10px;
+  --scrollbar-xs-thickness: 4px;
 
   /* Track border — visible on M size only */
   --scrollbar-track-border-width: 1px;

package/src/theme/tokens/components/table.css

@@ -0,0 +1,63 @@
+:root {
+  /* ------------------------------------------------------------------ */
+  /* Table Component Tokens                                              */
+  /* Figma node: 9637-8978  (section "Use case" on Design System page)  */
+  /*                                                                     */
+  /* These are component-scoped aliases that the Table component uses    */
+  /* exclusively.  They default to the "on-bg" values and are           */
+  /* automatically overridden when an ancestor carries                   */
+  /* data-surface="panel" — no React prop or variant needed.            */
+  /* ------------------------------------------------------------------ */
+
+  /* Header cell background.
+   * Default: table-bg-main (opaque dark blue).
+   * Panel:   transparent — the modal/panel surface shows through.      */
+  --table-c-header-bg: var(--table-bg-main);
+
+  /* Separator below the header row.
+   * Default: transparent — the bg contrast between header and rows
+   *          provides visual separation; no explicit line needed.
+   * Panel:   table-panel-main-line — explicit separator required
+   *          because all backgrounds are transparent.                   */
+  --table-c-header-line: transparent;
+
+  /* Outer border when Table / DataTable uses a framed shell.            */
+  --table-c-border: transparent;
+  
+  /* Body row backgrounds.
+   * Default: bg-a for all rows; striped mode uses bg-a/bg-b alternate.
+   * Panel:   transparent for both — panel surface provides the bg.     */
+  --table-c-row-bg: var(--table-bg-a);
+  --table-c-row-bg-even: var(--table-bg-b);
+
+  /* Horizontal row dividers (used when TableRow divided=true).         */
+  --table-c-row-line: var(--table-bg-line);
+
+  /* Vertical column dividers (used when TableRow colDivided=true).     */
+  --table-c-col-line: var(--table-bg-line);
+
+  /* Hover overlay on body rows.                                        */
+  --table-c-hover: var(--table-bg-hover);
+
+  /* Selected row overlay (data-state="selected" on <tr>).              */
+  --table-c-selected: var(--transparent-primary-12);
+}
+
+/* ------------------------------------------------------------------ */
+/* Panel / Modal / Drawer surface override                             */
+/* Apply data-surface="panel" to the Modal, Drawer, or Panel wrapper. */
+/* All Table instances inside the scope inherit these tokens.          */
+/* Avoid scoping the whole Storybook/page: row bgs are transparent and */
+/* expect --modal-surface behind the table, not --workspace/page bg.   */
+/* ------------------------------------------------------------------ */
+[data-surface="panel"] {
+  --table-c-header-bg:   var(--modal-surface);
+  --table-c-header-line: var(--table-panel-main-line);
+  --table-c-border:      var(--table-panel-main-line);
+  --table-c-row-bg:      var(--modal-surface);  /* TODO: not have this token in Figma for now.   */
+  --table-c-row-bg-even: var(--table-panel-hover); /* TODO: not have this token in Figma for now. */
+  --table-c-row-line:    var(--table-panel-sub-line);
+  --table-c-col-line:    var(--table-panel-sub-line);
+  --table-c-hover:       var(--table-panel-hover);
+  --table-c-selected:    var(--table-panel-selected);
+}