@phila/phila-ui-core 2.1.1 → 2.2.0-beta.2

package/dist/styles/generated/typography.css

@@ -0,0 +1,281 @@
+:root {
+  /* typography */
+  /* Generated from Figma CSS export - references preserved */
+
+  --Base-font-variables-Family-font-family-icon: "Font Awesome 7 Pro";
+  --Base-font-variables-Family-font-family-icon-brands: "Font Awesome 7 Brands";
+  --Base-font-variables-Family-font-family-primary: "Montserrat";
+  --Base-font-variables-Family-font-family-secondary: "Times New Roman";
+  --Base-font-variables-Weight-font-weight-bold: "Bold";
+  --Base-font-variables-Weight-font-weight-light: "Light";
+  --Base-font-variables-Weight-font-weight-regular: "Regular";
+  --Base-font-variables-Weight-font-weight-semibold: "SemiBold";
+  --Base-font-variables-Weight-font-weight-solid: "Solid";
+  --Base-font-variables-Width-max-width: var(--sizes-scale-0);
+  --Body-2XL-font-body-2xl-family: var(--Body-font-body-family);
+  --Body-2XL-font-body-2xl-lineheight: var(--sizes-scale-600);
+  --Body-2XL-font-body-2xl-margin-bottom: var(--sizes-scale-300);
+  --Body-2XL-font-body-2xl-margin-top: var(--sizes-scale-0);
+  --Body-2XL-font-body-2xl-size: var(--sizes-scale-400);
+  --Body-2XL-font-body-2xl-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --body-body: 1;
+  --body-body-icon: 1;
+  --body-body-text: 1;
+  --Body-Default-font-body-default-family: var(--Body-font-body-family);
+  --Body-Default-font-body-default-lineheight: var(--sizes-scale-350);
+  --Body-Default-font-body-default-margin-bottom: var(--sizes-scale-200);
+  --Body-Default-font-body-default-margin-top: var(--sizes-scale-0);
+  --Body-Default-font-body-default-size: var(--sizes-scale-225);
+  --Body-Default-font-body-default-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Body-ExtraLarge-font-body-xlarge-family: var(--Body-font-body-family);
+  --Body-ExtraLarge-font-body-xlarge-lineheight: var(--sizes-scale-450);
+  --Body-ExtraLarge-font-body-xlarge-margin-bottom: var(--sizes-scale-250);
+  --Body-ExtraLarge-font-body-xlarge-margin-top: var(--sizes-scale-0);
+  --Body-ExtraLarge-font-body-xlarge-size: var(--sizes-scale-300);
+  --Body-ExtraLarge-font-body-xlarge-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Body-ExtraSmall-font-body-xs-family: var(--Body-font-body-family);
+  --Body-ExtraSmall-font-body-xs-lineheight: var(--sizes-scale-250);
+  --Body-ExtraSmall-font-body-xs-margin-bottom: var(--sizes-scale-200);
+  --Body-ExtraSmall-font-body-xs-margin-top: var(--sizes-scale-0);
+  --Body-ExtraSmall-font-body-xs-size: var(--sizes-scale-175);
+  --Body-ExtraSmall-font-body-xs-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Body-font-body-family: var(--Base-font-variables-Family-font-family-primary);
+  --Body-Large-font-body-large-family: var(--Body-font-body-family);
+  --Body-Large-font-body-large-lineheight: var(--sizes-scale-350);
+  --Body-Large-font-body-large-margin-bottom: var(--sizes-scale-225);
+  --Body-Large-font-body-large-margin-top: var(--sizes-scale-0);
+  --Body-Large-font-body-large-size: var(--sizes-scale-250);
+  --Body-Large-font-body-large-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Body-Small-font-body-small-family: var(--Body-font-body-family);
+  --Body-Small-font-body-small-lineheight: var(--sizes-scale-300);
+  --Body-Small-font-body-small-margin-bottom: var(--sizes-scale-200);
+  --Body-Small-font-body-small-margin-top: var(--sizes-scale-0);
+  --Body-Small-font-body-small-size: var(--sizes-scale-200);
+  --Body-Small-font-body-small-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Display-Display-1-font-display-1-family: var(--Display-font-display-family);
+  --Display-Display-1-font-display-1-lineheight: var(--sizes-scale-800);
+  --Display-Display-1-font-display-1-margin-bottom: var(--sizes-scale-200);
+  --Display-Display-1-font-display-1-margin-top: var(--sizes-scale-0);
+  --Display-Display-1-font-display-1-size: var(--sizes-scale-600);
+  --Display-Display-1-font-display-1-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Display-Display-2-font-display-2-eight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Display-Display-2-font-display-2-family: var(--Display-font-display-family);
+  --Display-Display-2-font-display-2-lineheight: var(--sizes-scale-600);
+  --Display-Display-2-font-display-2-margin-bottom: var(--sizes-scale-200);
+  --Display-Display-2-font-display-2-margin-top: var(--sizes-scale-0);
+  --Display-Display-2-font-display-2-size: var(--sizes-scale-450);
+  --Display-font-display-family: var(--Base-font-variables-Family-font-family-primary);
+  --Heading-font-heading-family: var(--Base-font-variables-Family-font-family-primary);
+  --Heading-H1-font-header-1-lineheight: var(--sizes-scale-600);
+  --Heading-H1-font-header-1-margin-bottom: var(--sizes-scale-200);
+  --Heading-H1-font-header-1-margin-top: var(--sizes-scale-200);
+  --Heading-H1-font-heading-1-family: var(--Heading-font-heading-family);
+  --Heading-H1-font-heading-1-size: var(--sizes-scale-500);
+  --Heading-H1-font-heading-1-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Heading-H2-font-heading-2-family: var(--Heading-font-heading-family);
+  --Heading-H2-font-heading-2-lineheight: var(--sizes-scale-600);
+  --Heading-H2-font-heading-2-margin-bottom: var(--sizes-scale-200);
+  --Heading-H2-font-heading-2-margin-top: var(--sizes-scale-100);
+  --Heading-H2-font-heading-2-size: var(--sizes-scale-450);
+  --Heading-H2-font-heading-2-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Heading-H3-font-heading-3-family: var(--Heading-font-heading-family);
+  --Heading-H3-font-heading-3-lineheight: var(--sizes-scale-500);
+  --Heading-H3-font-heading-3-margin-bottom: var(--sizes-scale-200);
+  --Heading-H3-font-heading-3-margin-top: var(--sizes-scale-100);
+  --Heading-H3-font-heading-3-size: var(--sizes-scale-400);
+  --Heading-H3-font-heading-3-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Heading-H4-font-heading-4-family: var(--Heading-font-heading-family);
+  --Heading-H4-font-heading-4-lineheight: var(--sizes-scale-500);
+  --Heading-H4-font-heading-4-margin-bottom: var(--sizes-scale-200);
+  --Heading-H4-font-heading-4-margin-top: var(--sizes-scale-0);
+  --Heading-H4-font-heading-4-size: var(--sizes-scale-350);
+  --Heading-H4-font-heading-4-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Heading-H5-font-heading-5-family: var(--Heading-font-heading-family);
+  --Heading-H5-font-heading-5-lineheight: var(--sizes-scale-450);
+  --Heading-H5-font-heading-5-margin-bottom: var(--sizes-scale-200);
+  --Heading-H5-font-heading-5-margin-top: var(--sizes-scale-0);
+  --Heading-H5-font-heading-5-size: var(--sizes-scale-300);
+  --Heading-H5-font-heading-5-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Heading-H6-font-heading-6-family: var(--Heading-font-heading-family);
+  --Heading-H6-font-heading-6-lineheight: var(--sizes-scale-350);
+  --Heading-H6-font-heading-6-margin-bottom: var(--sizes-scale-200);
+  --Heading-H6-font-heading-6-margin-top: var(--sizes-scale-0);
+  --Heading-H6-font-heading-6-size: var(--sizes-scale-250);
+  --Heading-H6-font-heading-6-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Icon-Brands-2XL-font-icon-brands-2xl-size: var(--Icon-Solid-2XL-font-icon-solid-2xl-size);
+  --Icon-Brands-2XL-font-icon-brands-2xl-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Brands-Default-font-icon-brands-default-size: var(--Icon-Solid-Default-font-icon-solid-default-size);
+  --Icon-Brands-Default-font-icon-brands-default-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Brands-ExtraLarge-font-icon-brands-xl-size: var(--Icon-Solid-ExtraLarge-font-icon-solid-xl-size);
+  --Icon-Brands-ExtraLarge-font-icon-brands-xl-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Brands-ExtraSmall-font-brands-solid-xs-size: var(--Icon-Solid-ExtraSmall-font-icon-solid-xs-size);
+  --Icon-Brands-ExtraSmall-font-icon-brands-xs-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Brands-Large-font-icon-brands-large-size: var(--Icon-Solid-Large-font-icon-solid-large-size);
+  --Icon-Brands-Large-font-icon-brands-large-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Brands-Small-font-icon-brands-small-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
+  --Icon-Brands-Small-font-icon-brands-small-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Brands-XXSmall-font-icon-brands-xxs-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
+  --Icon-Brands-XXSmall-font-icon-brands-xxs-weight: var(--Base-font-variables-Weight-font-weight-regular);
+  --Icon-Outline-2XLarge-font-icon-outline-2xl-size: var(--Icon-Solid-2XL-font-icon-solid-2xl-size);
+  --Icon-Outline-2XLarge-font-icon-outline-2xl-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Outline-Default-font-icon-outline-default-size: var(--Icon-Solid-Default-font-icon-solid-default-size);
+  --Icon-Outline-Default-font-icon-outline-default-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Outline-ExtraLarge-font-icon-outline-xl-size: var(--Icon-Solid-ExtraLarge-font-icon-solid-xl-size);
+  --Icon-Outline-ExtraLarge-font-icon-outline-xl-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Outline-ExtraSmall-font-icon-outline-xs-size: var(--Icon-Solid-ExtraSmall-font-icon-solid-xs-size);
+  --Icon-Outline-ExtraSmall-font-icon-outline-xs-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Outline-Large-font-icon-outline-large-size: var(--Icon-Solid-Large-font-icon-solid-large-size);
+  --Icon-Outline-Large-font-icon-outline-large-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Outline-Small-font-icon-outline-small-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
+  --Icon-Outline-Small-font-icon-outline-small-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Outline-XXSmall-font-icon-outline-xs-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
+  --Icon-Outline-XXSmall-font-icon-outline-xxs-weight: var(--Base-font-variables-Weight-font-weight-light);
+  --Icon-Solid-2XL-font-icon-solid-2xl-size: var(--sizes-scale-1000);
+  --Icon-Solid-2XL-font-icon-solid-2xl-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --Icon-Solid-Default-font-icon-solid-default-size: var(--sizes-scale-300);
+  --Icon-Solid-Default-font-icon-solid-default-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --Icon-Solid-ExtraLarge-font-icon-solid-xl-size: var(--sizes-scale-600);
+  --Icon-Solid-ExtraLarge-font-icon-solid-xl-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --Icon-Solid-ExtraSmall-font-icon-solid-xs-size: var(--sizes-scale-200);
+  --Icon-Solid-ExtraSmall-font-icon-solid-xs-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --Icon-Solid-Large-font-icon-solid-large-size: var(--sizes-scale-400);
+  --Icon-Solid-Large-font-icon-solid-large-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --Icon-Solid-Small-font-icon-solid-small-size: var(--sizes-scale-225);
+  --Icon-Solid-Small-font-icon-solid-small-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --Icon-Solid-XXSmall-font-icon-solid-xxs-size: var(--sizes-scale-150);
+  --Icon-Solid-XXSmall-font-icon-solid-xxs-weight: var(--Base-font-variables-Weight-font-weight-solid);
+  --label-1: 1;
+  --label-2: 1;
+  --Label-2XL-font-label-2xl-family: var(--Label-font-label-family);
+  --Label-2XL-font-label-2xl-lineheight: var(--Body-2XL-font-body-2xl-lineheight);
+  --Label-2XL-font-label-2xl-margin-bottom: var(--Body-2XL-font-body-2xl-margin-bottom);
+  --Label-2XL-font-label-2xl-margin-top: var(--Body-2XL-font-body-2xl-margin-top);
+  --Label-2XL-font-label-2xl-size: var(--Body-2XL-font-body-2xl-size);
+  --Label-2XL-font-label-2xl-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Label-Default-font-label-default-family: var(--Label-font-label-family);
+  --Label-Default-font-label-default-lineheight: var(--Body-Default-font-body-default-lineheight);
+  --Label-Default-font-label-default-margin-bottom: var(--Body-Default-font-body-default-margin-bottom);
+  --Label-Default-font-label-default-margin-top: var(--Body-Default-font-body-default-margin-top);
+  --Label-Default-font-label-default-size: var(--Body-Default-font-body-default-size);
+  --Label-Default-font-label-default-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Label-ExtraLarge-font-label-xlarge-family: var(--Label-font-label-family);
+  --Label-ExtraLarge-font-label-xlarge-lineheight: var(--Body-ExtraLarge-font-body-xlarge-lineheight);
+  --Label-ExtraLarge-font-label-xlarge-margin-bottom: var(--Body-ExtraLarge-font-body-xlarge-margin-bottom);
+  --Label-ExtraLarge-font-label-xlarge-margin-top: var(--Body-ExtraLarge-font-body-xlarge-margin-top);
+  --Label-ExtraLarge-font-label-xlarge-size: var(--Body-ExtraLarge-font-body-xlarge-size);
+  --Label-ExtraLarge-font-label-xlarge-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Label-ExtraSmall-font-label-xs-family: var(--Label-font-label-family);
+  --Label-ExtraSmall-font-label-xs-lineheight: var(--Body-ExtraSmall-font-body-xs-lineheight);
+  --Label-ExtraSmall-font-label-xs-margin-bottom: var(--Body-ExtraSmall-font-body-xs-margin-bottom);
+  --Label-ExtraSmall-font-label-xs-margin-top: var(--Body-ExtraSmall-font-body-xs-margin-top);
+  --Label-ExtraSmall-font-label-xs-size: var(--Body-ExtraSmall-font-body-xs-size);
+  --Label-ExtraSmall-font-label-xs-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Label-font-label-family: var(--Body-font-body-family);
+  --Label-Large-font-label-large-family: var(--Label-font-label-family);
+  --Label-Large-font-label-large-lineheight: var(--Body-Large-font-body-large-lineheight);
+  --Label-Large-font-label-large-margin-bottom: var(--Body-Large-font-body-large-margin-bottom);
+  --Label-Large-font-label-large-margin-top: var(--Body-Large-font-body-large-margin-top);
+  --Label-Large-font-label-large-size: var(--Body-Large-font-body-large-size);
+  --Label-Large-font-label-large-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Label-Small-font-label-small-family: var(--Label-font-label-family);
+  --Label-Small-font-label-small-lineheight: var(--Body-Small-font-body-small-lineheight);
+  --Label-Small-font-label-small-margin-bottom: var(--Body-Small-font-body-small-margin-bottom);
+  --Label-Small-font-label-small-margin-top: var(--Body-Small-font-body-small-margin-top);
+  --Label-Small-font-label-small-size: var(--Body-Small-font-body-small-size);
+  --Label-Small-font-label-small-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Link-on-Primary-Default-font-link-on-primary-default-family: var(--Body-font-body-family);
+  --Link-on-Primary-Default-font-link-on-primary-default-lineheight: var(--Body-Default-font-body-default-lineheight);
+  --Link-on-Primary-Default-font-link-on-primary-default-margin-bottom: var(
+    --Body-Default-font-body-default-margin-bottom
+  );
+  --Link-on-Primary-Default-font-link-on-primary-default-margin-top: var(--Body-Default-font-body-default-margin-top);
+  --Link-on-Primary-Default-font-link-on-primary-default-size: var(--Body-Default-font-body-default-size);
+  --Link-on-Primary-Default-font-link-on-primary-default-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Primary-ExtraLarge-font-link-on-primary-xlarge-family: var(--Body-font-body-family);
+  --Link-on-Primary-ExtraLarge-font-link-on-primary-xlarge-lineheight: var(
+    --Body-ExtraLarge-font-body-xlarge-lineheight
+  );
+  --Link-on-Primary-ExtraLarge-font-link-on-primary-xlarge-margin-bottom: var(
+    --Body-ExtraLarge-font-body-xlarge-margin-bottom
+  );
+  --Link-on-Primary-ExtraLarge-font-link-on-primary-xlarge-margin-top: var(
+    --Body-ExtraLarge-font-body-xlarge-margin-top
+  );
+  --Link-on-Primary-ExtraLarge-font-link-on-primary-xlarge-size: var(--Body-ExtraLarge-font-body-xlarge-size);
+  --Link-on-Primary-ExtraLarge-font-link-on-primary-xlarge-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Primary-ExtraSmall-font-link-on-primary-small-xs-bottom: var(--Body-ExtraSmall-font-body-xs-margin-bottom);
+  --Link-on-Primary-ExtraSmall-font-link-on-primary-xs-family: var(--Body-font-body-family);
+  --Link-on-Primary-ExtraSmall-font-link-on-primary-xs-lineheight: var(--Body-ExtraSmall-font-body-xs-margin-top);
+  --Link-on-Primary-ExtraSmall-font-link-on-primary-xs-margin-top: var(--Body-ExtraSmall-font-body-xs-margin-top);
+  --Link-on-Primary-ExtraSmall-font-link-on-primary-xs-size: var(--Body-ExtraSmall-font-body-xs-size);
+  --Link-on-Primary-ExtraSmall-font-link-on-primary-xs-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Primary-font-link-family: var(--Body-font-body-family);
+  --Link-on-Primary-Large-font-link-on-primary-large-family: var(--Body-font-body-family);
+  --Link-on-Primary-Large-font-link-on-primary-large-lineheight: var(--Body-Large-font-body-large-lineheight);
+  --Link-on-Primary-Large-font-link-on-primary-large-margin-bottom: var(--Body-Large-font-body-large-margin-bottom);
+  --Link-on-Primary-Large-font-link-on-primary-large-margin-top: var(--Body-Large-font-body-large-margin-top);
+  --Link-on-Primary-Large-font-link-on-primary-large-size: var(--Body-Large-font-body-large-size);
+  --Link-on-Primary-Large-font-link-on-primary-large-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Primary-Small-font-link-on-primary-small-family: var(--Body-font-body-family);
+  --Link-on-Primary-Small-font-link-on-primary-small-lineheight: var(--Body-Small-font-body-small-lineheight);
+  --Link-on-Primary-Small-font-link-on-primary-small-margin-bottom: var(--Body-Small-font-body-small-margin-bottom);
+  --Link-on-Primary-Small-font-link-on-primary-small-margin-top: var(--Body-Small-font-body-small-margin-top);
+  --Link-on-Primary-Small-font-link-on-primary-small-size: var(--Body-Small-font-body-small-size);
+  --Link-on-Primary-Small-font-link-on-primary-small-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Surface-Default-font-link-on-surface-default-family: var(--Body-font-body-family);
+  --Link-on-Surface-Default-font-link-on-surface-default-lineheight: var(--Body-Default-font-body-default-lineheight);
+  --Link-on-Surface-Default-font-link-on-surface-default-margin-bottom: var(
+    --Body-Default-font-body-default-margin-bottom
+  );
+  --Link-on-Surface-Default-font-link-on-surface-default-margin-top: var(--Body-Default-font-body-default-margin-top);
+  --Link-on-Surface-Default-font-link-on-surface-default-size: var(--Body-Default-font-body-default-size);
+  --Link-on-Surface-Default-font-link-on-surface-default-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Surface-ExtraLarge-font-link-on-surface-xlarge-family: var(--Body-font-body-family);
+  --Link-on-Surface-ExtraLarge-font-link-on-surface-xlarge-lineheight: var(
+    --Body-ExtraLarge-font-body-xlarge-lineheight
+  );
+  --Link-on-Surface-ExtraLarge-font-link-on-surface-xlarge-margin-bottom: var(
+    --Body-ExtraLarge-font-body-xlarge-margin-bottom
+  );
+  --Link-on-Surface-ExtraLarge-font-link-on-surface-xlarge-margin-top: var(
+    --Body-ExtraLarge-font-body-xlarge-margin-top
+  );
+  --Link-on-Surface-ExtraLarge-font-link-on-surface-xlarge-size: var(--Body-ExtraLarge-font-body-xlarge-size);
+  --Link-on-Surface-ExtraLarge-font-link-on-surface-xlarge-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Surface-ExtraSmall-font-link-on-surface-xs-bottom: var(--Body-ExtraSmall-font-body-xs-margin-bottom);
+  --Link-on-Surface-ExtraSmall-font-link-on-surface-xs-family: var(--Body-font-body-family);
+  --Link-on-Surface-ExtraSmall-font-link-on-surface-xs-lineheight: var(--Body-ExtraSmall-font-body-xs-margin-top);
+  --Link-on-Surface-ExtraSmall-font-link-on-surface-xs-margin-top: var(--Body-ExtraSmall-font-body-xs-margin-top);
+  --Link-on-Surface-ExtraSmall-font-link-on-surface-xs-size: var(--Body-ExtraSmall-font-body-xs-size);
+  --Link-on-Surface-ExtraSmall-font-link-on-surface-xs-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Surface-font-link-family: var(--Body-font-body-family);
+  --Link-on-Surface-Large-font-link-on-surface-large-family: var(--Body-font-body-family);
+  --Link-on-Surface-Large-font-link-on-surface-large-lineheight: var(--Body-Large-font-body-large-lineheight);
+  --Link-on-Surface-Large-font-link-on-surface-large-margin-bottom: var(--Body-Large-font-body-large-margin-bottom);
+  --Link-on-Surface-Large-font-link-on-surface-large-margin-top: var(--Body-Large-font-body-large-margin-top);
+  --Link-on-Surface-Large-font-link-on-surface-large-size: var(--Body-Large-font-body-large-size);
+  --Link-on-Surface-Large-font-link-on-surface-large-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Link-on-Surface-Small-font-link-on-surface-small-family: var(--Body-font-body-family);
+  --Link-on-Surface-Small-font-link-on-surface-small-lineheight: var(--Body-Small-font-body-small-lineheight);
+  --Link-on-Surface-Small-font-link-on-surface-small-margin-bottom: var(--Body-Small-font-body-small-margin-bottom);
+  --Link-on-Surface-Small-font-link-on-surface-small-margin-top: var(--Body-Small-font-body-small-margin-top);
+  --Link-on-Surface-Small-font-link-on-surface-small-size: var(--Body-Small-font-body-small-size);
+  --Link-on-Surface-Small-font-link-on-surface-small-weight: var(--Base-font-variables-Weight-font-weight-bold);
+  --Quote-font-quote-family: var(--Base-font-variables-Family-font-family-secondary);
+  --Quote-font-quote-lineheight: var(--sizes-scale-450);
+  --Quote-font-quote-margin-bottom: var(--sizes-scale-250);
+  --Quote-font-quote-margin-top: var(--sizes-scale-0);
+  --Quote-font-quote-size: var(--sizes-scale-300);
+  --Quote-font-quote-weight: "Bold Italic";
+  --Subtitle-font-subtitle-family: var(--Base-font-variables-Family-font-family-primary);
+  --Subtitle-Subtitle-1-font-subtitle-1-lineheight: var(--sizes-scale-450);
+  --Subtitle-Subtitle-1-font-subtitle-1-margin-bottom: var(--sizes-scale-200);
+  --Subtitle-Subtitle-1-font-subtitle-1-margin-top: var(--sizes-scale-0);
+  --Subtitle-Subtitle-1-font-subtitle-1-size: var(--sizes-scale-300);
+  --Subtitle-Subtitle-1-font-subtitle-1-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+  --Subtitle-Subtitle-2-font-subtitle-2-lineheight: var(--sizes-scale-350);
+  --Subtitle-Subtitle-2-font-subtitle-2-margin-bottom: var(--sizes-scale-200);
+  --Subtitle-Subtitle-2-font-subtitle-2-margin-top: var(--sizes-scale-0);
+  --Subtitle-Subtitle-2-font-subtitle-2-size: var(--sizes-scale-225);
+  --Subtitle-Subtitle-2-font-subtitle-2-weight: var(--Base-font-variables-Weight-font-weight-semibold);
+}

package/dist/styles/legacy.css

@@ -0,0 +1,39 @@
+/**
+ * Backwards Compatibility Aliases
+ *
+ * This file provides aliases for old variable names to maintain
+ * backwards compatibility with existing code.
+ *
+ * Mapping old names → new generated token names
+ */
+
+:root {
+  /* Old --spacing-* variables → new --sizes-* */
+  --spacing-xxs: var(--sizes-5xsmall); /* 0.125rem */
+  --spacing-xs: var(--sizes-4xsmall); /* 0.25rem */
+  --spacing-s: var(--sizes-3xsmall); /* 0.5rem */
+  --spacing-m: var(--sizes-xxsmall); /* 0.75rem */
+  --spacing-l: var(--sizes-medium); /* 1rem */
+  --spacing-xl: var(--sizes-large); /* 1.125rem */
+  --spacing-xxl: var(--sizes-xxlarge); /* 1.5rem */
+  --spacing-3xl: var(--sizes-3xlarge); /* 2rem */
+  --spacing-4xl: var(--sizes-4xlarge); /* 2.5rem */
+  --spacing-5xl: var(--sizes-5xlarge); /* 3rem */
+  --spacing-6xl: var(--sizes-6xlarge); /* 3.5rem */
+  --spacing-7xl: var(--sizes-7xlarge); /* 4rem */
+
+  /* Old --scale-* variables → new --sizes-scale-* */
+  --scale-xxsmall: var(--sizes-scale-25); /* 0.125rem */
+  --scale-xsmall: var(--sizes-scale-50); /* 0.25rem */
+  --scale-small: var(--sizes-scale-100); /* 0.5rem */
+  --scale-medium: var(--sizes-scale-150); /* 0.75rem */
+  --scale-large: var(--sizes-scale-200); /* 1rem */
+  --scale-xlarge: var(--sizes-scale-225); /* 1.125rem */
+  --scale-xxlarge: var(--sizes-scale-300); /* 1.5rem */
+  --scale-3xlarge: var(--sizes-scale-400); /* 2rem */
+  --scale-6xlarge: var(--sizes-scale-700); /* 3.5rem */
+
+  --Extended-Colors-link-default-on-primary: #ecfdff;
+  --Extended-Colors-link-hover-on-primary: #25cef7;
+  --Extended-Colors-link-visited-on-primary: #e9ccf2;
+}