Colors page redesign

[katierik]

There are color variables that are in the Sketch document (e.g. pf-orange-300) that are not available in PF4.

PF3 had these documented on the color palette page
PF4 has only select colors (the most common & tied to functions) on the color palette page

The PF4 global variable list also does not list the color variables.

They appear to be in PF4 based on this ? But are not in any clear documentation.

The request is to have the color variables documented in the Global CSS variables list.

[katierik]

Somewhat related to the design kit issue about color variable names here: patternfly/patternfly-design-kit#105

[gdoyle1]

Hi Katie @katierik - all of the colors that are presented here: https://github.com/patternfly/patternfly-next/blob/master/src/patternfly/sass-utilities/colors.scss are all of the colors that PF4 offers. You'll see that in some of the charts, they created a new palette of colors (for example the whole green family is DIFFERENT than the $pf-color-green-### family in the .scss color file). $pf-color-orange-300 is offered in PF4 as seen in sketch as #EC7108 which is actually the same family of colors used for charts (where variables are reassigned as $pf-chart-color-orange-###). I updated the color swatches in the library palettes in Sketch that hopefully will decrease this confusion. I added the exact variable name to them too so that should help.

[katierik]

So, are all the colors in the scss available for devs to use?

[gdoyle1]

No not all the colors in the scss are available unless they are assigned to a variable. For example - go here https://github.com/patternfly/patternfly-next/blob/master/src/patternfly/_chart-globals.scss and you can see all the chart variables that are offered in that package. For example, the orange colors in the scss are assigned to orange chart color variables. I was more answering the sketch file issue here so we might want to pull someone in who works on the site/a css dev

[rachael-phillips]

@gdoyle1 is this something that needs to be enhanced or fixed on the site?

[gdoyle1]

@rachael-phillips We could probably redesign the colors page to look more like pf3's and supply the whole color palette

[gdoyle1]

Spoke with Rachael and Matt Carrano about this on Slack:

Created this spreadsheet to figure out which colors within the colors.scss file are assigned to global variables. All the ones that are highlighted in red have not yet been defined. I'll need the global variable to list each color family in a table on the colors page. Screenshot of the start of that is below:

Michael Coker, Matt, Rachael and Michael Celedonia and I will meet to figure out the best approach to this. Whether we give all of the colors global variables or if we consolidate some of them.