953: Add color themes

.storybook/preview.js

@@ -28,11 +28,28 @@ function setupTwig(twig) {
 
 setupTwig(Twig);
 
+const addThemeWrapper = (Story, context) => {
+  return (
+    <div
+      className={context.globals.theme}
+      style={{
+        backgroundColor: 'var(--background-color)',
+        color: 'var(--text-color)',
+        display: 'flow-root',
+        minHeight: '100vh',
+      }}
+    >
+      <Story />
+    </div>
+  );
+};
+
 export const decorators = [
   storyFn => {
     useEffect(() => Drupal.attachBehaviors(), []);
     return storyFn();
   },
+  addThemeWrapper,
 ];
 
 const preview = {
@@ -43,7 +60,7 @@ const preview = {
         method: 'alphabetical',
         order: [
           'Global',
-          ['Color Palette', '*'],
+          ['Color', 'Typography', '*'],
           'Layouts',
           'Components',
           'Templates',
@@ -53,5 +70,20 @@ const preview = {
       },
     },
   },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'default',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'theme-default', title: 'Default' },
+          { value: 'theme-gray-6', title: 'Dark Gray' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
 };
 export default preview;

README.md

@@ -591,6 +591,46 @@ set to `true` (default: `false`).
 }
 ```
 
+### Color themes
+
+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.
+
+```html
+<div class="c-custom-component theme-gray-6">
+```
+
+2. Use the `@include color-theme($theme)` Sass mixin within your styles.
+
+```sass
+.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.
+
+```sass {
+.c-custom-component {
+  background-color: var(--gesso-background-color);
+  color: var(--gesso-text-color);
+}
+```
+
 ## Twig Filters and Functions
 Gesso includes some additional filters and functions that can be used in Twig templates.
 

source/00-config/config.design-tokens.yml

@@ -74,24 +74,6 @@ gesso:
     background:
       site: grayscale.white
     button:
-      primary:
-        background: brand.blue.base
-        background-hover: brand.blue.dark
-        background-active: brand.blue.dark-1
-        border: brand.blue.base
-        border-hover: brand.blue.dark
-        text: grayscale.white
-        text-hover: grayscale.white
-        text-active: grayscale.white
-      secondary:
-        background: brand.ocean-blue.light-1
-        background-hover: brand.ocean-blue.light
-        background-active: brand.ocean-blue.base
-        border: brand.ocean-blue.light-1
-        border-hover: brand.ocean-blue.light
-        text: brand.ocean-blue.dark-1
-        text-hover: brand.ocean-blue.dark-1
-        text-active: grayscale.gray-7
       base:
         background: grayscale.gray-4
         background-hover: grayscale.gray-5
@@ -101,10 +83,6 @@ gesso:
         text: grayscale.white
         text-hover: grayscale.white
         text-active: grayscale.white
-      disabled:
-        background: grayscale.gray-1
-        border: grayscale.gray-1
-        text: grayscale.gray-3
       danger:
         background: other.red.base
         background-hover: other.red.dark
@@ -119,34 +97,13 @@ gesso:
         background-hover: grayscale.gray-5
         color: grayscale.white
         color-hover: grayscale.white
-    facet:
-      icon: grayscale.gray-3
-      icon-active: brand.blue.dark-1
-      text: brand.blue.base
-      text-hover: brand.blue.dark
-      text-active: brand.blue.dark-1
-    form:
-      background: grayscale.gray-1
-      background-active: grayscale.white
-      background-checked: brand.blue.base
-      background-unchecked: grayscale.white
-      border: grayscale.gray-2
-      border-dark: grayscale.gray-5
-      border-light: grayscale.gray-1
-      thumb: grayscale.gray-5
-      track: grayscale.gray-3
-    mark:
-      background: other.yellow-neon.base
-      text: grayscale.gray-7
-    selection:
-      background: brand.blue.base
-      text: grayscale.white
     table:
       border: grayscale.gray-5
       background: grayscale.white
       background-head: grayscale.gray-1
       background-foot: grayscale.gray-1
       background-sorted: brand.blue.light-2
+      text: grayscale.gray-7
     ui:
       generic:
         background: grayscale.gray-3
@@ -174,6 +131,133 @@ gesso:
       warning:
         background: other.yellow.light
         border: other.yellow.base
+    theme:
+      default:
+        # generic
+        background: grayscale.white
+        background-secondary: grayscale.gray-2
+        text: grayscale.gray-7
+        text-secondary: grayscale.gray-5
+        accent: brand.blue.base
+        border: grayscale.gray-3
+        focus: brand.blue.light
+        link: brand.blue.base
+        link-hover: brand.blue.dark
+        link-active: brand.blue.dark
+        link-visited: brand.blue.dark
+        link-secondary: brand.blue.dark
+        link-secondary-hover: brand.blue.base
+        link-secondary-active: brand.blue.dark-1
+        link-secondary-visited: brand.blue.dark
+        mark-background: other.yellow-neon.base
+        mark-text: grayscale.gray-7
+        selection-background: brand.blue.base
+        selection-text: grayscale.white
+        # component-specific
+        button-primary-background: brand.blue.base
+        button-primary-background-hover: brand.blue.dark
+        button-primary-background-active: brand.blue.dark-1
+        button-primary-background-disabled: grayscale.gray-1
+        button-primary-border: brand.blue.base
+        button-primary-border-hover: brand.blue.dark
+        button-primary-border-active: brand.blue.dark-1
+        button-primary-border-disabled: grayscale.gray-1
+        button-primary-text: grayscale.white
+        button-primary-text-hover: grayscale.white
+        button-primary-text-active: grayscale.white
+        button-primary-text-disabled: grayscale.gray-3
+        button-secondary-background: brand.ocean-blue.light-1
+        button-secondary-background-hover: brand.ocean-blue.light
+        button-secondary-background-active: brand.ocean-blue.base
+        button-secondary-background-disabled: grayscale.gray-1
+        button-secondary-border: brand.ocean-blue.light-1
+        button-secondary-border-hover: brand.ocean-blue.light
+        button-secondary-border-active: brand.ocean-blue.base
+        button-secondary-border-disabled: grayscale.gray-1
+        button-secondary-text: brand.ocean-blue.dark-1
+        button-secondary-text-hover: brand.ocean-blue.dark-1
+        button-secondary-text-active: grayscale.gray-7
+        button-secondary-text-disabled: grayscale.gray-3
+        facet-icon: grayscale.gray-3
+        facet-icon-active: brand.blue.dark-1
+        facet-text: brand.blue.base
+        facet-text-hover: brand.blue.dark
+        facet-text-active: brand.blue.dark-1
+        form-background: grayscale.gray-1
+        form-background-active: grayscale.white
+        form-background-checked: brand.blue.base
+        form-background-unchecked: grayscale.white
+        form-border: grayscale.gray-2
+        form-border-dark: grayscale.gray-5
+        form-border-light: grayscale.gray-1
+        form-thumb: grayscale.gray-5
+        form-track: grayscale.gray-3
+        tag-text: brand.blue.dark-1
+        tag-border: brand.blue.light
+        tag-box-shadow: brand.blue.light
+      gray-6:
+        # generic
+        background: grayscale.gray-6
+        background-secondary: grayscale.gray-4
+        text: grayscale.white
+        text-secondary: grayscale.gray-2
+        accent: brand.blue.light-1
+        border: grayscale.gray-3
+        focus: brand.ocean-blue.light-1
+        link: brand.ocean-blue.light
+        link-hover: brand.ocean-blue.base
+        link-active: brand.ocean-blue.base
+        link-visited: brand.ocean-blue.base
+        link-secondary: brand.ocean-blue.light
+        link-secondary-hover: brand.ocean-blue.base
+        link-secondary-active: brand.ocean-blue.base
+        link-secondary-visited: brand.ocean-blue.base
+        mark-background: other.yellow-neon.base
+        mark-text: grayscale.gray-7
+        selection-background: brand.blue.base
+        selection-text: grayscale.white
+        # component-specific
+        button-primary-background: brand.blue.base
+        button-primary-background-hover: brand.blue.dark
+        button-primary-background-active: brand.blue.dark-1
+        button-primary-background-disabled: grayscale.gray-5
+        button-primary-border: brand.blue.base
+        button-primary-border-hover: brand.blue.dark
+        button-primary-border-active: brand.blue.dark-1
+        button-primary-border-disabled: grayscale.gray-5
+        button-primary-text: grayscale.white
+        button-primary-text-hover: grayscale.white
+        button-primary-text-active: grayscale.white
+        button-primary-text-disabled: grayscale.gray-3
+        button-secondary-background: brand.ocean-blue.light-1
+        button-secondary-background-hover: brand.ocean-blue.light
+        button-secondary-background-active: brand.ocean-blue.base
+        button-secondary-background-disabled: grayscale.gray-5
+        button-secondary-border: brand.ocean-blue.light-1
+        button-secondary-border-hover: brand.ocean-blue.light
+        button-secondary-border-active: brand.ocean-blue.base
+        button-secondary-border-disabled: grayscale.gray-5
+        button-secondary-text: brand.ocean-blue.dark-1
+        button-secondary-text-hover: brand.ocean-blue.dark-1
+        button-secondary-text-active: grayscale.gray-7
+        button-secondary-text-disabled: grayscale.gray-3
+        facet-icon: grayscale.gray-3
+        facet-icon-active: brand.ocean-blue.base
+        facet-text: brand.ocean-blue.light
+        facet-text-hover: brand.ocean-blue.base
+        facet-text-active: brand.ocean-blue.base
+        form-background: grayscale.gray-1
+        form-background-active: grayscale.white
+        form-background-checked: brand.blue.base
+        form-background-unchecked: grayscale.gray-6
+        form-border: grayscale.gray-4
+        form-border-dark: grayscale.gray-2
+        form-border-light: grayscale.gray-5
+        form-thumb: grayscale.gray-2
+        form-track: grayscale.gray-3
+        tag-text: brand.ocean-blue.light
+        tag-border: brand.ocean-blue.light-1
+        tag-box-shadow: brand.ocean-blue.light-1
   typography:
     font-family:
       primary:
@@ -285,69 +369,69 @@ gesso:
       tallest: 2
     display:
       display:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 15
       h1:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 12
       h2:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 10
       h3:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: short
         responsive-font-size: 8
       h4:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: base
         responsive-font-size: 7
       h5:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: bold
         line-height: base
         responsive-font-size: 3
       h6:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-weight: semibold
         letter-spacing: tight
         line-height: tall
         text-transform: uppercase
         responsive-font-size: 2
       blockquote:
-        color: text.link
+        color: 'var(--gesso-link-color)'
         font-family: primary.stack
         font-size: 7
         font-weight: regular
         line-height: base
       body:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-size: 3
         font-weight: regular
         line-height: base
       body-large:
-        color: text.primary
+        color: 'var(--gesso-text-color)'
         font-family: primary.stack
         font-size: 5
         font-weight: regular
         line-height: base
       cite:
-        color: text.secondary
+        color: 'var(--gesso-text-secondary-color)'
         font-family: primary.stack
         font-size: 2
         font-style: normal