jeanservaas
commented
4 years ago @jnm2377
After talking with the Cognos team about some palette inconsistencies, Sadek and I added two more monochrome palettes to the sequential palettes page.
We also noticed that it was inconsistent not to label these palettes as "options" like the color pairings component does... so that is added here as well.
I hope this isn't a big curve ball... sorry! We can talk through this too sometime this week.
ps, i have NO IDEA why all these images are broken... will look into that shizz tomorrow.
mjabbink
There are several unique components in this page that will either require a modification of the Gatsby Tabs component or a net new component. I've highlighted and spec'd each of the new components and also shown the page in context.
New Color Palettes page in context
New components are highlighted
[Data viz] Color palettes page enhancement
1. Categorial palette component and 4. Alert palette component are the same
This is basically just the Gatsby tab component with a few exceptions:
48px tall color swatches have 1px stroke (top, bottom and sides); for the light theme, the stroke will be #ffffff for the dark theme the stroke color will be #171717
Rather than having the content dictate the width of the tabs, Mike wants the width of both tabs to span four columns and match the width of the first column of swatches.
Categorical palette and alert palette component for light and dark themes at 1312
2. Color combinations commponent specs
This is similar to the Gatsby tab component, but combines the tabs with a dropdown... a combination that we haven't done yet in the Gatsby theme. @vince thinks it will be easier to build it from scratch than hack the Gatsby tab components.
The dropdown will have five options (1-color group, 2-color-group, 3-color-group, 4-color group, 5-color group) and will default to "1-color group"
These group values will all vary depending on whether you're designing for a dark or a light theme
As with the above component, the tabs will span four columns and the dropdown will span four columns
Color combo component specs at 1312
3. Sequential and diverging palette component specs
For BOTH the sequential and diverging palettes there is NO difference between light and dark themes. So there is no need to have tabs that toggle between light and dark. So there will be no white or dark stroking around the steps... only ONE 1px #ffffff stroke down the middle
This component should function exactly like the color palette component on the IDL site https://www.ibm.com/design/language/color#specifications — with two small exceptions
There are only two columns, not three
The two tabs will span 4 columns
The Continuous tab shows a gradient... not stepped values; Eliad may have some insight on how to do this programatically
Breakpoints
1056
672
Mobile