@skygraph/styles 0.2.0 → 0.2.1

package/components/input.css

@@ -161,7 +161,7 @@
   margin: 0;
   border: none;
   border-radius: 50%;
-  background: var(--sg-color-fill-tertiary, rgba(0, 0, 0, 0.06));
+  background: var(--sg-color-fill-tertiary);
   color: var(--sg-color-text-secondary);
   font-size: 14px;
   line-height: 1;
@@ -174,7 +174,7 @@
 }
 
 .sg-input-clear:hover {
-  background: var(--sg-color-fill, rgba(0, 0, 0, 0.15));
+  background: var(--sg-color-fill);
   color: var(--sg-color-text);
   opacity: 1;
 }

package/components/switch.css

@@ -3,7 +3,7 @@
    * touching `--sg-color-text-disabled` (which is also used by the
    * disabled visual state — overriding it makes every control look
    * disabled). */
-  --sg-switch-bg: var(--sg-color-fill, rgba(0, 0, 0, 0.25));
+  --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;

package/components/table.css

@@ -643,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.2.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);