fix: correct colors on form fields and menu

Orfium · Sep 23, 2020 · 52f47ec · 52f47ec
1 parent a5149f4
commit 52f47ec
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 35 deletions.
diff --git a/src/components/DatePicker/DatePicker.style.ts b/src/components/DatePicker/DatePicker.style.ts
@@ -31,7 +31,7 @@ export const datePickerStyles = ({ isRangePicker }: { isRangePicker?: boolean })
 
   .DayPicker-NavButton {
     top: ${theme.spacing.sm};
-    background-color: #f5f5f5;
+    background-color: ${theme.palette.flat.lightGray[100]};
     width: 42px;
     height: 42px;
     border-radius: 5px;
@@ -48,8 +48,8 @@ export const datePickerStyles = ({ isRangePicker }: { isRangePicker?: boolean })
 
   .DayPicker-Weekday {
     color: #9b9b9b;
-    border-top: 1px solid #f5f5f5;
-    border-bottom: 1px solid #f5f5f5;
+    border-top: 1px solid ${theme.palette.flat.lightGray[100]};
+    border-bottom: 1px solid ${theme.palette.flat.lightGray[100]};
     font-size: ${theme.typography[12]};
     padding: ${theme.spacing.md} 0;
   }
@@ -78,7 +78,7 @@ export const datePickerStyles = ({ isRangePicker }: { isRangePicker?: boolean })
   }
 
   .DayPicker-Day:not(.DayPicker-Day--disabled):hover {
-    background-color: #f5f5f5 !important;
+    background-color: ${theme.palette.flat.lightGray[100]} !important;
   }
   .DayPicker:not(.DayPicker--interactionDisabled) {
     .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
@@ -89,7 +89,7 @@ export const datePickerStyles = ({ isRangePicker }: { isRangePicker?: boolean })
   ${isRangePicker &&
     `
     .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
-      background-color: #f5f5f5 !important;
+      background-color: ${theme.palette.flat.lightGray[100]} !important;
       border-radius: 0;
     }
     

diff --git a/src/components/Menu/Menu.style.ts b/src/components/Menu/Menu.style.ts
@@ -35,7 +35,7 @@ export const menuStyle = ({
     }
 
     if (disabled) {
-      return theme.palette.flat.lightGray[400];
+      return theme.palette.flat.lightGray[100];
     }
 
     if (filled && childrenCount !== 0) {

diff --git a/src/components/Radio/Radio.style.ts b/src/components/Radio/Radio.style.ts
@@ -1,6 +1,7 @@
 import { css, SerializedStyles } from '@emotion/core';
 import { rem } from 'polished';
 import { Props } from './Radio';
+import { Theme } from '../../theme';
 
 const focusedRadio = css`
   box-shadow: 0 0 0 ${rem('11px')} rgba(0, 0, 0, 0.04);
@@ -35,25 +36,29 @@ export const customRadioWrapperStyles = (
   ${focused && !disabled && focusedRadio};
 `;
 
-export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>): SerializedStyles => {
+export const customRadioStyles = (props: Pick<Props, 'checked' | 'disabled'>) => (
+  theme: Theme
+): SerializedStyles => {
   function determineBoxShadow({ checked, disabled }: Pick<Props, 'checked' | 'disabled'>) {
     if (disabled && checked) {
-      return `inset 0px 0px 0px ${rem('2px')} #efefef, inset 0px 0px 0px ${rem(
-        '7px'
-      )} #efefef, inset 0px 0px 0px ${rem('14px')} currentColor`;
+      return `inset 0px 0px 0px ${rem('2px')} ${
+        theme.palette.flat.lightGray[400]
+      }, inset 0px 0px 0px ${rem('7px')} ${
+        theme.palette.flat.lightGray[400]
+      }, inset 0px 0px 0px ${rem('14px')} currentColor`;
     }
 
     if (disabled) {
-      return `inset 0px 0px 0px ${rem('14px')} #efefef`;
+      return `inset 0px 0px 0px ${rem('14px')} ${theme.palette.flat.lightGray[200]}`;
     }
 
     if (checked) {
-      return `inset 0px 0px 0px ${rem('2px')} currentColor, inset 0px 0px 0px ${rem(
-        '7px'
-      )} #fff, inset 0px 0px 0px ${rem('14px')} currentColor`;
+      return `inset 0px 0px 0px ${rem('2px')} currentColor, inset 0px 0px 0px ${rem('7px')} ${
+        theme.palette.white
+      }, inset 0px 0px 0px ${rem('14px')} currentColor`;
     }
 
-    return `inset 0px 0px 0px ${rem('14px')} #dfdfdf`;
+    return `inset 0px 0px 0px ${rem('14px')} ${theme.palette.flat.lightGray[400]}`;
   }
 
   return css`

diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
@@ -10,6 +10,7 @@ import {
   inputStyles,
   wrapperStyles,
 } from './Radio.style';
+import useTheme from '../../hooks/useTheme';
 
 export type Props = {
   /** The value of the radio input. If no value is passed the default value, according to spec, is "on"
@@ -54,6 +55,7 @@ function Radio(props: Props, ref: React.Ref<HTMLInputElement>) {
   const [focused, setFocused] = React.useState(false);
   const [internallyControlledChecked, setInternallyControlledChecked] = React.useState(false);
   const radioGroup = useRadioGroup();
+  const theme = useTheme();
 
   function handleFocus() {
     setFocused(true);
@@ -107,7 +109,7 @@ function Radio(props: Props, ref: React.Ref<HTMLInputElement>) {
           css={customRadioStyles({
             checked: checkedValue,
             disabled,
-          })}
+          })(theme)}
         />
       </span>
     </span>

diff --git a/src/components/Radio/__snapshots__/Radio.stories.storyshot b/src/components/Radio/__snapshots__/Radio.stories.storyshot
@@ -59,7 +59,7 @@ exports[`Storyshots Design System/Radio Disabled not selected Radio 1`] = `
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-18bp0kd-Radio"
+          className="css-12ho7n7-Radio"
         />
       </span>
     </span>
@@ -126,7 +126,7 @@ exports[`Storyshots Design System/Radio Disabled selected Radio 1`] = `
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-12iuhu1-Radio"
+          className="css-rlrhqi-Radio"
         />
       </span>
     </span>
@@ -193,7 +193,7 @@ exports[`Storyshots Design System/Radio Not selected Radio  (\`checked === undef
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-d7ne02-Radio"
+          className="css-11rxdnq-Radio"
         />
       </span>
     </span>
@@ -260,7 +260,7 @@ exports[`Storyshots Design System/Radio Not selected Radio (\`checked === false\
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-d7ne02-Radio"
+          className="css-11rxdnq-Radio"
         />
       </span>
     </span>
@@ -328,7 +328,7 @@ exports[`Storyshots Design System/Radio Radio showcase 1`] = `
           className="css-wv0vuq-Radio"
         >
           <span
-            className="css-d7ne02-Radio"
+            className="css-11rxdnq-Radio"
           />
         </span>
       </span>
@@ -352,7 +352,7 @@ exports[`Storyshots Design System/Radio Radio showcase 1`] = `
           className="css-wv0vuq-Radio"
         >
           <span
-            className="css-12izzim-Radio"
+            className="css-ti5n2x-Radio"
           />
         </span>
       </span>
@@ -376,7 +376,7 @@ exports[`Storyshots Design System/Radio Radio showcase 1`] = `
           className="css-wv0vuq-Radio"
         >
           <span
-            className="css-18bp0kd-Radio"
+            className="css-12ho7n7-Radio"
           />
         </span>
       </span>
@@ -400,7 +400,7 @@ exports[`Storyshots Design System/Radio Radio showcase 1`] = `
           className="css-wv0vuq-Radio"
         >
           <span
-            className="css-12iuhu1-Radio"
+            className="css-rlrhqi-Radio"
           />
         </span>
       </span>
@@ -468,7 +468,7 @@ exports[`Storyshots Design System/Radio Selected Radio 1`] = `
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-12izzim-Radio"
+          className="css-ti5n2x-Radio"
         />
       </span>
     </span>

diff --git a/src/components/RadioGroup/__snapshots__/RadioGroup.stories.storyshot b/src/components/RadioGroup/__snapshots__/RadioGroup.stories.storyshot
@@ -60,7 +60,7 @@ exports[`Storyshots Design System/RadioGroup Radio with options 1`] = `
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-d7ne02-Radio"
+          className="css-11rxdnq-Radio"
         />
       </span>
     </span>
@@ -85,7 +85,7 @@ exports[`Storyshots Design System/RadioGroup Radio with options 1`] = `
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-12izzim-Radio"
+          className="css-ti5n2x-Radio"
         />
       </span>
     </span>
@@ -110,7 +110,7 @@ exports[`Storyshots Design System/RadioGroup Radio with options 1`] = `
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-d7ne02-Radio"
+          className="css-11rxdnq-Radio"
         />
       </span>
     </span>
@@ -178,7 +178,7 @@ exports[`Storyshots Design System/RadioGroup Radio with options with onChange ha
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-d7ne02-Radio"
+          className="css-11rxdnq-Radio"
         />
       </span>
     </span>
@@ -203,7 +203,7 @@ exports[`Storyshots Design System/RadioGroup Radio with options with onChange ha
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-12izzim-Radio"
+          className="css-ti5n2x-Radio"
         />
       </span>
     </span>
@@ -228,7 +228,7 @@ exports[`Storyshots Design System/RadioGroup Radio with options with onChange ha
         className="css-wv0vuq-Radio"
       >
         <span
-          className="css-d7ne02-Radio"
+          className="css-11rxdnq-Radio"
         />
       </span>
     </span>

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -86,7 +86,7 @@ const Select: React.FC<Props> = ({
       paddingLeft: rem(3),
       backgroundColor: error
         ? transparentize(0.85, theme.palette.error[400])
-        : theme.palette.flat.lightGray[200],
+        : theme.palette.flat.lightGray[100],
       border: error ? `1px solid ${theme.palette.error[400]}` : '0',
       '&:hover': {},
       '&:hover svg': {

diff --git a/src/components/Select/__snapshots__/Select.stories.storyshot b/src/components/Select/__snapshots__/Select.stories.storyshot
@@ -60,7 +60,7 @@ exports[`Storyshots Design System/Select Disabled Select 1`] = `
           onKeyDown={[Function]}
         >
           <div
-            className=" css-1l56lhw-Control"
+            className=" css-xbxebu-Control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -186,7 +186,7 @@ exports[`Storyshots Design System/Select Multi Tag Select 1`] = `
           onKeyDown={[Function]}
         >
           <div
-            className=" css-1jrkfbi-Control"
+            className=" css-1tctisv-Control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -389,7 +389,7 @@ exports[`Storyshots Design System/Select Simple Select 1`] = `
           onKeyDown={[Function]}
         >
           <div
-            className=" css-d4r9dk-Control"
+            className=" css-1tvhbl3-Control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >