fix(tokens)!: correct space and size tokens

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