VACMS-15308: update color variables in css (includes VACMS-14268).

[JakeBapple]

Description

Relates to #15560 and #14753

Testing done

Local test run to make sure theme and storybook compile correctly.

Screenshots

QA steps

What needs to be checked to prove this works?
Accessibility and design to check global items and spot check pages to ensure look is acceptable.
What needs to be checked to prove it didn't break any related things?
No behavior should have changed.

Definition of Done

• Documentation has been updated, if applicable.
• Tests have been added if necessary.
• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.
• If there are field changes, front end output has been thoroughly checked.

Select Team for PR review

• CMS Team
• Public websites
• Facilities
• User support
• Accelerated Publishing

Does this PR need review from a Product Owner

• Needs PO review

[github-actions]

Checking composer.lock changes...

[MDomngz]

• non blocking issue @JakeBapple:
  page's active tab is no longer visible
  (Left side of image is staging / right side is production)

[JakeBapple]

the word "content" in Marissa's screenshot is also no longer visible as it's color has been set to white.

[JakeBapple]

It looks like the color: var(--color-absolutezero); is not defined in the scss but is being referenced.

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[srancour]

It looks like there's still a few instances of --va-gray-dark:

• docroot/modules/custom/va_gov_magichead/css/magichead.css on lines 6 and 19

    4  
    5  .field--widget-magichead-paragraphs-classic .tabledrag-cell-content > * {
    6:   border-left: 1px dashed var(--va-gray-dark);
    7  }
    8  
    .
   17  .field--widget-magichead-paragraphs-classic .tabledrag-cell-content__item:empty {
   18    border-left: 0;
   19:   border-right: 1px dashed var(--va-gray-dark);
   20  }
   21  

• docroot/modules/custom/va_gov_workflow_assignments/css/ewa_style.css: on line 3

    1  /* Gray out pending va.gov URLs. */
    2  .va-gov-url-pending {
    3:   color: var(--va-gray-dark);
    4  }
    5  

An instance of --va-gray-cool-light in /docroot/design-system/.storybook/storybook-styles.scss on line 21

   19  code {
   20    color: var(--va-gray-darkest);
   21:   background-color: var(--va-gray-cool-light);
   22    font-size: var(--va-text);
   23    padding: var(--spacing-l);

An instance of --va-blue-light in /docroot/themes/custom/vagovclaro/assets/scss/components/_paragraphs.scss on line 87

   85  // truncated paragraph descriptions use a shim to fade to white. our bg isn't white.
   86  .js .draggable:hover .paragraphs-collapsed-description::after {
   87:   background: linear-gradient(to right, rgba(247, 252, 255, 0) 0%, var(--va-blue-light) 100%);
   88  }
   89  

A few instances of --color-white:

• docroot/design-system/components/button/button.scss on line 3

    1  a.button--outline,
    2  .button--outline {
    3:   background-color: var(--color-white);
    4    border: 2px solid var(--va-blue-dark) !important;
    5    box-shadow: none;

• docroot/design-system/components/input/input.scss on line 18

   16  .form-boolean:focus:active,
   17  .form-boolean:focus:hover {
   18:   box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus),
   19      inset 0 0 0 1px var(--va-blue-darkest);
   20  }

• docroot/design-system/components/tokens/_variables.scss on line 45

   43    --color-lightninggreen: var(--va-green-dark);
   44    --color-lightgray: var(--va-gray-lightest);
   45:   --color-whitesmoke: var(--va-gray-lightest);
   46    --color-text: var(--va-gray-darkest);
   47    --color-grayblue: var(--va-gray-lightest);

• docroot/themes/custom/vagovclaro/assets/scss/components/_layout.scss on line 3

    1  .content-header {
    2    background-color: var(--va-blue-darkest);
    3:   color: var(--color-white);
    4  
    5    // only re-color primary tab links when not in menu layout.

• docroot/themes/custom/vagovclaro/assets/scss/components/_toolbar.scss on line 143

  141  
  142      &:active {
  143:       color: var(--color-white) !important;
  144      }
  145  

• docroot/themes/custom/vagovclaro/assets/scss/pages/_kb-pages.scss on line 288

  286        input {
  287          background-color: var(--color-absolutezero-hover);
  288:         color: var(--color-white);
  289          transition-duration: 0.3s;
  290          transition-property: background-color;

• docroot/themes/custom/vagovclaro/assets/scss/tokens/_mixins.scss on lines 48 66 and 84

   46    border: 0;
   47    border-radius: 5px;
   48:   color: var(--color-white);
   49    display: inline-block;
   50    font-family: var(--font-family-sans);
   ..
   64    &:hover {
   65      background-color: $hover;
   66:     color: var(--color-white);
   67      text-decoration: none;
   68    }
   ..
   82  
   83  @mixin button-outline {
   84:   background-color: var(--color-white);
   85    border: 2px solid var(--va-blue-dark) !important;
   86    box-shadow: none;

There's one more instance of 'Source Sans Pro' in docroot/themes/custom/vagovclaro/assets/scss/tokens/_mixins.scss on line 117

  115  
  116  @mixin wysiwyg-va-body-font {
  117:   font-family: 'Source Sans Pro', sans-serif;
  118    font-size: 16px;
  119    line-height: 1.5;

[JakeBapple]

.paragraphsedit-paragraph li a { backgound-image} removed due to a possibility of accessibility issues since we could not find anywhere this class is being used.

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[srancour]

Great work!

[github-actions]

Checking composer.lock changes...