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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cli.js CHANGED
@@ -484,6 +484,10 @@ var HEADING_MAX_PX = FONT_SIZE_PX.xl * 1.6;
484
484
  var H2_PX = Math.round(FONT_SIZE_PX.xl * 1.3);
485
485
  var H3_PX = Math.round(FONT_SIZE_PX.xl * 1.1);
486
486
  var HEADING_LINE_HEIGHT_RATIO = 1.3;
487
+ var DISPLAY_MIN_PX = Math.round(FONT_SIZE_PX.xl * 1.8);
488
+ var DISPLAY_MAX_PX = Math.round(FONT_SIZE_PX.xl * 3.2);
489
+ var LEAD_PX = Math.round(FONT_SIZE_PX.xl * 0.9);
490
+ var LEAD_LINE_HEIGHT_RATIO = 1.5;
487
491
  var page = [
488
492
  component(
489
493
  "page.headingSize",
@@ -515,6 +519,26 @@ var page = [
515
519
  value(`${roundHalfUp(H3_PX * HEADING_LINE_HEIGHT_RATIO)}px`),
516
520
  "Line height paired with `page.subHeadingSize`, at the 1.30 heading ratio."
517
521
  ),
522
+ component(
523
+ "page.displaySize",
524
+ value(`clamp(${DISPLAY_MIN_PX}px, 5.5vw, ${DISPLAY_MAX_PX}px)`),
525
+ "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)."
526
+ ),
527
+ component(
528
+ "page.displayLineHeight",
529
+ value("1.04"),
530
+ "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here."
531
+ ),
532
+ component(
533
+ "page.leadSize",
534
+ value(`${LEAD_PX}px`),
535
+ "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)."
536
+ ),
537
+ component(
538
+ "page.leadLineHeight",
539
+ value(`${roundHalfUp(LEAD_PX * LEAD_LINE_HEIGHT_RATIO)}px`),
540
+ "Line height paired with `page.leadSize`, at the 1.50 body ratio."
541
+ ),
518
542
  component("page.stackGap", ref("space.6"), "Gap between page sections."),
519
543
  component("page.stackGapCompact", ref("space.5"), "Section gap below `breakpoint.sm`."),
520
544
  component("page.contentStackGap", ref("space.5"), "Gap inside a content stack."),
@@ -556,6 +580,11 @@ var shell = [
556
580
  component("topBar.titleText", ref("text.secondary"), "TopBar context title."),
557
581
  component("topBar.minHeight", value("68px"), "TopBar minimum height.")
558
582
  ];
583
+ var workbench = [
584
+ component("workbench.background", ref("surface.canvas"), "Flat workspace surface."),
585
+ component("workbench.compactPadding", ref("space.2"), "Opt-in compact table cell padding."),
586
+ component("workbench.listHeight", value("240px"), "Bounded combobox option viewport.")
587
+ ];
559
588
  var componentTokens = [
560
589
  ...button,
561
590
  ...card,
@@ -572,7 +601,8 @@ var componentTokens = [
572
601
  ...input,
573
602
  ...overlay,
574
603
  ...page,
575
- ...shell
604
+ ...shell,
605
+ ...workbench
576
606
  ];
577
607
 
578
608
  // src/palette.dark.ts
@@ -705,6 +705,10 @@ var HEADING_MAX_PX = FONT_SIZE_PX.xl * 1.6;
705
705
  var H2_PX = Math.round(FONT_SIZE_PX.xl * 1.3);
706
706
  var H3_PX = Math.round(FONT_SIZE_PX.xl * 1.1);
707
707
  var HEADING_LINE_HEIGHT_RATIO = 1.3;
708
+ var DISPLAY_MIN_PX = Math.round(FONT_SIZE_PX.xl * 1.8);
709
+ var DISPLAY_MAX_PX = Math.round(FONT_SIZE_PX.xl * 3.2);
710
+ var LEAD_PX = Math.round(FONT_SIZE_PX.xl * 0.9);
711
+ var LEAD_LINE_HEIGHT_RATIO = 1.5;
708
712
  var page = [
709
713
  component(
710
714
  "page.headingSize",
@@ -736,6 +740,26 @@ var page = [
736
740
  value(`${roundHalfUp(H3_PX * HEADING_LINE_HEIGHT_RATIO)}px`),
737
741
  "Line height paired with `page.subHeadingSize`, at the 1.30 heading ratio."
738
742
  ),
743
+ component(
744
+ "page.displaySize",
745
+ value(`clamp(${DISPLAY_MIN_PX}px, 5.5vw, ${DISPLAY_MAX_PX}px)`),
746
+ "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)."
747
+ ),
748
+ component(
749
+ "page.displayLineHeight",
750
+ value("1.04"),
751
+ "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here."
752
+ ),
753
+ component(
754
+ "page.leadSize",
755
+ value(`${LEAD_PX}px`),
756
+ "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)."
757
+ ),
758
+ component(
759
+ "page.leadLineHeight",
760
+ value(`${roundHalfUp(LEAD_PX * LEAD_LINE_HEIGHT_RATIO)}px`),
761
+ "Line height paired with `page.leadSize`, at the 1.50 body ratio."
762
+ ),
739
763
  component("page.stackGap", ref("space.6"), "Gap between page sections."),
740
764
  component("page.stackGapCompact", ref("space.5"), "Section gap below `breakpoint.sm`."),
741
765
  component("page.contentStackGap", ref("space.5"), "Gap inside a content stack."),
@@ -777,6 +801,11 @@ var shell = [
777
801
  component("topBar.titleText", ref("text.secondary"), "TopBar context title."),
778
802
  component("topBar.minHeight", value("68px"), "TopBar minimum height.")
779
803
  ];
804
+ var workbench = [
805
+ component("workbench.background", ref("surface.canvas"), "Flat workspace surface."),
806
+ component("workbench.compactPadding", ref("space.2"), "Opt-in compact table cell padding."),
807
+ component("workbench.listHeight", value("240px"), "Bounded combobox option viewport.")
808
+ ];
780
809
  var componentTokens = [
781
810
  ...button,
782
811
  ...card,
@@ -793,7 +822,8 @@ var componentTokens = [
793
822
  ...input,
794
823
  ...overlay,
795
824
  ...page,
796
- ...shell
825
+ ...shell,
826
+ ...workbench
797
827
  ];
798
828
 
799
829
  // src/palette.dark.ts
@@ -14,7 +14,7 @@
14
14
  "checks": 232,
15
15
  "passed": 232,
16
16
  "failed": 0,
17
- "excludedTokens": 229,
17
+ "excludedTokens": 236,
18
18
  "forbiddenPairs": 2
19
19
  },
20
20
  "results": [
@@ -4031,6 +4031,26 @@
4031
4031
  "usage": "decorative",
4032
4032
  "reason": "Line height paired with `page.subHeadingSize`, at the 1.30 heading ratio."
4033
4033
  },
4034
+ {
4035
+ "key": "page.displaySize",
4036
+ "usage": "decorative",
4037
+ "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)."
4038
+ },
4039
+ {
4040
+ "key": "page.displayLineHeight",
4041
+ "usage": "decorative",
4042
+ "reason": "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here."
4043
+ },
4044
+ {
4045
+ "key": "page.leadSize",
4046
+ "usage": "decorative",
4047
+ "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)."
4048
+ },
4049
+ {
4050
+ "key": "page.leadLineHeight",
4051
+ "usage": "decorative",
4052
+ "reason": "Line height paired with `page.leadSize`, at the 1.50 body ratio."
4053
+ },
4034
4054
  {
4035
4055
  "key": "page.stackGap",
4036
4056
  "usage": "decorative",
@@ -4180,6 +4200,21 @@
4180
4200
  "key": "topBar.minHeight",
4181
4201
  "usage": "decorative",
4182
4202
  "reason": "TopBar minimum height."
4203
+ },
4204
+ {
4205
+ "key": "workbench.background",
4206
+ "usage": "decorative",
4207
+ "reason": "Flat workspace surface."
4208
+ },
4209
+ {
4210
+ "key": "workbench.compactPadding",
4211
+ "usage": "decorative",
4212
+ "reason": "Opt-in compact table cell padding."
4213
+ },
4214
+ {
4215
+ "key": "workbench.listHeight",
4216
+ "usage": "decorative",
4217
+ "reason": "Bounded combobox option viewport."
4183
4218
  }
4184
4219
  ],
4185
4220
  "forbidden": [
package/dist/index.js CHANGED
@@ -380,6 +380,10 @@ var tokens = {
380
380
  sectionHeadingLineHeight: "var(--cdt-page-section-heading-line-height)",
381
381
  subHeadingSize: "var(--cdt-page-sub-heading-size)",
382
382
  subHeadingLineHeight: "var(--cdt-page-sub-heading-line-height)",
383
+ displaySize: "var(--cdt-page-display-size)",
384
+ displayLineHeight: "var(--cdt-page-display-line-height)",
385
+ leadSize: "var(--cdt-page-lead-size)",
386
+ leadLineHeight: "var(--cdt-page-lead-line-height)",
383
387
  stackGap: "var(--cdt-page-stack-gap)",
384
388
  stackGapCompact: "var(--cdt-page-stack-gap-compact)",
385
389
  contentStackGap: "var(--cdt-page-content-stack-gap)",
@@ -421,6 +425,11 @@ var tokens = {
421
425
  eyebrowText: "var(--cdt-top-bar-eyebrow-text)",
422
426
  titleText: "var(--cdt-top-bar-title-text)",
423
427
  minHeight: "var(--cdt-top-bar-min-height)"
428
+ },
429
+ workbench: {
430
+ background: "var(--cdt-workbench-background)",
431
+ compactPadding: "var(--cdt-workbench-compact-padding)",
432
+ listHeight: "var(--cdt-workbench-list-height)"
424
433
  }
425
434
  };
426
435
 
package/dist/tokens.css CHANGED
@@ -310,6 +310,10 @@
310
310
  --cdt-page-section-heading-line-height: 34px;
311
311
  --cdt-page-sub-heading-size: 22px;
312
312
  --cdt-page-sub-heading-line-height: 29px;
313
+ --cdt-page-display-size: clamp(36px, 5.5vw, 64px);
314
+ --cdt-page-display-line-height: 1.04;
315
+ --cdt-page-lead-size: 18px;
316
+ --cdt-page-lead-line-height: 27px;
313
317
  --cdt-page-stack-gap: 32px;
314
318
  --cdt-page-stack-gap-compact: 24px;
315
319
  --cdt-page-content-stack-gap: 24px;
@@ -347,6 +351,10 @@
347
351
  --cdt-top-bar-eyebrow-text: #5f6d80;
348
352
  --cdt-top-bar-title-text: #c5cfdd;
349
353
  --cdt-top-bar-min-height: 68px;
354
+
355
+ --cdt-workbench-background: #0b101a;
356
+ --cdt-workbench-compact-padding: 8px;
357
+ --cdt-workbench-list-height: 240px;
350
358
  }
351
359
 
352
360
  :root[data-cdt-theme="light"] {
@@ -655,6 +663,10 @@
655
663
  --cdt-page-section-heading-line-height: 34px;
656
664
  --cdt-page-sub-heading-size: 22px;
657
665
  --cdt-page-sub-heading-line-height: 29px;
666
+ --cdt-page-display-size: clamp(36px, 5.5vw, 64px);
667
+ --cdt-page-display-line-height: 1.04;
668
+ --cdt-page-lead-size: 18px;
669
+ --cdt-page-lead-line-height: 27px;
658
670
  --cdt-page-stack-gap: 32px;
659
671
  --cdt-page-stack-gap-compact: 24px;
660
672
  --cdt-page-content-stack-gap: 24px;
@@ -692,6 +704,10 @@
692
704
  --cdt-top-bar-eyebrow-text: #6b788c;
693
705
  --cdt-top-bar-title-text: #33415a;
694
706
  --cdt-top-bar-min-height: 68px;
707
+
708
+ --cdt-workbench-background: #eef1f6;
709
+ --cdt-workbench-compact-padding: 8px;
710
+ --cdt-workbench-list-height: 240px;
695
711
  }
696
712
 
697
713
  @media (prefers-color-scheme: light) {
@@ -1001,6 +1017,10 @@
1001
1017
  --cdt-page-section-heading-line-height: 34px;
1002
1018
  --cdt-page-sub-heading-size: 22px;
1003
1019
  --cdt-page-sub-heading-line-height: 29px;
1020
+ --cdt-page-display-size: clamp(36px, 5.5vw, 64px);
1021
+ --cdt-page-display-line-height: 1.04;
1022
+ --cdt-page-lead-size: 18px;
1023
+ --cdt-page-lead-line-height: 27px;
1004
1024
  --cdt-page-stack-gap: 32px;
1005
1025
  --cdt-page-stack-gap-compact: 24px;
1006
1026
  --cdt-page-content-stack-gap: 24px;
@@ -1038,5 +1058,9 @@
1038
1058
  --cdt-top-bar-eyebrow-text: #6b788c;
1039
1059
  --cdt-top-bar-title-text: #33415a;
1040
1060
  --cdt-top-bar-min-height: 68px;
1061
+
1062
+ --cdt-workbench-background: #eef1f6;
1063
+ --cdt-workbench-compact-padding: 8px;
1064
+ --cdt-workbench-list-height: 240px;
1041
1065
  }
1042
1066
  }
package/dist/tokens.d.ts CHANGED
@@ -382,6 +382,10 @@ declare const tokens: {
382
382
  readonly sectionHeadingLineHeight: "var(--cdt-page-section-heading-line-height)";
383
383
  readonly subHeadingSize: "var(--cdt-page-sub-heading-size)";
384
384
  readonly subHeadingLineHeight: "var(--cdt-page-sub-heading-line-height)";
385
+ readonly displaySize: "var(--cdt-page-display-size)";
386
+ readonly displayLineHeight: "var(--cdt-page-display-line-height)";
387
+ readonly leadSize: "var(--cdt-page-lead-size)";
388
+ readonly leadLineHeight: "var(--cdt-page-lead-line-height)";
385
389
  readonly stackGap: "var(--cdt-page-stack-gap)";
386
390
  readonly stackGapCompact: "var(--cdt-page-stack-gap-compact)";
387
391
  readonly contentStackGap: "var(--cdt-page-content-stack-gap)";
@@ -424,6 +428,11 @@ declare const tokens: {
424
428
  readonly titleText: "var(--cdt-top-bar-title-text)";
425
429
  readonly minHeight: "var(--cdt-top-bar-min-height)";
426
430
  };
431
+ readonly workbench: {
432
+ readonly background: "var(--cdt-workbench-background)";
433
+ readonly compactPadding: "var(--cdt-workbench-compact-padding)";
434
+ readonly listHeight: "var(--cdt-workbench-list-height)";
435
+ };
427
436
  };
428
437
  /** Shape of the token object, with every leaf narrowed to its own string literal. */
429
438
  type Tokens = typeof tokens;
package/dist/tokens.js CHANGED
@@ -376,6 +376,10 @@ var tokens = {
376
376
  sectionHeadingLineHeight: "var(--cdt-page-section-heading-line-height)",
377
377
  subHeadingSize: "var(--cdt-page-sub-heading-size)",
378
378
  subHeadingLineHeight: "var(--cdt-page-sub-heading-line-height)",
379
+ displaySize: "var(--cdt-page-display-size)",
380
+ displayLineHeight: "var(--cdt-page-display-line-height)",
381
+ leadSize: "var(--cdt-page-lead-size)",
382
+ leadLineHeight: "var(--cdt-page-lead-line-height)",
379
383
  stackGap: "var(--cdt-page-stack-gap)",
380
384
  stackGapCompact: "var(--cdt-page-stack-gap-compact)",
381
385
  contentStackGap: "var(--cdt-page-content-stack-gap)",
@@ -417,6 +421,11 @@ var tokens = {
417
421
  eyebrowText: "var(--cdt-top-bar-eyebrow-text)",
418
422
  titleText: "var(--cdt-top-bar-title-text)",
419
423
  minHeight: "var(--cdt-top-bar-min-height)"
424
+ },
425
+ workbench: {
426
+ background: "var(--cdt-workbench-background)",
427
+ compactPadding: "var(--cdt-workbench-compact-padding)",
428
+ listHeight: "var(--cdt-workbench-list-height)"
420
429
  }
421
430
  };
422
431
 
package/dist/tokens.json CHANGED
@@ -3125,6 +3125,50 @@
3125
3125
  "light": "29px"
3126
3126
  }
3127
3127
  },
3128
+ {
3129
+ "key": "page.displaySize",
3130
+ "cssName": "--cdt-page-display-size",
3131
+ "tier": "component",
3132
+ "usage": "decorative",
3133
+ "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).",
3134
+ "values": {
3135
+ "dark": "clamp(36px, 5.5vw, 64px)",
3136
+ "light": "clamp(36px, 5.5vw, 64px)"
3137
+ }
3138
+ },
3139
+ {
3140
+ "key": "page.displayLineHeight",
3141
+ "cssName": "--cdt-page-display-line-height",
3142
+ "tier": "component",
3143
+ "usage": "decorative",
3144
+ "description": "Unitless like `page.headingLineHeight`: `clamp()` makes a px value impossible here.",
3145
+ "values": {
3146
+ "dark": "1.04",
3147
+ "light": "1.04"
3148
+ }
3149
+ },
3150
+ {
3151
+ "key": "page.leadSize",
3152
+ "cssName": "--cdt-page-lead-size",
3153
+ "tier": "component",
3154
+ "usage": "decorative",
3155
+ "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).",
3156
+ "values": {
3157
+ "dark": "18px",
3158
+ "light": "18px"
3159
+ }
3160
+ },
3161
+ {
3162
+ "key": "page.leadLineHeight",
3163
+ "cssName": "--cdt-page-lead-line-height",
3164
+ "tier": "component",
3165
+ "usage": "decorative",
3166
+ "description": "Line height paired with `page.leadSize`, at the 1.50 body ratio.",
3167
+ "values": {
3168
+ "dark": "27px",
3169
+ "light": "27px"
3170
+ }
3171
+ },
3128
3172
  {
3129
3173
  "key": "page.stackGap",
3130
3174
  "cssName": "--cdt-page-stack-gap",
@@ -3476,6 +3520,41 @@
3476
3520
  "dark": "68px",
3477
3521
  "light": "68px"
3478
3522
  }
3523
+ },
3524
+ {
3525
+ "key": "workbench.background",
3526
+ "cssName": "--cdt-workbench-background",
3527
+ "tier": "component",
3528
+ "usage": "decorative",
3529
+ "description": "Flat workspace surface.",
3530
+ "alias": "surface.canvas",
3531
+ "values": {
3532
+ "dark": "#0b101a",
3533
+ "light": "#eef1f6"
3534
+ }
3535
+ },
3536
+ {
3537
+ "key": "workbench.compactPadding",
3538
+ "cssName": "--cdt-workbench-compact-padding",
3539
+ "tier": "component",
3540
+ "usage": "decorative",
3541
+ "description": "Opt-in compact table cell padding.",
3542
+ "alias": "space.2",
3543
+ "values": {
3544
+ "dark": "8px",
3545
+ "light": "8px"
3546
+ }
3547
+ },
3548
+ {
3549
+ "key": "workbench.listHeight",
3550
+ "cssName": "--cdt-workbench-list-height",
3551
+ "tier": "component",
3552
+ "usage": "decorative",
3553
+ "description": "Bounded combobox option viewport.",
3554
+ "values": {
3555
+ "dark": "240px",
3556
+ "light": "240px"
3557
+ }
3479
3558
  }
3480
3559
  ]
3481
3560
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conductor-by-89soone/tokens",
3
- "version": "0.3.0",
3
+ "version": "0.5.0",
4
4
  "description": "Theme-aware design tokens and validation CLIs for Conductor.",
5
5
  "license": "MIT",
6
6
  "homepage": "https://89sooner.github.io/design-system/",