Visual design updates, cleaner dark theme (#5278)

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  browser-tools: circleci/browser-tools@1.2.5
+  browser-tools: circleci/browser-tools@1.3.0
 
 aliases:
   - &docker-node-image

packages/core/src/_typography.scss

@@ -343,7 +343,7 @@ Styleguide preformatted
   }
 
   .#{$ns}-dark & {
-    background: $dark-gray5;
+    background: $dark-gray4;
     box-shadow: $pt-dark-elevation-shadow-1;
     color: $pt-dark-text-color-muted;
   }

packages/core/src/common/_color-aliases.scss

@@ -7,7 +7,7 @@ $pt-intent-warning: $orange3 !default;
 $pt-intent-danger: $red3 !default;
 
 $pt-app-background-color: $light-gray5 !default;
-$pt-dark-app-background-color: $dark-gray3 !default;
+$pt-dark-app-background-color: $dark-gray2 !default;
 
 $pt-outline-color: rgba($blue3, 0.6);
 
@@ -35,7 +35,7 @@ $pt-dark-icon-color-selected: $pt-intent-primary !default;
 
 $pt-divider-black: rgba($black, 0.15) !default;
 $pt-dark-divider-black: rgba($black, 0.4) !default;
-$pt-dark-divider-white: rgba($white, 0.15) !default;
+$pt-dark-divider-white: rgba($white, 0.2) !default;
 
 $pt-code-text-color: $pt-text-color-muted !default;
 $pt-dark-code-text-color: $pt-dark-text-color-muted !default;

packages/core/src/common/_variables.scss

@@ -50,7 +50,7 @@ $pt-line-height: math.div($pt-grid-size * 1.8, $pt-font-size) + 0.0001 !default;
 
 // Grids & dimensions
 
-$pt-border-radius: floor(math.div($pt-grid-size, 3)) !default;
+$pt-border-radius: floor(math.div($pt-grid-size, 5)) !default;
 
 // Buttons
 $pt-button-height: $pt-grid-size * 3 !default;
@@ -79,12 +79,8 @@ $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
 $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
 
 // Elevations
-// all shadow lists must be the same length to avoid flicker in transitions.
-$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black,
-                        0 0 0 rgba($black, 0),
-                        0 0 0 rgba($black, 0) !default;
+$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black !default;
 $pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity),
-                        0 0 0 rgba($black, 0),
                         0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
 $pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity),
                         0 1px 1px rgba($black, $pt-drop-shadow-opacity),
@@ -96,19 +92,16 @@ $pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity),
                         0 4px 8px rgba($black, $pt-drop-shadow-opacity),
                         0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;
 
-$pt-dark-elevation-shadow-0: 0 0 0 1px $pt-dark-divider-black,
-                             0 0 0 rgba($black, 0),
-                             0 0 0 rgba($black, 0) !default;
-$pt-dark-elevation-shadow-1: border-shadow($pt-dark-border-shadow-opacity),
-                             0 0 0 rgba($black, 0),
-                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-2: border-shadow($pt-dark-border-shadow-opacity),
+$pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba($white, 0.2) !default;
+$pt-dark-elevation-shadow-1: inset 0 0 0 1px rgba($white, 0.2),
+                             0 1px 1px 0 rgba($black, $pt-dark-drop-shadow-opacity) !default;
+$pt-dark-elevation-shadow-2: inset 0 0 0 1px rgba($white, 0.2),
                              0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
                              0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-3: border-shadow($pt-dark-border-shadow-opacity),
+$pt-dark-elevation-shadow-3: inset 0 0 0 1px rgba($white, 0.2),
                              0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
                              0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-4: border-shadow($pt-dark-border-shadow-opacity),
+$pt-dark-elevation-shadow-4: inset 0 0 0 1px rgba($white, 0.2),
                              0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
                              0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
 
@@ -122,23 +115,33 @@ $pt-transition-duration: 100ms !default;
 $pt-input-box-shadow: inset 0 0 0 1px rgba($black, 0.2),
                       inset 0 1px 1px rgba($black, 0.5) !default;
 
-$pt-dialog-box-shadow: $pt-elevation-shadow-4 !default;
+$pt-dialog-box-shadow: $pt-elevation-shadow-3 !default;
 $pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
 $pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
+// Equivalent to $pt-dark-elevation-shadow-3, but swaps the outset border for an inset one
+$pt-toast-box-shadow: inset border-shadow(0.2),
+                      0 2px 4px rgba($black, $pt-drop-shadow-opacity),
+                      0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
 
 // Dark theme styles
 
-$pt-dark-input-box-shadow: inset 0 1px 0 0 rgba($black, 0.6),
-                           inset -1px 0 0 rgba($black, 0.6),
-                           inset 1px 0 0 rgba($black, 0.6),
-                           inset 0 -1px 0 0 $gray3 !default;
-
-$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default;
-$pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default;
-$pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default;
+$pt-dark-input-box-shadow: inset 0 0 0 1px rgba($white, 0.2),
+                           inset 0 -1px 1px 0 $gray3 !default;
 $pt-dark-input-intent-box-shadow-colors: (
   "primary": $blue4,
   "success": $green4,
   "warning": $orange4,
   "danger" : $red4,
 ) !default;
+
+$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-3 !default;
+// Dark popover borders are outset, so they can't use rgba($white, 0.3).
+// They also can't use $gray1 because its blue tint is noticeably different from other white borders in dark theme.
+// Instead, we create a new color tuned to match semi-transparent white borders on a dark theme background.
+$pt-dark-popover-border-color: hsl(215deg, 3%, 38%) !default;
+$pt-dark-popover-box-shadow: 0 0 0 1px $pt-dark-popover-border-color,
+                             $pt-dark-elevation-shadow-3 !default;
+// Equivalent to $pt-dark-elevation-shadow-3 without the inset border
+$pt-dark-tooltip-box-shadow: 0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
+                             0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
+$pt-dark-toast-box-shadow: $pt-dark-elevation-shadow-3 !default;

packages/core/src/common/classes.ts

@@ -208,6 +208,7 @@ export const NAVBAR_DIVIDER = `${NAVBAR}-divider`;
 
 export const NON_IDEAL_STATE = `${NS}-non-ideal-state`;
 export const NON_IDEAL_STATE_VISUAL = `${NON_IDEAL_STATE}-visual`;
+export const NON_IDEAL_STATE_TEXT = `${NON_IDEAL_STATE}-text`;
 
 export const NUMERIC_INPUT = `${NS}-numeric-input`;
 

packages/core/src/components/button/_common.scss

@@ -23,42 +23,17 @@ CSS `border` property issues:
 */
 $button-box-shadow:
   inset 0 0 0 $button-border-width rgba($black, 0.2),
-  inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
+  0 1px 2px rgba($black, 0.1) !default;
 $button-box-shadow-active:
   inset 0 0 0 $button-border-width rgba($black, 0.2),
-  inset 0 1px 2px rgba($black, 0.2) !default;
-$button-intent-box-shadow:
-  inset 0 0 0 $button-border-width rgba($black, 0.4),
-  inset 0 (-$button-border-width) 0 rgba($black, 0.2) !default;
-$button-intent-box-shadow-active:
-  inset 0 0 0 $button-border-width rgba($black, 0.4),
-  inset 0 1px 2px rgba($black, 0.2) !default;
-
-/*
-Overlay shadows are used for default buttons
-floating on top of other elements. This way, the
-shadows blend with the colors beneath it.
-Switches and slider handles both use these variables.
-*/
-$button-box-shadow-overlay:
-  0 0 0 $button-border-width rgba($black, 0.5),
-  0 1px 1px rgba($black, 0.5);
-$button-box-shadow-overlay-active:
-  0 0 0 $button-border-width rgba($black, 0.2),
-  inset 0 1px 1px rgba($black, 0.1) !default;
+  0 1px 2px rgba($black, 0.2) !default;
 
 $dark-button-box-shadow:
-  inset 0 0 0 $button-border-width rgba($black, 0.8) !default;
+  inset 0 0 0 $button-border-width rgba($white, 0.1),
+  0 1px 2px rgba($black, 0.2) !default;
 $dark-button-box-shadow-active:
-  inset 0 0 0 $button-border-width rgba($black, 0.8) !default;
-$dark-button-intent-box-shadow:
-  inset 0 0 0 $button-border-width rgba($black, 0.8) !default;
-$dark-button-intent-box-shadow-active:
-  inset 0 0 0 $button-border-width rgba($black, 0.8) !default;
-
-$button-gradient: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.05)) !default;
-$button-intent-gradient: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.05)) !default;
-$dark-button-gradient: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.05)) !default;
+  inset 0 0 0 $button-border-width rgba($white, 0.1),
+  0 1px 2px rgba($black, 0.4) !default;
 
 $button-color-disabled: $pt-text-color-disabled !default;
 $button-background-color: $light-gray5 !default;
@@ -68,9 +43,9 @@ $button-background-color-disabled: rgba($light-gray1, 0.5) !default;
 $button-background-color-active-disabled: rgba($light-gray1, 0.7) !default;
 $button-intent-color-disabled: rgba($white, 0.6);
 $dark-button-color-disabled: $pt-dark-text-color-disabled !default;
-$dark-button-background-color: $dark-gray5 !default;
-$dark-button-background-color-hover: $dark-gray4 !default;
-$dark-button-background-color-active: $dark-gray2 !default;
+$dark-button-background-color: $dark-gray4 !default;
+$dark-button-background-color-hover: $dark-gray3 !default;
+$dark-button-background-color-active: $dark-gray1 !default;
 $dark-button-background-color-disabled: rgba($dark-gray5, 0.5) !default;
 $dark-button-background-color-active-disabled: rgba($dark-gray5, 0.7) !default;
 $dark-button-intent-color-disabled: rgba($white, 0.3);
@@ -89,10 +64,10 @@ $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
 // "intent": (default, hover, active colors)
 $button-intents: (
-  "primary": ($pt-intent-primary, $blue2, $blue1),
-  "success": ($pt-intent-success, $green2, $green1),
-  "warning": ($pt-intent-warning, $orange2, $orange1),
-  "danger": ($pt-intent-danger, $red2, $red1)
+  "primary": ($blue3, $blue2, $blue1),
+  "success": ($green3, $green2, $green1),
+  "warning": ($orange3, $orange2, $orange1),
+  "danger": ($red3, $red2, $red1)
 ) !default;
 
 @mixin pt-button-layout() {
@@ -157,26 +132,23 @@ $button-intents: (
 
 @mixin pt-button-default-colors() {
   background-color: $button-background-color;
-  background-image: $button-gradient;
   box-shadow: $button-box-shadow;
   color: $pt-text-color;
 }
 
 @mixin pt-button-hover() {
   background-clip: padding-box;
   background-color: $button-background-color-hover;
-  box-shadow: $button-box-shadow;
+  box-shadow: $button-box-shadow-active;
 }
 
 @mixin pt-button-active() {
   background-color: $button-background-color-active;
-  background-image: none;
   box-shadow: $button-box-shadow-active;
 }
 
 @mixin pt-button-disabled() {
   background-color: $button-background-color-disabled;
-  background-image: none;
   box-shadow: none;
   color: $button-color-disabled;
   cursor: not-allowed;
@@ -185,8 +157,7 @@ $button-intents: (
 
 @mixin pt-button-intent($default-color, $hover-color, $active-color) {
   background-color: $default-color;
-  background-image: $button-intent-gradient;
-  box-shadow: $button-intent-box-shadow;
+  box-shadow: $button-box-shadow;
   color: $white;
 
   &:hover,
@@ -197,14 +168,13 @@ $button-intents: (
 
   &:hover {
     background-color: $hover-color;
-    box-shadow: $button-intent-box-shadow;
+    box-shadow: $button-box-shadow-active;
   }
 
   &:active,
   &.#{$ns}-active {
     background-color: $active-color;
-    background-image: none;
-    box-shadow: $button-intent-box-shadow-active;
+    box-shadow: $button-box-shadow-active;
   }
 
   &:disabled,
@@ -215,7 +185,6 @@ $button-intents: (
 
 @mixin pt-button-intent-disabled($default-color) {
   background-color: rgba($default-color, 0.5);
-  background-image: none;
   border-color: transparent;
   box-shadow: none;
   color: $button-intent-color-disabled;
@@ -257,39 +226,36 @@ $button-intents: (
 
 @mixin pt-dark-button-default-colors() {
   background-color: $dark-button-background-color;
-  background-image: $dark-button-gradient;
   box-shadow: $dark-button-box-shadow;
   color: $pt-dark-text-color;
 }
 
 @mixin pt-dark-button-hover() {
   background-color: $dark-button-background-color-hover;
-  box-shadow: $dark-button-box-shadow;
+  box-shadow: $dark-button-box-shadow-active;
 }
 
 @mixin pt-dark-button-active() {
   background-color: $dark-button-background-color-active;
-  background-image: none;
   box-shadow: $dark-button-box-shadow-active;
 }
 
 @mixin pt-dark-button-disabled() {
   background-color: $dark-button-background-color-disabled;
-  background-image: none;
   box-shadow: none;
   color: $dark-button-color-disabled;
 }
 
 @mixin pt-dark-button-intent() {
-  box-shadow: $dark-button-intent-box-shadow;
+  box-shadow: $dark-button-box-shadow;
 
   &:hover {
-    box-shadow: $dark-button-intent-box-shadow;
+    box-shadow: $dark-button-box-shadow;
   }
 
   &:active,
   &.#{$ns}-active {
-    box-shadow: $dark-button-intent-box-shadow-active;
+    box-shadow: $dark-button-box-shadow-active;
   }
 
   &:disabled,
@@ -299,7 +265,6 @@ $button-intents: (
 }
 
 @mixin pt-dark-button-intent-disabled() {
-  background-image: none;
   box-shadow: none;
   color: $dark-button-intent-color-disabled;
 }

packages/core/src/components/card/_card.scss

@@ -24,7 +24,7 @@ Styleguide card
 $card-padding: $pt-grid-size * 2 !default;
 
 $card-background-color: $white !default;
-$dark-card-background-color: $dark-gray4 !default;
+$dark-card-background-color: $dark-gray3 !default;
 
 $elevation-shadows: (
   $pt-elevation-shadow-0

packages/core/src/components/dialog/_dialog.scss

@@ -1,6 +1,7 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the Apache License, Version 2.0.
 
+@use "sass:math";
 @import "~@blueprintjs/icons/lib/scss/variables";
 @import "../../common/mixins";
 @import "../../common/react-transition";
@@ -15,7 +16,7 @@ Markup:
   <div class="#{$ns}-dialog">
     <div class="#{$ns}-dialog-header">
       <span class="#{$ns}-icon-large #{$ns}-icon-inbox"></span>
-      <h4 class="#{$ns}-heading">Dialog header</h4>
+      <h5 class="#{$ns}-heading">Dialog header</h5>
       <button aria-label="Close" class="#{$ns}-dialog-close-button #{$ns}-button #{$ns}-minimal #{$ns}-icon-cross"></button>
     </div>
     <div class="#{$ns}-dialog-body">
@@ -36,7 +37,7 @@ Styleguide dialog
 
 $dialog-border-radius: $pt-border-radius * 2 !default;
 $dialog-margin: ($pt-grid-size * 3) 0 !default;
-$dialog-padding: $pt-grid-size * 2 !default;
+$dialog-padding: $pt-grid-size * 1.5 !default;
 
 .#{$ns}-dialog-container {
   $dialog-transition-props: (
@@ -94,30 +95,31 @@ $dialog-padding: $pt-grid-size * 2 !default;
   flex: 0 0 auto;
   min-height: $pt-icon-size-large + $dialog-padding;
   padding-left: $dialog-padding;
-  padding-right: $dialog-padding * 0.25;
+  padding-right: math.div($pt-grid-size, 2);
   z-index: 0;
 
   .#{$ns}-icon-large,
   .#{$ns}-icon {
     color: $pt-icon-color;
     flex: 0 0 auto;
+    margin-left: -3px;
     margin-right: $dialog-padding * 0.5;
   }
 
   .#{$ns}-heading {
     @include overflow-ellipsis();
     flex: 1 1 auto;
     line-height: inherit;
-    margin: 0;
+    margin: $pt-grid-size 0;
 
     &:last-child {
       margin-right: $dialog-padding;
     }
   }
 
   .#{$ns}-dark & {
-    background: $dark-gray4;
-    box-shadow: 0 1px 0 $pt-dark-divider-black;
+    background: $dark-gray3;
+    box-shadow: inset 0 0 0 1px $pt-dark-divider-white;
 
     .#{$ns}-icon-large,
     .#{$ns}-icon {