From 4bf634ccf3112855b2e6f94046f5a3cbc89cf93f Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Fri, 23 Feb 2024 11:20:12 -0500
Subject: [PATCH 1/3] [core] feat: more dark theme color aliases

---
 packages/core/src/common/_color-aliases.scss  |  6 ++++
 .../src/components/card/_card-variables.scss  |  2 +-
 .../core/src/components/navbar/_navbar.scss   |  5 +--
 .../components/panel-stack/_panel-stack.scss  |  5 +--
 .../panel-stack2/_panel-stack2.scss           |  5 +--
 packages/docs-app/src/styles/_welcome.scss    |  4 ---
 packages/docs-theme/src/styles/_api.scss      |  7 ----
 packages/docs-theme/src/styles/_examples.scss | 34 ++++++++++---------
 packages/docs-theme/src/styles/_layout.scss   |  8 ++---
 packages/docs-theme/src/styles/_navbar.scss   |  2 +-
 packages/docs-theme/src/styles/_props.scss    |  1 +
 .../docs-theme/src/styles/_variables.scss     | 10 +-----
 12 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/packages/core/src/common/_color-aliases.scss b/packages/core/src/common/_color-aliases.scss
index 42c22a1244..8309548b8d 100644
--- a/packages/core/src/common/_color-aliases.scss
+++ b/packages/core/src/common/_color-aliases.scss
@@ -18,6 +18,12 @@ $pt-intent-danger: $red3 !default;
 $pt-app-background-color: $light-gray5 !default;
 $pt-dark-app-background-color: $dark-gray2 !default;
 
+$pt-app-secondary-background-color: $white !default;
+$pt-dark-app-secondary-background-color: $dark-gray1 !default; // will be changing to $black in a future version of Blueprint
+
+$pt-app-elevated-background-color: $light-gray4 !default;
+$pt-dark-app-elevated-background-color: $dark-gray3 !default; // will be changing to $dark-gray2 in a future version of Blueprint
+
 $pt-outline-color: rgba($blue3, 0.6) !default;
 
 $pt-text-color: $dark-gray1 !default;
diff --git a/packages/core/src/components/card/_card-variables.scss b/packages/core/src/components/card/_card-variables.scss
index 4b543fa99f..1104fd139b 100644
--- a/packages/core/src/components/card/_card-variables.scss
+++ b/packages/core/src/components/card/_card-variables.scss
@@ -7,7 +7,7 @@ $card-padding: $pt-grid-size * 2 !default;
 $card-padding-compact: $pt-grid-size * 1.5 !default;
 
 $card-background-color: $white !default;
-$dark-card-background-color: $dark-gray3 !default;
+$dark-card-background-color: $pt-dark-app-elevated-background-color !default;
 
 $card-list-border-width: 1px !default;
 
diff --git a/packages/core/src/components/navbar/_navbar.scss b/packages/core/src/components/navbar/_navbar.scss
index 2f46fe83c5..dfc91a2e94 100644
--- a/packages/core/src/components/navbar/_navbar.scss
+++ b/packages/core/src/components/navbar/_navbar.scss
@@ -2,6 +2,7 @@
 // Licensed under the Apache License, Version 2.0.
 
 @import "../../common/variables";
+@import "../card/card-variables";
 
 /*
 Navbars
@@ -29,8 +30,8 @@ Styleguide navbar
 
 $navbar-padding: $pt-grid-size * 1.5 !default;
 
-$navbar-background-color: $white !default;
-$dark-navbar-background-color: $dark-gray4 !default;
+$navbar-background-color: $card-background-color !default;
+$dark-navbar-background-color: $dark-card-background-color !default;
 
 .#{$ns}-navbar {
   background-color: $navbar-background-color;
diff --git a/packages/core/src/components/panel-stack/_panel-stack.scss b/packages/core/src/components/panel-stack/_panel-stack.scss
index b62481ff30..827fafadf6 100644
--- a/packages/core/src/components/panel-stack/_panel-stack.scss
+++ b/packages/core/src/components/panel-stack/_panel-stack.scss
@@ -3,6 +3,7 @@
 
 @import "../../common/variables";
 @import "@blueprintjs/core/src/common/react-transition";
+@import "../card/card-variables";
 
 .#{$ns}-panel-stack {
   overflow: hidden;
@@ -47,7 +48,7 @@
 .#{$ns}-panel-stack-view {
   @include position-all(absolute, 0);
 
-  background-color: $white;
+  background-color: $card-background-color;
   border-right: 1px solid $pt-divider-black;
   display: flex;
   flex-direction: column;
@@ -58,7 +59,7 @@
   z-index: 1;
 
   .#{$ns}-dark & {
-    background-color: $dark-gray4;
+    background-color: $dark-card-background-color;
   }
 
   &:nth-last-child(n + 4) {
diff --git a/packages/core/src/components/panel-stack2/_panel-stack2.scss b/packages/core/src/components/panel-stack2/_panel-stack2.scss
index 7ca1c621b4..161db86a83 100644
--- a/packages/core/src/components/panel-stack2/_panel-stack2.scss
+++ b/packages/core/src/components/panel-stack2/_panel-stack2.scss
@@ -3,6 +3,7 @@
 
 @import "../../common/variables";
 @import "@blueprintjs/core/src/common/react-transition";
+@import "../card/card-variables";
 
 .#{$ns}-panel-stack2 {
   overflow: hidden;
@@ -47,7 +48,7 @@
 .#{$ns}-panel-stack2-view {
   @include position-all(absolute, 0);
 
-  background-color: $white;
+  background-color: $card-background-color;
   border-right: 1px solid $pt-divider-black;
   display: flex;
   flex-direction: column;
@@ -58,7 +59,7 @@
   z-index: 1;
 
   .#{$ns}-dark & {
-    background-color: $dark-gray4;
+    background-color: $dark-card-background-color;
   }
 
   &:nth-last-child(n + 4) {
diff --git a/packages/docs-app/src/styles/_welcome.scss b/packages/docs-app/src/styles/_welcome.scss
index d05dc8b45c..cbc76b847f 100644
--- a/packages/docs-app/src/styles/_welcome.scss
+++ b/packages/docs-app/src/styles/_welcome.scss
@@ -23,8 +23,4 @@
       color: $pt-dark-icon-color !important;
     }
   }
-
-  .#{$ns}-dark & .#{$ns}-card {
-    background: $dark-gray3;
-  }
 }
diff --git a/packages/docs-theme/src/styles/_api.scss b/packages/docs-theme/src/styles/_api.scss
index d3986e991c..46f9810130 100644
--- a/packages/docs-theme/src/styles/_api.scss
+++ b/packages/docs-theme/src/styles/_api.scss
@@ -36,13 +36,6 @@
       padding-right: $pt-grid-size * 2;
     }
   }
-
-  &.#{$ns}-dark {
-    .docs-modifiers {
-      background-color: $dark-sidebar-background-color;
-      box-shadow: $pt-dark-elevation-shadow-4;
-    }
-  }
 }
 
 .docs-code {
diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss
index c8ee8e7cee..47fbe34328 100644
--- a/packages/docs-theme/src/styles/_examples.scss
+++ b/packages/docs-theme/src/styles/_examples.scss
@@ -7,14 +7,6 @@ $example-frame-spacing: $pt-grid-size;
 $example-frame-border-radius: $pt-border-radius * 2;
 $example-spacing: $pt-grid-size * 4;
 
-$example-background-color: $white;
-$code-background-color: $light-gray4;
-$options-background-color: $light-gray4;
-
-$dark-example-background-color: $dark-gray2;
-$dark-code-background-color: $dark-gray4;
-$dark-options-background-color: $dark-gray4;
-
 // full-bleed wrapper for example
 .docs-example-frame {
   margin-top: $content-padding * 2;
@@ -42,12 +34,17 @@ $dark-options-background-color: $dark-gray4;
     @include pt-flex-container(row, $pt-grid-size * 4);
     justify-content: center;
     max-width: unset;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }
 
 .docs-example {
   align-items: center;
-  background: $example-background-color;
+  background: $pt-app-secondary-background-color;
   border-radius: $example-frame-border-radius;
   display: flex;
   flex: 1 1 auto;
@@ -59,7 +56,7 @@ $dark-options-background-color: $dark-gray4;
   padding: $example-spacing * 0.5;
 
   .#{$ns}-dark & {
-    background: $dark-example-background-color;
+    background: $pt-dark-app-secondary-background-color;
   }
 
   > * {
@@ -68,7 +65,7 @@ $dark-options-background-color: $dark-gray4;
 }
 
 .docs-example-options {
-  background-color: $options-background-color;
+  background-color: $pt-app-elevated-background-color;
   border-radius: $example-frame-border-radius;
   flex: 0 0 auto;
   padding: $pt-grid-size * 2;
@@ -89,7 +86,11 @@ $dark-options-background-color: $dark-gray4;
   }
 
   .#{$ns}-dark & {
-    background-color: $dark-options-background-color;
+    background-color: $pt-dark-app-elevated-background-color;
+
+    .#{$ns}-segmented-control {
+      background-color: $pt-dark-app-background-color;
+    }
   }
 }
 
@@ -98,13 +99,14 @@ $dark-options-background-color: $dark-gray4;
 
   .editor,
   .#{$ns}-docs-code-block {
-    background: $code-background-color;
+    background: $pt-app-elevated-background-color;
     border-radius: $example-frame-border-radius;
     box-shadow: none;
     margin: 0;
 
     .#{$ns}-dark & {
-      background: $dark-code-background-color;
+      background: $pt-dark-app-elevated-background-color;
+      border: none;
       box-shadow: none;
     }
   }
@@ -122,10 +124,10 @@ $dark-options-background-color: $dark-gray4;
   }
 
   &:not(:hover):not(:active) {
-    background-color: $code-background-color;
+    background-color: $pt-app-elevated-background-color;
 
     .#{$ns}-dark & {
-      background-color: $dark-code-background-color;
+      background-color: $pt-dark-app-elevated-background-color;
     }
   }
 }
diff --git a/packages/docs-theme/src/styles/_layout.scss b/packages/docs-theme/src/styles/_layout.scss
index a2c3db5e45..da03681aaf 100644
--- a/packages/docs-theme/src/styles/_layout.scss
+++ b/packages/docs-theme/src/styles/_layout.scss
@@ -34,10 +34,10 @@ Page layout elements
 */
 
 .docs-root {
-  background-color: $content-background-color;
+  background-color: $pt-app-background-color;
 
   &.#{$ns}-dark {
-    background-color: $dark-content-background-color;
+    background-color: $pt-dark-app-background-color;
   }
 }
 
@@ -83,12 +83,12 @@ Page layout elements
 
 .docs-content-wrapper {
   align-items: flex-start;
-  background-color: $content-background-color;
+  background-color: $pt-app-background-color;
   flex-basis: $content-width;
   outline: none;
 
   .#{$ns}-dark & {
-    background-color: $dark-content-background-color;
+    background-color: $pt-dark-app-background-color;
   }
 }
 
diff --git a/packages/docs-theme/src/styles/_navbar.scss b/packages/docs-theme/src/styles/_navbar.scss
index 25d12c61c3..9957c51c07 100644
--- a/packages/docs-theme/src/styles/_navbar.scss
+++ b/packages/docs-theme/src/styles/_navbar.scss
@@ -24,7 +24,7 @@ $nav-divider-offset: $pt-grid-size * 5;
   padding-left: $nav-divider-offset + 4px;
 
   &:hover {
-    @include divider-gradient($content-background-color, $dark-content-background-color);
+    @include divider-gradient($pt-app-background-color, $pt-dark-app-background-color);
     color: inherit;
   }
 }
diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss
index fe58ed735f..417e281077 100644
--- a/packages/docs-theme/src/styles/_props.scss
+++ b/packages/docs-theme/src/styles/_props.scss
@@ -5,6 +5,7 @@
   /* stylelint-disable declaration-no-important */
   background: none !important;
   box-shadow: none !important;
+  border: none !important;
   color: inherit !important;
   font-size: small;
   font-weight: 600;
diff --git a/packages/docs-theme/src/styles/_variables.scss b/packages/docs-theme/src/styles/_variables.scss
index aefa78d664..86acfc0ed4 100644
--- a/packages/docs-theme/src/styles/_variables.scss
+++ b/packages/docs-theme/src/styles/_variables.scss
@@ -11,15 +11,7 @@ $container-padding: $pt-grid-size * 0.5;
 $sidebar-width: $pt-grid-size * 27;
 $sidebar-padding: $pt-grid-size * 1.5;
 $sidebar-background-color: $white;
-$dark-sidebar-background-color: $dark-gray4;
+$dark-sidebar-background-color: $dark-gray4; // will change to $dark-gray3 in a future version of Blueprint
 
 $content-width: $container-width - $sidebar-width;
 $content-padding: $pt-grid-size * 2;
-$content-background-color: $light-gray5;
-$dark-content-background-color: $dark-gray3;
-
-$code-block-background-color: $white;
-$code-block-text-color: $dark-gray1;
-
-$dark-code-block-background-color: $dark-gray2;
-$dark-code-block-text-color: $gray5;

From 7d36cd0b2efefce106aa6f8ebe304c6f2aef9eaa Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Fri, 23 Feb 2024 13:50:31 -0500
Subject: [PATCH 2/3] fix lint

---
 packages/core/src/common/_color-aliases.scss   | 4 ++--
 packages/docs-theme/src/styles/_props.scss     | 2 +-
 packages/docs-theme/src/styles/_variables.scss | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/common/_color-aliases.scss b/packages/core/src/common/_color-aliases.scss
index 8309548b8d..4b7f3f98e7 100644
--- a/packages/core/src/common/_color-aliases.scss
+++ b/packages/core/src/common/_color-aliases.scss
@@ -19,10 +19,10 @@ $pt-app-background-color: $light-gray5 !default;
 $pt-dark-app-background-color: $dark-gray2 !default;
 
 $pt-app-secondary-background-color: $white !default;
-$pt-dark-app-secondary-background-color: $dark-gray1 !default; // will be changing to $black in a future version of Blueprint
+$pt-dark-app-secondary-background-color: $dark-gray1 !default;
 
 $pt-app-elevated-background-color: $light-gray4 !default;
-$pt-dark-app-elevated-background-color: $dark-gray3 !default; // will be changing to $dark-gray2 in a future version of Blueprint
+$pt-dark-app-elevated-background-color: $dark-gray3 !default;
 
 $pt-outline-color: rgba($blue3, 0.6) !default;
 
diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss
index 417e281077..0903e7ae91 100644
--- a/packages/docs-theme/src/styles/_props.scss
+++ b/packages/docs-theme/src/styles/_props.scss
@@ -4,8 +4,8 @@
 .docs-prop-details code {
   /* stylelint-disable declaration-no-important */
   background: none !important;
-  box-shadow: none !important;
   border: none !important;
+  box-shadow: none !important;
   color: inherit !important;
   font-size: small;
   font-weight: 600;
diff --git a/packages/docs-theme/src/styles/_variables.scss b/packages/docs-theme/src/styles/_variables.scss
index 86acfc0ed4..7af6dee348 100644
--- a/packages/docs-theme/src/styles/_variables.scss
+++ b/packages/docs-theme/src/styles/_variables.scss
@@ -11,7 +11,7 @@ $container-padding: $pt-grid-size * 0.5;
 $sidebar-width: $pt-grid-size * 27;
 $sidebar-padding: $pt-grid-size * 1.5;
 $sidebar-background-color: $white;
-$dark-sidebar-background-color: $dark-gray4; // will change to $dark-gray3 in a future version of Blueprint
+$dark-sidebar-background-color: $dark-gray4;
 
 $content-width: $container-width - $sidebar-width;
 $content-padding: $pt-grid-size * 2;

From bf554ce524159cce008868230a5d08ef110c3814 Mon Sep 17 00:00:00 2001
From: svc-changelog <svc-changelog@palantir.com>
Date: Fri, 23 Feb 2024 18:52:46 +0000
Subject: [PATCH 3/3] Add generated changelog entries

---
 packages/core/changelog/@unreleased/pr-6724.v2.yml    | 11 +++++++++++
 .../docs-app/changelog/@unreleased/pr-6724.v2.yml     |  5 +++++
 .../docs-theme/changelog/@unreleased/pr-6724.v2.yml   |  5 +++++
 3 files changed, 21 insertions(+)
 create mode 100644 packages/core/changelog/@unreleased/pr-6724.v2.yml
 create mode 100644 packages/docs-app/changelog/@unreleased/pr-6724.v2.yml
 create mode 100644 packages/docs-theme/changelog/@unreleased/pr-6724.v2.yml

diff --git a/packages/core/changelog/@unreleased/pr-6724.v2.yml b/packages/core/changelog/@unreleased/pr-6724.v2.yml
new file mode 100644
index 0000000000..47d3aec7ae
--- /dev/null
+++ b/packages/core/changelog/@unreleased/pr-6724.v2.yml
@@ -0,0 +1,11 @@
+type: feature
+feature:
+  description: |-
+    Add more dark theme color alias variables to prepare for dark theme adjustments coming in a future minor version of Blueprint:
+
+    - `$pt-app-secondary-background-color`
+    - `$pt-dark-app-secondary-background-color`
+    - `$pt-app-elevated-background-color`
+    - `$pt-dark-app-elevated-background-color`
+  links:
+  - https://github.com/palantir/blueprint/pull/6724
diff --git a/packages/docs-app/changelog/@unreleased/pr-6724.v2.yml b/packages/docs-app/changelog/@unreleased/pr-6724.v2.yml
new file mode 100644
index 0000000000..27254a9564
--- /dev/null
+++ b/packages/docs-app/changelog/@unreleased/pr-6724.v2.yml
@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: Use new dark theme color alias variables in docs example styling
+  links:
+  - https://github.com/palantir/blueprint/pull/6724
diff --git a/packages/docs-theme/changelog/@unreleased/pr-6724.v2.yml b/packages/docs-theme/changelog/@unreleased/pr-6724.v2.yml
new file mode 100644
index 0000000000..5a0ca8214d
--- /dev/null
+++ b/packages/docs-theme/changelog/@unreleased/pr-6724.v2.yml
@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: Use new dark theme color alias variables
+  links:
+  - https://github.com/palantir/blueprint/pull/6724