chore: dark mode POC #1673

jzempel · 2023-12-12T21:00:14Z

Description

This PR is a brute force POC (not intended for merge) that demonstrates how the existing theme.colors.base value might be used to impact styling for the how-to-react sandbox. Ultimately, we'll look at a combination of CSS variables together with a 'light' vs 'dark' toggle to handle a richer color theming experience.

Detail

The story can be found under "Chrome -> [patterns] -> Dark". A hue control is included to observe the affect of Garden's existing branding control.

jzempel · 2023-12-12T22:39:54Z

packages/chrome/src/styled/header/StyledHeader.ts

+const colorStyles = (props: IStyledHeaderProps) => {
+  const backgroundColor = props.theme.colors.background;
+  const borderColor = getColor(
+    'neutralHue',
+    props.theme.colors.base === 'dark' ? 700 : 300,
+    props.theme
+  );
+  const boxShadow = props.theme.shadows.lg(
+    '0',
+    `${props.theme.space.base * 2.5}px`,
+    getColor('chromeHue', 600, props.theme, 0.15)!
+  );
+  const foregroundColor = getColor('neutralHue', 600, props.theme);
+
+  return css`
+    border-bottom-color: ${borderColor};
+    box-shadow: ${props.isStandalone && boxShadow};
+    background-color: ${backgroundColor};
+    color: ${foregroundColor};
+  `;
+};
+
+const sizeStyles = (props: IStyledHeaderProps) => {
+  const border = props.theme.borders.sm;
+  const fontSize = props.theme.fontSizes.md;
+  const height = getNavItemHeight(props);
+  const padding = `${props.theme.space.base}px`;
+
+  return css`
+    border-bottom: ${border};
+    padding: 0 ${padding};
+    height: ${height};
+    font-size: ${fontSize};
+  `;


This is an example of following the documented colorStyles and sizeStyles for view components. We'll expect to see this structure more fastidiously followed during dark mode development

jzempel · 2023-12-12T22:40:53Z

packages/modals/src/styled/StyledHeader.ts

+  ${sizeStyles};
+  ${colorStyles};


ditto re: sizeStyles & colorStyles refactor

jzempel · 2023-12-12T22:41:42Z

packages/theming/src/types/index.ts

  /**
   * Provides values for component styling. See styled-components
   * [`ThemeProvider`](https://styled-components.com/docs/api#themeprovider)
   * for details.
   */
-  theme?: IGardenTheme;
+  theme?: IGardenTheme | ((theme: IGardenTheme) => IGardenTheme);


Updated to allow the same theme typing as styled-components

jzempel · 2023-12-12T22:43:33Z

packages/theming/src/elements/ThemeProvider.tsx

@@ -20,7 +20,7 @@ export const ThemeProvider = ({
  ...other
 }: PropsWithChildren<IThemeProviderProps>) => {


Ultimately, I think we'll expect to see createGlobalStyle here with a listing of CSS variables pulled from the default theme.

jzempel · 2023-12-12T22:45:02Z

packages/chrome/demo/~patterns/stories/DarkStory.tsx

+  const theme = (parentTheme: DefaultTheme) =>
+    ({
+      ...parentTheme,
+      colors: {
+        ...parentTheme.colors,
+        base: 'dark',
+        background: getColor('neutralHue', 900, parentTheme),
+        foreground: getColor('neutralHue', 200, parentTheme),
+        primaryHue: '#50a1e1'
+      }
+    }) as IGardenTheme;


For the POC, this is the main theming setup for dark mode – affecting a major portion of the UI as expected.

geotrev · 2024-01-31T17:51:39Z

packages/theming/src/elements/theme/index.ts

+  prefix: 'zdg',
+  variables: {
+    buttons: {}
+  }


Defaults for what will be added by ThemeProvider.

geotrev · 2024-01-31T17:52:15Z

packages/theming/src/elements/theme/global-styles.ts

+        --${prefix}--buttons--shade--hover: ${buttons.shades.hover};
+        --${prefix}--buttons--shade--active: ${buttons.shades.active};
+        --${prefix}--buttons--shade--color--disabled: ${buttons.shades.disabledColor};
+        --${prefix}--buttons--shades--bg--disabled: ${buttons.shades.disabledBgColor};


These are set after semantic variables are created in ThemeProvider.

I'm also realizing now, if we were to lazily generate semantic variables in component instances, it would throw a wrench in generating these variables on page load. Not sure how/if we can wiggle around that issue.

geotrev · 2024-01-31T17:53:34Z

packages/theming/src/elements/theme/getters/buttons.ts

+        disabledBgColor: 200
+      }
+    };
+  },


A sample of what we can do in the semantic generation model... The key thing to takeaway is the theme values aren't referenced statically, but from the provided theme object when ThemeProvider is instantiated.

geotrev · 2024-01-31T17:54:39Z

packages/theming/src/elements/ThemeProvider.tsx

+    variables = {
+      buttons: getButtonVariables(theme)
+    };


This object here is an example of the expected value for this new variables.

geotrev · 2024-01-31T17:57:30Z

packages/buttons/src/styled/StyledButton.ts

      line-height: ${lineHeight};
-      font-size: ${fontSize};
+      font-size: var(--${prefix}--buttons_${fontSize}--fontSize, ${sizes[fontSize].fontSize});


It might serve us well to isolate custom property definitions like this in a separate file, so we can reference exactly which properties a component has tied to theming. Especially if we have custom properties not tied directly to specific properties (i.e. shades).

Regardless of how that works, it felt natural to have the custom properties take priority should a consumer want to override them from that direction, with the theme object value as a fallback.

geotrev · 2024-01-31T17:58:44Z

packages/buttons/src/styled/StyledButton.ts

@@ -49,7 +58,8 @@ export const getHeight = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
 * 3. shifting :focus-visible from LVHFA order to preserve `color` on hover
 * 4. set default outline-color for smooth transition without artifacts
 */
-const colorStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = (props: IButtonProps & ThemeProps<IGardenTheme>) => {
+  const { shades } = props.theme.variables.buttons;


Not married to shades being themeable this way - but I found it clunky and anti-thetical to how getColor works to fully define colors, with shades, in semantic variable generation. If we move that generation step into the component, this might be less of an issue (aka, lazy semantic loading, as we were discussing).

coveralls · 2024-01-31T23:48:13Z

coverage: 96.138% (-0.1%) from 96.235%
when pulling 120598e on jzempel/poc-dark-mode
into 17de4af on main.

jzempel added 5 commits December 6, 2023 16:28

Merge branch 'main' into jzempel/poc-dark-mode

8ae3887

Merge branch 'main' into jzempel/poc-dark-mode

91056ce

Initial dark pattern story

577a0c5

Merge branch 'main' into jzempel/poc-dark-mode

54bf2c0

Initial dark mode story pattern

18b4580

jzempel added the PR: Internal 🌱 label Dec 12, 2023

zendesk-garden deployed to staging December 12, 2023 21:14 View deployment

jzempel commented Dec 12, 2023

View reviewed changes

Use refactored Menu and add isLight control

9fece4f

zendesk-garden deployed to staging December 13, 2023 20:42 View deployment

Add story glob filter

989a34b

zendesk-garden deployed to staging December 13, 2023 21:39 View deployment

jzempel added 2 commits December 13, 2023 17:48

Enable backgrounds addon

f0622f4

Simplify condition

dbb2e7c

zendesk-garden deployed to staging December 13, 2023 23:13 View deployment

Add table to demo POC

96a0185

zendesk-garden deployed to staging December 18, 2023 12:45 View deployment

jzempel marked this pull request as ready for review January 23, 2024 18:48

jzempel requested a review from a team as a code owner January 23, 2024 18:48

jzempel marked this pull request as draft January 23, 2024 18:48

geotrev reviewed Jan 31, 2024

View reviewed changes

geotrev force-pushed the jzempel/poc-dark-mode branch 2 times, most recently from 3a48060 to 700c0aa Compare January 31, 2024 23:10

chore: poc of theming taxonomy in code form

120598e

geotrev force-pushed the jzempel/poc-dark-mode branch from 700c0aa to 120598e Compare January 31, 2024 23:37

zendesk-garden deployed to staging January 31, 2024 23:50 View deployment

jzempel mentioned this pull request Feb 26, 2024

chore: add Storybook tool for dark mode #1721

Merged

jzempel closed this Mar 26, 2024

jzempel deleted the jzempel/poc-dark-mode branch March 26, 2024 12:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: dark mode POC #1673

chore: dark mode POC #1673

jzempel commented Dec 12, 2023 •

edited

Loading

jzempel Dec 12, 2023

jzempel Dec 12, 2023

jzempel Dec 12, 2023

jzempel Dec 12, 2023

jzempel Dec 12, 2023

geotrev Jan 31, 2024

geotrev Jan 31, 2024

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

coveralls commented Jan 31, 2024

		@@ -20,7 +20,7 @@ export const ThemeProvider = ({
		...other
		}: PropsWithChildren<IThemeProviderProps>) => {

chore: dark mode POC #1673

chore: dark mode POC #1673

Conversation

jzempel commented Dec 12, 2023 • edited Loading

Description

Detail

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

geotrev Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

geotrev Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

geotrev Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geotrev Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

geotrev Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

coveralls commented Jan 31, 2024

jzempel commented Dec 12, 2023 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading

geotrev Jan 31, 2024 •

edited

Loading