Merge pull request #19023 from storybookjs/update-colors

UI: Update colors for 7.0
storybookjs · Oct 6, 2022 · a2cdd73 · a2cdd73
2 parents 93f9090 + 1c968fc
commit a2cdd73
Show file tree

Hide file tree

Showing 50 changed files with 243 additions and 162 deletions.
diff --git 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/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/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',

diff --git 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
@@ -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
@@ -22,7 +22,7 @@ const Icon = styled(Icons)<IconsProps>({
   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/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.base === 'light' ? theme.color.positiveText : theme.color.positive,
 }));
 
 const StyledReceived = styled.span(({ theme }) => ({
-  color: theme.color.negative,
+  color: theme.base === 'light' ? theme.color.negativeText : theme.color.negative,
 }));
 
 export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) =>

diff --git 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/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
@@ -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` ? (
             <Icon
               icon="arrowdown"
-              color={convert(themes.light).color.mediumdark}
+              color={convert(themes.light).textMutedColor}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,
               }}

diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js
@@ -46,7 +46,7 @@ const ThemeBlock = styled.div(
     padding: 10,
   },
   ({ theme }) => ({
-    background: theme.background.app,
+    background: theme.background.content,
     color: theme.color.defaultText,
   }),
   ({ side }) =>
@@ -67,7 +67,7 @@ const ThemeStack = styled.div(
     minHeight: 'calc(50vh - 15px)',
   },
   ({ theme }) => ({
-    background: theme.background.app,
+    background: theme.background.content,
     color: theme.color.defaultText,
   })
 );
@@ -86,7 +86,7 @@ const PlayFnNotice = styled.div(
     },
   },
   ({ theme }) => ({
-    background: theme.background.app,
+    background: theme.background.content,
     color: theme.color.defaultText,
   })
 );
@@ -95,8 +95,8 @@ const ThemedSetRoot = () => {
   const theme = useTheme();
 
   useEffect(() => {
-    document.body.style.background = theme.background.app;
-    document.body.style.color = theme.defaultText;
+    document.body.style.background = theme.background.content;
+    document.body.style.color = theme.color.defaultText;
     return () => {
       //
     };

diff --git 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<ButtonProps>({
 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',
 }));

diff --git 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/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.boolean.background,
   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,8 +71,11 @@ const Label = styled.label(({ theme }) => ({
   },
 
   'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
-    background: theme.background.app,
-    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/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
@@ -124,8 +124,8 @@ const Wrapper = styled.div(({ theme }) => ({
     color: theme.color.defaultText,
   },
   '.rejt-value-node:hover > .rejt-value': {
-    background: theme.background.app,
-    borderColor: theme.color.border,
+    background: theme.color.lighter,
+    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
@@ -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
@@ -47,7 +47,7 @@ const OptionsSelect = styled.select(({ theme }) => ({
   },
 
   '::placeholder': {
-    color: theme.color.mediumdark,
+    color: theme.textMutedColor,
   },
 
   '&[multiple]': {
@@ -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.textMutedColor,
+
+    path: {
+      fill: theme.textMutedColor,
+    },
+  },
+}));
 
 type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean };
 type SelectProps = ControlProps<OptionsSelection> & SelectConfig;