# Foundations

Every colour, size and space in OODS Foundry 0.10.1 comes from a token. A brand sets the tokens for light, dark and high contrast.

Generated from @oods/foundry 0.10.1

## 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](https://oods-foundry.com/foundations/tokens)

## 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
```