@conductor-by-89soone/tokens 0.4.0 → 0.5.0

package/dist/cli.js

@@ -484,6 +484,10 @@ var HEADING_MAX_PX = FONT_SIZE_PX.xl * 1.6;
 var H2_PX = Math.round(FONT_SIZE_PX.xl * 1.3);
 var H3_PX = Math.round(FONT_SIZE_PX.xl * 1.1);
 var HEADING_LINE_HEIGHT_RATIO = 1.3;
+var DISPLAY_MIN_PX = Math.round(FONT_SIZE_PX.xl * 1.8);
+var DISPLAY_MAX_PX = Math.round(FONT_SIZE_PX.xl * 3.2);
+var LEAD_PX = Math.round(FONT_SIZE_PX.xl * 0.9);
+var LEAD_LINE_HEIGHT_RATIO = 1.5;
 var page = [
   component(
     "page.headingSize",
@@ -515,6 +519,26 @@ var page = [
     value(`${roundHalfUp(H3_PX * HEADING_LINE_HEIGHT_RATIO)}px`),
     "Line height paired with `page.subHeadingSize`, at the 1.30 heading ratio."
   ),
+  component(
+    "page.displaySize",
+    value(`clamp(${DISPLAY_MIN_PX}px, 5.5vw, ${DISPLAY_MAX_PX}px)`),
+    "Display heading for a landing hero, derived from `font.size.xl` (\xD7 1.8 and \xD7 3.2). One step above `page.headingSize`; never a body size (CR-042)."
+  ),
+  component(
+    "page.displayLineHeight",
+    value("1.04"),
+    "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here."
+  ),
+  component(
+    "page.leadSize",
+    value(`${LEAD_PX}px`),
+    "Lead paragraph under a page or hero heading. `font.size.xl` \xD7 0.9; sits between `font.size.lg` and `font.size.xl` (CR-042)."
+  ),
+  component(
+    "page.leadLineHeight",
+    value(`${roundHalfUp(LEAD_PX * LEAD_LINE_HEIGHT_RATIO)}px`),
+    "Line height paired with `page.leadSize`, at the 1.50 body ratio."
+  ),
   component("page.stackGap", ref("space.6"), "Gap between page sections."),
   component("page.stackGapCompact", ref("space.5"), "Section gap below `breakpoint.sm`."),
   component("page.contentStackGap", ref("space.5"), "Gap inside a content stack."),

package/dist/contrast-cli.js

@@ -705,6 +705,10 @@ var HEADING_MAX_PX = FONT_SIZE_PX.xl * 1.6;
 var H2_PX = Math.round(FONT_SIZE_PX.xl * 1.3);
 var H3_PX = Math.round(FONT_SIZE_PX.xl * 1.1);
 var HEADING_LINE_HEIGHT_RATIO = 1.3;
+var DISPLAY_MIN_PX = Math.round(FONT_SIZE_PX.xl * 1.8);
+var DISPLAY_MAX_PX = Math.round(FONT_SIZE_PX.xl * 3.2);
+var LEAD_PX = Math.round(FONT_SIZE_PX.xl * 0.9);
+var LEAD_LINE_HEIGHT_RATIO = 1.5;
 var page = [
   component(
     "page.headingSize",
@@ -736,6 +740,26 @@ var page = [
     value(`${roundHalfUp(H3_PX * HEADING_LINE_HEIGHT_RATIO)}px`),
     "Line height paired with `page.subHeadingSize`, at the 1.30 heading ratio."
   ),
+  component(
+    "page.displaySize",
+    value(`clamp(${DISPLAY_MIN_PX}px, 5.5vw, ${DISPLAY_MAX_PX}px)`),
+    "Display heading for a landing hero, derived from `font.size.xl` (\xD7 1.8 and \xD7 3.2). One step above `page.headingSize`; never a body size (CR-042)."
+  ),
+  component(
+    "page.displayLineHeight",
+    value("1.04"),
+    "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here."
+  ),
+  component(
+    "page.leadSize",
+    value(`${LEAD_PX}px`),
+    "Lead paragraph under a page or hero heading. `font.size.xl` \xD7 0.9; sits between `font.size.lg` and `font.size.xl` (CR-042)."
+  ),
+  component(
+    "page.leadLineHeight",
+    value(`${roundHalfUp(LEAD_PX * LEAD_LINE_HEIGHT_RATIO)}px`),
+    "Line height paired with `page.leadSize`, at the 1.50 body ratio."
+  ),
   component("page.stackGap", ref("space.6"), "Gap between page sections."),
   component("page.stackGapCompact", ref("space.5"), "Section gap below `breakpoint.sm`."),
   component("page.contentStackGap", ref("space.5"), "Gap inside a content stack."),

package/dist/contrast-report.json

@@ -14,7 +14,7 @@
     "checks": 232,
     "passed": 232,
     "failed": 0,
-    "excludedTokens": 232,
+    "excludedTokens": 236,
     "forbiddenPairs": 2
   },
   "results": [
@@ -4031,6 +4031,26 @@
       "usage": "decorative",
       "reason": "Line height paired with `page.subHeadingSize`, at the 1.30 heading ratio."
     },
+    {
+      "key": "page.displaySize",
+      "usage": "decorative",
+      "reason": "Display heading for a landing hero, derived from `font.size.xl` (× 1.8 and × 3.2). One step above `page.headingSize`; never a body size (CR-042)."
+    },
+    {
+      "key": "page.displayLineHeight",
+      "usage": "decorative",
+      "reason": "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here."
+    },
+    {
+      "key": "page.leadSize",
+      "usage": "decorative",
+      "reason": "Lead paragraph under a page or hero heading. `font.size.xl` × 0.9; sits between `font.size.lg` and `font.size.xl` (CR-042)."
+    },
+    {
+      "key": "page.leadLineHeight",
+      "usage": "decorative",
+      "reason": "Line height paired with `page.leadSize`, at the 1.50 body ratio."
+    },
     {
       "key": "page.stackGap",
       "usage": "decorative",

package/dist/index.js

@@ -380,6 +380,10 @@ var tokens = {
     sectionHeadingLineHeight: "var(--cdt-page-section-heading-line-height)",
     subHeadingSize: "var(--cdt-page-sub-heading-size)",
     subHeadingLineHeight: "var(--cdt-page-sub-heading-line-height)",
+    displaySize: "var(--cdt-page-display-size)",
+    displayLineHeight: "var(--cdt-page-display-line-height)",
+    leadSize: "var(--cdt-page-lead-size)",
+    leadLineHeight: "var(--cdt-page-lead-line-height)",
     stackGap: "var(--cdt-page-stack-gap)",
     stackGapCompact: "var(--cdt-page-stack-gap-compact)",
     contentStackGap: "var(--cdt-page-content-stack-gap)",

package/dist/tokens.css

@@ -310,6 +310,10 @@
   --cdt-page-section-heading-line-height: 34px;
   --cdt-page-sub-heading-size: 22px;
   --cdt-page-sub-heading-line-height: 29px;
+  --cdt-page-display-size: clamp(36px, 5.5vw, 64px);
+  --cdt-page-display-line-height: 1.04;
+  --cdt-page-lead-size: 18px;
+  --cdt-page-lead-line-height: 27px;
   --cdt-page-stack-gap: 32px;
   --cdt-page-stack-gap-compact: 24px;
   --cdt-page-content-stack-gap: 24px;
@@ -659,6 +663,10 @@
   --cdt-page-section-heading-line-height: 34px;
   --cdt-page-sub-heading-size: 22px;
   --cdt-page-sub-heading-line-height: 29px;
+  --cdt-page-display-size: clamp(36px, 5.5vw, 64px);
+  --cdt-page-display-line-height: 1.04;
+  --cdt-page-lead-size: 18px;
+  --cdt-page-lead-line-height: 27px;
   --cdt-page-stack-gap: 32px;
   --cdt-page-stack-gap-compact: 24px;
   --cdt-page-content-stack-gap: 24px;
@@ -1009,6 +1017,10 @@
   --cdt-page-section-heading-line-height: 34px;
   --cdt-page-sub-heading-size: 22px;
   --cdt-page-sub-heading-line-height: 29px;
+  --cdt-page-display-size: clamp(36px, 5.5vw, 64px);
+  --cdt-page-display-line-height: 1.04;
+  --cdt-page-lead-size: 18px;
+  --cdt-page-lead-line-height: 27px;
   --cdt-page-stack-gap: 32px;
   --cdt-page-stack-gap-compact: 24px;
   --cdt-page-content-stack-gap: 24px;

package/dist/tokens.d.ts

@@ -382,6 +382,10 @@ declare const tokens: {
         readonly sectionHeadingLineHeight: "var(--cdt-page-section-heading-line-height)";
         readonly subHeadingSize: "var(--cdt-page-sub-heading-size)";
         readonly subHeadingLineHeight: "var(--cdt-page-sub-heading-line-height)";
+        readonly displaySize: "var(--cdt-page-display-size)";
+        readonly displayLineHeight: "var(--cdt-page-display-line-height)";
+        readonly leadSize: "var(--cdt-page-lead-size)";
+        readonly leadLineHeight: "var(--cdt-page-lead-line-height)";
         readonly stackGap: "var(--cdt-page-stack-gap)";
         readonly stackGapCompact: "var(--cdt-page-stack-gap-compact)";
         readonly contentStackGap: "var(--cdt-page-content-stack-gap)";

package/dist/tokens.js

@@ -376,6 +376,10 @@ var tokens = {
     sectionHeadingLineHeight: "var(--cdt-page-section-heading-line-height)",
     subHeadingSize: "var(--cdt-page-sub-heading-size)",
     subHeadingLineHeight: "var(--cdt-page-sub-heading-line-height)",
+    displaySize: "var(--cdt-page-display-size)",
+    displayLineHeight: "var(--cdt-page-display-line-height)",
+    leadSize: "var(--cdt-page-lead-size)",
+    leadLineHeight: "var(--cdt-page-lead-line-height)",
     stackGap: "var(--cdt-page-stack-gap)",
     stackGapCompact: "var(--cdt-page-stack-gap-compact)",
     contentStackGap: "var(--cdt-page-content-stack-gap)",

package/dist/tokens.json

@@ -3125,6 +3125,50 @@
         "light": "29px"
       }
     },
+    {
+      "key": "page.displaySize",
+      "cssName": "--cdt-page-display-size",
+      "tier": "component",
+      "usage": "decorative",
+      "description": "Display heading for a landing hero, derived from `font.size.xl` (× 1.8 and × 3.2). One step above `page.headingSize`; never a body size (CR-042).",
+      "values": {
+        "dark": "clamp(36px, 5.5vw, 64px)",
+        "light": "clamp(36px, 5.5vw, 64px)"
+      }
+    },
+    {
+      "key": "page.displayLineHeight",
+      "cssName": "--cdt-page-display-line-height",
+      "tier": "component",
+      "usage": "decorative",
+      "description": "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here.",
+      "values": {
+        "dark": "1.04",
+        "light": "1.04"
+      }
+    },
+    {
+      "key": "page.leadSize",
+      "cssName": "--cdt-page-lead-size",
+      "tier": "component",
+      "usage": "decorative",
+      "description": "Lead paragraph under a page or hero heading. `font.size.xl` × 0.9; sits between `font.size.lg` and `font.size.xl` (CR-042).",
+      "values": {
+        "dark": "18px",
+        "light": "18px"
+      }
+    },
+    {
+      "key": "page.leadLineHeight",
+      "cssName": "--cdt-page-lead-line-height",
+      "tier": "component",
+      "usage": "decorative",
+      "description": "Line height paired with `page.leadSize`, at the 1.50 body ratio.",
+      "values": {
+        "dark": "27px",
+        "light": "27px"
+      }
+    },
     {
       "key": "page.stackGap",
       "cssName": "--cdt-page-stack-gap",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conductor-by-89soone/tokens",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Theme-aware design tokens and validation CLIs for Conductor.",
   "license": "MIT",
   "homepage": "https://89sooner.github.io/design-system/",