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
deephaven · Jan 31, 2024 · b047fa3 · b047fa3
1 parent 3194c4b
commit b047fa3
Show file tree

Hide file tree

Showing 60 changed files with 1,181 additions and 1,412 deletions.
diff --git a/jest.setup.ts b/jest.setup.ts
@@ -68,3 +68,8 @@ Object.defineProperty(document, 'getAnimations', {
   value: () => [],
   writable: true,
 });
+
+Object.defineProperty(window.CSS, 'supports', {
+  value: () => true,
+  writable: true,
+});
diff --git a/packages/chart/src/ChartTheme.module.scss b/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);

diff --git a/packages/code-studio/src/settings/SettingsMenu.scss b/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;
       }
     }
   }

diff --git a/packages/code-studio/src/styleguide/Swatch.tsx b/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}

diff --git a/packages/code-studio/src/styleguide/ThemeColors.module.scss b/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;
   }
 }
 

diff --git a/packages/code-studio/src/styleguide/colorUtils.ts b/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;
     },

diff --git a/packages/components/scss/BaseStyleSheet.scss b/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 *********/

diff --git a/packages/components/scss/bootstrap_override_mixins_buttons.scss b/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);

diff --git a/packages/components/scss/bootstrap_overrides.scss b/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)).

diff --git a/packages/components/scss/custom.scss b/packages/components/scss/custom.scss
@@ -13,3 +13,4 @@
 
 //New variables come after imports
 @import './new_variables.scss';
+@import './util.scss';
diff --git a/packages/components/scss/new_variables.scss b/packages/components/scss/new_variables.scss
@@ -51,23 +51,7 @@ $ant-thickness: 1px;
   }
 }
 
-@function hsla-opacity($semantic-name, $i: 100) {
-  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));
-}
-
-@function accent-opacity($i: 100) {
-  @return hsla-opacity('accent', $i);
-}
-
-@function background-opacity($i: 100) {
-  @return hsla-opacity('bg', $i);
-}
-
-@function foreground-opacity($i: 100) {
-  @return hsla-opacity('fg', $i);
-}
-
-$focus-bg-transparency: 0.12;
-$hover-bg-transparency: 0.14;
-$active-bg-transparency: 0.28;
-$exception-transparency: 0.13;
+$focus-bg-transparency: 12%;
+$hover-bg-transparency: 14%;
+$active-bg-transparency: 28%;
+$exception-transparency: 13%;
diff --git a/packages/components/scss/util.scss b/packages/components/scss/util.scss
@@ -53,3 +53,32 @@
 @function solid-gradient($color) {
   @return linear-gradient(0deg, $color, $color);
 }
+
+@function color-mix-opacity($semantic-name, $i: 100) {
+  @return color-mix(
+    in srgb,
+    /* if $i doesn't contain a % sign, add one */
+      var(--dh-color-#{$semantic-name}) #{$i}#{if(unit($i) == '%', '', '%')},
+    transparent
+  );
+}
+
+@function accent-opacity($i: 100) {
+  @return color-mix-opacity('accent', $i);
+}
+
+@function negative-opacity($i: 100) {
+  @return color-mix-opacity('negative', $i);
+}
+
+@function black-opacity($i: 100) {
+  @return color-mix-opacity('black', $i);
+}
+
+@function bg-opacity($i: 100) {
+  @return color-mix-opacity('bg', $i);
+}
+
+@function fg-opacity($i: 100) {
+  @return color-mix-opacity('fg', $i);
+}
diff --git a/packages/components/src/ComboBox.scss b/packages/components/src/ComboBox.scss
@@ -1,5 +1,4 @@
 @import '../scss/custom.scss';
-@import '../scss/util.scss';
 
 $cb-option-btn-color: $dropdown-link-color;
 $cb-option-selected-bg: var(--dh-color-item-list-selected-bg);

diff --git a/packages/components/src/CustomTimeSelect.scss b/packages/components/src/CustomTimeSelect.scss
@@ -1,5 +1,4 @@
 @import '../scss/custom.scss';
-@import '../scss/util.scss';
 
 $cs-option-btn-color: var(--dh-color-item-list-selected-fg);
 $cs-option-selected-bg: var(--dh-color-item-list-selected-bg);

diff --git a/packages/components/src/DraggableItemList.scss b/packages/components/src/DraggableItemList.scss
@@ -68,7 +68,7 @@ $draggable-item-grip-color: $mid;
   .number-badge {
     padding: 0 $spacer-2;
     border-radius: 1rem;
-    background-color: hsla(var(--dh-color-white-hsl), 0.25);
+    background-color: fg-opacity(25);
     margin-right: $spacer-1;
   }
 }

diff --git a/packages/components/src/HierarchicalCheckboxMenu.scss b/packages/components/src/HierarchicalCheckboxMenu.scss
@@ -1,5 +1,4 @@
 @import '../scss/custom.scss';
-@import '../scss/util.scss';
 
 .hcm-btn {
   display: flex;

diff --git a/packages/components/src/LoadingOverlay.scss b/packages/components/src/LoadingOverlay.scss
@@ -2,7 +2,7 @@
 
 $iris-panel-message-font-size: 1.2rem;
 $iris-panel-icon-font-size: 64px;
-$iris-panel-scrim-bg: hsla(var(--dh-color-black-hsl), 0.1);
+$iris-panel-scrim-bg: black-opacity(10);
 
 .iris-panel-message-overlay {
   text-align: center;

diff --git a/packages/components/src/SearchInput.scss b/packages/components/src/SearchInput.scss
@@ -1,5 +1,4 @@
 @import '../scss/custom.scss';
-@import '../scss/util.scss';
 
 .search-group {
   position: relative;
@@ -50,13 +49,13 @@
   }
 
   .search-change-text {
-    background-color: hsla(var(--dh-color-white-hsl), 0.2);
+    background-color: fg-opacity(20);
     border-radius: 10px;
     padding: 1px 5px;
   }
 
   .search-match {
-    background-color: hsla(var(--dh-color-white-hsl), 0.2);
+    background-color: fg-opacity(20);
     border-radius: 10px;
     padding: 1px 5px;
     margin: 0 5px;