Visual design updates, cleaner dark theme #5278
Conversation
update browser-tools orbPreviews: documentation | landing | table | demo |
Fix NonIdealState testPreviews: documentation | landing | table | demo |
add NonIdealState example to demo-appPreviews: documentation | landing | table | demo |
| @@ -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> | |||
There was a problem hiding this comment.
This is a minor change to the generated DOM, but it should generally be backwards compatible (won't break existing layouts), and anyone using the React component will get the new styles.
| @@ -12,8 +12,10 @@ Markup: | |||
| <div class="#{$ns}-non-ideal-state-visual"> | |||
| <span class="#{$ns}-icon #{$ns}-icon-folder-open"></span> | |||
| </div> | |||
| <h4 class="#{$ns}-heading">This folder is empty</h4> | |||
| <div>Create a new file to populate the folder.</div> | |||
| <div class="#{$ns}-non-ideal-state-text"> | |||
There was a problem hiding this comment.
This is another minor change to the generated DOM, but I confirmed that the styles are compatible with the old markup when both title and description are present:
I'll have to make a small change to make it work when there's only a title... or we might just accept the small break to the CSS API in that case (we'll just see a 10px margin instead of a 20px one iff using the old markup).
| @@ -30,15 +33,51 @@ | |||
| padding: $tooltip-padding-vertical $tooltip-padding-horizontal; | |||
| } | |||
|
|
|||
| // override typography because we use a dark background | |||
There was a problem hiding this comment.
I'm planning to implement a more comprehensive typography refactor here to make all the text styles work better inside tooltips... coming in a separate PR
| @@ -1,66 +1,8 @@ | |||
| @import "~@blueprintjs/colors/lib/scss/colors"; | |||
|
|
|||
| $datepicker-day-background-color-hover: rgba($gray3, 0.15); | |||
There was a problem hiding this comment.
N.B. all these styles/variables got merged into the appropriate component files
Merge remote-tracking branch 'origin/develop' into ad/core-visual-updatesPreviews: documentation | landing | table | demo |
adidahiya
changed the title
Changes proposed in this pull request:
This PR implements a number of visual design updates to core components. Most of these changes affect the dark theme, with the goal of improving clarity across the UI.
Dark theme styles have shifted one step darker on the color palette, so the default background color is now $dark-gray2 instead of $dark-gray3. This darker background allows us to more consistently use white borders across our components; you'll notice this change in Cards, Dialogs, Buttons (default intent), and Popovers.
The border radius for rounded corners across all components has been reduced from 3px to 2px; this along with the flattening of Button backgrounds creates a more modern look & feel.
A few components got additional layout changes:
<h5>instead of<h4>Important things to note:
These changes may produce some inconsistencies in application UIs where dark theme elements were designed with the older existing visual paradigms. To mitigate these issues and bring your application up to date with Blueprint's more modern appearance, the most important things you can do are:
$pt-dark-app-background-color.$whiteborders / dividers instead of$blackones. Consider using the$pt-dark-divider-whitevariable.$pt-border-radiusvariable wherever you have rounded corners.Cardand elevation styles/classes/variables where appropriate.Reviewers should focus on:
Screenshot
Compare against demo-app on develop branch here.
Light theme
New horizontal NonIdealState:
Dark theme
New horizontal NonIdealState: