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
2021-03-10 11:04:14 +01:00 · 2021-03-10 11:04:14 +01:00 · 2bf88c5860
commit 2bf88c5860
parent 7836593432
68 changed files with 352 additions and 454 deletions
--- a/packages/apps/public/iframe.html
+++ b/packages/apps/public/iframe.html
@ -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>
--- 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>
--- 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;
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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);
      }
    }
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
--- 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;
  }
-`));
+`);
--- 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'
 };
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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);
      }
    }
  }
-`));
+`);
--- 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;
    }
--- 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);
  }
 `));
--- 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;
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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
  }
-`));
+`);
--- 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;
--- 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;
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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%;
  }
-`));
+`);
--- 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);
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
+        }
+      }`
    : ''};
-
    }
  }
 `));
--- 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);
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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 {
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
-    }
-  }
 `);
--- 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;
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
  }
 `);
--- 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;
    }
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
 `));
--- 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;
    }
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;

  &+& {
--- 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%);
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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;
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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);
  }
-`));
+`);
--- 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);
      }
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
--- 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) => `
      }
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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 {
--- 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 {
--- 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);
    }
  }

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

--- 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;
    }
  }
-`));
+`);
--- 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;
  }
-`));
+`);
--- 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;
    }
  }
-`));
+`);
				`@ -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>`