@hirobius/design-system 0.19.1 → 0.21.0

package/hirobius.tokens.json

@@ -486,7 +486,7 @@
             "Segoe UI",
             "sans-serif"
           ],
-          "$description": "Display face: Satoshi Bold (ITF), bound to display/h1/h2/h3 composites."
+          "$description": "Display face: Satoshi Bold (ITF), bound to the display and title composites."
         },
         "mono": {
           "$value": ["Geist Mono", "Courier New", "monospace"],
@@ -564,6 +564,13 @@
             "unit": "px"
           },
           "$description": "Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl."
+        },
+        "code": {
+          "$value": {
+            "value": 13,
+            "unit": "px"
+          },
+          "$description": "13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose."
         }
       },
       "weight": {
@@ -599,6 +606,14 @@
         "relaxed": {
           "$value": 1.625,
           "$description": "Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort."
+        },
+        "display": {
+          "$value": 1.05,
+          "$description": "Display role leading (hds#485)."
+        },
+        "body": {
+          "$value": 1.6,
+          "$description": "Body role leading (hds#485)."
         }
       },
       "letterSpacing": {
@@ -830,6 +845,14 @@
         },
         "$description": "96px size step."
       },
+      "120": {
+        "$type": "dimension",
+        "$value": {
+          "value": 120,
+          "unit": "px"
+        },
+        "$description": "120px size step. Backs semantic.size.tile."
+      },
       "$description": "Unaliased dimensional values.",
       "interactive": {
         "$description": "Interactive control size minimums.",
@@ -847,7 +870,7 @@
             "value": 24,
             "unit": "px"
           },
-          "$description": "WCAG 2.2 AA (2.5.8) minimum target size for a compact inline control, such as a tokenizer chip's remove button, where the 44px AAA floor (2.5.5) does not apply."
+          "$description": "Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5)."
         }
       },
       "width": {
@@ -886,7 +909,7 @@
             "value": 280,
             "unit": "px"
           },
-          "$description": "Docs-shell rail width (hds#280). Our own number, not HeroUI's 268px — wide enough for the longest top-level nav label at the default type ramp with room to spare."
+          "$description": "Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."
         }
       }
     },
@@ -981,7 +1004,7 @@
       "distance": {
         "$type": "dimension",
         "$value": "{primitive.space.6}",
-        "$description": "Travel distance for a scroll-reveal translateY offset. Coincides in value with semantic.space.scale.md today, but names a motion travel distance rather than a spacing tier (hds#242)."
+        "$description": "Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242)."
       }
     },
     "color": {
@@ -1456,13 +1479,29 @@
             }
           }
         }
+      },
+      "state": {
+        "pressed": {
+          "overlay": {
+            "$value": "{primitive.color.neutral.black}",
+            "$description": "Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).",
+            "$extensions": {
+              "com.figma.variables": {
+                "modes": {
+                  "Light": "{primitive.color.neutral.black}",
+                  "Dark": "{primitive.color.neutral.white}"
+                }
+              }
+            }
+          }
+        }
       }
     },
     "space": {
       "$type": "dimension",
       "$description": "Semantic spacing tiers: subgrid, component, layout, section, scale.",
       "scale": {
-        "$description": "hds#206 — the canonical spacing vocabulary. One monotonic, single-family t-shirt scale (xs < sm < md < lg < xl) for the `p`/`m`/`gap` family of props on Box/Stack. Supersedes the four un-ordered gap families below (subgrid/component/layout/section) and the 24px alias triplet (layout.normal / layout.gutter / component.padding) for NEW usage; those remain live, deprecated aliases until the consumer codemod (hds#206 remaining work) migrates callers and removes them — not a breaking change yet.",
+        "$description": "hds#206: the canonical spacing vocabulary, one monotonic t-shirt scale (xs to xl) for padding, margin and gap. Supersedes deprecated names.",
         "xs": {
           "$value": "{primitive.space.2}",
           "$description": "8px — smallest step. Same value as component.gap (deprecated alias)."
@@ -1473,7 +1512,7 @@
         },
         "md": {
           "$value": "{primitive.space.6}",
-          "$description": "24px — same value as layout.normal (deprecated alias). Default of the overridable roles surface.padding and region.gutter, which replace the deprecated component.padding / layout.gutter."
+          "$description": "24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value."
         },
         "lg": {
           "$value": "{primitive.space.8}",
@@ -1485,17 +1524,17 @@
         }
       },
       "surface": {
-        "$description": "hds#206 — the overridable surface inset. A named role on the t-shirt scale rather than a scale step, because tenants (per brand and density) override it at runtime; its value is always a scale step.",
+        "$description": "hds#206 surface inset role. Tenants override it per brand and density, always with a scale step.",
         "padding": {
           "$value": "{semantic.space.scale.md}",
-          "$description": "24px (scale.md) default inset for cards, forms, panels, and grouped surfaces. Tenants override it with another scale step (tenants/*/tokens.json, incl. a Compact density mode). Replaces the deprecated semantic.space.component.padding."
+          "$description": "24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding."
         }
       },
       "region": {
-        "$description": "hds#206 — the overridable region gutter. A named role on the t-shirt scale rather than a scale step, because theme.css retunes it per viewport; its value is always a scale step.",
+        "$description": "hds#206 region gutter role. theme.css retunes it per viewport, always with a scale step.",
         "gutter": {
           "$value": "{semantic.space.scale.md}",
-          "$description": "24px (scale.md) column and region gutters. theme.css sets it responsively to scale.lg (32px) and, below 640px, scale.sm (16px). Replaces the deprecated semantic.space.layout.gutter."
+          "$description": "24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter."
         }
       },
       "subgrid": {
@@ -1524,7 +1563,7 @@
         },
         "padding": {
           "$value": "{semantic.space.surface.padding}",
-          "$description": "24px default inset for cards, forms, panels, and grouped surfaces. DEPRECATED alias (hds#206) — use semantic.space.surface.padding (tenant/density-overridable); kept live, no removal yet.",
+          "$description": "24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.",
           "$deprecated": "hds#206 — use semantic.space.surface.padding"
         }
       },
@@ -1551,7 +1590,7 @@
         },
         "spacious": {
           "$value": "{primitive.space.12}",
-          "$description": "48px section break and whitespace separator between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.",
+          "$description": "48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.",
           "$deprecated": "hds#206 — use semantic.space.scale.xl"
         }
       },
@@ -1589,7 +1628,7 @@
         "railWidth": {
           "$type": "dimension",
           "$value": "{primitive.size.width.280}",
-          "$description": "Docs-shell left nav rail and right TOC rail width (hds#280). Both rails share one width token; default 0 below their breakpoint (see HdsDocsShell)."
+          "$description": "Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell)."
         }
       }
     },
@@ -1653,84 +1692,40 @@
     },
     "typography": {
       "$type": "typography",
-      "$description": "8-style Swiss-canon type ramp: display, h1–h3, body, small, caption, mono.",
+      "$description": "5-role type ramp plus mono (hds#483): display, title, body, ui, caption, mono. h1, h2, h3 and eyebrow are deprecated aliases.",
       "display": {
-        "$value": {
-          "fontFamily": "{primitive.typography.family.display}",
-          "fontSize": "{primitive.typography.size.6xl}",
-          "fontWeight": "{primitive.typography.weight.bold}",
-          "letterSpacing": "{primitive.typography.letterSpacing.tight}",
-          "lineHeight": "{primitive.typography.lineHeight.none}"
-        },
-        "$description": "Display headline. 60px / Satoshi bold 700 / leading-none (hds#283: was 72px/5xl).",
-        "$extensions": {
-          "com.figma.variables": {
-            "fontSize": "clamp(40px, 8vw, 60px)",
-            "note": "Figma stores the 60px desktop-max static value. Browser CSS overrides with fluid scaling (40px min → 60px max). See src/styles/theme.css."
-          }
-        }
-      },
-      "h1": {
         "$value": {
           "fontFamily": "{primitive.typography.family.display}",
           "fontSize": "{primitive.typography.size.5xl}",
           "fontWeight": "{primitive.typography.weight.bold}",
           "letterSpacing": "{primitive.typography.letterSpacing.tight}",
-          "lineHeight": "{primitive.typography.lineHeight.tight}"
+          "lineHeight": "{primitive.typography.lineHeight.display}"
         },
-        "$description": "Primary section headings (h1). 48px / Satoshi bold 700 / leading-tight (hds#283: rung renamed 4xl→5xl, px unchanged).",
-        "$extensions": {
-          "com.figma.variables": {
-            "fontSize": "clamp(32px, 6vw, 48px)",
-            "note": "Figma stores the 48px desktop-max static value. Browser CSS overrides with fluid scaling (32px min → 48px max). See src/styles/theme.css."
-          }
-        }
+        "$description": "One per page, hero only. 48px / 1.05 / 700. Role 1 of 6."
       },
-      "h2": {
+      "title": {
         "$value": {
           "fontFamily": "{primitive.typography.family.display}",
-          "fontSize": "{primitive.typography.size.3xl}",
+          "fontSize": "{primitive.typography.size.2xl}",
           "fontWeight": "{primitive.typography.weight.bold}",
           "letterSpacing": "{primitive.typography.letterSpacing.tight}",
-          "lineHeight": "40px"
-        },
-        "$description": "Secondary section headings (h2). Satoshi bold 700, 30px, line-height 40px (hds#283: rung renamed, was 42px).",
-        "$extensions": {
-          "com.figma.variables": {
-            "fontSize": "clamp(24px, 3.5vw, 30px)",
-            "note": "Figma stores the 30px desktop-max static value. Browser CSS overrides with fluid scaling (24px min → 30px max). See src/styles/theme.css."
-          }
-        }
-      },
-      "h3": {
-        "$value": {
-          "fontFamily": "{primitive.typography.family.display}",
-          "fontSize": "{primitive.typography.size.xl}",
-          "fontWeight": "{primitive.typography.weight.bold}",
-          "letterSpacing": "{primitive.typography.letterSpacing.normal}",
-          "lineHeight": "28px"
+          "lineHeight": "{primitive.typography.lineHeight.tight}"
         },
-        "$description": "Component and card headers (h3). 20px / Satoshi bold 700 500 / leading-snug (hds#283: rung renamed lg→xl, px unchanged).",
-        "$extensions": {
-          "com.figma.variables": {
-            "fontSize": "clamp(18px, 2vw, 20px)",
-            "note": "Figma stores the 20px desktop-max static value. Browser CSS overrides with fluid scaling (18px min → 20px max). See src/styles/theme.css."
-          }
-        }
+        "$description": "Section and card headings. 24px / 1.25 / 700. Role 2 of 6."
       },
       "body": {
         "$value": {
           "fontFamily": "{primitive.typography.family.primary}",
           "fontSize": "{primitive.typography.size.base}",
-          "fontWeight": "{primitive.typography.weight.medium}",
+          "fontWeight": "{primitive.typography.weight.regular}",
           "letterSpacing": "{primitive.typography.letterSpacing.normal}",
-          "lineHeight": "24px",
+          "lineHeight": "{primitive.typography.lineHeight.body}",
           "maxWidth": {
             "value": 60,
             "unit": "ch"
           }
         },
-        "$description": "Body prose. Satoshi medium, 16px, line-height 24px, max 60ch measure (hds#283: was 17px/28px)."
+        "$description": "Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6."
       },
       "ui": {
         "$value": {
@@ -1738,13 +1733,13 @@
           "fontSize": "{primitive.typography.size.sm}",
           "fontWeight": "{primitive.typography.weight.medium}",
           "letterSpacing": "{primitive.typography.letterSpacing.normal}",
-          "lineHeight": "20px",
+          "lineHeight": "{primitive.typography.lineHeight.normal}",
           "maxWidth": {
             "value": 60,
             "unit": "ch"
           }
         },
-        "$description": "UI text for nav, labels, captions. Satoshi medium, 14px, line-height 20px (hds#283: was 15px/24px)."
+        "$description": "Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6."
       },
       "caption": {
         "$value": {
@@ -1752,34 +1747,67 @@
           "fontSize": "{primitive.typography.size.xs}",
           "fontWeight": "{primitive.typography.weight.medium}",
           "letterSpacing": "{primitive.typography.letterSpacing.normal}",
-          "lineHeight": "16px"
+          "lineHeight": "{primitive.typography.lineHeight.normal}"
         },
-        "$description": "Caption / helper text. Satoshi medium, 12px, line-height 16px. Matches the Figma typography/caption text style; now sourced from primitive.xs (hds#283)."
-      },
-      "eyebrow": {
-        "$value": {
-          "fontFamily": "{primitive.typography.family.primary}",
-          "fontSize": "{primitive.typography.size.xs}",
-          "fontWeight": "{primitive.typography.weight.medium}",
-          "letterSpacing": "{primitive.typography.letterSpacing.caps}",
-          "lineHeight": "16px",
-          "textTransform": "uppercase"
-        },
-        "$description": "Eyebrow / kicker label. Satoshi medium, 12px, caps tracking, uppercase (hds#283: was 13px/20px)."
+        "$description": "Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6."
       },
       "mono": {
         "$value": {
           "fontFamily": "{primitive.typography.family.mono}",
-          "fontSize": "{primitive.typography.size.sm}",
+          "fontSize": "{primitive.typography.size.code}",
           "fontWeight": "{primitive.typography.weight.regular}",
           "letterSpacing": "{primitive.typography.letterSpacing.normal}",
-          "lineHeight": "20px",
+          "lineHeight": "{primitive.typography.lineHeight.normal}",
           "maxWidth": {
             "value": 60,
             "unit": "ch"
           }
         },
-        "$description": "Monospace for code, token names, shortcuts. Geist Mono regular, 14px (hds#283: repointed xs→sm; xs alone would give 12px)."
+        "$description": "Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6."
+      },
+      "h1": {
+        "$value": {
+          "fontFamily": "{primitive.typography.family.display}",
+          "fontSize": "{primitive.typography.size.2xl}",
+          "fontWeight": "{primitive.typography.weight.bold}",
+          "letterSpacing": "{primitive.typography.letterSpacing.tight}",
+          "lineHeight": "{primitive.typography.lineHeight.tight}"
+        },
+        "$description": "deprecated: use semantic.typography.title",
+        "$deprecated": "hds#483 — use semantic.typography.title"
+      },
+      "h2": {
+        "$value": {
+          "fontFamily": "{primitive.typography.family.display}",
+          "fontSize": "{primitive.typography.size.2xl}",
+          "fontWeight": "{primitive.typography.weight.bold}",
+          "letterSpacing": "{primitive.typography.letterSpacing.tight}",
+          "lineHeight": "{primitive.typography.lineHeight.tight}"
+        },
+        "$description": "deprecated: use semantic.typography.title",
+        "$deprecated": "hds#483 — use semantic.typography.title"
+      },
+      "h3": {
+        "$value": {
+          "fontFamily": "{primitive.typography.family.display}",
+          "fontSize": "{primitive.typography.size.2xl}",
+          "fontWeight": "{primitive.typography.weight.bold}",
+          "letterSpacing": "{primitive.typography.letterSpacing.tight}",
+          "lineHeight": "{primitive.typography.lineHeight.tight}"
+        },
+        "$description": "deprecated: use semantic.typography.title",
+        "$deprecated": "hds#483 — use semantic.typography.title"
+      },
+      "eyebrow": {
+        "$value": {
+          "fontFamily": "{primitive.typography.family.primary}",
+          "fontSize": "{primitive.typography.size.xs}",
+          "fontWeight": "{primitive.typography.weight.medium}",
+          "letterSpacing": "{primitive.typography.letterSpacing.normal}",
+          "lineHeight": "{primitive.typography.lineHeight.normal}"
+        },
+        "$description": "deprecated: use semantic.typography.caption",
+        "$deprecated": "hds#483 — use semantic.typography.caption"
       },
       "lineHeight": {
         "none": {
@@ -1915,7 +1943,7 @@
       "control": {
         "$type": "dimension",
         "$value": "{primitive.radius.4}",
-        "$description": "Corner radius for small interactive control glyphs (e.g. checkbox glyph box) that are not fully round and not the standard action radius. Real design-scale value, distinct from semantic.radius.action (hds#242)."
+        "$description": "Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242)."
       }
     },
     "borderWidth": {
@@ -1982,7 +2010,7 @@
     },
     "size": {
       "$type": "dimension",
-      "$description": "Semantic sizing roles for control glyphs, avatars, and table rows. Distinct roles may share a primitive value today by coincidence; keep them separate so one can change without dragging the other (hds#242).",
+      "$description": "Sizing roles for control glyphs, avatars and table rows. Roles sharing a value stay separate so each can change (hds#242).",
       "control": {
         "$description": "Interactive control glyph/element sizing (checkbox glyph box, radio dot, slider track/fill, code-block copy-button-matched footprint).",
         "sm": {
@@ -2015,7 +2043,11 @@
       },
       "avatar": {
         "$value": "{primitive.size.40}",
-        "$description": "Avatar diagonal (width/height) for activity-feed and similar identity glyphs. Coincides in pixels with row.compact today; kept as a separate role per hds#242 so either can change independently."
+        "$description": "Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242)."
+      },
+      "tile": {
+        "$value": "{primitive.size.120}",
+        "$description": "Minimum height of a metric tile, one height for every tile so rows line up (hds#403)."
       },
       "row": {
         "$description": "Table row minimum height by density.",
@@ -2507,6 +2539,11 @@
       "$value": "{semantic.color.surface.scrim}",
       "$description": "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60."
     },
+    "pressed-overlay": {
+      "$type": "color",
+      "$value": "{semantic.color.state.pressed.overlay}",
+      "$description": "Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5."
+    },
     "popover-foreground": {
       "$type": "color",
       "$value": "{semantic.color.content.primary}",