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

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) === */