UI: Update colors for 7.0 #19023

MichaelArestad · 2022-08-25T21:54:58Z

What I did

Updated the base colors, light color scheme, and dark color scheme.

Updates to base.ts:

Updated color.secondary, the monochrome colors, color.border, and background.app
Added status text colors, positiveText, negativeText, and warningText

Update to convert.ts:

Added button and boolean objects with their own customizable background/border colors. They fall back to input background colors, but overall should make theming form elements simpler.

Notes:

code/lib/components/src/Colors/colorpalette.stories.mdx seems to be broken, but is unrelated to this PR.

How to test

Is this testable with Jest or Chromatic screenshots?
Does this need a new example in the kitchen sink apps?
Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

… buttons

…nvert.ts

…n many components

MichaelArestad · 2022-08-29T18:53:30Z

code/lib/theming/src/global.ts

@@ -11,6 +12,7 @@ interface Return {
 export const createReset = memoize(1)(
  ({ typography }: { typography: Typography }): Return => ({
    body: {
+      color: color.defaultText,


Is this the correct place to set the body color?

Is it getting set elsewhere right now?

@domyen It seems to not be set anywhere, though line 104 of that file looks like it MIGHT be a place that is supposed to set it, but isn't.

code/lib/theming/src/base.ts

domyen · 2022-08-29T23:33:27Z

code/lib/theming/src/global.ts

@@ -11,6 +12,7 @@ interface Return {
 export const createReset = memoize(1)(
  ({ typography }: { typography: Typography }): Return => ({
    body: {
+      color: color.defaultText,


Is it getting set elsewhere right now?

code/lib/theming/src/themes/dark.ts

domyen · 2022-08-30T00:04:24Z

The new borders are tough to make out because they're a transparent mid-blue whereas the old border was transparent pure black. Can we darken them while keeping the blue tint?

Current:

Before:

domyen · 2022-08-30T00:35:29Z

It's tough to know which tab nav is hierarchically more important because the blue background contrasts the white and because it's the same color as the app background.

Can we differentiate the app bg from canvas subnav bg? Perhaps make it more transparent (opacity: .7)?

MichaelArestad · 2022-08-30T15:32:08Z

The new borders are tough to make out because they're a transparent mid-blue whereas the old border was transparent pure black. Can we darken them while keeping the blue tint?

@domyen This was intentional to match the mockups and proposal. I will try increasing the contrast a touch.

It's tough to know which tab nav is hierarchically more important because the blue background contrasts the white and because it's the same color as the app background.

We decided to go this route when designing the Interactions addon. I can change this if you prefer a different background color.

code/lib/theming/src/global.ts

JonathanKolnik · 2022-08-31T19:28:28Z

code/lib/theming/src/themes/dark.ts

@@ -6,11 +6,11 @@ const theme: ThemeVars = {

  // Storybook-specific color palette
  colorPrimary: '#FF4785', // coral
-  colorSecondary: '#1EA7FD', // ocean
+  colorSecondary: '#029CFD', // ocean


could be helpful to have another object which are aliases like

{ ocean: colors.colorSecondary ... }

JonathanKolnik · 2022-08-31T19:30:21Z

code/lib/theming/src/themes/light.ts

@@ -6,7 +6,7 @@ const theme: ThemeVars = {

  // Storybook-specific color palette
  colorPrimary: '#FF4785', // coral
-  colorSecondary: '#1EA7FD', // ocean
+  colorSecondary: '#029CFD', // ocean


seems like these are shared between themes - could be exported as constants in base and used in the light and dark files

Great! On it!

I ran into a hiccup. I implemented it as you suggested, but convert.js gets a bit mad unless I add them there. I am not sure the best way to do that.

code/lib/ui/src/settings/about.tsx

JonathanKolnik · 2022-08-31T19:36:32Z

code/lib/blocks/src/controls/Boolean.tsx

@@ -71,8 +71,11 @@ const Label = styled.label(({ theme }) => ({
  },

  'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
-    background: theme.background.app,
-    boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`,
+    background: theme.boolean.selectedBackground,


seems like there are two conventions going on,

when I saw all the text prefixes like textMutedColor, textColor, etc I had an urge to comment that it could be text.muted etc.

I also see ones like positiveText, warningText etc. so maybe there are 3 naming conventions.

I know these came before this PR but just highlighting it in case this is an easy-ish time to standardize some

forgot about this specific line - it could be booleanSelectedBg or booleanSelectedBackground

I am hesitant to change the names of existing variables as I don't want to break user themes that rely on these names. I am open to suggestions on preferred naming schemes. If we do decide to rename them (breaking change), now is the time.

JonathanKolnik

Just some consistency/ergonomics comments, overall looks good!

MichaelArestad · 2022-08-31T21:49:10Z

Alrighty, I think this one is good to go. Any further refinements I will do in followup PRs.

MichaelArestad · 2022-09-26T19:40:45Z

@shilman I believe this one is ready to go.

MichaelArestad added 11 commits August 24, 2022 15:58

Initial color update to base.ts

ee7e012

Updated search styles and changed muted text in the light theme

9c394de

Updated SearchResults colors and tweaked keyboard shortcut

3e1c158

Updated menu shortcut colors

1e6c970

Removed use of symbols temporarily so the sidebar looks right in Firefox

13bdc8e

Sidebar icons now work properly in Firefox

d9ce045

Add default body color

b4d74a6

Remove custom background color from Official Storybook

10b6b3b

Updated A11y tab bar background color

cc476d1

Add optional button.background and button.border props - updated form…

90170f5

… buttons

Updated Boolean, Object, Select colors

7cbd3d0

MichaelArestad added feature request ui components theming addon: docs labels Aug 25, 2022

MichaelArestad self-assigned this Aug 25, 2022

MichaelArestad added 13 commits August 25, 2022 16:00

Remove unused import

c135e71

Reverted a change to be able to use side by side backgrounds

5450a8e

Updated Interactions status colors

b296b88

Reverted change and added text-specific color variables

7e89bdb

Update a few addons with the new stats text colors and add them to co…

99122fb

…nvert.ts

Initial update to the dark theme - required updating some variables i…

7e40e8e

…n many components

Updated boolean colors

34a7b8e

Update Header h1 style to be a little more predictable

afdb753

Improved text contrast in Matcher results

5f421b4

Updated badge colors and corresponding story

ddb3aa9

Fix up ScrollArea.stories.tsx to be readable in light and dark mode

22d52f0

Minor updates to tooltip styles

4beb82a

Added tertiary prop to Button in Events story

84a501b

MichaelArestad commented Aug 29, 2022

View reviewed changes

MichaelArestad added 2 commits August 29, 2022 13:02

Update notifications background

c2c18f3

Switch back to light theme

10fbe75

domyen reviewed Aug 29, 2022

View reviewed changes

Removed unnecessary comments

19e6d16

MichaelArestad added 3 commits August 30, 2022 10:32

Increased contrast of border color in the light theme

05dda62

Minor update to color and border

0584771

Update Storybook logo colors in dark mode

912e696

JonathanKolnik reviewed Aug 31, 2022

View reviewed changes

code/lib/theming/src/global.ts Outdated Show resolved Hide resolved

JonathanKolnik reviewed Aug 31, 2022

View reviewed changes

code/lib/ui/src/settings/about.tsx Show resolved Hide resolved

JonathanKolnik reviewed Aug 31, 2022

View reviewed changes

JonathanKolnik approved these changes Aug 31, 2022

View reviewed changes

Removed unused import

30db842

shilman changed the title ~~Update Storybook colors for 7.0~~ UI: Update colors for 7.0 Sep 7, 2022

shilman and others added 3 commits September 7, 2022 08:25

Merge branch 'next' into update-colors

6a32613

Merge branch 'next' into update-colors

7c4e472

Update AccountForm story to look nice with both dark and light themes

f15e20d

Merge branch 'next' into update-colors

6db971c

shilman assigned shilman and unassigned MichaelArestad Oct 5, 2022

Update snapshots / tests for new color scheme

1c968fc

shilman merged commit a2cdd73 into next Oct 6, 2022

shilman deleted the update-colors branch October 6, 2022 10:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Update colors for 7.0 #19023

UI: Update colors for 7.0 #19023

MichaelArestad commented Aug 25, 2022 •

edited

Loading

MichaelArestad Aug 29, 2022

domyen Aug 29, 2022

MichaelArestad Aug 30, 2022

domyen Aug 29, 2022

domyen commented Aug 30, 2022

domyen commented Aug 30, 2022

MichaelArestad commented Aug 30, 2022

JonathanKolnik Aug 31, 2022

JonathanKolnik Aug 31, 2022

MichaelArestad Aug 31, 2022

MichaelArestad Aug 31, 2022

JonathanKolnik Aug 31, 2022

JonathanKolnik Aug 31, 2022

MichaelArestad Aug 31, 2022

JonathanKolnik left a comment

MichaelArestad commented Aug 31, 2022

MichaelArestad commented Sep 26, 2022

UI: Update colors for 7.0 #19023

UI: Update colors for 7.0 #19023

Conversation

MichaelArestad commented Aug 25, 2022 • edited Loading

What I did

How to test

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

domyen commented Aug 30, 2022

domyen commented Aug 30, 2022

MichaelArestad commented Aug 30, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JonathanKolnik left a comment

Choose a reason for hiding this comment

MichaelArestad commented Aug 31, 2022

MichaelArestad commented Sep 26, 2022

MichaelArestad commented Aug 25, 2022 •

edited

Loading