From f09b06bb80898350a460f922247761f2a204fb1a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Wed, 6 Dec 2023 13:09:21 -0800 Subject: [PATCH 1/2] feat: provide legacy CSS custom props for backwards compatibility --- .../src/assets/styles/_legacy.scss | 114 ++++++++++++++++++ .../src/assets/styles/global.scss | 3 + 2 files changed, 117 insertions(+) create mode 100644 packages/calcite-components/src/assets/styles/_legacy.scss diff --git a/packages/calcite-components/src/assets/styles/_legacy.scss b/packages/calcite-components/src/assets/styles/_legacy.scss new file mode 100644 index 00000000000..6dc49bae943 --- /dev/null +++ b/packages/calcite-components/src/assets/styles/_legacy.scss @@ -0,0 +1,114 @@ +// 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-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); +} diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss index 5ebf5e8dd24..76aef5a9541 100644 --- a/packages/calcite-components/src/assets/styles/global.scss +++ b/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(); From d6a6f9a6ac80a834ac8d7b10ae7174b45219c74a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 7 Dec 2023 10:32:32 -0800 Subject: [PATCH 2/2] fix: add missing legacy token mappings --- packages/calcite-components/src/assets/styles/_legacy.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/calcite-components/src/assets/styles/_legacy.scss b/packages/calcite-components/src/assets/styles/_legacy.scss index 6dc49bae943..d6e38ce888f 100644 --- a/packages/calcite-components/src/assets/styles/_legacy.scss +++ b/packages/calcite-components/src/assets/styles/_legacy.scss @@ -7,6 +7,8 @@ --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);