feat: update colors palette

README.md

@@ -56,7 +56,7 @@ const customTheme = createTheme({
       },
       modifiers: {
         disabled: {
-          backgroundColor: COLORS.RED,
+          backgroundColor: COLORS.RED_30,
         },
       },
     }),
@@ -95,7 +95,7 @@ const App = () => {
   return (
     <BoostProvider icons={ icons }>
       ...
-      <Icon name="AnotherSvgIcon" size="lg" color="RED" />
+      <Icon name="AnotherSvgIcon" size="lg" color="DANGER" />
     </BoostProvider>
   )
 }
@@ -112,7 +112,7 @@ const App = () => {
   return (
     <BoostProvider>
       ...
-      <Icon className="fas fa-igloo" color="RED" size="lg" />
+      <Icon className="fas fa-igloo" color="DANGER" size="lg" />
     </BoostProvider>
   )
 }

e2e/__tests__/scrollable.test.js

@@ -2,7 +2,7 @@ import { baisy } from '../setup/TestSuiter';
 
 
 const SUITES = [
-  baisy.suite('Components/SecondaryNavigation', 'default story'),
+  baisy.suite('Components/Scrollable', 'default story'),
 ];
 
 

src/components/AsyncContent/AsyncContent.test.js

@@ -14,7 +14,7 @@ describe('<AsyncContent />', () => {
     expect(wrapper.find('.some-children')).toHaveLength(0);
     expect(wrapper.find(Loader)).toHaveLength(1);
     expect(wrapper.find(Loader).props()).toEqual({
-      color: 'RED',
+      color: 'DANGER',
       stretch: true,
       size: 'md',
     });

src/components/Avatars/Avatars.theme.js

@@ -20,7 +20,7 @@ const [AvatarsCounterTag, themeCounterAvatars] = createThemeTag(`${name}Counter`
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
-    backgroundColor: COLORS.DSM_DARK_BLUE,
+    backgroundColor: COLORS.BLUE_30,
     color: COLORS.WHITE,
     fontWeight: 600,
     fontSize: '100%',
@@ -67,14 +67,14 @@ const [AvatarsHandleTag, themeHandleAvatars] = createThemeTag(`${name}Handle`, (
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
-    border: `1px dashed ${COLORS.LIGHT_GRAY1}`,
+    border: `1px dashed ${COLORS.GRAY_20}`,
     color: COLORS.PRIMARY_TEXT_COLOR,
     marginLeft: -10,
     cursor: 'pointer',
     zIndex: 1,
 
     '&:hover': {
-      border: `1px dashed ${COLORS.GRAY5}`,
+      border: `1px dashed ${COLORS.GRAY_40}`,
     },
   }),
   modifiers: {

src/components/Button/Button.theme.js

@@ -95,16 +95,16 @@ const [ButtonTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
         borderColor: COLORS.PRIMARY,
       },
       neutral: {
-        backgroundColor: COLORS.LIGHT_GRAY1,
+        backgroundColor: COLORS.GRAY_20,
         borderColor: COLORS.PRIMARY_BORDER_COLOR,
       },
       danger: {
         backgroundColor: COLORS.DANGER_DARK,
         borderColor: COLORS.DANGER_DARK,
       },
       success: {
-        backgroundColor: COLORS.GREEN,
-        borderColor: COLORS.GREEN,
+        backgroundColor: COLORS.GREEN_40,
+        borderColor: COLORS.GREEN_40,
       },
       white: {
         backgroundColor: COLORS.WHITE,
@@ -137,14 +137,14 @@ const [ButtonTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
       },
     },
     disabled: {
-      backgroundColor: COLORS.LIGHT_GRAY5,
-      borderColor: COLORS.LIGHT_GRAY3,
-      color: COLORS.LIGHT_GRAY3,
+      backgroundColor: COLORS.GRAY_20,
+      borderColor: COLORS.GRAY_30,
+      color: COLORS.DISABLED_TEXT_COLOR,
       cursor: 'default',
       pointerEvents: 'none',
 
       svg: {
-        color: COLORS.LIGHT_GRAY3,
+        color: COLORS.GRAY_30,
       },
 
       '&:hover': {

src/components/Card/Card.theme.js

@@ -48,7 +48,7 @@ const [CardBodyTag, cardBodyTheme] = createThemeTag('cardBody', {
 const [CardFooterTag, cardFooterTheme] = createThemeTag('cardFooter', ({ COLORS }: *): * => ({
   root: {
     flexShrink: 0,
-    borderTop: `1px solid ${COLORS.DSM.GREY_COLORS.DSM_LIGHT_GREY_2}`,
+    borderTop: `1px solid ${COLORS.GRAY_20}`,
   },
   modifiers: {
     ...offsetModifier,
@@ -59,7 +59,7 @@ const [CardFooterTag, cardFooterTheme] = createThemeTag('cardFooter', ({ COLORS
 const [CardSectionTag, cardSectionTheme] = createThemeTag('cardSection', ({ COLORS }: *) => ({
   root: {
     '&:not(:last-child)': {
-      borderBottom: `1px solid ${COLORS.DSM.GREY_COLORS.DSM_LIGHT_GREY_2}`,
+      borderBottom: `1px solid ${COLORS.GRAY_20}`,
     },
   },
   modifiers: {
@@ -87,7 +87,7 @@ const [CardHeaderTag, cardHeaderTheme] = createThemeTag('cardHeader', ({ COLORS
     flexShrink: 0,
     height: '64px',
 
-    borderBottom: `1px solid ${COLORS.DSM.GREY_COLORS.DSM_LIGHT_GREY_2}`,
+    borderBottom: `1px solid ${COLORS.GRAY_20}`,
   },
   modifiers: {
     padding: {

src/components/Checkbox/Checkbox.theme.js

@@ -34,7 +34,7 @@ const [CheckboxSquareTag, themeSquare] = createThemeTag(`${name}Square`, ({ COLO
       borderColor: COLORS.DANGER,
     },
     disabled: {
-      backgroundColor: COLORS.LIGHT_GRAY4,
+      backgroundColor: COLORS.GRAY_20,
       cursor: 'auto',
     },
   },

src/components/Code/Code.theme.js

@@ -39,7 +39,7 @@ const [CodeBodyTag, themeBody] = createThemeTag(`${name}Body`, ({ COLORS }: *) =
 const [CodeNumericTag, themeNumeric] = createThemeTag(`${name}Numeric`, ({ COLORS, SIZES }: *) => ({
   root: (props) => ({
     height: props.height ? 'auto' : '100%',
-    backgroundColor: COLORS.LIGHT_GRAY5,
+    backgroundColor: COLORS.GRAY_10,
     borderRight: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
     padding: '20px 0 40px',
     borderTopLeftRadius: SIZES.MAIN_BORDER_RADIUS,

src/components/DateInput/DateInput.theme.js

@@ -26,7 +26,7 @@ const [DateInputTag, themeDateInput] = createThemeTag('dateInput', ({ COLORS }:
 
     .react-datepicker__header,
     .react-datepicker__today-button {
-      background-color: ${COLORS.LIGHT_GRAY5};
+      background-color: ${COLORS.GRAY_10};
     }
 
     .react-datepicker__month-container {
@@ -70,7 +70,7 @@ const [DateInputTag, themeDateInput] = createThemeTag('dateInput', ({ COLORS }:
       .react-datepicker__time-box
       ul.react-datepicker__time-list
       li.react-datepicker__time-list-item--selected {
-      background-color: ${COLORS.LIGHT_BLUE};
+      background-color: ${COLORS.BLUE_10};
       font-weight: 600;
     }
 
@@ -110,7 +110,7 @@ const [DateInputTag, themeDateInput] = createThemeTag('dateInput', ({ COLORS }:
 
     .react-datepicker__day--selected {
       border-radius: 24px;
-      background-color: ${COLORS.LIGHT_BLUE};
+      background-color: ${COLORS.BLUE_10};
       color: ${COLORS.LIGHT_PRIMARY_TEXT_COLOR};
     }
 
@@ -156,7 +156,7 @@ const [DateInputTag, themeDateInput] = createThemeTag('dateInput', ({ COLORS }:
     .react-datepicker__month--selected,
     .react-datepicker__month--in-selecting-range,
     .react-datepicker__month--in-range {
-      background-color: ${COLORS.LIGHT_BLUE};
+      background-color: ${COLORS.BLUE_10};
       color: ${COLORS.LIGHT_PRIMARY_TEXT_COLOR};
     }
 

src/components/Divider/Divider.theme.js

@@ -17,7 +17,7 @@ const [DividerOuter, themeOuter] = createThemeTag(name, () => ({
 const [DividerInner, themeInner] = createThemeTag(`${name}Inner`, ({ COLORS }) => ({
   root: {
     height: '1px',
-    backgroundColor: COLORS.LIGHT_GRAY1,
+    backgroundColor: COLORS.PRIMARY_BORDER_COLOR,
     width: '100%',
   },
 }));
@@ -27,7 +27,7 @@ const [DividerTitle, themeTitle] = createThemeTag(`${name}Title`, ({ COLORS }) =
     fontSize: '12px',
     fontFamily: 'inherit',
     fontWeight: 600,
-    color: COLORS.DSM_DARK_GREY_1,
+    color: COLORS.GRAY_50,
     lineHeight: '18px',
     whiteSpace: 'nowrap',
     flexGrow: 2,

src/components/Dropdown/Dropdown.stories.js

@@ -210,7 +210,7 @@ withForceRender.story = {
 export const withMenu = () => (
   <Dropdown defaultOpen={ false }>
     <Dropdown.Head>
-      <Icon name="More" color="LIGHT_GRAY2" />
+      <Icon name="More" color="GRAY_30" />
     </Dropdown.Head>
     <Dropdown.Body forceRender>
       <Menu>

src/components/Form/FormField.js

@@ -59,7 +59,7 @@ const [FormFieldNoteTag, themeNote] = createThemeTag(`${name}Note`, ({ COLORS, S
 
     fontSize: SIZES.OVERLINE_2,
     lineHeight: SIZES.OVERLINE_2_LH,
-    color: COLORS.GRAY5,
+    color: COLORS.LIGHT_TEXT_COLOR,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',

src/components/Icon/Icon.stories.js

@@ -27,10 +27,10 @@ allIcons.story = {
 export const withColor = () => (
   <Row alignItems="center">
     <Icon name="Alert" color="DANGER" />
-    <Icon name="DismissData" color="LIGHT_BLUE" />
-    <Icon name="FirewallOn" color="BLUE" />
-    <Icon name="Search" color="GREEN" />
-    <Icon name="House" color="LIGHT_GRAY1" />
+    <Icon name="DismissData" color="BLUE_10" />
+    <Icon name="FirewallOn" color="BLUE_30" />
+    <Icon name="Search" color="GREEN_40" />
+    <Icon name="House" color="GRAY_40" />
   </Row>
 );
 

src/components/Indicator/Indicator.theme.js

@@ -26,8 +26,8 @@ const [IndicatorTag, themeIndicator] = createThemeTag(
 
     modifiers: {
       status: {
-        enabled: { backgroundColor: COLORS.GREEN },
-        disabled: { backgroundColor: COLORS.DISABLED_TEXT_COLOR },
+        enabled: { backgroundColor: COLORS.GREEN_40 },
+        disabled: { backgroundColor: COLORS.GRAY_30 },
       },
     },
   }),

src/components/Input/Input.theme.js

@@ -13,7 +13,7 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES }: *): * =>
     paddingRight: props.hasRightIcon || (props.type === 'number' && !props.hideNumberArrows) ? '48px' : '16px',
 
     backgroundColor: (props.disabled || props.readOnly)
-      ? COLORS.LIGHT_GRAY5
+      ? COLORS.DISABLED_COLOR
       : COLORS.WHITE,
 
     borderColor: COLORS.PRIMARY_BORDER_COLOR,

src/components/Link/Link.js

@@ -28,7 +28,7 @@ function Link({
 }
 
 Link.defaultProps = {
-  color: 'LIGHT_BLUE',
+  color: 'BLUE_10',
   underline: false,
   tagName: 'a',
 };

src/components/Loader/Loader.stories.js

@@ -33,7 +33,7 @@ export const withColor = () => (
   <Row alignItems="center" gap="lg" flexWrap="wrap">
     <Loader size="md" color="PRIMARY" />
     <Loader size="md" color="SUCCESS" />
-    <Loader size="md" color="PURPLE" />
+    <Loader size="md" color="PURPLE_10" />
   </Row>
 );
 

src/components/Menu/Menu.theme.js

@@ -25,7 +25,7 @@ const [MenuItemTag, themeMenuItem] = createThemeTag(`${name}Item`, ({ COLORS, SI
     cursor: 'pointer',
     whiteSpace: 'nowrap',
 
-    color: COLORS.DSM.GREY_COLORS.DSM_DARK_GREY_2,
+    color: COLORS.LIGHT_TEXT_COLOR,
     fontSize: SIZES.BODY_TEXT,
     lineHeight: SIZES.BODY_TEXT_LH,
     fontWeight: 400,
@@ -42,7 +42,7 @@ const [MenuItemTag, themeMenuItem] = createThemeTag(`${name}Item`, ({ COLORS, SI
     disabled: {
       pointerEvents: 'none',
       cursor: 'default',
-      color: COLORS.DISABLED_COLOR,
+      color: COLORS.DISABLED_TEXT_COLOR,
     },
   },
 }));

src/components/Navigation/Navigation.stories.js

@@ -13,7 +13,7 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Navigation color="GREEN" data-e2e-id="default-navigation">
+  <Navigation color="GREEN_40" data-e2e-id="default-navigation">
     <Navigation.Item icon="Trashcan" label="Jobs" to="/jobs" />
     <Navigation.Item icon="Mail" label="Posted" to="/posted" />
     <Navigation.Item icon="Search" label="My Active Jobs" to="/my-active-jobs" />
@@ -25,7 +25,7 @@ defaultStory.story = {
 };
 
 export const withIconSize = () => (
-  <Navigation color="GREEN">
+  <Navigation color="GREEN_40">
     <Navigation.Item iconSize="lg" icon="Trashcan" label="Jobs" to="/jobs" />
     <Navigation.Item iconSize="lg" icon="Mail" label="Posted" to="/posted" />
     <Navigation.Item iconSize="lg" icon="Search" label="My Active Jobs" to="/my-active-jobs" />
@@ -37,7 +37,7 @@ withIconSize.story = {
 };
 
 export const withoutIcons = () => (
-  <Navigation color="GREEN" data-e2e-id="default-navigation">
+  <Navigation color="GREEN_40" data-e2e-id="default-navigation">
     <Navigation.Item label="Jobs" to="/jobs" />
     <Navigation.Item label="Posted" to="/posted" />
     <Navigation.Item label="My Active Jobs" to="/my-active-jobs" />
@@ -56,7 +56,7 @@ export const withExpandButton = () => (
         <Navigation
           expanded={ expanded }
           expandedWidth={ 196 }
-          color="GREEN"
+          color="GREEN_40"
           data-e2e-id="default-navigation"
         >
           <Navigation.Item icon="Trashcan" label="Jobs" to="/jobs" />

src/components/Navigation/Navigation.test.js

@@ -5,7 +5,7 @@ import { Navigation } from './Navigation';
 describe('<Navigation />', () => {
   it('should shallow navigation', () => {
     const wrapper = shallow(
-      <Navigation color="GREEN">
+      <Navigation color="GREEN_40">
         <Navigation.Item icon="Trashcan" label="Jobs" href="/jobs" />
       </Navigation>,
     );
@@ -27,7 +27,7 @@ describe('<Navigation />', () => {
     const Link = () => null;
 
     const wrapper = mount(
-      <Navigation color="GREEN">
+      <Navigation color="GREEN_40">
         <Navigation.Item
           icon="Trashcan"
           label="Jobs"

src/components/Navigation/__snapshots__/Navigation.test.js.snap

@@ -3,7 +3,7 @@
 exports[`<Navigation /> should shallow navigation 1`] = `
 <Boost(navigation)
   collapsedWidth="60px"
-  color="GREEN"
+  color="GREEN_40"
   controllable={false}
   expanded={false}
   insideRef={
@@ -14,7 +14,7 @@ exports[`<Navigation /> should shallow navigation 1`] = `
   tagName="nav"
 >
   <NavigationItem
-    color="GREEN"
+    color="GREEN_40"
     href="/jobs"
     icon="Trashcan"
     key=".0"

src/components/NoData/NoData.js

@@ -12,7 +12,7 @@ import {
 const NoData = (props: *) => (
   <Column stretch justifyContent="center" alignItems="center" gap="lg" offsetY="lg">
     <NoDataIconContainerTag modifiers={ props }>
-      <Icon size="stretch" name="DismissData" color="LIGHT_GRAY1" />
+      <Icon size="stretch" name="DismissData" color="GRAY_30" />
     </NoDataIconContainerTag>
     <NoDataTextTag modifiers={ props }>no data</NoDataTextTag>
   </Column>

src/components/NoData/NoData.theme.js

@@ -17,7 +17,7 @@ const [NoDataTextTag, themeText] = createThemeTag(
   `${name}Text`,
   ({ COLORS }: *) => ({
     root: {
-      color: COLORS.DISABLED_TEXT_COLOR,
+      color: COLORS.GRAY_30,
       fontSize: '32px',
       fontWeight: 500,
       textTransform: 'uppercase',