@skygraph/styles 0.2.0 → 0.2.2

package/components/colorpicker.css

@@ -136,7 +136,7 @@
   position: absolute;
   width: 12px;
   height: 12px;
-  border: 2px solid #fff;
+  border: 2px solid var(--sg-color-white, #fff);
   border-radius: 50%;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
   transform: translate(-50%, -50%);
@@ -170,7 +170,7 @@
   top: 50%;
   width: 14px;
   height: 14px;
-  border: 2px solid #fff;
+  border: 2px solid var(--sg-color-white, #fff);
   border-radius: 50%;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
   background: transparent;

package/components/dropdown.css

@@ -20,8 +20,14 @@
 }
 
 @keyframes sg-dropdown-in {
-  from { opacity: 0; transform: scaleY(0.8); }
-  to { opacity: 1; transform: scaleY(1); }
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
 }
 
 /* Placement variants — both camelCase (legacy, generated as
@@ -69,6 +75,12 @@
   background: var(--sg-color-bg-hover);
 }
 
+.sg-dropdown-item-focused {
+  background: var(--sg-color-bg-hover);
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -2px;
+}
+
 .sg-dropdown-item-disabled {
   color: var(--sg-color-text-disabled);
   cursor: not-allowed;
@@ -82,10 +94,15 @@
   color: var(--sg-color-error);
 }
 
-.sg-dropdown-item-danger:hover {
+.sg-dropdown-item-danger:hover,
+.sg-dropdown-item-danger.sg-dropdown-item-focused {
   background: var(--sg-color-error-bg);
 }
 
+.sg-dropdown-item-danger.sg-dropdown-item-focused {
+  outline-color: var(--sg-color-error);
+}
+
 .sg-dropdown-divider {
   height: 1px;
   margin: var(--sg-margin-xs) 0;

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/menu.css

@@ -64,7 +64,7 @@
 
 .sg-menu-dark .sg-menu-item-selected,
 .sg-menu-dark .sg-menu-item-selected:hover {
-  color: #fff;
+  color: var(--sg-color-white, #fff);
   background: var(--sg-color-primary);
 }
 

package/components/skeleton.css

@@ -10,7 +10,7 @@
 
 .sg-skeleton-avatar {
   display: block;
-  background: var(--sg-color-bg-hover);
+  background: var(--sg-skeleton-bg, var(--sg-color-bg-hover));
 }
 
 .sg-skeleton-avatar-circle {
@@ -29,7 +29,7 @@
 .sg-skeleton-title {
   height: 16px;
   margin-bottom: var(--sg-margin-md);
-  background: var(--sg-color-bg-hover);
+  background: var(--sg-skeleton-bg, var(--sg-color-bg-hover));
   border-radius: var(--sg-border-radius-sm);
 }
 
@@ -44,25 +44,29 @@
 
 .sg-skeleton-paragraph li {
   height: 16px;
-  background: var(--sg-color-bg-hover);
+  background: var(--sg-skeleton-bg, var(--sg-color-bg-hover));
   border-radius: var(--sg-border-radius-sm);
 }
 
-/* Pulse animation */
+/* Pulse animation — gradient sweeps the shimmer highlight across the bar. */
 .sg-skeleton-active .sg-skeleton-avatar,
 .sg-skeleton-active .sg-skeleton-title,
 .sg-skeleton-active .sg-skeleton-paragraph li {
   animation: sg-skeleton-pulse 1.5s ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    var(--sg-color-bg-hover) 25%,
-    var(--sg-color-bg-secondary) 37%,
-    var(--sg-color-bg-hover) 63%
+    var(--sg-skeleton-bg, var(--sg-color-bg-hover)) 25%,
+    var(--sg-skeleton-shimmer, var(--sg-color-bg-secondary)) 37%,
+    var(--sg-skeleton-bg, var(--sg-color-bg-hover)) 63%
   );
   background-size: 400% 100%;
 }
 
 @keyframes sg-skeleton-pulse {
-  0% { background-position: 100% 50%; }
-  100% { background-position: 0 50%; }
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
 }

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,7 +1,7 @@
 {
   "name": "@skygraph/styles",
-  "version": "0.2.0",
-  "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
+  "version": "0.2.2",
+  "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
   "license": "MIT",
   "type": "module",
   "sideEffects": [

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);
@@ -130,6 +136,12 @@
   --sg-color-tooltip-bg: rgba(0, 0, 0, 0.85);
   --sg-color-tooltip-text: #ffffff;
 
+  /* Skeleton — base bar fill + shimmer highlight (light theme).
+   * Kept distinct from --sg-color-bg-hover so loading placeholders stay
+   * clearly visible on white surfaces and don't fight the hover palette. */
+  --sg-skeleton-bg: #e2e8f0;
+  --sg-skeleton-shimmer: #f8fafc;
+
   /* === Visualization layer (light) ===
    * Re-mappable per theme. Components use these via `var(--sg-*)` so
    * dark theme overrides cascade automatically. */
@@ -138,19 +150,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 +164,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 +218,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);
@@ -243,6 +243,10 @@
   --sg-color-tooltip-bg: #434343;
   --sg-color-tooltip-text: #ffffff;
 
+  /* Skeleton — dark theme bars need brighter fills to stay readable. */
+  --sg-skeleton-bg: rgba(255, 255, 255, 0.08);
+  --sg-skeleton-shimmer: rgba(255, 255, 255, 0.18);
+
   /* === Visualization layer (dark) ===
    * Shadows are stronger and use lower-alpha bright tints; canvas grid
    * lines use white-alpha so they read against dark bg. */
@@ -250,19 +254,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 +267,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);