zyzz 0.0.9 → 0.0.12

package/src/compiler/internal/Expression.ts

@@ -32,6 +32,63 @@ export function acceptsColor(
   }
 }
 
+/** Validates explicit variable substitutions in compound values, including every conditional fallback. */
+export function acceptsVariables(
+  expression: Token.Expression,
+  property: keyof Literal.Properties,
+): boolean {
+  if (
+    !['filter', 'backdropFilter', 'boxShadow', 'textShadow'].includes(property)
+  )
+    return false
+  function values(value: Token.Value): readonly string[] {
+    if (Token.is(value)) return values(value.value)
+    if (typeof value === 'object') return Object.values(value).flatMap(values)
+    return [String(value)]
+  }
+  let candidates = ['']
+  for (const part of expression.parts) {
+    if (Binding.is(part)) return false
+    const alternatives = typeof part === 'string' ? [part] : values(part.value)
+    // Bound combinations of independent responsive variables before grammar checks.
+    if (candidates.length * alternatives.length > 256) return false
+    candidates = candidates.flatMap((prefix) =>
+      alternatives.map((value) => prefix + value),
+    )
+  }
+  try {
+    return candidates.every(
+      (value) =>
+        Tree.lexer.matchProperty(
+          Literal.name(property),
+          value.replace(/ !important$/, ''),
+        ).error === null,
+    )
+  } catch {
+    return false
+  }
+}
+
+/** Checks every identifier-token branch before its value becomes a CSS variable. */
+export function acceptsIdentifier(
+  reference: Token.Reference,
+  property: keyof Literal.Properties,
+): boolean {
+  function check(value: Token.Value): boolean {
+    if (Token.is(value)) return check(value.value)
+    if (typeof value === 'object') return Object.values(value).every(check)
+    try {
+      return (
+        Tree.lexer.matchProperty(Literal.name(property), String(value))
+          .error === null
+      )
+    } catch {
+      return false
+    }
+  }
+  return check(reference.value)
+}
+
 /** Folds cooked template text and literal primitive substitutions; unresolved syntax returns undefined. */
 export function template(
   node: Ast.TemplateLiteral,

package/src/compiler/internal/RecipeConditions.ts

@@ -34,9 +34,9 @@ export function read(options: read.Options): Condition {
     const rule = Query.resolve(
       node.value,
       options.queries ?? {
-        breakpoints: {},
+        breakpoint: {},
         containerNames: [],
-        containers: {},
+        container: {},
       },
     )
     const match = /^@(media|supports)(?=[\s(])\s*([\s\S]+)$/.exec(

package/src/compiler/internal/Themes.ts

@@ -1212,6 +1212,8 @@ export function collect(program: Ast.Program, options: collect.Options) {
         tokenType: theme.tokenType,
         type: theme.type,
         options: theme.options,
+        variableConfig: theme.variableConfig,
+        variableMappings: theme.variableMappings,
         output: theme.output,
       })
 

package/src/default.ts

@@ -3,31 +3,63 @@
  * @module
  */
 import { Config } from 'zyzz'
+import { keyframes } from 'zyzz/web'
+
+const spin = keyframes(
+  { to: { transform: 'rotate(360deg)' } },
+  { id: 'zyzz-spin' },
+)
+const ping = keyframes(
+  { '75%, 100%': { transform: 'scale(2)', opacity: 0 } },
+  { id: 'zyzz-ping' },
+)
+const pulse = keyframes({ '50%': { opacity: 0.5 } }, { id: 'zyzz-pulse' })
+const bounce = keyframes(
+  {
+    '0%, 100%': {
+      transform: 'translateY(-25%)',
+      animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
+    },
+    '50%': {
+      transform: 'none',
+      animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+    },
+  },
+  { id: 'zyzz-bounce' },
+)
+
+// Retain keyframes referenced by the generated literal animation tokens.
+void [spin, ping, pulse, bounce]
 
 /**
  * Raw bundled values, independent of portable references.
  *
- * Breakpoints, containers, spacing, radii, font sizes, weights, tracking, and
- * leading use the conventional named and quarter-rem scales. Fractional spacing
- * steps are omitted because token paths reserve the dot separator. Colors are
- * ten-step light/dark scales plus `background`, `grayAlpha`, `black`, and
- * `white`. `foreground` aliases `gray.1000` and `surface` aliases
- * `background.100`. Font stacks lead with the named faces and fall back to
- * system fonts. Typography sets use https://vercel.com/geist/typography,
- * with explicit zero tracking outside headings. No fonts are loaded.
+ * Colors retain Geist light/dark pairs. Effects, radii, and query scales follow Tailwind CSS 4.3.3.
+ * Spacing uses an explicit quarter-rem table. Font scales and Geist typography
+ * retain their existing values. Font stacks fall back to system fonts;
+ * no fonts are loaded.
  */
 export const tokens = {
-  borderRadius: {
-    xs: '0.125rem',
-    sm: '0.25rem',
-    md: '0.375rem',
-    lg: '0.5rem',
-    xl: '0.75rem',
-    '2xl': '1rem',
-    '3xl': '1.5rem',
-    '4xl': '2rem',
+  animate: {
+    spin: 'z-kid-7a-79-7a-7a-2d-73-70-69-6e 1s linear infinite',
+    ping: 'z-kid-7a-79-7a-7a-2d-70-69-6e-67 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+    pulse:
+      'z-kid-7a-79-7a-7a-2d-70-75-6c-73-65 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+    bounce: 'z-kid-7a-79-7a-7a-2d-62-6f-75-6e-63-65 1s infinite',
+  },
+  aspect: {
+    video: '16 / 9',
   },
-  breakpoints: {
+  blur: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    '2xl': '40px',
+    '3xl': '64px',
+  },
+  breakpoint: {
     sm: '40rem',
     md: '48rem',
     lg: '64rem',
@@ -152,7 +184,7 @@ export const tokens = {
     },
     white: '#fff',
   },
-  containers: {
+  container: {
     '3xs': '16rem',
     '2xs': '18rem',
     xs: '20rem',
@@ -167,6 +199,19 @@ export const tokens = {
     '6xl': '72rem',
     '7xl': '80rem',
   },
+  dropShadow: {
+    xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+    sm: '0 1px 2px rgb(0 0 0 / 0.15)',
+    md: '0 3px 3px rgb(0 0 0 / 0.12)',
+    lg: '0 4px 4px rgb(0 0 0 / 0.15)',
+    xl: '0 9px 7px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+  },
+  ease: {
+    in: 'cubic-bezier(0.4, 0, 1, 1)',
+    out: 'cubic-bezier(0, 0, 0.2, 1)',
+    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+  },
   fontFamily: {
     mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     sans: 'Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
@@ -198,6 +243,11 @@ export const tokens = {
     extrabold: 800,
     black: 900,
   },
+  insetShadow: {
+    '2xs': 'inset 0 1px rgb(0 0 0 / 0.05)',
+    xs: 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
+    sm: 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
+  },
   letterSpacing: {
     tighter: '-0.05em',
     tight: '-0.025em',
@@ -213,6 +263,33 @@ export const tokens = {
     relaxed: 1.625,
     loose: 2,
   },
+  perspective: {
+    dramatic: '100px',
+    near: '300px',
+    normal: '500px',
+    midrange: '800px',
+    distant: '1200px',
+  },
+  radius: {
+    xs: '0.125rem',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    '4xl': '2rem',
+  },
+  shadow: {
+    '2xs': '0 1px rgb(0 0 0 / 0.05)',
+    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  },
   spacing: {
     0: '0rem',
     1: '0.25rem',
@@ -246,6 +323,13 @@ export const tokens = {
     96: '24rem',
     px: '1px',
   },
+  textShadow: {
+    '2xs': '0px 1px 0px rgb(0 0 0 / 0.15)',
+    xs: '0px 1px 1px rgb(0 0 0 / 0.2)',
+    sm: '0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)',
+    md: '0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)',
+    lg: '0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)',
+  },
   typography: {
     button: {
       '12': {
@@ -598,17 +682,26 @@ export const tokens = {
 // Generated from tokens by scripts/default-theme.ts; edit tokens and regenerate.
 const config = Config.create({
   vars: {
-    borderRadius: {
-      xs: '0.125rem',
-      sm: '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      '2xl': '1rem',
-      '3xl': '1.5rem',
-      '4xl': '2rem',
+    animate: {
+      spin: 'z-kid-7a-79-7a-7a-2d-73-70-69-6e 1s linear infinite',
+      ping: 'z-kid-7a-79-7a-7a-2d-70-69-6e-67 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      pulse:
+        'z-kid-7a-79-7a-7a-2d-70-75-6c-73-65 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      bounce: 'z-kid-7a-79-7a-7a-2d-62-6f-75-6e-63-65 1s infinite',
+    },
+    aspect: {
+      video: '16 / 9',
     },
-    breakpoints: {
+    blur: {
+      xs: '4px',
+      sm: '8px',
+      md: '12px',
+      lg: '16px',
+      xl: '24px',
+      '2xl': '40px',
+      '3xl': '64px',
+    },
+    breakpoint: {
       sm: '40rem',
       md: '48rem',
       lg: '64rem',
@@ -733,7 +826,7 @@ const config = Config.create({
       },
       white: '#fff',
     },
-    containers: {
+    container: {
       '3xs': '16rem',
       '2xs': '18rem',
       xs: '20rem',
@@ -748,6 +841,19 @@ const config = Config.create({
       '6xl': '72rem',
       '7xl': '80rem',
     },
+    dropShadow: {
+      xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+      sm: '0 1px 2px rgb(0 0 0 / 0.15)',
+      md: '0 3px 3px rgb(0 0 0 / 0.12)',
+      lg: '0 4px 4px rgb(0 0 0 / 0.15)',
+      xl: '0 9px 7px rgb(0 0 0 / 0.1)',
+      '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+    },
+    ease: {
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
     fontFamily: {
       mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
       sans: 'Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
@@ -779,6 +885,11 @@ const config = Config.create({
       extrabold: 800,
       black: 900,
     },
+    insetShadow: {
+      '2xs': 'inset 0 1px rgb(0 0 0 / 0.05)',
+      xs: 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
+      sm: 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
+    },
     letterSpacing: {
       tighter: '-0.05em',
       tight: '-0.025em',
@@ -794,6 +905,33 @@ const config = Config.create({
       relaxed: 1.625,
       loose: 2,
     },
+    perspective: {
+      dramatic: '100px',
+      near: '300px',
+      normal: '500px',
+      midrange: '800px',
+      distant: '1200px',
+    },
+    radius: {
+      xs: '0.125rem',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      '2xl': '1rem',
+      '3xl': '1.5rem',
+      '4xl': '2rem',
+    },
+    shadow: {
+      '2xs': '0 1px rgb(0 0 0 / 0.05)',
+      xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+      sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+      '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    },
     spacing: {
       0: '0rem',
       1: '0.25rem',
@@ -827,6 +965,13 @@ const config = Config.create({
       96: '24rem',
       px: '1px',
     },
+    textShadow: {
+      '2xs': '0px 1px 0px rgb(0 0 0 / 0.15)',
+      xs: '0px 1px 1px rgb(0 0 0 / 0.2)',
+      sm: '0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)',
+      md: '0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)',
+      lg: '0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)',
+    },
     typography: {
       button: {
         '12': {

package/src/internal/Condition.ts

@@ -98,9 +98,9 @@ export type Keys<
         ? symbol
         : Relationship | Query)
   | Raw
-  | `@media ${Alias<Names<tokens, 'breakpoints'>>}`
-  | `@container ${Alias<Names<tokens, 'containers'>>}`
-  | `@container ${Containers<tokens>} ${Alias<Names<tokens, 'containers'>>}`
+  | `@media ${Alias<Names<tokens, 'breakpoint'>>}`
+  | `@container ${Alias<Names<tokens, 'container'>>}`
+  | `@container ${Containers<tokens>} ${Alias<Names<tokens, 'container'>>}`
 
 /** Recognizes structured rule keys before declaration parsing. */
 export function is(key: string): boolean {

package/src/internal/Configuration.ts

@@ -344,8 +344,8 @@ export function create(
       const data = theme[Token.definition].queries
 
       return JSON.stringify({
-        breakpoints: Object.keys(data?.breakpoints ?? {}).sort(),
-        containers: Object.keys(data?.containers ?? {}).sort(),
+        breakpoint: Object.keys(data?.breakpoint ?? {}).sort(),
+        container: Object.keys(data?.container ?? {}).sort(),
         containerNames: [...(data?.containerNames ?? [])].sort(),
       })
     }

package/src/internal/Query.ts

@@ -3,9 +3,9 @@ import * as Literal from './Literal.js'
 
 /** Named thresholds and eligible container identities. */
 export type Metadata = {
-  readonly breakpoints: Readonly<Record<string, string>>
+  readonly breakpoint: Readonly<Record<string, string>>
   readonly containerNames: readonly string[]
-  readonly containers: Readonly<Record<string, string>>
+  readonly container: Readonly<Record<string, string>>
 }
 
 /** Supported fixed nonnegative threshold lengths. */
@@ -52,7 +52,7 @@ export function resolve(key: string, metadata: Metadata): string {
   if (pieces.length !== 1) throw new Error('Malformed query alias.')
 
   const alias = pieces[0]!
-  const values = kind === 'media' ? metadata.breakpoints : metadata.containers
+  const values = kind === 'media' ? metadata.breakpoint : metadata.container
 
   const read = (name: string) => {
     const value = Object.hasOwn(values, name) ? values[name] : undefined

package/src/internal/Theme.ts

@@ -239,7 +239,7 @@ type Scalar<group> = group extends
         NonNullable<Literal.Properties[group]>,
         'initial' | 'inherit' | 'unset' | 'revert' | 'revert-layer'
       >
-    : group extends 'breakpoints' | 'containers'
+    : group extends 'breakpoint' | 'container'
       ? Query.Length
       : Color
 
@@ -255,13 +255,13 @@ export type Tokens = {
     | Palette<Exclude<Literal.Length, `${number}%`>>
     | undefined
   /** Compile-time viewport width thresholds. */
-  readonly breakpoints?: Readonly<Record<string, Query.Length>> | undefined
+  readonly breakpoint?: Readonly<Record<string, Query.Length>> | undefined
   /** Shared colors available to every supported color property. */
   readonly color?: Palette<Color> | undefined
   /** Finite CSS container identities for named queries. */
   readonly containerNames?: readonly string[] | undefined
   /** Compile-time container width thresholds. */
-  readonly containers?: Readonly<Record<string, Query.Length>> | undefined
+  readonly container?: Readonly<Record<string, Query.Length>> | undefined
   /** Font family token values; does not load font files. */
   readonly fontFamily?:
     | Palette<NonNullable<Literal.Properties['fontFamily']>>
@@ -308,14 +308,14 @@ function build(
   )
 
   const queries = {
-    breakpoints: Object.assign(
+    breakpoint: Object.assign(
       Object.create(null),
-      baseQueries?.breakpoints,
+      baseQueries?.breakpoint,
     ) as Record<string, string>,
     containerNames: baseQueries?.containerNames ?? [],
-    containers: Object.assign(
+    container: Object.assign(
       Object.create(null),
-      baseQueries?.containers,
+      baseQueries?.container,
     ) as Record<string, string>,
   }
 
@@ -486,13 +486,13 @@ function build(
       continue
     }
 
-    if (group === 'breakpoints' || group === 'containers') {
+    if (group === 'breakpoint' || group === 'container') {
       hasQueries = true
 
       for (const [name, value] of record(palette, [group])) {
         if (
           !/^[a-zA-Z0-9_][a-zA-Z0-9_-]*$/.test(name) ||
-          (group === 'breakpoints' &&
+          (group === 'breakpoint' &&
             ['all', 'screen', 'print'].includes(name)) ||
           !Query.threshold(value)
         )
@@ -628,9 +628,9 @@ function build(
           ...(hasQueries
             ? {
                 queries: Object.freeze({
-                  breakpoints: Object.freeze(queries.breakpoints),
+                  breakpoint: Object.freeze(queries.breakpoint),
                   containerNames: queries.containerNames,
-                  containers: Object.freeze(queries.containers),
+                  container: Object.freeze(queries.container),
                 }),
               }
             : {}),
@@ -785,7 +785,7 @@ type ValidTree<tree, group> = tree extends string | number
   ? group extends 'typography'
     ? never
     : tree extends Scalar<group>
-      ? group extends 'breakpoints' | 'containers'
+      ? group extends 'breakpoint' | 'container'
         ? tree extends `-${string}`
           ? never
           : Literal.Checked<tree>