fix(theming): return hex from generated getColor values
#1999
Conversation
| <LG style={{ marginTop: 20 }}>Generated hue</LG> | ||
| <MD style={{ marginBottom: 12 }}> | ||
| <Span hue="foreground.subtle"> | ||
| Not used when <Code>hue[shade]</Code> is defined by the theme{' '} |
There was a problem hiding this comment.
Here's the output from passing neutralHue as a hue arg.
Even though it's a recognized hue/shade combo, the generated color scale deviates from our palette.
const grey {
100: '#f8f9f9',
200: '#e8eaec',
300: '#d8dcde',
400: '#b0b8be',
500: '#919ca5',
600: '#848f99',
700: '#5c6970',
800: '#39434b',
900: '#293239',
1000: '#1c2227',
1100: '#151a1e',
1200: '#0a0d0e'
}
One who isn't familiar with the inner workings of getColor could have expected a match.
Instead, should we only show the generated palette when all 3 conditions below are true?
variableisundefinedhuedoesn't match any of the keys (excludingvariables) fromtheme.colorshuedoesn't match any of the keys (excludingproduct) fromtheme.palette
There was a problem hiding this comment.
I started with this approach, and then got lazy with the Story 😜. I'll go back and refine.
| <StyledDiv $background={background}>{tag}</StyledDiv> | ||
| {!!generatedHue && ( | ||
| <> | ||
| <LG style={{ margin: '20px 0 12px' }}>Generated hue</LG> |
There was a problem hiding this comment.
[nit] Should we align our vocabulary with the Color Principles docs?
| <LG style={{ margin: '20px 0 12px' }}>Generated hue</LG> | |
| <LG style={{ margin: '20px 0 12px' }}>Generated palette</LG> |
Alternatively:
| <LG style={{ margin: '20px 0 12px' }}>Generated hue</LG> | |
| <LG style={{ margin: '20px 0 12px' }}>Generated color scale</LG> |
There was a problem hiding this comment.
I'd prefer to align with the technical theme object and palette documentation. Btw, the term is also used in color principles.
Description
While this PR focuses on a very minor
getColorfix, the main enhancement is the updated Storybook that shows the potential generated palettehuefor any non-themed color value resolved bygetColor.Checklist
design updates will be Garden Designer approved (add the designer as a reviewer)npm start)renders as expected with Bedrock CSS (?bedrock)includes new unit tests. Maintain existing coverage (always >= 96%)tested for WCAG 2.1 AA accessibility compliance