@dhcw/sr-tokens

Design tokens for the DHCW Single Record Design System.

Transforms the canonical JSON token source (/foundations/tokens/) into consumable formats for all supported frameworks.

Note: the generated build/ directory is committed to the repo. The source of truth is still /foundations/tokens/ — build/ is the compiled output. It is tracked (rather than gitignored) so the outputs are visible without running a build, consumers using the workspace get the files immediately, and the Storybook/Pages deploy is reproducible. Re-run npm run build:tokens from the repo root after any change to the source tokens, then commit the regenerated build/.

Outputs

| File | Format | Target | |---|---|---| | build/css/tokens.css | CSS custom properties (:root) | HTML/CSS, Blazor, React, .NET 4.8 legacy | | build/css/tokens-dark.css | CSS custom properties ([data-theme="dark"]) | Dark mode — all web targets | | build/css/typography.css | Responsive .sr-type-* utility classes (mobile-first; desktop scale at ≥1024px) | HTML/CSS, Blazor, React — type scale (composites can't be single CSS vars). See DDR-011 | | build/scss/_tokens.scss | SCSS variables | Build-time consumption where Sass is used | | build/scss/_tokens-dark.scss | SCSS variables (dark) | Build-time dark mode | | build/xaml/Tokens.xaml | XAML ResourceDictionary | .NET MAUI | | build/xaml/Tokens.Dark.xaml | XAML ResourceDictionary (dark) | .NET MAUI dark mode | | build/json/tokens-flat.json | Flat key→value JSON | Tooling, CI, linting |

Usage

Build

cd packages/tokens
npm install
npm run build

Consume in HTML / CSS / Blazor / .NET 4.8

Copy or link build/css/tokens.css into your project:

<link rel="stylesheet" href="tokens.css">

Then reference tokens as CSS custom properties:

.button-primary {
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
}

For dark mode, include tokens-dark.css and toggle data-theme="dark" on the root element.

Consume in .NET MAUI

Add build/xaml/Tokens.xaml to your ResourceDictionary:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Tokens.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Then reference tokens:

<Button BackgroundColor="{StaticResource SrColorInteractivePrimary}"
        TextColor="{StaticResource SrColorTextInverse}" />

Consume in SCSS

@use 'path/to/tokens' as sr;

.button-primary {
  background-color: sr.$sr-color-interactive-primary;
}

Token architecture

Global (Tier 1)          → Semantic (Tier 2)           → Component (Tier 3)
/primitives/color.json      /semantic/color.json           (future — per-component)
/primitives/spacing.json    /semantic/spacing.json
/primitives/typography.json /semantic/typography.json

Components reference semantic tokens only. Semantic tokens resolve to primitives. This allows theme switching (light/dark) by swapping the semantic layer.