@uniflowed/stylex 0.8.0 → 0.9.0

package/index.js

@@ -153,10 +153,13 @@ export function create<T extends { readonly [string]: mixed }>(
 
 /**
  * Declare design tokens, and hand back the `var(--…)` references to them.
+ * Every compiled value is a string, including a token with a numeric default.
  *
  * Compile-time, for the same reason as `create`.
  */
-export function defineVars<T extends { readonly [string]: ThemeValue }>(tokens: T): T {
+export function defineVars<T extends { readonly [string]: ThemeValue }>(
+  tokens: T,
+): { readonly [Key in keyof T]: string } {
   return nativeRuntimeRequired(MODULE, "stylex.defineVars");
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/stylex",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Flow declarations for @uniflowed/stylex, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.8.0"
+    "@uniflowed/core": "0.9.0"
   },
   "peerDependencies": {
     "react-native": ">=0.86.0"

package/theme.js

@@ -51,7 +51,7 @@
 // actually pairs, and `crates/uf_stylex/src/tests/preset.rs` computes those
 // ratios from the compiled stylesheet.
 
-import { stylex } from "@uniflowed/stylex";
+import { stylex, type CompiledStyle } from "@uniflowed/stylex";
 
 import { ufTokens } from "./tokens.stylex.js";
 
@@ -61,7 +61,7 @@ import { ufTokens } from "./tokens.stylex.js";
  * Every entry is conditional, so this theme is inert in light mode and costs
  * exactly one `@media (prefers-color-scheme: dark)` block.
  */
-export const ufAutoTheme = stylex.createTheme(ufTokens, {
+export const ufAutoTheme: CompiledStyle = stylex.createTheme(ufTokens, {
   canvas: { "@media (prefers-color-scheme: dark)": "#141413" },
   sunken: { "@media (prefers-color-scheme: dark)": "#0f0f0e" },
   surface: { "@media (prefers-color-scheme: dark)": "#1c1c1a" },
@@ -87,7 +87,7 @@ export const ufAutoTheme = stylex.createTheme(ufTokens, {
  * For a subtree that is dark whatever the system says, and for the stored
  * preference a reader chose.
  */
-export const ufDarkTheme = stylex.createTheme(ufTokens, {
+export const ufDarkTheme: CompiledStyle = stylex.createTheme(ufTokens, {
   canvas: "#141413",
   sunken: "#0f0f0e",
   surface: "#1c1c1a",

package/tokens.stylex.js

@@ -59,10 +59,59 @@
 
 import { stylex } from "@uniflowed/stylex";
 
-// Deliberately unannotated: `defineVars` hands back exactly what it was given,
-// so the inferred type is the token set itself — which is what makes
-// `ThemeOverrides<typeof ufTokens>` reject a token this module does not declare.
-export const ufTokens = stylex.defineVars({
+// The explicit key set is also the module interface downstream themes read.
+export type UFTokens = {|
+  readonly canvas: string,
+  readonly sunken: string,
+  readonly surface: string,
+  readonly surfaceHover: string,
+  readonly border: string,
+  readonly ink: string,
+  readonly muted: string,
+  readonly accent: string,
+  readonly accentHover: string,
+  readonly accentInk: string,
+  readonly accentSoft: string,
+  readonly danger: string,
+  readonly dangerHover: string,
+  readonly dangerInk: string,
+  readonly dangerSoft: string,
+  readonly focus: string,
+  readonly scrim: string,
+  readonly fontSans: string,
+  readonly fontMono: string,
+  readonly textXs: string,
+  readonly textSm: string,
+  readonly textMd: string,
+  readonly textLg: string,
+  readonly textXl: string,
+  readonly text2Xl: string,
+  readonly leadingTight: string,
+  readonly leadingBase: string,
+  readonly weightRegular: string,
+  readonly weightMedium: string,
+  readonly weightBold: string,
+  readonly space1: string,
+  readonly space2: string,
+  readonly space3: string,
+  readonly space4: string,
+  readonly space6: string,
+  readonly space8: string,
+  readonly space12: string,
+  readonly radiusSm: string,
+  readonly radiusMd: string,
+  readonly radiusLg: string,
+  readonly radiusPill: string,
+  readonly sizeControl: string,
+  readonly durationFast: string,
+  readonly durationBase: string,
+  readonly durationSlow: string,
+  readonly easing: string,
+  readonly easingEnter: string,
+  readonly easingExit: string,
+|};
+
+export const ufTokens: UFTokens = stylex.defineVars({
   // Surfaces, from furthest back to nearest front.
   canvas: "#f6f6f4",
   sunken: "#eeeeeb",