From 2bf88c58607ce5b180319fdffd436fa9ef306118 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 10 Mar 2021 11:04:14 +0100
Subject: [PATCH] Use theme via css vars (#4789)

* Extract global CSS vars (non-theme specific)

* Use theme via css vars

* All text colors

* Additional

* All vars (excluding name...)

* Additional

* linting

* css linting

* Update Card css
---
 packages/apps/public/iframe.html              |  1 -
 packages/apps/public/index.html               | 57 ++++++++++++++++++-
 packages/apps/src/Apps.tsx                    |  8 +--
 packages/apps/src/Content/index.tsx           |  7 +--
 packages/apps/src/Endpoints/Group.tsx         |  7 +--
 packages/apps/src/Endpoints/Network.tsx       |  7 +--
 packages/apps/src/Endpoints/index.tsx         |  7 +--
 packages/apps/src/Menu/Grouping.tsx           | 11 ++--
 packages/apps/src/Menu/index.tsx              | 11 ++--
 packages/apps/src/Root.tsx                    |  5 ++
 packages/apps/src/overlays/Base.tsx           |  7 +--
 packages/apps/src/themes.ts                   | 50 ----------------
 .../page-accounts/src/Sidebar/Balances.tsx    |  8 +--
 .../page-accounts/src/Sidebar/Sidebar.tsx     | 16 +++---
 packages/page-accounts/src/Vanity/Match.tsx   |  8 +--
 packages/page-accounts/src/modals/Create.tsx  |  7 +--
 packages/page-bounties/src/Bounty.tsx         |  2 +-
 packages/page-bounties/src/VotersColumn.tsx   |  4 +-
 packages/page-calendar/src/DayHour.tsx        | 11 ++--
 packages/page-calendar/src/Month.tsx          |  7 +--
 packages/page-calendar/src/UpcomingEvents.tsx |  7 +--
 packages/page-calendar/src/index.tsx          |  9 ++-
 packages/page-claims/src/Statement.tsx        |  7 +--
 packages/page-claims/src/index.tsx            |  6 +-
 .../page-contracts/src/shared/Message.tsx     |  7 +--
 .../src/shared/MessageSignature.tsx           | 11 ++--
 .../page-contracts/src/shared/Messages.tsx    |  7 +--
 .../page-explorer/src/BlockInfo/Extrinsic.tsx |  7 +--
 packages/page-explorer/src/Forks.tsx          |  7 +--
 packages/page-js/src/Output.tsx               |  7 +--
 packages/page-poll/src/index.tsx              |  9 ++-
 packages/page-staking/src/index.tsx           | 17 +++---
 .../react-components/src/AccountIndex.tsx     |  7 +--
 packages/react-components/src/AccountName.tsx |  9 ++-
 .../react-components/src/AddressSmall.tsx     |  5 +-
 packages/react-components/src/AvatarItem.tsx  | 13 ++---
 .../react-components/src/Button/Button.tsx    |  7 +--
 packages/react-components/src/Card.tsx        | 48 ++++++++--------
 packages/react-components/src/CardSummary.tsx | 11 ++--
 packages/react-components/src/Checkbox.tsx    | 10 ++--
 .../react-components/src/FilterOverlay.tsx    |  5 +-
 packages/react-components/src/HelpOverlay.tsx | 12 ++--
 .../src/IdentityIcon/RoboHash/index.tsx       |  8 +--
 .../src/IdentityIcon/index.tsx                | 20 +++----
 .../src/InputAddress/KeyPair.tsx              |  8 +--
 .../src/InputAddressMulti/index.tsx           |  8 +--
 packages/react-components/src/InputFile.tsx   | 10 ++--
 packages/react-components/src/Labelled.tsx    |  8 +--
 .../react-components/src/Modal/Columns.tsx    |  1 -
 .../react-components/src/PasswordStrength.tsx | 10 ++--
 packages/react-components/src/Progress.tsx    |  9 ++-
 packages/react-components/src/Sidebar.tsx     |  6 +-
 .../react-components/src/Status/index.tsx     |  7 +--
 packages/react-components/src/Table/Body.tsx  | 18 +++---
 packages/react-components/src/Table/Foot.tsx  | 14 ++---
 packages/react-components/src/Table/Head.tsx  | 20 +++----
 packages/react-components/src/Tabs/Tab.tsx    |  7 +--
 packages/react-components/src/Tabs/index.tsx  | 11 ++--
 packages/react-components/src/Tag.tsx         |  8 +--
 packages/react-components/src/TextArea.tsx    | 18 +++---
 packages/react-components/src/Toggle.tsx      | 12 ++--
 .../react-components/src/styles/components.ts |  9 +--
 packages/react-components/src/styles/index.ts | 24 ++++----
 .../react-components/src/styles/semantic.ts   | 53 ++++++++---------
 packages/react-components/src/types.ts        | 24 --------
 packages/react-params/src/Holder.tsx          | 10 ++--
 packages/react-query/src/FormatBalance.tsx    |  7 +--
 packages/react-signer/src/Transaction.tsx     |  7 +--
 68 files changed, 352 insertions(+), 454 deletions(-)
 delete mode 100644 packages/apps/public/iframe.html

diff --git a/packages/apps/public/iframe.html b/packages/apps/public/iframe.html
deleted file mode 100644
index f77efd85af..0000000000
--- a/packages/apps/public/iframe.html
+++ /dev/null
@@ -1 +0,0 @@
-<iframe src="https://polkadot.js.org/apps?rpc=wss://something-something.com" style="width:0;height:0;border:0; border:none;"></iframe>
diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index c9efd8fa30..5ffd498441 100644
--- a/packages/apps/public/index.html
+++ b/packages/apps/public/index.html
@@ -7,11 +7,62 @@
     <link rel="shortcut icon" href="favicon.ico">
     <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
     <script type="text/javascript" src="/env-config.js"></script>
+    <style>
+      :root {
+        --font-mono: 0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
+        --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        --font-weight-bold: 700;
+        --font-weight-light: 200;
+        --font-weight-normal: 400;
+        --width-full: 1750px;
+        --width-half: 875px;
+      }
+
+      [data-theme="dark"] {
+        --bg-input: #38393f;
+        --bg-input-error: #48393f;
+        --bg-inverse: rgba(78, 78, 78, 0.66);
+        --bg-menu: #26272c;
+        --bg-menu-hover: rgba(255, 255, 255, 0.05);
+        --bg-page: #26272c;
+        --bg-table: #3b3d3f;
+        --bg-tabs: #3b3d3f;
+        --bg-toggle: #58595f;
+        --border-table: #343536;
+        --border-tabs: #343536;
+        --color-checkbox: rgba(78, 78, 78, 0.66);
+        --color-error: rgba(255, 83, 83, 0.8);
+        --color-label: rgba(244, 242, 240, 0.45);
+        --color-summary: rgba(244, 242, 240, 0.75);
+        --color-table-foot: rgba(254, 240, 240, 0.66);
+        --color-table-head: rgba(254, 240, 240, 0.66);
+        --color-text: rgba(244, 242, 240, 0.9);
+      }
+
+      [data-theme="light"] {
+        --bg-input: #ffffff;
+        --bg-input-error: #fff6f6;
+        --bg-inverse: rgba(244, 242, 240, 0.91);
+        --bg-menu: #ffffff;
+        --bg-menu-hover: rgba(255, 255, 255, 0.5);
+        --bg-page: #f5f3f1;
+        --bg-table: #ffffff;
+        --bg-tabs: #ffffff;
+        --bg-toggle: #e4e5e6;
+        --border-table: #f1efed;
+        --border-tabs: #f1efed;
+        --color-checkbox: rgba(34, 36, 38, 0.15);
+        --color-error: rgba(139, 0, 0);
+        --color-label: rgba(78, 78, 78, 0.66);
+        --color-summary: rgba(0, 0, 0, 0.6);
+        --color-table-foot: rgba(78, 78, 78, 0.66);
+        --color-table-head: rgba(78, 78, 78, 0.66);
+        --color-text: #4e4e4e;
+      }
+    </style>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <div id="tooltips"></div>
     <script>
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 74b954fbb5..ea418449d1 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { BareProps as Props, ThemeDef, ThemeProps } from '@polkadot/react-components/types';
+import type { BareProps as Props, ThemeDef } from '@polkadot/react-components/types';
 
 import React, { useContext, useMemo } from 'react';
 import styled, { ThemeContext } from 'styled-components';
@@ -46,10 +46,10 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(Apps)(({ theme }: ThemeProps) => `
-  background: ${theme.bgPage};
+export default React.memo(styled(Apps)`
+  background: var(--bg-page);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-`));
+`);
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index ace3c2a3b4..9ebfb62295 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Route } from '@polkadot/apps-routing/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 
 import React, { Suspense, useContext, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -89,7 +88,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(Content)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Content)`
   flex-grow: 1;
   overflow: hidden auto;
   padding: 0 0 1rem 0;
@@ -101,10 +100,10 @@ export default React.memo(styled(Content)(({ theme }: ThemeProps) => `
   }
 
   & main > *:not(header):not(.hasOwnMaxWidth) {
-    max-width: ${theme.contentMaxWidth};
+    max-width: var(--width-full);
     margin-right: auto;
     margin-left: auto;
     width: 100%;
     padding: 0 1.5rem;
   }
-`));
+`);
diff --git a/packages/apps/src/Endpoints/Group.tsx b/packages/apps/src/Endpoints/Group.tsx
index b123394f46..e0766ba40b 100644
--- a/packages/apps/src/Endpoints/Group.tsx
+++ b/packages/apps/src/Endpoints/Group.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Group } from './types';
 
 import React, { useCallback } from 'react';
@@ -58,7 +57,7 @@ function GroupDisplay ({ affinities, apiUrl, children, className = '', index, is
   );
 }
 
-export default React.memo(styled(GroupDisplay)(({ theme }: ThemeProps) => `
+export default React.memo(styled(GroupDisplay)`
   .groupHeader {
     border-radius: 0.25rem;
     cursor: pointer;
@@ -68,7 +67,7 @@ export default React.memo(styled(GroupDisplay)(({ theme }: ThemeProps) => `
     text-transform: uppercase;
 
     &:hover {
-      background: ${theme.bgTable};
+      background: var(--bg-table);
     }
 
     .ui--Icon {
@@ -79,4 +78,4 @@ export default React.memo(styled(GroupDisplay)(({ theme }: ThemeProps) => `
   .groupNetworks {
     padding: 0.25rem 0 0.5rem 1rem;
   }
-`));
+`);
diff --git a/packages/apps/src/Endpoints/Network.tsx b/packages/apps/src/Endpoints/Network.tsx
index b05a9f1193..8b904f1694 100644
--- a/packages/apps/src/Endpoints/Network.tsx
+++ b/packages/apps/src/Endpoints/Network.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Network } from './types';
 
 import React, { useCallback, useMemo } from 'react';
@@ -67,7 +66,7 @@ function NetworkDisplay ({ affinity, apiUrl, className = '', setApiUrl, value: {
   );
 }
 
-export default React.memo(styled(NetworkDisplay)(({ theme }: ThemeProps) => `
+export default React.memo(styled(NetworkDisplay)`
   border-left: 0.25rem solid transparent;
   border-radius: 0.25rem;
   cursor: pointer;
@@ -77,7 +76,7 @@ export default React.memo(styled(NetworkDisplay)(({ theme }: ThemeProps) => `
 
   &.isSelected,
   &:hover {
-    background: ${theme.bgTable};
+    background: var(--bg-table);
   }
 
   .endpointSection {
@@ -94,4 +93,4 @@ export default React.memo(styled(NetworkDisplay)(({ theme }: ThemeProps) => `
       margin-top: -0.125rem;
     }
   }
-`));
+`);
diff --git a/packages/apps/src/Endpoints/index.tsx b/packages/apps/src/Endpoints/index.tsx
index 5bf4cc285b..fe63a275b2 100644
--- a/packages/apps/src/Endpoints/index.tsx
+++ b/packages/apps/src/Endpoints/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { LinkOption } from '@polkadot/apps-config/settings/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Group } from './types';
 
 // ok, this seems to be an eslint bug, this _is_ a package import
@@ -282,8 +281,8 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
   );
 }
 
-export default React.memo(styled(Endpoints)(({ theme }: ThemeProps) => `
-  color: ${theme.color};
+export default React.memo(styled(Endpoints)`
+  color: var(--color-text);
   padding-top: 3.5rem;
 
   .customButton {
@@ -301,4 +300,4 @@ export default React.memo(styled(Endpoints)(({ theme }: ThemeProps) => `
   .endpointCustomWrapper {
     position: relative;
   }
-`));
+`);
diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index 85338a0e54..0cc312d1e3 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Group } from './types';
 
 import React from 'react';
@@ -46,7 +45,7 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement<
   );
 }
 
-export default React.memo(styled(Grouping)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Grouping)`
   cursor: pointer;
   position: relative;
 
@@ -81,8 +80,8 @@ export default React.memo(styled(Grouping)(({ theme }: ThemeProps) => `
   &:hover {
     .groupHdr,
     .groupMenu li {
-      background: ${theme.bgMenu};
-      color: ${theme.color};
+      background: var(--bg-menu);
+      color: var(--color-text);
     }
 
     .groupHdr {
@@ -93,8 +92,8 @@ export default React.memo(styled(Grouping)(({ theme }: ThemeProps) => `
       display: block;
 
       > li:hover {
-        background: ${theme.bgMenuHover};
+        background: var(--bg-menu-hover);
       }
     }
   }
-`));
+`);
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index f982a024a9..f21829115e 100644
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@@ -4,7 +4,6 @@
 import type { TFunction } from 'i18next';
 import type { Route, Routes } from '@polkadot/apps-routing/types';
 import type { ApiProps } from '@polkadot/react-api/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { AccountId } from '@polkadot/types/interfaces';
 import type { Group, Groups, ItemRoute } from './types';
 
@@ -160,7 +159,7 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(Menu)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Menu)`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -171,7 +170,7 @@ export default React.memo(styled(Menu)(({ theme }: ThemeProps) => `
     background: #999 !important;
 
     .menuActive {
-      background: ${theme.bgPage};
+      background: var(--bg-page);
     }
 
     &:before {
@@ -190,10 +189,10 @@ export default React.memo(styled(Menu)(({ theme }: ThemeProps) => `
   }
 
   .menuActive {
-    background: ${theme.bgTabs};
+    background: var(--bg-tabs);
     border-bottom: none;
     border-radius: 0.25rem 0.25rem 0 0;
-    color: ${theme.color};
+    color: var(--color-text);
     padding: 1rem 1.5rem;
     margin: 0 1rem -1px;
     z-index: 1;
@@ -213,4 +212,4 @@ export default React.memo(styled(Menu)(({ theme }: ThemeProps) => `
       display: inline-block;
     }
   }
-`));
+`);
diff --git a/packages/apps/src/Root.tsx b/packages/apps/src/Root.tsx
index 784d95a86b..97e56a27d7 100644
--- a/packages/apps/src/Root.tsx
+++ b/packages/apps/src/Root.tsx
@@ -22,6 +22,11 @@ interface Props {
 }
 
 function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
+  const validTheme = uiTheme === 'dark' ? 'dark' : 'light';
+
+  document && document.documentElement &&
+    document.documentElement.setAttribute('data-theme', validTheme);
+
   return uiTheme === 'dark'
     ? darkTheme
     : lightTheme;
diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 1a8eaaac3e..dad9686b80 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
-import type { ThemeProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -47,8 +46,8 @@ function BaseOverlay ({ children, className = '', icon, type }: Props): React.Re
   );
 }
 
-export default React.memo(styled(BaseOverlay)(({ theme }: ThemeProps) => `
-  background: ${theme.bgMenu};
+export default React.memo(styled(BaseOverlay)`
+  background: var(--bg-menu);
   border: 1px solid transparent;
   border-radius: 0.25rem;
   border-left-width: 0.25rem;
@@ -114,4 +113,4 @@ export default React.memo(styled(BaseOverlay)(({ theme }: ThemeProps) => `
     right: 0em;
     top: 0.75rem;
   }
-`));
+`);
diff --git a/packages/apps/src/themes.ts b/packages/apps/src/themes.ts
index 82d16badae..1e7db81401 100644
--- a/packages/apps/src/themes.ts
+++ b/packages/apps/src/themes.ts
@@ -3,60 +3,10 @@
 
 import type { ThemeDef } from '@polkadot/react-components/types';
 
-// Fonts as found on https://newcss.net/
-const FONT = {
-  fontMono: '0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace',
-  fontSans: '1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  fontWeightBold: 700,
-  fontWeightLight: 200,
-  fontWeightMedium: 500,
-  fontWeightNormal: 400
-};
-
-const MAX_WIDTH = 1750;
-
 export const darkTheme: ThemeDef = {
-  ...FONT,
-  bgInput: '#38393f',
-  bgInputError: '#48393f',
-  bgInverse: 'rgba(78, 78, 78, 0.66)',
-  bgMenu: '#26272c',
-  bgMenuHover: 'rgba(255, 255, 255, 0.05)',
-  bgPage: '#26272c',
-  bgTable: '#3b3d3f',
-  bgTabs: '#3b3d3f',
-  bgToggle: '#58595f',
-  borderTable: '#343536',
-  borderTabs: '#343536',
-  color: 'rgba(244, 242, 240, 0.9)',
-  colorCheckbox: 'rgba(78, 78, 78, 0.66)',
-  colorError: 'rgba(255, 83, 83, 0.8)',
-  colorLabel: 'rgba(244, 242, 240, 0.45)',
-  colorSummary: 'rgba(244, 242, 240, 0.75)',
-  contentHalfWidth: `${MAX_WIDTH / 2}px`,
-  contentMaxWidth: `${MAX_WIDTH}px`,
   theme: 'dark'
 };
 
 export const lightTheme: ThemeDef = {
-  ...FONT,
-  bgInput: '#ffffff',
-  bgInputError: '#fff6f6',
-  bgInverse: 'rgba(244, 242, 240, 0.91)',
-  bgMenu: '#fff',
-  bgMenuHover: 'rgba(255, 255, 255, 0.5)',
-  bgPage: '#f5f3f1',
-  bgTable: '#fff',
-  bgTabs: '#fff',
-  bgToggle: '#e4e5e6',
-  borderTable: '#f1efed',
-  borderTabs: '#f1efed',
-  color: '#4e4e4e',
-  colorCheckbox: 'rgba(34, 36, 38, 0.15)',
-  colorError: 'rgba(139, 0, 0)',
-  colorLabel: 'rgba(78,78,78,0.66)',
-  colorSummary: 'rgba(0, 0, 0, 0.6)',
-  contentHalfWidth: `${MAX_WIDTH / 2}px`,
-  contentMaxWidth: `${MAX_WIDTH}px`,
   theme: 'light'
 };
diff --git a/packages/page-accounts/src/Sidebar/Balances.tsx b/packages/page-accounts/src/Sidebar/Balances.tsx
index 1600d3424f..f1bf9e884c 100644
--- a/packages/page-accounts/src/Sidebar/Balances.tsx
+++ b/packages/page-accounts/src/Sidebar/Balances.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -40,7 +38,7 @@ function Balances ({ address, className }: Props): React.ReactElement<Props> | n
   );
 }
 
-export default React.memo(styled(Balances)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Balances)`
   .balanceExpander {
     .column.column--expander {
       width: auto;
@@ -48,7 +46,7 @@ export default React.memo(styled(Balances)(({ theme }: ThemeProps) => `
       label {
         color: inherit;
         font-size: 0.93rem;
-        font-weight: ${theme.fontWeightNormal};
+        font-weight: var(--font-weight-normal);
       }
 
       .ui--Expander-content .ui--FormatBalance-value {
@@ -56,4 +54,4 @@ export default React.memo(styled(Balances)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx
index 6f204d67b3..d8e04e6e40 100644
--- a/packages/page-accounts/src/Sidebar/Sidebar.tsx
+++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -161,15 +159,15 @@ function FullSidebar ({ address, className = '', onClose, onUpdateName }: Props)
   );
 }
 
-export default React.memo(styled(FullSidebar)(({ theme }: ThemeProps) => `
+export default React.memo(styled(FullSidebar)`
   input {
     width: auto !important;
   }
 
   .ui--AddressMenu-header {
     align-items: center;
-    background: ${theme.bgTabs};
-    border-bottom: 1px solid ${theme.borderTable};
+    background: var(--bg-tabs);
+    border-bottom: 1px solid var(--border-table);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -178,7 +176,7 @@ export default React.memo(styled(FullSidebar)(({ theme }: ThemeProps) => `
   }
 
   .ui--AddressMenu-addr {
-    font: ${theme.fontMono};
+    font: var(--font-mono);
     margin: 0.75rem 0;
     text-align: center;
     word-break: break-all;
@@ -196,7 +194,7 @@ export default React.memo(styled(FullSidebar)(({ theme }: ThemeProps) => `
 
     .ui--AddressMenu-sectionHeader {
       display: inline-flex;
-      color: ${theme.color};
+      color: var(--color-text);
       margin-bottom: 0.4rem;
       width: 100%;
 
@@ -217,7 +215,7 @@ export default React.memo(styled(FullSidebar)(({ theme }: ThemeProps) => `
         width: 100%;
 
         .th {
-          font-weight: ${theme.fontWeightNormal};
+          font-weight: var(--font-weight-normal);
           text-align: right;
           flex-basis: 20%;
 
@@ -306,4 +304,4 @@ export default React.memo(styled(FullSidebar)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/page-accounts/src/Vanity/Match.tsx b/packages/page-accounts/src/Vanity/Match.tsx
index 888ce218e4..223c2c4c61 100644
--- a/packages/page-accounts/src/Vanity/Match.tsx
+++ b/packages/page-accounts/src/Vanity/Match.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -71,7 +69,7 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo
   );
 }
 
-export default React.memo(styled(Match)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Match)`
   text-align: center;
 
   &:hover {
@@ -99,7 +97,7 @@ export default React.memo(styled(Match)(({ theme }: ThemeProps) => `
 
   .vanity--Match-item {
     display: inline-block;
-    font: ${theme.fontMono};
+    font: var(--font-mono);
     margin: 0 auto;
     padding: 0.5em;
     position: relative;
@@ -109,4 +107,4 @@ export default React.memo(styled(Match)(({ theme }: ThemeProps) => `
     opacity: 0.45;
     padding: 0 1rem;
   }
-`));
+`);
diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx
index ba2d6096a4..ae178870d1 100644
--- a/packages/page-accounts/src/modals/Create.tsx
+++ b/packages/page-accounts/src/modals/Create.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { CreateResult } from '@polkadot/ui-keyring/types';
 import type { ModalProps } from '../types';
 
@@ -524,7 +523,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
   );
 }
 
-export default React.memo(styled(Create)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Create)`
   .accounts--Creator-advanced {
     margin-top: 1rem;
     overflow: visible;
@@ -552,8 +551,8 @@ export default React.memo(styled(Create)(({ theme }: ThemeProps) => `
       margin: 0.8rem 0;
 
       > label {
-          font-weight: ${theme.fontWeightNormal};
+        font-weight: var(--font-weight-normal);
       }
     }
   }
-`));
+`);
diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx
index 22f774b386..a389914518 100644
--- a/packages/page-bounties/src/Bounty.tsx
+++ b/packages/page-bounties/src/Bounty.tsx
@@ -247,7 +247,7 @@ export default React.memo(styled(Bounty)(({ theme }: ThemeProps) => `
       justify-content: center;
       width: 1.7rem;
       height: 1.7rem;
-      border: 1px solid ${theme.borderTable};
+      border: 1px solid var(--border-table);
       border-radius: 4px;
       cursor: pointer;
     }
diff --git a/packages/page-bounties/src/VotersColumn.tsx b/packages/page-bounties/src/VotersColumn.tsx
index 4501f4e53a..73ef3068cc 100644
--- a/packages/page-bounties/src/VotersColumn.tsx
+++ b/packages/page-bounties/src/VotersColumn.tsx
@@ -60,7 +60,7 @@ function VotersColumn ({ className, option, proposals, status }: Props): React.R
 
 export default React.memo(styled(VotersColumn)(({ theme }: ThemeProps) => `
   width: 50%;
-  
+
   .vote-numbers {
     display: flex;
     align-items: center;
@@ -78,6 +78,6 @@ export default React.memo(styled(VotersColumn)(({ theme }: ThemeProps) => `
     font-size: 0.7rem;
     line-height: 0.85rem;
     text-transform: uppercase;
-    color: ${theme.colorLabel};
+    color: var(--color-label);
   }
 `));
diff --git a/packages/page-calendar/src/DayHour.tsx b/packages/page-calendar/src/DayHour.tsx
index e2ffdb9682..bb5dc0034d 100644
--- a/packages/page-calendar/src/DayHour.tsx
+++ b/packages/page-calendar/src/DayHour.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-calendar authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { EntryInfoTyped } from './types';
 
 import React, { useMemo } from 'react';
@@ -54,14 +53,14 @@ function DayHour ({ className = '', date, hour, index, minutes, scheduled }: Pro
   );
 }
 
-export default React.memo(styled(DayHour)(({ theme }: ThemeProps) => `
+export default React.memo(styled(DayHour)`
   align-items: center;
   display: flex;
   position: relative;
   z-index: 2;
 
   &:nth-child(odd) {
-    background: ${theme.bgTable};
+    background: var(--bg-table);
   }
 
   &.isPast {
@@ -76,7 +75,7 @@ export default React.memo(styled(DayHour)(({ theme }: ThemeProps) => `
   .hourLabel {
     flex: 0;
     font-size: 0.85rem;
-    font-weight: ${theme.fontWeightNormal};
+    font-weight: var(--font-weight-normal);
     line-height: 1;
     min-width: 5.5rem;
     opacity: 0.5;
@@ -88,8 +87,8 @@ export default React.memo(styled(DayHour)(({ theme }: ThemeProps) => `
 
   &.hasItems .hourLabel {
     font-size: 1.1rem;
-    font-weight: ${theme.fontWeightNormal};
+    font-weight: var(--font-weight-normal);
     opacity: 1;
     padding: 0.7rem 1rem;
   }
-`));
+`);
diff --git a/packages/page-calendar/src/Month.tsx b/packages/page-calendar/src/Month.tsx
index 971f8e792e..1eb061947b 100644
--- a/packages/page-calendar/src/Month.tsx
+++ b/packages/page-calendar/src/Month.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-calendar authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { DateState, EntryInfo } from './types';
 
 import React, { useMemo, useRef } from 'react';
@@ -83,7 +82,7 @@ function Month ({ className, hasNextMonth, lastDay, now, scheduled, setDay, setN
   );
 }
 
-export default React.memo(styled(Month)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Month)`
   flex: 0;
   max-width: max-content;
 
@@ -111,7 +110,7 @@ export default React.memo(styled(Month)(({ theme }: ThemeProps) => `
     .dayOfWeek {
       > * {
         font-size: 0.7em;
-        font-weight: ${theme.fontWeightNormal};
+        font-weight: var(--font-weight-normal);
         letter-spacing: 0.1em;
         text-align: center;
         text-transform: uppercase;
@@ -125,4 +124,4 @@ export default React.memo(styled(Month)(({ theme }: ThemeProps) => `
       justify-content: space-between;
     }
   }
-`));
+`);
diff --git a/packages/page-calendar/src/UpcomingEvents.tsx b/packages/page-calendar/src/UpcomingEvents.tsx
index 12a1a2b78f..587ba6955f 100644
--- a/packages/page-calendar/src/UpcomingEvents.tsx
+++ b/packages/page-calendar/src/UpcomingEvents.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-calendar authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { EntryInfo } from './types';
 
 import React, { useCallback, useMemo } from 'react';
@@ -55,7 +54,7 @@ function UpcomingEvents ({ className, scheduled, setView }: Props): React.ReactE
   );
 }
 
-export default React.memo(styled(UpcomingEvents)(({ theme }: ThemeProps) => `
+export default React.memo(styled(UpcomingEvents)`
   flex: 0;
   max-width: max-content;
 
@@ -63,11 +62,11 @@ export default React.memo(styled(UpcomingEvents)(({ theme }: ThemeProps) => `
     padding: 10px 0;
     font-size: 13px;
     &:nth-child(odd) {
-      background: ${theme.bgTable};
+      background: var(--bg-table);
     }
   }
 
   .allEventsWrapper {
     padding-inline-start: 10px;
   }
-`));
+`);
diff --git a/packages/page-calendar/src/index.tsx b/packages/page-calendar/src/index.tsx
index 543c8beffb..46439e5b0c 100644
--- a/packages/page-calendar/src/index.tsx
+++ b/packages/page-calendar/src/index.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-calendar authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { DateState } from './types';
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -161,7 +160,7 @@ function CalendarApp ({ basePath, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default React.memo(styled(CalendarApp)(({ theme }: ThemeProps) => `
+export default React.memo(styled(CalendarApp)`
   .calendarFlex {
     align-items: flex-start;
     display: flex;
@@ -177,8 +176,8 @@ export default React.memo(styled(CalendarApp)(({ theme }: ThemeProps) => `
     }
 
     > div {
-      background-color: ${theme.bgTable};
-      border: 1px solid ${theme.borderTable};
+      background-color: var(--bg-table);
+      border: 1px solid var(--border-table);
       border-radius: 0.25rem;
 
       &+div {
@@ -205,4 +204,4 @@ export default React.memo(styled(CalendarApp)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/page-claims/src/Statement.tsx b/packages/page-claims/src/Statement.tsx
index 222e513a95..95419b4ba7 100644
--- a/packages/page-claims/src/Statement.tsx
+++ b/packages/page-claims/src/Statement.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-claims authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { StatementKind } from '@polkadot/types/interfaces';
 
 import React from 'react';
@@ -57,7 +56,7 @@ function Statement ({ className, kind, systemChain }: Props): React.ReactElement
   );
 }
 
-export default React.memo(styled(Statement)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Statement)`
   .statement{
     border: 1px solid #c2c2c2;
     background: #f2f2f2;
@@ -68,7 +67,7 @@ export default React.memo(styled(Statement)(({ theme }: ThemeProps) => `
     white-space: normal;
 
     p {
-      color: ${theme.color} !important;
+      color: var(--color-text) !important;
     }
 
     iframe {
@@ -81,4 +80,4 @@ export default React.memo(styled(Statement)(({ theme }: ThemeProps) => `
   .statementUrl{
     margin-left: 0.3rem
   }
-`));
+`);
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index ae19647b57..c15ef454f7 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-claims authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AppProps as Props, ThemeProps } from '@polkadot/react-components/types';
+import type { AppProps as Props } from '@polkadot/react-components/types';
 import type { Option } from '@polkadot/types';
 import type { EcdsaSignature, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
@@ -37,7 +37,7 @@ const PRECLAIMS_LOADING = 'PRECLAIMS_LOADING';
 // FIXME no embedded components (hossible to tweak)
 const Payload = styled.pre`
   cursor: copy;
-  font: ${({ theme }: ThemeProps) => theme.fontMono};
+  font: var(--font-mono);
   border: 1px dashed #c2c2c2;
   background: #f2f2f2;
   padding: 1rem;
@@ -48,7 +48,7 @@ const Payload = styled.pre`
 `;
 
 const Signature = styled.textarea`
-  font: ${({ theme }: ThemeProps) => theme.fontMono};
+  font: var(--font-mono);
   padding: 1rem;
   border: 1px solid rgba(34, 36, 38, 0.15);
   border-radius: 0.25rem;
diff --git a/packages/page-contracts/src/shared/Message.tsx b/packages/page-contracts/src/shared/Message.tsx
index bc1a8ea5b9..b32ff9461b 100644
--- a/packages/page-contracts/src/shared/Message.tsx
+++ b/packages/page-contracts/src/shared/Message.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AbiConstructor, AbiMessage, ContractCallOutcome } from '@polkadot/api-contract/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
@@ -101,7 +100,7 @@ function Message ({ className = '', index, lastResult, message, onSelect }: Prop
   );
 }
 
-export default React.memo(styled(Message)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Message)`
   align-items: center;
   border-radius: 0.25rem;
   display: flex;
@@ -119,7 +118,7 @@ export default React.memo(styled(Message)(({ theme }: ThemeProps) => `
 
     .docs {
       font-size: 0.9rem;
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
     }
   }
 
@@ -130,4 +129,4 @@ export default React.memo(styled(Message)(({ theme }: ThemeProps) => `
   &+& {
     margin-top: 0.5rem;
   }
-`));
+`);
diff --git a/packages/page-contracts/src/shared/MessageSignature.tsx b/packages/page-contracts/src/shared/MessageSignature.tsx
index 04f1f6635c..689c922260 100644
--- a/packages/page-contracts/src/shared/MessageSignature.tsx
+++ b/packages/page-contracts/src/shared/MessageSignature.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AbiMessage } from '@polkadot/api-contract/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -78,9 +77,9 @@ function MessageSignature ({ className, message: { args, identifier, isConstruct
   );
 }
 
-export default React.memo(styled(MessageSignature)(({ theme }: ThemeProps) => `
-  font: ${theme.fontMono};
-  font-weight: ${theme.fontWeightNormal};
+export default React.memo(styled(MessageSignature)`
+  font: var(--font-mono);
+  font-weight: var(--font-weight-normal);
   flex-grow: 1;
 
   .ui--MessageSignature-mutates {
@@ -91,7 +90,7 @@ export default React.memo(styled(MessageSignature)(({ theme }: ThemeProps) => `
 
   .ui--MessageSignature-name {
     color: #2f8ddb;
-    font-weight: ${theme.fontWeightNormal};
+    font-weight: var(--font-weight-normal);
   }
 
   .ui--MessageSignature-type {
@@ -101,4 +100,4 @@ export default React.memo(styled(MessageSignature)(({ theme }: ThemeProps) => `
   .ui--MessageSignature-returnType {
     color: #ff8600;
   }
-`));
+`);
diff --git a/packages/page-contracts/src/shared/Messages.tsx b/packages/page-contracts/src/shared/Messages.tsx
index bb3df7e832..ddf9668253 100644
--- a/packages/page-contracts/src/shared/Messages.tsx
+++ b/packages/page-contracts/src/shared/Messages.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AbiMessage, ContractCallOutcome } from '@polkadot/api-contract/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Option } from '@polkadot/types';
 import type { ContractInfo } from '@polkadot/types/interfaces';
 
@@ -120,15 +119,15 @@ function Messages ({ className = '', contract, contractAbi: { constructors, mess
   );
 }
 
-export default React.memo(styled(Messages)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Messages)`
   padding-bottom: 0.75rem !important;
 
   &.isLabelled {
-    background: ${theme.bgInput};
+    background: var(--bg-input);
     box-sizing: border-box;
     border: 1px solid rgba(34,36,38,.15);
     border-radius: .28571429rem;
     padding: 1rem 1rem 0.5rem;
     width: 100%;
   }
-`));
+`);
diff --git a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
index d1b5578f27..59ab3d1fb7 100644
--- a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-explorer authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { KeyedEvent } from '@polkadot/react-query/types';
 import type { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
 
@@ -122,7 +121,7 @@ function ExtrinsicDisplay ({ blockNumber, className = '', events, index, value }
   );
 }
 
-export default React.memo(styled(ExtrinsicDisplay)(({ theme }: ThemeProps) => `
+export default React.memo(styled(ExtrinsicDisplay)`
   .explorer--BlockByHash-event+.explorer--BlockByHash-event {
     margin-top: 0.75rem;
   }
@@ -137,6 +136,6 @@ export default React.memo(styled(ExtrinsicDisplay)(({ theme }: ThemeProps) => `
 
   .explorer--BlockByHash-unsigned {
     opacity: 0.6;
-    font-weight: ${theme.fontWeightNormal};
+    font-weight: var(--font-weight-normal);
   }
-`));
+`);
diff --git a/packages/page-explorer/src/Forks.tsx b/packages/page-explorer/src/Forks.tsx
index 9038dd1a35..fdf1cae22c 100644
--- a/packages/page-explorer/src/Forks.tsx
+++ b/packages/page-explorer/src/Forks.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiProps } from '@polkadot/react-api/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Header } from '@polkadot/types/interfaces';
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -392,13 +391,13 @@ function Forks ({ className }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default React.memo(styled(Forks)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Forks)`
   margin-bottom: 1.5rem;
 
   table {
     border-collapse: separate;
     border-spacing: 0.25rem;
-    font: ${theme.fontMono};
+    font: var(--font-mono);
 
     td {
       padding: 0.25rem 0.5rem;
@@ -461,4 +460,4 @@ export default React.memo(styled(Forks)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/page-js/src/Output.tsx b/packages/page-js/src/Output.tsx
index a3018238c8..836eace287 100644
--- a/packages/page-js/src/Output.tsx
+++ b/packages/page-js/src/Output.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-js authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Log } from './types';
 
 import React from 'react';
@@ -55,13 +54,13 @@ function Output ({ children, className = '', logs }: Props): React.ReactElement<
   );
 }
 
-export default React.memo(styled(Output)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Output)`
   background-color: #4e4e4e;
   color: #ffffff;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  font: ${theme.fontMono};
+  font: var(--font-mono);
   font-variant-ligatures: common-ligatures;
   line-height: 18px;
   padding: 50px 10px 10px;
@@ -92,4 +91,4 @@ export default React.memo(styled(Output)(({ theme }: ThemeProps) => `
       color: #f88;
     }
   }
-`));
+`);
diff --git a/packages/page-poll/src/index.tsx b/packages/page-poll/src/index.tsx
index d43bb2e26a..cb241dbab3 100644
--- a/packages/page-poll/src/index.tsx
+++ b/packages/page-poll/src/index.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-poll authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Approvals, Balance, BlockNumber } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
 
@@ -201,7 +200,7 @@ function PollApp ({ basePath, className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(PollApp)(({ theme }: ThemeProps) => `
+export default React.memo(styled(PollApp)`
   .pollActions {
     opacity: 0.75;
   }
@@ -256,7 +255,7 @@ export default React.memo(styled(PollApp)(({ theme }: ThemeProps) => `
 
     .optionName {
       font-size: 1.2rem;
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
       line-height: 1;
       margin-bottom: 0.75rem;
     }
@@ -286,7 +285,7 @@ export default React.memo(styled(PollApp)(({ theme }: ThemeProps) => `
 
     .ui--FormatBalance {
       font-size: 1.2rem;
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
       line-height: 1;
     }
 
@@ -294,4 +293,4 @@ export default React.memo(styled(PollApp)(({ theme }: ThemeProps) => `
       margin: 0.75rem;
     }
   }
-`));
+`);
diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx
index a3b9bbd06c..9f47122ddd 100644
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@@ -206,20 +206,17 @@ export default React.memo(styled(StakingApp)(({ theme }: ThemeProps) => `
 
   .ui--Expander.stakeOver {
     .ui--Expander-summary {
-      color: ${theme.colorError};
+      color: var(--color-error);
 
     ${theme.theme === 'dark'
-    ? `
-        font-weight: bold;
-          .ui--FormatBalance-value {
+    ? `font-weight: bold;
+      .ui--FormatBalance-value {
 
-            > .ui--FormatBalance-postfix {
-              opacity: 1;
-            }
-          }
-    `
+        > .ui--FormatBalance-postfix {
+          opacity: 1;
+        }
+      }`
     : ''};
-
     }
   }
 `));
diff --git a/packages/react-components/src/AccountIndex.tsx b/packages/react-components/src/AccountIndex.tsx
index b89d86cb53..244c2fe81c 100644
--- a/packages/react-components/src/AccountIndex.tsx
+++ b/packages/react-components/src/AccountIndex.tsx
@@ -3,7 +3,6 @@
 
 import type { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import type { AccountId, Address } from '@polkadot/types/interfaces';
-import type { ThemeProps } from './types';
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -44,8 +43,8 @@ function AccountIndex ({ children, className = '', defaultValue, label, value }:
   );
 }
 
-export default React.memo(styled(AccountIndex)(({ theme }: ThemeProps) => `
+export default React.memo(styled(AccountIndex)`
   .account-index {
-    font: ${theme.fontMono};
+    font: var(--font-mono);
   }
-`));
+`);
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index f0e7a0d183..9ffa4a7b4f 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -4,7 +4,6 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import type { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types';
 import type { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import type { ThemeProps } from './types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -183,7 +182,7 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o
   );
 }
 
-export default React.memo(styled(AccountName)(({ theme }: ThemeProps) => `
+export default React.memo(styled(AccountName)`
   align-items: center;
   border: 1px dotted transparent;
   display: inline-flex;
@@ -203,7 +202,7 @@ export default React.memo(styled(AccountName)(({ theme }: ThemeProps) => `
     .name {
       align-items: center;
       display: inline-flex;
-      font-weight: ${theme.fontWeightNormal} !important;
+      font-weight: var(--font-weight-normal) !important;
       filter: grayscale(100%);
       line-height: 1;
       opacity: 0.6;
@@ -215,7 +214,7 @@ export default React.memo(styled(AccountName)(({ theme }: ThemeProps) => `
       }
 
       &.isAddress {
-        font: ${theme.fontMono};
+        font: var(--font-mono);
         text-transform: none;
       }
 
@@ -235,4 +234,4 @@ export default React.memo(styled(AccountName)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx
index 8c350dd4f9..9f74d10e8a 100644
--- a/packages/react-components/src/AddressSmall.tsx
+++ b/packages/react-components/src/AddressSmall.tsx
@@ -42,12 +42,9 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove
 export default React.memo(styled(AddressSmall)`
   white-space: nowrap;
 
-  .ui--IdentityIcon{
-    vertical-align: middle;
-  }
-
   .ui--IdentityIcon {
     margin-right: 0.75rem;
+    vertical-align: middle;
   }
 
   .ui--AccountName {
diff --git a/packages/react-components/src/AvatarItem.tsx b/packages/react-components/src/AvatarItem.tsx
index 11bfb7b8ac..06134cc869 100644
--- a/packages/react-components/src/AvatarItem.tsx
+++ b/packages/react-components/src/AvatarItem.tsx
@@ -1,8 +1,6 @@
-// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -35,7 +33,7 @@ function AvatarItem ({ children, className = '', icon, isBig, subtitle, title }:
   );
 }
 
-export default React.memo(styled(AvatarItem)(({ theme }: ThemeProps) => `
+export default React.memo(styled(AvatarItem)`
   & {
     display: flex;
     align-items: center;
@@ -59,16 +57,13 @@ export default React.memo(styled(AvatarItem)(({ theme }: ThemeProps) => `
         line-height: 2.4rem;
         margin-right: 0 !important;
       }
-
-      > img {
-      }
     }
 
     .ui--AvatarItem-details {
       flex: 1;
 
       .ui--AvatarItem-title {
-        font-weight: ${theme.fontWeightNormal};
+        font-weight: var(--font-weight-normal);
         font-size: 1rem;
       }
 
@@ -98,4 +93,4 @@ export default React.memo(styled(AvatarItem)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx
index f7011382b3..9d28a333f7 100644
--- a/packages/react-components/src/Button/Button.tsx
+++ b/packages/react-components/src/Button/Button.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
 import type { ButtonProps } from './types';
 
 import React, { useCallback } from 'react';
@@ -38,7 +37,7 @@ function Button ({ children, className = '', dataTestId = '', icon, isBasic, isB
 
 const ICON_PADDING = 0.5;
 
-export default React.memo(styled(Button)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Button)`
   background: transparent;
   border: none;
   color: inherit;
@@ -75,7 +74,7 @@ export default React.memo(styled(Button)(({ theme }: ThemeProps) => `
   }
 
   &.isBasic {
-    background: ${theme.bgTable};
+    background: var(--bg-table);
   }
 
   &.isCircular {
@@ -133,4 +132,4 @@ export default React.memo(styled(Button)(({ theme }: ThemeProps) => `
   &.isDisabled {
     color: #bcbbba;
   }
-`));
+`);
diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx
index f5ef386731..354a082fa9 100644
--- a/packages/react-components/src/Card.tsx
+++ b/packages/react-components/src/Card.tsx
@@ -30,7 +30,30 @@ export default React.memo(styled(Card)`
     opacity: 0.42;
   }
 
+  i.help.circle.icon,
+  .ui.button.mini,
+  .ui.button.tiny,
+  .addTags {
+    visibility: hidden;
+  }
+
+  .ui--AddressSummary-buttons {
+    text-align: right;
+    margin-bottom: 2em;
+
+    button {
+      margin-left: 0.2em;
+    }
+  }
+
   &:hover {
+    i.help.circle.icon,
+    .ui.button.mini,
+    .ui.button.tiny,
+    .addTags {
+      visibility: visible;
+    }
+
     label {
       opacity: 1;
     }
@@ -56,29 +79,4 @@ export default React.memo(styled(Card)`
   &.withBottomMargin {
     margin-bottom: 1.5rem;
   }
-
-  i.help.circle.icon,
-  .ui.button.mini,
-  .ui.button.tiny,
-  .addTags {
-    visibility: hidden;
-  }
-
-  &:hover {
-    i.help.circle.icon,
-    .ui.button.mini,
-    .ui.button.tiny,
-    .addTags {
-      visibility: visible;
-    }
-  }
-
-  .ui--AddressSummary-buttons {
-    text-align: right;
-    margin-bottom: 2em;
-
-    button {
-      margin-left: 0.2em;
-    }
-  }
 `);
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index a6e99bff60..971135c9c3 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { UInt } from '@polkadot/types';
-import type { ThemeProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -94,12 +93,12 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
   );
 }
 
-export default React.memo(styled(CardSummary)(({ theme }: ThemeProps) => `
+export default React.memo(styled(CardSummary)`
   align-items: center;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
-  color: ${theme.colorSummary};
+  color: var(--color-summary);
   display: flex;
   flex: 0 1 auto;
   flex-flow: row wrap;
@@ -116,7 +115,7 @@ export default React.memo(styled(CardSummary)(({ theme }: ThemeProps) => `
 
   > .ui--Labelled {
     font-size: 1.75rem;
-    font-weight: ${theme.fontWeightLight};
+    font-weight: var(--font-weight-light);
     position: relative;
     line-height: 1;
     text-align: right;
@@ -139,7 +138,7 @@ export default React.memo(styled(CardSummary)(({ theme }: ThemeProps) => `
 
     .isSecondary {
       font-size: 1rem;
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
 
       .timer {
         min-width: 8rem;
@@ -155,4 +154,4 @@ export default React.memo(styled(CardSummary)(({ theme }: ThemeProps) => `
       font-size: 1.4rem;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Checkbox.tsx b/packages/react-components/src/Checkbox.tsx
index 230fafdc7b..fe5598c7eb 100644
--- a/packages/react-components/src/Checkbox.tsx
+++ b/packages/react-components/src/Checkbox.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -38,7 +36,7 @@ function Checkbox ({ className = '', isDisabled, label, onChange, value }: Props
   );
 }
 
-export default React.memo(styled(Checkbox)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Checkbox)`
   display: inline-block;
   cursor: pointer;
 
@@ -51,7 +49,7 @@ export default React.memo(styled(Checkbox)(({ theme }: ThemeProps) => `
   }
 
   > label {
-    color: ${theme.color};
+    color: var(--color-text);
     display: inline-block;
     margin: 0 0.5rem;
     opacity: 1;
@@ -65,7 +63,7 @@ export default React.memo(styled(Checkbox)(({ theme }: ThemeProps) => `
   }
 
   .ui--Icon {
-    border: 1px solid ${theme.colorCheckbox};
+    border: 1px solid var(--color-checkbox);
     border-radius: 0.125rem;
   }
-`));
+`);
diff --git a/packages/react-components/src/FilterOverlay.tsx b/packages/react-components/src/FilterOverlay.tsx
index d2ad262a68..78ef26ad02 100644
--- a/packages/react-components/src/FilterOverlay.tsx
+++ b/packages/react-components/src/FilterOverlay.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import media from './media';
-import { ThemeProps } from './types';
 
 interface Props {
   children: React.ReactNode;
@@ -26,7 +25,7 @@ export default React.memo(styled(FilterOverlay)`
   .ui--Labelled label {
     display: none;
   }
-  right: calc(50% - ${({ theme }: ThemeProps) => theme.contentHalfWidth} + 1.5rem);
+  right: calc(50% - var(--width-half) + 1.5rem);
 
   ${media.DESKTOP`
     display: flex;
@@ -48,7 +47,7 @@ export default React.memo(styled(FilterOverlay)`
 
   `}
 
-  @media (max-width: ${({ theme }: ThemeProps) => theme.contentMaxWidth}) {
+  @media (max-width: var(--width-full)) {
     right: 1.5rem;
   }
 `);
diff --git a/packages/react-components/src/HelpOverlay.tsx b/packages/react-components/src/HelpOverlay.tsx
index f7f0319ea9..9587ad2967 100644
--- a/packages/react-components/src/HelpOverlay.tsx
+++ b/packages/react-components/src/HelpOverlay.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React from 'react';
 import ReactMd from 'react-markdown';
 import styled from 'styled-components';
@@ -44,9 +42,9 @@ function HelpOverlay ({ className = '', md }: Props): React.ReactElement<Props>
   );
 }
 
-export default React.memo(styled(HelpOverlay)(({ theme }: ThemeProps) => `
+export default React.memo(styled(HelpOverlay)`
   .help-button {
-    color: ${theme.color};
+    color: var(--color-text);
     cursor: pointer;
     font-size: 2rem;
     padding: 0.65rem 1.5rem 0 0;
@@ -59,7 +57,7 @@ export default React.memo(styled(HelpOverlay)(({ theme }: ThemeProps) => `
   }
 
   .help-slideout {
-    background: ${theme.bgPage};
+    background: var(--bg-page);
     box-shadow: -6px 0px 20px 0px rgba(0, 0, 0, 0.3);
     bottom: 0;
     max-width: 50rem;
@@ -69,7 +67,7 @@ export default React.memo(styled(HelpOverlay)(({ theme }: ThemeProps) => `
     top: 0;
     transition-duration: .5s;
     transition-property: all;
-    z-index: 225; // 5 more than menubar
+    z-index: 225; /* 5 more than menubar */
 
     .help-button {
       text-align: right;
@@ -83,4 +81,4 @@ export default React.memo(styled(HelpOverlay)(({ theme }: ThemeProps) => `
       right: 0;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/IdentityIcon/RoboHash/index.tsx b/packages/react-components/src/IdentityIcon/RoboHash/index.tsx
index f6f2c14283..ea17327a05 100644
--- a/packages/react-components/src/IdentityIcon/RoboHash/index.tsx
+++ b/packages/react-components/src/IdentityIcon/RoboHash/index.tsx
@@ -10,8 +10,6 @@
 // The Cats/"set4" were created by David Revoy, used under CC-BY-4.0 https://www.peppercarrot.com/en/article391/cat-avatar-generator
 // The avatars used in "set5" were created by Pablo Stanley, for https://avataaars.com/ They are "Free for personal and commercial use. 😇"
 
-import type { ThemeProps } from '../../types';
-
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -87,8 +85,8 @@ function RoboHash ({ className, publicKey, size }: Props): React.ReactElement<Pr
   );
 }
 
-export default React.memo(styled(RoboHash)(({ theme }: ThemeProps) => `
-  background: ${theme.bgPage};
+export default React.memo(styled(RoboHash)`
+  background: var(--bg-page);
   border-radius: 50%;
   position: relative;
   overflow: hidden;
@@ -104,4 +102,4 @@ export default React.memo(styled(RoboHash)(({ theme }: ThemeProps) => `
       opacity: 0.35;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/IdentityIcon/index.tsx b/packages/react-components/src/IdentityIcon/index.tsx
index df26703da0..d57b8715ab 100644
--- a/packages/react-components/src/IdentityIcon/index.tsx
+++ b/packages/react-components/src/IdentityIcon/index.tsx
@@ -66,18 +66,14 @@ function IdentityIcon ({ className = '', prefix, size = 24, theme, value }: Prop
 }
 
 export default React.memo(styled(IdentityIcon)(({ theme }: ThemeProps) => `
-
-    ${theme.theme === 'dark'
-    ? `
-        circle:first-child {
-            fill: #282829;
-        }
-    `
+  ${theme.theme === 'dark'
+    ? `circle:first-child {
+      fill: #282829;
+    }`
     : ''}
 
-    border: 1px solid ${theme.theme === 'dark' ? 'transparent' : '#ddd'};
-    border-radius: 50%;
-    display: inline-block;
-    overflow: hidden;
-
+  border: 1px solid ${theme.theme === 'dark' ? 'transparent' : '#ddd'};
+  border-radius: 50%;
+  display: inline-block;
+  overflow: hidden;
 `));
diff --git a/packages/react-components/src/InputAddress/KeyPair.tsx b/packages/react-components/src/InputAddress/KeyPair.tsx
index 1a1ca3dd33..84859ac9f9 100644
--- a/packages/react-components/src/InputAddress/KeyPair.tsx
+++ b/packages/react-components/src/InputAddress/KeyPair.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -34,7 +32,7 @@ function KeyPair ({ address, className = '' }: Props): React.ReactElement<Props>
   );
 }
 
-export default React.memo(styled(KeyPair)(({ theme }: ThemeProps) => `
+export default React.memo(styled(KeyPair)`
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -44,7 +42,7 @@ export default React.memo(styled(KeyPair)(({ theme }: ThemeProps) => `
   > .address {
     display: inline-block;
     flex: 1;
-    font: ${theme.fontMono};
+    font: var(--font-mono);
     margin-left: 1rem;
     opacity: 0.5;
     overflow: hidden;
@@ -69,4 +67,4 @@ export default React.memo(styled(KeyPair)(({ theme }: ThemeProps) => `
       text-transform: uppercase;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/InputAddressMulti/index.tsx b/packages/react-components/src/InputAddressMulti/index.tsx
index 8d90753698..51ecb69303 100644
--- a/packages/react-components/src/InputAddressMulti/index.tsx
+++ b/packages/react-components/src/InputAddressMulti/index.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
-
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
@@ -110,7 +108,7 @@ function InputAddressMulti ({ available, availableLabel, className = '', default
   );
 }
 
-export default React.memo(styled(InputAddressMulti)(({ theme }: ThemeProps) => `
+export default React.memo(styled(InputAddressMulti)`
   border-top-width: 0px;
   margin-left: 2rem;
   width: calc(100% - 2rem);
@@ -138,7 +136,7 @@ export default React.memo(styled(InputAddressMulti)(({ theme }: ThemeProps) => `
 
       .ui--InputAddressMulti-items {
         padding: 0.5rem 0;
-        background: ${theme.bgInput};
+        background: var(--bg-input);
         border: 1px solid rgba(34,36,38,0.15);
         border-radius: 0.286rem 0.286rem;
         flex: 1;
@@ -164,4 +162,4 @@ export default React.memo(styled(InputAddressMulti)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/InputFile.tsx b/packages/react-components/src/InputFile.tsx
index a11be73903..b5aa641dd9 100644
--- a/packages/react-components/src/InputFile.tsx
+++ b/packages/react-components/src/InputFile.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React, { createRef, useCallback, useState } from 'react';
 import Dropzone, { DropzoneRef } from 'react-dropzone';
 import styled from 'styled-components';
@@ -136,8 +134,8 @@ function InputFile ({ accept, className = '', clearContent, help, isDisabled, is
     : dropZone;
 }
 
-export default React.memo(styled(InputFile)(({ theme }: ThemeProps) => `
-  background: ${theme.bgInput};
+export default React.memo(styled(InputFile)`
+  background: var(--bg-input);
   border: 1px solid rgba(34, 36, 38, 0.15);
   border-radius: 0.28571429rem;
   font-size: 1rem;
@@ -146,11 +144,11 @@ export default React.memo(styled(InputFile)(({ theme }: ThemeProps) => `
   width: 100% !important;
 
   &.error {
-    background: ${theme.bgInputError};
+    background: var(--bg-input-error);
     border-color: #e0b4b4;
   }
 
   &:hover {
     cursor: pointer;
   }
-`));
+`);
diff --git a/packages/react-components/src/Labelled.tsx b/packages/react-components/src/Labelled.tsx
index b4c06d4735..113b0c9608 100644
--- a/packages/react-components/src/Labelled.tsx
+++ b/packages/react-components/src/Labelled.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -47,7 +45,7 @@ function Labelled ({ className = '', children, help, isFull, isHidden, isOuter,
   );
 }
 
-export default React.memo(styled(Labelled)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Labelled)`
   &.ui--Labelled {
     display: block;
     position: relative;
@@ -103,7 +101,7 @@ export default React.memo(styled(Labelled)(({ theme }: ThemeProps) => `
 
       .labelExtra {
         color: rgba(78, 78, 78, .85);
-        font-weight: ${theme.fontWeightNormal};
+        font-weight: var(--font-weight-normal);
         right: 1.75rem;
         text-align: right;
       }
@@ -157,4 +155,4 @@ export default React.memo(styled(Labelled)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx
index f7792db265..2136aaee29 100644
--- a/packages/react-components/src/Modal/Columns.tsx
+++ b/packages/react-components/src/Modal/Columns.tsx
@@ -15,7 +15,6 @@ function Columns ({ children, className = '' }: ColumnProps): React.ReactElement
 export default React.memo(styled(Columns)`
   align-items: center;
   display: flex;
-  flex-layout: row;
   justify-content: space-between;
 
   &+& {
diff --git a/packages/react-components/src/PasswordStrength.tsx b/packages/react-components/src/PasswordStrength.tsx
index ec733ec8dc..cb001affde 100644
--- a/packages/react-components/src/PasswordStrength.tsx
+++ b/packages/react-components/src/PasswordStrength.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import strengthTester from 'owasp-password-strength-test';
 import React from 'react';
 import styled from 'styled-components';
@@ -53,13 +51,14 @@ function PasswordStrength ({ className = '', value }: Props): React.ReactElement
   );
 }
 
-export default React.memo(styled(PasswordStrength)(({ theme }: ThemeProps) => `
+export default React.memo(styled(PasswordStrength)`
   align-items: center;
   margin-top: 0.5rem;
   margin-left: 2rem;
   font-size: 1rem;
   text-transform: uppercase;
-  color: ${theme.colorLabel};
+  color: var(--color-label);
+
   .ui--Strength-bar {
     position: relative;
     height: 0.6rem;
@@ -69,6 +68,7 @@ export default React.memo(styled(PasswordStrength)(({ theme }: ThemeProps) => `
     border-radius: 0.15rem;
     background: #ECECEC;
   }
+
   .ui--Strength-bar-highlighted {
     position: absolute;
     top: -0.07rem;
@@ -77,4 +77,4 @@ export default React.memo(styled(PasswordStrength)(({ theme }: ThemeProps) => `
     border-radius: 0.15rem;
     background: linear-gradient(90.43deg, #FF8B00 0%, #FFBB50 112.75%);
   }
-`));
+`);
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index 0bb1db1c4c..cefe657654 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { UInt } from '@polkadot/types';
-import type { ThemeProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -72,7 +71,7 @@ function Progress ({ className = '', isDisabled, size = 'normal', total, value }
   );
 }
 
-export default React.memo(styled(Progress)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Progress)`
   border-radius: 100%;
   clip-path: circle(50%);
   height: 4.5rem;
@@ -128,10 +127,10 @@ export default React.memo(styled(Progress)(({ theme }: ThemeProps) => `
 
   .inner {
     align-items: center;
-    background: ${theme.bgInverse};
+    background: var(--bg-inverse);
     border-radius: 100%;
     bottom: 0.375rem;
-    color: ${theme.colorSummary};
+    color: var(--color-summary);
     display: flex;
     justify-content: center;
     left: 0.375rem;
@@ -161,4 +160,4 @@ export default React.memo(styled(Progress)(({ theme }: ThemeProps) => `
       font-size: 0.625rem;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Sidebar.tsx b/packages/react-components/src/Sidebar.tsx
index 77a645dab3..2d960c0315 100644
--- a/packages/react-components/src/Sidebar.tsx
+++ b/packages/react-components/src/Sidebar.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -34,8 +32,8 @@ function Sidebar ({ button, children, className = '', onClose }: Props): React.R
   );
 }
 
-export default React.memo(styled(Sidebar)(({ offset = 0, position, theme }: Props & ThemeProps) => `
-  background: ${theme.bgPage};
+export default React.memo(styled(Sidebar)(({ offset = 0, position }: Props) => `
+  background: var(--bg-page);
   bottom: 0;
   box-shadow: ${position === 'right' ? '-6px' : '6px'} 0px 20px 0px rgba(0, 0, 0, 0.3);
   margin-left: -0.125rem;
diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx
index deacacdc62..55fa16e494 100644
--- a/packages/react-components/src/Status/index.tsx
+++ b/packages/react-components/src/Status/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
-import type { ThemeProps } from '../types';
 import type { QueueStatus, QueueTx, QueueTxStatus } from './types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
@@ -203,7 +202,7 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default React.memo(styled(Status)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Status)`
   display: inline-block;
   position: fixed;
   right: 0.75rem;
@@ -240,7 +239,7 @@ export default React.memo(styled(Status)(({ theme }: ThemeProps) => `
         padding: 0.5rem 1rem;
 
         .status {
-          font-weight: ${theme.fontWeightNormal};
+          font-weight: var(--font-weight-normal);
         }
 
         .ui--AddressMini {
@@ -306,4 +305,4 @@ export default React.memo(styled(Status)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index 4dda2cced4..fa20fc6dc5 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -31,21 +29,21 @@ function Body ({ children, className = '', empty, emptySpinner }: Props): React.
   );
 }
 
-export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Body)`
   position: relative;
 
   td {
-    border-bottom: 1px solid ${theme.borderTable};
+    border-bottom: 1px solid var(--border-table);
     padding: 0.75rem 1rem;
     text-align: left;
     vertical-align: middle;
 
     &:first-child {
-      border-left: 1px solid ${theme.borderTable};
+      border-left: 1px solid var(--border-table);
     }
 
     &:last-child {
-      border-right: 1px solid ${theme.borderTable};
+      border-right: 1px solid var(--border-table);
     }
 
     label {
@@ -109,7 +107,7 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
     }
 
     &.hash {
-      font: ${theme.fontMono};
+      font: var(--font-mono);
     }
 
     &.links {
@@ -180,7 +178,7 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
   tr {
     &:nth-child(odd):not(.isEven),
     &:nth-child(even).isOdd {
-      background: ${theme.bgTable};
+      background: var(--bg-table);
     }
 
     &:first-child {
@@ -195,7 +193,7 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
 
     &:last-child {
       td {
-        border-bottom: 1px solid ${theme.borderTable};
+        border-bottom: 1px solid var(--border-table);
 
         &:first-child {
           border-bottom-left-radius: 0.25rem;
@@ -225,4 +223,4 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
       background-color: #eee !important;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Table/Foot.tsx b/packages/react-components/src/Table/Foot.tsx
index cfc5d72fb2..e6831a9ad4 100644
--- a/packages/react-components/src/Table/Foot.tsx
+++ b/packages/react-components/src/Table/Foot.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -24,11 +22,11 @@ function Foot ({ className = '', footer, isEmpty }: Props): React.ReactElement<P
   );
 }
 
-export default React.memo(styled(Foot)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Foot)`
   td {
-    color: rgba(${theme.theme === 'dark' ? '254, 240, 240' : '78, 78, 78'}, 0.66);
-    font: ${theme.fontSans};
-    font-weight: ${theme.fontWeightNormal};
+    color: var(--color-table-foot);
+    font: var(--font-sans);
+    font-weight: var(--font-weight-normal);
     padding: 0.75rem 1rem 0.25rem;
     text-align: right;
     vertical-align: baseline;
@@ -36,6 +34,6 @@ export default React.memo(styled(Foot)(({ theme }: ThemeProps) => `
   }
 
   tr {
-    background: ${theme.bgPage};
+    background: var(--bg-page);
   }
-`));
+`);
diff --git a/packages/react-components/src/Table/Head.tsx b/packages/react-components/src/Table/Head.tsx
index 9b31455b92..e59e01e117 100644
--- a/packages/react-components/src/Table/Head.tsx
+++ b/packages/react-components/src/Table/Head.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -58,13 +56,13 @@ function Head ({ className = '', filter, header, isEmpty }: Props): React.ReactE
   );
 }
 
-export default React.memo(styled(Head)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Head)`
   position: relative;
   z-index: 1;
 
   th {
-    font: ${theme.fontSans};
-    font-weight: ${theme.fontWeightNormal};
+    font: var(--font-sans);
+    font-weight: var(--font-weight-normal);
     padding: 0.75rem 1rem 0.25rem;
     text-align: right;
     vertical-align: baseline;
@@ -83,11 +81,11 @@ export default React.memo(styled(Head)(({ theme }: ThemeProps) => `
     }
 
     &:first-child {
-      border-left: 1px solid ${theme.borderTable};
+      border-left: 1px solid var(--border-table);
     }
 
     &:last-child {
-      border-right: 1px solid ${theme.borderTable};
+      border-right: 1px solid var(--border-table);
     }
 
     &.address {
@@ -118,12 +116,12 @@ export default React.memo(styled(Head)(({ theme }: ThemeProps) => `
   }
 
   tr {
-    background: ${theme.bgTable};
+    background: var(--bg-table);
     text-transform: lowercase;
 
     &:first-child {
       th {
-        border-top: 1px solid ${theme.borderTable};
+        border-top: 1px solid var(--border-table);
       }
     }
 
@@ -143,8 +141,8 @@ export default React.memo(styled(Head)(({ theme }: ThemeProps) => `
 
     &:not(.filter) {
       th {
-        color: rgba(${theme.theme === 'dark' ? '254, 240, 240' : '78, 78, 78'}, 0.66);
+        color: var(--color-table-head);
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx
index 6e6d813e65..aa14fdea65 100644
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
 import type { TabItem } from './types';
 
 import React from 'react';
@@ -45,9 +44,9 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo
   );
 }
 
-export default React.memo(styled(Tab)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Tab)`
   border-bottom: 2px solid transparent;
-  color: ${theme.color} !important;
+  color: var(--color-text) !important;
   margin-bottom: -3px;
   padding: 0.5rem 1.5rem 0.75rem;
 
@@ -70,4 +69,4 @@ export default React.memo(styled(Tab)(({ theme }: ThemeProps) => `
   .tabIcon {
     margin-left: 0.75rem;
   }
-`));
+`);
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index fca18510a3..d5cc400cde 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
 import type { TabItem } from './types';
 
 import React, { useEffect } from 'react';
@@ -57,16 +56,16 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE
   );
 }
 
-export default React.memo(styled(Tabs)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Tabs)`
   align-items: flex-end;
-  background: ${theme.bgTabs};
-  border-bottom: 1px solid ${theme.borderTabs};
+  background: var(--bg-tabs);
+  border-bottom: 1px solid var(--border-tabs);
 
   text-align: left;
   z-index: 1;
 
   & .tabs-container {
-    max-width: ${theme.contentMaxWidth};
+    max-width: var(--width-full);
     margin: 0 auto;
     width: 100%;
     display: flex;
@@ -77,4 +76,4 @@ export default React.memo(styled(Tabs)(({ theme }: ThemeProps) => `
     display: none;
     width: 0px;
   }
-`));
+`);
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index 11a67433f3..47fd6be340 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
@@ -42,12 +40,12 @@ function Tag ({ className = '', color = 'grey', hover, isTag = true, label, size
   );
 }
 
-export default React.memo(styled(Tag)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Tag)`
   border-radius: 0.25rem;
   color: #fff;
   display: inline-block;
   font-size: 0.78571429rem;
-  font-weight: ${theme.fontWeightNormal};
+  font-weight: var(--font-weight-normal);
   line-height: 1;
   margin: 0.125rem;
   padding: 0.5833em 0.833em;
@@ -117,4 +115,4 @@ export default React.memo(styled(Tag)(({ theme }: ThemeProps) => `
       transition: none;
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/TextArea.tsx b/packages/react-components/src/TextArea.tsx
index 1ce115b224..9484b8a468 100644
--- a/packages/react-components/src/TextArea.tsx
+++ b/packages/react-components/src/TextArea.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -53,16 +51,16 @@ function TextArea ({ children, className, help, isError, isReadOnly, label, onCh
   );
 }
 
-export default React.memo(styled(TextArea)(({ theme }: ThemeProps) => `
+export default React.memo(styled(TextArea)`
   .TextAreaWithDropdown {
     display: flex;
     textarea {
       border-radius: 0.25rem 0 0 0.25rem;
       border: 1px solid #DDE1EB;
       border-right: none;
-      background: ${theme.bgInput};
+      background: var(--bg-input);
       box-sizing: border-box;
-      color: ${theme.color};
+      color: var(--color-text);
       display: block;
       outline: none;
       padding: 1.75rem 3rem 0.75rem 1.5rem;
@@ -70,18 +68,18 @@ export default React.memo(styled(TextArea)(({ theme }: ThemeProps) => `
       width: 100%;
 
       &:read-only {
-        background: ${theme.bgInverse};
+        background: var(--bg-inverse);
         box-shadow: none;
         outline: none;
 
         ~ .ui.buttons > .ui.selection.dropdown {
-          background: ${theme.bgInverse};
+          background: var(--bg-inverse);
         }
       }
 
       &.ui-textArea-withError {
-        background: ${theme.bgInputError};
-        color: ${theme.colorError};
+        background: var(--bg-input-error);
+        color: var(--color-error);
       }
     }
 
@@ -98,4 +96,4 @@ export default React.memo(styled(TextArea)(({ theme }: ThemeProps) => `
       }
     }
   }
-`));
+`);
diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx
index 4ebfcc19c3..28527a67ec 100644
--- a/packages/react-components/src/Toggle.tsx
+++ b/packages/react-components/src/Toggle.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from './types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -43,7 +41,7 @@ function Toggle ({ className = '', isDisabled, isOverlay, isRadio, label, onChan
   );
 }
 
-export default React.memo(styled(Toggle)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Toggle)`
   > label {
     display: inline-block;
     margin: 0 0.5rem;
@@ -55,7 +53,7 @@ export default React.memo(styled(Toggle)(({ theme }: ThemeProps) => `
   }
 
   .ui--Toggle-Slider {
-    background: ${theme.bgToggle};
+    background: var(--bg-toggle);
     border-radius: 1.5rem;
     display: inline-block;
     height: 1.5rem;
@@ -63,8 +61,8 @@ export default React.memo(styled(Toggle)(({ theme }: ThemeProps) => `
     width: 3rem;
 
     &::before {
-      background: ${theme.bgTable};
-      border: 0.125rem solid ${theme.bgToggle};
+      background: var(--bg-table);
+      border: 0.125rem solid var(--bg-toggle);
       border-radius: 50%;
       content: "";
       height: 1.5rem;
@@ -108,4 +106,4 @@ export default React.memo(styled(Toggle)(({ theme }: ThemeProps) => `
     position: absolute;
     right: 3.5rem;
   }
-`));
+`);
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index bb2b938f79..17d46b0d83 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -3,9 +3,10 @@
 
 import type { ThemeDef } from '../types';
 
-export default (theme: ThemeDef): string => `
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default (_theme: ThemeDef): string => `
   .ui--output {
-    background: ${theme.bgInput};
+    background: var(--bg-input);
     border-radius: 4px;
     border: 1px dashed #eee;
     box-sizing: border-box;
@@ -17,7 +18,7 @@ export default (theme: ThemeDef): string => `
     word-break: break-all;
 
     &.error {
-      background: ${theme.bgInputError};
+      background: var(--bg-input-error);
       border-color: #e0b4b4;
     }
 
@@ -44,7 +45,7 @@ export default (theme: ThemeDef): string => `
   }
 
   button.ui--Button {
-    font: ${theme.fontSans};
+    font: var(--font-sans);
   }
 
   .editable {
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 976c18b6d5..00aa21c43b 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -60,7 +60,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
 
   .highlight--bg-faint,
   .highlight--bg-light {
-    background: ${theme.bgTable};
+    background: var(--bg-table);
     position: relative;
 
     &:before {
@@ -214,9 +214,9 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
   }
 
   #root {
-    background: ${theme.bgPage};
-    color: ${theme.color};
-    font: ${theme.fontSans};
+    background: var(--bg-page);
+    color: var(--color-text);
+    font: var(--font-sans);
     height: 100%;
   }
 
@@ -225,7 +225,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
   }
 
   article {
-    background: ${theme.bgTable};
+    background: var(--bg-table);
     border: 1px solid #f2f2f2;
     border-radius: 0.25rem;
     box-sizing: border-box;
@@ -310,7 +310,7 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
   body {
     height: 100%;
     margin: 0;
-    font: ${theme.fontSans};
+    font: var(--font-sans);
   }
 
   br {
@@ -341,9 +341,9 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
   }
 
   h1, h2, h3, h4, h5 {
-    color: ${theme.colorSummary};
-    font: ${theme.fontSans};
-    font-weight: ${theme.fontWeightLight};
+    color: var(--color-summary);
+    font: var(--font-sans);
+    font-weight: var(--font-weight-light);
     margin-bottom: 0.25rem;
   }
 
@@ -376,11 +376,11 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr
 
   label {
     box-sizing: border-box;
-    color: ${theme.colorLabel};
+    color: var(--color-label);
     display: block;
-    font: ${theme.fontSans};
+    font: var(--font-sans);
     font-size: 1rem;
-    font-weight: ${theme.fontWeightNormal};
+    font-weight: var(--font-weight-normal);
   }
 
   main {
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index 860d5ca7e6..34d2d310b2 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -3,7 +3,8 @@
 
 import type { ThemeDef } from '../types';
 
-export default (theme: ThemeDef): string => `
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default (_theme: ThemeDef): string => `
   .ui.hidden.divider {
     margin: 0.5rem 0;
   }
@@ -22,14 +23,14 @@ export default (theme: ThemeDef): string => `
   .ui.selection.dropdown,
   .ui.input > input,
   .ui.selection.dropdown > input {
-    background: ${theme.bgInput};
-    color: ${theme.color};
-    font: ${theme.fontSans};
+    background: var(--bg-input);
+    color: var(--color-text);
+    font: var(--font-sans);
     font-size: 1rem;
 
     &:focus {
-      background: ${theme.bgInput};
-      color: ${theme.color};
+      background: var(--bg-input);
+      color: var(--color-text);
     }
   }
 
@@ -49,17 +50,17 @@ export default (theme: ThemeDef): string => `
     }
 
     &.selection.visible {
-      background: ${theme.bgInput};
-      color: ${theme.color};
+      background: var(--bg-input);
+      color: var(--color-text);
     }
 
     .menu {
-      background: ${theme.bgInput};
-      color: ${theme.color};
+      background: var(--bg-input);
+      color: var(--color-text);
 
       > .item {
         border-color: transparent !important;
-        color: ${theme.color} !important;
+        color: var(--color-text) !important;
 
         &.header.disabled {
           margin: 1em 0 0 0;
@@ -67,7 +68,7 @@ export default (theme: ThemeDef): string => `
 
           &:hover,
           &.selected {
-            background: ${theme.bgInput};
+            background: var(--bg-input);
           }
         }
       }
@@ -77,7 +78,7 @@ export default (theme: ThemeDef): string => `
       min-height: 1em;
 
       &:not(.default) {
-        color: ${theme.color} !important;
+        color: var(--color-text) !important;
       }
     }
   }
@@ -106,7 +107,7 @@ export default (theme: ThemeDef): string => `
     }
 
     &.error input {
-      background-color: ${theme.bgInputError};
+      background-color: var(--bg-input-error);
       border-color: #e0b4b4;
     }
 
@@ -117,16 +118,16 @@ export default (theme: ThemeDef): string => `
 
   .ui.label {
     background: transparent;
-    font-weight: ${theme.fontWeightNormal};
+    font-weight: var(--font-weight-normal);
     position: relative;
     z-index: 1;
   }
 
   .ui.modal {
-    background: ${theme.bgPage};
+    background: var(--bg-page);
     box-shadow: none;
-    color: ${theme.color};
-    font: ${theme.fontSans};
+    color: var(--color-text);
+    font: var(--font-sans);
 
     > .actions,
     > .content {
@@ -143,10 +144,10 @@ export default (theme: ThemeDef): string => `
     > .header:not(.ui) {
       background: transparent;
       border-bottom: none;
-      color: ${theme.colorSummary};
-      font: ${theme.fontSans};
+      color: var(--color-summary);
+      font: var(--font-sans);
       font-size: 1.75rem;
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
       line-height: 1.25rem;
       padding: 1.5rem 1.75rem 0;
       text-transform: lowercase;
@@ -158,7 +159,7 @@ export default (theme: ThemeDef): string => `
 
     .description {
       margin: 1.5em 0;
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
     }
   }
 
@@ -167,11 +168,11 @@ export default (theme: ThemeDef): string => `
   }
 
   .ui.popup {
-    background: ${theme.bgMenu};
-    color: ${theme.color};
+    background: var(--bg-menu);
+    color: var(--color-text);
 
     .ui.text.menu .item {
-      color: ${theme.color} !important;
+      color: var(--color-text) !important;
 
       &.disabled {
         opacity: 0.3;
@@ -179,7 +180,7 @@ export default (theme: ThemeDef): string => `
     }
 
     &&::before {
-      background: ${theme.bgMenu};
+      background: var(--bg-menu);
     }
   }
 
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 85ad0728e6..e371389506 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -71,30 +71,6 @@ export interface NullContract {
 }
 
 export interface ThemeDef {
-  bgInput: string;
-  bgInputError: string;
-  bgInverse: string;
-  bgMenu: string;
-  bgMenuHover: string;
-  bgPage: string;
-  bgTable: string;
-  bgTabs: string;
-  bgToggle: string;
-  borderTable: string;
-  borderTabs: string;
-  color: string;
-  colorCheckbox: string;
-  colorError: string;
-  colorLabel: string;
-  colorSummary: string;
-  contentHalfWidth: string;
-  contentMaxWidth: string;
-  fontSans: string;
-  fontMono: string;
-  fontWeightLight: number;
-  fontWeightNormal: number;
-  fontWeightMedium: number;
-  fontWeightBold: number;
   theme: 'dark' | 'light';
 }
 
diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx
index db20f9ca09..67bf998a69 100644
--- a/packages/react-params/src/Holder.tsx
+++ b/packages/react-params/src/Holder.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-params authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -21,7 +19,7 @@ function Holder ({ children, className = '', withBorder, withPadding }: Props):
   );
 }
 
-export default React.memo(styled(Holder)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Holder)`
   &.withBorder {
     border-left: 0.25rem solid #f2f2f2;
   }
@@ -37,7 +35,7 @@ export default React.memo(styled(Holder)(({ theme }: ThemeProps) => `
 
   .ui--Param .ui--Labelled label {
     text-transform: none !important;
-    font: ${theme.fontMono};
+    font: var(--font-mono);
   }
 
   .ui--row {
@@ -45,7 +43,7 @@ export default React.memo(styled(Holder)(({ theme }: ThemeProps) => `
   }
 
   .ui--Param-Address {
-    font: ${theme.fontMono};
+    font: var(--font-mono);
   }
 
   .ui--Params-Content {
@@ -95,4 +93,4 @@ export default React.memo(styled(Holder)(({ theme }: ThemeProps) => `
       right: 3.5rem;
     }
   }
-`));
+`);
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index ac686dc60c..3b5d41b936 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/react-query authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
 import type { Compact } from '@polkadot/types';
 import type { Registry } from '@polkadot/types/types';
 
@@ -97,7 +96,7 @@ function FormatBalance ({ children, className = '', formatIndex, isShort, label,
   );
 }
 
-export default React.memo(styled(FormatBalance)(({ theme }: ThemeProps) => `
+export default React.memo(styled(FormatBalance)`
   display: inline-block;
   vertical-align: baseline;
   white-space: nowrap;
@@ -121,7 +120,7 @@ export default React.memo(styled(FormatBalance)(({ theme }: ThemeProps) => `
     text-align: right;
 
     > .ui--FormatBalance-postfix {
-      font-weight: ${theme.fontWeightLight};
+      font-weight: var(--font-weight-light);
       opacity: 0.7;
       vertical-align: baseline;
     }
@@ -139,4 +138,4 @@ export default React.memo(styled(FormatBalance)(({ theme }: ThemeProps) => `
   .ui--Icon+.ui--FormatBalance-value {
     margin-left: 0.375rem;
   }
-`));
+`);
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index d39da8a762..abe1f47619 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { QueueTx } from '@polkadot/react-components/Status/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -62,7 +61,7 @@ function Transaction ({ className, currentItem: { accountId, extrinsic, isUnsign
   );
 }
 
-export default React.memo(styled(Transaction)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Transaction)`
   .tx-details {
     .ui--Expander-summary {
       font-size: 1.1rem;
@@ -70,7 +69,7 @@ export default React.memo(styled(Transaction)(({ theme }: ThemeProps) => `
     }
 
     .highlight {
-      font-weight: ${theme.fontWeightNormal};
+      font-weight: var(--font-weight-normal);
     }
 
     .meta {
@@ -82,4 +81,4 @@ export default React.memo(styled(Transaction)(({ theme }: ThemeProps) => `
       opacity: 0.6;
     }
   }
-`));
+`);