From ee7e012865270e1d9e073a960968ddd040acadd9 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 24 Aug 2022 15:58:26 -0600 Subject: [PATCH 01/41] Initial color update to base.ts --- code/lib/theming/src/base.ts | 38 ++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index d44ca2af7860..50a847ec2ae8 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -2,10 +2,10 @@ import { transparentize } from 'polished'; export const color = { // Official color palette - primary: '#FF4785', // coral - secondary: '#1EA7FD', // ocean - tertiary: '#FAFBFC', - ancillary: '#22a699', // for code + primary: '#FF4785', // coral // Is it time to remove primary and make ocan primary? Or should we make them 'pink', 'blue, etc'? + secondary: '#029CFD', // ocean // UPDATED + tertiary: '#FAFBFC', // Used in shortcuts, link, input? + ancillary: '#22a699', // used at all? // Complimentary orange: '#FC521F', @@ -17,31 +17,31 @@ export const color = { // Monochrome lightest: '#FFFFFF', - lighter: '#F8F8F8', - light: '#F3F3F3', - mediumlight: '#EEEEEE', - medium: '#DDDDDD', - mediumdark: '#999999', - dark: '#666666', - darker: '#444444', - darkest: '#333333', + lighter: '#F7FAFC', // object select background + light: '#EEF3F6', // code background + mediumlight: '#ECF4F9', // toggle background + medium: '#D9E8F2', // too blue for medium? + mediumdark: '#73828C', // icons, tabs, labels, input placeholders, sidebar headings + dark: '#666666', // NEEDED? + darker: '#454E54', // keyboard shortcut text * controls table content/headings + darkest: '#2E3438', // default text // For borders - border: 'rgba(0,0,0,.1)', + border: 'hsla(203, 30%, 40%, 0.15)', // Status - positive: '#66BF3C', - negative: '#FF4400', - warning: '#E69D00', + positive: '#448028', + negative: '#D43900', + warning: '#A15C20', critical: '#FFFFFF', - defaultText: '#333333', + defaultText: '#2E3438', inverseText: '#FFFFFF', }; export const background = { - app: '#F6F9FC', - bar: '#FFFFFF', + app: '#F5FBFF', // UPDATED + bar: color.lightest, content: color.lightest, gridCellSize: 10, hoverable: transparentize(0.93, color.secondary), // hover state for items in a list From 9c394de9abe0f98b8c769d2804940563d1e11392 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 24 Aug 2022 16:35:33 -0600 Subject: [PATCH 02/41] Updated search styles and changed muted text in the light theme --- code/lib/components/src/form/form.stories.tsx | 2 +- code/lib/components/src/form/input/input.tsx | 3 ++- code/lib/theming/src/themes/light.ts | 2 +- code/lib/ui/src/components/sidebar/Search.tsx | 15 ++++++++------- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/code/lib/components/src/form/form.stories.tsx b/code/lib/components/src/form/form.stories.tsx index 38124f1c9bca..e52ad018f3c5 100644 --- a/code/lib/components/src/form/form.stories.tsx +++ b/code/lib/components/src/form/form.stories.tsx @@ -131,7 +131,7 @@ storiesOf('Basics/Form/Input', module) {['auto', 'flex', '100%'].map((size) => ( - + ))} diff --git a/code/lib/components/src/form/input/input.tsx b/code/lib/components/src/form/input/input.tsx index a12a1610dba7..119d9595d09e 100644 --- a/code/lib/components/src/form/input/input.tsx +++ b/code/lib/components/src/form/input/input.tsx @@ -42,8 +42,9 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({ '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` }, - '::placeholder': { + '&::placeholder': { color: theme.color.mediumdark, + opacity: 1, }, }); diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts index 1a647a2e6a60..c866a451eb73 100644 --- a/code/lib/theming/src/themes/light.ts +++ b/code/lib/theming/src/themes/light.ts @@ -21,7 +21,7 @@ const theme: ThemeVars = { // Text colors textColor: color.darkest, textInverseColor: color.lightest, - textMutedColor: color.dark, + textMutedColor: color.mediumdark, // Toolbar default and active colors barTextColor: color.mediumdark, diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 7dcb3f9ab9a9..83ce6574386a 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -77,7 +77,7 @@ const Input = styled.input(({ theme }) => ({ height: 32, paddingLeft: 30, paddingRight: 32, - border: `1px solid ${transparentize(0.6, theme.color.mediumdark)}`, + border: `1px solid ${theme.color.border}`, background: 'transparent', borderRadius: 32, fontSize: `${theme.typography.size.s1 + 1}px`, @@ -90,7 +90,8 @@ const Input = styled.input(({ theme }) => ({ background: theme.background.app, }, '&::placeholder': { - color: theme.textMutedColor, + color: theme.color.mediumdark, + opacity: 1, }, '&:valid ~ code, &:focus ~ code': { display: 'none', @@ -117,11 +118,11 @@ const FocusKey = styled.code(({ theme }) => ({ width: 16, height: 16, zIndex: 1, - lineHeight: '17px', + lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: 'rgba(0,0,0,0.1)', - color: theme.textMutedColor, + background: 'rgba(0,0,0,0.05)', + color: theme.color.darker, borderRadius: 3, userSelect: 'none', pointerEvents: 'none', @@ -135,9 +136,9 @@ const ClearIcon = styled(Icons)(({ theme }) => ({ top: 8, right: 16, zIndex: 1, - background: 'rgba(0,0,0,0.1)', + background: 'rgba(0,0,0,0.05)', borderRadius: 16, - color: theme.color.defaultText, + color: theme.color.darker, cursor: 'pointer', })); From 3e1c1588dfc47070077e93042e88b9f537d5f83e Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 24 Aug 2022 16:39:45 -0600 Subject: [PATCH 03/41] Updated SearchResults colors and tweaked keyboard shortcut --- code/lib/ui/src/components/sidebar/Search.tsx | 2 +- code/lib/ui/src/components/sidebar/SearchResults.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 83ce6574386a..39be51f1e674 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -138,7 +138,7 @@ const ClearIcon = styled(Icons)(({ theme }) => ({ zIndex: 1, background: 'rgba(0,0,0,0.05)', borderRadius: 16, - color: theme.color.darker, + color: theme.color.dark, cursor: 'pointer', })); diff --git a/code/lib/ui/src/components/sidebar/SearchResults.tsx b/code/lib/ui/src/components/sidebar/SearchResults.tsx index bc8dcf1b9164..85b00ba48111 100644 --- a/code/lib/ui/src/components/sidebar/SearchResults.tsx +++ b/code/lib/ui/src/components/sidebar/SearchResults.tsx @@ -83,11 +83,11 @@ const ActionIcon = styled(Icons)(({ theme }) => ({ const ActionKey = styled.code(({ theme }) => ({ minWidth: 16, height: 16, - lineHeight: '17px', + lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: 'rgba(0,0,0,0.1)', - color: theme.textMutedColor, + background: 'rgba(0,0,0,0.05)', + color: theme.color.dark, borderRadius: 2, userSelect: 'none', pointerEvents: 'none', From 1e6c97080492ccfc1af6d7f5ccad2fb5c9b135cb Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 24 Aug 2022 16:52:18 -0600 Subject: [PATCH 04/41] Updated menu shortcut colors --- code/lib/ui/src/containers/menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/ui/src/containers/menu.tsx b/code/lib/ui/src/containers/menu.tsx index 5509c55979aa..54d8e836602a 100644 --- a/code/lib/ui/src/containers/menu.tsx +++ b/code/lib/ui/src/containers/menu.tsx @@ -19,8 +19,8 @@ const Key = styled.code(({ theme }) => ({ lineHeight: '17px', textAlign: 'center', fontSize: '11px', - background: 'rgba(0,0,0,0.07)', - color: theme.color.defaultText, + background: 'rgba(0,0,0,0.05)', + color: theme.color.dark, borderRadius: 2, userSelect: 'none', pointerEvents: 'none', From 13bdc8ec4a2d21b2718ffe4ea8e5a00858bb697a Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 24 Aug 2022 17:53:59 -0600 Subject: [PATCH 05/41] Removed use of symbols temporarily so the sidebar looks right in Firefox --- code/lib/theming/src/base.ts | 4 ++-- code/lib/ui/src/components/sidebar/Search.tsx | 2 +- code/lib/ui/src/components/sidebar/TreeNode.tsx | 9 +++++---- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 50a847ec2ae8..34e26e3f342a 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -22,8 +22,8 @@ export const color = { mediumlight: '#ECF4F9', // toggle background medium: '#D9E8F2', // too blue for medium? mediumdark: '#73828C', // icons, tabs, labels, input placeholders, sidebar headings - dark: '#666666', // NEEDED? - darker: '#454E54', // keyboard shortcut text * controls table content/headings + dark: '#5C6870', // keyboard shortcut text + darker: '#454E54', // controls table content/headings darkest: '#2E3438', // default text // For borders diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 39be51f1e674..bf7f41320894 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -122,7 +122,7 @@ const FocusKey = styled.code(({ theme }) => ({ textAlign: 'center', fontSize: '11px', background: 'rgba(0,0,0,0.05)', - color: theme.color.darker, + color: theme.color.dark, borderRadius: 3, userSelect: 'none', pointerEvents: 'none', diff --git a/code/lib/ui/src/components/sidebar/TreeNode.tsx b/code/lib/ui/src/components/sidebar/TreeNode.tsx index 04c47c700831..c42be2f7b330 100644 --- a/code/lib/ui/src/components/sidebar/TreeNode.tsx +++ b/code/lib/ui/src/components/sidebar/TreeNode.tsx @@ -45,6 +45,7 @@ const TypeIcon = styled(Icons)<{ docsMode?: boolean }>( marginRight: 5, flex: '0 0 auto', }, + ({ theme, icon, symbol = icon, docsMode }) => { const colors = theme.base === 'dark' ? iconColors.dark : iconColors.light; const colorKey = docsMode && symbol === 'document' ? 'docsModeDocument' : symbol; @@ -147,7 +148,7 @@ export const GroupNode: FunctionComponent< > = React.memo(({ children, isExpanded = false, isExpandable = false, ...props }) => ( {isExpandable ? : null} - + {children} )); @@ -156,7 +157,7 @@ export const ComponentNode: FunctionComponent> ({ theme, children, isExpanded, isExpandable, isSelected, ...props }) => ( {isExpandable && } - + {children} ) @@ -166,7 +167,7 @@ export const DocumentNode: FunctionComponent< ComponentProps & { docsMode: boolean } > = React.memo(({ theme, children, docsMode, ...props }) => ( - + {children} )); @@ -174,7 +175,7 @@ export const DocumentNode: FunctionComponent< export const StoryNode: FunctionComponent> = React.memo( ({ theme, children, ...props }) => ( - + {children} ) From d9ce045dd6a7649602d6b448eedff559ede47392 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 09:24:15 -0600 Subject: [PATCH 06/41] Sidebar icons now work properly in Firefox --- code/lib/components/src/icon/icon.tsx | 1 + code/lib/ui/src/components/sidebar/TreeNode.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/code/lib/components/src/icon/icon.tsx b/code/lib/components/src/icon/icon.tsx index aac07647181a..db82941c44c7 100644 --- a/code/lib/components/src/icon/icon.tsx +++ b/code/lib/components/src/icon/icon.tsx @@ -7,6 +7,7 @@ const Svg = styled.svg` shape-rendering: inherit; transform: translate3d(0, 0, 0); vertical-align: middle; + fill: currentColor; path { fill: currentColor; diff --git a/code/lib/ui/src/components/sidebar/TreeNode.tsx b/code/lib/ui/src/components/sidebar/TreeNode.tsx index c42be2f7b330..1c7ebab7a79c 100644 --- a/code/lib/ui/src/components/sidebar/TreeNode.tsx +++ b/code/lib/ui/src/components/sidebar/TreeNode.tsx @@ -148,7 +148,7 @@ export const GroupNode: FunctionComponent< > = React.memo(({ children, isExpanded = false, isExpandable = false, ...props }) => ( {isExpandable ? : null} - + {children} )); @@ -157,7 +157,7 @@ export const ComponentNode: FunctionComponent> ({ theme, children, isExpanded, isExpandable, isSelected, ...props }) => ( {isExpandable && } - + {children} ) @@ -167,7 +167,7 @@ export const DocumentNode: FunctionComponent< ComponentProps & { docsMode: boolean } > = React.memo(({ theme, children, docsMode, ...props }) => ( - + {children} )); @@ -175,7 +175,7 @@ export const DocumentNode: FunctionComponent< export const StoryNode: FunctionComponent> = React.memo( ({ theme, children, ...props }) => ( - + {children} ) From b4d74a617d94bac2658231de472ba8a33ec82c64 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 09:26:27 -0600 Subject: [PATCH 07/41] Add default body color --- code/lib/theming/src/global.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/theming/src/global.ts b/code/lib/theming/src/global.ts index 0afd3df63503..adfe92291101 100644 --- a/code/lib/theming/src/global.ts +++ b/code/lib/theming/src/global.ts @@ -1,4 +1,5 @@ import memoize from 'memoizerific'; +import { color } from './base'; import { Color, Background, Typography } from './types'; type Value = string | number; @@ -11,6 +12,7 @@ interface Return { export const createReset = memoize(1)( ({ typography }: { typography: Typography }): Return => ({ body: { + color: color.defaultText, fontFamily: typography.fonts.base, fontSize: typography.size.s3, margin: 0, From 10b6b3b6bb3c6e60386668d9bcc8de8f4fe4054c Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 09:58:14 -0600 Subject: [PATCH 08/41] Remove custom background color from Official Storybook --- code/examples/official-storybook/preview.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js index e4e0ef7fa7d9..b26483f089a0 100644 --- a/code/examples/official-storybook/preview.js +++ b/code/examples/official-storybook/preview.js @@ -46,7 +46,6 @@ const ThemeBlock = styled.div( padding: 10, }, ({ theme }) => ({ - background: theme.background.app, color: theme.color.defaultText, }), ({ side }) => @@ -67,7 +66,6 @@ const ThemeStack = styled.div( minHeight: 'calc(50vh - 15px)', }, ({ theme }) => ({ - background: theme.background.app, color: theme.color.defaultText, }) ); @@ -86,7 +84,6 @@ const PlayFnNotice = styled.div( }, }, ({ theme }) => ({ - background: theme.background.app, color: theme.color.defaultText, }) ); @@ -95,7 +92,6 @@ const ThemedSetRoot = () => { const theme = useTheme(); useEffect(() => { - document.body.style.background = theme.background.app; document.body.style.color = theme.defaultText; return () => { // From cc476d1c9f5cf51e55530a4db9f6d3edb2a22f01 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 10:22:35 -0600 Subject: [PATCH 09/41] Updated A11y tab bar background color --- code/addons/a11y/src/components/Tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx index 800c4e26396f..1dbbbec91c12 100644 --- a/code/addons/a11y/src/components/Tabs.tsx +++ b/code/addons/a11y/src/components/Tabs.tsx @@ -78,7 +78,7 @@ const TabsWrapper = styled.div({}); const List = styled.div(({ theme }) => ({ boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, - background: 'rgba(0, 0, 0, .05)', + background: theme.background.app, display: 'flex', justifyContent: 'space-between', whiteSpace: 'nowrap', From 90170f5e4e7449e9388bb0a482689b7600ea9b1a Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 11:56:05 -0600 Subject: [PATCH 10/41] Add optional button.background and button.border props - updated form buttons --- code/lib/components/src/Button/Button.tsx | 10 +++++----- code/lib/theming/src/convert.ts | 11 +++++++++-- code/lib/theming/src/themes/light.ts | 2 ++ code/lib/theming/src/types.ts | 2 ++ 4 files changed, 18 insertions(+), 7 deletions(-) diff --git a/code/lib/components/src/Button/Button.tsx b/code/lib/components/src/Button/Button.tsx index 7ef58930d3a7..7bd7e7b93a12 100644 --- a/code/lib/components/src/Button/Button.tsx +++ b/code/lib/components/src/Button/Button.tsx @@ -81,7 +81,7 @@ const ButtonWrapper = styled.button<{ let color; if (gray) { - color = theme.color.medium; + color = theme.color.mediumlight; } else if (secondary) { color = theme.color.secondary; } else if (primary) { @@ -114,10 +114,10 @@ const ButtonWrapper = styled.button<{ ? { background: theme.base === 'light' - ? darken(0.02, theme.input.background) + ? theme.button.background : lighten(0.02, theme.input.background), color: theme.input.color, - boxShadow: `${theme.input.border} 0 0 0 1px inset`, + boxShadow: `${theme.button.border} 0 0 0 1px inset`, borderRadius: theme.input.borderRadius, ...(inForm && small ? { padding: '10px 16px' } : {}), @@ -125,7 +125,7 @@ const ButtonWrapper = styled.button<{ '&:hover': { background: theme.base === 'light' - ? darken(0.05, theme.input.background) + ? darken(0.02, theme.button.background) : lighten(0.05, theme.input.background), ...(inForm ? {} @@ -134,7 +134,7 @@ const ButtonWrapper = styled.button<{ }), }, '&:active': { - background: theme.input.background, + background: theme.button.background, }, '&:focus': { boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`, diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts index fa7946cf8b81..717418d8a2cf 100644 --- a/code/lib/theming/src/convert.ts +++ b/code/lib/theming/src/convert.ts @@ -87,6 +87,8 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): barTextColor, barSelectedColor, barBg, + buttonBg, + buttonBorder, inputBg, inputBorder, inputTextColor, @@ -127,10 +129,15 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): easing, input: { - border: inputBorder, background: inputBg, - color: inputTextColor, + border: inputBorder, borderRadius: inputBorderRadius, + color: inputTextColor, + }, + + button: { + background: buttonBg || inputBg, + border: buttonBorder || inputBorder, }, // UI diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts index c866a451eb73..dc869a003a43 100644 --- a/code/lib/theming/src/themes/light.ts +++ b/code/lib/theming/src/themes/light.ts @@ -29,6 +29,8 @@ const theme: ThemeVars = { barBg: color.lightest, // Form colors + buttonBg: background.app, + buttonBorder: color.medium, inputBg: color.lightest, inputBorder: color.border, inputTextColor: color.darkest, diff --git a/code/lib/theming/src/types.ts b/code/lib/theming/src/types.ts index 7f886718ea21..b63fc4df03f9 100644 --- a/code/lib/theming/src/types.ts +++ b/code/lib/theming/src/types.ts @@ -29,6 +29,8 @@ export interface ThemeVars { barBg?: string; // Form colors + buttonBg?: string; + buttonBorder?: string; inputBg?: string; inputBorder?: string; inputTextColor?: string; From 7cbd3d009b79f3c0a2c1eae0bf3f5a5bd3bb3aa2 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 15:52:52 -0600 Subject: [PATCH 11/41] Updated Boolean, Object, Select colors --- .../stories/addon-controls.stories.tsx | 2 +- code/lib/blocks/src/controls/Boolean.tsx | 6 +-- code/lib/blocks/src/controls/Object.tsx | 2 +- .../blocks/src/controls/options/Select.tsx | 45 ++++++++++--------- 4 files changed, 28 insertions(+), 27 deletions(-) diff --git a/code/examples/official-storybook/stories/addon-controls.stories.tsx b/code/examples/official-storybook/stories/addon-controls.stories.tsx index 4cb748853fdf..156db9927390 100644 --- a/code/examples/official-storybook/stories/addon-controls.stories.tsx +++ b/code/examples/official-storybook/stories/addon-controls.stories.tsx @@ -45,7 +45,7 @@ export default { control: 'boolean', }, margin: { - control: 'number', + control: { type: 'range', min: 0, max: 30, step: 2 }, if: { arg: 'advanced' }, }, padding: { diff --git a/code/lib/blocks/src/controls/Boolean.tsx b/code/lib/blocks/src/controls/Boolean.tsx index d2ee8167b169..46ffba6cf67f 100644 --- a/code/lib/blocks/src/controls/Boolean.tsx +++ b/code/lib/blocks/src/controls/Boolean.tsx @@ -14,7 +14,7 @@ const Label = styled.label(({ theme }) => ({ display: 'inline-block', position: 'relative', whiteSpace: 'nowrap', - background: `${opacify(0.05, theme.appBorderColor)}`, + background: theme.color.mediumlight, borderRadius: '3em', padding: 1, @@ -50,7 +50,7 @@ const Label = styled.label(({ theme }) => ({ userSelect: 'none', borderRadius: '3em', - color: transparentize(0.4, theme.color.defaultText), + color: transparentize(0.5, theme.color.defaultText), background: 'transparent', '&:hover': { @@ -71,7 +71,7 @@ const Label = styled.label(({ theme }) => ({ }, 'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': { - background: theme.background.app, + background: theme.color.lightest, boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`, color: theme.color.defaultText, padding: '7px 15px', diff --git a/code/lib/blocks/src/controls/Object.tsx b/code/lib/blocks/src/controls/Object.tsx index 9c6b1445c03a..fea75a2a31e5 100644 --- a/code/lib/blocks/src/controls/Object.tsx +++ b/code/lib/blocks/src/controls/Object.tsx @@ -124,7 +124,7 @@ const Wrapper = styled.div(({ theme }) => ({ color: theme.color.defaultText, }, '.rejt-value-node:hover > .rejt-value': { - background: theme.background.app, + background: theme.color.lighter, borderColor: theme.color.border, }, })); diff --git a/code/lib/blocks/src/controls/options/Select.tsx b/code/lib/blocks/src/controls/options/Select.tsx index 6099a0483188..0119833da5f4 100644 --- a/code/lib/blocks/src/controls/options/Select.tsx +++ b/code/lib/blocks/src/controls/options/Select.tsx @@ -63,28 +63,29 @@ const OptionsSelect = styled.select(({ theme }) => ({ }, })); -const SelectWrapper = styled.span` - display: inline-block; - line-height: normal; - overflow: hidden; - position: relative; - vertical-align: top; - width: 100%; - - svg { - position: absolute; - z-index: 1; - pointer-events: none; - height: 12px; - margin-top: -6px; - right: 12px; - top: 50%; - - path { - fill: currentColor; - } - } -`; +const SelectWrapper = styled.span(({ theme }) => ({ + display: 'inline-block', + lineHeight: 'normal', + overflow: 'hidden', + position: 'relative', + verticalAlign: 'top', + width: '100%', + + svg: { + position: 'absolute', + zIndex: 1, + pointerEvents: 'none', + height: '12px', + marginTop: '-6px', + right: '12px', + top: '50%', + fill: theme.color.mediumdark, + + path: { + fill: theme.color.mediumdark, + }, + }, +})); type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean }; type SelectProps = ControlProps & SelectConfig; From c135e71079d6bf9377808af54827433b38ae1daf Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 16:00:49 -0600 Subject: [PATCH 12/41] Remove unused import --- code/lib/ui/src/components/sidebar/Search.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index bf7f41320894..7e30e716cf80 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -4,7 +4,6 @@ import { Icons } from '@storybook/components'; import Downshift, { DownshiftState, StateChangeOptions } from 'downshift'; import Fuse, { FuseOptions } from 'fuse.js'; import global from 'global'; -import { transparentize } from 'polished'; import React, { useMemo, useRef, useState, useCallback } from 'react'; import { DEFAULT_REF_ID } from './Sidebar'; From 5450a8e6ae96f138e27137e9a0f74ffef1e8a49b Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Thu, 25 Aug 2022 16:34:26 -0600 Subject: [PATCH 13/41] Reverted a change to be able to use side by side backgrounds --- code/examples/official-storybook/preview.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js index b26483f089a0..e6dbe9d9cbc5 100644 --- a/code/examples/official-storybook/preview.js +++ b/code/examples/official-storybook/preview.js @@ -46,6 +46,7 @@ const ThemeBlock = styled.div( padding: 10, }, ({ theme }) => ({ + background: theme.background.content, color: theme.color.defaultText, }), ({ side }) => @@ -66,6 +67,7 @@ const ThemeStack = styled.div( minHeight: 'calc(50vh - 15px)', }, ({ theme }) => ({ + background: theme.background.content, color: theme.color.defaultText, }) ); @@ -84,6 +86,7 @@ const PlayFnNotice = styled.div( }, }, ({ theme }) => ({ + background: theme.background.content, color: theme.color.defaultText, }) ); @@ -92,6 +95,7 @@ const ThemedSetRoot = () => { const theme = useTheme(); useEffect(() => { + document.body.style.background = theme.background.content; document.body.style.color = theme.defaultText; return () => { // From b296b88a07bd97b721c7c05223aae083bedec586 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Fri, 26 Aug 2022 08:45:28 -0600 Subject: [PATCH 14/41] Updated Interactions status colors --- code/addons/interactions/src/components/StatusBadge.tsx | 8 ++++---- .../interactions/src/components/StatusIcon.stories.tsx | 4 ++++ code/addons/interactions/src/components/StatusIcon.tsx | 4 ++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/code/addons/interactions/src/components/StatusBadge.tsx b/code/addons/interactions/src/components/StatusBadge.tsx index 4c28636166f3..888ff1224483 100644 --- a/code/addons/interactions/src/components/StatusBadge.tsx +++ b/code/addons/interactions/src/components/StatusBadge.tsx @@ -8,10 +8,10 @@ export interface StatusBadgeProps { const StyledBadge = styled.div(({ theme, status }) => { const backgroundColor = { - [CallStates.DONE]: theme.color.positive, - [CallStates.ERROR]: theme.color.negative, - [CallStates.ACTIVE]: theme.color.warning, - [CallStates.WAITING]: theme.color.warning, + [CallStates.DONE]: theme.color.green, + [CallStates.ERROR]: theme.background.critical, + [CallStates.ACTIVE]: theme.color.gold, + [CallStates.WAITING]: theme.color.gold, }[status]; return { padding: '4px 6px 4px 8px;', diff --git a/code/addons/interactions/src/components/StatusIcon.stories.tsx b/code/addons/interactions/src/components/StatusIcon.stories.tsx index 07c6cdd2d420..082f9c6c2312 100644 --- a/code/addons/interactions/src/components/StatusIcon.stories.tsx +++ b/code/addons/interactions/src/components/StatusIcon.stories.tsx @@ -10,6 +10,10 @@ export const Pending = { args: { status: CallStates.WAITING }, }; +export const Active = { + args: { status: CallStates.ACTIVE }, +}; + export const Error = { args: { status: CallStates.ERROR }, }; diff --git a/code/addons/interactions/src/components/StatusIcon.tsx b/code/addons/interactions/src/components/StatusIcon.tsx index b223a3960521..c28181ecc3d7 100644 --- a/code/addons/interactions/src/components/StatusIcon.tsx +++ b/code/addons/interactions/src/components/StatusIcon.tsx @@ -20,8 +20,8 @@ const { const StyledStatusIcon = styled(Icons)(({ theme, status }) => { const color = { - [CallStates.DONE]: theme.color.positive, - [CallStates.ERROR]: theme.color.negative, + [CallStates.DONE]: theme.color.green, + [CallStates.ERROR]: theme.background.critical, [CallStates.ACTIVE]: theme.color.secondary, [CallStates.WAITING]: transparentize(0.5, gray[500]), }[status]; From 7e89bdb00c643665973a04f15c80d85fa6584dcf Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Fri, 26 Aug 2022 08:51:14 -0600 Subject: [PATCH 15/41] Reverted change and added text-specific color variables --- .../addons/interactions/src/components/StatusBadge.tsx | 8 ++++---- code/addons/interactions/src/components/StatusIcon.tsx | 4 ++-- code/lib/theming/src/base.ts | 10 +++++++--- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/code/addons/interactions/src/components/StatusBadge.tsx b/code/addons/interactions/src/components/StatusBadge.tsx index 888ff1224483..4c28636166f3 100644 --- a/code/addons/interactions/src/components/StatusBadge.tsx +++ b/code/addons/interactions/src/components/StatusBadge.tsx @@ -8,10 +8,10 @@ export interface StatusBadgeProps { const StyledBadge = styled.div(({ theme, status }) => { const backgroundColor = { - [CallStates.DONE]: theme.color.green, - [CallStates.ERROR]: theme.background.critical, - [CallStates.ACTIVE]: theme.color.gold, - [CallStates.WAITING]: theme.color.gold, + [CallStates.DONE]: theme.color.positive, + [CallStates.ERROR]: theme.color.negative, + [CallStates.ACTIVE]: theme.color.warning, + [CallStates.WAITING]: theme.color.warning, }[status]; return { padding: '4px 6px 4px 8px;', diff --git a/code/addons/interactions/src/components/StatusIcon.tsx b/code/addons/interactions/src/components/StatusIcon.tsx index c28181ecc3d7..b223a3960521 100644 --- a/code/addons/interactions/src/components/StatusIcon.tsx +++ b/code/addons/interactions/src/components/StatusIcon.tsx @@ -20,8 +20,8 @@ const { const StyledStatusIcon = styled(Icons)(({ theme, status }) => { const color = { - [CallStates.DONE]: theme.color.green, - [CallStates.ERROR]: theme.background.critical, + [CallStates.DONE]: theme.color.positive, + [CallStates.ERROR]: theme.color.negative, [CallStates.ACTIVE]: theme.color.secondary, [CallStates.WAITING]: transparentize(0.5, gray[500]), }[status]; diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 34e26e3f342a..82e2ebe6e27c 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -30,13 +30,17 @@ export const color = { border: 'hsla(203, 30%, 40%, 0.15)', // Status - positive: '#448028', - negative: '#D43900', - warning: '#A15C20', + positive: '#66BF3C', + negative: '#FF4400', + warning: '#E69D00', critical: '#FFFFFF', + // Text defaultText: '#2E3438', inverseText: '#FFFFFF', + positiveText: '#448028', + negativeText: '#D43900', + warningText: '#A15C20', }; export const background = { From 99122fb1a78f8e9c275a25f919d0869c7947cd20 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Fri, 26 Aug 2022 09:12:38 -0600 Subject: [PATCH 16/41] Update a few addons with the new stats text colors and add them to convert.ts --- code/addons/a11y/src/components/A11YPanel.tsx | 6 +++--- code/addons/interactions/src/components/MatcherResult.tsx | 4 ++-- code/lib/theming/src/convert.ts | 3 +++ 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/addons/a11y/src/components/A11YPanel.tsx b/code/addons/a11y/src/components/A11YPanel.tsx index 82415c4bb827..cfc152365940 100644 --- a/code/addons/a11y/src/components/A11YPanel.tsx +++ b/code/addons/a11y/src/components/A11YPanel.tsx @@ -30,15 +30,15 @@ const RotatingIcon = styled(Icon)(({ theme }) => ({ })); const Passes = styled.span(({ theme }) => ({ - color: theme.color.positive, + color: theme.color.positiveText, })); const Violations = styled.span(({ theme }) => ({ - color: theme.color.negative, + color: theme.color.negativeText, })); const Incomplete = styled.span(({ theme }) => ({ - color: theme.color.warning, + color: theme.color.warningText, })); const Centered = styled.span({ diff --git a/code/addons/interactions/src/components/MatcherResult.tsx b/code/addons/interactions/src/components/MatcherResult.tsx index 4e3814702e3f..30e248ccf4fd 100644 --- a/code/addons/interactions/src/components/MatcherResult.tsx +++ b/code/addons/interactions/src/components/MatcherResult.tsx @@ -20,11 +20,11 @@ const parseValue = (value: string): any => { }; const StyledExpected = styled.span(({ theme }) => ({ - color: theme.color.positive, + color: theme.color.positiveText, })); const StyledReceived = styled.span(({ theme }) => ({ - color: theme.color.negative, + color: theme.color.negativeText, })); export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) => diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts index 717418d8a2cf..bdcf74cb8d43 100644 --- a/code/lib/theming/src/convert.ts +++ b/code/lib/theming/src/convert.ts @@ -69,6 +69,9 @@ const createColors = (vars: ThemeVars): Color => ({ defaultText: vars.textColor || color.darkest, inverseText: vars.textInverseColor || color.lightest, + positiveText: color.positiveText, + negativeText: color.negativeText, + warningText: color.warningText, }); export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): StorybookTheme => { From 7e40e8e984ac3dfeb1f1de60be3f7d46c895b1e6 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Fri, 26 Aug 2022 14:51:01 -0600 Subject: [PATCH 17/41] Initial update to the dark theme - required updating some variables in many components --- code/addons/a11y/src/components/Report/Item.tsx | 2 +- .../interactions/src/components/Interaction.tsx | 2 +- .../src/components/InteractionsPanel.tsx | 2 +- .../addons/interactions/src/components/List.tsx | 2 +- .../interactions/src/components/Subnav.tsx | 2 +- code/addons/jest/src/components/Result.tsx | 4 ++-- code/examples/official-storybook/preview.js | 2 +- .../src/components/ArgsTable/ArgsTable.tsx | 7 ++++--- code/lib/blocks/src/controls/Color.tsx | 2 +- code/lib/blocks/src/controls/Object.tsx | 10 +++++----- code/lib/blocks/src/controls/Range.tsx | 4 ++-- code/lib/blocks/src/controls/options/Select.tsx | 6 +++--- code/lib/components/src/Loader/Loader.tsx | 2 +- .../src/ScrollArea/GlobalScrollAreaStyles.tsx | 2 +- code/lib/components/src/form/input/input.tsx | 2 +- code/lib/components/src/tooltip/ListItem.tsx | 2 +- code/lib/components/src/tooltip/Tooltip.tsx | 2 +- .../lib/components/src/typography/link/link.tsx | 4 ++-- code/lib/theming/src/themes/dark.ts | 16 ++++++++-------- code/lib/theming/src/themes/light.ts | 2 +- code/lib/ui/src/app.stories.tsx | 17 ++++++++++++++++- code/lib/ui/src/components/layout/container.tsx | 13 ++++++++----- code/lib/ui/src/components/sidebar/Menu.tsx | 2 +- .../lib/ui/src/components/sidebar/RefBlocks.tsx | 2 +- code/lib/ui/src/components/sidebar/Search.tsx | 4 ++-- .../ui/src/components/sidebar/SearchResults.tsx | 4 ++-- code/lib/ui/src/components/sidebar/TreeNode.tsx | 4 ++-- code/lib/ui/src/settings/about.tsx | 2 +- code/lib/ui/src/settings/release_notes.tsx | 4 ++-- 29 files changed, 74 insertions(+), 55 deletions(-) diff --git a/code/addons/a11y/src/components/Report/Item.tsx b/code/addons/a11y/src/components/Report/Item.tsx index 48ae0ec3ded4..fc8229ee3585 100644 --- a/code/addons/a11y/src/components/Report/Item.tsx +++ b/code/addons/a11y/src/components/Report/Item.tsx @@ -23,7 +23,7 @@ const Icon = styled(Icons)(({ theme }) => ({ height: 10, width: 10, minWidth: 10, - color: theme.color.mediumdark, + color: theme.textMutedColor, marginRight: 10, transition: 'transform 0.1s ease-in-out', alignSelf: 'center', diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx index a982ad3d6fc3..b83dfeebbc80 100644 --- a/code/addons/interactions/src/components/Interaction.tsx +++ b/code/addons/interactions/src/components/Interaction.tsx @@ -92,7 +92,7 @@ const RowActions = styled.div({ }); export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({ - color: theme.color.mediumdark, + color: theme.textMutedColor, margin: '0 3px', })); diff --git a/code/addons/interactions/src/components/InteractionsPanel.tsx b/code/addons/interactions/src/components/InteractionsPanel.tsx index 71f8b83d882d..ab53206790be 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.tsx @@ -60,7 +60,7 @@ const CaughtExceptionCode = styled.code(({ theme }) => ({ lineHeight: 1, verticalAlign: 'top', background: 'rgba(0, 0, 0, 0.05)', - border: `1px solid ${theme.color.border}`, + border: `1px solid ${theme.appBorderColor}`, borderRadius: 3, })); const CaughtExceptionTitle = styled.div({ diff --git a/code/addons/interactions/src/components/List.tsx b/code/addons/interactions/src/components/List.tsx index af6005e13a86..b2acb5a6cbff 100644 --- a/code/addons/interactions/src/components/List.tsx +++ b/code/addons/interactions/src/components/List.tsx @@ -22,7 +22,7 @@ const Icon = styled(Icons)({ height: 10, width: 10, minWidth: 10, - color: convert(themes.light).color.mediumdark, + color: convert(themes.light).textMutedColor, marginRight: 10, transition: 'transform 0.1s ease-in-out', alignSelf: 'center', diff --git a/code/addons/interactions/src/components/Subnav.tsx b/code/addons/interactions/src/components/Subnav.tsx index ec3a911e7520..c6dde3ac7f75 100644 --- a/code/addons/interactions/src/components/Subnav.tsx +++ b/code/addons/interactions/src/components/Subnav.tsx @@ -57,7 +57,7 @@ const Note = styled(TooltipNote)(({ theme }) => ({ })); export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({ - color: theme.color.mediumdark, + color: theme.textMutedColor, margin: '0 3px', })); diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx index 3a53fad6b21c..054118a804ec 100644 --- a/code/addons/jest/src/components/Result.tsx +++ b/code/addons/jest/src/components/Result.tsx @@ -33,7 +33,7 @@ const Icon = styled(Icons)(({ theme }) => ({ height: 10, width: 10, minWidth: 10, - color: theme.color.mediumdark, + color: theme.textMutedColor, marginRight: 10, transition: 'transform 0.1s ease-in-out', alignSelf: 'center', @@ -66,7 +66,7 @@ export function Result(props: ResultProps) { {status === `failed` ? ( { useEffect(() => { document.body.style.background = theme.background.content; - document.body.style.color = theme.defaultText; + document.body.style.color = theme.color.defaultText; return () => { // }; diff --git a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx index 47292a5513bc..73359e820609 100644 --- a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -215,15 +215,16 @@ const ResetButton = styled.button(({ theme }) => ({ userSelect: 'none', margin: 0, - backgroundColor: theme.base === 'light' ? '#EAF3FC' : theme.color.border, + backgroundColor: theme.base === 'light' ? '#EAF3FC' : theme.appBorderColor, boxShadow: theme.base === 'light' - ? `${theme.color.border} 0 0 0 1px inset` + ? `${theme.appBorderColor} 0 0 0 1px inset` : `${theme.color.darker} 0 0 0 1px inset`, color: theme.color.secondary, '&:hover': { - background: theme.base === 'light' ? darken(0.03, '#EAF3FC') : opacify(0.1, theme.color.border), + background: + theme.base === 'light' ? darken(0.03, '#EAF3FC') : opacify(0.1, theme.appBorderColor), }, '&:focus': { diff --git a/code/lib/blocks/src/controls/Color.tsx b/code/lib/blocks/src/controls/Color.tsx index 75d306bdbe0e..74d262287820 100644 --- a/code/lib/blocks/src/controls/Color.tsx +++ b/code/lib/blocks/src/controls/Color.tsx @@ -59,7 +59,7 @@ const SwatchColor = styled.div<{ active: boolean }>(({ theme, active }) => ({ width: 16, height: 16, boxShadow: active - ? `${theme.appBorderColor} 0 0 0 1px inset, ${theme.color.mediumdark}50 0 0 0 4px` + ? `${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px` : `${theme.appBorderColor} 0 0 0 1px inset`, borderRadius: theme.appBorderRadius, })); diff --git a/code/lib/blocks/src/controls/Object.tsx b/code/lib/blocks/src/controls/Object.tsx index fea75a2a31e5..6333f5b49b7b 100644 --- a/code/lib/blocks/src/controls/Object.tsx +++ b/code/lib/blocks/src/controls/Object.tsx @@ -125,7 +125,7 @@ const Wrapper = styled.div(({ theme }) => ({ }, '.rejt-value-node:hover > .rejt-value': { background: theme.color.lighter, - borderColor: theme.color.border, + borderColor: theme.appBorderColor, }, })); @@ -151,7 +151,7 @@ const ActionIcon = styled(Icons)(({ theme, icon, disabled }: ActionIconProps) => padding: 3, marginLeft: 5, cursor: disabled ? 'not-allowed' : 'pointer', - color: theme.color.mediumdark, + color: theme.textMutedColor, '&:hover': disabled ? {} : { @@ -168,7 +168,7 @@ const Input = styled.input(({ theme, placeholder }) => ({ padding: '3px 4px', color: theme.color.defaultText, background: theme.background.app, - border: `1px solid ${theme.color.border}`, + border: `1px solid ${theme.appBorderColor}`, borderRadius: 4, lineHeight: '14px', width: placeholder === 'Key' ? 80 : 120, @@ -185,9 +185,9 @@ const RawButton = styled(IconButton)(({ theme }) => ({ height: 21, padding: '0 3px', background: theme.background.bar, - border: `1px solid ${theme.color.border}`, + border: `1px solid ${theme.appBorderColor}`, borderRadius: 3, - color: theme.color.mediumdark, + color: theme.textMutedColor, fontSize: '9px', fontWeight: 'bold', textDecoration: 'none', diff --git a/code/lib/blocks/src/controls/Range.tsx b/code/lib/blocks/src/controls/Range.tsx index 2238ec486a11..f54e218ea513 100644 --- a/code/lib/blocks/src/controls/Range.tsx +++ b/code/lib/blocks/src/controls/Range.tsx @@ -96,9 +96,9 @@ const RangeInput = styled.input<{ min: number; max: number; value: number }>( '&::-moz-range-thumb': { width: 16, height: 16, - border: `1px solid ${rgba(theme.color.border, 0.2)}`, + border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`, borderRadius: '50px', - boxShadow: `0 1px 3px 0px ${rgba(theme.color.border, 0.2)}`, + boxShadow: `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}`, cursor: 'grab', background: `${theme.input.background}`, transition: 'all 150ms ease-out', diff --git a/code/lib/blocks/src/controls/options/Select.tsx b/code/lib/blocks/src/controls/options/Select.tsx index 0119833da5f4..ff96ff08cf12 100644 --- a/code/lib/blocks/src/controls/options/Select.tsx +++ b/code/lib/blocks/src/controls/options/Select.tsx @@ -47,7 +47,7 @@ const OptionsSelect = styled.select(({ theme }) => ({ }, '::placeholder': { - color: theme.color.mediumdark, + color: theme.textMutedColor, }, '&[multiple]': { @@ -79,10 +79,10 @@ const SelectWrapper = styled.span(({ theme }) => ({ marginTop: '-6px', right: '12px', top: '50%', - fill: theme.color.mediumdark, + fill: theme.textMutedColor, path: { - fill: theme.color.mediumdark, + fill: theme.textMutedColor, }, }, })); diff --git a/code/lib/components/src/Loader/Loader.tsx b/code/lib/components/src/Loader/Loader.tsx index 82086ef83305..d86f75887745 100644 --- a/code/lib/components/src/Loader/Loader.tsx +++ b/code/lib/components/src/Loader/Loader.tsx @@ -70,7 +70,7 @@ const ErrorIcon = styled(Icons)(({ theme }) => ({ width: 20, height: 20, marginBottom: '0.5rem', - color: theme.color.mediumdark, + color: theme.textMutedColor, })); const ellipsis = keyframes` diff --git a/code/lib/components/src/ScrollArea/GlobalScrollAreaStyles.tsx b/code/lib/components/src/ScrollArea/GlobalScrollAreaStyles.tsx index 53cd4cac6708..593b06cecb21 100644 --- a/code/lib/components/src/ScrollArea/GlobalScrollAreaStyles.tsx +++ b/code/lib/components/src/ScrollArea/GlobalScrollAreaStyles.tsx @@ -418,7 +418,7 @@ export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) = borderRadius: 10, }, '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': { - background: theme.color.mediumdark, + background: theme.textMutedColor, opacity: 0.5, }, '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': { diff --git a/code/lib/components/src/form/input/input.tsx b/code/lib/components/src/form/input/input.tsx index 119d9595d09e..1f6114f2d31a 100644 --- a/code/lib/components/src/form/input/input.tsx +++ b/code/lib/components/src/form/input/input.tsx @@ -43,7 +43,7 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({ '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` }, '&::placeholder': { - color: theme.color.mediumdark, + color: theme.textMutedColor, opacity: 1, }, }); diff --git a/code/lib/components/src/tooltip/ListItem.tsx b/code/lib/components/src/tooltip/ListItem.tsx index 0b2266260407..f12cfcd5a062 100644 --- a/code/lib/components/src/tooltip/ListItem.tsx +++ b/code/lib/components/src/tooltip/ListItem.tsx @@ -102,7 +102,7 @@ const CenterText = styled.span( ({ theme, disabled }) => disabled ? { - color: theme.color.mediumdark, + color: theme.textMutedColor, } : {} ); diff --git a/code/lib/components/src/tooltip/Tooltip.tsx b/code/lib/components/src/tooltip/Tooltip.tsx index 73a63d314300..9aeb3ce676a5 100644 --- a/code/lib/components/src/tooltip/Tooltip.tsx +++ b/code/lib/components/src/tooltip/Tooltip.tsx @@ -104,7 +104,7 @@ const Wrapper = styled.div( background: theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) - : darken(theme.background.app), + : theme.background.app, filter: ` drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1)) diff --git a/code/lib/components/src/typography/link/link.tsx b/code/lib/components/src/typography/link/link.tsx index 073edd314e60..ddd9ac61ca62 100644 --- a/code/lib/components/src/typography/link/link.tsx +++ b/code/lib/components/src/typography/link/link.tsx @@ -100,10 +100,10 @@ const A = styled.a( ({ theme, secondary, tertiary }) => { let colors; if (secondary) { - colors = [theme.color.mediumdark, theme.color.dark, theme.color.darker]; + colors = [theme.textMutedColor, theme.color.dark, theme.color.darker]; } if (tertiary) { - colors = [theme.color.dark, theme.color.darkest, theme.color.mediumdark]; + colors = [theme.color.dark, theme.color.darkest, theme.textMutedColor]; } return colors diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts index a80d0378dc29..c2b66978195e 100644 --- a/code/lib/theming/src/themes/dark.ts +++ b/code/lib/theming/src/themes/dark.ts @@ -6,11 +6,11 @@ const theme: ThemeVars = { // Storybook-specific color palette colorPrimary: '#FF4785', // coral - colorSecondary: '#1EA7FD', // ocean + colorSecondary: '#029CFD', // ocean // UI - appBg: '#2f2f2f', - appContentBg: color.darkest, + appBg: '#222425', // should be accent/sidebar + appContentBg: '#1B1C1D', // should only be used for the content area appBorderColor: 'rgba(255,255,255,.1)', appBorderRadius: 4, @@ -19,14 +19,14 @@ const theme: ThemeVars = { fontCode: typography.fonts.mono, // Text colors - textColor: color.lightest, - textInverseColor: color.darkest, - textMutedColor: color.mediumdark, + textColor: '#C9CDCF', + textInverseColor: '#222425', + textMutedColor: '#798186', // Toolbar default and active colors - barTextColor: '#999999', + barTextColor: '#798186', barSelectedColor: color.secondary, - barBg: color.darkest, + barBg: '#292C2E', // Form colors inputBg: '#3f3f3f', diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts index dc869a003a43..e5a92b730049 100644 --- a/code/lib/theming/src/themes/light.ts +++ b/code/lib/theming/src/themes/light.ts @@ -6,7 +6,7 @@ const theme: ThemeVars = { // Storybook-specific color palette colorPrimary: '#FF4785', // coral - colorSecondary: '#1EA7FD', // ocean + colorSecondary: '#029CFD', // ocean // UI appBg: background.app, diff --git a/code/lib/ui/src/app.stories.tsx b/code/lib/ui/src/app.stories.tsx index 522e6bb7f841..804eeff29449 100644 --- a/code/lib/ui/src/app.stories.tsx +++ b/code/lib/ui/src/app.stories.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Provider as ManagerProvider } from '@storybook/api'; import { LocationProvider } from '@storybook/router'; import { HelmetProvider } from 'react-helmet-async'; +import { styled } from '@storybook/theming'; import App from './app'; import { PrettyFakeProvider, FakeProvider } from './FakeProvider'; @@ -16,13 +17,27 @@ export default { (StoryFn) => ( - + + + ), ], }; +const ThemeStack = styled.div( + { + position: 'relative', + minHeight: '50vh', + height: '100%', + }, + ({ theme }) => ({ + background: theme.background.app, + color: theme.color.defaultText, + }) +); + export const Default = () => ( ( { position: 'absolute', - top: 0, - left: 0, - width: '100%', - height: '100%', + top: 1, + left: 1, + bottom: 1, + right: 0, }, ({ isFullscreen, theme }) => isFullscreen @@ -100,7 +100,10 @@ const Paper = styled.div<{ isFullscreen: boolean }>( borderBottomLeftRadius: theme.appBorderRadius === 0 ? theme.appBorderRadius : theme.appBorderRadius + 1, overflow: 'hidden', - boxShadow: '0 1px 3px 1px rgba(0, 0, 0, 0.05), 0px 0 0px 1px rgba(0, 0, 0, 0.05)', + boxShadow: + theme.base === 'light' + ? '0 1px 3px 1px rgba(0, 0, 0, 0.05), 0px 0 0px 1px rgba(0, 0, 0, 0.05)' + : `0px 0 0px 1px ${theme.appBorderColor}`, transform: 'translateZ(0)', } ); diff --git a/code/lib/ui/src/components/sidebar/Menu.tsx b/code/lib/ui/src/components/sidebar/Menu.tsx index 01730871edbd..9b68d9be4ce2 100644 --- a/code/lib/ui/src/components/sidebar/Menu.tsx +++ b/code/lib/ui/src/components/sidebar/Menu.tsx @@ -26,7 +26,7 @@ export const SidebarIconButton: FC & { highlighted >(({ highlighted, theme }) => ({ position: 'relative', overflow: 'visible', - color: theme.color.mediumdark, + color: theme.textMutedColor, marginTop: 0, zIndex: 1, diff --git a/code/lib/ui/src/components/sidebar/RefBlocks.tsx b/code/lib/ui/src/components/sidebar/RefBlocks.tsx index ecc16e98b85f..ca79d1e8607c 100644 --- a/code/lib/ui/src/components/sidebar/RefBlocks.tsx +++ b/code/lib/ui/src/components/sidebar/RefBlocks.tsx @@ -51,7 +51,7 @@ const ErrorImportant = styled.strong(({ theme }) => ({ textDecoration: 'underline', })); const ErrorDetail = styled.em(({ theme }) => ({ - color: theme.color.mediumdark, + color: theme.textMutedColor, })); const firstLineRegex = /(Error): (.*)\n/; diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 7e30e716cf80..12727489490f 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -76,7 +76,7 @@ const Input = styled.input(({ theme }) => ({ height: 32, paddingLeft: 30, paddingRight: 32, - border: `1px solid ${theme.color.border}`, + border: `1px solid ${theme.appBorderColor}`, background: 'transparent', borderRadius: 32, fontSize: `${theme.typography.size.s1 + 1}px`, @@ -89,7 +89,7 @@ const Input = styled.input(({ theme }) => ({ background: theme.background.app, }, '&::placeholder': { - color: theme.color.mediumdark, + color: theme.textMutedColor, opacity: 1, }, '&:valid ~ code, &:focus ~ code': { diff --git a/code/lib/ui/src/components/sidebar/SearchResults.tsx b/code/lib/ui/src/components/sidebar/SearchResults.tsx index 85b00ba48111..52400df2896e 100644 --- a/code/lib/ui/src/components/sidebar/SearchResults.tsx +++ b/code/lib/ui/src/components/sidebar/SearchResults.tsx @@ -68,7 +68,7 @@ const BackActionRow = styled(ActionRow)({ const ActionLabel = styled.span(({ theme }) => ({ flexGrow: 1, - color: theme.color.mediumdark, + color: theme.textMutedColor, fontSize: `${theme.typography.size.s1}px`, })); @@ -77,7 +77,7 @@ const ActionIcon = styled(Icons)(({ theme }) => ({ width: 10, height: 10, marginRight: 6, - color: theme.color.mediumdark, + color: theme.textMutedColor, })); const ActionKey = styled.code(({ theme }) => ({ diff --git a/code/lib/ui/src/components/sidebar/TreeNode.tsx b/code/lib/ui/src/components/sidebar/TreeNode.tsx index 1c7ebab7a79c..477ba3313605 100644 --- a/code/lib/ui/src/components/sidebar/TreeNode.tsx +++ b/code/lib/ui/src/components/sidebar/TreeNode.tsx @@ -11,7 +11,7 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp marginTop: 6, marginLeft: 8, marginRight: 5, - color: transparentize(0.4, theme.color.mediumdark), + color: transparentize(0.4, theme.textMutedColor), borderTop: '3px solid transparent', borderBottom: '3px solid transparent', borderLeft: `3px solid`, @@ -140,7 +140,7 @@ export const RootNode = styled.div(({ theme }) => ({ minHeight: 20, letterSpacing: '0.35em', textTransform: 'uppercase', - color: theme.color.mediumdark, + color: theme.textMutedColor, })); export const GroupNode: FunctionComponent< diff --git a/code/lib/ui/src/settings/about.tsx b/code/lib/ui/src/settings/about.tsx index 2bce95b3bac8..ba2e1f8a211f 100644 --- a/code/lib/ui/src/settings/about.tsx +++ b/code/lib/ui/src/settings/about.tsx @@ -28,7 +28,7 @@ const Subheading = styled.span(({ theme }) => ({ fontWeight: theme.typography.weight.black, fontSize: theme.typography.size.s2 - 1, lineHeight: '24px', - color: theme.color.mediumdark, + color: theme.textMutedColor, })); const SubheadingLink = styled(Link)(({ theme }) => ({ diff --git a/code/lib/ui/src/settings/release_notes.tsx b/code/lib/ui/src/settings/release_notes.tsx index b15bde0c204c..b43cf3e892e8 100644 --- a/code/lib/ui/src/settings/release_notes.tsx +++ b/code/lib/ui/src/settings/release_notes.tsx @@ -17,7 +17,7 @@ const LoaderWrapper = styled.div({ const Message = styled.div(({ theme }) => ({ paddingTop: '12px', - color: theme.color.mediumdark, + color: theme.textMutedColor, maxWidth: '295px', margin: '0 auto', fontSize: `${theme.typography.size.s1}px`, @@ -43,7 +43,7 @@ const Iframe = styled.iframe<{ isLoaded: boolean }>( const AlertIcon = styled(((props) => ) as FC< Omit, 'icon'> >)(({ theme }) => ({ - color: theme.color.mediumdark, + color: theme.textMutedColor, width: 32, height: 32, margin: '0 auto', From 34a7b8e54b241b10fd3f2b66c475f647fb80ac03 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Fri, 26 Aug 2022 17:00:58 -0600 Subject: [PATCH 18/41] Updated boolean colors --- code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx | 9 +++------ code/lib/blocks/src/controls/Boolean.tsx | 9 ++++++--- code/lib/components/src/Button/Button.tsx | 7 ++----- code/lib/components/src/form/form.stories.tsx | 2 +- code/lib/theming/src/convert.ts | 7 +++++++ code/lib/theming/src/themes/dark.ts | 8 ++++++-- code/lib/theming/src/themes/light.ts | 2 ++ code/lib/theming/src/types.ts | 2 ++ 8 files changed, 29 insertions(+), 17 deletions(-) diff --git a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx index 73359e820609..20bef6554dc9 100644 --- a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -215,12 +215,9 @@ const ResetButton = styled.button(({ theme }) => ({ userSelect: 'none', margin: 0, - backgroundColor: theme.base === 'light' ? '#EAF3FC' : theme.appBorderColor, - boxShadow: - theme.base === 'light' - ? `${theme.appBorderColor} 0 0 0 1px inset` - : `${theme.color.darker} 0 0 0 1px inset`, - color: theme.color.secondary, + backgroundColor: theme.button.background, + boxShadow: `${theme.button.border} 0 0 0 1px inset`, + color: theme.textMutedColor, '&:hover': { background: diff --git a/code/lib/blocks/src/controls/Boolean.tsx b/code/lib/blocks/src/controls/Boolean.tsx index 46ffba6cf67f..7400bc9de5dd 100644 --- a/code/lib/blocks/src/controls/Boolean.tsx +++ b/code/lib/blocks/src/controls/Boolean.tsx @@ -14,7 +14,7 @@ const Label = styled.label(({ theme }) => ({ display: 'inline-block', position: 'relative', whiteSpace: 'nowrap', - background: theme.color.mediumlight, + background: theme.boolean.background, borderRadius: '3em', padding: 1, @@ -71,8 +71,11 @@ const Label = styled.label(({ theme }) => ({ }, 'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': { - background: theme.color.lightest, - boxShadow: `${opacify(0.1, theme.appBorderColor)} 0 0 2px`, + background: theme.boolean.selectedBackground, + boxShadow: + theme.base === 'light' + ? `${opacify(0.1, theme.appBorderColor)} 0 0 2px` + : `${theme.appBorderColor} 0 0 0 1px`, color: theme.color.defaultText, padding: '7px 15px', }, diff --git a/code/lib/components/src/Button/Button.tsx b/code/lib/components/src/Button/Button.tsx index 7bd7e7b93a12..a1180d548d50 100644 --- a/code/lib/components/src/Button/Button.tsx +++ b/code/lib/components/src/Button/Button.tsx @@ -112,10 +112,7 @@ const ButtonWrapper = styled.button<{ ({ theme, tertiary, inForm, small }) => tertiary ? { - background: - theme.base === 'light' - ? theme.button.background - : lighten(0.02, theme.input.background), + background: theme.button.background, color: theme.input.color, boxShadow: `${theme.button.border} 0 0 0 1px inset`, borderRadius: theme.input.borderRadius, @@ -126,7 +123,7 @@ const ButtonWrapper = styled.button<{ background: theme.base === 'light' ? darken(0.02, theme.button.background) - : lighten(0.05, theme.input.background), + : lighten(0.03, theme.button.background), ...(inForm ? {} : { diff --git a/code/lib/components/src/form/form.stories.tsx b/code/lib/components/src/form/form.stories.tsx index e52ad018f3c5..a4220cf03096 100644 --- a/code/lib/components/src/form/form.stories.tsx +++ b/code/lib/components/src/form/form.stories.tsx @@ -131,7 +131,7 @@ storiesOf('Basics/Form/Input', module) {['auto', 'flex', '100%'].map((size) => ( - + ))} diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts index bdcf74cb8d43..a2cd4c7ff56a 100644 --- a/code/lib/theming/src/convert.ts +++ b/code/lib/theming/src/convert.ts @@ -92,6 +92,8 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): barBg, buttonBg, buttonBorder, + booleanBg, + booleanSelectedBg, inputBg, inputBorder, inputTextColor, @@ -143,6 +145,11 @@ export const convert = (inherit: ThemeVars = themes[getPreferredColorScheme()]): border: buttonBorder || inputBorder, }, + boolean: { + background: booleanBg || inputBorder, + selectedBackground: booleanSelectedBg || inputBg, + }, + // UI layoutMargin: 10, appBorderColor, diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts index c2b66978195e..516a5e8ffb12 100644 --- a/code/lib/theming/src/themes/dark.ts +++ b/code/lib/theming/src/themes/dark.ts @@ -29,8 +29,12 @@ const theme: ThemeVars = { barBg: '#292C2E', // Form colors - inputBg: '#3f3f3f', - inputBorder: 'rgba(0,0,0,.3)', + buttonBg: '#222425', + buttonBorder: 'rgba(255,255,255,.1)', + booleanBg: '#222425', + booleanSelectedBg: '#2E3438', + inputBg: '#1B1C1D', + inputBorder: 'rgba(255,255,255,.1)', inputTextColor: color.lightest, inputBorderRadius: 4, }; diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts index e5a92b730049..9ca253bca7ce 100644 --- a/code/lib/theming/src/themes/light.ts +++ b/code/lib/theming/src/themes/light.ts @@ -31,6 +31,8 @@ const theme: ThemeVars = { // Form colors buttonBg: background.app, buttonBorder: color.medium, + booleanBg: color.mediumlight, + booleanSelectedBg: color.lightest, inputBg: color.lightest, inputBorder: color.border, inputTextColor: color.darkest, diff --git a/code/lib/theming/src/types.ts b/code/lib/theming/src/types.ts index b63fc4df03f9..01944364a83e 100644 --- a/code/lib/theming/src/types.ts +++ b/code/lib/theming/src/types.ts @@ -31,6 +31,8 @@ export interface ThemeVars { // Form colors buttonBg?: string; buttonBorder?: string; + booleanBg?: string; + booleanSelectedBg?: string; inputBg?: string; inputBorder?: string; inputTextColor?: string; From afdb7531692ca7bcf1f787e209df3f8defb5eb32 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 08:53:50 -0600 Subject: [PATCH 19/41] Update Header h1 style to be a little more predictable --- code/examples/official-storybook/components/page/header.css | 1 + 1 file changed, 1 insertion(+) diff --git a/code/examples/official-storybook/components/page/header.css b/code/examples/official-storybook/components/page/header.css index c1a97056ed44..ee49dcf19bad 100644 --- a/code/examples/official-storybook/components/page/header.css +++ b/code/examples/official-storybook/components/page/header.css @@ -13,6 +13,7 @@ svg { } .title { + color: #333; font-weight: 900; font-size: 20px; line-height: 1; From 5f421b438d751f70b9b89e3371d362edc856d97b Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 09:07:16 -0600 Subject: [PATCH 20/41] Improved text contrast in Matcher results --- code/addons/interactions/src/components/MatcherResult.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/addons/interactions/src/components/MatcherResult.tsx b/code/addons/interactions/src/components/MatcherResult.tsx index 30e248ccf4fd..4f5368bd46ba 100644 --- a/code/addons/interactions/src/components/MatcherResult.tsx +++ b/code/addons/interactions/src/components/MatcherResult.tsx @@ -20,11 +20,11 @@ const parseValue = (value: string): any => { }; const StyledExpected = styled.span(({ theme }) => ({ - color: theme.color.positiveText, + color: theme.base === 'light' ? theme.color.positiveText : theme.color.positive, })); const StyledReceived = styled.span(({ theme }) => ({ - color: theme.color.negativeText, + color: theme.base === 'light' ? theme.color.negativeText : theme.color.negative, })); export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) => From ddb3aa9e88f041f11d68dde42e60f20afbc98afa Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 09:28:18 -0600 Subject: [PATCH 21/41] Updated badge colors and corresponding story --- .../components/src/Badge/Badge.stories.tsx | 4 +++- code/lib/components/src/Badge/Badge.tsx | 23 ++++++++++++++++--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/code/lib/components/src/Badge/Badge.stories.tsx b/code/lib/components/src/Badge/Badge.stories.tsx index be120120e6f0..f579398065b2 100644 --- a/code/lib/components/src/Badge/Badge.stories.tsx +++ b/code/lib/components/src/Badge/Badge.stories.tsx @@ -4,8 +4,10 @@ import { Badge } from './Badge'; storiesOf('Basics/Badge', module).add('all badges', () => (
+ Neutral Positive + Warning Negative - Neutral + Critical
)); diff --git a/code/lib/components/src/Badge/Badge.tsx b/code/lib/components/src/Badge/Badge.tsx index d0c40bd71af5..4c6e4832f657 100644 --- a/code/lib/components/src/Badge/Badge.tsx +++ b/code/lib/components/src/Badge/Badge.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; +import { transparentize, lighten } from 'polished'; const BadgeWrapper = styled.div( ({ theme }) => ({ @@ -33,26 +34,42 @@ const BadgeWrapper = styled.div( } case 'negative': { return { - color: theme.color.negative, + color: theme.color.negativeText, background: theme.background.negative, + boxShadow: + theme.base === 'light' + ? `inset 0 0 0 1px ${transparentize(0.9, theme.color.negativeText)}` + : 'none', }; } case 'warning': { return { - color: theme.color.warning, + color: theme.color.warningText, background: theme.background.warning, + boxShadow: + theme.base === 'light' + ? `inset 0 0 0 1px ${transparentize(0.9, theme.color.warningText)}` + : 'none', }; } case 'neutral': { return { color: theme.color.dark, background: theme.color.mediumlight, + boxShadow: + theme.base === 'light' + ? `inset 0 0 0 1px ${transparentize(0.9, theme.color.dark)}` + : 'none', }; } case 'positive': { return { - color: theme.color.positive, + color: theme.color.positiveText, background: theme.background.positive, + boxShadow: + theme.base === 'light' + ? `inset 0 0 0 1px ${transparentize(0.9, theme.color.positiveText)}` + : 'none', }; } default: { From 22d52f03620fe9b1dd29bf4587041efd2a1cac02 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:01:28 -0600 Subject: [PATCH 22/41] Fix up ScrollArea.stories.tsx to be readable in light and dark mode --- code/lib/components/src/ScrollArea/ScrollArea.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/components/src/ScrollArea/ScrollArea.stories.tsx b/code/lib/components/src/ScrollArea/ScrollArea.stories.tsx index c520bfab49c6..47571f49f799 100644 --- a/code/lib/components/src/ScrollArea/ScrollArea.stories.tsx +++ b/code/lib/components/src/ScrollArea/ScrollArea.stories.tsx @@ -8,7 +8,7 @@ const Block = styled.span({ width: 40, marginTop: 5, marginRight: 5, - background: 'silver', + border: '1px solid silver', lineHeight: '40px', textAlign: 'center', fontSize: 9, From 4beb82aaf5f5fc3d97a8feb5055cae79b5fd5068 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:11:45 -0600 Subject: [PATCH 23/41] Minor updates to tooltip styles --- code/lib/components/src/tooltip/Tooltip.tsx | 8 ++++---- code/lib/components/src/tooltip/TooltipMessage.tsx | 2 +- code/lib/components/src/tooltip/TooltipNote.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/lib/components/src/tooltip/Tooltip.tsx b/code/lib/components/src/tooltip/Tooltip.tsx index 9aeb3ce676a5..2836700b6e62 100644 --- a/code/lib/components/src/tooltip/Tooltip.tsx +++ b/code/lib/components/src/tooltip/Tooltip.tsx @@ -56,7 +56,7 @@ const Arrow = styled.div( placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) - : darken(theme.background.app), + : theme.background.app, 'transparent' ), borderBottomColor: match( @@ -64,7 +64,7 @@ const Arrow = styled.div( placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) - : darken(theme.background.app), + : theme.background.app, 'transparent' ), borderLeftColor: match( @@ -72,7 +72,7 @@ const Arrow = styled.div( placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) - : darken(theme.background.app), + : theme.background.app, 'transparent' ), borderRightColor: match( @@ -80,7 +80,7 @@ const Arrow = styled.div( placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) - : darken(theme.background.app), + : theme.background.app, 'transparent' ), }) diff --git a/code/lib/components/src/tooltip/TooltipMessage.tsx b/code/lib/components/src/tooltip/TooltipMessage.tsx index a1aff343efc3..8f8697df9b9c 100644 --- a/code/lib/components/src/tooltip/TooltipMessage.tsx +++ b/code/lib/components/src/tooltip/TooltipMessage.tsx @@ -20,7 +20,7 @@ const Links = styled.div(({ theme }) => ({ })); const Message = styled.div(({ theme }) => ({ - color: theme.textColor, + color: theme.color.defaultText, lineHeight: '18px', })); diff --git a/code/lib/components/src/tooltip/TooltipNote.tsx b/code/lib/components/src/tooltip/TooltipNote.tsx index 9ff2b681f70e..b66cc0240647 100644 --- a/code/lib/components/src/tooltip/TooltipNote.tsx +++ b/code/lib/components/src/tooltip/TooltipNote.tsx @@ -12,7 +12,7 @@ const Note = styled.div(({ theme }) => ({ whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: -1, - background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)', + background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(0, 0, 0, 0.95)', margin: 6, })); From 84a501bb84d64cf47a23ad0346b8469806692b5d Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:16:02 -0600 Subject: [PATCH 24/41] Added `tertiary` prop to Button in Events story --- .../official-storybook/stories/core/events.stories.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/examples/official-storybook/stories/core/events.stories.js b/code/examples/official-storybook/stories/core/events.stories.js index f52f3b281781..877a05d35c64 100644 --- a/code/examples/official-storybook/stories/core/events.stories.js +++ b/code/examples/official-storybook/stories/core/events.stories.js @@ -13,5 +13,9 @@ export default { title: 'Core/Events', }; -export const Force = () => ; +export const Force = () => ( + +); Force.storyName = 'Force re-render'; From ef1067e0f62d8cb6409e87f774dbd485fa8fdcae Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:19:25 -0600 Subject: [PATCH 25/41] Slight improvement to Loaders text styles --- .../official-storybook/stories/core/loaders.stories.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/examples/official-storybook/stories/core/loaders.stories.js b/code/examples/official-storybook/stories/core/loaders.stories.js index e18cdb9795a5..bc121cbab24b 100644 --- a/code/examples/official-storybook/stories/core/loaders.stories.js +++ b/code/examples/official-storybook/stories/core/loaders.stories.js @@ -18,6 +18,9 @@ export const ZIndex = (args, { loaded }) => ( width: '100px', height: '100px', background: 'coral', + color: 'white', + padding: '10px', + fontSize: '14px', }} > This story has a very high z-index From bd94979ddcf364d63a74e351650f917115524bcb Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:31:56 -0600 Subject: [PATCH 26/41] Improve contrast of About page title --- code/lib/ui/src/settings/about.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/ui/src/settings/about.tsx b/code/lib/ui/src/settings/about.tsx index ba2e1f8a211f..75f48cb10d29 100644 --- a/code/lib/ui/src/settings/about.tsx +++ b/code/lib/ui/src/settings/about.tsx @@ -11,6 +11,7 @@ import SettingsFooter from './SettingsFooter'; const Header = styled.header(({ theme }) => ({ marginBottom: 20, fontSize: theme.typography.size.m3, + color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest, fontWeight: theme.typography.weight.black, alignItems: 'center', display: 'flex', From 2298dc1a4efe7e1ed250a7f83c38ff44cc8b482f Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:52:41 -0600 Subject: [PATCH 27/41] Updated keyboard shortcuts in dark mode --- code/lib/ui/src/components/sidebar/Search.tsx | 8 ++++---- code/lib/ui/src/containers/menu.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 12727489490f..808b132a452c 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -120,8 +120,8 @@ const FocusKey = styled.code(({ theme }) => ({ lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: 'rgba(0,0,0,0.05)', - color: theme.color.dark, + background: theme.base == 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', + color: theme.base == 'light' ? theme.color.dark : theme.textMutedColor, borderRadius: 3, userSelect: 'none', pointerEvents: 'none', @@ -135,9 +135,9 @@ const ClearIcon = styled(Icons)(({ theme }) => ({ top: 8, right: 16, zIndex: 1, - background: 'rgba(0,0,0,0.05)', + background: theme.base == 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)', borderRadius: 16, - color: theme.color.dark, + color: theme.base == 'light' ? theme.color.dark : theme.textMutedColor, cursor: 'pointer', })); diff --git a/code/lib/ui/src/containers/menu.tsx b/code/lib/ui/src/containers/menu.tsx index 54d8e836602a..f64d805586d5 100644 --- a/code/lib/ui/src/containers/menu.tsx +++ b/code/lib/ui/src/containers/menu.tsx @@ -16,11 +16,11 @@ const focusableUIElements = { const Key = styled.code(({ theme }) => ({ width: 16, height: 16, - lineHeight: '17px', + lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: 'rgba(0,0,0,0.05)', - color: theme.color.dark, + background: theme.base == 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', + color: theme.base == 'light' ? theme.color.dark : theme.textMutedColor, borderRadius: 2, userSelect: 'none', pointerEvents: 'none', From 933c0dbd49e0da470763e7b5a472563b2ad78d40 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 10:55:46 -0600 Subject: [PATCH 28/41] Fixed typo --- code/lib/ui/src/components/sidebar/Search.tsx | 8 ++++---- code/lib/ui/src/components/sidebar/SearchResults.tsx | 4 ++-- code/lib/ui/src/containers/menu.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 808b132a452c..c06897368202 100644 --- a/code/lib/ui/src/components/sidebar/Search.tsx +++ b/code/lib/ui/src/components/sidebar/Search.tsx @@ -120,8 +120,8 @@ const FocusKey = styled.code(({ theme }) => ({ lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: theme.base == 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', - color: theme.base == 'light' ? theme.color.dark : theme.textMutedColor, + background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', + color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor, borderRadius: 3, userSelect: 'none', pointerEvents: 'none', @@ -135,9 +135,9 @@ const ClearIcon = styled(Icons)(({ theme }) => ({ top: 8, right: 16, zIndex: 1, - background: theme.base == 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)', + background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)', borderRadius: 16, - color: theme.base == 'light' ? theme.color.dark : theme.textMutedColor, + color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor, cursor: 'pointer', })); diff --git a/code/lib/ui/src/components/sidebar/SearchResults.tsx b/code/lib/ui/src/components/sidebar/SearchResults.tsx index 52400df2896e..f014a4180c0b 100644 --- a/code/lib/ui/src/components/sidebar/SearchResults.tsx +++ b/code/lib/ui/src/components/sidebar/SearchResults.tsx @@ -86,8 +86,8 @@ const ActionKey = styled.code(({ theme }) => ({ lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: 'rgba(0,0,0,0.05)', - color: theme.color.dark, + background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', + color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor, borderRadius: 2, userSelect: 'none', pointerEvents: 'none', diff --git a/code/lib/ui/src/containers/menu.tsx b/code/lib/ui/src/containers/menu.tsx index f64d805586d5..f1144f7232e5 100644 --- a/code/lib/ui/src/containers/menu.tsx +++ b/code/lib/ui/src/containers/menu.tsx @@ -19,8 +19,8 @@ const Key = styled.code(({ theme }) => ({ lineHeight: '16px', textAlign: 'center', fontSize: '11px', - background: theme.base == 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', - color: theme.base == 'light' ? theme.color.dark : theme.textMutedColor, + background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)', + color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor, borderRadius: 2, userSelect: 'none', pointerEvents: 'none', From 3d6f0b923a67499928402fae30ec2d2ef36ace80 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 11:02:33 -0600 Subject: [PATCH 29/41] Remove unused bindings --- code/lib/components/src/Badge/Badge.tsx | 2 +- code/lib/components/src/tooltip/Tooltip.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/components/src/Badge/Badge.tsx b/code/lib/components/src/Badge/Badge.tsx index 4c6e4832f657..95ffe206131c 100644 --- a/code/lib/components/src/Badge/Badge.tsx +++ b/code/lib/components/src/Badge/Badge.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; -import { transparentize, lighten } from 'polished'; +import { transparentize } from 'polished'; const BadgeWrapper = styled.div( ({ theme }) => ({ diff --git a/code/lib/components/src/tooltip/Tooltip.tsx b/code/lib/components/src/tooltip/Tooltip.tsx index 2836700b6e62..5e6e30f6e0c1 100644 --- a/code/lib/components/src/tooltip/Tooltip.tsx +++ b/code/lib/components/src/tooltip/Tooltip.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import memoize from 'memoizerific'; -import { styled, Color, lighten, darken } from '@storybook/theming'; +import { styled, Color, lighten } from '@storybook/theming'; const match = memoize(1000)((requests, actual, value, fallback = 0) => actual.split('-')[0] === requests ? value : fallback From 1bccfa509a1affc596ec8595ca07dbd65c3f6466 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 11:31:00 -0600 Subject: [PATCH 30/41] Updated status messages on the About page --- code/lib/ui/src/settings/about.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/code/lib/ui/src/settings/about.tsx b/code/lib/ui/src/settings/about.tsx index 75f48cb10d29..f2b028be4aec 100644 --- a/code/lib/ui/src/settings/about.tsx +++ b/code/lib/ui/src/settings/about.tsx @@ -46,12 +46,15 @@ const Subheader = styled.div({ const UpdateMessage = styled.div<{ status: 'positive' | 'negative' | string }>( ({ status, theme }) => { if (status === 'positive') { - return { background: theme.background.positive, color: theme.color.positive }; + return { background: theme.background.positive, color: theme.color.positiveText }; } if (status === 'negative') { - return { background: theme.background.negative, color: theme.color.negative }; + return { background: theme.background.negative, color: theme.color.negativeText }; } - return { background: '#EAF3FC', color: theme.color.darkest }; + return { + background: theme.base === 'light' ? '#EAF3FC' : theme.color.darkest, + color: theme.base === 'light' ? theme.color.darkest : theme.defaultText, + }; }, ({ theme }) => ({ From 9eba06fd2a43d9d99d217f82c0364a7d7c406a52 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 11:38:42 -0600 Subject: [PATCH 31/41] Removed unnecessary CSS --- code/examples/official-storybook/components/page/header.css | 1 - 1 file changed, 1 deletion(-) diff --git a/code/examples/official-storybook/components/page/header.css b/code/examples/official-storybook/components/page/header.css index ee49dcf19bad..c1a97056ed44 100644 --- a/code/examples/official-storybook/components/page/header.css +++ b/code/examples/official-storybook/components/page/header.css @@ -13,7 +13,6 @@ svg { } .title { - color: #333; font-weight: 900; font-size: 20px; line-height: 1; From 9aab2c6bc78cc5f4c686ef59ffa35f51b6d47e69 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 12:15:40 -0600 Subject: [PATCH 32/41] Remove 1px border --- code/lib/ui/src/components/layout/container.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/ui/src/components/layout/container.tsx b/code/lib/ui/src/components/layout/container.tsx index 046ee06d50ab..7b74d211c0ea 100644 --- a/code/lib/ui/src/components/layout/container.tsx +++ b/code/lib/ui/src/components/layout/container.tsx @@ -83,10 +83,10 @@ const Pane = styled.div<{ const Paper = styled.div<{ isFullscreen: boolean }>( { position: 'absolute', - top: 1, - left: 1, - bottom: 1, - right: 0, + top: 0, + left: 0, + width: '100%', + height: '100%', }, ({ isFullscreen, theme }) => isFullscreen From c2c18f38381a42fbb7ce5064405d7006dddb529d Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 13:02:45 -0600 Subject: [PATCH 33/41] Update notifications background --- code/examples/official-storybook/manager.js | 2 +- .../lib/ui/src/components/notifications/NotificationItem.tsx | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/code/examples/official-storybook/manager.js b/code/examples/official-storybook/manager.js index 77104c4f6326..f18ab41de5b0 100644 --- a/code/examples/official-storybook/manager.js +++ b/code/examples/official-storybook/manager.js @@ -18,7 +18,7 @@ const PrefixIcon = styled(Icons)(({ theme }) => ({ })); addons.setConfig({ - theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' }, + theme: themes.dark, // { base: 'dark', brandTitle: 'Storybook!' }, previewTabs: { canvas: null, 'storybook/docs/panel': null, diff --git a/code/lib/ui/src/components/notifications/NotificationItem.tsx b/code/lib/ui/src/components/notifications/NotificationItem.tsx index c60dacfd2950..695c3638e50f 100644 --- a/code/lib/ui/src/components/notifications/NotificationItem.tsx +++ b/code/lib/ui/src/components/notifications/NotificationItem.tsx @@ -15,10 +15,7 @@ const Notification = styled.div(({ theme }) => ({ borderRadius: 4, alignItems: 'center', - background: - theme.base === 'light' - ? 'rgba(50,53,71,0.97)' - : 'linear-gradient(0deg, rgba(248,248,248,0.97) 0%, rgba(247,252,255,0.97) 100%)', + background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)', boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`, color: theme.color.inverseText, textDecoration: 'none', From 10fbe75c6b0cef1a98bb795e97aefecaf09f38e5 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 29 Aug 2022 13:11:57 -0600 Subject: [PATCH 34/41] Switch back to light theme --- code/examples/official-storybook/manager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/examples/official-storybook/manager.js b/code/examples/official-storybook/manager.js index f18ab41de5b0..77104c4f6326 100644 --- a/code/examples/official-storybook/manager.js +++ b/code/examples/official-storybook/manager.js @@ -18,7 +18,7 @@ const PrefixIcon = styled(Icons)(({ theme }) => ({ })); addons.setConfig({ - theme: themes.dark, // { base: 'dark', brandTitle: 'Storybook!' }, + theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' }, previewTabs: { canvas: null, 'storybook/docs/panel': null, From 19e6d16b80ed7246ca3c1901549e37abf240f5f8 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 30 Aug 2022 09:29:39 -0600 Subject: [PATCH 35/41] Removed unnecessary comments --- code/lib/theming/src/base.ts | 26 +++++++++++++------------- code/lib/theming/src/themes/dark.ts | 4 ++-- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 82e2ebe6e27c..99190a1e7a3e 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -2,10 +2,10 @@ import { transparentize } from 'polished'; export const color = { // Official color palette - primary: '#FF4785', // coral // Is it time to remove primary and make ocan primary? Or should we make them 'pink', 'blue, etc'? - secondary: '#029CFD', // ocean // UPDATED - tertiary: '#FAFBFC', // Used in shortcuts, link, input? - ancillary: '#22a699', // used at all? + primary: '#FF4785', // coral + secondary: '#029CFD', // ocean + tertiary: '#FAFBFC', + ancillary: '#22a699', // Complimentary orange: '#FC521F', @@ -17,14 +17,14 @@ export const color = { // Monochrome lightest: '#FFFFFF', - lighter: '#F7FAFC', // object select background - light: '#EEF3F6', // code background - mediumlight: '#ECF4F9', // toggle background - medium: '#D9E8F2', // too blue for medium? - mediumdark: '#73828C', // icons, tabs, labels, input placeholders, sidebar headings - dark: '#5C6870', // keyboard shortcut text - darker: '#454E54', // controls table content/headings - darkest: '#2E3438', // default text + lighter: '#F7FAFC', + light: '#EEF3F6', + mediumlight: '#ECF4F9', + medium: '#D9E8F2', + mediumdark: '#73828C', + dark: '#5C6870', + darker: '#454E54', + darkest: '#2E3438', // For borders border: 'hsla(203, 30%, 40%, 0.15)', @@ -44,7 +44,7 @@ export const color = { }; export const background = { - app: '#F5FBFF', // UPDATED + app: '#F5FBFF', bar: color.lightest, content: color.lightest, gridCellSize: 10, diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts index 516a5e8ffb12..ec9fa9f94f34 100644 --- a/code/lib/theming/src/themes/dark.ts +++ b/code/lib/theming/src/themes/dark.ts @@ -9,8 +9,8 @@ const theme: ThemeVars = { colorSecondary: '#029CFD', // ocean // UI - appBg: '#222425', // should be accent/sidebar - appContentBg: '#1B1C1D', // should only be used for the content area + appBg: '#222425', + appContentBg: '#1B1C1D', appBorderColor: 'rgba(255,255,255,.1)', appBorderRadius: 4, From 05dda62112a36b6edf62930b0fbae248aec91be3 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 30 Aug 2022 10:32:00 -0600 Subject: [PATCH 36/41] Increased contrast of border color in the light theme --- code/lib/theming/src/base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 99190a1e7a3e..241be54184c3 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -27,7 +27,7 @@ export const color = { darkest: '#2E3438', // For borders - border: 'hsla(203, 30%, 40%, 0.15)', + border: 'hsla(203, 50%, 30%, 0.2)', // 30 0.15, 30 0.2, // Status positive: '#66BF3C', From 05847713ef878a00dd2fd3383fb11f3758b7b9a7 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 30 Aug 2022 15:35:21 -0600 Subject: [PATCH 37/41] Minor update to color and border --- code/lib/theming/src/base.ts | 2 +- code/lib/theming/src/global.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 241be54184c3..3941b1c61ad2 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -27,7 +27,7 @@ export const color = { darkest: '#2E3438', // For borders - border: 'hsla(203, 50%, 30%, 0.2)', // 30 0.15, 30 0.2, + border: 'hsla(203, 50%, 30%, 0.2)', // Status positive: '#66BF3C', diff --git a/code/lib/theming/src/global.ts b/code/lib/theming/src/global.ts index adfe92291101..789b8b305d08 100644 --- a/code/lib/theming/src/global.ts +++ b/code/lib/theming/src/global.ts @@ -12,7 +12,6 @@ interface Return { export const createReset = memoize(1)( ({ typography }: { typography: Typography }): Return => ({ body: { - color: color.defaultText, fontFamily: typography.fonts.base, fontSize: typography.size.s3, margin: 0, From 912e6965dad0cceb1c7027bffbce948f40babb8e Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Tue, 30 Aug 2022 16:39:09 -0600 Subject: [PATCH 38/41] Update Storybook logo colors in dark mode --- code/lib/ui/src/components/sidebar/Brand.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/lib/ui/src/components/sidebar/Brand.tsx b/code/lib/ui/src/components/sidebar/Brand.tsx index e3bbdf527e07..455a341d90e6 100644 --- a/code/lib/ui/src/components/sidebar/Brand.tsx +++ b/code/lib/ui/src/components/sidebar/Brand.tsx @@ -3,11 +3,12 @@ import { styled, withTheme } from '@storybook/theming'; import { StorybookLogo } from '@storybook/components'; -export const StorybookLogoStyled = styled(StorybookLogo)({ +export const StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({ width: 'auto', height: '22px !important', display: 'block', -}); + color: theme.base === 'light' ? theme.color.defaultText : theme.color.lightest, +})); export const Img = styled.img({ width: 'auto', From 30db8420fbaf48697e23e419ffd2df92ffa371f8 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Wed, 31 Aug 2022 15:16:35 -0600 Subject: [PATCH 39/41] Removed unused import --- code/lib/theming/src/global.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/theming/src/global.ts b/code/lib/theming/src/global.ts index 789b8b305d08..0afd3df63503 100644 --- a/code/lib/theming/src/global.ts +++ b/code/lib/theming/src/global.ts @@ -1,5 +1,4 @@ import memoize from 'memoizerific'; -import { color } from './base'; import { Color, Background, Typography } from './types'; type Value = string | number; From f15e20df5b267375290dce77bbfeae152030ea3c Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 26 Sep 2022 11:57:19 -0600 Subject: [PATCH 40/41] Update AccountForm story to look nice with both dark and light themes --- .../stories/addon-interactions/AccountForm.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx b/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx index 22da93de5488..8a599f7fc09f 100644 --- a/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx +++ b/code/examples/official-storybook/stories/addon-interactions/AccountForm.tsx @@ -377,6 +377,7 @@ const Wrapper = styled.section(({ theme }) => ({ alignItems: 'center', width: 450, padding: 32, + color: theme.color.defaultText, backgroundColor: theme.background.content, borderRadius: 7, })); @@ -540,7 +541,7 @@ const Button = styled.button({ const Submit = styled(Button)(({ theme, dirty }) => ({ marginRight: 8, backgroundColor: theme.color.secondary, - color: theme.color.inverseText, + color: theme.color.lightest, opacity: dirty ? 1 : 0.6, boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset', })); From 1c968fc738394cba96db56b01936a21cca794dac Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 6 Oct 2022 11:12:46 +0800 Subject: [PATCH 41/41] Update snapshots / tests for new color scheme --- .../src/__snapshots__/storyshots.test.ts.snap | 24 +++++++++---------- code/lib/theming/src/tests/convert.test.js | 8 +++---- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap index 59c6462ebae9..e1ab86297a05 100644 --- a/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap +++ b/code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap @@ -30,9 +30,9 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = ` font-size: 12px; font-weight: 700; line-height: 1; - background: #fafafa; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; + background: #F5FBFF; + color: #2E3438; + box-shadow: #D9E8F2 0 0 0 1px inset; border-radius: 4px; padding: 10px 16px; display: inline; @@ -60,15 +60,15 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = ` } .emotion-0:hover { - background: #f2f2f2; + background: #ebf7ff; } .emotion-0:active { - background: #FFFFFF; + background: #F5FBFF; } .emotion-0:focus { - box-shadow: rgba(30,167,253,1) 0 0 0 1px inset; + box-shadow: rgba(2,156,253,1) 0 0 0 1px inset; outline: none; } @@ -116,9 +116,9 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = ` font-size: 12px; font-weight: 700; line-height: 1; - background: #fafafa; - color: #333333; - box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; + background: #F5FBFF; + color: #2E3438; + box-shadow: #D9E8F2 0 0 0 1px inset; border-radius: 4px; padding: 10px 16px; display: inline; @@ -146,15 +146,15 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = ` } .emotion-0:hover { - background: #f2f2f2; + background: #ebf7ff; } .emotion-0:active { - background: #FFFFFF; + background: #F5FBFF; } .emotion-0:focus { - box-shadow: rgba(30,167,253,1) 0 0 0 1px inset; + box-shadow: rgba(2,156,253,1) 0 0 0 1px inset; outline: none; } diff --git a/code/lib/theming/src/tests/convert.test.js b/code/lib/theming/src/tests/convert.test.js index 902a8314d5be..bcf45d1b76ad 100644 --- a/code/lib/theming/src/tests/convert.test.js +++ b/code/lib/theming/src/tests/convert.test.js @@ -16,10 +16,10 @@ describe('convert', () => { expect(result).toMatchObject({ color: expect.objectContaining({ primary: '#FF4785', - secondary: '#1EA7FD', + secondary: '#029CFD', }), background: expect.objectContaining({ - app: '#2f2f2f', + app: '#222425', }), }); }); @@ -30,10 +30,10 @@ describe('convert', () => { expect(result).toMatchObject({ color: expect.objectContaining({ primary: '#FF4785', - secondary: '#1EA7FD', + secondary: '#029CFD', }), background: expect.objectContaining({ - app: '#F6F9FC', + app: '#F5FBFF', }), }); });