From ff4f266d4d61b0931a72d10c44fcf0f3ccb9b498 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 12:03:44 -0700 Subject: [PATCH 1/2] Consolidate css custom properties into one table --- .../guides/migrating-from-v8-to-v9.md | 100 ++++++------------ 1 file changed, 33 insertions(+), 67 deletions(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index f7980e6a68b..f5885cb1384 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -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 Name | 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 @@ -387,40 +387,6 @@ list-style: none; | `z-index(toast)` | `--p-z-12` | | `z-index(devUi)` | `521` | -## 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)` | - ## Removal of the public scss api Any functions that were being consumed from `build/styles/_public-api.scss` have been removed. The functions can be found in the following permalinks. From 9a2c4ae9c45be5554e0638090fc6baabeb470f57 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 10 Feb 2022 12:08:31 -0700 Subject: [PATCH 2/2] Minor language tweak --- documentation/guides/migrating-from-v8-to-v9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md index f5885cb1384..f355bf79da5 100644 --- a/documentation/guides/migrating-from-v8-to-v9.md +++ b/documentation/guides/migrating-from-v8-to-v9.md @@ -74,7 +74,7 @@ The prop `secondaryActions` has been removed and is no longer supported. 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 Name | Replacement Value | +| Deprecated CSS Custom Property | Replacement Value | | ----------------------------------------- | ---------------------------------- | | `--p-badge-font-weight` | `--p-font-weight-regular` | | `--p-badge-mix-blend-mode` | `luminosity` |