Skip to content

Conversation

@dcmouyard
Copy link
Member

Resolves #953.

Hopefully the updated README makes it clear how this works:

Gesso supports color themes using CSS custom properties to define colors whose
values can change depending on which color theme is being used. You can apply
these color themes to elements, and everything within it that uses those custom
properties wil inherit the values for that specific theme.

Color themes are defined in source/00-config/config.design-tokens.yml under
gesso: colors: theme:. By default Gesso only has two color themes (default and
gray-6) but more can be added. When creating new ones, be sure to also add them
to .storybook/preview.js in order to see them show up in the Storybook theme
preview dropdown.

A color theme can be added to an element in two ways:

  1. Add the corresponding theme-X class to that element where X is the machine
    name for that color theme.
<div class="c-custom-component theme-gray-6">
  1. Use the @include color-theme($theme) Sass mixin within your styles.
.c-custom-component {
  @include color-theme(gray-6);
}

In both cases you’ll likely want to add a background color and text color to
that element or a child of that element using custom properties.

.c-custom-component {
  background-color: var(--gesso-background-color);
  color: var(--gesso-text-color);
}

@dcmouyard dcmouyard linked an issue Apr 9, 2025 that may be closed by this pull request
Copy link
Collaborator

@kmonahan kmonahan left a comment

Choose a reason for hiding this comment

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

So I'm marking this as "Request changes" to indicate that I don't think it's ready to merge, but that's because Github doesn't have a "Discussion needed" review status.

Items for discussion:

  1. Does color themes come up often enough to be needed in Gesso? I'm only aware of one project where we've done it. That said, if it doesn't add too much complexity or overhead to a project without color themes, I'm not opposed to it. (Same logic applies to light mode/dark mode support, which I've also considered adding.)
  2. This PR has some major changes to how design tokens in Gesso are handled. It feels large enough to me that I think it should be held until Gesso 6; I don't think it's a minor release item.
  3. If we're going to switch to CSS variables for colors (a thing I am for), why not do the same for our other design tokens? Removing Sass is on the Gesso 6 roadmap, and this PR feels like the first step down that path.
  4. I think we need to align on a variable naming convention between Gesso for React and Gesso for Drupal. Gesso for React already uses CSS variables to similar purpose under different names.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

Add color themes

4 participants