[WNMGDS-2726] Update alert background colors to ensure sufficient col…

…or contrast (#3007)

* Update success and error alert backgrounds to new approved colors to fix contrast

These both had color-contrast issues with primary-colored links and such

* Update VRT snapshots

* These example VRTs changed too

* Don't need these variables that were used to correct contrast issues

This is the root issue the bg color change was trying to solve. There are too many possible combinations to account for with special CSS overrides. We instead chose to make sure the primary color worked on all normal background colors

* Put some links in the success and error alert stories to check the contrast

packages/design-system-tokens/src/themes/cmsgov-component.ts

@@ -32,10 +32,6 @@ export const components: AnyTokenValues = {
     '__icon-size':                                '1.5rem',
     '__padding':                                  t.spacer['2'],
     '-bar__width':                                t.spacer['1'],
-    '-link__font-color':                          t.color['primary-darker'],
-    '-link__font-color--hover':                   t.color['primary-darkest'],
-    '-link__font-color--focus':                   t.color['primary-darkest'],
-    '-link__font-color--active':                  t.color['primary-darkest'],
   },
 
   'badge': {

packages/design-system-tokens/src/themes/cmsgov.ts

@@ -25,7 +25,7 @@ export const themeColors: ColorTokens = {
   'border-dark':                color['lapis-800'],
   'border-inverse':             color['white-solid'],
   //
-  'error-lightest':             color['rose-50'],
+  'error-lightest':             color['rose-40'],
   'error-lighter':              color['rose-100'],
   'error-light':                color['rose-200'],
   'error':                      color['rose-500'],
@@ -79,7 +79,7 @@ export const themeColors: ColorTokens = {
   'info-darker':                color['deepsea-700'],
   'info-darkest':               color['deepsea-800'],
   //
-  'success-lightest':           color['spring-50'],
+  'success-lightest':           color['spring-40'],
   'success-lighter':            color['spring-100'],
   'success-light':              color['spring-300'],
   'success':                    color['spring-500'],

packages/design-system-tokens/src/themes/core-component.ts

@@ -32,10 +32,6 @@ export const components: AnyTokenValues = {
     '__icon-size':                                '1.5rem',
     '__padding':                                  t.spacer['2'],
     '-bar__width':                                t.spacer['1'],
-    '-link__font-color':                          t.color['primary-darker'],
-    '-link__font-color--hover':                   t.color['primary-darkest'],
-    '-link__font-color--focus':                   t.color['primary-darkest'],
-    '-link__font-color--active':                  t.color['primary-darkest'],
   },
 
   'badge': {

packages/design-system-tokens/src/themes/core.ts

@@ -25,7 +25,7 @@ export const themeColors: ColorTokens = {
   'border-dark':                color['lapis-800'],
   'border-inverse':             color['white-solid'],
   //
-  'error-lightest':             color['rose-50'],
+  'error-lightest':             color['rose-40'],
   'error-lighter':              color['rose-100'],
   'error-light':                color['rose-300'],
   'error':                      color['rose-500'],
@@ -79,7 +79,7 @@ export const themeColors: ColorTokens = {
   'info-darker':                color['sky-700'],
   'info-darkest':               color['sky-800'],
   //
-  'success-lightest':           color['spring-50'],
+  'success-lightest':           color['spring-40'],
   'success-lighter':            color['spring-100'],
   'success-light':              color['spring-300'],
   'success':                    color['spring-500'],

packages/design-system-tokens/src/themes/healthcare-component.ts

@@ -34,10 +34,6 @@ export const components: AnyTokenValues = {
     '__icon-size':                                '1.5rem',
     '__padding':                                  t.spacer['2'],
     '-bar__width':                                t.spacer['1'],
-    '-link__font-color':                          t.color['primary-darker'],
-    '-link__font-color--hover':                   t.color['primary-darkest'],
-    '-link__font-color--focus':                   t.color['primary-darkest'],
-    '-link__font-color--active':                  t.color['primary-darkest'],
   },
 
   'badge': {

packages/design-system-tokens/src/themes/healthcare.ts

@@ -25,7 +25,7 @@ export const themeColors: ColorTokens = {
   'border-dark':                color['lapis-800'],
   'border-inverse':             color['white-solid'],
   //
-  'error-lightest':             color['rose-50'],
+  'error-lightest':             color['rose-40'],
   'error-lighter':              color['rose-100'],
   'error-light':                color['rose-300'],
   'error':                      color['rose-500'],
@@ -79,7 +79,7 @@ export const themeColors: ColorTokens = {
   'info-darker':                color['darksky-700'],
   'info-darkest':               color['darksky-800'],
   //
-  'success-lightest':           color['spring-50'],
+  'success-lightest':           color['spring-40'],
   'success-lighter':            color['spring-100'],
   'success-light':              color['spring-300'],
   'success':                    color['spring-500'],

packages/design-system-tokens/src/themes/medicare-component.ts

@@ -32,10 +32,6 @@ export const components: AnyTokenValues = {
     '__icon-size':                                '1.5rem',
     '__padding':                                  t.spacer['2'],
     '-bar__width':                                t.spacer['1'],
-    '-link__font-color':                          t.color['secondary'],
-    '-link__font-color--hover':                   t.color['secondary-dark'],
-    '-link__font-color--focus':                   t.color['secondary-darkest'],
-    '-link__font-color--active':                  t.color['secondary-darkest'],
   },
 
   'badge': {

packages/design-system-tokens/src/tokens/color.ts

@@ -118,6 +118,7 @@ export const color = to<ColorTokens>()({
   'deepsea-1000':    '#01040f',
 
   // Greens
+  'spring-40':       '#f6faf5',
   'spring-50':       '#e7f3e7',
   'spring-100':      '#b8dcb7',
   'spring-200':      '#89c487',
@@ -155,6 +156,7 @@ export const color = to<ColorTokens>()({
   'emerald-1000':    '#07170e',
 
   // Reds
+  'rose-40':         '#fef5f7',
   'rose-50':         '#fce8ec',
   'rose-100':        '#f7bbc5',
   'rose-200':        '#f18e9e',

packages/design-system/src/components/Alert/Alert.stories.tsx

@@ -106,8 +106,14 @@ export const Success = {
   ...AlertTemplate,
   args: {
     heading: 'Your application has been submitted',
-    children:
-      'You successfully submitted your application. You will receive a confirmation email within 24 hours. If you do not receive an email, please contact us at 1-800-555-5555 (TTY: 1-855-555-5555).',
+    children: (
+      <>
+        You successfully submitted your application. You will receive a confirmation email within 24
+        hours. If you do not receive an email, please contact us at{' '}
+        <a href="tel:+1-800-555-5555">1-800-555-5555</a> (TTY:{' '}
+        <a href="tel:+1-855-555-5555">1-855-555-5555</a>).
+      </>
+    ),
     variation: 'success',
   },
 };
@@ -124,8 +130,13 @@ export const Error = {
   ...AlertTemplate,
   args: {
     heading: 'There was a problem saving your information',
-    children:
-      'Please review the information you entered and try again. If you continue to have problems, please contact us at 1-800-555-5555 (TTY: 1-855-555-5555).',
+    children: (
+      <>
+        Please review the information you entered and try again. If you continue to have problems,
+        please contact us at <a href="tel:+1-800-555-5555">1-800-555-5555</a> (TTY:{' '}
+        <a href="tel:+1-855-555-5555">1-855-555-5555</a>).
+      </>
+    ),
     variation: 'error',
   },
 };

packages/design-system/src/styles/components/_Alert.scss

@@ -7,23 +7,6 @@
   display: flex;
   padding: var(--alert__padding);
 
-  a:not(.ds-c-button),
-  .ds-c-link {
-    color: var(--alert-link__font-color);
-
-    &:hover {
-      color: var(--alert-link__font-color--hover);
-    }
-
-    &:focus {
-      color: var(--alert-link__font-color--focus);
-    }
-
-    &:active {
-      color: var(--alert-link__font-color--active);
-    }
-  }
-
   ul {
     &:last-child {
       margin-block-end: 0;

packages/docs/static/themes/cmsgov-theme.css

@@ -8,9 +8,9 @@
 --accordion-button__color: #262626;
 --accordion-content__background-color: #ffffff;
 --alert__background-color: #e7e9f5;
---alert__background-color--error: #fce8ec;
+--alert__background-color--error: #fef5f7;
 --alert__background-color--lightweight: #ffffff;
---alert__background-color--success: #e7f3e7;
+--alert__background-color--success: #f6faf5;
 --alert__background-color--warn: #fffce6;
 --alert__border-left-color: #0d2499;
 --alert__border-color--error: #e31c3d;
@@ -20,10 +20,6 @@
 --alert__icon-size: 1.5rem;
 --alert__padding: 16px;
 --alert-bar__width: 8px;
---alert-link__font-color: #09196b;
---alert-link__font-color--hover: #07124d;
---alert-link__font-color--focus: #07124d;
---alert-link__font-color--active: #07124d;
 --badge__background-color: #f2f2f2;
 --badge__background-color--alert: #e31c3d;
 --badge__background-color--info: #0d2499;
@@ -378,7 +374,7 @@
 --color-border: #d9d9d9;
 --color-border-dark: #0f1e38;
 --color-border-inverse: #ffffff;
---color-error-lightest: #fce8ec;
+--color-error-lightest: #fef5f7;
 --color-error-lighter: #f7bbc5;
 --color-error-light: #f18e9e;
 --color-error: #e31c3d;
@@ -424,7 +420,7 @@
 --color-info-dark: #0c208a;
 --color-info-darker: #09196b;
 --color-info-darkest: #07124d;
---color-success-lightest: #e7f3e7;
+--color-success-lightest: #f6faf5;
 --color-success-lighter: #b8dcb7;
 --color-success-light: #59ac56;
 --color-success: #12890e;

packages/docs/static/themes/core-theme.css

@@ -8,9 +8,9 @@
 --accordion-button__color: #262626;
 --accordion-content__background-color: #ffffff;
 --alert__background-color: #e6f9fd;
---alert__background-color--error: #fce8ec;
+--alert__background-color--error: #fef5f7;
 --alert__background-color--lightweight: #ffffff;
---alert__background-color--success: #e7f3e7;
+--alert__background-color--success: #f6faf5;
 --alert__background-color--warn: #fef9e9;
 --alert__border-left-color: #02bfe7;
 --alert__border-color--error: #e31c3d;
@@ -20,10 +20,6 @@
 --alert__icon-size: 1.5rem;
 --alert__padding: 16px;
 --alert-bar__width: 8px;
---alert-link__font-color: #004f84;
---alert-link__font-color--hover: #00395e;
---alert-link__font-color--focus: #00395e;
---alert-link__font-color--active: #00395e;
 --badge__background-color: #5a5a5a;
 --badge__background-color--alert: #e31c3d;
 --badge__background-color--info: #0071bc;
@@ -378,7 +374,7 @@
 --color-border: #d9d9d9;
 --color-border-dark: #0f1e38;
 --color-border-inverse: #ffffff;
---color-error-lightest: #fce8ec;
+--color-error-lightest: #fef5f7;
 --color-error-lighter: #f7bbc5;
 --color-error-light: #eb6077;
 --color-error: #e31c3d;
@@ -424,7 +420,7 @@
 --color-info-dark: #02acd0;
 --color-info-darker: #0186a2;
 --color-info-darkest: #016074;
---color-success-lightest: #e7f3e7;
+--color-success-lightest: #f6faf5;
 --color-success-lighter: #b8dcb7;
 --color-success-light: #59ac56;
 --color-success: #12890e;

packages/docs/static/themes/healthcare-theme.css

@@ -9,9 +9,9 @@
 --accordion-content__background-color: #ffffff00;
 --accordion-icon__size: 0.875rem;
 --alert__background-color: #ecf4fa;
---alert__background-color--error: #fce8ec;
+--alert__background-color--error: #fef5f7;
 --alert__background-color--lightweight: #ffffff;
---alert__background-color--success: #e7f3e7;
+--alert__background-color--success: #f6faf5;
 --alert__background-color--warn: #fef9e9;
 --alert__border-left-color: #3e94cf;
 --alert__border-color--error: #e31c3d;
@@ -21,10 +21,6 @@
 --alert__icon-size: 1.5rem;
 --alert__padding: 16px;
 --alert-bar__width: 8px;
---alert-link__font-color: #034866;
---alert-link__font-color--hover: #023449;
---alert-link__font-color--focus: #023449;
---alert-link__font-color--active: #023449;
 --badge__background-color: #5a5a5a;
 --badge__background-color--alert: #e31c3d;
 --badge__background-color--info: #046791;
@@ -381,7 +377,7 @@
 --color-border: #d9d9d9;
 --color-border-dark: #0f1e38;
 --color-border-inverse: #ffffff;
---color-error-lightest: #fce8ec;
+--color-error-lightest: #fef5f7;
 --color-error-lighter: #f7bbc5;
 --color-error-light: #eb6077;
 --color-error: #e31c3d;
@@ -427,7 +423,7 @@
 --color-info-dark: #3885ba;
 --color-info-darker: #2b6891;
 --color-info-darkest: #1f4a68;
---color-success-lightest: #e7f3e7;
+--color-success-lightest: #f6faf5;
 --color-success-lighter: #b8dcb7;
 --color-success-light: #59ac56;
 --color-success: #12890e;

packages/docs/static/themes/medicare-theme.css

@@ -20,10 +20,6 @@
 --alert__icon-size: 1.5rem;
 --alert__padding: 16px;
 --alert-bar__width: 8px;
---alert-link__font-color: #1e3c70;
---alert-link__font-color--hover: #1b3665;
---alert-link__font-color--focus: #0f1e38;
---alert-link__font-color--active: #0f1e38;
 --badge__background-color: #5a5a5a;
 --badge__background-color--alert: #b20000;
 --badge__background-color--info: #146a5d;