Skip to content

Commit 5674a1f

Browse files
jameskostercursoragent
jameskoster
and
cursoragent
committed
Add semantic usage descriptions to border radius tokens.
Replace generic size labels with guidance on which UI surfaces each step is intended for. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 3fab488 commit 5674a1f

3 files changed

Lines changed: 22 additions & 22 deletions

File tree

‎packages/theme/docs/tokens.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -125,18 +125,18 @@ The interactive state of the element. The default (no modifier) is the idle stat
125125

126126
### Border
127127

128-
| Variable name | Description |
129-
| --------------------------- | --------------------------- |
130-
| `--wpds-border-radius-xs` | Extra small radius |
131-
| `--wpds-border-radius-sm` | Small radius |
132-
| `--wpds-border-radius-md` | Medium radius |
133-
| `--wpds-border-radius-lg` | Large radius |
134-
| `--wpds-border-radius-xl` | Extra large radius |
135-
| `--wpds-border-width-xs` | Extra small width |
136-
| `--wpds-border-width-sm` | Small width |
137-
| `--wpds-border-width-md` | Medium width |
138-
| `--wpds-border-width-lg` | Large width |
139-
| `--wpds-border-width-focus` | Border width for focus ring |
128+
| Variable name | Description |
129+
| --------------------------- | ------------------------------------------------------------- |
130+
| `--wpds-border-radius-xs` | Buttons and other elements nested inside controls. |
131+
| `--wpds-border-radius-sm` | Standalone buttons, inputs, and compact controls. |
132+
| `--wpds-border-radius-md` | Menus, popovers, and other small portaled overlays. |
133+
| `--wpds-border-radius-lg` | Cards, dialogs, notices, and other larger content containers. |
134+
| `--wpds-border-radius-xl` | Page and app shell surfaces. |
135+
| `--wpds-border-width-xs` | Extra small width |
136+
| `--wpds-border-width-sm` | Small width |
137+
| `--wpds-border-width-md` | Medium width |
138+
| `--wpds-border-width-lg` | Large width |
139+
| `--wpds-border-width-focus` | Border width for focus ring |
140140

141141
### Color
142142

‎packages/theme/src/prebuilt/css/design-tokens.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
* ------------------------------------------- */
44

55
:root {
6-
/* Extra small radius */
6+
/* Buttons and other elements nested inside controls. */
77
--wpds-border-radius-xs: 1px;
8-
/* Small radius */
8+
/* Standalone buttons, inputs, and compact controls. */
99
--wpds-border-radius-sm: 2px;
10-
/* Medium radius */
10+
/* Menus, popovers, and other small portaled overlays. */
1111
--wpds-border-radius-md: 4px;
12-
/* Large radius */
12+
/* Cards, dialogs, notices, and other larger content containers. */
1313
--wpds-border-radius-lg: 8px;
14-
/* Extra large radius */
14+
/* Page and app shell surfaces. */
1515
--wpds-border-radius-xl: 12px;
1616
/* Extra small width */
1717
--wpds-border-width-xs: 1px;

‎packages/theme/tokens/border.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
"$description": "Border radius scale for elegant hierarchical nesting. Outer surfaces use larger steps; nested elements use smaller ones so concentric corners stay visually harmonious.",
66
"xs": {
77
"$value": { "value": 1, "unit": "px" },
8-
"$description": "Extra small radius"
8+
"$description": "Buttons and other elements nested inside controls."
99
},
1010
"sm": {
1111
"$value": { "value": 2, "unit": "px" },
12-
"$description": "Small radius"
12+
"$description": "Standalone buttons, inputs, and compact controls."
1313
},
1414
"md": {
1515
"$value": { "value": 4, "unit": "px" },
16-
"$description": "Medium radius"
16+
"$description": "Menus, popovers, and other small portaled overlays."
1717
},
1818
"lg": {
1919
"$value": { "value": 8, "unit": "px" },
20-
"$description": "Large radius"
20+
"$description": "Cards, dialogs, notices, and other larger content containers."
2121
},
2222
"xl": {
2323
"$value": { "value": 12, "unit": "px" },
24-
"$description": "Extra large radius"
24+
"$description": "Page and app shell surfaces."
2525
},
2626
"$extensions": {
2727
"com.figma.scopes": [ "CORNER_RADIUS" ]

0 commit comments

Comments
 (0)