Skip to content

Theming v2: design tokens via CSS custom properties + JSON schema for theme files #73

@PAMulligan

Description

@PAMulligan

Summary

Upgrade the existing accent-color override to a full design-token system: a JSON theme file (validated against a JSON schema) that drives every color, radius, shadow, and font in the widget via CSS custom properties.

Motivation

Clients want to match their brand precisely, not just pick an accent. A schema-validated theme file also enables the playground site to act as a visual theme editor.

Acceptance Criteria

  • All visual decisions expressed as CSS custom properties (--cl-color-accent, --cl-color-surface, --cl-radius-md, --cl-shadow-elevated, etc.)
  • JSON schema published at https://claudius.dev/schema/theme.v1.json
  • theme: ClaudiusTheme | string prop accepts either an object or a URL to a theme JSON file
  • Built-in themes: default, minimal, playful, corporate
  • Playground site gains a theme editor that exports the JSON file
  • Documented migration path from the v1 accentColor-only API

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestwidgetChat widget UI and embed functionality

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    Todo

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions