fix: normalize colors for textfield shadows and select

Orfium · Sep 24, 2020 · 8f8aa83 · 8f8aa83
1 parent 52f47ec
commit 8f8aa83
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -71,11 +71,11 @@ const Select: React.FC<Props> = ({
   const customStyles: Styles = {
     option: (provided, state) => ({
       ...provided,
-      backgroundColor: state.isSelected ? '#ededed' : theme.palette.white,
+      backgroundColor: state.isSelected ? theme.palette.flat.lightGray[200] : theme.palette.white,
       color: state.isDisabled ? theme.palette.flat.lightGray[700] : theme.palette.text.primary[400],
       padding: rem(16),
       '&:hover': {
-        backgroundColor: '#f8f8f9',
+        backgroundColor: theme.palette.flat.lightGray[100],
       },
     }),
     control: (base, state) => ({
@@ -139,7 +139,7 @@ const Select: React.FC<Props> = ({
         top: rem(3),
         position: 'relative',
         '&:hover': {
-          backgroundColor: '#cecece',
+          backgroundColor: theme.palette.flat.lightGray[500],
         },
         svg: {
           fill: theme.palette.white,

diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
@@ -40,11 +40,15 @@ const wrapperStyleSwitch = (theme: Theme, lean?: boolean, error?: boolean, style
     case 'filled':
     default:
       return `
-        background-color: ${error ? '#fdf2f2' : '#f5f5f5'};
-        box-shadow: inset 0 0 0 1px ${error ? theme.palette.error[400] : '#f5f5f5'};
+        background-color: ${error ? '#fdf2f2' : theme.palette.flat.lightGray[100]};
+        box-shadow: inset 0 0 0 1px ${
+          error ? theme.palette.error[400] : theme.palette.flat.lightGray[100]
+        };
         
         &:focus-within {
-          box-shadow: inset 0 0 0 1px ${error ? theme.palette.error[400] : '#f5f5f5'},
+          box-shadow: inset 0 0 0 1px ${
+            error ? theme.palette.error[400] : theme.palette.flat.lightGray[100]
+          },
             0px 2px 6px 0px rgba(67, 67, 67, 0.15);
         }
       `;

diff --git a/src/components/TextField/__snapshots__/TextField.stories.storyshot b/src/components/TextField/__snapshots__/TextField.stories.storyshot
@@ -52,7 +52,7 @@ exports[`Storyshots Design System/TextField Text Field with Label 1`] = `
         className="css-12qr1pz-TextField"
       >
         <div
-          className="css-3kv64u-TextField"
+          className="css-1h8k6jp-TextField"
         >
           <div
             className="css-khl0ot-TextField"
@@ -128,7 +128,7 @@ exports[`Storyshots Design System/TextField Text Field with Placeholder 1`] = `
         className="css-12qr1pz-TextField"
       >
         <div
-          className="css-3kv64u-TextField"
+          className="css-1h8k6jp-TextField"
         >
           <div
             className="css-pwsrwq-TextField"
@@ -198,7 +198,7 @@ exports[`Storyshots Design System/TextField Text Field with Placeholder and icon
         className="css-12qr1pz-TextField"
       >
         <div
-          className="css-3kv64u-TextField"
+          className="css-1h8k6jp-TextField"
         >
           <div
             className="css-vomlft-TextField"
@@ -277,7 +277,7 @@ exports[`Storyshots Design System/TextField Text Field without Label 1`] = `
         className="css-12qr1pz-TextField"
       >
         <div
-          className="css-3kv64u-TextField"
+          className="css-1h8k6jp-TextField"
         >
           <div
             className="css-pwsrwq-TextField"
@@ -346,7 +346,7 @@ exports[`Storyshots Design System/TextField TextField disabled with label 1`] =
         className="css-12qr1pz-TextField"
       >
         <div
-          className="css-17t39sg-TextField"
+          className="css-8zc4ck-TextField"
         >
           <div
             className="css-khl0ot-TextField"