@titan-design/react-ui 0.2.6 → 0.3.0

package/src/theme/config.ts

@@ -7,6 +7,35 @@
 
 import { semanticColorsLight, semanticColorsDark, type ThemeMode } from './tokens/semantic'
 
+// Theme-independent custom properties: identical in light and dark in
+// global.css (RGB glow decompositions, font families, animation tokens). Kept
+// as literals since they are not part of the semantic COLOR maps, and spread
+// into both theme maps so codegen mirrors global.css exactly.
+const themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  '--color-brand-primary-rgb': '255, 121, 0',
+  '--color-brand-secondary-rgb': '64, 109, 135',
+  '--color-status-success-rgb': '20, 184, 166',
+  '--color-status-error-rgb': '209, 67, 67',
+  '--color-status-warning-rgb': '255, 176, 32',
+  '--color-status-info-rgb': '33, 150, 243',
+  '--color-background-base-rgb': '16, 16, 16',
+
+  // Font families
+  '--font-family-sans': "'Inter'",
+  '--font-family-body': "'Nunito Sans'",
+  '--font-family-heading': "'Space Grotesk'",
+  '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+
+  // Animation tokens
+  '--ease-out': 'cubic-bezier(0.22, 1, 0.36, 1)',
+  '--ease-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+  '--ease-spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  '--duration-fast': '150ms',
+  '--duration-normal': '250ms',
+  '--duration-slow': '400ms',
+} as const
+
 // CSS custom properties for light mode
 export const lightThemeCSSVars = {
   '--color-brand-primary': semanticColorsLight['brand-primary'],
@@ -57,6 +86,67 @@ export const lightThemeCSSVars = {
   '--color-interactive-disabled': semanticColorsLight['interactive-disabled'],
 
   '--color-divider': semanticColorsLight['divider'],
+
+  '--color-brand-primary-hover': semanticColorsLight['brand-primary-hover'],
+  '--color-brand-primary-active': semanticColorsLight['brand-primary-active'],
+  '--color-brand-secondary-hover': semanticColorsLight['brand-secondary-hover'],
+  '--color-brand-secondary-active': semanticColorsLight['brand-secondary-active'],
+
+  '--color-status-success-light': semanticColorsLight['status-success-light'],
+  '--color-status-success-dark': semanticColorsLight['status-success-dark'],
+  '--color-status-error-light': semanticColorsLight['status-error-light'],
+  '--color-status-error-dark': semanticColorsLight['status-error-dark'],
+  '--color-status-warning-light': semanticColorsLight['status-warning-light'],
+  '--color-status-warning-dark': semanticColorsLight['status-warning-dark'],
+  '--color-status-info-light': semanticColorsLight['status-info-light'],
+  '--color-status-info-dark': semanticColorsLight['status-info-dark'],
+
+  '--color-on-status-success': semanticColorsLight['on-status-success'],
+  '--color-on-status-error': semanticColorsLight['on-status-error'],
+  '--color-on-status-warning': semanticColorsLight['on-status-warning'],
+  '--color-on-status-info': semanticColorsLight['on-status-info'],
+
+  '--color-result-improve': semanticColorsLight['result-improve'],
+  '--color-result-improve-light': semanticColorsLight['result-improve-light'],
+  '--color-result-improve-dark': semanticColorsLight['result-improve-dark'],
+  '--color-result-degrade': semanticColorsLight['result-degrade'],
+  '--color-result-degrade-light': semanticColorsLight['result-degrade-light'],
+  '--color-result-degrade-dark': semanticColorsLight['result-degrade-dark'],
+  '--color-result-inconclusive': semanticColorsLight['result-inconclusive'],
+  '--color-result-inconclusive-light': semanticColorsLight['result-inconclusive-light'],
+  '--color-result-neutral': semanticColorsLight['result-neutral'],
+
+  '--color-on-result-improve': semanticColorsLight['on-result-improve'],
+  '--color-on-result-degrade': semanticColorsLight['on-result-degrade'],
+  '--color-on-result-inconclusive': semanticColorsLight['on-result-inconclusive'],
+
+  '--color-data-1': semanticColorsLight['data-1'],
+  '--color-data-2': semanticColorsLight['data-2'],
+  '--color-data-3': semanticColorsLight['data-3'],
+  '--color-data-4': semanticColorsLight['data-4'],
+  '--color-data-5': semanticColorsLight['data-5'],
+  '--color-data-6': semanticColorsLight['data-6'],
+  '--color-data-7': semanticColorsLight['data-7'],
+  '--color-data-8': semanticColorsLight['data-8'],
+  '--color-data-9': semanticColorsLight['data-9'],
+  '--color-data-10': semanticColorsLight['data-10'],
+
+  '--color-text-link-hover': semanticColorsLight['text-link-hover'],
+
+  '--color-surface-overlay': semanticColorsLight['surface-overlay'],
+  '--color-surface-input': semanticColorsLight['surface-input'],
+
+  '--color-border-input': semanticColorsLight['border-input'],
+  '--color-border-input-hover': semanticColorsLight['border-input-hover'],
+  '--color-border-input-focus': semanticColorsLight['border-input-focus'],
+  '--color-border-input-error': semanticColorsLight['border-input-error'],
+
+  '--color-interactive-disabled-text': semanticColorsLight['interactive-disabled-text'],
+
+  '--color-avatar-background': semanticColorsLight['avatar-background'],
+  '--color-avatar-text': semanticColorsLight['avatar-text'],
+
+  ...themeIndependentCSSVars,
 } as const
 
 // CSS custom properties for dark mode (default)
@@ -109,6 +199,67 @@ export const darkThemeCSSVars = {
   '--color-interactive-disabled': semanticColorsDark['interactive-disabled'],
 
   '--color-divider': semanticColorsDark['divider'],
+
+  '--color-brand-primary-hover': semanticColorsDark['brand-primary-hover'],
+  '--color-brand-primary-active': semanticColorsDark['brand-primary-active'],
+  '--color-brand-secondary-hover': semanticColorsDark['brand-secondary-hover'],
+  '--color-brand-secondary-active': semanticColorsDark['brand-secondary-active'],
+
+  '--color-status-success-light': semanticColorsDark['status-success-light'],
+  '--color-status-success-dark': semanticColorsDark['status-success-dark'],
+  '--color-status-error-light': semanticColorsDark['status-error-light'],
+  '--color-status-error-dark': semanticColorsDark['status-error-dark'],
+  '--color-status-warning-light': semanticColorsDark['status-warning-light'],
+  '--color-status-warning-dark': semanticColorsDark['status-warning-dark'],
+  '--color-status-info-light': semanticColorsDark['status-info-light'],
+  '--color-status-info-dark': semanticColorsDark['status-info-dark'],
+
+  '--color-on-status-success': semanticColorsDark['on-status-success'],
+  '--color-on-status-error': semanticColorsDark['on-status-error'],
+  '--color-on-status-warning': semanticColorsDark['on-status-warning'],
+  '--color-on-status-info': semanticColorsDark['on-status-info'],
+
+  '--color-result-improve': semanticColorsDark['result-improve'],
+  '--color-result-improve-light': semanticColorsDark['result-improve-light'],
+  '--color-result-improve-dark': semanticColorsDark['result-improve-dark'],
+  '--color-result-degrade': semanticColorsDark['result-degrade'],
+  '--color-result-degrade-light': semanticColorsDark['result-degrade-light'],
+  '--color-result-degrade-dark': semanticColorsDark['result-degrade-dark'],
+  '--color-result-inconclusive': semanticColorsDark['result-inconclusive'],
+  '--color-result-inconclusive-light': semanticColorsDark['result-inconclusive-light'],
+  '--color-result-neutral': semanticColorsDark['result-neutral'],
+
+  '--color-on-result-improve': semanticColorsDark['on-result-improve'],
+  '--color-on-result-degrade': semanticColorsDark['on-result-degrade'],
+  '--color-on-result-inconclusive': semanticColorsDark['on-result-inconclusive'],
+
+  '--color-data-1': semanticColorsDark['data-1'],
+  '--color-data-2': semanticColorsDark['data-2'],
+  '--color-data-3': semanticColorsDark['data-3'],
+  '--color-data-4': semanticColorsDark['data-4'],
+  '--color-data-5': semanticColorsDark['data-5'],
+  '--color-data-6': semanticColorsDark['data-6'],
+  '--color-data-7': semanticColorsDark['data-7'],
+  '--color-data-8': semanticColorsDark['data-8'],
+  '--color-data-9': semanticColorsDark['data-9'],
+  '--color-data-10': semanticColorsDark['data-10'],
+
+  '--color-text-link-hover': semanticColorsDark['text-link-hover'],
+
+  '--color-surface-overlay': semanticColorsDark['surface-overlay'],
+  '--color-surface-input': semanticColorsDark['surface-input'],
+
+  '--color-border-input': semanticColorsDark['border-input'],
+  '--color-border-input-hover': semanticColorsDark['border-input-hover'],
+  '--color-border-input-focus': semanticColorsDark['border-input-focus'],
+  '--color-border-input-error': semanticColorsDark['border-input-error'],
+
+  '--color-interactive-disabled-text': semanticColorsDark['interactive-disabled-text'],
+
+  '--color-avatar-background': semanticColorsDark['avatar-background'],
+  '--color-avatar-text': semanticColorsDark['avatar-text'],
+
+  ...themeIndependentCSSVars,
 } as const
 
 // Helper to get CSS vars for a theme mode

package/src/theme/index.ts

@@ -3,11 +3,12 @@ export * from './tokens'
 export * from './config'
 export * from './shadows'
 export * from './elevation'
+export * from './manifest'
 
 // Re-export commonly used items
 export { getSemanticColors, type ThemeMode } from './tokens/semantic'
 export { getThemeCSSVars, gluestackConfig } from './config'
-export { 
+export {
   neumorphicShadows,
   // Color math utilities (HSV-based)
   lighten,

package/src/theme/manifest/css-property-manifest.example.json

@@ -0,0 +1,79 @@
+{
+  "component": "button",
+  "description": "Illustrative example conforming to css-property-manifest.schema.json. Values are derived from Button.tsx's variant/color/size style maps and the semantic token definitions they reference, not measured via getComputedStyle — a follow-up ticket generates verified manifests from the rendered Storybook DOM.",
+  "baseVariant": { "variant": "solid", "color": "primary", "size": "md" },
+  "properties": [
+    {
+      "property": "backgroundColor",
+      "token": "brand-primary",
+      "cssVariable": "--color-brand-primary",
+      "resolvedValue": "rgb(255, 121, 0)",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": null,
+          "cssVariable": null,
+          "resolvedValue": "rgba(0, 0, 0, 0)"
+        },
+        {
+          "variant": { "variant": "solid", "color": "error" },
+          "token": "status-error",
+          "cssVariable": "--color-status-error",
+          "resolvedValue": "rgb(209, 67, 67)"
+        }
+      ]
+    },
+    {
+      "property": "color",
+      "token": null,
+      "resolvedValue": "rgb(255, 255, 255)",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": "brand-primary",
+          "cssVariable": "--color-brand-primary",
+          "resolvedValue": "rgb(255, 121, 0)"
+        }
+      ]
+    },
+    {
+      "property": "borderColor",
+      "token": null,
+      "resolvedValue": "rgba(0, 0, 0, 0)",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": "brand-primary",
+          "cssVariable": "--color-brand-primary",
+          "resolvedValue": "rgb(255, 121, 0)"
+        }
+      ]
+    },
+    {
+      "property": "borderWidth",
+      "token": null,
+      "resolvedValue": "0px",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": null,
+          "resolvedValue": "2px"
+        }
+      ]
+    },
+    {
+      "property": "borderRadius",
+      "token": null,
+      "resolvedValue": "6px"
+    },
+    {
+      "property": "paddingLeft",
+      "token": null,
+      "resolvedValue": "20px",
+      "variantOverrides": [
+        { "variant": { "size": "sm" }, "token": null, "resolvedValue": "16px" },
+        { "variant": { "size": "lg" }, "token": null, "resolvedValue": "24px" }
+      ]
+    }
+  ]
+}

package/src/theme/manifest/css-property-manifest.schema.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://titan-design.dev/schemas/css-property-manifest.schema.json",
+  "title": "Component CSS Property Manifest",
+  "description": "Per-component record of visual CSS properties, the design token each one resolves from, the expected computed style value, and any per-variant overrides. Generated manifests serve as fixtures for Playwright computed-style assertions (see packages/ui/tests/visual).",
+  "type": "object",
+  "required": ["component", "properties"],
+  "additionalProperties": false,
+  "properties": {
+    "component": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$",
+      "description": "Component identifier matching its src/components/ui/{component} directory and Storybook id (e.g. \"button\")."
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional human-readable note about what this manifest covers."
+    },
+    "baseVariant": {
+      "$ref": "#/$defs/variantAxes",
+      "description": "The variant axis values (e.g. { \"variant\": \"solid\", \"color\": \"primary\", \"size\": \"md\" }) that each property's top-level resolvedValue was captured against. Axis names must match the component's own prop names."
+    },
+    "properties": {
+      "type": "array",
+      "minItems": 1,
+      "items": { "$ref": "#/$defs/cssPropertyEntry" },
+      "description": "One entry per visual CSS property tracked for this component."
+    }
+  },
+  "$defs": {
+    "variantAxes": {
+      "type": "object",
+      "minProperties": 1,
+      "additionalProperties": { "type": "string" },
+      "description": "A set of variant axis name/value pairs (e.g. variant, color, size, state) as accepted by the component's props."
+    },
+    "cssPropertyEntry": {
+      "type": "object",
+      "required": ["property", "token", "resolvedValue"],
+      "additionalProperties": false,
+      "properties": {
+        "property": {
+          "type": "string",
+          "pattern": "^[a-zA-Z]+$",
+          "description": "CSS property name in camelCase as returned by window.getComputedStyle (e.g. backgroundColor, borderColor, fontSize)."
+        },
+        "token": {
+          "type": ["string", "null"],
+          "description": "Semantic design token key this property is sourced from (e.g. \"brand-primary\"), matching a key in packages/ui/src/theme/tokens/semantic.ts. Use null when the value is a literal not backed by a token."
+        },
+        "cssVariable": {
+          "type": ["string", "null"],
+          "description": "CSS custom property backing the token (e.g. \"--color-brand-primary\"), as declared in packages/ui/src/theme/global.css. Omit or null when no CSS variable is involved."
+        },
+        "resolvedValue": {
+          "type": "string",
+          "minLength": 1,
+          "description": "Expected computed style value for baseVariant, in the format getComputedStyle returns it (e.g. \"rgb(255, 121, 0)\", \"8px\")."
+        },
+        "variantOverrides": {
+          "type": "array",
+          "default": [],
+          "items": { "$ref": "#/$defs/variantOverride" },
+          "description": "Overrides of token/resolvedValue for specific variant axis combinations, merged onto baseVariant."
+        }
+      }
+    },
+    "variantOverride": {
+      "type": "object",
+      "required": ["variant", "resolvedValue"],
+      "additionalProperties": false,
+      "properties": {
+        "variant": {
+          "$ref": "#/$defs/variantAxes",
+          "description": "Partial variant axis values that trigger this override (e.g. { \"variant\": \"outline\" } or { \"color\": \"error\", \"state\": \"hover\" })."
+        },
+        "token": {
+          "type": ["string", "null"],
+          "description": "Semantic token key for this override, or null for a literal value."
+        },
+        "cssVariable": {
+          "type": ["string", "null"],
+          "description": "CSS custom property backing the token for this override."
+        },
+        "resolvedValue": {
+          "type": "string",
+          "minLength": 1,
+          "description": "Expected computed style value when the variant axes match."
+        }
+      }
+    }
+  }
+}

package/src/theme/manifest/css-property-manifest.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import {
+  isCssPropertyManifest,
+  validateCssPropertyManifest,
+} from './css-property-manifest.validate'
+
+const readJson = (fileName: string): unknown =>
+  JSON.parse(readFileSync(join(__dirname, fileName), 'utf-8'))
+
+describe('css-property-manifest.schema.json', () => {
+  it('is well-formed JSON Schema with the documented top-level shape', () => {
+    const schema = readJson('css-property-manifest.schema.json') as Record<string, unknown>
+
+    expect(schema.$schema).toBe('https://json-schema.org/draft/2020-12/schema')
+    expect(schema.required).toEqual(['component', 'properties'])
+    expect(schema.$defs).toHaveProperty('cssPropertyEntry')
+    expect(schema.$defs).toHaveProperty('variantOverride')
+  })
+})
+
+describe('validateCssPropertyManifest', () => {
+  it('accepts the button example manifest', () => {
+    const example = readJson('css-property-manifest.example.json')
+
+    const result = validateCssPropertyManifest(example)
+
+    expect(result).toEqual({ valid: true, errors: [] })
+    expect(isCssPropertyManifest(example)).toBe(true)
+  })
+
+  it('rejects a manifest missing required top-level fields', () => {
+    const result = validateCssPropertyManifest({ component: 'button' })
+
+    expect(result.valid).toBe(false)
+    expect(result.errors).toContain('properties must be a non-empty array')
+  })
+
+  it('rejects a property entry missing a resolvedValue', () => {
+    const candidate = {
+      component: 'button',
+      properties: [{ property: 'backgroundColor', token: 'brand-primary' }],
+    }
+
+    const result = validateCssPropertyManifest(candidate)
+
+    expect(result.valid).toBe(false)
+    expect(result.errors).toContain('properties[0].resolvedValue must be a non-empty string')
+  })
+
+  it('rejects a variantOverride missing variant axes', () => {
+    const candidate = {
+      component: 'button',
+      properties: [
+        {
+          property: 'backgroundColor',
+          token: 'brand-primary',
+          resolvedValue: 'rgb(255, 121, 0)',
+          variantOverrides: [{ resolvedValue: 'rgba(0, 0, 0, 0)' }],
+        },
+      ],
+    }
+
+    const result = validateCssPropertyManifest(candidate)
+
+    expect(result.valid).toBe(false)
+    expect(result.errors).toContain(
+      'properties[0].variantOverrides[0].variant must be a non-empty string-keyed object'
+    )
+  })
+
+  it('allows token to be null for literal (non-tokenized) values', () => {
+    const candidate = {
+      component: 'button',
+      properties: [{ property: 'borderRadius', token: null, resolvedValue: '6px' }],
+    }
+
+    expect(validateCssPropertyManifest(candidate)).toEqual({ valid: true, errors: [] })
+  })
+})

package/src/theme/manifest/css-property-manifest.types.ts

@@ -0,0 +1,49 @@
+/**
+ * TypeScript mirror of css-property-manifest.schema.json.
+ *
+ * A manifest records, per component, which visual CSS properties are tracked,
+ * which design token each one resolves from, the expected computed style
+ * value, and any per-variant overrides. Manifests are the fixtures consumed
+ * by Playwright computed-style assertions (see packages/ui/tests/visual).
+ */
+
+/** Variant axis name/value pairs, e.g. { variant: 'solid', color: 'primary', size: 'md' }. */
+export type VariantAxes = Record<string, string>
+
+/** A resolvedValue/token override that applies when the given variant axes match. */
+export interface VariantOverride {
+  /** Partial variant axis values that trigger this override, merged onto baseVariant. */
+  variant: VariantAxes
+  /** Semantic token key for this override, or null for a literal (non-tokenized) value. */
+  token?: string | null
+  /** CSS custom property backing the token for this override, if any. */
+  cssVariable?: string | null
+  /** Expected getComputedStyle value when the variant axes match. */
+  resolvedValue: string
+}
+
+/** A single tracked CSS property for a component. */
+export interface CssPropertyEntry {
+  /** CSS property name in camelCase, as returned by window.getComputedStyle (e.g. "backgroundColor"). */
+  property: string
+  /** Semantic token key this property is sourced from, or null if not backed by a token. */
+  token: string | null
+  /** CSS custom property backing the token (e.g. "--color-brand-primary"), if any. */
+  cssVariable?: string | null
+  /** Expected computed style value for baseVariant. */
+  resolvedValue: string
+  /** Overrides of token/resolvedValue for specific variant axis combinations. */
+  variantOverrides?: VariantOverride[]
+}
+
+/** The full per-component CSS property manifest. */
+export interface CssPropertyManifest {
+  /** Component identifier matching its src/components/ui/{component} directory and Storybook id. */
+  component: string
+  /** Optional human-readable note about what this manifest covers. */
+  description?: string
+  /** Variant axis values each property's top-level resolvedValue was captured against. */
+  baseVariant?: VariantAxes
+  /** Tracked CSS properties for this component. */
+  properties: CssPropertyEntry[]
+}

package/src/theme/manifest/css-property-manifest.validate.ts

@@ -0,0 +1,84 @@
+import type { CssPropertyManifest, VariantAxes } from './css-property-manifest.types'
+
+/** Result of validating a candidate manifest: valid iff errors is empty. */
+export interface ManifestValidationResult {
+  valid: boolean
+  errors: string[]
+}
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value)
+
+const isVariantAxes = (value: unknown): value is VariantAxes =>
+  isPlainObject(value) &&
+  Object.keys(value).length > 0 &&
+  Object.values(value).every((axisValue) => typeof axisValue === 'string')
+
+function collectVariantOverrideErrors(override: unknown, path: string): string[] {
+  if (!isPlainObject(override)) return [`${path} must be an object`]
+  const errors: string[] = []
+  if (!isVariantAxes(override.variant))
+    errors.push(`${path}.variant must be a non-empty string-keyed object`)
+  if (
+    override.token !== undefined &&
+    override.token !== null &&
+    typeof override.token !== 'string'
+  ) {
+    errors.push(`${path}.token must be a string or null`)
+  }
+  if (typeof override.resolvedValue !== 'string' || override.resolvedValue.length === 0) {
+    errors.push(`${path}.resolvedValue must be a non-empty string`)
+  }
+  return errors
+}
+
+function collectPropertyErrors(entry: unknown, path: string): string[] {
+  if (!isPlainObject(entry)) return [`${path} must be an object`]
+  const errors: string[] = []
+  if (typeof entry.property !== 'string' || entry.property.length === 0) {
+    errors.push(`${path}.property must be a non-empty string`)
+  }
+  if (entry.token !== null && typeof entry.token !== 'string') {
+    errors.push(`${path}.token must be a string or null`)
+  }
+  if (typeof entry.resolvedValue !== 'string' || entry.resolvedValue.length === 0) {
+    errors.push(`${path}.resolvedValue must be a non-empty string`)
+  }
+  if (entry.variantOverrides !== undefined) {
+    if (!Array.isArray(entry.variantOverrides)) {
+      errors.push(`${path}.variantOverrides must be an array`)
+    } else {
+      entry.variantOverrides.forEach((override, i) =>
+        errors.push(...collectVariantOverrideErrors(override, `${path}.variantOverrides[${i}]`))
+      )
+    }
+  }
+  return errors
+}
+
+/** Structurally validates a candidate value against the CssPropertyManifest shape. */
+export function validateCssPropertyManifest(candidate: unknown): ManifestValidationResult {
+  if (!isPlainObject(candidate)) return { valid: false, errors: ['manifest must be an object'] }
+
+  const errors: string[] = []
+  if (typeof candidate.component !== 'string' || candidate.component.length === 0) {
+    errors.push('component must be a non-empty string')
+  }
+  if (candidate.baseVariant !== undefined && !isVariantAxes(candidate.baseVariant)) {
+    errors.push('baseVariant must be a non-empty string-keyed object')
+  }
+  if (!Array.isArray(candidate.properties) || candidate.properties.length === 0) {
+    errors.push('properties must be a non-empty array')
+  } else {
+    candidate.properties.forEach((entry, i) =>
+      errors.push(...collectPropertyErrors(entry, `properties[${i}]`))
+    )
+  }
+
+  return { valid: errors.length === 0, errors }
+}
+
+/** Type guard variant of validateCssPropertyManifest for use in narrowing contexts. */
+export function isCssPropertyManifest(candidate: unknown): candidate is CssPropertyManifest {
+  return validateCssPropertyManifest(candidate).valid
+}