@uniflowed/stylex 0.8.0 → 0.10.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.10.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.10.0"
   },
   "peerDependencies": {
     "react-native": ">=0.86.0"

package/preset.js

@@ -234,36 +234,55 @@ const fields = stylex.create({
 
 const overlays = stylex.create({
   // Enter: the wash fades in over `durationSlow`, the same time as the panel
-  // in front of it. A fade is what reduced motion keeps, so it keeps this.
+  // in front of it. Exit: it clears with the panel, in `durationBase` on the
+  // accelerating curve, while `@uniflowed/ui` keeps it on the page with
+  // `data-state="closed"` and `inert`. A fade is what reduced motion keeps,
+  // so it keeps both.
   backdrop: {
     position: "fixed",
     inset: 0,
     backgroundColor: ufTokens.scrim,
-    opacity: { default: 1, "@starting-style": 0 },
+    opacity: { default: 1, "@starting-style": 0, ":is([data-state=closed])": 0 },
     transitionProperty: "opacity",
-    transitionDuration: ufTokens.durationSlow,
-    transitionTimingFunction: ufTokens.easingEnter,
+    transitionDuration: {
+      default: ufTokens.durationSlow,
+      ":is([data-state=closed])": ufTokens.durationBase,
+    },
+    transitionTimingFunction: {
+      default: ufTokens.easingEnter,
+      ":is([data-state=closed])": ufTokens.easingExit,
+    },
   },
   // Enter: the panel fades in and grows from 96% of its size where it rests,
   // on the decelerating curve, so it is legible almost at once and is seen
   // settling rather than popping. The centring translate is part of both
-  // values, or the panel would start in the corner. Under reduced motion it
-  // only fades.
+  // values, or the panel would start in the corner. Exit: back to 96% as it
+  // fades, in `durationBase` on the accelerating curve. Under reduced motion
+  // both only fade: `--uf-exit-travel` is 0 there, so the scale does not jump.
   dialog: {
     position: "fixed",
     top: "50%",
     left: "50%",
-    opacity: { default: 1, "@starting-style": 0 },
+    "--uf-exit-travel": { default: "1", "@media (prefers-reduced-motion: reduce)": "0" },
+    opacity: { default: 1, "@starting-style": 0, ":is([data-state=closed])": 0 },
     transform: {
       default: "translate(-50%, -50%)",
       "@starting-style": "translate(-50%, -50%) scale(0.96)",
+      ":is([data-state=closed])":
+        "translate(-50%, -50%) scale(calc(1 - 0.04 * var(--uf-exit-travel)))",
     },
     transitionProperty: {
       default: "opacity, transform",
       "@media (prefers-reduced-motion: reduce)": "opacity",
     },
-    transitionDuration: ufTokens.durationSlow,
-    transitionTimingFunction: ufTokens.easingEnter,
+    transitionDuration: {
+      default: ufTokens.durationSlow,
+      ":is([data-state=closed])": ufTokens.durationBase,
+    },
+    transitionTimingFunction: {
+      default: ufTokens.easingEnter,
+      ":is([data-state=closed])": ufTokens.easingExit,
+    },
     width: "calc(100% - 32px)",
     maxWidth: "32rem",
     backgroundColor: ufTokens.surface,
@@ -280,7 +299,8 @@ const overlays = stylex.create({
 const menus = stylex.create({
   // Enter: it fades in while travelling 4px out of its trigger, from the side
   // `@uniflowed/ui` put it on (`data-side`), the way `registry/ui/menu.js`
-  // does. Under reduced motion it only fades.
+  // does. Exit: back towards the trigger in `durationFast` on the
+  // accelerating curve. Under reduced motion both only fade.
   menu: {
     "--uf-enter-x": {
       default: "0px",
@@ -292,17 +312,26 @@ const menus = stylex.create({
       ":is([data-side=top])": "4px",
       ":is([data-side=bottom])": "-4px",
     },
-    opacity: { default: 1, "@starting-style": 0 },
+    "--uf-exit-travel": { default: "1", "@media (prefers-reduced-motion: reduce)": "0" },
+    opacity: { default: 1, "@starting-style": 0, ":is([data-state=closed])": 0 },
     transform: {
       default: "none",
       "@starting-style": "translate(var(--uf-enter-x), var(--uf-enter-y))",
+      ":is([data-state=closed])":
+        "translate(calc(var(--uf-enter-x) * var(--uf-exit-travel)), calc(var(--uf-enter-y) * var(--uf-exit-travel)))",
     },
     transitionProperty: {
       default: "opacity, transform",
       "@media (prefers-reduced-motion: reduce)": "opacity",
     },
-    transitionDuration: ufTokens.durationBase,
-    transitionTimingFunction: ufTokens.easingEnter,
+    transitionDuration: {
+      default: ufTokens.durationBase,
+      ":is([data-state=closed])": ufTokens.durationFast,
+    },
+    transitionTimingFunction: {
+      default: ufTokens.easingEnter,
+      ":is([data-state=closed])": ufTokens.easingExit,
+    },
     minWidth: "12rem",
     margin: 0,
     padding: ufTokens.space1,

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",