From b6201ebc34ff7cadb81c4d5957db538172babf4e Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Thu, 2 Apr 2020 15:52:41 -0300
Subject: [PATCH] feat: ui-v2 Color System Naming

---
 platform/ui/src/components/Button/Button.jsx  | 25 +++---
 .../components/ButtonGroup/ButtonGroup.jsx    |  8 +-
 .../ui/src/components/DateRange/DateRange.css | 12 +--
 .../ui/src/components/DateRange/DateRange.jsx | 12 +--
 .../components/EmptyStudies/EmptyStudies.js   |  2 +-
 platform/ui/src/components/Icon/icon.mdx      |  6 +-
 .../src/components/IconButton/IconButton.jsx  | 20 ++---
 .../InputLabelWrapper/InputLabelWrapper.jsx   |  4 +-
 .../ui/src/components/InputText/InputText.jsx |  4 +-
 platform/ui/src/components/NavBar/NavBar.jsx  |  2 +-
 platform/ui/src/components/Select/Select.css  |  4 +-
 .../ui/src/components/TableCell/TableCell.jsx |  2 +-
 .../ui/src/components/TableHead/TableHead.jsx |  8 +-
 .../src/components/Typography/Typography.jsx  |  4 +-
 .../ui/src/gatsby-theme-docz/tailwind.css     |  4 +-
 platform/ui/src/gatsby-theme-docz/theme.css   |  4 +
 .../ui/src/views/Colors/BackgroundColor.jsx   | 24 ++++++
 platform/ui/src/views/Colors/Colors.mdx       | 84 +++++++++++++++++++
 .../src/views/StudyList/components/Header.js  |  4 +-
 .../StudyList/components/StudyListFilter.js   | 39 ++++-----
 .../components/StudyListPagination.js         | 12 +--
 .../StudyList/components/StudyListTable.js    | 22 ++---
 platform/ui/tailwind.config.js                | 67 ++++++++++-----
 23 files changed, 254 insertions(+), 119 deletions(-)
 create mode 100644 platform/ui/src/views/Colors/BackgroundColor.jsx
 create mode 100644 platform/ui/src/views/Colors/Colors.mdx

diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx
index a3f656f4f..314ca1b9a 100644
--- a/platform/ui/src/components/Button/Button.jsx
+++ b/platform/ui/src/components/Button/Button.jsx
@@ -30,31 +30,31 @@ const disabledClasses = {
 const variantClasses = {
   text: {
     default:
-      'text-custom-aquaBright hover:bg-custom-aquaBright hover:text-white active:opacity-80 focus:bg-custom-aquaBright focus:text-white',
+      'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
     primary:
-      'text-custom-blue hover:bg-custom-blue hover:text-white active:opacity-80 focus:bg-custom-blue focus:text-white',
+      'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
     secondary:
-      'text-custom-violetPale hover:bg-custom-violetPale hover:text-white active:opacity-80 focus:bg-custom-violetPale focus:text-white',
+      'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
     white:
       'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
   },
   outlined: {
     default:
-      'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:bg-custom-aquaBright hover:text-black focus:text-black focus:bg-custom-aquaBright active:opacity-80',
+      'border bg-trasparent border-primary-light text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
     primary:
-      'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'border bg-transparent border-custom-violetPale text-custom-violetPale hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
   contained: {
     default:
-      'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
     primary:
-      'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'bg-custom-violetPale text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
@@ -92,7 +92,12 @@ const Button = ({
     <div className="mr-2">{startIconProp}</div>
   );
 
-  const endIcon = endIconProp && <div className="ml-2">{endIconProp}</div>;
+  const handleOnClick = e => {
+    buttonElement.current.blur();
+    if (rest.onClick) {
+      rest.onClick(e);
+    }
+  };
 
   return (
     <button
diff --git a/platform/ui/src/components/ButtonGroup/ButtonGroup.jsx b/platform/ui/src/components/ButtonGroup/ButtonGroup.jsx
index bb9f3412a..b05a83333 100644
--- a/platform/ui/src/components/ButtonGroup/ButtonGroup.jsx
+++ b/platform/ui/src/components/ButtonGroup/ButtonGroup.jsx
@@ -37,9 +37,9 @@ const borderClasses = {
 
 const variantClasses = {
   text: {
-    default: 'border-custom-aquaBright',
-    primary: 'border-custom-blue',
-    secondary: 'border-custom-violetPale',
+    default: 'border-primary-light',
+    primary: 'border-primary-main',
+    secondary: 'border-secondary-light',
     white: 'border-white',
   },
   outlined: {
@@ -96,7 +96,7 @@ const ButtonGroup = ({
       ref={ref}
       {...other}
     >
-      {React.Children.map(children, child => {
+      {React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
           return null;
         }
diff --git a/platform/ui/src/components/DateRange/DateRange.css b/platform/ui/src/components/DateRange/DateRange.css
index 69f7f1dfe..af8768f73 100644
--- a/platform/ui/src/components/DateRange/DateRange.css
+++ b/platform/ui/src/components/DateRange/DateRange.css
@@ -29,7 +29,7 @@
   @apply bg-no-repeat;
 }
 .DateInput_input {
-  @apply cursor-pointer border-custom-blue mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-white leading-tight pl-8;
+  @apply cursor-pointer border-primary-main mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-white leading-tight pl-8;
 }
 .DateInput_input:hover {
   @apply border-gray-500;
@@ -59,7 +59,7 @@
 
 /* SELECT MONTH PICKER */
 .DateRangePicker_select {
-  @apply bg-white text-custom-dark border rounded border-custom-gray appearance-none cursor-pointer text-base pl-2 pr-5 py-1; /* NEEDED FOR ARROW DOWN */
+  @apply bg-white text-secondary-active border rounded border-common-dark appearance-none cursor-pointer text-base pl-2 pr-5 py-1; /* NEEDED FOR ARROW DOWN */
   background-image: linear-gradient(45deg, transparent 50%, gray 50%),
     linear-gradient(135deg, gray 50%, transparent 50%);
   background-position: calc(100% - 11px) 11px, calc(100% - 6px) calc(11px);
@@ -75,21 +75,21 @@
 .CalendarDay__selected,
 .CalendarDay__selected:active,
 .CalendarDay__selected:hover {
-  @apply bg-custom-blue text-white border-0 border-custom-blue;
+  @apply bg-primary-main text-white border-0 border-primary-main;
 }
 
 .CalendarDay__blocked_out_of_range:hover {
-  @apply border-0 bg-white cursor-not-allowed text-custom-gray;
+  @apply border-0 bg-white cursor-not-allowed text-common-dark;
 }
 
 .CalendarDay__selected_span {
-  @apply border-0 bg-custom-aquaBright;
+  @apply border-0 bg-primary-light;
 }
 
 /* MONTH NAVIGATION BUTTONS */
 .DayPickerNavigation_button__horizontalDefault,
 .DayPickerNavigation_button__horizontalDefault:hover {
-  @apply border-custom-gray text-custom-gray;
+  @apply border-common-dark text-common-dark;
   top: 24px;
   padding: 3px 9px;
 }
diff --git a/platform/ui/src/components/DateRange/DateRange.jsx b/platform/ui/src/components/DateRange/DateRange.jsx
index afc6d8f05..6cc20d2c3 100644
--- a/platform/ui/src/components/DateRange/DateRange.jsx
+++ b/platform/ui/src/components/DateRange/DateRange.jsx
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 import moment from 'moment';
 
-const DateRange = props => {
+const DateRange = (props) => {
   const { onChange, startDate, endDate } = props;
   const [focusedInput, setFocusedInput] = useState(null);
 
@@ -43,7 +43,7 @@ const DateRange = props => {
             <button
               key={text}
               type="button"
-              className={`m-0 py-2 px-3 bg-custom-blue border-0 rounded text-white text-base transition duration-300 hover:opacity-80`}
+              className={`m-0 py-2 px-3 bg-primary-main border-0 rounded text-white text-base transition duration-300 hover:opacity-80`}
               onClick={() =>
                 onChange({
                   startDate: start,
@@ -88,7 +88,7 @@ const DateRange = props => {
           <select
             className="DateRangePicker_select"
             value={month.month()}
-            onChange={e => onMonthSelect(month, e.target.value)}
+            onChange={(e) => onMonthSelect(month, e.target.value)}
           >
             {moment.months().map((label, value) => (
               <option key={value} value={value}>
@@ -102,7 +102,7 @@ const DateRange = props => {
           <select
             className="DateRangePicker_select"
             value={month.year()}
-            onChange={e => onYearSelect(month, e.target.value)}
+            onChange={(e) => onYearSelect(month, e.target.value)}
           >
             {renderYearsOptions()}
           </select>
@@ -120,7 +120,7 @@ const DateRange = props => {
       endDateId={'endDateId'}
       onDatesChange={onChange}
       focusedInput={focusedInput}
-      onFocusChange={updatedVal => setFocusedInput(updatedVal)}
+      onFocusChange={(updatedVal) => setFocusedInput(updatedVal)}
       /** OPTIONAL */
       renderCalendarInfo={renderDatePresets}
       renderMonthElement={renderMonthElement}
@@ -130,7 +130,7 @@ const DateRange = props => {
         closeDatePicker: 'Close',
         clearDates: 'Clear dates',
       }}
-      isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
+      isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
       hideKeyboardShortcutsPanel={true}
       numberOfMonths={1}
       showClearDates={false}
diff --git a/platform/ui/src/components/EmptyStudies/EmptyStudies.js b/platform/ui/src/components/EmptyStudies/EmptyStudies.js
index 92c230424..48e3baaa6 100644
--- a/platform/ui/src/components/EmptyStudies/EmptyStudies.js
+++ b/platform/ui/src/components/EmptyStudies/EmptyStudies.js
@@ -7,7 +7,7 @@ const EmptyStudies = ({ className }) => {
   return (
     <div className={classnames('flex-col inline-flex items-center', className)}>
       <Icon name="magnifier" className="mb-4" />
-      <Typography className="text-custom-aquaBright" variant="h5">
+      <Typography className="text-primary-light" variant="h5">
         No studies available
       </Typography>
     </div>
diff --git a/platform/ui/src/components/Icon/icon.mdx b/platform/ui/src/components/Icon/icon.mdx
index e6b65228a..2e097ed15 100644
--- a/platform/ui/src/components/Icon/icon.mdx
+++ b/platform/ui/src/components/Icon/icon.mdx
@@ -20,7 +20,7 @@ import { Icon } from '@ohif/ui';
 
 <Playground>
   <div className="p-4">
-    <Icon name="series-active" className="text-custom-aquaBright m-4" />
+    <Icon name="series-active" className="text-primary-light m-4" />
   </div>
 </Playground>
 
@@ -33,8 +33,8 @@ import { Icon } from '@ohif/ui';
       return (
         <React.Fragment key={i}>
           <div className="flex flex-col items-center w-48 py-4">
-            <div className="flex items-center justify-center rounded border border-custom-aquaBright p-4 m-2 w-20 h-20">
-              <Icon name={name} className="text-custom-aquaBright" />
+            <div className="flex items-center justify-center rounded border border-primary-light p-4 m-2 w-20 h-20">
+              <Icon name={name} className="text-primary-light" />
             </div>
             <div className="break-normal text-white">{name}</div>
           </div>
diff --git a/platform/ui/src/components/IconButton/IconButton.jsx b/platform/ui/src/components/IconButton/IconButton.jsx
index 95d68974c..c080363ae 100644
--- a/platform/ui/src/components/IconButton/IconButton.jsx
+++ b/platform/ui/src/components/IconButton/IconButton.jsx
@@ -31,31 +31,31 @@ const disabledClasses = {
 const variantClasses = {
   text: {
     default:
-      'text-white hover:bg-custom-aquaBright hover:text-black active:opacity-80 focus:bg-custom-aquaBright focus:text-black',
+      'text-white hover:bg-primary-light hover:text-black active:opacity-80 focus:bg-primary-light focus:text-black',
     primary:
-      'text-custom-blue hover:bg-custom-blue hover:text-white active:opacity-80 focus:bg-custom-blue focus:text-white',
+      'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
     secondary:
-      'text-custom-violetPale hover:bg-custom-violetPale hover:text-white active:opacity-80 focus:bg-custom-violetPale focus:text-white',
+      'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
     white:
       'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
   },
   outlined: {
     default:
-      'border bg-trasparent border-custom-aquaBright text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border bg-trasparent border-primary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     primary:
-      'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border bg-transparent border-primary-main text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'border bg-transparent border-custom-violetPale text-custom-violetPale hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'border bg-transparent border-secondary-light text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'border bg-transparent border-white text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
   contained: {
     default:
-      'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-primary-light text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
     primary:
-      'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary:
-      'bg-custom-violetPale text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
+      'bg-secondary-light text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     white:
       'bg-white text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
   },
@@ -92,7 +92,7 @@ const IconButton = ({
 }) => {
   const buttonElement = useRef(null);
 
-  const handleOnClick = e => {
+  const handleOnClick = (e) => {
     buttonElement.current.blur();
     if (rest.onClick) {
       rest.onClick(e);
diff --git a/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx b/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx
index 710555ba7..3ed1868ad 100644
--- a/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx
+++ b/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx
@@ -35,8 +35,8 @@ const InputLabelWrapper = ({
             className={classnames(
               'mx-2 w-2',
               sortDirection !== 'none'
-                ? 'text-custom-aquaBright'
-                : 'text-custom-blue'
+                ? 'text-primary-light'
+                : 'text-primary-main'
             )}
           />
         )}
diff --git a/platform/ui/src/components/InputText/InputText.jsx b/platform/ui/src/components/InputText/InputText.jsx
index 7fd1a6827..2a244d7e8 100644
--- a/platform/ui/src/components/InputText/InputText.jsx
+++ b/platform/ui/src/components/InputText/InputText.jsx
@@ -19,11 +19,11 @@ const InputText = ({
       onLabelClick={onLabelClick}
     >
       <Input
-        className="border-custom-blue mt-2 bg-black"
+        className="border-primary-main mt-2 bg-black"
         type="text"
         containerClassName="mr-2"
         value={value}
-        onChange={event => {
+        onChange={(event) => {
           onChange(event.target.value);
         }}
       />
diff --git a/platform/ui/src/components/NavBar/NavBar.jsx b/platform/ui/src/components/NavBar/NavBar.jsx
index e601c0506..da20d2ca7 100644
--- a/platform/ui/src/components/NavBar/NavBar.jsx
+++ b/platform/ui/src/components/NavBar/NavBar.jsx
@@ -6,7 +6,7 @@ const NavBar = ({ className, children }) => {
   return (
     <div
       className={classnames(
-        'flex flex-row items-center bg-custom-navy px-3 py-1 sticky top-0 z-10 border-b-4 border-black',
+        'flex flex-row items-center bg-secondary-dark px-3 py-1 sticky top-0 z-10 border-b-4 border-black',
         className
       )}
     >
diff --git a/platform/ui/src/components/Select/Select.css b/platform/ui/src/components/Select/Select.css
index 694bb287c..fd9631e8e 100644
--- a/platform/ui/src/components/Select/Select.css
+++ b/platform/ui/src/components/Select/Select.css
@@ -1,5 +1,5 @@
 .customSelect__wrapper .customSelect__control {
-  @apply bg-black border-custom-blue shadow transition duration-300 border rounded w-full text-sm text-white leading-tight;
+  @apply bg-black border-primary-main shadow transition duration-300 border rounded w-full text-sm text-white leading-tight;
   min-height: 33px;
 }
 .customSelect__wrapper .customSelect__control:hover {
@@ -28,7 +28,7 @@
 }
 
 .customSelect__wrapper .customSelect__option:focus {
-  @apply bg-custom-blue;
+  @apply bg-primary-main;
 }
 
 .customSelect__wrapper .customSelect__option--is-selected {
diff --git a/platform/ui/src/components/TableCell/TableCell.jsx b/platform/ui/src/components/TableCell/TableCell.jsx
index e3c1a89b6..5a841bf1a 100644
--- a/platform/ui/src/components/TableCell/TableCell.jsx
+++ b/platform/ui/src/components/TableCell/TableCell.jsx
@@ -22,7 +22,7 @@ const TableCell = ({
     },
     isTableHead: {
       true: '',
-      false: 'border-r border-custom-violetPale',
+      false: 'border-r border-secondary-light',
     },
   };
 
diff --git a/platform/ui/src/components/TableHead/TableHead.jsx b/platform/ui/src/components/TableHead/TableHead.jsx
index 038c7796d..a14ec798b 100644
--- a/platform/ui/src/components/TableHead/TableHead.jsx
+++ b/platform/ui/src/components/TableHead/TableHead.jsx
@@ -6,7 +6,7 @@ const TableHead = ({ children, className, style }) => {
   return (
     <div
       className={classnames(
-        'bg-custom-navy border-b border-custom-violetPale flex font-bold pr-2',
+        'bg-secondary-dark border-b border-secondary-light flex font-bold pr-2',
         className
       )}
       style={style}
@@ -26,9 +26,9 @@ TableHead.defaultProps = {
 };
 
 TableHead.propTypes = {
-  children: function(props, propName, componentName) {
+  children: function (props, propName, componentName) {
     const elements = React.Children.toArray(props.children);
-    const isString = elements.some(child => typeof child === 'string');
+    const isString = elements.some((child) => typeof child === 'string');
 
     if (isString) {
       return new Error(
@@ -37,7 +37,7 @@ TableHead.propTypes = {
     }
 
     const isInvalidElement = elements.some(
-      child => !React.isValidElement(child)
+      (child) => !React.isValidElement(child)
     );
 
     if (isInvalidElement) {
diff --git a/platform/ui/src/components/Typography/Typography.jsx b/platform/ui/src/components/Typography/Typography.jsx
index fe7b3ac60..8330fdccb 100644
--- a/platform/ui/src/components/Typography/Typography.jsx
+++ b/platform/ui/src/components/Typography/Typography.jsx
@@ -44,8 +44,8 @@ const classes = {
   color: {
     initial: 'text-white',
     inherit: 'text-inherit',
-    primary: 'text-custom-blue',
-    secondary: 'text-custom-grayLight',
+    primary: 'text-primary-main',
+    secondary: 'text-common-light',
     error: 'text-red-600',
   },
   align: {
diff --git a/platform/ui/src/gatsby-theme-docz/tailwind.css b/platform/ui/src/gatsby-theme-docz/tailwind.css
index efd53e205..35e1754dd 100644
--- a/platform/ui/src/gatsby-theme-docz/tailwind.css
+++ b/platform/ui/src/gatsby-theme-docz/tailwind.css
@@ -16,9 +16,9 @@
 
 .ohif-scrollbar::-webkit-scrollbar-thumb {
   @apply rounded;
-  @apply bg-custom-blue;
+  @apply bg-primary-main;
 }
 
 .ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
-  @apply bg-custom-blue;
+  @apply bg-primary-main;
 }
diff --git a/platform/ui/src/gatsby-theme-docz/theme.css b/platform/ui/src/gatsby-theme-docz/theme.css
index 450d8374a..6864e3e8f 100644
--- a/platform/ui/src/gatsby-theme-docz/theme.css
+++ b/platform/ui/src/gatsby-theme-docz/theme.css
@@ -15,3 +15,7 @@
 #main-container > a {
   @apply underline text-blue-500;
 }
+
+code {
+  @apply bg-gray-200 text-lg text-black px-2 py-1 rounded;
+}
diff --git a/platform/ui/src/views/Colors/BackgroundColor.jsx b/platform/ui/src/views/Colors/BackgroundColor.jsx
new file mode 100644
index 000000000..df8c8233a
--- /dev/null
+++ b/platform/ui/src/views/Colors/BackgroundColor.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classnames from 'classnames';
+import tailwindConfig from '../../../tailwind.config';
+
+const BackgroundColor = ({ color }) => {
+  const getColorValue = () => {
+    const currentColor = color.split('-');
+    const { colors } = tailwindConfig.theme;
+    return colors[currentColor[0]][currentColor[1]];
+  };
+  console.log(tailwindConfig);
+  return (
+    <div
+      className={classnames(
+        `mb-4 w-56 h-10 flex items-center justify-center flex-col text-white text-lg bg-${color} py-8`
+      )}
+    >
+      <p>{getColorValue()}</p>
+      <p>bg-{color}</p>
+    </div>
+  );
+};
+
+export default BackgroundColor;
diff --git a/platform/ui/src/views/Colors/Colors.mdx b/platform/ui/src/views/Colors/Colors.mdx
new file mode 100644
index 000000000..5b9f0f790
--- /dev/null
+++ b/platform/ui/src/views/Colors/Colors.mdx
@@ -0,0 +1,84 @@
+---
+name: Colors
+menu: System
+route: system/colors
+---
+
+import { Playground, Props } from 'docz';
+import BackgroundColor from './BackgroundColor';
+
+# Color System
+
+**@ohif/ui** offers a color system with a handful of color utility classes.
+
+As **@ohif/ui** uses Tailwind as a base styling library, you will be able to use
+all the default colors from Tailwind, besides our custom colors too.
+
+# How to use
+
+To apply color in your element, you will use the same way Tailwind does.
+
+- Background - `bg-primary-main`
+- Border - `border-primary-main`
+- Text - `text-primary-main`
+- Placeholder - `placeholder-primary-main`
+
+Check [Tailwind's documentation](https://tailwindcss.com/docs) to see more
+details about color classes.
+
+# Examples
+
+## Text
+
+<Playground>
+  <div className="p-8">
+    <p className="text-common-bright">text-common-bright</p>
+    <p className="text-common-light">text-common-light</p>
+    <p className="text-common-main">text-common-main</p>
+    <p className="text-common-dark">text-common-dark</p>
+    <p className="text-common-active">text-common-active</p>
+  </div>
+</Playground>
+
+## Background
+
+<div className="flex">
+  <div className="mr-8">
+    <BackgroundColor color="primary-light" />
+    <BackgroundColor color="primary-main" />
+    <BackgroundColor color="primary-dark" />
+    <BackgroundColor color="primary-active" />
+  </div>
+  <div>
+    <BackgroundColor color="secondary-light" />
+    <BackgroundColor color="secondary-main" />
+    <BackgroundColor color="secondary-dark" />
+    <BackgroundColor color="secondary-active" />
+  </div>
+</div>
+
+# Color palette
+
+```javascript
+primary: {
+  light: '#5acce6',
+  main: '#0944b3',
+  dark: '#090c29',
+  active: '#348cfd',
+},
+
+secondary: {
+  light: '#3a3f99',
+  main: '#2b166b',
+  dark: '#041c4a',
+  active: '#1f1f27',
+},
+
+common: {
+  bright: '#e1e1e1',
+  light: '#a19fad',
+  main: '#fff',
+  dark: '#726f7e',
+  active: '#2c3074',
+},
+```
diff --git a/platform/ui/src/views/StudyList/components/Header.js b/platform/ui/src/views/StudyList/components/Header.js
index d475b681e..42ce2f4a9 100644
--- a/platform/ui/src/views/StudyList/components/Header.js
+++ b/platform/ui/src/views/StudyList/components/Header.js
@@ -18,13 +18,13 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
         <div>{children}</div>
       </div>
       <div className="flex items-center">
-        <span className="mr-3 text-custom-grayLight text-lg">
+        <span className="mr-3 text-common-light text-lg">
           {t('FOR INVESTIGATIONAL USE ONLY')}
         </span>
         <IconButton
           variant="text"
           color="inherit"
-          className="text-custom-blueBright"
+          className="text-primary-active"
           onClick={showSettingsDropdown}
         >
           <React.Fragment>
diff --git a/platform/ui/src/views/StudyList/components/StudyListFilter.js b/platform/ui/src/views/StudyList/components/StudyListFilter.js
index 4075fc4bc..efe256209 100644
--- a/platform/ui/src/views/StudyList/components/StudyListFilter.js
+++ b/platform/ui/src/views/StudyList/components/StudyListFilter.js
@@ -13,7 +13,7 @@ import {
 } from '@ohif/ui';
 
 const isFiltering = (currentFiltersValues, filtersValues) => {
-  return Object.keys(currentFiltersValues).some(name => {
+  return Object.keys(currentFiltersValues).some((name) => {
     const filterValue = currentFiltersValues[name];
     return filterValue !== filtersValues[name];
   });
@@ -25,7 +25,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
   );
   const { sortBy, sortDirection } = currentFiltersValues;
 
-  const handleFilterLabelClick = name => {
+  const handleFilterLabelClick = (name) => {
     let _sortDirection = 'ascending';
     if (sortBy === name) {
       if (sortDirection === 'ascending') {
@@ -36,7 +36,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
     }
 
     if (numOfStudies <= 100) {
-      setcurrentFiltersValues(prevState => ({
+      setcurrentFiltersValues((prevState) => ({
         ...prevState,
         sortBy: _sortDirection !== 0 ? name : '',
         sortDirection: _sortDirection,
@@ -72,8 +72,8 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
             sortDirection={_sortDirection}
             onLabelClick={onLabelClick}
             value={currentFiltersValues[name]}
-            onChange={newValue => {
-              setcurrentFiltersValues(prevState => ({
+            onChange={(newValue) => {
+              setcurrentFiltersValues((prevState) => ({
                 ...prevState,
                 [name]: newValue,
               }));
@@ -91,8 +91,8 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
             onLabelClick={onLabelClick}
             options={inputProps.options}
             value={currentFiltersValues[name]}
-            onChange={newValue => {
-              setcurrentFiltersValues(prevState => ({
+            onChange={(newValue) => {
+              setcurrentFiltersValues((prevState) => ({
                 ...prevState,
                 [name]: newValue,
               }));
@@ -108,8 +108,8 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
             sortDirection={_sortDirection}
             onLabelClick={onLabelClick}
             value={currentFiltersValues[name]}
-            onChange={newValue => {
-              setcurrentFiltersValues(prevState => ({
+            onChange={(newValue) => {
+              setcurrentFiltersValues((prevState) => ({
                 ...prevState,
                 [name]: newValue,
               }));
@@ -134,14 +134,11 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
   return (
     <>
       <div>
-        <div className="bg-custom-navyDark">
+        <div className="bg-primary-dark">
           <div className="container m-auto relative flex flex-col pt-5">
             <div className="flex flex-row justify-between mb-5 px-12">
               <div className="flex flex-row">
-                <Typography
-                  variant="h4"
-                  className="text-custom-aquaBright mr-6"
-                >
+                <Typography variant="h4" className="text-primary-light mr-6">
                   Study List
                 </Typography>
                 <div className="flex flex-row items-end">
@@ -149,12 +146,12 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
                     variant="text"
                     size="small"
                     color="inherit"
-                    className="text-custom-blueBright"
+                    className="text-primary-active"
                     startIcon={<Icon name="info-link" className="w-2" />}
                   >
                     <span className="flex flex-col flex-1">
                       <span>Learn more</span>
-                      <span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
+                      <span className="opacity-50 pt-1 border-b border-primary-active"></span>
                     </span>
                   </Button>
                 </div>
@@ -165,7 +162,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
                     rounded="full"
                     variant="outlined"
                     color="primary"
-                    className="text-custom-blueBright border-custom-blueBright mx-8"
+                    className="text-primary-active border-primary-active mx-8"
                     startIcon={<Icon name="cancel" />}
                     onClick={clearFilters}
                   >
@@ -177,7 +174,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
                 </Typography>
                 <Typography
                   variant="h6"
-                  className="text-custom-grayLight self-end pb-1"
+                  className="text-common-light self-end pb-1"
                 >
                   Studies
                 </Typography>
@@ -187,10 +184,10 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
         </div>
       </div>
       <div className="sticky z-10 border-b-4 border-black" style={{ top: 58 }}>
-        <div className="bg-custom-navyDark pt-3 pb-3 ">
+        <div className="bg-primary-dark pt-3 pb-3 ">
           <div className="container m-auto relative flex flex-col">
             <div className="flex flex-row w-full">
-              {filtersMeta.map(filterMeta => {
+              {filtersMeta.map((filterMeta) => {
                 return (
                   <div
                     key={filterMeta.name}
@@ -208,7 +205,7 @@ const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
         </div>
         {numOfStudies > 100 && (
           <div className="container m-auto">
-            <div className="bg-custom-blue text-center text-base py-1 rounded-b">
+            <div className="bg-primary-main text-center text-base py-1 rounded-b">
               <p className="text-white">
                 Filter list to 100 studies or less to enable sorting
               </p>
diff --git a/platform/ui/src/views/StudyList/components/StudyListPagination.js b/platform/ui/src/views/StudyList/components/StudyListPagination.js
index 6cc4b8980..940ac1081 100644
--- a/platform/ui/src/views/StudyList/components/StudyListPagination.js
+++ b/platform/ui/src/views/StudyList/components/StudyListPagination.js
@@ -7,10 +7,10 @@ import {
   Icon,
 } from '../../../components/';
 
-const StudyListPagination = props => {
+const StudyListPagination = (props) => {
   const [currentPage, setCurrentPage] = useState(1);
 
-  const navigateToPage = page => {
+  const navigateToPage = (page) => {
     const toPage = page < 1 ? 1 : page;
     setCurrentPage(toPage);
   };
@@ -23,7 +23,7 @@ const StudyListPagination = props => {
             <div className="relative mr-3">
               <select
                 defaultValue="25"
-                className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
+                className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
                 style={{ height: 28 }}
               >
                 <option value="25">25</option>
@@ -50,7 +50,7 @@ const StudyListPagination = props => {
               <ButtonGroup color="primary">
                 <IconButton
                   size="small"
-                  className="border-custom-darkSlateBlue px-4 py-2 text-base"
+                  className="border-common-active px-4 py-2 text-base"
                   style={{ padding: '3px 12px', minWidth: 0 }}
                   color="white"
                   onClick={() => navigateToPage(1)}
@@ -59,14 +59,14 @@ const StudyListPagination = props => {
                 </IconButton>
                 <Button
                   size="small"
-                  className="border-custom-darkSlateBlue py-2 text-base"
+                  className="border-common-active py-2 text-base"
                   style={{ padding: '3px 8px', minWidth: 0 }}
                   color="white"
                   onClick={() => navigateToPage(currentPage - 1)}
                 >{`< Previous`}</Button>
                 <Button
                   size="small"
-                  className="border-custom-darkSlateBlue py-2 text-base"
+                  className="border-common-active py-2 text-base"
                   style={{ padding: '3px 20px', minWidth: 0 }}
                   color="white"
                   onClick={() => navigateToPage(currentPage + 1)}
diff --git a/platform/ui/src/views/StudyList/components/StudyListTable.js b/platform/ui/src/views/StudyList/components/StudyListTable.js
index 26bbb93b4..bea3740a1 100644
--- a/platform/ui/src/views/StudyList/components/StudyListTable.js
+++ b/platform/ui/src/views/StudyList/components/StudyListTable.js
@@ -6,11 +6,11 @@ import { format } from 'date-fns';
 import { Button, Icon, EmptyStudies } from '@ohif/ui';
 
 const getGridColClass = (filtersMeta, name) => {
-  const filter = filtersMeta.find(filter => filter.name === name);
+  const filter = filtersMeta.find((filter) => filter.name === name);
   return (filter && filter.gridCol && `w-${filter.gridCol}/24`) || '';
 };
 
-const StudyTableRow = props => {
+const StudyTableRow = (props) => {
   const {
     AccessionNumber,
     Modalities,
@@ -28,30 +28,30 @@ const StudyTableRow = props => {
   const ChevronIconName = isOpened ? 'chevron-down' : 'chevron-right';
   const tdClasses = [
     'px-4 py-2 text-base',
-    { 'border-b border-custom-violetPale': !isOpened },
+    { 'border-b border-secondary-light': !isOpened },
   ];
   return (
     <>
       <tr>
         <td
           className={classnames('border-0 p-0', {
-            'border-b border-custom-violetPale bg-custom-navyDark': isOpened,
+            'border-b border-secondary-light bg-primary-dark': isOpened,
           })}
         >
           <div
             className={classnames('w-full transition duration-300', {
-              'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isOpened,
+              'border border-primary-light rounded overflow-hidden mb-2 hover:border-secondary-light': isOpened,
             })}
           >
             <table className={classnames('w-full p-4')}>
               <tbody>
                 <tr
                   className={classnames(
-                    'cursor-pointer hover:bg-custom-violetDark transition duration-300 bg-black',
+                    'cursor-pointer hover:bg-secondary-main transition duration-300 bg-black',
                     {
-                      'bg-custom-navyDark': !isOpened,
+                      'bg-primary-dark': !isOpened,
                     },
-                    { 'bg-custom-navy': isOpened }
+                    { 'bg-secondary-dark': isOpened }
                   )}
                   onClick={toggleRow}
                 >
@@ -115,8 +115,8 @@ const StudyTableRow = props => {
                     <Icon
                       name="series-active"
                       className={classnames('inline-flex mr-2', {
-                        'text-custom-blueBright': isOpened,
-                        'text-custom-violetPale': !isOpened,
+                        'text-primary-active': isOpened,
+                        'text-secondary-light': !isOpened,
                       })}
                     />
                     {Instances}
@@ -162,7 +162,7 @@ const StudyTableRow = props => {
                         >
                           Module 3
                         </Button>
-                        <div className="ml-5 text-lg text-custom-grayBright inline-flex items-center">
+                        <div className="ml-5 text-lg text-common-bright inline-flex items-center">
                           <Icon
                             name="notificationwarning-diamond"
                             className="mr-2 w-5 h-5"
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index b9c908745..04c1dc265 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -16,22 +16,43 @@ module.exports = {
       initial: 'initial',
       inherit: 'inherit',
 
+      primary: {
+        light: '#5acce6',
+        main: '#0944b3',
+        dark: '#090c29',
+        active: '#348cfd',
+      },
+
+      secondary: {
+        light: '#3a3f99',
+        main: '#2b166b',
+        dark: '#041c4a',
+        active: '#1f1f27',
+      },
+
+      common: {
+        bright: '#e1e1e1',
+        light: '#a19fad',
+        main: '#fff',
+        dark: '#726f7e',
+        active: '#2c3074',
+      },
+
       /** CUSTOM THEME COLORS */
       custom: {
-        dark: '#1f1f27',
-        aquaBright: '#5acce6',
-        navyDark: '#090c29',
-        navy: '#041c4a',
-        violetDark: '#2b166b',
-        violetPale: '#3a3f99',
-        blue: '#0944b3',
-        blueBright: '#348cfd',
-        aquaPale: '#7bb2ce',
-        white: '#ffffff',
-        grayBright: '#e1e1e1',
-        grayLight: '#a19fad',
-        gray: '#726f7e',
-        darkSlateBlue: '#2c3074',
+        dark: '#1f1f27', // [class]-secondary-active
+        aquaBright: '#5acce6', // [class]-primary-light
+        navyDark: '#090c29', // [class]-primary-dark
+        navy: '#041c4a', // [class]-secondary-dark
+        violetDark: '#2b166b', // [class]-secondary-main
+        violetPale: '#3a3f99', // [class]-secondary-light
+        blue: '#0944b3', // [class]-primary-main
+        blueBright: '#348cfd', // [class]-primary-active
+        white: '#ffffff', // [class]-common-main
+        grayBright: '#e1e1e1', // [class]-common-bright
+        grayLight: '#a19fad', // [class]-common-light
+        gray: '#726f7e', // [class]-common-dark
+        darkSlateBlue: '#2c3074', // [class]-common-active
       },
       /** END CUSTOM THEME COLORS */
 
@@ -170,7 +191,7 @@ module.exports = {
       '80': '20rem',
       '250px': '250px',
     },
-    backgroundColor: theme => theme('colors'),
+    backgroundColor: (theme) => theme('colors'),
     backgroundPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -187,7 +208,7 @@ module.exports = {
       cover: 'cover',
       contain: 'contain',
     },
-    borderColor: theme => ({
+    borderColor: (theme) => ({
       ...theme('colors'),
       default: theme('colors.gray.300', 'currentColor'),
     }),
@@ -301,7 +322,7 @@ module.exports = {
       extrabold: '800',
       black: '900',
     },
-    height: theme => ({
+    height: (theme) => ({
       auto: 'auto',
       ...theme('spacing'),
       full: '100%',
@@ -345,7 +366,7 @@ module.exports = {
       ...theme('spacing'),
       ...negative(theme('spacing')),
     }),
-    maxHeight: theme => ({
+    maxHeight: (theme) => ({
       full: '100%',
       screen: '100vh',
       ...theme('spacing'),
@@ -430,8 +451,8 @@ module.exports = {
       '11': '11',
       '12': '12',
     },
-    padding: theme => theme('spacing'),
-    placeholderColor: theme => theme('colors'),
+    padding: (theme) => theme('spacing'),
+    placeholderColor: (theme) => theme('colors'),
     stroke: {
       current: 'currentColor',
     },
@@ -440,8 +461,8 @@ module.exports = {
       '1': '1',
       '2': '2',
     },
-    textColor: theme => theme('colors'),
-    width: theme => ({
+    textColor: (theme) => theme('colors'),
+    width: (theme) => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -505,7 +526,7 @@ module.exports = {
       '40': '40',
       '50': '50',
     },
-    gap: theme => theme('spacing'),
+    gap: (theme) => theme('spacing'),
     gridTemplateColumns: {
       none: 'none',
       '1': 'repeat(1, minmax(0, 1fr))',