@skygraph/styles 0.1.0 → 0.2.1

package/components/checkbox.css

@@ -1,4 +1,25 @@
+/* Checkbox — custom box element on top of a visually-hidden native input.
+ *
+ * The native `<input type="checkbox">` is kept in the DOM (for keyboard,
+ * form-association, accessibility, indeterminate) but visually hidden.
+ * A sibling `.sg-checkbox-box` element paints the actual UI so demos
+ * can rebrand through dedicated `--sg-checkbox-*` tokens without
+ * fighting the browser's `accent-color` limitations.
+ */
+
 .sg-checkbox {
+  /* Component-local tokens. Override these (not the globals) to rebrand
+   * one group of checkboxes — keeps `--sg-color-primary` intact for the
+   * rest of the page. */
+  --sg-checkbox-size: 16px;
+  --sg-checkbox-radius: 4px;
+  --sg-checkbox-border: var(--sg-color-border);
+  --sg-checkbox-border-hover: var(--sg-color-primary);
+  --sg-checkbox-bg: var(--sg-color-bg);
+  --sg-checkbox-bg-checked: var(--sg-color-primary);
+  --sg-checkbox-color-checked: var(--sg-color-white);
+
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--sg-padding-sm);
@@ -13,11 +34,75 @@
   cursor: not-allowed;
 }
 
+/* Visually hide the native checkbox but keep it focusable & screen-
+ * readable. Pointer events are forwarded to the wrapping <label>. */
 .sg-checkbox-input {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--sg-color-primary);
-  cursor: inherit;
+  position: absolute;
+  width: var(--sg-checkbox-size);
+  height: var(--sg-checkbox-size);
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-checkbox-box {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--sg-checkbox-size);
+  height: var(--sg-checkbox-size);
+  border: 1px solid var(--sg-checkbox-border);
+  border-radius: var(--sg-checkbox-radius);
+  background: var(--sg-checkbox-bg);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-checkbox:hover .sg-checkbox-box {
+  border-color: var(--sg-checkbox-border-hover);
+}
+
+.sg-checkbox-input:focus-visible ~ .sg-checkbox-box {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-checkbox-input:checked ~ .sg-checkbox-box,
+.sg-checkbox-input:indeterminate ~ .sg-checkbox-box {
+  background: var(--sg-checkbox-bg-checked);
+  border-color: var(--sg-checkbox-bg-checked);
+}
+
+/* Tick (checked) */
+.sg-checkbox-input:checked ~ .sg-checkbox-box::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--sg-checkbox-color-checked);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Bar (indeterminate) */
+.sg-checkbox-input:indeterminate ~ .sg-checkbox-box::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 50%;
+  height: 2px;
+  background: var(--sg-checkbox-color-checked);
+  transform: translateY(-50%);
+}
+
+.sg-checkbox-disabled .sg-checkbox-box {
+  background: var(--sg-color-bg-disabled, var(--sg-color-bg-secondary));
+  border-color: var(--sg-color-border);
+  opacity: 0.6;
 }
 
 .sg-checkbox-label {

package/components/diagram.css

@@ -220,13 +220,17 @@
 
 .sg-diagram-edge {
   stroke: var(--sg-diagram-edge-color);
-  stroke-width: 1.75;
+  stroke-width: 1.5;
   fill: none;
-  /* `linejoin` keeps orthogonal-routed edges crisp at corners; `linecap`
-   * rounds the start/end so an edge feels finished where it meets the
-   * node border instead of clipping abruptly. */
+  /* `linejoin: round` smooths orthogonal corners. `linecap: butt`
+   * means the path tip ends flush — combined with the marker-end
+   * sitting at `refX/refY = 0`, the arrow glyph picks up exactly
+   * where the line stops, with no visible "pill" cap protruding
+   * beyond the arrowhead. Round caps used to leak a half-circle
+   * over the marker base and that was visible on every screenshot
+   * the user shared. */
   stroke-linejoin: round;
-  stroke-linecap: round;
+  stroke-linecap: butt;
   transition:
     stroke var(--sg-transition-fast),
     stroke-width var(--sg-transition-fast);
@@ -236,7 +240,7 @@
  * naturally thins at the inflection point, which makes the same
  * stroke-width look lighter than its orthogonal counterpart. */
 .sg-diagram-edge-bezier {
-  stroke-width: 2;
+  stroke-width: 1.75;
 }
 
 /* Dashed for manual-routed waypoints — visually distinguishes a hand-
@@ -248,7 +252,7 @@
 .sg-diagram-edge-hit:hover + .sg-diagram-edge,
 g[data-edge-id]:hover .sg-diagram-edge {
   stroke: var(--sg-diagram-edge-hover-stroke);
-  stroke-width: 2.5;
+  stroke-width: 2.25;
 }
 
 /* Highlight edges connected to a selected node when the selection is
@@ -257,26 +261,35 @@ g[data-edge-id]:hover .sg-diagram-edge {
  * `selected` color on `:focus-within` of the SVG group. */
 g[data-edge-id]:focus-within .sg-diagram-edge {
   stroke: var(--sg-diagram-edge-color-selected);
-  stroke-width: 2.5;
+  stroke-width: 2.25;
 }
 
 /* ─── Arrow markers ─────────────────────────────────────────────────── */
 /*
- * SVG markers don't inherit `stroke` from the path automatically — the
- * `context-stroke` keyword in the marker `fill` solves it where
- * supported, and the fallback below keeps Firefox / Safari < TP rendering
- * the arrow in the right colour by using `currentColor`.
+ * The arrowhead is an "open V" — two strokes meeting at the marker
+ * anchor, not a filled triangle. That gives the arrow visual cohesion
+ * with the line (same stroke), keeps it readable on dense graphs, and
+ * matches the look used by React Flow / draw.io / Lucidchart.
  *
- * `.sg-diagram-edges` carries `currentColor` from the token so the arrow
- * inherits the default colour; per-state overrides (`:hover`) below adjust
- * `currentColor` so the arrow lights up together with the line.
+ * SVG markers don't inherit `stroke` from the path automatically. We
+ * use `context-stroke` in the marker so modern browsers paint the arrow
+ * with the line colour, and rely on `currentColor` below as a fallback
+ * for Firefox / Safari versions that don't yet support context-stroke.
+ *
+ * `.sg-diagram-edges { color: ... }` is the lever per-edge state hooks
+ * (`:hover`) modulate so the arrow lights up together with the line.
  */
 .sg-diagram-edges {
   color: var(--sg-diagram-edge-color);
 }
 
+/* Marker glyph: stroke takes the inherited `currentColor` so old
+ * browsers without context-stroke still render the arrow in the right
+ * colour. `fill: none` is essential — the marker is an open polyline,
+ * not a triangle. */
 .sg-diagram-arrow-fill {
-  fill: currentColor;
+  stroke: currentColor;
+  fill: none;
 }
 
 g[data-edge-id]:hover {

package/components/gantt.css

@@ -51,6 +51,11 @@
   color: var(--sg-color-text-secondary);
   border-right: 1px solid var(--sg-color-border-secondary);
   box-sizing: border-box;
+  /* Clip the label when the tick is narrower than the rendered text
+   * (e.g. day scale with columnWidth=24) — without this, adjacent
+   * labels visually pile up on each other. */
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .sg-gantt-grid {
@@ -123,7 +128,7 @@
   /* Drop-shadow on the text increases legibility on saturated bar
    * fills (esp. the bright primary blue). Cheap, single-line filter
    * that doesn't disturb the bar background. */
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .sg-gantt-bar-resize {

package/components/input.css

@@ -23,7 +23,8 @@
   background: var(--sg-input-bg);
   border: 1px solid var(--sg-input-border);
   border-radius: var(--sg-input-radius);
-  transition: color var(--sg-transition-duration) var(--sg-transition-timing),
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
     background var(--sg-transition-duration) var(--sg-transition-timing),
     border-color var(--sg-transition-duration) var(--sg-transition-timing),
     box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
@@ -108,3 +109,77 @@
   bottom: 0;
   margin: auto 0;
 }
+
+/* ---- Prefix / Suffix ---- */
+.sg-input-prefix,
+.sg-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sg-color-text-secondary);
+  pointer-events: none;
+}
+
+.sg-input-prefix {
+  position: absolute;
+  left: var(--sg-padding-sm);
+  top: 0;
+  bottom: 0;
+}
+
+.sg-input-suffix {
+  position: absolute;
+  right: var(--sg-padding-sm);
+  top: 0;
+  bottom: 0;
+}
+
+.sg-input-wrapper:has(.sg-input-prefix) .sg-input {
+  padding-left: calc(var(--sg-padding-md) + 16px);
+}
+
+.sg-input-wrapper:has(.sg-input-suffix) .sg-input {
+  padding-right: calc(var(--sg-padding-md) + 16px);
+}
+
+/* ---- Clear button ---- */
+.sg-input-wrapper:has(.sg-input-clear) .sg-input {
+  padding-right: calc(var(--sg-padding-md) + 18px);
+}
+
+.sg-input-clear {
+  position: absolute;
+  right: var(--sg-padding-xs);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--sg-color-fill-tertiary);
+  color: var(--sg-color-text-secondary);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    opacity var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-input-clear:hover {
+  background: var(--sg-color-fill);
+  color: var(--sg-color-text);
+  opacity: 1;
+}
+
+.sg-input-clear:focus-visible {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}

package/components/radio.css

@@ -1,3 +1,10 @@
+/* Radio — custom painted dot on top of a visually-hidden native input.
+ *
+ * Like Checkbox, the native `<input type="radio">` stays in the DOM for
+ * keyboard / form / a11y but is visually hidden. `.sg-radio-box` paints
+ * the circle so demos can rebrand through `--sg-radio-*` tokens without
+ * fighting `accent-color` limitations across browsers. */
+
 .sg-radio-group {
   display: flex;
   gap: var(--sg-padding-md);
@@ -8,12 +15,21 @@
 }
 
 .sg-radio {
+  --sg-radio-size: 16px;
+  --sg-radio-border: var(--sg-color-border);
+  --sg-radio-border-hover: var(--sg-color-primary);
+  --sg-radio-bg: var(--sg-color-bg);
+  --sg-radio-bg-checked: var(--sg-color-primary);
+  --sg-radio-dot-color: var(--sg-color-white);
+
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--sg-padding-xs);
   cursor: pointer;
   font-size: var(--sg-font-size);
   color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
 }
 
 .sg-radio-disabled {
@@ -22,11 +38,52 @@
 }
 
 .sg-radio-input {
-  width: 16px;
-  height: 16px;
+  position: absolute;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
   margin: 0;
-  accent-color: var(--sg-color-primary);
-  cursor: inherit;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-radio-box {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
+  border: 1px solid var(--sg-radio-border);
+  border-radius: 50%;
+  background: var(--sg-radio-bg);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-radio:hover .sg-radio-box {
+  border-color: var(--sg-radio-border-hover);
+}
+
+.sg-radio-input:focus-visible ~ .sg-radio-box {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-radio-input:checked ~ .sg-radio-box {
+  background: var(--sg-radio-bg-checked);
+  border-color: var(--sg-radio-bg-checked);
+}
+
+.sg-radio-input:checked ~ .sg-radio-box::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sg-radio-dot-color);
+  transform: translate(-50%, -50%);
 }
 
 .sg-radio-label {

package/components/resource-calendar.css

@@ -71,6 +71,11 @@
 .sg-rcal-main {
   background: var(--sg-color-bg);
   position: relative;
+  /* Clip absolutely positioned blocks (assignments / ticks) so they
+   * can't bleed onto the sidebar when their dates fall outside the
+   * visible `range`. Interactive drag also clamps to range, so this
+   * is a safety net for props-supplied out-of-range assignments. */
+  overflow: hidden;
 }
 
 .sg-rcal-header {
@@ -183,7 +188,7 @@
   transform: none;
   box-shadow:
     0 0 0 1px var(--sg-rcal-conflict-color),
-    0 2px 6px rgba(245, 34, 45, 0.20);
+    0 2px 6px rgba(245, 34, 45, 0.2);
 }
 
 .sg-rcal-assignment-draggable {

package/components/schema-form-editor.css

@@ -75,7 +75,9 @@
 .sg-sfe-body {
   display: grid;
   grid-template-columns: var(--sg-sfe-palette-width) 1fr var(--sg-sfe-inspector-width);
+  flex: 1;
   min-height: 480px;
+  overflow: hidden;
 }
 
 /* Palette (left) ---------------------------------------------------------- */
@@ -113,7 +115,8 @@
   border-radius: var(--sg-sfe-radius);
   cursor: grab;
   user-select: none;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing),
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
     box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
@@ -162,6 +165,8 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   background: var(--sg-sfe-bg);
 }
 
@@ -204,7 +209,8 @@
   border: 1px solid transparent;
   border-radius: var(--sg-sfe-radius);
   cursor: pointer;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing),
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
     background var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
@@ -370,6 +376,8 @@
   border-top: 1px solid var(--sg-sfe-border-secondary);
   background: var(--sg-sfe-bg-secondary);
   max-height: 320px;
+  flex-shrink: 0;
+  overflow-y: auto;
 }
 
 .sg-sfe-tabs {

package/components/switch.css

@@ -1,4 +1,10 @@
 .sg-switch {
+  /* Off state uses a dedicated token so demos can rebrand without
+   * touching `--sg-color-text-disabled` (which is also used by the
+   * disabled visual state — overriding it makes every control look
+   * disabled). */
+  --sg-switch-bg: color-mix(in srgb, var(--sg-color-text) 25%, transparent);
+  --sg-switch-bg-checked: var(--sg-color-primary);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -7,7 +13,7 @@
   padding: 0;
   border: none;
   border-radius: 11px;
-  background: var(--sg-color-text-disabled);
+  background: var(--sg-switch-bg);
   cursor: pointer;
   transition: background var(--sg-transition-duration) var(--sg-transition-timing);
 }
@@ -19,7 +25,7 @@
 }
 
 .sg-switch-checked {
-  background: var(--sg-color-primary);
+  background: var(--sg-switch-bg-checked);
 }
 
 .sg-switch-disabled {

package/components/table.css

@@ -71,6 +71,25 @@
   position: relative;
 }
 
+/* Mobile fallback — when there's no explicit `scroll.x`, the table tries
+ * to flex into the available width which, on narrow viewports, collapses
+ * cells into illegible vertical stacks. Forcing horizontal overflow with
+ * `width: max-content` on the inner grid restores tabular layout and
+ * exposes a native horizontal scrollbar so users can pan instead of
+ * losing data. Only applies when `.sg-table-scroll-x` wasn't already set
+ * (which means the consumer opted-in to a controlled scroll width). */
+@media (max-width: 640px) {
+  .sg-table-scroll:not(.sg-table-scroll-x) {
+    overflow-x: auto;
+  }
+  .sg-table-scroll:not(.sg-table-scroll-x) .sg-table-grid,
+  .sg-table-scroll:not(.sg-table-scroll-x) .sg-table-pinned-top,
+  .sg-table-scroll:not(.sg-table-scroll-x) .sg-table-pinned-bottom {
+    min-width: 100%;
+    width: max-content;
+  }
+}
+
 /* Grid base.
  * The grid carries a solid base background so body cells (transparent by
  * default) and fixed-sticky cells draw over the same colour. Without this,
@@ -117,6 +136,19 @@
   display: flex;
   align-items: center;
   gap: var(--sg-padding-xs);
+  /* В узких колонках с одновременно sortable + filters заголовок мог
+   * "наезжать" на filter-trigger / resize-handle: длинный title + ▲▼
+   * не помещались, sort и filter сливались. Скрываем переполнение и
+   * усекаем сам title через .sg-table-th-title — иконки всегда видны. */
+  overflow: hidden;
+}
+
+.sg-table-th-title {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sg-table-th-sortable {
@@ -143,6 +175,13 @@
   line-height: 8px;
   color: var(--sg-color-text-quaternary, var(--sg-color-text-tertiary));
   transition: color var(--sg-transition-duration);
+  /* Defensive: keep the sort glyph compact even if the locale ships a long
+   * aria-quality label instead of a single ▲/▼ glyph. The cell would
+   * otherwise stretch by the full label width and clash with the column
+   * title or filter trigger. */
+  max-width: 1em;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .sg-table-sort-current {
@@ -604,6 +643,11 @@
  * changes — that drift is what shows up as the scrollbar thumb lagging
  * behind the cursor while the user drags it. Locking visible row cells to
  * the configured `rowHeight` removes the mismatch entirely. */
+.sg-table-grid-virtual-fixed {
+  /* Overridden inline by Table when `rowHeight` is set */
+  --sg-virtual-row-height: var(--sg-height-md);
+}
+
 .sg-table-grid-virtual-fixed .sg-table-row[data-sg-virtual-row-index] > .sg-table-td {
   height: var(--sg-virtual-row-height);
   min-height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skygraph/styles",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
   "license": "MIT",
   "type": "module",

package/tokens.css

@@ -91,7 +91,7 @@
 
 /* === Semantic tokens — Light theme (default) === */
 :root,
-[data-sg-theme="light"] {
+[data-sg-theme='light'] {
   --sg-color-bg: var(--sg-gray-1);
   --sg-color-bg-secondary: var(--sg-gray-2);
   --sg-color-bg-elevated: var(--sg-gray-1);
@@ -109,6 +109,12 @@
   --sg-color-border: var(--sg-gray-5);
   --sg-color-border-secondary: var(--sg-gray-4);
 
+  /* Subtle fills (tracks, clear buttons, skeletons) */
+  --sg-color-fill: rgba(0, 0, 0, 0.15);
+  --sg-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --sg-color-fill-tertiary: rgba(0, 0, 0, 0.06);
+  --sg-color-fill-quaternary: rgba(0, 0, 0, 0.02);
+
   --sg-color-primary: var(--sg-blue-6);
   --sg-color-primary-hover: var(--sg-blue-5);
   --sg-color-primary-active: var(--sg-blue-7);
@@ -138,19 +144,12 @@
   --sg-diagram-canvas-bg: var(--sg-color-bg);
   --sg-diagram-grid-line-color: rgba(0, 0, 0, 0.04);
   --sg-diagram-grid-line-color-strong: rgba(0, 0, 0, 0.08);
-  --sg-diagram-node-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.06),
-    0 0 0 1px rgba(0, 0, 0, 0.04);
-  --sg-diagram-node-shadow-hover:
-    0 4px 12px rgba(0, 0, 0, 0.10),
-    0 1px 3px rgba(0, 0, 0, 0.06);
+  --sg-diagram-node-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --sg-diagram-node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
   --sg-diagram-node-shadow-selected:
-    0 0 0 2px var(--sg-color-primary-bg),
-    0 6px 16px rgba(22, 119, 255, 0.18),
+    0 0 0 2px var(--sg-color-primary-bg), 0 6px 16px rgba(22, 119, 255, 0.18),
     0 1px 3px rgba(0, 0, 0, 0.08);
-  --sg-diagram-node-shadow-dragging:
-    0 12px 28px rgba(0, 0, 0, 0.20),
-    0 2px 6px rgba(0, 0, 0, 0.10);
+  --sg-diagram-node-shadow-dragging: 0 12px 28px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
   --sg-diagram-edge-color: var(--sg-gray-6);
   --sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
   --sg-diagram-edge-color-selected: var(--sg-color-primary);
@@ -159,53 +158,43 @@
 
   /* Charts — tooltip, crosshair, brush, legend */
   --sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
-  --sg-chart-tooltip-shadow:
-    0 6px 20px rgba(0, 0, 0, 0.12),
-    0 1px 3px rgba(0, 0, 0, 0.06);
+  --sg-chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
   --sg-chart-crosshair-color: rgba(0, 0, 0, 0.32);
-  --sg-chart-brush-fill: rgba(22, 119, 255, 0.10);
+  --sg-chart-brush-fill: rgba(22, 119, 255, 0.1);
   --sg-chart-brush-stroke: var(--sg-color-primary);
   --sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
 
   /* Dashboard — widget elevation, editor affordances */
   --sg-dashboard-widget-shadow: var(--sg-shadow-sm);
-  --sg-dashboard-widget-shadow-hover:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.04);
+  --sg-dashboard-widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
   --sg-dashboard-editor-grid-color: rgba(22, 119, 255, 0.06);
   --sg-dashboard-editor-widget-border: var(--sg-color-primary);
   --sg-dashboard-editor-drop-zone-bg: rgba(22, 119, 255, 0.06);
   --sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
 
   /* Gantt — bars, today marker, dependency arrows */
-  --sg-gantt-bar-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.10),
-    inset 0 1px 0 rgba(255, 255, 255, 0.18);
+  --sg-gantt-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
   --sg-gantt-bar-shadow-hover:
-    0 3px 8px rgba(0, 0, 0, 0.14),
-    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+    0 3px 8px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
   --sg-gantt-today-marker-color: var(--sg-color-error);
   --sg-gantt-today-marker-bg: rgba(245, 34, 45, 0.06);
   --sg-gantt-dep-color: var(--sg-color-text-tertiary);
 
   /* Timeline / EventTimeline — connector + event dot */
   --sg-timeline-tail-color: var(--sg-color-border-secondary);
-  --sg-event-timeline-dot-shadow:
-    0 0 0 3px var(--sg-color-bg),
-    0 1px 3px rgba(22, 119, 255, 0.30);
+  --sg-event-timeline-dot-shadow: 0 0 0 3px var(--sg-color-bg), 0 1px 3px rgba(22, 119, 255, 0.3);
   --sg-event-timeline-dot-shadow-hover:
-    0 0 0 3px var(--sg-color-bg),
-    0 2px 8px rgba(22, 119, 255, 0.45);
+    0 0 0 3px var(--sg-color-bg), 0 2px 8px rgba(22, 119, 255, 0.45);
 
   /* ResourceCalendar — today, lane separators, conflict overlay */
   --sg-rcal-today-bg: rgba(22, 119, 255, 0.05);
   --sg-rcal-today-marker-color: var(--sg-color-primary);
   --sg-rcal-lane-divider: var(--sg-color-border-secondary);
-  --sg-rcal-conflict-overlay-bg: rgba(245, 34, 45, 0.10);
+  --sg-rcal-conflict-overlay-bg: rgba(245, 34, 45, 0.1);
 }
 
 /* === Semantic tokens — Dark theme === */
-[data-sg-theme="dark"] {
+[data-sg-theme='dark'] {
   --sg-color-bg: var(--sg-gray-10);
   --sg-color-bg-secondary: #1f1f1f;
   --sg-color-bg-elevated: #1f1f1f;
@@ -223,6 +212,11 @@
   --sg-color-border: #424242;
   --sg-color-border-secondary: #303030;
 
+  --sg-color-fill: rgba(255, 255, 255, 0.15);
+  --sg-color-fill-secondary: rgba(255, 255, 255, 0.08);
+  --sg-color-fill-tertiary: rgba(255, 255, 255, 0.06);
+  --sg-color-fill-quaternary: rgba(255, 255, 255, 0.04);
+
   --sg-color-primary: var(--sg-blue-5);
   --sg-color-primary-hover: var(--sg-blue-6);
   --sg-color-primary-active: var(--sg-blue-7);
@@ -250,19 +244,12 @@
   --sg-diagram-canvas-bg: var(--sg-color-bg);
   --sg-diagram-grid-line-color: rgba(255, 255, 255, 0.04);
   --sg-diagram-grid-line-color-strong: rgba(255, 255, 255, 0.08);
-  --sg-diagram-node-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.40),
-    0 0 0 1px rgba(255, 255, 255, 0.04);
-  --sg-diagram-node-shadow-hover:
-    0 4px 12px rgba(0, 0, 0, 0.50),
-    0 1px 3px rgba(0, 0, 0, 0.40);
+  --sg-diagram-node-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --sg-diagram-node-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
   --sg-diagram-node-shadow-selected:
-    0 0 0 2px var(--sg-color-primary-bg),
-    0 6px 16px rgba(64, 150, 255, 0.30),
-    0 1px 3px rgba(0, 0, 0, 0.40);
-  --sg-diagram-node-shadow-dragging:
-    0 12px 28px rgba(0, 0, 0, 0.60),
-    0 2px 6px rgba(0, 0, 0, 0.40);
+    0 0 0 2px var(--sg-color-primary-bg), 0 6px 16px rgba(64, 150, 255, 0.3),
+    0 1px 3px rgba(0, 0, 0, 0.4);
+  --sg-diagram-node-shadow-dragging: 0 12px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
   --sg-diagram-edge-color: var(--sg-gray-7);
   --sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
   --sg-diagram-edge-color-selected: var(--sg-color-primary);
@@ -270,40 +257,30 @@
   --sg-diagram-lasso-fill: rgba(64, 150, 255, 0.12);
 
   --sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
-  --sg-chart-tooltip-shadow:
-    0 6px 20px rgba(0, 0, 0, 0.50),
-    0 1px 3px rgba(0, 0, 0, 0.30);
-  --sg-chart-crosshair-color: rgba(255, 255, 255, 0.40);
+  --sg-chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
+  --sg-chart-crosshair-color: rgba(255, 255, 255, 0.4);
   --sg-chart-brush-fill: rgba(64, 150, 255, 0.16);
   --sg-chart-brush-stroke: var(--sg-color-primary);
   --sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
 
   --sg-dashboard-widget-shadow: var(--sg-shadow-sm);
-  --sg-dashboard-widget-shadow-hover:
-    0 4px 12px rgba(0, 0, 0, 0.40),
-    0 1px 3px rgba(0, 0, 0, 0.30);
+  --sg-dashboard-widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
   --sg-dashboard-editor-grid-color: rgba(64, 150, 255, 0.08);
   --sg-dashboard-editor-widget-border: var(--sg-color-primary);
-  --sg-dashboard-editor-drop-zone-bg: rgba(64, 150, 255, 0.10);
+  --sg-dashboard-editor-drop-zone-bg: rgba(64, 150, 255, 0.1);
   --sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
 
-  --sg-gantt-bar-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.40),
-    inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  --sg-gantt-bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
   --sg-gantt-bar-shadow-hover:
-    0 3px 8px rgba(0, 0, 0, 0.50),
-    inset 0 1px 0 rgba(255, 255, 255, 0.14);
+    0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
   --sg-gantt-today-marker-color: var(--sg-color-error);
-  --sg-gantt-today-marker-bg: rgba(220, 68, 70, 0.10);
+  --sg-gantt-today-marker-bg: rgba(220, 68, 70, 0.1);
   --sg-gantt-dep-color: var(--sg-color-text-tertiary);
 
   --sg-timeline-tail-color: var(--sg-color-border-secondary);
-  --sg-event-timeline-dot-shadow:
-    0 0 0 3px var(--sg-color-bg),
-    0 1px 3px rgba(64, 150, 255, 0.45);
+  --sg-event-timeline-dot-shadow: 0 0 0 3px var(--sg-color-bg), 0 1px 3px rgba(64, 150, 255, 0.45);
   --sg-event-timeline-dot-shadow-hover:
-    0 0 0 3px var(--sg-color-bg),
-    0 2px 10px rgba(64, 150, 255, 0.65);
+    0 0 0 3px var(--sg-color-bg), 0 2px 10px rgba(64, 150, 255, 0.65);
 
   --sg-rcal-today-bg: rgba(64, 150, 255, 0.08);
   --sg-rcal-today-marker-color: var(--sg-color-primary);