diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
index 2b6c4d4b1e4..3cfff18f69e 100644
--- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -386,27 +386,27 @@ exports[`generated tokens CSS global should match 1`] = `
   --calcite-z-index-sticky: 300;
   --calcite-z-index: 1;
   --calcite-z-index-deep: -999999;
-  --calcite-space-xxxl: 2rem;
-  --calcite-space-xxl: 1.5rem;
-  --calcite-space-xl: 1.25rem;
-  --calcite-space-lg: 1rem;
-  --calcite-space-md-plus: 0.875rem;
-  --calcite-space-md: 0.75rem;
-  --calcite-space-sm-plus: 0.625rem;
-  --calcite-space-sm: 0.5rem;
-  --calcite-space-xs: 0.375rem;
-  --calcite-space-xxs: 0.25rem;
-  --calcite-space-base: 2px;
-  --calcite-space-px: 1px;
-  --calcite-space-none: 0;
-  --calcite-space-fixed-xxxl: 32px; /* deprecated */
-  --calcite-space-fixed-xxl: 20px; /* deprecated */
-  --calcite-space-fixed-xl: 16px; /* deprecated */
-  --calcite-space-fixed-lg: 14px; /* deprecated */
-  --calcite-space-fixed-md: 12px; /* deprecated */
-  --calcite-space-fixed-sm: 8px; /* deprecated */
-  --calcite-space-fixed-xs: 6px; /* deprecated */
-  --calcite-space-fixed-xxs: 4px; /* deprecated */
+  --calcite-spacing-xxxl: 2rem;
+  --calcite-spacing-xxl: 1.5rem;
+  --calcite-spacing-xl: 1.25rem;
+  --calcite-spacing-lg: 1rem;
+  --calcite-spacing-md-plus: 0.875rem;
+  --calcite-spacing-md: 0.75rem;
+  --calcite-spacing-sm-plus: 0.625rem;
+  --calcite-spacing-sm: 0.5rem;
+  --calcite-spacing-xs: 0.375rem;
+  --calcite-spacing-xxs: 0.25rem;
+  --calcite-spacing-base: 2px;
+  --calcite-spacing-px: 1px;
+  --calcite-spacing-none: 0;
+  --calcite-spacing-fixed-xxxl: 32px; /* deprecated */
+  --calcite-spacing-fixed-xxl: 20px; /* deprecated */
+  --calcite-spacing-fixed-xl: 16px; /* deprecated */
+  --calcite-spacing-fixed-lg: 14px; /* deprecated */
+  --calcite-spacing-fixed-md: 12px; /* deprecated */
+  --calcite-spacing-fixed-sm: 8px; /* deprecated */
+  --calcite-spacing-fixed-xs: 6px; /* deprecated */
+  --calcite-spacing-fixed-xxs: 4px; /* deprecated */
   --calcite-size-xxxl: 6rem;
   --calcite-size-xxl: 4rem;
   --calcite-size-xl: 3rem;
@@ -443,11 +443,11 @@ exports[`generated tokens CSS global should match 1`] = `
   --calcite-font-letter-spacing-wide: 0.4;
   --calcite-font-letter-spacing-normal: 0;
   --calcite-font-letter-spacing-tight: -0.4;
-  --calcite-font-line-height-relative-loose: 200%; /* 2 */
-  --calcite-font-line-height-relative-relaxed: 162.5%; /* 1.625 */
-  --calcite-font-line-height-relative-normal: 150%; /* 1.5 */
-  --calcite-font-line-height-relative-snug: 137.5%; /* 1.375 */
-  --calcite-font-line-height-relative-tight: 125%; /* 1.25 */
+  --calcite-font-line-height-relative-loose: 2; /* 2 */
+  --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
+  --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
+  --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
+  --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
   --calcite-font-line-height-relative: auto; /* 1 */
   --calcite-font-line-height-fixed-xl: 24px;
   --calcite-font-line-height-fixed-lg: 20px;
@@ -949,11 +949,11 @@ export const calciteFontLineHeightFixedBase = "16px";
 export const calciteFontLineHeightFixedLg = "20px";
 export const calciteFontLineHeightFixedXl = "24px";
 export const calciteFontLineHeightRelative = "auto"; // 1
-export const calciteFontLineHeightRelativeTight = "125%"; // 1.25
-export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375
-export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5
-export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625
-export const calciteFontLineHeightRelativeLoose = "200%"; // 2
+export const calciteFontLineHeightRelativeTight = "1.25"; // 1.25
+export const calciteFontLineHeightRelativeSnug = "1.375"; // 1.375
+export const calciteFontLineHeightRelativeNormal = "1.5"; // 1.5
+export const calciteFontLineHeightRelativeRelaxed = "1.625"; // 1.625
+export const calciteFontLineHeightRelativeLoose = "2"; // 2
 export const calciteFontLetterSpacingTight = "-0.4";
 export const calciteFontLetterSpacingNormal = "0";
 export const calciteFontLetterSpacingWide = "0.4";
@@ -993,27 +993,27 @@ export const calciteSizeLg = "2.75rem";
 export const calciteSizeXl = "3rem";
 export const calciteSizeXxl = "4rem";
 export const calciteSizeXxxl = "6rem";
-export const calciteSpaceFixedXxs = "4px"; // deprecated
-export const calciteSpaceFixedXs = "6px"; // deprecated
-export const calciteSpaceFixedSm = "8px"; // deprecated
-export const calciteSpaceFixedMd = "12px"; // deprecated
-export const calciteSpaceFixedLg = "14px"; // deprecated
-export const calciteSpaceFixedXl = "16px"; // deprecated
-export const calciteSpaceFixedXxl = "20px"; // deprecated
-export const calciteSpaceFixedXxxl = "32px"; // deprecated
-export const calciteSpaceNone = "0";
-export const calciteSpacePx = "1px";
-export const calciteSpaceBase = "2px";
-export const calciteSpaceXxs = "0.25rem";
-export const calciteSpaceXs = "0.375rem";
-export const calciteSpaceSm = "0.5rem";
-export const calciteSpaceSmPlus = "0.625rem";
-export const calciteSpaceMd = "0.75rem";
-export const calciteSpaceMdPlus = "0.875rem";
-export const calciteSpaceLg = "1rem";
-export const calciteSpaceXl = "1.25rem";
-export const calciteSpaceXxl = "1.5rem";
-export const calciteSpaceXxxl = "2rem";
+export const calciteSpacingFixedXxs = "4px"; // deprecated
+export const calciteSpacingFixedXs = "6px"; // deprecated
+export const calciteSpacingFixedSm = "8px"; // deprecated
+export const calciteSpacingFixedMd = "12px"; // deprecated
+export const calciteSpacingFixedLg = "14px"; // deprecated
+export const calciteSpacingFixedXl = "16px"; // deprecated
+export const calciteSpacingFixedXxl = "20px"; // deprecated
+export const calciteSpacingFixedXxxl = "32px"; // deprecated
+export const calciteSpacingNone = "0";
+export const calciteSpacingPx = "1px";
+export const calciteSpacingBase = "2px";
+export const calciteSpacingXxs = "0.25rem";
+export const calciteSpacingXs = "0.375rem";
+export const calciteSpacingSm = "0.5rem";
+export const calciteSpacingSmPlus = "0.625rem";
+export const calciteSpacingMd = "0.75rem";
+export const calciteSpacingMdPlus = "0.875rem";
+export const calciteSpacingLg = "1rem";
+export const calciteSpacingXl = "1.25rem";
+export const calciteSpacingXxl = "1.5rem";
+export const calciteSpacingXxxl = "2rem";
 export const calciteTypography = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
 export const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"};
 export const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"};
@@ -1035,41 +1035,41 @@ export const calciteTypographyBoldMinus2h = {"fontWeight":"600","fontSize":"12px
 export const calciteTypographyBoldMinus1h = {"fontWeight":"600"};
 export const calciteTypographyBold0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"};
 export const calciteTypographyBold1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"};
-export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"};
-export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"137.5%"};
-export const calciteTypographyWrapRegular0 = {"lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapRegular1 = {"lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapRegular2 = {"lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapRegular3 = {"lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"137.5%"};
-export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"137.5%"};
-export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"};
-export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"137.5%"};
-export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
-export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
-export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
-export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
-export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"137.5%"};
-export const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"};
+export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"16px"};
+export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"18px"};
+export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"20px"};
+export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"1.25","fontSize":"24px"};
+export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"12px"};
+export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"1.375"};
+export const calciteTypographyWrapRegular0 = {"lineHeight":"1.375","fontSize":"16px"};
+export const calciteTypographyWrapRegular1 = {"lineHeight":"1.375","fontSize":"18px"};
+export const calciteTypographyWrapRegular2 = {"lineHeight":"1.375","fontSize":"20px"};
+export const calciteTypographyWrapRegular3 = {"lineHeight":"1.375","fontSize":"24px"};
+export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"1.375","fontSize":"12px"};
+export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"1.375"};
+export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"16px"};
+export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"18px"};
+export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"20px"};
+export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"24px"};
+export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"12px"};
+export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"1.375"};
+export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"16px"};
+export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"18px"};
+export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"20px"};
+export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"24px"};
+export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"12px"};
+export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"1.375"};
+export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"24px"};
+export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"20px"};
+export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"24px"};
+export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"20px"};
+export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"18px"};
+export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"16px"};
+export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"1.375"};
+export const calciteTypographyHierarchyBodySnug = {"lineHeight":"1.375"};
 export const calciteTypographyHierarchyBody = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
 export const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"700"};
-export const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"};
+export const calciteTypographyHierarchyCaption = {"lineHeight":"1.375","fontSize":"12px"};
 export const calciteZIndexDeep = "-999999";
 export const calciteZIndex = "1";
 export const calciteZIndexSticky = "300";
@@ -1254,34 +1254,34 @@ export const calciteSizeXl : string;
 export const calciteSizeXxl : string;
 export const calciteSizeXxxl : string;
 /** deprecated */
-export const calciteSpaceFixedXxs : string;
+export const calciteSpacingFixedXxs : string;
 /** deprecated */
-export const calciteSpaceFixedXs : string;
+export const calciteSpacingFixedXs : string;
 /** deprecated */
-export const calciteSpaceFixedSm : string;
+export const calciteSpacingFixedSm : string;
 /** deprecated */
-export const calciteSpaceFixedMd : string;
+export const calciteSpacingFixedMd : string;
 /** deprecated */
-export const calciteSpaceFixedLg : string;
+export const calciteSpacingFixedLg : string;
 /** deprecated */
-export const calciteSpaceFixedXl : string;
+export const calciteSpacingFixedXl : string;
 /** deprecated */
-export const calciteSpaceFixedXxl : string;
+export const calciteSpacingFixedXxl : string;
 /** deprecated */
-export const calciteSpaceFixedXxxl : string;
-export const calciteSpaceNone : string;
-export const calciteSpacePx : string;
-export const calciteSpaceBase : string;
-export const calciteSpaceXxs : string;
-export const calciteSpaceXs : string;
-export const calciteSpaceSm : string;
-export const calciteSpaceSmPlus : string;
-export const calciteSpaceMd : string;
-export const calciteSpaceMdPlus : string;
-export const calciteSpaceLg : string;
-export const calciteSpaceXl : string;
-export const calciteSpaceXxl : string;
-export const calciteSpaceXxxl : string;
+export const calciteSpacingFixedXxxl : string;
+export const calciteSpacingNone : string;
+export const calciteSpacingPx : string;
+export const calciteSpacingBase : string;
+export const calciteSpacingXxs : string;
+export const calciteSpacingXs : string;
+export const calciteSpacingSm : string;
+export const calciteSpacingSmPlus : string;
+export const calciteSpacingMd : string;
+export const calciteSpacingMdPlus : string;
+export const calciteSpacingLg : string;
+export const calciteSpacingXl : string;
+export const calciteSpacingXxl : string;
+export const calciteSpacingXxxl : string;
 export const calciteTypography : { fontFamily: string[], fontSize: string, fontWeight: string, letterSpacing: string, lineHeight: string, paragraphSpacing: string, textCase: string, textDecoration: string };
 export const calciteTypographyLightMinus3h : { fontSize: string, fontWeight: string, lineHeight: string };
 export const calciteTypographyLightMinus2h : { fontSize: string, fontWeight: string };
@@ -2060,27 +2060,27 @@ $calcite-z-index-header: 400;
 $calcite-z-index-sticky: 300;
 $calcite-z-index: 1;
 $calcite-z-index-deep: -999999;
-$calcite-space-xxxl: 2rem;
-$calcite-space-xxl: 1.5rem;
-$calcite-space-xl: 1.25rem;
-$calcite-space-lg: 1rem;
-$calcite-space-md-plus: 0.875rem;
-$calcite-space-md: 0.75rem;
-$calcite-space-sm-plus: 0.625rem;
-$calcite-space-sm: 0.5rem;
-$calcite-space-xs: 0.375rem;
-$calcite-space-xxs: 0.25rem;
-$calcite-space-base: 2px;
-$calcite-space-px: 1px;
-$calcite-space-none: 0;
-$calcite-space-fixed-xxxl: 32px; // deprecated
-$calcite-space-fixed-xxl: 20px; // deprecated
-$calcite-space-fixed-xl: 16px; // deprecated
-$calcite-space-fixed-lg: 14px; // deprecated
-$calcite-space-fixed-md: 12px; // deprecated
-$calcite-space-fixed-sm: 8px; // deprecated
-$calcite-space-fixed-xs: 6px; // deprecated
-$calcite-space-fixed-xxs: 4px; // deprecated
+$calcite-spacing-xxxl: 2rem;
+$calcite-spacing-xxl: 1.5rem;
+$calcite-spacing-xl: 1.25rem;
+$calcite-spacing-lg: 1rem;
+$calcite-spacing-md-plus: 0.875rem;
+$calcite-spacing-md: 0.75rem;
+$calcite-spacing-sm-plus: 0.625rem;
+$calcite-spacing-sm: 0.5rem;
+$calcite-spacing-xs: 0.375rem;
+$calcite-spacing-xxs: 0.25rem;
+$calcite-spacing-base: 2px;
+$calcite-spacing-px: 1px;
+$calcite-spacing-none: 0;
+$calcite-spacing-fixed-xxxl: 32px; // deprecated
+$calcite-spacing-fixed-xxl: 20px; // deprecated
+$calcite-spacing-fixed-xl: 16px; // deprecated
+$calcite-spacing-fixed-lg: 14px; // deprecated
+$calcite-spacing-fixed-md: 12px; // deprecated
+$calcite-spacing-fixed-sm: 8px; // deprecated
+$calcite-spacing-fixed-xs: 6px; // deprecated
+$calcite-spacing-fixed-xxs: 4px; // deprecated
 $calcite-size-xxxl: 6rem;
 $calcite-size-xxl: 4rem;
 $calcite-size-xl: 3rem;
@@ -2117,11 +2117,11 @@ $calcite-font-paragraph-spacing-normal: 4px;
 $calcite-font-letter-spacing-wide: 0.4;
 $calcite-font-letter-spacing-normal: 0;
 $calcite-font-letter-spacing-tight: -0.4;
-$calcite-font-line-height-relative-loose: 200%; // 2
-$calcite-font-line-height-relative-relaxed: 162.5%; // 1.625
-$calcite-font-line-height-relative-normal: 150%; // 1.5
-$calcite-font-line-height-relative-snug: 137.5%; // 1.375
-$calcite-font-line-height-relative-tight: 125%; // 1.25
+$calcite-font-line-height-relative-loose: 2; // 2
+$calcite-font-line-height-relative-relaxed: 1.625; // 1.625
+$calcite-font-line-height-relative-normal: 1.5; // 1.5
+$calcite-font-line-height-relative-snug: 1.375; // 1.375
+$calcite-font-line-height-relative-tight: 1.25; // 1.25
 $calcite-font-line-height-relative: auto; // 1
 $calcite-font-line-height-fixed-xl: 24px;
 $calcite-font-line-height-fixed-lg: 20px;