fix(tokens)!: correct space and size tokens (#10727)

**Related Issue:** #10012 #10014

## Summary

Corrects space and size tokens to align with the Calcite UI Kit and uses
REM based tokens for the web platform token output. Updates Calcite
Components to ensure there are no visual breaking changes to components
using the updates size and space tokens.

BREAKING CHANGE: Size and Space token values have changed. Line Height
tokens exported for JS and ES6 are now unitless.

### Size

calcite-size-px: 1px;
calcite-size-xxxs: 0.75rem; // 12px was 2px
calcite-size-xxs: 0.875rem; // 14px was 4px
calcite-size-xs: 1rem; // 16px was 6px
calcite-size-sm: 1.5rem; // 24px was 8px
calcite-size-sm-plus; // removed
calcite-size-md: 2rem; // 32px was 12px
calcite-size-md-plus; // removed
calcite-size-lg: 2.75rem; // 44px was 16px
calcite-size-xl: 3rem; // 48px was 20px
calcite-size-xxl: 4rem; //  64px was 24px
calcite-size-xxxl: 6rem;  // 96px was 32px

### Space

calcite-spacing-none: 0; // new
calcite-spacing-px: 1px;
calcite-spacing-base: 2px;
calcite-spacing-xxs: 0.25rem; // 4px
calcite-spacing-xs: 0.375rem; // 6px
calcite-spacing-sm: 0.5rem; // 8px
calcite-spacing-sm-plus: 0.625rem; // new
calcite-spacing-md: 0.75rem; // 12px
calcite-spacing-md-plus: 0.875rem; // new
calcite-spacing-lg: 1rem; // 16px was 14px
calcite-spacing-xl: 1.25rem; // 20px was 16px
calcite-spacing-xxl: 1.5rem; // 24px was 20px
calcite-spacing-xxxl: 2rem; // 32px

### Pixel based tokens are now categorized under "fixed"

calcite-size-fixed-xxxl: 32px; // deprecated
calcite-size-fixed-xxl: 24px; // deprecated
calcite-size-fixed-xl: 20px; // deprecated
calcite-size-fixed-lg: 16px; // deprecated
calcite-size-fixed-md: 12px; // deprecated
calcite-size-fixed-sm: 8px; // deprecated
calcite-size-fixed-xs: 6px; // deprecated
calcite-size-fixed-xxs: 4px; // deprecated
calcite-size-fixed-xxxs: 2px; // deprecated

calcite-spacing-fixed-lg: 14px; // deprecated
calcite-spacing-fixed-md: 12px; // deprecated
calcite-spacing-fixed-sm: 8px; // deprecated
calcite-spacing-fixed-xl: 16px; // deprecated
calcite-spacing-fixed-xs: 6px; // deprecated
calcite-spacing-fixed-xxl: 20px; // deprecated
calcite-spacing-fixed-xxs: 4px; // deprecated
calcite-spacing-fixed-xxxl: 32px; // deprecated

packages/calcite-components/src/assets/styles/_legacy.scss

@@ -49,25 +49,25 @@
   --calcite-app-breakpoint-width-xs: var(--calcite-container-size-width-xs-max);
   --calcite-app-breakpoint-width-xxs: var(--calcite-container-size-width-xxs-max);
   --calcite-app-spacing-11: var(--calcite-spacing-xxxl);
-  --calcite-app-spacing-8: var(--calcite-spacing-xxl);
-  --calcite-app-spacing-7: var(--calcite-spacing-xl);
-  --calcite-app-spacing-6: var(--calcite-spacing-lg);
+  --calcite-app-spacing-8: var(--calcite-spacing-xl);
+  --calcite-app-spacing-7: var(--calcite-spacing-lg);
+  --calcite-app-spacing-6: var(--calcite-spacing-md-plus);
   --calcite-app-spacing-5: var(--calcite-spacing-md);
   --calcite-app-spacing-3: var(--calcite-spacing-sm);
   --calcite-app-spacing-2: var(--calcite-spacing-xs);
   --calcite-app-spacing-1: var(--calcite-spacing-xxs);
   --calcite-app-spacing-0: var(--calcite-spacing-base);
-  --calcite-app-sizing-11: var(--calcite-size-xxxl);
-  --calcite-app-sizing-9: var(--calcite-size-xxl);
-  --calcite-app-sizing-8: var(--calcite-size-xl);
-  --calcite-app-sizing-7: var(--calcite-size-lg);
-  --calcite-app-sizing-6: var(--calcite-size-md-plus);
-  --calcite-app-sizing-5: var(--calcite-size-md);
-  --calcite-app-sizing-4: var(--calcite-size-sm-plus);
-  --calcite-app-sizing-3: var(--calcite-size-sm);
-  --calcite-app-sizing-2: var(--calcite-size-xs);
-  --calcite-app-sizing-1: var(--calcite-size-xxs);
-  --calcite-app-sizing-0: var(--calcite-size-xxxs);
+  --calcite-app-sizing-11: var(--calcite-size-md);
+  --calcite-app-sizing-9: var(--calcite-size-sm);
+  --calcite-app-sizing-8: var(--calcite-spacing-xl);
+  --calcite-app-sizing-7: var(--calcite-size-xs);
+  --calcite-app-sizing-6: var(--calcite-size-xxxs-plus);
+  --calcite-app-sizing-5: var(--calcite-size-xxxs);
+  --calcite-app-sizing-4: var(--calcite-spacing-sm-plus);
+  --calcite-app-sizing-3: var(--calcite-spacing-sm);
+  --calcite-app-sizing-2: var(--calcite-spacing-xs);
+  --calcite-app-sizing-1: var(--calcite-spacing-xxs);
+  --calcite-app-sizing-0: var(--calcite-spacing-base);
   --calcite-app-opacity-100: var(--calcite-app-opacity-full);
   --calcite-app-opacity-85: var(--calcite-app-opacity-dark);
   --calcite-app-opacity-50: var(--calcite-app-opacity-half);

packages/calcite-components/src/components/action-group/action-group.scss

@@ -72,4 +72,8 @@
   }
 }
 
+:host([layout="horizontal"]) ::slotted(calcite-action-group) {
+  border-inline-end: var(--calcite-size-px);
+}
+
 @include base-component();

packages/calcite-components/src/components/action/action.scss

@@ -175,7 +175,7 @@ button {
   .button {
     @apply text-n2h font-normal;
     padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.2"));
-    padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-xxs));
+    padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs));
   }
   .button--text-visible .icon-container {
     margin-inline-end: theme("spacing.2");
@@ -186,7 +186,7 @@ button {
   .button {
     @apply text-n1h font-normal;
     padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.4"));
-    padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-md));
+    padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-md));
   }
   .button--text-visible .icon-container {
     margin-inline-end: theme("spacing.3");
@@ -197,7 +197,7 @@ button {
   .button {
     @apply text-0h font-normal;
     padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.5"));
-    padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-xl));
+    padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl));
   }
   .button--text-visible .icon-container {
     margin-inline-end: theme("spacing.4");

packages/calcite-components/src/components/card-group/card-group.scss

@@ -14,7 +14,7 @@
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md)));
+  gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-base)));
 }
 
 @include base-component();

packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss

@@ -16,8 +16,8 @@
 
 :host([scale="s"]) {
   block-size: #{$calcite-size-24};
-  margin: var(--calcite-size-xs);
-  margin-inline-start: var(--calcite-size-sm);
+  margin: var(--calcite-spacing-xs);
+  margin-inline-start: var(--calcite-spacing-sm);
 
   .chevron-container,
   .chevron {
@@ -28,27 +28,27 @@
 
 :host([scale="m"]) {
   block-size: #{$calcite-size-32};
-  margin: var(--calcite-size-sm);
-  margin-inline-start: var(--calcite-size-sm-plus);
+  margin: var(--calcite-spacing-sm);
+  margin-inline-start: var(--calcite-spacing-sm-plus);
 
   .chevron-container,
   .chevron {
     min-inline-size: #{$calcite-size-32};
     block-size: #{$calcite-size-32};
-    --calcite-internal-action-padding-block: var(--calcite-size-xxs);
+    --calcite-internal-action-padding-block: var(--calcite-spacing-xxs);
   }
 }
 
 :host([scale="l"]) {
   block-size: #{$calcite-size-44};
-  margin: var(--calcite-size-xs);
-  margin-inline-start: var(--calcite-size-sm);
+  margin: var(--calcite-spacing-xs);
+  margin-inline-start: var(--calcite-spacing-sm);
 
   .chevron-container,
   .chevron {
     min-inline-size: #{$calcite-size-44};
     block-size: #{$calcite-size-44};
-    --calcite-internal-action-padding-block: var(--calcite-size-sm-plus);
+    --calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus);
   }
 }
 
@@ -93,7 +93,7 @@
     justify-start
     text-center
     leading-none;
-  gap: var(--calcite-size-xxs);
+  gap: var(--calcite-spacing-xxs);
   &.range-calendar {
     @apply justify-center;
   }
@@ -110,7 +110,7 @@
 .year,
 .suffix {
   @apply bg-foreground-1;
-  margin-inline: var(--calcite-size-xxs);
+  margin-inline: var(--calcite-spacing-xxs);
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-color-text-1);
   font-size: var(--calcite-font-size-md);
@@ -138,18 +138,18 @@
 }
 
 .month-select {
-  --calcite-select-spacing-inline: var(--calcite-size-xxs);
-  --calcite-internal-select-spacing-block: var(--calcite-size-xxs);
-  --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-xxs);
+  --calcite-select-spacing-inline: var(--calcite-spacing-xxs);
+  --calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);
+  --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);
   --calcite-select-font-size: var(--calcite-font-size-md);
   --calcite-select-line-height: var(--calcite-font-line-height-fixed-lg);
 }
 
 :host([scale="s"]) .month-year-container {
   .month-select {
-    --calcite-select-spacing-inline: var(--calcite-size-xxxs);
-    --calcite-internal-select-spacing-block: var(--calcite-size-xxxs);
-    --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-xxxs);
+    --calcite-select-spacing-inline: var(--calcite-spacing-base);
+    --calcite-internal-select-spacing-block: var(--calcite-spacing-base);
+    --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);
     --calcite-internal-select-block-size: #{$calcite-size-24};
     --calcite-select-font-size: var(--calcite-font-size);
     --calcite-select-line-height: var(--calcite-font-line-height-fixed-base);
@@ -168,9 +168,9 @@
 
 :host([scale="l"]) .month-year-container {
   .month-select {
-    --calcite-select-spacing-inline: var(--calcite-size-sm);
-    --calcite-internal-select-spacing-block: var(--calcite-size-sm);
-    --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-sm);
+    --calcite-select-spacing-inline: var(--calcite-spacing-sm);
+    --calcite-internal-select-spacing-block: var(--calcite-spacing-sm);
+    --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);
     --calcite-internal-select-block-size: #{$calcite-size-44};
     --calcite-select-font-size: var(--calcite-font-size-lg);
     --calcite-select-line-height: var(--calcite-font-line-height-fixed-xl);

packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

@@ -1,7 +1,7 @@
 import {
-  calciteSizeXxxs,
-  calciteSizeXxs,
-  calciteSizeSm,
+  calciteSpacingBase,
+  calciteSpacingXxs,
+  calciteSpacingSm,
 } from "@esri/calcite-design-tokens/dist/es6/global.js";
 import { PropertyValues } from "lit";
 import { createRef } from "lit-html/directives/ref.js";
@@ -352,15 +352,31 @@ export class DatePickerMonthHeader extends LitElement {
     }
   }
 
+  private getPx(value: string): string {
+    const num = Number(value.replace(/[rem|px]/g, ""));
+    const base = 16;
+
+    if (value.includes("rem")) {
+      return `${num * base}px`;
+    }
+
+    return `${num}px`;
+  }
+
   private getYearSelectPadding(): string {
+    let padding;
     switch (this.scale) {
       case "l":
-        return calciteSizeSm;
+        padding = calciteSpacingSm;
+        break;
       case "s":
-        return calciteSizeXxxs;
+        padding = calciteSpacingBase;
+        break;
       default:
-        return calciteSizeXxs;
+        padding = calciteSpacingXxs;
+        break;
     }
+    return this.getPx(padding);
   }
 
   // #endregion

packages/calcite-components/src/components/date-picker-month/date-picker-month.scss

@@ -15,8 +15,8 @@
 .week-header-container {
   @apply flex;
   block-size: #{$calcite-size-16};
-  padding-inline: var(--calcite-size-sm);
-  padding-block: var(--calcite-size-md);
+  padding-inline: var(--calcite-spacing-sm);
+  padding-block: var(--calcite-spacing-md);
 }
 
 .week-header {
@@ -44,8 +44,8 @@
   @apply grid;
   grid-template-columns: repeat(7, 1fr);
   grid-auto-rows: 1fr;
-  padding-inline: var(--calcite-size-sm);
-  padding-block-end: var(--calcite-size-sm);
+  padding-inline: var(--calcite-spacing-sm);
+  padding-block-end: var(--calcite-spacing-sm);
 }
 
 .month-header {
@@ -62,12 +62,12 @@
 
 :host([scale="s"]) {
   .week-days {
-    padding-inline: var(--calcite-size-xs);
-    padding-block-end: var(--calcite-size-xs);
+    padding-inline: var(--calcite-spacing-xs);
+    padding-block-end: var(--calcite-spacing-xs);
   }
   .week-header-container {
-    padding-inline: var(--calcite-size-xs);
-    padding-block: var(--calcite-size-sm);
+    padding-inline: var(--calcite-spacing-xs);
+    padding-block: var(--calcite-spacing-sm);
   }
   .day {
     font-size: var(--calcite-font-size-sm);
@@ -79,12 +79,12 @@
     @apply text-n1h;
   }
   .week-days {
-    padding-inline: var(--calcite-size-md);
-    padding-block-end: var(--calcite-size-md);
+    padding-inline: var(--calcite-spacing-md);
+    padding-block-end: var(--calcite-spacing-md);
   }
   .week-header-container {
-    padding-inline: var(--calcite-size-md);
-    padding-block: var(--calcite-size-md-plus);
+    padding-inline: var(--calcite-spacing-md);
+    padding-block: var(--calcite-spacing-md-plus);
   }
   .day {
     font-size: var(--calcite-font-size-md);

packages/calcite-components/src/components/dialog/dialog.scss

@@ -96,7 +96,7 @@
 }
 
 :host([scale="l"]) {
-  --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-lg));
+  --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));
   --calcite-internal-dialog-min-size-x: 388px;
   --calcite-internal-dialog-min-size-y: 220px;
 }

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

@@ -78,11 +78,11 @@
 
   .dropdown-item-icon,
   .dropdown-item-icon--start {
-    padding-inline-end: var(--calcite-spacing-xl);
+    padding-inline-end: var(--calcite-spacing-lg);
   }
 
   .dropdown-item-icon--end {
-    padding-inline-start: var(--calcite-spacing-xl);
+    padding-inline-start: var(--calcite-spacing-lg);
   }
 }
 

packages/calcite-components/src/components/input-date-picker/input-date-picker.scss

@@ -90,13 +90,13 @@
 
 .divider {
   @apply inline-block w-px;
-  margin-block: var(--calcite-size-xxs);
+  margin-block: var(--calcite-spacing-xxs);
   background-color: var(--calcite-color-border-2);
 }
 
 :host([layout="vertical"]) .divider-container {
   @apply w-full h-px border-t-0 border-b-0 border-l border-r-0;
-  padding-inline: var(--calcite-size-md);
+  padding-inline: var(--calcite-spacing-md);
   & .divider {
     @apply w-full h-px my-0;
   }
@@ -125,7 +125,7 @@
 
 .vertical-chevron-container {
   @apply flex items-center border border-solid border-color-input border-l-0;
-  padding-inline: var(--calcite-size-md);
+  padding-inline: var(--calcite-spacing-md);
   background-color: var(--calcite-color-foreground-1);
 
   calcite-icon {
@@ -140,14 +140,14 @@
 :host([range][layout="vertical"][scale="s"]) {
   .vertical-chevron-container,
   .divider-container {
-    padding-inline: var(--calcite-size-sm);
+    padding-inline: var(--calcite-spacing-sm);
   }
 }
 
 :host([range][layout="vertical"][scale="l"]) {
   .vertical-chevron-container,
   .divider-container {
-    padding-inline: var(--calcite-size-lg);
+    padding-inline: var(--calcite-spacing-lg);
   }
 }
 

packages/calcite-components/src/components/panel/panel.scss

@@ -40,7 +40,7 @@
 
 :host([scale="s"]) {
   --calcite-internal-panel-default-space: var(--calcite-spacing-sm);
-  --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus);
 
   .header-content {
     .heading {
@@ -55,7 +55,7 @@
 
 :host([scale="m"]) {
   --calcite-internal-panel-default-space: var(--calcite-spacing-md);
-  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus);
 
   .header-content {
     .heading {
@@ -69,8 +69,8 @@
 }
 
 :host([scale="l"]) {
-  --calcite-internal-panel-default-space: var(--calcite-spacing-xl);
-  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);
+  --calcite-internal-panel-default-space: var(--calcite-spacing-lg);
+  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl);
 
   .header-content {
     .heading {

packages/calcite-components/src/components/scrim/scrim.scss

@@ -5,9 +5,6 @@
  *
  * @prop --calcite-scrim-background: Specifies the background color of the scrim.
  */
-:host {
-  --calcite-scrim-background: var(--calcite-color-transparent-scrim);
-}
 
 :host {
   @apply absolute