Theming Update | UI colors should match PF core (remove ui-complement & surface-lighter) (#895)

* Use PF core variable for blue & set ui-accent variable to point to it. Update pfe-tabs to use ui-accent. Change ui-base and ui-complement to be blue
* Update import statement, use node-package-sass-importer (thx Kyle & Cassondra!), update accordions to use accent color
* Remove ui-complement; use only base (gray) and accent (blue)
* Update documentation
* Add support for pfe-color=base attribute on default cta
* Update to Patternfly version 4.10.31; import scss-variables from PF core, Use primary & secondary PatternFly core colors
* update colors in jump links & nav
* update ui colors in page-status component
* Update gray colors to use PF core grays; update surface map to use lighter gray colors
* Fix feedback, badge default colors
* Add ui-base + saturated colors; Adjust opacity value to .2
* WIP updating theme-test page
Update surface colors, probably need to change base color
Adjust card header opacity
* revert surface base back to a light color
* Adjust band demo to show all surface colors in order; add temporary RH theme for demo purposes
* Add text-muted var; move link underlines out of color map;  update theme-demo color vars to include the word color like advanced theme; add to theme-test page
Add pfe-vars file to demo remaining variables (still doesnt create CSS though)
* Add text-muted variable
* Update component files; however this is just for demonstration purposes and may be altered when faced with merge conflicts
* use PF core red colors
* Adjust opacity value per design team feedback
* update band demo page to show grid issues at the bottom
* Importing using gulp-sass includePaths
* Fix dropdown color variable references
* fix color name in page-status
* Add import statement to fix missing vars error
* Remove references to "lighter" in schemas & sass; update default color on pfe icon so that the non circled icon is more visible
https://www.evernote.com/l/AA5bX7wjMLFJALJPLyitWAOlFnOkcCXsBLk
* Update AT expected colors
* Swap surface colors for UI colors on the nav
* bring back pfe-color=lighter in card & band, show as deprecated.
* Add  dark &  saturated contexts to default CTA;  Move context up above color overrides so color attribute wins
* Fix hover/focus state colors
* Update more PFE colors to PF core colors
* remove interpolation
* Update link colors to use lighter more accessible blues
* Update elements/pfe-card/src/pfe-card.scss
* Update elements/pfe-band/demo/index.html
* Var cleanup, add debug mixin
* Prettify band demo

Co-authored-by: Kyle Buchanan <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>

Author: 4 people

docs/content/theme/color-palette.md

@@ -18,7 +18,12 @@ tags = [ "theme" ]
 
 ## Text & links
 
-Text and links are the most fundamental pieces of any web property, so they have their own variables aside from other UI elements. They also respond to context, such as a bit of text in a dark gray card would need to change to white. Or a link in a dark gray card would need to become a lighter shade of blue.  Here are a few examples:
+Text and links, being fundamental pieces of any web property, have their own set of variables. 
+These variables assume a light background by default, assigning typography colors that pass accessibility when placed on white or very light gray contexts.  In addition, we provide contextual variables for these typographical elements for when they exist inside a dark or saturated context.  Text in a black card for example would need to flip to white to pass accessibility standards while links on a blue or red shade would need to update to white in order to be visible.
+
+You can set the value of these typography color variables to something in your brand palette but be sure to validate them against a [contrast checker](https://webaim.org/resources/contrastchecker/) to ensure they continue to pass accessibility standards when set against your surface or UI palettes.  Aim for AAA status if you can! ⭐ 
+
+Here are a few examples:
 
 ```
   --pfe-theme--color--text: #151515;
@@ -37,15 +42,16 @@ A user interface uses color to convey:
  - **Information**: Charts, graphs, and wayfinding elements
  - **Hierarchy**: Showing structured order through color and typography
 
-We've exposed 3 color variants for this design system to represent your brand:
+We've exposed 2 UI color variants for the UI elements in the design system to represent your brand:
 
  - Base
- - Complement
  - Accent
 
-These colors are used throughout PatternFly Elements, but **accent is the color which should stand out the most**. For example, if your brand colors are navy, orange, and medium gray, you'll want to set orange as the accent color. You'll see it appear on primary level call-to-action buttons and other elements that need to have more weight in the visual heirarchy of the page.
+These colors are used throughout PatternFly Elements. **Accent** is the color which should stand out the most. For example, if your brand colors are orange and gray, we recommend you set orange as the accent color.  In doing this, that orange will now appear on primary level call-to-action buttons and other elements that need to have more weight in the visual hierarchy of the page. 
+
+UI colors are meant to provide basic colors for other page elements besides links and body text. 
 
-If you are overriding these colors, you can do so by setting the CSS variables to have new values in the stylesheet of your page or app, like this:
+If you are overriding these colors, you can do so by setting the CSS variables to have new values in the stylesheet of your page or app. You'll want to override the color itself, but also the corresponding hover variant and text color (that would be used if there was text on top of this color, like a button):
 
 ```css
 :root {
@@ -56,9 +62,6 @@ If you are overriding these colors, you can do so by setting the CSS variables t
 }
 ```
 
-UI colors are meant to provide basic colors for other page elements besides links and body text. You may choose to set the value of a link color to something in your brand, but it is not required, and these colors should provide a good user experience. 
-
-
 ## Surface Colors
 
 It's also a good idea to choose some neutral colors for general UI backgrounds and borders—usually grays. Surface color encompass any "surface" that are typically part of container-type elements, like cards or bands. These colors should be harmonious with your corporate style guide (if you have one), but they may not necessarily be your company’s primary brand colors. 
@@ -112,4 +115,3 @@ And finally, you’ll have colors for states such as error, warning, and success
     --pfe-color--feedback--critical--darkest:        $pfe-color--red-800 !default;
 }
 ```
-

docs/content/theme/theme-palette.md

@@ -25,21 +25,19 @@ tags = [ "theme" ]
 
 These variables are global hooks to override colors, fonts, spacing and more throughout the library of web components. Generally this is all you need, though component specific variables are also available. Feel free to copy this list and define the values needed for your site or application. Please note that the logo URL paths are empty here.
 
+*If you have the project checked out locally, open up: pfe-styles/_temp/pfe-colors.css*
+
 | Variable name | Type       | Project default |
 | ------------- | ---------- | --- |
-| `--pfe-theme--color--ui-base` | Color | <span class="color-preview" style="--bg:#0477a4"></span> #0477a4 |
-| `--pfe-theme--color--ui-base--hover` | Color | <span class="color-preview" style="--bg:#022f40"></span> #022f40 |
-| `--pfe-theme--color--ui-base--focus` | Color | <span class="color-preview" style="--bg:#022f40"></span> #022f40 |
+| `--pfe-theme--color--ui-base` | Color | <span class="color-preview" style="--bg:#737679"></span> #737679 |
+| `--pfe-theme--color--ui-base--hover` | Color | <span class="color-preview" style="--bg:#4f5255"></span> #4f5255 |
+| `--pfe-theme--color--ui-base--focus` | Color | <span class="color-preview" style="--bg:#4f5255"></span> #4f5255 |
 | `--pfe-theme--color--ui-base--text` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
 | `--pfe-theme--color--ui-base--text--hover` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
 | `--pfe-theme--color--ui-base--text--focus` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
-| `--pfe-theme--color--ui-complement` | Color | <span class="color-preview" style="--bg:#464646"></span> #464646 |
-| `--pfe-theme--color--ui-complement--text` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
-| `--pfe-theme--color--ui-complement--hover` | Color | <span class="color-preview" style="--bg:#131313"></span> #131313 |
-| `--pfe-theme--color--ui-complement--text--hover` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
-| `--pfe-theme--color--ui-accent` | Color | <span class="color-preview" style="--bg:#e00"></span> #e00 |
-| `--pfe-theme--color--ui-accent--hover` | Color | <span class="color-preview" style="--bg:#880000"></span> #880000 |
-| `--pfe-theme--color--ui-accent--focus` | Color | <span class="color-preview" style="--bg:#880000"></span> #880000 |
+| `--pfe-theme--color--ui-accent` | Color | <span class="color-preview" style="--bg:#06c"></span> #06c |
+| `--pfe-theme--color--ui-accent--hover` | Color | <span class="color-preview" style="--bg:#003366"></span> #003366 |
+| `--pfe-theme--color--ui-accent--focus` | Color | <span class="color-preview" style="--bg:#003366"></span> #003366 |
 | `--pfe-theme--color--ui-accent--text` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
 | `--pfe-theme--color--ui-accent--text--hover` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
 | `--pfe-theme--color--ui-accent--text--focus` | Color | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |

elements/pfe-accordion/demo/index.html

@@ -84,7 +84,7 @@
 
       .custom-styles pfe-accordion {
         --pfe-accordion--accent: #fff;
-        --pfe-theme--color--ui-base: #444;
+        --pfe-theme--color--ui-accent: #ad41ad;
       }
 
       .custom-styles h2 {

elements/pfe-accordion/src/pfe-accordion-header.scss

@@ -23,7 +23,7 @@
     @include browser-query(ie11) {
       padding: 16px 24px;
       &:hover {
-        border-left-color: pfe-fetch(ui-base);
+        border-left-color: pfe-fetch(ui-accent);
       }
     }
 
@@ -32,7 +32,7 @@
       @include pfe-print-local($accordion);
       @include browser-query(ie11) {
         border-bottom-width: 0;
-        border-left-color: pfe-fetch(ui-base);
+        border-left-color: pfe-fetch(ui-accent);
         border-right-color: pfe-fetch(surface--border);
       }
     }

elements/pfe-accordion/src/pfe-accordion-panel.scss

@@ -49,7 +49,7 @@
   @include pfe-collapsible($state: open);
   @include browser-query(ie11) {
     border-top-width: 0;
-    border-left-color: pfe-var(ui-base);
+    border-left-color: pfe-var(ui-accent);
     border-right-color: pfe-var(surface--border);
   }
 }

elements/pfe-autocomplete/src/pfe-autocomplete.scss

@@ -68,7 +68,7 @@ $LOCAL-VARIABLES: (
 }
 
 button {
-  color: pfe-var(ui-complement);
+  color: pfe-var(ui-base);
   background-color: transparent;
   border: none;
   position: absolute;
@@ -82,7 +82,7 @@ button {
     margin: 2px 1px;
     background-color: pfe-var(surface--lightest);
     &:hover {
-      color: pfe-var(ui-complement);
+      color: pfe-var(ui-base);
     }
     svg {
       width: 12px;