feat: provide legacy CSS custom props for backwards compatibility (#8355)

**Related Issue:** #8354 

## Summary

Include a map of new design tokens to old CSS Custom Props set
previously by calcite-colors to provide legacy CSS custom props for
backwards compatibility.

Author: alisonailea

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

@@ -0,0 +1,116 @@
+// Map of Calcite Design Tokens to old CalciteComponent Custom Props (from calcite-colors)
+:root {
+  --calcite-ui-brand: var(--calcite-color-brand);
+  --calcite-ui-brand-hover: var(--calcite-color-brand-hover);
+  --calcite-ui-brand-press: var(--calcite-color-brand-press);
+  --calcite-ui-background: var(--calcite-color-background);
+  --calcite-ui-foreground-1: var(--calcite-color-foreground-1);
+  --calcite-ui-foreground-2: var(--calcite-color-foreground-2);
+  --calcite-ui-foreground-3: var(--calcite-color-foreground-3);
+  --calcite-ui-foreground-current: var(--calcite-color-foreground-current);
+  --calcite-ui-focus-offset-invert: var(--calcite-offset-invert-focus);
+  --calcite-semantic-ui-color-foreground-current: var(--calcite-color-foreground-current);
+  --calcite-ui-text-1: var(--calcite-color-text-1);
+  --calcite-ui-text-2: var(--calcite-color-text-2);
+  --calcite-ui-text-3: var(--calcite-color-text-3);
+  --calcite-ui-text-inverse: var(--calcite-color-text-inverse);
+  --calcite-ui-text-link: var(--calcite-color-text-link);
+  --calcite-ui-border-1: var(--calcite-color-border-1);
+  --calcite-ui-border-2: var(--calcite-color-border-2);
+  --calcite-ui-border-3: var(--calcite-color-border-3);
+  --calcite-ui-border-input: var(--calcite-color-border-input);
+  --calcite-ui-info: var(--calcite-color-status-info);
+  --calcite-ui-info-hover: var(--calcite-color-status-info-hover);
+  --calcite-ui-info-press: var(--calcite-color-status-info-press);
+  --calcite-ui-success: var(--calcite-color-status-success);
+  --calcite-ui-success-hover: var(--calcite-color-status-success-hover);
+  --calcite-ui-success-press: var(--calcite-color-status-success-press);
+  --calcite-ui-warning: var(--calcite-color-status-warning);
+  --calcite-ui-warning-hover: var(--calcite-color-status-warning-hover);
+  --calcite-ui-warning-press: var(--calcite-color-status-warning-press);
+  --calcite-ui-danger: var(--calcite-color-status-danger);
+  --calcite-ui-danger-hover: var(--calcite-color-status-danger-hover);
+  --calcite-ui-danger-press: var(--calcite-color-status-danger-press);
+  --calcite-ui-inverse: var(--calcite-color-inverse);
+  --calcite-app-z-index: var(--calcite-z-index);
+  --calcite-app-z-index-tooltip: var(--calcite-z-index-tooltip);
+  --calcite-app-z-index-popup: var(--calcite-z-index-popup);
+  --calcite-app-z-index-modal: var(--calcite-z-index-modal);
+  --calcite-app-z-index-overlay: var(--calcite-z-index-overlay);
+  --calcite-app-z-index-dropdown: var(--calcite-z-index-dropdown);
+  --calcite-app-z-index-toast: var(--calcite-z-index-toast);
+  --calcite-app-z-index-header: var(--calcite-z-index-header);
+  --calcite-app-z-index-sticky: var(--calcite-z-index-sticky);
+  --calcite-app-breakpoint-content-fixed: var(--calcite-container-size-content-fixed);
+  --calcite-app-breakpoint-content-fluid: var(--calcite-container-size-content-fluid);
+  --calcite-app-breakpoint-width-lg: var(--calcite-container-size-width-lg-max);
+  --calcite-app-breakpoint-width-md: var(--calcite-container-size-width-md-max);
+  --calcite-app-breakpoint-width-sm: var(--calcite-container-size-width-sm-max);
+  --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-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-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);
+  --calcite-app-opacity-40: var(--calcite-app-opacity-light);
+  --calcite-app-border-width-none: var(--calcite-border-width-none);
+  --calcite-app-border-width-2: var(--calcite-border-width-lg);
+  --calcite-app-border-width-1: var(--calcite-border-width-md);
+  --calcite-app-border-width-0: var(--calcite-border-width-sm);
+  --calcite-app-border-radius-full: var(--calcite-corner-radius-pill);
+  --calcite-app-border-radius-none: var(--calcite-corner-radius-sharp);
+  --calcite-app-border-radius-1: var(--calcite-corner-radius-round);
+  --calcite-app-border-radius-0: var(--calcite-corner-radius-0);
+  --calcite-app-font-text-case-capitalize: var(--calcite-font-text-case-capitalize);
+  --calcite-app-font-text-case-lowercase: var(--calcite-font-text-case-lowercase);
+  --calcite-app-font-text-case-uppercase: var(--calcite-font-text-case-uppercase);
+  --calcite-app-font-text-case-none: var(--calcite-font-text-case-none);
+  --calcite-app-font-text-decoration-underline: var(--calcite-font-text-decoration-underline);
+  --calcite-app-font-text-decoration-none: var(--calcite-font-text-decoration-none);
+  --calcite-app-font-paragraph-spacing-normal: var(--calcite-font-paragraph-spacing-normal);
+  --calcite-app-font-letter-spacing-wide: var(--calcite-font-letter-spacing-wide);
+  --calcite-app-font-letter-spacing-normal: var(--calcite-font-letter-spacing-normal);
+  --calcite-app-font-letter-spacing-tight: var(--calcite-font-letter-spacing-tight);
+  --calcite-app-font-size-6: var(--calcite-font-size-xxl);
+  --calcite-app-font-size-5: var(--calcite-font-size-xl);
+  --calcite-app-font-size-4: var(--calcite-font-size-lg);
+  --calcite-app-font-size-3: var(--calcite-font-size-md);
+  --calcite-app-font-size-2: var(--calcite-font-size);
+  --calcite-app-font-size-1: var(--calcite-font-size-sm);
+  --calcite-app-font-size-0: var(--calcite-font-size-xs);
+  --calcite-app-font-line-height-relative-loose: var(--calcite-font-line-height-relative-loose);
+  --calcite-app-font-line-height-relative-relaxed: var(--calcite-font-line-height-relative-relaxed);
+  --calcite-app-font-line-height-relative-normal: var(--calcite-font-line-height-relative-normal);
+  --calcite-app-font-line-height-relative-snug: var(--calcite-font-line-height-relative-snug);
+  --calcite-app-font-line-height-relative-tight: var(--calcite-font-line-height-relative-tight);
+  --calcite-app-font-line-height-relative: var(--calcite-font-line-height-relative);
+  --calcite-app-font-line-height-fixed-3: var(--calcite-font-line-height-fixed-xl);
+  --calcite-app-font-line-height-fixed-2: var(--calcite-font-line-height-fixed-lg);
+  --calcite-app-font-line-height-fixed: var(--calcite-font-line-height-fixed-sm);
+  --calcite-app-font-weight-bold: var(--calcite-font-weight-bold);
+  --calcite-app-font-weight-demi: var(--calcite-font-weight-semibold);
+  --calcite-app-font-weight-medium: var(--calcite-font-weight-medium);
+  --calcite-app-font-weight-regular: var(--calcite-font-weight-regular);
+  --calcite-app-font-weight-light: var(--calcite-font-weight-light);
+  --calcite-app-font-family-code: var(--calcite-font-family-code);
+  --calcite-app-font-family-primary: var(--calcite-font-family-primary);
+}

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

@@ -8,6 +8,9 @@
 // Add Calcite Design Tokens as CSS Custom Props
 @import url("~@esri/calcite-design-tokens/dist/css/index.css");
 
+// Include legacy tokens for backwards compatibility
+@import "./legacy";
+
 :root {
   @extend %type-vars;
   @include floating-ui-base();