@lotics/ui 47.6.0 → 47.7.0

package/src/tokens.ts

@@ -20,10 +20,24 @@
  *   colors.background   → var(--lotics-background)
  *   colors.border       → var(--lotics-border)
  *
- * No semantic abstraction (no `--lotics-fg`, `--lotics-danger`) — those
- * names don't exist in the parent's TS code, so introducing them only
- * in the iframe creates two vocabularies the agent + a new developer
- * have to learn separately.
+ * TWO LAYERS, and the second one is where the decisions live. The palette above
+ * is primitives: values, owned by nobody, the same ramp anyone could paste. The
+ * semantic layer is {@link TEXT_INK} — `muted` → `zinc.600` — and it holds the
+ * actual rules ("supporting text is one step lighter than body"). Components
+ * address ink only through it.
+ *
+ * This file used to claim the semantic names "don't exist in the parent's TS
+ * code", and that was wrong about its own codebase: the roles had always existed
+ * as `Text`'s `color` union, used hundreds of times. They were just not
+ * ADDRESSABLE — nothing outside a `.tsx` could name one — so the palette leaked
+ * into call sites and into design, and one role ended up rendering in two inks.
+ *
+ * Emitting only primitives is also what broke the Figma story. A designer picking
+ * `zinc-500` and an author typing `zinc-500` look like one source of truth, but
+ * what they agree on is a THIRD-PARTY RAMP; the decision itself is written in
+ * neither tool. {@link textInkTokens} emits both layers with the alias intact, in
+ * the W3C Design Tokens format Figma Variables import as alias variables — so the
+ * rule has one home and moving it moves both sides.
  *
  * Spacing / type / weight / radius are iframe-side conveniences with no
  * parent equivalent (parent uses bare numeric pixel values inline).
@@ -33,6 +47,8 @@
 
 export { colors } from "./colors";
 import { colors } from "./colors";
+export { TEXT_INK, TEXT_COLORS, getTextColor, textInkTokens, type TextColor } from "./text_ink";
+import { TEXT_INK } from "./text_ink";
 
 /**
  * Spacing scale (4px base unit). Use for padding, margin, gap.
@@ -150,5 +166,13 @@ export function getCssVariables(): string {
     lines.push(`  --lotics-radius-${key}: ${value}px;`);
   }
 
+  // TEXT INK — emitted as a var() pointing at the PRIMITIVE, not as a copied hex,
+  // so `--lotics-text-muted` and `colors.zinc[600]` cannot drift apart and a
+  // hand-rolled DOM surface can address the same role a component does.
+  for (const [role, ref] of Object.entries(TEXT_INK)) {
+    const primitive = ref.replace(".", "-");
+    lines.push(`  --lotics-ink-${role.toLowerCase()}: var(--lotics-${primitive});`);
+  }
+
   return `:root {\n${lines.join("\n")}\n}`;
 }

package/src/tooltip.tsx

@@ -156,7 +156,7 @@ export function TooltipProvider({ children }: { children: React.ReactNode }) {
                   }),
             }}
           >
-            <Text numberOfLines={1} size="sm" color="inverted">
+            <Text numberOfLines={1} size="sm" color="onInverse">
               {tooltip.text}
             </Text>
           </div>,

package/src/uploading_thumbnail.tsx

@@ -172,7 +172,7 @@ function OverlayStack(props: { tone?: "error"; compact: boolean; label: string;
 
 function OverlayLabel({ children }: { children: string }) {
   return (
-    <Text size="xs" weight="medium" color="inverted" numberOfLines={2} style={styles.overlayLabel} userSelect="none">
+    <Text size="xs" weight="medium" color="onInverse" numberOfLines={2} style={styles.overlayLabel} userSelect="none">
       {children}
     </Text>
   );