[ui] Use CSS vars for theming (#21200)

## Summary & Motivation

Use CSS vars instead of JS strings to set themed values.

The main benefit of this is that it will no longer require reloading the
page to see the theme update: when you change the theme in User
Settings, it will update immediately. Additionally, if the user's OS is
set to change from light to dark (and vice versa) based on time of day,
and they are using the "System" theme, the theme change should now occur
automatically, without a browser reload.

I have addressed a couple of items with inline comments.


https://github.com/dagster-io/dagster/assets/2823852/8e51bbce-6675-470b-b052-db7c51773bc4

## How I Tested These Changes

Load app, change theme. Verify that it updates right away. Click around
the app, verify that everything looks correct.

js_modules/dagster-ui/packages/ui-components/.prettierrc.js

@@ -2,5 +2,5 @@ module.exports = {
   bracketSpacing: false,
   printWidth: 100,
   singleQuote: true,
-  trailingComma: 'all'
+  trailingComma: 'all',
 };

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

@@ -11,6 +11,7 @@ function getAbsolutePath(value) {
 const config = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),

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

@@ -7,9 +7,12 @@ import {
   GlobalSuggestStyle,
   GlobalToasterStyle,
   GlobalTooltipStyle,
+  GlobalThemeStyle,
   Colors,
 } from '../src';
 
+import {withThemeByClassName} from '@storybook/addon-themes';
+
 import {MemoryRouter} from 'react-router-dom';
 
 import {createGlobalStyle} from 'styled-components/macro';
@@ -64,6 +67,7 @@ export const decorators = [
   (Story) => (
     <MemoryRouter>
       <GlobalStyle />
+      <GlobalThemeStyle />
       <GlobalInter />
       <GlobalInconsolata />
       <GlobalToasterStyle />
@@ -74,6 +78,15 @@ export const decorators = [
       <Story />
     </MemoryRouter>
   ),
+  withThemeByClassName({
+    themes: {
+      light: 'themeLight',
+      dark: 'themeDark',
+      system: 'themeSystem',
+    },
+    defaultTheme: 'system',
+    parentSelector: 'body',
+  }),
 ];
 
 export const parameters = {

js_modules/dagster-ui/packages/ui-components/package.json

@@ -60,6 +60,8 @@
     "@storybook/addon-essentials": "^7.4.5",
     "@storybook/addon-links": "^7.4.5",
     "@storybook/addon-mdx-gfm": "^7.4.5",
+    "@storybook/addon-themes": "^8.0.8",
+    "@storybook/icons": "^1.2.9",
     "@storybook/react": "^7.4.5",
     "@storybook/react-webpack5": "^7.2.0",
     "@testing-library/dom": "^9.3.0",

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

@@ -7,7 +7,6 @@ import {BaseButton} from './BaseButton';
 import {Colors} from './Color';
 import {Spinner} from './Spinner';
 import {StyledButton, StyledButtonText} from './StyledButton';
-import {CoreColors} from '../palettes/CoreColors';
 
 type BlueprintIntent = React.ComponentProps<typeof BlueprintButton>['intent'];
 type BlueprintOutlined = React.ComponentProps<typeof BlueprintButton>['outlined'];
@@ -160,7 +159,7 @@ export const intentToTextAndIconColor = (intent: BlueprintIntent) => {
   if (intent === 'primary') {
     return Colors.accentReversed();
   }
-  return CoreColors.White;
+  return Colors.alwaysWhite();
 };
 
 export const buildColorSet = (config: {intent?: BlueprintIntent; outlined: BlueprintOutlined}) => {

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

@@ -5,7 +5,6 @@ import {createGlobalStyle} from 'styled-components';
 import {Colors} from './Color';
 import {Icon, IconName, IconWrapper} from './Icon';
 import {createToaster} from './createToaster';
-import {CoreColors} from '../palettes/CoreColors';
 
 export const GlobalToasterStyle = createGlobalStyle`
   .dagster-toaster {
@@ -14,7 +13,7 @@ export const GlobalToasterStyle = createGlobalStyle`
       border-radius: 8px;
       font-size: 14px;
       line-height: 22px;
-      color: ${CoreColors.White};
+      color: ${Colors.alwaysWhite()};
       background-color: ${Colors.accentGray()};
     }
 
@@ -30,11 +29,11 @@ export const GlobalToasterStyle = createGlobalStyle`
     }
 
     .bp4-icon-cross {
-      color: ${CoreColors.White} !important;
+      color: ${Colors.alwaysWhite()} !important;
     }
 
     ${IconWrapper} {
-      background-color: ${CoreColors.White} !important;
+      background-color: ${Colors.alwaysWhite()} !important;
     }
 
     .bp4-toast.bp4-intent-primary,

js_modules/dagster-ui/packages/ui-components/src/components/__stories__/BaseButton.stories.tsx

@@ -3,6 +3,7 @@ import {Meta} from '@storybook/react';
 import {CoreColors} from '../../palettes/CoreColors';
 import {BaseButton} from '../BaseButton';
 import {Box} from '../Box';
+import {Colors} from '../Color';
 import {Group} from '../Group';
 import {Icon} from '../Icon';
 
@@ -31,35 +32,35 @@ export const Default = () => {
 export const Fill = () => {
   return (
     <Group direction="column" spacing={8}>
-      <BaseButton label="Button" fillColor={CoreColors.Gray900} textColor={CoreColors.White} />
+      <BaseButton label="Button" fillColor={Colors.accentGray()} textColor={Colors.alwaysWhite()} />
       <BaseButton
         label="Button"
-        fillColor={CoreColors.Blue500}
-        textColor={CoreColors.White}
+        fillColor={Colors.accentBlue()}
+        textColor={Colors.alwaysWhite()}
         icon={<Icon name="star" />}
       />
       <BaseButton
         label="Button"
-        fillColor={CoreColors.Green500}
-        textColor={CoreColors.White}
+        fillColor={Colors.accentGreen()}
+        textColor={Colors.alwaysWhite()}
         rightIcon={<Icon name="close" />}
       />
       <BaseButton
         label="Button"
-        fillColor={CoreColors.Red500}
-        textColor={CoreColors.White}
+        fillColor={Colors.accentRed()}
+        textColor={Colors.alwaysWhite()}
         icon={<Icon name="source" />}
         rightIcon={<Icon name="expand_more" />}
       />
       <BaseButton
         label="Button"
-        fillColor={CoreColors.Olive500}
-        textColor={CoreColors.White}
+        fillColor={Colors.accentOlive()}
+        textColor={Colors.alwaysWhite()}
         icon={<Icon name="folder_open" />}
       />
       <BaseButton
-        fillColor={CoreColors.Yellow500}
-        textColor={CoreColors.White}
+        fillColor={Colors.accentYellow()}
+        textColor={Colors.alwaysWhite()}
         icon={<Icon name="cached" />}
       />
     </Group>
@@ -68,30 +69,30 @@ export const Fill = () => {
 
 export const Transparent = () => {
   return (
-    <Box padding={12} background={CoreColors.Gray200}>
+    <Box padding={12} background={Colors.backgroundGray()}>
       <Group direction="column" spacing={8}>
-        <BaseButton textColor={CoreColors.Gray900} label="Button" fillColor="transparent" />
+        <BaseButton textColor={Colors.accentGray()} label="Button" fillColor="transparent" />
         <BaseButton
-          textColor={CoreColors.Gray900}
+          textColor={Colors.accentGray()}
           label="Button"
           fillColor="transparent"
           icon={<Icon name="star" />}
         />
         <BaseButton
-          textColor={CoreColors.Gray900}
+          textColor={Colors.accentGray()}
           label="Button"
           fillColor="transparent"
           rightIcon={<Icon name="close" />}
         />
         <BaseButton
-          textColor={CoreColors.Gray900}
+          textColor={Colors.accentGray()}
           label="Button"
           fillColor="transparent"
           icon={<Icon name="source" />}
           rightIcon={<Icon name="expand_more" />}
         />
         <BaseButton
-          textColor={CoreColors.Gray900}
+          textColor={Colors.accentGray()}
           fillColor="transparent"
           icon={<Icon name="cached" />}
         />

js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Icon.stories.tsx

@@ -2,6 +2,7 @@ import {Meta} from '@storybook/react';
 
 import {CoreColors} from '../../palettes/CoreColors';
 import {Box} from '../Box';
+import {Colors} from '../Color';
 import {Icon, IconNames as _iconNames} from '../Icon';
 import {Tooltip} from '../Tooltip';
 
@@ -48,7 +49,7 @@ export const IconColors = () => {
         return colorAtKey;
       }
     }
-    return CoreColors.Gray100;
+    return Colors.accentWhite();
   };
 
   return (

js_modules/dagster-ui/packages/ui-components/src/index.ts

@@ -59,8 +59,9 @@ export * from './components/UnstyledButton';
 export * from './components/StyledRawCodeMirror';
 export * from './components/useDelayedState';
 export * from './components/ifPlural';
-// export * from './theme/color';
 export * from './theme/theme';
+export * from './theme/GlobalThemeStyle';
+export * from './palettes/colorNameToVar';
 export * as Colors from './palettes/Color';
 
 // Global font styles, exported as styled-component components to render in

js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx

@@ -65,6 +65,7 @@ export {
   colorAccentGray as accentGray,
   colorAccentGrayHover as accentGrayHover,
   colorAccentWhite as accentWhite,
+  colorAlwaysWhite as alwaysWhite,
   colorDialogBackground as dialogBackground,
   colorTooltipBackground as tooltipBackground,
   colorTooltipText as tooltipText,
@@ -77,7 +78,6 @@ export {
   colorNavTextSelected as navTextSelected,
   colorNavButton as navButton,
   colorNavButtonHover as navButtonHover,
-  colorLineageDots as lineageDots,
   colorLineageEdge as lineageEdge,
   colorLineageEdgeHighlighted as lineageEdgeHighlighted,
   colorLineageGroupNodeBackground as lineageGroupNodeBackground,

js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx

@@ -65,6 +65,7 @@ export enum ColorName {
   AccentGray = 'AccentGray',
   AccentGrayHover = 'AccentGrayHover',
   AccentWhite = 'AccentWhite',
+  AlwaysWhite = 'AlwaysWhite',
   DialogBackground = 'DialogBackground',
   TooltipBackground = 'TooltipBackground',
   TooltipText = 'TooltipText',
@@ -81,7 +82,6 @@ export enum ColorName {
   NavButtonHover = 'NavButtonHover',
 
   // Lineage Graph
-  LineageDots = 'LineageDots',
   LineageEdge = 'LineageEdge',
   LineageEdgeHighlighted = 'LineageEdgeHighlighted',
   LineageGroupNodeBackground = 'LineageGroupNodeBackground',

js_modules/dagster-ui/packages/ui-components/src/palettes/CoreColorStyles.tsx

@@ -0,0 +1,119 @@
+import {createGlobalStyle} from 'styled-components';
+
+export const CoreColorStyles = createGlobalStyle`
+  :root {
+    --color-core-blue990: rgba(14, 15, 52, 1);
+    --color-core-blue950: rgba(17, 18, 62, 1);
+    --color-core-blue900: rgba(25, 24, 82, 1);
+    --color-core-blue800: rgba(33, 30, 102, 1);
+    --color-core-blue700: rgba(48, 43, 141, 1);
+    --color-core-blue600: rgba(64, 55, 181, 1);
+    --color-core-blue500: rgba(79, 67, 221, 1);
+    --color-core-blue400: rgba(114, 105, 228, 1);
+    --color-core-blue300: rgba(149, 142, 235, 1);
+    --color-core-blue200: rgba(185, 180, 241, 1);
+    --color-core-blue100: rgba(220, 217, 248, 1);
+    --color-core-blue50: rgba(237, 236, 252, 1);
+    --color-core-blue10: rgba(246, 246, 253, 1);
+    --color-core-red990: rgba(33, 15, 27, 1);
+    --color-core-red950: rgba(44, 18, 28, 1);
+    --color-core-red900: rgba(64, 24, 31, 1);
+    --color-core-red800: rgba(85, 30, 34, 1);
+    --color-core-red700: rgba(127, 42, 41, 1);
+    --color-core-red600: rgba(168, 54, 47, 1);
+    --color-core-red500: rgba(210, 66, 53, 1);
+    --color-core-red400: rgba(219, 104, 93, 1);
+    --color-core-red300: rgba(228, 142, 134, 1);
+    --color-core-red200: rgba(237, 179, 174, 1);
+    --color-core-red100: rgba(246, 217, 215, 1);
+    --color-core-red50: rgba(250, 236, 235, 1);
+    --color-core-red10: rgba(253, 246, 245, 1);
+    --color-core-yellow990: rgba(36, 29, 26, 1);
+    --color-core-yellow950: rgba(47, 36, 27, 1);
+    --color-core-yellow900: rgba(70, 51, 30, 1);
+    --color-core-yellow800: rgba(93, 66, 32, 1);
+    --color-core-yellow700: rgba(138, 97, 37, 1);
+    --color-core-yellow600: rgba(184, 127, 42, 1);
+    --color-core-yellow500: rgba(229, 157, 47, 1);
+    --color-core-yellow400: rgba(234, 177, 89, 1);
+    --color-core-yellow300: rgba(239, 196, 130, 1);
+    --color-core-yellow200: rgba(245, 216, 172, 1);
+    --color-core-yellow100: rgba(245, 216, 172, 1);
+    --color-core-yellow50: rgba(252, 245, 234, 1);
+    --color-core-yellow10: rgba(252, 245, 234, 1);
+    --color-core-green990: rgba(9, 36, 38, 1);
+    --color-core-green950: rgba(11, 46, 43, 1);
+    --color-core-green900: rgba(15, 65, 54, 1);
+    --color-core-green800: rgba(20, 85, 65, 1);
+    --color-core-green700: rgba(28, 125, 86, 1);
+    --color-core-green600: rgba(37, 164, 108, 1);
+    --color-core-green500: rgba(46, 204, 129, 1);
+    --color-core-green400: rgba(88, 214, 154, 1);
+    --color-core-green300: rgba(130, 224, 179, 1);
+    --color-core-green200: rgba(171, 235, 205, 1);
+    --color-core-green100: rgba(213, 245, 230, 1);
+    --color-core-green50: rgba(234, 250, 242, 1);
+    --color-core-green10: rgba(245, 252, 249, 1);
+    --color-core-lime990: rgba(0, 38, 11, 1);
+    --color-core-lime950: rgba(0, 38, 11, 1);
+    --color-core-lime900: rgba(0, 101, 28, 1);
+    --color-core-lime800: rgba(0, 155, 43, 1);
+    --color-core-lime700: rgba(5, 213, 63, 1);
+    --color-core-lime600: rgba(37, 240, 94, 1);
+    --color-core-lime500: rgba(81, 233, 124, 1);
+    --color-core-lime400: rgba(116, 237, 150, 1);
+    --color-core-lime300: rgba(151, 242, 176, 1);
+    --color-core-lime200: rgba(185, 246, 203, 1);
+    --color-core-lime100: rgba(220, 251, 229, 1);
+    --color-core-lime50: rgba(238, 253, 242, 1);
+    --color-core-lime10: rgba(246, 254, 248, 1);
+    --color-core-cyan990: rgba(13, 32, 50, 1);
+    --color-core-cyan950: rgba(17, 41, 60, 1);
+    --color-core-cyan900: rgba(24, 58, 78, 1);
+    --color-core-cyan800: rgba(31, 76, 97, 1);
+    --color-core-cyan700: rgba(46, 110, 135, 1);
+    --color-core-cyan600: rgba(60, 145, 172, 1);
+    --color-core-cyan500: rgba(75, 180, 210, 1);
+    --color-core-cyan400: rgba(111, 195, 219, 1);
+    --color-core-cyan300: rgba(147, 210, 228, 1);
+    --color-core-cyan200: rgba(183, 225, 237, 1);
+    --color-core-cyan100: rgba(219, 240, 246, 1);
+    --color-core-cyan50: rgba(237, 247, 250, 1);
+    --color-core-cyan10: rgba(246, 251, 253, 1);
+    --color-core-olive990: rgba(25, 31, 41, 1);
+    --color-core-olive950: rgba(33, 39, 48, 1);
+    --color-core-olive900: rgba(48, 56, 61, 1);
+    --color-core-olive800: rgba(64, 72, 74, 1);
+    --color-core-olive700: rgba(94, 106, 99, 1);
+    --color-core-olive600: rgba(125, 139, 125, 1);
+    --color-core-olive500: rgba(156, 172, 151, 1);
+    --color-core-olive400: rgba(176, 189, 172, 1);
+    --color-core-olive300: rgba(196, 205, 193, 1);
+    --color-core-olive200: rgba(215, 222, 213, 1);
+    --color-core-olive100: rgba(235, 238, 234, 1);
+    --color-core-olive50: rgba(245, 247, 245, 1);
+    --color-core-olive10: rgba(250, 251, 250, 1);
+    --color-core-gray990: rgba(3, 6, 21, 1);
+    --color-core-gray950: rgba(13, 17, 33, 1);
+    --color-core-gray900: rgba(23, 28, 44, 1);
+    --color-core-gray850: rgba(33, 39, 56, 1);
+    --color-core-gray800: rgba(43, 50, 68, 1);
+    --color-core-gray750: rgba(53, 61, 80, 1);
+    --color-core-gray700: rgba(63, 72, 91, 1);
+    --color-core-gray650: rgba(73, 83, 103, 1);
+    --color-core-gray600: rgba(83, 94, 115, 1);
+    --color-core-gray550: rgba(93, 105, 126, 1);
+    --color-core-gray500: rgba(103, 116, 138, 1);
+    --color-core-gray450: rgba(118, 130, 150, 1);
+    --color-core-gray400: rgba(133, 144, 161, 1);
+    --color-core-gray350: rgba(149, 158, 173, 1);
+    --color-core-gray300: rgba(164, 172, 185, 1);
+    --color-core-gray250: rgba(179, 185, 197, 1);
+    --color-core-gray200: rgba(194, 199, 208, 1);
+    --color-core-gray150: rgba(209, 213, 220, 1);
+    --color-core-gray100: rgba(225, 227, 232, 1);
+    --color-core-gray50: rgba(240, 241, 243, 1);
+    --color-core-gray10: rgba(247, 248, 249, 1);
+    --color-core-white: rgba(255, 255, 255, 1);
+  }
+`;