feat: allow themes to use any srgb color for definitions (#1756)

Themes were previously limited to HSL raw value colors such that
transparency could be created using HSLA. This made theme creation
somewhat annoying and limiting. This change adopts color-mix (requires
chrome 111, firefox 113 -- both older than 6 months) to create any
necessary transparency.

- replaces hsl raw values with hex (allows skipping color normalization)
- replace hsla usage with color-mix
- fix miss-named legend-color
- created utils that use color-mix for easier specification
- move utils.scss to be auto-imported with custom.scss
- re-wrote color normilzation and resolving to resolve color-mix based
colors
- changed iris grid theme context to not accept a paritial

Style changes:
- style console input to match other inputs, add hover state to border
- fix input border hover color to use correct variable
- darken water color in dark theme maps]
- adjust disabled button color in light theme]
- fix selection background and selection hover color to be more subtle.
(No idea why I made it so opaque, it used to be 0.09 pre-spectrum)

BREAKING CHANGE:
- IrisGridThemeContext no longer accepts a paritial theme. By
guaranteeing the provider is a full theme we can resolve the CSS
variables and normailze the colors only once per theme load globally,
rather than having to do it once per grid.
- Themes must be defined using valid srgb CSS colors, and not hsl raw
component values

Author: dsmmcken

jest.setup.ts

@@ -68,3 +68,8 @@ Object.defineProperty(document, 'getAnimations', {
   value: () => [],
   writable: true,
 });
+
+Object.defineProperty(window.CSS, 'supports', {
+  value: () => true,
+  writable: true,
+});

packages/chart/src/ChartTheme.module.scss

@@ -5,7 +5,7 @@
   paper-bgcolor: var(--dh-color-chart-bg);
   plot-bgcolor: var(--dh-color-chart-plot-bg);
   title-color: var(--dh-color-chart-title);
-  legend-color: var(--dh-color-chart-legend-color);
+  legend-color: var(--dh-color-chart-legend-fg);
   colorway: var(--dh-color-chart-colorway);
   gridcolor: var(--dh-color-chart-grid);
   linecolor: var(--dh-color-chart-axis-line);

packages/code-studio/src/settings/SettingsMenu.scss

@@ -14,8 +14,11 @@ $settings-menu-rule-border: $gray-400;
 $settings-menu-rule-focused-border: $primary;
 
 $focus-over-primary-color: var(--dh-color-fg);
-$input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem
-  hsla(var(--dh-color-fg-hsl), 0.35);
+$input-btn-focus-box-shadow-over-primary: 0 0 0 0.2rem fg-opacity(35);
+
+$btn-focus-bg: fg-opacity($focus-bg-transparency);
+$btn-hover-bg: fg-opacity($hover-bg-transparency);
+$btn-active-bg: fg-opacity($active-bg-transparency);
 
 $settings-menu-z-index: $zindex-modal;
 
@@ -76,22 +79,22 @@ $settings-menu-z-index: $zindex-modal;
 
     &:focus {
       &::after {
-        background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);
+        background: $btn-focus-bg;
         border: 1px solid var(--dh-color-fg);
         box-shadow: $input-btn-focus-box-shadow-over-primary;
       }
     }
 
     &:hover {
       &::after {
-        background: hsla(var(--dh-color-fg-hsl), $hover-bg-transparency);
+        background: $btn-hover-bg;
       }
     }
 
     &:active {
       &::after {
         content: '';
-        background: hsla(var(--dh-color-fg-hsl), $active-bg-transparency);
+        background: $btn-active-bg;
       }
     }
   }
@@ -144,18 +147,18 @@ $settings-menu-z-index: $zindex-modal;
       height: 28px;
 
       &:focus {
-        background: hsla(var(--dh-color-fg-hsl), $focus-bg-transparency);
+        background: $btn-focus-bg;
         border: 1px solid var(--dh-color-fg);
         box-shadow: $input-btn-focus-box-shadow-over-primary;
       }
 
       &:hover {
-        background: hsla(var(--dh-color-fg-hsl), $hover-bg-transparency);
+        background: $btn-hover-bg;
       }
 
       &:active {
         content: '';
-        background: hsla(var(--dh-color-fg-hsl), $active-bg-transparency);
+        background: $btn-active-bg;
       }
     }
   }

packages/code-studio/src/styleguide/Swatch.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode, useMemo } from 'react';
 import { Tooltip } from '@deephaven/components';
-import { ColorUtils } from '@deephaven/utils';
 import { INVALID_COLOR_BORDER_STYLE } from './colorUtils';
 import { useContrastFgColorRef, useDhColorFromPseudoContent } from './hooks';
 
@@ -24,7 +23,6 @@ export function Swatch({ className, children }: SwatchProps): JSX.Element {
       dhColor != null
         ? {
             value: dhColor,
-            normalized: ColorUtils.normalizeCssColor(dhColor, true),
           }
         : null,
     [dhColor]
@@ -43,7 +41,6 @@ export function Swatch({ className, children }: SwatchProps): JSX.Element {
       {hasValue && (
         <Tooltip interactive>
           <div>{tooltip.value}</div>
-          <div>{tooltip.normalized}</div>
         </Tooltip>
       )}
       {children}

packages/code-studio/src/styleguide/ThemeColors.module.scss

@@ -7,8 +7,8 @@
   .swatch {
     display: flex;
     aspect-ratio: 4/3;
-    align-items: start;
-    justify-content: end;
+    align-items: flex-start;
+    justify-content: flex-end;
   }
 }
 

packages/code-studio/src/styleguide/colorUtils.ts

@@ -1,3 +1,4 @@
+import { getExpressionRanges } from '@deephaven/components';
 import { ColorUtils } from '@deephaven/utils';
 
 export const INVALID_COLOR_BORDER_STYLE = '2px solid var(--dh-color-notice-bg)';
@@ -136,11 +137,9 @@ export function extractColorVars(
       // values. We'll need to make this more robust if we ever change the
       // default themes to use non-hsl.
       if (varName === '--dh-color-chart-colorway') {
-        const colorwayColors = value
-          .split('hsl')
-          .filter(Boolean)
-          .map(v => `hsl${v.trim()}`);
-
+        const colorwayColors = getExpressionRanges(value ?? '').map(
+          ([start, end]) => value.substring(start, end + 1)
+        );
         return colorwayColors.map((varExp, i) => ({
           name: `${varName}-${i}`,
           value: varExp,
@@ -170,8 +169,8 @@ export function buildColorGroups(
 
   const groupData = swatchData.reduce(
     (acc, { name, value }) => {
-      // Skip -hsl variables since they aren't actually colors yet
-      if (/^--dh-color-(.*?)-hsl$/.test(name)) {
+      // Skip true black/white
+      if (/^--dh-color-true-(.*?)$/.test(name)) {
         return acc;
       }
 
@@ -208,14 +207,7 @@ export function buildColorGroups(
         return acc;
       }
 
-      // It might be nice to make these dynamic, but for now just hardcode
-      const note = {
-        '--dh-color-gray-900': 'light',
-        '--dh-color-gray-600': 'mid',
-        '--dh-color-gray-300': 'dark',
-      }[name];
-
-      acc[group].push({ name, value, note });
+      acc[group].push({ name, value });
 
       return acc;
     },

packages/components/scss/BaseStyleSheet.scss

@@ -1,7 +1,6 @@
 // Import our custom variables and bootstrap
 // Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
 @import './custom.scss';
-@import './util.scss';
 @import './bootstrap_imports.scss';
 
 :root {
@@ -24,10 +23,10 @@ html {
 
 // override
 .text-black-50 {
-  color: background-opacity(50) !important;
+  color: bg-opacity(50) !important;
 }
 .text-white-50 {
-  color: foreground-opacity(50) !important;
+  color: fg-opacity(50) !important;
 }
 
 // deephaven-icons are designed on a 16px grid
@@ -46,7 +45,7 @@ body {
   padding: 0;
   overscroll-behavior: none;
   -ms-scroll-chaining: none;
-  scrollbar-color: foreground-opacity(10) background-opacity(10); //applies to firefox only
+  scrollbar-color: fg-opacity(10) bg-opacity(10); //applies to firefox only
 }
 
 #root {
@@ -662,7 +661,7 @@ input[type='number']::-webkit-inner-spin-button {
 
 // style the same as monaco scrollbar
 ::-webkit-scrollbar-thumb {
-  background: hsla(var(--dh-color-scrollbar-hsl), 0.18);
+  background: color-mix(in srgb, var(--dh-color-scrollbar) 18%, transparent);
   border-radius: 0;
 }
 
@@ -672,23 +671,25 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 ::-webkit-scrollbar-corner {
-  background: background-opacity(10);
+  background: bg-opacity(10);
 }
 
 ::-webkit-scrollbar-track:horizontal {
-  border-top: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
+  border-top: 1px solid
+    color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
 }
 
 ::-webkit-scrollbar-track:vertical {
-  border-left: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
+  border-left: 1px solid
+    color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsla(var(--dh-color-scrollbar-hsl), 0.25);
+  background: color-mix(in srgb, var(--dh-color-scrollbar) 25%, transparent);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
+  background: color-mix(in srgb, var(--dh-color-scrollbar) 35%, transparent);
 }
 
 /********** Monaco Overides *********/

packages/components/scss/bootstrap_override_mixins_buttons.scss

@@ -9,7 +9,11 @@
   // DH Customization: Convert semantic value to css variables
   $background: var(--dh-color-#{$semantic-value}-bg);
   $border: var(--dh-color-#{$semantic-value}-bg);
-  $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+  $boxshadow-color: color-mix(
+    in srgb,
+    var(--dh-color-#{$semantic-value}-bg) 50%,
+    transparent
+  );
   $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
   $hover-border: var(--dh-color-#{$semantic-value}-hover-bg);
   $active-background: var(--dh-color-#{$semantic-value}-down-bg);
@@ -76,7 +80,11 @@
   $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
 
   $color: var(--dh-color-#{$semantic-value}-bg);
-  $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+  $boxshadow-color: color-mix(
+    in srgb,
+    var(--dh-color-#{$semantic-value}-bg) 50%,
+    transparent
+  );
   $hover-color: color-yiq($semantic-value);
   $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
   $active-background: var(--dh-color-#{$semantic-value}-down-bg);

packages/components/scss/bootstrap_overrides.scss

@@ -177,7 +177,11 @@ $input-placeholder-color: var(--dh-color-input-placeholder);
 $input-focus-border-color: var(--dh-color-input-focus-border);
 
 $input-btn-focus-width: 0.2rem;
-$input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
+$input-btn-focus-color: color-mix(
+  in srgb,
+  var(--dh-color-accent) 35%,
+  transparent
+);
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
 $input-btn-line-height: 1.3;
 // Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).

packages/components/scss/custom.scss

@@ -13,3 +13,4 @@
 
 //New variables come after imports
 @import './new_variables.scss';
+@import './util.scss';