feat(chrome): new light/dark mode colors #1849
Conversation
| <ThemeProvider | ||
| theme={parentTheme => ({ | ||
| ...parentTheme, | ||
| colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' } | ||
| })} | ||
| > |
There was a problem hiding this comment.
Coerce dark vs. light mode for Nav components rather than ferrying isLight & isDark props through to the various styled components.
|
|
||
| const borderStyle = ({ | ||
| const colorStyles = ({ theme, isOpen }: IStyledSheetProps & ThemeProps<DefaultTheme>) => { | ||
| const backgroundColor = getColor({ theme, variable: 'background.raised' }); |
There was a problem hiding this comment.
i would say Sheet's background would be default, as it is supplementary view alongside main content.
There was a problem hiding this comment.
@steue yeah, agreed. Do we have corresponding designs for the Sheet component? Also, are the subtle borders still correct with the default background?
There was a problem hiding this comment.
@jzempel yeah! @'d you on Figma! 💪🏻 good catch on the border treatment. like modals and pane, surrounding border is default, with the header/footer using subtle.
steue
left a comment
steue
left a comment
There was a problem hiding this comment.
made a comment/fix on sheet's bg treatment. aside from that everything looks great! ty!
|
|
||
| const isLight = hue ? isLightMemoized : false; | ||
| const isDark = hue ? !isLightMemoized : false; | ||
| const isLight = hue ? isLightMemoized : undefined; |
There was a problem hiding this comment.
To bette align with the IChromeContext type.
| const isLight = hue ? isLightMemoized : undefined; | |
| const isLight = hue ? isLightMemoized : false; |
There was a problem hiding this comment.
@ze-flo the isLight is either true (custom light nav hue), false (custom dark nav hue), or undefined (default chromeHue) – in which case the data-test-light attribute should not be applied.
|
|
||
| interface IChromeContext { | ||
| hue: string; | ||
| isLight?: boolean; |
There was a problem hiding this comment.
I think this key is always defined now.
| isLight?: boolean; | |
| isLight: boolean; |
| export const getFooterHeight = (theme: DefaultTheme) => `${theme.space.base * 20}px`; | ||
|
|
||
| export const getHeaderHeight = (theme: DefaultTheme) => `${theme.space.base * 13}px`; | ||
|
|
||
| export const getHeaderItemSize = (theme: DefaultTheme) => `${theme.space.base * 7.5}px`; | ||
|
|
||
| export const getNavItemHeight = (theme: DefaultTheme) => getHeaderHeight(theme); | ||
|
|
||
| export const getNavWidth = (theme: DefaultTheme) => `${theme.space.base * 15}px`; | ||
|
|
||
| export const getNavWidthExpanded = () => `200px`; | ||
|
|
||
| export const getProductColor = (product?: Product, fallback = 'inherit') => | ||
| product ? PALETTE.product[product] || fallback : fallback; |
| } | ||
|
|
||
| return null; | ||
| }; |
Description
Completed recolor work for
ChromeandSheetcomponents/subcomponents. 🎗️ Set the storybookNavcontrol tofalsein order to visually test<Header isStandalone>.Checklist
npm start)?bedrock)tested for WCAG 2.1 AA accessibility compliance