zyzz 0.0.3 → 0.0.5

package/src/default.ts

@@ -36,119 +36,119 @@ export const tokens = {
   },
   color: {
     amber: {
-      100: { dark: '#291800', light: '#fff6e1' },
-      200: { dark: '#331b00', light: '#fff4d4' },
-      300: { dark: '#4f2900', light: '#fff1c8' },
-      400: { dark: '#573200', light: '#ffdd84' },
-      500: { dark: '#6c4100', light: '#ffc85e' },
-      600: { dark: '#e99c00', light: '#fa0' },
-      700: '#ffb200',
-      800: '#f90',
-      900: { dark: '#f90', light: '#a64f00' },
-      1000: { dark: '#fff3d9', light: '#541c00' },
+      100: { dark: '#291800', light: '#fff6e5' },
+      200: { dark: '#331b00', light: '#fff4d6' },
+      300: { dark: '#4d2a00', light: '#fef0cd' },
+      400: { dark: '#573300', light: '#ffdd8f' },
+      500: { dark: '#6b4105', light: '#ffc96b' },
+      600: { dark: '#e79d13', light: '#f5b047' },
+      700: '#ffb224',
+      800: '#ff990a',
+      900: { dark: '#f2a20d', light: '#a35200' },
+      1000: { dark: '#fef3dc', light: '#4e2009' },
     },
     background: {
-      100: { dark: '#000', light: '#fff' },
+      100: { dark: '#0a0a0a', light: '#fff' },
       200: { dark: '#000', light: '#fafafa' },
     },
     black: '#000',
     blue: {
-      100: { dark: '#06193a', light: '#f0f7ff' },
-      200: { dark: '#022248', light: '#eaf4ff' },
-      300: { dark: '#002f62', light: '#e0efff' },
-      400: { dark: '#003771', light: '#cce7ff' },
-      500: { dark: '#004287', light: '#97ccff' },
-      600: { dark: '#0090ff', light: '#51aeff' },
-      700: { dark: '#0071f6', light: '#0070f7' },
-      800: { dark: '#005fd8', light: '#005edc' },
-      900: { dark: '#50a8ff', light: '#0064e2' },
-      1000: { dark: '#ebf6ff', light: '#002453' },
+      100: { dark: '#0f1c2e', light: '#f0f7ff' },
+      200: { dark: '#10233d', light: '#ebf5ff' },
+      300: { dark: '#0f2f57', light: '#e0f0ff' },
+      400: { dark: '#0d3868', light: '#cce6ff' },
+      500: { dark: '#0a4380', light: '#99ceff' },
+      600: { dark: '#0091ff', light: '#52aeff' },
+      700: '#0072f5',
+      800: '#0062d1',
+      900: { dark: '#52a8ff', light: '#0068d6' },
+      1000: { dark: '#ebf6ff', light: '#00254d' },
     },
     foreground: { dark: '#ededed', light: '#171717' },
     gray: {
       100: { dark: '#1a1a1a', light: '#f2f2f2' },
       200: { dark: '#1f1f1f', light: '#ebebeb' },
       300: { dark: '#292929', light: '#e6e6e6' },
-      400: { dark: '#2e2e2e', light: '#eaeaea' },
+      400: { dark: '#2e2e2e', light: '#ebebeb' },
       500: { dark: '#454545', light: '#c9c9c9' },
       600: { dark: '#878787', light: '#a8a8a8' },
       700: '#8f8f8f',
       800: '#7d7d7d',
-      900: { dark: '#a0a0a0', light: '#4d4d4d' },
+      900: { dark: '#a1a1a1', light: '#4d4d4d' },
       1000: { dark: '#ededed', light: '#171717' },
     },
     grayAlpha: {
       100: { dark: '#ffffff0f', light: '#0000000d' },
-      200: { dark: '#ffffff17', light: '#00000015' },
+      200: { dark: '#ffffff17', light: '#00000014' },
       300: { dark: '#ffffff21', light: '#0000001a' },
       400: { dark: '#ffffff24', light: '#00000014' },
       500: { dark: '#ffffff3d', light: '#00000036' },
-      600: { dark: '#ffffff82', light: '#0000003d' },
+      600: { dark: '#ffffff82', light: '#00000057' },
       700: { dark: '#ffffff8a', light: '#00000070' },
       800: { dark: '#ffffff78', light: '#00000082' },
       900: { dark: '#ffffff9c', light: '#000000b3' },
       1000: { dark: '#ffffffeb', light: '#000000e8' },
     },
     green: {
-      100: { dark: '#00250a', light: '#ecfdec' },
-      200: { dark: '#003110', light: '#e5fce7' },
-      300: { dark: '#003814', light: '#d3fad1' },
-      400: { dark: '#004616', light: '#b9f5bc' },
-      500: { dark: '#00661d', light: '#82eb8d' },
-      600: { dark: '#009431', light: '#4ce15e' },
-      700: { dark: '#00ab3e', light: '#28a948' },
-      800: { dark: '#009335', light: '#279141' },
-      900: { dark: '#00ca52', light: '#107d32' },
-      1000: { dark: '#daffe5', light: '#00370d' },
+      100: { dark: '#0b2212', light: '#effbef' },
+      200: { dark: '#0f2e18', light: '#ebfaeb' },
+      300: { dark: '#12361b', light: '#daf6da' },
+      400: { dark: '#0c451b', light: '#c6f1c7' },
+      500: { dark: '#126426', light: '#99e69e' },
+      600: { dark: '#1a9338', light: '#6cda75' },
+      700: '#45a557',
+      800: '#398e4a',
+      900: { dark: '#62c073', light: '#297a3a' },
+      1000: { dark: '#e5fbea', light: '#1b311e' },
     },
     pink: {
-      100: { dark: '#310d1e', light: '#ffeaf5' },
-      200: { dark: '#420c25', light: '#ffeaf2' },
-      300: { dark: '#571032', light: '#ffe0eb' },
-      400: { dark: '#5d0c34', light: '#ffd5e1' },
-      500: { dark: '#76063f', light: '#fdb3cc' },
-      600: { dark: '#b90056', light: '#f97ea7' },
-      700: { dark: '#f12b82', light: '#f22782' },
-      800: { dark: '#e6006e', light: '#e4106e' },
-      900: { dark: '#ff518d', light: '#c41562' },
-      1000: { dark: '#ffeaf4', light: '#460523' },
+      100: { dark: '#28151d', light: '#ffebf5' },
+      200: { dark: '#3a1726', light: '#feecf2' },
+      300: { dark: '#4f1c31', light: '#fce3ec' },
+      400: { dark: '#551b33', light: '#f9d7e2' },
+      500: { dark: '#6c1e3e', light: '#f5b8cc' },
+      600: { dark: '#b31957', light: '#ee87a7' },
+      700: '#ea3e83',
+      800: '#df2670',
+      900: { dark: '#f75f8f', light: '#bd2864' },
+      1000: { dark: '#feecf4', light: '#430a23' },
     },
     purple: {
-      100: { dark: '#290c33', light: '#f9f0ff' },
-      200: { dark: '#341142', light: '#f9f1ff' },
-      300: { dark: '#47185e', light: '#f5e8ff' },
-      400: { dark: '#541a76', light: '#f1d9ff' },
-      500: { dark: '#642290', light: '#dda9ff' },
-      600: { dark: '#9440d5', light: '#c77dff' },
-      700: { dark: '#9440d5', light: '#9f00f4' },
-      800: { dark: '#7d2bba', light: '#8400cd' },
-      900: { dark: '#c472fb', light: '#7c00c9' },
-      1000: { dark: '#faedff', light: '#2e004d' },
+      100: { dark: '#231528', light: '#f9f0ff' },
+      200: { dark: '#2e1938', light: '#f9f1fe' },
+      300: { dark: '#422154', light: '#f4e8fc' },
+      400: { dark: '#4f2768', light: '#eddcf9' },
+      500: { dark: '#5f2e85', light: '#d5b1f1' },
+      600: { dark: '#8e4ec6', light: '#bf89ec' },
+      700: '#8e4ec6',
+      800: '#763da9',
+      900: { dark: '#bf7af0', light: '#7820bc' },
+      1000: { dark: '#f8edfc', light: '#2e004d' },
     },
     red: {
-      100: { dark: '#330a11', light: '#ffeef0' },
-      200: { dark: '#440d13', light: '#ffe9ea' },
-      300: { dark: '#5d0e17', light: '#ffe4e5' },
-      400: { dark: '#6f101b', light: '#ffd8d7' },
-      500: { dark: '#88151f', light: '#ffb5b6' },
-      600: { dark: '#f32e40', light: '#ff6a6e' },
-      700: { dark: '#f13242', light: '#fc0035' },
-      800: { dark: '#e2162a', light: '#e70022' },
-      900: { dark: '#ff5e63', light: '#d60020' },
-      1000: { dark: '#ffeaed', light: '#46000c' },
+      100: { dark: '#2a1314', light: '#fff0f0' },
+      200: { dark: '#3c1618', light: '#ffebeb' },
+      300: { dark: '#561a1e', light: '#ffe5e5' },
+      400: { dark: '#671e21', light: '#fdd8d8' },
+      500: { dark: '#832126', light: '#f8b9b9' },
+      600: { dark: '#e5484d', light: '#f87275' },
+      700: '#e5484d',
+      800: { dark: '#d93036', light: '#da2f35' },
+      900: { dark: '#ff6166', light: '#cb2a2f' },
+      1000: { dark: '#feecee', light: '#391417' },
     },
-    surface: { dark: '#000', light: '#fff' },
+    surface: { dark: '#0a0a0a', light: '#fff' },
     teal: {
-      100: { dark: '#00211b', light: '#dffffb' },
-      200: { dark: '#002922', light: '#ddfef6' },
-      300: { dark: '#003b33', light: '#ccf9f1' },
-      400: { dark: '#003f35', light: '#b1f7ec' },
-      500: { dark: '#005f53', light: '#52f0db' },
-      600: { dark: '#009885', light: '#00e2c4' },
-      700: { dark: '#00a794', light: '#00a694' },
-      800: '#008d7d',
-      900: { dark: '#00c9b5', light: '#007a6e' },
-      1000: { dark: '#cefff5', light: '#003d34' },
+      100: { dark: '#04201b', light: '#eefcf9' },
+      200: { dark: '#062822', light: '#e5faf6' },
+      300: { dark: '#083a33', light: '#d4f7f0' },
+      400: { dark: '#053d35', light: '#bef4eb' },
+      500: { dark: '#085e53', light: '#86ead9' },
+      600: { dark: '#0c9784', light: '#45dec5' },
+      700: '#12a594',
+      800: '#0d8c7d',
+      900: { dark: '#0ac7b4', light: '#067a6e' },
+      1000: { dark: '#e0faf4', light: '#073c34' },
     },
     white: '#fff',
   },
@@ -596,8 +596,8 @@ export const tokens = {
 
 /** Default appearance, restoration script, and authoring helpers with bundled light/dark tokens. */
 // Generated from tokens by scripts/default-theme.ts; edit tokens and regenerate.
-export const { appearance, script, style, theme, variants } = Config.create({
-  theme: {
+const config = Config.create({
+  vars: {
     borderRadius: {
       xs: '0.125rem',
       sm: '0.25rem',
@@ -617,119 +617,119 @@ export const { appearance, script, style, theme, variants } = Config.create({
     },
     color: {
       amber: {
-        100: { dark: '#291800', light: '#fff6e1' },
-        200: { dark: '#331b00', light: '#fff4d4' },
-        300: { dark: '#4f2900', light: '#fff1c8' },
-        400: { dark: '#573200', light: '#ffdd84' },
-        500: { dark: '#6c4100', light: '#ffc85e' },
-        600: { dark: '#e99c00', light: '#fa0' },
-        700: '#ffb200',
-        800: '#f90',
-        900: { dark: '#f90', light: '#a64f00' },
-        1000: { dark: '#fff3d9', light: '#541c00' },
+        100: { dark: '#291800', light: '#fff6e5' },
+        200: { dark: '#331b00', light: '#fff4d6' },
+        300: { dark: '#4d2a00', light: '#fef0cd' },
+        400: { dark: '#573300', light: '#ffdd8f' },
+        500: { dark: '#6b4105', light: '#ffc96b' },
+        600: { dark: '#e79d13', light: '#f5b047' },
+        700: '#ffb224',
+        800: '#ff990a',
+        900: { dark: '#f2a20d', light: '#a35200' },
+        1000: { dark: '#fef3dc', light: '#4e2009' },
       },
       background: {
-        100: { dark: '#000', light: '#fff' },
+        100: { dark: '#0a0a0a', light: '#fff' },
         200: { dark: '#000', light: '#fafafa' },
       },
       black: '#000',
       blue: {
-        100: { dark: '#06193a', light: '#f0f7ff' },
-        200: { dark: '#022248', light: '#eaf4ff' },
-        300: { dark: '#002f62', light: '#e0efff' },
-        400: { dark: '#003771', light: '#cce7ff' },
-        500: { dark: '#004287', light: '#97ccff' },
-        600: { dark: '#0090ff', light: '#51aeff' },
-        700: { dark: '#0071f6', light: '#0070f7' },
-        800: { dark: '#005fd8', light: '#005edc' },
-        900: { dark: '#50a8ff', light: '#0064e2' },
-        1000: { dark: '#ebf6ff', light: '#002453' },
+        100: { dark: '#0f1c2e', light: '#f0f7ff' },
+        200: { dark: '#10233d', light: '#ebf5ff' },
+        300: { dark: '#0f2f57', light: '#e0f0ff' },
+        400: { dark: '#0d3868', light: '#cce6ff' },
+        500: { dark: '#0a4380', light: '#99ceff' },
+        600: { dark: '#0091ff', light: '#52aeff' },
+        700: '#0072f5',
+        800: '#0062d1',
+        900: { dark: '#52a8ff', light: '#0068d6' },
+        1000: { dark: '#ebf6ff', light: '#00254d' },
       },
       foreground: { dark: '#ededed', light: '#171717' },
       gray: {
         100: { dark: '#1a1a1a', light: '#f2f2f2' },
         200: { dark: '#1f1f1f', light: '#ebebeb' },
         300: { dark: '#292929', light: '#e6e6e6' },
-        400: { dark: '#2e2e2e', light: '#eaeaea' },
+        400: { dark: '#2e2e2e', light: '#ebebeb' },
         500: { dark: '#454545', light: '#c9c9c9' },
         600: { dark: '#878787', light: '#a8a8a8' },
         700: '#8f8f8f',
         800: '#7d7d7d',
-        900: { dark: '#a0a0a0', light: '#4d4d4d' },
+        900: { dark: '#a1a1a1', light: '#4d4d4d' },
         1000: { dark: '#ededed', light: '#171717' },
       },
       grayAlpha: {
         100: { dark: '#ffffff0f', light: '#0000000d' },
-        200: { dark: '#ffffff17', light: '#00000015' },
+        200: { dark: '#ffffff17', light: '#00000014' },
         300: { dark: '#ffffff21', light: '#0000001a' },
         400: { dark: '#ffffff24', light: '#00000014' },
         500: { dark: '#ffffff3d', light: '#00000036' },
-        600: { dark: '#ffffff82', light: '#0000003d' },
+        600: { dark: '#ffffff82', light: '#00000057' },
         700: { dark: '#ffffff8a', light: '#00000070' },
         800: { dark: '#ffffff78', light: '#00000082' },
         900: { dark: '#ffffff9c', light: '#000000b3' },
         1000: { dark: '#ffffffeb', light: '#000000e8' },
       },
       green: {
-        100: { dark: '#00250a', light: '#ecfdec' },
-        200: { dark: '#003110', light: '#e5fce7' },
-        300: { dark: '#003814', light: '#d3fad1' },
-        400: { dark: '#004616', light: '#b9f5bc' },
-        500: { dark: '#00661d', light: '#82eb8d' },
-        600: { dark: '#009431', light: '#4ce15e' },
-        700: { dark: '#00ab3e', light: '#28a948' },
-        800: { dark: '#009335', light: '#279141' },
-        900: { dark: '#00ca52', light: '#107d32' },
-        1000: { dark: '#daffe5', light: '#00370d' },
+        100: { dark: '#0b2212', light: '#effbef' },
+        200: { dark: '#0f2e18', light: '#ebfaeb' },
+        300: { dark: '#12361b', light: '#daf6da' },
+        400: { dark: '#0c451b', light: '#c6f1c7' },
+        500: { dark: '#126426', light: '#99e69e' },
+        600: { dark: '#1a9338', light: '#6cda75' },
+        700: '#45a557',
+        800: '#398e4a',
+        900: { dark: '#62c073', light: '#297a3a' },
+        1000: { dark: '#e5fbea', light: '#1b311e' },
       },
       pink: {
-        100: { dark: '#310d1e', light: '#ffeaf5' },
-        200: { dark: '#420c25', light: '#ffeaf2' },
-        300: { dark: '#571032', light: '#ffe0eb' },
-        400: { dark: '#5d0c34', light: '#ffd5e1' },
-        500: { dark: '#76063f', light: '#fdb3cc' },
-        600: { dark: '#b90056', light: '#f97ea7' },
-        700: { dark: '#f12b82', light: '#f22782' },
-        800: { dark: '#e6006e', light: '#e4106e' },
-        900: { dark: '#ff518d', light: '#c41562' },
-        1000: { dark: '#ffeaf4', light: '#460523' },
+        100: { dark: '#28151d', light: '#ffebf5' },
+        200: { dark: '#3a1726', light: '#feecf2' },
+        300: { dark: '#4f1c31', light: '#fce3ec' },
+        400: { dark: '#551b33', light: '#f9d7e2' },
+        500: { dark: '#6c1e3e', light: '#f5b8cc' },
+        600: { dark: '#b31957', light: '#ee87a7' },
+        700: '#ea3e83',
+        800: '#df2670',
+        900: { dark: '#f75f8f', light: '#bd2864' },
+        1000: { dark: '#feecf4', light: '#430a23' },
       },
       purple: {
-        100: { dark: '#290c33', light: '#f9f0ff' },
-        200: { dark: '#341142', light: '#f9f1ff' },
-        300: { dark: '#47185e', light: '#f5e8ff' },
-        400: { dark: '#541a76', light: '#f1d9ff' },
-        500: { dark: '#642290', light: '#dda9ff' },
-        600: { dark: '#9440d5', light: '#c77dff' },
-        700: { dark: '#9440d5', light: '#9f00f4' },
-        800: { dark: '#7d2bba', light: '#8400cd' },
-        900: { dark: '#c472fb', light: '#7c00c9' },
-        1000: { dark: '#faedff', light: '#2e004d' },
+        100: { dark: '#231528', light: '#f9f0ff' },
+        200: { dark: '#2e1938', light: '#f9f1fe' },
+        300: { dark: '#422154', light: '#f4e8fc' },
+        400: { dark: '#4f2768', light: '#eddcf9' },
+        500: { dark: '#5f2e85', light: '#d5b1f1' },
+        600: { dark: '#8e4ec6', light: '#bf89ec' },
+        700: '#8e4ec6',
+        800: '#763da9',
+        900: { dark: '#bf7af0', light: '#7820bc' },
+        1000: { dark: '#f8edfc', light: '#2e004d' },
       },
       red: {
-        100: { dark: '#330a11', light: '#ffeef0' },
-        200: { dark: '#440d13', light: '#ffe9ea' },
-        300: { dark: '#5d0e17', light: '#ffe4e5' },
-        400: { dark: '#6f101b', light: '#ffd8d7' },
-        500: { dark: '#88151f', light: '#ffb5b6' },
-        600: { dark: '#f32e40', light: '#ff6a6e' },
-        700: { dark: '#f13242', light: '#fc0035' },
-        800: { dark: '#e2162a', light: '#e70022' },
-        900: { dark: '#ff5e63', light: '#d60020' },
-        1000: { dark: '#ffeaed', light: '#46000c' },
+        100: { dark: '#2a1314', light: '#fff0f0' },
+        200: { dark: '#3c1618', light: '#ffebeb' },
+        300: { dark: '#561a1e', light: '#ffe5e5' },
+        400: { dark: '#671e21', light: '#fdd8d8' },
+        500: { dark: '#832126', light: '#f8b9b9' },
+        600: { dark: '#e5484d', light: '#f87275' },
+        700: '#e5484d',
+        800: { dark: '#d93036', light: '#da2f35' },
+        900: { dark: '#ff6166', light: '#cb2a2f' },
+        1000: { dark: '#feecee', light: '#391417' },
       },
-      surface: { dark: '#000', light: '#fff' },
+      surface: { dark: '#0a0a0a', light: '#fff' },
       teal: {
-        100: { dark: '#00211b', light: '#dffffb' },
-        200: { dark: '#002922', light: '#ddfef6' },
-        300: { dark: '#003b33', light: '#ccf9f1' },
-        400: { dark: '#003f35', light: '#b1f7ec' },
-        500: { dark: '#005f53', light: '#52f0db' },
-        600: { dark: '#009885', light: '#00e2c4' },
-        700: { dark: '#00a794', light: '#00a694' },
-        800: '#008d7d',
-        900: { dark: '#00c9b5', light: '#007a6e' },
-        1000: { dark: '#cefff5', light: '#003d34' },
+        100: { dark: '#04201b', light: '#eefcf9' },
+        200: { dark: '#062822', light: '#e5faf6' },
+        300: { dark: '#083a33', light: '#d4f7f0' },
+        400: { dark: '#053d35', light: '#bef4eb' },
+        500: { dark: '#085e53', light: '#86ead9' },
+        600: { dark: '#0c9784', light: '#45dec5' },
+        700: '#12a594',
+        800: '#0d8c7d',
+        900: { dark: '#0ac7b4', light: '#067a6e' },
+        1000: { dark: '#e0faf4', light: '#073c34' },
       },
       white: '#fff',
     },
@@ -1175,3 +1175,22 @@ export const { appearance, script, style, theme, variants } = Config.create({
     },
   },
 })
+
+/** Default appearance helper. */
+export const appearance: Config.create.ReturnType<{
+  vars: typeof tokens
+}>['appearance'] = config.appearance
+/** Default script helper. */
+export const script: Config.create.ReturnType<{
+  vars: typeof tokens
+}>['script'] = config.script
+/** Default style helper. */
+export const style: Config.create.ReturnType<{ vars: typeof tokens }>['style'] =
+  config.style
+/** Default vars helper. */
+export const vars: Config.create.ReturnType<{ vars: typeof tokens }>['vars'] =
+  config.vars
+/** Default variants helper. */
+export const variants: Config.create.ReturnType<{
+  vars: typeof tokens
+}>['variants'] = config.variants

package/src/esbuild/index.ts

@@ -0,0 +1,5 @@
+/** Exposes the Zyzz esbuild build adapter. @module */
+import { zyzz as unplugin } from '../unplugin/index.js'
+
+/** Compiles project sources and emits `zyzz.css` into the bundler output directory. */
+export const zyzz = unplugin.esbuild

package/src/index.ts

@@ -1,8 +1,8 @@
 /**
- * Exposes token-free authoring, ordered style definitions, and theme contracts.
+ * Exposes token-free authoring, ordered style definitions, and variable contracts.
  * @module
  */
-/** Explicit theme and layer authoring contracts. */
+/** Explicit variable and layer authoring contracts. */
 export * as Config from './Config.js'
 /** Token-free literal authoring; requires a compile-time source transform. */
 export { style } from './styleFunction.js'
@@ -12,9 +12,9 @@ export { cx } from './cx.js'
 export type * as Props from './Props.js'
 /** Typed literal style definitions and validation diagnostics. */
 export * as Style from './Style.js'
-/** Typed theme contracts and compatible token overrides. */
-export * as Theme from './Theme.js'
 /** Typed CSS variable declarations and inline assignments. */
 export { variable } from './variable.js'
+/** Immutable shared values, conditions, and compatible variable sets. */
+export * as Vars from './Vars.js'
 /** Single-element finite recipes compiled ahead of time. */
 export { variants } from './variants.js'

package/src/internal/Authoring.ts

@@ -4,7 +4,7 @@ import * as Html from '../runtime/CompositionHtml.js'
 import * as Identity from './Identity.js'
 import * as Props from '../runtime/Props.js'
 import * as Style from '../Style.js'
-import type * as Theme from '../Theme.js'
+import type * as Theme from './Theme.js'
 
 /** Private ownership used by uncompiled composition; never spread onto DOM props. */
 export const metadata = Symbol.for('zyzz.authoring')
@@ -44,7 +44,7 @@ export function body(input: Record<string, unknown>): Record<string, unknown> {
           descriptors.web = { ...web, value: body(web.value) }
         return [[key, Object.create(Object.getPrototypeOf(value), descriptors)]]
       }
-      if (key === 'selectors' || key === 'variables')
+      if (key === 'selectors' || key === 'vars')
         return Object.entries(value as Record<string, unknown>).map(
           ([name, entry]) => [
             name,
@@ -84,7 +84,7 @@ export function create(
           ) => Style.Definition
         )(
           { style: body(input as Record<string, unknown>) },
-          { theme: options.theme },
+          { vars: options.theme },
         ).styles[0]!,
       )
   const props = Props.create({ className })
@@ -95,7 +95,7 @@ export function create(
         ...result.style,
       }
       for (const [field, value] of Object.entries(values ?? {})) {
-        if (['className', 'style', 'variables'].includes(field)) continue
+        if (['className', 'style', 'vars'].includes(field)) continue
         style[Identity.slot(id!, field)] =
           value === '' ? ' ' : (value as string | number)
       }
@@ -107,9 +107,7 @@ export function create(
         attributes: [],
         slots: dynamic
           ? Object.keys(values ?? {})
-              .filter(
-                (key) => !['className', 'style', 'variables'].includes(key),
-              )
+              .filter((key) => !['className', 'style', 'vars'].includes(key))
               .map((key) => Identity.slot(id!, key))
           : [],
       },

package/src/internal/Binding.ts

@@ -135,7 +135,7 @@ export type Inputs<values> = {
     | 'key'
     | 'ref'
     | 'style'
-    | 'variables'
+    | 'vars'
     | '__proto__'
     ? never
     : Extract<values[key], `${string}!${string}`> extends never

package/src/internal/Completion.ts

@@ -0,0 +1,42 @@
+/** Supplies editor hints independently of inferred declaration validation. @module */
+import type * as Theme from './Theme.js'
+import type * as Condition from './Condition.js'
+import type * as Literal from './Literal.js'
+import type * as Token from './Token.js'
+import type * as Typography from './Typography.js'
+
+/** Recursive hints do not determine which authored declarations are accepted. */
+export type Properties<
+  tokens extends Theme.Tokens = {},
+  styles = Record<string, unknown>,
+> = {
+  readonly [property in keyof Literal.Properties & keyof styles]?:
+    | (string extends Literal.Properties[property]
+        ? never
+        : Literal.Properties[property])
+    | Token.Names<tokens, property>
+    | (string & {})
+    | number
+    | object
+} & {
+  // Escaped custom-property names can contain nesting characters.
+  readonly [key in (`@${string}` | `:${string}` | `${string}&${string}`) &
+    keyof styles]?:
+    | Nested<tokens>
+    | (key extends `${string}&${string}` ? string | number : never)
+} & {
+  readonly [key in (
+    | Condition.Suggestions
+    | Exclude<Condition.Keys<tokens>, Condition.Raw>
+  ) &
+    keyof styles]?: Nested<tokens>
+} & {
+  readonly [property in (Typography.Names<tokens> extends never
+    ? never
+    : 'typography') &
+    keyof styles]?: Typography.Names<tokens> | (string & {})
+}
+
+// Inferred validation checks extra fields, including vars and configured shorthands.
+type Nested<tokens extends Theme.Tokens> = Properties<tokens> &
+  Readonly<Record<string, unknown>>

package/src/internal/Condition.ts

@@ -1,5 +1,35 @@
 /** Typed nested selector and condition keys without a general string index. @module */
-import type * as Theme from '../Theme.js'
+import type * as Theme from './Theme.js'
+
+/** Concrete suggestions supplement open selector and query patterns. */
+export type Suggestions =
+  | '::after'
+  | '::backdrop'
+  | '::before'
+  | '::first-letter'
+  | '::first-line'
+  | '::marker'
+  | '::placeholder'
+  | '::selection'
+  | ':active'
+  | ':checked'
+  | ':disabled'
+  | ':empty'
+  | ':enabled'
+  | ':first-child'
+  | ':focus'
+  | ':focus-visible'
+  | ':focus-within'
+  | ':hover'
+  | ':last-child'
+  | ':only-child'
+  | ':visited'
+  | '@container'
+  | '@layer'
+  | '@media'
+  | '@scope'
+  | '@starting-style'
+  | '@supports'
 
 type Case<text extends string> = text extends `${infer first}${infer rest}`
   ? `${Lowercase<first> | Uppercase<first>}${Case<rest>}`