@skygraph/styles 0.2.1 → 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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skygraph/styles",
-  "version": "0.2.1",
-  "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

@@ -136,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. */
@@ -237,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. */