Merge branch 'master' into ph/feat/DCOS-54270-add-pageheader-component

d2iq · Jun 10, 2019 · 6daeffa · 6daeffa
2 parents 58c3c8a + 74afabe
commit 6daeffa
Show file tree

Hide file tree

Showing 71 changed files with 2,219 additions and 870 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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<AppChromeProps, {}> {
     const { sidebar, headerBar, mainContent } = this.props;
 
     return (
-      <div
-        className={cx(appChrome, textSize("m"), flex({ direction: "column" }))}
+      <ThemeProvider
+        theme={{
+          sidebarBackgroundColor: getCSSVarValue(themeBgPrimaryInverted)
+        }}
       >
-        <div className="headerBar">{headerBar}</div>
-        <div className={cx(flex(), appWrapper)}>
-          <div className={flexItem("shrink")}>{sidebar}</div>
-          <main className={cx(flexItem("grow"), flush("left"))}>
-            {mainContent}
-          </main>
+        <div
+          className={cx(
+            appChrome,
+            textSize("m"),
+            flex({ direction: "column" })
+          )}
+        >
+          <div className="headerBar">{headerBar}</div>
+          <div className={cx(flex(), appWrapper)}>
+            <div className={flexItem("shrink")}>{sidebar}</div>
+            <main className={cx(flexItem("grow"), flush("left"))}>
+              {mainContent}
+            </main>
+          </div>
         </div>
-      </div>
+      </ThemeProvider>
     );
   }
 }

diff --git 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<HTMLElement> | string;
@@ -15,22 +20,27 @@ class Header extends React.PureComponent<HeaderProps, {}> {
     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
@@ -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<SidebarProps, {}> {
     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<SidebarProps, {}> {
         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 (
-      <Sidebar className={divClassNames}>
-        <Nav className={navClassNames}>{children}</Nav>
-      </Sidebar>
+      <ThemeProvider theme={adjustedTheme}>
+        <Sidebar className={divClassNames}>
+          <Nav className={navClassNames}>{children}</Nav>
+        </Sidebar>
+      </ThemeProvider>
     );
   }
 }