fix(theme): replace raw colors with palette synonim

8base · Apr 29, 2019 · 9ee5952 · 9ee5952
1 parent 49223fc
commit 9ee5952
Show file tree

Hide file tree

Showing 21 changed files with 37 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,8 @@ const customTheme = createTheme({
   /** Change the pallete of the color. */
   COLORS: {
     PRIMARY: '#3EB7F9',
+    PRIMARY_TEXT_COLOR: 'darkorange',
+    SECONDARY_TEXT_COLOR: 'orange',
   },
   /** Change the custom components styles if it needed. */
   components: {

diff --git a/src/components/Avatar/Avatar.theme.js b/src/components/Avatar/Avatar.theme.js
@@ -23,7 +23,7 @@ const [AvatarTag, themeAvatar] = createThemeTag(name, ({ COLORS }: *) => ({
     alignItems: 'center',
     position: 'relative',
     backgroundColor: getBackgroundColorByName(props.name),
-    color: COLORS.DARK_GRAY1,
+    color: COLORS.PRIMARY_TEXT_COLOR,
 
     [`&:hover ${AvatarHandleTag}`]: {
       bottom: 0,
@@ -76,7 +76,7 @@ const [AvatarHandleTag, themeHandle] = createThemeTag(`${name}Handle`, ({ COLORS
     fontSize: '8px',
     transition: 'all .15s ease-in-out',
     userSelect: 'none',
-    color: COLORS.LIGHT_GRAY1,
+    color: COLORS.SECONDARY_TEXT_COLOR,
   },
 }));
 

diff --git a/src/components/Button/Button.theme.js b/src/components/Button/Button.theme.js
@@ -19,7 +19,7 @@ const spinner = keyframes`
 
 
 const getLoading = (props: *, COLORS: *) => {
-  const color = props.variant === 'outlined' ? COLORS.LIGHT_GRAY1 : COLORS.WHITE;
+  const color = props.variant === 'outlined' ? COLORS.PRIMARY_BORDER_COLOR : COLORS.WHITE;
   return props.loading
     ? {
       '&:after': {

diff --git a/src/components/Code/Code.theme.js b/src/components/Code/Code.theme.js
@@ -15,7 +15,7 @@ const [CodeWrapperTag, themeWrapper] = createThemeTag(`${name}Wrapper`, ({ COLOR
 
 const [CodeLineCounterTag, themeCounter] = createThemeTag(`${name}Counter`, ({ COLORS, SIZES }: *) => ({
   root: {
-    color: COLORS.DARK_GRAY1,
+    color: COLORS.PRIMARY_TEXT_COLOR,
     fontFamily: 'Courier',
     opacity: '0.5',
     textAlign: 'center',
@@ -26,7 +26,7 @@ const [CodeLineCounterTag, themeCounter] = createThemeTag(`${name}Counter`, ({ C
 
 const [CodeBodyTag, themeBody] = createThemeTag(`${name}Body`, ({ COLORS }: *) => ({
   root: {
-    color: COLORS.DARK_GRAY1,
+    color: COLORS.PRIMARY_TEXT_COLOR,
     fontFamily: 'Courier',
     overflow: 'auto',
     height: '100%',

diff --git a/src/components/DateInput/DateInput.theme.js b/src/components/DateInput/DateInput.theme.js
@@ -5,7 +5,7 @@ import { createThemeTag } from '../../theme/createThemeTag';
 const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
   globals: `
     .react-datepicker {
-      border: 1px solid ${COLORS.LIGHT_GRAY1};
+      border: 1px solid ${COLORS.PRIMARY_BORDER_COLOR};
       box-shadow: 0 2px 10px 0 rgba(208,215,221,0.5);
       display: flex;
       padding-bottom: 32px;
@@ -61,7 +61,7 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
     .react-datepicker__day--selected {
       border-radius: 24px;
       background-color: ${COLORS.LIGHT_BLUE};
-      color: ${COLORS.LIGHT_PRIMARY_TEXT_COLOR};
+      color: ${COLORS.PRIMARY_TEXT_COLOR};
     }
 
     .react-datepicker__day:hover {
@@ -86,12 +86,12 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
     .react-datepicker__time-container {
       position: initial;
       border: none;
-      border-left: 1px solid ${COLORS.LIGHT_GRAY1};
+      border-left: 1px solid ${COLORS.PRIMARY_BORDER_COLOR};
       border-radius: 0;
     }
 
     .react-datepicker__header--time {
-      border-bottom: 1px solid ${COLORS.LIGHT_GRAY1};
+      border-bottom: 1px solid ${COLORS.PRIMARY_BORDER_COLOR};
     }
 
     .react-datepicker-time__header {
@@ -117,7 +117,7 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
       font-family: Poppins;
       color: ${COLORS.PRIMARY_TEXT_COLOR};
       font-weight: 600;
-      border-top: 1px solid ${COLORS.LIGHT_GRAY1};
+      border-top: 1px solid ${COLORS.PRIMARY_BORDER_COLOR};
     }
 
     .react-datepicker__header {
@@ -129,7 +129,7 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
       height: 32px;
       font-size: 12px;
       display: flex;
-      border-bottom: 1px solid ${COLORS.LIGHT_GRAY1};
+      border-bottom: 1px solid ${COLORS.PRIMARY_BORDER_COLOR};
     }
 
     .react-datepicker__current-month {

diff --git a/src/components/Dialog/DialogHeader.js b/src/components/Dialog/DialogHeader.js
@@ -20,7 +20,7 @@ function DialogHeader({
   }: DialogHeaderProps) {
   return (
     <Card.Header offset="lg" { ...rest }>
-      <Text weight="semibold" color="DARK_GRAY1">{ title }</Text>
+      <Text weight="semibold">{ title }</Text>
       <HeaderCloseTag onClick={ onClose }>
         <Icon size="sm" name="Delete" title="Close Dialog" />
       </HeaderCloseTag>

diff --git a/src/components/Form/FormError.js b/src/components/Form/FormError.js
@@ -35,7 +35,7 @@ function FormError({ error, children, ...rest }: FormErrorProps) {
       <FormErrorPlateTag tagName="div" { ...rest } >
         <Row gap="md">
           <Icon name="Alert" color="DANGER" />
-          <Text color="GRAY1">{ errorText }</Text>
+          <Text color="SECONDARY_TEXT_COLOR">{ errorText }</Text>
         </Row>
       </FormErrorPlateTag>
     )

diff --git a/src/components/Form/FormSectionTitle.js b/src/components/Form/FormSectionTitle.js
@@ -11,9 +11,10 @@ type FormSectionTitleProps = {
 
 const name = 'formSectionTitle';
 
-const [FormSectionTitleTag, theme] = createThemeTag(name, ({ SIZES }: *) => ({
+const [FormSectionTitleTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
   root: {
     fontWeight: 600,
+    color: COLORS.PRIMARY_TEXT_COLOR,
     fontSize: SIZES.OVERLINE_1,
     lineHeight: SIZES.OVERLINE_1_LH,
   },

diff --git a/src/components/Form/__snapshots__/Form.test.js.snap b/src/components/Form/__snapshots__/Form.test.js.snap
@@ -39,7 +39,7 @@ exports[`<Form /> should shallow form error 1`] = `
       size="md"
     />
     <Text
-      color="GRAY1"
+      color="SECONDARY_TEXT_COLOR"
       ellipsis={false}
       weight="normal"
     >

diff --git a/src/components/Heading/Heading.theme.js b/src/components/Heading/Heading.theme.js
@@ -37,10 +37,10 @@ const [HeadingTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
     },
     kind: {
       primary: {
-        color: COLORS.TEXT_PRIMARY,
+        color: COLORS.PRIMARY_TEXT_COLOR,
       },
       secondary: {
-        color: COLORS.TEXT_SECONDARY,
+        color: COLORS.SECONDARY_TEXT_COLOR,
       },
       disabled: {
         color: COLORS.DISABLED_TEXT_COLOR,

diff --git a/src/components/Indicator/Indicator.theme.js b/src/components/Indicator/Indicator.theme.js
@@ -27,7 +27,7 @@ const [IndicatorTag, themeIndicator] = createThemeTag(
     modifiers: {
       status: {
         enabled: { backgroundColor: COLORS.GREEN },
-        disabled: { backgroundColor: COLORS.LIGHT_GRAY1 },
+        disabled: { backgroundColor: COLORS.DISABLED_TEXT_COLOR },
       },
     },
   }),

diff --git a/src/components/Input/Input.theme.js b/src/components/Input/Input.theme.js
@@ -122,7 +122,7 @@ const [InputClearButtonTag, themeClearButton] = createThemeTag(`${name}ClearButt
     alignItems: 'center',
     height: '100%',
     right: '8px',
-    color: COLORS.LIGHT_GRAY1,
+    color: COLORS.PRIMARY_BORDER_COLOR,
     cursor: 'pointer',
   },
 }));

diff --git a/src/components/Pagination/Pagination.theme.js b/src/components/Pagination/Pagination.theme.js
@@ -27,7 +27,7 @@ const [PaginationItemTag, themePaginationItem] = createThemeTag(`${name}Item`, (
     userSelect: 'none',
 
     '&:hover': {
-      color: COLORS.DARK_GRAY1,
+      color: COLORS.PRIMARY_TEXT_COLOR,
     },
 
     '&:last-child': {

diff --git a/src/components/Paragraph/Paragraph.js b/src/components/Paragraph/Paragraph.js
@@ -21,7 +21,7 @@ const Paragraph = ({ text, children, ...rest }: ParagraphProps) => (
 );
 
 Paragraph.defaultProps = {
-  color: 'DARK_GRAY1',
+  color: 'PRIMARY_TEXT_COLOR',
   weight: 'normal',
 };
 

diff --git a/src/components/Paragraph/Paragraph.stories.js b/src/components/Paragraph/Paragraph.stories.js
@@ -5,9 +5,9 @@ export default (asStory) => {
     story
       .add('common ', () => (
         <Fragment>
-          <Paragraph color="DARK_GRAY1">Primary Paragraph</Paragraph>
-          <Paragraph color="GRAY1">Secondary Paragraph</Paragraph>
-          <Paragraph color="LIGHT_GRAY1">Disabled Paragraph</Paragraph>
+          <Paragraph color="PRIMARY_TEXT_COLOR">Primary Paragraph</Paragraph>
+          <Paragraph color="SECONDARY_TEXT_COLOR">Secondary Paragraph</Paragraph>
+          <Paragraph color="DISABLED_TEXT_COLOR">Disabled Paragraph</Paragraph>
         </Fragment>
       ))
       .add('with text', () => (

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -5,7 +5,7 @@ import ReactSelect, { components } from 'react-select';
 import { withTheme } from 'emotion-theming';
 
 import { SelectTag } from './Select.theme';
-import { type Theme, PALETTE, Z_INDEX } from '../../theme';
+import { type Theme, COLORS, Z_INDEX } from '../../theme';
 
 type SelectProps = {|
   options: Array<{ label: mixed, value: string }>,
@@ -33,10 +33,10 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN, COLORS }) => ({
     ...style,
     minHeight: '36px',
     backgroundColor: COLORS.WHITE,
-    borderColor: hasError ? COLORS.DANGER : (isFocused ? COLORS.PRIMARY : COLORS.LIGHT_GRAY1),
+    borderColor: hasError ? COLORS.DANGER : (isFocused ? COLORS.PRIMARY : COLORS.PRIMARY_BORDER_COLOR),
     boxShadow: null,
     '&:hover': {
-      borderColor: isFocused ? COLORS.PRIMARY : COLORS.LIGHT_GRAY1,
+      borderColor: isFocused ? COLORS.PRIMARY : COLORS.PRIMARY_BORDER_COLOR,
     },
   }),
   menuPortal: (style) => ({
@@ -45,7 +45,7 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN, COLORS }) => ({
   }),
   placeholder: (style) => ({
     ...style,
-    color: COLORS.LIGHT_GRAY1,
+    color: COLORS.PLACEHOLDER_COLOR,
     whiteSpace: 'nowrap',
   }),
   indicatorSeparator: (style) => ({
@@ -143,7 +143,7 @@ class Select extends React.Component<SelectProps & SelectPropsFromHOCs> {
           options={ options }
           placeholder={ placeholder }
           valueComponent={ valueComponent }
-          styles={ customStyles({ ...rest, COLORS: theme.COLORS || PALETTE }) }
+          styles={ customStyles({ ...rest, COLORS: theme.COLORS || COLORS }) }
           value={ selectValue }
           components={ components }
         />

diff --git a/src/components/Switch/Switch.theme.js b/src/components/Switch/Switch.theme.js
@@ -49,7 +49,7 @@ const [SwitchApperanceTag, themeApperance] = createThemeTag(`${name}Appearance`,
 const [SwitchLabelTag, themeLabel] = createThemeTag(`${name}Label`, ({ COLORS }: *) => ({
   root: {
     fontSize: COLORS.OVERLINE,
-    color: COLORS.GRAY1,
+    color: COLORS.SECONDARY_TEXT_COLOR,
     marginLeft: '8px',
     userSelect: 'none',
   },

diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
@@ -33,7 +33,7 @@ function Text({
 }
 
 Text.defaultProps = {
-  color: 'TEXT_PRIMARY',
+  color: 'PRIMARY_TEXT_COLOR',
   weight: 'normal',
   ellipsis: false,
 };

diff --git a/src/components/TextArea/TextArea.theme.js b/src/components/TextArea/TextArea.theme.js
@@ -10,7 +10,7 @@ const [TextAreaTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
     borderRadius: SIZES.MAIN_BORDER_RADIUS,
     fontSize: SIZES.BODY_TEXT,
     lineHeight: SIZES.BODY_TEXT_LH,
-    color: COLORS.DARK_GRAY1,
+    color: COLORS.PRIMARY_TEXT_COLOR,
     fontWeight: 400,
     padding: '8px',
 

diff --git a/src/components/TreeSelect/TreeSelect.theme.js b/src/components/TreeSelect/TreeSelect.theme.js
@@ -90,8 +90,8 @@ const [_, treeSelectTheme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
         margin: '2px',
         borderRadius: '12px',
         padding: '0 24px 0 12px',
-        color: COLORS.GRAY1,
-        border: `1px solid ${COLORS.LIGHT_GRAY1}`,
+        color: COLORS.SECONDARY_TEXT_COLOR,
+        border: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
         backgroundColor: '#fff',
         fontSize: '11px',
         fontWeight: 400,

diff --git a/src/theme/colors.js b/src/theme/colors.js
@@ -49,9 +49,6 @@ const PALETTE = {
   DANGER: DEFINE_PALETTE.LIGHT_RED,
   DANGER_DARK: DEFINE_PALETTE.RED,
   TRANSPARENT: DEFINE_PALETTE.TRANSPARENT,
-
-  TEXT_PRIMARY: DEFINE_PALETTE.DARK_GRAY1,
-  TEXT_SECONDARY: DEFINE_PALETTE.GRAY1,
 };
 
 const COLORS = {