[ui] High contrast themes

js_modules/dagster-ui/packages/ui-components/.storybook/preview.js

@@ -85,6 +85,8 @@ export const decorators = [
     themes: {
       light: 'themeLight',
       dark: 'themeDark',
+      lightHighContrast: 'themeLightHighContrast',
+      darkHighContrast: 'themeDarkHighContrast',
       system: 'themeSystem',
     },
     defaultTheme: 'system',

js_modules/dagster-ui/packages/ui-components/src/theme/GlobalThemeStyle.tsx

@@ -1,6 +1,8 @@
 import {createGlobalStyle} from 'styled-components';
 
+import {darkHighContrastThemeColors} from './darkHighContrastThemeColors';
 import {darkThemeColors} from './darkThemeColors';
+import {lightHighContrastThemeColors} from './lightHighContrastThemeColors';
 import {lightThemeColors} from './lightThemeColors';
 import {CoreColorStyles} from '../palettes/CoreColorStyles';
 import {DataVizColorStyles} from '../palettes/DataVizColorStyles';
@@ -23,9 +25,17 @@ const ThemeRoot = createGlobalStyle`
     ${lightThemeColors}
   }
 
+  .themeLightHighContrast {
+   ${lightHighContrastThemeColors}
+  }
+
   .themeDark {
     ${darkThemeColors}
   }
+
+  .themeDarkHighContrast {
+    ${darkHighContrastThemeColors}
+  }
 `;
 
 export const GlobalThemeStyle = () => {

js_modules/dagster-ui/packages/ui-components/src/theme/darkHighContrastThemeColors.tsx

@@ -0,0 +1,125 @@
+import {css} from 'styled-components';
+
+export const darkHighContrastThemeColors = css`
+  --browser-color-scheme: dark;
+  --color-keyline-default: var(--color-translucent-gray15);
+  --color-link-default: var(--color-core-blue200);
+  --color-link-hover: var(--color-core-blue400);
+  --color-link-disabled: var(--color-core-gray750);
+  --color-text-default: var(--color-core-white);
+  --color-text-light: var(--color-core-gray300);
+  --color-text-lighter: var(--color-core-gray500);
+  --color-text-disabled: var(--color-core-gray600);
+  --color-text-red: var(--color-core-red2white00);
+  --color-text-yellow: var(--color-core-white);
+  --color-text-green: var(--color-core-white);
+  --color-text-blue: var(--color-core-white);
+  --color-text-olive: var(--color-core-white);
+  --color-text-cyan: var(--color-core-white);
+  --color-text-lime: var(--color-core-white);
+  --color-background-default: var(--color-core-gray990);
+  --color-background-default-hover: var(--color-core-gray950);
+  --color-background-light: var(--color-core-gray950);
+  --color-background-light-hover: var(--color-core-gray900);
+  --color-background-lighter: var(--color-core-gray850);
+  --color-background-lighter-hover: var(--color-core-gray800);
+  --color-background-disabled: var(--color-core-gray800);
+  --color-background-red: var(--color-translucent-lime15);
+  --color-background-red-hover: var(--color-translucent-lime20);
+  --color-background-yellow: var(--color-translucent-cyan15);
+  --color-background-yellow-hover: var(--color-translucent-cyan20);
+  --color-background-green: var(--color-translucent-blue15);
+  --color-background-green-hover: var(--color-translucent-blue20);
+  --color-background-blue: var(--color-translucent-gray20);
+  --color-background-blue-hover: var(--color-translucent-gray25);
+  --color-background-olive: var(--color-translucent-olive15);
+  --color-background-oliver-hover: var(--color-translucent-olive20);
+  --color-background-cyan: var(--color-translucent-cyan15);
+  --color-background-cyan-hover: var(--color-translucent-cyan20);
+  --color-background-lime: var(--color-translucent-lime15);
+  --color-background-lime-hover: var(--color-translucent-lime20);
+  --color-background-gray: var(--color-translucent-gray15);
+  --color-background-gray-hover: var(--color-translucent-gray20);
+  --color-border-default: var(--color-core-gray800);
+  --color-border-hover: var(--color-core-gray700);
+  --color-border-disabled: var(--color-core-gray600);
+  --color-focus-ring: var(--color-core-white);
+  --color-accent-primary: var(--color-core-gray150);
+  --color-accent-primary-hover: var(--color-core-gray50);
+  --color-accent-reversed: var(--color-core-gray950);
+  --color-accent-reversed-hover: var(--color-core-gray800);
+  --color-accent-red: var(--color-core-lime500);
+  --color-accent-red-hover: var(--color-core-lime600);
+  --color-accent-yellow: var(--color-core-cyan500);
+  --color-accent-yellow-hover: var(--color-core-cyan600);
+  --color-accent-green: var(--color-core-blue400);
+  --color-accent-green-hover: var(--color-core-blue500);
+  --color-accent-blue: var(--color-core-gray600);
+  --color-accent-blue-hover: var(--color-core-gray500);
+  --color-accent-cyan: var(--color-core-cyan500);
+  --color-accent-cyan-hover: var(--color-core-cyan600);
+  --color-accent-lime: var(--color-core-lime500);
+  --color-accent-lime-hover: var(--color-core-lime600);
+  --color-accent-lavender: var(--color-core-blue800);
+  --color-accent-lavender-hover: var(--color-core-blue700);
+  --color-accent-olive: var(--color-core-olive500);
+  --color-accent-olive-hover: var(--color-core-olive600);
+  --color-accent-gray: var(--color-core-gray500);
+  --color-accent-gray-hover: var(--color-core-gray600);
+  --color-accent-white: var(--color-core-gray150);
+  --color-always-white: var(--color-core-white);
+  --color-dialog-background: var(--color-translucent-gray90);
+  --color-tooltip-background: var(--color-core-gray850);
+  --color-tooltip-text: var(--color-core-white);
+  --color-popover-background: var(--color-core-gray900);
+  --color-popover-background-hover: var(--color-core-gray850);
+  --color-shadow-default: var(--color-translucent-gray90);
+  --color-nav-background: var(--color-core-gray990);
+  --color-nav-text: var(--color-core-gray400);
+  --color-nav-text-hover: var(--color-core-gray300);
+  --color-nav-text-selected: var(--color-core-white);
+  --color-nav-button: var(--color-core-gray900);
+  --color-nav-button-hover: var(--color-core-gray850);
+  --color-lineage-edge: var(--color-core-gray850);
+  --color-lineage-edge-highlighted: var(--color-core-gray500);
+  --color-lineage-group-node-background: var(--color-core-gray900);
+  --color-lineage-group-node-background-hover: var(--color-core-gray850);
+  --color-lineage-group-node-border: var(--color-core-gray700);
+  --color-lineage-group-node-border-hover: var(--color-core-gray400);
+  --color-lineage-group-background: var(--color-translucent-dark-wash);
+  --color-lineage-node-background: var(--color-core-gray850);
+  --color-lineage-node-background-hover: var(--color-core-gray800);
+  --color-lineage-node-border: var(--color-core-gray700);
+  --color-lineage-node-border-hover: var(--color-core-gray400);
+  --color-lineage-node-border-selected: var(--color-core-white);
+  --color-data-viz-blue: var(--color-dataviz-blue200);
+  --color-data-viz-blue-alt: var(--color-dataviz-blue100);
+  --color-data-viz-blurple: var(--color-dataviz-blurple200);
+  --color-data-viz-blurple-alt: var(--color-dataviz-blurple100);
+  --color-data-viz-brown: var(--color-dataviz-brown200);
+  --color-data-viz-brown-alt: var(--color-dataviz-brown100);
+  --color-data-viz-cyan: var(--color-dataviz-cyan200);
+  --color-data-viz-cyan-alt: var(--color-dataviz-cyan100);
+  --color-data-viz-gray: var(--color-dataviz-gray200);
+  --color-data-viz-gray-alt: var(--color-dataviz-gray100);
+  --color-data-viz-green: var(--color-dataviz-green200);
+  --color-data-viz-green-alt: var(--color-dataviz-green100);
+  --color-data-viz-lime: var(--color-dataviz-lime200);
+  --color-data-viz-lime-alt: var(--color-dataviz-lime100);
+  --color-data-viz-orange: var(--color-dataviz-orange200);
+  --color-data-viz-orange-alt: var(--color-dataviz-orange100);
+  --color-data-viz-pink: var(--color-dataviz-pink200);
+  --color-data-viz-pink-alt: var(--color-dataviz-pink100);
+  --color-data-viz-red: var(--color-dataviz-red200);
+  --color-data-viz-red-alt: var(--color-dataviz-red100);
+  --color-data-viz-teal: var(--color-dataviz-teal200);
+  --color-data-viz-teal-alt: var(--color-dataviz-teal100);
+  --color-data-viz-violet: var(--color-dataviz-violet200);
+  --color-data-viz-violet-alt: var(--color-dataviz-violet100);
+  --color-data-viz-yellow: var(--color-dataviz-yellow200);
+  --color-data-viz-yellow-alt: var(--color-dataviz-yellow100);
+  --color-blue-gradient: linear-gradient(
+    var(--color-core-gray950),
+    var(--color-translucent-blue15) 100%
+  );
+`;

js_modules/dagster-ui/packages/ui-components/src/theme/lightHighContrastThemeColors.tsx

@@ -0,0 +1,125 @@
+import {css} from 'styled-components';
+
+export const lightHighContrastThemeColors = css`
+  --browser-color-scheme: 'light';
+  --color-keyline-default: var(--color-translucent-gray30);
+  --color-link-default: var(--color-core-blue700);
+  --color-link-hover: var(--color-core-blue500);
+  --color-link-disabled: var(--color-core-gray150);
+  --color-text-default: var(--color-core-gray990);
+  --color-text-light: var(--color-core-gray700);
+  --color-text-lighter: var(--color-core-gray500);
+  --color-text-disabled: var(--color-core-gray400);
+  --color-text-red: var(--color-core-gray990);
+  --color-text-yellow: var(--color-core-gray990);
+  --color-text-green: var(--color-core-gray990);
+  --color-text-blue: var(--color-core-gray990);
+  --color-text-olive: var(--color-core-gray990);
+  --color-text-cyan: var(--color-core-gray990);
+  --color-text-lime: var(--color-core-gray990);
+  --color-background-default: var(--color-core-white);
+  --color-background-default-hover: var(--color-core-gray10);
+  --color-background-light: var(--color-core-gray10);
+  --color-background-light-hover: var(--color-core-gray50);
+  --color-background-lighter: var(--color-core-gray50);
+  --color-background-lighter-hover: var(--color-core-gray100);
+  --color-background-disabled: var(--color-core-gray150);
+  --color-background-red: var(--color-translucent-yellow12);
+  --color-background-red-hover: var(--color-translucent-yellow15);
+  --color-background-yellow: var(--color-translucent-cyan12);
+  --color-background-yellow-hover: var(--color-translucent-cyan15);
+  --color-background-green: var(--color-translucent-blue12);
+  --color-background-green-hover: var(--color-translucent-blue15);
+  --color-background-blue: var(--color-translucent-blue15);
+  --color-background-blue-hover: var(--color-translucent-blue20);
+  --color-background-olive: var(--color-translucent-olive12);
+  --color-background-oliver-hover: var(--color-translucent-olive15);
+  --color-background-cyan: var(--color-translucent-cyan12);
+  --color-background-cyan-hover: var(--color-translucent-cyan15);
+  --color-background-lime: var(--color-translucent-lime12);
+  --color-background-lime-hover: var(--color-translucent-lime15);
+  --color-background-gray: var(--color-translucent-gray12);
+  --color-background-gray-hover: var(--color-translucent-gray15);
+  --color-border-default: var(--color-core-gray200);
+  --color-border-hover: var(--color-core-gray300);
+  --color-border-disabled: var(--color-core-gray500);
+  --color-focus-ring: var(--color-core-gray950);
+  --color-accent-primary: var(--color-core-gray950);
+  --color-accent-primary-hover: var(--color-core-gray800);
+  --color-accent-reversed: var(--color-core-gray10);
+  --color-accent-reversed-hover: var(--color-core-white);
+  --color-accent-red: var(--color-core-yellow500);
+  --color-accent-red-hover: var(--color-core-yellow600);
+  --color-accent-yellow: var(--color-core-cyan500);
+  --color-accent-yellow-hover: var(--color-core-cyan400);
+  --color-accent-green: var(--color-core-blue500);
+  --color-accent-green-hover: var(--color-core-blue400);
+  --color-accent-blue: var(--color-core-gray500);
+  --color-accent-blue-hover: var(--color-core-gray400);
+  --color-accent-cyan: var(--color-core-red500);
+  --color-accent-cyan-hover: var(--color-core-red400);
+  --color-accent-lime: var(--color-core-lime500);
+  --color-accent-lime-hover: var(--color-core-lime400);
+  --color-accent-lavender: var(--color-core-blue200);
+  --color-accent-lavender-hover: var(--color-core-blue100);
+  --color-accent-olive: var(--color-core-olive500);
+  --color-accent-olive-hover: var(--color-core-olive400);
+  --color-accent-gray: var(--color-core-gray500);
+  --color-accent-gray-hover: var(--color-core-gray400);
+  --color-accent-white: var(--color-core-white);
+  --color-always-white: var(--color-core-white);
+  --color-dialog-background: var(--color-translucent-gray50);
+  --color-tooltip-background: var(--color-core-gray850);
+  --color-tooltip-text: var(--color-core-white);
+  --color-popover-background: var(--color-core-white);
+  --color-popover-background-hover: var(--color-core-gray50);
+  --color-shadow-default: var(--color-translucent-gray30);
+  --color-nav-background: var(--color-core-gray990);
+  --color-nav-text: var(--color-core-gray400);
+  --color-nav-text-hover: var(--color-core-gray300);
+  --color-nav-text-selected: var(--color-core-white);
+  --color-nav-button: var(--color-core-gray900);
+  --color-nav-button-hover: var(--color-core-gray850);
+  --color-lineage-edge: var(--color-core-gray100);
+  --color-lineage-edge-highlighted: var(--color-core-gray400);
+  --color-lineage-group-node-background: var(--color-core-gray10);
+  --color-lineage-group-node-background-hover: var(--color-core-gray50);
+  --color-lineage-group-node-border: var(--color-translucent-gray25);
+  --color-lineage-group-node-border-hover: var(--color-translucent-gray25);
+  --color-lineage-group-background: var(--color-translucent-light-wash);
+  --color-lineage-node-background: var(--color-core-gray50);
+  --color-lineage-node-background-hover: var(--color-core-gray100);
+  --color-lineage-node-border: var(--color-core-gray150);
+  --color-lineage-node-border-hover: var(--color-core-gray300);
+  --color-lineage-node-border-selected: var(--color-core-gray990);
+  --color-data-viz-blue: var(--color-dataviz-blue200);
+  --color-data-viz-blue-alt: var(--color-dataviz-blue300);
+  --color-data-viz-blurple: var(--color-dataviz-blurple200);
+  --color-data-viz-blurple-alt: var(--color-dataviz-blurple300);
+  --color-data-viz-brown: var(--color-dataviz-brown200);
+  --color-data-viz-brown-alt: var(--color-dataviz-brown300);
+  --color-data-viz-cyan: var(--color-dataviz-cyan200);
+  --color-data-viz-cyan-alt: var(--color-dataviz-cyan300);
+  --color-data-viz-gray: var(--color-dataviz-gray200);
+  --color-data-viz-gray-alt: var(--color-dataviz-gray300);
+  --color-data-viz-green: var(--color-dataviz-green200);
+  --color-data-viz-green-alt: var(--color-dataviz-green300);
+  --color-data-viz-lime: var(--color-dataviz-lime200);
+  --color-data-viz-lime-alt: var(--color-dataviz-lime300);
+  --color-data-viz-orange: var(--color-dataviz-orange200);
+  --color-data-viz-orange-alt: var(--color-dataviz-orange300);
+  --color-data-viz-pink: var(--color-dataviz-pink200);
+  --color-data-viz-pink-alt: var(--color-dataviz-pink300);
+  --color-data-viz-red: var(--color-dataviz-red200);
+  --color-data-viz-red-alt: var(--color-dataviz-red300);
+  --color-data-viz-teal: var(--color-dataviz-teal200);
+  --color-data-viz-teal-alt: var(--color-dataviz-teal300);
+  --color-data-viz-violet: var(--color-dataviz-violet200);
+  --color-data-viz-violet-alt: var(--color-dataviz-violet300);
+  --color-data-viz-yellow: var(--color-dataviz-yellow200);
+  --color-data-viz-yellow-alt: var(--color-dataviz-yellow300);
+  --color-blue-gradient: linear-gradient(
+    var(--color-core-gray10),
+    var(--color-translucent-blue10) 100%
+  );
+`;

js_modules/dagster-ui/packages/ui-components/src/theme/theme.tsx

@@ -2,12 +2,16 @@ export enum DagsterTheme {
   Light = 'Light',
   Dark = 'Dark',
   System = 'System',
+  LightHighContrast = 'LightHighContrast',
+  DarkHighContrast = 'DarkHighContrast',
 }
 
 export const themeToClassName = {
+  [DagsterTheme.System]: 'themeSystem',
   [DagsterTheme.Light]: 'themeLight',
   [DagsterTheme.Dark]: 'themeDark',
-  [DagsterTheme.System]: 'themeSystem',
+  [DagsterTheme.LightHighContrast]: 'themeLightHighContrast',
+  [DagsterTheme.DarkHighContrast]: 'themeDarkHighContrast',
 };
 
 export const DAGSTER_THEME_KEY = 'dagster-theme';

js_modules/dagster-ui/packages/ui-core/.storybook/preview.js

@@ -80,6 +80,8 @@ export const decorators = [
     themes: {
       light: 'themeLight',
       dark: 'themeDark',
+      lightHighContrast: 'themeLightHighContrast',
+      darkHighContrast: 'themeDarkHighContrast',
       system: 'themeSystem',
     },
     defaultTheme: 'system',

js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx

@@ -83,7 +83,7 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 export const GlobalStyleProvider = () => {
-  const theme = useThemeState();
+  const {theme} = useThemeState();
 
   // Given a theme setting, apply the appropriate class name to the body to set the
   // desired CSS var values. When the theme changes, the class name is updated.

js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog/UserPreferences.oss.tsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Button,
-  Checkbox,
-  DAGSTER_THEME_KEY,
-  DagsterTheme,
-  Icon,
-  Subheading,
-} from '@dagster-io/ui-components';
+import {Box, Button, Checkbox, Icon, Subheading} from '@dagster-io/ui-components';
 import React from 'react';
 
 import {useStateWithStorage} from '../../hooks/useStateWithStorage';
@@ -15,6 +7,7 @@ import {HourCycleSelect} from '../time/HourCycleSelect';
 import {ThemeSelect} from '../time/ThemeSelect';
 import {TimezoneSelect} from '../time/TimezoneSelect';
 import {automaticLabel} from '../time/browserTimezone';
+import {useThemeState} from '../useThemeState';
 
 export const UserPreferences = ({
   onChangeRequiresReload,
@@ -26,12 +19,7 @@ export const UserPreferences = ({
     (value: any) => (typeof value === 'boolean' ? value : true),
   );
 
-  const [theme, setTheme] = useStateWithStorage(DAGSTER_THEME_KEY, (value: any) => {
-    if (value === DagsterTheme.Light || value === DagsterTheme.Dark) {
-      return value;
-    }
-    return DagsterTheme.System;
-  });
+  const {theme, setTheme} = useThemeState();
 
   const initialShortcutsEnabled = React.useRef(shortcutsEnabled);
 

js_modules/dagster-ui/packages/ui-core/src/app/time/ThemeSelect.tsx

@@ -16,6 +16,14 @@ export const ThemeSelect = ({theme, onChange}: Props) => {
       key: DagsterTheme.Dark,
       label: 'Dark',
     },
+    {
+      key: DagsterTheme.LightHighContrast,
+      label: 'Light, high contrast',
+    },
+    {
+      key: DagsterTheme.DarkHighContrast,
+      label: 'Dark, high contrast',
+    },
     {
       key: DagsterTheme.System,
       label: 'System setting',

js_modules/dagster-ui/packages/ui-core/src/app/useRGBColorsForTheme.tsx

@@ -29,7 +29,7 @@ const computeRGBValuesFromBodyStyle = () => {
  * the mapped values do as well.
  */
 export const useRGBColorsForTheme = () => {
-  const theme = useThemeState();
+  const {theme} = useThemeState();
   const [rgbState, setRGBState] = useState(() => computeRGBValuesFromBodyStyle());
 
   useEffect(() => {