feat(select): add css vars for color, screenshot tests and updated snapshots

Author: brandyscarney

core/src/components/select/select.scss

@@ -26,7 +26,8 @@
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
    *
-   * TODO: add supporting text css vars
+   * @prop --helper-text-color: The color of the supporting text displayed beneath the select when the select is valid.
+   * @prop --error-text-color: The color of the supporting text displayed beneath the select when the select is invalid and touched.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -39,6 +40,8 @@
   --highlight-color-focused: #{ion-color(primary, base)};
   --highlight-color-valid: #{ion-color(success, base)};
   --highlight-color-invalid: #{ion-color(danger, base)};
+  --helper-text-color: #{$text-color-step-300};
+  --error-text-color: var(--highlight-color-invalid);
 
   /**
    * This is a private API that is used to switch
@@ -325,13 +328,13 @@ button {
  .select-bottom .error-text {
   display: none;
 
-  color: var(--highlight-color-invalid);
+  color: var(--error-text-color);
 }
 
 .select-bottom .helper-text {
   display: block;
 
-  color: $text-color-step-300;
+  color: var(--helper-text-color);
 }
 
 :host(.ion-touched.ion-invalid) .select-bottom .error-text {

core/src/components/select/test/bottom-content/select.e2e.ts

@@ -151,7 +151,7 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screens
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: supporting text customization'), () => {
-    test('should not have visual regressions when rendering helper text with a custom color', async ({ page }) => {
+    test('should not have visual regressions when rendering helper text with a custom color via css parts', async ({ page }) => {
       await page.setContent(
         `
         <style>
@@ -169,9 +169,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       );
 
       const errorText = page.locator('ion-select');
-      await expect(errorText).toHaveScreenshot(screenshot(`select-helper-text-custom`));
+      await expect(errorText).toHaveScreenshot(screenshot(`select-helper-text-custom-parts`));
     });
-    test('should not have visual regressions when rendering error text with a custom color', async ({ page }) => {
+    test('should not have visual regressions when rendering helper text with a custom color via css var', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-select.custom-select {
+            --helper-text-color: green;
+          }
+        </style>
+        <ion-select class="custom-select" label="Label" helper-text="Helper text"></ion-select>
+      `,
+        config
+      );
+
+      const helperText = page.locator('ion-select');
+      await expect(helperText).toHaveScreenshot(screenshot(`select-helper-text-custom-color-var`));
+    });
+    test('should not have visual regressions when rendering error text with a custom color via css parts', async ({ page }) => {
       await page.setContent(
         `
         <style>
@@ -189,7 +205,39 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       );
 
       const errorText = page.locator('ion-select');
-      await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom`));
+      await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-parts`));
+    });
+    test('should not have visual regressions when rendering error text with a custom color via css var', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-select.custom-select {
+            --error-text-color: purple;
+          }
+        </style>
+        <ion-select class="ion-invalid ion-touched custom-select" label="Label" error-text="Error text"></ion-select>
+      `,
+        config
+      );
+
+      const errorText = page.locator('ion-select');
+      await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-color-var`));
+    });
+    test('should not have visual regressions when rendering error text with a custom color via css highlight var', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-select.custom-select {
+            --highlight-color-invalid: purple;
+          }
+        </style>
+        <ion-select class="ion-invalid ion-touched custom-select" label="Label" error-text="Error text"></ion-select>
+      `,
+        config
+      );
+
+      const errorText = page.locator('ion-select');
+      await expect(errorText).toHaveScreenshot(screenshot(`select-error-text-custom-highlight-var`));
     });
   });
 });