From 761e1b47dd5d49ab44c81ddba5490b6d2106f123 Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Mon, 18 Mar 2024 14:45:47 -0400
Subject: [PATCH] feat: rename dark/high-contrast themes to palettes (#29149)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ionic Framework currently plans to offer dark and high contrast "themes"
in v8. However this naming nomenclature conflicts with a significant new
feature that the team is working on towards v9+.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrates previous dark and high contrast "themes" to "palettes"
- Updates test infrastructure to import from the new stylesheet
locations

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

Developers that have updated to the Ionic v8 beta and have implemented
the dark and high contrast themes, will need to update the import path:

```diff
-@import '@ionic/angular/css/themes/dark.always.css';
+@import '@ionic/angular/css/palettes/dark.always.css';
```


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Blocked by: https://github.com/ionic-team/ionic-framework/pull/29148.
Review that first.

Documentation PR: https://github.com/ionic-team/ionic-docs/pull/3521

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 BREAKING.md                                   | 22 +++++------
 core/src/css/palettes/dark.always.scss        | 13 +++++++
 core/src/css/palettes/dark.class.scss         | 13 +++++++
 core/src/css/{themes => palettes}/dark.scss   | 23 ++---------
 .../css/{themes => palettes}/dark.system.scss |  6 +--
 .../palettes/high-contrast-dark.always.scss   | 13 +++++++
 .../palettes/high-contrast-dark.class.scss    | 13 +++++++
 .../high-contrast-dark.scss                   | 26 +++++--------
 .../high-contrast-dark.system.scss            |  6 +--
 .../css/palettes/high-contrast.always.scss    |  9 +++++
 .../src/css/palettes/high-contrast.class.scss |  9 +++++
 .../{themes => palettes}/high-contrast.scss   | 25 ++++++------
 .../high-contrast.system.scss                 |  4 +-
 core/src/css/themes/dark.always.scss          | 13 -------
 core/src/css/themes/dark.class.scss           | 13 -------
 .../css/themes/high-contrast-dark.always.scss | 13 -------
 .../css/themes/high-contrast-dark.class.scss  | 13 -------
 core/src/css/themes/high-contrast.always.scss |  9 -----
 core/src/css/themes/high-contrast.class.scss  |  9 -----
 core/src/themes/test/colors/index.html        | 30 +++++++--------
 core/src/themes/test/css-variables/index.html | 38 +++++++++----------
 .../test/playwright/page/utils/set-content.ts |  2 +-
 22 files changed, 147 insertions(+), 175 deletions(-)
 create mode 100644 core/src/css/palettes/dark.always.scss
 create mode 100644 core/src/css/palettes/dark.class.scss
 rename core/src/css/{themes => palettes}/dark.scss (98%)
 rename core/src/css/{themes => palettes}/dark.system.scss (52%)
 create mode 100644 core/src/css/palettes/high-contrast-dark.always.scss
 create mode 100644 core/src/css/palettes/high-contrast-dark.class.scss
 rename core/src/css/{themes => palettes}/high-contrast-dark.scss (98%)
 rename core/src/css/{themes => palettes}/high-contrast-dark.system.scss (52%)
 create mode 100644 core/src/css/palettes/high-contrast.always.scss
 create mode 100644 core/src/css/palettes/high-contrast.class.scss
 rename core/src/css/{themes => palettes}/high-contrast.scss (98%)
 rename core/src/css/{themes => palettes}/high-contrast.system.scss (50%)
 delete mode 100644 core/src/css/themes/dark.always.scss
 delete mode 100644 core/src/css/themes/dark.class.scss
 delete mode 100644 core/src/css/themes/high-contrast-dark.always.scss
 delete mode 100644 core/src/css/themes/high-contrast-dark.class.scss
 delete mode 100644 core/src/css/themes/high-contrast.always.scss
 delete mode 100644 core/src/css/themes/high-contrast.class.scss

diff --git a/BREAKING.md b/BREAKING.md
index 27696cf2cb0..a93fca71fc1 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -14,7 +14,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Version 8.x
 
 - [Browser and Platform Support](#version-8x-browser-platform-support)
-- [Dark Theme](#version-8x-dark-theme)
+- [Dark Mode](#version-8x-dark-mode)
 - [Global Styles](#version-8x-global-styles)
 - [Components](#version-8x-components)
   - [Button](#version-8x-button)
@@ -60,9 +60,9 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | iOS      | 15+                    |
 | Android  | 5.1+ with Chromium 89+ |
 
-<h2 id="version-8x-dark-theme">Dark Theme</h2>
+<h2 id="version-8x-dark-mode">Dark Mode</h2>
 
-In previous versions, it was recommended to define the dark theme in the following way:
+In previous versions, it was recommended to define the dark palette in the following way:
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -80,15 +80,15 @@ In previous versions, it was recommended to define the dark theme in the followi
 }
 ```
 
-In Ionic Framework version 8, the dark theme is being distributed via css files that can be imported. Below is an example of importing a dark theme file in Angular:
+In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:
 
 ```css
-/* @import '@ionic/angular/css/themes/dark.always.css'; */
-/* @import "@ionic/angular/css/themes/dark.class.css"; */
-@import "@ionic/angular/css/themes/dark.system.css";
+/* @import '@ionic/angular/css/palettes/dark.always.css'; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import "@ionic/angular/css/palettes/dark.system.css";
 ```
 
-By importing the `dark.system.css` file, the dark theme variables will be defined like the following:
+By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
 
 ```css
 @media (prefers-color-scheme: dark) {
@@ -106,11 +106,11 @@ By importing the `dark.system.css` file, the dark theme variables will be define
 }
 ```
 
-Notice that the dark theme is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
+Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
 
-While migrating to include the new dark theme files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
+While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
 
-For more information on the new dark theme files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
+For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
 
 <h2 id="version-8x-global-styles">Global Styles</h2>
 
diff --git a/core/src/css/palettes/dark.always.scss b/core/src/css/palettes/dark.always.scss
new file mode 100644
index 00000000000..af457728c51
--- /dev/null
+++ b/core/src/css/palettes/dark.always.scss
@@ -0,0 +1,13 @@
+@import "./dark";
+
+:root {
+  @include dark-base-palette();
+}
+
+:root.ios {
+  @include dark-ios-palette();
+}
+
+:root.md {
+  @include dark-md-palette();
+}
diff --git a/core/src/css/palettes/dark.class.scss b/core/src/css/palettes/dark.class.scss
new file mode 100644
index 00000000000..52c83ca533c
--- /dev/null
+++ b/core/src/css/palettes/dark.class.scss
@@ -0,0 +1,13 @@
+@import "./dark";
+
+.ion-palette-dark {
+  @include dark-base-palette();
+}
+
+.ion-palette-dark.ios {
+  @include dark-ios-palette();
+}
+
+.ion-palette-dark.md {
+  @include dark-md-palette();
+}
diff --git a/core/src/css/themes/dark.scss b/core/src/css/palettes/dark.scss
similarity index 98%
rename from core/src/css/themes/dark.scss
rename to core/src/css/palettes/dark.scss
index 983273e3931..820d8dd738b 100644
--- a/core/src/css/themes/dark.scss
+++ b/core/src/css/palettes/dark.scss
@@ -1,4 +1,4 @@
-@mixin dark-base-theme() {
+@mixin dark-base-palette() {
   & {
     --ion-color-primary: #4d8dff;
     --ion-color-primary-rgb: 77, 141, 255;
@@ -6,56 +6,48 @@
     --ion-color-primary-contrast-rgb: 0, 0, 0;
     --ion-color-primary-shade: #447ce0;
     --ion-color-primary-tint: #5f98ff;
-
     --ion-color-secondary: #62bdff;
     --ion-color-secondary-rgb: 98, 189, 255;
     --ion-color-secondary-contrast: #000000;
     --ion-color-secondary-contrast-rgb: 0, 0, 0;
     --ion-color-secondary-shade: #56a6e0;
     --ion-color-secondary-tint: #72c4ff;
-
     --ion-color-tertiary: #8482fb;
     --ion-color-tertiary-rgb: 132, 130, 251;
     --ion-color-tertiary-contrast: #000000;
     --ion-color-tertiary-contrast-rgb: 0, 0, 0;
     --ion-color-tertiary-shade: #7472dd;
     --ion-color-tertiary-tint: #908ffb;
-
     --ion-color-success: #2dd55b;
     --ion-color-success-rgb: 45, 213, 91;
     --ion-color-success-contrast: #000000;
     --ion-color-success-contrast-rgb: 0, 0, 0;
     --ion-color-success-shade: #28bb50;
     --ion-color-success-tint: #42d96b;
-
     --ion-color-warning: #ffce31;
     --ion-color-warning-rgb: 255, 206, 49;
     --ion-color-warning-contrast: #000000;
     --ion-color-warning-contrast-rgb: 0, 0, 0;
     --ion-color-warning-shade: #e0b52b;
     --ion-color-warning-tint: #ffd346;
-
     --ion-color-danger: #f56570;
     --ion-color-danger-rgb: 245, 101, 112;
     --ion-color-danger-contrast: #000000;
     --ion-color-danger-contrast-rgb: 0, 0, 0;
     --ion-color-danger-shade: #d85963;
     --ion-color-danger-tint: #f6747e;
-    
     --ion-color-dark: #f4f5f8;
     --ion-color-dark-rgb: 244, 245, 248;
     --ion-color-dark-contrast: #000000;
     --ion-color-dark-contrast-rgb: 0, 0, 0;
     --ion-color-dark-shade: #d7d8da;
     --ion-color-dark-tint: #f5f6f9;
-    
     --ion-color-medium: #989aa2;
     --ion-color-medium-rgb: 152, 154, 162;
     --ion-color-medium-contrast: #000000;
     --ion-color-medium-contrast-rgb: 0, 0, 0;
     --ion-color-medium-shade: #86888f;
     --ion-color-medium-tint: #a2a4ab;
-    
     --ion-color-light: #222428;
     --ion-color-light-rgb: 34, 36, 40;
     --ion-color-light-contrast: #ffffff;
@@ -65,14 +57,12 @@
   }
 }
 
-@mixin dark-ios-theme() {
+@mixin dark-ios-palette() {
   & {
     --ion-background-color: #000000;
     --ion-background-color-rgb: 0, 0, 0;
-
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255, 255, 255;
-
     --ion-background-color-step-50: #0d0d0d;
     --ion-background-color-step-100: #1a1a1a;
     --ion-background-color-step-150: #262626;
@@ -92,7 +82,6 @@
     --ion-background-color-step-850: #d9d9d9;
     --ion-background-color-step-900: #e6e6e6;
     --ion-background-color-step-950: #f2f2f2;
-
     --ion-text-color-step-50: #f2f2f2;
     --ion-text-color-step-100: #e6e6e6;
     --ion-text-color-step-150: #d9d9d9;
@@ -112,7 +101,6 @@
     --ion-text-color-step-850: #262626;
     --ion-text-color-step-900: #1a1a1a;
     --ion-text-color-step-950: #0d0d0d;
-
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
   }
@@ -124,16 +112,13 @@
   }
 }
 
-@mixin dark-md-theme() {
+@mixin dark-md-palette() {
   & {
     --ion-background-color: #121212;
     --ion-background-color-rgb: 18, 18, 18;
-
     --ion-text-color: #ffffff;
     --ion-text-color-rgb: 255, 255, 255;
-
     --ion-border-color: #222222;
-
     --ion-background-color-step-50: #1e1e1e;
     --ion-background-color-step-100: #2a2a2a;
     --ion-background-color-step-150: #363636;
@@ -153,7 +138,6 @@
     --ion-background-color-step-850: #dbdbdb;
     --ion-background-color-step-900: #e7e7e7;
     --ion-background-color-step-950: #f3f3f3;
-
     --ion-text-color-step-50: #f3f3f3;
     --ion-text-color-step-100: #e7e7e7;
     --ion-text-color-step-150: #dbdbdb;
@@ -173,7 +157,6 @@
     --ion-text-color-step-850: #363636;
     --ion-text-color-step-900: #2a2a2a;
     --ion-text-color-step-950: #1e1e1e;
-
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
diff --git a/core/src/css/themes/dark.system.scss b/core/src/css/palettes/dark.system.scss
similarity index 52%
rename from core/src/css/themes/dark.system.scss
rename to core/src/css/palettes/dark.system.scss
index b55779f467c..a1dd6f0e7ce 100644
--- a/core/src/css/themes/dark.system.scss
+++ b/core/src/css/palettes/dark.system.scss
@@ -2,14 +2,14 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include dark-base-theme();
+    @include dark-base-palette();
   }
 
   :root.ios {
-    @include dark-ios-theme();
+    @include dark-ios-palette();
   }
 
   :root.md {
-    @include dark-md-theme();
+    @include dark-md-palette();
   }
 }
diff --git a/core/src/css/palettes/high-contrast-dark.always.scss b/core/src/css/palettes/high-contrast-dark.always.scss
new file mode 100644
index 00000000000..782c4629671
--- /dev/null
+++ b/core/src/css/palettes/high-contrast-dark.always.scss
@@ -0,0 +1,13 @@
+@import "./high-contrast-dark";
+
+:root {
+  @include high-contrast-dark-base-palette();
+}
+
+:root.ios {
+  @include high-contrast-dark-ios-palette();
+}
+
+:root.md {
+  @include high-contrast-dark-md-palette();
+}
diff --git a/core/src/css/palettes/high-contrast-dark.class.scss b/core/src/css/palettes/high-contrast-dark.class.scss
new file mode 100644
index 00000000000..91de15f0a97
--- /dev/null
+++ b/core/src/css/palettes/high-contrast-dark.class.scss
@@ -0,0 +1,13 @@
+@import "./high-contrast-dark";
+
+.ion-palette-high-contrast.ion-palette-dark {
+  @include high-contrast-dark-base-palette();
+}
+
+.ion-palette-high-contrast.ion-palette-dark.ios {
+  @include high-contrast-dark-ios-palette();
+}
+
+.ion-palette-high-contrast.ion-palette-dark.md {
+  @include high-contrast-dark-md-palette();
+}
diff --git a/core/src/css/themes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss
similarity index 98%
rename from core/src/css/themes/high-contrast-dark.scss
rename to core/src/css/palettes/high-contrast-dark.scss
index 8ebed223855..927cbeb688e 100644
--- a/core/src/css/themes/high-contrast-dark.scss
+++ b/core/src/css/palettes/high-contrast-dark.scss
@@ -93,8 +93,10 @@ $lightest-text-color: $text-color;
 /// as opposed to setting everything in :root
 // so any high contrast dark styles override the standard
 /// contrast dark styles.
-@mixin high-contrast-dark-base-theme() {
+@mixin high-contrast-dark-base-palette() {
   & {
+    --ion-placeholder-opacity: 0.8;
+
     @each $color-name, $value in $colors {
       --ion-color-#{$color-name}: #{map.get($value, base)};
       --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
@@ -104,27 +106,23 @@ $lightest-text-color: $text-color;
       --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
     }
 
-    --ion-placeholder-opacity: 0.8;
   }
 }
 
-@mixin high-contrast-dark-ios-theme() {
+@mixin high-contrast-dark-ios-palette() {
+  $background-color: #000000;
+  
   & {
-    $background-color: #000000;
-
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
-
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
-
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
 
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
     --ion-item-border-color: var(--ion-background-color-step-400);
-
     --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -144,7 +142,6 @@ $lightest-text-color: $text-color;
     --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
     --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
     --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
-
     --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
     --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
     --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
@@ -176,18 +173,15 @@ $lightest-text-color: $text-color;
   }
 }
 
-@mixin high-contrast-dark-md-theme() {
+@mixin high-contrast-dark-md-palette() {
+  $background-color: #121212;
+  
   & {
-    $background-color: #121212;
-
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
-
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
-
     --ion-border-color: #222222;
-
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
@@ -196,7 +190,6 @@ $lightest-text-color: $text-color;
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
     --ion-item-border-color: var(--ion-background-color-step-400);
-
     --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
@@ -216,7 +209,6 @@ $lightest-text-color: $text-color;
     --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
     --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
     --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
-
     --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
     --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
     --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
diff --git a/core/src/css/themes/high-contrast-dark.system.scss b/core/src/css/palettes/high-contrast-dark.system.scss
similarity index 52%
rename from core/src/css/themes/high-contrast-dark.system.scss
rename to core/src/css/palettes/high-contrast-dark.system.scss
index f47602edd01..1c188bd7b1a 100644
--- a/core/src/css/themes/high-contrast-dark.system.scss
+++ b/core/src/css/palettes/high-contrast-dark.system.scss
@@ -2,14 +2,14 @@
 
 @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
   :root {
-    @include high-contrast-dark-base-theme();
+    @include high-contrast-dark-base-palette();
   }
 
   :root.ios {
-    @include high-contrast-dark-ios-theme();
+    @include high-contrast-dark-ios-palette();
   }
 
   :root.md {
-    @include high-contrast-dark-md-theme();
+    @include high-contrast-dark-md-palette();
   }
 }
diff --git a/core/src/css/palettes/high-contrast.always.scss b/core/src/css/palettes/high-contrast.always.scss
new file mode 100644
index 00000000000..eeacaa9897e
--- /dev/null
+++ b/core/src/css/palettes/high-contrast.always.scss
@@ -0,0 +1,9 @@
+@import "./high-contrast";
+
+:root {
+  @include high-contrast-light-base-palette();
+}
+
+:root.md {
+  @include high-contrast-light-md-palette();
+}
diff --git a/core/src/css/palettes/high-contrast.class.scss b/core/src/css/palettes/high-contrast.class.scss
new file mode 100644
index 00000000000..2e1039e23b3
--- /dev/null
+++ b/core/src/css/palettes/high-contrast.class.scss
@@ -0,0 +1,9 @@
+@import "./high-contrast";
+
+.ion-palette-high-contrast {
+  @include high-contrast-light-base-palette();
+}
+
+.ion-palette-high-contrast.md {
+  @include high-contrast-light-md-palette();
+}
diff --git a/core/src/css/themes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss
similarity index 98%
rename from core/src/css/themes/high-contrast.scss
rename to core/src/css/palettes/high-contrast.scss
index f67e0d4f46a..ec7152c211d 100644
--- a/core/src/css/themes/high-contrast.scss
+++ b/core/src/css/palettes/high-contrast.scss
@@ -89,29 +89,17 @@ $lightest-text-color: #888888;
 /// --ion-color-primary: #{ion-color(primary, base)};
 /// Maps to:
 /// --ion-color-primary: var(--ion-color-primary, #...);
-@mixin high-contrast-light-base-theme() {
+@mixin high-contrast-light-base-palette() {
   & {
-    @each $color-name, $value in $colors {
-      --ion-color-#{$color-name}: #{map.get($value, base)};
-      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
-      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
-      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
-      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
-      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
-    }
-
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
-
     --ion-text-color: #{$text-color};
     --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
-
     --ion-placeholder-opacity: 0.8;
 
     /// Only the item borders should increase in contrast
     /// Borders for elements like toolbars should remain the same
     --ion-item-border-color: #7a7a7a;
-
     --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};
     --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};
     --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};
@@ -131,10 +119,19 @@ $lightest-text-color: #888888;
     --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};
     --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};
     --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};
+
+    @each $color-name, $value in $colors {
+      --ion-color-#{$color-name}: #{map.get($value, base)};
+      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
+      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
+      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
+      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
+      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+    }
   }
 }
 
-@mixin high-contrast-light-md-theme() {
+@mixin high-contrast-light-md-palette() {
   // Toast
   // --------------------------------------------------
 
diff --git a/core/src/css/themes/high-contrast.system.scss b/core/src/css/palettes/high-contrast.system.scss
similarity index 50%
rename from core/src/css/themes/high-contrast.system.scss
rename to core/src/css/palettes/high-contrast.system.scss
index 7424552ec57..27f75c04b98 100644
--- a/core/src/css/themes/high-contrast.system.scss
+++ b/core/src/css/palettes/high-contrast.system.scss
@@ -2,10 +2,10 @@
 
 @media (prefers-contrast: more) {
   :root {
-    @include high-contrast-light-base-theme();
+    @include high-contrast-light-base-palette();
   }
 
   :root.md {
-    @include high-contrast-light-md-theme();
+    @include high-contrast-light-md-palette();
   }
 }
diff --git a/core/src/css/themes/dark.always.scss b/core/src/css/themes/dark.always.scss
deleted file mode 100644
index 237b6267e64..00000000000
--- a/core/src/css/themes/dark.always.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "./dark";
-
-:root {
-  @include dark-base-theme();
-}
-
-:root.ios {
-  @include dark-ios-theme();
-}
-
-:root.md {
-  @include dark-md-theme();
-}
diff --git a/core/src/css/themes/dark.class.scss b/core/src/css/themes/dark.class.scss
deleted file mode 100644
index f024bd61dca..00000000000
--- a/core/src/css/themes/dark.class.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "./dark";
-
-.ion-theme-dark {
-  @include dark-base-theme();
-}
-
-.ion-theme-dark.ios {
-  @include dark-ios-theme();
-}
-
-.ion-theme-dark.md {
-  @include dark-md-theme();
-}
diff --git a/core/src/css/themes/high-contrast-dark.always.scss b/core/src/css/themes/high-contrast-dark.always.scss
deleted file mode 100644
index 46594686b2a..00000000000
--- a/core/src/css/themes/high-contrast-dark.always.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "./high-contrast-dark";
-
-:root {
-  @include high-contrast-dark-base-theme();
-}
-
-:root.ios {
-  @include high-contrast-dark-ios-theme();
-}
-
-:root.md {
-  @include high-contrast-dark-md-theme();
-}
diff --git a/core/src/css/themes/high-contrast-dark.class.scss b/core/src/css/themes/high-contrast-dark.class.scss
deleted file mode 100644
index d73e528c190..00000000000
--- a/core/src/css/themes/high-contrast-dark.class.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import "./high-contrast-dark";
-
-.ion-theme-high-contrast.ion-theme-dark {
-  @include high-contrast-dark-base-theme();
-}
-
-.ion-theme-high-contrast.ion-theme-dark.ios {
-  @include high-contrast-dark-ios-theme();
-}
-
-.ion-theme-high-contrast.ion-theme-dark.md {
-  @include high-contrast-dark-md-theme();
-}
diff --git a/core/src/css/themes/high-contrast.always.scss b/core/src/css/themes/high-contrast.always.scss
deleted file mode 100644
index 70f5498d924..00000000000
--- a/core/src/css/themes/high-contrast.always.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "./high-contrast";
-
-:root {
-  @include high-contrast-light-base-theme();
-}
-
-:root.md {
-  @include high-contrast-light-md-theme();
-}
diff --git a/core/src/css/themes/high-contrast.class.scss b/core/src/css/themes/high-contrast.class.scss
deleted file mode 100644
index 46c949d54e9..00000000000
--- a/core/src/css/themes/high-contrast.class.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "./high-contrast";
-
-.ion-theme-high-contrast {
-  @include high-contrast-light-base-theme();
-}
-
-.ion-theme-high-contrast.md {
-  @include high-contrast-light-md-theme();
-}
diff --git a/core/src/themes/test/colors/index.html b/core/src/themes/test/colors/index.html
index 8fe5baf7c2a..10ee3bf2430 100644
--- a/core/src/themes/test/colors/index.html
+++ b/core/src/themes/test/colors/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Theme</title>
+    <title>Palette</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -12,7 +12,7 @@
     <script src="../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../dist/ionic/ionic.esm.js"></script>
-    <link id="theme" rel="stylesheet" />
+    <link id="palette" rel="stylesheet" />
 
     <style>
       .container {
@@ -85,10 +85,10 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Theme</ion-title>
+          <ion-title>Palette</ion-title>
         </ion-toolbar>
         <ion-toolbar>
-          <ion-segment value="default" class="theme-picker">
+          <ion-segment value="default" class="palette-picker">
             <ion-segment-button value="default">
               <ion-label>Default (Light)</ion-label>
             </ion-segment-button>
@@ -320,26 +320,26 @@ <h3 class="header">Background 16%</h3>
     </ion-app>
 
     <script>
-      const themePicker = document.querySelector('.theme-picker');
+      const palettePicker = document.querySelector('.palette-picker');
 
-      themePicker.addEventListener('ionChange', (ev) => {
-        const theme = event.detail && event.detail.value;
-        toggleTheme(theme);
+      palettePicker.addEventListener('ionChange', (ev) => {
+        const palette = event.detail && event.detail.value;
+        togglePalette(palette);
       });
 
-      function toggleTheme(theme) {
-        let cssFile = `/css/themes/${theme}.always.css`;
-        if (theme === 'default') {
+      function togglePalette(palette) {
+        let cssFile = `/css/palettes/${palette}.always.css`;
+        if (palette === 'default') {
           // TODO FW-5862 update this to not
           // load a file when default is set. The light
-          // theme is automatically set when importing ionic.bundle.css
-          cssFile = `/src/themes/test/${theme}.css`;
+          // palette is automatically set when importing ionic.bundle.css
+          cssFile = `/src/themes/test/default.css`;
         }
 
-        var oldLink = document.getElementById('theme');
+        var oldLink = document.getElementById('palette');
 
         var newLink = document.createElement('link');
-        newLink.setAttribute('id', 'theme');
+        newLink.setAttribute('id', 'palette');
         newLink.setAttribute('rel', 'stylesheet');
         newLink.setAttribute('type', 'text/css');
         newLink.setAttribute('href', cssFile);
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 83e036f1102..169370d12f2 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -13,7 +13,7 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <link id="theme" href="/src/themes/test/default.css" rel="stylesheet" />
+    <link id="palette" href="/src/themes/test/default.css" rel="stylesheet" />
 
     <style>
       .wrapper {
@@ -147,7 +147,7 @@
             </ion-toolbar>
 
             <ion-toolbar>
-              <ion-segment value="default" class="theme-picker">
+              <ion-segment value="default" class="palette-picker">
                 <ion-segment-button value="default">
                   <ion-label>Default</ion-label>
                 </ion-segment-button>
@@ -908,7 +908,7 @@ <h2>Battle Royale Open World Pac-Man</h2>
             <ion-toolbar>
               <ion-title>Overlays</ion-title>
               <div slot="end" class="right-container">
-                <ion-select label="Select a Theme:" interface="popover" class="theme-picker">
+                <ion-select label="Select a Palette:" interface="popover" class="palette-picker">
                   <ion-select-option value="default" selected>Default</ion-select-option>
                   <ion-select-option value="dark">Dark</ion-select-option>
                   <ion-select-option value="high-contrast">High Contrast</ion-select-option>
@@ -962,52 +962,52 @@ <h2>Battle Royale Open World Pac-Man</h2>
     </ion-app>
 
     <script>
-      const selects = document.querySelectorAll('.theme-picker');
+      const selects = document.querySelectorAll('.palette-picker');
 
       for (let i = 0; i < selects.length; i++) {
         selects[i].addEventListener('ionChange', (ev) => {
-          const theme = event.detail && event.detail.value;
-          toggleTheme(theme);
+          const palette = event.detail && event.detail.value;
+          togglePalette(palette);
         });
       }
 
-      function toggleTheme(theme) {
+      function togglePalette(palette) {
         // The path to the directory containing the
-        // custom theme files for this test
-        var themeFilesDir = '/src/themes/test/css-variables/css';
+        // custom palette files for this test
+        var paletteFilesDir = '/src/themes/test/css-variables/css';
         let modifier = '';
 
-        // The default and dark themes are official Ionic
-        // themes so they are located outside of this test
-        switch (theme) {
+        // The default and dark palettes are official Ionic
+        // palettes so they are located outside of this test
+        switch (palette) {
           case 'dark':
           case 'high-contrast':
           case 'high-contrast-dark':
-            themeFilesDir = '/css/themes';
+            paletteFilesDir = '/css/palettes';
             modifier = '.always';
             break;
           default:
             break;
         }
 
-        var cssFile = `${themeFilesDir}/${theme}${modifier}.css`;
+        var cssFile = `${paletteFilesDir}/${palette}${modifier}.css`;
 
-        var oldLink = document.getElementById('theme');
+        var oldLink = document.getElementById('palette');
 
         var newLink = document.createElement('link');
-        newLink.setAttribute('id', 'theme');
+        newLink.setAttribute('id', 'palette');
         newLink.setAttribute('rel', 'stylesheet');
         newLink.setAttribute('type', 'text/css');
 
-        // The default light theme is built in to Ionic, so no need to import a separate stylesheet
-        if (theme !== 'default') {
+        // The default light palette is built in to Ionic, so no need to import a separate stylesheet
+        if (palette !== 'default') {
           newLink.setAttribute('href', cssFile);
         }
 
         document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink);
 
         for (let i = 0; i < selects.length; i++) {
-          selects[i].value = theme;
+          selects[i].value = palette;
         }
       }
 
diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts
index c1534d77915..b844bac81f3 100644
--- a/core/src/utils/test/playwright/page/utils/set-content.ts
+++ b/core/src/utils/test/playwright/page/utils/set-content.ts
@@ -42,7 +42,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${palette !== 'light' ? `<link href="${baseUrl}/css/themes/${palette}.always.css" rel="stylesheet" />` : ''}
+        ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>