Skip to content

Consolidate CSS custom properties into one table in the migration guide #5137

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

Merged
merged 3 commits into from
Feb 11, 2022
Merged

Consolidate CSS custom properties into one table in the migration guide #5137

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff4f266
Consolidate css custom properties into one table
lgriffee Feb 10, 2022
9a2c4ae
Minor language tweak
lgriffee Feb 10, 2022
7da9428
Merge branch 'v9.0.0-major' into migration-guide-consolidate-css-cust…
lgriffee Feb 11, 2022
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
100 changes: 33 additions & 67 deletions documentation/guides/migrating-from-v8-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,39 +72,39 @@ The prop `secondaryActions` has been removed and is no longer supported.

## CSS custom properties

CSS custom properties that were renamed can be replaced with the new CSS custom property name.

| Before | After |
| :-------------------------------: | :--------------------------------: |
| `--p-badge-font-weight` | `--p-font-weight-regular` |
| `--p-button-font-weight` | `--p-font-weight-medium` |
| `--p-duration-1-0-0` | `--p-duration-100` |
| `--p-duration-1-5-0` | `--p-duration-150` |
| `--p-card-shadow` | `--p-shadow-card` |
| `--p-popover-shadow` | `--p-shadow-popover` |
| `--p-modal-shadow` | `--p-shadow-modal` |
| `--p-top-bar-shadow` | `--p-shadow-top-bar` |
| `--p-button-drop-shadow` | `--p-shadow-button` |
| `--p-button-inner-shadow` | `--p-shadows-inset-button` |
| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` |
| `--p-icon-size` | `--p-icon-size-small` |

CSS custom properties that have been deprecated can be replaced with the CSS property value.

| Before | Value |
| :-----------------------------: | :----------------------: |
| `--p-override-none` | `none` |
| `--p-override-transparent` | `transparent` |
| `--p-override-one` | `1` |
| `--p-override-visible` | `visible` |
| `--p-override-zero` | `0` |
| `--p-non-null-content` | `''` |
| `--p-badge-mix-blend-mode` | `luminosity` |
| `--p-range-slider-thumb-scale` | `1.5` |
| `--p-frame-offset` | `0px` |
| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` |
| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` |
| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` |
The following CSS custom properties have either been renamed or removed. You will need to replace any instances of them with their new name or value equivalents.

| Deprecated CSS Custom Property | Replacement Value |
| ----------------------------------------- | ---------------------------------- |
| `--p-badge-font-weight` | `--p-font-weight-regular` |
| `--p-badge-mix-blend-mode` | `luminosity` |
| `--p-border-radius-base` | `--p-border-radius-1` |
| `--p-border-radius-full` | `--p-border-radius-half` |
| `--p-border-radius-slim` | `--p-border-radius-05` |
| `--p-border-radius-wide` | `--p-border-radius-2` |
| `--p-button-drop-shadow` | `--p-shadow-button` |
| `--p-button-font-weight` | `--p-font-weight-medium` |
| `--p-button-inner-shadow` | `--p-shadows-inset-button` |
| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` |
| `--p-card-shadow` | `--p-shadow-card` |
| `--p-duration-1-0-0` | `--p-duration-100` |
| `--p-duration-1-5-0` | `--p-duration-150` |
| `--p-frame-offset` | `0px` |
| `--p-icon-size` | `--p-icon-size-small` |
| `--p-modal-shadow` | `--p-shadow-modal` |
| `--p-non-null-content` | `''` |
| `--p-popover-shadow` | `--p-shadow-popover` |
| `--p-override-none` | `none` |
| `--p-override-one` | `1` |
| `--p-override-transparent` | `transparent` |
| `--p-override-visible` | `visible` |
| `--p-override-zero` | `0` |
| `--p-range-slider-thumb-scale` | `1.5` |
| `--p-text-field-focus-ring-border-radius` | `7px` |
| `--p-top-bar-shadow` | `--p-shadow-top-bar` |
| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` |
| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` |
| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` |

## Sass functions and mixins

Expand Down Expand Up @@ -424,37 +424,3 @@ list-style: none;
Any functions that were being consumed from `build/styles/_public-api.scss` have been removed. If you wish to continue using them you can add them directly to your repo. All of the removed functions and mixins can found in the following file:

[Legacy Polaris V8 public scss api](https://github.com/Shopify/polaris-react/blob/b443d114d447df15d9e72914c8ca5058439a175e/documentation/guides/legacy-polaris-v8-public-api.scss)

## Tokens

### Border Radius

| Token | Replacement Value/Token |
| ----------------------------------------- | ------------------------ |
| `--p-border-radius-slim` | `--p-border-radius-05` |
| `--p-border-radius-base` | `--p-border-radius-1` |
| `--p-border-radius-wide` | `--p-border-radius-2` |
| `--p-border-radius-full` | `--p-border-radius-half` |
| `--p-text-field-focus-ring-border-radius` | `7px` |

### Duration

| Token | Replacement Value/Token |
| -------------------- | ----------------------- |
| `--p-duration-1-0-0` | `--p-duration-100` |
| `--p-duration-1-5-0` | `--p-duration-150` |

### Shadow

| Token | Replacement Value/Token |
| --------------------------------- | ---------------------------------- |
| `--p-card-shadow` | `--p-shadow-card` |
| `--p-popover-shadow` | `--p-shadow-popover` |
| `--p-modal-shadow` | `--p-shadow-modal` |
| `--p-top-bar-shadow` | `--p-shadow-top-bar` |
| `--p-button-drop-shadow` | `--p-shadow-button` |
| `--p-button-inner-shadow` | `--p-shadows-inset-button` |
| `--p-button-pressed-inner-shadow` | `--p-shadows-inset-button-pressed` |
| `--p-shadow-from-ambient-light` | `rgba(23, 24, 24, 0.05)` |
| `--p-shadow-from-direct-light` | `rgba(0, 0, 0, 0.15)` |
| `--p-shadow-from-dim-light` | `rgba(0, 0, 0, 0.2)` |