@wasd/design-system-theme

Framework-only theme authoring utilities for WASD design-system packages.

This package does not know about foundation tokens, buttons, or any other component. It owns the generic pieces:

• defineTheme / createTheme for declaring complete theme objects.
• mergeTheme / extendTheme for creating a theme from another theme.
• defineThemeModes for light/dark mode maps.
• DeepThemePartial for typed overrides.
• defineTokens, WasdThemeFromTokens, and CSS variable accessor helpers.
• Generic vanilla-extract helpers such as createThemeContract and createThemeModeStyles.
• Color and palette utilities.

Token structure belongs to the package that owns the tokens. A theme that styles foundation tokens imports @wasd/design-system-foundation; a theme that styles buttons imports @wasd/design-system-button/tokens. Experimental components can follow the same pattern by exporting their token type and contract from their own package.

import { buttonState, buttonTheme, buttonVariant, type WasdButtonTheme } from "@wasd/design-system-button/tokens";
import { foundationTheme, foundationVar, type WasdFoundationTheme } from "@wasd/design-system-foundation";
import { defineTheme, mergeTheme, type DeepThemePartial } from "@wasd/design-system-theme";

interface MyTheme {
  readonly foundation: WasdFoundationTheme;
  readonly button: WasdButtonTheme;
}

const foundation = mergeTheme(
  {
    color: {
      accent: {
        primary: {
          base: "#ff4aa2",
          strong: "#cc1f88",
          soft: "#ffd6ef",
          contrast: "#ffffff"
        }
      }
    }
  } satisfies DeepThemePartial<WasdFoundationTheme>,
  foundationTheme
);

const button = mergeTheme(
  {
    primary: buttonVariant({
      base: buttonState(foundationVar.color.accent.primary.base(), "#ffffff", "transparent"),
      hover: buttonState(foundationVar.color.accent.primary.strong(), "#ffffff", "transparent"),
      disabled: buttonState("transparent", foundationVar.color.text.subtle(), "transparent")
    })
  } satisfies DeepThemePartial<WasdButtonTheme>,
  buttonTheme
);

export const theme = defineTheme({
  foundation,
  button
} satisfies MyTheme);

To extend another theme, use that theme as the base:

import { extendTheme } from "@wasd/design-system-theme";
import { frankfurtTheme } from "@wasd/design-system-theme-frankfurt";

export const frankfurtNeoTheme = extendTheme(
  {
    foundation: {
      color: {
        accent: {
          primary: "#ff4aa2"
        }
      }
    }
  },
  frankfurtTheme
);