sonatype · rpokorny · Jan 12, 2021 · Jan 12, 2021 · Jan 12, 2021 · Jan 13, 2021
diff --git a/gallery/package.json b/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {

diff --git a/gallery/src/PageHeader.tsx b/gallery/src/PageHeader.tsx
@@ -4,8 +4,8 @@
  * the terms of the Eclipse Public License 2.0 which accompanies this
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
-import React from 'react';
-import { NxPageHeader } from '@sonatype/react-shared-components';
+import React, { useEffect, useState } from 'react';
+import { NxPageHeader, NxToggle } from '@sonatype/react-shared-components';
 
 import packageJson from '../package.json';
 
@@ -15,7 +15,18 @@ function PageHeader() {
     version: packageJson.version
   };
 
-  return <NxPageHeader homeLink="#" productInfo={productInfo} />;
+  const [darkMode, setDarkMode] = useState(window.localStorage.getItem('darkMode') === 'true');
+
+  useEffect(function() {
+    document.body.classList.toggle('nx-dark-theme', darkMode);
+    window.localStorage.setItem('darkMode', darkMode.toString());
+  }, [darkMode]);
+
+  return (
+    <NxPageHeader homeLink="#" productInfo={productInfo}>
+      <NxToggle isChecked={darkMode} onChange={() => setDarkMode(!darkMode)}>Dark Mode</NxToggle>
+    </NxPageHeader>
+  );
 }
 
 export default PageHeader;
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "Sonatype shared UI components and utilities written in React",
   "main": "index.js",
   "repository": {

diff --git a/lib/src/assets/img/sonatype-logo-with-hexagon-light-text.png b/lib/src/assets/img/sonatype-logo-with-hexagon-light-text.png
diff --git a/lib/src/base-styles/_base.scss b/lib/src/base-styles/_base.scss
@@ -16,6 +16,7 @@
 //@import '~normalize.css';
 
 @import 'nx-globals';
+@import 'nx-dark-theme';
 @import 'nx-typography';
 
 @import 'nx-page-header';

diff --git a/lib/src/base-styles/_nx-alert.scss b/lib/src/base-styles/_nx-alert.scss
@@ -14,9 +14,10 @@
 
   align-items: first baseline;
   background-color: $nx-off-white;
-  border: $nx-border-darker;
+  border: 1px solid var(--nx-border-color-starker);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
+  color: $nx-text-color;
   display: flex;
   margin: 16px auto 24px auto;
   max-width: 950px;

diff --git a/lib/src/base-styles/_nx-btn.scss b/lib/src/base-styles/_nx-btn.scss
@@ -8,9 +8,9 @@
 %nx-btn--disabled {
   &.disabled, &[disabled] {
     &, &:hover, &:focus {
-      background-color:$nx-disabled-background;
-      border-color: $nx-disabled-border;
-      color: $nx-text-color-disabled;
+      background-color: var(--nx-interactive-disabled-background-color);
+      border-color: var(--nx-interactive-disabled-border-color);
+      color: var(--nx-text-color-disabled);
       cursor: default;
     }
   }
@@ -38,7 +38,7 @@
   }
 
   &:focus {
-    border: 1px solid $nx-focus-border-color;
+    border: 1px solid var(--nx-interactive-focus-border-color);
     box-shadow: $nx-focus-box-shadow;
     outline: 0;
   }
@@ -73,7 +73,7 @@
 
   background-color: transparent;
   border-color: #d1d6f0;
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
 
   &:hover {
     background-color: transparent;

diff --git a/lib/src/base-styles/_nx-card.scss b/lib/src/base-styles/_nx-card.scss
@@ -10,7 +10,7 @@
 }
 
 .nx-card {
-  background-color: #fff;
+  background-color: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
   margin-bottom: $nx-spacing-md;

diff --git a/lib/src/base-styles/_nx-counter.scss b/lib/src/base-styles/_nx-counter.scss
@@ -11,7 +11,7 @@
   background-color: #fff;
   border: 1px solid $nx-blue-1000;
   border-radius: 12px;
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   display: inline-block;
   font-size: 14px;
   line-height: $nx-line-height;

diff --git a/lib/src/base-styles/_nx-dark-theme.scss b/lib/src/base-styles/_nx-dark-theme.scss
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2019-present Sonatype, Inc.
+ * This program and the accompanying materials are made available under
+ * the terms of the Eclipse Public License 2.0 which accompanies this
+ * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
+ */
+@mixin dark-theme {
+  // global CSS variables/custom properties
+  --nx-site-background-color: #{invert($nx-site-background-color)};
+  --nx-component-background-color: #{invert($nx-white)};
+  --nx-form-field-background-color: var(--nx-component-background-color);
+
+  --nx-text-color: #{invert($nx-text-color)};
+  --nx-text-color-stark: #{invert($nx-text-color-dark)};
+  --nx-heading-color: var(--nx-text-color-stark);
+  --nx-text-color-disabled: #{invert($nx-text-color-disabled)};
+
+  --nx-interactive-selected-background-color: #{invert($nx-selected-background)};
+  --nx-interactive-active-background-color: #{invert($nx-active-background)};
+  --nx-interactive-hover-background-color: #{invert($nx-hover-background)};
+  --nx-interactive-disabled-background-color: #{invert($nx-disabled-background)};
+  --nx-interactive-disabled-border-color: #{invert($nx-disabled-border)};
+  --nx-interactive-focus-border-color: #{invert($nx-focus-border-color)};
+
+  --nx-border-color: #{invert($nx-grey-3)};
+  --nx-border-color-stark: #{invert($nx-grey-4)};
+  --nx-border-color-starker: #{invert($nx-slate)};
+  --nx-border-color-faded: #{invert($nx-grey-2)};
+  --nx-border-color-very-faded: #{invert($nx-grey-1)};
+
+  --nx-form-field-border-color: #{invert($nx-grey-1100)};
+
+  --nx-page-header-background-color: #{invert($nx-off-white)};
+  --nx-page-header-border-color: #{invert($nx-grey-100)};
+
+  --nx-code-background-color: #{invert($nx-grey-1)};
+
+  .nx-product__logo-image {
+    display: none;
+  }
+
+  .nx-product__logo-image--light-text {
+    display: revert;
+  }
+}
+
+.nx-dark-theme {
+  @include dark-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-theme;
+  }
+}
diff --git a/lib/src/base-styles/_nx-form-select.scss b/lib/src/base-styles/_nx-form-select.scss
@@ -19,25 +19,25 @@
   background-repeat: no-repeat;
   border: 1px solid #d1d6f0;
   border-radius: $nx-border-radius;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   font-size: $nx-font-size;
   line-height: $nx-line-height;
   padding: $nx-spacing-xs $nx-spacing-md;
   width: $nx-form-element-width-normal;
 
   &:hover {
-    border-color: $nx-form-element-border-color;
+    border-color: var(--nx-form-field-border-color);
   }
 
   &:focus {
     box-shadow: $nx-focus-box-shadow;
-    border-color: $nx-focus-border-color;
+    border-color: var(--nx-interactive-focus-border-color);
     outline: none;
   }
 
   &.disabled {
-    background-color:$nx-disabled-background;
-    border-color: $nx-disabled-border;
+    background-color: var(--nx-interactive-disabled-background-color);
+    border-color: var(--nx-interactive-disabled-border-color);
   }
 }
 

diff --git a/lib/src/base-styles/_nx-forms.scss b/lib/src/base-styles/_nx-forms.scss
@@ -56,7 +56,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   cursor: default;
   display: block;
   margin-bottom: $nx-spacing-xs;
@@ -66,7 +66,7 @@
   .nx-label__text::after, .nx-legend__text::after {
     @include regular();
 
-    color: $nx-text-color;
+    color: var(--nx-text-color);
     content: "Optional";
     font-size: $nx-font-size-xs;
     font-style: italic;
@@ -78,7 +78,7 @@
   @include container-horizontal;
   @include semi-bold();
 
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   font-size: $nx-font-size-s;
   display: block;
   margin-bottom: $nx-spacing-md;

diff --git a/lib/src/base-styles/_nx-globals.scss b/lib/src/base-styles/_nx-globals.scss
@@ -75,3 +75,36 @@ $nx-scrollable-default-height: 400px;
 .nx-blockquote {
   @extend %nx-blockquote;
 }
+
+:root {
+  // global CSS variables/custom properties
+  --nx-site-background-color: #{$nx-site-background-color};
+  --nx-component-background-color: #{$nx-white};
+  --nx-form-field-background-color: var(--nx-component-background-color);
+
+  --nx-text-color: #{$nx-text-color};
+  --nx-text-color-stark: #{$nx-text-color-dark};
+  --nx-heading-color: var(--nx-text-color-stark);
+  --nx-text-color-disabled: #{$nx-text-color-disabled};
+
+  --nx-interactive-selected-background-color: #{$nx-selected-background};
+  --nx-interactive-active-background-color: #{$nx-active-background};
+  --nx-interactive-hover-background-color: #{$nx-hover-background};
+  --nx-interactive-disabled-background-color: #{$nx-disabled-background};
+  --nx-interactive-disabled-border-color: #{$nx-disabled-border};
+  --nx-interactive-focus-border-color: #{$nx-focus-border-color};
+  --nx-interactive-focus-shadow-color: #{transparentize($nx-focus-border-color, 0.7)};
+
+  --nx-border-color: #{$nx-grey-3};
+  --nx-border-color-stark: #{$nx-grey-4};
+  --nx-border-color-starker: #{$nx-slate};
+  --nx-border-color-faded: #{$nx-grey-2};
+  --nx-border-color-very-faded: #{$nx-grey-1};
+
+  --nx-form-field-border-color: #{$nx-grey-1100};
+
+  --nx-page-header-background-color: #{$nx-off-white};
+  --nx-page-header-border-color: #{$nx-grey-100};
+
+  --nx-code-background-color: #{$nx-grey-1};
+}
diff --git a/lib/src/base-styles/_nx-grid.scss b/lib/src/base-styles/_nx-grid.scss
@@ -13,7 +13,7 @@
 .nx-grid-col {
   flex: 1 0;
 
-  border-left: $nx-border-light;
+  border-left: 1px solid var(--nx-border-color-faded);
   box-sizing: border-box;
   margin: 8px 0;
   overflow-x: hidden;
@@ -59,7 +59,7 @@
 
 .nx-grid-h-keyline {
   border: none;
-  border-top: $nx-border-light;
+  border-top: 1px solid var(--nx-border-color-faded);
   margin: 0;
 }
 

diff --git a/lib/src/base-styles/_nx-lists.scss b/lib/src/base-styles/_nx-lists.scss
@@ -44,7 +44,7 @@
   }
 
   &.disabled {
-    color: $nx-text-color-disabled;
+    color: var(--nx-text-color-disabled);
     cursor: default;
   }
 
@@ -163,33 +163,33 @@
   .nx-list__item {
     &.selected {
       &, &:hover {
-        background-color: $nx-selected-background;
+        background-color: var(--nx-interactive-selected-background-color);
       }
     }
 
     &:hover {
-      background-color: $nx-hover-background;
+      background-color: var(--nx-interactive-hover-background-color);
       cursor: pointer;
     }
 
     &:active {
-      background-color: $nx-active-background;
+      background-color: var(--nx-interactive-active-background-color);
     }
 
     &:focus {
       box-shadow: $nx-focus-box-shadow;
-      border-color: $nx-focus-border-color;
+      border-color: var(--nx-interactive-focus-border-color);
       outline: none;
     }
 
     &.nx-list__item--empty {
       @include regular();
 
-      color: $nx-text-color;
+      color: var(--nx-text-color);
     }
 
     &.disabled {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
 
       &:hover {
         background-color: transparent;
@@ -204,7 +204,7 @@
     > .nx-chevron {
       align-self: center;
       -ms-grid-row-align: center;
-      color: $nx-text-color-dark;
+      color: var(--nx-text-color-stark);
       -ms-grid-row: 1;
       -ms-grid-row-span: 2;
       -ms-grid-column: 3;

diff --git a/lib/src/base-styles/_nx-page-header.scss b/lib/src/base-styles/_nx-page-header.scss
@@ -5,7 +5,6 @@
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
 
-$main-header-background: $nx-off-white;
 $main-header-color: $nx-off-black;
 $main-header-product-height: 52px;
 $main-header-product-title-row-height: 2fr;
@@ -18,8 +17,8 @@ $main-header-product-version-row-height: 1fr;
 .nx-page-header {
   box-sizing: content-box;
 
-  background-color: $main-header-background;
-  border-bottom: 1px solid $nx-header-border;
+  background-color: var(--nx-page-header-background-color);
+  border-bottom: 1px solid var(--nx-page-header-border-color);
   flex-shrink: 0; // needed for IE11
   height: $nx-main-header-height;
   width: 100%;
@@ -46,7 +45,6 @@ $main-header-product-version-row-height: 1fr;
 .nx-page-header__link {
   border-bottom: 2px solid transparent;
 
-  color: #515151;
   display: inline-block;
   font-size: $nx-font-size-s;
   margin-right: $nx-spacing-l;
@@ -105,6 +103,10 @@ $main-header-product-version-row-height: 1fr;
   margin-top: 13px; // fix vertical centering
 }
 
+.nx-product__logo-image--light-text {
+  display: none;
+}
+
 .nx-product__name {
   display: inline-block;
   font-size: 26px;

diff --git a/lib/src/base-styles/_nx-page-layout.scss b/lib/src/base-styles/_nx-page-layout.scss
@@ -14,7 +14,7 @@
 }
 
 .nx-body {
-  background-color: $nx-site-background-color;
+  background-color: var(--nx-site-background-color);
   height: 100%;
   margin: 0;
   // prevents scrollbar flicker as tooltips appear in IE11
@@ -52,7 +52,6 @@
 .nx-page-sidebar {
   @include container-vertical;
 
-  background-color: $nx-sidebar-background-color;
   box-sizing: border-box;
   flex-basis: $nx-sidebar-width;
   overflow-x: hidden;