diff --git a/package-lock.json b/package-lock.json index c4eac5ab7..a61b495b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -987,7 +987,7 @@ "dependencies": { "chalk": { "version": "2.3.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz", "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==", "dev": true, "requires": { @@ -7081,7 +7081,7 @@ }, "abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" }, "accepts": { @@ -7558,7 +7558,7 @@ }, "util": { "version": "0.10.3", - "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", "dev": true, "requires": { @@ -10108,7 +10108,7 @@ "dependencies": { "jest-worker": { "version": "22.4.3", - "resolved": "http://registry.npmjs.org/jest-worker/-/jest-worker-22.4.3.tgz", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-22.4.3.tgz", "integrity": "sha512-B1ucW4fI8qVAuZmicFxI1R3kr2fNeYJyvIQ1rKcuLYnenFV5K5aMbxFj6J0i00Ju83S8jP2d7Dz14+AvbIHRYQ==", "dev": true, "requires": { @@ -11328,6 +11328,11 @@ "estraverse": "^4.1.1" } }, + "esm": { + "version": "3.2.25", + "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", + "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==" + }, "esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -11798,7 +11803,7 @@ "dependencies": { "core-js": { "version": "1.2.7", - "resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", "dev": true } @@ -13414,7 +13419,7 @@ }, "http-proxy-agent": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", + "resolved": false, "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", "dev": true, "requires": { @@ -13458,7 +13463,7 @@ }, "https-proxy-agent": { "version": "2.2.1", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz", + "resolved": false, "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==", "dev": true, "requires": { @@ -15116,7 +15121,7 @@ }, "jest-diff": { "version": "22.4.3", - "resolved": "http://registry.npmjs.org/jest-diff/-/jest-diff-22.4.3.tgz", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-22.4.3.tgz", "integrity": "sha512-/QqGvCDP5oZOF6PebDuLwrB2BMD8ffJv6TAGAdEVuDx1+uEgrHpSFrfrOiMRx2eJ1hgNjlQrOQEHetVwij90KA==", "dev": true, "requires": { @@ -15128,7 +15133,7 @@ }, "pretty-format": { "version": "22.4.3", - "resolved": "http://registry.npmjs.org/pretty-format/-/pretty-format-22.4.3.tgz", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-22.4.3.tgz", "integrity": "sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==", "dev": true, "requires": { @@ -16386,7 +16391,7 @@ }, "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minimist-options": { @@ -19211,7 +19216,7 @@ }, "p-is-promise": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=", "dev": true }, @@ -20294,7 +20299,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -21333,6 +21338,14 @@ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", "dev": true }, + "relative-luminance": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/relative-luminance/-/relative-luminance-2.0.1.tgz", + "integrity": "sha512-wFuITNthJilFPwkK7gNJcULxXBcfFZvZORsvdvxeOdO44wCeZnuQkf3nFFzOR/dpJNxYsdRZJLsepWbyKhnMww==", + "requires": { + "esm": "^3.0.84" + } + }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", @@ -21673,7 +21686,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true } @@ -23451,7 +23464,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -24666,7 +24679,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true } diff --git a/package.json b/package.json index 5964f935d..d288476cc 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,8 @@ "react-emotion": "9.2.12", "react-toggled": "1.2.7", "react-transition-group": "2.5.0", - "react-virtualized": "9.20.1" + "react-virtualized": "9.20.1", + "relative-luminance": "2.0.1" }, "peerDependencies": { "react": ">=16.2.0 <16.9.0 || 16.7.0-alpha.0", diff --git a/packages/appChrome/components/AppChrome.tsx b/packages/appChrome/components/AppChrome.tsx index 3d98161e1..f80a6667d 100644 --- a/packages/appChrome/components/AppChrome.tsx +++ b/packages/appChrome/components/AppChrome.tsx @@ -7,6 +7,9 @@ import { textSize, flush } from "../../shared/styles/styleUtils"; +import { ThemeProvider } from "emotion-theming"; +import getCSSVarValue from "../../utilities/components/getCSSVarValue"; +import { themeBgPrimaryInverted } from "../../design-tokens/build/js/designTokens"; export interface AppChromeProps { sidebar: React.ReactNode; @@ -19,17 +22,27 @@ class AppChrome extends React.PureComponent { const { sidebar, headerBar, mainContent } = this.props; return ( -
-
{headerBar}
-
-
{sidebar}
-
- {mainContent} -
+
+
{headerBar}
+
+
{sidebar}
+
+ {mainContent} +
+
-
+ ); } } diff --git a/packages/appChrome/components/HeaderBar.tsx b/packages/appChrome/components/HeaderBar.tsx index f62792874..339cb0d86 100644 --- a/packages/appChrome/components/HeaderBar.tsx +++ b/packages/appChrome/components/HeaderBar.tsx @@ -1,10 +1,15 @@ import * as React from "react"; -import { cx } from "emotion"; +import { cx, css } from "emotion"; import styled from "react-emotion"; -import { darkMode, flex } from "../../shared/styles/styleUtils"; +import { flex, tintContent } from "../../shared/styles/styleUtils"; import { spaceSizes } from "../../../packages/shared/styles/styleUtils/modifiers/modifierUtils"; -import { purpleDarken4 } from "../../design-tokens/build/js/designTokens"; -import { isHexDark } from "../../shared/styles/color"; +import { + themeBgAppHeader, + themeTextColorPrimary, + themeTextColorPrimaryInverted +} from "../../design-tokens/build/js/designTokens"; +import { pickReadableTextColor } from "../../shared/styles/color"; +import getCSSVarValue from "../../utilities/components/getCSSVarValue"; export interface HeaderProps { children: React.ReactElement | string; @@ -15,22 +20,27 @@ class Header extends React.PureComponent { const { children } = this.props; /* tslint:disable:no-string-literal */ const HeaderBar = styled("div")` - background-color: ${props => - props.theme.headerBackgroundColor || purpleDarken4}; - ${props => - !props.theme.headerBackgroundColor || - (props.theme.headerBackgroundColor && - isHexDark(props.theme.headerBackgroundColor)) - ? darkMode - : null}; - padding-left: ${props => - spaceSizes[props.theme.headerPaddingHor] || spaceSizes["l"]}; - padding-right: ${props => - spaceSizes[props.theme.headerPaddingHor] || spaceSizes["l"]}; - padding-bottom: ${props => - spaceSizes[props.theme.headerPaddingVert] || spaceSizes["xs"]}; - padding-top: ${props => - spaceSizes[props.theme.headerPaddingVert] || spaceSizes["xs"]}; + ${props => { + const bgColor = + props.theme.headerBackgroundColor || getCSSVarValue(themeBgAppHeader); + const textColor = pickReadableTextColor( + bgColor, + getCSSVarValue(themeTextColorPrimary), + getCSSVarValue(themeTextColorPrimaryInverted) + ); + return css` + background-color: ${bgColor}; + padding-left: ${spaceSizes[props.theme.headerPaddingHor] || + spaceSizes["l"]}; + padding-right: ${spaceSizes[props.theme.headerPaddingHor] || + spaceSizes["l"]}; + padding-bottom: ${spaceSizes[props.theme.headerPaddingVert] || + spaceSizes["xs"]}; + padding-top: ${spaceSizes[props.theme.headerPaddingVert] || + spaceSizes["xs"]}; + ${tintContent(textColor)}; + `; + }}; `; /* tslint:enable:no-string-literal */ diff --git a/packages/appChrome/components/Sidebar.tsx b/packages/appChrome/components/Sidebar.tsx index ad3536df3..b10607f15 100644 --- a/packages/appChrome/components/Sidebar.tsx +++ b/packages/appChrome/components/Sidebar.tsx @@ -1,11 +1,17 @@ import * as React from "react"; import { cx, css } from "emotion"; import styled from "react-emotion"; -import { darkMode } from "../../shared/styles/styleUtils"; import { sidebar, sidebarAnimator } from "../style"; -import { greyDark } from "../../design-tokens/build/js/designTokens"; import { atMediaUp } from "../../shared/styles/breakpoints"; -import { isHexDark } from "../../shared/styles/color"; +import { + themeTextColorPrimary, + themeTextColorPrimaryInverted, + themeBgPrimaryInverted +} from "../../design-tokens/build/js/designTokens"; +import getCSSVarValue from "../../utilities/components/getCSSVarValue"; +import { pickReadableTextColor } from "../../shared/styles/color"; +import { tintContent } from "../../shared/styles/styleUtils"; +import { ThemeProvider } from "emotion-theming"; export interface SidebarProps { isOpen: boolean; @@ -52,8 +58,20 @@ class Sidebar extends React.PureComponent { const divClassNames = cx(sidebarAnimator); const Sidebar = styled("div")` - background-color: ${props => - props.theme.sidebarBackgroundColor || greyDark}; + ${props => { + const bgColor = + props.theme.sidebarBackgroundColor || + getCSSVarValue(themeBgPrimaryInverted); + const textColor = pickReadableTextColor( + bgColor, + getCSSVarValue(themeTextColorPrimary), + getCSSVarValue(themeTextColorPrimaryInverted) + ); + return css` + background-color: ${bgColor}; + ${tintContent(textColor)}; + `; + }}; ${props => props.theme.sidebarWidth ? "width: " + props.theme.sidebarWidth @@ -65,18 +83,21 @@ class Sidebar extends React.PureComponent { props.theme.sidebarWidth ? "width: " + props.theme.sidebarWidth : sidebarWidth}; - ${props => - !props.theme.sidebarBackgroundColor || - (props.theme.sidebarBackgroundColor && - isHexDark(props.theme.sidebarBackgroundColor)) - ? darkMode - : null}; `; + const adjustedTheme = ancestorTheme => { + return { + sidebarBackgroundColor: getCSSVarValue(themeBgPrimaryInverted), + ...ancestorTheme + }; + }; + return ( - - - + + + + + ); } } diff --git a/packages/appChrome/components/SidebarItem.tsx b/packages/appChrome/components/SidebarItem.tsx index f3b0ba564..063d9a059 100644 --- a/packages/appChrome/components/SidebarItem.tsx +++ b/packages/appChrome/components/SidebarItem.tsx @@ -1,9 +1,8 @@ import * as React from "react"; -import { cx } from "emotion"; +import { css } from "emotion"; import styled from "react-emotion"; import { sidebarNavItem } from "../style"; import Clickable from "../../clickable/components/clickable"; -import { tintContentPrimary } from "../../shared/styles/styleUtils"; import { spaceSizes } from "../../../packages/shared/styles/styleUtils/modifiers/modifierUtils"; export interface SidebarItemProps { @@ -12,7 +11,7 @@ export interface SidebarItemProps { onClick: (event?: React.SyntheticEvent) => void; } -class SidebarItem extends React.PureComponent { +class SidebarItemComponent extends React.PureComponent { public render() { const { children, isActive, onClick } = this.props; /* tslint:disable:no-string-literal */ @@ -25,11 +24,16 @@ class SidebarItem extends React.PureComponent { spaceSizes[props.theme.sidebarItemPaddingVert] || spaceSizes["none"]}; padding-top: ${props => spaceSizes[props.theme.sidebarItemPaddingVert] || spaceSizes["none"]}; + ${props => { + return css` + ${sidebarNavItem( + Boolean(isActive), + props.theme.sidebarBackgroundColor + )}; + `; + }}; `; /* tslint:enable:no-string-literal */ - const classNames = cx(sidebarNavItem(isActive), { - [tintContentPrimary]: isActive - }); return ( { role="link" disableFocusOutline={true} > - {children} + {children} ); } } -export default SidebarItem; +export default SidebarItemComponent; diff --git a/packages/appChrome/components/SidebarSubMenu.tsx b/packages/appChrome/components/SidebarSubMenu.tsx index 64d1ba582..3e1bd8c06 100644 --- a/packages/appChrome/components/SidebarSubMenu.tsx +++ b/packages/appChrome/components/SidebarSubMenu.tsx @@ -4,8 +4,18 @@ import { Expandable } from "../../expandable"; import { SidebarItemLabelProps } from "./SidebarItemLabel"; import { SidebarSubMenuItemProps } from "./SidebarSubMenuItem"; import { sidebarNavItem, appChromeInsetContent, spaceMenuIcon } from "../style"; -import { listReset } from "../../shared/styles/styleUtils"; -import { iconSizeS } from "../../design-tokens/build/js/designTokens"; +import { listReset, tintContent } from "../../shared/styles/styleUtils"; +import { + iconSizeS, + themeTextColorPrimary, + themeTextColorPrimaryInverted, + themeBgPrimaryInverted +} from "../../design-tokens/build/js/designTokens"; +import { withTheme } from "emotion-theming"; +import { pickReadableTextColor } from "../../shared/styles/color"; +import { AppChromeTheme } from "../types/appChromeTheme"; +import getCSSVarValue from "../../utilities/components/getCSSVarValue"; + export interface SidebarSubMenuProps { children: Array>; isOpen?: boolean; @@ -14,9 +24,13 @@ export interface SidebarSubMenuProps { label: React.ReactElement; menuHasIcon?: boolean; iconWidth?: string; + theme?: AppChromeTheme; } -class SidebarSubMenu extends React.PureComponent { +export class SidebarSubMenuComponent extends React.PureComponent< + SidebarSubMenuProps, + {} +> { constructor(props) { super(props); @@ -44,12 +58,26 @@ class SidebarSubMenu extends React.PureComponent { } public render() { - const { children, label, isOpen } = this.props; + const { children, label, isOpen, theme } = this.props; + const sidebarBgColor = + theme && theme.sidebarBackgroundColor + ? theme.sidebarBackgroundColor + : getCSSVarValue(themeBgPrimaryInverted); return (
  • {label}
    • } > @@ -60,4 +88,4 @@ class SidebarSubMenu extends React.PureComponent { } } -export default SidebarSubMenu; +export default withTheme(SidebarSubMenuComponent); diff --git a/packages/appChrome/components/SidebarSubMenuItem.tsx b/packages/appChrome/components/SidebarSubMenuItem.tsx index 60619bcd6..f31e04b2d 100644 --- a/packages/appChrome/components/SidebarSubMenuItem.tsx +++ b/packages/appChrome/components/SidebarSubMenuItem.tsx @@ -6,18 +6,25 @@ import { sidebarNavItem } from "../style"; import { cx } from "emotion"; -import { - textSize, - flex, - tintContentSecondary, - tintContentPrimary -} from "../../shared/styles/styleUtils"; +import { textSize, flex, tintContent } from "../../shared/styles/styleUtils"; import Clickable from "../../clickable/components/clickable"; +import { withTheme } from "emotion-theming"; +import getCSSVarValue from "../../utilities/components/getCSSVarValue"; +import { + themeTextColorSecondary, + themeTextColorPrimary, + themeTextColorPrimaryInverted, + themeTextColorSecondaryInverted, + themeBgPrimaryInverted +} from "../../design-tokens/build/js/designTokens"; +import { pickReadableTextColor } from "../../shared/styles/color"; +import { AppChromeTheme } from "../types/appChromeTheme"; export interface SidebarSubMenuItemProps { children?: React.ReactElement | string; isActive?: boolean; onClick: (event?: React.SyntheticEvent) => void; + theme?: AppChromeTheme; } class SidebarSubMenuItem extends React.PureComponent< @@ -25,16 +32,32 @@ class SidebarSubMenuItem extends React.PureComponent< {} > { public render() { - const { children, isActive, onClick } = this.props; + const { children, isActive, onClick, theme } = this.props; + const sidebarBgColor = + theme && theme.sidebarBackgroundColor + ? theme.sidebarBackgroundColor + : getCSSVarValue(themeBgPrimaryInverted); const classNames = cx( subMenuItem, appChromeInsetContent, - tintContentSecondary, - sidebarNavItem(isActive), + tintContent( + pickReadableTextColor( + sidebarBgColor, + getCSSVarValue(themeTextColorSecondary), + getCSSVarValue(themeTextColorSecondaryInverted) + ) + ), + sidebarNavItem(Boolean(isActive), sidebarBgColor), textSize("s"), flex({ align: "center" }), { - [tintContentPrimary]: isActive + [tintContent( + pickReadableTextColor( + sidebarBgColor, + getCSSVarValue(themeTextColorPrimary), + getCSSVarValue(themeTextColorPrimaryInverted) + ) + )]: isActive } ); @@ -48,4 +71,4 @@ class SidebarSubMenuItem extends React.PureComponent< } } -export default SidebarSubMenuItem; +export default withTheme(SidebarSubMenuItem); diff --git a/packages/appChrome/style.ts b/packages/appChrome/style.ts index 4c00df341..025b82ca6 100644 --- a/packages/appChrome/style.ts +++ b/packages/appChrome/style.ts @@ -1,13 +1,16 @@ import { css } from "emotion"; import { atMediaUp } from "../shared/styles/breakpoints"; import { - greyDarkLighten2, - purple, spaceM, spaceL, - spaceXl + spaceXl, + themeBgSelected, + themeBgHover, + themeBgHoverInverted } from "../design-tokens/build/js/designTokens"; import { padding } from "../shared/styles/styleUtils"; +import { pickHoverBg } from "../shared/styles/color"; +import getCSSVarValue from "../utilities/components/getCSSVarValue"; const iconSize = "24px"; const layoutBreakpoint = "large"; @@ -56,16 +59,24 @@ export const sidebarSectionList = css` margin: 0; `; -export const sidebarNavItem = (isActive?: boolean) => css` - background-color: ${isActive ? purple : "transparent"}; - cursor: pointer; - text-transform: capitalize; - - &:hover, - &:focus { - background-color: ${isActive ? purple : greyDarkLighten2}; - } -`; +export const sidebarNavItem = (isActive: boolean, sidebarBgColor: string) => { + return css` + background-color: ${isActive ? themeBgSelected : "transparent"}; + cursor: pointer; + text-transform: capitalize; + + &:hover, + &:focus { + background-color: ${isActive + ? themeBgSelected + : pickHoverBg( + sidebarBgColor, + getCSSVarValue(themeBgHover), + getCSSVarValue(themeBgHoverInverted) + )}; + } + `; +}; export const sidebarNavItemIconWrap = css` line-height: 0; diff --git a/packages/appChrome/tests/Sidebar.test.tsx b/packages/appChrome/tests/Sidebar.test.tsx index 474b4ccf8..3b24201dd 100644 --- a/packages/appChrome/tests/Sidebar.test.tsx +++ b/packages/appChrome/tests/Sidebar.test.tsx @@ -9,9 +9,9 @@ import { SidebarItem, SidebarItemLabel, SidebarSection, - SidebarSubMenu, SidebarSubMenuItem } from "../"; +import { SidebarSubMenuComponent } from "../components/SidebarSubMenu"; import { ProductIcons } from "../../icons/dist/product-icons-enum"; expect.addSnapshotSerializer(createSerializer(emotion)); @@ -91,7 +91,7 @@ describe("Sidebar", () => { ]; // tslint:enable const component = shallow( - Item label @@ -99,13 +99,13 @@ describe("Sidebar", () => { } > {subMenuItems} - + ); it("renders", () => { expect(toJson(component)).toMatchSnapshot(); }); it("makes a list of submenu items", () => { - const instance = component.instance() as SidebarSubMenu; + const instance = component.instance() as SidebarSubMenuComponent; const subItemResult = instance.getSubItemList(subMenuItems); expect(subItemResult.props.children.length).toBe(2); }); diff --git a/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap b/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap index 61badb25c..10d7cae6b 100644 --- a/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap +++ b/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap @@ -69,33 +69,41 @@ exports[`AppChrome renders with the app chrome regions 1`] = ` margin-left: 0; } -
    -
    - HeaderBar content goes here -
    -
    -
    - Sidebar content + HeaderBar content goes here
    -
    -
    - Main app content goes here +
    +
    + Sidebar content +
    -
    +
    +
    + Main app content goes here +
    +
    +
    - + `; diff --git a/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap b/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap index 5b14d65f2..011dcd478 100644 --- a/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap +++ b/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap @@ -1,26 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Sidebar SidebarItem renders 1`] = ` -.emotion-0 { - background-color: transparent; - cursor: pointer; - text-transform: capitalize; -} - -.emotion-0:hover, -.emotion-0:focus { - background-color: #32363E; -} - - + Item label @@ -156,7 +143,7 @@ exports[`Sidebar SidebarSubMenu renders 1`] = ` } - labelClassName="css-wjyl8f" + labelClassName="css-1beii4s" >
      - Item label - +
    • - Item label - +
    @@ -272,13 +259,17 @@ exports[`Sidebar renders 1`] = ` } } - - - Sidebar content - - + + Sidebar content + + + `; diff --git a/packages/appChrome/types/appChromeTheme.ts b/packages/appChrome/types/appChromeTheme.ts new file mode 100644 index 000000000..113b0cafd --- /dev/null +++ b/packages/appChrome/types/appChromeTheme.ts @@ -0,0 +1,23 @@ +import { Theme } from "../../themes/types/appTheme"; + +type BgColor = React.CSSProperties["backgroundColor"]; +type PaddingHoriz = + | React.CSSProperties["paddingLeft"] + | React.CSSProperties["paddingRight"]; +type PaddingVert = + | React.CSSProperties["paddingBottom"] + | React.CSSProperties["paddingTop"]; +type ElWidth = React.CSSProperties["width"]; + +export interface AppChromeTheme extends Theme { + headerBackgroundColor?: BgColor; + headerPaddingHor?: PaddingHoriz; + headerPaddingVert?: PaddingVert; + iconWidth?: ElWidth; + sidebarBackgroundColor?: BgColor; + sidebarHeaderPaddingHor?: PaddingHoriz; + sidebarHeaderPaddingVert?: PaddingVert; + sidebarWidth?: ElWidth; + sidebarItemPaddingHor?: PaddingHoriz; + sidebarItemPaddingVert?: PaddingVert; +} diff --git a/packages/badge/style.ts b/packages/badge/style.ts index 8d7f50e46..c826d1226 100644 --- a/packages/badge/style.ts +++ b/packages/badge/style.ts @@ -1,56 +1,54 @@ import { css } from "emotion"; import { borderRadiusSmall, - green, - greyDark, greyLight, - purple, - red, - white, - yellow + themeSuccess, + themeWarning, + themeError, + themeBrandPrimary, + themeBgPrimary, + themeTextColorPrimary, + themeTextColorPrimaryInverted, + themeBorder } from "../design-tokens/build/js/designTokens"; +import { pickReadableTextColor } from "../shared/styles/color"; +import getCSSVarValue from "../utilities/components/getCSSVarValue"; -const badgeAppearance = { - default: css` - background-color: ${greyLight}; - border-color: ${greyLight}; - color: ${greyDark}; - `, - success: css` - background-color: ${green}; - border-color: ${green}; - color: ${white}; - `, - primary: css` - background-color: ${purple}; - border-color: ${purple}; - color: ${white}; - `, - warning: css` - background-color: ${yellow}; - border-color: ${yellow}; - color: ${white}; - `, - danger: css` - background-color: ${red}; - border-color: ${red}; - color: ${white}; - `, - outline: css` - background-color: ${white}; - border-color: ${greyLight}; - color: ${greyDark}; - `, - "outline-primary": css` - background-color: ${white}; - border-color: ${purple}; - color: ${greyDark}; - ` +const badgeAppearanceStyle = (color, isOutlined?: boolean) => { + const bgColor = isOutlined ? getCSSVarValue(themeBgPrimary) : color; + return css` + background-color: ${bgColor}; + border-color: ${color}; + color: ${pickReadableTextColor( + bgColor, + getCSSVarValue(themeTextColorPrimary), + getCSSVarValue(themeTextColorPrimaryInverted) + )}; + `; +}; + +const badgeAppearance = appearance => { + switch (appearance) { + case "default": + return badgeAppearanceStyle(greyLight); + case "success": + return badgeAppearanceStyle(getCSSVarValue(themeSuccess)); + case "primary": + return badgeAppearanceStyle(getCSSVarValue(themeBrandPrimary)); + case "warning": + return badgeAppearanceStyle(getCSSVarValue(themeWarning)); + case "danger": + return badgeAppearanceStyle(getCSSVarValue(themeError)); + case "outline": + return badgeAppearanceStyle(getCSSVarValue(themeBorder), true); + case "outline-primary": + return badgeAppearanceStyle(getCSSVarValue(themeBrandPrimary), true); + } }; export const badge = appearance => { return css` - ${badgeAppearance[appearance]}; + ${badgeAppearance(appearance)}; box-sizing: border-box; border-width: 1px; border-style: solid; diff --git a/packages/badge/tests/__snapshots__/badge.test.tsx.snap b/packages/badge/tests/__snapshots__/badge.test.tsx.snap index 75c851f31..0fea3cd45 100644 --- a/packages/badge/tests/__snapshots__/badge.test.tsx.snap +++ b/packages/badge/tests/__snapshots__/badge.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Badge accept jsx as children 1`] = ` exports[`Badge danger 1`] = ` danger @@ -28,7 +28,7 @@ exports[`Badge default 1`] = ` exports[`Badge outline 1`] = ` outline @@ -36,7 +36,7 @@ exports[`Badge outline 1`] = ` exports[`Badge primary 1`] = ` primary @@ -44,7 +44,7 @@ exports[`Badge primary 1`] = ` exports[`Badge success 1`] = ` success @@ -52,7 +52,7 @@ exports[`Badge success 1`] = ` exports[`Badge warning 1`] = ` warning diff --git a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap index aeb0790c8..b5e62862b 100644 --- a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap +++ b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap @@ -16,7 +16,7 @@ exports[`BadgeButton accept jsx as children 1`] = ` exports[`BadgeButton danger 1`] = ` {