[core] feat: more dark theme color aliases (#6724)

Co-authored-by: svc-changelog <[email protected]>
palantir · Feb 23, 2024 · 39485bb · 39485bb · adidahiya · Feb 23, 2024
1 parent 5481181
commit 39485bb
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 47 deletions.
diff --git a/packages/core/changelog/@unreleased/pr-6724.v2.yml 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/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;
+
+$pt-app-elevated-background-color: $light-gray4 !default;
+$pt-dark-app-elevated-background-color: $dark-gray3 !default;
+
 $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
@@ -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
@@ -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
@@ -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
@@ -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/changelog/@unreleased/pr-6724.v2.yml 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-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/changelog/@unreleased/pr-6724.v2.yml 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -4,6 +4,7 @@
 .docs-prop-details code {
   /* stylelint-disable declaration-no-important */
   background: none !important;
+  border: none !important;
   box-shadow: none !important;
   color: inherit !important;
   font-size: small;

diff --git a/packages/docs-theme/src/styles/_variables.scss b/packages/docs-theme/src/styles/_variables.scss
@@ -15,11 +15,3 @@ $dark-sidebar-background-color: $dark-gray4;
 
 $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;