Update Sketch chart color family

[heyethankim]

Currently there is discrepancy between Sketch and PatternFly.com. The Sketch chart color family should be updated according to the PatternFly chart color family definition.

[heyethankim]

FYI. @mceledonia, @mcarrano, @KevinFCormier, @Randy424

[mcarrano]

@lboehling can you take a look?

[lboehling]

I'll open a design kit issue for this! Thanks @heyethankim @mcarrano

[lboehling]

@mcoker can i get your insight on this issue? We have 6 shades for our gray chart colors shown in the design kit, and only 5 gray shades for the charts on pf.org. It looks like the additional lighter gray is being used in donut utilization and bullet charts.

Looking at the charts on PF.org, the donut utilization and bullet charts also use a a different lighter value gray than the #EDEDED --pf-chart-color-black-100 used in our design kit. These are the lightest values on those charts: --pf-chart-bullet--qualitative-range--ColorScale--100: #f0f0f0 and --pf-chart-donut--threshold--first--Color: #f0f0f0

Should we add in another step to the gray family on patternfly.com and match the values of the lightest color so that both sketch and pf are using #F0F0F0 for pf-chart-color-black-100? Any other ideas on how to align on these values?

FYI @mcarrano @mceledonia @heyethankim @jhiadlov

[mcoker]

Here is the current black palette that we use, which you can see in https://github.com/patternfly/patternfly/blob/main/src/patternfly/base/_chart-globals.scss.

I included all of the $pf-color-black[...] and $pf-chart-color-black[...] vars, and under each of them are the vars that reference them directly. Some of the $pf-chart-[not "color"] vars listed here may be used as the values for other vars, too.

We have 6 $pf-chart-color-black-[...] vars, and each is set to the value of a global $pf-color-black-[...] var from the default PF palette. It's worth noting that we don't have #ededed (referenced in the sketch screenshot above) or #bbbbbb, #72767B, or #4D5258 (referenced from the .org screenshot above) in the PF global palette, either.

• $pf-color-black-200 - #f0f0f0
  • $pf-chart-color-black-100
  • $pf-chart-bullet--qualitative-range--ColorScale--100
  • $pf-chart-theme--gray--ColorScale--200
  • $pf-chart-theme--multi-color-unordered--ColorScale--1400
  • $pf-chart-global--Fill--Color--200
  • $pf-chart-bullet--group-title--divider--Fill--Color
  • $pf-chart-bullet--group-title--divider--stroke--Color
• $pf-color-black-300 - #d2d2d2
  • $pf-chart-color-black-200
  • $pf-chart-bullet--qualitative-range--ColorScale--200
  • $pf-chart-theme--gray--ColorScale--400
  • $pf-chart-theme--multi-color-unordered--ColorScale--2800
  • $pf-chart-global--Fill--Color--300
• $pf-color-black-400 - #b8bbbe
  • $pf-chart-color-black-300
  • $pf-chart-bullet--qualitative-range--ColorScale--300
  • $pf-chart-theme--gray--ColorScale--100
  • $pf-chart-theme--multi-color-unordered--ColorScale--700
  • $pf-chart-global--Fill--Color--400
• $pf-color-black-500 - #8a8d90
  • $pf-chart-color-black-400
  • $pf-chart-bullet--qualitative-range--ColorScale--400
  • $pf-chart-theme--gray--ColorScale--500
  • $pf-chart-theme--multi-color-unordered--ColorScale--3500
  • $pf-chart-global--Fill--Color--500
• $pf-color-black-600 - #6a6e73
  • $pf-chart-color-black-500
  • $pf-chart-bullet--qualitative-range--ColorScale--500
  • $pf-chart-theme--gray--ColorScale--300
  • $pf-chart-theme--multi-color-unordered--ColorScale--2100
• $pf-color-black-700 - #4f5255
  • $pf-chart-color-black-600
  • $pf-chart-global--Fill--Color--700
• $pf-color-black-900 - #151515 (no chart global var for this)
  • $pf-chart-global--label--Fill
  • $pf-chart-global--Fill--Color--900
  • $pf-chart-container--cursor--line--Fill

It seems like $pf-chart-color-black-[1-5]00 are what are used for scales. As far as I can tell, I don't see how $pf-chart-color-black-600 is ever used. And $pf-color-black-900 is just used for text I believe, or a solid black (it's the same as our $pf-global--Color--100 primary text color).

So if we're happy with how the charts present, I think we might just reference $pf-chart-color-black-[1-5]00 in sketch and .org (we're already doing that) and correct the hex values so they reflect what I have in the list above?

[lboehling]

That approach sounds good to me @mcoker. thank you!! I can open a website issue to correct those hex values, and fix them in the sketch file.