feat(loaders): new light/dark mode colors #1818

ze-flo · 2024-05-29T06:05:28Z

Description

Adds dark / light mode support for loaders.

Detail

Adds dark / light mode support for loaders
Removes duplicate specs

Important

~~Spinner, Dots, and Inline now default to the agreed mode-specific color rather than inheriting it from the parent container.~~

Checklist

👌 design updates will be Garden Designer approved (add the designer as a reviewer)
🌐 demo is up-to-date (npm start)
~~⬅️ renders as expected with reversed (RTL) direction~~
~~🤘 renders as expected with Bedrock CSS (?bedrock)~~
💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
~~♿ tested for WCAG 2.1 AA accessibility compliance~~
📝 tested in Chrome, Firefox, Safari, and Edge

packages/loaders/src/elements/Dots.tsx

packages/loaders/src/elements/Progress.spec.tsx

packages/loaders/src/styled/StyledSkeleton.ts

packages/loaders/src/types/index.ts

ze-flo · 2024-05-29T19:24:47Z

packages/loaders/demo/stories/SkeletonStory.tsx

    <div
      style={{
-        backgroundColor: backgroundColor || (args.isLight ? PALETTE.kale[600] : undefined),
+        backgroundColor: backgroundColor || (args.isLight ? PALETTE.kale[800] : undefined),


Bumping the shade in accordance to the handy-dandy v8-to-v9 color mapping tool. 👍

packages/loaders/src/styled/StyledSkeleton.ts

lucijanblagonic · 2024-05-30T09:00:21Z

Spinner, Dots, and Inline now default to the agreed mode-specific color rather than inheriting it from the parent container.

@ze-flo Could you expand a bit on why that is the case?

Skeleton isLight loader

The color on this one seems a bit off, it should be white, .16%. I see we didn't have that specced up in our inventory.

(default switched to dark on the top, isLight in dark mode on the bottom)

Overall, the isLight in dark mode is a bit ligther in dark mode when it's using white. Is that doable?

And another question, is there an easy way to see which variable is being used and where in Storybook? Inspector is showing the color value only, and Variables section shows main variables only.

packages/loaders/src/elements/Dots.tsx

packages/loaders/src/styled/StyledSkeleton.ts

packages/loaders/src/types/index.ts

ze-flo · 2024-05-30T19:12:59Z

Spinner, Dots, and Inline now default to the agreed mode-specific color rather than inheriting it from the parent container.

@ze-flo Could you expand a bit on why that is the case?

Skeleton isLight loader

The color on this one seems a bit off, it should be white, .16%. I see we didn't have that specced up in our inventory.

(default switched to dark on the top, isLight in dark mode on the bottom)

Overall, the isLight in dark mode is a bit ligther in dark mode when it's using white. Is that doable?

And another question, is there an easy way to see which variable is being used and where in Storybook? Inspector is showing the color value only, and Variables section shows main variables only.

@ze-flo Could you expand a bit on why that is the case?

Based on @jzempel's comment, we need to align on whether we should keep the color inheritance or set the default color ourselves.

Overall, the isLight in dark mode is a bit ligther in dark mode when it's using white. Is that doable?

Absolutely doable! 💯

Let me recap for clarity:

Regular Skeleton

Light mode

neutral[700] / 16%

Dark mode

neutral[500] / 16%

Light Skeleton

Light mode

neutral[500] / 16% // the regular Skeleton's color in Dark mode

Dark mode

white / 16%

@lucijanblagonic Is this correct?

And another question, is there an easy way to see which variable is being used and where in Storybook? Inspector is showing the color value only, and Variables section shows main variables only.

Sadly, it's impossible at this time. 😞 Garden components do not reference CSS variables. Instead they get their calculated color values at runtime from our getColor function.

lucijanblagonic · 2024-05-31T10:07:58Z

Light Skeleton

Light mode

neutral[500] / 16% // the regular Skeleton's color in Dark mode

Dark mode

white / 16%

Light mode should also be white / 16%. The reason is that isLight might be used to place a Skeleton on a filled (color) surface and we don't want to overlay grey loader on top of it. Light skeleton is a deliberate styling decision so it should be white at all times.

Sadly, it's impossible at this time. 😞 Garden components do not reference CSS variables. Instead they get their calculated color values at runtime from our getColor function.

OK, so we can only review color values, and we are counting on eng to implement correct variables (e.g. progress loaders might use bg group, not border and it should be 100% clear from the inventory)?

… ze-flo/loaders-recolor

coveralls · 2024-05-31T19:53:26Z

coverage: 96.084%. remained the same
when pulling 58139ad on ze-flo/loaders-recolor
into cffdb06 on next.

packages/loaders/src/styled/StyledSkeleton.ts

ze-flo · 2024-06-01T00:09:00Z

packages/loaders/src/styled/StyledProgress.ts

+  const backgroundColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    transparency: theme.opacity[200],
+    light: { shade: 700 },
+    dark: { shade: 500 }
+  });
+  const foregroundColor = color || getColor({ theme, variable: 'border.successEmphasis' });


OK, so we can only review color values, and we are counting on eng to implement correct variables (e.g. progress loaders might use bg group, not border and it should be 100% clear from the inventory)?

@lucijanblagonic I always define colors using the variables found in the inventory first.

For Progress bar, the foregroundColor uses border.successEmphasis. It exists in our collection of border variables so I used it.

The backgroundColor uses WIP_opacity/neutral (700 : 500)/200, which is the same as foreground.subtle. However, because we don't have a background variable that matches the hue / shade combo per mode, I build it using advanced getColor options.

I hope this answers your question. If this isn't the right approach, let me know.

Thanks!

… ze-flo/loaders-recolor

packages/loaders/src/styled/StyledInline.ts

geotrev · 2024-06-04T18:57:03Z

packages/loaders/src/styled/StyledProgress.ts

+}: IStyledProgressBackgroundProps & ThemeProps<DefaultTheme>) => {
+  const backgroundColor = getColor({
+    theme,
+    hue: 'neutralHue',


Should this inherit from a background variable? 🤔

As discussed with Design, we're not tying this one to a variable, but rather build it from scratch.

fwiw, I think @geotrev's point of tying this to foreground.subtle actually does make sense as the background of this loader actually functions as a subtle foreground color when Progress is applied to a page. Let's not make any adjustments now, but I want to reserve space to triple-check semantics with design before v9 wraps up.

jzempel · 2024-06-06T14:36:43Z

packages/loaders/src/styled/StyledInline.ts


-const PULSE_ANIMATION = keyframes`
-  0%, 100% {
-    opacity: .2;
+const retrieveAnimation = ({ theme }: ThemeProps<DefaultTheme>) => keyframes`
+  0% {
+    opacity: 1;
  }

  50% {
-    opacity: .8;
+    opacity: ${theme.opacity[600]};
+  }
+
+  100% {
+    opacity: ${theme.opacity[200]};
  }


Why did the 0% portion of the animation change?

Aligning with Figma, where the first dot has 100% opacity.

Ok, I checked with @lucijanblagonic and he wasn't expecting the animation to materially change based on Figma. And now we're seeing some odd animation with the Inline loader (no longer smooth as it was before). I think we should revert here (while retaining the theme.opacity usage).

packages/loaders/src/styled/StyledSkeleton.ts

jzempel · 2024-06-06T14:49:13Z

packages/loaders/src/styled/StyledProgress.ts

+}: IStyledProgressBackgroundProps & ThemeProps<DefaultTheme>) => {
+  const backgroundColor = getColor({
+    theme,
+    hue: 'neutralHue',


fwiw, I think @geotrev's point of tying this to foreground.subtle actually does make sense as the background of this loader actually functions as a subtle foreground color when Progress is applied to a page. Let's not make any adjustments now, but I want to reserve space to triple-check semantics with design before v9 wraps up.

ze-flo added 3 commits May 28, 2024 20:01

feat(loaders): new light/dark mode colors

d7dba85

chore: remove duplicated specs

b3c9b3c

docs: update color prop description to reflect change

cf5bf34

ze-flo added the PR: New Feature 🚀 label May 29, 2024

zendesk-garden deployed to staging May 29, 2024 06:23 View deployment

fix(Skeleton demo): use correct shade

710e47d

zendesk-garden deployed to staging May 29, 2024 19:42 View deployment

ze-flo commented May 29, 2024

View reviewed changes

ze-flo marked this pull request as ready for review May 29, 2024 19:50

ze-flo requested a review from a team as a code owner May 29, 2024 19:50

ze-flo requested review from lucijanblagonic and steue May 29, 2024 19:50

jzempel requested changes May 30, 2024

View reviewed changes

packages/loaders/src/elements/Dots.tsx Show resolved Hide resolved

packages/loaders/src/styled/StyledSkeleton.ts Outdated Show resolved Hide resolved

packages/loaders/src/types/index.ts Outdated Show resolved Hide resolved

ze-flo mentioned this pull request May 31, 2024

test: add getRenderFn utility #1819

Merged

ze-flo added 3 commits May 31, 2024 08:17

Merge branch 'next' of github.com:zendeskgarden/react-components into…

9db7579

… ze-flo/loaders-recolor

fix: use correct hue for isLight Skeleton

59b017f

refactor(Skeleton): use transient props

d019feb

zendesk-garden deployed to staging May 31, 2024 19:56 View deployment

ze-flo commented Jun 1, 2024

View reviewed changes

ze-flo added 2 commits June 3, 2024 13:48

Merge branch 'next' of github.com:zendeskgarden/react-components into…

187192c

… ze-flo/loaders-recolor

refactor: use getRenderFn from test utils

7c704f2

zendesk-garden deployed to staging June 4, 2024 00:10 View deployment

geotrev reviewed Jun 4, 2024

View reviewed changes

packages/loaders/src/styled/StyledInline.ts Outdated Show resolved Hide resolved

geotrev reviewed Jun 4, 2024

View reviewed changes

ze-flo added 2 commits June 5, 2024 08:51

revert(Dots, Inline, Spinner): restore default color to inherit

8823197

revert: restore type description

82664f2

zendesk-garden deployed to staging June 5, 2024 19:22 View deployment

jzempel requested changes Jun 6, 2024

View reviewed changes

chore: typo fix

b9b0e3b

zendesk-garden deployed to staging June 6, 2024 17:50 View deployment

fix(InlineLoader): update starting opacity

58139ad

zendesk-garden deployed to staging June 6, 2024 18:33 View deployment

jzempel approved these changes Jun 6, 2024

View reviewed changes

lucijanblagonic approved these changes Jun 7, 2024

View reviewed changes

ze-flo merged commit dd386ec into next Jun 7, 2024

ze-flo deleted the ze-flo/loaders-recolor branch June 7, 2024 14:38

feat(loaders): new light/dark mode colors #1818

feat(loaders): new light/dark mode colors #1818

Uh oh!

Conversation

ze-flo commented May 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Detail

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lucijanblagonic commented May 30, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ze-flo commented May 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Regular Skeleton

Light mode

Dark mode

Light Skeleton

Light mode

Dark mode

Uh oh!

lucijanblagonic commented May 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Light Skeleton

Light mode

Dark mode

Uh oh!

coveralls commented May 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jzempel Jun 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

7 participants

ze-flo commented May 29, 2024 •

edited

Loading

ze-flo commented May 30, 2024 •

edited

Loading

lucijanblagonic commented May 31, 2024 •

edited

Loading

coveralls commented May 31, 2024 •

edited

Loading

jzempel Jun 6, 2024 •

edited

Loading