feat(many): use text color tokens

Author: thetaPC

core/scripts/testing/scripts.js

@@ -87,8 +87,8 @@ const DEFAULT_THEME = 'md';
    * Values can be `light`, `dark`, `high-contrast`,
    * or `high-contrast-dark`. Default to `light` for tests.
    */
-  const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
-  const paletteHash = window.location.hash.match(/palette=([a-z]+)/);
+  const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
+  const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
   const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
 
   const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
@@ -113,12 +113,18 @@ const DEFAULT_THEME = 'md';
       // to set the enabled property to 'always'
       if (paletteName === 'dark' && theme.palette?.dark) {
         theme.palette.dark.enabled = 'always';
+      } else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
+        theme.palette.highContrast.enabled = 'always';
+      } else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
+        theme.palette.highContrastDark.enabled = 'always';
       }
 
       // Apply the theme tokens to Ionic config
       window.Ionic = window.Ionic || {};
       window.Ionic.config = window.Ionic.config || {};
       window.Ionic.config.customTheme = theme;
+      console.log(`Applied ${themeName} theme with ${paletteName} palette.`);
+      console.log('theme:', theme);
 
       // Re-apply the global theme
       if (window.Ionic.config.get && window.Ionic.config.set) {

core/src/components/action-sheet/action-sheet.ios.scss

@@ -17,7 +17,7 @@
   --button-background-selected: #{$action-sheet-ios-button-background-selected};
   --button-background-selected-opacity: 1;
   --button-color: #{$action-sheet-ios-button-text-color};
-  --button-color-disabled: var(--ion-color-gray-850);
+  --button-color-disabled: var(--ion-color-text-850);
   --color: #{$action-sheet-ios-title-color};
 
   text-align: $action-sheet-ios-text-align;

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -25,7 +25,7 @@ $action-sheet-ios-group-margin-top: 10px;
 $action-sheet-ios-group-margin-bottom: 10px;
 
 /// @prop - Background color of the action sheet
-$action-sheet-ios-background-color: $overlay-ios-background-color;
+$action-sheet-ios-background-color: var(--ion-color-overlay-bg);
 
 /// @prop - Border radius of the action sheet
 $action-sheet-ios-border-radius: 13px;
@@ -46,7 +46,7 @@ $action-sheet-ios-title-padding-bottom: 13px;
 $action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end;
 
 /// @prop - Color of the action sheet title
-$action-sheet-ios-title-color: var(--ion-color-gray-400);
+$action-sheet-ios-title-color: var(--ion-color-text-400);
 
 /// @prop - Font size of the action sheet title
 $action-sheet-ios-title-font-size: dynamic-font-min(1, 13px);
@@ -115,7 +115,7 @@ $action-sheet-ios-button-background: linear-gradient(
 $action-sheet-ios-button-background-activated: $text-color;
 
 /// @prop - Background color of the selected action sheet button
-$action-sheet-ios-button-background-selected: var(--ion-color-gray-0);
+$action-sheet-ios-button-background-selected: var(--ion-components-ion-action-sheet-button-bg-selected);
 
 /// @prop - Destructive text color of the action sheet button
 $action-sheet-ios-button-destructive-text-color: ion-color(danger, base);

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -64,7 +64,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end
 $action-sheet-md-button-height: 52px;
 
 /// @prop - Text color of the action sheet button
-$action-sheet-md-button-text-color: var(--ion-color-gray-850);
+$action-sheet-md-button-text-color: var(--ion-color-text-850);
 
 /// @prop - Font size of the action sheet button
 $action-sheet-md-button-font-size: dynamic-font(16px);

core/src/components/alert/alert.ios.vars.scss

@@ -15,7 +15,7 @@ $alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2);
 $alert-ios-border-radius: 13px;
 
 /// @prop - Background color of the alert
-$alert-ios-background-color: $overlay-ios-background-color;
+$alert-ios-background-color: var(--ion-color-overlay-bg);
 
 /// @prop - Background color alpha of the alert when translucent
 $alert-ios-translucent-background-color-alpha: 0.9;
@@ -57,7 +57,7 @@ $alert-ios-title-font-weight: 600;
 $alert-ios-sub-title-font-size: dynamic-font-min(1, 14px);
 
 /// @prop - Text color of the alert sub title
-$alert-ios-sub-title-text-color: var(--ion-color-gray-600);
+$alert-ios-sub-title-text-color: var(--ion-color-text-600);
 
 /// @prop - Padding top of the alert message
 $alert-ios-message-padding-top: 0;
@@ -114,7 +114,7 @@ $alert-ios-input-padding-start: $alert-ios-input-padding-end;
 $alert-ios-input-placeholder-color: $placeholder-text-color;
 
 /// @prop - Border color of the alert input
-$alert-ios-input-border-color: var(--ion-color-gray-250);
+$alert-ios-input-border-color: var(--ion-color-text-250);
 
 /// @prop - Border of the alert input
 $alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color;
@@ -276,7 +276,7 @@ $alert-ios-checkbox-border-style: solid;
 $alert-ios-checkbox-border-radius: 50%;
 
 /// @prop - Border color of the checkbox in the alert when off
-$alert-ios-checkbox-border-color-off: $item-ios-border-color;
+$alert-ios-checkbox-border-color-off: var(--ion-components-ion-item-border-color);
 
 /// @prop - Border color of the checkbox in the alert when on
 $alert-ios-checkbox-border-color-on: ion-color(primary, base);

core/src/components/alert/alert.md.vars.scss

@@ -80,7 +80,7 @@ $alert-md-message-padding-start: $alert-md-message-padding-end;
 $alert-md-message-font-size: dynamic-font(16px);
 
 /// @prop - Text color of the alert message
-$alert-md-message-text-color: var(--ion-color-gray-550);
+$alert-md-message-text-color: var(--ion-color-text-550);
 
 /// @prop - Padding top of the alert empty message
 $alert-md-message-empty-padding-top: 0;
@@ -254,7 +254,7 @@ $alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px;
 $alert-md-radio-label-font-size: dynamic-font(16px);
 
 /// @prop - Text color of the label for the radio alert
-$alert-md-radio-label-text-color: var(--ion-color-gray-850);
+$alert-md-radio-label-text-color: var(--ion-color-text-850);
 
 /// @prop - Text color of the label for the checked radio alert
 $alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color;
@@ -323,7 +323,7 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top;
 $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px;
 
 /// @prop - Text color of the label for the checkbox in the alert
-$alert-md-checkbox-label-text-color: var(--ion-color-gray-850);
+$alert-md-checkbox-label-text-color: var(--ion-color-text-850);
 
 /// @prop - Font size of the label for the checkbox in the alert
 $alert-md-checkbox-label-font-size: dynamic-font(16px);

core/src/components/alert/test/basic/alert.e2e.ts

@@ -103,7 +103,7 @@ configs().forEach(({ config, screenshot, title }) => {
 
 configs({ palettes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('should not have visual regressions'), () => {
-    test('more than two buttons', async ({ page }) => {
+    test.only('more than two buttons', async ({ page }) => {
       await page.setContent(
         `
         <ion-alert

core/src/components/card-subtitle/card-subtitle.ios.vars.scss

@@ -40,4 +40,4 @@ $card-ios-subtitle-margin-bottom: 4px;
 $card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end;
 
 /// @prop - Color of the card subtitle
-$card-ios-subtitle-color: var(--ion-color-gray-600);
+$card-ios-subtitle-color: var(--ion-color-text-600);

core/src/components/card-subtitle/card-subtitle.md.vars.scss

@@ -31,4 +31,4 @@ $card-md-subtitle-margin-bottom: 0;
 $card-md-subtitle-margin-start: $card-md-subtitle-margin-end;
 
 /// @prop - Color of the card subtitle
-$card-md-subtitle-color: var(--ion-color-gray-550);
+$card-md-subtitle-color: var(--ion-color-text-550);

core/src/components/card-title/card-title.md.vars.scss

@@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top;
 $card-md-title-margin-start: $card-md-title-margin-end;
 
 /// @prop - Color of the card title
-$card-md-title-text-color: var(--ion-color-gray-850);
+$card-md-title-text-color: var(--ion-color-text-850);