feat: adjust display of theme palette in styleguide (#1745)

Note: contains no color or app changes. - display styleguide as theme palette in a grid (shows in e2e) - re-order blue to be after cyan in code - group content-subdued-bg with content-bg (triggers a e2e change)
deephaven · Jan 25, 2024 · 0ab0c93 · 0ab0c93
1 parent af5f5f4
commit 0ab0c93
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 105 deletions.
diff --git a/packages/code-studio/src/styleguide/ThemeColors.module.scss b/packages/code-studio/src/styleguide/ThemeColors.module.scss
@@ -1,3 +1,17 @@
+.themeColorsPalette {
+  display: grid;
+  grid-template-columns: repeat(15, 1fr);
+  gap: 1px;
+  align-items: center;
+
+  .swatch {
+    display: flex;
+    aspect-ratio: 4/3;
+    align-items: start;
+    justify-content: end;
+  }
+}
+
 .themeColors {
   --swatch-height: 35px;
   --column-gap: 14px;
@@ -33,7 +47,12 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+  }
+}
 
+.themeColors,
+.themeColorsPalette {
+  .swatch {
     // hide copy swatch button until hover
     button {
       opacity: 0;

diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useMemo } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import cl from 'classnames';
 import { CopyButton, Tooltip, useTheme } from '@deephaven/components';
 import { ColorUtils } from '@deephaven/utils';
@@ -34,66 +34,122 @@ export function ThemeColors(): JSX.Element {
 
   return (
     <>
-      {Object.entries(swatchDataGroups).map(([label, data], i) => (
-        <div key={label} {...sampleSectionIdAndClasses(label)}>
-          <h2 className="ui-title">{label}</h2>
-          <div className={styles.themeColors}>
-            {Object.entries(data).map(([group, swatchData]) => (
-              <div
-                key={group}
-                // This is the secret sauce for filling columns. The height of
-                // each swatch group spans multiple rows (the number of swatches
-                // + 1 for the label). This causes the grid to create rows
-                // based on the swatch height (35px), and each swatch (also the
-                // group label) neatly fits in a grid cell. The grid will put a
-                // group in each column and then wrap back around to the first
-                // until all groups are placed.
-                style={{ gridRow: `span ${swatchData.length + 1}` }}
-              >
-                <span className={cl(styles.label, styles.capitalize)}>
-                  {group}
-                </span>
-                {swatchData.map(({ isLabel, name, value, note }) =>
-                  isLabel === true ? (
-                    <span key={name} className={styles.label}>
-                      {name}
-                    </span>
-                  ) : (
-                    <div
-                      key={name}
-                      className={styles.swatch}
-                      style={{
-                        backgroundColor: value,
-                        border:
-                          value === '' && name.length > 0
-                            ? INVALID_COLOR_BORDER_STYLE
-                            : undefined,
-                        color: `var(--dh-color-${contrastColor(value)})`,
-                      }}
-                    >
-                      <Tooltip interactive>
-                        <div>{name}</div>
-                        <div>{value}</div>
-                        <div>{ColorUtils.normalizeCssColor(value, true)}</div>
-                      </Tooltip>
-                      <span>{name.replace('--dh-color-', '')}</span>
-                      {name.endsWith('-hue') || note != null ? (
-                        <span>{note ?? value}</span>
-                      ) : null}
-                      <CopyButton
-                        copy={name}
+      {Object.entries(swatchDataGroups).map(([label, data], i) => {
+        if (label === 'Theme Color Palette') {
+          return (
+            <div key={label} {...sampleSectionIdAndClasses(label)}>
+              <h2 className="ui-title">{label}</h2>
+
+              <div className={styles.themeColorsPalette}>
+                {Object.entries(data).map(([group, swatchData], index) => (
+                  <Fragment key={group}>
+                    {(index === 0 || index === 1) &&
+                      swatchData.map(({ name }, j) => (
+                        <div
+                          style={{
+                            gridColumnStart: j + 2,
+                            textAlign: 'center',
+                          }}
+                          className="mt-3"
+                          key={name}
+                        >
+                          {name.split('-').pop()}
+                        </div>
+                      ))}
+                    <div className="text-right pr-2">{group}</div>
+                    {swatchData.map(({ name, value }) => (
+                      <div
+                        key={name}
                         style={{
+                          backgroundColor: value,
+                          border:
+                            value === '' && name.length > 0
+                              ? INVALID_COLOR_BORDER_STYLE
+                              : undefined,
                           color: `var(--dh-color-${contrastColor(value)})`,
                         }}
-                      />
-                    </div>
-                  )
-                )}
+                        className={cl(styles.swatch, 'px-0')}
+                      >
+                        <Tooltip interactive>
+                          <div>{name}</div>
+                          <div>{value}</div>
+                          <div>{ColorUtils.normalizeCssColor(value, true)}</div>
+                        </Tooltip>
+                        <CopyButton
+                          copy={name}
+                          style={{
+                            color: `var(--dh-color-${contrastColor(value)})`,
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </Fragment>
+                ))}
               </div>
-            ))}
+            </div>
+          );
+        }
+        return (
+          <div key={label} {...sampleSectionIdAndClasses(label)}>
+            <h2 className="ui-title">{label}</h2>
+            <div className={styles.themeColors}>
+              {Object.entries(data).map(([group, swatchData]) => (
+                <div
+                  key={group}
+                  // This is the secret sauce for filling columns. The height of
+                  // each swatch group spans multiple rows (the number of swatches
+                  // + 1 for the label). This causes the grid to create rows
+                  // based on the swatch height (35px), and each swatch (also the
+                  // group label) neatly fits in a grid cell. The grid will put a
+                  // group in each column and then wrap back around to the first
+                  // until all groups are placed.
+                  style={{ gridRow: `span ${swatchData.length + 1}` }}
+                >
+                  <span className={cl(styles.label, styles.capitalize)}>
+                    {group}
+                  </span>
+                  {swatchData.map(({ isLabel, name, value, note }) =>
+                    isLabel === true ? (
+                      <span key={name} className={styles.label}>
+                        {name}
+                      </span>
+                    ) : (
+                      <div
+                        key={name}
+                        className={styles.swatch}
+                        style={{
+                          backgroundColor: value,
+                          border:
+                            value === '' && name.length > 0
+                              ? INVALID_COLOR_BORDER_STYLE
+                              : undefined,
+                          color: `var(--dh-color-${contrastColor(value)})`,
+                        }}
+                      >
+                        <Tooltip interactive>
+                          <div>{name}</div>
+                          <div>{value}</div>
+                          <div>{ColorUtils.normalizeCssColor(value, true)}</div>
+                        </Tooltip>
+                        <span>{name.replace('--dh-color-', '')}</span>
+                        {name.endsWith('-hue') || note != null ? (
+                          <span>{note ?? value}</span>
+                        ) : null}
+                        <CopyButton
+                          copy={name}
+                          style={{
+                            color: `var(--dh-color-${contrastColor(value)})`,
+                          }}
+                        />
+                      </div>
+                    )
+                  )}
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </>
   );
 }

diff --git a/packages/code-studio/src/styleguide/colorUtils.ts b/packages/code-studio/src/styleguide/colorUtils.ts
@@ -14,6 +14,7 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
   '--dh-color-surface-bg': 'General',
   '--dh-color-fg': 'General',
   '--dh-color-content-bg': 'General',
+  '--dh-color-subdued-content-bg': 'General',
   '--dh-color-dropshadow': 'General',
   '--dh-color-keyboard-selected-bg': 'Misc',
   '--dh-color-hover-border': 'Misc',
@@ -22,7 +23,6 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
   '--dh-color-visual-notice': 'Visual Status',
   '--dh-color-visual-info': 'Visual Status',
   '--dh-color-gray-bg': 'Default Background',
-  '--dh-color-blue-bg': 'Default Background',
   '--dh-color-red-bg': 'Default Background',
   '--dh-color-orange-bg': 'Default Background',
   '--dh-color-yellow-bg': 'Default Background',
@@ -31,6 +31,7 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
   '--dh-color-green-bg': 'Default Background',
   '--dh-color-seafoam-bg': 'Default Background',
   '--dh-color-cyan-bg': 'Default Background',
+  '--dh-color-blue-bg': 'Default Background',
   '--dh-color-indigo-bg': 'Default Background',
   '--dh-color-purple-bg': 'Default Background',
   '--dh-color-fuchsia-bg': 'Default Background',

diff --git a/packages/components/src/theme/theme-dark/theme-dark-palette.css b/packages/components/src/theme/theme-dark/theme-dark-palette.css
@@ -23,22 +23,6 @@
   --dh-color-true-black-hsl: 0deg, 0%, 0%;
   --dh-color-true-white-hsl: 0deg, 0%, 100%;
 
-  /* Blue HSL components */
-  --dh-color-blue-100-hsl: 222deg, 65.3%, 19.2%;
-  --dh-color-blue-200-hsl: 222deg, 66.2%, 25.5%;
-  --dh-color-blue-300-hsl: 222deg, 64.8%, 32.4%;
-  --dh-color-blue-400-hsl: 222deg, 63.2%, 39.4%;
-  --dh-color-blue-500-hsl: 222deg, 60.7%, 46.9%;
-  --dh-color-blue-600-hsl: 222deg, 68.2%, 54.3%;
-  --dh-color-blue-700-hsl: 222deg, 82.7%, 61.6%;
-  --dh-color-blue-800-hsl: 222deg, 93.8%, 68.4%;
-  --dh-color-blue-900-hsl: 222deg, 100%, 74.3%;
-  --dh-color-blue-1000-hsl: 222deg, 100%, 79.6%;
-  --dh-color-blue-1100-hsl: 221deg, 100%, 84.3%;
-  --dh-color-blue-1200-hsl: 221deg, 100%, 89%;
-  --dh-color-blue-1300-hsl: 222deg, 100%, 92.9%;
-  --dh-color-blue-1400-hsl: 224deg, 100%, 96.3%;
-
   /* Reds HSL components */
   --dh-color-red-100-hsl: 346deg, 54.3%, 18%;
   --dh-color-red-200-hsl: 345deg, 55%, 23.5%;
@@ -167,6 +151,22 @@
   --dh-color-cyan-1300-hsl: 186deg, 91.6%, 81.4%;
   --dh-color-cyan-1400-hsl: 186deg, 100%, 89.6%;
 
+  /* Blue HSL components */
+  --dh-color-blue-100-hsl: 222deg, 65.3%, 19.2%;
+  --dh-color-blue-200-hsl: 222deg, 66.2%, 25.5%;
+  --dh-color-blue-300-hsl: 222deg, 64.8%, 32.4%;
+  --dh-color-blue-400-hsl: 222deg, 63.2%, 39.4%;
+  --dh-color-blue-500-hsl: 222deg, 60.7%, 46.9%;
+  --dh-color-blue-600-hsl: 222deg, 68.2%, 54.3%;
+  --dh-color-blue-700-hsl: 222deg, 82.7%, 61.6%;
+  --dh-color-blue-800-hsl: 222deg, 93.8%, 68.4%;
+  --dh-color-blue-900-hsl: 222deg, 100%, 74.3%;
+  --dh-color-blue-1000-hsl: 222deg, 100%, 79.6%;
+  --dh-color-blue-1100-hsl: 221deg, 100%, 84.3%;
+  --dh-color-blue-1200-hsl: 221deg, 100%, 89%;
+  --dh-color-blue-1300-hsl: 222deg, 100%, 92.9%;
+  --dh-color-blue-1400-hsl: 224deg, 100%, 96.3%;
+
   /* Indigo HSL components */
   --dh-color-indigo-100-hsl: 237deg, 58.1%, 24.3%;
   --dh-color-indigo-200-hsl: 236deg, 51.9%, 30.2%;
@@ -252,22 +252,6 @@
   --dh-color-black: hsl(var(--dh-color-black-hsl));
   --dh-color-white: hsl(var(--dh-color-white-hsl));
 
-  /* Blue */
-  --dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
-  --dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
-  --dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
-  --dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
-  --dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
-  --dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
-  --dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
-  --dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
-  --dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
-  --dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
-  --dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
-  --dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
-  --dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
-  --dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
-
   /* Red */
   --dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
   --dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
@@ -396,6 +380,22 @@
   --dh-color-cyan-1300: hsl(var(--dh-color-cyan-1300-hsl));
   --dh-color-cyan-1400: hsl(var(--dh-color-cyan-1400-hsl));
 
+  /* Blue */
+  --dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
+  --dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
+  --dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
+  --dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
+  --dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
+  --dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
+  --dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
+  --dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
+  --dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
+  --dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
+  --dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
+  --dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
+  --dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
+  --dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
+
   /* Indigo */
   --dh-color-indigo-100: hsl(var(--dh-color-indigo-100-hsl));
   --dh-color-indigo-200: hsl(var(--dh-color-indigo-200-hsl));

diff --git a/packages/components/src/theme/theme-light/theme-light-palette.css b/packages/components/src/theme/theme-light/theme-light-palette.css
@@ -227,22 +227,6 @@
   --dh-color-black: hsl(var(--dh-color-black-hsl));
   --dh-color-white: hsl(var(--dh-color-white-hsl));
 
-  /* Blue */
-  --dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
-  --dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
-  --dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
-  --dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
-  --dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
-  --dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
-  --dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
-  --dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
-  --dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
-  --dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
-  --dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
-  --dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
-  --dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
-  --dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
-
   /* Red */
   --dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
   --dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
@@ -371,6 +355,22 @@
   --dh-color-cyan-1300: hsl(var(--dh-color-cyan-1300-hsl));
   --dh-color-cyan-1400: hsl(var(--dh-color-cyan-1400-hsl));
 
+  /* Blue */
+  --dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
+  --dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
+  --dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
+  --dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
+  --dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
+  --dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
+  --dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
+  --dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
+  --dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
+  --dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
+  --dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
+  --dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
+  --dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
+  --dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
+
   /* Indigo */
   --dh-color-indigo-100: hsl(var(--dh-color-indigo-100-hsl));
   --dh-color-indigo-200: hsl(var(--dh-color-indigo-200-hsl));

diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png
diff --git a/tests/styleguide.spec.ts-snapshots/theme-color-palette-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/theme-color-palette-webkit-linux.png