@repobit/dex-system-design 0.25.11 → 0.26.0

package/schemas/manifest-omissions.json

@@ -0,0 +1,173 @@
+[
+ "bd-accordion-bg-item: component declares \"guideHref\" but the manifest omits it",
+ "bd-accordion-bg-item: component declares \"guideIcon\" but the manifest omits it",
+ "bd-accordion-bg-item: component declares \"guideLabel\" but the manifest omits it",
+ "bd-accordion-bg-item: component declares \"variant\" but the manifest omits it",
+ "bd-accordion-bg: component declares \"guideHref\" but the manifest omits it",
+ "bd-accordion-bg: component declares \"guideIcon\" but the manifest omits it",
+ "bd-accordion-bg: component declares \"guideLabel\" but the manifest omits it",
+ "bd-accordion-bg: component declares \"open\" but the manifest omits it",
+ "bd-accordion-bg: component declares \"variant\" but the manifest omits it",
+ "bd-accordion-item: component declares \"guideHref\" but the manifest omits it",
+ "bd-accordion-item: component declares \"guideIcon\" but the manifest omits it",
+ "bd-accordion-item: component declares \"guideLabel\" but the manifest omits it",
+ "bd-accordion-item: component declares \"noContainer\" but the manifest omits it",
+ "bd-accordion-item: component declares \"variant\" but the manifest omits it",
+ "bd-accordion-section: component declares \"noContainer\" but the manifest omits it",
+ "bd-accordion-section: component declares \"open\" but the manifest omits it",
+ "bd-anchor-nav-item: component declares \"ctaHref\" but the manifest omits it",
+ "bd-anchor-nav-item: component declares \"ctaLabel\" but the manifest omits it",
+ "bd-anchor-nav-item: component declares \"items\" but the manifest omits it",
+ "bd-anchor-nav-item: component declares \"maxWidth\" but the manifest omits it",
+ "bd-anchor-nav-item: component declares \"navLabel\" but the manifest omits it",
+ "bd-anchor-nav-item: component declares \"stickyTop\" but the manifest omits it",
+ "bd-anchor-nav: component declares \"ctaHref\" but the manifest omits it",
+ "bd-anchor-nav: component declares \"ctaLabel\" but the manifest omits it",
+ "bd-anchor-nav: component declares \"items\" but the manifest omits it",
+ "bd-anchor-nav: component declares \"maxWidth\" but the manifest omits it",
+ "bd-button: component declares \"buyLink\" but the manifest omits it",
+ "bd-button: component declares \"href\" but the manifest omits it",
+ "bd-button: component declares \"rel\" but the manifest omits it",
+ "bd-button: component declares \"target\" but the manifest omits it",
+ "bd-card-item is registered by ./cards but absent from the manifest",
+ "bd-card-section is registered by ./cards but absent from the manifest",
+ "bd-carousel-item: component declares \"selectedItem\" but the manifest omits it",
+ "bd-carousel-section: component declares \"icon\" but the manifest omits it",
+ "bd-carousel-section: component declares \"modalText\" but the manifest omits it",
+ "bd-compare-section: component declares \"barFillMin\" but the manifest omits it",
+ "bd-compare-section: component declares \"barStretch\" but the manifest omits it",
+ "bd-compare-section: component declares \"barStretchGamma\" but the manifest omits it",
+ "bd-compare-section: component declares \"chartScale\" but the manifest omits it",
+ "bd-compare-section: component declares \"description\" but the manifest omits it",
+ "bd-compare-section: component declares \"footnote\" but the manifest omits it",
+ "bd-compare-section: component declares \"footnoteHref\" but the manifest omits it",
+ "bd-compare-section: component declares \"iconSrc\" but the manifest omits it",
+ "bd-compare-section: component declares \"label\" but the manifest omits it",
+ "bd-compare-section: component declares \"layout\" but the manifest omits it",
+ "bd-compare-section: component declares \"maxScore\" but the manifest omits it",
+ "bd-compare-section: component declares \"referenceScore\" but the manifest omits it",
+ "bd-compare-section: component declares \"scale\" but the manifest omits it",
+ "bd-compare-section: component declares \"score\" but the manifest omits it",
+ "bd-compare-section: component declares \"scoreLabel\" but the manifest omits it",
+ "bd-compare-section: component declares \"variant\" but the manifest omits it",
+ "bd-contact-button: component declares \"buyLink\" but the manifest omits it",
+ "bd-contact-button: component declares \"disabled\" but the manifest omits it",
+ "bd-contact-button: component declares \"fontSize\" but the manifest omits it",
+ "bd-contact-button: component declares \"fontWeight\" but the manifest omits it",
+ "bd-contact-button: component declares \"fullWidth\" but the manifest omits it",
+ "bd-contact-button: component declares \"iconOnly\" but the manifest omits it",
+ "bd-contact-button: component declares \"kind\" but the manifest omits it",
+ "bd-contact-button: component declares \"loading\" but the manifest omits it",
+ "bd-contact-button: component declares \"noArrow\" but the manifest omits it",
+ "bd-contact-button: component declares \"rel\" but the manifest omits it",
+ "bd-contact-button: component declares \"size\" but the manifest omits it",
+ "bd-contact-button: component declares \"strong\" but the manifest omits it",
+ "bd-contact-button: component declares \"surface\" but the manifest omits it",
+ "bd-contact-button: component declares \"target\" but the manifest omits it",
+ "bd-feature-col is registered by ./features but absent from the manifest",
+ "bd-features is registered by ./features but absent from the manifest",
+ "bd-features-tab is registered by ./features-tab but absent from the manifest",
+ "bd-highlight: component declares \"as\" but the manifest omits it",
+ "bd-light-carousel-section: component declares \"badge\" but the manifest omits it",
+ "bd-light-carousel-section: component declares \"icon\" but the manifest omits it",
+ "bd-link: component declares \"active\" but the manifest omits it",
+ "bd-link: component declares \"noUnderline\" but the manifest omits it",
+ "bd-pricing-container: component declares \"features\" but the manifest omits it",
+ "bd-pricing-container: component declares \"highlight\" but the manifest omits it",
+ "bd-pricing-container: component declares \"identity\" but the manifest omits it",
+ "bd-pricing-container: component declares \"identityExtended\" but the manifest omits it",
+ "bd-pricing-container: component declares \"parentalControl\" but the manifest omits it",
+ "bd-pricing-container: component declares \"privacy\" but the manifest omits it",
+ "bd-pricing-container: component declares \"productId\" but the manifest omits it",
+ "bd-pricing-container: component declares \"title\" but the manifest omits it",
+ "bd-review is registered by ./review but absent from the manifest",
+ "bd-review-grid is registered by ./review-grid but absent from the manifest",
+ "bd-sub: component declares \"href\" but the manifest omits it",
+ "bd-sup: component declares \"href\" but the manifest omits it",
+ "bd-tab-panel is registered by ./tabs but absent from the manifest",
+ "bd-tabs is registered by ./tabs but absent from the manifest",
+ "compare-bar: component declares \"barFillMin\" but the manifest omits it",
+ "compare-bar: component declares \"barStretch\" but the manifest omits it",
+ "compare-bar: component declares \"barStretchGamma\" but the manifest omits it",
+ "compare-bar: component declares \"chartScale\" but the manifest omits it",
+ "compare-bar: component declares \"columns\" but the manifest omits it",
+ "compare-bar: component declares \"description\" but the manifest omits it",
+ "compare-bar: component declares \"footnote\" but the manifest omits it",
+ "compare-bar: component declares \"footnoteHref\" but the manifest omits it",
+ "compare-bar: component declares \"gap\" but the manifest omits it",
+ "compare-bar: component declares \"iconSrc\" but the manifest omits it",
+ "compare-bar: component declares \"layout\" but the manifest omits it",
+ "compare-bar: component declares \"subtitle\" but the manifest omits it",
+ "compare-bar: component declares \"title\" but the manifest omits it",
+ "compare-card: component declares \"columns\" but the manifest omits it",
+ "compare-card: component declares \"gap\" but the manifest omits it",
+ "compare-card: component declares \"label\" but the manifest omits it",
+ "compare-card: component declares \"layout\" but the manifest omits it",
+ "compare-card: component declares \"maxScore\" but the manifest omits it",
+ "compare-card: component declares \"referenceScore\" but the manifest omits it",
+ "compare-card: component declares \"scale\" but the manifest omits it",
+ "compare-card: component declares \"score\" but the manifest omits it",
+ "compare-card: component declares \"scoreLabel\" but the manifest omits it",
+ "compare-card: component declares \"subtitle\" but the manifest omits it",
+ "compare-card: component declares \"variant\" but the manifest omits it",
+ "pricing-card-features: component declares \"currency\" but the manifest omits it",
+ "pricing-card-features: component declares \"highlight\" but the manifest omits it",
+ "pricing-card-features: component declares \"identity\" but the manifest omits it",
+ "pricing-card-features: component declares \"identityExtended\" but the manifest omits it",
+ "pricing-card-features: component declares \"locale\" but the manifest omits it",
+ "pricing-card-features: component declares \"parentalControl\" but the manifest omits it",
+ "pricing-card-features: component declares \"planType\" but the manifest omits it",
+ "pricing-card-features: component declares \"privacy\" but the manifest omits it",
+ "pricing-card-features: component declares \"productId\" but the manifest omits it",
+ "pricing-card-features: component declares \"title\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"currency\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"features\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"highlight\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"identityExtended\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"locale\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"parentalControl\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"planType\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"privacy\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"productId\" but the manifest omits it",
+ "pricing-card-identity-extended: component declares \"title\" but the manifest omits it",
+ "pricing-card-identity: component declares \"currency\" but the manifest omits it",
+ "pricing-card-identity: component declares \"features\" but the manifest omits it",
+ "pricing-card-identity: component declares \"highlight\" but the manifest omits it",
+ "pricing-card-identity: component declares \"identityExtended\" but the manifest omits it",
+ "pricing-card-identity: component declares \"locale\" but the manifest omits it",
+ "pricing-card-identity: component declares \"parentalControl\" but the manifest omits it",
+ "pricing-card-identity: component declares \"planType\" but the manifest omits it",
+ "pricing-card-identity: component declares \"privacy\" but the manifest omits it",
+ "pricing-card-identity: component declares \"productId\" but the manifest omits it",
+ "pricing-card-identity: component declares \"title\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"currency\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"features\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"highlight\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"identity\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"identityExtended\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"locale\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"planType\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"privacy\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"productId\" but the manifest omits it",
+ "pricing-card-parental-control: component declares \"title\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"currency\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"features\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"highlight\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"identity\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"identityExtended\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"locale\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"parentalControl\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"planType\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"productId\" but the manifest omits it",
+ "pricing-card-privacy: component declares \"title\" but the manifest omits it",
+ "pricing-switch: component declares \"currency\" but the manifest omits it",
+ "pricing-switch: component declares \"features\" but the manifest omits it",
+ "pricing-switch: component declares \"highlight\" but the manifest omits it",
+ "pricing-switch: component declares \"identity\" but the manifest omits it",
+ "pricing-switch: component declares \"identityExtended\" but the manifest omits it",
+ "pricing-switch: component declares \"locale\" but the manifest omits it",
+ "pricing-switch: component declares \"parentalControl\" but the manifest omits it",
+ "pricing-switch: component declares \"privacy\" but the manifest omits it",
+ "pricing-switch: component declares \"productId\" but the manifest omits it",
+ "pricing-switch: component declares \"title\" but the manifest omits it"
+]

package/src/blog/src/breakpoints.js

@@ -1,11 +1,11 @@
 /** Breakpoint values in px — use in JS; CSS media queries cannot use var() */
 export const breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  xxl: 1400,
+  xs : 0,
+  sm : 576,
+  md : 768,
+  lg : 992,
+  xl : 1200,
+  xxl: 1400
 };
 
 /** Returns a min-width media query string for use in Lit css templates */

package/src/blog/src/content/blog-atoms-showcase.js

@@ -173,7 +173,7 @@ export class BlogAtomsShowcase extends BlogElement {
         <div class="grid">
           ${this._specimen(
             'blog-tag (brand — article + authors)',
-            '--blog-tag-brand-background · --color-blue-100 · --blog-tag-brand-color · --color-blue-800 · --typography-label-default-* · --dimension-20px · --spacing-8 gap',
+            '--blog-tag-brand-background · --color-blue-100 · --blog-tag-brand-color · --color-blue-800 · --typography-label-default-* · --dimension-20 · --spacing-8 gap',
             html`<div class="specimen__preview--tags">
               ${meta.tags.map(
                 (tag) => html`

package/src/blog/src/content/blog-page-layout.js

@@ -9,7 +9,7 @@ import { minWidth } from '../breakpoints.js';
  */
 export class BlogPageLayout extends BlogElement {
   static properties = {
-    relatedItems: { type: Array },
+    relatedItems: { type: Array }
   };
 
   constructor() {
@@ -44,7 +44,7 @@ export class BlogPageLayout extends BlogElement {
           margin-top: var(--spacing-64);
         }
       }
-    `,
+    `
   ];
 
   _relatedLayoutClass() {

package/src/blog/src/lib/article-toc.js

@@ -34,8 +34,8 @@ export function buildTocItems(blocks) {
   return blocks
     .filter((block) => block.type === 'subhead' && typeof block.text === 'string')
     .map((block) => ({
-      id: block.anchorId ?? slugify(block.text),
-      label: block.text,
+      id   : block.anchorId ?? slugify(block.text),
+      label: block.text
     }));
 }
 
@@ -49,7 +49,7 @@ export function buildTocItems(blocks) {
 export function scrollToHeading(el, offsetPx, behavior = 'smooth') {
   window.scrollTo({
     top: getHeadingDocumentTop(el) - offsetPx,
-    behavior,
+    behavior
   });
 }
 
@@ -87,7 +87,7 @@ export function resolveActiveTocId(headings, readingLineOffsetPx) {
 
   const titleZoneMax = Math.max(
     readingLineOffsetPx,
-    window.innerHeight * 0.3,
+    window.innerHeight * 0.3
   );
 
   let titleZoneActive = '';
@@ -182,8 +182,8 @@ export function splitBlocksForTocPlacement(blocks) {
   }
 
   return {
-    leading: blocks.slice(0, takeawaysIndex + 1),
-    trailing: blocks.slice(takeawaysIndex + 1),
+    leading : blocks.slice(0, takeawaysIndex + 1),
+    trailing: blocks.slice(takeawaysIndex + 1)
   };
 }
 
@@ -201,6 +201,6 @@ export function splitBodyAtFirstSubhead(blocks) {
 
   return {
     preamble: blocks.slice(0, subheadIndex),
-    sections: blocks.slice(subheadIndex),
+    sections: blocks.slice(subheadIndex)
   };
 }

package/src/blog/src/shell/blog-shell.js

@@ -20,7 +20,7 @@ export class BlogShell extends LitElement {
         color: var(--color-text-primary);
         background: var(--color-surface);
       }
-    `,
+    `
   ];
 
   render() {

package/src/blog/src/tokens/blog.js

@@ -107,7 +107,7 @@ export const blogVars = `
 --blog-byline-fontSize: var(--typography-fontSize-sm);
 --blog-byline-color: var(--color-text-secondary);
 --blog-byline-gap: var(--spacing-12);
---blog-byline-avatar-size: var(--dimension-40px);
+--blog-byline-avatar-size: var(--dimension-40);
 
 --blog-date-color: var(--color-text-muted);
 --blog-reading-time-color: var(--color-text-muted);
@@ -132,7 +132,7 @@ export const blogVars = `
 --blog-tag-padding: var(--spacing-4) var(--spacing-8);
 --blog-tag-fontSize: var(--typography-label-default-fontSize);
 --blog-tag-fontWeight: var(--typography-label-default-fontWeight);
---blog-tag-lineHeight: var(--dimension-20px);
+--blog-tag-lineHeight: var(--typography-lineHeight-snug);
 --blog-tag-borderRadius: var(--radius-full);
 --blog-tag-border-width: var(--border-width-1);
 --blog-tag-gap: var(--spacing-8);

package/src/blog/src/tokens/core.js

@@ -225,20 +225,19 @@ export const coreTokens = `
      CORE DIMENSION TOKENS
      ================================ */
 
---dimension-2px: 2px;
---dimension-4px: 4px;
---dimension-8px: 8px;
---dimension-12px: 12px;
---dimension-16px: 16px;
---dimension-20px: 20px;
---dimension-24px: 24px;
---dimension-32px: 32px;
---dimension-34px: 34px;
---dimension-40px: 40px;
---dimension-45px: 45px;
---dimension-48px: 48px;
---dimension-55px: 55px;
---dimension-64px: 64px;
+--dimension-4: 4px;
+--dimension-8: 8px;
+--dimension-12: 12px;
+--dimension-16: 16px;
+--dimension-20: 20px;
+--dimension-24: 24px;
+--dimension-32: 32px;
+--dimension-36: 36px;
+--dimension-40: 40px;
+--dimension-44: 44px;
+--dimension-48: 48px;
+--dimension-56: 56px;
+--dimension-64: 64px;
 
 /* ================================
      CORE TRANSITION TOKENS
@@ -548,17 +547,17 @@ export const coreTokens = `
 --form-label-required-color: var(--color-red-500);
 --form-label-required-marginLeft: var(--spacing-1);
 
---form-input-small-height: var(--dimension-34px);
+--form-input-small-height: var(--dimension-36);
 --form-input-small-fontSize: var(--typography-fontSize-sm);
 --form-input-small-padding: var(--spacing-8) var(--spacing-12);
 --form-input-small-borderRadius: var(--radius-sm);
 
---form-input-medium-height: var(--dimension-45px);
+--form-input-medium-height: var(--dimension-44);
 --form-input-medium-fontSize: var(--typography-fontSize-base);
 --form-input-medium-padding: var(--spacing-12) var(--spacing-16);
 --form-input-medium-borderRadius: var(--radius-md);
 
---form-input-large-height: var(--dimension-55px);
+--form-input-large-height: var(--dimension-56);
 --form-input-large-fontSize: var(--typography-fontSize-lg);
 --form-input-large-padding: var(--spacing-16) var(--spacing-20);
 --form-input-large-borderRadius: var(--radius-lg);
@@ -609,21 +608,21 @@ export const coreTokens = `
 --button-size-small-padding-vertical: var(--spacing-2);
 --button-size-small-padding-horizontal: var(--spacing-4);
 --button-size-small-fontSize: var(--typography-fontSize-sm);
---button-size-small-height: var(--dimension-34px);
+--button-size-small-height: var(--dimension-36);
 --button-size-small-borderRadius: var(--radius-sm);
 --button-size-small-gap: var(--spacing-1);
 
 --button-size-medium-padding-vertical: var(--spacing-12);
 --button-size-medium-padding-horizontal: var(--spacing-20);
 --button-size-medium-fontSize: var(--typography-fontSize-base);
---button-size-medium-height: var(--dimension-45px);
+--button-size-medium-height: var(--dimension-44);
 --button-size-medium-borderRadius: var(--radius-md);
 --button-size-medium-gap: var(--spacing-2);
 
 --button-size-large-padding-vertical: var(--spacing-4);
 --button-size-large-padding-horizontal: var(--spacing-6);
 --button-size-large-fontSize: var(--typography-fontSize-lg);
---button-size-large-height: var(--dimension-55px);
+--button-size-large-height: var(--dimension-56);
 --button-size-large-borderRadius: var(--radius-lg);
 --button-size-large-gap: var(--spacing-2);
 
@@ -780,21 +779,21 @@ export const coreTokens = `
      COMPONENT TOKENS - ICON
      ================================ */
 
---icon-xs-size: var(--dimension-12px);
---icon-sm-size: var(--dimension-16px);
---icon-md-size: var(--dimension-20px);
---icon-lg-size: var(--dimension-24px);
---icon-xl-size: var(--dimension-32px);
---icon-2xl-size: var(--dimension-48px);
---icon-3xl-size: var(--dimension-64px);
-
---icon-button-small-size: var(--dimension-16px);
---icon-button-medium-size: var(--dimension-20px);
---icon-button-large-size: var(--dimension-24px);
-
---icon-form-small-size: var(--dimension-16px);
---icon-form-medium-size: var(--dimension-20px);
---icon-form-large-size: var(--dimension-24px);
+--icon-xs-size: var(--dimension-12);
+--icon-sm-size: var(--dimension-16);
+--icon-md-size: var(--dimension-20);
+--icon-lg-size: var(--dimension-24);
+--icon-xl-size: var(--dimension-32);
+--icon-2xl-size: var(--dimension-48);
+--icon-3xl-size: var(--dimension-64);
+
+--icon-button-small-size: var(--dimension-16);
+--icon-button-medium-size: var(--dimension-20);
+--icon-button-large-size: var(--dimension-24);
+
+--icon-form-small-size: var(--dimension-16);
+--icon-form-medium-size: var(--dimension-20);
+--icon-form-large-size: var(--dimension-24);
 
 --icon-default-color: var(--color-text-secondary);
 --icon-hover-color: var(--color-neutral-700);

package/src/blog/src/tokens/legacy.js

@@ -21,25 +21,16 @@ export const legacyVars = `
 --display-large-mobile: 2.75rem;
 --display-xlarge-mobile: 3rem;
 
---display-xlarge-line-height: 1.1;
---display-medium-line-height: 1.15;
---display-xlarge-mobile-line-height: 1.15;
---display-medium-mobile-line-height: 1.2;
-
 /* Heading sizes (legacy names — map to current scale) */
 --heading-xxsmall: var(--typography-fontSize-lg);
 --heading-xsmall: var(--typography-fontSize-xl);
 --heading-medium: 1.75rem;
 --heading-xlarge: var(--typography-fontSize-4xl);
 --heading-xxlarge: 2.5rem;
---heading-xlarge-line-height: 1.2;
---typography-heading-h4-fontSize-line-height: 1.3;
 
 /* Body sizes (legacy names) */
 --body-small: 0.8125rem;
 --body-xlarge: var(--typography-fontSize-lg);
---typography-body-regular-fontSize-line-height: var(--typography-lineHeight-normal);
---typography-label-small-fontSize-line-height: 1.35;
 
 /* Font family shorthand (legacy) */
 --font-family-mono: var(--typography-fontFamily-mono);

package/src/blog/tokens/blog.js

@@ -107,7 +107,7 @@ export const blogVars = `
 --blog-byline-fontSize: var(--typography-fontSize-sm);
 --blog-byline-color: var(--color-text-secondary);
 --blog-byline-gap: var(--spacing-12);
---blog-byline-avatar-size: var(--dimension-40px);
+--blog-byline-avatar-size: var(--dimension-40);
 
 --blog-date-color: var(--color-text-muted);
 --blog-reading-time-color: var(--color-text-muted);
@@ -132,7 +132,7 @@ export const blogVars = `
 --blog-tag-padding: var(--spacing-4) var(--spacing-8);
 --blog-tag-fontSize: var(--typography-label-default-fontSize);
 --blog-tag-fontWeight: var(--typography-label-default-fontWeight);
---blog-tag-lineHeight: var(--dimension-20px);
+--blog-tag-lineHeight: var(--typography-lineHeight-snug);
 --blog-tag-borderRadius: var(--radius-full);
 --blog-tag-border-width: var(--border-width-1);
 --blog-tag-gap: var(--spacing-8);

package/src/blog/tokens/core.js

@@ -225,20 +225,19 @@ export const coreTokens = `
      CORE DIMENSION TOKENS
      ================================ */
 
---dimension-2px: 2px;
---dimension-4px: 4px;
---dimension-8px: 8px;
---dimension-12px: 12px;
---dimension-16px: 16px;
---dimension-20px: 20px;
---dimension-24px: 24px;
---dimension-32px: 32px;
---dimension-34px: 34px;
---dimension-40px: 40px;
---dimension-45px: 45px;
---dimension-48px: 48px;
---dimension-55px: 55px;
---dimension-64px: 64px;
+--dimension-4: 4px;
+--dimension-8: 8px;
+--dimension-12: 12px;
+--dimension-16: 16px;
+--dimension-20: 20px;
+--dimension-24: 24px;
+--dimension-32: 32px;
+--dimension-36: 36px;
+--dimension-40: 40px;
+--dimension-44: 44px;
+--dimension-48: 48px;
+--dimension-56: 56px;
+--dimension-64: 64px;
 
 /* ================================
      CORE TRANSITION TOKENS
@@ -548,17 +547,17 @@ export const coreTokens = `
 --form-label-required-color: var(--color-red-500);
 --form-label-required-marginLeft: var(--spacing-1);
 
---form-input-small-height: var(--dimension-34px);
+--form-input-small-height: var(--dimension-36);
 --form-input-small-fontSize: var(--typography-fontSize-sm);
 --form-input-small-padding: var(--spacing-8) var(--spacing-12);
 --form-input-small-borderRadius: var(--radius-sm);
 
---form-input-medium-height: var(--dimension-45px);
+--form-input-medium-height: var(--dimension-44);
 --form-input-medium-fontSize: var(--typography-fontSize-base);
 --form-input-medium-padding: var(--spacing-12) var(--spacing-16);
 --form-input-medium-borderRadius: var(--radius-md);
 
---form-input-large-height: var(--dimension-55px);
+--form-input-large-height: var(--dimension-56);
 --form-input-large-fontSize: var(--typography-fontSize-lg);
 --form-input-large-padding: var(--spacing-16) var(--spacing-20);
 --form-input-large-borderRadius: var(--radius-lg);
@@ -609,21 +608,21 @@ export const coreTokens = `
 --button-size-small-padding-vertical: var(--spacing-2);
 --button-size-small-padding-horizontal: var(--spacing-4);
 --button-size-small-fontSize: var(--typography-fontSize-sm);
---button-size-small-height: var(--dimension-34px);
+--button-size-small-height: var(--dimension-36);
 --button-size-small-borderRadius: var(--radius-sm);
 --button-size-small-gap: var(--spacing-1);
 
 --button-size-medium-padding-vertical: var(--spacing-12);
 --button-size-medium-padding-horizontal: var(--spacing-20);
 --button-size-medium-fontSize: var(--typography-fontSize-base);
---button-size-medium-height: var(--dimension-45px);
+--button-size-medium-height: var(--dimension-44);
 --button-size-medium-borderRadius: var(--radius-md);
 --button-size-medium-gap: var(--spacing-2);
 
 --button-size-large-padding-vertical: var(--spacing-4);
 --button-size-large-padding-horizontal: var(--spacing-6);
 --button-size-large-fontSize: var(--typography-fontSize-lg);
---button-size-large-height: var(--dimension-55px);
+--button-size-large-height: var(--dimension-56);
 --button-size-large-borderRadius: var(--radius-lg);
 --button-size-large-gap: var(--spacing-2);
 
@@ -780,21 +779,21 @@ export const coreTokens = `
      COMPONENT TOKENS - ICON
      ================================ */
 
---icon-xs-size: var(--dimension-12px);
---icon-sm-size: var(--dimension-16px);
---icon-md-size: var(--dimension-20px);
---icon-lg-size: var(--dimension-24px);
---icon-xl-size: var(--dimension-32px);
---icon-2xl-size: var(--dimension-48px);
---icon-3xl-size: var(--dimension-64px);
-
---icon-button-small-size: var(--dimension-16px);
---icon-button-medium-size: var(--dimension-20px);
---icon-button-large-size: var(--dimension-24px);
-
---icon-form-small-size: var(--dimension-16px);
---icon-form-medium-size: var(--dimension-20px);
---icon-form-large-size: var(--dimension-24px);
+--icon-xs-size: var(--dimension-12);
+--icon-sm-size: var(--dimension-16);
+--icon-md-size: var(--dimension-20);
+--icon-lg-size: var(--dimension-24);
+--icon-xl-size: var(--dimension-32);
+--icon-2xl-size: var(--dimension-48);
+--icon-3xl-size: var(--dimension-64);
+
+--icon-button-small-size: var(--dimension-16);
+--icon-button-medium-size: var(--dimension-20);
+--icon-button-large-size: var(--dimension-24);
+
+--icon-form-small-size: var(--dimension-16);
+--icon-form-medium-size: var(--dimension-20);
+--icon-form-large-size: var(--dimension-24);
 
 --icon-default-color: var(--color-text-secondary);
 --icon-hover-color: var(--color-neutral-700);

package/src/blog/tokens/legacy.js

@@ -21,25 +21,16 @@ export const legacyVars = `
 --display-large-mobile: 2.75rem;
 --display-xlarge-mobile: 3rem;
 
---display-xlarge-line-height: 1.1;
---display-medium-line-height: 1.15;
---display-xlarge-mobile-line-height: 1.15;
---display-medium-mobile-line-height: 1.2;
-
 /* Heading sizes (legacy names — map to current scale) */
 --heading-xxsmall: var(--typography-fontSize-lg);
 --heading-xsmall: var(--typography-fontSize-xl);
 --heading-medium: 1.75rem;
 --heading-xlarge: var(--typography-fontSize-4xl);
 --heading-xxlarge: 2.5rem;
---heading-xlarge-line-height: 1.2;
---typography-heading-h4-fontSize-line-height: 1.3;
 
 /* Body sizes (legacy names) */
 --body-small: 0.8125rem;
 --body-xlarge: var(--typography-fontSize-lg);
---typography-body-regular-fontSize-line-height: var(--typography-lineHeight-normal);
---typography-label-small-fontSize-line-height: 1.35;
 
 /* Font family shorthand (legacy) */
 --font-family-mono: var(--typography-fontFamily-mono);