@luxfi/ui 7.4.10 → 7.4.12

package/tokens.css

@@ -97,6 +97,7 @@
   /* --- Text --- */
   --color-text-primary: var(--lux-ink-80);
   --color-text-secondary: var(--lux-n-500);
+  --color-text-disabled: var(--lux-ink-24);
   --color-text-error: var(--lux-state-error);
   --color-text-success: var(--lux-state-success);
 
@@ -174,8 +175,17 @@
   --color-input-border: var(--lux-n-100);
   --color-input-border-hover: var(--lux-n-200);
   --color-input-border-focus: var(--lux-n-600);
+  /* Three states that were being ASKED for and never answered: input.tsx and
+     textarea.tsx reference these, and nothing declared them. Their written
+     fallback was `theme(colors.red.500)`-style, which is a Tailwind 3 function
+     that v4 does not resolve inside an arbitrary value — so the whole
+     declaration was discarded. An invalid field drew no error border and the
+     `filled` variant drew no fill, in both themes. */
+  --color-input-border-error: var(--lux-state-error);
+  --color-input-filled-bg: var(--lux-n-50);
   /* n-400 on white is 2.5:1 — under the 3:1 non-text minimum. n-500 clears it. */
   --color-input-placeholder: var(--lux-n-500);
+  --color-input-placeholder-focus: var(--lux-n-400);
 
   /* --- Tags --- */
   --color-tag-subtle-bg: var(--lux-ink-04);
@@ -277,6 +287,11 @@
   /* --- Controls --- */
   --color-switch-bg: var(--lux-n-300);
   --color-progress-track: var(--lux-n-100);
+  /* The FILL. Referenced by progress.tsx and never declared, so the bar drew
+     its track and nothing else. */
+  --color-progress-indicator: var(--lux-n-900);
+  /* The row highlight shared by every menu and popover list. */
+  --color-popover-item-hover: var(--lux-ink-06);
 
   /* --- Chrome / charts --- */
   --color-stats-bg: var(--lux-n-50);
@@ -488,6 +503,7 @@
   /* --- Text --- */
   --color-text-primary: var(--lux-paper-80);
   --color-text-secondary: var(--lux-n-400);
+  --color-text-disabled: var(--lux-paper-24);
   --color-text-error: var(--lux-state-error);
   --color-text-success: var(--lux-state-success);
 
@@ -565,7 +581,10 @@
   --color-input-border: var(--lux-n-800);
   --color-input-border-hover: var(--lux-n-700);
   --color-input-border-focus: var(--lux-n-400);
+  --color-input-border-error: var(--lux-state-error);
+  --color-input-filled-bg: var(--lux-n-800);
   --color-input-placeholder: var(--lux-n-500);
+  --color-input-placeholder-focus: var(--lux-n-600);
 
   /* --- Tags --- */
   --color-tag-subtle-bg: var(--lux-paper-06);
@@ -664,6 +683,8 @@
   /* --- Controls --- */
   --color-switch-bg: var(--lux-paper-24);
   --color-progress-track: var(--lux-paper-06);
+  --color-progress-indicator: var(--lux-n-0);
+  --color-popover-item-hover: var(--lux-paper-06);
 
   /* --- Chrome / charts --- */
   --color-stats-bg: var(--lux-paper-04);
@@ -838,6 +859,55 @@
 .lux-interactive:disabled,
 .lux-interactive[aria-disabled='true'] { transform: none }
 
+/* The floating field label. This is CSS rather than a gui prop because it keys
+   off the state of a SIBLING (`:focus` / `:placeholder-shown` of the control),
+   and a sibling combinator is a selector — there is no prop that expresses it.
+   The label rests centred over the empty control and rises into the top of the
+   frame once the control is focused or holds a value. */
+.lux-field-float {
+  transform: translateY(-50%);
+  transform-origin: top left;
+  transition: top var(--lux-dur-hover) var(--lux-ease-out),
+              transform var(--lux-dur-hover) var(--lux-ease-out);
+}
+.lux-field-control:focus ~ .lux-field-float,
+.lux-field-control:not(:placeholder-shown) ~ .lux-field-float {
+  top: 4px;
+  transform: translateY(0) scale(0.75);
+}
+
+/* An accordion row's label brightens while the ROW is hovered. Also a
+   selector — the state belongs to the row, the colour to the label inside it —
+   so the row sets a colour and its contents inherit. */
+.lux-accordion-trigger { color: var(--color-text-primary) }
+.lux-accordion-trigger:hover { color: var(--color-hover) }
+
+/* Text controls: the two states no prop reaches. `::placeholder` styles a
+   pseudo-element the input owns rather than the input, and `:read-only` is a
+   selector with no prop counterpart — gui offers disabled, hover and focus, not
+   this. Everything else about an Input or Textarea is a prop. */
+/* A keyframe is not a prop — gui's transitions interpolate between two states,
+   they do not loop. The spinner rotates forever, so it is CSS. */
+.lux-spin { animation: lux-spin 0.8s linear infinite }
+
+/* A scrolling strip with no visible scrollbar. The scrollbar is a
+   pseudo-element on the box, so this is the only place it can be said. */
+/* One-line truncation. `text-overflow` and `white-space` are not in gui's Text
+   style base, and the three declarations only mean anything together. */
+.lux-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+
+.lux-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none }
+.lux-no-scrollbar::-webkit-scrollbar { display: none }
+
+/* Size the ICON inside a control. A descendant selector has no prop form, so
+   the control publishes its icon size and this rule applies it. */
+.lux-icon svg { width: var(--icon-size, 20px); height: var(--icon-size, 20px) }
+
+.lux-control::placeholder { color: var(--color-input-placeholder) }
+.lux-control:focus::placeholder { color: var(--color-input-placeholder-focus) }
+.lux-control:read-only { opacity: 0.7 }
+.lux-control[data-invalid] { border-color: var(--color-input-border-error) }
+
 /* ================================================================
    6c — The loading state. Two primitives, one job each.
 
@@ -882,6 +952,15 @@
   user-select: none;
 }
 
+/* A skeleton wrapping real content (asChild, or loading with children already
+   mounted) must mask it — an <img> or an icon doesn't pick up `color:
+   transparent` above. `visibility` rather than `display:none` so the masked
+   subtree keeps its layout instead of collapsing it, which is the zero-CLS
+   promise this component makes. A descendant selector has no prop form. */
+.lux-skeleton * {
+  visibility: hidden;
+}
+
 /* The one moving part. Fixed, 2px, above everything, out of flow — so it
    cannot shift layout and cannot tint content. Mount it while any request
    is in flight; unmount it when they land. One per page. */