[SDK] Charting Colors that enabled color blind mode

[lwnoble]

Now that we have the dyslexic and motion sensitivity layers working, I would love to get at least one part of the color blind functionality working.

We can start by modifying the charting colors and the state colors based on the type of color blindness.

I have created the proper color blind charting colors for the 8 types of color blindness and those will be fixed values. So now we need to create the standard charting colors.

1.) For users who provide a primary color, secondary and tertiary colors the values are as follows:

For Light Mode:
If the users selects white or the half/quarter colors for the background the charting variables are as follows:

--chart-1: is the primary-400
--chart-2: is the primary-500
--chart-3: is the primary-700
--chart-4: is the primary-900
--chart-5: is secondary-500
--chart-6: is secondary-700
--chart-7: is secondary-900
--chart-8: is tertiary-500
--chart-9: is tertiary-700
--chart-10: is tertiary-900
--on-chart-1: is the on-primary-400
--on-chart-2: is the on-primary-500
--on-chart-3: is the on-primary-700
--on-chart-4: is the on-primary-900
--on-chart-5: is on-secondary-500
--on-chart-6: is on-secondary-700
--on-chart-7: is on-secondary-900
--on-chart-8: is on tertiary-500
--on-chart-9: is on-tertiary-700
--on-chart-10: is on-tertiary-900

If the user selects black or the dark shade of the primary color the chart variables are as follows:
--chart-1: is the primary-050
--chart-2: is the primary-100
--chart-3: is the primary-300
--chart-4: is the primary-500
--chart-5: is secondary-050
--chart-6: is secondary-200
--chart-7: is secondary-400
--chart-8: is tertiary-050
--chart-9: is tertiary-200
--chart-10: is tertiary-400
--on-chart-1: is the on-primary-050
--on-chart-2: is the on-primary-100
--on-chart-3: is the on-primary-300
--on-chart-4: is the on-primary-500
--on-chart-5: is on-secondary-050
--on-chart-6: is on-secondary-200
--on-chart-7: is on-secondary-400
--on-chart-8: is on-tertiary-050
--on-chart-9: is on-tertiary-200
--on-chart-10: is on-tertiary-400    

For Dark Mode:

--dm-chart-1: is the dm-primary-050
--dm-chart-2: is the dm-primary-100
--dm-chart-3: is the dm-primary-300
--dm-chart-4: is the dm-primary-500
--dm-chart-5: is dm-secondary-050
--dm-chart-6: is dm-secondary-200
--dm-chart-7: is dm-secondary-400
--dm-chart-8: is dm-tertiary-050
--dm-chart-9: is dm-tertiary-200
--dm-chart-10: is dm-tertiary-400
--dm-on-chart-1: is the dm-primary-050
--dm-on-chart-2: is the dm-primary-100
--dm-on-chart-3: is the dm-primary-300
--dm-on-chart-4: is the dm-primary-500
--dm-on-chart-5: is dm-secondary-050
--dm-on-chart-6: is dm-secondary-200
--dm-on-chart-7: is dm-secondary-400
--dm-on-chart-8: is dm-tertiary-050
--dm-on-chart-9: is dm-tertiary-200
--dm-on-chart-10: is dm-tertiary-400

2.) For users who provide a primary color and secondary colors only:

For Light Mode:
If the users selects white or the half/quarter colors for the background the charting variables are as follows:

--chart-1: is the primary-400
--chart-2: is the primary-500
--chart-3: is the primary-700
--chart-4: is the primary-900
--chart-5: is secondary-400
--chart-6: is secondary-500
--chart-7: is secondary-700
--chart-7: is secondary-900
--chart-9: is gray-500
--chart-10: is black
--on-chart-1: is the on-primary-400
--on-chart-2: is the on-primary-500
--on-chart-3: is the on-primary-700
--on-chart-4: is the on-primary-900
--on-chart-5: is on-secondary-400
--on-chart-6: is on-secondary-500
--on-chart-7: is on-secondary-700
--on-chart-7: is on-secondary-900
--on-chart-9: is on-gray-500
--on-chart-10: is on-black

If the user selects black or the dark shade of the primary color the chart variables are as follows:
--chart-1: is the primary-050
--chart-2: is the primary-100
--chart-3: is the primary-300
--chart-4: is the primary-500
--chart-5: is secondary-050
--chart-6: is secondary-100
--chart-7: is secondary-300
--chart-8: is secondary-500
--chart-9: is grey-300
--chart-10: is white
--on-chart-1: is the on-primary-050
--on-chart-2: is the on-primary-100
--on-chart-3: is the on-primary-300
--on-chart-4: is the on-primary-500
--on-chart-5: is on-secondary-050
--on-chart-6: is on-secondary-100
--on-chart-7: is on-secondary-300
--on-chart-8: is on-secondary-500
--on-chart-9: is on-grey-300
--on-chart-10: is on-white

For Dark Mode:

--dm-chart-1: is the dm-primary-050
--dm-chart-2: is the dm-primary-100
--dm-chart-3: is the dm-primary-300
--dm-chart-4: is the dm-primary-500
--dm-chart-5: is dm-secondary-050
--dm-chart-6: is dm-secondary-100
--dm-chart-7: is dm-secondary-300
--dm-chart-8: is dm-secondary-500
--dm-chart-9: is dm-grey-300
--dm-chart-10: is dm-white
--dm-on-chart-1: is the dm-on-primary-050
--dm-on-chart-2: is the dm-on-primary-100
--dm-on-chart-3: is the dm-on-primary-300
--dm-on-chart-4: is the dm-on-primary-500
--dm-on-chart-5: is dm-on-secondary-050
--dm-on-chart-6: is dm-on-secondary-100
--dm-on-chart-7: is dm-on-secondary-300
--dm-on-chart-8: is dm-on-secondary-500
--dm-on-chart-9: is dm-on-grey-300
--dm-on-chart-10: is dm-on-white

3.) For users who provide ONLY a primary color:

For Light Mode:
If the users selects white or the half/quarter colors for the background the charting variables are as follows:

--chart-1: is the primary-400
--chart-2: is the primary-500
--chart-3: is the primary-700
--chart-4: is the primary-900
--on-chart-1: is the on-primary-400
--on-chart-2: is the on-primary-500
--on-chart-3: is the on-primary-700
--on-chart-4: is the on-primary-900

Next, we need to create additional shades for colors that complement the primary color:

Here is the following function that I use:

function splitComplement(testColor) {
      var rgbArray = hextoRGBArray(testColor);
      var h = chroma.rgb(rgbArray).get('hsv.h');
      var s = chroma.rgb(rgbArray).get('hsv.s');
      var v = chroma.rgb(rgbArray).get('hsv.v');
      h += 180;
      var h0 = h + 30;
      var h1 = h - 30;
      var color1 = 'rgb(' + chroma.hsv(h0,s,v).rgb() + ')';
      var color2 = 'rgb(' + chroma.hsv(h1,s,v).rgb() + ')';
    }

From there I create the 10 shared of light mode and dark mode for color1 and color2.

    --chart-5: is color1-500
    --chart-6: is color1-700
    --chart-7: is color1-900
    --chart-8: is color2-500
    --chart-9: is color2-700
    --chart-10: color2-900
    --on-chart-5: is on-color1-500
    --on-chart-6: is on-color1-700
    --on-chart-7: is on-color1-900
    --on-chart-8: is on-color2-500
    --on-chart-9: is on-color2-700
    --on-chart-10: on-color2-900
    
    If the user selects black or the dark shade of the primary color the chart variables are as follows:
    --chart-1: is the primary-050
    --chart-2: is the primary-100
    --chart-3: is the primary-300
    --chart-4: is the primary-500
    --chart-5: is color1-050
    --chart-6: is color1-100
    --chart-7: is color1-300
    --chart-8: is color2-050
    --chart-9: is color2-100
    --chart-10: is color2-300
    --on-chart-1: is the on-primary-050
    --on-chart-2: is the on-primary-100
    --on-chart-3: is the on-primary-300
    --on-chart-4: is the on-primary-500
    --on-chart-5: is on-color1-050
    --on-chart-6: is on-color1-100
    --on-chart-7: is on-color1-300
    --on-chart-8: is on-color2-050
    --on-chart-9: is on-color2-100
    --on-chart-10: is on-color2-300
    
    For Dark Mode:
    --dm-chart-1: is the dm-primary-050
    --dm-chart-2: is the dm-primary-100
    --dm-chart-3: is the dm-primary-300
    --dm-chart-4: is the dm-primary-500
    --dm-chart-5: is dm-color1-050
    --dm-chart-6: is dm-color1-100
    --dm-chart-7: is dm-color1-300
    --dm-chart-8: is dm-color2-050
    --dm-chart-9: is dm-color2-100
    --dm-chart-10: is dm-color2-300
    --dm-on-chart-1: is the dm-on-primary-050
    --dm-on-chart-2: is the dm-on-primary-100
    --dm-on-chart-3: is the dm-on-primary-300
    --dm-on-chart-4: is the dm-on-primary-500
    --dm-on-chart-5: is dm-on-color1-050
    --dm-on-chart-6: is dm-on-color1-100
    --dm-on-chart-7: is dm-on-color1-300
    --dm-on-chart-8: is dm-on-color2-050
    --dm-on-chart-9: is dm-on-color2-100
    --dm-on-chart-10: is dm-on-color2-300

• link to problem content

Proposed Solution

[aaronreed708]

@lwnoble to look to implement color blind modes with assistance from other maintainers as required

[smithbk]

@lwnoble Lise, this has been checked into the dev branch. I imagine there are going to be some issues with the generation of color1 and color2 when only the primary is set. If so, I'll need some help in getting those right. Please verify.

[aaronreed708]

Talked with @lwnoble today, SDK portion done. We need UI to show the changes to the end user. @lwnoble and @aaronreed708 to meet.

[aaronreed708]

Talked with @lwnoble, she and @smithbk need to meet to discuss tweaking the values going into color blindness/charting colors. They will meet on Friday to discuss.

The UI piece should be done under a different issue. @aaronreed708 to open. Involves:

• - Lise needs to create overlays for 8 types of color blindness
• - SDK will create 10 color combinations for charting by default
• - we need to create charting components that will utilize the 10 color combinations that the SDK will produce to demonstrate their functionality
• - we also need to allow these charting components to be influenced by the color blindness overlay dropdown value from the UI and use the appropriate colors for each possible color blindness level.

[aaronreed708]

I created #758 and #759 for the UI pieces mentioned above.

[evangk6]

Update from today: When Keith is says it is ok, Lise says she can merge their code together.

[aaronreed708]

10 color combinations complete, Keith and Lise to meet on next steps (SDK components)

[aaronreed708]

@lwnoble mentioned in today's call that the colors are done, waiting on the molecule implementation on the SDK side.

[evangk6]

Lise thinks this might be done - @smithbk could you let us know if so?

[aaronreed708]

@lwnoble said to close. Closing.