Implementing themes for Page and related files (#235)

* Getting most of clinical-lowlight-theme implemented. Still need to do ActionMenu low-light.

* Cleaning up last few lowlight values

* Adding colors for orion-fusion-theme

* Reverting orion-fusion-theme implementation

* Adding sanity check wdio tests

* Updating dev-site screenshots

packages/terra-application-docs/src/terra-dev-site/test/terra-application/shared/TestPage.jsx

@@ -79,7 +79,13 @@ const TestPage = ({
     >
       <div className={cx('layout')}>
         <p>{testLabel}</p>
-        <button type="button" onClick={() => { setShowChildPage(true); }}>Show Child</button>
+        <button
+          type="button"
+          onClick={() => { setShowChildPage(true); }}
+          data-testid="test-page-show-child-page"
+        >
+          Show Child Page
+        </button>
         <p>
           Label:
           {' '}

packages/terra-application/CHANGELOG.md

@@ -14,6 +14,7 @@
   * Adding PageContainer and integrating throughout
   * Adding WorkspaceLayout
   * Adding LayerManager
+  * Adding Page themes
 
 ## Unreleased
 

packages/terra-application/src/action-menu/ActionMenuItem.module.scss

@@ -53,9 +53,10 @@
   .is-disabled {
     color: var(--terra-application-action-menu-item-is-disabled-color, #ccc);
     cursor: default;
+    opacity: var(--terra-application-action-menu-item-is-disabled-opacity, 1);
 
     .icon {
-      color: #222a2e;
+      color: var(--terra-application-action-menu-item-is-disabled-icon-color, #222a2e);
       opacity: 0.3;
     }
   }
@@ -69,6 +70,10 @@
         background-color: var(--terra-application-action-menu-item-is-actionable-hover-background-color, #ebf6fd);
       }
     }
+
+    &:active {
+      background-color: var(--terra-application-action-menu-item-is-actionable-active-background-color, #cce9f9);
+    }
 
     &[data-focus-styles-enabled='true']:focus {
       box-shadow: var(--terra-application-action-menu-item-is-actionable-focus-box-shadow, none);

packages/terra-application/src/action-menu/clinical-lowlight-theme/ActionMenuItem.module.scss

@@ -6,14 +6,18 @@
     --terra-application-action-menu-item-padding-right: 0.7143rem;
     --terra-application-action-menu-item-padding-top: 0.3571rem;
     --terra-application-action-menu-item-indent-padding-left: 1.857rem;
+    --terra-application-action-menu-item-icon-color: #6f7477;
     --terra-application-action-menu-item-icon-height: 0.8571rem;
     --terra-application-action-menu-item-icon-margin-right: 0.4286rem;
     --terra-application-action-menu-item-icon-margin-top: 0.25rem;
     --terra-application-action-menu-item-icon-width: 0.8571rem;
     --terra-application-action-menu-item-content-font-size: 1rem;
     --terra-application-action-menu-item-content-font-weight: normal;
-    --terra-application-action-menu-item-is-disabled-color: #ccc;
+    --terra-application-action-menu-item-is-disabled-color: #b2b5b6;
+    --terra-application-action-menu-item-is-disabled-opacity: 0.3;
+    --terra-application-action-menu-item-is-disabled-icon-color: #6f7477;
     --terra-application-action-menu-item-is-actionable-hover-background-color: #1e3a49;
+    --terra-application-action-menu-item-is-actionable-active-background-color: #004165;
     --terra-application-action-menu-item-is-actionable-focus-box-shadow: none;
     --terra-application-action-menu-item-is-actionable-focus-outline: 2px dashed #fff;
     --terra-application-action-menu-item-is-actionable-focus-outline-offset: -2px;

packages/terra-application/src/action-menu/orion-fusion-theme/ActionMenuItem.module.scss

@@ -1,19 +1,23 @@
 :local {
   .orion-fusion-theme {
-    --terra-application-action-menu-item-color: #222a2e;
+    --terra-application-action-menu-item-color: #1c1f21;
     --terra-application-action-menu-item-padding-bottom: 0.6667rem;
     --terra-application-action-menu-item-padding-left: 1rem;
     --terra-application-action-menu-item-padding-right: 0.4167rem;
     --terra-application-action-menu-item-padding-top: 0.6667rem;
     --terra-application-action-menu-item-indent-padding-left: 2.833rem;
+    --terra-application-action-menu-item-icon-color: #7a7f82;
     --terra-application-action-menu-item-icon-height: 1.167rem;
     --terra-application-action-menu-item-icon-margin-right: 0.6667rem;
     --terra-application-action-menu-item-icon-margin-top: 0.125rem;
     --terra-application-action-menu-item-icon-width: 1.167rem;
     --terra-application-action-menu-item-content-font-size: 1rem;
     --terra-application-action-menu-item-content-font-weight: normal;
-    --terra-application-action-menu-item-is-disabled-color: #ccc;
+    --terra-application-action-menu-item-is-disabled-color: #1c1f21;
+    --terra-application-action-menu-item-is-disabled-opacity: 0.3;
+    --terra-application-action-menu-item-is-disabled-icon-color: #7a7f82;
     --terra-application-action-menu-item-is-actionable-hover-color: #ebf6fd;
+    --terra-application-action-menu-item-is-actionable-active-background-color: #cce9f9;
     --terra-application-action-menu-item-is-actionable-focus-box-shadow: 0 0 1px 1px rgba(76, 178, 233, 0.5), 0 0 6px 2px rgba(76, 178, 233, 0.4), inset 0 0 4px 1px rgba(76, 178, 233, 0.5);
     --terra-application-action-menu-item-is-actionable-focus-outline: none;
     --terra-application-action-menu-item-is-actionable-focus-outline-outset: 0;

packages/terra-application/src/main-container/MainContainer.jsx

@@ -88,6 +88,7 @@ const MainContainer = ({
       {...otherProps}
     >
       <SkipToLink
+        priority="main"
         description={applicationIntl.formatMessage({
           id: 'terraApplication.mainContainer.skipToLabel',
         })}

packages/terra-application/src/page/Page.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
 
 import { UnsavedChangesPromptCheckpoint } from '../unsaved-changes-prompt';
 import useNotificationBanners from '../notification-banner/private/useNotificationBanners';
@@ -73,6 +74,8 @@ const Page = ({
     throw new Error(`[terra-application] Page.Toolbar must be used to define a toolbar for ${label}.`);
   }
 
+  const theme = React.useContext(ThemeContext);
+
   // An UnsavedChangesPromptCheckpoint is used to detect unsaved changes within
   // the Page's content.
   const unsavedChangesCheckpointRef = React.useRef();
@@ -104,9 +107,14 @@ const Page = ({
     });
   } : undefined;
 
+  const pageClassNames = cx(
+    'page',
+    theme.className,
+  );
+
   return (
     <PagePortal>
-      <div className={cx('page')}>
+      <div className={pageClassNames}>
         <div className={cx('header')}>
           <PageHeader
             id={pageId}

packages/terra-application/src/page/Page.module.scss

@@ -1,8 +1,11 @@
 @import '../breakpoints/media-queries';
 
+@import './clinical-lowlight-theme/Page.module';
+@import './orion-fusion-theme/Page.module';
+
 :local {
   .page {
-    background-color: #f4f4f4;
+    background-color: var(--terra-application-page-background-color, #f4f4f4);
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -28,11 +31,4 @@
       z-index: 1;
     }
   }
-
-  .page-toolbar {
-    background: linear-gradient(#e8e9ea, #dedfe0);
-    border: 0;
-    border-radius: 3px;
-    box-shadow: 0 1px 1px 0 rgba(28, 31, 33, 0.2); 
-  }
 }

packages/terra-application/src/page/PageHeader.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind';
 import IconLeft from 'terra-icon/lib/icon/IconLeft';
 import IconRollup from 'terra-icon/lib/icon/IconRollup';
 import Popup from 'terra-popup';
+import ThemeContext from 'terra-theme-context';
 
 import ActionMenu, { ActionMenuItem } from '../action-menu';
 import { useTransientPresentationState } from '../utils/transient-presentations';
@@ -53,6 +54,7 @@ const PageHeader = ({
 }) => {
   const intl = React.useContext(ApplicationIntlContext);
   const pageContainerContext = React.useContext(PageContainerContext);
+  const theme = React.useContext(ThemeContext);
 
   const headerContainerRef = React.useRef();
   const moreActionsButtonRef = React.useRef();
@@ -181,8 +183,10 @@ const PageHeader = ({
     </Popup>
   ) : undefined;
 
+  const pageHeaderClassNames = cx('page-header-container', theme.className);
+
   return (
-    <div ref={headerContainerRef} className={cx('page-header-container')}>
+    <div ref={headerContainerRef} className={pageHeaderClassNames}>
       <div className={cx('page-header')}>
         <div className={cx('start-actions-container')}>
           {backActionButton}

packages/terra-application/src/page/PageHeader.module.scss

@@ -1,10 +1,19 @@
 @import '~terra-mixins/lib/Mixins';
 
+@import './clinical-lowlight-theme/PageHeader.module';
+@import './orion-fusion-theme/PageHeader.module';
+
 :local {
   .page-header-container {
-    box-shadow: inset -3px -4px 0 -3px #fff, inset -3px -5px 0 -3px #c8cacb;
-    margin: 0 0.625rem;
-    padding: 0.3571rem 0 0.4286rem;
+    box-shadow: var(--terra-application-page-header-container-box-shadow, inset 0 -1px 0 0 #fff, inset 0 -2px 0 0 #c8cacb);
+    margin-bottom: var(--terra-application-page-header-container-margin-bottom, 0);
+    margin-left: var(--terra-application-page-header-container-margin-left, 0.7143rem);
+    margin-right: var(--terra-application-page-header-container-margin-right, 0.7143rem);
+    margin-top: var(--terra-application-page-header-container-margin-top, 0);
+    padding-bottom: var(--terra-application-page-header-container-padding-bottom, 0.5714rem);
+    padding-left: var(--terra-application-page-header-container-padding-left, 0);
+    padding-right: var(--terra-application-page-header-container-padding-right, 0);
+    padding-top: var(--terra-application-page-header-container-padding-top, 0.3571rem);
   }
 
   .page-header {
@@ -20,23 +29,22 @@
     flex: 0 0 auto;
 
     &:not(:empty) {
-      padding-right: 0.1875rem;
+      padding-right: var(--terra-application-page-header-start-actions-container-not-empty-padding-right, 0.2143rem);
     }
   }
 
   .label-container {
     align-items: center;
-    color: #383f42;
+    color: var(--terra-application-page-header-label-container-color, #383f42);
     display: flex;
     flex: 1 1 auto;
     font-weight: bold;
     hyphens: auto;
-    min-height: 2rem;
+    min-height: var(--terra-application-page-header-label-container-min-height, 2.143rem); // must match height of buttons in header
     min-width: 0;
     overflow: hidden;
     overflow-wrap: break-word;
-    padding-left: 0.5rem;
-    padding-top: 0.1429rem;
+    padding-left: var(--terra-application-page-header-label-container-padding-left, 0.5rem);
     word-wrap: break-word;
   }
 
@@ -47,37 +55,40 @@
     min-height: 1.875rem;
 
     &:not(:empty) {
-      padding-left: 0.5rem;
+      padding-left: var(--terra-application-page-header-end-actions-container-not-empty-padding-left, 0.5rem);
     }
   }
 
   .actions-divider {
     align-self: stretch;
-    box-shadow: inset -3px 0 0 -2px#fefffe, inset -4px 0 0 -2px #c7cacb;
+    box-shadow: var(--terra-application-page-header-actions-divider-box-shadow, inset -1px 0 0 0 #fefffe, inset -2px 0 0 0 #c7cacb);
     flex: 0 0 auto;
-    margin: 0.3125rem 0.1875rem;
-    width: 2px;
+    margin-bottom: var(--terra-application-page-header-actions-divider-margin-bottom, 0.3571rem);
+    margin-left: var(--terra-application-page-header-actions-divider-margin-left, 0.2143rem);
+    margin-right: var(--terra-application-page-header-actions-divider-margin-right, 0.2143rem);
+    margin-top: var(--terra-application-page-header-actions-divider-margin-top, 0.3571rem);
+    width: var(--terra-application-page-header-actions-divider-width, 2px);
   }
 
   .toolbar-container {
-    margin-top: var(--terra-application-page-header-toolbar-margin-top, 0.25rem);
+    margin-top: var(--terra-application-page-header-toolbar-container-margin-top, 0.2857rem);
   }
 
   .notification-banners-container {
-    margin-bottom: var(--terra-application-page-header-notification-banners-container-margin-bottom, 0.1875rem);
-    margin-top: var(--terra-application-page-header-notification-banners-container-margin-top, 0.25rem);
+    margin-bottom: var(--terra-application-page-header-notification-banners-container-margin-bottom, 0.2143rem);
+    margin-top: var(--terra-application-page-header-notification-banners-container-margin-top, 0.2857rem);
   }
 
   .toolbar-container + .notification-banners-container {
-    margin-top: var(--terra-application-page-header-notification-banners-container-adjacent-margin-top, 0.375rem);
+    margin-top: var(--terra-application-page-header-notification-banners-container-adjacent-margin-top, 0.4286rem);
   }
 
   .notification-banner {
-    border-radius: var(--terra-application-page-header-notification-banner-border-radius, 0.1875rem);
+    border-radius: var(--terra-application-page-header-notification-banner-border-radius, 0.2143rem);
     overflow: hidden;
 
     &:not(:first-child) {
-      margin-top: var(--terra-application-page-header-notification-banner-adjacent-margin-top, 0.1875rem);
+      margin-top: var(--terra-application-page-header-notification-banner-adjacent-margin-top, 0.2143rem);
     }
   }
 }

packages/terra-application/src/page/PageHeaderButton.module.scss

@@ -1,5 +1,5 @@
-// @import '../clinical-lowlight-theme/WorkspaceButton.module';
-// @import '../orion-fusion-theme/WorkspaceButton.module';
+@import './clinical-lowlight-theme/PageHeaderButton.module';
+@import './orion-fusion-theme/PageHeaderButton.module';
 
 :local {
   .page-header-button {
@@ -20,14 +20,16 @@
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
       &:hover {
+        background-color: var(--terra-application-page-header-button-hover-background-color);
+        border-radius: var(--terra-application-page-header-button-hover-border-radius, 3px);
         color: var(--terra-application-page-header-button-hover-color, #004c75);
       }
     }
 
     &:disabled {
-      color: #222a2e;
+      color: var(--terra-application-page-header-button-disabled-color, #222a2e);
       cursor: default;
-      opacity: var(--terra-application-page-header-button-is-disabled-opacity, 0.3);
+      opacity: var(--terra-application-page-header-button-disabled-opacity, 0.3);
       pointer-events: none;
     }
 

packages/terra-application/src/page/PageToolbar.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import Toolbar from 'terra-toolbar';
+import ThemeContext from 'terra-theme-context';
 
 import styles from './PageToolbar.module.scss';
 
@@ -21,11 +22,15 @@ const propTypes = {
 /**
  * PageToolbar adds Page-specific styling to the default Terra toolbar.
  */
-const PageToolbar = ({ align, children }) => (
-  <Toolbar className={cx('page-toolbar')} align={align}>
-    {children}
-  </Toolbar>
-);
+const PageToolbar = ({ align, children }) => {
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <Toolbar className={cx('page-toolbar', theme.className)} align={align}>
+      {children}
+    </Toolbar>
+  );
+};
 
 PageToolbar.propTypes = propTypes;
 

packages/terra-application/src/page/PageToolbar.module.scss

@@ -1,8 +1,11 @@
+@import './clinical-lowlight-theme/PageToolbar.module';
+@import './orion-fusion-theme/PageToolbar.module';
+
 :local {
   .page-toolbar {
-    background: linear-gradient(#e8e9ea, #dedfe0);
+    background: var(--terra-application-page-toolbar-background, linear-gradient(#e8e9ea, #dedfe0));
     border: 0;
-    border-radius: 3px;
-    box-shadow: 0 1px 1px 0 rgba(28, 31, 33, 0.2); 
+    border-radius: var(--terra-application-page-toolbar-border-radius, 3px);
+    box-shadow: var(--terra-application-page-toolbar-box-shadow, 0 1px 1px 0 rgba(28, 31, 33, 0.2)); 
   }
 }

packages/terra-application/src/page/clinical-lowlight-theme/Page.module.scss

@@ -0,0 +1,5 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-application-page-background-color: #191d20;
+  }
+}

packages/terra-application/src/page/clinical-lowlight-theme/PageHeader.module.scss

@@ -0,0 +1,30 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-application-page-header-container-box-shadow: inset 0 -1px 0 0 #181b1d, inset 0 -2px 0 0 #08090a;
+    --terra-application-page-header-container-margin-bottom: 0;
+    --terra-application-page-header-container-margin-left: 0.7143rem;
+    --terra-application-page-header-container-margin-right: 0.7143rem;
+    --terra-application-page-header-container-margin-top: 0;
+    --terra-application-page-header-container-padding-bottom: 0.5714rem;
+    --terra-application-page-header-container-padding-left: 0;
+    --terra-application-page-header-container-padding-right: 0;
+    --terra-application-page-header-container-padding-top: 0.3571rem;
+    --terra-application-page-header-start-actions-container-not-empty-padding-right: 0.2143rem;
+    --terra-application-page-header-label-container-color: #b2b5b6;
+    --terra-application-page-header-label-container-min-height: 2.143rem;
+    --terra-application-page-header-label-container-padding-left: 0.5rem;
+    --terra-application-page-header-end-actions-container-not-empty-padding-left: 0.5rem;
+    --terra-application-page-header-actions-divider-box-shadow: inset -1px 0 0 0 #181b1d, inset -2px 0 0 0 #2d3539;
+    --terra-application-page-header-actions-divider-margin-bottom: 0.3571rem;
+    --terra-application-page-header-actions-divider-margin-left: 0.2143rem;
+    --terra-application-page-header-actions-divider-margin-right: 0.2143rem;
+    --terra-application-page-header-actions-divider-margin-top: 0.3571rem;
+    --terra-application-page-header-actions-divider-width: 2px;
+    --terra-application-page-header-toolbar-container-margin-top: 0.2857rem;
+    --terra-application-page-header-notification-banners-container-margin-bottom: 0.2143rem;
+    --terra-application-page-header-notification-banners-container-margin-top: 0.2857rem;
+    --terra-application-page-header-notification-banners-container-adjacent-margin-top: 0.4286rem;
+    --terra-application-page-header-notification-banner-border-radius: 0.2143rem;
+    --terra-application-page-header-notification-banner-not-first-child-margin-top: 0.2143rem;
+  }
+}