replace RGBA values for box shadows (#18548)

dagster-io · Dec 6, 2023 · 339f786 · 339f786 · github-actions · Dec 6, 2023
1 parent 2390587
commit 339f786
Show file tree

Hide file tree

Showing 19 changed files with 41 additions and 21 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CustomTooltipProvider.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CustomTooltipProvider.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {colorTooltipBackground, colorTooltipText} from '../theme/color';
+import {colorShadowDefault, colorTooltipBackground, colorTooltipText} from '../theme/color';
 
 export const CustomTooltipProvider = () => {
   const [state, setState] = React.useState<null | {
@@ -76,7 +76,7 @@ const TooltipContainer = styled.div`
   color: ${colorTooltipText()};
   background: ${colorTooltipBackground()};
   transform: translate(5px, 5px);
-  box-shadow: 1px 1px 3px ${colorTooltipBackground()};
+  box-shadow: 1px 1px 3px ${colorShadowDefault()}};
   z-index: 100;
   pointer-events: none;
   user-select: none;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx
@@ -3,7 +3,12 @@ import {Dialog as BlueprintDialog} from '@blueprintjs/core';
 import * as React from 'react';
 import styled, {createGlobalStyle} from 'styled-components';
 
-import {colorAccentPrimary, colorBackgroundDefault, colorDialogBackground} from '../theme/color';
+import {
+  colorAccentPrimary,
+  colorBackgroundDefault,
+  colorDialogBackground,
+  colorShadowDefault,
+} from '../theme/color';
 
 import {Box} from './Box';
 import {ErrorBoundary} from './ErrorBoundary';
@@ -111,7 +116,7 @@ export const GlobalDialogStyle = createGlobalStyle`
   .dagster-portal .bp4-dialog {
     background-color: ${colorBackgroundDefault()};
     border-radius: 4px;
-    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px;
+    box-shadow: ${colorShadowDefault()} 0px 2px 12px;
     grid-row: 2;
     grid-column: 2;
     margin: 0 auto;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/LegacyColors.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/LegacyColors.tsx
@@ -12,6 +12,7 @@ export const LegacyColors = {
   Gray50: 'rgba(250, 249, 247, 1)',
   KeylineGray: 'rgba(233, 232, 232, 1)',
   WashGray: 'rgba(0, 0, 0, .35)',
+  Shadow: 'rgba(0, 0, 0, .20)',
   Gray10: 'rgba(35, 31, 27, 0.03)',
   White: 'rgba(255, 255, 255, 1)',
   LightPurple: 'rgba(222, 221, 255, 1)',

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx
@@ -13,14 +13,15 @@ import {
   colorTextDefault,
   colorTextDisabled,
   colorPopoverBackground,
+  colorShadowDefault,
 } from '../theme/color';
 
 import {FontFamily} from './styles';
 
 export const GlobalPopoverStyle = createGlobalStyle`
   .dagster-popover.bp4-popover2,
   .dagster-popover.bp4-popover {
-    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 12px;
+    box-shadow: ${colorShadowDefault()} 0px 2px 12px;
   }
 
   .dagster-popover .bp4-popover2-content,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ProductTour.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import styled, {CSSProperties} from 'styled-components';
 
 import {CoreColors} from '../palettes/Colors';
+import {colorShadowDefault} from '../theme/color';
 
 import {Box} from './Box';
 import {Button} from './Button';
@@ -101,7 +102,7 @@ const ProductTourContainer = styled(Box)`
   background: ${CoreColors.Gray900};
   border-radius: 4px;
   padding: 16px;
-  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 12px ${colorShadowDefault()};
 
   &,
   button {

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Slider.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Slider.tsx
@@ -13,6 +13,7 @@ import {
   colorAccentGray,
   colorAccentGrayHover,
   colorBackgroundLighter,
+  colorShadowDefault,
 } from '../theme/color';
 
 interface SliderProps extends BlueprintSliderProps {
@@ -66,12 +67,12 @@ export const SliderStyles = css<{$fillColor: string}>`
     box-shadow: none;
     &:hover {
       border: 2px solid ${colorAccentGrayHover()};
-      box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;
+      box-shadow: ${colorShadowDefault()} 0px 2px 12px 0px;
     }
 
     .bp4-slider-label {
       background: ${colorAccentBlue()};
-      box-shadow: 0 1px 4px rgba(0,0,0,0.15)
+      box-shadow: 0 1px 4px ${colorShadowDefault()};
       padding: 4px 8px;
     }
   }

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import {colorFocusRing} from '../theme/color';
+import {colorFocusRing, colorShadowDefault} from '../theme/color';
 
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
@@ -44,7 +44,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
     box-shadow: ${({$strokeColor, $strokeColorHover}) =>
       `${
         $strokeColorHover || $strokeColor
-      } inset 0px 0px 0px 1px, rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;`};
+      } inset 0px 0px 0px 1px, ${colorShadowDefault()} 0px 2px 12px 0px;`};
     color: ${({$textColor}) => $textColor};
     text-decoration: none;
   }
@@ -56,7 +56,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 
   :focus:not(:focus-visible) {
     box-shadow: ${({$strokeColor}) =>
-      `${$strokeColor} inset 0px 0px 0px 1px, rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;`};
+      `${$strokeColor} inset 0px 0px 0px 1px, ${colorShadowDefault()} 0px 2px 12px 0px;`};
   }
 
   :active:not(:disabled) {

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TokenizingField.tsx
@@ -10,6 +10,7 @@ import {
   colorBackgroundRed,
   colorBackgroundYellow,
   colorBorderDefault,
+  colorFocusRing,
   colorTextDefault,
   colorTextGreen,
   colorTextRed,
@@ -484,7 +485,7 @@ export const StyledTagInput = styled(TagInput)<{$maxWidth?: any}>`
     color: ${colorTextDefault()};
     box-shadow:
       ${colorBorderDefault()} inset 0px 0px 0px 1px,
-      rgba(58, 151, 212, 0.6) 0 0 0 3px;
+      ${colorFocusRing()} 0 0 0 3px;
   }
 
   && .bp4-tag-input-values:first-child .bp4-input-ghost:first-child {

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Menu.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Menu.stories.tsx
@@ -2,6 +2,7 @@ import {Meta} from '@storybook/react';
 import * as React from 'react';
 import styled from 'styled-components';
 
+import {colorShadowDefault} from '../../theme/color';
 import {Group} from '../Group';
 import {Menu, MenuItem, MenuDivider} from '../Menu';
 
@@ -52,5 +53,5 @@ export const Default = () => {
 };
 
 const Container = styled.div`
-  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px;
+  box-shadow: ${colorShadowDefault()} 0px 2px 12px;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
@@ -70,6 +70,7 @@ export enum ColorName {
   TooltipText = 'TooltipText',
   PopoverBackground = 'PopoverBackground',
   PopoverBackgroundHover = 'PopoverBackgroundHover',
+  ShadowDefault = 'ShadowDefault',
 
   // Header
   NavBackground = 'NavBackground',

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx
@@ -73,6 +73,7 @@ export const DarkPalette = {
   [ColorName.TooltipText]: CoreColors.White,
   [ColorName.PopoverBackground]: CoreColors.Gray900,
   [ColorName.PopoverBackgroundHover]: CoreColors.Gray850,
+  [ColorName.ShadowDefault]: TranslucentColors.Gray90,
 
   // Nav
   [ColorName.NavBackground]: CoreColors.Gray990,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx
@@ -75,6 +75,7 @@ export const LegacyPalette = {
   [ColorName.TooltipText]: LegacyColors.White,
   [ColorName.PopoverBackground]: LegacyColors.White,
   [ColorName.PopoverBackgroundHover]: LegacyColors.Gray100,
+  [ColorName.ShadowDefault]: LegacyColors.Shadow,
 
   // HEADER
   [ColorName.NavBackground]: LegacyColors.Dark,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx
@@ -73,6 +73,7 @@ export const LightPalette = {
   [ColorName.TooltipText]: CoreColors.White,
   [ColorName.PopoverBackground]: CoreColors.White,
   [ColorName.PopoverBackgroundHover]: CoreColors.Gray50,
+  [ColorName.ShadowDefault]: TranslucentColors.Gray30,
 
   // Nav
   [ColorName.NavBackground]: CoreColors.Gray990,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
@@ -80,6 +80,7 @@ export const colorTooltipBackground = () => color(ColorName.TooltipBackground);
 export const colorTooltipText = () => color(ColorName.TooltipText);
 export const colorPopoverBackground = () => color(ColorName.PopoverBackground);
 export const colorPopoverBackgroundHover = () => color(ColorName.PopoverBackgroundHover);
+export const colorShadowDefault = () => color(ColorName.ShadowDefault);
 
 // NAV COLORS
 export const colorNavBackground = () => color(ColorName.NavBackground);

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/ShortcutHandler.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/ShortcutHandler.tsx
@@ -1,4 +1,4 @@
-import {CoreColors} from '@dagster-io/ui-components';
+import {CoreColors, colorShadowDefault} from '@dagster-io/ui-components';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
@@ -209,5 +209,5 @@ const ShortcutAnnotation = styled.div`
   background: ${CoreColors.Gray800};
   border: 1px solid ${CoreColors.Gray300};
   border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px ${colorShadowDefault()};
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
@@ -20,6 +20,7 @@ import {
   colorLineageNodeBorderSelected,
   colorLineageNodeBorderHover,
   colorLineageNodeBackground,
+  colorShadowDefault,
 } from '@dagster-io/ui-components';
 import countBy from 'lodash/countBy';
 import isEqual from 'lodash/isEqual';
@@ -375,7 +376,7 @@ const AssetNodeBox = styled.div<{$isSource: boolean; $selected: boolean}>`
   &:hover {
     ${(p) => !p.$selected && `border: 2px solid ${colorLineageNodeBorderHover()};`};
 
-    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;
+    box-shadow: ${colorShadowDefault()} 0px 2px 12px 0px;
     scale: 1.03;
     ${AssetNodeShowOnHover} {
       display: initial;
@@ -447,7 +448,7 @@ const MinimalAssetNodeBox = styled.div<{
   height: 100%;
   min-height: 86px;
   &:hover {
-    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px 0px;
+    box-shadow: ${colorShadowDefault()} 0px 2px 12px 0px;
   }
 `;
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartTimescale.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChartTimescale.tsx
@@ -5,6 +5,7 @@ import {
   colorBackgroundLight,
   colorBorderDefault,
   colorKeylineDefault,
+  colorShadowDefault,
   colorTextLight,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
@@ -219,7 +220,7 @@ const TimescaleContainer = styled.div`
   & .tick.duration {
     color: ${colorTextLight()};
     background: ${colorBackgroundLight()};
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 1px ${colorShadowDefault()};
   }
   & .tick.highlight {
     color: ${colorAccentReversed()};

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -15,6 +15,7 @@ import {
   colorNavButton,
   colorNavButtonHover,
   colorNavText,
+  colorShadowDefault,
 } from '@dagster-io/ui-components';
 import Fuse from 'fuse.js';
 import debounce from 'lodash/debounce';
@@ -279,7 +280,7 @@ const SearchTrigger = styled.button`
 const Container = styled.div`
   background-color: ${colorBackgroundDefault()};
   border-radius: 4px;
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 2px 8px ${colorShadowDefault()};
   max-height: 60vh;
   left: calc(50% - 300px);
   overflow: hidden;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx
@@ -24,6 +24,7 @@ import {
   colorTextLight,
   colorBorderDefault,
   colorAccentGray,
+  colorShadowDefault,
 } from '@dagster-io/ui-components';
 import isEqual from 'lodash/isEqual';
 import uniq from 'lodash/uniq';
@@ -546,7 +547,7 @@ const CustomTable = styled(Table)`
 
   &&& tr {
     &:last-child td {
-      box-shadow: inset 1px 1px 0 rgba(233, 232, 232, 1) !important;
+      box-shadow: inset 1px 1px 0 ${colorKeylineDefault()} !important;
     }
     &:last-child td:first-child,
     td:first-child,
@@ -572,7 +573,7 @@ const OpInfoWrap = styled.div`
   font-size: 0.85rem;
   background: ${colorBackgroundDefault()};
   color: ${colorTextLight()};
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 3px ${colorShadowDefault()};
   z-index: 2;
   left: 0;
 `;