Skip to content

Commit ad23ffc

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
docs: synchroniseer documentatie voor motion tokens (v5.8.0)
- changelog: v5.8.0 entry toegevoegd (motion tokens, TOC navigatie, preview kleuren) - docs/02-design-tokens-reference.md: Motion sectie toegevoegd met duration & easing tabellen - docs/05-storybook-configuration.md: TokenTable previewType waarden gedocumenteerd, TocLink component gedocumenteerd Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 1ffc8d9 commit ad23ffc

File tree

6 files changed

+142
-5
lines changed

6 files changed

+142
-5
lines changed

‎docs/02-design-tokens-reference.md‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Design Tokens Reference
22

3-
**Last Updated:** March 5, 2026
3+
**Last Updated:** March 15, 2026
44

55
Complete reference for all design tokens in the Design System Starter Kit.
66

@@ -14,6 +14,7 @@ Complete reference for all design tokens in the Design System Starter Kit.
1414
4. [Colors](#colors)
1515
5. [Borders](#borders)
1616
6. [Focus States](#focus-states)
17+
7. [Motion](#motion)
1718

1819
---
1920

@@ -308,6 +309,50 @@ Focus indicators use a dual-outline technique: a primary `outline` for the main
308309

309310
---
310311

312+
## Motion
313+
314+
### Transition Duration
315+
316+
Five semantic durations for UI transitions. All are set to `0ms` under `@media (prefers-reduced-motion: reduce)`.
317+
318+
| Token | CSS Variable | Value |
319+
| ------- | ----------------------------------- | ----- |
320+
| instant | `--dsn-transition-duration-instant` | 0ms |
321+
| fast | `--dsn-transition-duration-fast` | 100ms |
322+
| normal | `--dsn-transition-duration-normal` | 200ms |
323+
| slow | `--dsn-transition-duration-slow` | 350ms |
324+
| slower | `--dsn-transition-duration-slower` | 500ms |
325+
326+
### Transition Easing
327+
328+
Five semantic easing curves for consistent motion feel.
329+
330+
| Token | CSS Variable | Value |
331+
| ------- | --------------------------------- | ---------------------------------- |
332+
| default | `--dsn-transition-easing-default` | `cubic-bezier(0.25, 0.1, 0.25, 1)` |
333+
| enter | `--dsn-transition-easing-enter` | `cubic-bezier(0, 0, 0.2, 1)` |
334+
| exit | `--dsn-transition-easing-exit` | `cubic-bezier(0.4, 0, 1, 1)` |
335+
| move | `--dsn-transition-easing-move` | `cubic-bezier(0.4, 0, 0.2, 1)` |
336+
| linear | `--dsn-transition-easing-linear` | `linear` |
337+
338+
**Usage in components:**
339+
340+
```css
341+
.dsn-button {
342+
transition:
343+
background-color var(--dsn-transition-duration-normal)
344+
var(--dsn-transition-easing-default),
345+
color var(--dsn-transition-duration-normal)
346+
var(--dsn-transition-easing-default),
347+
border-color var(--dsn-transition-duration-normal)
348+
var(--dsn-transition-easing-default);
349+
}
350+
```
351+
352+
**Reduced motion:** All duration tokens resolve to `0ms` via a central `@media (prefers-reduced-motion: reduce)` block appended to every full CSS configuration — no component-level media queries needed.
353+
354+
---
355+
311356
## Token Statistics
312357

313358
**Total Tokens (as of v4.9.0):**

‎docs/05-storybook-configuration.md‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Storybook Configuration
22

3-
**Last Updated:** March 13, 2026
3+
**Last Updated:** March 15, 2026
44

55
Documentation for the Storybook setup, runtime theme switching, UI components, and documentation structure.
66

@@ -398,6 +398,49 @@ const meta: Meta<typeof Button> = {
398398
/>
399399
```
400400

401+
### TokenTable
402+
403+
**Location:** `packages/storybook/src/components/TokenTable.tsx`
404+
405+
**Purpose:** Renders a table of design tokens with optional live preview visuals and computed CSS values.
406+
407+
**Props:**
408+
409+
| Prop | Type | Default | Description |
410+
| --------------- | ------------- | -------- | ----------------------------------- |
411+
| `tokens` | `Token[]` | — | Array of `{ name, cssVar, value? }` |
412+
| `previewType` | `PreviewType` | `'none'` | Visual preview type |
413+
| `showLiveValue` | `boolean` | `true` | Show computed CSS value |
414+
415+
**`previewType` values:**
416+
417+
| Value | Preview |
418+
| ----------------------- | ------------------------------------------------------------- |
419+
| `'color'` | Gekleurd vlak 32×32px |
420+
| `'spacing'` | Horizontale balk (breedte = tokenwaarde) |
421+
| `'typography-size'` | "Aa" in de tokengrootte |
422+
| `'border-radius'` | Gevuld vlak 40×40px met border-radius toegepast |
423+
| `'shadow'` | Kaartje met `box-shadow` toegepast |
424+
| `'transition-duration'` | Animerende sweep-balk (animationDuration = token) |
425+
| `'transition-easing'` | Stip op track (animationTimingFunction = token, vaste 1200ms) |
426+
| `'none'` | Geen preview kolom |
427+
428+
Alle kleur-previews gebruiken `--dsn-color-accent-1-inverse-bg-default` als accentkleur.
429+
430+
### TocLink
431+
432+
**Location:** `packages/storybook/src/components/TocLink.tsx`
433+
434+
**Purpose:** Anchor-navigatie binnen een Storybook docs-pagina zonder de Storybook URL te breken.
435+
436+
Storybook gebruikt `?path=`-gebaseerde URL-routing. Een gewone `<a href="#section">` vervangt de hele URL en laat de sidebar verdwijnen. `TocLink` onderschept de klik via `e.preventDefault()` en roept `document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' })` aan.
437+
438+
```tsx
439+
<TocLink targetId="colors">Colors</TocLink>
440+
// rendert als: <a class="dsn-link" href="#colors">Colors</a>
441+
// klik: scrollt naar element met id="colors", geen URL-verandering
442+
```
443+
401444
---
402445

403446
## Documentation Structure

‎docs/changelog.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,20 @@ All notable changes to this project are documented in this file.
66

77
---
88

9+
## Version 5.8.0 (March 15, 2026)
10+
11+
### Motion tokens: transition duration & easing (PR #85)
12+
13+
- **10 nieuwe design tokens** — 5 duration (`instant/fast/normal/slow/slower`) en 5 easing (`default/enter/exit/move/linear`) in `base.json` van het Start-thema
14+
- **Centrale `prefers-reduced-motion` media query** — toegevoegd via `build.js` post-processing aan alle 8 volledige CSS-configuraties; alle duration tokens worden `0ms`; geen component-level media queries nodig
15+
- **5 component CSS-bestanden bijgewerkt** — hardcoded `0.2s ease` vervangen door `var(--dsn-transition-duration-normal)` en `var(--dsn-transition-easing-default)` in `button.css`, `link.css`, `text-input.css`, `text-area.css`, `details.css`
16+
- **Storybook Design Tokens pagina uitgebreid** — Motion-sectie toegevoegd onderaan met `## Motion`, `### Transition Duration` en `### Transition Easing` tabellen
17+
- **`TokenTable` nieuwe `previewType` waarden** — `transition-duration` (animated sweep bar) en `transition-easing` (dot op track) tonen live animatie-previews in de documentatie
18+
- **Navigatie-index** toegevoegd aan de Design Tokens pagina — genummerde `OrderedList` met `TocLink` componenten (gebruikt `scrollIntoView` i.p.v. URL-navigatie zodat de Storybook sidebar intact blijft)
19+
- **Preview kleuren** geüniformeerd — spacing, border-radius en motion previews gebruiken allemaal `--dsn-color-accent-1-inverse-bg-default`
20+
21+
---
22+
923
## Version 5.7.0 (March 13, 2026)
1024

1125
### Body component: document-level cascade basisstijlen (PR #84, issue #83)

‎packages/storybook/src/DesignTokens.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Meta } from '@storybook/blocks';
22
import { TokenTable } from './components/TokenTable';
33
import { TokenControls } from './components/TokenControls';
4+
import { OrderedList } from '@dsn/components-react';
5+
import { TocLink } from './components/TocLink';
46

57
<Meta title="Foundations/Design Tokens" />
68

@@ -12,6 +14,21 @@ Design tokens are the single source of truth for colors, typography, spacing, bo
1214

1315
---
1416

17+
<OrderedList>
18+
<li><TocLink targetId="colors">Colors</TocLink></li>
19+
<li><TocLink targetId="inverse-colors">Inverse Colors</TocLink></li>
20+
<li><TocLink targetId="typography">Typography</TocLink></li>
21+
<li><TocLink targetId="spacing">Spacing</TocLink></li>
22+
<li><TocLink targetId="borders">Borders</TocLink></li>
23+
<li><TocLink targetId="focus-indicators">Focus Indicators</TocLink></li>
24+
<li><TocLink targetId="icon-sizes">Icon Sizes</TocLink></li>
25+
<li><TocLink targetId="pointer-target-sizing">Pointer Target Sizing</TocLink></li>
26+
<li><TocLink targetId="box-shadows">Box Shadows</TocLink></li>
27+
<li><TocLink targetId="motion">Motion</TocLink></li>
28+
</OrderedList>
29+
30+
---
31+
1532
## Colors
1633

1734
Each color scale provides a full set of tokens for backgrounds, borders, and text — including document, elevated, subtle, default, hover, and active states. The **elevated** token is intended for floating UI layers (modals, popovers, dropdowns) that appear above the document surface.

‎packages/storybook/src/components/TocLink.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Link } from '@dsn/components-react';
3+
4+
interface TocLinkProps {
5+
targetId: string;
6+
children: React.ReactNode;
7+
}
8+
9+
export function TocLink({ targetId, children }: TocLinkProps) {
10+
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
11+
e.preventDefault();
12+
document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' });
13+
};
14+
15+
return (
16+
<Link href={`#${targetId}`} onClick={handleClick}>
17+
{children}
18+
</Link>
19+
);
20+
}

‎packages/storybook/src/components/TokenTable.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,7 @@ function BorderRadiusPreview({ cssVar }: { cssVar: string }) {
9898
width: 40,
9999
height: 40,
100100
borderRadius: `var(${cssVar})`,
101-
border:
102-
'2px solid var(--dsn-color-accent-1-inverse-bg-default, #3366cc)',
103-
background: 'var(--dsn-color-accent-1-bg-subtle, #e8eef5)',
101+
background: 'var(--dsn-color-accent-1-inverse-bg-default, #3366cc)',
104102
}}
105103
/>
106104
);

0 commit comments

Comments
 (0)