feat: ui-v2 Color System Naming

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

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;
         }

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;
 }

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}

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>

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>

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);

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'
             )}
           />
         )}

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);
         }}
       />

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
       )}
     >

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 {

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',
     },
   };
 

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) {

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: {