Foundations · OODS Foundry

Themes

Each brand has light, dark and high contrast themes. In high contrast, every surface, text, border and focus colour is a system colour, such as Canvas or CanvasText.

How a token gets its value

Components read role tokens, which name what a value is for. A role such as --sys-surface-canvas points at a theme token, and each brand and theme sets it. From @oods/tokens/css:

:root {
  --sys-surface-canvas: var(--theme-surface-canvas);
}
[data-brand='A'][data-theme='base'],
[data-brand='A'][data-theme='light'] {
  --theme-surface-canvas: oklch(1 0 286);
}

Reference tokens, such as --ref-border-radius-md, hold the palette and the scales. Component tokens, such as --cmp-badge-background, set values for particular components.

Browse every token

Token outputs

The same tokens build to CSS, TypeScript, Tailwind, Swift and Kotlin. Swift and Kotlin carry one default brand and theme. Each file ships in @oods/tokens; these are its first lines after the header comment.

CSS

dist/css/tokens.css

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

TypeScript

dist/ts/tokens.ts

export const tokens = {
  "viz": {
    "mark": {
      "single": {
        "key": "{viz.mark.single}",
        "$type": "color",
        "$value": "oklch(0.543785 0.191021 267)",
        "$description": "viz.mark.single; generated from the brand recipe by @oods/tokens recipe.mjs.",

Tailwind

dist/tailwind/tokens.json

{
  "$schema": "https://oods-foundry.com/schemas/tailwind-tokens.v1.json",
  "meta": {
    "generatedAt": "1970-01-01T00:00:00.000Z",
    "tool": "style-dictionary",
    "version": "5.5.5",
    "platform": "tailwind"
  },

Swift

dist/ios-swift/OodsTokens.swift

import SwiftUI

public class OodsTokens {
    public static let borderPanelDefaultColor = UIColor(red: 0.898, green: 0.898, blue: 0.898, alpha: 1) /** Default border for cards and primary panels. */
    public static let borderPanelDefaultRadius = CGFloat(12) /** Default border for cards and primary panels. */
    public static let borderPanelDefaultStyle = "solid" /** Default border for cards and primary panels. */
    public static let borderPanelDefaultWidth = CGFloat(1) /** Default border for cards and primary panels. */
    public static let borderStatusCriticalColor = UIColor(red: 0.957, green: 0.663, blue: 0.667, alpha: 1) /** Critical status banner border with rounded corners. */

Kotlin

dist/compose/OodsTokens.kt

package com.oods.tokens

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.*

object OodsTokens {
  val borderPanelDefaultColor = Color(0xFFE5E5E5)
  val borderPanelDefaultRadius = 12.dp