@uniflowed/stylex 0.0.0-alpha.9 → 0.2.0

package/index.js

@@ -21,7 +21,7 @@
 //
 // 1. **A token set that already exists.** `@uniflowed/stylex/tokens.stylex.js`
 //    is a real `stylex.defineVars` module — colour roles, a type scale,
-//    spacing, radii, elevation and motion — so a project has a coherent palette
+//    spacing, radii and motion — so a project has a coherent palette
 //    without authoring one, and gets it as `:root` custom properties the build
 //    inlined rather than as anything computed in a browser.
 // 2. **A base layer over those tokens.** `@uniflowed/stylex/preset` is
@@ -39,21 +39,52 @@
 // configuration flag. The preset is reached by importing it, so a project that
 // does not import it pays nothing, and one that imports half of it keeps half.
 //
+// # The half of a component catalogue that lives here
+//
+// "Not a component library" is a rule about what this package exports, and it
+// was read for a while as a rule about what it is responsible for. It is not.
+// About twenty of the catalogue `@uniflowed/ui` is measured against — Badge,
+// Card, Button, Input, Textarea, Label, Aspect Ratio and the rest — have no
+// behaviour at all: no role, no state machine, no keyboard map. A headless
+// package cannot ship them, because with the styles taken out a `Badge` is a
+// `<span>`. **They are this module's half of the split, and the answer is a
+// style function rather than a component** (ubugeeei-prod/uf#298).
+//
+// `buttonStyles({ tone, size })`, `cardStyles()`, `textStyles({ size, tone })`
+// and `fieldStyles()` are already that answer for four of them, and the shape
+// is the point: a caller spreads `{ className }` onto their own `<button>`, so
+// they keep `type="submit"`, `formAction`, the ref and every attribute a
+// wrapper would have had to remember to forward. Nothing here appears in
+// `@uniflowed/ui`'s types and nothing here renders an element — the rule holds
+// exactly as written; what changed is that the gap is now assigned rather than
+// left between the two packages.
+//
+// `crates/uf_lib/src/ui.rs` records the assignment component by component, and
+// `cargo test -p uf_lib` holds it to this file in both directions: an entry
+// there may not name a style `./preset.js` does not export, and a style
+// exported here must be named by some entry. A `badgeStyles` is the way to
+// close the Badge gap; a `<Badge>` in the other package is not.
+//
 // # Where the token values come from
 //
-// `@uniflowed/brand` owns uf's visual identity — the palette, the type,
-// spacing and radius scales — and it stays there. It cannot own the token
-// module: a StyleX token's name is computed by the compiler from the binding
-// and key it was declared under, `defineVars` accepts only literals, and
-// brand's `--uf-*` names are hand-written for a different consumer. So brand
-// holds the identity values and `./tokens.stylex.js` is their StyleX-shaped
-// projection into semantic roles — `accent`, `ink`, `canvas` — which is the
-// layer a design system needs and an identity does not have.
+// `@uniflowed/brand` owns uf's visual identity — the logo, its spectrum, the
+// type and spacing scales — and it stays there. The interface borrows brand's
+// type and spacing, and chooses its own colours and corners: a UI dressed in
+// the logo's cyan-to-magenta spectrum and round corners looks generated, so
+// `./tokens.stylex.js` holds a neutral-first palette of its own
+// (`docs/ui-visual-language.md` says why). Brand could not own the token
+// module anyway: a StyleX token's name is computed by the compiler from the
+// binding and key it was declared under, and `defineVars` accepts only
+// literals. So `./tokens.stylex.js` is where the semantic roles — `accent`,
+// `ink`, `canvas` — get their values, which is the layer a design system needs
+// and an identity does not have.
 //
 // # Readiness
 //
 // **Implemented.** `props`, `create`, `defineVars`, `createTheme`, pseudo-class
-// and pseudo-element conditions, at-rule conditions (`@media`, `@supports`),
+// and pseudo-element conditions, the state a headless part announces
+// (`:is([aria-selected=true])` — `crates/uf_stylex/src/condition.rs` says why
+// that shape and no wider), at-rule conditions (`@media`, `@supports`),
 // shorthand-versus-longhand ordering, unit inference, the preset tokens, the
 // base layer, and the shipped themes. Every one of them is compiled: the
 // runtime half of this package is `props` and three functions that throw.

package/native-props.js

@@ -0,0 +1,40 @@
+// @flow
+
+export type NativeStyleProps = { readonly style: { readonly [string]: string | number } };
+
+/** Return null for web namespaces; mixing renderer outputs is an error. */
+export function nativeProps(
+  styles: $ReadOnlyArray<mixed>,
+  nativeOnly: boolean = false,
+): NativeStyleProps | null {
+  let native = false;
+  let web = false;
+  const merged: { [string]: string | number } = {};
+  const pending = [...styles];
+  for (let index = 0; index < pending.length; index += 1) {
+    const value = pending[index];
+    if (Array.isArray(value)) {
+      pending.splice(index + 1, 0, ...value);
+      continue;
+    }
+    if (value == null || typeof value !== "object") continue;
+    // Static objects written by the compiler; validate their scalar fields.
+    const namespace: { [string]: mixed } = value as $FlowFixMe;
+    if (namespace.$$css === true) web = true;
+    if (namespace.$$native !== true) {
+      if (nativeOnly) throw new Error("StyleX native: expected a compiled native namespace");
+      continue;
+    }
+    native = true;
+    for (const property of Object.keys(namespace)) {
+      if (property === "$$native") continue;
+      const entry = namespace[property];
+      if (typeof entry !== "string" && typeof entry !== "number") {
+        throw new Error(`StyleX native: invalid compiled value for ${property}`);
+      }
+      merged[property] = entry;
+    }
+  }
+  if (native && web) throw new Error("StyleX: cannot mix native style objects with web classes");
+  return native ? { style: merged } : null;
+}

package/native.js

@@ -0,0 +1,40 @@
+// @flow
+import type { ViewStyle, TextStyle, ImageStyle } from "react-native";
+import { nativeRuntimeRequired } from "@uniflowed/core/native";
+import { nativeProps } from "./native-props.js";
+
+// Use one property map: a ViewStyle | TextStyle union would accept an invalid
+// fontWeight through its ViewStyle branch, whose optional fields all match.
+export type NativeStyle = $ReadOnly<{
+  ...$Exact<ViewStyle>,
+  ...$Exact<TextStyle>,
+  ...$Exact<ImageStyle>,
+}>;
+export type NativeStyleArgument<Style> =
+  | Style
+  | false
+  | null
+  | void
+  | $ReadOnlyArray<NativeStyleArgument<Style>>;
+type StyleFields<Value> = Value extends $ReadOnlyArray<infer Item>
+  ? StyleFields<Item>
+  : Value extends (false | null | void)
+    ? {}
+    : Value;
+
+/** Compile-time namespaces, checked against the app's React Native styles. */
+export function create<Styles extends { readonly [string]: NativeStyle }>(styles: Styles): Styles {
+  return nativeRuntimeRequired("@uniflowed/stylex/native", "stylex.create");
+}
+
+/** Native-only props retain the authored property types and never add className. */
+export function props<Args extends $ReadOnlyArray<NativeStyleArgument<NativeStyle>>>(
+  ...styles: Args
+): { readonly style: Partial<StyleFields<Args>> } {
+  const result = nativeProps(styles, true);
+  // The compiler validates the native subset and preserves every scalar value.
+  // The merger copies those fields, but its dynamic keys cannot retain Style.
+  return (result ?? { style: {} }) as $FlowFixMe;
+}
+
+export const stylex = { create, props };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/stylex",
-  "version": "0.0.0-alpha.9",
+  "version": "0.2.0",
   "description": "Flow declarations for @uniflowed/stylex, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -15,12 +15,22 @@
     "./props": "./props.js",
     "./preset": "./preset.js",
     "./theme": "./theme.js",
-    "./tokens.stylex.js": "./tokens.stylex.js"
+    "./tokens.stylex.js": "./tokens.stylex.js",
+    "./native": "./native.js"
   },
   "files": [
-    "*.js"
+    "*.js",
+    "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.0.0-alpha.9"
+    "@uniflowed/core": "0.2.0"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.86.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   }
 }

package/preset.js

@@ -20,9 +20,9 @@
 //
 // It is the only module in the package that has opinions. `props` is a merge,
 // the tokens are names, the themes are values; this is where uf says a card has
-// a 16px radius. A project that wants its own look drops this import and keeps
-// everything else, and a bundler drops the rules with it because nothing else
-// references them.
+// a 6px radius and a 1px border rather than a shadow. A project that wants its
+// own look drops this import and keeps everything else, and a bundler drops
+// the rules with it because nothing else references them.
 //
 // # Why functions rather than exported namespaces
 //
@@ -84,13 +84,14 @@ const surfaces = stylex.create({
     borderColor: ufTokens.border,
     borderRadius: ufTokens.radiusLg,
     padding: ufTokens.space6,
-    boxShadow: ufTokens.shadowCard,
   },
   panel: {
     backgroundColor: ufTokens.surface,
-    borderRadius: ufTokens.radiusXl,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: ufTokens.border,
+    borderRadius: ufTokens.radiusLg,
     padding: ufTokens.space6,
-    boxShadow: ufTokens.shadowPanel,
   },
   sunken: {
     backgroundColor: ufTokens.sunken,
@@ -132,7 +133,10 @@ const buttons = stylex.create({
     borderColor: "transparent",
     cursor: "pointer",
     transitionProperty: "background-color, border-color, color",
-    transitionDuration: ufTokens.durationFast,
+    transitionDuration: {
+      default: ufTokens.durationFast,
+      "@media (prefers-reduced-motion: reduce)": "0s",
+    },
     transitionTimingFunction: ufTokens.easing,
     // The ring is drawn only for a keyboard focus, which is the whole reason
     // `:focus-visible` exists: a mouse click should not light the control up.
@@ -191,7 +195,7 @@ const fields = stylex.create({
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: ufTokens.border,
-    borderRadius: ufTokens.radiusSm,
+    borderRadius: ufTokens.radiusMd,
     paddingBlock: ufTokens.space2,
     paddingInline: ufTokens.space3,
     outlineWidth: { default: "0", ":focus-visible": "2px" },
@@ -226,9 +230,11 @@ const overlays = stylex.create({
     backgroundColor: ufTokens.surface,
     color: ufTokens.ink,
     fontFamily: ufTokens.fontSans,
-    borderRadius: ufTokens.radiusXl,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: ufTokens.border,
+    borderRadius: ufTokens.radiusLg,
     padding: ufTokens.space6,
-    boxShadow: ufTokens.shadowPanel,
   },
 });
 
@@ -243,7 +249,6 @@ const menus = stylex.create({
     borderStyle: "solid",
     borderColor: ufTokens.border,
     borderRadius: ufTokens.radiusMd,
-    boxShadow: ufTokens.shadowPanel,
   },
   item: {
     display: "flex",
@@ -315,7 +320,10 @@ const controls = stylex.create({
     color: ufTokens.accentInk,
     cursor: "pointer",
     transitionProperty: "background-color, border-color",
-    transitionDuration: ufTokens.durationFast,
+    transitionDuration: {
+      default: ufTokens.durationFast,
+      "@media (prefers-reduced-motion: reduce)": "0s",
+    },
     transitionTimingFunction: ufTokens.easing,
     outlineWidth: { default: "0", ":focus-visible": "2px" },
     outlineStyle: "solid",
@@ -325,7 +333,7 @@ const controls = stylex.create({
   box: {
     width: ufTokens.sizeControl,
     height: ufTokens.sizeControl,
-    borderRadius: "5px",
+    borderRadius: ufTokens.radiusSm,
   },
   // A switch's track is the one piece of geometry here that is not a token:
   // nothing but a switch reads it, and a theme that changed it would leave the

package/props.js

@@ -1,4 +1,6 @@
 // @flow
+
+import { nativeProps } from "./native-props.js";
 //
 // `@uniflowed/stylex/props`: the merge, and the only part of StyleX that runs.
 //
@@ -56,7 +58,10 @@ export type CompiledStyle = {
 export type StyleArgument = mixed;
 
 /** What `props` hands to an element. */
-export type StyleProps = { readonly className?: string };
+export type StyleProps = {
+  readonly className?: string,
+  readonly style?: { readonly [string]: string | number },
+};
 
 /** What one property contributed, once the merge has picked a winner. */
 type Winner = string | null | CompiledClasses;
@@ -73,6 +78,8 @@ type Winner = string | null | CompiledClasses;
  * survived.
  */
 export function props(...styles: $ReadOnlyArray<StyleArgument>): StyleProps {
+  const native = nativeProps(styles);
+  if (native != null) return native;
   const winners: { [string]: Winner } = {};
   collect(styles, winners);
 

package/theme.js

@@ -62,25 +62,23 @@ import { ufTokens } from "./tokens.stylex.js";
  * exactly one `@media (prefers-color-scheme: dark)` block.
  */
 export const ufAutoTheme = stylex.createTheme(ufTokens, {
-  canvas: { "@media (prefers-color-scheme: dark)": "#0b1220" },
-  sunken: { "@media (prefers-color-scheme: dark)": "#0f1726" },
-  surface: { "@media (prefers-color-scheme: dark)": "#131c2e" },
-  surfaceHover: { "@media (prefers-color-scheme: dark)": "#1b2540" },
-  border: { "@media (prefers-color-scheme: dark)": "#26324a" },
-  ink: { "@media (prefers-color-scheme: dark)": "#e8eefc" },
-  muted: { "@media (prefers-color-scheme: dark)": "#9fb0cc" },
-  accent: { "@media (prefers-color-scheme: dark)": "#8f8bff" },
-  accentHover: { "@media (prefers-color-scheme: dark)": "#a49fff" },
-  accentInk: { "@media (prefers-color-scheme: dark)": "#0b1220" },
-  accentSoft: { "@media (prefers-color-scheme: dark)": "#1e2547" },
-  danger: { "@media (prefers-color-scheme: dark)": "#ff6b5e" },
-  dangerHover: { "@media (prefers-color-scheme: dark)": "#ff8378" },
-  dangerInk: { "@media (prefers-color-scheme: dark)": "#2a0b08" },
-  dangerSoft: { "@media (prefers-color-scheme: dark)": "#2a1512" },
-  focus: { "@media (prefers-color-scheme: dark)": "#7fb0ff" },
-  scrim: { "@media (prefers-color-scheme: dark)": "rgba(2, 6, 16, 0.62)" },
-  shadowCard: { "@media (prefers-color-scheme: dark)": "0 1px 2px rgba(0, 0, 0, 0.40)" },
-  shadowPanel: { "@media (prefers-color-scheme: dark)": "0 16px 48px rgba(0, 0, 0, 0.55)" },
+  canvas: { "@media (prefers-color-scheme: dark)": "#141413" },
+  sunken: { "@media (prefers-color-scheme: dark)": "#0f0f0e" },
+  surface: { "@media (prefers-color-scheme: dark)": "#1c1c1a" },
+  surfaceHover: { "@media (prefers-color-scheme: dark)": "#262623" },
+  border: { "@media (prefers-color-scheme: dark)": "#363632" },
+  ink: { "@media (prefers-color-scheme: dark)": "#ecece7" },
+  muted: { "@media (prefers-color-scheme: dark)": "#a5a59e" },
+  accent: { "@media (prefers-color-scheme: dark)": "#8eaee8" },
+  accentHover: { "@media (prefers-color-scheme: dark)": "#a8c1ee" },
+  accentInk: { "@media (prefers-color-scheme: dark)": "#101318" },
+  accentSoft: { "@media (prefers-color-scheme: dark)": "#1f2838" },
+  danger: { "@media (prefers-color-scheme: dark)": "#ee8a80" },
+  dangerHover: { "@media (prefers-color-scheme: dark)": "#f3a49c" },
+  dangerInk: { "@media (prefers-color-scheme: dark)": "#1d0f0d" },
+  dangerSoft: { "@media (prefers-color-scheme: dark)": "#35201d" },
+  focus: { "@media (prefers-color-scheme: dark)": "#8eaee8" },
+  scrim: { "@media (prefers-color-scheme: dark)": "rgba(0, 0, 0, 0.6)" },
 });
 
 /**
@@ -90,23 +88,21 @@ export const ufAutoTheme = stylex.createTheme(ufTokens, {
  * preference a reader chose.
  */
 export const ufDarkTheme = stylex.createTheme(ufTokens, {
-  canvas: "#0b1220",
-  sunken: "#0f1726",
-  surface: "#131c2e",
-  surfaceHover: "#1b2540",
-  border: "#26324a",
-  ink: "#e8eefc",
-  muted: "#9fb0cc",
-  accent: "#8f8bff",
-  accentHover: "#a49fff",
-  accentInk: "#0b1220",
-  accentSoft: "#1e2547",
-  danger: "#ff6b5e",
-  dangerHover: "#ff8378",
-  dangerInk: "#2a0b08",
-  dangerSoft: "#2a1512",
-  focus: "#7fb0ff",
-  scrim: "rgba(2, 6, 16, 0.62)",
-  shadowCard: "0 1px 2px rgba(0, 0, 0, 0.40)",
-  shadowPanel: "0 16px 48px rgba(0, 0, 0, 0.55)",
+  canvas: "#141413",
+  sunken: "#0f0f0e",
+  surface: "#1c1c1a",
+  surfaceHover: "#262623",
+  border: "#363632",
+  ink: "#ecece7",
+  muted: "#a5a59e",
+  accent: "#8eaee8",
+  accentHover: "#a8c1ee",
+  accentInk: "#101318",
+  accentSoft: "#1f2838",
+  danger: "#ee8a80",
+  dangerHover: "#f3a49c",
+  dangerInk: "#1d0f0d",
+  dangerSoft: "#35201d",
+  focus: "#8eaee8",
+  scrim: "rgba(0, 0, 0, 0.6)",
 });

package/tokens.stylex.js

@@ -11,18 +11,37 @@
 // # Roles, not colours
 //
 // The names are what a token is *for*, never what it looks like. `accent` is
-// the colour a primary action wears; it is indigo today and a theme can make it
-// anything, and no rule in `preset.js` has to change when it does. A token
-// named `indigo500` would have made the preset unthemeable the moment someone
-// wanted a green product.
+// the colour a primary action wears; it is a quiet cobalt today and a theme
+// can make it anything, and no rule in `preset.js` has to change when it does.
+// A token named `blue600` would have made the preset unthemeable the moment
+// someone wanted a green product.
 //
-// The values are uf's identity, and `@uniflowed/brand` is where that identity
-// is decided: `accent`, `ink`, `canvas` and `muted` are brand's Indigo, Ink,
-// Mist and Slate, and the type, spacing and radius steps are brand's scales.
-// Brand cannot hold the token module itself — a StyleX token's name is computed
-// by the compiler, and `defineVars` takes literals, not an imported array — so
-// this module is brand's projection into the semantic roles a design system
-// needs and an identity does not have.
+// # The palette
+//
+// `docs/ui-visual-language.md` explains it; in short: the interface is
+// neutral first — warm greys with no blue cast, near-black ink on off-white
+// paper — and colour is spent in one place, a single accent for what is
+// selected, current or primary. Danger is a brick red rather than a signal
+// red. Dark is designed as its own palette (charcoal, not navy; a lighter,
+// desaturated accent that does not glow), not the light one inverted.
+//
+// The type and spacing steps are `@uniflowed/brand`'s scales. The colours and
+// the corners are not: brand's cyan-to-magenta spectrum and its round corners
+// are uf's logo and marketing identity, and an interface built from them looks
+// like every other generated one, so this module's values are its own. Brand
+// cannot hold the token module itself anyway — a StyleX token's name is
+// computed by the compiler, and `defineVars` takes literals, not an imported
+// array.
+//
+// # No shadows, no gradients
+//
+// The defaults draw depth with a rule and a change of surface, and nothing
+// else. A shadow is the first thing a theme has to fight when the product's
+// look is flat, and a gradient is a decision about a brand this module does
+// not have, so neither is a token and neither appears in a default style.
+// `crates/uf_stylex/src/tests/defaults.rs` compiles every default style —
+// this module, `preset.js`, `theme.js` and every file in `registry/ui/` — and
+// fails on a `box-shadow`, a `text-shadow`, a `drop-shadow()` or a gradient.
 //
 // # What is not a token
 //
@@ -45,31 +64,31 @@ import { stylex } from "@uniflowed/stylex";
 // `ThemeOverrides<typeof ufTokens>` reject a token this module does not declare.
 export const ufTokens = stylex.defineVars({
   // Surfaces, from furthest back to nearest front.
-  canvas: "#f8fafc",
-  sunken: "#eef2f7",
+  canvas: "#f6f6f4",
+  sunken: "#eeeeeb",
   surface: "#ffffff",
-  surfaceHover: "#f1f5f9",
-  border: "#dbe3ec",
+  surfaceHover: "#f1f1ee",
+  border: "#d9d9d4",
 
   // Text.
-  ink: "#0f172a",
-  muted: "#475569",
+  ink: "#1b1b19",
+  muted: "#5c5c57",
 
   // The colour a primary action wears, and what is legible on it.
-  accent: "#5c49ff",
-  accentHover: "#4a37f0",
+  accent: "#2b58b5",
+  accentHover: "#234996",
   accentInk: "#ffffff",
-  accentSoft: "#eeecff",
+  accentSoft: "#e8eef9",
 
   // The colour a destructive action wears.
-  danger: "#b42318",
-  dangerHover: "#9a1c12",
+  danger: "#b1271d",
+  dangerHover: "#931f17",
   dangerInk: "#ffffff",
-  dangerSoft: "#fef3f2",
+  dangerSoft: "#fbedeb",
 
   // Focus ring, and the wash behind a modal surface.
-  focus: "#2677ff",
-  scrim: "rgba(15, 23, 42, 0.48)",
+  focus: "#2b58b5",
+  scrim: "rgba(27, 27, 25, 0.45)",
 
   // Type.
   fontSans: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
@@ -95,20 +114,30 @@ export const ufTokens = stylex.defineVars({
   space8: "32px",
   space12: "48px",
 
-  // Shape.
-  radiusSm: "8px",
-  radiusMd: "12px",
-  radiusLg: "16px",
-  radiusXl: "24px",
+  // Shape. Three small steps and a pill, and nothing rounder: a control is
+  // 2px, a button, field group or popover 4px, and the largest surface — a
+  // card, a dialog — 6px. `radiusPill` is for the few things that are round
+  // by what they are, such as a switch's track or a radio's dot, and not a
+  // way to soften a rectangle.
+  radiusSm: "2px",
+  radiusMd: "4px",
+  radiusLg: "6px",
   radiusPill: "999px",
 
   // The size of a control a finger or a pointer aims at.
   sizeControl: "18px",
 
-  // Elevation and motion.
-  shadowCard: "0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10)",
-  shadowPanel: "0 16px 48px rgba(15, 23, 42, 0.24)",
+  // Motion. Two short durations and one easing: `durationFast` for a colour
+  // or a chevron, `durationBase` for something that travels, such as a
+  // switch's thumb or a drawer. The easing decelerates and never overshoots,
+  // so nothing bounces. A transition names the properties it moves, never
+  // `all`, and is `0s` under `prefers-reduced-motion: reduce`;
+  // `crates/uf_stylex/src/tests/defaults.rs` holds every default style to
+  // that.
+  //
+  // There is no elevation either: a surface in front of another is told
+  // apart by a 1px `border` and its own background, never by a shadow.
   durationFast: "120ms",
-  durationBase: "200ms",
+  durationBase: "160ms",
   easing: "cubic-bezier(0.2, 0, 0, 1)",
 });