From 9c0bc7bac3e2f0d252506f28e2d0644f05de795b Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Tue, 12 Jan 2021 17:15:59 -0500
Subject: [PATCH 01/19] Create --rsc-component-background-color custom prop -
 RSC-447

---
 lib/src/base-styles/_nx-globals.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/src/base-styles/_nx-globals.scss b/lib/src/base-styles/_nx-globals.scss
index 0476e75c11..a3b063d425 100644
--- a/lib/src/base-styles/_nx-globals.scss
+++ b/lib/src/base-styles/_nx-globals.scss
@@ -75,3 +75,8 @@ $nx-scrollable-default-height: 400px;
 .nx-blockquote {
   @extend %nx-blockquote;
 }
+
+:root {
+  // global CSS variables/custom properties
+  --rsc-component-background-color: $nx-white;
+}

From 983bcd8e845af92ce2e97c2670a28fcd6588ca6a Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Tue, 12 Jan 2021 17:17:41 -0500
Subject: [PATCH 02/19] Use custom prop for background colors - RSC-447

---
 lib/src/base-styles/_nx-btn.scss                              | 2 +-
 lib/src/base-styles/_nx-card.scss                             | 2 +-
 lib/src/base-styles/_nx-form-select.scss                      | 2 +-
 lib/src/base-styles/_nx-pagination.scss                       | 2 +-
 lib/src/base-styles/_nx-tables.scss                           | 4 ++--
 lib/src/base-styles/_nx-text-input.scss                       | 2 +-
 lib/src/base-styles/_nx-tile.scss                             | 3 +--
 lib/src/components/NxAccordion/NxAccordion.scss               | 2 +-
 lib/src/components/NxModal/NxModal.scss                       | 2 +-
 .../components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss | 2 +-
 lib/src/components/NxSubmitMask/NxSubmitMask.scss             | 2 +-
 lib/src/scss-shared/_nx-text-helpers.scss                     | 2 +-
 12 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/lib/src/base-styles/_nx-btn.scss b/lib/src/base-styles/_nx-btn.scss
index 39487ab021..e7a9028739 100644
--- a/lib/src/base-styles/_nx-btn.scss
+++ b/lib/src/base-styles/_nx-btn.scss
@@ -21,7 +21,7 @@
   @include container-horizontal;
   @extend %nx-btn--disabled;
 
-  background-color: $nx-white;
+  background-color: var(--rsc-component-background-color);
   border: 1px solid $nx-blue-600;
   border-radius: 6px;
   color: $nx-blue-600;
diff --git a/lib/src/base-styles/_nx-card.scss b/lib/src/base-styles/_nx-card.scss
index 9263bec63c..2e6d0659ae 100644
--- 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(--rsc-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-form-select.scss b/lib/src/base-styles/_nx-form-select.scss
index d7693675a2..b407e2d8e6 100644
--- a/lib/src/base-styles/_nx-form-select.scss
+++ b/lib/src/base-styles/_nx-form-select.scss
@@ -11,7 +11,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #fff url("data:image/svg+xml;utf8, \
+  background: var(--rsc-component-background-color) url("data:image/svg+xml;utf8, \
     <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%232c2c2c'> \
     <polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
diff --git a/lib/src/base-styles/_nx-pagination.scss b/lib/src/base-styles/_nx-pagination.scss
index 4b63a12e83..3befadbade 100644
--- a/lib/src/base-styles/_nx-pagination.scss
+++ b/lib/src/base-styles/_nx-pagination.scss
@@ -53,7 +53,7 @@
   &.selected {
     background-color: #232c50;
     border-color: #232c50;
-    color: #fff;
+    color: var(--rsc-component-background-color);
     cursor: default;
   }
 }
diff --git a/lib/src/base-styles/_nx-tables.scss b/lib/src/base-styles/_nx-tables.scss
index e3a1ce4437..6506c31285 100644
--- a/lib/src/base-styles/_nx-tables.scss
+++ b/lib/src/base-styles/_nx-tables.scss
@@ -147,7 +147,7 @@
 .nx-table-container__footer {
   @include container-vertical;
 
-  background-color: #fff;
+  background-color: var(--rsc-component-background-color);
   border-top: 1px solid #d1d6f0;
   margin-top: auto;
   padding: $nx-table-footer-vertical-padding;
@@ -234,7 +234,7 @@
 }
 
 .nx-table-row--filter-header > .nx-cell--header {
-  background-color: #ffffff;
+  background-color: var(--rsc-component-background-color);
   border-bottom: 1px solid #d1d6f0;
 }
 
diff --git a/lib/src/base-styles/_nx-text-input.scss b/lib/src/base-styles/_nx-text-input.scss
index 97af956d7e..e7deefa9df 100644
--- a/lib/src/base-styles/_nx-text-input.scss
+++ b/lib/src/base-styles/_nx-text-input.scss
@@ -65,7 +65,7 @@
   @include container-horizontal;
 
   align-items: center;
-  background-color: #fff;
+  background-color: var(--rsc-component-background-color);
   border: 1px solid $nx-form-element-border-color;
   border-radius: $nx-border-radius;
   display: flex;
diff --git a/lib/src/base-styles/_nx-tile.scss b/lib/src/base-styles/_nx-tile.scss
index 6661f8ef1e..73b412a5ed 100644
--- a/lib/src/base-styles/_nx-tile.scss
+++ b/lib/src/base-styles/_nx-tile.scss
@@ -7,7 +7,6 @@
 
 $nx-tile-header-height: 24px; // Minimum height
 $nx-tile-header-height-actions: 43px; // Height with sub-title and/or right actions
-$nx-tile-background-color: $nx-white;
 
 // the "padding" around the inside edge of the nx-tile, which must be implemented using padding/margin
 // on children since nx-tile-content--accordion-container is supposed to go all the way to the edges
@@ -22,7 +21,7 @@ $nx-tile-padding: $nx-spacing-l;
 .nx-tile {
   @include container-vertical;
 
-  background-color: $nx-tile-background-color;
+  background-color: var(--rsc-component-background-color);
   border-radius: $nx-border-radius;
   margin: $nx-spacing-xs 0 $nx-spacing-md 0;
 
diff --git a/lib/src/components/NxAccordion/NxAccordion.scss b/lib/src/components/NxAccordion/NxAccordion.scss
index afc49bb8a6..99255cd21f 100644
--- a/lib/src/components/NxAccordion/NxAccordion.scss
+++ b/lib/src/components/NxAccordion/NxAccordion.scss
@@ -9,7 +9,7 @@
 @import '../../scss-shared/nx-text-helpers';
 
 .nx-accordion {
-  background: #fff;
+  background: var(--rsc-component-background-color);
   border-radius: $nx-border-radius;
   margin: $nx-spacing-md 0;
 }
diff --git a/lib/src/components/NxModal/NxModal.scss b/lib/src/components/NxModal/NxModal.scss
index 66d80057d5..a1d99cc08b 100644
--- a/lib/src/components/NxModal/NxModal.scss
+++ b/lib/src/components/NxModal/NxModal.scss
@@ -17,7 +17,7 @@ $nx-modal-padding: $nx-spacing-l;
   @include container-vertical;
 
   border-radius: $nx-border-radius;
-  background-color: #ffffff;
+  background-color: var(--rsc-component-background-color);
   margin: 100px 0;
   padding: $nx-spacing-l 0;
   width: 800px;
diff --git a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
index 21977c01ce..cd1bc808c0 100644
--- a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
+++ b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
@@ -39,7 +39,7 @@
 
   .MuiSlider-thumb {
     box-sizing: border-box;
-    background-color: $nx-white;
+    background-color: var(--rsc-component-background-color);
     border: 2px solid;
     border-radius: $nx-border-radius;
     color: $nx-text-color-dark;
diff --git a/lib/src/components/NxSubmitMask/NxSubmitMask.scss b/lib/src/components/NxSubmitMask/NxSubmitMask.scss
index a35f2d59e7..6d6b01a68d 100644
--- a/lib/src/components/NxSubmitMask/NxSubmitMask.scss
+++ b/lib/src/components/NxSubmitMask/NxSubmitMask.scss
@@ -40,7 +40,7 @@
   @include container-vertical;
   @include semi-bold();
 
-  background-color: #fff;
+  background-color: var(--rsc-component-background-color);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
   margin: 0;
diff --git a/lib/src/scss-shared/_nx-text-helpers.scss b/lib/src/scss-shared/_nx-text-helpers.scss
index c946603142..7a802405d9 100644
--- a/lib/src/scss-shared/_nx-text-helpers.scss
+++ b/lib/src/scss-shared/_nx-text-helpers.scss
@@ -79,7 +79,7 @@
 }
 
 %nx-pre {
-  background-color: #fff;
+  background-color: var(--rsc-component-background-color);
   border: 1px solid $nx-grey-900;
   border-left-width: 8px;
   border-radius: $nx-border-radius;

From 9e9964a858da7b8a2d5350f022142e089b76665d Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Tue, 12 Jan 2021 17:23:08 -0500
Subject: [PATCH 03/19] Version bump - RSC-447

---
 gallery/package.json | 2 +-
 lib/package.json     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/gallery/package.json b/gallery/package.json
index 3832b4797a..e3553d2f85 100644
--- a/gallery/package.json
+++ b/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {
diff --git a/lib/package.json b/lib/package.json
index 7ff755c381..14a4ab9da1 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Sonatype shared UI components and utilities written in React",
   "main": "index.js",
   "repository": {

From a9d7e535dc9495f9fc1b9a2d48f1208f6eb251ee Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 08:57:54 -0500
Subject: [PATCH 04/19] Fix scss variable interpolation - RSC-447

---
 lib/src/base-styles/_nx-globals.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/base-styles/_nx-globals.scss b/lib/src/base-styles/_nx-globals.scss
index a3b063d425..9f143059e4 100644
--- a/lib/src/base-styles/_nx-globals.scss
+++ b/lib/src/base-styles/_nx-globals.scss
@@ -78,5 +78,5 @@ $nx-scrollable-default-height: 400px;
 
 :root {
   // global CSS variables/custom properties
-  --rsc-component-background-color: $nx-white;
+  --rsc-component-background-color: #{$nx-white};
 }

From 93c854794a9d8112cbdca8e2506ad1439a0884c5 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 11:43:33 -0500
Subject: [PATCH 05/19] Version bump - RSC-447

---
 gallery/package.json | 2 +-
 lib/package.json     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/gallery/package.json b/gallery/package.json
index 36bb1b9d26..c03675f40b 100644
--- 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/lib/package.json b/lib/package.json
index 8685e06b02..4e8f82f0aa 100644
--- 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": {

From aa490bf3862e06de6caf5c00ed869a318d827500 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 11:45:36 -0500
Subject: [PATCH 06/19] Revert things that maybe shouldn't use this variable -
 RSC-447

---
 lib/src/base-styles/_nx-btn.scss                                | 2 +-
 lib/src/base-styles/_nx-form-select.scss                        | 2 +-
 lib/src/base-styles/_nx-text-input.scss                         | 2 +-
 .../components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss   | 2 +-
 lib/src/scss-shared/_nx-text-helpers.scss                       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/src/base-styles/_nx-btn.scss b/lib/src/base-styles/_nx-btn.scss
index e7a9028739..39487ab021 100644
--- a/lib/src/base-styles/_nx-btn.scss
+++ b/lib/src/base-styles/_nx-btn.scss
@@ -21,7 +21,7 @@
   @include container-horizontal;
   @extend %nx-btn--disabled;
 
-  background-color: var(--rsc-component-background-color);
+  background-color: $nx-white;
   border: 1px solid $nx-blue-600;
   border-radius: 6px;
   color: $nx-blue-600;
diff --git a/lib/src/base-styles/_nx-form-select.scss b/lib/src/base-styles/_nx-form-select.scss
index b407e2d8e6..d7693675a2 100644
--- a/lib/src/base-styles/_nx-form-select.scss
+++ b/lib/src/base-styles/_nx-form-select.scss
@@ -11,7 +11,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: var(--rsc-component-background-color) url("data:image/svg+xml;utf8, \
+  background: #fff url("data:image/svg+xml;utf8, \
     <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%232c2c2c'> \
     <polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
   background-size: 12px;
diff --git a/lib/src/base-styles/_nx-text-input.scss b/lib/src/base-styles/_nx-text-input.scss
index e7deefa9df..97af956d7e 100644
--- a/lib/src/base-styles/_nx-text-input.scss
+++ b/lib/src/base-styles/_nx-text-input.scss
@@ -65,7 +65,7 @@
   @include container-horizontal;
 
   align-items: center;
-  background-color: var(--rsc-component-background-color);
+  background-color: #fff;
   border: 1px solid $nx-form-element-border-color;
   border-radius: $nx-border-radius;
   display: flex;
diff --git a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
index cd1bc808c0..21977c01ce 100644
--- a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
+++ b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
@@ -39,7 +39,7 @@
 
   .MuiSlider-thumb {
     box-sizing: border-box;
-    background-color: var(--rsc-component-background-color);
+    background-color: $nx-white;
     border: 2px solid;
     border-radius: $nx-border-radius;
     color: $nx-text-color-dark;
diff --git a/lib/src/scss-shared/_nx-text-helpers.scss b/lib/src/scss-shared/_nx-text-helpers.scss
index b8da148b7c..24a0723275 100644
--- a/lib/src/scss-shared/_nx-text-helpers.scss
+++ b/lib/src/scss-shared/_nx-text-helpers.scss
@@ -83,7 +83,7 @@
 }
 
 %nx-pre {
-  background-color: var(--rsc-component-background-color);
+  background-color: #fff;
   border: 1px solid $nx-grey-900;
   border-left-width: 8px;
   border-radius: $nx-border-radius;

From 966966276b50d4f92118d4f09592989fed12eb89 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 12:33:00 -0500
Subject: [PATCH 07/19] Rename variable - RSC-447

---
 lib/src/base-styles/_nx-card.scss                 | 2 +-
 lib/src/base-styles/_nx-globals.scss              | 2 +-
 lib/src/base-styles/_nx-pagination.scss           | 2 +-
 lib/src/base-styles/_nx-tables.scss               | 4 ++--
 lib/src/base-styles/_nx-tile.scss                 | 2 +-
 lib/src/components/NxAccordion/NxAccordion.scss   | 2 +-
 lib/src/components/NxModal/NxModal.scss           | 2 +-
 lib/src/components/NxSubmitMask/NxSubmitMask.scss | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/src/base-styles/_nx-card.scss b/lib/src/base-styles/_nx-card.scss
index 2e6d0659ae..8df53ed2cc 100644
--- a/lib/src/base-styles/_nx-card.scss
+++ b/lib/src/base-styles/_nx-card.scss
@@ -10,7 +10,7 @@
 }
 
 .nx-card {
-  background-color: var(--rsc-component-background-color);
+  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-globals.scss b/lib/src/base-styles/_nx-globals.scss
index 9f143059e4..65887c82c2 100644
--- a/lib/src/base-styles/_nx-globals.scss
+++ b/lib/src/base-styles/_nx-globals.scss
@@ -78,5 +78,5 @@ $nx-scrollable-default-height: 400px;
 
 :root {
   // global CSS variables/custom properties
-  --rsc-component-background-color: #{$nx-white};
+  --nx-component-background-color: #{$nx-white};
 }
diff --git a/lib/src/base-styles/_nx-pagination.scss b/lib/src/base-styles/_nx-pagination.scss
index 3befadbade..e8111d0ab5 100644
--- a/lib/src/base-styles/_nx-pagination.scss
+++ b/lib/src/base-styles/_nx-pagination.scss
@@ -53,7 +53,7 @@
   &.selected {
     background-color: #232c50;
     border-color: #232c50;
-    color: var(--rsc-component-background-color);
+    color: var(--nx-component-background-color);
     cursor: default;
   }
 }
diff --git a/lib/src/base-styles/_nx-tables.scss b/lib/src/base-styles/_nx-tables.scss
index 6506c31285..fdf7a1375e 100644
--- a/lib/src/base-styles/_nx-tables.scss
+++ b/lib/src/base-styles/_nx-tables.scss
@@ -147,7 +147,7 @@
 .nx-table-container__footer {
   @include container-vertical;
 
-  background-color: var(--rsc-component-background-color);
+  background-color: var(--nx-component-background-color);
   border-top: 1px solid #d1d6f0;
   margin-top: auto;
   padding: $nx-table-footer-vertical-padding;
@@ -234,7 +234,7 @@
 }
 
 .nx-table-row--filter-header > .nx-cell--header {
-  background-color: var(--rsc-component-background-color);
+  background-color: var(--nx-component-background-color);
   border-bottom: 1px solid #d1d6f0;
 }
 
diff --git a/lib/src/base-styles/_nx-tile.scss b/lib/src/base-styles/_nx-tile.scss
index 73b412a5ed..c794ab139a 100644
--- a/lib/src/base-styles/_nx-tile.scss
+++ b/lib/src/base-styles/_nx-tile.scss
@@ -21,7 +21,7 @@ $nx-tile-padding: $nx-spacing-l;
 .nx-tile {
   @include container-vertical;
 
-  background-color: var(--rsc-component-background-color);
+  background-color: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   margin: $nx-spacing-xs 0 $nx-spacing-md 0;
 
diff --git a/lib/src/components/NxAccordion/NxAccordion.scss b/lib/src/components/NxAccordion/NxAccordion.scss
index 99255cd21f..60c1db7a16 100644
--- a/lib/src/components/NxAccordion/NxAccordion.scss
+++ b/lib/src/components/NxAccordion/NxAccordion.scss
@@ -9,7 +9,7 @@
 @import '../../scss-shared/nx-text-helpers';
 
 .nx-accordion {
-  background: var(--rsc-component-background-color);
+  background: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   margin: $nx-spacing-md 0;
 }
diff --git a/lib/src/components/NxModal/NxModal.scss b/lib/src/components/NxModal/NxModal.scss
index a1d99cc08b..c8ba4dfc40 100644
--- a/lib/src/components/NxModal/NxModal.scss
+++ b/lib/src/components/NxModal/NxModal.scss
@@ -17,7 +17,7 @@ $nx-modal-padding: $nx-spacing-l;
   @include container-vertical;
 
   border-radius: $nx-border-radius;
-  background-color: var(--rsc-component-background-color);
+  background-color: var(--nx-component-background-color);
   margin: 100px 0;
   padding: $nx-spacing-l 0;
   width: 800px;
diff --git a/lib/src/components/NxSubmitMask/NxSubmitMask.scss b/lib/src/components/NxSubmitMask/NxSubmitMask.scss
index 6d6b01a68d..96739247e1 100644
--- a/lib/src/components/NxSubmitMask/NxSubmitMask.scss
+++ b/lib/src/components/NxSubmitMask/NxSubmitMask.scss
@@ -40,7 +40,7 @@
   @include container-vertical;
   @include semi-bold();
 
-  background-color: var(--rsc-component-background-color);
+  background-color: var(--nx-component-background-color);
   border-radius: $nx-border-radius;
   box-sizing: border-box;
   margin: 0;

From 5aebf692a654574bddaac17f698f0424572e10b4 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 14:51:49 -0500
Subject: [PATCH 08/19] Add more variables

---
 lib/src/base-styles/_nx-globals.scss | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/lib/src/base-styles/_nx-globals.scss b/lib/src/base-styles/_nx-globals.scss
index 65887c82c2..107af71bec 100644
--- a/lib/src/base-styles/_nx-globals.scss
+++ b/lib/src/base-styles/_nx-globals.scss
@@ -78,5 +78,28 @@ $nx-scrollable-default-height: 400px;
 
 :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};
 }

From ca077f1a146adb255e6a569b0ed75a60323a99b3 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 14:52:08 -0500
Subject: [PATCH 09/19] Add dar theme variables

---
 lib/src/base-styles/_nx-dark-theme.scss | 40 +++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 lib/src/base-styles/_nx-dark-theme.scss

diff --git a/lib/src/base-styles/_nx-dark-theme.scss b/lib/src/base-styles/_nx-dark-theme.scss
new file mode 100644
index 0000000000..8bc779e077
--- /dev/null
+++ b/lib/src/base-styles/_nx-dark-theme.scss
@@ -0,0 +1,40 @@
+/**
+ * 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-text-color: #{invert($nx-text-color)};
+  --nx-text-color-stark: #{invert($nx-text-color-dark)};
+  --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-dark-theme {
+  @include dark-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark-theme;
+  }
+}

From b7828a000ae0873da38d9b5a6db84e0528342e11 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Wed, 13 Jan 2021 14:52:22 -0500
Subject: [PATCH 10/19] Use variables

---
 lib/src/base-styles/_base.scss                |  1 +
 lib/src/base-styles/_nx-alert.scss            |  2 +-
 lib/src/base-styles/_nx-btn.scss              | 10 +++++-----
 lib/src/base-styles/_nx-counter.scss          |  2 +-
 lib/src/base-styles/_nx-form-select.scss      | 10 +++++-----
 lib/src/base-styles/_nx-forms.scss            |  6 +++---
 lib/src/base-styles/_nx-grid.scss             |  4 ++--
 lib/src/base-styles/_nx-lists.scss            | 16 +++++++--------
 lib/src/base-styles/_nx-page-layout.scss      |  3 +--
 lib/src/base-styles/_nx-pagination.scss       |  6 +++---
 lib/src/base-styles/_nx-radio-checkbox.scss   | 20 +++++++++----------
 lib/src/base-styles/_nx-tables.scss           | 12 +++++------
 lib/src/base-styles/_nx-text-input.scss       | 12 +++++------
 lib/src/base-styles/_nx-tile.scss             |  2 +-
 lib/src/base-styles/_nx-typography.scss       | 10 +++++-----
 .../components/NxAccordion/NxAccordion.scss   |  6 +++---
 lib/src/components/NxDropdown/NxDropdown.scss | 12 +++++------
 .../NxFilterInput/NxFilterInput.scss          |  2 +-
 .../NxNexusPageHeader/NxNexusPageHeader.scss  |  6 +++---
 .../NxPolicyThreatSlider.scss                 |  4 ++--
 lib/src/components/NxTabs/NxTabs.scss         |  2 +-
 lib/src/components/NxToggle/NxToggle.scss     |  6 +++---
 lib/src/components/NxTreeView/NxTreeView.scss | 10 +++++-----
 lib/src/scss-shared/_nx-text-helpers.scss     |  2 +-
 lib/src/scss-shared/_nx-variables.scss        |  2 +-
 25 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/lib/src/base-styles/_base.scss b/lib/src/base-styles/_base.scss
index 076ec2e6a9..b17704c790 100644
--- 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
index 160a2a7ee4..312e45cdba 100644
--- a/lib/src/base-styles/_nx-alert.scss
+++ b/lib/src/base-styles/_nx-alert.scss
@@ -14,7 +14,7 @@
 
   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;
   display: flex;
diff --git a/lib/src/base-styles/_nx-btn.scss b/lib/src/base-styles/_nx-btn.scss
index 39487ab021..4ad621a456 100644
--- 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-counter.scss b/lib/src/base-styles/_nx-counter.scss
index a3c3faa190..8566317a3e 100644
--- 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-form-select.scss b/lib/src/base-styles/_nx-form-select.scss
index d7693675a2..8153449f58 100644
--- 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
index 22b9336a1c..e666e206ed 100644
--- 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-grid.scss b/lib/src/base-styles/_nx-grid.scss
index d27048c785..3eecb33a75 100644
--- 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
index 698601698c..55f42534ae 100644
--- 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-layout.scss b/lib/src/base-styles/_nx-page-layout.scss
index ed02b72e07..0333363522 100644
--- 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;
diff --git a/lib/src/base-styles/_nx-pagination.scss b/lib/src/base-styles/_nx-pagination.scss
index e8111d0ab5..8a260e78e5 100644
--- a/lib/src/base-styles/_nx-pagination.scss
+++ b/lib/src/base-styles/_nx-pagination.scss
@@ -27,7 +27,7 @@
 
   &:focus {
     box-shadow: $nx-focus-box-shadow;
-    outline: 1px solid $nx-focus-border-color;
+    outline: 1px solid var(--nx-interactive-focus-border-color);
     outline-offset: -1px;
   }
 }
@@ -36,7 +36,7 @@
   @include regular();
   background-color: transparent;
   border-color: transparent;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
 
   &:hover {
     background-color: transparent;
@@ -47,7 +47,7 @@
     background-color: $nx-grey-100;
     border-color: $nx-grey-900;
     box-shadow: none;
-    color: $nx-text-color;
+    color: var(--nx-text-color);
   }
 
   &.selected {
diff --git a/lib/src/base-styles/_nx-radio-checkbox.scss b/lib/src/base-styles/_nx-radio-checkbox.scss
index 97fd237950..95d9f5fc58 100644
--- a/lib/src/base-styles/_nx-radio-checkbox.scss
+++ b/lib/src/base-styles/_nx-radio-checkbox.scss
@@ -30,21 +30,21 @@
     cursor: pointer;
 
     .nx-radio-checkbox__control {
-      border-color: $nx-form-element-border-color;
+      border-color: var(--nx-form-field-border-color);
       stroke: $nx-grey-1100;
     }
   }
 
   &:focus-within {
     .nx-radio-checkbox__control {
-      border-color: $nx-focus-border-color;
-      stroke: $nx-focus-border-color;
-      filter: drop-shadow(0 0 3px rgba($nx-focus-border-color, 0.4));
+      border-color: var(--nx-interactive-focus-border-color);
+      stroke: var(--nx-interactive-focus-border-color);
+      filter: drop-shadow(0 0 3px rgba(var(--nx-interactive-focus-border-color), 0.4));
     }
 
     &:hover {
       .nx-radio-checkbox__control {
-        border-color: $nx-form-element-border-color;
+        border-color: var(--nx-form-field-border-color);
         filter: none;
         stroke: $nx-grey-1100;
       }
@@ -92,14 +92,14 @@ svg.nx-radio-checkbox__control {
     cursor: default;
 
     .nx-radio-checkbox__control {
-      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);
     }
 
     svg.nx-radio-checkbox__control {
       background: none;
-      fill:$nx-disabled-background;
-      stroke: $nx-disabled-border;
+      fill: var(--nx-interactive-disabled-background-color);
+      stroke: var(--nx-interactive-disabled-border-color);
     }
   }
 }
@@ -113,7 +113,7 @@ svg.nx-radio-checkbox__control {
   &:focus {
     // less-nice IE11 focus style because IE11 doesn't support :focus-within
     margin-right: $nx-spacing-xxs;
-    outline: 1px solid $nx-focus-border-color;
+    outline: 1px solid var(--nx-interactive-focus-border-color);
     opacity: 1;
     position: static;
     vertical-align: 5px;
diff --git a/lib/src/base-styles/_nx-tables.scss b/lib/src/base-styles/_nx-tables.scss
index fdf7a1375e..238bf90080 100644
--- a/lib/src/base-styles/_nx-tables.scss
+++ b/lib/src/base-styles/_nx-tables.scss
@@ -71,13 +71,13 @@
     &.nx-clickable {
       &:hover {
         > .nx-cell {
-          background-color: $nx-hover-background;
+          background-color: var(--nx-interactive-hover-background-color);
         }
       }
 
       &.selected, &:active {
         > .nx-cell {
-          background-color: $nx-selected-background;
+          background-color: var(--nx-interactive-selected-background-color);
         }
       }
 
@@ -86,7 +86,7 @@
         outline: none;
 
         > .nx-cell {
-          border-color: $nx-focus-border-color;
+          border-color: var(--nx-interactive-focus-border-color);
         }
       }
     }
@@ -192,7 +192,7 @@
   border-top: none;
   box-sizing: border-box;
 
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   font-size: $nx-font-size-s;
   height: $nx-table-cell-header-height;
   text-align: left;
@@ -201,7 +201,7 @@
   vertical-align: middle;
 
   &:focus {
-    outline: 1px solid $nx-focus-border-color;
+    outline: 1px solid var(--nx-interactive-focus-border-color);
     outline-offset: -1px;
     box-shadow: $nx-focus-box-shadow;
   }
@@ -214,7 +214,7 @@
 
 
 .nx-cell--icon {
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   text-align: center;
 }
 
diff --git a/lib/src/base-styles/_nx-text-input.scss b/lib/src/base-styles/_nx-text-input.scss
index 97af956d7e..e54d0a5db9 100644
--- a/lib/src/base-styles/_nx-text-input.scss
+++ b/lib/src/base-styles/_nx-text-input.scss
@@ -22,7 +22,7 @@
 
     &:hover {
       .nx-text-input__box {
-        border-color: $nx-form-element-border-color;
+        border-color: var(--nx-form-field-border-color);
       }
     }
   }
@@ -46,8 +46,8 @@
   &.disabled {
     &, &.valid, &.invalid, &.pristine {
       .nx-text-input__box {
-        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);
       }
 
       .nx-text-input__invalid-message {
@@ -65,8 +65,8 @@
   @include container-horizontal;
 
   align-items: center;
-  background-color: #fff;
-  border: 1px solid $nx-form-element-border-color;
+  background-color: var(--nx-form-field-background-color);
+  border: 1px solid var(--nx-form-field-border-color);
   border-radius: $nx-border-radius;
   display: flex;
   padding: $nx-spacing-xs $nx-spacing-md;
@@ -85,7 +85,7 @@
 .nx-text-input__input {
   background-color: transparent;
   border: none;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   flex-grow: 1;
   font-size: $nx-font-size;
   line-height: $nx-line-height;
diff --git a/lib/src/base-styles/_nx-tile.scss b/lib/src/base-styles/_nx-tile.scss
index c794ab139a..be3a83556f 100644
--- a/lib/src/base-styles/_nx-tile.scss
+++ b/lib/src/base-styles/_nx-tile.scss
@@ -68,7 +68,7 @@ $nx-tile-padding: $nx-spacing-l;
   grid-row-start: 2;
   grid-row-end: 2;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-3;
   max-width: $nx-paragraph-width-maximum;
 }
diff --git a/lib/src/base-styles/_nx-typography.scss b/lib/src/base-styles/_nx-typography.scss
index 557d574c09..e43521559b 100644
--- a/lib/src/base-styles/_nx-typography.scss
+++ b/lib/src/base-styles/_nx-typography.scss
@@ -78,7 +78,7 @@
 .nx-body {
   @include regular();
 
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   font-size: $nx-font-size;
   line-height: $nx-line-height;
 }
@@ -87,7 +87,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-1;
   margin-bottom: $nx-spacing-l;
 }
@@ -96,7 +96,7 @@
   @include semi-bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-2;
   margin-bottom: $nx-spacing-md;
 }
@@ -105,7 +105,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-3;
   margin-bottom: $nx-spacing-md;
 }
@@ -114,7 +114,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-4;
   margin-bottom: $nx-spacing-xs;
   text-transform: uppercase;
diff --git a/lib/src/components/NxAccordion/NxAccordion.scss b/lib/src/components/NxAccordion/NxAccordion.scss
index 60c1db7a16..249e136a50 100644
--- a/lib/src/components/NxAccordion/NxAccordion.scss
+++ b/lib/src/components/NxAccordion/NxAccordion.scss
@@ -23,7 +23,7 @@
     @include container-horizontal;
     align-items: center;
     box-sizing: border-box;
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
     cursor: pointer;
     display: flex;
     font-weight: bold;
@@ -40,7 +40,7 @@
     outline: none;
 
     > .nx-accordion__summary-wrapper {
-      outline: 1px solid $nx-focus-border-color;
+      outline: 1px solid var(--nx-interactive-focus-border-color);
       outline-offset: -1px;
       box-shadow: $nx-focus-box-shadow;
     }
@@ -58,7 +58,7 @@
   @include bold();
   @include container-horizontal;
 
-  color: $nx-heading-color;
+  color: var(--nx-heading-color);
   font-size: $nx-font-size-heading-level-3;
   margin-bottom: $nx-spacing-md;
 }
diff --git a/lib/src/components/NxDropdown/NxDropdown.scss b/lib/src/components/NxDropdown/NxDropdown.scss
index 69c8875e7c..284dad4e68 100644
--- a/lib/src/components/NxDropdown/NxDropdown.scss
+++ b/lib/src/components/NxDropdown/NxDropdown.scss
@@ -17,7 +17,7 @@ $nx-dropdown-width: 250px;
 }
 
 .nx-dropdown__toggle {
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   display: flex;
   margin: 0;
   outline: none;
@@ -40,7 +40,7 @@ $nx-dropdown-width: 250px;
 
   &.disabled {
     .nx-icon {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
     }
   }
 
@@ -53,7 +53,7 @@ $nx-dropdown-width: 250px;
   @include container-vertical();
 
   background: $nx-off-white;
-  border: $nx-border-dark;
+  border: 1px solid var(--nx-border-color-stark);
   border-radius: $nx-border-radius;
   box-shadow: 0 2px 12px 0 rgba(74, 77, 113, 0.2),
               0 1px 2px 0 rgba(91, 95, 141, 0.2),
@@ -90,17 +90,17 @@ $nx-dropdown-width: 250px;
   background-color: transparent;
   border-radius: 0;
   box-sizing: border-box;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   outline: none;
   text-align: left;
   width: 100%;
 
   &:hover, &:focus {
-    background-color: $nx-hover-background;
+    background-color: var(--nx-interactive-hover-background-color);
   }
 
   &:active {
-    background-color:$nx-active-background;
+    background-color: var(--nx-interactive-active-background-color);
   }
 
   &.disabled {
diff --git a/lib/src/components/NxFilterInput/NxFilterInput.scss b/lib/src/components/NxFilterInput/NxFilterInput.scss
index 4be957b239..b8ad0dc0fd 100644
--- a/lib/src/components/NxFilterInput/NxFilterInput.scss
+++ b/lib/src/components/NxFilterInput/NxFilterInput.scss
@@ -21,7 +21,7 @@
 
   &.disabled {
     .nx-icon--filter-icons {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
       display: inline-block;
     }
   }
diff --git a/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss b/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss
index 59d86ab4f5..d8111ff001 100644
--- a/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss
+++ b/lib/src/components/NxNexusPageHeader/NxNexusPageHeader.scss
@@ -55,7 +55,7 @@
   .nx-product__brand {
     @include bold();
 
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
   }
 
   .nx-product__name {
@@ -73,7 +73,7 @@
     align-self: start;
     grid-area: bottom-row;
 
-    color: $nx-text-color;
+    color: var(--nx-text-color);
     font-size: $nx-font-size-xs;
   }
 
@@ -91,7 +91,7 @@
   }
 
   .nx-page-header__link {
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
     padding-bottom: $nx-spacing-xs;
 
     &:active, &.nx-page-header__link--current {
diff --git a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
index 21977c01ce..f6921179be 100644
--- a/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
+++ b/lib/src/components/NxPolicyThreatSlider/NxPolicyThreatSlider.scss
@@ -42,7 +42,7 @@
     background-color: $nx-white;
     border: 2px solid;
     border-radius: $nx-border-radius;
-    color: $nx-text-color-dark;
+    color: var(--nx-text-color-stark);
     font-size: $nx-font-size-s;
     font-weight: bold;
     height: $thumb-size;
@@ -56,7 +56,7 @@
     }
 
     &:focus {
-      border-color: $nx-focus-border-color;
+      border-color: var(--nx-interactive-focus-border-color);
       box-shadow: $nx-focus-box-shadow;
     }
 
diff --git a/lib/src/components/NxTabs/NxTabs.scss b/lib/src/components/NxTabs/NxTabs.scss
index d851b8ebad..e8005ed35c 100644
--- a/lib/src/components/NxTabs/NxTabs.scss
+++ b/lib/src/components/NxTabs/NxTabs.scss
@@ -57,7 +57,7 @@
     border-bottom-width: 1px;
     box-shadow: $nx-focus-box-shadow;
     margin-bottom: 0;
-    outline: solid 1px $nx-focus-border-color;
+    outline: solid 1px var(--nx-interactive-focus-border-color);
   }
 
   // a hidden copy of the text, always at semi-bold weight, to enfore consistent element width
diff --git a/lib/src/components/NxToggle/NxToggle.scss b/lib/src/components/NxToggle/NxToggle.scss
index 0c5ada5731..c1a7328b5f 100644
--- a/lib/src/components/NxToggle/NxToggle.scss
+++ b/lib/src/components/NxToggle/NxToggle.scss
@@ -15,7 +15,7 @@
 
   &.nx-toggle--disabled {
     &, &:hover {
-      color: $nx-text-color-disabled;
+      color: var(--nx-text-color-disabled);
       cursor: default;
 
       .nx-toggle__control {
@@ -30,8 +30,8 @@
 
   &:focus-within {
     .nx-toggle__control {
-      border-color: $nx-focus-border-color;
-      filter: drop-shadow(0 0 3px rgba($nx-focus-border-color, 0.4));
+      border-color: var(--nx-interactive-focus-border-color);
+      filter: drop-shadow(0 0 3px rgba(var(--nx-interactive-focus-border-color), 0.4));
 
       &:hover {
         border-color: $nx-grey-1100;
diff --git a/lib/src/components/NxTreeView/NxTreeView.scss b/lib/src/components/NxTreeView/NxTreeView.scss
index 0401a3f104..3ac30e94a3 100644
--- a/lib/src/components/NxTreeView/NxTreeView.scss
+++ b/lib/src/components/NxTreeView/NxTreeView.scss
@@ -61,7 +61,7 @@ $twisty-proportion-difference: 2px;
   background: none;
   border: none;
   box-sizing: border-box;
-  color: $nx-text-color-dark;
+  color: var(--nx-text-color-stark);
   cursor: pointer;
   display: flex;
   font: inherit;
@@ -78,8 +78,8 @@ $twisty-proportion-difference: 2px;
     outline: none;
 
     .nx-tree-view__twisty {
-      filter: drop-shadow(0 0 3px transparentize($nx-focus-border-color, 0.7));
-      stroke: $nx-focus-border-color;
+      filter: drop-shadow(0 0 3px var(--nx-interactive-focus-shadow-color));
+      stroke: var(--nx-interactive-focus-border-color);
 
       // This is intepreted in the SVG's coordinate space. The svg has a viewbox height of 512 and an on-page
       // height of 22px so this computes to 1 on-page pixel
@@ -124,7 +124,7 @@ $twisty-proportion-difference: 2px;
   border: 1px solid transparent;
   border-radius: $nx-border-radius;
   box-sizing: border-box;
-  color: $nx-text-color;
+  color: var(--nx-text-color);
   display: block;
   overflow: hidden;
 
@@ -166,7 +166,7 @@ button, a {
     }
 
     &:focus {
-      border-color: $nx-focus-border-color;
+      border-color: var(--nx-interactive-focus-border-color);
       box-shadow: $nx-focus-box-shadow;
       outline: none;
     }
diff --git a/lib/src/scss-shared/_nx-text-helpers.scss b/lib/src/scss-shared/_nx-text-helpers.scss
index 24a0723275..72c2ac2418 100644
--- a/lib/src/scss-shared/_nx-text-helpers.scss
+++ b/lib/src/scss-shared/_nx-text-helpers.scss
@@ -75,7 +75,7 @@
 %nx-code {
   @include monospace();
   background-color: $nx-grey-1;
-  border: $nx-border;
+  border: 1px solid var(--nx-border-color);
   border-radius: $nx-border-radius;
   color: #cd0028;
   padding: 1px 4px;
diff --git a/lib/src/scss-shared/_nx-variables.scss b/lib/src/scss-shared/_nx-variables.scss
index e0d7b035a1..5949b24a61 100644
--- a/lib/src/scss-shared/_nx-variables.scss
+++ b/lib/src/scss-shared/_nx-variables.scss
@@ -59,7 +59,7 @@ $nx-form-element-width-wide: 624px;
 $nx-submit-mask-z-index: 10;
 $nx-modal-backdrop-z-index: 1050;
 
-$nx-focus-box-shadow: 0 0 3px 1px transparentize($nx-focus-border-color, 0.7);
+$nx-focus-box-shadow: 0 0 3px 1px var(--nx-interactive-focus-shadow-color);
 
 $nx-table-cell-header-height: 48px;
 $nx-table-cell-vertical-padding: $nx-spacing-sm;

From 33786307c623cece86023434c3c38107f0ecf23b Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 13:44:34 -0500
Subject: [PATCH 11/19] A few more colors

---
 lib/src/base-styles/_nx-dark-theme.scss   | 5 +++++
 lib/src/base-styles/_nx-globals.scss      | 5 +++++
 lib/src/base-styles/_nx-page-header.scss  | 6 ++----
 lib/src/scss-shared/_nx-text-helpers.scss | 2 +-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/lib/src/base-styles/_nx-dark-theme.scss b/lib/src/base-styles/_nx-dark-theme.scss
index 8bc779e077..8fa0a5c04d 100644
--- a/lib/src/base-styles/_nx-dark-theme.scss
+++ b/lib/src/base-styles/_nx-dark-theme.scss
@@ -27,6 +27,11 @@
   --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-dark-theme {
diff --git a/lib/src/base-styles/_nx-globals.scss b/lib/src/base-styles/_nx-globals.scss
index 107af71bec..8ee0054b8e 100644
--- a/lib/src/base-styles/_nx-globals.scss
+++ b/lib/src/base-styles/_nx-globals.scss
@@ -102,4 +102,9 @@ $nx-scrollable-default-height: 400px;
   --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-page-header.scss b/lib/src/base-styles/_nx-page-header.scss
index 757fd23a8c..a8b9caf208 100644
--- 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;
diff --git a/lib/src/scss-shared/_nx-text-helpers.scss b/lib/src/scss-shared/_nx-text-helpers.scss
index 72c2ac2418..47300347f9 100644
--- a/lib/src/scss-shared/_nx-text-helpers.scss
+++ b/lib/src/scss-shared/_nx-text-helpers.scss
@@ -74,7 +74,7 @@
 
 %nx-code {
   @include monospace();
-  background-color: $nx-grey-1;
+  background-color: var(--nx-code-background-color);
   border: 1px solid var(--nx-border-color);
   border-radius: $nx-border-radius;
   color: #cd0028;

From 8c472c6a59d5df72348bc2a19d04158512ad0c7c Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 13:57:09 -0500
Subject: [PATCH 12/19] Alternative logo for dark mode

---
 .../sonatype-logo-with-hexagon-light-text.png   | Bin 0 -> 11673 bytes
 lib/src/base-styles/_nx-dark-theme.scss         |   8 ++++++++
 lib/src/base-styles/_nx-page-header.scss        |   4 ++++
 .../components/NxPageHeader/NxPageHeader.tsx    |  10 +++++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 lib/src/assets/img/sonatype-logo-with-hexagon-light-text.png

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
new file mode 100644
index 0000000000000000000000000000000000000000..bb36464ee3fe0ebe1226b91fef009ea51b05006e
GIT binary patch
literal 11673
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
Wowzr$TiE|O09tB#s>RAS5C02n#VK$A

literal 0
HcmV?d00001

diff --git a/lib/src/base-styles/_nx-dark-theme.scss b/lib/src/base-styles/_nx-dark-theme.scss
index 8fa0a5c04d..cc6e7efa5b 100644
--- a/lib/src/base-styles/_nx-dark-theme.scss
+++ b/lib/src/base-styles/_nx-dark-theme.scss
@@ -32,6 +32,14 @@
   --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 {
diff --git a/lib/src/base-styles/_nx-page-header.scss b/lib/src/base-styles/_nx-page-header.scss
index a8b9caf208..146aa781ac 100644
--- a/lib/src/base-styles/_nx-page-header.scss
+++ b/lib/src/base-styles/_nx-page-header.scss
@@ -103,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/components/NxPageHeader/NxPageHeader.tsx b/lib/src/components/NxPageHeader/NxPageHeader.tsx
index e637eecf9c..f38d5e1a59 100644
--- a/lib/src/components/NxPageHeader/NxPageHeader.tsx
+++ b/lib/src/components/NxPageHeader/NxPageHeader.tsx
@@ -12,6 +12,7 @@ import { Props, ProductInfo, propTypes } from './types';
 export { Props };
 
 const logoImg = require('../../assets/img/sonatype-logo-with-hexagon.png');
+const logoImgLightText = require('../../assets/img/sonatype-logo-with-hexagon-light-text.png');
 
 function HeaderProductInfo({ name, version }: ProductInfo) {
   return (
@@ -23,7 +24,14 @@ function HeaderProductInfo({ name, version }: ProductInfo) {
 }
 
 export default function NxPageHeader({ productInfo, ...otherProps }: Props) {
-  const logo = <img src={logoImg} className="nx-product__logo-image" alt="Sonatype"/>,
+  const logo = (
+        <>
+          <img src={logoImg} className="nx-product__logo-image" alt="Sonatype"/>
+          <img src={logoImgLightText}
+               className="nx-product__logo-image nx-product__logo-image--light-text"
+               alt="Sonatype"/>
+        </>
+      ),
       productInfoContent = productInfo ? <HeaderProductInfo { ...productInfo } /> : null;
 
   return <AbstractNxPageHeader { ...otherProps } { ...{ logo, productInfoContent } } />;

From 650be75eba4885a8b74eb47a59357a2c524da52b Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 13:57:25 -0500
Subject: [PATCH 13/19] Fix alert font color

---
 lib/src/base-styles/_nx-alert.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/src/base-styles/_nx-alert.scss b/lib/src/base-styles/_nx-alert.scss
index 312e45cdba..2a99cd46ff 100644
--- a/lib/src/base-styles/_nx-alert.scss
+++ b/lib/src/base-styles/_nx-alert.scss
@@ -17,6 +17,7 @@
   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;

From 67b288749cdff4a573336ef81082a56d67209970 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 13:57:40 -0500
Subject: [PATCH 14/19] Fix radio/checkbox bg

---
 lib/src/base-styles/_nx-radio-checkbox.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/src/base-styles/_nx-radio-checkbox.scss b/lib/src/base-styles/_nx-radio-checkbox.scss
index 95d9f5fc58..789befdc7e 100644
--- a/lib/src/base-styles/_nx-radio-checkbox.scss
+++ b/lib/src/base-styles/_nx-radio-checkbox.scss
@@ -69,8 +69,8 @@
 }
 
 .nx-radio-checkbox__control {
-  background-color: #fff;
-  border: 1px solid #d1d6f0;
+  background-color: var(--nx-form-field-background-color);
+  border: 1px solid var(--nx-form-field-border-color);
   flex-shrink: 0;
   margin-right: $nx-spacing-xs;
 }
@@ -78,8 +78,8 @@
 svg.nx-radio-checkbox__control {
   border-style: none;
   background: none;
-  fill: #fff;
-  stroke: #d1d6f0;
+  fill: var(--nx-form-field-background-color);
+  stroke: var(--nx-form-field-border-color);
 }
 
 .nx-radio-checkbox__content {

From b4116a561ab4aef7eaa3bf34ea633758f0ba9414 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 14:29:04 -0500
Subject: [PATCH 15/19] Add dark mode toggle

---
 gallery/src/PageHeader.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/gallery/src/PageHeader.tsx b/gallery/src/PageHeader.tsx
index 21f63c2cfb..ac140d6528 100644
--- 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,17 @@ function PageHeader() {
     version: packageJson.version
   };
 
-  return <NxPageHeader homeLink="#" productInfo={productInfo} />;
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(function() {
+    document.body.classList.toggle('nx-dark-theme', darkMode);
+  }, [darkMode]);
+
+  return (
+    <NxPageHeader homeLink="#" productInfo={productInfo}>
+      <NxToggle isChecked={darkMode} onChange={() => setDarkMode(!darkMode)}>Dark Mode</NxToggle>
+    </NxPageHeader>
+  );
 }
 
 export default PageHeader;

From 3d57adae2cb0d8c0fd1e0a5d6dc4588e1d6c5990 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 14:30:39 -0500
Subject: [PATCH 16/19] Add a few missing dark mode custom props

---
 lib/src/base-styles/_nx-dark-theme.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/src/base-styles/_nx-dark-theme.scss b/lib/src/base-styles/_nx-dark-theme.scss
index cc6e7efa5b..268028415f 100644
--- a/lib/src/base-styles/_nx-dark-theme.scss
+++ b/lib/src/base-styles/_nx-dark-theme.scss
@@ -8,9 +8,11 @@
   // 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)};

From f9d9c7e974a13694ba16cb715deb5890d5b25bd8 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 14:37:22 -0500
Subject: [PATCH 17/19] Persist dark mode

---
 gallery/src/PageHeader.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/gallery/src/PageHeader.tsx b/gallery/src/PageHeader.tsx
index ac140d6528..e47316dd4c 100644
--- a/gallery/src/PageHeader.tsx
+++ b/gallery/src/PageHeader.tsx
@@ -15,10 +15,11 @@ function PageHeader() {
     version: packageJson.version
   };
 
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState((window.localStorage.getItem('darkMode') === 'true') || false);
 
   useEffect(function() {
     document.body.classList.toggle('nx-dark-theme', darkMode);
+    window.localStorage.setItem('darkMode', darkMode.toString());
   }, [darkMode]);
 
   return (

From d03d3aa8659ae991cca9f22cc19bd13e5c3914cf Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 14:37:40 -0500
Subject: [PATCH 18/19] NxToggle theming

---
 lib/src/components/NxToggle/NxToggle.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/src/components/NxToggle/NxToggle.scss b/lib/src/components/NxToggle/NxToggle.scss
index c1a7328b5f..3746f4e6dd 100644
--- a/lib/src/components/NxToggle/NxToggle.scss
+++ b/lib/src/components/NxToggle/NxToggle.scss
@@ -19,11 +19,11 @@
       cursor: default;
 
       .nx-toggle__control {
-        background-color: $nx-grey-200;
-        border-color: $nx-grey-500;
+        background-color: var(--nx-interactive-disabled-background-color);
+        border-color: var(--nx-interactive-disabled-border-color);
       }
       .nx-toggle__indicator {
-        background-color: $nx-grey-500;
+        background-color: var(--nx-interactive-disabled-border-color);
       }
     }
   }
@@ -59,7 +59,7 @@
       background-color: $nx-blue-600;
 
       .nx-toggle__indicator {
-        background-color: #fff;
+        background-color: var(--nx-form-field-background-color);
         margin-left: 20px;
       }
     }
@@ -71,7 +71,7 @@
 }
 
 .nx-toggle__control {
-  background-color: #fff;
+  background-color: var(--nx-form-field-background-color);
   border: 1px solid $nx-blue-600;
   border-radius: 12px;
   box-sizing: border-box;

From 2e7a692bab9b1dd564e722244273b07f3c09cf30 Mon Sep 17 00:00:00 2001
From: Ross Pokorny <rpokorny@sonatype.com>
Date: Thu, 14 Jan 2021 15:05:47 -0500
Subject: [PATCH 19/19] Simplify dark mode localstorage handling

---
 gallery/src/PageHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gallery/src/PageHeader.tsx b/gallery/src/PageHeader.tsx
index e47316dd4c..150b0aa045 100644
--- a/gallery/src/PageHeader.tsx
+++ b/gallery/src/PageHeader.tsx
@@ -15,7 +15,7 @@ function PageHeader() {
     version: packageJson.version
   };
 
-  const [darkMode, setDarkMode] = useState((window.localStorage.getItem('darkMode') === 'true') || false);
+  const [darkMode, setDarkMode] = useState(window.localStorage.getItem('darkMode') === 'true');
 
   useEffect(function() {
     document.body.classList.toggle('nx-dark-theme', darkMode);