@skygraph/styles 0.2.1 → 0.2.3

package/components/autofield.css

@@ -0,0 +1,67 @@
+/* AutoField — schema-driven field renderer.
+ *
+ * Inputs are plain native elements (no Input wrapping) so the control stays
+ * framework-agnostic and round-trips native form behaviour. This sheet is the
+ * single source of truth for both adapters (`AutoField.tsx` / `AutoField.vue`)
+ * so the rendered look is identical across React and Vue. */
+
+.sg-autofield {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sg-autofield-label {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.sg-autofield-input {
+  width: 100%;
+  padding: 6px 12px;
+  border: 1px solid var(--sg-color-border, #d9d9d9);
+  border-radius: var(--sg-border-radius, 6px);
+  background: var(--sg-color-bg-container, #fff);
+  color: var(--sg-color-text);
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.4;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-autofield-input:disabled {
+  background: var(--sg-color-bg-disabled, #f5f5f5);
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-autofield-input:focus,
+.sg-autofield-input:focus-visible {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-autofield-input-error {
+  border-color: var(--sg-color-error, #ff4d4f);
+}
+
+.sg-autofield-input-warning {
+  border-color: var(--sg-color-warning, #faad14);
+}
+
+.sg-autofield-input-textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+.sg-autofield-input-multiple {
+  min-height: 80px;
+}
+
+.sg-autofield-input-color {
+  width: 48px;
+  height: 32px;
+  padding: 2px;
+}

package/components/cascader.css

@@ -18,11 +18,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: var(--sg-height-md);
+  /* Shares the `--sg-input-*` family with `Input` so scoped overrides
+   * (height / radius / bg / border) re-skin the trigger. */
+  min-height: var(--sg-input-height, var(--sg-height-md));
   padding: var(--sg-padding-xs) var(--sg-padding-md);
-  background: var(--sg-color-bg-container);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
+  color: var(--sg-input-color, var(--sg-color-text));
+  background: var(--sg-input-bg, var(--sg-color-bg-container));
+  border: 1px solid var(--sg-input-border, var(--sg-color-border));
+  border-radius: var(--sg-input-radius, var(--sg-border-radius));
   cursor: pointer;
   transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
   gap: var(--sg-padding-xs);
@@ -67,7 +70,7 @@
 }
 
 .sg-cascader-selection-item {
-  color: var(--sg-color-text);
+  color: var(--sg-input-color, var(--sg-color-text));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -244,6 +247,11 @@
   background: transparent;
 }
 
+.sg-cascader-option-loading {
+  color: var(--sg-color-text-tertiary);
+  cursor: wait;
+}
+
 .sg-cascader-option-label {
   flex: 1;
   overflow: hidden;
@@ -261,8 +269,12 @@
 }
 
 @keyframes sg-cascader-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .sg-cascader-option-check {

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

@@ -51,6 +51,32 @@
   box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
 }
 
+.sg-input-status-error,
+.sg-input-wrapper-status-error .sg-input {
+  --sg-input-border: var(--sg-color-error);
+}
+
+.sg-input-status-error:focus,
+.sg-input-status-error:focus-visible,
+.sg-input-wrapper-status-error .sg-input:focus,
+.sg-input-wrapper-status-error .sg-input:focus-visible {
+  --sg-input-border: var(--sg-color-error);
+  box-shadow: 0 0 0 2px var(--sg-color-error-bg);
+}
+
+.sg-input-status-warning,
+.sg-input-wrapper-status-warning .sg-input {
+  --sg-input-border: var(--sg-color-warning);
+}
+
+.sg-input-status-warning:focus,
+.sg-input-status-warning:focus-visible,
+.sg-input-wrapper-status-warning .sg-input:focus,
+.sg-input-wrapper-status-warning .sg-input:focus-visible {
+  --sg-input-border: var(--sg-color-warning);
+  box-shadow: 0 0 0 2px var(--sg-color-warning-bg);
+}
+
 .sg-input:disabled {
   --sg-input-bg: var(--sg-color-bg-disabled);
   --sg-input-color: var(--sg-color-text-disabled);

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

@@ -3,7 +3,8 @@
    * emoji ignore CSS `color`, so opacity is the only signal that
    * separates active vs inactive characters. Override globally for
    * monochrome glyphs by setting it to `1`. */
-  --sg-rate-symbol-empty-opacity: 0.42;
+  --sg-rate-symbol-empty-color: var(--sg-color-text-tertiary);
+  --sg-rate-symbol-empty-opacity: 0.72;
 
   display: inline-flex;
   gap: var(--sg-padding-xs);
@@ -17,7 +18,7 @@
 
 .sg-rate-star {
   cursor: pointer;
-  color: var(--sg-color-border);
+  color: var(--sg-rate-symbol-empty-color, var(--sg-color-text-tertiary));
   opacity: var(--sg-rate-symbol-empty-opacity);
   transition:
     color var(--sg-transition-duration),
@@ -26,9 +27,14 @@
   user-select: none;
 }
 
-.sg-rate-star:hover { transform: scale(1.15); }
+.sg-rate-star:hover {
+  transform: scale(1.15);
+}
 .sg-rate-star-full {
   color: var(--sg-color-star);
   opacity: 1;
 }
-.sg-rate-star-half { color: var(--sg-color-star); opacity: 0.5; }
+.sg-rate-star-half {
+  color: var(--sg-color-star);
+  opacity: 0.76;
+}

package/components/select.css

@@ -14,11 +14,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: var(--sg-height-md);
+  /* Honour the shared `--sg-input-*` family (same as `Input`) so a scoped
+   * override re-skins the trigger, falling back to the semantic palette. */
+  height: var(--sg-input-height, var(--sg-height-md));
   padding: 0 var(--sg-padding-md);
-  background: var(--sg-color-bg-container);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
+  color: var(--sg-input-color, var(--sg-color-text));
+  background: var(--sg-input-bg, var(--sg-color-bg-container));
+  border: 1px solid var(--sg-input-border, var(--sg-color-border));
+  border-radius: var(--sg-input-radius, var(--sg-border-radius));
   cursor: pointer;
   transition: border-color var(--sg-transition-duration);
 }
@@ -47,7 +50,7 @@
 }
 
 .sg-select-selection-item {
-  color: var(--sg-color-text);
+  color: var(--sg-input-color, var(--sg-color-text));
 }
 
 .sg-select-arrow {
@@ -82,6 +85,10 @@
   background: var(--sg-color-bg-hover);
 }
 
+.sg-select-option-focused {
+  background: var(--sg-color-bg-hover);
+}
+
 .sg-select-option-selected {
   font-weight: 600;
   background: var(--sg-color-primary-bg);
@@ -163,7 +170,9 @@
   border: none;
   border-radius: 2px;
   cursor: pointer;
-  transition: color var(--sg-transition-duration), background var(--sg-transition-duration);
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration);
 }
 
 .sg-select-tag-remove:hover {

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

@@ -18,11 +18,14 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: var(--sg-height-md);
+  /* Shares the `--sg-input-*` family with `Input` so scoped overrides
+   * (height / radius / bg / border) re-skin the trigger. */
+  min-height: var(--sg-input-height, var(--sg-height-md));
   padding: var(--sg-padding-xs) var(--sg-padding-md);
-  background: var(--sg-color-bg-container);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
+  color: var(--sg-input-color, var(--sg-color-text));
+  background: var(--sg-input-bg, var(--sg-color-bg-container));
+  border: 1px solid var(--sg-input-border, var(--sg-color-border));
+  border-radius: var(--sg-input-radius, var(--sg-border-radius));
   cursor: pointer;
   transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
   gap: var(--sg-padding-xs);
@@ -67,7 +70,7 @@
 }
 
 .sg-treeselect-selection-item {
-  color: var(--sg-color-text);
+  color: var(--sg-input-color, var(--sg-color-text));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -216,4 +219,3 @@
   padding: 1px 0;
   min-height: 26px;
 }
-

package/index.css

@@ -7,6 +7,7 @@
 @import './components/input-number.css';
 @import './components/form.css';
 @import './components/field.css';
+@import './components/autofield.css';
 @import './components/spin.css';
 @import './components/modal.css';
 @import './components/checkbox.css';

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.3",
+  "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
   "license": "MIT",
   "type": "module",
   "sideEffects": [

package/tokens.css

@@ -87,6 +87,17 @@
 
   /* === Component tokens === */
   --sg-color-star: #fadb14;
+
+  /* Input-family aliases shared by Input / Select / TreeSelect / Cascader.
+   * These are public component tokens, so scoped overrides work consistently
+   * across all trigger-like controls. */
+  --sg-input-height: var(--sg-height-md);
+  --sg-input-padding: var(--sg-padding-xs) var(--sg-padding-md);
+  --sg-input-font-size: var(--sg-font-size);
+  --sg-input-color: var(--sg-color-text);
+  --sg-input-bg: var(--sg-color-bg-container);
+  --sg-input-border: var(--sg-color-border);
+  --sg-input-radius: var(--sg-border-radius);
 }
 
 /* === Semantic tokens — Light theme (default) === */
@@ -136,6 +147,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 +254,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. */