Skip to content

Feature: add CSS custom properties export (--format css-vars) for native CSS consumers #15

Description

@dl-alexandre

Add a CLI export target for CSS variables, for example:

npx @google/design.md export --format css-vars DESIGN.md > design.tokens.css

Expected output

Generate a :root block with stable, semantic custom properties derived from tokens, e.g.:

:root {
  --color-primary: #1A1C1E;
  --color-secondary: #6C7278;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --rounded-sm: 4px;
  --rounded-md: 8px;
}

Optionally support:

  • --selector :root
  • --prefix ds
  • dark-theme/media-query variants later if the spec grows there

Why this helps

  • makes DESIGN.md more useful outside Tailwind ecosystems
  • gives coding agents a direct artifact they can apply in native CSS codebases
  • improves adoption for frameworks that want CSS variables as the implementation boundary
  • complements DTCG export without requiring downstream token tooling

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions