[ui] Themes (#18442)

## Summary & Motivation Introduce a system for theming the Dagster UI. All direct references to color values are replaced by a set of functions that match semantic color names to theme-based palette values. The theme value is exposed via a User Setting. Discussion here: #18439 ## How I Tested These Changes TS, lint, jest. Find all existing references to `LegacyColors`, hex values, rgb/rgba values and replace them with color functions. Navigate throughout the app in legacy, light, and dark modes. Verify that colors look appropriate. --------- Co-authored-by: Josh Braun <[email protected]>
dagster-io · Dec 3, 2023 · e5bfb14 · e5bfb14 · github-actions · Dec 3, 2023
1 parent b5bac82
commit e5bfb14
Show file tree

Hide file tree

Showing 307 changed files with 4,217 additions and 1,848 deletions.
diff --git a/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx b/js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx
@@ -4,13 +4,15 @@ import {
   Box,
   Button,
   Checkbox,
-  Colors,
   Dialog,
   ExternalAnchorButton,
   Heading,
   Icon,
   Spinner,
   TextInput,
+  colorAccentRed,
+  colorTextLight,
+  colorTextRed,
 } from '@dagster-io/ui-components';
 import {useStateWithStorage} from '@dagster-io/ui-core/hooks/useStateWithStorage';
 import React from 'react';
@@ -101,7 +103,7 @@ const Form = ({dismiss, submit}: FormProps) => {
       >
         <Box flex={{direction: 'column', gap: 8, alignItems: 'start', justifyContent: 'start'}}>
           <Heading>Join the Dagster community</Heading>
-          <Body style={{color: Colors.Gray700, marginBottom: '4px'}}>
+          <Body style={{color: colorTextLight(), marginBottom: '4px'}}>
             Connect with thousands of other data practitioners building with Dagster. Share
             knowledge, get help, and contribute to the open-source project.
           </Body>
@@ -126,11 +128,11 @@ const Form = ({dismiss, submit}: FormProps) => {
           }}
           onBlur={() => setBlurred(true)}
           placeholder="[email protected]"
-          strokeColor={!emailChanged || validEmail ? undefined : Colors.Red500}
+          strokeColor={!emailChanged || validEmail ? undefined : colorAccentRed()}
           style={{width: '100%'}}
         />
         {emailChanged && blurred && !validEmail ? (
-          <div style={{paddingBottom: '12px', color: Colors.Red500, fontSize: '12px'}}>
+          <div style={{paddingBottom: '12px', color: colorTextRed(), fontSize: '12px'}}>
             Add your email to get updates from Dagster.
           </div>
         ) : null}

diff --git a/js_modules/dagster-ui/packages/ui-components/.storybook/main.js b/js_modules/dagster-ui/packages/ui-components/.storybook/main.js
@@ -28,7 +28,7 @@ const config = {
     storyStoreV7: true,
   },
   docs: {
-    autodocs: true,
+    autodocs: false,
   },
   env: (config) => ({
     ...config,

diff --git a/js_modules/dagster-ui/packages/ui-components/.storybook/preview.js b/js_modules/dagster-ui/packages/ui-components/.storybook/preview.js
@@ -7,7 +7,6 @@ import {
   GlobalSuggestStyle,
   GlobalToasterStyle,
   GlobalTooltipStyle,
-  Colors,
 } from '../src';
 
 import {MemoryRouter} from 'react-router-dom';
@@ -16,22 +15,29 @@ import * as React from 'react';
 import {createGlobalStyle} from 'styled-components/macro';
 
 import './blueprint.css';
+import {
+  colorBackgroundDefault,
+  colorLinkDefault,
+  colorTextDefault,
+  colorTextLight,
+} from '../src/theme/color';
 
 const GlobalStyle = createGlobalStyle`
   * {
     box-sizing: border-box;
   }
 
   html, body {
-    color: ${Colors.Gray800};
+    background-color: ${colorBackgroundDefault()};
+    color: ${colorTextDefault()};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   a,
   a:hover,
   a:active {
-    color: ${Colors.Link};
+    color: ${colorLinkDefault()};
   }
 
   body {
@@ -40,6 +46,8 @@ const GlobalStyle = createGlobalStyle`
   }
 
   body, input, select, textarea {
+    background-color: ${colorBackgroundDefault()};
+    color: ${colorTextDefault()};
     font-family: ${FontFamily.default};
   }
 
@@ -51,6 +59,10 @@ const GlobalStyle = createGlobalStyle`
     font-family: ${FontFamily.monospace};
     font-size: 16px;
   }
+
+  input::placeholder {
+    color: ${colorTextLight()};
+  }
 `;
 
 // Global decorator to apply the styles to all stories

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx
@@ -1,8 +1,22 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import {
+  colorAccentBlue,
+  colorAccentGreen,
+  colorAccentRed,
+  colorAccentYellow,
+  colorBackgroundBlue,
+  colorBackgroundGreen,
+  colorBackgroundRed,
+  colorBackgroundYellow,
+  colorTextBlue,
+  colorTextGreen,
+  colorTextRed,
+  colorTextYellow,
+} from '../theme/color';
+
 import {Box} from './Box';
-import {Colors} from './Colors';
 import {Group} from './Group';
 import {IconName, Icon} from './Icon';
 
@@ -23,36 +37,36 @@ export const Alert = (props: Props) => {
     switch (intent) {
       case 'warning':
         return {
-          backgroundColor: Colors.Yellow50,
-          borderColor: Colors.Yellow500,
+          backgroundColor: colorBackgroundYellow(),
+          borderColor: colorAccentYellow(),
           icon: 'warning',
-          iconColor: Colors.Yellow500,
-          textColor: Colors.Yellow700,
+          iconColor: colorAccentYellow(),
+          textColor: colorTextYellow(),
         };
       case 'error':
         return {
-          backgroundColor: Colors.Red50,
-          borderColor: Colors.Red500,
+          backgroundColor: colorBackgroundRed(),
+          borderColor: colorAccentRed(),
           icon: 'error',
-          iconColor: Colors.Red500,
-          textColor: Colors.Red700,
+          iconColor: colorAccentRed(),
+          textColor: colorTextRed(),
         };
       case 'success':
         return {
-          backgroundColor: Colors.Green50,
-          borderColor: Colors.Green500,
+          backgroundColor: colorBackgroundGreen(),
+          borderColor: colorAccentGreen(),
           icon: 'done',
-          iconColor: Colors.Green500,
-          textColor: Colors.Green700,
+          iconColor: colorAccentGreen(),
+          textColor: colorTextGreen(),
         };
       case 'info':
       default:
         return {
-          backgroundColor: Colors.Blue50,
-          borderColor: Colors.Blue500,
+          backgroundColor: colorBackgroundBlue(),
+          borderColor: colorAccentBlue(),
           icon: 'info',
-          iconColor: Colors.Blue500,
-          textColor: Colors.Blue700,
+          iconColor: colorAccentBlue(),
+          textColor: colorTextBlue(),
         };
     }
   }, [intent]);

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseButton.tsx
@@ -1,15 +1,25 @@
 import * as React from 'react';
 
-import {Colors} from './Colors';
+import {
+  colorAccentGray,
+  colorAccentReversed,
+  colorBackgroundDefault,
+  colorBackgroundDefaultHover,
+  colorTextDefault,
+} from '../theme/color';
+
 import {StyledButton, StyledButtonText} from './StyledButton';
 
 interface CommonButtonProps {
   icon?: React.ReactNode;
   label?: React.ReactNode;
   loading?: boolean;
   rightIcon?: React.ReactNode;
+  iconColor?: string;
   fillColor?: string;
+  fillColorHover?: string;
   strokeColor?: string;
+  strokeColorHover?: string;
   textColor?: string;
 }
 
@@ -18,14 +28,17 @@ interface BaseButtonProps extends CommonButtonProps, React.ComponentPropsWithRef
 export const BaseButton = React.forwardRef(
   (props: BaseButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
     const {
-      fillColor = Colors.White,
+      fillColor = colorBackgroundDefault(),
+      fillColorHover = colorBackgroundDefaultHover(),
       disabled,
       icon,
       label,
       loading,
       rightIcon,
-      textColor = Colors.Dark,
-      strokeColor = Colors.Gray300,
+      iconColor = colorAccentReversed(),
+      textColor = colorTextDefault(),
+      strokeColor = colorAccentGray(),
+      strokeColorHover = colorAccentGray(),
       ...rest
     } = props;
 
@@ -34,8 +47,11 @@ export const BaseButton = React.forwardRef(
         {...rest}
         as="button"
         disabled={!!(disabled || loading)}
+        $iconColor={iconColor}
         $fillColor={fillColor}
+        $fillColorHover={fillColorHover}
         $strokeColor={strokeColor}
+        $strokeColorHover={strokeColorHover}
         $textColor={textColor}
         ref={ref}
       >

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {Colors} from './Colors';
+import {colorBackgroundDefault, colorTextDefault} from '../theme/color';
+
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
 
@@ -30,8 +31,8 @@ const BaseTagTooltipStyle: React.CSSProperties = {
 
 export const BaseTag = (props: Props) => {
   const {
-    fillColor = Colors.Gray10,
-    textColor = Colors.Gray900,
+    fillColor = colorBackgroundDefault(),
+    textColor = colorTextDefault(),
     icon,
     interactive = false,
     rightIcon,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Box.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Box.tsx
@@ -1,8 +1,8 @@
 import styled, {css} from 'styled-components';
 
+import {colorKeylineDefault} from '../theme/color';
 import {assertUnreachable} from '../util/assertUnreachable';
 
-import {Colors} from './Colors';
 import {BorderSetting, BorderSide, DirectionalSpacing, FlexProperties} from './types';
 
 interface Props {
@@ -50,8 +50,8 @@ const directionalSpacingToCSS = (property: string, spacing: DirectionalSpacing)
 
 const borderSettingToCSS = (border: BorderSide | BorderSetting) => {
   const borderValue =
-    typeof border === 'string' ? {side: border, width: 1, color: Colors.KeylineGray} : border;
-  const {side, width = 1, color = Colors.KeylineGray} = borderValue;
+    typeof border === 'string' ? {side: border, width: 1, color: colorKeylineDefault()} : border;
+  const {side, width = 1, color = colorKeylineDefault()} = borderValue;
 
   switch (side) {
     case 'all':