chore: replace diff examples with before/after

Docusaurus does not have built-in support for diff formatting. To make it easier for developers to tell the differences between the legacy code and new approach, I separated the examples into before/after code snippet blocks.

Author: sean-perkins

docs/updating/8-0.md

@@ -138,24 +138,30 @@ Using the newly imported dark palette mentioned above will also import these new
 
 `--ion-color-step-[number]` usages for **background color** can be migrated by renaming the token to `--ion-background-color-step-[number]`.
 
-**Example**:
+**Before**:
 
-```diff
-button {
-- background: var(--ion-color-step-400);
-+ background: var(--ion-background-color-step-400);
-}
+```html
+button { background: var(--ion-color-step-400); }
+```
+
+**After**:
+
+```html
+button { background: var(--ion-background-color-step-400); }
 ```
 
 `--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**:
+**Before**:
 
-```diff
-button {
-- color: var(--ion-color-step-400);
-+ color: var(--ion-text-color-step-600); /* 1000 - 400 = 600 */
-}
+```html
+button { color: var(--ion-color-step-400); }
+```
+
+**After**:
+
+```html
+button { color: var(--ion-text-color-step-600); /* 1000 - 400 = 600 */ }
 ```
 
 The [stepped color generator](../theming/themes#stepped-color-generator) has been updated to generate text and background color stepped variables.
@@ -178,9 +184,16 @@ The `angular.json` file currently imports `src/theme/variables.scss` before impo
 
 We recommend importing the `src/global.scss` file first instead:
 
-```diff
-- "styles": ["src/theme/variables.scss", "src/global.scss"],
-+ "styles": ["src/global.scss", "src/theme/variables.scss"],
+**Before**:
+
+```json
+  "styles": ["src/theme/variables.scss", "src/global.scss"],
+```
+
+**After**:
+
+```json
+  "styles": ["src/global.scss", "src/theme/variables.scss"],
 ```
 
 ## Required Changes