refactor: updater default color usage DEV-94

micromedio · Jun 10, 2021 · 1b0d9e5 · 1b0d9e5
1 parent c95e90d
commit 1b0d9e5
Show file tree

Hide file tree

Showing 27 changed files with 106 additions and 108 deletions.
diff --git a/src/components/Autocomplete/Autocomplete.tsx b/src/components/Autocomplete/Autocomplete.tsx
@@ -124,7 +124,7 @@ export default forwardRef(function Autocomplete<T>(
 
   const styles: Record<string, ThemeUICSSObject> = {
     active: {
-      borderColor: "secondary.0",
+      borderColor: "secondary",
       boxShadow: (t) =>
         `0px 0px 0px 4px ${get(t, "colors.secondary.alpha.90")}`,
       backgroundColor: "#FFF",
@@ -161,7 +161,7 @@ export default forwardRef(function Autocomplete<T>(
           <label
             {...getLabelProps()}
             sx={{
-              color: "text.0",
+              color: "text",
               variant: "text.body1",
             }}
           >
@@ -235,7 +235,7 @@ export default forwardRef(function Autocomplete<T>(
                     transition: "all 0s",
                     variant: "text.body2",
                     "& > span": {
-                      color: "text.0",
+                      color: "text",
                       fontWeight: 600,
                     },
                   }}
@@ -309,11 +309,11 @@ export default forwardRef(function Autocomplete<T>(
                 loading: {},
                 success: {
                   backgroundColor: "success.alpha.95",
-                  borderColor: "success.0",
+                  borderColor: "success",
                 },
                 error: {
                   backgroundColor: "primary.alpha.95",
-                  borderColor: "primary.0",
+                  borderColor: "primary",
                 },
               }[state],
               "&:hover": {
@@ -346,7 +346,7 @@ export default forwardRef(function Autocomplete<T>(
               sx={{
                 backgroundColor: "transparent",
                 border: "none",
-                color: "text.0",
+                color: "text",
                 flexGrow: 1,
                 opacity: !selectedOption || isOpen ? 1 : 0,
                 outline: 0,
@@ -436,13 +436,13 @@ export default forwardRef(function Autocomplete<T>(
               success: {
                 px: 3,
                 pb: 2,
-                color: "success.0",
+                color: "success",
                 variant: "text.body1",
               },
               error: {
                 px: 3,
                 pb: 2,
-                color: "primary.0",
+                color: "primary",
                 variant: "text.body1",
               },
             }[state],

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -24,7 +24,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
       key={`child-${index}`}
       sx={
         index === allItems.length - 1
-          ? { color: "text.0", variant: "text.heading3" }
+          ? { color: "text", variant: "text.heading3" }
           : {}
       }
     >

diff --git a/src/components/EditableField/Select/Select.tsx b/src/components/EditableField/Select/Select.tsx
@@ -129,10 +129,10 @@ const EditableFieldSelect = ({
   const stateStyles: Record<string, ThemeUICSSObject> = {
     active: {
       backgroundColor: "#fff",
-      color: "text.0",
+      color: "text",
       boxShadow: (theme) =>
         `0px 0px 0px 4px ${get(theme, "colors.secondary.alpha.95")}`,
-      borderColor: "secondary.0",
+      borderColor: "secondary",
       fontWeight: "semibold",
     },
   }
@@ -220,16 +220,16 @@ const EditableFieldSelect = ({
               borderRadius: 2,
               border: "2px solid",
               borderColor: "transparent",
-              color: "text.0",
+              color: "text",
 
               ...{
                 default: {},
                 loading: stateStyles.active,
                 success: {
-                  borderColor: "success.0",
+                  borderColor: "success",
                 },
                 error: {
-                  borderColor: "primary.0",
+                  borderColor: "primary",
                 },
               }[state],
 
@@ -256,10 +256,10 @@ const EditableFieldSelect = ({
               default: {},
               loading: {},
               success: {
-                color: "success.0",
+                color: "success",
               },
               error: {
-                color: "primary.0",
+                color: "primary",
               },
             }[state],
           }}

diff --git a/src/components/EditableField/Text/Text.tsx b/src/components/EditableField/Text/Text.tsx
@@ -69,7 +69,7 @@ const EditableText = forwardRef<
 
   const styles: Record<string, ThemeUICSSObject> = {
     active: {
-      borderColor: "secondary.0",
+      borderColor: "secondary",
       boxShadow: (theme) =>
         `0px 0px 0px 4px ${get(theme, "colors.secondary.alpha.90")}`,
       backgroundColor: "#FFF",
@@ -210,10 +210,10 @@ const EditableText = forwardRef<
               default: {},
               loading: styles.active,
               success: {
-                borderColor: "success.0",
+                borderColor: "success",
               },
               error: {
-                borderColor: "primary.0",
+                borderColor: "primary",
               },
             }[state],
 
@@ -243,7 +243,7 @@ const EditableText = forwardRef<
               sx={{
                 backgroundColor: "transparent",
                 border: "none",
-                color: "text.0",
+                color: "text",
                 flexGrow: 1,
                 outline: 0,
                 p: 0,
@@ -274,7 +274,7 @@ const EditableText = forwardRef<
                 border: "none",
                 p: 0,
                 py: "2px", // the 2px border counts towards height, so we need 6px instead of 8px for the correct height
-                color: "text.0",
+                color: "text",
                 variant: "text.body1",
               }}
             />
@@ -286,15 +286,15 @@ const EditableText = forwardRef<
                 <Icon
                   name="IconAlertCircle"
                   size={16}
-                  sx={{ color: "primary.0" }}
+                  sx={{ color: "primary" }}
                 />
               ),
               loading: "",
               success: (
                 <Icon
                   name="IconCircleCheck"
                   size={16}
-                  sx={{ color: "success.0" }}
+                  sx={{ color: "success" }}
                 />
               ),
             }[state]
@@ -311,10 +311,10 @@ const EditableText = forwardRef<
               default: {},
               loading: {},
               success: {
-                color: "success.0",
+                color: "success",
               },
               error: {
-                color: "primary.0",
+                color: "primary",
               },
             }[state],
           }}

diff --git a/src/components/EditableText/EditableText.tsx b/src/components/EditableText/EditableText.tsx
@@ -60,7 +60,7 @@ const EditableText = forwardRef<HTMLInputElement, EditableTextProps>(
 
     const styles: Record<string, ThemeUICSSObject> = {
       active: {
-        borderColor: "secondary.0",
+        borderColor: "secondary",
         boxShadow: (theme) =>
           `0px 0px 0px 4px ${get(theme, "colors.secondary.alpha.90")}`,
         backgroundColor: "#FFF",
@@ -118,10 +118,10 @@ const EditableText = forwardRef<HTMLInputElement, EditableTextProps>(
               default: {},
               loading: {},
               success: {
-                borderColor: "success.0",
+                borderColor: "success",
               },
               error: {
-                borderColor: "primary.0",
+                borderColor: "primary",
               },
             }[state],
 
@@ -168,7 +168,7 @@ const EditableText = forwardRef<HTMLInputElement, EditableTextProps>(
               border: "none",
               p: 0,
               py: "2px", // the 2px border counts towards height, so we need 6px instead of 8px for the correct height
-              color: "text.0",
+              color: "text",
               variant: "text.body1",
             }}
           />
@@ -179,15 +179,15 @@ const EditableText = forwardRef<HTMLInputElement, EditableTextProps>(
                 <Icon
                   name="IconAlertCircle"
                   size={16}
-                  sx={{ color: "primary.0" }}
+                  sx={{ color: "primary" }}
                 />
               ),
               loading: <Spinner />,
               success: (
                 <Icon
                   name="IconCircleCheck"
                   size={16}
-                  sx={{ color: "success.0" }}
+                  sx={{ color: "success" }}
                 />
               ),
             }[state]
@@ -231,10 +231,10 @@ const EditableText = forwardRef<HTMLInputElement, EditableTextProps>(
                 default: {},
                 loading: {},
                 success: {
-                  color: "success.0",
+                  color: "success",
                 },
                 error: {
-                  color: "primary.0",
+                  color: "primary",
                 },
               }[state],
             }}

diff --git a/src/components/Highlight/Highlight.md b/src/components/Highlight/Highlight.md
@@ -8,7 +8,7 @@ This component is designed to highlight text on search components, for instance,
 
 ##### backgroundColor
 
-- The background color to the Highlight Component: default is highlight.0
+- The background color to the Highlight Component: default is highlight
 
 ##### text
 
@@ -27,7 +27,7 @@ This component is designed to highlight text on search components, for instance,
 #### Color Change
 
 ```jsx
-<Highlight backgroundColor="primary.0" search="highlight" text="This is a simple text for highlighting purposes" />
+<Highlight backgroundColor="primary" search="highlight" text="This is a simple text for highlighting purposes" />
 ```
 
 #### Double Highlight

diff --git a/src/components/Highlight/Highlight.stories.tsx b/src/components/Highlight/Highlight.stories.tsx
@@ -20,7 +20,7 @@ Example.args = {
 export const ColorChange = Template.bind({})
 
 ColorChange.args = {
-  backgroundColor: "primary.0",
+  backgroundColor: "primary",
   search: "highlight",
   text: "This is a simple text for highlighting purposes",
 }

diff --git a/src/components/Highlight/Highlight.tsx b/src/components/Highlight/Highlight.tsx
@@ -11,7 +11,7 @@ export interface HighlightProps {
 }
 
 const Highlight = ({
-  backgroundColor = "highlight.0",
+  backgroundColor = "highlight",
   search,
   text,
 }: HighlightProps) => {

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -159,14 +159,14 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
             ...{
               default: {},
               success: {
-                borderColor: "success.0",
+                borderColor: "success",
               },
               error: {
-                borderColor: "primary.0",
+                borderColor: "primary",
               },
             }[state],
             "&:focus-within": {
-              borderColor: "secondary.0",
+              borderColor: "secondary",
               boxShadow: (theme) =>
                 `0px 0px 0px 4px ${get(theme, "colors.secondary.alpha.90")}`,
               backgroundColor: "#FFF",
@@ -198,7 +198,7 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
               sx={{
                 backgroundColor: "transparent",
                 border: "none",
-                color: "text.0",
+                color: "text",
                 flexGrow: 1,
                 outline: 0,
                 p: 0,
@@ -233,7 +233,7 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
                 backgroundColor: "transparent",
                 border: "none",
                 p: 0,
-                color: "text.0",
+                color: "text",
                 variant: "text.body1",
 
                 // removes background color when input was filled with autofill in chromium
@@ -265,7 +265,7 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
               onClick={() => setPasswordVisible((value) => !value)}
               sx={{
                 display: "flex",
-                color: passwordVisible ? "secondary.0" : "text.40",
+                color: passwordVisible ? "secondary" : "text.40",
                 cursor: "pointer",
               }}
             >

diff --git a/src/components/ListSelect/ListSelect.tsx b/src/components/ListSelect/ListSelect.tsx
@@ -63,7 +63,7 @@ const ListSelect = ({
                   : "transparent",
                 variant: "text.body1",
                 fontWeight: isSelected ? "semibold" : "medium",
-                color: isSelected ? "secondary.0" : "text.0",
+                color: isSelected ? "secondary" : "text",
                 ":focus": {
                   backgroundColor: isSelected
                     ? "secondary.alpha.90"