@hirobius/design-system 0.20.0 → 0.22.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": {
@@ -670,14 +685,20 @@
         "$description": "Cubic bezier with restrained initial gain and steep terminal velocity."
       },
       "elastic": {
-        "$type": "spring",
-        "$value": {
-          "type": "spring",
-          "stiffness": 300,
-          "damping": 20,
-          "mass": 1
-        },
-        "$description": "Spring response defined by stiffness, damping, and mass parameters."
+        "$value": [0.34, 1.56, 0.64, 1],
+        "$description": "Spring response defined by stiffness, damping, and mass parameters.",
+        "$extensions": {
+          "com.hirobius.hds": {
+            "$type": "spring",
+            "$value": {
+              "type": "spring",
+              "stiffness": 300,
+              "damping": 20,
+              "mass": 1
+            },
+            "bezierSource": "The cubicBezier is easeOutBack (easings.net), chosen as a stand-in for the spring, not fitted to it: both overshoot once, the curve by about 10% and spring(300, 20, 1) by about 11%."
+          }
+        }
       }
     },
     "shadow": {
@@ -957,32 +978,53 @@
   },
   "semantic": {
     "motion": {
-      "$type": "motion",
+      "$type": "transition",
+      "$extensions": {
+        "com.hirobius.hds": {
+          "$type": "motion"
+        }
+      },
       "productive": {
         "$value": {
           "duration": "{primitive.duration.short}",
-          "easing": "{primitive.easing.decelerate}"
+          "delay": {
+            "value": 0,
+            "unit": "ms"
+          },
+          "timingFunction": "{primitive.easing.decelerate}"
         },
         "$description": "For micro-interactions and status changes. No deformation."
       },
       "expressive": {
         "$value": {
           "duration": "{primitive.duration.medium}",
-          "easing": "{primitive.easing.elastic}"
+          "delay": {
+            "value": 0,
+            "unit": "ms"
+          },
+          "timingFunction": "{primitive.easing.elastic}"
         },
         "$description": "For teaching moments and significant UI entries. Includes physics-based squish."
       },
       "spatial": {
         "$value": {
           "duration": "{primitive.duration.long}",
-          "easing": "{primitive.easing.emphasized}"
+          "delay": {
+            "value": 0,
+            "unit": "ms"
+          },
+          "timingFunction": "{primitive.easing.emphasized}"
         },
         "$description": "For elements traveling long distances across the viewport."
       },
       "exit": {
         "$value": {
           "duration": "{primitive.duration.instant}",
-          "easing": "{primitive.easing.accelerate}"
+          "delay": {
+            "value": 0,
+            "unit": "ms"
+          },
+          "timingFunction": "{primitive.easing.accelerate}"
         },
         "$description": "For elements being removed from the DOM."
       },
@@ -1677,84 +1719,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": {
@@ -1762,13 +1760,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": {
@@ -1776,34 +1774,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": {
@@ -1970,38 +2001,58 @@
       }
     },
     "elevation": {
-      "$type": "elevation",
+      "$extensions": {
+        "com.hirobius.hds": {
+          "$type": "elevation"
+        }
+      },
       "flat": {
-        "$value": {
-          "surface": "{semantic.color.surface.page}",
-          "shadow": null,
-          "border": "{semantic.color.border.subtle}"
-        },
-        "$description": "Flat surface (no shadow, hairline border) for embedded panels."
+        "$description": "Flat surface (no shadow, hairline border) for embedded panels.",
+        "$extensions": {
+          "com.hirobius.hds": {
+            "$value": {
+              "surface": "{semantic.color.surface.page}",
+              "shadow": null,
+              "border": "{semantic.color.border.subtle}"
+            }
+          }
+        }
       },
       "raised": {
-        "$value": {
-          "surface": "{semantic.color.surface.raised}",
-          "shadow": "{semantic.shadow.subtle}",
-          "border": null
-        },
-        "$description": "Resting card / panel elevation."
+        "$description": "Resting card / panel elevation.",
+        "$extensions": {
+          "com.hirobius.hds": {
+            "$value": {
+              "surface": "{semantic.color.surface.raised}",
+              "shadow": "{semantic.shadow.subtle}",
+              "border": null
+            }
+          }
+        }
       },
       "floating": {
-        "$value": {
-          "surface": "{semantic.color.surface.raised}",
-          "shadow": "{semantic.shadow.floating}",
-          "border": null
-        },
-        "$description": "Hover, menu, and popover elevation."
+        "$description": "Hover, menu, and popover elevation.",
+        "$extensions": {
+          "com.hirobius.hds": {
+            "$value": {
+              "surface": "{semantic.color.surface.raised}",
+              "shadow": "{semantic.shadow.floating}",
+              "border": null
+            }
+          }
+        }
       },
       "overlay": {
-        "$value": {
-          "surface": "{semantic.color.surface.overlay}",
-          "shadow": "{semantic.shadow.overlay}",
-          "border": null
-        },
-        "$description": "Modal, dialog, and drawer elevation."
+        "$description": "Modal, dialog, and drawer elevation.",
+        "$extensions": {
+          "com.hirobius.hds": {
+            "$value": {
+              "surface": "{semantic.color.surface.overlay}",
+              "shadow": "{semantic.shadow.overlay}",
+              "border": null
+            }
+          }
+        }
       }
     },
     "size": {
@@ -2145,7 +2196,7 @@
         "$description": "Tag label weight."
       },
       "lineHeight": {
-        "$type": "dimension",
+        "$type": "number",
         "$value": "{primitive.typography.lineHeight.normal}",
         "$description": "Readable label rhythm for tags."
       },