feat: allow themes to use any srgb color for definitions

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';

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%;

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);
+}

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);

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);

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;
  }
 }

packages/components/src/HierarchicalCheckboxMenu.scss

@@ -1,5 +1,4 @@
 @import '../scss/custom.scss';
-@import '../scss/util.scss';
 
 .hcm-btn {
  display: flex;

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;

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;