Skip to content

Commit 4916f5d

Browse files
committed
refactor: 💡 make radius semantic as t-shirt sizing
1 parent 3aa91ff commit 4916f5d

File tree

2 files changed

+47
-55
lines changed

2 files changed

+47
-55
lines changed

packages/design-tokens/SPECIFICATION.md

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -154,35 +154,51 @@ Examples: `space.25` (2px), `space.100` (8px), `space.400` (32px)
154154

155155
---
156156

157-
### 3. Radius Tokens (Atlassian Convention)
157+
### 3. Radius Tokens (Semantic Exception)
158158

159159
> [!INFO]
160-
> The Radius tokens are based in [Atlassian Conventions](https://atlassian.design/foundations/tokens/design-tokens)
160+
> The Radius tokens are NOT based in Atlassian Conventions. It's a semantic exception as its easier to reason in T-Shirt sizes because radius is categorical and not mathematically continuous.
161161
162162
**File:** `radius.dtcg.json`
163163

164164
**Type:** `$type: "dimension"` with DTCG object format `{ "value": 8, "unit": "px" }`
165165

166-
**Naming:** Percentage-based following continuous scale (no leading zeros)
166+
**Naming:** Categorical/T-shirt sizes
167167

168168
```
169-
radius/{percentage}
169+
radius/{size}
170170
```
171171

172-
Examples: `radius.25` (2px), `radius.100` (8px), `radius.999` (full)
172+
Examples: `radius.none`, `radius.sm`, `radius.all`
173173

174-
**Values:**
174+
**Rationale:** Radius is categorical, not continuous:
175+
176+
- `none` = 0px (square, sharp corners)
177+
- `minimal` = 2px (micro rounding, data tables)
178+
- `sm` = 4px (input fields, chips, tags)
179+
- `md` = 8px (standard buttons, cards)
180+
- `lg` = 16px (containers, modals, dialogs)
181+
- `xl` = 24px (large cards, feature sections)
182+
- `all` = 999px (fully rounded, pills, capsules)
183+
184+
Designers think: "small radius for inputs" not "radius.50 is half of radius.100"
185+
186+
**Consolidated Scale (7 values):**
187+
188+
| Token | Value | Use Case |
189+
|-------|-------|----------|
190+
| `radius.none` | 0px | Square corners, angular elements |
191+
| `radius.minimal` | 2px | Subtle rounding, data tables, micro UI |
192+
| `radius.sm` | 4px | Input fields, chips, tags, small buttons |
193+
| `radius.md` | 8px | Standard buttons, cards, default components |
194+
| `radius.lg` | 16px | Containers, modals, dialogs, panels |
195+
| `radius.xl` | 24px | Large cards, feature sections, prominent |
196+
| `radius.all` | 999px | Fully rounded, pills, capsules, circular |
175197

176-
- `radius.0` = 0px (none, square)
177-
- `radius.25` = 2px (tiny, subtle)
178-
- `radius.50` = 4px (extra-small, input)
179-
- `radius.75` = 6px (small, button-small)
180-
- `radius.100` = 8px (base, standard)
181-
- `radius.150` = 12px (medium, panel)
182-
- `radius.200` = 16px (large, container)
183-
- `radius.300` = 24px (extra-large, feature)
184-
- `radius.400` = 32px (2xl, pill-like)
185-
- `radius.999` = 999px (full, pill, capsule)
198+
**Note:** Values consolidated from 10 to 7 by merging adjacent similar sizes:
199+
- 6px (radius.75) → merged into `sm` (4px)
200+
- 12px (radius.150) → merged into `lg` (16px)
201+
- 32px (radius.400) → merged into `xl` (24px)
186202

187203
---
188204

@@ -531,7 +547,7 @@ token.setValueForMode(targetModeId, value);
531547
**New Additions:**
532548

533549
- 5 spacing values (2px, 6px, 20px, 48px, 80px)
534-
- 10 radius values (all new category)
550+
- 7 radius values - consolidated to t-shirt sizes (none, minimal, sm, md, lg, xl, all)
535551
- 10 sizing values (all new category)
536552

537553
---
Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,60 @@
11
{
22
"radius": {
3-
"0": {
3+
"none": {
44
"$type": "dimension",
55
"$value": {
66
"value": 0,
77
"unit": "px"
88
},
9-
"$description": "0px, none, square, sharp, angular, no-radius, corner-none"
9+
"$description": "0px, sharp, square, angular, no-radius, corner-none"
1010
},
11-
"25": {
11+
"minimal": {
1212
"$type": "dimension",
1313
"$value": {
1414
"value": 2,
1515
"unit": "px"
1616
},
17-
"$description": "2px, tiny, subtle, 0.125rem, radius.25, xs, micro-corner, slight"
17+
"$description": "2px, tiny, subtle, micro-corner, slight-rounding"
1818
},
19-
"50": {
19+
"sm": {
2020
"$type": "dimension",
2121
"$value": {
2222
"value": 4,
2323
"unit": "px"
2424
},
25-
"$description": "4px, extra-small, small, 0.25rem, radius.50, xs, sm, input, field, subtle-round"
25+
"$description": "4px, small, input, field, chip, tag, compact"
2626
},
27-
"75": {
28-
"$type": "dimension",
29-
"$value": {
30-
"value": 6,
31-
"unit": "px"
32-
},
33-
"$description": "6px, small, 0.375rem, radius.75, sm, button-small, chip, tag, soft-round"
34-
},
35-
"100": {
27+
"md": {
3628
"$type": "dimension",
3729
"$value": {
3830
"value": 8,
3931
"unit": "px"
4032
},
41-
"$description": "8px, base, standard, 0.5rem, radius.100, md, button, card, default-round, moderate"
33+
"$description": "8px, base, standard, button, card, default"
4234
},
43-
"150": {
44-
"$type": "dimension",
45-
"$value": {
46-
"value": 12,
47-
"unit": "px"
48-
},
49-
"$description": "12px, medium, 0.75rem, radius.150, md-lg, panel, section, rounded, relaxed"
50-
},
51-
"200": {
35+
"lg": {
5236
"$type": "dimension",
5337
"$value": {
5438
"value": 16,
5539
"unit": "px"
5640
},
57-
"$description": "16px, large, 1rem, radius.200, lg, container, modal, dialog, well-rounded"
41+
"$description": "16px, large, container, modal, dialog, panel"
5842
},
59-
"300": {
43+
"xl": {
6044
"$type": "dimension",
6145
"$value": {
6246
"value": 24,
6347
"unit": "px"
6448
},
65-
"$description": "24px, extra-large, 1.5rem, radius.300, xl, large-card, feature, very-rounded"
66-
},
67-
"400": {
68-
"$type": "dimension",
69-
"$value": {
70-
"value": 32,
71-
"unit": "px"
72-
},
73-
"$description": "32px, 2xl, 2rem, radius.400, pill-like, bubble, heavily-rounded"
49+
"$description": "24px, extra-large, feature, large-card, prominent"
7450
},
75-
"999": {
51+
"all": {
7652
"$type": "dimension",
7753
"$value": {
7854
"value": 999,
7955
"unit": "px"
8056
},
81-
"$description": "999px, full, pill, capsule, circular, radius.999, rounded-full, completely-round"
57+
"$description": "999px, full, pill, capsule, circular, completely-round"
8258
}
8359
}
8460
}

0 commit comments

Comments
 (0)