refactor: 💡 make radius semantic as t-shirt sizing

Author: punkbit

packages/design-tokens/SPECIFICATION.md

@@ -154,35 +154,51 @@ Examples: `space.25` (2px), `space.100` (8px), `space.400` (32px)
 
 ---
 
-### 3. Radius Tokens (Atlassian Convention)
+### 3. Radius Tokens (Semantic Exception)
 
 > [!INFO]
-> The Radius tokens are based in [Atlassian Conventions](https://atlassian.design/foundations/tokens/design-tokens)
+> 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.
 
 **File:** `radius.dtcg.json`
 
 **Type:** `$type: "dimension"` with DTCG object format `{ "value": 8, "unit": "px" }`
 
-**Naming:** Percentage-based following continuous scale (no leading zeros)
+**Naming:** Categorical/T-shirt sizes
 
 ```
-radius/{percentage}
+radius/{size}
 ```
 
-Examples: `radius.25` (2px), `radius.100` (8px), `radius.999` (full)
+Examples: `radius.none`, `radius.sm`, `radius.all`
 
-**Values:**
+**Rationale:** Radius is categorical, not continuous:
+
+- `none` = 0px (square, sharp corners)
+- `minimal` = 2px (micro rounding, data tables)
+- `sm` = 4px (input fields, chips, tags)
+- `md` = 8px (standard buttons, cards)
+- `lg` = 16px (containers, modals, dialogs)
+- `xl` = 24px (large cards, feature sections)
+- `all` = 999px (fully rounded, pills, capsules)
+
+Designers think: "small radius for inputs" not "radius.50 is half of radius.100"
+
+**Consolidated Scale (7 values):**
+
+| Token | Value | Use Case |
+|-------|-------|----------|
+| `radius.none` | 0px | Square corners, angular elements |
+| `radius.minimal` | 2px | Subtle rounding, data tables, micro UI |
+| `radius.sm` | 4px | Input fields, chips, tags, small buttons |
+| `radius.md` | 8px | Standard buttons, cards, default components |
+| `radius.lg` | 16px | Containers, modals, dialogs, panels |
+| `radius.xl` | 24px | Large cards, feature sections, prominent |
+| `radius.all` | 999px | Fully rounded, pills, capsules, circular |
 
-- `radius.0` = 0px (none, square)
-- `radius.25` = 2px (tiny, subtle)
-- `radius.50` = 4px (extra-small, input)
-- `radius.75` = 6px (small, button-small)
-- `radius.100` = 8px (base, standard)
-- `radius.150` = 12px (medium, panel)
-- `radius.200` = 16px (large, container)
-- `radius.300` = 24px (extra-large, feature)
-- `radius.400` = 32px (2xl, pill-like)
-- `radius.999` = 999px (full, pill, capsule)
+**Note:** Values consolidated from 10 to 7 by merging adjacent similar sizes:
+- 6px (radius.75) → merged into `sm` (4px)
+- 12px (radius.150) → merged into `lg` (16px)
+- 32px (radius.400) → merged into `xl` (24px)
 
 ---
 
@@ -531,7 +547,7 @@ token.setValueForMode(targetModeId, value);
 **New Additions:**
 
 - 5 spacing values (2px, 6px, 20px, 48px, 80px)
-- 10 radius values (all new category)
+- 7 radius values - consolidated to t-shirt sizes (none, minimal, sm, md, lg, xl, all)
 - 10 sizing values (all new category)
 
 ---

packages/design-tokens/dictionary/radius.dtcg.json

@@ -1,84 +1,60 @@
 {
   "radius": {
-    "0": {
+    "none": {
       "$type": "dimension",
       "$value": {
         "value": 0,
         "unit": "px"
       },
-      "$description": "0px, none, square, sharp, angular, no-radius, corner-none"
+      "$description": "0px, sharp, square, angular, no-radius, corner-none"
     },
-    "25": {
+    "minimal": {
       "$type": "dimension",
       "$value": {
         "value": 2,
         "unit": "px"
       },
-      "$description": "2px, tiny, subtle, 0.125rem, radius.25, xs, micro-corner, slight"
+      "$description": "2px, tiny, subtle, micro-corner, slight-rounding"
     },
-    "50": {
+    "sm": {
       "$type": "dimension",
       "$value": {
         "value": 4,
         "unit": "px"
       },
-      "$description": "4px, extra-small, small, 0.25rem, radius.50, xs, sm, input, field, subtle-round"
+      "$description": "4px, small, input, field, chip, tag, compact"
     },
-    "75": {
-      "$type": "dimension",
-      "$value": {
-        "value": 6,
-        "unit": "px"
-      },
-      "$description": "6px, small, 0.375rem, radius.75, sm, button-small, chip, tag, soft-round"
-    },
-    "100": {
+    "md": {
       "$type": "dimension",
       "$value": {
         "value": 8,
         "unit": "px"
       },
-      "$description": "8px, base, standard, 0.5rem, radius.100, md, button, card, default-round, moderate"
+      "$description": "8px, base, standard, button, card, default"
     },
-    "150": {
-      "$type": "dimension",
-      "$value": {
-        "value": 12,
-        "unit": "px"
-      },
-      "$description": "12px, medium, 0.75rem, radius.150, md-lg, panel, section, rounded, relaxed"
-    },
-    "200": {
+    "lg": {
       "$type": "dimension",
       "$value": {
         "value": 16,
         "unit": "px"
       },
-      "$description": "16px, large, 1rem, radius.200, lg, container, modal, dialog, well-rounded"
+      "$description": "16px, large, container, modal, dialog, panel"
     },
-    "300": {
+    "xl": {
       "$type": "dimension",
       "$value": {
         "value": 24,
         "unit": "px"
       },
-      "$description": "24px, extra-large, 1.5rem, radius.300, xl, large-card, feature, very-rounded"
-    },
-    "400": {
-      "$type": "dimension",
-      "$value": {
-        "value": 32,
-        "unit": "px"
-      },
-      "$description": "32px, 2xl, 2rem, radius.400, pill-like, bubble, heavily-rounded"
+      "$description": "24px, extra-large, feature, large-card, prominent"
     },
-    "999": {
+    "all": {
       "$type": "dimension",
       "$value": {
         "value": 999,
         "unit": "px"
       },
-      "$description": "999px, full, pill, capsule, circular, radius.999, rounded-full, completely-round"
+      "$description": "999px, full, pill, capsule, circular, completely-round"
     }
   }
 }