From 5ae1c8784d56c5b3e0032af13661ed066b1c8cdf Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 29 Feb 2024 18:40:59 -0500 Subject: [PATCH 1/4] docs(updating): show how to migrate custom step color usages --- docs/updating/8-0.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/docs/updating/8-0.md b/docs/updating/8-0.md index da35e75266a..794630040a1 100644 --- a/docs/updating/8-0.md +++ b/docs/updating/8-0.md @@ -108,6 +108,34 @@ While migrating to include the new dark theme files is unlikely to cause breakin For more information on the new dark theme files, refer to the [Dark Mode documentation](../theming/dark-mode). +### Step Color Tokens + +To better support the high contrast theme in Ionic 8, separate step colors tokens were introduced for text and background color. Previously both text and background color were controlled by a single set of `--ion-color-step-[number]` tokens. + +Using the new dark theme imported noted above will also import these new step color tokens. However, developers will need to manually migrate any step color tokens that were manually defined in an application. + +`--ion-color-step-[number]` usages for **background color** can be migrated by renaming the token to `--ion-background-color-step-[number]`. + +**Example**: + +```diff +button { +- background: var(--ion-color-step-400); ++ background: var(--ion-background-color-step-400); +} +``` + +`--ion-color-step-[number]` usages for **background color** can be migrated by renaming the token to `--ion-text-color-step-[number]` and subtracting the number from 1000. + +**Example**: + +```diff +button { +- color: var(--ion-color-step-400); ++ color: var(--ion-text-color-step-600); /* 1000 - 400 = 600 */ +} +``` + ### Dynamic Font The `core.css` file has been updated to enable dynamic font scaling by default. From 9abbb3e415f316ab34203b5841b0481abf1d081f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 29 Feb 2024 18:42:22 -0500 Subject: [PATCH 2/4] lint --- docs/updating/8-0.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/updating/8-0.md b/docs/updating/8-0.md index 794630040a1..f355ab63d97 100644 --- a/docs/updating/8-0.md +++ b/docs/updating/8-0.md @@ -110,9 +110,9 @@ For more information on the new dark theme files, refer to the [Dark Mode docume ### Step Color Tokens -To better support the high contrast theme in Ionic 8, separate step colors tokens were introduced for text and background color. Previously both text and background color were controlled by a single set of `--ion-color-step-[number]` tokens. +To better support the high contrast theme in Ionic 8, separate step colors tokens have been introduced for text and background color. Previously both text and background color were controlled by a single set of `--ion-color-step-[number]` tokens. -Using the new dark theme imported noted above will also import these new step color tokens. However, developers will need to manually migrate any step color tokens that were manually defined in an application. +Using the new dark theme import noted above will also import these new step color tokens. However, developers will need to update any step color tokens that were manually defined in an application. `--ion-color-step-[number]` usages for **background color** can be migrated by renaming the token to `--ion-background-color-step-[number]`. From 5489c7cc7fc264b4dd2ba744ca01f6e7938a6c22 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 1 Mar 2024 17:08:46 -0500 Subject: [PATCH 3/4] Update docs/updating/8-0.md Co-authored-by: Maria Hutt --- docs/updating/8-0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/updating/8-0.md b/docs/updating/8-0.md index f355ab63d97..d5f733fd38a 100644 --- a/docs/updating/8-0.md +++ b/docs/updating/8-0.md @@ -112,7 +112,7 @@ For more information on the new dark theme files, refer to the [Dark Mode docume To better support the high contrast theme in Ionic 8, separate step colors tokens have been introduced for text and background color. Previously both text and background color were controlled by a single set of `--ion-color-step-[number]` tokens. -Using the new dark theme import noted above will also import these new step color tokens. However, developers will need to update any step color tokens that were manually defined in an application. +Using the newly imported dark theme mentioned above will also import these new step color tokens. However, developers will need to update any step color tokens that were manually defined in an application. `--ion-color-step-[number]` usages for **background color** can be migrated by renaming the token to `--ion-background-color-step-[number]`. From 5b4b177f9df4d7251283d05352057cb7a8c15551 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 1 Mar 2024 17:09:02 -0500 Subject: [PATCH 4/4] Update docs/updating/8-0.md Co-authored-by: Maria Hutt --- docs/updating/8-0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/updating/8-0.md b/docs/updating/8-0.md index d5f733fd38a..47b76ff7dff 100644 --- a/docs/updating/8-0.md +++ b/docs/updating/8-0.md @@ -125,7 +125,7 @@ button { } ``` -`--ion-color-step-[number]` usages for **background color** can be migrated by renaming the token to `--ion-text-color-step-[number]` and subtracting the number from 1000. +`--ion-color-step-[number]` usages for **text color** can be migrated by renaming the token to `--ion-text-color-step-[number]` and subtracting the number from 1000. **Example**: