Skip to content

Commit

Permalink
Josh theme tweaks (#18284)
Browse files Browse the repository at this point in the history 
## Summary & Motivation
Adds a bunch of small style tweaks to the dark and light themes 

## How I Tested These Changes
Booted up the UI and tried it
  • Loading branch information
@braunjj @hellendag
braunjj authored and hellendag committed Dec 1, 2023
1 parent f9c7bb4 commit 6969df1
Show file tree
Hide file tree
Showing 38 changed files with 373 additions and 188 deletions.
3 changes: 2 additions & 1 deletion js_modules/dagster-ui/packages/ui-components/src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
colorBackgroundYellow,
colorBorderDefault,
colorBorderHover,
colorBackgroundLightHover,
} from '../theme/color';

import {BaseButton} from './BaseButton';
Expand Down Expand Up @@ -167,7 +168,7 @@ export const intentToFillColorHover = (intent: BlueprintIntent) => {
return colorAccentYellowHover();
case 'none':
default:
return colorBackgroundGray();
return colorBackgroundLightHover();
}
};

Expand Down
4 changes: 2 additions & 2 deletions js_modules/dagster-ui/packages/ui-components/src/components/ButtonGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';

import {
colorBackgroundDefault,
colorBackgroundGray,
colorBackgroundLighterHover,
colorBorderDefault,
colorTextDefault,
colorTextLight,
Expand Down Expand Up @@ -36,7 +36,7 @@ export const ButtonGroup = <T extends string | number>(props: Props<T>) => {
const buttonElement = (
<BaseButton
key={id}
fillColor={isActive ? colorBackgroundGray() : colorBackgroundDefault()}
fillColor={isActive ? colorBackgroundLighterHover() : colorBackgroundDefault()}
textColor={isActive ? colorTextDefault() : colorTextLight()}
iconColor={isActive ? colorTextDefault() : colorTextLight()}
strokeColor={colorBorderDefault()}
Expand Down
4 changes: 2 additions & 2 deletions js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import styled, {css} from 'styled-components';
import {
colorAccentBlue,
colorAccentGray,
colorAccentWhite,
colorAccentReversed,
colorBackgroundDefault,
colorBackgroundDisabled,
colorBackgroundGray,
colorBorderDefault,
colorTextDefault,
Expand Down Expand Up @@ -118,7 +118,7 @@ const SwitchIcon = ({checked, indeterminate, fillColor, disabled}: IconProps) =>
width="20"
height="20"
rx="10"
fill={disabled ? colorBackgroundDisabled() : colorBackgroundDefault()}
fill={disabled ? colorAccentWhite() : colorAccentWhite()}
/>
</svg>
);
Expand Down
4 changes: 2 additions & 2 deletions js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Dialog as BlueprintDialog} from '@blueprintjs/core';
import * as React from 'react';
import styled, {createGlobalStyle} from 'styled-components';

import {colorAccentPrimary, colorBackgroundDefault} from '../theme/color';
import {colorAccentPrimary, colorBackgroundDefault, colorDialogBackground} from '../theme/color';

import {Box} from './Box';
import {LegacyColors} from './Colors';
Expand Down Expand Up @@ -100,7 +100,7 @@ export const DialogHeaderText = styled.div`

export const GlobalDialogStyle = createGlobalStyle`
.dagster-portal .bp4-overlay-backdrop {
background-color: ${LegacyColors.WashGray};
background-color: ${colorDialogBackground()};
}
.dagster-portal .bp4-dialog-container {
Expand Down
16 changes: 10 additions & 6 deletions js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ import {
colorKeylineDefault,
colorTextDefault,
colorTextLight,
colorPopoverBackground,
colorBackgroundCyan,
colorPopoverBackgroundHover,
colorBackgroundBlue,
} from '../theme/color';

import {IconName, Icon, IconWrapper} from './Icon';
Expand Down Expand Up @@ -132,7 +136,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
`;

const StyledMenu = styled(BlueprintMenu)`
background-color: ${colorBackgroundDefault()};
background-color: ${colorPopoverBackground()};
border-radius: 4px;
padding: 8px 4px;
`;
Expand Down Expand Up @@ -162,11 +166,11 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
&.bp4-active,
&.bp4-active:hover {
background-color: ${colorAccentBlue()};
color: ${colorAccentReversed()};
background-color: ${colorBackgroundBlue()};
color: ${colorTextDefault()};
${IconWrapper} {
background-color: ${colorAccentReversed()};
background-color: ${colorTextDefault()};
}
}
Expand All @@ -175,15 +179,15 @@ const StyledMenuItem = styled(BlueprintMenuItem)<StyledMenuItemProps>`
}
&.bp4-active ${IconWrapper} {
color: ${colorAccentReversed()};
color: ${colorTextDefault()};
}
${IconWrapper}:first-child {
margin-left: -4px;
}
&:hover {
background: ${colorBackgroundGray()};
background: ${colorPopoverBackgroundHover()};
color: ${({$textColor}) => $textColor};
}
Expand Down
2 changes: 1 addition & 1 deletion js_modules/dagster-ui/packages/ui-components/src/components/PageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const PageHeader = (props: Props) => {
border="bottom"
>
<Box flex={{direction: 'row', justifyContent: 'space-between'}} padding={{bottom: 16}}>
<Box flex={{direction: 'row', alignItems: 'flex-start', gap: 12, wrap: 'wrap'}}>
<Box flex={{direction: 'row', alignItems: 'center', gap: 12, wrap: 'wrap',}}>
{title}
{tags}
</Box>
Expand Down
12 changes: 7 additions & 5 deletions js_modules/dagster-ui/packages/ui-components/src/components/Popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
colorKeylineDefault,
colorTextDefault,
colorTextDisabled,
colorPopoverBackground,
colorPopoverBackgroundHover,
} from '../theme/color';

import {FontFamily} from './styles';
Expand All @@ -25,11 +27,11 @@ export const GlobalPopoverStyle = createGlobalStyle`
.dagster-popover .bp4-popover2-content,
.dagster-popover .bp4-popover-content {
background-color: ${colorBackgroundDefault()};
background-color: ${colorPopoverBackground()};
border-radius: 4px;
.bp4-menu {
background-color: ${colorBackgroundDefault()};
background-color: ${colorPopoverBackground()};
color: ${colorTextDefault()};
}
Expand All @@ -49,7 +51,7 @@ export const GlobalPopoverStyle = createGlobalStyle`
}
.bp4-input {
background-color: ${colorBackgroundDefault()};
background-color: ${colorPopoverBackground()};
border: none;
border-radius: 8px;
box-shadow: ${colorBorderDefault()} inset 0px 0px 0px 1px, ${colorKeylineDefault()} inset 2px 2px 1.5px;
Expand All @@ -73,12 +75,12 @@ export const GlobalPopoverStyle = createGlobalStyle`
}
.dagster-popover .bp4-popover2-arrow-fill {
fill: ${colorBackgroundDefault()};
fill: ${colorPopoverBackground()};
}
.dagster-popover .bp4-popover2.bp4-dark .bp4-popover2-content,
.bp4-dark .dagster-popover .bp4-popover2 .bp4-popover2-content {
background-color: ${colorBackgroundDefault()};
background-color: ${colorPopoverBackground()};
}
`;

Expand Down
38 changes: 22 additions & 16 deletions js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@ import {
colorBackgroundDefault,
colorBackgroundDisabled,
colorBorderDefault,
colorBorderHover,
colorBorderDisabled,
colorBorderFocussed,
colorKeylineDefault,
colorTextDefault,
colorTextDisabled,
colorTextLight,
colorTextLighter,
colorBackgroundDefaultHover,
} from '../theme/color';

import {IconName, Icon, IconWrapper} from './Icon';
Expand Down Expand Up @@ -100,17 +103,16 @@ const RightContainer = styled.div`
export const TextInputStyles = css`
background-color: ${colorBackgroundDefault()};
border: none;
outline: none;
border-radius: 8px;
box-shadow:
${colorBorderDefault()} inset 0px 0px 0px 1px,
${colorKeylineDefault()} inset 2px 2px 1.5px;
color: ${colorTextDefault()};
flex-grow: 1;
font-size: 14px;
line-height: 20px;
padding: 6px 6px 6px 12px;
box-shadow: none;
margin: 0;
transition: box-shadow 150ms;
transition: border 150ms;
::placeholder {
color: ${colorTextLighter()};
Expand Down Expand Up @@ -155,15 +157,16 @@ const StyledInput = styled.input<StyledInputProps>`
`
: null}
box-shadow: ${({$strokeColor}) => $strokeColor} inset 0px 0px 0px 1px,
${colorKeylineDefault()} inset 2px 2px 1.5px;
box-shadow: ${colorBorderDefault()} inset 0px 0px 0px 1px;
padding: ${({$hasIcon}) => ($hasIcon ? '6px 6px 6px 28px' : '6px 6px 6px 12px')};
transition: box-shadow 150ms;
:hover {
box-shadow: ${colorBorderHover()} inset 0px 0px 0px 1px;
}
:focus {
box-shadow:
${({$strokeColor}) => $strokeColor} inset 0px 0px 0px 1px,
${colorKeylineDefault()} inset 2px 2px 1.5px,
rgba(58, 151, 212, 0.6) 0 0 0 3px;
${colorBorderFocussed()} 0px 0px 0px 1px;
background-color: ${colorBackgroundDefaultHover()};
}
`;

Expand All @@ -175,14 +178,17 @@ interface TextAreaProps {
export const TextArea = styled.textarea<TextAreaProps>`
${TextInputStyles}
box-shadow: ${({$strokeColor}) => $strokeColor || colorBorderDefault()} inset 0px 0px 0px 1px,
${colorKeylineDefault()} inset 2px 2px 1.5px;
box-shadow: ${colorBorderDefault()} inset 0px 0px 0px 1px;
:hover {
${colorBorderHover()} inset 0px 0px 0px 1px;
}
:hover {
box-shadow: ${colorBorderHover()} inset 0px 0px 0px 1px;
}
:focus {
box-shadow:
${({$strokeColor}) => $strokeColor || colorBorderDefault()} inset 0px 0px 0px 1px,
${colorKeylineDefault()} inset 2px 2px 1.5px,
rgba(58, 151, 212, 0.6) 0 0 0 3px;
${colorBorderFocussed()} 0px 0px 0px 1px;
background-color: ${colorBackgroundDefaultHover()};
}
${({$resize}) => ($resize ? `resize: ${$resize};` : null)}
Expand Down
5 changes: 3 additions & 2 deletions js_modules/dagster-ui/packages/ui-components/src/components/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React from 'react';
import styled, {createGlobalStyle, css} from 'styled-components';

import {CoreColors} from '../palettes/Colors';
import {colorTooltipBackground, colorTooltipText} from '../theme/color';

import {FontFamily} from './styles';

Expand All @@ -13,8 +14,8 @@ export const GlobalTooltipStyle = createGlobalStyle`
font-family: ${FontFamily.default};
font-size: 12px;
line-height: 16px;
background: ${CoreColors.Gray900};
color: ${CoreColors.Gray50};
background: ${colorTooltipBackground()};
color: ${colorTooltipText()};
padding: 8px 16px;
}
Expand Down
24 changes: 24 additions & 0 deletions js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export enum ColorName {
BorderDefault = 'BorderDefault',
BorderHover = 'BorderHover',
BorderDisabled = 'BorderDisabled',
BorderFocussed = 'BorderFocussed',
AccentPrimary = 'AccentPrimary',
AccentPrimaryHover = 'AccentPrimaryHover',
AccentReversed = 'AccentReversed',
Expand All @@ -56,6 +57,29 @@ export enum ColorName {
AccentCyanHover = 'AccentCyanHover',
AccentLime = 'AccentLime',
AccentLimeHover = 'AccentLimeHover',
AccentLavender = 'AccentLavender',
AccentLavenderHover = 'AccentLavenderHover',
AccentGray = 'AccentGray',
AccentGrayHover = 'AccentGrayHover',
AccentWhite = 'AccentWhite',
DialogBackground = 'DialogBackground',
TooltipBackground = 'TooltipBackground',
TooltipText = 'TooltipText',
PopoverBackground = 'PopoverBackground',
PopoverBackgroundHover = 'PopoverBackgroundHover',
//Lineage Graph
LineageDots = 'LineageDots',
LineageEdge = 'LineageEdge',
LineageEdgeHighlighted = 'LineageEdgeHighlighted',
LineageGroupNodeBackground = 'LineageGroupNodeBackground',
LineageGroupNodeBackgroundHover = 'LineageGroupNodeBackgroundHover',
LineageGroupNodeBorder = 'LineageGroupNodeBorder',
LineageGroupNodeBorderHover = 'LineageGroupNodeBorderHover',
LineageGroupBackground = 'LineageGroupBackground',

LineageNodeBackground = 'LineageNodeBackground',
LineageNodeBackgroundHover = 'LineageNodeBackgroundHover',
LineageNodeBorder = 'LineageNodeBorder',
LineageNodeBorderHover = 'LineageNodeBorderHover',
LineageNodeBorderSelected = 'LineageNodeBorderSelected',
}
4 changes: 4 additions & 0 deletions js_modules/dagster-ui/packages/ui-components/src/palettes/Colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,4 +155,8 @@ export const TranslucentColors = {
Gray20: 'rgba(156, 172, 151, 0.20)',
Gray25: 'rgba(156, 172, 151, 0.25)',
Gray30: 'rgba(156, 172, 151, 0.30)',
Gray50: 'rgba(13, 17, 33, 0.50)',
Gray90: 'rgba(13, 17, 33, 0.90)',
LightWash: 'rgba(247, 248, 249, 0.40)',
DarkWash: 'rgba(13, 17, 33, 0.40)',
};
Loading

0 comments on commit 6969df1

Please sign in to comment.