Refactor StyleProps and Palette files

Instead of keeping 2 separate files that do similar things (are used by
the styling system to get the colors and the different styling
properties), we can keep only one and just import from it what we need
instead of doing the 2 file imports.

.storybook/preview.js

@@ -2,24 +2,23 @@ import React from 'react'
 import { addDecorator } from '@storybook/react'
 import styled, { createGlobalStyle } from 'styled-components'
 
-import Palette from '../src/components/styleUtils/Palette'
-import StyleProps from '../src/components/styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../src/components/Theme'
 import Fonts from '../src/components/atoms/Fonts'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 
 const Wrapper = styled.div`
   display: inline-block;
-  background: ${Palette.grayscale[7]};
+  background: ${ThemePalette.grayscale[7]};
   padding: 32px;
 `
 
 const GlobalStyle = createGlobalStyle`
   ${Fonts}
   body {
-    color: ${Palette.black};
+    color: ${ThemePalette.black};
     font-family: Rubik;
     font-size: 14px;
-    font-weight: ${StyleProps.fontWeights.regular};
+    font-weight: ${ThemeProps.fontWeights.regular};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

src/components/App.tsx

@@ -43,11 +43,10 @@ import LogStreamPage from './smart/LogStreamPage'
 import Tooltip from './ui/Tooltip/Tooltip'
 
 import { navigationMenu } from '../constants'
-import Palette from './styleUtils/Palette'
-import StyleProps from './styleUtils/StyleProps'
 import configLoader from '../utils/Config'
 import MinionPoolsPage from './smart/MinionPoolsPage/MinionPoolsPage'
 import MinionPoolDetailsPage from './smart/MinionPoolDetailsPage/MinionPoolDetailsPage'
+import { ThemePalette, ThemeProps } from './Theme'
 
 const GlobalStyle = createGlobalStyle`
  ${Fonts}
@@ -59,10 +58,10 @@ const GlobalStyle = createGlobalStyle`
   }
   body {
     margin: 0;
-    color: ${Palette.black};
+    color: ${ThemePalette.black};
     font-family: Rubik;
     font-size: 14px;
-    font-weight: ${StyleProps.fontWeights.regular};
+    font-weight: ${ThemeProps.fontWeights.regular};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

src/components/styleUtils/StyleProps.ts → src/components/Theme.ts

@@ -1,5 +1,5 @@
 /*
-Copyright (C) 2017  Cloudbase Solutions SRL
+Copyright (C) 2021  Cloudbase Solutions SRL
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
@@ -14,7 +14,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { css } from 'styled-components'
 
-const StyleProps = {
+const exactWidth = (width: string) => css`
+  min-width: ${width};
+  max-width: ${width};
+`
+
+const exactHeight = (height: string) => css`
+  min-height: ${height};
+  max-height: ${height};
+`
+
+export const ThemePalette = {
+  primary: '#0044CB',
+  primaryLight: '#000EA9',
+  secondary: '#D9DCE3',
+  secondaryLight: '#777A8B',
+  black: '#202134',
+  alert: '#F91661',
+  success: '#4CD964',
+  warning: '#FDC02F',
+  grayscale: [
+    '#D8DBE2', // 0
+    '#ECEDF1', // 1
+    '#C8CCD7', // 2
+    '#A4AAB5', // 3
+    '#616770', // 4
+    '#7F8795', // 5
+    '#1B2733', // 6
+    '#F2F3F4', // 7
+    '#858B93', // 8
+  ],
+}
+
+export const ThemeProps = {
   fontWeights: {
     extraLight: 200,
     light: 300,
@@ -36,37 +68,27 @@ const StyleProps = {
   animations: {
     swift: '.45s cubic-bezier(0.3, 1, 0.4, 1) 0s',
     rotation: css`
-      animation: rotate 2s infinite linear;
-      @keyframes rotate {
-        from {transform: rotate(0deg);}
-        to {transform: rotate(360deg);}
-      }
-    `,
+        animation: rotate 2s infinite linear;
+        @keyframes rotate {
+          from {transform: rotate(0deg);}
+          to {transform: rotate(360deg);}
+        }
+      `,
     disabledLoading: css`
-      animation: opacityToggle 750ms linear infinite alternate-reverse;
-      @keyframes opacityToggle {
-        0% {opacity: 1;}
-        100% {opacity: 0.3;}
-      }
-    `,
+        animation: opacityToggle 750ms linear infinite alternate-reverse;
+        @keyframes opacityToggle {
+          0% {opacity: 1;}
+          100% {opacity: 0.3;}
+        }
+      `,
   },
 
   mobileMaxWidth: 1350,
 
-  exactWidth: (width: string) => css`
-    min-width: ${width};
-    max-width: ${width};
-  `,
-
-  exactHeight: (height: string) => css`
-    min-height: ${height};
-    max-height: ${height};
-  `,
-
+  exactWidth,
+  exactHeight,
   exactSize: (size: string) => css`
-    ${StyleProps.exactWidth(size)}
-    ${StyleProps.exactHeight(size)}
-  `,
+      ${exactWidth(size)}
+      ${exactHeight(size)}
+    `,
 }
-
-export default StyleProps

src/components/modules/AssessmentModule/AssessedVmListItem/AssessedVmListItem.tsx

@@ -20,8 +20,7 @@ import Checkbox from '../../../ui/Checkbox/Checkbox'
 import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
 import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
 import type { VmItem } from '../../../../@types/Assessment'
-
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -46,7 +45,7 @@ const DisplayName = styled.div<any>`
   ${(props: any) => columnWidth(props.width)}
 `
 const Value = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   ${(props: any) => columnWidth(props.width)}
 `
 const DisplayNameLabel = styled.div<any>`

src/components/modules/AssessmentModule/AssessmentDetailsContent/AssessmentDetailsContent.tsx

@@ -27,8 +27,6 @@ import DropdownFilter from '../../../ui/Dropdowns/DropdownFilter/DropdownFilter'
 import Checkbox from '../../../ui/Checkbox/Checkbox'
 import SmallLoading from '../../../ui/SmallLoading/SmallLoading'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
 import type { Assessment, VmItem, AzureLocation } from '../../../../@types/Assessment'
 import type { Endpoint } from '../../../../@types/Endpoint'
 import type { Instance, Nic } from '../../../../@types/Instance'
@@ -36,6 +34,7 @@ import type { Network, NetworkMap } from '../../../../@types/Network'
 
 import azureMigrateImage from './images/logo.svg'
 import arrowImage from './images/arrow.svg'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -51,7 +50,7 @@ const Buttons = styled.div<any>`
   }
 `
 const DetailsBody = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
   margin-bottom: 32px;
 `
 const Columns = styled.div<any>`
@@ -71,8 +70,8 @@ const Field = styled.div<any>`
 `
 const Label = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[3]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
 `
 const Value = styled.div<any>`

src/components/modules/AssessmentModule/AssessmentListItem/AssessmentListItem.tsx

@@ -18,25 +18,24 @@ import styled from 'styled-components'
 
 import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
 import type { Assessment } from '../../../../@types/Assessment'
 
 import assessmentImage from './images/assessment.svg'
 import azureMigrateImage from './images/azure-migrate.svg'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -44,7 +43,7 @@ const Wrapper = styled.div<any>`
   align-items: center;
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Image = styled.div<any>`
@@ -70,7 +69,7 @@ const AssessmentType = styled.div<any>`
   justify-content: center;
   align-items: center;
   margin-right: 46px;
-  ${StyleProps.exactWidth('180px')}
+  ${ThemeProps.exactWidth('180px')}
 `
 const AssessmentImage = styled.div<any>`
   width: 48px;
@@ -80,22 +79,22 @@ const AssessmentImage = styled.div<any>`
 `
 const AssessmentLabel = styled.div<any>`
   font-size: 15px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   width: 64px;
 `
 const TotalVms = styled.div<any>`
-  ${StyleProps.exactWidth('96px')}
+  ${ThemeProps.exactWidth('96px')}
   margin-right: 48px;
 `
 const Project = styled.div<any>`
-  ${StyleProps.exactWidth('175px')}
+  ${ThemeProps.exactWidth('175px')}
   margin-right: 48px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
 `
 
 type Props = {

src/components/modules/AssessmentModule/AssessmentMigrationOptions/AssessmentMigrationOptions.tsx

@@ -22,7 +22,8 @@ import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
 
 import type { Field } from '../../../../@types/Field'
 
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemeProps } from '../../../Theme'
+
 import LabelDictionary from '../../../../utils/LabelDictionary'
 
 import assessmentImage from './images/assessment.svg'
@@ -51,7 +52,7 @@ const Fields = styled.div<any>`
   min-height: 0;
 `
 const FieldStyled = styled(FieldInput)`
-  ${StyleProps.exactWidth(`${StyleProps.inputSizes.large.width}px`)}
+  ${ThemeProps.exactWidth(`${ThemeProps.inputSizes.large.width}px`)}
   margin-bottom: 16px;
 `
 const Row = styled.div<any>`
@@ -236,7 +237,7 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
 
       const currentField = (
         <FieldStyled
-          width={StyleProps.inputSizes.large.width}
+          width={ThemeProps.inputSizes.large.width}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...field}
           // eslint-disable-next-line react/jsx-props-no-spreading

src/components/modules/DashboardModule/DashboardActivity/DashboardActivity.tsx

@@ -24,26 +24,24 @@ import {
   InfoColumn, MainItemInfo, ItemReplicaBadge, ItemTitle, ItemDescription,
 } from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
-
 import type { NotificationItemData } from '../../../../@types/NotificationItem'
 
 import replicaImage from './images/replica.svg'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;
 `
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   display: flex;
   overflow: hidden;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   height: 273px;
 `
 const LoadingWrapper = styled.div<any>`
@@ -66,10 +64,10 @@ const ListItem = styled(Link)`
   text-decoration: none;
   color: inherit;
   display: block;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const NoItems = styled.div<any>`
@@ -79,7 +77,7 @@ const NoItems = styled.div<any>`
   width: 100%;
 `
 const ReplicaImage = styled.div<any>`
-  ${StyleProps.exactSize('148px')}
+  ${ThemeProps.exactSize('148px')}
   background: url('${replicaImage}') center no-repeat;
 `
 const Message = styled.div<any>`

src/components/modules/DashboardModule/DashboardBarChart/DashboardBarChart.tsx

@@ -16,9 +16,8 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-
 import BarChartNiceScale from './BarChartNiceScale'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -34,7 +33,7 @@ const YTick = styled.div<any>`
   position: absolute;
   top: ${props => 100 - props.bottom}%;
   font-size: 9px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   width: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -85,7 +84,7 @@ const StackedBar = styled.div<any>`
 `
 const BarLabel = styled.div<any>`
   font-size: 9px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   margin-top: 8px;
 `
 type DataItem = {

src/components/modules/DashboardModule/DashboardContent/DashboardContent.tsx

@@ -23,7 +23,7 @@ import DashboardActivity from '../DashboardActivity/DashboardActivity'
 import DashboardTopEndpoints from '../DashboardTopEndpoints/DashboardTopEndpoints'
 import DashboardExecutions from '../DashboardExecutions/DashboardExecutions'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 import type { Endpoint } from '../../../../@types/Endpoint'
 import type { Project } from '../../../../@types/Project'
@@ -170,21 +170,21 @@ class DashboardContent extends React.Component<Props, State> {
       {
         label: 'Replicas',
         value: this.props.replicas.length,
-        color: Palette.alert,
+        color: ThemePalette.alert,
         link: '/replicas',
         loading: this.props.replicasLoading,
       },
       {
         label: 'Migrations',
         value: this.props.migrations.length,
-        color: Palette.primary,
+        color: ThemePalette.primary,
         link: '/migrations',
         loading: this.props.migrationsLoading,
       },
       {
         label: 'Endpoints',
         value: this.props.endpoints.length,
-        color: Palette.black,
+        color: ThemePalette.black,
         link: '/endpoints',
         loading: this.props.endpointsLoading,
       },
@@ -195,14 +195,14 @@ class DashboardContent extends React.Component<Props, State> {
         {
           label: 'Users',
           value: this.props.users.length,
-          color: Palette.grayscale[3],
+          color: ThemePalette.grayscale[3],
           link: '/users',
           loading: this.props.usersLoading,
         },
         {
           label: 'Projects',
           value: this.props.projects.length,
-          color: Palette.grayscale[3],
+          color: ThemePalette.grayscale[3],
           link: '/projects',
           loading: this.props.projectsLoading,
         },

src/components/modules/DashboardModule/DashboardExecutions/DashboardExecutions.tsx

@@ -21,8 +21,7 @@ import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
 import DashboardBarChart from '../DashboardBarChart/DashboardBarChart'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import emptyBackgroundImage from './images/empty-background.svg'
 import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
@@ -35,14 +34,14 @@ const INTERVALS = [
 const Wrapper = styled.div<any>``
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
   position: relative;
   display: flex;
-  background: ${Palette.grayscale[0]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[0]};
+  border-radius: ${ThemeProps.borderRadius};
   height: 240px;
 `
 const ChartWrapper = styled.div<any>`
@@ -73,16 +72,16 @@ const Tooltip = styled.div<any>`
   position: absolute;
   bottom: ${props => props.position.y}px;
   left: ${props => props.position.x}px;
-  background: ${Palette.black};
+  background: ${ThemePalette.black};
   padding: 8px 16px 16px 16px;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   color: white;
-  ${StyleProps.exactWidth('174px')}
+  ${ThemeProps.exactWidth('174px')}
   box-shadow: rgba(0,0,0,0.1) 0 0 6px 1px;
 `
 const TooltipHeader = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   text-align: center;
   border-bottom: 1px solid;
   padding-bottom: 4px;
@@ -101,7 +100,7 @@ const TooltipTip = styled.div<any>`
   width: 16px;
   height: 16px;
   bottom: -8px;
-  background: ${Palette.black};
+  background: ${ThemePalette.black};
   left: calc(50% - 16px);
   transform: rotate(45deg);
 `
@@ -112,7 +111,7 @@ const NoData = styled.div<any>`
 const NoDataMessage = styled.div<any>`
   position: absolute;
   font-size: 17px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   display: flex;
   top: 0;
   bottom: 0;

src/components/modules/DashboardModule/DashboardInfoCount/DashboardInfoCount.tsx

@@ -19,14 +19,13 @@ import { Link } from 'react-router-dom'
 
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   display: flex;
   overflow: auto;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
 `
 const CountBlock = styled.div<any>`
   flex-grow: 1;
@@ -39,7 +38,7 @@ const CountBlock = styled.div<any>`
   height: 96px;
   justify-content: center;
   &:first-child {
-    border-left: 1px solid ${Palette.grayscale[0]};
+    border-left: 1px solid ${ThemePalette.grayscale[0]};
   }
 
   @media (max-width: 832px) {
@@ -52,13 +51,13 @@ const LoadingWrapper = styled.div<any>`
 `
 const CountBlockValue = styled(Link)`
   font-size: 53px;
-  font-weight: ${StyleProps.fontWeights.extraLight};
+  font-weight: ${ThemeProps.fontWeights.extraLight};
   text-decoration: none;
   color: inherit;
 `
 const CountBlockLabel = styled(Link)`
   font-size: 12px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
   color: ${props => props.color};
   text-decoration: none;

src/components/modules/DashboardModule/DashboardLicence/DashboardLicence.tsx

@@ -20,8 +20,7 @@ import moment from 'moment'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import type { Licence, LicenceServerStatus } from '../../../../@types/Licence'
 import CopyValue from '../../../ui/CopyValue/CopyValue'
@@ -34,14 +33,14 @@ const Wrapper = styled.div<any>`
 `
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   display: flex;
   overflow: auto;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   padding: 24px 16px 16px 16px;
   height: 232px;
 `
@@ -71,13 +70,13 @@ const TopInfoText = styled.div<any>`
   flex-grow: 1;
 `
 const TopInfoDate = styled.div<any>`
-  ${StyleProps.exactWidth('76px')}
-  ${StyleProps.exactHeight('80px')}
+  ${ThemeProps.exactWidth('76px')}
+  ${ThemeProps.exactHeight('80px')}
   display: flex;
   flex-direction: column;
   margin-left: 24px;
-  ${StyleProps.boxShadow}
-  border-radius: ${StyleProps.borderRadius};
+  ${ThemeProps.boxShadow}
+  border-radius: ${ThemeProps.borderRadius};
   overflow: hidden;
 `
 const TopInfoDateTop = styled.div<any>`
@@ -94,9 +93,9 @@ const TopInfoDateBottom = styled.div<any>`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   font-size: 37px;
-  font-weight: ${StyleProps.fontWeights.extraLight};
+  font-weight: ${ThemeProps.fontWeights.extraLight};
 `
 const Charts = styled.div<any>`
   margin-top: -8px;
@@ -116,12 +115,12 @@ const ChartHeader = styled.div<any>`
 `
 const ChartHeaderCurrent = styled.div<any>``
 const ChartHeaderTotal = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ChartBodyWrapper = styled.div<any>`
   height: 8px;
-  background: ${Palette.grayscale[2]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[2]};
+  border-radius: ${ThemeProps.borderRadius};
   margin-top: 4px;
   overflow: hidden;
 `
@@ -173,7 +172,7 @@ class DashboardLicence extends React.Component<Props> {
     const graphDataRows = [
       [
         {
-          color: Palette.alert,
+          color: ThemePalette.alert,
           current: info.currentPerformedReplicas,
           total: info.currentAvailableReplicas,
           label: 'Current Replicas',
@@ -181,7 +180,7 @@ class DashboardLicence extends React.Component<Props> {
           all currently active licences (including non-activated floating licences)`,
         },
         {
-          color: Palette.alert,
+          color: ThemePalette.alert,
           current: info.lifetimePerformedReplicas,
           total: info.lifetimeAvailableReplicas,
           label: 'Lifetime Replicas',
@@ -190,7 +189,7 @@ class DashboardLicence extends React.Component<Props> {
       ],
       [
         {
-          color: Palette.primary,
+          color: ThemePalette.primary,
           current: info.currentPerformedMigrations,
           total: info.currentAvailableMigrations,
           label: 'Current Migrations',
@@ -198,7 +197,7 @@ class DashboardLicence extends React.Component<Props> {
           all currently active licences (including non-activated floating licences)`,
         },
         {
-          color: Palette.primary,
+          color: ThemePalette.primary,
           current: info.lifetimePerformedMigrations,
           total: info.lifetimeAvailableMigrations,
           label: 'Lifetime Migrations',
@@ -268,7 +267,7 @@ class DashboardLicence extends React.Component<Props> {
         <AddLicenceButtonWrapper>
           <Logo
             dangerouslySetInnerHTML={
-              { __html: licenceImage(Palette.grayscale[5]) }
+              { __html: licenceImage(ThemePalette.grayscale[5]) }
             }
           />
           <Button primary onClick={this.props.onAddClick}>Add Licence</Button>

src/components/modules/DashboardModule/DashboardPieChart/DashboardPieChart.tsx

@@ -16,8 +16,8 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
+import { ThemeProps } from '../../../Theme'
 
-import StyleProps from '../../../styleUtils/StyleProps'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -27,16 +27,16 @@ const OuterShadow = styled.div<any>`
   position: absolute;
   top: 0;
   left: 0;
-  ${props => StyleProps.exactSize(`${props.size}px`)}
+  ${props => ThemeProps.exactSize(`${props.size}px`)}
   border-radius: 50%;
-  ${StyleProps.boxShadow}
+  ${ThemeProps.boxShadow}
   pointer-events: none;
 `
 const InnerShadow = styled.div<any>`
   position: absolute;
   top: calc(50% - ${props => props.size}px);
   left: calc(50% - ${props => props.size}px);
-  ${props => StyleProps.exactSize(`${props.size * 2}px`)}
+  ${props => ThemeProps.exactSize(`${props.size * 2}px`)}
   border-radius: 50%;
   box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 6px 2px;
   pointer-events: none;

src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints.tsx

@@ -22,8 +22,7 @@ import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
 import DashboardPieChart from '../DashboardPieChart/DashboardPieChart'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import type { Endpoint } from '../../../../@types/Endpoint'
 
@@ -35,12 +34,12 @@ const Wrapper = styled.div<any>`
 `
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
-  background: ${Palette.grayscale[0]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[0]};
+  border-radius: ${ThemeProps.borderRadius};
   height: 224px;
   padding: 32px 16px 16px 16px;
 `
@@ -62,11 +61,11 @@ const Tooltip = styled.div<any>`
   position: absolute;
   width: 208px;
   overflow: hidden;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   box-shadow: rgba(0,0,0,0.1) 0 0 6px 1px;
 `
 const TooltipHeader = styled.div<any>`
-  background: ${Palette.grayscale[3]};
+  background: ${ThemePalette.grayscale[3]};
   height: 24px;
   display: flex;
   align-items: center;
@@ -74,7 +73,7 @@ const TooltipHeader = styled.div<any>`
   padding: 0 14px;
 `
 const TooltipBody = styled.div<any>`
-  background: ${Palette.black};
+  background: ${ThemePalette.black};
   height: 54px;
   display: flex;
   align-items: center;
@@ -99,7 +98,7 @@ const LegendItem = styled.div<any>`
   width: calc(33% - 8px);
 `
 const LegendBullet = styled.div<any>`
-  ${StyleProps.exactSize('8px')}
+  ${ThemeProps.exactSize('8px')}
   border: 2px solid ${props => props.color};
   border-radius: 50%;
 `
@@ -121,7 +120,7 @@ const NoItems = styled.div<any>`
   width: 100%;
 `
 const EndpointImage = styled.div<any>`
-  ${StyleProps.exactSize('148px')}
+  ${ThemeProps.exactSize('148px')}
   background: url('${endpointImage}') center no-repeat;
 `
 const Message = styled.div<any>`
@@ -252,7 +251,7 @@ class DashboardTopEndpoints extends React.Component<Props, State> {
           size={144}
           data={this.state.groupedEndpoints}
           colors={COLORS}
-          holeStyle={{ radius: 57, color: Palette.grayscale[0] }}
+          holeStyle={{ radius: 57, color: ThemePalette.grayscale[0] }}
           onMouseOver={(item, x, y) => { this.handleMouseOver(item, x, y) }}
           onMouseLeave={() => { this.handleMouseLeave() }}
         />

src/components/modules/DetailsModule/DetailsContentHeader/DetailsContentHeader.tsx

@@ -21,13 +21,12 @@ import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
 import ActionDropdown from '../../../ui/Dropdowns/ActionDropdown/ActionDropdown'
 import type { Action as DropdownAction } from '../../../ui/Dropdowns/ActionDropdown/ActionDropdown'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import backArrowImage from './images/back-arrow.svg'
 
 const Wrapper = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   height: 96px;
   display: flex;
   align-items: center;
@@ -35,7 +34,7 @@ const Wrapper = styled.div<any>`
   margin-left: -72px;
 `
 const BackButton = styled(Link)`
-  ${StyleProps.exactSize('33px')}
+  ${ThemeProps.exactSize('33px')}
   background: url('${backArrowImage}') no-repeat center;
   cursor: pointer;
   margin-right: 32px;
@@ -49,11 +48,11 @@ const TypeImage = styled.div<any>`
 const Title = styled.div<any>`
   display: flex;
   align-items: center;
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `
 const Text = styled.div<any>`
   font-size: 30px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -71,11 +70,11 @@ const StatusPills = styled.div<any>`
   }
 `
 const Description = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 3px;
 `
 const MockButton = styled.div<any>`
-  ${StyleProps.exactWidth(`${StyleProps.inputSizes.regular.width}px`)}
+  ${ThemeProps.exactWidth(`${ThemeProps.inputSizes.regular.width}px`)}
 `
 
 type Props = {

src/components/modules/EndpointModule/ChooseProvider/ChooseProvider.tsx

@@ -22,8 +22,7 @@ import EndpointLogos from '../EndpointLogos/EndpointLogos'
 import Button from '../../../ui/Button/Button'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import FileUtils from '../../../../utils/FileUtils'
 import configLoader from '../../../../utils/Config'
 
@@ -54,15 +53,15 @@ const Logos = styled.div<any>`
   flex-grow: 1;
 `
 const Upload = styled.div<any>`
-  border: 1px dashed ${props => (props.highlight ? Palette.primary : 'white')};
+  border: 1px dashed ${props => (props.highlight ? ThemePalette.primary : 'white')};
   margin: 0 32px 16px 32px;
   padding: 16px;
 `
 const UploadMessage = styled.div<any>`
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
 `
 const UploadMessageButton = styled.span`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   cursor: pointer;
 `
 const FakeFileInput = styled.input`
@@ -72,7 +71,7 @@ const FakeFileInput = styled.input`
 `
 const EndpointLogosStyled = styled(EndpointLogos)`
   transform: scale(0.67);
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   cursor: pointer;
   &:hover {
     transform: scale(0.7);

src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -25,8 +25,7 @@ import CopyMultilineValue from '../../../ui/CopyMultilineValue/CopyMultilineValu
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
 import type { Endpoint } from '../../../../@types/Endpoint'
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import configLoader from '../../../../utils/Config'
@@ -38,7 +37,7 @@ import { Field as FieldType } from '../../../../@types/Field'
 import DomUtils from '../../../../utils/DomUtils'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
   margin: 0 auto;
   padding-left: 126px;
 `
@@ -49,14 +48,14 @@ const Info = styled.div<any>`
   margin-left: -32px;
 `
 const Field = styled.div<any>`
-  ${StyleProps.exactWidth('calc(50% - 32px)')}
+  ${ThemeProps.exactWidth('calc(50% - 32px)')}
   margin-bottom: 32px;
   margin-left: 32px;
 `
 const Label = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   margin-bottom: 3px;
 `
@@ -75,7 +74,7 @@ const LoadingWrapper = styled.div<any>`
   margin: 32px 0 64px 0;
 `
 const LinkStyled = styled(Link)`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
   cursor: pointer;
 `
@@ -89,7 +88,7 @@ const TransferItemWrapper = styled.div`
 
 const DownloadLink = styled.div`
   display: inline-block;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   cursor: pointer;
   :hover {
     text-decoration: underline;

src/components/modules/EndpointModule/EndpointDuplicateOptions/EndpointDuplicateOptions.tsx

@@ -22,7 +22,7 @@ import FieldInput from '../../../ui/FieldInput/FieldInput'
 
 import KeyboardManager from '../../../../utils/KeyboardManager'
 import type { Project } from '../../../../@types/Project'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 import duplicateImage from './images/duplicate.svg'
 
@@ -54,7 +54,7 @@ const Title = styled.div<any>`
   margin-bottom: 8px;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const Form = styled.div<any>`
   margin-bottom: 128px;

src/components/modules/EndpointModule/EndpointListItem/EndpointListItem.tsx

@@ -19,29 +19,28 @@ import { observer } from 'mobx-react'
 import type { Endpoint } from '../../../../@types/Endpoint'
 import Checkbox from '../../../ui/Checkbox/Checkbox'
 import EndpointLogos from '../EndpointLogos/EndpointLogos'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 
 import endpointImage from './images/endpoint.svg'
 
 const CheckboxStyled = styled(Checkbox)`
   opacity: ${props => (props.checked ? 1 : 0)};
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 `
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
   margin-left: 16px;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -53,7 +52,7 @@ const Wrapper = styled.div<any>`
   }
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Image = styled.div<any>`
@@ -75,14 +74,14 @@ const TitleLabel = styled.div<any>`
   text-overflow: ellipsis;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 3px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
 `
 const Created = styled.div<any>`
   margin: 0 48px;

src/components/modules/EndpointModule/EndpointLogos/resources/Generic.tsx

@@ -15,8 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled from 'styled-components'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../../Theme'
 import generic64Image from './generic-64.svg'
 import generic128Image from './generic-128.svg'
 import generic128DisabledImage from './generic-128-disabled.svg'
@@ -31,8 +30,8 @@ const Wrapper = styled.div<any>`
   letter-spacing: -1px;
 `
 const Logo = styled.div<any>`
-  ${(props: any) => StyleProps.exactWidth(`${props.width}px`)}
-  ${(props: any) => StyleProps.exactHeight(`${props.height}px`)}
+  ${(props: any) => ThemeProps.exactWidth(`${props.width}px`)}
+  ${(props: any) => ThemeProps.exactHeight(`${props.height}px`)}
   background: url(${(props: any) => props.image}) center no-repeat;
 `
 
@@ -47,7 +46,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '14px',
-        color: white ? 'white' : Palette.grayscale[4],
+        color: white ? 'white' : ThemePalette.grayscale[4],
       }}
       >
         {this.props.name}
@@ -59,7 +58,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '18px',
-        color: Palette.grayscale[4],
+        color: ThemePalette.grayscale[4],
       }}
       >
         {this.props.name}
@@ -71,7 +70,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '22px',
-        color: Palette.black,
+        color: ThemePalette.black,
         textAlign: 'left',
       }}
       >
@@ -85,7 +84,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '22px',
-        color: disabled ? Palette.grayscale[3] : Palette.black,
+        color: disabled ? ThemePalette.grayscale[3] : ThemePalette.black,
         textAlign: 'left',
         flexDirection: 'column',
       }}

src/components/modules/EndpointModule/EndpointModal/EndpointModal.tsx

@@ -30,7 +30,7 @@ import notificationStore from '../../../../stores/NotificationStore'
 import endpointStore from '../../../../stores/EndpointStore'
 import providerStore from '../../../../stores/ProviderStore'
 import ObjectUtils from '../../../../utils/ObjectUtils'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 import DomUtils from '../../../../utils/DomUtils'
 import { ContentPlugin } from '../../../../plugins/endpoint'
 import DefaultContentPlugin from '../../../../plugins/endpoint/default/ContentPlugin'
@@ -62,7 +62,7 @@ const StatusMessage = styled.div<any>`
 `
 const ShowErrorButton = styled.span`
   font-size: 10px;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   margin-left: 8px;
   cursor: pointer;
 `

src/components/modules/EndpointModule/EndpointValidation/EndpointValidation.tsx

@@ -20,7 +20,7 @@ import Button from '../../../ui/Button/Button'
 import CopyButton from '../../../ui/CopyButton/CopyButton'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 import type { Validation as ValidationType } from '../../../../@types/Endpoint'
 
 import notificationStore from '../../../../stores/NotificationStore'
@@ -51,7 +51,7 @@ const Title = styled.div<any>`
   margin-bottom: 8px;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const Buttons = styled.div<any>`
   margin-top: 48px;

src/components/modules/LicenceModule/LicenceModule.tsx

@@ -23,8 +23,7 @@ import StatusImage from '../../ui/StatusComponents/StatusImage/StatusImage'
 import TextArea from '../../ui/TextArea/TextArea'
 import CopyValue from '../../ui/CopyValue/CopyValue'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../Theme'
 import FileUtils from '../../../utils/FileUtils'
 
 import type { Licence, LicenceServerStatus } from '../../../@types/Licence'
@@ -38,7 +37,7 @@ const Wrapper = styled.div<any>`
 `
 const TextAreaStyled = styled(TextArea)`
   ${props => (props.dropzone ? css`
-    border: 1px dashed ${Palette.primary};
+    border: 1px dashed ${ThemePalette.primary};
   ` : '')}
 `
 const LicenceInfoWrapper = styled.div<any>`
@@ -55,15 +54,15 @@ const LicenceRow = styled.div<any>`
 const LicenceRowLabel = styled.div<any>`
   display: flex;
   align-items: center;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   font-size: 10px;
   text-transform: uppercase;
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
 `
 const LicenceLink = styled.span`
   text-transform: initial;
-  color: ${Palette.primary};
-  font-weight: ${StyleProps.fontWeights.regular};
+  color: ${ThemePalette.primary};
+  font-weight: ${ThemeProps.fontWeights.regular};
   cursor: pointer;
 `
 const LicenceRowContent = styled.div<any>`
@@ -93,7 +92,7 @@ const LicenceAddWrapper = styled.div<any>`
   padding: 0 32px;
 `
 const Description = styled.div<any>`
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
 `
 const FakeFileInput = styled.input`
   position: absolute;
@@ -341,7 +340,7 @@ class LicenceModule extends React.Component<Props, State> {
       <LicenceAddWrapper>
         <Logo
           dangerouslySetInnerHTML={
-            { __html: licenceImage(this.state.isValid ? Palette.primary : Palette.grayscale[5]) }
+            { __html: licenceImage(this.state.isValid ? ThemePalette.primary : ThemePalette.grayscale[5]) }
           }
         />
         <LicenceRowLabel style={{ marginTop: '32px' }}>Licence</LicenceRowLabel>

src/components/modules/LoginModule/LoginForm/LoginForm.tsx

@@ -21,12 +21,12 @@ import LoginOptions from '../LoginOptions/LoginOptions'
 import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 import LoginFormField from '../LoginFormField/LoginFormField'
 
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import errorIcon from './images/error.svg'
 
 import { loginButtons } from '../../../../constants'
 import notificationStore from '../../../../stores/NotificationStore'
+import { ThemeProps } from '../../../Theme'
 
 const Form = styled.form`
   background: rgba(221, 224, 229, 0.5);
@@ -77,7 +77,7 @@ const LoginErrorText = styled.div<any>`
   color: white;
   font-size: 12px;
   margin-top: 4px;
-  width: ${StyleProps.inputSizes.regular.width}px;
+  width: ${ThemeProps.inputSizes.regular.width}px;
   text-align: center;
 `
 

src/components/modules/LoginModule/LoginFormField/LoginFormField.tsx

@@ -14,9 +14,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import styled from 'styled-components'
+import { ThemeProps } from '../../../Theme'
 
 import TextInput from '../../../ui/TextInput/TextInput'
-import StyleProps from '../../../styleUtils/StyleProps'
 
 const Wrapper = styled.div<any>`
   margin-bottom: 16px;
@@ -26,11 +26,11 @@ const FormFieldLabel = styled.div<any>`
   color: white;
   text-transform: uppercase;
   margin-bottom: 6px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   font-size: 9px;
 `
 const StyledTextInput = styled(TextInput)<any>`
-  width: ${StyleProps.inputSizes.regular.width}px;
+  width: ${ThemeProps.inputSizes.regular.width}px;
 `
 
 type Props = {

src/components/modules/LoginModule/LoginOptions/LoginOptions.tsx

@@ -15,8 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import { loginButtons } from '../../../../constants'
 import googleLogo from './images/google-logo.svg'
 import microsoftLogo from './images/microsoft-logo.svg'
@@ -37,8 +36,8 @@ const buttonStyle = (id: any, isLogo?: boolean) => {
       return isLogo
         ? css`background-image: url('${googleLogo}');`
         : css`
-          color: ${Palette.grayscale[4]};
-          border-color: ${Palette.grayscale[2]};
+          color: ${ThemePalette.grayscale[4]};
+          border-color: ${ThemePalette.grayscale[2]};
           background-color: white;
         `
     case 'microsoft':
@@ -63,8 +62,8 @@ const buttonStyle = (id: any, isLogo?: boolean) => {
       return isLogo
         ? css`background-image: url('${githubLogo}');`
         : css`
-          border-color: ${Palette.grayscale[4]};
-          background-color: ${Palette.grayscale[4]};
+          border-color: ${ThemePalette.grayscale[4]};
+          background-color: ${ThemePalette.grayscale[4]};
         `
     default:
       return ''
@@ -72,12 +71,12 @@ const buttonStyle = (id: any, isLogo?: boolean) => {
 }
 
 const Button = styled.div<any>`
-  width: ${StyleProps.inputSizes.large.width - 2}px;
-  height: ${StyleProps.inputSizes.large.height - 2}px;
+  width: ${ThemeProps.inputSizes.large.width - 2}px;
+  height: ${ThemeProps.inputSizes.large.height - 2}px;
   display: flex;
   align-items: center;
   border: 1px solid;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   color: white;
   cursor: pointer;
   margin-left: 16px;

src/components/modules/MinionModule/MinionEndpointModal/MinionEndpointModal.tsx

@@ -26,7 +26,7 @@ import { providerTypes } from '../../../../constants'
 import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
 import Dropdown from '../../../ui/Dropdowns/Dropdown/Dropdown'
 import Button from '../../../ui/Button/Button'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 const Wrapper = styled.div``
 const LoadingWrapper = styled.div`
@@ -145,8 +145,8 @@ class MinionEndpointModal extends React.Component<Props, State> {
             <Switch
               big
               checked={this.state.platform === 'destination'}
-              checkedColor={Palette.primary}
-              uncheckedColor={Palette.primary}
+              checkedColor={ThemePalette.primary}
+              uncheckedColor={ThemePalette.primary}
               onChange={value => {
                 this.setState({
                   platform: value ? 'destination' : 'source',

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolDetailsContent.tsx

@@ -20,13 +20,13 @@ import Button from '../../../ui/Button/Button'
 import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
 import type { Endpoint } from '../../../../@types/Endpoint'
 import type { Field } from '../../../../@types/Field'
-import StyleProps from '../../../styleUtils/StyleProps'
 import MinionPoolMainDetails from './MinionPoolMainDetails'
 import { ReplicaItem, MigrationItem } from '../../../../@types/MainItem'
 import { MinionPoolDetails } from '../../../../@types/MinionPool'
 import MinionPoolMachines from './MinionPoolMachines'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 import MinionPoolEvents from './MinionPoolEvents'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -54,7 +54,7 @@ const ButtonColumn = styled.div<any>`
   }
 `
 const DetailsBody = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `
 
 const NavigationItems = [

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolEvents.tsx

@@ -18,8 +18,7 @@ import styled from 'styled-components'
 import {
   MinionPoolDetails, MinionPoolEventProgressUpdate,
 } from '../../../../@types/MinionPool'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
 import Pagination from '../../../ui/Pagination/Pagination'
 import configLoader from '../../../../utils/Config'
@@ -35,13 +34,13 @@ const FilterDropdownWrapper = styled.div`
   margin-left: 24px;
 `
 const EventsTable = styled.div`
-  background: ${Palette.grayscale[1]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[1]};
+  border-radius: ${ThemeProps.borderRadius};
   margin-bottom: 16px;
 `
 const Header = styled.div`
   display: flex;
-  border-bottom: 1px solid ${Palette.grayscale[5]};
+  border-bottom: 1px solid ${ThemePalette.grayscale[5]};
   padding: 4px 8px;
 `
 type DataDivProps = {
@@ -50,11 +49,11 @@ type DataDivProps = {
   secondary?: boolean
 }
 const HeaderData = styled.div<DataDivProps>`
-  ${props => (props.width ? StyleProps.exactWidth(props.width) : '')}
+  ${props => (props.width ? ThemeProps.exactWidth(props.width) : '')}
   ${props => (props.grow ? 'flex-grow: 1;' : '')}
   font-size: 10px;
-  color: ${Palette.grayscale[5]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[5]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
 `
 const Body = styled.div``
@@ -64,9 +63,9 @@ const Row = styled.div`
   border-bottom: 1px solid white;
 `
 const RowData = styled.div<DataDivProps>`
-  ${props => (props.width ? StyleProps.exactWidth(props.width) : '')}
+  ${props => (props.width ? ThemeProps.exactWidth(props.width) : '')}
   ${props => (props.grow ? 'flex-grow: 1;' : '')}
-  ${props => (props.secondary ? `color: ${Palette.grayscale[4]};` : '')}
+  ${props => (props.secondary ? `color: ${ThemePalette.grayscale[4]};` : '')}
 `
 const Message = styled.pre`
   font-family: inherit;

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolMachines.tsx

@@ -21,8 +21,7 @@ import { Link } from 'react-router-dom'
 import { MinionMachine, MinionPool } from '../../../../@types/MinionPool'
 import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
 import { ItemReplicaBadge } from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import Arrow from '../../../ui/Arrow/Arrow'
 
 import networkImage from './images/network.svg'
@@ -52,14 +51,14 @@ const Row = styled.div<any>`
   position: relative;
   padding: 8px 0;
   border-top: 1px solid white;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   &:last-child {
     border-bottom: 0;
-    border-bottom-left-radius: ${StyleProps.borderRadius};
-    border-bottom-right-radius: ${StyleProps.borderRadius};
+    border-bottom-left-radius: ${ThemeProps.borderRadius};
+    border-bottom-right-radius: ${ThemeProps.borderRadius};
   }
   &:hover {
-    background: ${Palette.grayscale[0]};
+    background: ${ThemePalette.grayscale[0]};
     ${ArrowStyled} {
       opacity: 1;
     }
@@ -74,12 +73,12 @@ const RowHeader = styled.div<any>`
 const RowHeaderColumn = styled.div<any>`
   display: flex;
   align-items: center;
-  ${StyleProps.exactWidth('50%')}
+  ${ThemeProps.exactWidth('50%')}
 `
 const HeaderName = styled.div<any>`
   overflow: hidden;
   text-overflow: ellipsis;
-  ${props => StyleProps.exactWidth(`calc(100% - ${props.source ? 120 : 8}px)`)}
+  ${props => ThemeProps.exactWidth(`calc(100% - ${props.source ? 120 : 8}px)`)}
 `
 const HeaderIcon = styled.div<any>`
   min-width: 16px;
@@ -93,18 +92,18 @@ const HeaderText = styled.div`
 `
 const RowBody = styled.div<any>`
   display: flex;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   padding: 0 16px;
   margin-top: 4px;
 `
 const RowBodyColumn = styled.div<any>`
   margin-top: 8px;
   &:first-child {
-    ${StyleProps.exactWidth('calc(50% - 70px)')}
+    ${ThemeProps.exactWidth('calc(50% - 70px)')}
     margin-right: 88px;
   }
   &:last-child {
-    ${StyleProps.exactWidth('calc(50% - 16px)')}
+    ${ThemeProps.exactWidth('calc(50% - 16px)')}
   }
 `
 const RowBodyColumnValue = styled.div<any>`
@@ -112,8 +111,8 @@ const RowBodyColumnValue = styled.div<any>`
 `
 const MachinesWrapper = styled.div``
 const MachineWrapper = styled.div`
-  background: ${Palette.grayscale[1]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[1]};
+  border-radius: ${ThemeProps.borderRadius};
 `
 const MachineTitle = styled.div`
   padding: 16px;
@@ -128,13 +127,13 @@ const MachineRow = styled.div<{ secondary?: boolean }>`
   margin-bottom: 8px;
   align-items: center;
   ${props => (props.secondary ? css`
-    color: ${Palette.grayscale[5]};
+    color: ${ThemePalette.grayscale[5]};
     margin-bottom: 4px;
   ` : '')}
 `
 const ValueLink = styled(Link)`
   display: flex;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
   cursor: pointer;
 `

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolMainDetails.tsx

@@ -26,8 +26,7 @@ import type { Endpoint } from '../../../../@types/Endpoint'
 import type { Field as FieldType } from '../../../../@types/Field'
 import fieldHelper from '../../../../@types/Field'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import { OptionsSchemaPlugin } from '../../../../plugins/endpoint'
@@ -44,7 +43,7 @@ const ColumnsLayout = styled.div<any>`
   display: flex;
 `
 const Column = styled.div<any>`
-  ${props => StyleProps.exactWidth(props.width)}
+  ${props => ThemeProps.exactWidth(props.width)}
 `
 const Row = styled.div<any>`
   margin-bottom: 32px;
@@ -58,14 +57,14 @@ const Field = styled.div<any>`
 `
 const Label = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[3]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
   display: flex;
   align-items: center;
 `
 const StatusIconStub = styled.div<any>`
-  ${StyleProps.exactSize('16px')}
+  ${ThemeProps.exactSize('16px')}
 `
 const Value = styled.div<any>`
   display: ${props => (props.flex ? 'flex' : props.block ? 'block' : 'inline-table')};
@@ -75,7 +74,7 @@ const Value = styled.div<any>`
 const ValueLink = styled(Link)`
   display: flex;
   margin-top: 3px;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
   cursor: pointer;
 `
@@ -94,7 +93,7 @@ const PropertyName = styled.div<any>`
 `
 const PropertyValue = styled.div<any>`
   ${PropertyText}
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   text-align: right;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/modules/MinionModule/MinionPoolListItem/MinionPoolListItem.tsx

@@ -19,8 +19,7 @@ import { observer } from 'mobx-react'
 import Checkbox from '../../../ui/Checkbox/Checkbox'
 import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
 import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import itemImage from './images/minion-pool-list-item.svg'
 
 import DateUtils from '../../../../utils/DateUtils'
@@ -29,21 +28,21 @@ import { ProviderTypes } from '../../../../@types/Providers'
 
 const CheckboxStyled = styled(Checkbox)`
   opacity: ${props => (props.checked ? 1 : 0)};
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 `
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
   margin-left: 16px;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -55,7 +54,7 @@ const Wrapper = styled.div<any>`
   }
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 
@@ -87,10 +86,10 @@ const EndpointImage = styled.div<any>`
   margin-right: 48px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
 `
 const Column = styled.div`
   align-self: start;

src/components/modules/MinionModule/MinionPoolModal/MinionPoolModal.tsx

@@ -29,10 +29,10 @@ import MinionPoolModalContent from './MinionPoolModalContent'
 import minionPoolStore from '../../../../stores/MinionPoolStore'
 
 import minionPoolImage from './images/minion-pool.svg'
-import StyleProps from '../../../styleUtils/StyleProps'
 import notificationStore from '../../../../stores/NotificationStore'
 import providerStore, { getFieldChangeOptions } from '../../../../stores/ProviderStore'
 import { MinionPool } from '../../../../@types/MinionPool'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   padding: 24px 0 32px 0;
@@ -42,7 +42,7 @@ const Wrapper = styled.div<any>`
   min-height: 0;
 `
 const MinionPoolImageWrapper = styled.div`
-  ${StyleProps.exactSize('128px')}
+  ${ThemeProps.exactSize('128px')}
   background: url('${minionPoolImage}') center no-repeat;
 `
 const Content = styled.div<any>`

src/components/modules/MinionModule/MinionPoolModal/MinionPoolModalContent.tsx

@@ -20,8 +20,7 @@ import LabelDictionary from '../../../../utils/LabelDictionary'
 import FieldInput from '../../../ui/FieldInput/FieldInput'
 import type { Field } from '../../../../@types/Field'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
 import { Endpoint } from '../../../../@types/Endpoint'
 import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
@@ -43,7 +42,7 @@ const ToggleButtonBarStyled = styled(ToggleButtonBar)`
 `
 const FieldStyled = styled(FieldInput)`
   min-width: ${props => (props.useTextArea ? '100%' : '224px')};
-  max-width: ${StyleProps.inputSizes.large.width}px;
+  max-width: ${ThemeProps.inputSizes.large.width}px;
   margin-bottom: 16px;
 `
 const Row = styled.div<any>`
@@ -52,16 +51,16 @@ const Row = styled.div<any>`
   justify-content: space-between;
 `
 const EndpointField = styled.div`
-  min-width: ${StyleProps.inputSizes.large.width}px;
-  max-width: ${StyleProps.inputSizes.large.width}px;
+  min-width: ${ThemeProps.inputSizes.large.width}px;
+  max-width: ${ThemeProps.inputSizes.large.width}px;
   margin-bottom: 16px;
 `
 const EndpointFieldLabel = styled.div<any>`
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   flex-grow: 1;
   margin-bottom: 2px;
   font-size: 10px;
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   display: flex;
   align-items: center;
@@ -79,7 +78,7 @@ const EndpointFieldValueText = styled.div`
   text-overflow: ellipsis;
   margin-left: 8px;
   font-size: 12px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const EndpointFieldValueLabel = styled.div`
   text-transform: capitalize;
@@ -109,7 +108,7 @@ const GroupNameText = styled.div<any>`
 `
 const GroupNameBar = styled.div<any>`
   flex-grow: 1;
-  background: ${Palette.grayscale[3]};
+  background: ${ThemePalette.grayscale[3]};
   height: 1px;
 `
 const GroupFields = styled.div<any>`
@@ -212,7 +211,7 @@ class MinionPoolModalContent extends React.Component<Props, State> {
           <FieldStyled
             {...field}
             label={field.title || LabelDictionary.get(field.name)}
-            width={StyleProps.inputSizes.large.width}
+            width={ThemeProps.inputSizes.large.width}
             disabled={this.props.disabled || options?.disabled}
             highlight={this.props.invalidFields.findIndex(fn => fn === field.name) > -1}
             value={this.props.getFieldValue(field)}

src/components/modules/NavigationModule/DetailsNavigation/DetailsNavigation.tsx

@@ -17,17 +17,16 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth('128px')}
+  ${ThemeProps.exactWidth('128px')}
   display: flex;
   flex-direction: column;
 `
 const Item = styled(Link)<any>`
   font-size: 16px;
-  color: ${props => (props.selected ? Palette.primary : Palette.grayscale[4])};
+  color: ${props => (props.selected ? ThemePalette.primary : ThemePalette.grayscale[4])};
   cursor: pointer;
   margin-bottom: 13px;
   text-decoration: none;

src/components/modules/NavigationModule/Navigation/Navigation.tsx

@@ -22,7 +22,6 @@ import Logo from '../../../ui/Logo/Logo'
 import userStore from '../../../../stores/UserStore'
 import configLoader from '../../../../utils/Config'
 
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import { navigationMenu } from '../../../../constants'
 import backgroundImage from './images/star-bg.jpg'
@@ -38,9 +37,10 @@ import userImage from './images/user-menu.svg'
 import logsImage from './images/logs-menu.svg'
 import dashboardImage from './images/dashboard-menu.svg'
 import minionPoolsImage from './images/minion-pool-menu.svg'
+import { ThemeProps } from '../../../Theme'
 
 const isCollapsed = (props: any) => props.collapsed
-  || (window.outerWidth <= StyleProps.mobileMaxWidth)
+  || (window.outerWidth <= ThemeProps.mobileMaxWidth)
 
 const ANIMATION = '200ms'
 
@@ -73,7 +73,7 @@ const LogoStyled = styled(Logo)<any>`
 
 const WrappedLink = (props: any) => (
   <div
-    style={{ transition: `all ${StyleProps.animations.swift}` }}
+    style={{ transition: `all ${ThemeProps.animations.swift}` }}
     className={props.className}
     ref={r => { if (props.customRef) props.customRef(r) }}
   >
@@ -307,7 +307,7 @@ class Navigation extends React.Component<Props> {
 
     this.resizeTimeout = setTimeout(() => {
       this.resizeTimeout = null
-      this.toggleMenu(window.outerWidth <= StyleProps.mobileMaxWidth)
+      this.toggleMenu(window.outerWidth <= ThemeProps.mobileMaxWidth)
     }, 100)
   }
 

src/components/modules/NavigationModule/NavigationMini/NavigationMini.tsx

@@ -18,8 +18,8 @@ import styled, { css } from 'styled-components'
 
 import Navigation from '../Navigation/Navigation'
 
-import StyleProps from '../../../styleUtils/StyleProps'
 import menuImage from './images/menu'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   margin-right: 38px;
@@ -40,11 +40,11 @@ const MenuImage = styled.div<any>`
   z-index: 99;
   #top {
     ${props => (props.open ? css`transform: rotate(45deg) translateX(0.5px) translateY(-4.5px);` : Close)}
-    transition: all ${StyleProps.animations.swift};
+    transition: all ${ThemeProps.animations.swift};
   }
   #bottom {
     ${props => (props.open ? css`transform: rotate(-45deg) translateX(-6.5px) translateY(1.5px);` : Close)}
-    transition: all ${StyleProps.animations.swift};
+    transition: all ${ThemeProps.animations.swift};
   }
 `
 const NavigationStyled = styled(Navigation)<any>`
@@ -52,7 +52,7 @@ const NavigationStyled = styled(Navigation)<any>`
   left: ${props => (props.open ? 0 : -80)}px;
   top: 0;
   padding-top: 24px;
-  transition: left ${StyleProps.animations.swift};
+  transition: left ${ThemeProps.animations.swift};
   z-index: 9;
 `
 

src/components/modules/NotificationsModule/NotificationsModule.tsx

@@ -25,8 +25,7 @@ import CopyMultilineValue from '../../ui/CopyMultilineValue/CopyMultilineValue'
 import Button from '../../ui/Button/Button'
 import Modal from '../../ui/Modal/Modal'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../Theme'
 import NotificationsStyle from './style'
 import DomUtils from '../../../utils/DomUtils'
 
@@ -47,8 +46,8 @@ const ErrorInfoRequestItem = styled.div<any>`
 `
 const ErrorInfoRequestLabel = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   margin-bottom: 4px;
 `

src/components/modules/NotificationsModule/style.ts

@@ -13,8 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { css } from 'styled-components'
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 import closeImage from './images/close.svg'
 
@@ -23,7 +22,7 @@ const NotificationsStyle = css`
     width: 244px !important;
   }
   .notification-action-button {
-    background: ${Palette.primary} !important;
+    background: ${ThemePalette.primary} !important;
     font-weight: 400 !important;
     border-radius: 4px !important;
     margin-top: 8px !important;
@@ -35,11 +34,11 @@ const NotificationsStyle = css`
     margin-left: 25px !important;
   }
   .notification-error .notification-action-button {
-    background: ${Palette.secondaryLight} !important;
+    background: ${ThemePalette.secondaryLight} !important;
   }
   .notification {
-    border-radius: ${StyleProps.borderRadius} !important;
-    background-color: ${Palette.grayscale[1]} !important;
+    border-radius: ${ThemeProps.borderRadius} !important;
+    background-color: ${ThemePalette.grayscale[1]} !important;
     box-shadow: none !important;
     border-top: none !important;
     height: auto !important;
@@ -59,7 +58,7 @@ const NotificationsStyle = css`
     background-repeat: no-repeat;
     background-position: 0 0;
     font-size: 14px !important;
-    color: ${Palette.black} !important;
+    color: ${ThemePalette.black} !important;
     letter-spacing: 0 !important;
     line-height: 18px !important;
     margin-bottom: 1px !important;
@@ -70,7 +69,7 @@ const NotificationsStyle = css`
   }
   .notification-message {
     font-size: 14px !important;
-    color: ${Palette.black} !important;
+    color: ${ThemePalette.black} !important;
     letter-spacing: 0 !important;
     line-height: 18px !important;
     font-weight: 400 !important;

src/components/modules/ProjectModule/ProjectDetailsContent/ProjectDetailsContent.tsx

@@ -27,11 +27,10 @@ import Button from '../../../ui/Button/Button'
 
 import type { Project, RoleAssignment, Role } from '../../../../@types/Project'
 import type { User } from '../../../../@types/User'
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
   margin: 0 auto;
   padding-left: 126px;
 `
@@ -42,15 +41,15 @@ const Info = styled.div<any>`
   margin-left: -32px;
 `
 const Field = styled.div<any>`
-  ${StyleProps.exactWidth('calc(50% - 32px)')}
+  ${ThemeProps.exactWidth('calc(50% - 32px)')}
   margin-bottom: 32px;
   margin-left: 32px;
 `
 const Value = styled.div<any>``
 const Label = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   margin-bottom: 3px;
 `
@@ -70,11 +69,11 @@ const Buttons = styled.div<any>`
   justify-content: space-between;
 `
 const UserColumn = styled.div<any>`
-  ${props => (props.disabled ? css`color: ${Palette.grayscale[3]};` : '')}
+  ${props => (props.disabled ? css`color: ${ThemePalette.grayscale[3]};` : '')}
 `
 const UserName = styled(Link)<any>`
   ${props => (props.disabled ? css`opacity: 0.7;` : '')}
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
 `
 const ButtonsColumn = styled.div<any>`
@@ -252,7 +251,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
           listWidth="120px"
           multipleSelection
           items={allRoles}
-          labelStyle={{ color: Palette.grayscale[4] }}
+          labelStyle={{ color: ThemePalette.grayscale[4] }}
           disabled={!user.enabled}
           style={{ opacity: user.enabled ? 1 : 0.7 }}
           onChange={item => {
@@ -272,7 +271,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
           onChange={item => { this.handleUserAction(user, item) }}
           disabled={user.id === this.props.loggedUserId}
           style={{ opacity: user.id === this.props.loggedUserId ? 0.7 : 1 }}
-          itemStyle={item => `color: ${item.value === 'remove' ? Palette.alert : Palette.black};`}
+          itemStyle={item => `color: ${item.value === 'remove' ? ThemePalette.alert : ThemePalette.black};`}
         />,
       ]
       rows.push(columns)
@@ -284,7 +283,7 @@ class ProjectDetailsContent extends React.Component<Props, State> {
         header={['Member', 'Roles', 'Status', '']}
         items={rows}
         noItemsLabel="No members available!"
-        columnsStyle={[css`color: ${Palette.black};`]}
+        columnsStyle={[css`color: ${ThemePalette.black};`]}
       />
     )
   }

src/components/modules/ProjectModule/ProjectListItem/ProjectListItem.tsx

@@ -18,23 +18,22 @@ import { observer } from 'mobx-react'
 
 import Button from '../../../ui/Button/Button'
 import type { Project } from '../../../../@types/Project'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import projectImage from './images/project.svg'
 
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -42,7 +41,7 @@ const Wrapper = styled.div<any>`
   align-items: center;
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Image = styled.div<any>`
@@ -64,25 +63,25 @@ const TitleLabel = styled.div<any>`
   text-overflow: ellipsis;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 3px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `
 const bodyWidth = 620
 const Body = styled.div<any>`
-  ${StyleProps.exactWidth(`${bodyWidth}px`)}
+  ${ThemeProps.exactWidth(`${bodyWidth}px`)}
   display: flex;
 `
 const Data = styled.div<any>`
-  ${props => StyleProps.exactWidth(`${Math.floor(bodyWidth / (100 / props.percentage)) - 68}px`)}
+  ${props => ThemeProps.exactWidth(`${Math.floor(bodyWidth / (100 / props.percentage)) - 68}px`)}
   margin: 0 32px;
 
   &:last-child {

src/components/modules/ProjectModule/ProjectMemberModal/ProjectMemberModal.tsx

@@ -25,8 +25,7 @@ import FieldInput from '../../../ui/FieldInput/FieldInput'
 import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
 import AutocompleteDropdown from '../../../ui/Dropdowns/AutocompleteDropdown/AutocompleteDropdown'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import KeyboardManager from '../../../../utils/KeyboardManager'
 
 import userImage from './images/user.svg'
@@ -38,7 +37,7 @@ const Wrapper = styled.div<any>`
   min-height: 0;
 `
 const Image = styled.div<any>`
-  ${StyleProps.exactSize('96px')}
+  ${ThemeProps.exactSize('96px')}
   background: url('${userImage}') center no-repeat;
   margin: 0 auto;
 `
@@ -58,13 +57,13 @@ const Form = styled.div<any>`
   }
 `
 const FieldStyled = styled(FieldInput)`
-  ${StyleProps.exactWidth(`${StyleProps.inputSizes.large.width}px`)}
+  ${ThemeProps.exactWidth(`${ThemeProps.inputSizes.large.width}px`)}
 `
 const FormField = styled.div<any>``
 const FormLabel = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   margin-bottom: 2px;
   display: flex;
@@ -240,7 +239,7 @@ class ProjectMemberModal extends React.Component<Props, State> {
           }
         }}
         value={selectedRoles}
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         layout="modal"
         disabled={this.props.loading}
         enum={this.props.roles.filter(r => r.name !== 'key-manager:service-admin').map(r => ({ name: r.name, id: r.id }))}
@@ -262,7 +261,7 @@ class ProjectMemberModal extends React.Component<Props, State> {
         value={value}
         label={field.label}
         onChange={onChange}
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         disabled={this.props.loading}
         enum={field.enum}
         password={field.name === 'password' || field.name === 'confirm_password'}

src/components/modules/ProjectModule/ProjectModal/ProjectModal.tsx

@@ -25,7 +25,7 @@ import FieldInput from '../../../ui/FieldInput/FieldInput'
 import projectImage from './images/project.svg'
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import KeyboardManager from '../../../../utils/KeyboardManager'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   padding: 48px 32px 32px 32px;
@@ -125,7 +125,7 @@ class ProjectModal extends React.Component<Props, State> {
         value={value}
         label={LabelDictionary.get(field.name)}
         onChange={onChange}
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         disabled={this.props.loading}
         required={field.required}
         highlight={Boolean(this.state.highlightFieldNames.find(n => n === field.name))}

src/components/modules/TemplateModule/MainTemplate/MainTemplate.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import * as React from 'react'
 import styled from 'styled-components'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -30,7 +30,7 @@ const Content = styled.div<any>`
   flex-grow: 1;
   overflow: auto;
 
-  @media (max-width: ${StyleProps.mobileMaxWidth}px) {
+  @media (max-width: ${ThemeProps.mobileMaxWidth}px) {
     padding: 0 32px 0 48px;
   }
 `

src/components/modules/TransferModule/DeleteReplicaModal/DeleteReplicaModal.tsx

@@ -20,7 +20,7 @@ import Modal from '../../../ui/Modal/Modal'
 import Button from '../../../ui/Button/Button'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -35,7 +35,7 @@ const Message = styled.div<any>`
   margin-top: 48px;
 `
 const ExtraMessage = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin: 11px 0 48px 0;
   text-align: center;
   font-size: 12px;
@@ -67,7 +67,7 @@ const LoadingTitle = styled.div`
   margin-bottom: 8px;
 `
 const LoadingSubtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 
 type Props = {

src/components/modules/TransferModule/Executions/Executions.tsx

@@ -24,7 +24,7 @@ import Timeline from '../Timeline/Timeline'
 import Tasks from '../Tasks/Tasks'
 
 import type { Execution, ExecutionTasks } from '../../../../@types/Execution'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 
 import executionImage from './images/execution.svg'
@@ -41,7 +41,7 @@ const LoadingText = styled.div<any>`
   font-size: 18px;
 `
 const ExecutionInfo = styled.div<any>`
-  background: ${Palette.grayscale[1]};
+  background: ${ThemePalette.grayscale[1]};
   padding: 24px 16px;
   display: flex;
   align-items: center;
@@ -52,17 +52,17 @@ const ExecutionInfoNumber = styled.div<any>`
   padding-right: 24px;
 `
 const ExecutionInfoDate = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-right: 16px;
 `
 const ExecutionInfoId = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   display: flex;
   margin-right: 16px;
   flex-grow: 1;
 `
 const NoExecutions = styled.div<any>`
-  background: ${Palette.grayscale[7]};
+  background: ${ThemePalette.grayscale[7]};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -79,7 +79,7 @@ const NoExecutionTitle = styled.div<any>`
   margin-bottom: 10px;
 `
 const NoExecutionText = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-bottom: 48px;
 `
 

src/components/modules/TransferModule/MainDetails/MainDetails.tsx

@@ -30,8 +30,7 @@ import type { Network } from '../../../../@types/Network'
 import type { Field as FieldType } from '../../../../@types/Field'
 import fieldHelper from '../../../../@types/Field'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import { OptionsSchemaPlugin } from '../../../../plugins/endpoint'
@@ -47,7 +46,7 @@ const Wrapper = styled.div<any>`
 `
 const WarningWrapper = styled.div`
   display: flex;
-  background: ${Palette.warning}66;
+  background: ${ThemePalette.warning}66;
   padding: 8px;
   border-radius: 4px;
   margin-bottom: 24px;
@@ -60,7 +59,7 @@ const ColumnsLayout = styled.div<any>`
   display: flex;
 `
 const Column = styled.div<any>`
-  ${props => StyleProps.exactWidth(props.width)}
+  ${props => ThemeProps.exactWidth(props.width)}
 `
 const Arrow = styled.div<any>`
   width: 34px;
@@ -80,14 +79,14 @@ const Field = styled.div<any>`
 `
 const Label = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[3]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
   display: flex;
   align-items: center;
 `
 const StatusIconStub = styled.div<any>`
-  ${StyleProps.exactSize('16px')}
+  ${ThemeProps.exactSize('16px')}
 `
 const Value = styled.div<any>`
   display: ${props => (props.flex ? 'flex' : props.block ? 'block' : 'inline-table')};
@@ -97,7 +96,7 @@ const Value = styled.div<any>`
 const ValueLink = styled(Link)`
   display: flex;
   margin-top: 3px;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
   cursor: pointer;
 `
@@ -122,7 +121,7 @@ const PropertyName = styled.div<any>`
 `
 const PropertyValue = styled.div<any>`
   ${PropertyText}
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   text-align: right;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/modules/TransferModule/MigrationDetailsContent/MigrationDetailsContent.tsx

@@ -20,7 +20,6 @@ import Button from '../../../ui/Button/Button'
 import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
 import MainDetails from '../MainDetails/MainDetails'
 import Tasks from '../Tasks/Tasks'
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import type { Instance } from '../../../../@types/Instance'
 import type { Endpoint, StorageBackend } from '../../../../@types/Endpoint'
@@ -28,6 +27,7 @@ import type { Field } from '../../../../@types/Field'
 import { MigrationItemDetails } from '../../../../@types/MainItem'
 import { MinionPool } from '../../../../@types/MinionPool'
 import { Network } from '../../../../@types/Network'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -41,7 +41,7 @@ const Buttons = styled.div<any>`
   }
 `
 const DetailsBody = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `
 
 const NavigationItems = [

src/components/modules/TransferModule/ReplicaDetailsContent/ReplicaDetailsContent.tsx

@@ -28,9 +28,9 @@ import type { Execution, ExecutionTasks } from '../../../../@types/Execution'
 import type { Network } from '../../../../@types/Network'
 import type { Field } from '../../../../@types/Field'
 import type { Schedule as ScheduleType } from '../../../../@types/Schedule'
-import StyleProps from '../../../styleUtils/StyleProps'
 import { ReplicaItemDetails } from '../../../../@types/MainItem'
 import { MinionPool } from '../../../../@types/MinionPool'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -53,7 +53,7 @@ const ButtonColumn = styled.div<any>`
   }
 `
 const DetailsBody = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `
 
 const NavigationItems = [

src/components/modules/TransferModule/ReplicaMigrationOptions/ReplicaMigrationOptions.tsx

@@ -23,7 +23,6 @@ import WizardScripts from '../../WizardModule/WizardScripts/WizardScripts'
 
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import KeyboardManager from '../../../../utils/KeyboardManager'
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import replicaMigrationImage from './images/replica-migration.svg'
 import replicaMigrationFields from './replicaMigrationFields'
@@ -33,6 +32,7 @@ import type { Instance, InstanceScript } from '../../../../@types/Instance'
 import { TransferItemDetails } from '../../../../@types/MainItem'
 import { MinionPool } from '../../../../@types/MinionPool'
 import { INSTANCE_OSMORPHING_MINION_POOL_MAPPINGS } from '../../WizardModule/WizardOptions/WizardOptions'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -42,8 +42,8 @@ const Wrapper = styled.div<any>`
   min-height: 0;
 `
 const Image = styled.div<any>`
-  ${StyleProps.exactWidth('288px')}
-  ${StyleProps.exactHeight('96px')}
+  ${ThemeProps.exactWidth('288px')}
+  ${ThemeProps.exactHeight('96px')}
   background: url('${replicaMigrationImage}') center no-repeat;
   margin: 80px 0;
 `

src/components/modules/TransferModule/Schedule/Schedule.tsx

@@ -25,8 +25,7 @@ import AlertModal from '../../../ui/AlertModal/AlertModal'
 import ReplicaExecutionOptions from '../ReplicaExecutionOptions/ReplicaExecutionOptions'
 import ScheduleItem from '../ScheduleItem/ScheduleItem'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 import type { Schedule as ScheduleType } from '../../../../@types/Schedule'
 import type { Field } from '../../../../@types/Field'
@@ -36,7 +35,7 @@ import scheduleImage from './images/schedule.svg'
 import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `
 const LoadingWrapper = styled.div<any>`
   margin-top: 32px;
@@ -56,8 +55,8 @@ const Header = styled.div<any>`
 const HeaderData = styled.div<any>`
   width: ${props => props.width};
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[5]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[5]};
   text-transform: uppercase;
 `
 const Body = styled.div<any>``
@@ -66,7 +65,7 @@ const NoSchedules = styled.div<any>`
   flex-direction: column;
   align-items: center;
   padding: ${props => (props.secondary ? 56 : 80)}px 80px 80px 80px;
-  background: ${props => (props.secondary ? 'white' : Palette.grayscale[7])};
+  background: ${props => (props.secondary ? 'white' : ThemePalette.grayscale[7])};
 `
 const NoSchedulesTitle = styled.div<any>`
   margin-bottom: 10px;
@@ -74,10 +73,10 @@ const NoSchedulesTitle = styled.div<any>`
 `
 const NoSchedulesSubtitle = styled.div<any>`
   margin-bottom: 45px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ScheduleImage = styled.div<any>`
-  ${StyleProps.exactSize('96px')}
+  ${ThemeProps.exactSize('96px')}
   background: url('${scheduleImage}') no-repeat center;
   margin-bottom: 46px;
 `

src/components/modules/TransferModule/ScheduleItem/ScheduleItem.tsx

@@ -24,8 +24,7 @@ import Button from '../../../ui/Button/Button'
 import type { Schedule, ScheduleFieldName } from '../../../../@types/Schedule'
 
 import { executionOptions } from '../../../../constants'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 import notificationStore from '../../../../stores/NotificationStore'
 import deleteImage from './images/delete.svg'
@@ -36,11 +35,11 @@ import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
 
 const Wrapper = styled.div<any>`
   display: flex;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 16px 0;
   position: relative;
   &:last-child {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const EnablingIcon = styled.div`
@@ -52,11 +51,11 @@ const Data = styled.div<any>`
   width: ${props => props.width};
 `
 const Label = styled.div<any>`
-  background: ${Palette.grayscale[7]};
+  background: ${ThemePalette.grayscale[7]};
   height: 100%;
   font-size: 12px;
   margin-right: 8px;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   padding: 0 8px;
   white-space: nowrap;
   overflow: hidden;

src/components/modules/TransferModule/TaskItem/TaskItem.tsx

@@ -26,8 +26,7 @@ import ProgressBar from '../../../ui/ProgressBar/ProgressBar'
 import CopyButton from '../../../ui/CopyButton/CopyButton'
 import notificationStore from '../../../../stores/NotificationStore'
 import DomUtils from '../../../../utils/DomUtils'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 
 const GlobalStyle = createGlobalStyle`
@@ -38,10 +37,10 @@ const GlobalStyle = createGlobalStyle`
 const Wrapper = styled.div<any>`
   cursor: pointer;
   border-bottom: 1px solid white;
-  transition: all ${StyleProps.animations.swift};
-  ${props => (props.open ? `background: ${Palette.grayscale[0]};` : '')}
+  transition: all ${ThemeProps.animations.swift};
+  ${props => (props.open ? `background: ${ThemePalette.grayscale[0]};` : '')}
   &:hover {
-    background: ${Palette.grayscale[0]};
+    background: ${ThemePalette.grayscale[0]};
   }
 `
 const ArrowStyled = styled(Arrow)`
@@ -60,7 +59,7 @@ const HeaderData = styled.div<any>`
   display: block;
   ${props => (props.capitalize ? 'text-transform: capitalize;' : '')}
   width: ${props => props.width};
-  color: ${props => (props.black ? Palette.black : Palette.grayscale[4])};
+  color: ${props => (props.black ? ThemePalette.black : ThemePalette.grayscale[4])};
   padding-right: 8px;
   overflow: hidden;
   white-space: nowrap;
@@ -103,8 +102,8 @@ const RowData = styled.div<any>`
 const Label = styled.div<any>`
   text-transform: uppercase;
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[5]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[5]};
   margin-bottom: 4px;
 `
 const Value = styled.div<any>`
@@ -112,9 +111,9 @@ const Value = styled.div<any>`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  ${props => (props.primary ? css`color: ${Palette.primary};` : '')}
+  ${props => (props.primary ? css`color: ${ThemePalette.primary};` : '')}
   &:hover {
-    ${props => (props.primaryOnHover ? css`color: ${Palette.primary};` : '')}
+    ${props => (props.primaryOnHover ? css`color: ${ThemePalette.primary};` : '')}
   }
 `
 const DependsOnIds = styled.div<any>`
@@ -134,11 +133,11 @@ const ExceptionText = styled.div<any>`
   }
 `
 const ProgressUpdates = styled.div<any>`
-  color: ${Palette.black};
+  color: ${ThemePalette.black};
 `
 const ProgressUpdateDiv = styled.div<any>`
   display: flex;
-  color: ${props => (props.secondary ? Palette.grayscale[5] : 'inherit')};
+  color: ${props => (props.secondary ? ThemePalette.grayscale[5] : 'inherit')};
 `
 const ProgressUpdateDate = styled.div<any>`
   min-width: ${props => props.width || 'auto'};

src/components/modules/TransferModule/Tasks/Tasks.tsx

@@ -19,15 +19,14 @@ import styled from 'styled-components'
 import TaskItem from '../TaskItem/TaskItem'
 
 import type { Task } from '../../../../@types/Task'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
 const ColumnWidths = ['26%', '18%', '36%', '20%']
 
 const Wrapper = styled.div<any>``
 const ContentWrapper = styled.div`
-  background: ${Palette.grayscale[1]};
+  background: ${ThemePalette.grayscale[1]};
 `
 const LoadingWrapper = styled.div`
   display: flex;
@@ -37,14 +36,14 @@ const LoadingWrapper = styled.div`
 `
 const Header = styled.div<any>`
   display: flex;
-  border-bottom: 1px solid ${Palette.grayscale[5]};
+  border-bottom: 1px solid ${ThemePalette.grayscale[5]};
   padding: 4px 8px;
 `
 const HeaderData = styled.div<any>`
   width: ${props => props.width};
   font-size: 10px;
-  color: ${Palette.grayscale[5]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[5]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
 `
 const Body = styled.div<any>``

src/components/modules/TransferModule/Timeline/Timeline.tsx

@@ -20,8 +20,7 @@ import type { Execution } from '../../../../@types/Execution'
 import Arrow from '../../../ui/Arrow/Arrow'
 import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DateUtils from '../../../../utils/DateUtils'
 
 const ITEM_GAP = 96
@@ -30,7 +29,7 @@ const ArrowStyled = styled(Arrow)<any>`
   opacity: ${props => (props.forceShow ? 1 : 0)};
   position: absolute;
   top: 0;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   ${props => (props.orientation === 'left' ? 'left: -19px;' : '')}
   ${props => (props.orientation === 'right' ? 'right: -19px;' : '')}
 `
@@ -48,12 +47,12 @@ const MainLine = styled.div<any>`
   display: flex;
 `
 const ProgressLine = styled.div<any>`
-  border-bottom: 2px solid ${Palette.primary};
-  transition: all ${StyleProps.animations.swift};
+  border-bottom: 2px solid ${ThemePalette.primary};
+  transition: all ${ThemeProps.animations.swift};
 `
 const EndLine = styled.div<any>`
-  border-bottom: 2px solid ${Palette.grayscale[2]};
-  transition: all ${StyleProps.animations.swift};
+  border-bottom: 2px solid ${ThemePalette.grayscale[2]};
+  transition: all ${ThemeProps.animations.swift};
 `
 const ItemsWrapper = styled.div<any>`
   overflow: hidden;
@@ -76,10 +75,10 @@ const Item = styled.div<any>`
 `
 const ItemLabel = styled.div<any>`
   font-size: 12px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 2px;
-  ${props => (props.selected ? `color: ${Palette.black};` : '')}
-  ${props => (props.selected ? `font-weight: ${StyleProps.fontWeights.medium};` : '')}
+  ${props => (props.selected ? `color: ${ThemePalette.black};` : '')}
+  ${props => (props.selected ? `font-weight: ${ThemeProps.fontWeights.medium};` : '')}
 `
 
 type Props = {
@@ -107,12 +106,12 @@ class Timeline extends React.Component<Props> {
     if (!this.itemsRef) {
       return
     }
-    this.itemsRef.style.transition = `all ${StyleProps.animations.swift}`
+    this.itemsRef.style.transition = `all ${ThemeProps.animations.swift}`
   }
 
   componentDidUpdate() {
     if (this.itemsRef && !this.itemsRef.style.transition) {
-      this.itemsRef.style.transition = `all ${StyleProps.animations.swift}`
+      this.itemsRef.style.transition = `all ${ThemeProps.animations.swift}`
     }
 
     this.moveToSelectedItem()

src/components/modules/TransferModule/TransferDetailsTable/TransferDetailsTable.tsx

@@ -18,8 +18,7 @@ import { Collapse } from 'react-collapse'
 
 import Arrow from '../../../ui/Arrow/Arrow'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import {
   TransferNetworkMap, isNetworkMapSecurityGroups,
@@ -52,22 +51,22 @@ const Header = styled.div<any>`
 `
 const HeaderLabel = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[3]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
   width: 50%;
   margin-bottom: 8px;
   &:last-child { margin-left: 36px; }
 `
 const InstanceInfo = styled.div<any>`
-  background: ${Palette.grayscale[1]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[1]};
+  border-radius: ${ThemeProps.borderRadius};
   margin-bottom: 32px;
   &:last-child { margin-bottom: 0; }
 `
 const InstanceName = styled.div<any>`
   padding: 16px;
-  border-bottom: 1px solid ${Palette.grayscale[5]};
+  border-bottom: 1px solid ${ThemePalette.grayscale[5]};
   font-size: 16px;
 `
 const InstanceBody = styled.div<any>`
@@ -77,14 +76,14 @@ const Row = styled.div<any>`
   position: relative;
   padding: 8px 0;
   border-bottom: 1px solid white;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   &:last-child {
     border-bottom: 0;
-    border-bottom-left-radius: ${StyleProps.borderRadius};
-    border-bottom-right-radius: ${StyleProps.borderRadius};
+    border-bottom-left-radius: ${ThemeProps.borderRadius};
+    border-bottom-right-radius: ${ThemeProps.borderRadius};
   }
   &:hover {
-    background: ${Palette.grayscale[0]};
+    background: ${ThemePalette.grayscale[0]};
     ${ArrowStyled} {
       opacity: 1;
     }
@@ -99,27 +98,27 @@ const RowHeader = styled.div<any>`
 const RowHeaderColumn = styled.div<any>`
   display: flex;
   align-items: center;
-  ${StyleProps.exactWidth('50%')}
+  ${ThemeProps.exactWidth('50%')}
   &:last-child { margin-left: 19px; }
 `
 const HeaderName = styled.div<any>`
   overflow: hidden;
   text-overflow: ellipsis;
-  ${props => StyleProps.exactWidth(`calc(100% - ${props.source ? 120 : 8}px)`)}
+  ${props => ThemeProps.exactWidth(`calc(100% - ${props.source ? 120 : 8}px)`)}
 `
 const RowBody = styled.div<any>`
   display: flex;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   padding: 0 16px;
   margin-top: 4px;
 `
 const RowBodyColumn = styled.div<any>`
   &:first-child {
-    ${StyleProps.exactWidth('calc(50% - 70px)')}
+    ${ThemeProps.exactWidth('calc(50% - 70px)')}
     margin-right: 88px;
   }
   &:last-child {
-    ${StyleProps.exactWidth('calc(50% - 16px)')}
+    ${ThemeProps.exactWidth('calc(50% - 16px)')}
   }
 `
 const RowBodyColumnValue = styled.div<any>`
@@ -248,7 +247,7 @@ class TransferDetailsTable extends React.Component<Props, State> {
 
       if (disk.disabled) {
         destinationKey = disk.disabled.info || disk.disabled.message
-        destinationName = <span style={{ color: Palette.grayscale[5] }}>{destinationKey}</span>
+        destinationName = <span style={{ color: ThemePalette.grayscale[5] }}>{destinationKey}</span>
       } else {
         destinationName = defaultBusTypeInfo.id || 'Default'
         destinationKey = destinationName as string

src/components/modules/TransferModule/TransferItemModal/TransferItemModal.tsx

@@ -48,11 +48,11 @@ import {
 
 import { providerTypes, migrationFields } from '../../../../constants'
 import configLoader from '../../../../utils/Config'
-import StyleProps from '../../../styleUtils/StyleProps'
 import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 import minionPoolStore from '../../../../stores/MinionPoolStore'
 import WizardScripts from '../../WizardModule/WizardScripts/WizardScripts'
 import networkStore from '../../../../stores/NetworkStore'
+import { ThemeProps } from '../../../Theme'
 
 const PanelContent = styled.div<any>`
   display: flex;
@@ -656,7 +656,7 @@ class TransferItemModal extends React.Component<Props, State> {
         oneColumnStyle={{
           marginTop: '-16px', display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center',
         }}
-        fieldWidth={StyleProps.inputSizes.large.width}
+        fieldWidth={ThemeProps.inputSizes.large.width}
         onScrollableRef={ref => { this.scrollableRef = ref }}
         availableHeight={384}
         useAdvancedOptions

src/components/modules/UserModule/UserDetailsContent/UserDetailsContent.tsx

@@ -24,11 +24,10 @@ import Button from '../../../ui/Button/Button'
 
 import type { User } from '../../../../@types/User'
 import type { Project } from '../../../../@types/Project'
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
   margin: 0 auto;
   padding-left: 126px;
 `
@@ -39,19 +38,19 @@ const Info = styled.div<any>`
   margin-left: -32px;
 `
 const LinkStyled = styled(Link)`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
 `
 const Field = styled.div<any>`
-  ${StyleProps.exactWidth('calc(50% - 32px)')}
+  ${ThemeProps.exactWidth('calc(50% - 32px)')}
   margin-bottom: 32px;
   margin-left: 32px;
 `
 const Value = styled.div<any>``
 const Label = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   margin-bottom: 3px;
 `

src/components/modules/UserModule/UserListItem/UserListItem.tsx

@@ -17,23 +17,22 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
 import type { User } from '../../../../@types/User'
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import userImage from './images/user.svg'
 
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -41,7 +40,7 @@ const Wrapper = styled.div<any>`
   align-items: center;
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Image = styled.div<any>`
@@ -63,25 +62,25 @@ const TitleLabel = styled.div<any>`
   text-overflow: ellipsis;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 3px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `
 const bodyWidth = 620
 const Body = styled.div<any>`
-  ${StyleProps.exactWidth(`${bodyWidth}px`)}
+  ${ThemeProps.exactWidth(`${bodyWidth}px`)}
   display: flex;
 `
 const Data = styled.div<any>`
-  ${props => StyleProps.exactWidth(`${Math.floor(bodyWidth / (100 / props.percentage)) - 68}px`)}
+  ${props => ThemeProps.exactWidth(`${Math.floor(bodyWidth / (100 / props.percentage)) - 68}px`)}
   margin: 0 32px;
 
   &:last-child {

src/components/modules/UserModule/UserModal/UserModal.tsx

@@ -25,9 +25,9 @@ import FieldInput from '../../../ui/FieldInput/FieldInput'
 
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import KeyboardManager from '../../../../utils/KeyboardManager'
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import userImage from './images/user.svg'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   padding: 48px 0 32px 0;
@@ -183,7 +183,7 @@ class UserModal extends React.Component<Props, State> {
         type={field.type || 'string'}
         value={value}
         onChange={onChange}
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         disabled={disabled}
         enum={field.enum}
         password={field.name === 'new_password' || field.name === 'confirm_password'}

src/components/modules/WizardModule/WizardBreadcrumbs/WizardBreadcrumbs.tsx

@@ -18,7 +18,7 @@ import styled from 'styled-components'
 
 import Arrow from '../../../ui/Arrow/Arrow'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 import type { WizardPage } from '../../../../@types/WizardData'
 
 const Wrapper = styled.div<any>`
@@ -36,7 +36,7 @@ const Breadcrumb = styled.div<any>`
   }
 `
 const Name = styled.div<any>`
-  color: ${props => (props.selected ? Palette.primary : Palette.black)};
+  color: ${props => (props.selected ? ThemePalette.primary : ThemePalette.black)};
 `
 
 type Props = {

src/components/modules/WizardModule/WizardInstances/WizardInstances.tsx

@@ -24,8 +24,7 @@ import SearchInput from '../../../ui/SearchInput/SearchInput'
 import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
 import Pagination from '../../../ui/Pagination/Pagination'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import type { Instance as InstanceType } from '../../../../@types/Instance'
 
 import instanceImage from './images/instance.svg'
@@ -53,16 +52,16 @@ const InstanceContent = styled.div<any>`
   width: 100%;
   padding: 8px 16px;
   margin-left: 16px;
-  border-top: 1px solid ${Palette.grayscale[1]};
-  transition: background ${StyleProps.animations.swift};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
+  transition: background ${ThemeProps.animations.swift};
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const CheckboxStyled = styled(Checkbox)`
   opacity: 0;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 
   :focus {
     opacity: 1;
@@ -83,7 +82,7 @@ const Instance = styled.div<any>`
   }
 
   &:last-child ${InstanceContent} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const LoadingText = styled.div<any>`
@@ -91,7 +90,7 @@ const LoadingText = styled.div<any>`
   font-size: 18px;
 `
 export const Image = styled.div<any>`
-  ${StyleProps.exactSize('48px')}
+  ${ThemeProps.exactSize('48px')}
   background: url('${instanceImage}') center no-repeat;
 `
 const Label = styled.div<any>`
@@ -102,11 +101,11 @@ const Label = styled.div<any>`
 `
 const LabelTitle = styled.div``
 const LabelSubtitle = styled.div`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   overflow-wrap: anywhere;
 `
 const Details = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   min-width: 160px;
   text-align: right;
 `
@@ -123,7 +122,7 @@ const SearchInputInfo = styled.div<any>`
 `
 const FilterInfo = styled.div<any>`
   display: flex;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const SelectionInfo = styled.div<any>``
 const FilterSeparator = styled.div<any>`
@@ -146,12 +145,12 @@ const SearchNotFoundText = styled.div<any>`
   font-size: 18px;
 `
 const SearchNotFoundSubtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: -32px;
   text-align: center;
 `
 const BigInstanceImage = styled.div<any>`
-  ${StyleProps.exactSize('96px')}
+  ${ThemeProps.exactSize('96px')}
   background: url('${bigInstanceImage}') center no-repeat;
 `
 

src/components/modules/WizardModule/WizardNetworks/WizardNetworks.tsx

@@ -20,8 +20,7 @@ import AutocompleteDropdown from '../../../ui/Dropdowns/AutocompleteDropdown/Aut
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 import Dropdown from '../../../ui/Dropdowns/Dropdown/Dropdown'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import { Instance, InstanceUtils, Nic as NicType } from '../../../../@types/Instance'
 import type { Network, NetworkMap, SecurityGroup } from '../../../../@types/Network'
 
@@ -52,15 +51,15 @@ const NicsWrapper = styled.div<any>`
 const Nic = styled.div<any>`
   display: flex;
   align-items: center;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 16px 0;
 
   &:last-child {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const NetworkImage = styled.div<any>`
-  ${StyleProps.exactSize('48px')}
+  ${ThemeProps.exactSize('48px')}
   background: url('${networkImage}') center no-repeat;
   margin-right: 16px;
 `
@@ -72,13 +71,13 @@ const NetworkName = styled.div<any>`
 `
 const NetworkSubtitle = styled.div<any>`
   font-size: 12px;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   margin-top: 1px;
   word-break: break-word;
 `
 const ArrowImage = styled.div<any>`
   min-width: 32px;
-  ${StyleProps.exactHeight('16px')}
+  ${ThemeProps.exactHeight('16px')}
   background: url('${arrowImage}') center no-repeat;
   flex-grow: 1;
   margin-right: 16px;
@@ -92,7 +91,7 @@ const NoNicsMessage = styled.div<any>`
 `
 const BigNetworkImage = styled.div<any>`
   margin-bottom: 46px;
-  ${StyleProps.exactSize('96px')}
+  ${ThemeProps.exactSize('96px')}
   background: url('${bigNetworkImage}') center no-repeat;
 `
 const NoNicsTitle = styled.div<any>`
@@ -100,7 +99,7 @@ const NoNicsTitle = styled.div<any>`
   font-size: 18px;
 `
 const NoNicsSubtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   text-align: center;
 `
 const Dropdowns = styled.div<any>`
@@ -162,7 +161,7 @@ class WizardNetworks extends React.Component<Props> {
   renderNetworksDropdown(selectedNetwork: NetworkMap | null | undefined, nic: NicType) {
     return this.props.networks.length > 10 ? (
       <AutocompleteDropdown
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         selectedItem={selectedNetwork?.targetNetwork || null}
         items={this.props.networks}
         onChange={(network: Network) => { this.props.onChange({ nic, network }) }}
@@ -172,7 +171,7 @@ class WizardNetworks extends React.Component<Props> {
     )
       : (
         <Dropdown
-          width={StyleProps.inputSizes.large.width}
+          width={ThemeProps.inputSizes.large.width}
           centered
           noSelectionMessage="Select Network"
           noItemsMessage={this.props.loading ? 'Loading ...' : 'No networks found'}
@@ -192,7 +191,7 @@ class WizardNetworks extends React.Component<Props> {
     let selectedSecGroups: SecurityGroup[] = selectedNetwork?.targetSecurityGroups || []
     return hasSecurityGroups && this.props.networks.length ? (
       <Dropdown
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         noSelectionMessage="Select Security Groups"
         noItemsMessage="Select Security Groups"
         multipleSelection
@@ -235,7 +234,7 @@ class WizardNetworks extends React.Component<Props> {
   //   const selectedPortKey: string | null = selectedNetwork?.targetPortKey || null
   //   return (
   //     <Dropdown
-  //       width={StyleProps.inputSizes.large.width}
+  //       width={ThemeProps.inputSizes.large.width}
   //       noSelectionMessage="Choose Port Key"
   //       centered
   //       items={portKeysDict}

src/components/modules/WizardModule/WizardOptions/WizardOptions.tsx

@@ -20,7 +20,6 @@ import autobind from 'autobind-decorator'
 import { CSSTransitionGroup } from 'react-transition-group'
 
 import configLoader from '../../../../utils/Config'
-import StyleProps from '../../../styleUtils/StyleProps'
 import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
 import FieldInput from '../../../ui/FieldInput/FieldInput'
 import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
@@ -30,7 +29,7 @@ import type { StorageBackend } from '../../../../@types/Endpoint'
 
 import { executionOptions, migrationFields } from '../../../../constants'
 import LabelDictionary from '../../../../utils/LabelDictionary'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import endpointImage from './images/endpoint.svg'
 import { MinionPool } from '../../../../@types/MinionPool'
@@ -79,7 +78,7 @@ const GroupNameText = styled.div<any>`
 `
 const GroupNameBar = styled.div<any>`
   flex-grow: 1;
-  background: ${Palette.grayscale[3]};
+  background: ${ThemePalette.grayscale[3]};
   height: 1px;
 `
 const GroupFields = styled.div<any>`
@@ -90,7 +89,7 @@ const Column = styled.div<any>`
   margin-top: -16px;
 `
 const FieldInputStyled = styled(FieldInput)`
-  width: ${props => props.width || StyleProps.inputSizes.wizard.width}px;
+  width: ${props => props.width || ThemeProps.inputSizes.wizard.width}px;
   justify-content: space-between;
   margin-top: 16px;
 `
@@ -105,7 +104,7 @@ const LoadingText = styled.div<any>`
   font-size: 18px;
 `
 const EndpointImage = styled.div<any>`
-  ${StyleProps.exactSize('96px')};
+  ${ThemeProps.exactSize('96px')};
   background: url('${endpointImage}') center no-repeat;
 `
 const NoSourceFieldsWrapper = styled.div<any>`
@@ -120,7 +119,7 @@ const NoSourceFieldsMessage = styled.div<any>`
 `
 const NoSourceFieldsSubMessage = styled.div<any>`
   margin-top: 16px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 
 export const shouldRenderField = (field: Field) => (field.type !== 'array' || (field.enum && field.enum.length && field.enum.length > 0))
@@ -360,7 +359,7 @@ class WizardOptions extends React.Component<Props> {
         addNullValue
         required={field.required}
         data-test-id={`wOptions-field-${field.name}`}
-        width={this.props.fieldWidth || StyleProps.inputSizes.wizard.width}
+        width={this.props.fieldWidth || ThemeProps.inputSizes.wizard.width}
         nullableBoolean={field.nullableBoolean}
         disabled={field.disabled}
         disabledLoading={this.props.optionsLoading

src/components/modules/WizardModule/WizardPageContent/WizardPageContent.tsx

@@ -30,8 +30,7 @@ import WizardScripts from '../WizardScripts/WizardScripts'
 import Schedule from '../../TransferModule/Schedule/Schedule'
 import WizardSummary from '../WizardSummary/WizardSummary'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import { providerTypes, wizardPages, migrationFields } from '../../../../constants'
 import configLoader from '../../../../utils/Config'
 
@@ -53,7 +52,7 @@ import minionPoolStore from '../../../../stores/MinionPoolStore'
 import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth(`${parseInt(StyleProps.contentWidth, 10) + 64}px`)}
+  ${ThemeProps.exactWidth(`${parseInt(ThemeProps.contentWidth, 10) + 64}px`)}
   margin: 64px auto 32px auto;
   position: absolute;
   top: 0;
@@ -72,8 +71,8 @@ const Header = styled.div<any>`
 const HeaderLabel = styled.div<any>`
   text-align: center;
   font-size: 32px;
-  font-weight: ${StyleProps.fontWeights.light};
-  color: ${Palette.primary};
+  font-weight: ${ThemeProps.fontWeights.light};
+  color: ${ThemePalette.primary};
   width: 100%;
 `
 const HeaderReload = styled.div<any>`
@@ -84,9 +83,9 @@ const HeaderReload = styled.div<any>`
 `
 const HeaderReloadLabel = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   &:hover {
-    color: ${Palette.primary};
+    color: ${ThemePalette.primary};
   }
   cursor: pointer;
 `
@@ -589,7 +588,7 @@ class WizardPageContent extends React.Component<Props, State> {
           <WizardTypeIcon
             dangerouslySetInnerHTML={{
               __html: this.props.type === 'replica'
-                ? migrationArrowImage(Palette.alert) : migrationArrowImage(Palette.primary),
+                ? migrationArrowImage(ThemePalette.alert) : migrationArrowImage(ThemePalette.primary),
             }}
           />
           <EndpointLogos height={32} endpoint={targetEndpoint} />

src/components/modules/WizardModule/WizardScripts/WizardScripts.tsx

@@ -21,8 +21,7 @@ import { Close as InputClose } from '../../../ui/TextInput/TextInput'
 import { Image as InstanceImage } from '../WizardInstances/WizardInstances'
 import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import FileUtils from '../../../../utils/FileUtils'
 
 import scriptItemImage from './images/script-item.svg'
@@ -51,7 +50,7 @@ const Group = styled.div<any>`
 const Heading = styled.div<any>`
   margin-bottom: 16px;
   font-size: ${props => (props.layout === 'modal' ? '16px' : '24px')};
-  font-weight: ${props => (props.layout === 'modal' ? StyleProps.fontWeights.medium : StyleProps.fontWeights.light)};
+  font-weight: ${props => (props.layout === 'modal' ? ThemeProps.fontWeights.medium : ThemeProps.fontWeights.light)};
   display: flex;
 `
 const InfoIconStyled = styled(InfoIcon)<any>`
@@ -69,11 +68,11 @@ const Script = styled.div<any>`
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 0;
 
   &:last-child {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Name = styled.div<any>`
@@ -81,7 +80,7 @@ const Name = styled.div<any>`
   align-items: center;
 `
 const OsImage = styled.div<any>`
-  ${StyleProps.exactSize('48px')}
+  ${ThemeProps.exactSize('48px')}
   background: url('${scriptItemImage}') center no-repeat;
 `
 const NameLabel = styled.div<any>`
@@ -95,12 +94,12 @@ const NameLabelTitle = styled.div<any>`
 `
 const NameLabelSubtitle = styled.div<any>`
   font-size: 12px;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   margin-top: 1px;
   word-break: break-word;
 `
 const LinkButton = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   flex-shrink: 0;
   margin: 0 8px 0 16px;
   cursor: pointer;
@@ -136,7 +135,7 @@ const ScriptDataActions = styled.div`
   }
 `
 const ScriptDataAction = styled.div<{ red?: boolean, disabled?: boolean }>`
-  color: ${props => (props.red ? Palette.alert : Palette.primary)};
+  color: ${props => (props.red ? ThemePalette.alert : ThemePalette.primary)};
   cursor: pointer;
   ${props => (props.disabled ? css`
     opacity: 0.6;

src/components/modules/WizardModule/WizardStorage/WizardStorage.tsx

@@ -20,8 +20,7 @@ import AutocompleteDropdown from '../../../ui/Dropdowns/AutocompleteDropdown/Aut
 import Dropdown from '../../../ui/Dropdowns/Dropdown/Dropdown'
 import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import { Instance, Disk, InstanceUtils } from '../../../../@types/Instance'
 import type { StorageBackend, StorageMap } from '../../../../@types/Endpoint'
 
@@ -57,7 +56,7 @@ const StorageWrapper = styled.div<any>`
 const StorageSection = styled.div<any>`
   margin-bottom: 16px;
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
 `
 const StorageItems = styled.div<any>`
   display: flex;
@@ -67,15 +66,15 @@ const StorageItem = styled.div<any>`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 0;
 
   &:last-child {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const StorageImage = styled.div<any>`
-  ${StyleProps.exactSize('48px')}
+  ${ThemeProps.exactSize('48px')}
   background: url('${props => (props.backend ? backendImage : diskImage)}') center no-repeat;
   margin-right: 16px;
 `
@@ -88,13 +87,13 @@ const StorageName = styled.div<any>`
 `
 const StorageSubtitle = styled.div<any>`
   font-size: 12px;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   margin-top: 1px;
   word-break: break-word;
 `
 const ArrowImage = styled.div<any>`
   min-width: 32px;
-  ${StyleProps.exactHeight('16px')}
+  ${ThemeProps.exactHeight('16px')}
   background: url('${arrowImage}') center no-repeat;
   flex-grow: 1;
   margin-right: 16px;
@@ -124,7 +123,7 @@ const NoStorageMessage = styled.div<any>`
 `
 const BigStorageImage = styled.div<any>`
   margin-bottom: 46px;
-  ${StyleProps.exactSize('96px')}
+  ${ThemeProps.exactSize('96px')}
   background: url('${bigStorageImage}') center no-repeat;
 `
 const NoStorageTitle = styled.div<any>`
@@ -132,7 +131,7 @@ const NoStorageTitle = styled.div<any>`
   font-size: 18px;
 `
 const NoStorageSubtitle = styled.div`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   text-align: center;
   margin-bottom: 42px;
 `
@@ -223,7 +222,7 @@ class WizardStorage extends React.Component<Props> {
   ) {
     return storageItems.length > 10 ? (
       <AutocompleteDropdown
-        width={StyleProps.inputSizes.large.width}
+        width={ThemeProps.inputSizes.large.width}
         selectedItem={selectedItem}
         items={storageItems}
         onChange={(item: StorageBackend) => { this.props.onChange({ source: disk, target: item, type }) }}
@@ -233,7 +232,7 @@ class WizardStorage extends React.Component<Props> {
     )
       : (
         <Dropdown
-          width={StyleProps.inputSizes.large.width}
+          width={ThemeProps.inputSizes.large.width}
           centered
           noSelectionMessage="Default"
           noItemsMessage="No storage found"
@@ -359,7 +358,7 @@ class WizardStorage extends React.Component<Props> {
       ]
       const selectedItem = items.find(i => i.value === this.props.defaultStorage.value)
       const commonProps = {
-        width: StyleProps.inputSizes.regular.width,
+        width: ThemeProps.inputSizes.regular.width,
         selectedItem,
         items,
         onChange: (item: { value: string | null }) => this.props.onDefaultStorageChange(item.value),

src/components/modules/WizardModule/WizardSummary/WizardSummary.tsx

@@ -19,8 +19,7 @@ import moment from 'moment'
 
 import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import LabelDictionary from '../../../../utils/LabelDictionary'
 import DateUtils from '../../../../utils/DateUtils'
 import { migrationFields } from '../../../../constants'
@@ -62,15 +61,15 @@ const Section = styled.div<any>`
 `
 const SectionTitle = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 16px;
 `
 const Overview = styled.div<any>``
 const OverviewLabel = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   margin-bottom: 4px;
 `
 const OverviewRow = styled.div<any>`
@@ -94,11 +93,11 @@ const Row = styled.div<any>`
   display: flex;
   flex-direction: ${props => props.direction || 'column'};
   padding: 8px 0;
-  border-top: 1px solid ${Palette.grayscale[1]};
-  color: ${Palette.grayscale[4]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
+  color: ${ThemePalette.grayscale[4]};
 
   &:last-child {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const ScriptFileName = styled.div<any>`
@@ -114,7 +113,7 @@ const InstanceRowTitle = styled.div<any>`
 `
 const InstanceRowSubtitle = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   margin-bottom: 4px;
   &:last-child {
     margin-bottom: 0;
@@ -153,15 +152,15 @@ const Option = styled.div<any>`
   margin-bottom: 8px;
 `
 const OptionLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
-  ${StyleProps.exactWidth('50%')}
+  color: ${ThemePalette.grayscale[4]};
+  ${ThemeProps.exactWidth('50%')}
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `
 const OptionValue = styled.div<any>`
   text-align: right;
-  ${StyleProps.exactWidth('50%')}
+  ${ThemeProps.exactWidth('50%')}
   text-overflow: ellipsis;
   overflow: hidden;
 `

src/components/modules/WizardModule/WizardType/WizardType.tsx

@@ -18,8 +18,7 @@ import styled from 'styled-components'
 
 import Switch from '../../../ui/Switch/Switch'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import migrationImage from './images/migration'
 
@@ -33,8 +32,8 @@ const Image = styled.div<any>`
   width: 96px;
   height: 96px;
   #stroke {
-    transition: all ${StyleProps.animations.swift};
-    stroke: ${props => (props.type === 'replica' ? Palette.alert : Palette.primary)};
+    transition: all ${ThemeProps.animations.swift};
+    stroke: ${props => (props.type === 'replica' ? ThemePalette.alert : ThemePalette.primary)};
   }
 `
 const Row = styled.div<any>`
@@ -51,12 +50,12 @@ const Column = styled.div<any>`
 `
 const Title = styled.div<any>`
   font-size: 23px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 17px;
 `
 const Message = styled.div<any>`
-  color: ${Palette.grayscale[4]};
-  transition: all ${StyleProps.animations.swift};
+  color: ${ThemePalette.grayscale[4]};
+  transition: all ${ThemeProps.animations.swift};
   opacity: ${props => (props.selected ? 1 : 0.6)};
 `
 

src/components/smart/AboutModal/AboutModal.tsx

@@ -19,8 +19,7 @@ import styled from 'styled-components'
 import Modal from '../../ui/Modal/Modal'
 import LicenceComponent from '../../modules/LicenceModule/LicenceModule'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 import licenceStore from '../../../stores/LicenceStore'
 import userStore from '../../../stores/UserStore'
@@ -57,12 +56,12 @@ const Content = styled.div<any>`
 const AboutContentWrapper = styled.div<any>``
 const Logo = styled.div<any>`
   width: 362px;
-  ${StyleProps.exactHeight('71px')}
+  ${ThemeProps.exactHeight('71px')}
   background: url('${logoImage}') center no-repeat;
 `
 const Text = styled.div`
   margin: 48px 0 32px 0;
-  color: ${Palette.grayscale[5]};
+  color: ${ThemePalette.grayscale[5]};
   font-size: 12px;
 `
 const TextLine = styled.div<any>`

src/components/smart/EndpointDetailsPage/EndpointDetailsPage.tsx

@@ -34,7 +34,7 @@ import projectStore from '../../../stores/ProjectStore'
 
 import type { Endpoint as EndpointType } from '../../../@types/Endpoint'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 
 import endpointImage from './images/endpoint.svg'
 import regionStore from '../../../stores/RegionStore'
@@ -226,7 +226,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
     const endpoint = this.endpoint
     const dropdownActions = [{
       label: 'Validate',
-      color: Palette.primary,
+      color: ThemePalette.primary,
       action: () => { this.handleValidateClick() },
     }, {
       label: 'Edit',
@@ -240,7 +240,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
       action: () => { this.handleExportToJsonClick() },
     }, {
       label: 'Delete Endpoint',
-      color: Palette.alert,
+      color: ThemePalette.alert,
       action: () => { this.handleDeleteEndpointClick() },
     }]
     return (

src/components/smart/EndpointsPage/EndpointsPage.tsx

@@ -38,7 +38,7 @@ import providerStore from '../../../stores/ProviderStore'
 import EndpointDuplicateOptions from '../../modules/EndpointModule/EndpointDuplicateOptions/EndpointDuplicateOptions'
 
 import configLoader from '../../../utils/Config'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import { ProviderTypes } from '../../../@types/Providers'
 import regionStore from '../../../stores/RegionStore'
 
@@ -274,7 +274,7 @@ class EndpointsPage extends React.Component<{ history: any }, State> {
       action: () => { this.handleExportToJson() },
     }, {
       label: 'Delete Endpoint',
-      color: Palette.alert,
+      color: ThemePalette.alert,
       action: () => { this.handleDeleteAction() },
     }]
 

src/components/smart/LogsPage/DownloadsContent.tsx

@@ -23,9 +23,9 @@ import { Close } from '../../ui/TextInput/TextInput'
 import DatetimePicker from '../../ui/DatetimePicker/DatetimePicker'
 import StatusIcon from '../../ui/StatusComponents/StatusIcon/StatusIcon'
 
-import StyleProps from '../../styleUtils/StyleProps'
 
 import downloadImage from './images/download.svg'
+import { ThemeProps } from '../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -54,7 +54,7 @@ const DateWrapper = styled.div<any>`
   margin-left: 48px;
 `
 const DateLabel = styled.div<any>`
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
 `
 const DateInput = styled.div<any>`
   margin-top: 4px;
@@ -85,7 +85,7 @@ const LogName = styled.div<any>`
   margin-left: 16px;
 `
 const LogDownload = styled.div<any>`
-  ${StyleProps.exactSize('16px')}
+  ${ThemeProps.exactSize('16px')}
   background: url('${downloadImage}') center no-repeat;
   background-size: contain;
   cursor: pointer;

src/components/smart/LogsPage/StreamText.tsx

@@ -20,8 +20,7 @@ import AnsiToHtml from 'ansi-to-html'
 import DropdownLink from '../../ui/Dropdowns/DropdownLink/DropdownLink'
 import Checkbox from '../../ui/Checkbox/Checkbox'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 import type { Log } from '../../../@types/Log'
 
@@ -44,7 +43,7 @@ const DropdownLinkStyled = styled(DropdownLink)`
   margin-left: 16px;
 `
 const OpenInNewWindow = styled.a`
-  ${StyleProps.exactSize('14px')}
+  ${ThemeProps.exactSize('14px')}
   background: url('${expandImage}') center no-repeat;
   background-size: contain;
   cursor: pointer;
@@ -52,8 +51,8 @@ const OpenInNewWindow = styled.a`
 `
 const Content = styled.div<any>`
   padding: 8px;
-  border-top-left-radius: ${StyleProps.borderRadius};
-  border-top-right-radius: ${StyleProps.borderRadius};
+  border-top-left-radius: ${ThemeProps.borderRadius};
+  border-top-right-radius: ${ThemeProps.borderRadius};
   border: 1px solid #DCE1EB;
   background: #F5F6FA;
   font-family: 'Courier New', Courier, monospace;
@@ -62,8 +61,8 @@ const Content = styled.div<any>`
 `
 const Footer = styled.div<any>`
   padding: 8px;
-  border-bottom-left-radius: ${StyleProps.borderRadius};
-  border-bottom-right-radius: ${StyleProps.borderRadius};
+  border-bottom-left-radius: ${ThemeProps.borderRadius};
+  border-bottom-right-radius: ${ThemeProps.borderRadius};
   border: 1px solid #DCE1EB;
   border-top: none;
   display: flex;
@@ -77,12 +76,12 @@ const FeedLine = styled.div<any>`
   word-break: break-word;
 `
 const TextButton = styled.div<any>`
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
   cursor: pointer;
   margin-right: 16px;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   &:hover {
-    color: ${Palette.primary};
+    color: ${ThemePalette.primary};
   }
 `
 const ERROR_COLOR = '#c80546'

src/components/smart/MessagePage/MessagePage.tsx

@@ -14,12 +14,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import styled from 'styled-components'
+import EmptyTemplate from '../../modules/TemplateModule/EmptyTemplate/EmptyTemplate'
+import { ThemePalette } from '../../Theme'
 
 import StatusImage from '../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../styleUtils/Palette'
 import fingerprintImage from './images/fingerprint'
-import EmptyTemplate from '../../modules/TemplateModule/EmptyTemplate/EmptyTemplate'
 
 const Wrapper = styled.div<any>`
   position: absolute;
@@ -56,11 +56,11 @@ const FingerPrintAnimation = styled.div<any>`
 `
 const Title = styled.div<any>`
   font-size: 21px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const Message = styled.div<any>`
   margin-top: 16px;
-  color: ${Palette.grayscale[8]};
+  color: ${ThemePalette.grayscale[8]};
 `
 type Props = {
   title?: string,

src/components/smart/MigrationDetailsPage/MigrationDetailsPage.tsx

@@ -35,7 +35,7 @@ import providerStore from '../../../stores/ProviderStore'
 import configLoader from '../../../utils/Config'
 
 import migrationImage from './images/migration.svg'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 
 import type { Field } from '../../../@types/Field'
 import type { InstanceScript } from '../../../@types/Instance'
@@ -356,12 +356,12 @@ class MigrationDetailsPage extends React.Component<Props, State> {
       },
       {
         label: 'Recreate Migration',
-        color: Palette.primary,
+        color: ThemePalette.primary,
         action: () => { this.handleRecreateClick() },
       },
       {
         label: 'Delete Migration',
-        color: Palette.alert,
+        color: ThemePalette.alert,
         action: () => { this.handleDeleteMigrationClick() },
       },
     ]

src/components/smart/MigrationsPage/MigrationsPage.tsx

@@ -32,7 +32,7 @@ import endpointStore from '../../../stores/EndpointStore'
 import notificationStore from '../../../stores/NotificationStore'
 import configLoader from '../../../utils/Config'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import replicaMigrationFields from '../../modules/TransferModule/ReplicaMigrationOptions/replicaMigrationFields'
 import { MigrationItem } from '../../../@types/MainItem'
 import userStore from '../../../stores/UserStore'
@@ -227,12 +227,12 @@ class MigrationsPage extends React.Component<{ history: any }, State> {
       {
         label: 'Recreate Migrations',
         disabled: atLeaseOneIsRunning,
-        color: Palette.primary,
+        color: ThemePalette.primary,
         action: () => { this.setState({ showRecreateMigrationsModal: true }) },
       },
       {
         label: 'Delete Migrations',
-        color: Palette.alert,
+        color: ThemePalette.alert,
         action: () => { this.setState({ showDeleteMigrationModal: true }) },
       },
     ]

src/components/smart/MinionPoolDetailsPage/MinionPoolDetailsPage.tsx

@@ -31,7 +31,7 @@ import notificationStore from '../../../stores/NotificationStore'
 import configLoader from '../../../utils/Config'
 
 import minionPoolImage from './images/minion-pool.svg'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import minionPoolStore from '../../../stores/MinionPoolStore'
 import MinionPoolModal from '../../modules/MinionModule/MinionPoolModal/MinionPoolModal'
 import MinionPoolDetailsContent from '../../modules/MinionModule/MinionPoolDetailsContent/MinionPoolDetailsContent'
@@ -291,7 +291,7 @@ class MinionPoolDetailsPage extends React.Component<Props, State> {
       },
       {
         label: 'Allocate',
-        color: Palette.primary,
+        color: ThemePalette.primary,
         action: () => { this.handleAllocate() },
         disabled: !deallocated,
         title: !deallocated ? 'The minion pool should be deallocated' : '',
@@ -314,7 +314,7 @@ class MinionPoolDetailsPage extends React.Component<Props, State> {
       },
       {
         label: 'Delete Minion Pool',
-        color: Palette.alert,
+        color: ThemePalette.alert,
         action: () => {
           this.setState({ showDeleteMinionPoolConfirmation: true })
         },

src/components/smart/MinionPoolsPage/MinionPoolsPage.tsx

@@ -39,7 +39,7 @@ import { Endpoint } from '../../../@types/Endpoint'
 import MinionEndpointModal from '../../modules/MinionModule/MinionEndpointModal/MinionEndpointModal'
 import MinionPoolModal from '../../modules/MinionModule/MinionPoolModal/MinionPoolModal'
 import MinionPoolListItem from '../../modules/MinionModule/MinionPoolListItem/MinionPoolListItem'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import AlertModal from '../../ui/AlertModal/AlertModal'
 import MinionPoolConfirmationModal from '../../modules/MinionModule/MinionPoolConfirmationModal/MinionPoolConfirmationModal'
 import notificationStore from '../../../stores/NotificationStore'
@@ -263,7 +263,7 @@ class MinionPoolsPage extends React.Component<RouteComponentProps, State> {
     const BulkActions: DropdownAction[] = [
       {
         label: 'Allocate',
-        color: Palette.primary,
+        color: ThemePalette.primary,
         action: () => { this.handleAllocate() },
         disabled: !canBeAllocated,
         title: !canBeAllocated ? 'The minion pool should be deallocated' : '',
@@ -286,7 +286,7 @@ class MinionPoolsPage extends React.Component<RouteComponentProps, State> {
       },
       {
         label: 'Delete Minion Pools',
-        color: Palette.alert,
+        color: ThemePalette.alert,
         action: () => {
           this.setState({ showDeletePoolsModal: true })
         },

src/components/smart/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -29,7 +29,7 @@ import AlertModal from '../../ui/AlertModal/AlertModal'
 import projectStore from '../../../stores/ProjectStore'
 import userStore from '../../../stores/UserStore'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 
 import projectImage from './images/project.svg'
 
@@ -171,14 +171,14 @@ class ProjectDetailsPage extends React.Component<Props, State> {
   render() {
     const dropdownActions = [{
       label: 'Add Member',
-      color: Palette.primary,
+      color: ThemePalette.primary,
       action: () => { this.handleAddMemberClick() },
     }, {
       label: 'Edit Project',
       action: () => { this.handleEditProjectClick() },
     }, {
       label: 'Delete Project',
-      color: Palette.alert,
+      color: ThemePalette.alert,
       action: () => { this.handleDeleteProjectClick() },
     }]
 

src/components/smart/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -47,7 +47,7 @@ import configLoader from '../../../utils/Config'
 import { providerTypes } from '../../../constants'
 
 import replicaImage from './images/replica.svg'
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import { getTransferItemTitle, ReplicaItemDetails } from '../../../@types/MainItem'
 import ObjectUtils from '../../../utils/ObjectUtils'
 import minionPoolStore from '../../../stores/MinionPoolStore'
@@ -562,7 +562,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
       },
       {
         label: 'Create Migration',
-        color: Palette.primary,
+        color: ThemePalette.primary,
         action: () => { this.handleCreateMigrationClick() },
       },
       {
@@ -578,7 +578,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
       },
       {
         label: 'Delete Replica',
-        color: Palette.alert,
+        color: ThemePalette.alert,
         action: () => { this.handleDeleteReplicaClick() },
       },
     ]

src/components/smart/ReplicasPage/ReplicasPage.tsx

@@ -42,7 +42,7 @@ import instanceStore from '../../../stores/InstanceStore'
 import endpointStore from '../../../stores/EndpointStore'
 import notificationStore from '../../../stores/NotificationStore'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import configLoader from '../../../utils/Config'
 import { ReplicaItem } from '../../../@types/MainItem'
 import userStore from '../../../stores/UserStore'
@@ -325,14 +325,14 @@ class ReplicasPage extends React.Component<{ history: any }, State> {
       action: () => { this.setState({ showCancelExecutionModal: true }) },
     }, {
       label: 'Create Migrations',
-      color: Palette.primary,
+      color: ThemePalette.primary,
       action: () => { this.handleShowCreateMigrationsModal() },
     }, {
       label: 'Delete Disks',
       action: () => { this.setState({ showDeleteDisksModal: true }) },
     }, {
       label: 'Delete Replicas',
-      color: Palette.alert,
+      color: ThemePalette.alert,
       action: () => { this.handleShowDeleteReplicas() },
     }]
 

src/components/smart/UserDetailsPage/UserDetailsPage.tsx

@@ -27,7 +27,7 @@ import AlertModal from '../../ui/AlertModal/AlertModal'
 import userStore from '../../../stores/UserStore'
 import projectStore from '../../../stores/ProjectStore'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 
 import userImage from './images/user.svg'
 
@@ -112,14 +112,14 @@ class UserDetailsPage extends React.Component<Props, State> {
   render() {
     const dropdownActions = [{
       label: 'Change password',
-      color: Palette.primary,
+      color: ThemePalette.primary,
       action: () => { this.handleUpdatePasswordClick() },
     }, {
       label: 'Edit user',
       action: () => { this.handleEditClick() },
     }, {
       label: 'Delete user',
-      color: Palette.alert,
+      color: ThemePalette.alert,
       action: () => { this.handleDeleteClick() },
     }]
 

src/components/styleUtils/Palette.ts

@@ -1,37 +0,0 @@
-/*
-Copyright (C) 2017  Cloudbase Solutions SRL
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const Palette = {
-  primary: '#0044CB',
-  primaryLight: '#000EA9',
-  secondary: '#D9DCE3',
-  secondaryLight: '#777A8B',
-  black: '#202134',
-  alert: '#F91661',
-  success: '#4CD964',
-  warning: '#FDC02F',
-  grayscale: [
-    '#D8DBE2', // 0
-    '#ECEDF1', // 1
-    '#C8CCD7', // 2
-    '#A4AAB5', // 3
-    '#616770', // 4
-    '#7F8795', // 5
-    '#1B2733', // 6
-    '#F2F3F4', // 7
-    '#858B93', // 8
-  ],
-}
-
-export default Palette

src/components/ui/AlertModal/AlertModal.tsx

@@ -20,7 +20,7 @@ import Modal from '../Modal/Modal'
 import Button from '../Button/Button'
 import StatusImage from '../StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../Theme'
 import KeyboardManager from '../../../utils/KeyboardManager'
 
 const Wrapper = styled.div<any>`
@@ -36,7 +36,7 @@ const Message = styled.div<any>`
   margin-top: 48px;
 `
 const ExtraMessage = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin: 11px 0 48px 0;
   text-align: center;
 `

src/components/ui/Arrow/Arrow.tsx

@@ -16,8 +16,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 import arrowImage from './images/arrow'
 import arrowThickImage from './images/arrow-thick'
@@ -36,7 +35,7 @@ const Wrapper = styled.div<any>`
   align-items: center;
   cursor: ${props => (props.useDefaultCursor || props.disabled ? 'default' : 'pointer')};
   opacity: ${props => props.opacity};
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   ${props => getOrientation(props)}
 `
 
@@ -58,9 +57,9 @@ class Arrow extends React.Component<Props> {
   }
 
   render() {
-    let color = this.props.primary ? Palette.primary : Palette.grayscale[4]
+    let color = this.props.primary ? ThemePalette.primary : ThemePalette.grayscale[4]
     color = this.props.color || color
-    color = this.props.disabled ? Palette.grayscale[0] : color
+    color = this.props.disabled ? ThemePalette.grayscale[0] : color
     return (
       <Wrapper
         // eslint-disable-next-line react/jsx-props-no-spreading

src/components/ui/AutocompleteInput/AutocompleteInput.tsx

@@ -18,8 +18,7 @@ import styled, { css } from 'styled-components'
 import arrowImage from './images/arrow'
 
 import TextInput from '../TextInput/TextInput'
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 const getWidth = (props: any) => {
   if (props.width) {
@@ -27,17 +26,17 @@ const getWidth = (props: any) => {
   }
 
   if (props.large) {
-    return StyleProps.inputSizes.large.width - 2
+    return ThemeProps.inputSizes.large.width - 2
   }
 
-  return StyleProps.inputSizes.regular.width - 2
+  return ThemeProps.inputSizes.regular.width - 2
 }
 
 const getBorder = (props: any) => {
   if (props.embedded) {
     return css`border: none;`
   }
-  return css`border: 1px solid ${props.highlight ? Palette.alert : props.disabled ? Palette.grayscale[0] : Palette.grayscale[3]};`
+  return css`border: 1px solid ${props.highlight ? ThemePalette.alert : props.disabled ? ThemePalette.grayscale[0] : ThemePalette.grayscale[3]};`
 }
 
 const Wrapper = styled.div<any>`
@@ -45,17 +44,17 @@ const Wrapper = styled.div<any>`
   align-items: center;
   position: relative;
   width: ${props => (props.embedded ? 'calc(100% + 8px)' : `${getWidth(props)}px`)};
-  height: ${props => (props.large ? StyleProps.inputSizes.large.height - 2
-    : StyleProps.inputSizes.regular.height - 2)}px;
+  height: ${props => (props.large ? ThemeProps.inputSizes.large.height - 2
+    : ThemeProps.inputSizes.regular.height - 2)}px;
   ${props => getBorder(props)}
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   cursor: ${props => (props.disabled ? 'default' : 'pointer')};
-  transition: all ${StyleProps.animations.swift};
-  background: ${props => (props.disabled && !props.embedded ? Palette.grayscale[0] : 'white')};
+  transition: all ${ThemeProps.animations.swift};
+  background: ${props => (props.disabled && !props.embedded ? ThemePalette.grayscale[0] : 'white')};
 
-  #dropdown-arrow-image {stroke: ${props => (props.disabled ? Palette.grayscale[3] : Palette.black)};}
-  ${props => (props.focus ? css`border-color: ${Palette.primary};` : '')}
-  ${props => (props.disabledLoading ? StyleProps.animations.disabledLoading : '')}
+  #dropdown-arrow-image {stroke: ${props => (props.disabled ? ThemePalette.grayscale[3] : ThemePalette.black)};}
+  ${props => (props.focus ? css`border-color: ${ThemePalette.primary};` : '')}
+  ${props => (props.disabledLoading ? ThemeProps.animations.disabledLoading : '')}
 
 `
 const Arrow = styled.div<any>`

src/components/ui/Button/Button.tsx

@@ -15,8 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled from 'styled-components'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 const backgroundColor = (props: any) => {
   if (props.hollow) {
@@ -26,48 +25,48 @@ const backgroundColor = (props: any) => {
     return 'white'
   }
   if (props.secondary) {
-    return Palette.secondaryLight
+    return ThemePalette.secondaryLight
   }
   if (props.alert) {
-    return Palette.alert
+    return ThemePalette.alert
   }
-  return Palette.primary
+  return ThemePalette.primary
 }
 const disabledBackgroundColor = (props: any) => {
   if (props.secondary && props.hollow) {
-    return Palette.grayscale[7]
+    return ThemePalette.grayscale[7]
   }
   return backgroundColor(props)
 }
 
 const hoverBackgroundColor = (props: any) => {
   if (props.disabled && props.secondary && props.hollow) {
-    return Palette.grayscale[7]
+    return ThemePalette.grayscale[7]
   }
 
   if (props.secondary) {
-    return Palette.grayscale[8]
+    return ThemePalette.grayscale[8]
   }
 
   if (props.hoverPrimary) {
-    return Palette.primary
+    return ThemePalette.primary
   }
 
   if (props.alert) {
-    return Palette.alert
+    return ThemePalette.alert
   }
-  return Palette.primary
+  return ThemePalette.primary
 }
 
 const border = (props: any) => {
   if (props.hollow) {
     if (props.secondary) {
-      return `border: 1px solid ${Palette.grayscale[3]};`
+      return `border: 1px solid ${ThemePalette.grayscale[3]};`
     }
     if (props.alert) {
-      return `border: 1px solid ${Palette.alert};`
+      return `border: 1px solid ${ThemePalette.alert};`
     }
-    return `border: 1px solid ${Palette.primary};`
+    return `border: 1px solid ${ThemePalette.primary};`
   }
   return ''
 }
@@ -81,12 +80,12 @@ const disabledBorder = (props: any) => {
 const color = (props: any) => {
   if (props.hollow) {
     if (props.secondary) {
-      return props.disabled ? Palette.grayscale[3] : Palette.black
+      return props.disabled ? ThemePalette.grayscale[3] : ThemePalette.black
     }
     if (props.alert) {
-      return Palette.alert
+      return ThemePalette.alert
     }
-    return Palette.primary
+    return ThemePalette.primary
   }
   return 'white'
 }
@@ -96,12 +95,12 @@ const getWidth = (props: any) => {
   }
 
   if (props.large) {
-    return `${StyleProps.inputSizes.large.width}px`
+    return `${ThemeProps.inputSizes.large.width}px`
   }
-  return `${StyleProps.inputSizes.regular.width}px`
+  return `${ThemeProps.inputSizes.regular.width}px`
 }
 const StyledButton = styled.button`
-  ${StyleProps.exactHeight('32px')}
+  ${ThemeProps.exactHeight('32px')}
   border-radius: 4px;
   margin: 0;
   background-color: ${props => backgroundColor(props)};
@@ -109,10 +108,10 @@ const StyledButton = styled.button`
   ${props => border(props)}
   color: ${props => color(props)};
   padding: 0;
-  ${props => StyleProps.exactWidth(getWidth(props))}
+  ${props => ThemeProps.exactWidth(getWidth(props))}
   cursor: pointer;
   font-size: inherit;
-  transition: background-color ${StyleProps.animations.swift}, opacity ${StyleProps.animations.swift};
+  transition: background-color ${ThemeProps.animations.swift}, opacity ${ThemeProps.animations.swift};
   &:disabled {
     opacity: ${(props: any) => (props.secondary ? 1 : 0.7)};
     cursor: not-allowed;
@@ -120,7 +119,7 @@ const StyledButton = styled.button`
     ${props => disabledBorder(props)}
   }
   &:hover {
-    ${(props: any) => (props.hollow ? `color: ${props.disabled ? Palette.grayscale[3] : 'white'};` : '')}
+    ${(props: any) => (props.hollow ? `color: ${props.disabled ? ThemePalette.grayscale[3] : 'white'};` : '')}
     background-color: ${props => hoverBackgroundColor(props)};
   }
   &:focus {

src/components/ui/Checkbox/Checkbox.tsx

@@ -16,8 +16,7 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 import checkmarkImage from './images/checkmark.svg'
 
@@ -34,20 +33,20 @@ const Wrapper = styled.div<any>`
   ${(props: any) => (props.disabled ? 'opacity: 0.9;' : '')}
   justify-content: center;
   align-items: center;
-  ${StyleProps.exactSize('16px')}
-  border: 1px solid ${Palette.grayscale[3]};
+  ${ThemeProps.exactSize('16px')}
+  border: 1px solid ${ThemePalette.grayscale[3]};
   border-radius: 3px;
   background: white;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   ${(props: any) => (props.checked ? css`
-    border-color: ${Palette.primary};
-    background: ${Palette.primary};
+    border-color: ${ThemePalette.primary};
+    background: ${ThemePalette.primary};
     ${CheckmarkImage} {
       transform: scale(1);
     }
   ` : '')}
   :focus {
-    border: 1px solid ${Palette.primary};
+    border: 1px solid ${ThemePalette.primary};
     outline: none;
   }
 `

src/components/ui/CopyButton/CopyButton.tsx

@@ -16,9 +16,9 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StyleProps from '../../styleUtils/StyleProps'
 
 import copyImage from './images/copy.svg'
+import { ThemeProps } from '../../Theme'
 
 const Wrapper = styled.span`
   opacity: 0;
@@ -27,7 +27,7 @@ const Wrapper = styled.span`
   display: inline-block;
   background: url('${copyImage}') no-repeat;
   background-position-y: 2px;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 `
 
 @observer

src/components/ui/DatetimePicker/DatetimePicker.tsx

@@ -24,16 +24,16 @@ import DropdownButton from '../Dropdowns/DropdownButton/DropdownButton'
 
 import DomUtils from '../../../utils/DomUtils'
 import DateUtils from '../../../utils/DateUtils'
-import StyleProps from '../../styleUtils/StyleProps'
 
 import style from './style'
+import { ThemeProps } from '../../Theme'
 
 require('moment/locale/en-gb')
 
 const GlobalStyle = createGlobalStyle`${style}`
 
 const Wrapper = styled.div<any>`
-  width: ${StyleProps.inputSizes.regular.width}px;
+  width: ${ThemeProps.inputSizes.regular.width}px;
 `
 const DropdownButtonStyled = styled(DropdownButton)`
   font-size: 12px;
@@ -48,7 +48,7 @@ const Portal = styled.div<any>`
   }
 `
 const DatetimeStyled = styled(Datetime)<any>`
-  ${StyleProps.boxShadow}
+  ${ThemeProps.boxShadow}
 `
 
 type Props = {

src/components/ui/DatetimePicker/style.ts

@@ -14,16 +14,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { css } from 'styled-components'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../Theme'
 
 import arrowImage from './images/arrow.svg'
 
 const style = css`
   .rdtPicker {
     width: 240px;
-    border: 1px solid ${Palette.grayscale[2]};
-    border-radius: ${StyleProps.borderRadius};
+    border: 1px solid ${ThemePalette.grayscale[2]};
+    border-radius: ${ThemeProps.borderRadius};
     background: white;
     position: relative;
 
@@ -34,8 +33,8 @@ const style = css`
       right: 16px;
       width: 16px;
       height: 16px;
-      border-top: 1px solid ${Palette.grayscale[2]};
-      border-left: 1px solid ${Palette.grayscale[2]};
+      border-top: 1px solid ${ThemePalette.grayscale[2]};
+      border-left: 1px solid ${ThemePalette.grayscale[2]};
       transform: rotate(45deg);
       background: white;
     }
@@ -53,7 +52,7 @@ const style = css`
           align-items: center;
 
           &:first-child {
-            border-bottom: 1px solid ${Palette.grayscale[2]};
+            border-bottom: 1px solid ${ThemePalette.grayscale[2]};
           }
 
           &:nth-child(2) {
@@ -81,7 +80,7 @@ const style = css`
             padding: 0;
             justify-content: center;
             align-items: center;
-            ${StyleProps.exactWidth('24px')}
+            ${ThemeProps.exactWidth('24px')}
             height: 24px;
             border: 1px solid transparent;
             border-radius: 50%;
@@ -91,7 +90,7 @@ const style = css`
       }
 
       tfoot {
-        border-top: 1px solid ${Palette.grayscale[2]};
+        border-top: 1px solid ${ThemePalette.grayscale[2]};
         display: flex;
 
         tr {
@@ -110,10 +109,10 @@ const style = css`
 
     .rdtSwitch {
       flex-grow: 1;
-      font-weight: ${StyleProps.fontWeights.regular};
+      font-weight: ${ThemeProps.fontWeights.regular};
       justify-content: center;
       cursor: pointer;
-      color: ${Palette.grayscale[4]};
+      color: ${ThemePalette.grayscale[4]};
     }
 
     .rdtPrev, .rdtNext {
@@ -134,9 +133,9 @@ const style = css`
 
     .dow {
       font-size: 10px;
-      font-weight: ${StyleProps.fontWeights.medium};
-      color: ${Palette.grayscale[3]};
-      ${StyleProps.exactWidth('25px')};
+      font-weight: ${ThemeProps.fontWeights.medium};
+      color: ${ThemePalette.grayscale[3]};
+      ${ThemeProps.exactWidth('25px')};
       margin-right: 7px;
       display: flex;
       justify-content: center;
@@ -148,11 +147,11 @@ const style = css`
     }
 
     .rdtDay.rdtOld, .rdtDay.rdtDisabled, .rdtDay.rdtNew {
-      color: ${Palette.grayscale[3]};
+      color: ${ThemePalette.grayscale[3]};
     }
 
     .rdtDay.rdtActive {
-      background: ${Palette.primary};
+      background: ${ThemePalette.primary};
       color: white;
     }
 

src/components/ui/Dropdowns/ActionDropdown/ActionDropdown.tsx

@@ -21,8 +21,7 @@ import autobind from 'autobind-decorator'
 import DropdownButton from '../DropdownButton/DropdownButton'
 import { List, ListItems, Tip } from '../DropdownLink/DropdownLink'
 
-import StyleProps from '../../../styleUtils/StyleProps'
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import StatusIcon from '../../StatusComponents/StatusIcon/StatusIcon'
 
 const Wrapper = styled.div<any>`
@@ -30,27 +29,27 @@ const Wrapper = styled.div<any>`
 `
 
 const ListItem = styled.div<any>`
-  color: ${(props: any) => (props.disabled ? Palette.grayscale[2] : props.color || Palette.black)};
+  color: ${(props: any) => (props.disabled ? ThemePalette.grayscale[2] : props.color || ThemePalette.black)};
   height: ${(props: any) => (props.large ? 42 : 32)}px;
   padding: 0 16px;
   cursor: ${(props: any) => (props.disabled ? 'default' : 'pointer')};
   display: flex;
   align-items: center;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   &:hover {
-    ${(props: any) => (props.disabled ? '' : css`background: ${Palette.grayscale[0]};`)}
+    ${(props: any) => (props.disabled ? '' : css`background: ${ThemePalette.grayscale[0]};`)}
   }
   &:first-child {
-    border-top-left-radius: ${StyleProps.borderRadius};
-    border-top-right-radius: ${StyleProps.borderRadius};
+    border-top-left-radius: ${ThemeProps.borderRadius};
+    border-top-right-radius: ${ThemeProps.borderRadius};
   }
   &:last-child {
-    border-bottom-left-radius: ${StyleProps.borderRadius};
-    border-bottom-right-radius: ${StyleProps.borderRadius};
+    border-bottom-left-radius: ${ThemeProps.borderRadius};
+    border-bottom-right-radius: ${ThemeProps.borderRadius};
   }
 `
 const ListStyle = css`
-  ${StyleProps.boxShadow}
+  ${ThemeProps.boxShadow}
   border: none;
 `
 export const TEST_ID = 'actionDropdown'
@@ -149,7 +148,7 @@ class ActionDropdown extends React.Component<Props, State> {
     if (!this.tipRef || index !== 0 || action.disabled) {
       return
     }
-    this.tipRef.style.background = isEnter ? Palette.grayscale[0] : Palette.grayscale[1]
+    this.tipRef.style.background = isEnter ? ThemePalette.grayscale[0] : ThemePalette.grayscale[1]
   }
 
   handleItemClick(action: Action) {
@@ -193,7 +192,7 @@ class ActionDropdown extends React.Component<Props, State> {
     return ReactDOM.createPortal((
       <List
         ref={(list: HTMLElement | null | undefined) => { this.listRef = list }}
-        width={`${StyleProps.inputSizes.regular.width}px`}
+        width={`${ThemeProps.inputSizes.regular.width}px`}
         padding={0}
         customStyle={ListStyle}
         data-test-id={`${TEST_ID}-list`}

src/components/ui/Dropdowns/ActionDropdown/story.tsx

@@ -16,11 +16,11 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import ActionDropdown from '../ActionDropdown'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 const actions = [{
   label: 'Execute',
-  color: Palette.primary,
+  color: ThemePalette.primary,
   action: () => { console.log('execute clicked') },
   disabled: true,
 }, {
@@ -28,7 +28,7 @@ const actions = [{
   action: () => { console.log('Edit clicked') },
 }, {
   label: 'Delete',
-  color: Palette.alert,
+  color: ThemePalette.alert,
   action: () => { console.log('Delete clicked') },
 }]
 

src/components/ui/Dropdowns/AutocompleteDropdown/AutocompleteDropdown.tsx

@@ -24,9 +24,8 @@ import {
 } from '../Dropdown/Dropdown'
 import tipImage from '../Dropdown/images/tip'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DomUtils from '../../../../utils/DomUtils'
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import requiredImage from './images/required.svg'
 
@@ -36,10 +35,10 @@ const getWidth = (props: any) => {
   }
 
   if (props.large) {
-    return StyleProps.inputSizes.large.width - 2
+    return ThemeProps.inputSizes.large.width - 2
   }
 
-  return StyleProps.inputSizes.regular.width - 2
+  return ThemeProps.inputSizes.regular.width - 2
 }
 const Wrapper = styled.div<any>`
   position: relative;
@@ -58,16 +57,16 @@ const List = styled.div<any>`
   background: white;
   cursor: pointer;
   width: ${(props: any) => getWidth(props)}px;
-  border: 1px solid ${Palette.grayscale[3]};
-  border-radius: ${StyleProps.borderRadius};
+  border: 1px solid ${ThemePalette.grayscale[3]};
+  border-radius: ${ThemeProps.borderRadius};
   z-index: 1000;
-  ${StyleProps.boxShadow}
+  ${ThemeProps.boxShadow}
 `
 const Separator = styled.div<any>`
   width: calc(100% - 32px);
   height: 1px;
   margin: 8px 16px;
-  background: ${Palette.grayscale[3]};
+  background: ${ThemePalette.grayscale[3]};
 `
 const ListItems = styled.div<any>`
   max-height: 400px;
@@ -79,26 +78,26 @@ const SearchNotFound = styled.div<any>`
 `
 const ListItem = styled.div<any>`
   position: relative;
-  color: ${(props: any) => (props.selected ? 'white' : props.dim ? Palette.grayscale[3] : Palette.grayscale[4])};
-  ${(props: any) => (props.arrowSelected ? css`background: ${Palette.primary}44;` : '')}
-  ${(props: any) => (props.selected ? css`background: ${Palette.primary};` : '')}
-  ${(props: any) => (props.selected ? css`font-weight: ${StyleProps.fontWeights.medium};` : '')}
+  color: ${(props: any) => (props.selected ? 'white' : props.dim ? ThemePalette.grayscale[3] : ThemePalette.grayscale[4])};
+  ${(props: any) => (props.arrowSelected ? css`background: ${ThemePalette.primary}44;` : '')}
+  ${(props: any) => (props.selected ? css`background: ${ThemePalette.primary};` : '')}
+  ${(props: any) => (props.selected ? css`font-weight: ${ThemeProps.fontWeights.medium};` : '')}
   padding: 8px 16px;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   word-break: break-word;
 
   &:first-child {
-    border-top-left-radius: ${StyleProps.borderRadius};
-    border-top-right-radius: ${StyleProps.borderRadius};
+    border-top-left-radius: ${ThemeProps.borderRadius};
+    border-top-right-radius: ${ThemeProps.borderRadius};
   }
 
   &:last-child {
-    border-bottom-left-radius: ${StyleProps.borderRadius};
-    border-bottom-right-radius: ${StyleProps.borderRadius};
+    border-bottom-left-radius: ${ThemeProps.borderRadius};
+    border-bottom-right-radius: ${ThemeProps.borderRadius};
   }
 
   &:hover {
-    background: ${Palette.primary};
+    background: ${ThemePalette.primary};
     color: white;
   }
 `

src/components/ui/Dropdowns/Dropdown/Dropdown.tsx

@@ -20,9 +20,8 @@ import autobind from 'autobind-decorator'
 
 import DropdownButton from '../DropdownButton/DropdownButton'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 import DomUtils from '../../../../utils/DomUtils'
-import StyleProps from '../../../styleUtils/StyleProps'
 
 import checkmarkImage from './images/checkmark'
 import tipImage from './images/tip'
@@ -33,7 +32,7 @@ const getWidth = (props: any) => {
     return props.width - 2
   }
 
-  return StyleProps.inputSizes.regular.width - 2
+  return ThemeProps.inputSizes.regular.width - 2
 }
 const Wrapper = styled.div<any>`
   position: relative;
@@ -49,17 +48,17 @@ const Required = styled.div<any>`
   right: ${(props: any) => props.right}px;
   top: 12px;
   background: url('${requiredImage}') center no-repeat;
-  ${(props: any) => (props.disabledLoading ? StyleProps.animations.disabledLoading : '')}
+  ${(props: any) => (props.disabledLoading ? ThemeProps.animations.disabledLoading : '')}
 `
 const List = styled.div<any>`
   position: absolute;
   background: white;
   cursor: pointer;
   width: ${(props: any) => getWidth(props)}px;
-  border: 1px solid ${Palette.grayscale[3]};
-  border-radius: ${StyleProps.borderRadius};
+  border: 1px solid ${ThemePalette.grayscale[3]};
+  border-radius: ${ThemeProps.borderRadius};
   z-index: 1000;
-  ${StyleProps.boxShadow}
+  ${ThemeProps.boxShadow}
 `
 const ListItems = styled.div<any>`
   max-height: 400px;
@@ -72,17 +71,17 @@ export const Tip = styled.div<any>`
   right: 8px;
   top: -8px;
   z-index: 11;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   overflow: hidden;
   svg {
     #path {
-      transition: all ${StyleProps.animations.swift};
-      fill: ${props => (props.primary ? Palette.primary : 'white')};
+      transition: all ${ThemeProps.animations.swift};
+      fill: ${props => (props.primary ? ThemePalette.primary : 'white')};
     }
   }
 `
 const Checkmark = styled.div<any>`
-  ${StyleProps.exactWidth('16px')}
+  ${ThemeProps.exactWidth('16px')}
   height: 16px;
   margin-right: 8px;
   margin-top: 1px;
@@ -90,7 +89,7 @@ const Checkmark = styled.div<any>`
   justify-content: center;
   align-items: center;
   #symbol {
-    transition: stroke ${StyleProps.animations.swift};
+    transition: stroke ${ThemeProps.animations.swift};
     stroke-dasharray: 12;
     stroke-dashoffset: ${(props: any) => (props.show ? 24 : 12)};
     animation-duration: 100ms;
@@ -109,25 +108,25 @@ const Checkmark = styled.div<any>`
 `
 const getListItemColor = (props: any) => {
   if (props.disabled) {
-    return Palette.grayscale[3]
+    return ThemePalette.grayscale[3]
   }
   if (props.multipleSelected) {
-    return Palette.primary
+    return ThemePalette.primary
   }
   if (props.selected) {
     return 'white'
   }
   if (props.dim) {
-    return Palette.grayscale[3]
+    return ThemePalette.grayscale[3]
   }
-  return Palette.grayscale[4]
+  return ThemePalette.grayscale[4]
 }
 const getListBackgroundColor = (props: any) => {
   if (props.arrowSelected) {
-    return css`background: ${Palette.primary}44;`
+    return css`background: ${ThemePalette.primary}44;`
   }
   if (props.selected) {
-    return css`background: ${Palette.primary};`
+    return css`background: ${ThemePalette.primary};`
   }
   return ''
 }
@@ -136,25 +135,25 @@ const ListItem = styled.div<any>`
   display: flex;
   color: ${(props: any) => getListItemColor(props)};
   ${(props: any) => getListBackgroundColor(props)}
-  ${(props: any) => (props.selected ? css`font-weight: ${StyleProps.fontWeights.medium};` : '')}
+  ${(props: any) => (props.selected ? css`font-weight: ${ThemeProps.fontWeights.medium};` : '')}
   padding: 8px 16px;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   padding-left: ${(props: any) => props.paddingLeft}px;
   word-break: break-word;
   ${props => (props.disabled ? css`cursor: default;` : '')}
 
   &:first-child {
-    border-top-left-radius: ${StyleProps.borderRadius};
-    border-top-right-radius: ${StyleProps.borderRadius};
+    border-top-left-radius: ${ThemeProps.borderRadius};
+    border-top-right-radius: ${ThemeProps.borderRadius};
   }
 
   &:last-child {
-    border-bottom-left-radius: ${StyleProps.borderRadius};
-    border-bottom-right-radius: ${StyleProps.borderRadius};
+    border-bottom-left-radius: ${ThemeProps.borderRadius};
+    border-bottom-right-radius: ${ThemeProps.borderRadius};
   }
 
   &:hover {
-    background: ${Palette.primary};
+    background: ${ThemePalette.primary};
     color: white;
     ${Checkmark} #symbol {
       stroke: white;
@@ -178,7 +177,7 @@ const Separator = styled.div<any>`
   width: calc(100% - 32px);
   height: 1px;
   margin: 8px 16px;
-  background: ${Palette.grayscale[3]};
+  background: ${ThemePalette.grayscale[3]};
 `
 const Labels = styled.div<any>`
   word-break: break-word;

src/components/ui/Dropdowns/DropdownButton/DropdownButton.tsx

@@ -17,19 +17,18 @@ import styled, { css } from 'styled-components'
 
 import arrowImage from './images/arrow'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const getLabelColor = (props: any) => {
   if (props.disabled) {
-    return Palette.grayscale[3]
+    return ThemePalette.grayscale[3]
   }
 
   if (props.primary || props.secondary) {
     return 'white'
   }
 
-  return Palette.black
+  return ThemePalette.black
 }
 const Label = styled.div<any>`
   color: ${(props: any) => getLabelColor(props)};
@@ -38,7 +37,7 @@ const Label = styled.div<any>`
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-grow: 1;
-  ${(props: any) => (props.useBold ? `font-weight: ${StyleProps.fontWeights.medium};` : '')}
+  ${(props: any) => (props.useBold ? `font-weight: ${ThemeProps.fontWeights.medium};` : '')}
   ${(props: any) => (props.centered ? 'text-align: center;' : '')}
 `
 
@@ -48,22 +47,22 @@ const getBackgroundColor = (props: any) => {
   }
 
   if (props.disabled) {
-    return Palette.grayscale[0]
+    return ThemePalette.grayscale[0]
   }
 
   if (props.secondary) {
-    return Palette.secondaryLight
+    return ThemePalette.secondaryLight
   }
 
   if (props.primary) {
-    return Palette.primary
+    return ThemePalette.primary
   }
 
   return 'white'
 }
 const getArrowColor = (props: any) => {
   if (props.disabled) {
-    return Palette.grayscale[3]
+    return ThemePalette.grayscale[3]
   }
 
   if (props.primary || props.secondary) {
@@ -71,46 +70,46 @@ const getArrowColor = (props: any) => {
   }
 
   if (props.outline) {
-    return Palette.primary
+    return ThemePalette.primary
   }
 
-  return Palette.black
+  return ThemePalette.black
 }
 const getWidth = (props: any) => {
   if (props.large) {
-    return StyleProps.inputSizes.large.width - 2
+    return ThemeProps.inputSizes.large.width - 2
   }
   if (props.width) {
     return props.width - 2
   }
-  return StyleProps.inputSizes.regular.width - 2
+  return ThemeProps.inputSizes.regular.width - 2
 }
 const borderColor = (props: any) => {
   if (props.highlight) {
-    return Palette.alert
+    return ThemePalette.alert
   }
   if (props.disabled) {
-    return Palette.grayscale[0]
+    return ThemePalette.grayscale[0]
   }
   if (props.primary) {
-    return Palette.primary
+    return ThemePalette.primary
   }
   if (props.secondary) {
-    return Palette.secondaryLight
+    return ThemePalette.secondaryLight
   }
   if (props.outline) {
-    return Palette.primary
+    return ThemePalette.primary
   }
-  return Palette.grayscale[3]
+  return ThemePalette.grayscale[3]
 }
 const backgroundHover = (props: any) => {
   if (props.disabled || props.embedded) {
     return ''
   }
   if (props.secondary) {
-    return Palette.secondaryLight
+    return ThemePalette.secondaryLight
   }
-  return Palette.primary
+  return ThemePalette.primary
 }
 
 const Wrapper = styled.div<any>`
@@ -118,12 +117,12 @@ const Wrapper = styled.div<any>`
   align-items: center;
   position: relative;
   width: ${(props: any) => getWidth(props)}px;
-  height: ${(props: any) => (props.large ? StyleProps.inputSizes.large.height - 2
-    : StyleProps.inputSizes.regular.height - 2)}px;
+  height: ${(props: any) => (props.large ? ThemeProps.inputSizes.large.height - 2
+    : ThemeProps.inputSizes.regular.height - 2)}px;
   border: 1px solid ${props => borderColor(props)};
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   cursor: ${(props: any) => (props.disabled ? 'default' : 'pointer')};
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   background: ${props => getBackgroundColor(props)};
   ${(props: any) => (props.embedded ? css`
     border: 0;
@@ -139,7 +138,7 @@ const Wrapper = styled.div<any>`
   &:hover ${Label} {
     color: ${(props: any) => (props.disabled ? '' : props.embedded ? '' : 'white')};
   }
-  ${(props: any) => (props.disabledLoading ? StyleProps.animations.disabledLoading : '')}
+  ${(props: any) => (props.disabledLoading ? ThemeProps.animations.disabledLoading : '')}
 `
 const Arrow = styled.div<any>`
   position: absolute;

src/components/ui/Dropdowns/DropdownFilter/DropdownFilter.tsx

@@ -19,7 +19,7 @@ import autobind from 'autobind-decorator'
 
 import SearchInput from '../../SearchInput/SearchInput'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 import filterImage from './images/filter'
 
@@ -43,7 +43,7 @@ const List = styled.div<any>`
   right: -7px;
   z-index: 9999;
   padding: 8px;
-  background: ${Palette.grayscale[1]};
+  background: ${ThemePalette.grayscale[1]};
   border-radius: 4px;
   border: ${border};
   box-shadow: 0 0 4px 0 rgba(32, 34, 52, 0.13);
@@ -54,7 +54,7 @@ const Tip = styled.div<any>`
   right: 8px;
   width: 10px;
   height: 10px;
-  background: ${Palette.grayscale[1]};
+  background: ${ThemePalette.grayscale[1]};
   border-top: ${border};
   border-left: ${border};
   border-bottom: 1px solid transparent;
@@ -147,7 +147,7 @@ class DropdownFilter extends React.Component<Props, State> {
         onClick={() => { this.handleButtonClick() }}
         dangerouslySetInnerHTML={{
           __html:
-            filterImage(this.props.searchValue ? Palette.primary : Palette.grayscale[5]),
+            filterImage(this.props.searchValue ? ThemePalette.primary : ThemePalette.grayscale[5]),
         }}
       />
     )

src/components/ui/Dropdowns/DropdownFilterGroup/DropdownFilterGroup.tsx

@@ -18,7 +18,7 @@ import styled from 'styled-components'
 
 import DropdownLink from '../DropdownLink/DropdownLink'
 
-import Palette from '../../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
 const Wrapper = styled.div<any>``
 const Dropdowns = styled.div<any>``
@@ -31,7 +31,7 @@ const DropdownLinkStyled = styled(DropdownLink)`
     content: '';
     width: 1px;
     height: 18px;
-    background: ${Palette.grayscale[4]};
+    background: ${ThemePalette.grayscale[4]};
     right: -16px;
     top: -1px;
   }