---
version: alpha
name: Tegel Lite – Multibrand Design System
description: >
  CSS-only component library for the Tegel Design System supporting Scania and TRATON brands,
  each with full Light and Dark mode. No JavaScript required. Built on a three-layer token
  architecture: primitive → semantic → component.

colors:
  # ── Scania brand primitive colors ────────────────────────────────────────────
  scania-blue-500:     "#2058a8"
  scania-blue-600:     "#16417f"
  scania-blue-700:     "#0f3263"
  scania-blue-800:     "#041e42"
  scania-blue-400:     "#2a6ecf"
  scania-blue-300:     "#4a89f3"
  scania-blue-200:     "#87afe8"
  scania-blue-100:     "#bacde8"
  scania-blue-50:      "#d8dde5"

  scania-red-400:      "#d1001b"
  scania-red-500:      "#b20018"
  scania-red-600:      "#8a0012"
  scania-red-300:      "#ea4851"
  scania-red-50:       "#ffdfe3"

  scania-green-300:    "#009e7e"
  scania-green-500:    "#00664f"
  scania-green-50:     "#d3eee7"

  scania-yellow-500:   "#b87c14"
  scania-yellow-300:   "#f1c21b"
  scania-yellow-50:    "#f9eec3"

  scania-grey-00:      "#ffffff"
  scania-grey-50:      "#f6f7f9"
  scania-grey-100:     "#edeff3"
  scania-grey-200:     "#d1d7e0"
  scania-grey-300:     "#93a2b7"
  scania-grey-500:     "#5f728c"
  scania-grey-700:     "#3a4554"
  scania-grey-800:     "#242c37"
  scania-grey-850:     "#1c222b"
  scania-grey-900:     "#15181d"
  scania-grey-950:     "#0e1013"
  scania-grey-1000:    "#000000"

  # ── Scania semantic – light mode ──────────────────────────────────────────────
  scania-light-background-base:    "#ffffff"
  scania-light-background-layer01: "#f6f7f9"
  scania-light-text-base:          "#000000"
  scania-light-text-brand:         "#041e42"
  scania-light-primary-button:     "#16417f"

  # ── Scania semantic – dark mode ───────────────────────────────────────────────
  scania-dark-background-base:    "#0e1013"
  scania-dark-background-layer01: "#15181d"
  scania-dark-text-base:          "#ffffff"
  scania-dark-text-brand:         "#ffffff"
  scania-dark-primary-button:     "#2a6ecf"

  # ── TRATON brand primitive colors ─────────────────────────────────────────────
  traton-blue-950:     "#001d21"
  traton-blue-800:     "#004852"
  traton-blue-850:     "#003137"
  traton-blue-600:     "#008294"
  traton-blue-500:     "#2d9ead"
  traton-blue-300:     "#8ccad2"
  traton-blue-150:     "#d9edf0"
  traton-blue-50:      "#f8fcfc"

  traton-red-300:      "#d83b3a"
  traton-red-50:       "#ffe0e0"

  traton-green-300:    "#3ba63f"
  traton-green-50:     "#d1fad1"

  traton-yellow-300:   "#ffc00d"
  traton-yellow-50:    "#fff6db"

  traton-grey-50:      "#fcfbf7"
  traton-grey-100:     "#f6f3e9"
  traton-grey-200:     "#d6d4c9"
  traton-grey-950:     "#1a1a19"
  traton-grey-1000:    "#100f0f"
  traton-white:        "#ffffff"
  traton-black:        "#000000"

  # ── TRATON semantic – light mode ─────────────────────────────────────────────
  traton-light-background-base:    "#fcfbf7"
  traton-light-background-layer01: "#f6f3e9"
  traton-light-text-base:          "#000000"
  traton-light-text-brand:         "#001d21"
  traton-light-primary-button:     "#004852"

  # ── TRATON semantic – dark mode ──────────────────────────────────────────────
  traton-dark-background-base:    "#1a1a19"
  traton-dark-background-layer01: "#252423"
  traton-dark-text-base:          "#ffffff"
  traton-dark-primary-button:     "#c2bfb6"

  # ── Shared system / status colors (Scania light as baseline) ────────────────
  system-info-default:    "#2a6ecf"
  system-success-default: "#009e7e"
  system-warning-default: "#b87c14"
  system-danger-default:  "#d1001b"

typography:
  # ── Scania type scale ─────────────────────────────────────────────────────────
  scania-display-01:
    fontFamily: "Scania Sans Headline"
    fontWeight: 700
    fontSize: "216px"
    lineHeight: "183px"
    letterSpacing: "0"
    textTransform: uppercase

  scania-display-05:
    fontFamily: "Scania Sans Headline"
    fontWeight: 700
    fontSize: "56px"
    lineHeight: "56px"
    letterSpacing: "0"
    textTransform: uppercase

  scania-headline-01:
    fontFamily: "Scania Sans Headline"
    fontWeight: 700
    fontSize: "40px"
    lineHeight: "40px"
    letterSpacing: "0"
    textTransform: uppercase

  scania-headline-02:
    fontFamily: "Scania Sans"
    fontWeight: 700
    fontSize: "32px"
    lineHeight: "32px"
    letterSpacing: "-0.04em"

  scania-headline-03:
    fontFamily: "Scania Sans"
    fontWeight: 700
    fontSize: "24px"
    lineHeight: "24px"
    letterSpacing: "-0.03em"

  scania-headline-04:
    fontFamily: "Scania Sans"
    fontWeight: 700
    fontSize: "20px"
    lineHeight: "24px"
    letterSpacing: "-0.02em"

  scania-headline-05:
    fontFamily: "Scania Sans"
    fontWeight: 700
    fontSize: "16px"
    lineHeight: "24px"
    letterSpacing: "-0.02em"

  scania-body-01:
    fontFamily: "Scania Sans"
    fontWeight: 400
    fontSize: "16px"
    lineHeight: "24px"
    letterSpacing: "-0.02em"

  scania-body-02:
    fontFamily: "Scania Sans"
    fontWeight: 400
    fontSize: "14px"
    lineHeight: "20px"
    letterSpacing: "-0.01em"

  scania-system-title-01:
    fontFamily: "Scania Sans Semi Condensed"
    fontWeight: 700
    fontSize: "14px"
    lineHeight: "16px"

  scania-system-label-01:
    fontFamily: "Scania Sans Semi Condensed"
    fontWeight: 400
    fontSize: "12px"
    lineHeight: "16px"

  # ── TRATON type scale ─────────────────────────────────────────────────────────
  traton-display-01:
    fontFamily: "Traton Type Display"
    fontWeight: 500
    fontSize: "216px"
    lineHeight: "227px"
    letterSpacing: "+0.005em"
    textTransform: uppercase

  traton-headline-01:
    fontFamily: "Traton Type Display"
    fontWeight: 500
    fontSize: "40px"
    lineHeight: "42px"

  traton-headline-03:
    fontFamily: "Traton Type Display"
    fontWeight: 500
    fontSize: "24px"
    lineHeight: "30px"

  traton-headline-05:
    fontFamily: "Traton Type Text"
    fontWeight: 600
    fontSize: "16px"
    lineHeight: "22px"

  traton-body-01:
    fontFamily: "Traton Type Text"
    fontWeight: 400
    fontSize: "16px"
    lineHeight: "22px"

  traton-body-02:
    fontFamily: "Traton Type Text"
    fontWeight: 400
    fontSize: "14px"
    lineHeight: "20px"

rounded:
  # ── Shared radius primitives ──────────────────────────────────────────────────
  none:   "0px"
  narrow: "4px"
  soft:   "8px"
  rounded: "32px"
  circle: "500px"
  full:   "9999px"

  # ── Scania component surfaces ─────────────────────────────────────────────────
  scania-surface-clickable: "4px"    # buttons, interactive elements
  scania-surface-field:     "4px"    # form inputs
  scania-area-large:        "16px"   # cards, modals
  scania-area-small:        "2px"    # chips, badges

  # ── TRATON component surfaces (pillier shape language) ───────────────────────
  traton-surface-clickable: "9999px" # buttons are fully rounded (pill)
  traton-surface-field:     "2px"    # form inputs are nearly square
  traton-area-large:        "8px"    # cards, modals
  traton-area-small:        "4px"

spacing:
  # ── Layout scale (shared) ─────────────────────────────────────────────────────
  layout-8:   "8px"
  layout-16:  "16px"
  layout-24:  "24px"
  layout-32:  "32px"
  layout-48:  "48px"
  layout-64:  "64px"
  layout-72:  "72px"
  layout-96:  "96px"
  layout-128: "128px"
  layout-160: "160px"

  # ── Element scale (shared) ────────────────────────────────────────────────────
  element-2:  "2px"
  element-4:  "4px"
  element-8:  "8px"
  element-12: "12px"
  element-16: "16px"
  element-20: "20px"
  element-24: "24px"
  element-32: "32px"
  element-40: "40px"
  element-48: "48px"

  # ── Named space tokens ────────────────────────────────────────────────────────
  space-tiny:   "4px"
  space-small:  "16px"
  space-medium: "24px"
  space-large:  "48px"
  space-huge:   "80px"

components:
  button:
    height: "48px"          # md size (default)
    rounded: "{rounded.scania-surface-clickable}"
    padding: "16px"
    backgroundColor: "{colors.scania-light-primary-button}"
    textColor: "{colors.scania-grey-00}"

  button-traton:
    height: "48px"
    rounded: "{rounded.traton-surface-clickable}"
    padding: "16px"
    backgroundColor: "{colors.traton-light-primary-button}"
    textColor: "{colors.traton-white}"

  text-field:
    height: "48px"
    rounded: "{rounded.scania-surface-field}"
    padding: "12px 16px"

  card:
    rounded: "{rounded.scania-area-large}"
    backgroundColor: "{colors.scania-light-background-base}"

  badge:
    height: "20px"
    rounded: "{rounded.full}"
    padding: "0 8px"

  modal:
    rounded: "{rounded.scania-area-large}"
    backgroundColor: "{colors.scania-light-background-base}"

  chip:
    height: "32px"
    rounded: "{rounded.full}"
    padding: "0 12px"
---

# Tegel Lite — Multibrand Design System

## Overview

Tegel Lite (`@scania/tegel-lite`) is a **CSS-only, no-JavaScript component library** implementing the Tegel Design System. It is the lightweight counterpart to the full Tegel Web Components package and targets environments where a zero-JS dependency is a hard requirement — server-rendered HTML, CMS-driven pages, non-framework projects, and micro-frontends.

### Brands

The system simultaneously supports two independent commercial truck brands from the TRATON Group:

| Brand   | Parent org | Aesthetic character         | Button shape | Base background       |
|---------|------------|-----------------------------|--------------|-----------------------|
| Scania  | TRATON SE  | Compact, geometric, sharp   | 4px radius   | Pure white `#ffffff`  |
| TRATON  | TRATON SE  | Warm, organic, pill-shaped  | Pill (9999px)| Warm white `#fcfbf7`  |

Both brands support **Light** and **Dark** modes. This yields four rendering targets:

- Scania Light (default — applies when no brand or mode class is set)
- Scania Dark
- TRATON Light
- TRATON Dark

### Activation

Apply a **brand scope class** to an ancestor element, then a **mode class** to any element within it (or the same element). The mode class defaults to light in Scania when neither is set.

```html
<!-- Scania Light (default, no class required) -->
<div>…</div>

<!-- Scania Dark -->
<div class="tl-mode-dark">…</div>

<!-- TRATON Light -->
<div class="traton tl-mode-light">…</div>

<!-- TRATON Dark -->
<div class="traton tl-mode-dark">…</div>
```

### Import Order (critical)

CSS must be imported in this exact order to preserve the cascade:

```js
// 1. Brand variables (pick one)
import '@scania/tegel-lite/scania-variables.css';
// OR
import '@scania/tegel-lite/traton-variables.css';

// 2. Global semantic tokens + mode defaults
import '@scania/tegel-lite/global.css';

// 3a. All components at once
import '@scania/tegel-lite/components.css';
// 3b. OR individual components for code-splitting
import '@scania/tegel-lite/tl-button.css';
import '@scania/tegel-lite/tl-text-field.css';
// …
```

### Package

| Property   | Value                         |
|------------|-------------------------------|
| npm name   | `@scania/tegel-lite`          |
| Version    | 0.1.0 (Beta)                  |
| License    | MIT                           |
| Entry      | `dist/global.css`             |
| Exports    | 40+ named CSS exports         |
| JS deps    | None                          |
| Node req.  | ≥ 22.11.0 (build only)        |

### Architecture overview

```
Figma Tokens (source of truth)
        │
        ▼  figma-to-tokens.mjs
tokens/json/  (Style Dictionary input)
        │
        ▼  build-tokens.mjs (Style Dictionary)
tokens/scss/[brand]/primitive.scss      ← raw color/unit values
tokens/scss/[brand]/color-light.scss    ← semantic light tokens
tokens/scss/[brand]/color-dark.scss     ← semantic dark tokens
tokens/scss/[brand]/typography.scss     ← type scale
tokens/scss/component/*.scss            ← per-component tokens (all brands × modes)
        │
        ▼  compile-tegel-lite-components.js (Sass compiler)
packages/tegel-lite/dist/
  scania-variables.css
  traton-variables.css
  global.css
  components.css
  tl-*.css   (one file per component)
```

---

## Colors

### Token hierarchy

All colors flow through three tiers. A consuming stylesheet should only use semantic or component tokens — never hardcoded hex values.

```
Primitive tokens          Semantic tokens                Component tokens
─────────────────         ───────────────────────────    ─────────────────────────────
--scania-color-blue-600   --color-text-brand             --component-button-text-…-default
--scania-color-grey-00    --color-background-base        --component-button-background-…
                          --color-system-danger-default
```

### Primitive palette — Scania

Scania uses a cool blue primary hue with neutral blue-grey tones. All values live on `:root` and are never mode-aware.

**Blue (brand)**

| Token                      | Hex       | Role                           |
|----------------------------|-----------|--------------------------------|
| `--scania-color-blue-300`  | `#4a89f3` | Interactive accent, dark mode  |
| `--scania-color-blue-400`  | `#2a6ecf` | Primary button, dark mode      |
| `--scania-color-blue-500`  | `#2058a8` | Brand mid-tone                 |
| `--scania-color-blue-600`  | `#16417f` | Primary button, light mode     |
| `--scania-color-blue-700`  | `#0f3263` | Button hover, light mode       |
| `--scania-color-blue-800`  | `#041e42` | Brand text light mode          |
| `--scania-color-blue-900`  | `#001533` | Deep brand                     |

**Neutrals (blue-grey)**

| Token                      | Hex       | Role                  |
|----------------------------|-----------|-----------------------|
| `--scania-color-grey-00`   | `#ffffff` | Pure white, base bg   |
| `--scania-color-grey-50`   | `#f6f7f9` | Layer 01 bg           |
| `--scania-color-grey-100`  | `#edeff3` | Subtle surfaces       |
| `--scania-color-grey-200`  | `#d1d7e0` | Borders               |
| `--scania-color-grey-500`  | `#5f728c` | Muted text            |
| `--scania-color-grey-700`  | `#3a4554` | Dark surface bg       |
| `--scania-color-grey-800`  | `#242c37` | Dark layer 03         |
| `--scania-color-grey-850`  | `#1c222b` | Dark layer 02         |
| `--scania-color-grey-900`  | `#15181d` | Dark layer 01         |
| `--scania-color-grey-950`  | `#0e1013` | Dark base bg          |
| `--scania-color-grey-1000` | `#000000` | Pure black            |

**System / status colors (Scania)**

| State   | Default token               | Hex       |
|---------|-----------------------------|-----------|
| Info    | `--scania-color-blue-400`   | `#2a6ecf` |
| Success | `--scania-color-green-300`  | `#009e7e` |
| Warning | `--scania-color-yellow-500` | `#b87c14` |
| Danger  | `--scania-color-red-400`    | `#d1001b` |

### Primitive palette — TRATON

TRATON uses a cool teal/cyan primary inspired by industrial steel, set against warm greige neutrals. The contrast between cool primary and warm neutral is a key brand differentiator.

**Teal/Cyan (brand)**

| Token                       | Hex       | Role                              |
|-----------------------------|-----------|-----------------------------------|
| `--traton-color-blue-500`   | `#2d9ead` | Accent mid                        |
| `--traton-color-blue-600`   | `#008294` | Strong accent                     |
| `--traton-color-blue-700`   | `#006371` | Deep teal                         |
| `--traton-color-blue-800`   | `#004852` | Primary button, light mode        |
| `--traton-color-blue-850`   | `#003137` | Button hover, light mode          |
| `--traton-color-blue-950`   | `#001d21` | Brand text / icon, light mode     |
| `--traton-color-blue-150`   | `#d9edf0` | Tinted bg, discrete info          |

**Neutrals (warm greige)**

| Token                       | Hex       | Role                    |
|-----------------------------|-----------|-------------------------|
| `--traton-color-grey-50`    | `#fcfbf7` | Base background (warm)  |
| `--traton-color-grey-100`   | `#f6f3e9` | Layer 01                |
| `--traton-color-grey-150`   | `#ebe7dd` | Layer 02                |
| `--traton-color-grey-200`   | `#d6d4c9` | Borders                 |
| `--traton-color-grey-400`   | `#a6a49c` | Muted text              |
| `--traton-color-grey-950`   | `#1a1a19` | Dark base bg            |
| `--traton-color-grey-1000`  | `#100f0f` | Darkest surface         |

**System / status colors (TRATON)**

| State   | Default token               | Hex       |
|---------|-----------------------------|-----------|
| Info    | `--traton-color-blue-500`   | `#2d9ead` |
| Success | `--traton-color-green-300`  | `#3ba63f` |
| Warning | `--traton-color-yellow-300` | `#ffc00d` |
| Danger  | `--traton-color-red-300`    | `#d83b3a` |

### Semantic color tokens

Semantic tokens are mode-aware and resolve to different primitive values depending on the active `.tl-mode-light` or `.tl-mode-dark` class. They are the **only colors** components may reference directly.

#### Background tokens

| Token                          | Scania Light | Scania Dark  | TRATON Light | TRATON Dark  |
|--------------------------------|--------------|--------------|--------------|--------------|
| `--color-background-base`      | `#ffffff`    | `#0e1013`    | `#fcfbf7`    | `#1a1a19`    |
| `--color-background-layer-01`  | `#f6f7f9`    | `#15181d`    | `#f6f3e9`    | `#252423`    |
| `--color-background-layer-02`  | `#ffffff`    | `#1c222b`    | `#fcfbf7`    | `#333230`    |
| `--color-background-layer-03`  | `#f6f7f9`    | `#242c37`    | `#f6f3e9`    | `#454441`    |
| `--color-background-overlay`   | `#00000066`  | `#00000099`  | `#00000066`  | `#00000099`  |

The layering model uses **base → layer-01 → layer-02 → layer-03** in ascending elevation order. Content placed higher in the stack uses lighter (light mode) or darker (dark mode) backgrounds to create perceived depth without shadows.

#### Text tokens

| Token                    | Light mode meaning          | Dark mode meaning        |
|--------------------------|-----------------------------|--------------------------|
| `--color-text-base`      | `#000` (pure black)         | `#fff` (pure white)      |
| `--color-text-brand`     | brand blue / teal           | white (Scania) / teal    |
| `--color-text-defined`   | ~73% opacity black/white    | high-contrast on dark    |
| `--color-text-soft`      | ~64% opacity                | medium contrast          |
| `--color-text-subtle`    | ~50% opacity                | lower contrast           |
| `--color-text-disabled`  | ~35% opacity                | very low contrast        |
| `--color-text-discrete`  | ~17% opacity                | barely visible           |

Opacity-based transparent tokens ensure text remains legible on any background color without hardcoding per-surface values.

#### Border tokens

Five strengths, plus `none`:

```
--color-border-strong   (highest contrast — focus rings, active states)
--color-border-defined  (visible borders — table cells, form fields)
--color-border-soft     (secondary borders — card outlines)
--color-border-subtle   (tertiary / hover)
--color-border-discrete (ghost / structural only)
--color-border-none     (transparent)
```

#### System / status tokens

Each semantic state has five levels:

```
--color-system-{info|success|warning|danger}-strong    (text on white)
--color-system-{…}-defined                             (filled badges, alerts)
--color-system-{…}-default                             (default icon/border)
--color-system-{…}-subtle                              (icon on tinted bg)
--color-system-{…}-discrete                            (tinted background)
```

### Scrollbar brand colors

The system also themes native browser scrollbars per brand and mode:

| Combination      | Scrollbar track              |
|------------------|------------------------------|
| Scania light     | `#303c612b` (blue-transparent)|
| Scania dark      | `#a4c7f5` (light blue)       |
| TRATON light     | `#1a1a1926` (dark-transparent)|
| TRATON dark      | `#d9edf054` (cyan-transparent)|

---

## Typography

### Font families

#### Scania

Scania uses a three-family system, all proprietary:

| Variable                         | Family name                   | Usage                              |
|----------------------------------|-------------------------------|------------------------------------|
| `--scania-font-family-display`   | Scania Sans Headline          | Display (D01–D05), Headline 01     |
| `--scania-font-family-default`   | Scania Sans                   | Headlines 02–06, body, paragraph   |
| `--scania-font-family-semi-condensed` | Scania Sans Semi Condensed | System UI labels, compact UI    |

Weights used: `400` (regular), `700` (bold).

#### TRATON

TRATON uses a two-family system:

| Variable                         | Family name           | Usage                                    |
|----------------------------------|-----------------------|------------------------------------------|
| `--traton-font-family-display`   | Traton Type Display   | Display (D01–D05), Headlines 01–04, para |
| `--traton-font-family-default`   | Traton Type Text      | Headlines 05–06, body, system UI         |

Weights used: `400` (regular), `500` (medium), `600` (semi-bold).

### Type scale

Values below are in CSS pixels. Token units in SCSS are unitless integers (e.g., `24`) and are converted to `px` / `rem` during compilation.

#### Display roles (marketing, large-format hero)

| Role         | Scania size | Scania LH | TRATON size | TRATON LH | Transform  |
|--------------|-------------|-----------|-------------|-----------|------------|
| display-01   | 216px       | 183px     | 216px       | 227px     | uppercase  |
| display-02   | 156px       | 148px     | 156px       | 164px     | uppercase  |
| display-03   | 112px       | 106px     | 112px       | 118px     | uppercase  |
| display-04   | 80px        | 80px      | 80px        | 84px      | uppercase  |
| display-05   | 56px        | 56px      | 56px        | 59px      | uppercase  |

Scania display uses `letter-spacing: 0`; TRATON display adds positive tracking (~0.5% of size).

#### Headline roles (page/section headings in product UI)

| Role         | Scania size | Scania LH | TRATON size | TRATON LH | Notes                         |
|--------------|-------------|-----------|-------------|-----------|-------------------------------|
| headline-01  | 40px        | 40px      | 40px        | 42px      | Scania: uppercase, Display    |
| headline-02  | 32px        | 32px      | 32px        | 40px      | Scania: −1.28px tracking      |
| headline-03  | 24px        | 24px      | 24px        | 30px      | Scania: −0.72px tracking      |
| headline-04  | 20px        | 24px      | 20px        | 25px      | Scania: −0.4px tracking       |
| headline-05  | 16px        | 24px      | 16px        | 22px      | TRATON uses default family    |
| headline-06  | 14px        | 16px      | 14px        | 20px      | Scania: uppercase; TRATON: not|

Scania applies negative letter-spacing at headline sizes to improve optical density. TRATON uses zero tracking throughout.

#### Body / paragraph roles

| Role         | Scania size | Scania LH | TRATON size | TRATON LH |
|--------------|-------------|-----------|-------------|-----------|
| paragraph-01 | 24px        | 32px      | 24px        | 30px      |
| paragraph-02 | 20px        | 24px      | 20px        | 25px      |
| body-01      | 16px        | 24px      | 16px        | 22px      |
| body-02      | 14px        | 20px      | 14px        | 20px      |

#### System UI roles (compact, component-internal)

Used inside components such as badges, chips, form labels, and table cells.

| Role                | Family (Scania)        | Family (TRATON)       | Size  | LH   |
|---------------------|------------------------|-----------------------|-------|------|
| system-title-01     | Semi Condensed, 700    | Default, 600          | 14px  | 16px |
| system-title-02     | Default, 700           | Default, 600          | 10px  | 16px |
| system-label-01     | Semi Condensed, 400    | Default, 500          | 12px  | 16px |
| system-label-02     | Semi Condensed, 400    | Default, 500          | 10px  | 8px  |
| system-body-01      | Semi Condensed, 400    | Default, 400          | 14px  | 16px |
| system-body-02      | Semi Condensed, 400    | Default, 400          | 14px  | 20px |

### Usage in CSS

All typography values are consumed via mixin-applied CSS custom properties. Component SCSS files import from the `typography/mixins/type-styles` module:

```scss
@use '../../../../../../typography/mixins/type-styles' as *;

.tl-button {
  @include detail-02; // applies system-label typography
}
```

---

## Layout

### Spacing system

Two orthogonal scales handle all spacing concerns:

#### Layout scale — page-level rhythm

Used for section padding, column gutters, and container margins. Follows an 8px base grid.

| Token                          | Value  |
|--------------------------------|--------|
| `--tds-spacing-layout-8`       | 8px    |
| `--tds-spacing-layout-16`      | 16px   |
| `--tds-spacing-layout-24`      | 24px   |
| `--tds-spacing-layout-32`      | 32px   |
| `--tds-spacing-layout-48`      | 48px   |
| `--tds-spacing-layout-64`      | 64px   |
| `--tds-spacing-layout-72`      | 72px   |
| `--tds-spacing-layout-96`      | 96px   |
| `--tds-spacing-layout-128`     | 128px  |
| `--tds-spacing-layout-160`     | 160px  |

#### Element scale — component-level spacing

Used for internal padding, gaps, and icon spacing within components.

| Token                          | Value  |
|--------------------------------|--------|
| `--tds-spacing-element-2`      | 2px    |
| `--tds-spacing-element-4`      | 4px    |
| `--tds-spacing-element-8`      | 8px    |
| `--tds-spacing-element-12`     | 12px   |
| `--tds-spacing-element-16`     | 16px   |
| `--tds-spacing-element-20`     | 20px   |
| `--tds-spacing-element-24`     | 24px   |
| `--tds-spacing-element-32`     | 32px   |
| `--tds-spacing-element-40`     | 40px   |
| `--tds-spacing-element-48`     | 48px   |

#### Named semantic space tokens

Both brands share the same semantic aliases but may resolve to different values in future:

| Token              | Value |
|--------------------|-------|
| `--space-tiny`     | 4px   |
| `--space-small`    | 16px  |
| `--space-medium`   | 24px  |
| `--space-large`    | 48px  |
| `--space-huge`     | 80px  |

### Unit primitives

Brand unit primitives are set on `:root` and used by component tokens to derive pixel values. Both brands share the same unit scale (0, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120, 9999). The key difference is that TRATON's `--traton-unit-56` resolves button `border-radius` to the pill shape (56px on a 48px tall button creates a fully rounded pill), while Scania's `--scania-unit-4` keeps a 4px radius.

### Component size scale

Interactive components such as buttons, inputs, and dropdowns share a unified height scale:

| Size modifier | Height | Primary padding            |
|---------------|--------|----------------------------|
| `--xs`        | 24px   | 4px top/bottom, 8px sides  |
| `--sm`        | 40px   | 12px all sides             |
| `--md`        | 48px   | 16px all sides (default)   |
| `--lg`        | 56px   | 20px all sides             |

### Background layering model

Depth is communicated entirely through background-color steps rather than drop shadows. The model assumes content floats above a base surface:

```
z-index / elevation   Background token              Scania Light   TRATON Light
─────────────────────────────────────────────────────────────────────────────────
Base canvas           --color-background-base       #ffffff        #fcfbf7
Layer 01 (sidebars)   --color-background-layer-01   #f6f7f9        #f6f3e9
Layer 02 (dropdowns)  --color-background-layer-02   #ffffff        #fcfbf7
Layer 03 (tooltips)   --color-background-layer-03   #f6f7f9        #f6f3e9
Overlay (modals scrim)--color-background-overlay    #00000066      #00000066
```

In dark mode, the steps invert: higher layers use darker backgrounds.

---

## Elevation & Depth

### Philosophy

Tegel Lite uses **background color steps** as the primary depth signal, not box shadows. This approach:
- Works natively without JavaScript
- Avoids rendering cost of composited shadow layers
- Remains accessible in high-contrast and forced-colors modes

### Shadow system (Scania transparent tokens)

A set of transparent shadow primitives exists for drop shadows and elevation overlays when needed:

| Token                              | Value         | Use                          |
|------------------------------------|---------------|------------------------------|
| `--scania-color-transparent-shadow-10`  | `#00000003` | Faint ambient shadow       |
| `--scania-color-transparent-shadow-100`| `#0000001a` | Subtle card shadow         |
| `--scania-color-transparent-shadow-150`| `#00000026` | Medium card shadow         |
| `--scania-color-transparent-shadow-200`| `#0003`     | Popover shadow             |
| `--scania-color-transparent-shadow-250`| `#00000040` | Modal shadow               |
| `--scania-color-transparent-shadow-350`| `#00000059` | Deep overlay shadow        |

### Scrim / overlay

| Token                               | Light mode | Dark mode  |
|-------------------------------------|------------|------------|
| `--scania-color-transparent-scrim-light` | `#0006` | —         |
| `--scania-color-transparent-scrim-dark`  | — | `#0009`   |
| `--traton-color-transparent-scrim-light` | `#0006` | —        |
| `--traton-color-transparent-scrim-dark`  | — | `#0009`  |

---

## Shapes

### Radius philosophy

Shape is one of the clearest brand differentiators between Scania and TRATON:

- **Scania** maintains geometric, angular precision. Clickable elements use a tight 4px radius. The language feels engineered and technical.
- **TRATON** uses fully rounded (pill) clickable elements and gentler area radii. The language feels approachable and modern.

### Radius tokens

Both brands share the same primitive radius tokens on `:root`:

| Token          | Value   |
|----------------|---------|
| `--radius-none`| `0`     |
| `--radius-full`| `9999px`|

Brand-specific radius tokens are scoped to `.scania` and `.traton` classes:

#### Scania radius

| Token                        | Value  | Used on                          |
|------------------------------|--------|----------------------------------|
| `--radius-narrow`            | 4px    | Chips, tags, small elements      |
| `--radius-soft`              | 8px    | Mid-size decorative elements     |
| `--radius-rounded`           | 32px   | Pills, toggles                   |
| `--radius-circle`            | 500px  | Avatar/icon circles              |
| `--radius-surface-clickable` | 4px    | **Buttons**, tabs, interactive   |
| `--radius-surface-field`     | 4px    | Text fields, selects, checkboxes |
| `--radius-area-large`        | 16px   | Cards, modals, panels            |
| `--radius-area-small`        | 2px    | Small UI areas                   |

#### TRATON radius

| Token                        | Value   | Used on                                  |
|------------------------------|---------|------------------------------------------|
| `--radius-narrow`            | 4px     | Chips, tags, small elements              |
| `--radius-soft`              | 8px     | Mid-size decorative elements             |
| `--radius-rounded`           | 32px    | Decorative pills                         |
| `--radius-circle`            | 500px   | Avatar/icon circles                      |
| `--radius-surface-clickable` | 9999px  | **Buttons** — full pill shape            |
| `--radius-surface-field`     | 2px     | Text fields — nearly square              |
| `--radius-area-large`        | 8px     | Cards, modals (softer than Scania)       |
| `--radius-area-small`        | 4px     | Small UI areas                           |

### Focus ring shape

Focus rings follow the surface-clickable radius of each brand:

| Brand  | `--component-button-focus-ring-radius-default` | Result          |
|--------|------------------------------------------------|-----------------|
| Scania | `--component--focus-ring-radius-extra-large`   | Tight 4px ring  |
| TRATON | `--component--focus-ring-radius-full`          | Pill-shaped ring|

Focus ring width: **2px** for Scania, **4px** for TRATON.

---

## Components

Tegel Lite ships **34 CSS components**. All follow the BEM naming convention with a `tl-` prefix.

### Component inventory

| Category     | Components                                                        |
|--------------|-------------------------------------------------------------------|
| Layout       | `tl-header`, `tl-footer`, `tl-side-menu`, `tl-breadcrumbs`       |
| Forms        | `tl-text-field`, `tl-textarea`, `tl-checkbox`, `tl-radio-button`, `tl-toggle`, `tl-dropdown`, `tl-datetime`, `tl-slider` |
| Navigation   | `tl-folder-tabs` / `tl-folder-tab`, `tl-inline-tabs` / `tl-inline-tab`, `tl-navigation-tabs` / `tl-navigation-tab` |
| Buttons      | `tl-button`, `tl-link`, `tl-chip`                                 |
| Display      | `tl-card`, `tl-table`, `tl-accordion`, `tl-stepper` / `tl-step`, `tl-badge`, `tl-divider`, `tl-block`, `tl-icon` |
| Overlays     | `tl-modal`, `tl-toast`, `tl-banner`, `tl-message`, `tl-tooltip`, `tl-popover-menu`, `tl-popover-canvas`, `tl-spinner` |

### Button (`tl-button`)

The button component is the canonical example of the multi-brand token system.

#### Variants

| Class modifier   | Description                                        |
|------------------|----------------------------------------------------|
| `--primary`      | Filled, highest-emphasis action                    |
| `--secondary`    | Outlined, medium-emphasis action                   |
| `--ghost`        | Borderless (shows border on hover/active)          |
| `--danger`       | Destructive action — red/danger palette            |

#### Sizes

| Class modifier | Height | Padding (v / h)  |
|----------------|--------|------------------|
| `--xs`         | 24px   | 4px / 8px        |
| `--sm`         | 40px   | 12px / 12px      |
| `--md`         | 48px   | 16px / 16px      |
| `--lg`         | 56px   | 20px / 20px      |

#### Primary button tokens across all four targets

| Token                                                    | Scania L  | Scania D  | TRATON L  | TRATON D  |
|----------------------------------------------------------|-----------|-----------|-----------|-----------|
| `--component-button-background-standard-primary-default` | `#16417f` | `#2a6ecf` | `#004852` | `#c2bfb6` |
| `--component-button-background-standard-primary-hover`   | `#0f3263` | `#2058a8` | `#003137` | `#d6d4c9` |
| `--component-button-background-standard-primary-active`  | `#041e42` | `#16417f` | `#002429` | `#a6a49c` |
| `--component-button-text-standard-primary-default`       | white     | white     | white     | black     |
| `--component-button-border-radius-default`               | 4px       | 4px       | 56px pill | 56px pill |

Note: TRATON dark mode primary button uses a warm grey background with black text — a deliberate contrast inversion unique to the brand.

#### HTML usage

```html
<!-- Scania Light primary button (default) -->
<button class="tl-button tl-button--primary tl-button--md">
  Save changes
</button>

<!-- With icon -->
<button class="tl-button tl-button--primary tl-button--md tl-button--icon">
  Save changes
  <span class="tl-icon">save</span>
</button>

<!-- Full width -->
<button class="tl-button tl-button--primary tl-button--md tl-button--full-width">
  Submit
</button>

<!-- Disabled -->
<button class="tl-button tl-button--primary tl-button--md" disabled>
  Unavailable
</button>

<!-- TRATON Light context -->
<div class="traton tl-mode-light">
  <button class="tl-button tl-button--primary tl-button--md">
    Confirm
  </button>
</div>
```

### Text field (`tl-text-field`)

Standard single-line text input. Brand and mode classes on an ancestor element switch the field appearance automatically.

```html
<div class="tl-text-field">
  <label class="tl-text-field__label" for="name">Name</label>
  <input class="tl-text-field__input" id="name" type="text" placeholder="Enter name" />
  <span class="tl-text-field__helper">Helper text</span>
</div>
```

### Card (`tl-card`)

Container component with brand-specific radius and background.

| Property      | Scania     | TRATON     |
|---------------|------------|------------|
| border-radius | 16px       | 8px        |
| background    | layer-01   | layer-01   |

### Badge (`tl-badge`)

Compact status indicator.

| State   | Class modifier    |
|---------|-------------------|
| Info    | `--info`          |
| Success | `--success`       |
| Warning | `--warning`       |
| Danger  | `--danger`        |

### Modal (`tl-modal`)

Full-screen overlay with brand-scoped radius. The overlay uses `--color-background-overlay` (semi-opaque black scrim).

### Accordion (`tl-accordion`)

Expandable content panel. Variant `--primary` applies the brand primary colour treatment to the header.

```html
<div class="tl-accordion tl-accordion--primary">
  <button class="tl-accordion__header">Section title</button>
  <div class="tl-accordion__body">Content…</div>
</div>
```

### Component CSS custom property pattern

Every component defines a layer of **local CSS custom properties** that map to component-level semantic tokens. This three-step indirection allows targeted overrides without touching the token layer:

```css
/* Tier 1: Component token (auto-generated, brand × mode aware) */
:root { --component-button-background-standard-primary-default: #16417f; }

/* Tier 2: Component local variable (in _tl-button-vars.scss) */
.tl-button {
  --button-primary-background: var(--component-button-background-standard-primary-default);
}

/* Tier 3: Usage in component styles */
.tl-button--primary { background-color: var(--button-primary-background); }
```

To override a single component in isolation without touching the token cascade:

```css
/* Override only this one instance */
.my-special-button {
  --button-primary-background: #ff6600;
}
```

---

## Do's and Don'ts

### Brand activation

**Do** wrap an entire page section or app root in a brand class so all descendant components inherit correctly:

```html
<!-- Correct: brand wraps the entire application -->
<body class="traton tl-mode-light">
  <header class="tl-header">…</header>
  <main>…</main>
</body>
```

**Don't** mix brand classes on sibling components at the same DOM level — mode classes use the CSS cascade and a brand class on a sibling cannot influence a peer:

```html
<!-- Wrong: brand class on sibling cannot reach the other sibling -->
<div class="traton">…</div>
<div class="tl-button tl-button--primary">…</div>  <!-- still Scania! -->
```

### Import order

**Do** always import brand variables before global tokens and components. The cascade depends on source order:

```js
// Correct order
import '@scania/tegel-lite/scania-variables.css';
import '@scania/tegel-lite/global.css';
import '@scania/tegel-lite/components.css';
```

**Don't** import brand variables after global tokens — the semantic color overrides will not apply:

```js
// Wrong: global.css references tokens that haven't been defined yet
import '@scania/tegel-lite/global.css';
import '@scania/tegel-lite/scania-variables.css'; // too late
```

### Token usage

**Do** use semantic or component tokens for any brand-aware colour in application-level CSS:

```css
/* Correct: uses semantic token */
.my-panel { background: var(--color-background-layer-01); }
```

**Don't** hardcode hex values from the primitive palette in application code — they will not respond to mode or brand changes:

```css
/* Wrong: hardcoded hex, breaks in dark mode and TRATON */
.my-panel { background: #f6f7f9; }
```

### Typography

**Do** use the system type roles for all UI text. Apply them via mixin in SCSS or by using the CSS token variables directly:

```css
/* Correct: uses system token */
.my-label {
  font-size: calc(var(--type-system-label-01-font-size) * 1px);
  line-height: calc(var(--type-system-label-01-line-height) * 1px);
  font-family: var(--type-system-label-01-font-family);
  font-weight: var(--type-system-label-01-font-weight);
}
```

**Don't** use display typography roles (D01–D05) in compact UI contexts — they are designed for large-format marketing surfaces only.

### Component sizing

**Do** use the component size modifiers (`--xs`, `--sm`, `--md`, `--lg`) to ensure buttons, inputs, and interactive elements align to the 8px grid:

```html
<button class="tl-button tl-button--primary tl-button--md">Action</button>
<input  class="tl-text-field__input tl-text-field--md" />
```

**Don't** override component height with arbitrary pixel values. This breaks visual rhythm and grid alignment.

### Disabled state

**Do** use the native `disabled` HTML attribute on form elements — the CSS uses `[disabled]` and `:disabled` selectors:

```html
<button class="tl-button tl-button--primary" disabled>Submit</button>
```

**Don't** use a custom class like `.is-disabled` — it will not apply the 25% opacity treatment or the `not-allowed` cursor.

### Focus visibility

**Do** rely on the built-in `:focus-visible` styles. They are implemented in all interactive components and meet WCAG 2.4.11 Focus Appearance requirements. Never suppress focus styles with `outline: none` globally.

### Dark mode switching

**Do** swap only the `.tl-mode-light` / `.tl-mode-dark` class to toggle between modes at runtime — all component colours update automatically through the CSS custom property cascade:

```js
// Toggle dark mode
document.body.classList.toggle('tl-mode-dark');
document.body.classList.toggle('tl-mode-light');
```

**Don't** change brand variables in JavaScript at runtime — brand variables are set at build time and are not designed for hot-swapping.

### Custom token overrides

**Do** override at the local variable tier (component-scoped custom property) to avoid polluting the global token namespace:

```css
/* Correct: scoped to a specific section */
.checkout-flow .tl-button {
  --button-primary-background: var(--color-system-success-defined);
}
```

**Don't** re-define semantic tokens such as `--color-background-base` inline on arbitrary elements unless you intentionally want all descendant components to see a different base colour.

---

## Motion

The motion system is brand-neutral and applies to both Scania and TRATON. All variables are set on `:root`.

### Duration

| Token                             | Value  | Use                                      |
|-----------------------------------|--------|------------------------------------------|
| `--tds-motion-duration-instant`   | 0ms    | No animation (reduced-motion fallback)   |
| `--tds-motion-duration-fast-01`   | 100ms  | Micro-interactions (checkbox check)      |
| `--tds-motion-duration-fast-02`   | 150ms  | Icon transitions, zoom in/out            |
| `--tds-motion-duration-moderate-01` | 200ms | Standard UI transitions (tooltip show) |
| `--tds-motion-duration-moderate-02` | 300ms | Dropdowns, accordion                   |
| `--tds-motion-duration-slow-01`   | 400ms  | Modal entrance                           |
| `--tds-motion-duration-slow-02`   | 500ms  | Slide transitions, fade in/out           |

### Easing

| Token                         | Curve                        | Use                              |
|-------------------------------|------------------------------|----------------------------------|
| `--tds-motion-easing-scania`  | `cubic-bezier(0.4, 0, 0, 1)` | Default brand easing             |
| `--tds-motion-easing-enter`   | `cubic-bezier(0.1, 0.9, 0.2, 1)` | Elements entering the screen|
| `--tds-motion-easing-exit`    | `cubic-bezier(0.7, 0, 1, 0.5)` | Elements leaving the screen   |
| `--tds-motion-easing-easy`    | `cubic-bezier(0.33, 0, 0.67, 1)` | General smooth animation    |
| `--tds-motion-easing-linear`  | `cubic-bezier(0, 0, 1, 1)`   | Looping animations (rotate)      |
| `--tds-motion-ease-in-out`    | `cubic-bezier(0.4, 0, 0.2, 1)` | Combined entrance/exit          |

### Composite animation tokens

Pre-composed transitions for common patterns:

| Token                        | Pattern                         |
|------------------------------|---------------------------------|
| `--tds-motion-fade-in`       | Fade in over 500ms, enter easing|
| `--tds-motion-fade-out`      | Fade out over 200ms, exit easing|
| `--tds-motion-zoom-in`       | Zoom + fade in, 150ms           |
| `--tds-motion-zoom-out`      | Zoom + fade out, 150ms          |
| `--tds-motion-slide-enter`   | Fade + slide up, 500ms          |
| `--tds-motion-slide-exit`    | Fade + slide down, 500ms        |
| `--tds-motion-elevate-enter` | Fade + scale + slide, 500ms     |
| `--tds-motion-collapse-in`   | Height collapse in, 500ms       |
| `--tds-motion-collapse-out`  | Height collapse out, 500ms      |
| `--tds-motion-blink`         | Infinite blink (loading)        |
| `--tds-motion-pulse`         | Infinite pulse (loading)        |
| `--tds-motion-shake`         | Shake (validation error)        |

Always pair with `@media (prefers-reduced-motion: reduce)` and set `--tds-motion-duration-*` to `0ms` for users who have requested reduced motion.