Skip to content

Commit fa29f86

Browse files
mannycarrera4manuel.carrera
mannycarrera4
and
manuel.carrera
authored
fix: Update reference files for mcp (#4102)
MCP was missing quite a bit of token docs, updating the references for v16 [category:Infrastructure] Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
1 parent 27691d7 commit fa29f86

13 files changed

Lines changed: 1194 additions & 173 deletions

‎modules/docs/llm/llm-token-migration-14.txt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
Canvas Kit Token Migration Guide: Moving to @workday/canvas-tokens-web
22

33
================================================================================
4-
IMPORTANT: This migration guide is for Canvas Kit v14
4+
IMPORTANT: This migration guide is for Canvas Kit v14 (historical)
55
================================================================================
66

7+
For the current v4.4 token surface (Sana Canvas, t-shirt scales, deprecations), see
8+
tokens/v4/v4.4-token-reference.md in this MCP server's token documentation.
9+
710
Canvas Kit v14 is using a new token system that replaces the old JavaScript-based
811
tokens from @workday/canvas-kit-react/tokens with CSS variables from
912
@workday/canvas-tokens-web. This migration enables better theming capabilities,

‎modules/docs/llm/theming.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,30 @@ this approach.
4545

4646
**Note:** While we support theme overrides, we advise to use global theming via CSS Variables.
4747

48+
## Sana Canvas Theme (v16+)
49+
50+
Canvas Kit v16 targets the Sana Canvas visual language. Enable it by importing the Sana token
51+
stylesheet **after** the system variables, then setting the theme attribute on your root element:
52+
53+
```css
54+
@import '@workday/canvas-tokens-web/css/base/_variables.css';
55+
@import '@workday/canvas-tokens-web/css/brand/_variables.css';
56+
@import '@workday/canvas-tokens-web/css/component/_variables.css';
57+
@import '@workday/canvas-tokens-web/css/system/_variables.css';
58+
@import '@workday/canvas-tokens-web/css/sana/_variables.css';
59+
```
60+
61+
```html
62+
<html data-theme="sana-canvas">
63+
```
64+
65+
The Sana stylesheet reassigns palette values, shape sizes, depth shadows, typography, and semantic
66+
color tokens under `[data-theme="sana-canvas"]`. Consumers write plain `system.*` paths — values
67+
change automatically. Do not use `system.sana.*` or `system.legacy.*` in application code.
68+
69+
Load Sana Sans via `@workday/canvas-kit-react/fonts`. For the full current token inventory and
70+
Sana-specific value overrides, see [v4.4 Token Reference](./tokens/v4/v4.4-token-reference.md).
71+
4872
## What is a Cascade Barrier?
4973

5074
When we say "cascade barrier", we're talking about how

‎modules/docs/llm/tokens/token-migration.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Design Token Migration: v2 to v3
22

3+
> **Historical document.** This covers the v2→v3 fruity palette migration. For the current v4.4
4+
> token surface (Sana Canvas, t-shirt scales, deprecations), see
5+
> [v4.4 Token Reference](./v4/v4.4-token-reference.md).
6+
37
## Overview
48

59
This document outlines the migration from design tokens v2 to v3. Many color tokens from previous

‎modules/docs/llm/tokens/v4/color.md‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Color
22

3+
> For the complete current token inventory and deprecation map, see [v4.4 Token Reference](./v4.4-token-reference.md).
4+
35
## Usage Guidance
46

57
Our color choices promote visual clarity, making it easy for users to find what they need. We use a
@@ -78,7 +80,7 @@ State layers are overlays placed between or in front of background and foregroun
7880

7981
### Foreground
8082

81-
Use foreground colors (or `fg`) to set the color of text and icons.
83+
Use foreground colors (`system.color.fg.*`) to set the color of text and icons. The deprecated `text.*` and `icon.*` families map to `fg.*`.
8284

8385
All `fg` colors except `fg/inverse` can be used on `surface/default`, `bg/default`, `surface/alt`, and `bg/alt`.
8486

@@ -144,14 +146,16 @@ need to import the CSS variables in your application.
144146
### Javascript / Typescript
145147

146148
```tsx
147-
// styles.ts
149+
import {createStyles} from '@workday/canvas-kit-styling';
148150
import {system} from '@workday/canvas-tokens-web';
149151

150-
const styles = {
151-
backgroundColor: `var(${system.color.bg.default})`,
152-
};
152+
const cardStyles = createStyles({
153+
backgroundColor: system.color.bg.default,
154+
});
153155
```
154156

157+
`createStyles` resolves token names to `var(--cnvs-…)` automatically. Outside `createStyles`, wrap tokens with `cssVar()` or a `` `var(${token})` `` template literal.
158+
155159
### CSS
156160

157161
```css
@@ -164,4 +168,17 @@ const styles = {
164168

165169
## All Colors
166170

171+
107 non-deprecated `system.color.*` tokens are listed in [v4.4 Token Reference](./v4.4-token-reference.md#current-systemcolor-inventory-107-tokens).
172+
167173
## Deprecated Colors
174+
175+
| Don't write | Write |
176+
|---|---|
177+
| `system.color.bg.*` (except `bg.default`, `bg.alt.default`) | `system.color.surface.*` |
178+
| `system.color.text.*` | `system.color.fg.*` |
179+
| `system.color.icon.*` | `system.color.fg.*` |
180+
| `system.color.border.divider` | `system.color.border.default` |
181+
| `system.color.border.container` | `system.color.border.strong` |
182+
| `system.color.static.*` | A `base` palette ramp |
183+
184+
See [v4.4 Token Reference](./v4.4-token-reference.md#deprecated-color-families) for the full deprecation map.

‎modules/docs/llm/tokens/v4/shape.md‎

Lines changed: 27 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,63 @@
11
# Shape
22

3+
> For the complete current token reference including Sana Canvas values, see [v4.4 Token Reference](./v4.4-token-reference.md).
4+
35
## Usage Guidance
46

57
Shape tokens define border radius values for UI elements. Apply them to create consistent rounded corners across similar components.
68

7-
## Shape Tokens
8-
9-
Shape tokens are aliased to base `size` tokens to define border radius. Each token corresponds to a specific use case and component type.
10-
11-
[View our shape tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-shape--docs)
9+
Use t-shirt size names (`sm`, `md`, `lg`, …). The old scalar scale (`x1`, `x2`, `x4`, `x6`, `zero`, `half`, `round`) is deprecated.
1210

1311
## Shape Tokens
1412

15-
| Token | Value | Size (px) | Usage |
16-
|------------------|-----------|-----------|------------------------------------------|
17-
| `shape.none` | `size.0` | `0px` | No border radius |
18-
| `shape.sm` | `size.50` | `4px` | Small border radius for compact components|
19-
| `shape.md` | `size.100`| `8px` | Medium border radius for form components |
20-
| `shape.lg` | `size.150`| `12px` | Large border radius for content editors |
21-
| `shape.xl` | `size.200`| `16px` | Extra large for smaller cards |
22-
| `shape.xxl` | `size.300`| `24px` | Extra extra large for cards |
23-
| `shape.xxxl` | `size.400`| `32px` | Maximum for large elevated containers |
24-
| `shape.full` | `size.75 * 100` | `999px` | Full rounding for high-visibility components |
25-
26-
### None
27-
28-
Value: `size.0`
29-
30-
No border radius. Use for full-width and background containers, fixed navigation containers such as headers and side-panels.
31-
32-
### Small
33-
34-
Value: `size.50`
35-
36-
Small border radius for compact components. Used for pills, status indicators, and checkboxes.
37-
38-
### Medium
39-
40-
Value: `size.100`
41-
42-
Medium border radius for form components and notifications. Used for inputs, toasts, tooltips, and snackbars.
43-
44-
### Large
45-
46-
Value: `size.150`
13+
| Token | Default | Sana | Usage |
14+
|---|---|---|---|
15+
| `shape.none` | 0 | same | Full-width containers, headers, side panels |
16+
| `shape.xs` | — | 4px | Sana-only — compact rounding |
17+
| `shape.sm` | 4px | 6px | Pills, status indicators, checkboxes |
18+
| `shape.md` | 8px | same | Inputs, toasts, tooltips, snackbars |
19+
| `shape.lg` | 12px | same | Rich text editors |
20+
| `shape.xl` | 16px | same | Compact cards |
21+
| `shape.xxl` | 24px | 20px | Cards, list items |
22+
| `shape.xxxl` | 32px | 28px | Modals, dialogs, bottom sheets |
23+
| `shape.full` | 999px | same | Buttons, badges, avatars — fully rounded |
4724

48-
Large border radius for content editors. Used for rich text editors.
25+
Under `data-theme="sana-canvas"`, shape values change automatically. Write `system.shape.*` — do not use `system.sana.shape.*`.
4926

50-
### Extra Large
51-
52-
Value: `size.200`
53-
54-
Extra large border radius for smaller cards and containers. Used for compact card components and smaller content containers.
55-
56-
### Extra Extra Large
57-
58-
Value: `size.300`
59-
60-
Extra extra large border radius for cards and list items. Used for card components and large content containers.
61-
62-
### Extra Extra Extra Large
63-
64-
Value: `size.400`
65-
66-
Maximum border radius for large elevated containers. Used for dialogs, modals, bottom sheets, and other elevated parent containers with substantial content.
67-
68-
### Full
69-
70-
Value: `size.75 * 100`
71-
72-
Full rounding for high-visibility components intended to draw attention. Used for buttons, badges, status indicators, essential inputs, and border containers (not cards).
27+
[View our shape tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-shape--docs)
7328

7429
## Using our Shapes
7530

7631
**Do:**
7732

78-
- Apply the same border radius value to all corners of an element. This ensures the shape doesn't get distorted.
79-
- Choose shape tokens based on component type and use case. Follow the recommended usage for each token size.
33+
- Apply the same border radius value to all corners of an element.
34+
- Choose shape tokens based on component type and use case.
8035

81-
**Dont:**
36+
**Don't:**
8237

83-
- Don't combine different border radius values on the same element.
84-
- Don't use different values for different corners unless specifically required.
38+
- Combine different border radius values on the same element.
39+
- Use deprecated scalar tokens (`shape.x1`, `shape.x2`, `shape.round`, `shape.zero`).
8540

8641
## Web Examples
8742

8843
### Javascript / Typescript
8944

9045
```tsx
91-
// styles.ts
46+
import {createStyles} from '@workday/canvas-kit-styling';
9247
import {system} from '@workday/canvas-tokens-web';
9348

94-
const styles = {
95-
borderRadius: `var(${system.shape.xxl})`,
96-
};
49+
const cardStyles = createStyles({
50+
borderRadius: system.shape.xxl,
51+
});
9752
```
9853

54+
`createStyles` resolves token names to `var(--cnvs-…)` automatically. Outside `createStyles`, wrap tokens with `cssVar()` or a `` `var(${token})` `` template literal.
55+
9956
### CSS
10057

10158
```css
102-
// styles.css
10359
@import '@workday/canvas-tokens-web/css/system/_variables.css';
10460
.card {
10561
border-radius: var(--cnvs-sys-shape-xxl);
10662
}
10763
```
108-
109-

0 commit comments

Comments
 (0)