Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Dec 7, 2023
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f09b06b
feat: provide legacy CSS custom props for backwards compatibility
alisonailea Dec 6, 2023
d6a6f9a
fix: add missing legacy token mappings
alisonailea Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions packages/calcite-components/src/assets/styles/_legacy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
// Map of Calcite Design Tokens to old CalciteComponent Custom Props (from calcite-colors)
:root {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Max left a comment earlier this morning regarding two additional props not mentioned below.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added!

--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);
}
3 changes: 3 additions & 0 deletions packages/calcite-components/src/assets/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can make this a separate file they could add to their app instead of including it for everyone? Since it does add quite a bit of CSS. What are your thoughts there?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we automatically include the old vars, it will be hard to see where vars still need to be converted within their apps.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're including them in the global styles to allow us to deprecate and give enough time for teams to migrate. We can remove from the global styles, and possibly leave it up to users to add, at a later point.

Since it does add quite a bit of CSS

It adds some bits, but IMO, it's worth it to improve the migration process.


:root {
@extend %type-vars;
@include floating-ui-base();
Expand Down
Loading