@primer/primitives 0.0.0-20260122215721 → 0.0.0-20260123125329

package/dist/build/platforms/css.js

@@ -8,12 +8,12 @@ const getCssSelectors = (outputFile) => {
     const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light';
     return [
         {
-            selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"]`,
+            selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
         },
         {
             query: '@media (prefers-color-scheme: dark)',
             // [data-color-mode] here is duplicated to increase the specificity so that light mode can't override it when prefers-color-scheme: dark is enabled
-            selector: `[data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"]`,
+            selector: `[data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
         },
     ];
 };

package/dist/css/base/typography/typography.css

@@ -1,4 +1,15 @@
 :root {
+  --base-text-lineHeight-loose: 1.75; /** Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility. */
+  --base-text-lineHeight-normal: 1.5; /** Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick. */
+  --base-text-lineHeight-relaxed: 1.625; /** Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room. */
+  --base-text-lineHeight-snug: 1.375; /** Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines. */
+  --base-text-lineHeight-tight: 1.25; /** Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability. */
+  --base-text-size-2xl: 2.5rem; /** 40px - Display text for hero sections. */
+  --base-text-size-lg: 1.25rem; /** 20px - Medium titles and subtitles. */
+  --base-text-size-md: 1rem; /** 16px - Large body text and small titles. */
+  --base-text-size-sm: 0.875rem; /** 14px - Default body text size for UI. */
+  --base-text-size-xl: 2rem; /** 32px - Large titles and page headings. */
+  --base-text-size-xs: 0.75rem; /** 12px - Smallest text size for captions and compact UI elements. */
   --base-text-weight-light: 300;
   --base-text-weight-medium: 500;
   --base-text-weight-normal: 400;

package/dist/css/functional/themes/dark-colorblind-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] {
+[data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"],
+[data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] ::backdrop {
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-borderColor-disabled: #1158c7;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop {
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-hover: #2a7aef;
     --button-primary-borderColor-disabled: #1158c7;

package/dist/css/functional/themes/dark-colorblind.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind"],
-[data-color-mode="auto"][data-light-theme="dark_colorblind"] {
+[data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_colorblind"],
+[data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-borderColor-disabled: #1158c7;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-hover: #2a7aef;
     --button-primary-borderColor-disabled: #1158c7;

package/dist/css/functional/themes/dark-dimmed-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] {
+[data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"],
+[data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] ::backdrop {
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-iconColor-hover: #ffffff;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop {
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-iconColor-hover: #ffffff;

package/dist/css/functional/themes/dark-dimmed.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_dimmed"],
-[data-color-mode="auto"][data-light-theme="dark_dimmed"] {
+[data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_dimmed"],
+[data-color-mode="auto"][data-light-theme="dark_dimmed"] ::backdrop {
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-rest: #ea5c53;
@@ -896,7 +898,8 @@
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::backdrop {
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-rest: #ea5c53;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_high_contrast"] {
+[data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_high_contrast"],
+[data-color-mode="auto"][data-light-theme="dark_high_contrast"] ::backdrop {
   --button-primary-bgColor-active: #109135;
   --button-primary-bgColor-disabled: #048f2f;
   --button-primary-bgColor-hover: #08792b;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
     --button-primary-bgColor-active: #109135;
     --button-primary-bgColor-disabled: #048f2f;
     --button-primary-bgColor-hover: #08792b;

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] {
+[data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"],
+[data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] ::backdrop {
   --button-outline-bgColor-active: #0d419d;
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-disabled: #5fabfe;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop {
     --button-outline-bgColor-active: #0d419d;
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-disabled: #5fabfe;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia"],
-[data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
+[data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark_tritanopia"],
+[data-color-mode="auto"][data-light-theme="dark_tritanopia"] ::backdrop {
   --bgColor-sponsors-muted: #db61a21a;
   --button-danger-fgColor-rest: #fa5e55;
   --button-outline-bgColor-active: #0d419d;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
     --bgColor-sponsors-muted: #db61a21a;
     --button-danger-fgColor-rest: #fa5e55;
     --button-outline-bgColor-active: #0d419d;

package/dist/css/functional/themes/dark.css

@@ -1,5 +1,7 @@
 [data-color-mode="dark"][data-dark-theme="dark"],
-[data-color-mode="auto"][data-light-theme="dark"] {
+[data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="dark"],
+[data-color-mode="auto"][data-light-theme="dark"] ::backdrop {
   --button-danger-fgColor-rest: #fa5e55;
   --button-primary-bgColor-active: #2e9a40;
   --button-primary-bgColor-disabled: #105823;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
     --button-danger-fgColor-rest: #fa5e55;
     --button-primary-bgColor-active: #2e9a40;
     --button-primary-bgColor-disabled: #105823;

package/dist/css/functional/themes/light-colorblind-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"],
-[data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] {
+[data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"],
+[data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] ::backdrop {
   --button-outline-bgColor-active: #033f9d;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -896,7 +898,8 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] ::backdrop {
     --button-outline-bgColor-active: #033f9d;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light-colorblind.css

@@ -1,5 +1,7 @@
 [data-color-mode="light"][data-light-theme="light_colorblind"],
-[data-color-mode="auto"][data-light-theme="light_colorblind"] {
+[data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="light_colorblind"],
+[data-color-mode="auto"][data-light-theme="light_colorblind"] ::backdrop {
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] ::backdrop {
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="light"][data-light-theme="light_high_contrast"],
-[data-color-mode="auto"][data-light-theme="light_high_contrast"] {
+[data-color-mode="light"][data-light-theme="light_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="light_high_contrast"],
+[data-color-mode="auto"][data-light-theme="light_high_contrast"] ::backdrop {
   --button-outline-bgColor-active: #033f9d;
   --button-primary-bgColor-active: #03501b;
   --button-primary-bgColor-disabled: #85cb97;
@@ -896,7 +898,8 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] ::backdrop {
     --button-outline-bgColor-active: #033f9d;
     --button-primary-bgColor-active: #03501b;
     --button-primary-bgColor-disabled: #85cb97;

package/dist/css/functional/themes/light-tritanopia-high-contrast.css

@@ -1,5 +1,7 @@
 [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"],
-[data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] {
+[data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"],
+[data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop {
   --button-outline-bgColor-active: #033f9d;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -896,7 +898,8 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] ::backdrop {
     --button-outline-bgColor-active: #033f9d;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light-tritanopia.css

@@ -1,5 +1,7 @@
 [data-color-mode="light"][data-light-theme="light_tritanopia"],
-[data-color-mode="auto"][data-light-theme="light_tritanopia"] {
+[data-color-mode="light"][data-light-theme="light_tritanopia"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="light_tritanopia"],
+[data-color-mode="auto"][data-light-theme="light_tritanopia"] ::backdrop {
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] ::backdrop {
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light.css

@@ -1,5 +1,7 @@
 [data-color-mode="light"][data-light-theme="light"],
-[data-color-mode="auto"][data-light-theme="light"] {
+[data-color-mode="light"][data-light-theme="light"] ::backdrop,
+[data-color-mode="auto"][data-light-theme="light"],
+[data-color-mode="auto"][data-light-theme="light"] ::backdrop {
   --bgColor-success-emphasis: #1f883d;
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #197935;
@@ -896,7 +898,8 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light"],
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] ::backdrop {
     --bgColor-success-emphasis: #1f883d;
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #197935;

package/dist/css/functional/typography/typography.css

@@ -3,34 +3,34 @@
   --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-body-lineHeight-large: 1.5;
-  --text-body-lineHeight-medium: 1.42857;
-  --text-body-lineHeight-small: 1.66667;
-  --text-body-size-large: 1rem;
-  --text-body-size-medium: 0.875rem;
-  --text-body-size-small: 0.75rem;
-  --text-caption-lineHeight: 1.3333;
-  --text-caption-size: 0.75rem;
-  --text-codeBlock-lineHeight: 1.5385;
   --text-codeBlock-size: 0.8125rem;
   --text-codeInline-size: 0.9285em;
-  --text-display-lineBoxHeight: 1.4;
-  --text-display-lineHeight: 1.4;
-  --text-display-size: 2.5rem;
-  --text-subtitle-lineHeight: 1.6;
-  --text-subtitle-size: 1.25rem;
-  --text-title-lineHeight-large: 1.5;
-  --text-title-lineHeight-medium: 1.6;
-  --text-title-lineHeight-small: 1.5;
-  --text-title-size-large: 2rem;
-  --text-title-size-medium: 1.25rem;
-  --text-title-size-small: 1rem;
+  --text-body-lineHeight-large: var(--base-text-lineHeight-normal);
+  --text-body-lineHeight-medium: var(--base-text-lineHeight-normal);
+  --text-body-lineHeight-small: var(--base-text-lineHeight-relaxed);
+  --text-body-size-large: var(--base-text-size-md);
+  --text-body-size-medium: var(--base-text-size-sm);
+  --text-body-size-small: var(--base-text-size-xs);
   --text-body-weight: var(--base-text-weight-normal);
+  --text-caption-lineHeight: var(--base-text-lineHeight-tight);
+  --text-caption-size: var(--base-text-size-xs);
   --text-caption-weight: var(--base-text-weight-normal);
+  --text-codeBlock-lineHeight: var(--base-text-lineHeight-normal);
   --text-codeBlock-weight: var(--base-text-weight-normal);
   --text-codeInline-weight: var(--base-text-weight-normal);
+  --text-display-lineBoxHeight: var(--base-text-lineHeight-snug);
+  --text-display-lineHeight: var(--base-text-lineHeight-snug);
+  --text-display-size: var(--base-text-size-2xl);
   --text-display-weight: var(--base-text-weight-medium);
+  --text-subtitle-lineHeight: var(--base-text-lineHeight-relaxed);
+  --text-subtitle-size: var(--base-text-size-lg);
   --text-subtitle-weight: var(--base-text-weight-normal);
+  --text-title-lineHeight-large: var(--base-text-lineHeight-normal);
+  --text-title-lineHeight-medium: var(--base-text-lineHeight-relaxed);
+  --text-title-lineHeight-small: var(--base-text-lineHeight-normal);
+  --text-title-size-large: var(--base-text-size-xl);
+  --text-title-size-medium: var(--base-text-size-lg);
+  --text-title-size-small: var(--base-text-size-md);
   --text-title-weight-large: var(--base-text-weight-semibold);
   --text-title-weight-medium: var(--base-text-weight-semibold);
   --text-title-weight-small: var(--base-text-weight-semibold);