Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual design updates, cleaner dark theme #5278

Merged
merged 26 commits into from
May 4, 2022
Merged

Conversation

adidahiya
Copy link
Contributor

@adidahiya adidahiya commented May 2, 2022

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:

  • Dialog headers now use a smaller font size, <h5> instead of <h4>
  • Non-ideal state icons and text are more muted, and there is now a horizontal layout option

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:

  • In dark theme
    • Darken background colors one step on the color palette. Even better if you use variables like $pt-dark-app-background-color.
    • Switch to semi-transparent $white borders / dividers instead of $black ones. Consider using the $pt-dark-divider-white variable.
  • In both light + dark themes
    • Ensure you are using the $pt-border-radius variable wherever you have rounded corners.
    • Use Card and elevation styles/classes/variables where appropriate.

Reviewers should focus on:

  • Matching the design spec
  • No visual regressions or unexpected interactive states
  • Special case styles for light theme toasts look OK? (they don't use the default elevation border/shadow styles)
  • NonIdealState muted icons with strokes look OK?

Screenshot

Compare against demo-app on develop branch here.

Light theme

Before After
image image
image image
image image
image image

New horizontal NonIdealState:

image

Dark theme

Before After
image image
image image
image image
image image
image image
image image
image image
image image
image image
image image

New horizontal NonIdealState:

image

@adidahiya adidahiya changed the title [DRAFT] Visual design updates Visual design updates May 2, 2022
@adidahiya adidahiya marked this pull request as ready for review May 2, 2022 23:14
@blueprint-bot
Copy link

update browser-tools orb

Previews: documentation | landing | table | demo

@blueprint-bot
Copy link

Fix NonIdealState test

Previews: documentation | landing | table | demo

@adidahiya adidahiya requested review from styu and johnly13 and removed request for styu May 3, 2022 14:12
@blueprint-bot
Copy link

add NonIdealState example to demo-app

Previews: documentation | landing | table | demo

Copy link
Contributor Author

@adidahiya adidahiya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there's a bug with the NonIdealState CSS API, I need to bump up the font size:

image

@@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

image

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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

N.B. all these styles/variables got merged into the appropriate component files

@blueprint-bot
Copy link

Merge remote-tracking branch 'origin/develop' into ad/core-visual-updates

Previews: documentation | landing | table | demo

@adidahiya adidahiya changed the title Visual design updates Visual design updates, cleaner dark theme May 4, 2022
@adidahiya adidahiya merged commit 924668a into develop May 4, 2022
@adidahiya adidahiya deleted the ad/core-visual-updates branch May 4, 2022 12:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants