diff --git a/jest.setup.ts b/jest.setup.ts
index dbfe815f73..4bb196107b 100644
--- 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
index afc8ec19d0..0f5e009853 100644
--- 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
index 1ab74f7574..eff06753df 100644
--- 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,7 +79,7 @@ $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;
}
@@ -84,14 +87,14 @@ $settings-menu-z-index: $zindex-modal;
&: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
index dd872769ac..abfef13c27 100644
--- 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.value}
- {tooltip.normalized}
)}
{children}
diff --git a/packages/code-studio/src/styleguide/ThemeColors.module.scss b/packages/code-studio/src/styleguide/ThemeColors.module.scss
index 1ece108592..406307b3bd 100644
--- 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
index 4c2501645e..ab5a78f795 100644
--- 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
index da73e9bc91..e124edc603 100644
--- 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
index 08f1122adf..2f7a805b5e 100644
--- 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
index 53e991678f..35f8e02027 100644
--- 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
index 78a678e581..9c5c3737ca 100644
--- 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
index 65ce796a65..3e7aefe7cf 100644
--- 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
index 5f4b0a4f50..87279367b7 100644
--- 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
index 4a33538445..d4d90978e2 100644
--- 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
index e691372e9c..dbdd12c9d6 100644
--- 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
index a419c6275c..7a2145e46f 100644
--- 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
index 8c66611f9c..9a80a8243c 100644
--- 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
index 39bcc2f66f..f6ce309fa1 100644
--- 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
index b635c3399b..692011d27c 100644
--- 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;
diff --git a/packages/components/src/SelectValueList.scss b/packages/components/src/SelectValueList.scss
index b0e7b2fdd7..db036ef4a1 100644
--- a/packages/components/src/SelectValueList.scss
+++ b/packages/components/src/SelectValueList.scss
@@ -8,7 +8,7 @@
padding: $input-padding-y 0 $input-padding-y;
&.is-invalid {
- border-color: hsla(var(--dh-color-negative-hsl), 0.85);
+ border-color: negative-opacity(85);
}
}
diff --git a/packages/components/src/SocketedButton.scss b/packages/components/src/SocketedButton.scss
index 60d237ccf0..57ab37180a 100644
--- a/packages/components/src/SocketedButton.scss
+++ b/packages/components/src/SocketedButton.scss
@@ -108,7 +108,7 @@ $socket-bg: $content-bg;
.btn-socketed.is-invalid,
.btn-socketed.btn-socketed-linked.is-invalid {
- border-color: hsla(var(--dh-color-negative-hsl), 0.85);
+ border-color: negative-opacity(85);
&::after {
border-color: var(--dh-color-negative-bg);
@@ -130,8 +130,7 @@ $socket-bg: $content-bg;
}
&:focus {
- box-shadow: 0 0 0 $input-btn-focus-width
- hsla(var(--dh-color-negative-hsl), 0.35);
+ box-shadow: 0 0 0 $input-btn-focus-width negative-opacity(35);
}
&:disabled,
diff --git a/packages/components/src/navigation/Stack.scss b/packages/components/src/navigation/Stack.scss
index 7ba219c47e..7b2edd6c1f 100644
--- a/packages/components/src/navigation/Stack.scss
+++ b/packages/components/src/navigation/Stack.scss
@@ -17,7 +17,7 @@
.pushing-view,
.popping-view {
- box-shadow: -4px 0 8px hsla(var(--dh-color-black-hsl), 0.45);
+ box-shadow: -4px 0 8px black-opacity(45);
}
.popping-view {
diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts
index 931571c1cb..f30ad617fb 100644
--- a/packages/components/src/theme/ThemeUtils.test.ts
+++ b/packages/components/src/theme/ThemeUtils.test.ts
@@ -473,32 +473,39 @@ describe.each([undefined, document.createElement('div')])(
targetElement => {
const computedStyle = createMockProxy();
const expectedTargetEl = targetElement ?? document.body;
- const tmpPropEl = document.createElement('div');
+ const tmpPropEl = createMockProxy({
+ style: {
+ setProperty: jest.fn(),
+ removeProperty: jest.fn(),
+ } as unknown as CSSStyleDeclaration,
+ appendChild: jest.fn(),
+ remove: jest.fn(),
+ });
beforeEach(() => {
asMock(computedStyle.getPropertyValue)
.mockName('getPropertyValue')
.mockImplementation(key => `resolved:${key}`);
- jest.spyOn(expectedTargetEl, 'appendChild').mockName('appendChild');
+ jest
+ .spyOn(window, 'getComputedStyle')
+ .mockName('getComputedStyle')
+ .mockReturnValue(computedStyle);
+
+ jest
+ .spyOn(expectedTargetEl, 'appendChild')
+ .mockName('appendChild')
+ .mockReturnValue(tmpPropEl);
jest
.spyOn(document, 'createElement')
.mockName('createElement')
.mockReturnValue(tmpPropEl);
- jest.spyOn(tmpPropEl.style, 'setProperty').mockName('setProperty');
- jest.spyOn(tmpPropEl.style, 'removeProperty').mockName('removeProperty');
- jest.spyOn(tmpPropEl, 'remove').mockName('remove');
-
jest
.spyOn(ColorUtils, 'normalizeCssColor')
.mockName('normalizeCssColor')
.mockImplementation(key => `normalized:${key}`);
- jest
- .spyOn(window, 'getComputedStyle')
- .mockName('getComputedStyle')
- .mockReturnValue(computedStyle);
});
it('should map non-css variable values verbatim', () => {
@@ -519,12 +526,12 @@ describe.each([undefined, document.createElement('div')])(
isAlphaOptional => {
const given = {
aaa: 'var(--aaa)',
- bbb: 'var(--bbb1) var(--bbb2)',
+ bbb: 'var(--bbb1)',
};
const expected = {
- aaa: 'normalized:resolved:--dh-tmp-0',
- bbb: 'normalized:resolved:--dh-tmp-1 normalized:resolved:--dh-tmp-2',
+ aaa: 'normalized:resolved:background-color',
+ bbb: 'normalized:resolved:background-color',
};
const actual = resolveCssVariablesInRecord(
@@ -553,7 +560,7 @@ describe.each([undefined, document.createElement('div')])(
tmpPropKey
);
expect(ColorUtils.normalizeCssColor).toHaveBeenCalledWith(
- `resolved:${tmpPropKey}`,
+ `resolved:background-color`,
isAlphaOptional ?? false
);
});
diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts
index 4b9cc44073..152cbf1dff 100644
--- a/packages/components/src/theme/ThemeUtils.ts
+++ b/packages/components/src/theme/ThemeUtils.ts
@@ -300,39 +300,54 @@ export function resolveCssVariablesInRecord>(
// Add a temporary div to attach temp css variables to
const tmpPropEl = document.createElement('div');
- targetElement.appendChild(tmpPropEl);
-
- const varExpressions = [...extractDistinctCssVariableExpressions(record)];
-
- // Set temporary css variables for resolving var expressions
- varExpressions.forEach((varExpression, i) => {
- const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${i}`;
- tmpPropEl.style.setProperty(tmpPropKey, varExpression);
+ tmpPropEl.style.display = 'none';
+
+ const recordArray = Object.entries(record);
+ recordArray.forEach(([, value], i) => {
+ tmpPropEl.style.setProperty(`--${TMP_CSS_PROP_PREFIX}-${i}`, value);
+ // faster to create these now all at once, even if we don't use them all
+ // since the parent isn't added yet to the DOM
+ const el = document.createElement('div');
+ // use background color instead of color to avoid inherited values
+ el.style.backgroundColor = value;
+ tmpPropEl.appendChild(el);
});
- const result = {} as T;
-
- const computedStyle = window.getComputedStyle(tmpPropEl);
-
- const resolver = (varExpression: string): string => {
- const tmpPropKey = `--${TMP_CSS_PROP_PREFIX}-${varExpressions.indexOf(
- varExpression
- )}`;
-
- const resolved = computedStyle.getPropertyValue(tmpPropKey);
-
- return ColorUtils.normalizeCssColor(resolved, isAlphaOptional);
- };
+ // append only once to avoid multiple re-layouts
+ // must be part of DOM to get computed color
+ targetElement.appendChild(tmpPropEl);
+ const tempPropElComputedStyle = window.getComputedStyle(tmpPropEl);
- // Resolve the temporary css variables
- Object.entries(record).forEach(([key, value]) => {
- result[key as keyof T] = resolveCssVariablesInString(
- resolver,
- value
- ) as T[keyof T];
+ const result = {} as T;
+ recordArray.forEach(([key, value], i) => {
+ // only resolve if it contains a css var expression
+ if (!value.includes(CSS_VAR_EXPRESSION_PREFIX)) {
+ (result as Record)[key] = value;
+ return;
+ }
+ // resolves any variables in the expression
+ let resolved = tempPropElComputedStyle.getPropertyValue(
+ `--${TMP_CSS_PROP_PREFIX}-${i}`
+ );
+ if (
+ // skip if resolved is already hex
+ !/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(resolved) &&
+ // only try to normalize things that are valid colors
+ // otherwise non-colors will be made #00000000
+ CSS.supports('color', resolved)
+ ) {
+ // getting the computed background color is necessary
+ // because resolved can still contain a color-mix() function
+ const el = tmpPropEl.children[i] as HTMLDivElement;
+ const computedStyle = window.getComputedStyle(el);
+ const color = computedStyle.getPropertyValue('background-color');
+ // convert color to hex, which is what monaco and plotly require
+ resolved = ColorUtils.normalizeCssColor(color, isAlphaOptional);
+ }
+ (result as Record)[key] = resolved;
});
- // Remove the temporary css variables
+ // Remove the temporary div
tmpPropEl.remove();
log.debug('Resolved css variables', performance.now() - perfStart, 'ms');
diff --git a/packages/components/src/theme/theme-dark/theme-dark-components.css b/packages/components/src/theme/theme-dark/theme-dark-components.css
index 4ea6989a06..e3cd0ebc6f 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-components.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-components.css
@@ -2,10 +2,26 @@
/* stylelint-disable alpha-value-notation */
:root {
--dh-color-loading-spinner-primary: var(--dh-color-accent-bg);
- --dh-color-loading-spinner-secondary: hsla(var(--dh-color-gray-800-hsl), 0.5);
- --dh-color-quickactions-bg: hsla(var(--dh-color-visual-gray-hsl), 0.9);
- --dh-color-radial-reaction: hsla(var(--dh-color-visual-gray-hsl), 0.6);
- --dh-color-colorpicker-border: hsla(var(--dh-color-visual-gray-hsl), 0.1);
+ --dh-color-loading-spinner-secondary: color-mix(
+ in srgb,
+ var(--dh-color-gray-800) 50%,
+ transparent
+ );
+ --dh-color-quickactions-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 90%,
+ transparent
+ );
+ --dh-color-radial-reaction: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 60%,
+ transparent
+ );
+ --dh-color-colorpicker-border: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 10%,
+ transparent
+ );
/* Logo */
--dh-logo-img: var(--dh-logo-dark-img);
@@ -18,13 +34,15 @@
/* We should base this color on something from the palette, but for now just
* hard coding the original value */
- --dh-color-random-area-plot-animation-fg-fill: hsla(
- var(--dh-color-accent-hsl),
- 0.08
+ --dh-color-random-area-plot-animation-fg-fill: color-mix(
+ in srgb,
+ var(--dh-color-accent) 8%,
+ transparent
);
- --dh-color-random-area-plot-animation-fg-stroke: hsla(
- var(--dh-color-accent-hsl),
- 0.2
+ --dh-color-random-area-plot-animation-fg-stroke: color-mix(
+ in srgb,
+ var(--dh-color-accent) 20%,
+ transparent
);
--dh-color-random-area-plot-animation-bg: var(--dh-color-gray-75);
--dh-color-random-area-plot-animation-grid: var(--dh-color-gray-300);
@@ -65,15 +83,16 @@
--dh-color-input-disabled-bg: var(--dh-color-disabled-bg);
--dh-color-input-disabled-border: transparent;
--dh-color-input-disabled-fg: var(--dh-color-text-disabled);
- --dh-color-input-hover-border: var(--dh-color-gray-600);
+ --dh-color-input-hover-border: var(--dh-color-hover-border);
--dh-color-input-focus-border: var(--dh-color-border-focus);
/* Form Controls */
--dh-color-search-icon: var(--dh-color-fg);
- --dh-color-form-control-error: hsl(var(--dh-color-visual-negative-hsl));
- --dh-color-form-control-error-shadow: hsla(
- var(--dh-color-visual-negative-hsl),
- 0.25
+ --dh-color-form-control-error: var(--dh-color-visual-negative);
+ --dh-color-form-control-error-shadow: color-mix(
+ in srgb,
+ var(--dh-color-visual-negative) 25%,
+ transparent
);
/* Labels */
@@ -96,12 +115,17 @@
--dh-color-highlight-selected-hover
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
- --dh-color-item-list-selected-border: hsla(var(--dh-color-accent-hsl), 0.6);
+ --dh-color-item-list-selected-border: color-mix(
+ in srgb,
+ var(--dh-color-accent) 60%,
+ transparent
+ );
--dh-color-item-list-drop-target-fg: var(--dh-color-white);
- --dh-color-item-list-keyboard-selected-bg: hsla(
- var(--dh-color-accent-hsl),
- 0.5
+ --dh-color-item-list-keyboard-selected-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent) 50%,
+ transparent
);
/*
@@ -136,6 +160,14 @@
--dh-color-tooltip-box-shadow: var(--dh-color-dropshadow);
/* Wells */
- --dh-color-well-bg: hsla(var(--dh-color-visual-gray-hsl), 0.02);
- --dh-color-well-border: hsla(var(--dh-color-visual-gray-hsl), 0.05);
+ --dh-color-well-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 2%,
+ transparent
+ );
+ --dh-color-well-border: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 5%,
+ transparent
+ );
}
diff --git a/packages/components/src/theme/theme-dark/theme-dark-palette.css b/packages/components/src/theme/theme-dark/theme-dark-palette.css
index 7856daac97..ad5d321774 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-palette.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-palette.css
@@ -1,462 +1,233 @@
/* stylelint-disable custom-property-empty-line-before */
:root {
/* Gray */
- --dh-color-gray-50-hsl: 300deg, 6.1%, 9.6%;
- --dh-color-gray-75-hsl: 280deg, 4.6%, 12.7%;
- --dh-color-gray-100-hsl: 285deg, 4.5%, 17.3%;
- --dh-color-gray-200-hsl: 285deg, 4.1%, 19.2%;
- --dh-color-gray-300-hsl: 285deg, 3.7%, 21.2%;
- --dh-color-gray-400-hsl: 280deg, 2.4%, 24.9%;
- --dh-color-gray-500-hsl: 270deg, 1.1%, 35.7%;
- --dh-color-gray-600-hsl: 300deg, 0.5%, 57.1%;
- --dh-color-gray-700-hsl: 0deg, 0.8%, 75.1%;
- --dh-color-gray-800-hsl: 60deg, 6.2%, 93.7%;
- --dh-color-gray-900-hsl: 60deg, 25%, 98.4%;
-
- --dh-color-gray-light-hsl: var(--dh-color-gray-900-hsl);
- --dh-color-gray-mid-hsl: var(--dh-color-gray-600-hsl);
- --dh-color-gray-dark-hsl: var(--dh-color-gray-300-hsl);
+ --dh-color-gray-50: #1a171a;
+ --dh-color-gray-75: #211f22;
+ --dh-color-gray-100: #2d2a2e;
+ --dh-color-gray-200: #322f33;
+ --dh-color-gray-300: #373438;
+ --dh-color-gray-400: #403e41;
+ --dh-color-gray-500: #5b5a5c;
+ --dh-color-gray-600: #929192;
+ --dh-color-gray-700: #c0bfbf;
+ --dh-color-gray-800: #f0f0ee;
+ --dh-color-gray-900: #fcfcfa;
+
+ --dh-color-gray-light: var(--dh-color-gray-900);
+ --dh-color-gray-mid: var(--dh-color-gray-600);
+ --dh-color-gray-dark: var(--dh-color-gray-300);
/** Black & White */
- --dh-color-black-hsl: var(--dh-color-gray-50-hsl);
- --dh-color-white-hsl: var(--dh-color-gray-800-hsl);
- --dh-color-true-black-hsl: 0deg, 0%, 0%;
- --dh-color-true-white-hsl: 0deg, 0%, 100%;
+ --dh-color-black: var(--dh-color-gray-50);
+ --dh-color-white: var(--dh-color-gray-800);
+ --dh-color-true-black: #000000;
+ --dh-color-true-white: #ffffff;
/* Reds HSL components */
- --dh-color-red-100-hsl: 346deg, 54.3%, 18%;
- --dh-color-red-200-hsl: 345deg, 55%, 23.5%;
- --dh-color-red-300-hsl: 346deg, 54.2%, 30%;
- --dh-color-red-400-hsl: 345deg, 54.3%, 36.9%;
- --dh-color-red-500-hsl: 345deg, 53.4%, 43.7%;
- --dh-color-red-600-hsl: 345deg, 54.8%, 51.4%;
- --dh-color-red-700-hsl: 345deg, 71.3%, 59%;
- --dh-color-red-800-hsl: 345deg, 91.7%, 67.1%;
- --dh-color-red-900-hsl: 344deg, 100%, 74.1%;
- --dh-color-red-1000-hsl: 343deg, 100%, 80%;
- --dh-color-red-1100-hsl: 343deg, 100%, 85.3%;
- --dh-color-red-1200-hsl: 344deg, 100%, 89.8%;
- --dh-color-red-1300-hsl: 344deg, 100%, 93.5%;
- --dh-color-red-1400-hsl: 344deg, 100%, 96.3%;
+ --dh-color-red-100: #471521;
+ --dh-color-red-200: #5d1b2b;
+ --dh-color-red-300: #762336;
+ --dh-color-red-400: #912b45;
+ --dh-color-red-500: #ab3452;
+ --dh-color-red-600: #c73f61;
+ --dh-color-red-700: #e14c71;
+ --dh-color-red-800: #f85e85;
+ --dh-color-red-900: #ff7b9e;
+ --dh-color-red-1000: #ff99b6;
+ --dh-color-red-1100: #ffb4c9;
+ --dh-color-red-1200: #ffcbd9;
+ --dh-color-red-1300: #ffdee7;
+ --dh-color-red-1400: #ffecf1;
/* Orange HSL components */
- --dh-color-orange-100-hsl: 20deg, 100%, 13.9%;
- --dh-color-orange-200-hsl: 22deg, 95.7%, 18%;
- --dh-color-orange-300-hsl: 23deg, 89.8%, 23.1%;
- --dh-color-orange-400-hsl: 22deg, 83.7%, 28.8%;
- --dh-color-orange-500-hsl: 22deg, 79.7%, 34.7%;
- --dh-color-orange-600-hsl: 22deg, 74.3%, 41.2%;
- --dh-color-orange-700-hsl: 22deg, 69.8%, 48%;
- --dh-color-orange-800-hsl: 22deg, 78.2%, 55.1%;
- --dh-color-orange-900-hsl: 21deg, 94.7%, 63.1%;
- --dh-color-orange-1000-hsl: 22deg, 100%, 70.6%;
- --dh-color-orange-1100-hsl: 23deg, 100%, 77.6%;
- --dh-color-orange-1200-hsl: 24deg, 100%, 84.3%;
- --dh-color-orange-1300-hsl: 24deg, 100%, 89.8%;
- --dh-color-orange-1400-hsl: 25deg, 100%, 94.3%;
+ --dh-color-orange-100: #471800;
+ --dh-color-orange-200: #5a2202;
+ --dh-color-orange-300: #702f06;
+ --dh-color-orange-400: #87390c;
+ --dh-color-orange-500: #9f4612;
+ --dh-color-orange-600: #b7541b;
+ --dh-color-orange-700: #d06425;
+ --dh-color-orange-800: #e67533;
+ --dh-color-orange-900: #fa8648;
+ --dh-color-orange-1000: #ffa069;
+ --dh-color-orange-1100: #ffb98d;
+ --dh-color-orange-1200: #ffcfaf;
+ --dh-color-orange-1300: #ffe0cb;
+ --dh-color-orange-1400: #ffeee2;
/* Yellow HSL components */
- --dh-color-yellow-100-hsl: 51deg, 100%, 9%;
- --dh-color-yellow-200-hsl: 50deg, 100%, 12%;
- --dh-color-yellow-300-hsl: 51deg, 100%, 15.1%;
- --dh-color-yellow-400-hsl: 50deg, 90%, 19.6%;
- --dh-color-yellow-500-hsl: 49deg, 82.4%, 24.5%;
- --dh-color-yellow-600-hsl: 48deg, 75%, 29.8%;
- --dh-color-yellow-700-hsl: 48deg, 70.2%, 35.5%;
- --dh-color-yellow-800-hsl: 47deg, 65.7%, 41.2%;
- --dh-color-yellow-900-hsl: 47deg, 61.2%, 47.5%;
- --dh-color-yellow-1000-hsl: 47deg, 66.2%, 53.5%;
- --dh-color-yellow-1100-hsl: 46deg, 79.4%, 60%;
- --dh-color-yellow-1200-hsl: 46deg, 94.2%, 66.5%;
- --dh-color-yellow-1300-hsl: 49deg, 100%, 73.9%;
- --dh-color-yellow-1400-hsl: 51deg, 100%, 83.7%;
+ --dh-color-yellow-100: #2e2700;
+ --dh-color-yellow-200: #3d3300;
+ --dh-color-yellow-300: #4d4100;
+ --dh-color-yellow-400: #5f5005;
+ --dh-color-yellow-500: #725f0b;
+ --dh-color-yellow-600: #856e13;
+ --dh-color-yellow-700: #9a811b;
+ --dh-color-yellow-800: #ae9024;
+ --dh-color-yellow-900: #c3a32f;
+ --dh-color-yellow-1000: #d7b53a;
+ --dh-color-yellow-1100: #eac448;
+ --dh-color-yellow-1200: #fad459;
+ --dh-color-yellow-1300: #ffe77a;
+ --dh-color-yellow-1400: #fff3ac;
/* Chartreuse HSL components */
- --dh-color-chartreuse-100-hsl: 77deg, 100%, 8.4%;
- --dh-color-chartreuse-200-hsl: 75deg, 83.6%, 12%;
- --dh-color-chartreuse-300-hsl: 74deg, 73.2%, 16.1%;
- --dh-color-chartreuse-400-hsl: 71deg, 67%, 20.2%;
- --dh-color-chartreuse-500-hsl: 71deg, 62.2%, 24.9%;
- --dh-color-chartreuse-600-hsl: 70deg, 58.9%, 29.6%;
- --dh-color-chartreuse-700-hsl: 69deg, 55.7%, 34.5%;
- --dh-color-chartreuse-800-hsl: 68deg, 52.9%, 40%;
- --dh-color-chartreuse-900-hsl: 67deg, 50%, 45.5%;
- --dh-color-chartreuse-1000-hsl: 67deg, 49.2%, 51.4%;
- --dh-color-chartreuse-1100-hsl: 67deg, 57.8%, 57.3%;
- --dh-color-chartreuse-1200-hsl: 66deg, 67.2%, 64.1%;
- --dh-color-chartreuse-1300-hsl: 66deg, 75.7%, 72.5%;
- --dh-color-chartreuse-1400-hsl: 66deg, 82%, 82.5%;
+ --dh-color-chartreuse-100: #1f2b00;
+ --dh-color-chartreuse-200: #2b3805;
+ --dh-color-chartreuse-300: #39470b;
+ --dh-color-chartreuse-400: #495611;
+ --dh-color-chartreuse-500: #596718;
+ --dh-color-chartreuse-600: #69781f;
+ --dh-color-chartreuse-700: #7a8927;
+ --dh-color-chartreuse-800: #8e9c30;
+ --dh-color-chartreuse-900: #a1ae3a;
+ --dh-color-chartreuse-1000: #b2c046;
+ --dh-color-chartreuse-1100: #c2d153;
+ --dh-color-chartreuse-1200: #d5e166;
+ --dh-color-chartreuse-1300: #e3ee84;
+ --dh-color-chartreuse-1400: #f0f7ae;
/* Celery HSL components */
- --dh-color-celery-100-hsl: 127deg, 42.9%, 12.4%;
- --dh-color-celery-200-hsl: 125deg, 43.2%, 15.9%;
- --dh-color-celery-300-hsl: 125deg, 42.9%, 20.6%;
- --dh-color-celery-400-hsl: 125deg, 42.6%, 25.3%;
- --dh-color-celery-500-hsl: 125deg, 41.6%, 30.2%;
- --dh-color-celery-600-hsl: 126deg, 40.7%, 35.7%;
- --dh-color-celery-700-hsl: 125deg, 39.3%, 41.4%;
- --dh-color-celery-800-hsl: 125deg, 36.6%, 47.6%;
- --dh-color-celery-900-hsl: 125deg, 39.1%, 54.9%;
- --dh-color-celery-1000-hsl: 125deg, 43.9%, 62.9%;
- --dh-color-celery-1100-hsl: 125deg, 47.9%, 71.4%;
- --dh-color-celery-1200-hsl: 126deg, 49.5%, 79.8%;
- --dh-color-celery-1300-hsl: 126deg, 48.5%, 87.1%;
- --dh-color-celery-1400-hsl: 127deg, 50%, 92.9%;
+ --dh-color-celery-100: #122d15;
+ --dh-color-celery-200: #173a1a;
+ --dh-color-celery-300: #1e4b22;
+ --dh-color-celery-400: #255c2a;
+ --dh-color-celery-500: #2d6d32;
+ --dh-color-celery-600: #36803d;
+ --dh-color-celery-700: #409347;
+ --dh-color-celery-800: #4da654;
+ --dh-color-celery-900: #5fb967;
+ --dh-color-celery-1000: #77ca7e;
+ --dh-color-celery-1100: #93d999;
+ --dh-color-celery-1200: #b2e5b7;
+ --dh-color-celery-1300: #ceeed1;
+ --dh-color-celery-1400: #e4f6e6;
/* Green HSL components */
- --dh-color-green-100-hsl: 95deg, 17.1%, 13.7%;
- --dh-color-green-200-hsl: 92deg, 18.7%, 17.8%;
- --dh-color-green-300-hsl: 94deg, 21.7%, 22.5%;
- --dh-color-green-400-hsl: 94deg, 22.9%, 27.5%;
- --dh-color-green-500-hsl: 93deg, 25.6%, 32.2%;
- --dh-color-green-600-hsl: 95deg, 27.7%, 37.5%;
- --dh-color-green-700-hsl: 95deg, 29.6%, 42.4%;
- --dh-color-green-800-hsl: 94deg, 31.7%, 47.6%;
- --dh-color-green-900-hsl: 94deg, 37.5%, 52.9%;
- --dh-color-green-1000-hsl: 94deg, 47.4%, 58.2%;
- --dh-color-green-1100-hsl: 94deg, 58.9%, 63.7%;
- --dh-color-green-1200-hsl: 94deg, 70.9%, 70.4%;
- --dh-color-green-1300-hsl: 94deg, 81.5%, 78.8%;
- --dh-color-green-1400-hsl: 93deg, 87.7%, 87.3%;
+ --dh-color-green-100: #22291d;
+ --dh-color-green-200: #2d3625;
+ --dh-color-green-300: #38462d;
+ --dh-color-green-400: #445636;
+ --dh-color-green-500: #50673d;
+ --dh-color-green-600: #5b7a45;
+ --dh-color-green-700: #678c4c;
+ --dh-color-green-800: #74a053;
+ --dh-color-green-900: #81b45a;
+ --dh-color-green-1000: #8ec762;
+ --dh-color-green-1100: #9bd96c;
+ --dh-color-green-1200: #ace97e;
+ --dh-color-green-1300: #c3f59d;
+ --dh-color-green-1400: #dcfbc2;
/* Seafoam HSL components */
- --dh-color-seafoam-100-hsl: 156deg, 13.9%, 14.1%;
- --dh-color-seafoam-200-hsl: 158deg, 17.4%, 18%;
- --dh-color-seafoam-300-hsl: 159deg, 19.7%, 22.9%;
- --dh-color-seafoam-400-hsl: 158deg, 22.5%, 27.8%;
- --dh-color-seafoam-500-hsl: 158deg, 25.7%, 32.7%;
- --dh-color-seafoam-600-hsl: 159deg, 28.8%, 37.5%;
- --dh-color-seafoam-700-hsl: 161deg, 33%, 42.2%;
- --dh-color-seafoam-800-hsl: 161deg, 36.4%, 46.9%;
- --dh-color-seafoam-900-hsl: 162deg, 41.9%, 51.4%;
- --dh-color-seafoam-1000-hsl: 161deg, 53.4%, 56.3%;
- --dh-color-seafoam-1100-hsl: 162deg, 66%, 62%;
- --dh-color-seafoam-1200-hsl: 161deg, 76.5%, 70%;
- --dh-color-seafoam-1300-hsl: 158deg, 86.5%, 79.6%;
- --dh-color-seafoam-1400-hsl: 156deg, 89.1%, 89.2%;
+ --dh-color-seafoam-100: #1f2925;
+ --dh-color-seafoam-200: #263630;
+ --dh-color-seafoam-300: #2f463e;
+ --dh-color-seafoam-400: #37574b;
+ --dh-color-seafoam-500: #3e6959;
+ --dh-color-seafoam-600: #447b68;
+ --dh-color-seafoam-700: #488f79;
+ --dh-color-seafoam-800: #4ca388;
+ --dh-color-seafoam-900: #4fb798;
+ --dh-color-seafoam-1000: #54cba5;
+ --dh-color-seafoam-1100: #5edeb8;
+ --dh-color-seafoam-1200: #78edc8;
+ --dh-color-seafoam-1300: #9ef8d7;
+ --dh-color-seafoam-1400: #cbfce8;
/* Cyan HSL components */
- --dh-color-cyan-100-hsl: 185deg, 38.5%, 12.7%;
- --dh-color-cyan-200-hsl: 186deg, 38.1%, 16.5%;
- --dh-color-cyan-300-hsl: 186deg, 38.9%, 21.2%;
- --dh-color-cyan-400-hsl: 185deg, 38.3%, 26.1%;
- --dh-color-cyan-500-hsl: 185deg, 38.4%, 31.2%;
- --dh-color-cyan-600-hsl: 186deg, 38%, 36.7%;
- --dh-color-cyan-700-hsl: 185deg, 37.7%, 42.2%;
- --dh-color-cyan-800-hsl: 185deg, 37.1%, 48%;
- --dh-color-cyan-900-hsl: 185deg, 42.5%, 54.3%;
- --dh-color-cyan-1000-hsl: 185deg, 52.5%, 60.4%;
- --dh-color-cyan-1100-hsl: 186deg, 64.5%, 66.9%;
- --dh-color-cyan-1200-hsl: 186deg, 78.9%, 73.9%;
- --dh-color-cyan-1300-hsl: 186deg, 91.6%, 81.4%;
- --dh-color-cyan-1400-hsl: 186deg, 100%, 89.6%;
+ --dh-color-cyan-100: #142b2d;
+ --dh-color-cyan-200: #1a373a;
+ --dh-color-cyan-300: #21474b;
+ --dh-color-cyan-400: #29585c;
+ --dh-color-cyan-500: #31696e;
+ --dh-color-cyan-600: #3a7a81;
+ --dh-color-cyan-700: #438d94;
+ --dh-color-cyan-800: #4da0a8;
+ --dh-color-cyan-900: #59b4bc;
+ --dh-color-cyan-1000: #65c6cf;
+ --dh-color-cyan-1100: #74d6e1;
+ --dh-color-cyan-1200: #88e6f1;
+ --dh-color-cyan-1300: #a4f2fb;
+ --dh-color-cyan-1400: #cafaff;
/* 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%;
+ --dh-color-blue-100: #112451;
+ --dh-color-blue-200: #16306c;
+ --dh-color-blue-300: #1d3d88;
+ --dh-color-blue-400: #254ba4;
+ --dh-color-blue-500: #2f5bc0;
+ --dh-color-blue-600: #3b6bda;
+ --dh-color-blue-700: #4c7dee;
+ --dh-color-blue-800: #6390fa;
+ --dh-color-blue-900: #7ca3ff;
+ --dh-color-blue-1000: #97b6ff;
+ --dh-color-blue-1100: #afc8ff;
+ --dh-color-blue-1200: #c7d9ff;
+ --dh-color-blue-1300: #dbe6ff;
+ --dh-color-blue-1400: #ecf1ff;
/* Indigo HSL components */
- --dh-color-indigo-100-hsl: 237deg, 58.1%, 24.3%;
- --dh-color-indigo-200-hsl: 236deg, 51.9%, 30.2%;
- --dh-color-indigo-300-hsl: 236deg, 46.8%, 36.9%;
- --dh-color-indigo-400-hsl: 235deg, 42.6%, 43.7%;
- --dh-color-indigo-500-hsl: 235deg, 40.2%, 50.8%;
- --dh-color-indigo-600-hsl: 235deg, 48.8%, 57.8%;
- --dh-color-indigo-700-hsl: 234deg, 59.8%, 64.9%;
- --dh-color-indigo-800-hsl: 234deg, 74.8%, 72%;
- --dh-color-indigo-900-hsl: 234deg, 91%, 78.2%;
- --dh-color-indigo-1000-hsl: 234deg, 100%, 83.3%;
- --dh-color-indigo-1100-hsl: 234deg, 100%, 87.3%;
- --dh-color-indigo-1200-hsl: 235deg, 100%, 91.2%;
- --dh-color-indigo-1300-hsl: 232deg, 100%, 94.1%;
- --dh-color-indigo-1400-hsl: 236deg, 100%, 96.9%;
+ --dh-color-indigo-100: #1a1e62;
+ --dh-color-indigo-200: #252a75;
+ --dh-color-indigo-300: #32388a;
+ --dh-color-indigo-400: #40489f;
+ --dh-color-indigo-500: #4f58b4;
+ --dh-color-indigo-600: #5f68c8;
+ --dh-color-indigo-700: #707bdb;
+ --dh-color-indigo-800: #828ded;
+ --dh-color-indigo-900: #959ffa;
+ --dh-color-indigo-1000: #aab2ff;
+ --dh-color-indigo-1100: #bec5ff;
+ --dh-color-indigo-1200: #d2d6ff;
+ --dh-color-indigo-1300: #e1e5ff;
+ --dh-color-indigo-1400: #eff0ff;
/* Purple HSL components */
- --dh-color-purple-100-hsl: 263deg, 73.1%, 23.3%;
- --dh-color-purple-200-hsl: 260deg, 59.2%, 29.8%;
- --dh-color-purple-300-hsl: 258deg, 49.7%, 36.7%;
- --dh-color-purple-400-hsl: 257deg, 43.2%, 43.5%;
- --dh-color-purple-500-hsl: 255deg, 38.3%, 50.4%;
- --dh-color-purple-600-hsl: 254deg, 45%, 57.3%;
- --dh-color-purple-700-hsl: 253deg, 53.8%, 64.3%;
- --dh-color-purple-800-hsl: 251deg, 64.4%, 71.4%;
- --dh-color-purple-900-hsl: 250deg, 78.8%, 77.8%;
- --dh-color-purple-1000-hsl: 249deg, 90.6%, 83.3%;
- --dh-color-purple-1100-hsl: 249deg, 96.8%, 87.6%;
- --dh-color-purple-1200-hsl: 250deg, 100%, 91.4%;
- --dh-color-purple-1300-hsl: 251deg, 100%, 94.5%;
- --dh-color-purple-1400-hsl: 260deg, 88.2%, 96.7%;
+ --dh-color-purple-100: #311067;
+ --dh-color-purple-200: #3d1f79;
+ --dh-color-purple-300: #4b2f8c;
+ --dh-color-purple-400: #5a3f9f;
+ --dh-color-purple-500: #6850b1;
+ --dh-color-purple-600: #7861c3;
+ --dh-color-purple-700: #8873d5;
+ --dh-color-purple-800: #9887e5;
+ --dh-color-purple-900: #a99af3;
+ --dh-color-purple-1000: #b9aefb;
+ --dh-color-purple-1100: #cac1fe;
+ --dh-color-purple-1200: #dad3ff;
+ --dh-color-purple-1300: #e8e3ff;
+ --dh-color-purple-1400: #f4effe;
/* Fuchsia HSL components */
- --dh-color-fuchsia-100-hsl: 301deg, 64.3%, 16.5%;
- --dh-color-fuchsia-200-hsl: 300deg, 53.2%, 21.8%;
- --dh-color-fuchsia-300-hsl: 297deg, 43.8%, 28.6%;
- --dh-color-fuchsia-400-hsl: 294deg, 39.2%, 35.5%;
- --dh-color-fuchsia-500-hsl: 291deg, 35.2%, 42.9%;
- --dh-color-fuchsia-600-hsl: 287deg, 32.5%, 50.6%;
- --dh-color-fuchsia-700-hsl: 283deg, 39.6%, 58.4%;
- --dh-color-fuchsia-800-hsl: 279deg, 50%, 66.3%;
- --dh-color-fuchsia-900-hsl: 277deg, 61.5%, 73.5%;
- --dh-color-fuchsia-1000-hsl: 275deg, 70.9%, 79.8%;
- --dh-color-fuchsia-1100-hsl: 275deg, 76.3%, 85.1%;
- --dh-color-fuchsia-1200-hsl: 277deg, 77.8%, 89.4%;
- --dh-color-fuchsia-1300-hsl: 280deg, 77.1%, 93.1%;
- --dh-color-fuchsia-1400-hsl: 288deg, 71.4%, 95.9%;
+ --dh-color-fuchsia-100: #450f44;
+ --dh-color-fuchsia-200: #551a55;
+ --dh-color-fuchsia-300: #662969;
+ --dh-color-fuchsia-400: #77377e;
+ --dh-color-fuchsia-500: #884794;
+ --dh-color-fuchsia-600: #9858aa;
+ --dh-color-fuchsia-700: #a76bbf;
+ --dh-color-fuchsia-800: #b67ed4;
+ --dh-color-fuchsia-900: #c592e5;
+ --dh-color-fuchsia-1000: #d2a7f0;
+ --dh-color-fuchsia-1100: #debcf6;
+ --dh-color-fuchsia-1200: #e9cff9;
+ --dh-color-fuchsia-1300: #f2e0fb;
+ --dh-color-fuchsia-1400: #f9edfc;
/* Magenta HSL components */
- --dh-color-magenta-100-hsl: 333deg, 90.7%, 16.9%;
- --dh-color-magenta-200-hsl: 334deg, 72.4%, 22.7%;
- --dh-color-magenta-300-hsl: 334deg, 60.3%, 29.6%;
- --dh-color-magenta-400-hsl: 334deg, 51.6%, 36.5%;
- --dh-color-magenta-500-hsl: 333deg, 45.7%, 43.3%;
- --dh-color-magenta-600-hsl: 332deg, 41.5%, 50.4%;
- --dh-color-magenta-700-hsl: 330deg, 50.7%, 57.8%;
- --dh-color-magenta-800-hsl: 329deg, 60.7%, 65.1%;
- --dh-color-magenta-900-hsl: 329deg, 75.9%, 72.4%;
- --dh-color-magenta-1000-hsl: 328deg, 92.5%, 79.2%;
- --dh-color-magenta-1100-hsl: 327deg, 100%, 84.7%;
- --dh-color-magenta-1200-hsl: 327deg, 100%, 89.4%;
- --dh-color-magenta-1300-hsl: 326deg, 100%, 93.3%;
- --dh-color-magenta-1400-hsl: 328deg, 100%, 96.3%;
-
- /* Grays */
- --dh-color-gray-50: hsl(var(--dh-color-gray-50-hsl));
- --dh-color-gray-75: hsl(var(--dh-color-gray-75-hsl));
- --dh-color-gray-100: hsl(var(--dh-color-gray-100-hsl));
- --dh-color-gray-200: hsl(var(--dh-color-gray-200-hsl));
- --dh-color-gray-300: hsl(var(--dh-color-gray-300-hsl));
- --dh-color-gray-400: hsl(var(--dh-color-gray-400-hsl));
- --dh-color-gray-500: hsl(var(--dh-color-gray-500-hsl));
- --dh-color-gray-600: hsl(var(--dh-color-gray-600-hsl));
- --dh-color-gray-700: hsl(var(--dh-color-gray-700-hsl));
- --dh-color-gray-800: hsl(var(--dh-color-gray-800-hsl));
- --dh-color-gray-900: hsl(var(--dh-color-gray-900-hsl));
-
- --dh-color-gray-light: hsl(var(--dh-color-gray-light-hsl));
- --dh-color-gray-mid: hsl(var(--dh-color-gray-mid-hsl));
- --dh-color-gray-dark: hsl(var(--dh-color-gray-dark-hsl));
-
- /** Black & White */
- --dh-color-black: hsl(var(--dh-color-black-hsl));
- --dh-color-white: hsl(var(--dh-color-white-hsl));
-
- /* Red */
- --dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
- --dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
- --dh-color-red-300: hsl(var(--dh-color-red-300-hsl));
- --dh-color-red-400: hsl(var(--dh-color-red-400-hsl));
- --dh-color-red-500: hsl(var(--dh-color-red-500-hsl));
- --dh-color-red-600: hsl(var(--dh-color-red-600-hsl));
- --dh-color-red-700: hsl(var(--dh-color-red-700-hsl));
- --dh-color-red-800: hsl(var(--dh-color-red-800-hsl));
- --dh-color-red-900: hsl(var(--dh-color-red-900-hsl));
- --dh-color-red-1000: hsl(var(--dh-color-red-1000-hsl));
- --dh-color-red-1100: hsl(var(--dh-color-red-1100-hsl));
- --dh-color-red-1200: hsl(var(--dh-color-red-1200-hsl));
- --dh-color-red-1300: hsl(var(--dh-color-red-1300-hsl));
- --dh-color-red-1400: hsl(var(--dh-color-red-1400-hsl));
-
- /* Orange */
- --dh-color-orange-100: hsl(var(--dh-color-orange-100-hsl));
- --dh-color-orange-200: hsl(var(--dh-color-orange-200-hsl));
- --dh-color-orange-300: hsl(var(--dh-color-orange-300-hsl));
- --dh-color-orange-400: hsl(var(--dh-color-orange-400-hsl));
- --dh-color-orange-500: hsl(var(--dh-color-orange-500-hsl));
- --dh-color-orange-600: hsl(var(--dh-color-orange-600-hsl));
- --dh-color-orange-700: hsl(var(--dh-color-orange-700-hsl));
- --dh-color-orange-800: hsl(var(--dh-color-orange-800-hsl));
- --dh-color-orange-900: hsl(var(--dh-color-orange-900-hsl));
- --dh-color-orange-1000: hsl(var(--dh-color-orange-1000-hsl));
- --dh-color-orange-1100: hsl(var(--dh-color-orange-1100-hsl));
- --dh-color-orange-1200: hsl(var(--dh-color-orange-1200-hsl));
- --dh-color-orange-1300: hsl(var(--dh-color-orange-1300-hsl));
- --dh-color-orange-1400: hsl(var(--dh-color-orange-1400-hsl));
-
- /* Yellow */
- --dh-color-yellow-100: hsl(var(--dh-color-yellow-100-hsl));
- --dh-color-yellow-200: hsl(var(--dh-color-yellow-200-hsl));
- --dh-color-yellow-300: hsl(var(--dh-color-yellow-300-hsl));
- --dh-color-yellow-400: hsl(var(--dh-color-yellow-400-hsl));
- --dh-color-yellow-500: hsl(var(--dh-color-yellow-500-hsl));
- --dh-color-yellow-600: hsl(var(--dh-color-yellow-600-hsl));
- --dh-color-yellow-700: hsl(var(--dh-color-yellow-700-hsl));
- --dh-color-yellow-800: hsl(var(--dh-color-yellow-800-hsl));
- --dh-color-yellow-900: hsl(var(--dh-color-yellow-900-hsl));
- --dh-color-yellow-1000: hsl(var(--dh-color-yellow-1000-hsl));
- --dh-color-yellow-1100: hsl(var(--dh-color-yellow-1100-hsl));
- --dh-color-yellow-1200: hsl(var(--dh-color-yellow-1200-hsl));
- --dh-color-yellow-1300: hsl(var(--dh-color-yellow-1300-hsl));
- --dh-color-yellow-1400: hsl(var(--dh-color-yellow-1400-hsl));
-
- /* Chartreuse */
- --dh-color-chartreuse-100: hsl(var(--dh-color-chartreuse-100-hsl));
- --dh-color-chartreuse-200: hsl(var(--dh-color-chartreuse-200-hsl));
- --dh-color-chartreuse-300: hsl(var(--dh-color-chartreuse-300-hsl));
- --dh-color-chartreuse-400: hsl(var(--dh-color-chartreuse-400-hsl));
- --dh-color-chartreuse-500: hsl(var(--dh-color-chartreuse-500-hsl));
- --dh-color-chartreuse-600: hsl(var(--dh-color-chartreuse-600-hsl));
- --dh-color-chartreuse-700: hsl(var(--dh-color-chartreuse-700-hsl));
- --dh-color-chartreuse-800: hsl(var(--dh-color-chartreuse-800-hsl));
- --dh-color-chartreuse-900: hsl(var(--dh-color-chartreuse-900-hsl));
- --dh-color-chartreuse-1000: hsl(var(--dh-color-chartreuse-1000-hsl));
- --dh-color-chartreuse-1100: hsl(var(--dh-color-chartreuse-1100-hsl));
- --dh-color-chartreuse-1200: hsl(var(--dh-color-chartreuse-1200-hsl));
- --dh-color-chartreuse-1300: hsl(var(--dh-color-chartreuse-1300-hsl));
- --dh-color-chartreuse-1400: hsl(var(--dh-color-chartreuse-1400-hsl));
-
- /* Celery */
- --dh-color-celery-100: hsl(var(--dh-color-celery-100-hsl));
- --dh-color-celery-200: hsl(var(--dh-color-celery-200-hsl));
- --dh-color-celery-300: hsl(var(--dh-color-celery-300-hsl));
- --dh-color-celery-400: hsl(var(--dh-color-celery-400-hsl));
- --dh-color-celery-500: hsl(var(--dh-color-celery-500-hsl));
- --dh-color-celery-600: hsl(var(--dh-color-celery-600-hsl));
- --dh-color-celery-700: hsl(var(--dh-color-celery-700-hsl));
- --dh-color-celery-800: hsl(var(--dh-color-celery-800-hsl));
- --dh-color-celery-900: hsl(var(--dh-color-celery-900-hsl));
- --dh-color-celery-1000: hsl(var(--dh-color-celery-1000-hsl));
- --dh-color-celery-1100: hsl(var(--dh-color-celery-1100-hsl));
- --dh-color-celery-1200: hsl(var(--dh-color-celery-1200-hsl));
- --dh-color-celery-1300: hsl(var(--dh-color-celery-1300-hsl));
- --dh-color-celery-1400: hsl(var(--dh-color-celery-1400-hsl));
-
- /* Green */
- --dh-color-green-100: hsl(var(--dh-color-green-100-hsl));
- --dh-color-green-200: hsl(var(--dh-color-green-200-hsl));
- --dh-color-green-300: hsl(var(--dh-color-green-300-hsl));
- --dh-color-green-400: hsl(var(--dh-color-green-400-hsl));
- --dh-color-green-500: hsl(var(--dh-color-green-500-hsl));
- --dh-color-green-600: hsl(var(--dh-color-green-600-hsl));
- --dh-color-green-700: hsl(var(--dh-color-green-700-hsl));
- --dh-color-green-800: hsl(var(--dh-color-green-800-hsl));
- --dh-color-green-900: hsl(var(--dh-color-green-900-hsl));
- --dh-color-green-1000: hsl(var(--dh-color-green-1000-hsl));
- --dh-color-green-1100: hsl(var(--dh-color-green-1100-hsl));
- --dh-color-green-1200: hsl(var(--dh-color-green-1200-hsl));
- --dh-color-green-1300: hsl(var(--dh-color-green-1300-hsl));
- --dh-color-green-1400: hsl(var(--dh-color-green-1400-hsl));
-
- /* Seafoam */
- --dh-color-seafoam-100: hsl(var(--dh-color-seafoam-100-hsl));
- --dh-color-seafoam-200: hsl(var(--dh-color-seafoam-200-hsl));
- --dh-color-seafoam-300: hsl(var(--dh-color-seafoam-300-hsl));
- --dh-color-seafoam-400: hsl(var(--dh-color-seafoam-400-hsl));
- --dh-color-seafoam-500: hsl(var(--dh-color-seafoam-500-hsl));
- --dh-color-seafoam-600: hsl(var(--dh-color-seafoam-600-hsl));
- --dh-color-seafoam-700: hsl(var(--dh-color-seafoam-700-hsl));
- --dh-color-seafoam-800: hsl(var(--dh-color-seafoam-800-hsl));
- --dh-color-seafoam-900: hsl(var(--dh-color-seafoam-900-hsl));
- --dh-color-seafoam-1000: hsl(var(--dh-color-seafoam-1000-hsl));
- --dh-color-seafoam-1100: hsl(var(--dh-color-seafoam-1100-hsl));
- --dh-color-seafoam-1200: hsl(var(--dh-color-seafoam-1200-hsl));
- --dh-color-seafoam-1300: hsl(var(--dh-color-seafoam-1300-hsl));
- --dh-color-seafoam-1400: hsl(var(--dh-color-seafoam-1400-hsl));
-
- /* Cyan */
- --dh-color-cyan-100: hsl(var(--dh-color-cyan-100-hsl));
- --dh-color-cyan-200: hsl(var(--dh-color-cyan-200-hsl));
- --dh-color-cyan-300: hsl(var(--dh-color-cyan-300-hsl));
- --dh-color-cyan-400: hsl(var(--dh-color-cyan-400-hsl));
- --dh-color-cyan-500: hsl(var(--dh-color-cyan-500-hsl));
- --dh-color-cyan-600: hsl(var(--dh-color-cyan-600-hsl));
- --dh-color-cyan-700: hsl(var(--dh-color-cyan-700-hsl));
- --dh-color-cyan-800: hsl(var(--dh-color-cyan-800-hsl));
- --dh-color-cyan-900: hsl(var(--dh-color-cyan-900-hsl));
- --dh-color-cyan-1000: hsl(var(--dh-color-cyan-1000-hsl));
- --dh-color-cyan-1100: hsl(var(--dh-color-cyan-1100-hsl));
- --dh-color-cyan-1200: hsl(var(--dh-color-cyan-1200-hsl));
- --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));
- --dh-color-indigo-300: hsl(var(--dh-color-indigo-300-hsl));
- --dh-color-indigo-400: hsl(var(--dh-color-indigo-400-hsl));
- --dh-color-indigo-500: hsl(var(--dh-color-indigo-500-hsl));
- --dh-color-indigo-600: hsl(var(--dh-color-indigo-600-hsl));
- --dh-color-indigo-700: hsl(var(--dh-color-indigo-700-hsl));
- --dh-color-indigo-800: hsl(var(--dh-color-indigo-800-hsl));
- --dh-color-indigo-900: hsl(var(--dh-color-indigo-900-hsl));
- --dh-color-indigo-1000: hsl(var(--dh-color-indigo-1000-hsl));
- --dh-color-indigo-1100: hsl(var(--dh-color-indigo-1100-hsl));
- --dh-color-indigo-1200: hsl(var(--dh-color-indigo-1200-hsl));
- --dh-color-indigo-1300: hsl(var(--dh-color-indigo-1300-hsl));
- --dh-color-indigo-1400: hsl(var(--dh-color-indigo-1400-hsl));
-
- /* Purple */
- --dh-color-purple-100: hsl(var(--dh-color-purple-100-hsl));
- --dh-color-purple-200: hsl(var(--dh-color-purple-200-hsl));
- --dh-color-purple-300: hsl(var(--dh-color-purple-300-hsl));
- --dh-color-purple-400: hsl(var(--dh-color-purple-400-hsl));
- --dh-color-purple-500: hsl(var(--dh-color-purple-500-hsl));
- --dh-color-purple-600: hsl(var(--dh-color-purple-600-hsl));
- --dh-color-purple-700: hsl(var(--dh-color-purple-700-hsl));
- --dh-color-purple-800: hsl(var(--dh-color-purple-800-hsl));
- --dh-color-purple-900: hsl(var(--dh-color-purple-900-hsl));
- --dh-color-purple-1000: hsl(var(--dh-color-purple-1000-hsl));
- --dh-color-purple-1100: hsl(var(--dh-color-purple-1100-hsl));
- --dh-color-purple-1200: hsl(var(--dh-color-purple-1200-hsl));
- --dh-color-purple-1300: hsl(var(--dh-color-purple-1300-hsl));
- --dh-color-purple-1400: hsl(var(--dh-color-purple-1400-hsl));
-
- /* Fuchsia */
- --dh-color-fuchsia-100: hsl(var(--dh-color-fuchsia-100-hsl));
- --dh-color-fuchsia-200: hsl(var(--dh-color-fuchsia-200-hsl));
- --dh-color-fuchsia-300: hsl(var(--dh-color-fuchsia-300-hsl));
- --dh-color-fuchsia-400: hsl(var(--dh-color-fuchsia-400-hsl));
- --dh-color-fuchsia-500: hsl(var(--dh-color-fuchsia-500-hsl));
- --dh-color-fuchsia-600: hsl(var(--dh-color-fuchsia-600-hsl));
- --dh-color-fuchsia-700: hsl(var(--dh-color-fuchsia-700-hsl));
- --dh-color-fuchsia-800: hsl(var(--dh-color-fuchsia-800-hsl));
- --dh-color-fuchsia-900: hsl(var(--dh-color-fuchsia-900-hsl));
- --dh-color-fuchsia-1000: hsl(var(--dh-color-fuchsia-1000-hsl));
- --dh-color-fuchsia-1100: hsl(var(--dh-color-fuchsia-1100-hsl));
- --dh-color-fuchsia-1200: hsl(var(--dh-color-fuchsia-1200-hsl));
- --dh-color-fuchsia-1300: hsl(var(--dh-color-fuchsia-1300-hsl));
- --dh-color-fuchsia-1400: hsl(var(--dh-color-fuchsia-1400-hsl));
-
- /* Magenta */
- --dh-color-magenta-100: hsl(var(--dh-color-magenta-100-hsl));
- --dh-color-magenta-200: hsl(var(--dh-color-magenta-200-hsl));
- --dh-color-magenta-300: hsl(var(--dh-color-magenta-300-hsl));
- --dh-color-magenta-400: hsl(var(--dh-color-magenta-400-hsl));
- --dh-color-magenta-500: hsl(var(--dh-color-magenta-500-hsl));
- --dh-color-magenta-600: hsl(var(--dh-color-magenta-600-hsl));
- --dh-color-magenta-700: hsl(var(--dh-color-magenta-700-hsl));
- --dh-color-magenta-800: hsl(var(--dh-color-magenta-800-hsl));
- --dh-color-magenta-900: hsl(var(--dh-color-magenta-900-hsl));
- --dh-color-magenta-1000: hsl(var(--dh-color-magenta-1000-hsl));
- --dh-color-magenta-1100: hsl(var(--dh-color-magenta-1100-hsl));
- --dh-color-magenta-1200: hsl(var(--dh-color-magenta-1200-hsl));
- --dh-color-magenta-1300: hsl(var(--dh-color-magenta-1300-hsl));
- --dh-color-magenta-1400: hsl(var(--dh-color-magenta-1400-hsl));
+ --dh-color-magenta-100: #520427;
+ --dh-color-magenta-200: #641034;
+ --dh-color-magenta-300: #791e45;
+ --dh-color-magenta-400: #8d2d57;
+ --dh-color-magenta-500: #a13c69;
+ --dh-color-magenta-600: #b54c7d;
+ --dh-color-magenta-700: #ca5d93;
+ --dh-color-magenta-800: #dc70a8;
+ --dh-color-magenta-900: #ee83ba;
+ --dh-color-magenta-1000: #fb99cd;
+ --dh-color-magenta-1100: #ffb1dc;
+ --dh-color-magenta-1200: #ffc9e7;
+ --dh-color-magenta-1300: #ffddf0;
+ --dh-color-magenta-1400: #ffecf6;
}
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css
index acc5c54065..e860db5e2e 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css
@@ -25,13 +25,18 @@
--dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
--dh-color-plotly-axis-text: var(--dh-color-gray-500);
- --dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
+ --dh-color-plotly-zoombox: color-mix(
+ in srgb,
+ var(--dh-color-true-black) 50%,
+ transparent
+ );
--dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
--dh-color-plotly-zoombox-corners-stroke: var(--dh-color-gray-75);
- --dh-color-plotly-modebar-btn-active: hsla(
- var(--dh-color-true-white-hsl),
- 0.3
+ --dh-color-plotly-modebar-btn-active: color-mix(
+ in srgb,
+ var(--dh-color-true-white) 30%,
+ transparent
);
--dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
--dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
@@ -40,6 +45,6 @@
--dh-color-chart-geo-coastline: var(--dh-color-gray-200);
--dh-color-chart-geo-land: var(--dh-color-gray-700);
--dh-color-chart-geo-ocean: var(--dh-color-gray-300);
- --dh-color-chart-geo-lake: var(--dh-color-blue-400);
- --dh-color-chart-geo-river: var(--dh-color-blue-400);
+ --dh-color-chart-geo-lake: var(--dh-color-blue-200);
+ --dh-color-chart-geo-river: var(--dh-color-blue-200);
}
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
index abe37f020e..da9f068271 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css
@@ -50,19 +50,22 @@
--dh-color-grid-string-null: var(--dh-color-gray-600);
/* Filter Bar */
- --dh-color-grid-filter-bar-active-bg: hsla(
- var(--dh-color-accent-700-hsl),
- 0.5
+ --dh-color-grid-filter-bar-active-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent-700) 50%,
+ transparent
);
--dh-color-grid-filter-bar-active: var(--dh-color-accent-600);
--dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-200);
- --dh-color-grid-filter-bar-expanded-active-bg: hsla(
- var(--dh-color-accent-1000-hsl),
- 0.19
+ --dh-color-grid-filter-bar-expanded-active-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent-1000) 19%,
+ transparent
);
- --dh-color-grid-filter-bar-expanded-active-cell-bg: hsla(
- var(--dh-color-accent-700-hsl),
- 0.32
+ --dh-color-grid-filter-bar-expanded-active-cell-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent-700) 32%,
+ transparent
);
--dh-color-grid-filter-bar-separator: var(--dh-color-gray-600);
--dh-color-grid-filter-bar-error: var(--dh-color-visual-negative);
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css
index d97ca61abe..3b11273298 100644
--- a/packages/components/src/theme/theme-dark/theme-dark-semantic.css
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css
@@ -1,129 +1,66 @@
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable alpha-value-notation */
:root {
- /* HSL base colors */
- --dh-color-bg-hsl: var(--dh-color-black-hsl);
- --dh-color-content-bg-hsl: var(--dh-color-gray-100-hsl);
- --dh-color-subdued-content-bg-hsl: var(--dh-color-gray-75-hsl);
- --dh-color-surface-bg-hsl: var(--dh-color-gray-200-hsl);
- --dh-color-fg-hsl: var(--dh-color-white-hsl);
-
- --dh-color-disabled-bg-hsl: var(--dh-color-gray-300-hsl);
- --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl);
-
- --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);
- --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);
- --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);
- --dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);
- --dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);
- --dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);
- --dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);
- --dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);
- --dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);
- --dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);
- --dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);
- --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);
- --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);
- --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);
- --dh-color-accent-hsl: var(--dh-color-accent-600-hsl);
-
- --dh-color-border-hsl: var(--dh-color-gray-500-hsl);
- --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl);
-
- --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);
- --dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);
- --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);
- --dh-color-positive-hsl: var(--dh-color-green-900-hsl);
- --dh-color-negative-hsl: var(--dh-color-red-600-hsl);
-
- /*
- * Contrast Colors
- *
- * Note that React Spectrum guidance suggests that background colors containing
- * yellow, orange, chartreuse or cyan should use a dark contrast color. All
- * others should use light. Therefore, these should stay in sync with the
- * --dh-color-xxx-hsl values above.
- * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white
- */
- --dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);
- --dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);
-
- --dh-color-accent-contrast-hsl: var(--dh-color-contrast-light-hsl);
- --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);
- --dh-color-negative-contrast-hsl: var(--dh-color-contrast-light-hsl);
- --dh-color-neutral-contrast-hsl: var(--dh-color-contrast-light-hsl);
- --dh-color-notice-contrast-hsl: var(--dh-color-contrast-dark-hsl);
- --dh-color-positive-contrast-hsl: var(--dh-color-contrast-light-hsl);
-
- /* Visual HSL */
- --dh-color-visual-blue-hsl: var(--dh-color-blue-600-hsl);
- --dh-color-visual-celery-hsl: var(--dh-color-celery-1000-hsl);
- --dh-color-visual-chartreuse-hsl: var(--dh-color-chartreuse-1100-hsl);
- --dh-color-visual-cyan-hsl: var(--dh-color-cyan-1100-hsl);
- --dh-color-visual-fuchsia-hsl: var(--dh-color-fuchsia-900-hsl);
- --dh-color-visual-gray-hsl: var(--dh-color-gray-600-hsl);
- --dh-color-visual-green-hsl: var(--dh-color-green-1100-hsl);
- --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl);
- --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl);
- --dh-color-visual-orange-hsl: var(--dh-color-orange-900-hsl);
- --dh-color-visual-purple-hsl: var(--dh-color-purple-1100-hsl);
- --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl);
- --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);
- --dh-color-visual-yellow-hsl: var(--dh-color-yellow-1200-hsl);
-
- --dh-color-visual-positive-hsl: var(--dh-color-green-1200-hsl);
- --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);
- --dh-color-visual-notice-hsl: var(--dh-color-yellow-1200-hsl);
- --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);
-
/* General */
- --dh-color-bg: hsl(var(--dh-color-bg-hsl));
- --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl));
- --dh-color-subdued-content-bg: hsl(var(--dh-color-subdued-content-bg-hsl));
- --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl));
- --dh-color-fg: hsl(var(--dh-color-fg-hsl));
- --dh-color-border: hsl(var(--dh-color-border-hsl));
+ --dh-color-bg: var(--dh-color-black);
+ --dh-color-content-bg: var(--dh-color-gray-100);
+ --dh-color-subdued-content-bg: var(--dh-color-gray-75);
+ --dh-color-surface-bg: var(--dh-color-gray-200);
+ --dh-color-fg: var(--dh-color-white);
+ --dh-color-border: var(--dh-color-gray-500);
--dh-color-hover-border: var(--dh-color-gray-600);
- --dh-color-border-focus: hsl(var(--dh-color-border-focus-hsl));
- --dh-color-disabled-bg: hsl(var(--dh-color-disabled-bg-hsl));
+ --dh-color-border-focus: var(--dh-color-accent-800);
+ --dh-color-disabled-bg: var(--dh-color-gray-300);
+ --dh-color-scrollbar: var(--dh-color-fg);
/* Text */
--dh-color-heading-text: var(--dh-color-gray-900);
--dh-color-text: var(--dh-color-gray-800);
--dh-color-text-disabled: var(--dh-color-gray-600);
- --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.3);
+ --dh-color-text-highlight: color-mix(
+ in srgb,
+ var(--dh-color-blue-700) 30%,
+ transparent
+ );
--dh-color-text-hover: var(--dh-color-gray-900);
- /* Contrast Base */
- --dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));
- --dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));
+ /*
+ * Contrast Colors
+ *
+ * Note that React Spectrum guidance suggests that background colors containing
+ * yellow, orange, chartreuse or cyan should use a dark contrast color. All
+ * others should use light.
+ * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white
+ */
+ --dh-color-contrast-dark: var(--dh-color-gray-50);
+ --dh-color-contrast-light: var(--dh-color-gray-900);
/** Accent Colors */
- --dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));
- --dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));
- --dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));
- --dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));
- --dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));
- --dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));
- --dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));
- --dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));
- --dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));
- --dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));
- --dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));
- --dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));
- --dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));
- --dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));
+ --dh-color-accent-100: var(--dh-color-blue-100);
+ --dh-color-accent-200: var(--dh-color-blue-200);
+ --dh-color-accent-300: var(--dh-color-blue-300);
+ --dh-color-accent-400: var(--dh-color-blue-400);
+ --dh-color-accent-500: var(--dh-color-blue-500);
+ --dh-color-accent-600: var(--dh-color-blue-600);
+ --dh-color-accent-700: var(--dh-color-blue-700);
+ --dh-color-accent-800: var(--dh-color-blue-800);
+ --dh-color-accent-900: var(--dh-color-blue-900);
+ --dh-color-accent-1000: var(--dh-color-blue-1000);
+ --dh-color-accent-1100: var(--dh-color-blue-1100);
+ --dh-color-accent-1200: var(--dh-color-blue-1200);
+ --dh-color-accent-1300: var(--dh-color-blue-1300);
+ --dh-color-accent-1400: var(--dh-color-blue-1400);
/* Accent */
- --dh-color-accent-bg: hsl(var(--dh-color-accent-hsl));
+ --dh-color-accent: var(--dh-color-accent-600);
+ --dh-color-accent-bg: var(--dh-color-accent);
--dh-color-accent-hover-bg: var(--dh-color-accent-500);
--dh-color-accent-down-bg: var(--dh-color-accent-400);
--dh-color-accent-key-focus-bg: var(--dh-color-accent-500);
- --dh-color-accent-contrast: hsl(var(--dh-color-accent-contrast-hsl));
+ --dh-color-accent-contrast: var(--dh-color-contrast-light);
/* Background Defaults */
--dh-color-gray-bg: var(--dh-color-gray-700);
- --dh-color-blue-bg: var(--dh-color-blue-700);
--dh-color-red-bg: var(--dh-color-red-700);
--dh-color-orange-bg: var(--dh-color-orange-800);
--dh-color-yellow-bg: var(--dh-color-yellow-1000);
@@ -132,44 +69,104 @@
--dh-color-green-bg: var(--dh-color-green-700);
--dh-color-seafoam-bg: var(--dh-color-seafoam-700);
--dh-color-cyan-bg: var(--dh-color-cyan-700);
+ --dh-color-blue-bg: var(--dh-color-blue-700);
--dh-color-indigo-bg: var(--dh-color-indigo-700);
--dh-color-purple-bg: var(--dh-color-purple-700);
--dh-color-fuchsia-bg: var(--dh-color-fuchsia-700);
--dh-color-magenta-bg: var(--dh-color-magenta-700);
+ /* Visual Colors */
+ --dh-color-visual-gray: var(--dh-color-gray-600);
+ --dh-color-visual-red: var(--dh-color-red-800);
+ --dh-color-visual-orange: var(--dh-color-orange-900);
+ --dh-color-visual-yellow: var(--dh-color-yellow-1200);
+ --dh-color-visual-chartreuse: var(--dh-color-chartreuse-1100);
+ --dh-color-visual-celery: var(--dh-color-celery-1000);
+ --dh-color-visual-green: var(--dh-color-green-1100);
+ --dh-color-visual-seafoam: var(--dh-color-seafoam-1100);
+ --dh-color-visual-cyan: var(--dh-color-cyan-1100);
+ --dh-color-visual-blue: var(--dh-color-blue-600);
+ --dh-color-visual-indigo: var(--dh-color-indigo-900);
+ --dh-color-visual-purple: var(--dh-color-purple-1100);
+ --dh-color-visual-fuchsia: var(--dh-color-fuchsia-900);
+ --dh-color-visual-magenta: var(--dh-color-magenta-900);
+
+ --dh-color-visual-positive: var(--dh-color-green-1200);
+ --dh-color-visual-negative: var(--dh-color-red-800);
+ --dh-color-visual-notice: var(--dh-color-yellow-1200);
+ --dh-color-visual-info: var(--dh-color-cyan-1100);
+
/* Focus */
--dh-color-focus: var(--dh-color-blue-800);
--dh-color-focus-border: var(--dh-color-blue-800);
--dh-color-focus-ring: var(--dh-color-focus);
/* Highlight */
- --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.2);
- --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.18);
- --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);
- --dh-color-highlight-selected: hsla(var(--dh-color-accent-hsl), 0.25);
- --dh-color-highlight-selected-hover: hsla(var(--dh-color-accent-hsl), 0.35);
+ --dh-color-highlight-active: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 20%,
+ transparent
+ );
+ --dh-color-highlight-hover: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 18%,
+ transparent
+ );
+ --dh-color-highlight-invalid: color-mix(
+ in srgb,
+ var(--dh-color-visual-red) 15%,
+ transparent
+ );
+ --dh-color-highlight-selected: color-mix(
+ in srgb,
+ var(--dh-color-accent) 9%,
+ transparent
+ );
+ --dh-color-highlight-selected-hover: color-mix(
+ in srgb,
+ var(--dh-color-accent) 15%,
+ transparent
+ );
/* Keyboard selected */
- --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
+ --dh-color-keyboard-selected-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent) 50%,
+ transparent
+ );
/* Shadows / Overlays */
- --dh-color-dropshadow: hsla(var(--dh-color-true-black-hsl), 0.8);
- --dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);
- --dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);
+ --dh-color-dropshadow: color-mix(
+ in srgb,
+ var(--dh-color-true-black) 80%,
+ transparent
+ );
+ --dh-color-overlay-modal-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 60%,
+ transparent
+ );
+ --dh-color-overlay-hover-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 8%,
+ transparent
+ );
/* Negative */
- --dh-color-negative-bg: hsl(var(--dh-color-negative-hsl));
+ --dh-color-negative: var(--dh-color-red-600);
+ --dh-color-negative-bg: var(--dh-color-negative);
--dh-color-negative-hover-bg: var(--dh-color-red-500);
--dh-color-negative-down-bg: var(--dh-color-red-400);
--dh-color-negative-key-focus-bg: var(--dh-color-red-500);
- --dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));
+ --dh-color-negative-contrast: var(--dh-color-contrast-light);
/* Neutral */
- --dh-color-neutral-bg: hsl(var(--dh-color-neutral-hsl));
+ --dh-color-neutral: var(--dh-color-gray-500);
+ --dh-color-neutral-bg: var(--dh-color-neutral);
--dh-color-neutral-hover-bg: var(--dh-color-gray-300);
--dh-color-neutral-down-bg: var(--dh-color-gray-200);
--dh-color-neutral-key-focus-bg: var(--dh-color-gray-300);
- --dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl));
+ --dh-color-neutral-contrast: var(--dh-color-contrast-light);
--dh-color-neutral-subdued-bg: var(--dh-color-gray-400);
--dh-color-neutral-subdued-hover-bg: var(--dh-color-gray-300);
@@ -177,46 +174,28 @@
--dh-color-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);
/* Positive */
- --dh-color-positive-bg: hsl(var(--dh-color-positive-hsl));
+ --dh-color-positive: var(--dh-color-green-900);
+ --dh-color-positive-bg: var(--dh-color-positive);
--dh-color-positive-hover-bg: var(--dh-color-green-800);
--dh-color-positive-down-bg: var(--dh-color-green-700);
--dh-color-positive-key-focus-bg: var(--dh-color-green-800);
- --dh-color-positive-contrast: hsl(var(--dh-color-positive-contrast-hsl));
+ --dh-color-positive-contrast: var(--dh-color-contrast-light);
/* Informative */
- --dh-color-info-bg: hsl(var(--dh-color-info-hsl));
+ --dh-color-info: var(--dh-color-cyan-1000);
+ --dh-color-info-bg: var(--dh-color-info);
--dh-color-info-hover-bg: var(--dh-color-cyan-900);
--dh-color-info-down-bg: var(--dh-color-cyan-800);
--dh-color-info-key-focus-bg: var(--dh-color-cyan-900);
- --dh-color-info-contrast: hsl(var(--dh-color-info-contrast-hsl));
+ --dh-color-info-contrast: var(--dh-color-contrast-dark);
/* Notice */
- --dh-color-notice-bg: hsl(var(--dh-color-notice-hsl));
+ --dh-color-notice: var(--dh-color-yellow-1000);
+ --dh-color-notice-bg: var(--dh-color-notice);
--dh-color-notice-hover-bg: var(--dh-color-yellow-900);
--dh-color-notice-down-bg: var(--dh-color-yellow-800);
--dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000);
- --dh-color-notice-contrast: hsl(var(--dh-color-notice-contrast-hsl));
-
- /* Visual Colors */
- --dh-color-visual-blue: hsl(var(--dh-color-visual-blue-hsl));
- --dh-color-visual-celery: hsl(var(--dh-color-visual-celery-hsl));
- --dh-color-visual-chartreuse: hsl(var(--dh-color-visual-chartreuse-hsl));
- --dh-color-visual-cyan: hsl(var(--dh-color-visual-cyan-hsl));
- --dh-color-visual-fuchsia: hsl(var(--dh-color-visual-fuchsia-hsl));
- --dh-color-visual-gray: hsl(var(--dh-color-visual-gray-hsl));
- --dh-color-visual-green: hsl(var(--dh-color-visual-green-hsl));
- --dh-color-visual-indigo: hsl(var(--dh-color-visual-indigo-hsl));
- --dh-color-visual-magenta: hsl(var(--dh-color-visual-magenta-hsl));
- --dh-color-visual-orange: hsl(var(--dh-color-visual-orange-hsl));
- --dh-color-visual-purple: hsl(var(--dh-color-visual-purple-hsl));
- --dh-color-visual-red: hsl(var(--dh-color-visual-red-hsl));
- --dh-color-visual-seafoam: hsl(var(--dh-color-visual-seafoam-hsl));
- --dh-color-visual-yellow: hsl(var(--dh-color-visual-yellow-hsl));
-
- --dh-color-visual-positive: hsl(var(--dh-color-visual-positive-hsl));
- --dh-color-visual-negative: hsl(var(--dh-color-visual-negative-hsl));
- --dh-color-visual-notice: hsl(var(--dh-color-visual-notice-hsl));
- --dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl));
+ --dh-color-notice-contrast: var(--dh-color-contrast-dark);
/* Editing */
--dh-color-modified: var(--dh-color-yellow-1300);
diff --git a/packages/components/src/theme/theme-light/theme-light-components.css b/packages/components/src/theme/theme-light/theme-light-components.css
index 7c61bbe687..59c1071199 100644
--- a/packages/components/src/theme/theme-light/theme-light-components.css
+++ b/packages/components/src/theme/theme-light/theme-light-components.css
@@ -2,10 +2,26 @@
/* stylelint-disable alpha-value-notation */
:root {
--dh-color-loading-spinner-primary: var(--dh-color-accent-bg);
- --dh-color-loading-spinner-secondary: hsla(var(--dh-color-gray-800-hsl), 0.5);
- --dh-color-quickactions-bg: hsla(var(--dh-color-visual-gray-hsl), 0.9);
- --dh-color-radial-reaction: hsla(var(--dh-color-visual-gray-hsl), 0.6);
- --dh-color-colorpicker-border: hsla(var(--dh-color-visual-gray-hsl), 0.1);
+ --dh-color-loading-spinner-secondary: color-mix(
+ in srgb,
+ var(--dh-color-gray-800) 50%,
+ transparent
+ );
+ --dh-color-quickactions-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 90%,
+ transparent
+ );
+ --dh-color-radial-reaction: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 60%,
+ transparent
+ );
+ --dh-color-colorpicker-border: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 10%,
+ transparent
+ );
/* Logo */
--dh-logo-img: var(--dh-logo-light-img);
@@ -18,13 +34,15 @@
/* We should base this color on something from the palette, but for now just
* hard coding the original value */
- --dh-color-random-area-plot-animation-fg-fill: hsla(
- var(--dh-color-accent-hsl),
- 0.08
+ --dh-color-random-area-plot-animation-fg-fill: color-mix(
+ in srgb,
+ var(--dh-color-accent) 8%,
+ transparent
);
- --dh-color-random-area-plot-animation-fg-stroke: hsla(
- var(--dh-color-accent-hsl),
- 0.2
+ --dh-color-random-area-plot-animation-fg-stroke: color-mix(
+ in srgb,
+ var(--dh-color-accent) 20%,
+ transparent
);
--dh-color-random-area-plot-animation-bg: var(--dh-color-gray-75);
--dh-color-random-area-plot-animation-grid: var(--dh-color-gray-300);
@@ -65,15 +83,16 @@
--dh-color-input-disabled-bg: var(--dh-color-disabled-bg);
--dh-color-input-disabled-border: transparent;
--dh-color-input-disabled-fg: var(--dh-color-text-disabled);
- --dh-color-input-hover-border: var(--dh-color-gray-600);
+ --dh-color-input-hover-border: var(--dh-color-hover-border);
--dh-color-input-focus-border: var(--dh-color-border-focus);
/* Form Controls */
--dh-color-search-icon: var(--dh-color-fg);
- --dh-color-form-control-error: hsl(var(--dh-color-visual-negative-hsl));
- --dh-color-form-control-error-shadow: hsla(
- var(--dh-color-visual-negative-hsl),
- 0.25
+ --dh-color-form-control-error: var(--dh-color-visual-negative);
+ --dh-color-form-control-error-shadow: color-mix(
+ in srgb,
+ var(--dh-color-visual-negative) 25%,
+ transparent
);
/* Labels */
@@ -96,12 +115,17 @@
--dh-color-highlight-selected-hover
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
- --dh-color-item-list-selected-border: hsla(var(--dh-color-accent-hsl), 0.6);
+ --dh-color-item-list-selected-border: color-mix(
+ in srgb,
+ var(--dh-color-accent) 60%,
+ transparent
+ );
--dh-color-item-list-drop-target-fg: var(--dh-color-white);
- --dh-color-item-list-keyboard-selected-bg: hsla(
- var(--dh-color-accent-hsl),
- 0.5
+ --dh-color-item-list-keyboard-selected-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent) 50%,
+ transparent
);
/*
@@ -136,6 +160,10 @@
--dh-color-tooltip-box-shadow: var(--dh-color-dropshadow);
/* Wells */
- --dh-color-well-bg: hsla(var(--dh-color-visual-gray-hsl), 0.02);
- --dh-color-well-border: hsla(var(--dh-color-visual-gray-hsl), 0.05);
+ --dh-color-well-bg: color-mix(var(--dh-color-visual-gray) 2%, transparent);
+ --dh-color-well-border: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 5%,
+ transparent
+ );
}
diff --git a/packages/components/src/theme/theme-light/theme-light-palette.css b/packages/components/src/theme/theme-light/theme-light-palette.css
index ac81289dde..52eb9de4ca 100644
--- a/packages/components/src/theme/theme-light/theme-light-palette.css
+++ b/packages/components/src/theme/theme-light/theme-light-palette.css
@@ -1,437 +1,219 @@
/* stylelint-disable custom-property-empty-line-before */
:root {
- /* Gray */
- --dh-color-gray-50-hsl: 0, 0%, 100%;
- --dh-color-gray-75-hsl: 0, 0%, 98.22%;
- --dh-color-gray-100-hsl: 0, 0%, 96.85%;
- --dh-color-gray-200-hsl: 0, 0%, 93.2%;
- --dh-color-gray-300-hsl: 0, 0%, 85.53%;
- --dh-color-gray-400-hsl: 0, 0%, 72.41%;
- --dh-color-gray-500-hsl: 0, 0%, 58.47%;
- --dh-color-gray-600-hsl: 0, 0%, 44.75%;
- --dh-color-gray-700-hsl: 0, 0%, 27.45%;
- --dh-color-gray-800-hsl: 0, 0%, 13.33%;
- --dh-color-gray-900-hsl: 0, 0%, 0%;
-
- --dh-color-gray-light-hsl: var(--dh-color-gray-900-hsl);
- --dh-color-gray-mid-hsl: var(--dh-color-gray-600-hsl);
- --dh-color-gray-dark-hsl: var(--dh-color-gray-300-hsl);
-
- /** Black & White */
- --dh-color-black-hsl: var(--dh-color-gray-900-hsl);
- --dh-color-white-hsl: var(--dh-color-gray-75-hsl);
- --dh-color-true-black-hsl: 0deg, 0%, 0%;
- --dh-color-true-white-hsl: 0deg, 0%, 100%;
-
- --dh-color-red-100-hsl: 10, 100%, 95.29%;
- --dh-color-red-200-hsl: 10.24, 100%, 91.96%;
- --dh-color-red-300-hsl: 10, 100%, 88.24%;
- --dh-color-red-400-hsl: 9.77, 100%, 83.14%;
- --dh-color-red-500-hsl: 9.58, 100%, 76.67%;
- --dh-color-red-600-hsl: 8.96, 100%, 69.8%;
- --dh-color-red-700-hsl: 7.46, 91.71%, 62.16%;
- --dh-color-red-800-hsl: 4.66, 82.13%, 53.92%;
- --dh-color-red-900-hsl: 1.54, 85.9%, 44.51%;
- --dh-color-red-1000-hsl: 0, 100%, 35.29%;
- --dh-color-red-1100-hsl: 0, 100%, 28.82%;
- --dh-color-red-1200-hsl: 0, 100%, 22.75%;
- --dh-color-red-1300-hsl: 0, 100%, 17.45%;
- --dh-color-red-1400-hsl: 0, 100%, 13.14%;
- --dh-color-orange-100-hsl: 37.65, 100%, 90%;
- --dh-color-orange-200-hsl: 36.59, 100%, 83.92%;
- --dh-color-orange-300-hsl: 36.11, 96.43%, 78.04%;
- --dh-color-orange-400-hsl: 33.85, 100%, 69.41%;
- --dh-color-orange-500-hsl: 31.5, 100%, 60.78%;
- --dh-color-orange-600-hsl: 30.39, 92.71%, 51.57%;
- --dh-color-orange-700-hsl: 29.21, 100%, 44.71%;
- --dh-color-orange-800-hsl: 27.49, 100%, 39.8%;
- --dh-color-orange-900-hsl: 25.76, 100%, 34.71%;
- --dh-color-orange-1000-hsl: 24.56, 100%, 29.22%;
- --dh-color-orange-1100-hsl: 23.11, 100%, 23.92%;
- --dh-color-orange-1200-hsl: 21.65, 100%, 19.02%;
- --dh-color-orange-1300-hsl: 20, 97.3%, 14.51%;
- --dh-color-orange-1400-hsl: 19.62, 96.3%, 10.59%;
- --dh-color-yellow-100-hsl: 53.94, 92.52%, 79.02%;
- --dh-color-yellow-200-hsl: 53.93, 92.31%, 64.31%;
- --dh-color-yellow-300-hsl: 52.38, 96.83%, 49.41%;
- --dh-color-yellow-400-hsl: 51.21, 100%, 45.49%;
- --dh-color-yellow-500-hsl: 49.95, 100%, 42.16%;
- --dh-color-yellow-600-hsl: 48.67, 100%, 38.43%;
- --dh-color-yellow-700-hsl: 47.73, 100%, 34.51%;
- --dh-color-yellow-800-hsl: 46.45, 100%, 30.39%;
- --dh-color-yellow-900-hsl: 46.02, 100%, 26.08%;
- --dh-color-yellow-1000-hsl: 44.46, 100%, 21.96%;
- --dh-color-yellow-1100-hsl: 44.18, 100%, 17.84%;
- --dh-color-yellow-1200-hsl: 42.5, 100%, 14.12%;
- --dh-color-yellow-1300-hsl: 41.11, 100%, 10.59%;
- --dh-color-yellow-1400-hsl: 39, 100%, 7.84%;
- --dh-color-chartreuse-100-hsl: 73.94, 95.95%, 70.98%;
- --dh-color-chartreuse-200-hsl: 73.9, 88.94%, 60.98%;
- --dh-color-chartreuse-300-hsl: 74.14, 81.28%, 53.92%;
- --dh-color-chartreuse-400-hsl: 74.23, 81.51%, 46.67%;
- --dh-color-chartreuse-500-hsl: 74.44, 90.34%, 40.59%;
- --dh-color-chartreuse-600-hsl: 74.48, 96.67%, 35.29%;
- --dh-color-chartreuse-700-hsl: 74.62, 100%, 30.59%;
- --dh-color-chartreuse-800-hsl: 74.56, 100%, 26.67%;
- --dh-color-chartreuse-900-hsl: 75, 100%, 22.75%;
- --dh-color-chartreuse-1000-hsl: 75, 100%, 18.82%;
- --dh-color-chartreuse-1100-hsl: 74.81, 100%, 15.1%;
- --dh-color-chartreuse-1200-hsl: 75.25, 100%, 11.57%;
- --dh-color-chartreuse-1300-hsl: 75, 100%, 8.63%;
- --dh-color-chartreuse-1400-hsl: 73.55, 100%, 6.08%;
- --dh-color-celery-100-hsl: 106.23, 91.04%, 86.86%;
- --dh-color-celery-200-hsl: 108.54, 83.18%, 79.02%;
- --dh-color-celery-300-hsl: 110.29, 75.54%, 72.75%;
- --dh-color-celery-400-hsl: 115.93, 65.56%, 64.71%;
- --dh-color-celery-500-hsl: 120.93, 57.33%, 55.88%;
- --dh-color-celery-600-hsl: 126.08, 65.49%, 44.31%;
- --dh-color-celery-700-hsl: 129.75, 91.95%, 34.12%;
- --dh-color-celery-800-hsl: 127.45, 100%, 28.43%;
- --dh-color-celery-900-hsl: 127.26, 100%, 24.31%;
- --dh-color-celery-1000-hsl: 128.74, 100%, 20.2%;
- --dh-color-celery-1100-hsl: 129.4, 100%, 16.27%;
- --dh-color-celery-1200-hsl: 129.38, 100%, 12.55%;
- --dh-color-celery-1300-hsl: 128.75, 100%, 9.41%;
- --dh-color-celery-1400-hsl: 128.82, 100%, 6.67%;
- --dh-color-green-100-hsl: 145.71, 75%, 89.02%;
- --dh-color-green-200-hsl: 147.89, 76.34%, 81.76%;
- --dh-color-green-300-hsl: 150.91, 72.26%, 73.14%;
- --dh-color-green-400-hsl: 152.77, 64.32%, 63.73%;
- --dh-color-green-500-hsl: 153.89, 56.22%, 54.31%;
- --dh-color-green-600-hsl: 155.47, 59.31%, 45.29%;
- --dh-color-green-700-hsl: 157.34, 77.3%, 36.27%;
- --dh-color-green-800-hsl: 159.02, 100%, 28.04%;
- --dh-color-green-900-hsl: 157.87, 100%, 23.92%;
- --dh-color-green-1000-hsl: 156.83, 100%, 19.8%;
- --dh-color-green-1100-hsl: 157.04, 100%, 15.88%;
- --dh-color-green-1200-hsl: 155.17, 85.29%, 13.33%;
- --dh-color-green-1300-hsl: 151.67, 64.29%, 10.98%;
- --dh-color-green-1400-hsl: 150, 52.38%, 8.24%;
- --dh-color-seafoam-100-hsl: 174.15, 71.93%, 88.82%;
- --dh-color-seafoam-200-hsl: 174.08, 71.72%, 80.59%;
- --dh-color-seafoam-300-hsl: 175.48, 67.88%, 73.14%;
- --dh-color-seafoam-400-hsl: 175.9, 61.26%, 62.55%;
- --dh-color-seafoam-500-hsl: 176.52, 56.1%, 51.76%;
- --dh-color-seafoam-600-hsl: 177.47, 84.69%, 38.43%;
- --dh-color-seafoam-700-hsl: 177.39, 100%, 31.57%;
- --dh-color-seafoam-800-hsl: 177.86, 100%, 27.45%;
- --dh-color-seafoam-900-hsl: 177.48, 100%, 23.33%;
- --dh-color-seafoam-1000-hsl: 177.58, 100%, 19.41%;
- --dh-color-seafoam-1100-hsl: 177.31, 73.63%, 17.84%;
- --dh-color-seafoam-1200-hsl: 177.14, 53.85%, 15.29%;
- --dh-color-seafoam-1300-hsl: 177.69, 41.94%, 12.16%;
- --dh-color-seafoam-1400-hsl: 176.25, 34.78%, 9.02%;
- --dh-color-cyan-100-hsl: 187.24, 100%, 88.63%;
- --dh-color-cyan-200-hsl: 189.89, 100%, 82.16%;
- --dh-color-cyan-300-hsl: 190, 91.94%, 75.69%;
- --dh-color-cyan-400-hsl: 191.02, 85.96%, 66.47%;
- --dh-color-cyan-500-hsl: 191.6, 79.74%, 55.49%;
- --dh-color-cyan-600-hsl: 192.6, 84.75%, 46.27%;
- --dh-color-cyan-700-hsl: 193.27, 99%, 39.41%;
- --dh-color-cyan-800-hsl: 195.33, 100%, 35.29%;
- --dh-color-cyan-900-hsl: 197.36, 100%, 31.18%;
- --dh-color-cyan-1000-hsl: 199.27, 100%, 26.86%;
- --dh-color-cyan-1100-hsl: 201.39, 100%, 22.55%;
- --dh-color-cyan-1200-hsl: 203.23, 100%, 18.24%;
- --dh-color-cyan-1300-hsl: 204, 100%, 13.73%;
- --dh-color-cyan-1400-hsl: 204.71, 100%, 10%;
- --dh-color-blue-100-hsl: 205.16, 100%, 93.92%;
- --dh-color-blue-200-hsl: 206.04, 100%, 89.61%;
- --dh-color-blue-300-hsl: 206.76, 100%, 85.49%;
- --dh-color-blue-400-hsl: 207.38, 96.26%, 79.02%;
- --dh-color-blue-500-hsl: 209.08, 92.86%, 72.55%;
- --dh-color-blue-600-hsl: 210.19, 89.71%, 65.69%;
- --dh-color-blue-700-hsl: 211.12, 88.63%, 58.63%;
- --dh-color-blue-800-hsl: 212.56, 90.28%, 51.57%;
- --dh-color-blue-900-hsl: 212.75, 98.2%, 43.53%;
- --dh-color-blue-1000-hsl: 212.31, 100%, 35.69%;
- --dh-color-blue-1100-hsl: 211.86, 100%, 28.43%;
- --dh-color-blue-1200-hsl: 211.86, 100%, 22.16%;
- --dh-color-blue-1300-hsl: 212.14, 100%, 16.47%;
- --dh-color-blue-1400-hsl: 212, 100%, 11.76%;
- --dh-color-indigo-100-hsl: 236.67, 100%, 96.47%;
- --dh-color-indigo-200-hsl: 236.13, 100%, 93.92%;
- --dh-color-indigo-300-hsl: 237.27, 100%, 91.37%;
- --dh-color-indigo-400-hsl: 237.1, 100%, 87.84%;
- --dh-color-indigo-500-hsl: 237.83, 100%, 83.73%;
- --dh-color-indigo-600-hsl: 237.74, 100%, 79.22%;
- --dh-color-indigo-700-hsl: 237.14, 95.45%, 74.12%;
- --dh-color-indigo-800-hsl: 237.86, 86.42%, 68.24%;
- --dh-color-indigo-900-hsl: 237.53, 73%, 60.78%;
- --dh-color-indigo-1000-hsl: 237.39, 56.56%, 52.16%;
- --dh-color-indigo-1100-hsl: 237.97, 54.13%, 42.75%;
- --dh-color-indigo-1200-hsl: 238.13, 55.81%, 33.73%;
- --dh-color-indigo-1300-hsl: 237.53, 57.48%, 24.9%;
- --dh-color-indigo-1400-hsl: 237.69, 56.52%, 18.04%;
- --dh-color-purple-100-hsl: 273, 100%, 96.08%;
- --dh-color-purple-200-hsl: 270, 100%, 93.33%;
- --dh-color-purple-300-hsl: 268.09, 100%, 90.78%;
- --dh-color-purple-400-hsl: 268.66, 97.1%, 86.47%;
- --dh-color-purple-500-hsl: 266.97, 95.7%, 81.76%;
- --dh-color-purple-600-hsl: 266.55, 94.96%, 76.67%;
- --dh-color-purple-700-hsl: 266.67, 91.84%, 71.18%;
- --dh-color-purple-800-hsl: 266.75, 87.71%, 64.9%;
- --dh-color-purple-900-hsl: 266.82, 77.98%, 57.25%;
- --dh-color-purple-1000-hsl: 266.71, 69.48%, 48.82%;
- --dh-color-purple-1100-hsl: 267.07, 81.19%, 39.61%;
- --dh-color-purple-1200-hsl: 266.03, 85%, 31.37%;
- --dh-color-purple-1300-hsl: 263.33, 73.77%, 23.92%;
- --dh-color-purple-1400-hsl: 260.69, 65.91%, 17.25%;
- --dh-color-fuchsia-100-hsl: 308.18, 100%, 95.69%;
- --dh-color-fuchsia-200-hsl: 308.11, 100%, 92.75%;
- --dh-color-fuchsia-300-hsl: 306.55, 96.49%, 88.82%;
- --dh-color-fuchsia-400-hsl: 303.9, 90.59%, 83.33%;
- --dh-color-fuchsia-500-hsl: 301.21, 83.19%, 76.67%;
- --dh-color-fuchsia-600-hsl: 300, 77.07%, 69.22%;
- --dh-color-fuchsia-700-hsl: 299.15, 70.85%, 60.98%;
- --dh-color-fuchsia-800-hsl: 299.59, 60.16%, 51.76%;
- --dh-color-fuchsia-900-hsl: 299.6, 68.66%, 42.55%;
- --dh-color-fuchsia-1000-hsl: 299.61, 96.27%, 31.57%;
- --dh-color-fuchsia-1100-hsl: 299.53, 100%, 25.29%;
- --dh-color-fuchsia-1200-hsl: 300, 88.68%, 20.78%;
- --dh-color-fuchsia-1300-hsl: 301.05, 67.06%, 16.67%;
- --dh-color-fuchsia-1400-hsl: 301.62, 58.73%, 12.35%;
- --dh-color-magenta-100-hsl: 340, 100%, 95.88%;
- --dh-color-magenta-200-hsl: 339.43, 100%, 93.14%;
- --dh-color-magenta-300-hsl: 338.49, 100%, 89.61%;
- --dh-color-magenta-400-hsl: 338.18, 100%, 84.9%;
- --dh-color-magenta-500-hsl: 337.36, 100%, 79.22%;
- --dh-color-magenta-600-hsl: 336.64, 92.91%, 72.35%;
- --dh-color-magenta-700-hsl: 335.03, 82.32%, 64.51%;
- --dh-color-magenta-800-hsl: 334.29, 70.93%, 55.49%;
- --dh-color-magenta-900-hsl: 334.34, 70.94%, 45.88%;
- --dh-color-magenta-1000-hsl: 332.2, 90.11%, 35.69%;
- --dh-color-magenta-1100-hsl: 330.85, 100%, 27.84%;
- --dh-color-magenta-1200-hsl: 330.54, 100%, 21.96%;
- --dh-color-magenta-1300-hsl: 331.11, 93.1%, 17.06%;
- --dh-color-magenta-1400-hsl: 334.44, 81.82%, 12.94%;
-
- /* Grays */
- --dh-color-gray-50: hsl(var(--dh-color-gray-50-hsl));
- --dh-color-gray-75: hsl(var(--dh-color-gray-75-hsl));
- --dh-color-gray-100: hsl(var(--dh-color-gray-100-hsl));
- --dh-color-gray-200: hsl(var(--dh-color-gray-200-hsl));
- --dh-color-gray-300: hsl(var(--dh-color-gray-300-hsl));
- --dh-color-gray-400: hsl(var(--dh-color-gray-400-hsl));
- --dh-color-gray-500: hsl(var(--dh-color-gray-500-hsl));
- --dh-color-gray-600: hsl(var(--dh-color-gray-600-hsl));
- --dh-color-gray-700: hsl(var(--dh-color-gray-700-hsl));
- --dh-color-gray-800: hsl(var(--dh-color-gray-800-hsl));
- --dh-color-gray-900: hsl(var(--dh-color-gray-900-hsl));
-
- --dh-color-gray-light: hsl(var(--dh-color-gray-light-hsl));
- --dh-color-gray-mid: hsl(var(--dh-color-gray-mid-hsl));
- --dh-color-gray-dark: hsl(var(--dh-color-gray-dark-hsl));
+ --dh-color-gray-50: #ffffff;
+ --dh-color-gray-75: #fafafa;
+ --dh-color-gray-100: #f7f7f7;
+ --dh-color-gray-200: #eeeeee;
+ --dh-color-gray-300: #dadada;
+ --dh-color-gray-400: #b9b9b9;
+ --dh-color-gray-500: #959595;
+ --dh-color-gray-600: #727272;
+ --dh-color-gray-700: #464646;
+ --dh-color-gray-800: #222222;
+ --dh-color-gray-900: #000000;
+
+ --dh-color-gray-light: var(--dh-color-gray-900);
+ --dh-color-gray-mid: var(--dh-color-gray-600);
+ --dh-color-gray-dark: var(--dh-color-gray-300);
/** Black & White */
- --dh-color-black: hsl(var(--dh-color-black-hsl));
- --dh-color-white: hsl(var(--dh-color-white-hsl));
-
- /* Red */
- --dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
- --dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
- --dh-color-red-300: hsl(var(--dh-color-red-300-hsl));
- --dh-color-red-400: hsl(var(--dh-color-red-400-hsl));
- --dh-color-red-500: hsl(var(--dh-color-red-500-hsl));
- --dh-color-red-600: hsl(var(--dh-color-red-600-hsl));
- --dh-color-red-700: hsl(var(--dh-color-red-700-hsl));
- --dh-color-red-800: hsl(var(--dh-color-red-800-hsl));
- --dh-color-red-900: hsl(var(--dh-color-red-900-hsl));
- --dh-color-red-1000: hsl(var(--dh-color-red-1000-hsl));
- --dh-color-red-1100: hsl(var(--dh-color-red-1100-hsl));
- --dh-color-red-1200: hsl(var(--dh-color-red-1200-hsl));
- --dh-color-red-1300: hsl(var(--dh-color-red-1300-hsl));
- --dh-color-red-1400: hsl(var(--dh-color-red-1400-hsl));
-
- /* Orange */
- --dh-color-orange-100: hsl(var(--dh-color-orange-100-hsl));
- --dh-color-orange-200: hsl(var(--dh-color-orange-200-hsl));
- --dh-color-orange-300: hsl(var(--dh-color-orange-300-hsl));
- --dh-color-orange-400: hsl(var(--dh-color-orange-400-hsl));
- --dh-color-orange-500: hsl(var(--dh-color-orange-500-hsl));
- --dh-color-orange-600: hsl(var(--dh-color-orange-600-hsl));
- --dh-color-orange-700: hsl(var(--dh-color-orange-700-hsl));
- --dh-color-orange-800: hsl(var(--dh-color-orange-800-hsl));
- --dh-color-orange-900: hsl(var(--dh-color-orange-900-hsl));
- --dh-color-orange-1000: hsl(var(--dh-color-orange-1000-hsl));
- --dh-color-orange-1100: hsl(var(--dh-color-orange-1100-hsl));
- --dh-color-orange-1200: hsl(var(--dh-color-orange-1200-hsl));
- --dh-color-orange-1300: hsl(var(--dh-color-orange-1300-hsl));
- --dh-color-orange-1400: hsl(var(--dh-color-orange-1400-hsl));
-
- /* Yellow */
- --dh-color-yellow-100: hsl(var(--dh-color-yellow-100-hsl));
- --dh-color-yellow-200: hsl(var(--dh-color-yellow-200-hsl));
- --dh-color-yellow-300: hsl(var(--dh-color-yellow-300-hsl));
- --dh-color-yellow-400: hsl(var(--dh-color-yellow-400-hsl));
- --dh-color-yellow-500: hsl(var(--dh-color-yellow-500-hsl));
- --dh-color-yellow-600: hsl(var(--dh-color-yellow-600-hsl));
- --dh-color-yellow-700: hsl(var(--dh-color-yellow-700-hsl));
- --dh-color-yellow-800: hsl(var(--dh-color-yellow-800-hsl));
- --dh-color-yellow-900: hsl(var(--dh-color-yellow-900-hsl));
- --dh-color-yellow-1000: hsl(var(--dh-color-yellow-1000-hsl));
- --dh-color-yellow-1100: hsl(var(--dh-color-yellow-1100-hsl));
- --dh-color-yellow-1200: hsl(var(--dh-color-yellow-1200-hsl));
- --dh-color-yellow-1300: hsl(var(--dh-color-yellow-1300-hsl));
- --dh-color-yellow-1400: hsl(var(--dh-color-yellow-1400-hsl));
-
- /* Chartreuse */
- --dh-color-chartreuse-100: hsl(var(--dh-color-chartreuse-100-hsl));
- --dh-color-chartreuse-200: hsl(var(--dh-color-chartreuse-200-hsl));
- --dh-color-chartreuse-300: hsl(var(--dh-color-chartreuse-300-hsl));
- --dh-color-chartreuse-400: hsl(var(--dh-color-chartreuse-400-hsl));
- --dh-color-chartreuse-500: hsl(var(--dh-color-chartreuse-500-hsl));
- --dh-color-chartreuse-600: hsl(var(--dh-color-chartreuse-600-hsl));
- --dh-color-chartreuse-700: hsl(var(--dh-color-chartreuse-700-hsl));
- --dh-color-chartreuse-800: hsl(var(--dh-color-chartreuse-800-hsl));
- --dh-color-chartreuse-900: hsl(var(--dh-color-chartreuse-900-hsl));
- --dh-color-chartreuse-1000: hsl(var(--dh-color-chartreuse-1000-hsl));
- --dh-color-chartreuse-1100: hsl(var(--dh-color-chartreuse-1100-hsl));
- --dh-color-chartreuse-1200: hsl(var(--dh-color-chartreuse-1200-hsl));
- --dh-color-chartreuse-1300: hsl(var(--dh-color-chartreuse-1300-hsl));
- --dh-color-chartreuse-1400: hsl(var(--dh-color-chartreuse-1400-hsl));
-
- /* Celery */
- --dh-color-celery-100: hsl(var(--dh-color-celery-100-hsl));
- --dh-color-celery-200: hsl(var(--dh-color-celery-200-hsl));
- --dh-color-celery-300: hsl(var(--dh-color-celery-300-hsl));
- --dh-color-celery-400: hsl(var(--dh-color-celery-400-hsl));
- --dh-color-celery-500: hsl(var(--dh-color-celery-500-hsl));
- --dh-color-celery-600: hsl(var(--dh-color-celery-600-hsl));
- --dh-color-celery-700: hsl(var(--dh-color-celery-700-hsl));
- --dh-color-celery-800: hsl(var(--dh-color-celery-800-hsl));
- --dh-color-celery-900: hsl(var(--dh-color-celery-900-hsl));
- --dh-color-celery-1000: hsl(var(--dh-color-celery-1000-hsl));
- --dh-color-celery-1100: hsl(var(--dh-color-celery-1100-hsl));
- --dh-color-celery-1200: hsl(var(--dh-color-celery-1200-hsl));
- --dh-color-celery-1300: hsl(var(--dh-color-celery-1300-hsl));
- --dh-color-celery-1400: hsl(var(--dh-color-celery-1400-hsl));
-
- /* Green */
- --dh-color-green-100: hsl(var(--dh-color-green-100-hsl));
- --dh-color-green-200: hsl(var(--dh-color-green-200-hsl));
- --dh-color-green-300: hsl(var(--dh-color-green-300-hsl));
- --dh-color-green-400: hsl(var(--dh-color-green-400-hsl));
- --dh-color-green-500: hsl(var(--dh-color-green-500-hsl));
- --dh-color-green-600: hsl(var(--dh-color-green-600-hsl));
- --dh-color-green-700: hsl(var(--dh-color-green-700-hsl));
- --dh-color-green-800: hsl(var(--dh-color-green-800-hsl));
- --dh-color-green-900: hsl(var(--dh-color-green-900-hsl));
- --dh-color-green-1000: hsl(var(--dh-color-green-1000-hsl));
- --dh-color-green-1100: hsl(var(--dh-color-green-1100-hsl));
- --dh-color-green-1200: hsl(var(--dh-color-green-1200-hsl));
- --dh-color-green-1300: hsl(var(--dh-color-green-1300-hsl));
- --dh-color-green-1400: hsl(var(--dh-color-green-1400-hsl));
-
- /* Seafoam */
- --dh-color-seafoam-100: hsl(var(--dh-color-seafoam-100-hsl));
- --dh-color-seafoam-200: hsl(var(--dh-color-seafoam-200-hsl));
- --dh-color-seafoam-300: hsl(var(--dh-color-seafoam-300-hsl));
- --dh-color-seafoam-400: hsl(var(--dh-color-seafoam-400-hsl));
- --dh-color-seafoam-500: hsl(var(--dh-color-seafoam-500-hsl));
- --dh-color-seafoam-600: hsl(var(--dh-color-seafoam-600-hsl));
- --dh-color-seafoam-700: hsl(var(--dh-color-seafoam-700-hsl));
- --dh-color-seafoam-800: hsl(var(--dh-color-seafoam-800-hsl));
- --dh-color-seafoam-900: hsl(var(--dh-color-seafoam-900-hsl));
- --dh-color-seafoam-1000: hsl(var(--dh-color-seafoam-1000-hsl));
- --dh-color-seafoam-1100: hsl(var(--dh-color-seafoam-1100-hsl));
- --dh-color-seafoam-1200: hsl(var(--dh-color-seafoam-1200-hsl));
- --dh-color-seafoam-1300: hsl(var(--dh-color-seafoam-1300-hsl));
- --dh-color-seafoam-1400: hsl(var(--dh-color-seafoam-1400-hsl));
-
- /* Cyan */
- --dh-color-cyan-100: hsl(var(--dh-color-cyan-100-hsl));
- --dh-color-cyan-200: hsl(var(--dh-color-cyan-200-hsl));
- --dh-color-cyan-300: hsl(var(--dh-color-cyan-300-hsl));
- --dh-color-cyan-400: hsl(var(--dh-color-cyan-400-hsl));
- --dh-color-cyan-500: hsl(var(--dh-color-cyan-500-hsl));
- --dh-color-cyan-600: hsl(var(--dh-color-cyan-600-hsl));
- --dh-color-cyan-700: hsl(var(--dh-color-cyan-700-hsl));
- --dh-color-cyan-800: hsl(var(--dh-color-cyan-800-hsl));
- --dh-color-cyan-900: hsl(var(--dh-color-cyan-900-hsl));
- --dh-color-cyan-1000: hsl(var(--dh-color-cyan-1000-hsl));
- --dh-color-cyan-1100: hsl(var(--dh-color-cyan-1100-hsl));
- --dh-color-cyan-1200: hsl(var(--dh-color-cyan-1200-hsl));
- --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));
- --dh-color-indigo-300: hsl(var(--dh-color-indigo-300-hsl));
- --dh-color-indigo-400: hsl(var(--dh-color-indigo-400-hsl));
- --dh-color-indigo-500: hsl(var(--dh-color-indigo-500-hsl));
- --dh-color-indigo-600: hsl(var(--dh-color-indigo-600-hsl));
- --dh-color-indigo-700: hsl(var(--dh-color-indigo-700-hsl));
- --dh-color-indigo-800: hsl(var(--dh-color-indigo-800-hsl));
- --dh-color-indigo-900: hsl(var(--dh-color-indigo-900-hsl));
- --dh-color-indigo-1000: hsl(var(--dh-color-indigo-1000-hsl));
- --dh-color-indigo-1100: hsl(var(--dh-color-indigo-1100-hsl));
- --dh-color-indigo-1200: hsl(var(--dh-color-indigo-1200-hsl));
- --dh-color-indigo-1300: hsl(var(--dh-color-indigo-1300-hsl));
- --dh-color-indigo-1400: hsl(var(--dh-color-indigo-1400-hsl));
-
- /* Purple */
- --dh-color-purple-100: hsl(var(--dh-color-purple-100-hsl));
- --dh-color-purple-200: hsl(var(--dh-color-purple-200-hsl));
- --dh-color-purple-300: hsl(var(--dh-color-purple-300-hsl));
- --dh-color-purple-400: hsl(var(--dh-color-purple-400-hsl));
- --dh-color-purple-500: hsl(var(--dh-color-purple-500-hsl));
- --dh-color-purple-600: hsl(var(--dh-color-purple-600-hsl));
- --dh-color-purple-700: hsl(var(--dh-color-purple-700-hsl));
- --dh-color-purple-800: hsl(var(--dh-color-purple-800-hsl));
- --dh-color-purple-900: hsl(var(--dh-color-purple-900-hsl));
- --dh-color-purple-1000: hsl(var(--dh-color-purple-1000-hsl));
- --dh-color-purple-1100: hsl(var(--dh-color-purple-1100-hsl));
- --dh-color-purple-1200: hsl(var(--dh-color-purple-1200-hsl));
- --dh-color-purple-1300: hsl(var(--dh-color-purple-1300-hsl));
- --dh-color-purple-1400: hsl(var(--dh-color-purple-1400-hsl));
-
- /* Fuchsia */
- --dh-color-fuchsia-100: hsl(var(--dh-color-fuchsia-100-hsl));
- --dh-color-fuchsia-200: hsl(var(--dh-color-fuchsia-200-hsl));
- --dh-color-fuchsia-300: hsl(var(--dh-color-fuchsia-300-hsl));
- --dh-color-fuchsia-400: hsl(var(--dh-color-fuchsia-400-hsl));
- --dh-color-fuchsia-500: hsl(var(--dh-color-fuchsia-500-hsl));
- --dh-color-fuchsia-600: hsl(var(--dh-color-fuchsia-600-hsl));
- --dh-color-fuchsia-700: hsl(var(--dh-color-fuchsia-700-hsl));
- --dh-color-fuchsia-800: hsl(var(--dh-color-fuchsia-800-hsl));
- --dh-color-fuchsia-900: hsl(var(--dh-color-fuchsia-900-hsl));
- --dh-color-fuchsia-1000: hsl(var(--dh-color-fuchsia-1000-hsl));
- --dh-color-fuchsia-1100: hsl(var(--dh-color-fuchsia-1100-hsl));
- --dh-color-fuchsia-1200: hsl(var(--dh-color-fuchsia-1200-hsl));
- --dh-color-fuchsia-1300: hsl(var(--dh-color-fuchsia-1300-hsl));
- --dh-color-fuchsia-1400: hsl(var(--dh-color-fuchsia-1400-hsl));
-
- /* Magenta */
- --dh-color-magenta-100: hsl(var(--dh-color-magenta-100-hsl));
- --dh-color-magenta-200: hsl(var(--dh-color-magenta-200-hsl));
- --dh-color-magenta-300: hsl(var(--dh-color-magenta-300-hsl));
- --dh-color-magenta-400: hsl(var(--dh-color-magenta-400-hsl));
- --dh-color-magenta-500: hsl(var(--dh-color-magenta-500-hsl));
- --dh-color-magenta-600: hsl(var(--dh-color-magenta-600-hsl));
- --dh-color-magenta-700: hsl(var(--dh-color-magenta-700-hsl));
- --dh-color-magenta-800: hsl(var(--dh-color-magenta-800-hsl));
- --dh-color-magenta-900: hsl(var(--dh-color-magenta-900-hsl));
- --dh-color-magenta-1000: hsl(var(--dh-color-magenta-1000-hsl));
- --dh-color-magenta-1100: hsl(var(--dh-color-magenta-1100-hsl));
- --dh-color-magenta-1200: hsl(var(--dh-color-magenta-1200-hsl));
- --dh-color-magenta-1300: hsl(var(--dh-color-magenta-1300-hsl));
- --dh-color-magenta-1400: hsl(var(--dh-color-magenta-1400-hsl));
+ --dh-color-black: var(--dh-color-gray-900);
+ --dh-color-white: var(--dh-color-gray-75);
+ --dh-color-true-black: #000000;
+ --dh-color-true-white: #ffffff;
+
+ --dh-color-red-100: #ffebe7;
+ --dh-color-red-200: #ffddd6;
+ --dh-color-red-300: #ffcdc3;
+ --dh-color-red-400: #ffb7a9;
+ --dh-color-red-500: #ff9b88;
+ --dh-color-red-600: #ff7c65;
+ --dh-color-red-700: #f75c46;
+ --dh-color-red-800: #ea3829;
+ --dh-color-red-900: #d31510;
+ --dh-color-red-1000: #b40000;
+ --dh-color-red-1100: #930000;
+ --dh-color-red-1200: #740000;
+ --dh-color-red-1300: #590000;
+ --dh-color-red-1400: #430000;
+
+ --dh-color-orange-100: #ffeccc;
+ --dh-color-orange-200: #ffdfad;
+ --dh-color-orange-300: #fdd291;
+ --dh-color-orange-400: #ffbb63;
+ --dh-color-orange-500: #ffa037;
+ --dh-color-orange-600: #f68511;
+ --dh-color-orange-700: #e46f00;
+ --dh-color-orange-800: #cb5d00;
+ --dh-color-orange-900: #b14c00;
+ --dh-color-orange-1000: #953d00;
+ --dh-color-orange-1100: #7a2f00;
+ --dh-color-orange-1200: #612300;
+ --dh-color-orange-1300: #491901;
+ --dh-color-orange-1400: #351201;
+
+ --dh-color-yellow-100: #fbf198;
+ --dh-color-yellow-200: #f8e750;
+ --dh-color-yellow-300: #f8d904;
+ --dh-color-yellow-400: #e8c600;
+ --dh-color-yellow-500: #d7b300;
+ --dh-color-yellow-600: #c49f00;
+ --dh-color-yellow-700: #b08c00;
+ --dh-color-yellow-800: #9b7800;
+ --dh-color-yellow-900: #856600;
+ --dh-color-yellow-1000: #705300;
+ --dh-color-yellow-1100: #5b4300;
+ --dh-color-yellow-1200: #483300;
+ --dh-color-yellow-1300: #362500;
+ --dh-color-yellow-1400: #281a00;
+
+ --dh-color-chartreuse-100: #dbfc6e;
+ --dh-color-chartreuse-200: #cbf443;
+ --dh-color-chartreuse-300: #bce92a;
+ --dh-color-chartreuse-400: #aad816;
+ --dh-color-chartreuse-500: #98c50a;
+ --dh-color-chartreuse-600: #87b103;
+ --dh-color-chartreuse-700: #769c00;
+ --dh-color-chartreuse-800: #678800;
+ --dh-color-chartreuse-900: #577400;
+ --dh-color-chartreuse-1000: #486000;
+ --dh-color-chartreuse-1100: #3a4d00;
+ --dh-color-chartreuse-1200: #2c3b00;
+ --dh-color-chartreuse-1300: #212c00;
+ --dh-color-chartreuse-1400: #181f00;
+
+ --dh-color-celery-100: #cdfcbf;
+ --dh-color-celery-200: #aef69d;
+ --dh-color-celery-300: #96ee85;
+ --dh-color-celery-400: #72e06a;
+ --dh-color-celery-500: #4ecf50;
+ --dh-color-celery-600: #27bb36;
+ --dh-color-celery-700: #07a721;
+ --dh-color-celery-800: #009112;
+ --dh-color-celery-900: #007c0f;
+ --dh-color-celery-1000: #00670f;
+ --dh-color-celery-1100: #00530d;
+ --dh-color-celery-1200: #00400a;
+ --dh-color-celery-1300: #003007;
+ --dh-color-celery-1400: #002205;
+
+ --dh-color-green-100: #cef8e0;
+ --dh-color-green-200: #adf4ce;
+ --dh-color-green-300: #89ecbc;
+ --dh-color-green-400: #67dea8;
+ --dh-color-green-500: #49cc93;
+ --dh-color-green-600: #2fb880;
+ --dh-color-green-700: #15a46e;
+ --dh-color-green-800: #008f5d;
+ --dh-color-green-900: #007a4d;
+ --dh-color-green-1000: #00653e;
+ --dh-color-green-1100: #005132;
+ --dh-color-green-1200: #053f27;
+ --dh-color-green-1300: #0a2e1d;
+ --dh-color-green-1400: #0a2015;
+
+ --dh-color-seafoam-100: #cef7f3;
+ --dh-color-seafoam-200: #aaf1ea;
+ --dh-color-seafoam-300: #8ce9e2;
+ --dh-color-seafoam-400: #65dad2;
+ --dh-color-seafoam-500: #3fc9c1;
+ --dh-color-seafoam-600: #0fb5ae;
+ --dh-color-seafoam-700: #00a19a;
+ --dh-color-seafoam-800: #008c87;
+ --dh-color-seafoam-900: #007772;
+ --dh-color-seafoam-1000: #00635f;
+ --dh-color-seafoam-1100: #0c4f4c;
+ --dh-color-seafoam-1200: #123c3a;
+ --dh-color-seafoam-1300: #122c2b;
+ --dh-color-seafoam-1400: #0f1f1e;
+
+ --dh-color-cyan-100: #c5f8ff;
+ --dh-color-cyan-200: #a4f0ff;
+ --dh-color-cyan-300: #88e7fa;
+ --dh-color-cyan-400: #60d8f3;
+ --dh-color-cyan-500: #33c5e8;
+ --dh-color-cyan-600: #12b0da;
+ --dh-color-cyan-700: #019cc8;
+ --dh-color-cyan-800: #0086b4;
+ --dh-color-cyan-900: #00719f;
+ --dh-color-cyan-1000: #005d89;
+ --dh-color-cyan-1100: #004a73;
+ --dh-color-cyan-1200: #00395d;
+ --dh-color-cyan-1300: #002a46;
+ --dh-color-cyan-1400: #001e33;
+
+ --dh-color-blue-100: #e0f2ff;
+ --dh-color-blue-200: #cae8ff;
+ --dh-color-blue-300: #b5deff;
+ --dh-color-blue-400: #96cefd;
+ --dh-color-blue-500: #78bbfa;
+ --dh-color-blue-600: #59a7f6;
+ --dh-color-blue-700: #3892f3;
+ --dh-color-blue-800: #147af3;
+ --dh-color-blue-900: #0265dc;
+ --dh-color-blue-1000: #0054b6;
+ --dh-color-blue-1100: #004491;
+ --dh-color-blue-1200: #003571;
+ --dh-color-blue-1300: #002754;
+ --dh-color-blue-1400: #001c3c;
+
+ --dh-color-indigo-100: #edeeff;
+ --dh-color-indigo-200: #e0e2ff;
+ --dh-color-indigo-300: #d3d5ff;
+ --dh-color-indigo-400: #c1c4ff;
+ --dh-color-indigo-500: #acafff;
+ --dh-color-indigo-600: #9599ff;
+ --dh-color-indigo-700: #7e84fc;
+ --dh-color-indigo-800: #686df4;
+ --dh-color-indigo-900: #5258e4;
+ --dh-color-indigo-1000: #4046ca;
+ --dh-color-indigo-1100: #3236a8;
+ --dh-color-indigo-1200: #262986;
+ --dh-color-indigo-1300: #1b1e64;
+ --dh-color-indigo-1400: #141648;
+
+ --dh-color-purple-100: #f6ebff;
+ --dh-color-purple-200: #eeddff;
+ --dh-color-purple-300: #e6d0ff;
+ --dh-color-purple-400: #dbbbfe;
+ --dh-color-purple-500: #cca4fd;
+ --dh-color-purple-600: #bd8bfc;
+ --dh-color-purple-700: #ae72f9;
+ --dh-color-purple-800: #9d57f4;
+ --dh-color-purple-900: #893de7;
+ --dh-color-purple-1000: #7326d3;
+ --dh-color-purple-1100: #5d13b7;
+ --dh-color-purple-1200: #470c94;
+ --dh-color-purple-1300: #33106a;
+ --dh-color-purple-1400: #230f49;
+
+ --dh-color-fuchsia-100: #ffe9fc;
+ --dh-color-fuchsia-200: #ffdafa;
+ --dh-color-fuchsia-300: #fec7f8;
+ --dh-color-fuchsia-400: #fbaef6;
+ --dh-color-fuchsia-500: #f592f3;
+ --dh-color-fuchsia-600: #ed74ed;
+ --dh-color-fuchsia-700: #e055e2;
+ --dh-color-fuchsia-800: #cd3ace;
+ --dh-color-fuchsia-900: #b622b7;
+ --dh-color-fuchsia-1000: #9d039e;
+ --dh-color-fuchsia-1100: #800081;
+ --dh-color-fuchsia-1200: #640664;
+ --dh-color-fuchsia-1300: #470e46;
+ --dh-color-fuchsia-1400: #320d31;
+
+ --dh-color-magenta-100: #ffeaf1;
+ --dh-color-magenta-200: #ffdce8;
+ --dh-color-magenta-300: #ffcadd;
+ --dh-color-magenta-400: #ffb2ce;
+ --dh-color-magenta-500: #ff95bd;
+ --dh-color-magenta-600: #fa77aa;
+ --dh-color-magenta-700: #ef5a98;
+ --dh-color-magenta-800: #de3d82;
+ --dh-color-magenta-900: #c82269;
+ --dh-color-magenta-1000: #ad0955;
+ --dh-color-magenta-1100: #8e0045;
+ --dh-color-magenta-1200: #700037;
+ --dh-color-magenta-1300: #54032a;
+ --dh-color-magenta-1400: #3c061d;
}
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css
index d4f27aae39..5592c1d9ef 100644
--- a/packages/components/src/theme/theme-light/theme-light-semantic-chart.css
+++ b/packages/components/src/theme/theme-light/theme-light-semantic-chart.css
@@ -25,13 +25,18 @@
--dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
--dh-color-plotly-axis-text: var(--dh-color-gray-500);
- --dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
+ --dh-color-plotly-zoombox: color-mix(
+ in srgb,
+ var(--dh-color-true-black) 50%,
+ transparent
+ );
--dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
--dh-color-plotly-zoombox-corners-stroke: var(--dh-color-gray-75);
- --dh-color-plotly-modebar-btn-active: hsla(
- var(--dh-color-true-black-hsl),
- 0.3
+ --dh-color-plotly-modebar-btn-active: color-mix(
+ in srgb,
+ var(--dh-color-true-black) 30%,
+ transparent
);
--dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
--dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic-grid.css b/packages/components/src/theme/theme-light/theme-light-semantic-grid.css
index a938559c3b..1fa26b002f 100644
--- a/packages/components/src/theme/theme-light/theme-light-semantic-grid.css
+++ b/packages/components/src/theme/theme-light/theme-light-semantic-grid.css
@@ -50,19 +50,22 @@
--dh-color-grid-string-null: var(--dh-color-gray-600);
/* Filter Bar */
- --dh-color-grid-filter-bar-active-bg: hsla(
- var(--dh-color-accent-700-hsl),
- 0.45
+ --dh-color-grid-filter-bar-active-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent-700) 45%,
+ transparent
);
--dh-color-grid-filter-bar-active: var(--dh-color-accent-700);
--dh-color-grid-filter-bar-expanded-bg: var(--dh-color-gray-50);
- --dh-color-grid-filter-bar-expanded-active-bg: hsla(
- var(--dh-color-accent-1000-hsl),
- 0.19
+ --dh-color-grid-filter-bar-expanded-active-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent-1000) 19%,
+ transparent
);
- --dh-color-grid-filter-bar-expanded-active-cell-bg: hsla(
- var(--dh-color-accent-700-hsl),
- 0.32
+ --dh-color-grid-filter-bar-expanded-active-cell-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent-700) 32%,
+ transparent
);
--dh-color-grid-filter-bar-separator: var(--dh-color-gray-600);
--dh-color-grid-filter-bar-error: var(--dh-color-visual-negative);
diff --git a/packages/components/src/theme/theme-light/theme-light-semantic.css b/packages/components/src/theme/theme-light/theme-light-semantic.css
index d8d37d8d46..e7af391758 100644
--- a/packages/components/src/theme/theme-light/theme-light-semantic.css
+++ b/packages/components/src/theme/theme-light/theme-light-semantic.css
@@ -1,129 +1,66 @@
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable alpha-value-notation */
:root {
- /* HSL base colors */
- --dh-color-bg-hsl: var(--dh-color-gray-300-hsl);
- --dh-color-content-bg-hsl: var(--dh-color-gray-100-hsl);
- --dh-color-subdued-content-bg-hsl: var(--dh-color-gray-200-hsl);
- --dh-color-surface-bg-hsl: var(--dh-color-gray-200-hsl);
- --dh-color-fg-hsl: var(--dh-color-black-hsl);
-
- --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl);
- --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl);
-
- --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);
- --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);
- --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);
- --dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);
- --dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);
- --dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);
- --dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);
- --dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);
- --dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);
- --dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);
- --dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);
- --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);
- --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);
- --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);
- --dh-color-accent-hsl: var(--dh-color-accent-900-hsl);
-
- --dh-color-border-hsl: var(--dh-color-gray-700-hsl);
- --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl);
-
- --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);
- --dh-color-neutral-hsl: var(--dh-color-gray-400-hsl);
- --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);
- --dh-color-positive-hsl: var(--dh-color-green-900-hsl);
- --dh-color-negative-hsl: var(--dh-color-red-800-hsl);
-
- /*
- * Contrast Colors
- *
- * Note that React Spectrum guidance suggests that background colors containing
- * yellow, orange, chartreuse or cyan should use a dark contrast color. All
- * others should use light. Therefore, these should stay in sync with the
- * --dh-color-xxx-hsl values above.
- * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white
- */
- --dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);
- --dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);
-
- --dh-color-accent-contrast-hsl: var(--dh-color-contrast-dark-hsl);
- --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);
- --dh-color-negative-contrast-hsl: var(--dh-color-contrast-dark-hsl);
- --dh-color-neutral-contrast-hsl: var(--dh-color-contrast-light-hsl);
- --dh-color-notice-contrast-hsl: var(--dh-color-contrast-dark-hsl);
- --dh-color-positive-contrast-hsl: var(--dh-color-contrast-dark-hsl);
-
- /* Visual HSL */
- --dh-color-visual-blue-hsl: var(--dh-color-blue-900-hsl);
- --dh-color-visual-celery-hsl: var(--dh-color-celery-1000-hsl);
- --dh-color-visual-chartreuse-hsl: var(--dh-color-chartreuse-1100-hsl);
- --dh-color-visual-cyan-hsl: var(--dh-color-cyan-1100-hsl);
- --dh-color-visual-fuchsia-hsl: var(--dh-color-fuchsia-900-hsl);
- --dh-color-visual-gray-hsl: var(--dh-color-gray-600-hsl);
- --dh-color-visual-green-hsl: var(--dh-color-green-900-hsl);
- --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl);
- --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl);
- --dh-color-visual-orange-hsl: var(--dh-color-orange-800-hsl);
- --dh-color-visual-purple-hsl: var(--dh-color-purple-1000-hsl);
- --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl);
- --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);
- --dh-color-visual-yellow-hsl: var(--dh-color-yellow-700-hsl);
-
- --dh-color-visual-positive-hsl: var(--dh-color-green-800-hsl);
- --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);
- --dh-color-visual-notice-hsl: var(--dh-color-yellow-700-hsl);
- --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);
-
/* General */
- --dh-color-bg: hsl(var(--dh-color-bg-hsl));
- --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl));
- --dh-color-subdued-content-bg: hsl(var(--dh-color-subdued-content-bg-hsl));
- --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl));
- --dh-color-fg: hsl(var(--dh-color-fg-hsl));
- --dh-color-border: hsl(var(--dh-color-border-hsl));
+ --dh-color-bg: var(--dh-color-gray-300);
+ --dh-color-content-bg: var(--dh-color-gray-100);
+ --dh-color-subdued-content-bg: var(--dh-color-gray-200);
+ --dh-color-surface-bg: var(--dh-color-gray-200);
+ --dh-color-fg: var(--dh-color-black);
+ --dh-color-border: var(--dh-color-gray-700);
--dh-color-hover-border: var(--dh-color-gray-900);
- --dh-color-border-focus: hsl(var(--dh-color-border-focus-hsl));
- --dh-color-disabled-bg: hsl(var(--dh-color-disabled-bg-hsl));
+ --dh-color-border-focus: var(--dh-color-accent-800);
+ --dh-color-disabled-bg: var(--dh-color-gray-300);
+ --dh-color-scrollbar: var(--dh-color-fg);
/* Text */
--dh-color-heading-text: var(--dh-color-gray-900);
--dh-color-text: var(--dh-color-gray-800);
--dh-color-text-disabled: var(--dh-color-gray-700);
- --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.15);
+ --dh-color-text-highlight: color-mix(
+ in srgb,
+ var(--dh-color-blue-700) 15%,
+ transparent
+ );
--dh-color-text-hover: var(--dh-color-gray-900);
- /* Contrast Base */
- --dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));
- --dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));
+ /*
+ * Contrast Colors
+ *
+ * Note that React Spectrum guidance suggests that background colors containing
+ * yellow, orange, chartreuse or cyan should use a dark contrast color. All
+ * others should use light.
+ * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white
+ */
+ --dh-color-contrast-dark: var(--dh-color-gray-50);
+ --dh-color-contrast-light: var(--dh-color-gray-900);
/** Accent Colors */
- --dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));
- --dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));
- --dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));
- --dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));
- --dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));
- --dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));
- --dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));
- --dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));
- --dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));
- --dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));
- --dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));
- --dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));
- --dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));
- --dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));
+ --dh-color-accent-100: var(--dh-color-blue-100);
+ --dh-color-accent-200: var(--dh-color-blue-200);
+ --dh-color-accent-300: var(--dh-color-blue-300);
+ --dh-color-accent-400: var(--dh-color-blue-400);
+ --dh-color-accent-500: var(--dh-color-blue-500);
+ --dh-color-accent-600: var(--dh-color-blue-600);
+ --dh-color-accent-700: var(--dh-color-blue-700);
+ --dh-color-accent-800: var(--dh-color-blue-800);
+ --dh-color-accent-900: var(--dh-color-blue-900);
+ --dh-color-accent-1000: var(--dh-color-blue-1000);
+ --dh-color-accent-1100: var(--dh-color-blue-1100);
+ --dh-color-accent-1200: var(--dh-color-blue-1200);
+ --dh-color-accent-1300: var(--dh-color-blue-1300);
+ --dh-color-accent-1400: var(--dh-color-blue-1400);
/* Accent */
- --dh-color-accent-bg: hsl(var(--dh-color-accent-hsl));
+ --dh-color-accent: var(--dh-color-accent-900);
+ --dh-color-accent-bg: var(--dh-color-accent);
--dh-color-accent-hover-bg: var(--dh-color-accent-1000);
--dh-color-accent-down-bg: var(--dh-color-accent-1100);
--dh-color-accent-key-focus-bg: var(--dh-color-accent-1000);
- --dh-color-accent-contrast: hsl(var(--dh-color-accent-contrast-hsl));
+ --dh-color-accent-contrast: var(--dh-color-contrast-dark);
/* Background Defaults */
--dh-color-gray-bg: var(--dh-color-gray-700);
- --dh-color-blue-bg: var(--dh-color-blue-700);
--dh-color-red-bg: var(--dh-color-red-700);
--dh-color-orange-bg: var(--dh-color-orange-800);
--dh-color-yellow-bg: var(--dh-color-yellow-1000);
@@ -132,44 +69,104 @@
--dh-color-green-bg: var(--dh-color-green-700);
--dh-color-seafoam-bg: var(--dh-color-seafoam-700);
--dh-color-cyan-bg: var(--dh-color-cyan-700);
+ --dh-color-blue-bg: var(--dh-color-blue-700);
--dh-color-indigo-bg: var(--dh-color-indigo-700);
--dh-color-purple-bg: var(--dh-color-purple-700);
--dh-color-fuchsia-bg: var(--dh-color-fuchsia-700);
--dh-color-magenta-bg: var(--dh-color-magenta-700);
+ /* Visual HSL */
+ --dh-color-visual-gray: var(--dh-color-gray-600);
+ --dh-color-visual-red: var(--dh-color-red-800);
+ --dh-color-visual-orange: var(--dh-color-orange-800);
+ --dh-color-visual-yellow: var(--dh-color-yellow-700);
+ --dh-color-visual-chartreuse: var(--dh-color-chartreuse-1100);
+ --dh-color-visual-celery: var(--dh-color-celery-1000);
+ --dh-color-visual-green: var(--dh-color-green-900);
+ --dh-color-visual-seafoam: var(--dh-color-seafoam-1100);
+ --dh-color-visual-cyan: var(--dh-color-cyan-1100);
+ --dh-color-visual-blue: var(--dh-color-blue-900);
+ --dh-color-visual-indigo: var(--dh-color-indigo-900);
+ --dh-color-visual-purple: var(--dh-color-purple-1000);
+ --dh-color-visual-fuchsia: var(--dh-color-fuchsia-900);
+ --dh-color-visual-magenta: var(--dh-color-magenta-900);
+
+ --dh-color-visual-positive: var(--dh-color-green-800);
+ --dh-color-visual-negative: var(--dh-color-red-800);
+ --dh-color-visual-notice: var(--dh-color-yellow-700);
+ --dh-color-visual-info: var(--dh-color-cyan-1100);
+
/* Focus */
--dh-color-focus: var(--dh-color-blue-800);
--dh-color-focus-border: var(--dh-color-blue-800);
--dh-color-focus-ring: var(--dh-color-focus);
/* Highlight */
- --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.2);
- --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.15);
- --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);
- --dh-color-highlight-selected: hsla(var(--dh-color-accent-hsl), 0.25);
- --dh-color-highlight-selected-hover: hsla(var(--dh-color-accent-hsl), 0.35);
+ --dh-color-highlight-active: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 20%,
+ transparent
+ );
+ --dh-color-highlight-hover: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 10%,
+ transparent
+ );
+ --dh-color-highlight-invalid: color-mix(
+ in srgb,
+ var(--dh-color-visual-red) 15%,
+ transparent
+ );
+ --dh-color-highlight-selected: color-mix(
+ in srgb,
+ var(--dh-color-accent) 7%,
+ transparent
+ );
+ --dh-color-highlight-selected-hover: color-mix(
+ in srgb,
+ var(--dh-color-accent) 13%,
+ transparent
+ );
/* Keyboard selected */
- --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
+ --dh-color-keyboard-selected-bg: color-mix(
+ in srgb,
+ var(--dh-color-accent) 50%,
+ transparent
+ );
/* Shadows / Overlays */
- --dh-color-dropshadow: hsla(var(--dh-color-true-black-hsl), 0.25);
- --dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);
- --dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);
+ --dh-color-dropshadow: color-mix(
+ in srgb,
+ var(--dh-color-true-black) 25%,
+ transparent
+ );
+ --dh-color-overlay-modal-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 60%,
+ transparent
+ );
+ --dh-color-overlay-hover-bg: color-mix(
+ in srgb,
+ var(--dh-color-visual-gray) 8%,
+ transparent
+ );
/* Negative */
- --dh-color-negative-bg: hsl(var(--dh-color-negative-hsl));
+ --dh-color-negative: var(--dh-color-red-800);
+ --dh-color-negative-bg: var(--dh-color-negative);
--dh-color-negative-hover-bg: var(--dh-color-red-900);
--dh-color-negative-down-bg: var(--dh-color-red-1000);
--dh-color-negative-key-focus-bg: var(--dh-color-red-900);
- --dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));
+ --dh-color-negative-contrast: var(--dh-color-contrast-dark);
/* Neutral */
- --dh-color-neutral-bg: hsl(var(--dh-color-neutral-hsl));
+ --dh-color-neutral: var(--dh-color-gray-400);
+ --dh-color-neutral-bg: var(--dh-color-neutral);
--dh-color-neutral-hover-bg: var(--dh-color-gray-300);
--dh-color-neutral-down-bg: var(--dh-color-gray-100);
--dh-color-neutral-key-focus-bg: var(--dh-color-gray-300);
- --dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl));
+ --dh-color-neutral-contrast: var(--dh-color-contrast-light);
--dh-color-neutral-subdued-bg: var(--dh-color-gray-400);
--dh-color-neutral-subdued-hover-bg: var(--dh-color-gray-300);
@@ -177,46 +174,28 @@
--dh-color-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);
/* Positive */
- --dh-color-positive-bg: hsl(var(--dh-color-positive-hsl));
+ --dh-color-positive: var(--dh-color-green-900);
+ --dh-color-positive-bg: var(--dh-color-positive);
--dh-color-positive-hover-bg: var(--dh-color-green-800);
--dh-color-positive-down-bg: var(--dh-color-green-700);
--dh-color-positive-key-focus-bg: var(--dh-color-green-800);
- --dh-color-positive-contrast: hsl(var(--dh-color-positive-contrast-hsl));
+ --dh-color-positive-contrast: var(--dh-color-contrast-dark);
/* Informative */
- --dh-color-info-bg: hsl(var(--dh-color-info-hsl));
+ --dh-color-info: var(--dh-color-cyan-1000);
+ --dh-color-info-bg: var(--dh-color-info);
--dh-color-info-hover-bg: var(--dh-color-cyan-900);
--dh-color-info-down-bg: var(--dh-color-cyan-800);
--dh-color-info-key-focus-bg: var(--dh-color-cyan-900);
- --dh-color-info-contrast: hsl(var(--dh-color-info-contrast-hsl));
+ --dh-color-info-contrast: var(--dh-color-contrast-dark);
/* Notice */
- --dh-color-notice-bg: hsl(var(--dh-color-notice-hsl));
+ --dh-color-notice: var(--dh-color-yellow-1000);
+ --dh-color-notice-bg: var(--dh-color-notice);
--dh-color-notice-hover-bg: var(--dh-color-yellow-900);
--dh-color-notice-down-bg: var(--dh-color-yellow-800);
--dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000);
- --dh-color-notice-contrast: hsl(var(--dh-color-notice-contrast-hsl));
-
- /* Visual Colors */
- --dh-color-visual-blue: hsl(var(--dh-color-visual-blue-hsl));
- --dh-color-visual-celery: hsl(var(--dh-color-visual-celery-hsl));
- --dh-color-visual-chartreuse: hsl(var(--dh-color-visual-chartreuse-hsl));
- --dh-color-visual-cyan: hsl(var(--dh-color-visual-cyan-hsl));
- --dh-color-visual-fuchsia: hsl(var(--dh-color-visual-fuchsia-hsl));
- --dh-color-visual-gray: hsl(var(--dh-color-visual-gray-hsl));
- --dh-color-visual-green: hsl(var(--dh-color-visual-green-hsl));
- --dh-color-visual-indigo: hsl(var(--dh-color-visual-indigo-hsl));
- --dh-color-visual-magenta: hsl(var(--dh-color-visual-magenta-hsl));
- --dh-color-visual-orange: hsl(var(--dh-color-visual-orange-hsl));
- --dh-color-visual-purple: hsl(var(--dh-color-visual-purple-hsl));
- --dh-color-visual-red: hsl(var(--dh-color-visual-red-hsl));
- --dh-color-visual-seafoam: hsl(var(--dh-color-visual-seafoam-hsl));
- --dh-color-visual-yellow: hsl(var(--dh-color-visual-yellow-hsl));
-
- --dh-color-visual-positive: hsl(var(--dh-color-visual-positive-hsl));
- --dh-color-visual-negative: hsl(var(--dh-color-visual-negative-hsl));
- --dh-color-visual-notice: hsl(var(--dh-color-visual-notice-hsl));
- --dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl));
+ --dh-color-notice-contrast: var(--dh-color-contrast-dark);
/* Editing */
--dh-color-modified: var(--dh-color-green-700);
diff --git a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
index 52370d6078..1a79973b8d 100644
--- a/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
+++ b/packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
@@ -10,6 +10,7 @@
--spectrum-alias-text-color-hover: var(--dh-color-text-hover);
--spectrum-alias-text-color-disabled: var(--dh-color-text-disabled);
--spectrum-alias-border-color: var(--dh-color-border);
+ --spectrum-alias-border-color-hover: var(--dh-color-hover-border);
--spectrum-alias-border-color-focus: var(--dh-color-border-focus);
--spectrum-alias-input-border-color-key-focus: var(
--spectrum-alias-border-color-focus
diff --git a/packages/console/src/ConsoleInput.scss b/packages/console/src/ConsoleInput.scss
index e1fcd76f44..e06d878598 100644
--- a/packages/console/src/ConsoleInput.scss
+++ b/packages/console/src/ConsoleInput.scss
@@ -1,10 +1,8 @@
@import '@deephaven/components/scss/custom.scss';
-$console-input-inner-bg: $content-bg;
$console-input-min-height: 40px;
$console-input-padding: 4px;
$console-input-radius: $border-radius;
-$console-input-border-color: $input-border-color;
$console-input-focus-border-color: $input-focus-border-color;
$console-input-focus-box-shadow: $input-btn-focus-box-shadow;
$console-input-border-width: $input-border-width;
@@ -16,9 +14,12 @@ $console-input-margin-padding-top: 7px;
$console-input-margin-color: $foreground;
.console-input-wrapper {
- --console-input-bg: var(--dh-color-surface-bg);
+ --console-input-bg: var(--dh-color-input-bg);
+ --console-input-surface-bg: var(--dh-color-surface-bg);
+ --console-input-border-color: var(--dh-color-input-border);
+ --console-input-hover-border-color: var(--dh-color-input-hover-border);
- background-color: var(--console-input-bg);
+ background-color: var(--console-input-surface-bg);
padding: $console-input-padding;
min-height: $console-input-min-height;
display: flex;
@@ -42,11 +43,17 @@ $console-input-margin-color: $foreground;
.console-input-inner-wrapper {
min-width: 0;
flex-grow: 1;
- background-color: $console-input-inner-bg;
border-radius: $console-input-radius;
- border: $console-input-border-width solid $console-input-border-color;
+ border: $console-input-border-width solid var(--console-input-border-color);
+ @include transition($input-transition);
.monaco-editor {
+ // can't use as part of editor theme since that is global
+ // and we want to apply this only to this specific editor
+ /* stylelint-disable-next-line custom-property-pattern */
+ --vscode-editorGutter-background: var(--console-input-bg);
+ --vscode-editor-background: var(--console-input-bg);
+
border-radius: $console-input-radius;
.overflow-guard {
@@ -54,6 +61,11 @@ $console-input-margin-color: $foreground;
}
}
+ &:hover,
+ &.hover {
+ border-color: var(--console-input-hover-border-color);
+ }
+
&:focus,
&.focus {
border-color: $console-input-focus-border-color;
diff --git a/packages/console/src/console-history/ConsoleHistoryItem.scss b/packages/console/src/console-history/ConsoleHistoryItem.scss
index ab39207f4f..fc5db130c9 100644
--- a/packages/console/src/console-history/ConsoleHistoryItem.scss
+++ b/packages/console/src/console-history/ConsoleHistoryItem.scss
@@ -2,7 +2,6 @@
@import '@deephaven/components/scss/custom.scss';
$error-gutter-width: 15px;
-$hover-item-fade: 0.5;
$font-size: ConsoleVariables.$font-size;
$button-height: ConsoleVariables.$button-height;
$button-vert-margin: ConsoleVariables.$button-vert-margin;
@@ -59,7 +58,7 @@ $button-vert-margin: ConsoleVariables.$button-vert-margin;
text-align: left;
padding-left: 0;
padding-right: 0;
- color: hsla(var(--dh-color-negative-hsl), $hover-item-fade);
+ color: negative-opacity(50);
transition: $btn-transition;
}
@@ -91,7 +90,7 @@ $button-vert-margin: ConsoleVariables.$button-vert-margin;
outline: 0;
}
&:focus-visible {
- border: 1px solid hsla(var(--dh-color-negative-hsl), $hover-item-fade);
+ border: 1px solid negative-opacity(50);
}
}
}
diff --git a/packages/console/src/csv/CsvOverlay.scss b/packages/console/src/csv/CsvOverlay.scss
index 94a9ed8d65..a7535437fc 100644
--- a/packages/console/src/csv/CsvOverlay.scss
+++ b/packages/console/src/csv/CsvOverlay.scss
@@ -2,7 +2,7 @@
.csv-overlay {
margin: $spacer-2;
- background: hsla(var(--dh-color-content-bg-hsl), 0.7);
+ background: color-mix(in srgb, var(--dh-color-content-bg) 70%, transparent);
text-align: center;
display: flex;
flex-direction: column;
diff --git a/packages/dashboard-core-plugins/src/panels/ChartPanel.scss b/packages/dashboard-core-plugins/src/panels/ChartPanel.scss
index 6a0e01326a..6b9f522adf 100644
--- a/packages/dashboard-core-plugins/src/panels/ChartPanel.scss
+++ b/packages/dashboard-core-plugins/src/panels/ChartPanel.scss
@@ -2,7 +2,7 @@
$chart-panel-disconnected-opacity: 0.18;
$overlay-message-font-size: 1.2rem;
-$overlay-scrim-bg: hsla(var(--dh-color-black-hsl), 0.5);
+$overlay-scrim-bg: black-opacity(50);
$overlay-content-max-width: 450px;
.iris-chart-panel {
diff --git a/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss b/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss
index fa7e542a0f..7daa3dc8c0 100644
--- a/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss
+++ b/packages/dashboard-core-plugins/src/panels/MarkdownNotebook.scss
@@ -123,7 +123,7 @@ $btn-play-color: $success;
50% {
text-shadow:
- 0 0 2px hsla(var(--dh-color-true-white-hsl), 50%),
+ 0 0 2px color-mix(in srgb, var(--dh-color-true-white) 50%, transparent),
0 0 10px $success;
}
diff --git a/packages/dashboard-core-plugins/src/panels/WidgetPanel.scss b/packages/dashboard-core-plugins/src/panels/WidgetPanel.scss
index 1085ee3710..655cadcfb8 100644
--- a/packages/dashboard-core-plugins/src/panels/WidgetPanel.scss
+++ b/packages/dashboard-core-plugins/src/panels/WidgetPanel.scss
@@ -8,7 +8,7 @@
text-align: left;
display: block;
padding: 3px 5px;
- background: hsla(var(--dh-color-content-bg-hsl), 0.95);
+ background: color-mix(in srgb, var(--dh-color-content-bg) 95%, transparent);
color: $gray-300;
border-top: 1px solid $gray-500;
border-right: 1px solid $gray-500;
diff --git a/packages/golden-layout/scss/goldenlayout-dark-theme.scss b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
index 65f0ae7a80..838848b589 100644
--- a/packages/golden-layout/scss/goldenlayout-dark-theme.scss
+++ b/packages/golden-layout/scss/goldenlayout-dark-theme.scss
@@ -1,5 +1,4 @@
@import '@deephaven/components/scss/custom.scss';
-@import '@deephaven/components/scss/util.scss';
$tab-height: 28px;
$drag-border-width: 5px;
@@ -104,9 +103,7 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
border: $ant-thickness solid transparent; //offset shadow using a transparent border
box-shadow: inset 0 0 1rem 1px var(--dh-color-dropshadow);
opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid.
- background: accent-opacity(
- 10
- ); //apply scrim as hsla background now instead;
+ background: accent-opacity(10);
}
}
@@ -337,7 +334,7 @@ body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
// If a specific Pane is maximized
.lm_maximised {
- border: 15px solid background-opacity(80);
+ border: 15px solid bg-opacity(80);
height: 100% !important;
width: 100% !important;
.lm_items {
diff --git a/packages/iris-grid/src/IrisGrid.scss b/packages/iris-grid/src/IrisGrid.scss
index d03356fe46..e978240b5f 100644
--- a/packages/iris-grid/src/IrisGrid.scss
+++ b/packages/iris-grid/src/IrisGrid.scss
@@ -14,11 +14,11 @@ $iris-grid-bar-max-height: 250px;
$iris-grid-bar-max-width: $table-sidebar-max-width;
$transition-iris-grid-bar-flash: 1s;
$cell-box-shadow:
- 0 0 0 2px var(--dh-color-visual-blue),
- 0 0 0 5px hsla(var(--dh-color-visual-blue-hsl), 0.25);
+ 0 0 0 2px var(--dh-color-accent),
+ 0 0 0 5px accent-opacity(25);
$cell-invalid-box-shadow:
- 0 0 0 2px var(--dh-color-visual-negative),
- 0 0 0 5px hsla(var(--dh-color-negative-hsl), 0.25);
+ 0 0 0 2px var(--dh-color-negative),
+ 0 0 0 5px negative-opacity(25);
.iris-grid {
--table-sidebar-bg: var(--dh-color-surface-bg);
diff --git a/packages/iris-grid/src/IrisGrid.tsx b/packages/iris-grid/src/IrisGrid.tsx
index 87ddab5bc0..7ce3dc9cee 100644
--- a/packages/iris-grid/src/IrisGrid.tsx
+++ b/packages/iris-grid/src/IrisGrid.tsx
@@ -1368,24 +1368,23 @@ export class IrisGrid extends Component {
getCachedTheme = memoize(
(
- contextTheme: Partial | null,
- theme: Partial | null,
+ contextTheme: IrisGridThemeType | null,
+ theme: Partial | null,
isEditable: boolean,
floatingRowCount: number
- ): Partial => {
- const defaultTheme = createDefaultIrisGridTheme();
+ ): IrisGridThemeType => {
+ // If a theme is available via context, use that as the base theme.
+ // If iris-grid is standalone without a context, initialize a default theme.
+ const defaultTheme = contextTheme ?? createDefaultIrisGridTheme();
// We only show the row footers when we have floating rows for aggregations
const rowFooterWidth =
floatingRowCount > 0
- ? theme?.rowFooterWidth ??
- contextTheme?.rowFooterWidth ??
- defaultTheme.rowFooterWidth
+ ? theme?.rowFooterWidth ?? defaultTheme.rowFooterWidth
: 0;
return {
...defaultTheme,
- ...contextTheme,
...theme,
autoSelectRow: !isEditable,
rowFooterWidth,
diff --git a/packages/iris-grid/src/IrisGridTheme.ts b/packages/iris-grid/src/IrisGridTheme.ts
index 967ba86022..58aa2a3f11 100644
--- a/packages/iris-grid/src/IrisGridTheme.ts
+++ b/packages/iris-grid/src/IrisGridTheme.ts
@@ -1,7 +1,12 @@
-import { resolveCssVariablesInRecord } from '@deephaven/components';
+import {
+ getExpressionRanges,
+ resolveCssVariablesInRecord,
+} from '@deephaven/components';
import type { GridThemeType } from '@deephaven/grid';
+import { GridTheme } from '@deephaven/grid';
import Log from '@deephaven/log';
import { GridColor, NullableGridColor } from '@deephaven/grid/src/GridTheme';
+import { ColorUtils } from '@deephaven/utils';
import IrisGridThemeRaw from './IrisGridTheme.module.scss';
const log = Log.module('IrisGridTheme');
@@ -49,12 +54,26 @@ export type IrisGridThemeType = GridThemeType & {
* that the returned theme is statically defined and does not change when CSS
* variables change.
*/
-export function createDefaultIrisGridTheme(): Partial {
+export function createDefaultIrisGridTheme(): IrisGridThemeType {
const IrisGridTheme = resolveCssVariablesInRecord(IrisGridThemeRaw);
+
+ // row-background-colors is a space-separated list of colors, so we need to
+ // normalize each color expression in the list individually
+ IrisGridTheme['row-background-colors'] = getExpressionRanges(
+ IrisGridTheme['row-background-colors'] ?? ''
+ )
+ .map(([start, end]) =>
+ ColorUtils.normalizeCssColor(
+ IrisGridTheme['row-background-colors'].substring(start, end + 1)
+ )
+ )
+ .join(' ');
+
log.debug2('Iris grid theme:', IrisGridThemeRaw);
log.debug2('Iris grid theme derived:', IrisGridTheme);
return Object.freeze({
+ ...GridTheme,
backgroundColor: IrisGridTheme['grid-bg'],
white: IrisGridTheme.white,
black: IrisGridTheme.black,
diff --git a/packages/iris-grid/src/IrisGridThemeProvider.tsx b/packages/iris-grid/src/IrisGridThemeProvider.tsx
index d5e5d177c2..90d42666c7 100644
--- a/packages/iris-grid/src/IrisGridThemeProvider.tsx
+++ b/packages/iris-grid/src/IrisGridThemeProvider.tsx
@@ -2,7 +2,12 @@ import { useTheme } from '@deephaven/components';
import { createContext, ReactNode, useMemo } from 'react';
import { createDefaultIrisGridTheme, IrisGridThemeType } from './IrisGridTheme';
-export type IrisGridThemeContextValue = Partial;
+/**
+ * The context value for the IrisGridThemeProvider.
+ * This must be a full object and not a partial so that we
+ * can createDefaultIrisGridTheme once, and not per grid.
+ */
+export type IrisGridThemeContextValue = IrisGridThemeType;
export const IrisGridThemeContext =
createContext(null);
diff --git a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
index d14066fdff..494a354bfa 100644
--- a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
+++ b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap
@@ -2,15 +2,23 @@
exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`] = `
{
+ "allowColumnReorder": true,
+ "allowColumnResize": true,
+ "allowRowReorder": true,
"allowRowResize": false,
+ "autoSelectColumn": false,
"autoSelectRow": true,
+ "autoSizeColumns": true,
+ "autoSizeRows": true,
"backgroundColor": "IrisGridTheme['grid-bg']",
"black": "IrisGridTheme['black']",
+ "cellHorizontalPadding": 5,
"columnHeaderHeight": 30,
"columnHoverBackgroundColor": null,
"columnWidth": 100,
"contextMenuReverseIconColor": "IrisGridTheme['context-menu-reverse-icon-color']",
"contextMenuSortIconColor": "IrisGridTheme['context-menu-sort-icon-color']",
+ "dataBarHorizontalPadding": 90,
"dateColor": "IrisGridTheme['date-color']",
"errorTextColor": "IrisGridTheme['error-text-color']",
"filterBarActiveBackgroundColor": "IrisGridTheme['filter-bar-active-bg']",
@@ -38,15 +46,23 @@ exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`
"headerColor": "IrisGridTheme['header-color']",
"headerFont": "IrisGridTheme['header-font']",
"headerHiddenSeparatorHoverColor": "IrisGridTheme['header-hidden-separator-hover-color']",
+ "headerHiddenSeparatorSize": 5,
"headerHorizontalPadding": 12,
+ "headerResizeHiddenSnapThreshold": 8,
+ "headerResizeSnapThreshold": 10,
"headerReverseBarColor": "IrisGridTheme['header-reverse-bar-color']",
"headerSeparatorColor": "IrisGridTheme['header-separator-color']",
+ "headerSeparatorHandleSize": 5,
"headerSeparatorHoverColor": "IrisGridTheme['header-separator-hover-color']",
"headerSortBarColor": "IrisGridTheme['header-sort-bar-color']",
"hyperlinkColor": "IrisGridTheme['hyperlink-color']",
"linkerColumnHoverBackgroundColor": "IrisGridTheme['linker-column-hover-bg']",
"markerBarColor": "IrisGridTheme['marker-bar-color']",
+ "maxColumnWidth": 600,
+ "maxDepth": 6,
"maxScrimTransitionTime": 350,
+ "minColumnWidth": 55,
+ "minRowHeight": 20,
"minScrimTransitionTime": 150,
"minScrollHandleSize": 24,
"negativeBarColor": "IrisGridTheme['negative-bar-color']",
@@ -57,6 +73,7 @@ exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`
"pendingTextColor": "IrisGridTheme['pending-text-color']",
"positiveBarColor": "IrisGridTheme['positive-bar-color']",
"positiveNumberColor": "IrisGridTheme['positive-number-color']",
+ "reorderOffset": 2,
"reverseHeaderBarHeight": 4,
"rowBackgroundColors": "IrisGridTheme['row-background-colors']",
"rowFooterWidth": 60,
@@ -69,21 +86,29 @@ exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1`
"scrollBarActiveSelectionTickColor": "IrisGridTheme['scroll-bar-active-selection-tick-color']",
"scrollBarBackgroundColor": "IrisGridTheme['scroll-bar-bg']",
"scrollBarCasingColor": "IrisGridTheme['scroll-bar-casing-color']",
+ "scrollBarCasingWidth": 1,
"scrollBarColor": "IrisGridTheme['scroll-bar-color']",
"scrollBarCornerColor": "IrisGridTheme['scroll-bar-corner-color']",
"scrollBarHoverBackgroundColor": "IrisGridTheme['scroll-bar-hover-bg']",
"scrollBarHoverColor": "IrisGridTheme['scroll-bar-hover-color']",
"scrollBarHoverSize": 16,
+ "scrollBarSelectionTick": true,
"scrollBarSelectionTickColor": "IrisGridTheme['selected-row-hover-bg']",
"scrollBarSize": 13,
+ "scrollSnapToColumn": false,
"scrollSnapToRow": true,
+ "selectedColumnHoverBackgroundColor": "#494949",
"selectedRowHoverBackgroundColor": "IrisGridTheme['selected-row-hover-bg']",
"selectionColor": "IrisGridTheme['selection-color']",
"selectionOutlineCasingColor": "IrisGridTheme['selection-outline-casing-color']",
"selectionOutlineColor": "IrisGridTheme['selection-outline-color']",
"shadowAlpha": 0.15,
+ "shadowBlur": 8,
+ "shadowColor": "#000000",
"sortHeaderBarHeight": 2,
"textColor": "IrisGridTheme['text-color']",
+ "treeDepthIndent": 10,
+ "treeHorizontalPadding": 5,
"treeLineColor": "IrisGridTheme['tree-line-color']",
"treeMarkerColor": "IrisGridTheme['tree-marker-color']",
"treeMarkerHoverColor": "IrisGridTheme['tree-marker-hover-color']",
diff --git a/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss b/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss
index 35ec2066bc..7eb36e0259 100644
--- a/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss
+++ b/packages/iris-grid/src/sidebar/CustomColumnBuilder.scss
@@ -46,7 +46,11 @@ $background: var(--dh-surface-bg);
.error-box {
padding: $spacer-1;
border-radius: $border-radius;
- background: hsla(var(--dh-color-negative-hsl), $exception-transparency);
+ background: color-mix(
+ in srgb,
+ var(--dh-color-negative) $exception-transparency,
+ transparent
+ );
}
}
diff --git a/packages/iris-grid/src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss b/packages/iris-grid/src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss
index 0894120022..4f75a50f82 100644
--- a/packages/iris-grid/src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss
+++ b/packages/iris-grid/src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss
@@ -58,7 +58,7 @@ $depth-margin: calc(
.item-count {
padding: 0 $spacer-2;
border-radius: 1rem;
- background-color: hsla(var(--dh-color-fg-hsl), 0.25);
+ background-color: fg-opacity(25);
margin-right: $spacer-1;
}
}
diff --git a/packages/utils/src/ColorUtils.test.ts b/packages/utils/src/ColorUtils.test.ts
index 5cc3166e82..4242dfb937 100644
--- a/packages/utils/src/ColorUtils.test.ts
+++ b/packages/utils/src/ColorUtils.test.ts
@@ -15,6 +15,7 @@ const mockDivEl = createMockProxy({
setBackgroundColor(value);
},
} as HTMLDivElement['style'],
+ remove: jest.fn(),
});
const colorMap = [
@@ -78,25 +79,54 @@ beforeEach(() => {
});
describe('asRgbOrRgbaString', () => {
- beforeEach(() => {
- jest
- .spyOn(document, 'createElement')
- .mockName('createElement')
- .mockReturnValue(mockDivEl);
- });
+ it.each([
+ ['rgb(0, 128, 255)'],
+ ['rgb(0,128,255)'],
+ ['rgba(0, 128, 255, 0.1)'],
+ ['rgba(0, 128, 255, 1)'],
+ ['color(srgb 1, 1, 1 / 1)'],
+ ['color(srgb 0,0,0 / 0)'],
+ ['color(srgb 0, 0.2, 0.2 / 0.2)'],
+ ['color(srgb 0,0,0)'],
+ ['color(srgb 0 0.2 0.2)'],
+ ])(
+ 'should return the color string if it is already in the expected format: %s',
+ colorString => {
+ const result = ColorUtils.asRgbOrRgbaString(colorString);
+ expect(result).toEqual(colorString);
+ }
+ );
- it('should return resolved backgroundColor value', () => {
- getBackgroundColor.mockReturnValue('get backgroundColor');
+ it('should return the resolved color string if it is not in the expected format', () => {
+ const colorString = 'red';
+ const resolvedColor = 'rgb(255, 0, 0)';
- const actual = ColorUtils.asRgbOrRgbaString('red');
- expect(actual).toEqual('get backgroundColor');
+ jest.spyOn(document, 'createElement').mockReturnValue(mockDivEl);
+ jest.spyOn(document.body, 'appendChild').mockReturnValue(mockDivEl);
+ jest.spyOn(window, 'getComputedStyle').mockReturnValue({
+ getPropertyValue: jest.fn().mockReturnValue(resolvedColor),
+ } as unknown as CSSStyleDeclaration);
+
+ const result = ColorUtils.asRgbOrRgbaString(colorString);
+ expect(result).toEqual(resolvedColor);
+ expect(document.createElement).toHaveBeenCalledWith('div');
+ expect(window.getComputedStyle).toHaveBeenCalledWith(mockDivEl);
+ expect(mockDivEl.remove).toHaveBeenCalled();
});
- it('should return null if backgroundColor resolves to empty string', () => {
- getBackgroundColor.mockReturnValue('');
+ it('should return null if the resolved color string is null', () => {
+ const colorString = 'red';
+ jest.spyOn(document, 'createElement').mockReturnValue(mockDivEl);
+ jest.spyOn(document.body, 'appendChild').mockReturnValue(mockDivEl);
+ jest.spyOn(window, 'getComputedStyle').mockReturnValue({
+ getPropertyValue: jest.fn().mockReturnValue(null),
+ } as unknown as CSSStyleDeclaration);
- const actual = ColorUtils.asRgbOrRgbaString('red');
- expect(actual).toBeNull();
+ const result = ColorUtils.asRgbOrRgbaString(colorString);
+ expect(result).toBeNull();
+ expect(document.createElement).toHaveBeenCalledWith('div');
+ expect(window.getComputedStyle).toHaveBeenCalledWith(mockDivEl);
+ expect(mockDivEl.remove).toHaveBeenCalled();
});
});
@@ -128,18 +158,23 @@ describe('normalizeCssColor', () => {
.spyOn(document, 'createElement')
.mockName('createElement')
.mockReturnValue(mockDivEl);
+ jest.spyOn(document.body, 'appendChild').mockReturnValue(mockDivEl);
});
it.each([
'rgb(0, 128, 255)',
- 'rgba(0, 128, 255, 64)',
+ 'rgba(0, 128, 255, 255)',
'rgb(0 128 255)',
- 'rgba(0 128 255 64)',
+ 'rgba(0 128 255 0.1)',
])(
'should normalize a resolved rgb/a color to 8 character hex value',
rgbOrRgbaColor => {
getBackgroundColor.mockReturnValue(rgbOrRgbaColor);
+ jest.spyOn(window, 'getComputedStyle').mockReturnValue({
+ getPropertyValue: jest.fn().mockReturnValue(rgbOrRgbaColor),
+ } as unknown as CSSStyleDeclaration);
+
const actual = ColorUtils.normalizeCssColor('some.color');
expect(actual).toEqual(
ColorUtils.rgbaToHex8(ColorUtils.parseRgba(rgbOrRgbaColor)!)
@@ -147,16 +182,24 @@ describe('normalizeCssColor', () => {
}
);
- it('should return original color if backgroundColor resolves to empty string', () => {
+ it('should return original color if Color resolves to empty string', () => {
getBackgroundColor.mockReturnValue('');
+ jest.spyOn(window, 'getComputedStyle').mockReturnValue({
+ getPropertyValue: jest.fn().mockReturnValue(''),
+ } as unknown as CSSStyleDeclaration);
+
const actual = ColorUtils.normalizeCssColor('red');
expect(actual).toEqual('red');
});
- it('should return original color if backgroundColor resolves to non rgb/a', () => {
+ it('should return original color if Color resolves to non rgb/a', () => {
getBackgroundColor.mockReturnValue('xxx');
+ jest.spyOn(window, 'getComputedStyle').mockReturnValue({
+ getPropertyValue: jest.fn().mockReturnValue('xxx'),
+ } as unknown as CSSStyleDeclaration);
+
const actual = ColorUtils.normalizeCssColor('red');
expect(actual).toEqual('red');
});
@@ -176,6 +219,7 @@ describe('parseRgba', () => {
it.each([
['rgba(255, 255, 255, 1)', { r: 255, g: 255, b: 255, a: 1 }],
+ ['rgba(255, 255, 255, 255)', { r: 255, g: 255, b: 255, a: 1 }],
['rgba(0,0,0,0)', { r: 0, g: 0, b: 0, a: 0 }],
['rgba(255 255 255 1)', { r: 255, g: 255, b: 255, a: 1 }],
['rgba(0 0 0 0)', { r: 0, g: 0, b: 0, a: 0 }],
@@ -184,6 +228,17 @@ describe('parseRgba', () => {
expect(ColorUtils.parseRgba(rgba)).toEqual(hex);
});
+ it.each([
+ ['color(srgb 1 1 1 1)', { r: 255, g: 255, b: 255, a: 1 }],
+ ['color(srgb 1, 1, 1, 1)', { r: 255, g: 255, b: 255, a: 1 }],
+ ['color(srgb 1, 1, 1 / 1)', { r: 255, g: 255, b: 255, a: 1 }],
+ ['color(srgb 0,0,0 / 0)', { r: 0, g: 0, b: 0, a: 0 }],
+ ['color(srgb 0 0 0 / 0)', { r: 0, g: 0, b: 0, a: 0 }],
+ ['color(srgb 0 0.2 0.2 / 0.2)', { r: 0, g: 51, b: 51, a: 0.2 }],
+ ])('should parse rgba: %s, %s', (rgba, hex) => {
+ expect(ColorUtils.parseRgba(rgba)).toEqual(hex);
+ });
+
it('should return null if not rgb or rgba', () => {
expect(ColorUtils.parseRgba('xxx')).toBeNull();
});
diff --git a/packages/utils/src/ColorUtils.ts b/packages/utils/src/ColorUtils.ts
index 44762c2628..de579d28e6 100644
--- a/packages/utils/src/ColorUtils.ts
+++ b/packages/utils/src/ColorUtils.ts
@@ -1,18 +1,29 @@
class ColorUtils {
/**
+ * THIS HAS POOR PERFORMANCE DUE TO DOM MANIPULATION
* Attempt to get the rgb or rgba string for a color string. If the color string
* can't be resolved to a valid color, null is returned.
* @param colorString The color string to resolve
*/
static asRgbOrRgbaString(colorString: string): string | null {
+ if (
+ // Since dom manipulation is expensive, we want to avoid it if possible.
+ /^rgb/.test(colorString) ||
+ /^rgba/.test(colorString) ||
+ /^color\(srgb/.test(colorString)
+ ) {
+ return colorString;
+ }
+
const divEl = document.createElement('div');
+ divEl.style.display = 'none';
divEl.style.backgroundColor = colorString;
+ const color = window
+ .getComputedStyle(document.body.appendChild(divEl))
+ .getPropertyValue('background-color');
+ divEl.remove();
- if (divEl.style.backgroundColor === '') {
- return null;
- }
-
- return divEl.style.backgroundColor;
+ return color || null;
}
/**
@@ -25,9 +36,11 @@ class ColorUtils {
static isDark(background: string): boolean {
const d = document.createElement('div');
d.style.display = 'none';
- d.style.color = background;
+ d.style.backgroundColor = background;
- const computedColor = getComputedStyle(document.body.appendChild(d)).color;
+ const computedColor = getComputedStyle(
+ document.body.appendChild(d)
+ ).backgroundColor;
const colorTokens = computedColor.match(/\d+/g);
let color: number[] = [];
@@ -50,9 +63,10 @@ class ColorUtils {
}
/**
+ * THIS HAS POOR PERFORMANCE DUE TO DOM MANIPULATION
* Normalize a css color to 8 character hex value (or 6 character hex if
* isAlphaOptional is true and alpha is 'ff'). If the color can't be resolved,
- * return the original color string.
+ * return the original string.
* @param colorString The color string to normalize
* @param isAlphaOptional If true, the alpha value will be dropped if it is 'ff'.
* Defaults to false.
@@ -72,7 +86,6 @@ class ColorUtils {
}
const hex8 = ColorUtils.rgbaToHex8(rgba);
-
if (isAlphaOptional === true) {
return hex8.replace(/^(#[a-f0-9]{6})ff$/, '$1');
}
@@ -89,30 +102,42 @@ class ColorUtils {
*
* e.g. `rgb(255, 255, 255)` -> `{ r: 255, g: 255, b: 255, a: 1 }`
* e.g. `rgba(255, 255, 255, 0.5)` -> `{ r: 255, g: 255, b: 255, a: 0.5 }`
+ * e.g. `color(srgb 1 1 0 / 0.25)` -> `{ r: 255, g: 255, b: 0, a: 0.25 }`
* @param rgbOrRgbaString The rgb or rgba string to parse
*/
static parseRgba(
rgbOrRgbaString: string
): { r: number; g: number; b: number; a: number } | null {
- const [, name, args] = /^(rgba?)\((.*?)\)$/.exec(rgbOrRgbaString) ?? [];
- if (name == null) {
- return null;
- }
+ // if color(srgb) format, we handle that differently
- // Split on spaces, commas, and slashes. Note that this more permissive than
- // the CSS spec in that slashes should only be used to delimit the alpha value
- // (e.g. r g b / a), but this would match r/g/b/a. It also would match a mixed
- // delimiter case (e.g. r,g b,a). This seems like a reasonable tradeoff for the
- // complexity that would be added to enforce the full spec.
- const tokens = args.split(/[ ,/]/).filter(Boolean);
+ const [r, g, b, a] =
+ rgbOrRgbaString.match(
+ // loose with the regex to allow for different formats between browsers
+ // take the first 4 digits that look like numbers, including decimals
+ // We've already checked it's a valid color with CSS.supports
+ /(?:\b\d+\.\d*|\b\d+|\.\d+)/g
+ ) ?? [];
- if (tokens.length < 3) {
+ if (r == null || g == null || b == null) {
return null;
}
- const [r, g, b, a = 1] = tokens.map(Number);
+ if (rgbOrRgbaString.startsWith('color(srgb')) {
+ return {
+ r: Math.round(Number(r) * 255),
+ g: Math.round(Number(g) * 255),
+ b: Math.round(Number(b) * 255),
+ a: Number(a ?? 1),
+ };
+ }
- return { r, g, b, a };
+ // return 1 for any alpha value greater than 1
+ return {
+ r: Number(r),
+ g: Number(g),
+ b: Number(b),
+ a: Math.min(Number(a ?? 1), 1),
+ };
}
/**
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png
index 2f74a0a57c..79016a2162 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-chromium-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png
index 8d10c33d45..4f0d3dc94b 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-firefox-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png
index 5a5a92385c..899365a327 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-1-webkit-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png
index f7a6197206..1eb187d857 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-chromium-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png
index 38edb8ad50..f9c99110ba 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-firefox-linux.png differ
diff --git a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png
index 84f5e9ee40..1622efa3e6 100644
Binary files a/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png and b/tests/golden-layout.spec.ts-snapshots/tests-golden-layout-operations-golden-layout-can-use-additional-tabs-menu-2-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png
index ca68e2c44b..78ffbd5c6d 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png
index e2f82a8b4b..ce0c2c1f3b 100644
Binary files a/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png
index e4ff7e86f2..e2da12f941 100644
Binary files a/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png
index b4032d41f6..a925e16f43 100644
Binary files a/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png differ