Adjust styles for styled-components 6.x (#1279)

* Adjust styles for styled-components 6.x

* Additional cleanups

* Cleanups

* Adjust

* styled with <Props>

* Adjust

* Additional

* Theme jiggling

* Non-vars overrides

* Adjust

* Adjust

* Adjust

package.json

@@ -40,8 +40,8 @@
     "watch": "cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.76.16",
+    "@polkadot/dev": "^0.76.17",
-    "@types/node": "^20.5.0",
+    "@types/node": "^20.5.1",
     "i18next-scanner": "^4.3.0",
     "sinon-chrome": "^3.0.1"
   },
@@ -54,6 +54,6 @@
     "@polkadot/util-crypto": "^12.4.1",
     "@polkadot/x-fetch": "^12.4.1",
     "safe-buffer": "^5.2.1",
-    "typescript": "^5.0.3"
+    "typescript": "^5.1.6"
   }
 }

packages/extension-base/package.json

@@ -36,7 +36,7 @@
     "@polkadot/util-crypto": "^12.4.1",
     "eventemitter3": "^5.0.1",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@polkadot/extension-mocks": "0.46.6-3-x"

packages/extension-chains/package.json

@@ -25,7 +25,7 @@
     "@polkadot/networks": "^12.4.1",
     "@polkadot/util": "^12.4.1",
     "@polkadot/util-crypto": "^12.4.1",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   },
   "peerDependencies": {
     "@polkadot/api": "*",

packages/extension-compat-metamask/package.json

@@ -25,7 +25,7 @@
     "@polkadot/extension-inject": "0.46.6-3-x",
     "@polkadot/types": "^10.9.1",
     "@polkadot/util": "^12.4.1",
-    "tslib": "^2.6.1",
+    "tslib": "^2.6.2",
     "web3": "^1.10.1"
   },
   "peerDependencies": {

packages/extension-dapp/package.json

@@ -24,7 +24,7 @@
     "@polkadot/extension-inject": "0.46.6-3-x",
     "@polkadot/util": "^12.4.1",
     "@polkadot/util-crypto": "^12.4.1",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   },
   "peerDependencies": {
     "@polkadot/api": "*",

packages/extension-inject/package.json

@@ -24,7 +24,7 @@
     "@polkadot/util": "^12.4.1",
     "@polkadot/util-crypto": "^12.4.1",
     "@polkadot/x-global": "^12.4.1",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.243",

packages/extension-mocks/package.json

@@ -19,6 +19,6 @@
   "main": "index.js",
   "dependencies": {
     "sinon-chrome": "^3.0.1",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   }
 }

packages/extension-ui/package.json

@@ -47,8 +47,8 @@
     "react-is": "^18.2.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.0.7",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
     "@polkadot/extension-mocks": "0.46.6-3-x",

packages/extension-ui/src/Popup/Accounts/Account.spec.tsx

@@ -6,16 +6,13 @@
 import '@polkadot/extension-mocks/chrome';
 
 import type { ReactWrapper } from 'enzyme';
-import type { Theme } from '../../components/index.js';
 
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
-import { ThemeProvider } from 'styled-components';
 
-import { themes } from '../../components/index.js';
 import * as messaging from '../../messaging.js';
 import { flushAllPromises } from '../../testHelpers.js';
 import Account from './Account.js';
@@ -38,14 +35,11 @@ describe('Account component', () => {
   let wrapper: ReactWrapper;
   const VALID_ADDRESS = 'HjoBp62cvsWDA3vtNMWxz6c9q13ReEHi9UGHK7JbZweH5g5';
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  const mountAccountComponent = (additionalAccountProperties: Record<string, unknown>, theme: Theme = themes.dark): ReactWrapper => mount(
+  const mountAccountComponent = (additionalAccountProperties: Record<string, unknown>): ReactWrapper => mount(
     <MemoryRouter>
-      <ThemeProvider theme={theme}>
+      <Account
-        <Account
+        {...{ address: VALID_ADDRESS, ...additionalAccountProperties }}
-          {...{ address: VALID_ADDRESS, ...additionalAccountProperties }}
+      />
-        >
-        </Account>
-      </ThemeProvider>
     </MemoryRouter>);
 
   it('shows Export option if account is not external', async () => {

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -3,7 +3,6 @@
 
 import type { AccountJson } from '@polkadot/extension-base/background/types';
 import type { HexString } from '@polkadot/util/types';
-import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
@@ -51,7 +50,7 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH
 
   const _onChangeGenesis = useCallback(
     (genesisHash?: HexString | null): void => {
-      tieAccount(address, genesisHash || null)
+      tieAccount(address, genesisHash ?? null)
         .catch(console.error);
     },
     [address]
@@ -161,7 +160,7 @@ function Account ({ address, className, genesisHash, isExternal, isHardware, isH
   );
 }
 
-export default styled(Account)(({ theme }: ThemeProps) => `
+export default styled(Account)<Props>`
   .address {
     margin-bottom: 8px;
   }
@@ -174,7 +173,7 @@ export default styled(Account)(({ theme }: ThemeProps) => `
     width: 350px;
 
     .danger {
-      background-color: ${theme.bodyColor};
+      background-color: var(--bodyColor);
       margin-top: -13px;
       width: 330px;
     }
@@ -202,4 +201,4 @@ export default styled(Account)(({ theme }: ThemeProps) => `
       margin: 0;
     }
   }
-`);
+`;

packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx

@@ -44,7 +44,7 @@ function AccountsTree ({ className, parentName, showHidden = true, suri, withChe
   );
 }
 
-export default styled(AccountsTree)`
+export default styled(AccountsTree)<Props>`
   .accountWichCheckbox {
     display: flex;
     align-items: center;

packages/extension-ui/src/Popup/Accounts/AddAccount.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import React, { useCallback, useContext } from 'react';
 
 import { ActionContext } from '../../components/index.js';
@@ -11,7 +9,7 @@ import Header from '../../partials/Header.js';
 import { styled } from '../../styled.js';
 import AddAccountImage from './AddAccountImage.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -42,12 +40,12 @@ function AddAccount ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(AddAccount)(({ theme }: Props) => `
+export default React.memo(styled(AddAccount)<Props>`
-  color: ${theme.textColor};
+  color: var(--textColor);
   height: 100%;
 
   h3 {
-    color: ${theme.textColor};
+    color: var(--textColor);
     margin-top: 0;
     font-weight: normal;
     font-size: 24px;
@@ -65,6 +63,6 @@ export default React.memo(styled(AddAccount)(({ theme }: Props) => `
     font-size: 16px;
     line-height: 26px;
     margin: 0 30px;
-    color: ${theme.subTextColor};
+    color: var(--subTextColor);
   }
-`));
+`);

packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx

@@ -7,13 +7,11 @@
 /* eslint-disable react/jsx-sort-props */
 /* eslint-disable react/jsx-max-props-per-line */
 
-import type { ThemeProps } from '../../types.js';
-
 import React from 'react';
 
 import { styled } from '../../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   onClick: () => void;
 }
@@ -85,17 +83,17 @@ function AddAccountImage ({ className, onClick }: Props): React.ReactElement<Pro
   );
 }
 
-export default React.memo(styled(AddAccountImage)(({ theme }: Props) => `
+export default React.memo(styled(AddAccountImage)<Props>`
   circle, path {
     cursor: pointer;
   }
 
   path {
-    fill: ${theme.textColor};
+    fill: var(--textColor);
   }
 
   & > g > circle {
-    stroke: ${theme.inputBorderColor};
+    stroke: var(--inputBorderColor);
-    fill: ${theme.addAccountImageBackground};
+    fill: var(--addAccountImageBackground);
   }
-`));
+`);

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AccountWithChildren } from '@polkadot/extension-base/background/types';
-import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
@@ -15,7 +14,7 @@ import { styled } from '../../styled.js';
 import AccountsTree from './AccountsTree.js';
 import AddAccount from './AddAccount.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -71,7 +70,7 @@ function Accounts ({ className }: Props): React.ReactElement {
   );
 }
 
-export default styled(Accounts)`
+export default styled(Accounts)<Props>`
   height: calc(100vh - 2px);
   overflow-y: scroll;
   margin-top: -25px;

packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useParams } from 'react-router';
 
@@ -12,7 +10,7 @@ import { getAuthList, updateAuthorization } from '../../messaging.js';
 import { AccountSelection, Header } from '../../partials/index.js';
 import { styled } from '../../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -71,7 +69,7 @@ function AccountManagement ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(AccountManagement)`
+export default styled(AccountManagement)<Props>`
   .accountSelection{
     .accountList{
       height: 390px;

packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AuthUrlInfo } from '@polkadot/extension-base/background/types';
-import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback } from 'react';
 import { Link } from 'react-router-dom';
@@ -11,7 +10,7 @@ import RemoveAuth from '../../components/RemoveAuth.js';
 import { useTranslation } from '../../hooks/index.js';
 import { styled } from '../../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   info: AuthUrlInfo;
   removeAuth: (url: string) => void;
@@ -50,7 +49,7 @@ function WebsiteEntry ({ className = '', info: { authorizedAccounts, isAllowed }
   );
 }
 
-export default styled(WebsiteEntry)(({ theme }: Props) => `
+export default styled(WebsiteEntry)<Props>`
   display: flex;
   align-items: center;
   margin-top: .2rem;
@@ -61,11 +60,11 @@ export default styled(WebsiteEntry)(({ theme }: Props) => `
 
   .connectedAccounts{
     margin-left: .5rem;
-    background-color: ${theme.primaryColor};
+    background-color: var(--primaryColor);
     color: white;
     cursor: pointer;
     padding: 0 0.5rem;
     border-radius: 4px;
     text-decoration: none;
   }
-`);
+`;

packages/extension-ui/src/Popup/AuthManagement/index.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { AuthUrlInfo, AuthUrls } from '@polkadot/extension-base/background/types';
-import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -13,7 +12,7 @@ import { Header } from '../../partials/index.js';
 import { styled } from '../../styled.js';
 import WebsiteEntry from './WebsiteEntry.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -84,7 +83,7 @@ function AuthManagement ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(AuthManagement)`
+export default styled(AuthManagement)<Props>`
   height: calc(100vh - 2px);
   overflow-y: auto;
 

packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx

@@ -11,9 +11,8 @@ import type { AccountJson, AuthorizeRequest } from '@polkadot/extension-base/bac
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
 
-import { AccountContext, AuthorizeReqContext, themes, Warning } from '../../components/index.js';
+import { AccountContext, AuthorizeReqContext, Warning } from '../../components/index.js';
 import { Header } from '../../partials/index.js';
 import { buildHierarchy } from '../../util/buildHierarchy.js';
 import Account from '../Accounts/Account.js';
@@ -56,9 +55,7 @@ describe('Authorize', () => {
           hierarchy: accounts ? buildHierarchy(accounts) : []
         }}
       >
-        <ThemeProvider theme={themes.dark}>
+        <Authorize />
-          <Authorize />
-        </ThemeProvider>
       </AccountContext.Provider>
     </AuthorizeReqContext.Provider>);
 

packages/extension-ui/src/Popup/Authorize/NoAccount.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import { t } from 'i18next';
 import React, { useCallback } from 'react';
 import { Trans } from 'react-i18next';
@@ -11,7 +9,7 @@ import { Button, Warning } from '../../components/index.js';
 import { deleteAuthRequest } from '../../messaging.js';
 import { styled } from '../../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   authId: string;
   className?: string;
 }
@@ -37,7 +35,7 @@ function NoAccount ({ authId, className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(NoAccount)`
+export default styled(NoAccount)<Props>`
   .acceptButton {
     width: 90%;
     margin: 25px auto 0;

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { RequestAuthorizeTab } from '@polkadot/extension-base/background/types';
-import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext, useEffect } from 'react';
 
@@ -13,7 +12,7 @@ import { AccountSelection } from '../../partials/index.js';
 import { styled } from '../../styled.js';
 import NoAccount from './NoAccount.js';
 
-interface Props extends ThemeProps {
+interface Props {
   authId: string;
   className?: string;
   isFirst: boolean;
@@ -85,7 +84,7 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
   );
 }
 
-export default styled(Request)`
+export default styled(Request)<Props>`
   .acceptButton {
     width: 90%;
     margin: .5rem auto 0;

packages/extension-ui/src/Popup/Authorize/index.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import React, { useContext } from 'react';
 
 import { AuthorizeReqContext } from '../../components/index.js';
@@ -11,7 +9,7 @@ import { Header } from '../../partials/index.js';
 import { styled } from '../../styled.js';
 import Request from './Request.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -41,7 +39,7 @@ function Authorize ({ className = '' }: Props): React.ReactElement {
   );
 }
 
-export default styled(Authorize)`
+export default styled(Authorize)<Props>`
   overflow-y: auto;
 
   &.lastRequest {

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx

@@ -11,9 +11,8 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { ThemeProvider } from 'styled-components';
 
-import { ActionContext, ActionText, Button, themes } from '../../components/index.js';
+import { ActionContext, ActionText, Button } from '../../components/index.js';
 import * as messaging from '../../messaging.js';
 import { Header } from '../../partials/index.js';
 import { flushAllPromises } from '../../testHelpers.js';
@@ -44,9 +43,7 @@ describe('Create Account', () => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   const mountComponent = (): ReactWrapper => mount(
     <ActionContext.Provider value={onActionStub}>
-      <ThemeProvider theme={themes.dark}>
+      <CreateAccount />
-        <CreateAccount />
-      </ThemeProvider>
     </ActionContext.Provider>
   );
 

packages/extension-ui/src/Popup/CreateAccount/index.tsx

@@ -132,7 +132,7 @@ function CreateAccount ({ className }: Props): React.ReactElement {
   );
 }
 
-export default styled(CreateAccount)`
+export default styled(CreateAccount)<Props>`
   margin-bottom: 16px;
 
   label::after {

packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import React, { useCallback, useRef, useState } from 'react';
 
 import arrow from '../../assets/arrow-down.svg';
@@ -59,7 +57,7 @@ function AddressDropdown ({ allAddresses, className, onSelect, selectedAddress,
   );
 }
 
-export default styled(AddressDropdown)(({ theme }: ThemeProps) => `
+export default styled(AddressDropdown)<Props>`
   margin-bottom: 16px;
   cursor: pointer;
 
@@ -72,10 +70,10 @@ export default styled(AddressDropdown)(({ theme }: ThemeProps) => `
     width: 30px;
     height: 30px;
     background: url(${arrow}) center no-repeat;
-    background-color: ${theme.inputBackground};
+    background-color: var(--inputBackground);
     pointer-events: none;
     border-radius: 4px;
-    border: 1px solid ${theme.boxBorderColor};
+    border: 1px solid var(--boxBorderColor);
   }
 
   .address .copyIcon {
@@ -87,11 +85,11 @@ export default styled(AddressDropdown)(({ theme }: ThemeProps) => `
     visibility: hidden;
     width: 510px;
     z-index: 100;
-    background: ${theme.bodyColor};
+    background: var(--bodyColor);
     max-height: 0;
     overflow: auto;
     padding: 5px;
-    border: 1px solid ${theme.boxBorderColor};
+    border: 1px solid var(--boxBorderColor);
     box-sizing: border-box;
     border-radius: 4px;
     margin-top: -8px;
@@ -105,4 +103,4 @@ export default styled(AddressDropdown)(({ theme }: ThemeProps) => `
       cursor: pointer;
     }
   }
-`);
+`;

packages/extension-ui/src/Popup/Derive/DerivationPath.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -11,7 +9,7 @@ import { Button, InputWithLabel } from '../../components/index.js';
 import { useTranslation } from '../../hooks/index.js';
 import { styled } from '../../styled.js';
 
-interface Props extends ThemeProps{
+interface Props {
   className?: string;
   defaultPath: string;
   isError: boolean;
@@ -72,7 +70,7 @@ function DerivationPath ({ className, defaultPath, isError, onChange, withSoftPa
   );
 }
 
-export default React.memo(styled(DerivationPath)(({ theme }: Props) => `
+export default React.memo(styled(DerivationPath)<Props>`
   > .container {
     display: flex;
     flex-direction: row;
@@ -99,7 +97,7 @@ export default React.memo(styled(DerivationPath)(({ theme }: Props) => `
   }
 
   .lockIcon {
-    color: ${theme.iconNeutralColor}
+    color: var(--iconNeutralColor)
   }
 
   .pathInput {
@@ -109,4 +107,4 @@ export default React.memo(styled(DerivationPath)(({ theme }: Props) => `
       opacity: 50%;
     }
   }
-`));
+`);

packages/extension-ui/src/Popup/Derive/Derive.spec.tsx

@@ -13,9 +13,8 @@ import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
-import { ThemeProvider } from 'styled-components';
 
-import { AccountContext, ActionContext, themes } from '../../components/index.js';
+import { AccountContext, ActionContext } from '../../components/index.js';
 import * as messaging from '../../messaging.js';
 import { flushAllPromises } from '../../testHelpers.js';
 import { buildHierarchy } from '../../util/buildHierarchy.js';
@@ -68,11 +67,9 @@ describe('Derive', () => {
               hierarchy: buildHierarchy(accounts)
             }}
           >
-            <ThemeProvider theme={themes.dark}>
+            <Route path='/account/derive/:address'>
-              <Route path='/account/derive/:address'>
+              <Derive isLocked={locked} />
-                <Derive isLocked={locked} />
+            </Route>
-              </Route>
-            </ThemeProvider>
           </AccountContext.Provider>
         </ActionContext.Provider>
       </MemoryRouter>

packages/extension-ui/src/Popup/Export.spec.tsx

@@ -13,9 +13,8 @@ import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
-import { ThemeProvider } from 'styled-components';
 
-import { Button, themes } from '../components/index.js';
+import { Button } from '../components/index.js';
 import * as messaging from '../messaging.js';
 import { flushAllPromises } from '../testHelpers.js';
 import Export from './Export.js';
@@ -46,9 +45,7 @@ describe('Export component', () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     wrapper = mount(
       <MemoryRouter initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
-        <ThemeProvider theme={themes.dark}>
+        <Route path='/account/export/:address'><Export /></Route>
-          <Route path='/account/export/:address'><Export /></Route>
-        </ThemeProvider>
       </MemoryRouter>
     );
   });

packages/extension-ui/src/Popup/Export.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { RouteComponentProps } from 'react-router';
-import type { ThemeProps } from '../types.js';
 
 import fileSaver from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
@@ -16,7 +15,7 @@ import { styled } from '../styled.js';
 
 const MIN_LENGTH = 6;
 
-interface Props extends RouteComponentProps<{address: string}>, ThemeProps {
+interface Props extends RouteComponentProps<{address: string}> {
   className?: string;
 }
 

packages/extension-ui/src/Popup/ExportAll.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { RouteComponentProps } from 'react-router';
-import type { ThemeProps } from '../types.js';
 
 import fileSaver from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
@@ -16,7 +15,7 @@ import { styled } from '../styled.js';
 
 const MIN_LENGTH = 6;
 
-interface Props extends RouteComponentProps, ThemeProps {
+interface Props extends RouteComponentProps {
   className?: string;
 }
 

packages/extension-ui/src/Popup/Forget.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { RouteComponentProps } from 'react-router';
-import type { ThemeProps } from '../types.js';
 
 import React, { useCallback, useContext, useState } from 'react';
 import { withRouter } from 'react-router';
@@ -13,7 +12,7 @@ import { forgetAccount } from '../messaging.js';
 import { Header } from '../partials/index.js';
 import { styled } from '../styled.js';
 
-interface Props extends RouteComponentProps<{ address: string }>, ThemeProps {
+interface Props extends RouteComponentProps<{ address: string }> {
   className?: string;
 }
 

packages/extension-ui/src/Popup/ImportLedger.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { HexString } from '@polkadot/util/types';
-import type { ThemeProps } from '../types.js';
 
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -29,7 +28,7 @@ interface NetworkOption {
 
 const AVAIL: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -180,7 +179,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
   );
 }
 
-export default styled(ImportLedger)`
+export default styled(ImportLedger)<Props>`
   .refreshIcon {
     margin-right: 0.3rem;
   }

packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { ThemeProps } from '../../types.js';
 import type { AccountInfo } from './index.js';
 
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
@@ -131,28 +130,28 @@ function SeedAndPath ({ className, onAccountChange, onNextStep, type }: Props):
   );
 }
 
-export default styled(SeedAndPath)(({ theme }: ThemeProps) => `
+export default styled(SeedAndPath)<Props>`
   .advancedToggle {
-    color: ${theme.textColor};
+    color: var(--textColor);
     cursor: pointer;
-    line-height: ${theme.lineHeight};
+    line-height: var(--lineHeight);
     letter-spacing: 0.04em;
     opacity: 0.65;
     text-transform: uppercase;
 
     > span {
-      font-size: ${theme.inputLabelFontSize};
+      font-size: var(--inputLabelFontSize);
       margin-left: .5rem;
       vertical-align: middle;
     }
   }
 
   .genesisSelection {
-    margin-bottom: ${theme.fontSize};
+    margin-bottom: var(--fontSize);
   }
 
   .seedInput {
-    margin-bottom: ${theme.fontSize};
+    margin-bottom: var(--fontSize);
     textarea {
       height: unset;
     }
@@ -161,4 +160,4 @@ export default styled(SeedAndPath)(({ theme }: ThemeProps) => `
   .seedError {
     margin-bottom: 1rem;
   }
-`);
+`;

packages/extension-ui/src/Popup/Metadata/Request.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { MetadataDef } from '@polkadot/extension-inject/types';
-import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext } from 'react';
 
@@ -92,7 +91,7 @@ function Request ({ className, metaId, request, url }: Props): React.ReactElemen
   );
 }
 
-export default styled(Request)(({ theme }: ThemeProps) => `
+export default styled(Request)<Props>`
   .btnAccept {
     margin: 25px auto 0;
     width: 90%;
@@ -104,7 +103,7 @@ export default styled(Request)(({ theme }: ThemeProps) => `
   }
 
   .icon {
-    background: ${theme.buttonBackgroundDanger};
+    background: var(--buttonBackgroundDanger);
     color: white;
     min-width: 18px;
     width: 14px;
@@ -118,7 +117,7 @@ export default styled(Request)(({ theme }: ThemeProps) => `
 
   .requestInfo {
     align-items: center;
-    background: ${theme.highlightedAreaBackground};
+    background: var(--highlightedAreaBackground);
     display: flex;
     flex-direction: column;
     margin-bottom: 8px;
@@ -127,4 +126,4 @@ export default styled(Request)(({ theme }: ThemeProps) => `
   .requestWarning {
     margin: 24px 24px 0 1.45rem;
   }
-`);
+`;

packages/extension-ui/src/Popup/PhishingDetected.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 import { Trans } from 'react-i18next';
 import { useParams } from 'react-router';
@@ -11,7 +9,7 @@ import { useTranslation } from '../hooks/index.js';
 import { Header } from '../partials/index.js';
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -44,14 +42,14 @@ function PhishingDetected ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(PhishingDetected)(({ theme }: Props) => `
+export default styled(PhishingDetected)<Props>`
   p {
-    color: ${theme.subTextColor};
+    color: var(--subTextColor);
     margin-bottom: 1rem;
     margin-top: 0;
 
     a {
-      color: ${theme.subTextColor};
+      color: var(--subTextColor);
     }
 
     &.websiteAddress {
@@ -59,4 +57,4 @@ export default styled(PhishingDetected)(({ theme }: Props) => `
       text-align: center;
     }
   }
-`);
+`;

packages/extension-ui/src/Popup/RestoreJson.tsx

@@ -174,7 +174,7 @@ function Upload ({ className }: Props): React.ReactElement {
   );
 }
 
-export default styled(Upload)`
+export default styled(Upload)<Props>`
   .restoreButton {
     margin-top: 16px;
   }

packages/extension-ui/src/Popup/Signing/Bytes.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import React, { useMemo } from 'react';
 
 import { isAscii, u8aToString, u8aUnwrapBytes } from '@polkadot/util';
@@ -42,7 +40,7 @@ function Bytes ({ bytes, className, url }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Bytes)(({ theme }: ThemeProps) => `
+export default styled(Bytes)<Props>`
   border: 0;
   display: block;
   font-size: 0.75rem;
@@ -68,10 +66,10 @@ export default styled(Bytes)(({ theme }: ThemeProps) => `
         white-space: pre;
         overflow: auto;
         max-height: calc(100vh - 480px);
-        min-height: ${theme.boxLineHeight};
+        min-height: var(--boxLineHeight);
-        border: 1px solid ${theme.boxBorderColor};
+        border: 1px solid var(--boxBorderColor);
-        background: ${theme.boxBackground};
+        background: var(--boxBackground);
-        line-height: ${theme.boxLineHeight};
+        line-height: var(--boxLineHeight);
       }
     }
   }
@@ -83,4 +81,4 @@ export default styled(Bytes)(({ theme }: ThemeProps) => `
     vertical-align: middle;
     white-space: nowrap;
   }
-`);
+`;

packages/extension-ui/src/Popup/Signing/LedgerSign.tsx

@@ -93,7 +93,7 @@ function LedgerSign ({ accountIndex, addressOffset, className, error, genesisHas
   );
 }
 
-export default styled(LedgerSign)`
+export default styled(LedgerSign)<Props>`
   flex-direction: column;
   padding: 6px 24px;
 

packages/extension-ui/src/Popup/Signing/Qr.tsx

@@ -85,7 +85,7 @@ function Qr ({ address, className, cmd, genesisHash, onSignature, payload }: Pro
   );
 }
 
-export default styled(Qr)`
+export default styled(Qr)<Props>`
   height: 100%;
 
   .qrContainer {

packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx

@@ -130,7 +130,7 @@ function SignArea ({ buttonText, className, error, isExternal, isFirst, setError
   );
 }
 
-export default styled(SignArea)`
+export default styled(SignArea)<Props>`
   flex-direction: column;
   padding: 6px 24px;
 

packages/extension-ui/src/Popup/Signing/Signing.spec.tsx

@@ -13,9 +13,8 @@ import enzyme from 'enzyme';
 import { EventEmitter } from 'events';
 import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
-import { ThemeProvider } from 'styled-components';
 
-import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '../../components/index.js';
+import { ActionContext, Address, Button, Input, SigningReqContext } from '../../components/index.js';
 import * as messaging from '../../messaging.js';
 import * as MetadataCache from '../../MetadataCache.js';
 import { flushAllPromises } from '../../testHelpers.js';
@@ -69,9 +68,7 @@ describe('Signing requests', () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     wrapper = mount(
       <ActionContext.Provider value={onActionStub}>
-        <ThemeProvider theme={themes.dark}>
+        <MockRequestsProvider />
-          <MockRequestsProvider />
-        </ThemeProvider>
       </ActionContext.Provider>
     );
     await act(flushAllPromises);

packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback } from 'react';
@@ -59,7 +57,7 @@ function TransactionIndex ({ className, index, onNextClick, onPreviousClick, tot
   );
 }
 
-export default styled(TransactionIndex)(({ theme }: ThemeProps) => `
+export default styled(TransactionIndex)<Props>`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -68,10 +66,10 @@ export default styled(TransactionIndex)(({ theme }: ThemeProps) => `
 
   .arrowLeft, .arrowRight {
     display: inline-block;
-    color: ${theme.iconNeutralColor};
+    color: var(--iconNeutralColor);
 
     &.active {
-      color: ${theme.primaryColor};
+      color: var(--primaryColor);
       cursor: pointer;
     }
   }
@@ -81,15 +79,15 @@ export default styled(TransactionIndex)(({ theme }: ThemeProps) => `
   }
 
   .currentStep {
-    color: ${theme.primaryColor};
+    color: var(--primaryColor);
-    font-size: ${theme.labelFontSize};
+    font-size: var(--labelFontSize);
-    line-height: ${theme.labelLineHeight};
+    line-height: var(--labelLineHeight);
     margin-left: 10px;
   }
 
   .totalSteps {
-    font-size: ${theme.labelFontSize};
+    font-size: var(--labelFontSize);
-    line-height: ${theme.labelLineHeight};
+    line-height: var(--labelLineHeight);
-    color: ${theme.textColor};
+    color: var(--textColor);
   }
-`);
+`;

packages/extension-ui/src/Popup/Welcome.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback, useContext } from 'react';
 
 import { ActionContext, Box, Button, ButtonArea, List, VerticalSpace } from '../components/index.js';
@@ -10,7 +8,7 @@ import { useTranslation } from '../hooks/index.js';
 import { Header } from '../partials/index.js';
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -48,10 +46,10 @@ function Welcome ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Welcome)(({ theme }: Props) => `
+export default styled(Welcome)<Props>`
   p {
-    color: ${theme.subTextColor};
+    color: var(--subTextColor);
     margin-bottom: 6px;
     margin-top: 0;
   }
-`);
+`;

packages/extension-ui/src/components/AccountNamePasswordCreation.tsx

@@ -20,7 +20,13 @@ function AccountNamePasswordCreation ({ buttonLabel, isBusy, onBackClick, onCrea
   const [password, setPassword] = useState<string | null>(null);
 
   const _onCreate = useCallback(
-    () => name && password && onCreate(name, password),
+    (): void => {
+      if (name && password) {
+        Promise
+          .resolve(onCreate(name, password))
+          .catch(console.error);
+      }
+    },
     [name, password, onCreate]
   );
 

packages/extension-ui/src/components/ActionBar.tsx

@@ -18,7 +18,7 @@ function ActionBar ({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(ActionBar)`
+export default styled(ActionBar)<Props>`
   align-content: flex-end;
   display: flex;
   justify-content: space-between;

packages/extension-ui/src/components/ActionText.tsx

@@ -3,7 +3,6 @@
 
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import type { MouseEventHandler } from 'react';
-import type { ThemeProps } from '../types.js';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -29,21 +28,21 @@ function ActionText ({ className, icon, onClick, text }: Props): React.ReactElem
   );
 }
 
-export default styled(ActionText)(({ theme }: ThemeProps) => `
+export default styled(ActionText)<Props>`
   cursor: pointer;
 
   span {
-    color: ${theme.labelColor}
+    color: var(--labelColor);
-    font-size: ${theme.labelFontSize};
+    font-size: var(--labelFontSize);
-    line-height: ${theme.labelLineHeight};
+    line-height: var(--labelLineHeight);
     text-decoration-line: underline;
   }
 
   .svg-inline--fa {
-    color: ${theme.iconNeutralColor};
+    color: var(--iconNeutralColor);
     display: inline-block;
     margin-right: 0.3rem;
     position: relative;
     top: 2px;
   }
-`);
+`;

packages/extension-ui/src/components/Address.tsx

@@ -6,7 +6,6 @@ import type { Chain } from '@polkadot/extension-chains/types';
 import type { IconTheme } from '@polkadot/react-identicon/types';
 import type { SettingsStruct } from '@polkadot/ui-settings/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { ThemeProps } from '../types.js';
 
 import { faUsb } from '@fortawesome/free-brands-svg-icons';
 import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
@@ -305,9 +304,9 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
   );
 }
 
-export default styled(Address)(({ theme }: ThemeProps) => `
+export default styled(Address)<Props>`
-  background: ${theme.boxBackground};
+  background: var(--boxBackground);
-  border: 1px solid ${theme.boxBorderColor};
+  border: 1px solid var(--boxBorderColor);
   box-sizing: border-box;
   border-radius: 4px;
   margin-bottom: 8px;
@@ -320,7 +319,7 @@ export default styled(Address)(({ theme }: ThemeProps) => `
     top: 0;
 
     &.chain {
-      background: ${theme.primaryColor};
+      background: var(--primaryColor);
       border-radius: 0 0 0 10px;
       color: white;
       padding: 0.1rem 0.5rem 0.1rem 0.75rem;
@@ -338,9 +337,9 @@ export default styled(Address)(({ theme }: ThemeProps) => `
       width: 14px;
       height: 14px;
       margin-right: 10px;
-      color: ${theme.accountDotsIconColor};
+      color: var(--accountDotsIconColor);
       &:hover {
-        color: ${theme.labelColor};
+        color: var(--labelColor);
         cursor: pointer;
       }
     }
@@ -352,16 +351,16 @@ export default styled(Address)(({ theme }: ThemeProps) => `
     }
 
     .hiddenIcon {
-      color: ${theme.errorColor};
+      color: var(--errorColor);
       &:hover {
-        color: ${theme.accountDotsIconColor};
+        color: var(--accountDotsIconColor);
       }
     }
   }
 
   .externalIcon, .hardwareIcon {
     margin-right: 0.3rem;
-    color: ${theme.labelColor};
+    color: var(--labelColor);
     width: 0.875em;
   }
 
@@ -409,8 +408,8 @@ export default styled(Address)(({ theme }: ThemeProps) => `
   }
 
   .parentName {
-    color: ${theme.labelColor};
+    color: var(--labelColor);
-    font-size: ${theme.inputLabelFontSize};
+    font-size: var(--inputLabelFontSize);
     line-height: 14px;
     overflow: hidden;
     padding: 0.25rem 0 0 0.8rem;
@@ -422,23 +421,23 @@ export default styled(Address)(({ theme }: ThemeProps) => `
   .fullAddress {
     overflow: hidden;
     text-overflow: ellipsis;
-    color: ${theme.labelColor};
+    color: var(--labelColor);
     font-size: 12px;
     line-height: 16px;
   }
 
   .detailsIcon {
-    background: ${theme.accountDotsIconColor};
+    background: var(--accountDotsIconColor);
     width: 3px;
     height: 19px;
 
     &.active {
-      background: ${theme.primaryColor};
+      background: var(--primaryColor);
     }
   }
 
   .deriveIcon {
-    color: ${theme.labelColor};
+    color: var(--labelColor);
     position: absolute;
     top: 5px;
     width: 9px;
@@ -471,12 +470,12 @@ export default styled(Address)(({ theme }: ThemeProps) => `
       top: 25%;
       bottom: 25%;
       width: 1px;
-      background: ${theme.boxBorderColor};
+      background: var(--boxBorderColor);
     }
 
     &:hover {
       cursor: pointer;
-      background: ${theme.readonlyInputBackground};
+      background: var(--readonlyInputBackground);
     }
   }
-`);
+`;

packages/extension-ui/src/components/BackButton.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
@@ -30,18 +28,18 @@ function BackButton ({ className, onClick }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(BackButton)(({ theme }: ThemeProps) => `
+export default styled(BackButton)<Props>`
-  background: ${theme.backButtonBackground};
+  background: var(--backButtonBackground);
   margin-right: 11px;
   width: 42px;
 
   .arrowLeft {
-    color: ${theme.backButtonTextColor};
+    color: var(--backButtonTextColor);
     display: block;
     margin: auto;
   }
 
   &:not(:disabled):hover {
-    background: ${theme.backButtonBackgroundHover};
+    background: var(--backButtonBackgroundHover);
   }
-`);
+`;

packages/extension-ui/src/components/Box.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
@@ -22,20 +20,20 @@ function Box ({ banner, children, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default styled(Box)(({ theme }: ThemeProps) => `
+export default styled(Box)<Props>`
-  background: ${theme.readonlyInputBackground};
+  background: var(--readonlyInputBackground);
-  border: 1px solid ${theme.inputBorderColor};
+  border: 1px solid var(--inputBorderColor);
-  border-radius: ${theme.borderRadius};
+  border-radius: var(--borderRadius);
-  color: ${theme.subTextColor};
+  color: var(--subTextColor);
-  font-family: ${theme.fontFamily};
+  font-family: var(--fontFamily);
-  font-size: ${theme.fontSize};
+  font-size: var(--fontSize);
   margin: 0.75rem 24px;
-  padding: ${theme.boxPadding};
+  padding: var(--boxPadding);
   position: relative;
 
   .banner {
     background: darkorange;
-    border-radius: 0 ${theme.borderRadius} 0 ${theme.borderRadius};
+    border-radius: 0 var(--borderRadius) 0 var(--borderRadius);
     color: white;
     font-size: 0.75rem;
     padding: 0.25rem 0.5rem;
@@ -43,4 +41,4 @@ export default styled(Box)(({ theme }: ThemeProps) => `
     right: 0;
     top: 0;
   }
-`);
+`;

packages/extension-ui/src/components/BoxWithLabel.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 import styled from 'styled-components';
 
@@ -27,18 +25,18 @@ function BoxWithLabel ({ className, label, value }: Props): React.ReactElement<P
   );
 }
 
-export default styled(BoxWithLabel)(({ theme }: ThemeProps) => `
+export default styled(BoxWithLabel)<Props>`
   .seedBox {
-    background: ${theme.readonlyInputBackground};
+    background: var(--readonlyInputBackground);
     box-shadow: none;
-    border-radius: ${theme.borderRadius};
+    border-radius: var(--borderRadius);
-    border: 1px solid ${theme.inputBorderColor};
+    border: 1px solid var(--inputBorderColor);
-    border-color: ${theme.inputBorderColor};
+    border-color: var(--inputBorderColor);
     box-sizing: border-box;
     display: block;
-    font-family: ${theme.fontFamily};
+    font-family: var(--fontFamily);
     outline: none;
     resize: none;
     width: 100%;
   }
-`);
+`;

packages/extension-ui/src/components/Button.tsx

@@ -1,24 +1,22 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback } from 'react';
 
 import { styled } from '../styled.js';
 import Spinner from './Spinner.js';
 
-interface Props extends ThemeProps {
+export interface ButtonProps {
   className?: string;
   children?: React.ReactNode;
   isBusy?: boolean;
   isDanger?: boolean;
   isDisabled?: boolean;
-  onClick?: () => void | Promise<void | boolean>;
+  onClick?: () => void | Promise<void | boolean> | null;
   to?: string;
 }
 
-function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: Props): React.ReactElement<Props> {
+function Button ({ children, className = '', isBusy, isDisabled, onClick, to }: ButtonProps): React.ReactElement<ButtonProps> {
   const _onClick = useCallback(
     (): void => {
       if (isBusy || isDisabled) {
@@ -47,16 +45,16 @@ function Button ({ children, className = '', isBusy, isDisabled, onClick, to }:
   );
 }
 
-export default styled(Button)(({ isDanger, theme }: Props) => `
+export default styled(Button)<ButtonProps>(({ isDanger }) => `
-  background: ${isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
+  background: var(${isDanger ? '--buttonBackgroundDanger' : '--buttonBackground'});
   cursor: pointer;
   display: block;
   width: 100%;
   height: ${isDanger ? '40px' : '48px'};
   box-sizing: border-box;
   border: none;
-  border-radius: ${theme.borderRadius};
+  border-radius: var(--borderRadius);
-  color: ${theme.buttonTextColor};
+  color: var(--buttonTextColor);
   font-size: 15px;
   line-height: 20px;
   padding: 0 1rem;
@@ -68,7 +66,7 @@ export default styled(Button)(({ isDanger, theme }: Props) => `
   }
 
   &:not(:disabled):hover {
-    background: ${isDanger ? theme.buttonBackgroundDangerHover : theme.buttonBackgroundHover};
+    background: var(${isDanger ? '--buttonBackgroundDangerHover' : '--buttonBackgroundHover'});
   }
 
   .busyOverlay,
@@ -78,7 +76,7 @@ export default styled(Button)(({ isDanger, theme }: Props) => `
 
   .disabledOverlay {
     background: rgba(96,96,96,0.75);
-    border-radius: ${theme.borderRadius};
+    border-radius: var(--borderRadius);
     bottom: 0;
     left: 0;
     position: absolute;

packages/extension-ui/src/components/ButtonArea.tsx

@@ -1,13 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   children: React.ReactNode;
 }
@@ -20,11 +18,11 @@ function ButtonArea ({ children, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default styled(ButtonArea)(({ theme }: ThemeProps) => `
+export default styled(ButtonArea)<Props>`
   display: flex;
   flex-direction: row;
-  background: ${theme.highlightedAreaBackground};
+  background: var(--highlightedAreaBackground);
-  border-top: 1px solid ${theme.inputBorderColor};
+  border-top: 1px solid var(--inputBorderColor);
   padding: 12px 24px;
   margin-left: 0;
   margin-right: 0;
@@ -32,4 +30,4 @@ export default styled(ButtonArea)(({ theme }: ThemeProps) => `
   & > button:not(:last-of-type) {
     margin-right: 8px;
   }
-`);
+`;

packages/extension-ui/src/components/Checkbox.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback, useEffect } from 'react';
 
 import Checkmark from '../assets/checkmark.svg';
@@ -53,8 +51,8 @@ function Checkbox ({ checked, className, indeterminate, label, onChange, onClick
   );
 }
 
-export default styled(Checkbox)(({ theme }: ThemeProps) => `
+export default styled(Checkbox)<Props>`
-  margin: ${theme.boxMargin};
+  margin: var(--boxMargin);
 
   label {
     display: block;
@@ -63,9 +61,9 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => `
     user-select: none;
     padding-left: 24px;
     padding-top: 1px;
-    color: ${theme.subTextColor};
+    color: var(--subTextColor);
-    font-size: ${theme.fontSize};
+    font-size: var(--fontSize);
-    line-height: ${theme.lineHeight};
+    line-height: var(--lineHeight);
 
     & input {
       position: absolute;
@@ -81,10 +79,11 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => `
       left: 0;
       height: 16px;
       width: 16px;
-      border-radius: ${theme.borderRadius};
+      border-radius: var(--borderRadius);
-      background-color: ${theme.readonlyInputBackground};
+      background-color: var(--readonlyInputBackground);
-      border: 1px solid ${theme.inputBorderColor};
+      border: 1px solid var(--inputBorderColor);
-      border: 1px solid ${theme.inputBorderColor};
+      border: 1px solid var(--inputBorderColor);
+
       &:after {
         content: '';
         display: none;
@@ -95,12 +94,12 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => `
         top: 2px;
         mask: url(${Checkmark});
         mask-size: cover;
-        background: ${theme.primaryColor};
+        background: var(--primaryColor);
       }
     }
 
     &:hover input ~ span {
-      background-color: ${theme.inputBackground};
+      background-color: var(--inputBackground);
     }
 
     input:checked ~ span:after {
@@ -108,7 +107,7 @@ export default styled(Checkbox)(({ theme }: ThemeProps) => `
     }
 
     input:indeterminate ~ span {
-      background: ${theme.primaryColor}
+      background: var(--primaryColor)
     }
   }
-`);
+`;

packages/extension-ui/src/components/Dropdown.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback } from 'react';
 
 import arrow from '../assets/arrow-down.svg';
@@ -10,11 +8,11 @@ import { styled } from '../styled.js';
 import Label from './Label.js';
 
 interface DropdownOption {
-  text: string;
+  text: string | React.ReactNode;
-  value: string;
+  value?: string | number | null;
 }
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   defaultValue?: string | null;
   isDisabled?: boolean
@@ -22,9 +20,10 @@ interface Props extends ThemeProps {
   isFocussed?: boolean;
   label: string;
   onBlur?: () => void;
-  onChange?: (value: string) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onChange?: (value: any) => void;
   options: DropdownOption[];
-  value?: string;
+  value?: number | string | null;
 }
 
 function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onBlur, onChange, options, value }: Props): React.ReactElement<Props> {
@@ -46,12 +45,12 @@ function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onB
           disabled={isDisabled}
           onBlur={onBlur}
           onChange={_onChange}
-          value={value}
+          value={value ?? undefined}
         >
           {options.map(({ text, value }): React.ReactNode => (
             <option
               key={value}
-              value={value}
+              value={value ?? undefined}
             >
               {text}
             </option>
@@ -62,23 +61,23 @@ function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onB
   );
 }
 
-export default React.memo(styled(Dropdown)(({ isError, label, theme }: Props) => `
+export default React.memo(styled(Dropdown)<Props>(({ isError, label }) => `
   position: relative;
 
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    background: ${theme.readonlyInputBackground};
+    background: var(--readonlyInputBackground);
-    border-color: ${isError ? theme.errorBorderColor : theme.inputBorderColor};
+    border-color: var(${isError ? '--errorBorderColor' : '--inputBorderColor'});
-    border-radius: ${theme.borderRadius};
+    border-radius: var(--borderRadius);
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: ${isError ? theme.errorBorderColor : theme.textColor};
+    color: var(${isError ? '--errorBorderColor' : '--textColor'});
     display: block;
-    font-family: ${theme.fontFamily};
+    font-family: var(--fontFamily);
-    font-size: ${theme.fontSize};
+    font-size: var(--fontSize);
     padding: 0.5rem 0.75rem;
     width: 100%;
     cursor: pointer;

packages/extension-ui/src/components/Icon.tsx

@@ -22,7 +22,7 @@ function Icon ({ className = '', icon, onClick }: Props): React.ReactElement<Pro
   );
 }
 
-export default styled(Icon)(({ onClick }: Props) => `
+export default styled(Icon)<Props>(({ onClick }) => `
   background: white;
   border-radius: 50%;
   box-sizing: border-box;

packages/extension-ui/src/components/Identicon.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconTheme } from '@polkadot/react-identicon/types';
-import type { ThemeProps } from '../types.js';
 
 import React from 'react';
 
@@ -34,7 +33,7 @@ function Identicon ({ className, iconTheme, onCopy, prefix, value }: Props): Rea
   );
 }
 
-export default styled(Identicon)(({ theme }: ThemeProps) => `
+export default styled(Identicon)<Props>`
   background: rgba(192, 192, 292, 0.25);
   border-radius: 50%;
   display: flex;
@@ -42,7 +41,7 @@ export default styled(Identicon)(({ theme }: ThemeProps) => `
 
   .container:before {
     box-shadow: none;
-    background: ${theme.identiconBackground};
+    background: var(--identiconBackground);
   }
 
   svg {
@@ -50,4 +49,4 @@ export default styled(Identicon)(({ theme }: ThemeProps) => `
       display: none;
     }
   }
-`);
+`;

packages/extension-ui/src/components/InputFileWithLabel.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DropzoneRef } from 'react-dropzone';
-import type { ThemeProps } from '../types.js';
 
 import React, { createRef, useCallback, useState } from 'react';
 import Dropzone from 'react-dropzone';
@@ -131,11 +130,11 @@ function InputFile ({ accept, className = '', clearContent, convertHex, isDisabl
     : dropZone;
 }
 
-export default React.memo(styled(InputFile)(({ isError, theme }: InputFileProps & ThemeProps) => `
+export default React.memo(styled(InputFile)<InputFileProps>(({ isError }) => `
-  border: 1px solid ${isError ? theme.errorBorderColor : theme.inputBorderColor};
+  border: 1px solid var(${isError ? '--errorBorderColor' : '--inputBorderColor'});
-  background: ${theme.inputBackground};
+  background: var(--inputBackground);
-  border-radius: ${theme.borderRadius};
+  border-radius: var(--borderRadius);
-  color: ${isError ? theme.errorBorderColor : theme.textColor};
+  color: var(${isError ? '--errorBorderColor' : '--textColor'});
   font-size: 1rem;
   margin: 0.25rem 0;
   overflow-wrap: anywhere;

packages/extension-ui/src/components/InputFilter.tsx

@@ -1,8 +1,6 @@
 // Copyright 2017-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useRef } from 'react';
@@ -10,7 +8,7 @@ import React, { useCallback, useRef } from 'react';
 import { styled } from '../styled.js';
 import { Input } from './TextInputs.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   onChange: (filter: string) => void;
   placeholder: string;
@@ -54,7 +52,7 @@ function InputFilter ({ className, onChange, placeholder, value, withReset = fal
   );
 }
 
-export default styled(InputFilter)(({ theme }: Props) => `
+export default styled(InputFilter)<Props>`
   padding-left: 1rem !important;
   padding-right: 1rem !important;
   position: relative;
@@ -63,7 +61,7 @@ export default styled(InputFilter)(({ theme }: Props) => `
     position: absolute;
     right: 28px;
     top: 12px;
-    color: ${theme.iconNeutralColor};
+    color: var(--iconNeutralColor);
     cursor: pointer;
   }
-`);
+`;

packages/extension-ui/src/components/InputWithLabel.tsx

@@ -80,7 +80,7 @@ function InputWithLabel ({ className, defaultValue, disabled, isError, isFocused
   );
 }
 
-export default styled(InputWithLabel)`
+export default styled(InputWithLabel)<Props>`
   margin-bottom: 16px;
 
   &.withoutMargin {

packages/extension-ui/src/components/Label.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
@@ -22,15 +20,15 @@ function Label ({ children, className, label }: Props): React.ReactElement<Props
   );
 }
 
-export default styled(Label)(({ theme }: ThemeProps) => `
+export default styled(Label)<Props>`
-  color: ${theme.textColor};
+  color: var(--textColor);
 
   label {
-    font-size: ${theme.inputLabelFontSize};
+    font-size: var(--inputLabelFontSize);
     line-height: 14px;
     letter-spacing: 0.04em;
     opacity: 0.65;
     margin-bottom: 12px;
     text-transform: uppercase;
   }
-`);
+`;

packages/extension-ui/src/components/Link.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
@@ -53,21 +51,21 @@ function Link ({ children, className = '', isDisabled, onClick, title, to }: Pro
     );
 }
 
-export default styled(Link)(({ isDanger, theme }: Props & ThemeProps) => `
+export default styled(Link)<Props>(({ isDanger }) => `
   align-items: center;
-  color: ${isDanger ? theme.textColorDanger : theme.textColor};
+  color: var(${isDanger ? '--textColorDanger' : '--textColor'});
   display: flex;
   opacity: 0.85;
   text-decoration: none;
   vertical-align: middle;
 
   &:hover {
-    color: ${isDanger ? theme.textColorDanger : theme.textColor};
+    color: var(${isDanger ? '--textColorDanger' : '--textColor'});
     opacity: 1.0;
   }
 
   &:visited {
-    color: ${isDanger ? theme.textColorDanger : theme.textColor};
+    color: var(${isDanger ? '--textColorDanger' : '--textColor'});
   }
 
   &.isDisabled {

packages/extension-ui/src/components/List.tsx

@@ -1,13 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   children: React.ReactNode;
 }
@@ -18,7 +16,7 @@ const List = ({ children, className }: Props) => (
   </ul>
 );
 
-export default styled(List)(({ theme }: ThemeProps) => `
+export default styled(List)<Props>`
   list-style: none;
   padding-inline-start: 10px;
   padding-inline-end: 10px;
@@ -31,10 +29,10 @@ export default styled(List)(({ theme }: ThemeProps) => `
 
   li::before {
     content: '\\2022';
-    color: ${theme.primaryColor};
+    color: var(--primaryColor);
     font-size: 30px;
     font-weight: bold;
     margin-right: 10px;
     vertical-align: -20%;
   }
-`);
+`;

packages/extension-ui/src/components/Main.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
@@ -20,22 +18,22 @@ function Main ({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Main)(({ theme }: ThemeProps) => `
+export default styled(Main)<Props>`
   display: flex;
   flex-direction: column;
   height: calc(100vh - 2px);
-  background: ${theme.background};
+  background: var(--background);
-  color: ${theme.textColor};
+  color: var(--textColor);
-  font-size: ${theme.fontSize};
+  font-size: var(--fontSize);
-  line-height: ${theme.lineHeight};
+  line-height: var(--lineHeight);
-  border: 1px solid ${theme.inputBorderColor};
+  border: 1px solid var(--inputBorderColor);
 
   * {
-    font-family: ${theme.fontFamily};
+    font-family: var(--fontFamily);
   }
 
   > * {
     padding-left: 24px;
     padding-right: 24px;
   }
-`);
+`;

packages/extension-ui/src/components/Menu.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
@@ -24,15 +22,15 @@ function Menu ({ children, className, reference }: Props): React.ReactElement<Pr
   );
 }
 
-export default styled(Menu)(({ theme }: ThemeProps) => `
+export default styled(Menu)<Props>`
-  background: ${theme.popupBackground};
+  background: var(--popupBackground);
   border-radius: 4px;
-  border: 1px solid ${theme.boxBorderColor};
+  border: 1px solid var(--boxBorderColor);
   box-sizing: border-box;
-  box-shadow: 0 0 10px ${theme.boxShadow};
+  box-shadow: 0 0 10px var(--boxShadow);
   margin-top: 60px;
   padding: 16px 0;
   position: absolute;
   right: 0;
   z-index: 2;
-`);
+`;

packages/extension-ui/src/components/MenuDivider.tsx

@@ -1,13 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
 }
 
@@ -17,8 +15,8 @@ function MenuDivider ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(MenuDivider)(({ theme }: Props) => `
+export default styled(MenuDivider)<Props>`
   padding-top: 16px;
   margin-bottom: 16px;
-  border-bottom: 1px solid ${theme.inputBorderColor};
+  border-bottom: 1px solid var(--inputBorderColor);
-`);
+`;

packages/extension-ui/src/components/MenuItem.tsx

@@ -1,13 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   children: React.ReactNode;
   className?: string;
   noBorder?: boolean;
@@ -25,7 +23,7 @@ function MenuItem ({ children, className = '', title }: Props): React.ReactEleme
   );
 }
 
-export default styled(MenuItem)(({ theme }: ThemeProps) => `
+export default styled(MenuItem)<Props>`
   min-width: 13rem;
   padding: 0 16px;
   max-width: 100%;
@@ -33,15 +31,15 @@ export default styled(MenuItem)(({ theme }: ThemeProps) => `
   > .itemTitle {
     margin: 0;
     width: 100%;
-    font-size: ${theme.inputLabelFontSize};
+    font-size: var(--inputLabelFontSize);
     line-height: 14px;
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    color: ${theme.textColor};
+    color: var(--textColor);
     opacity: 0.65;
   }
 
   &+&.isTitled {
     margin-top: 16px;
   }
-`);
+`;

packages/extension-ui/src/components/MnemonicSeed.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { MouseEventHandler } from 'react';
-import type { ThemeProps } from '../types.js';
 
 import { faCopy } from '@fortawesome/free-regular-svg-icons';
 import React from 'react';
@@ -44,7 +43,7 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<P
   );
 }
 
-export default styled(MnemonicSeed)(({ theme }: ThemeProps) => `
+export default styled(MnemonicSeed)<Props>`
   margin-bottom: 21px;
 
   .buttonsRow {
@@ -58,13 +57,13 @@ export default styled(MnemonicSeed)(({ theme }: ThemeProps) => `
 
   .mnemonicDisplay {
     .seedBox {
-      color: ${theme.primaryColor};
+      color: var(--primaryColor);
-      font-size: ${theme.fontSize};
+      font-size: var(--fontSize);
       height: unset;
       letter-spacing: -0.01em;
-      line-height: ${theme.lineHeight};
+      line-height: var(--lineHeight);
       margin-bottom: 10px;
       padding: 14px;
     }
   }
-`);
+`;

packages/extension-ui/src/components/NextStepButton.tsx

@@ -1,7 +1,7 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
+import type { ButtonProps } from './Button.js';
 
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -10,9 +10,7 @@ import React from 'react';
 import { styled } from '../styled.js';
 import Button from './Button.js';
 
-type Props = React.ComponentProps<typeof Button>;
+function NextStepButton ({ children, ...props }: ButtonProps): React.ReactElement<ButtonProps> {
-
-function NextStepButton ({ children, ...props }: Props): React.ReactElement<Props> {
   return (
     <Button {...props}>
       {children}
@@ -25,11 +23,11 @@ function NextStepButton ({ children, ...props }: Props): React.ReactElement<Prop
   );
 }
 
-export default styled(NextStepButton)(({ theme }: ThemeProps) => `
+export default styled(NextStepButton)<ButtonProps>`
   .arrowRight{
     float: right;
     margin-top: 4px;
     margin-right: 1px;
-    color: ${theme.buttonTextColor};
+    color: var(--buttonTextColor);
   }
-`);
+`;

packages/extension-ui/src/components/RemoveAuth.tsx

@@ -1,15 +1,13 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props{
+interface Props {
   className?: string
   onRemove: () => void
 }
@@ -25,12 +23,12 @@ function RemoveAuth ({ className, onRemove }: Props): React.ReactElement {
   );
 }
 
-export default styled(RemoveAuth)(({ theme }: ThemeProps) => `
+export default styled(RemoveAuth)<Props>`
   cursor: pointer;
-  color: ${theme.labelColor};
+  color: var(--labelColor);
   margin-right: 1rem;
 
   &.selected {
-    color: ${theme.primaryColor};
+    color: var(--primaryColor);
   }
-`);
+`;

packages/extension-ui/src/components/Spinner.tsx

@@ -1,14 +1,12 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import spinnerSrc from '../assets/spinner.png';
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   size?: 'normal';
 }
@@ -22,7 +20,7 @@ function Spinner ({ className = '', size = 'normal' }: Props): React.ReactElemen
   );
 }
 
-export default React.memo(styled(Spinner)`
+export default React.memo(styled(Spinner)<Props>`
   bottom: 0rem;
   height: 3rem;
   left: 50%;

packages/extension-ui/src/components/Svg.tsx

@@ -1,21 +1,19 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   src: string;
 }
 
-const Svg = ({ className }: Props) => <span className={className} />;
+const Svg = ({ className }: Props) => <span className={`Comp--Svg ${className}`} />;
 
-export default styled(Svg)(({ src, theme }: Props) => `
+export default styled(Svg)<Props>(({ src }) => `
-  background: ${theme.textColor};
+  background: var(--textColor);
   display: inline-block;
   mask: url(${src});
   mask-size: cover;

packages/extension-ui/src/components/Switch.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback } from 'react';
 
 import { styled } from '../styled.js';
@@ -38,7 +36,7 @@ function Switch ({ checked, checkedLabel, className, onChange, uncheckedLabel }:
   );
 }
 
-export default styled(Switch)(({ theme }: ThemeProps) => `
+export default styled(Switch)<Props>`
   label {
     position: relative;
     display: inline-block;
@@ -64,10 +62,10 @@ export default styled(Switch)(({ theme }: ThemeProps) => `
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: ${theme.readonlyInputBackground};
+    background-color: var(--readonlyInputBackground);
     transition: 0.2s;
     border-radius: 100px;
-    border: 1px solid ${theme.inputBorderColor};
+    border: 1px solid var(--inputBorderColor);
 
     &:before {
       position: absolute;
@@ -76,9 +74,9 @@ export default styled(Switch)(({ theme }: ThemeProps) => `
       width: 16px;
       left: 4px;
       bottom: 3px;
-      background-color: ${theme.primaryColor};
+      background-color: var(--primaryColor);
       transition: 0.4s;
       border-radius: 50%;
     }
   }
-`);
+`;

packages/extension-ui/src/components/Table.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React from 'react';
 
 import { styled } from '../styled.js';
@@ -23,11 +21,11 @@ function Table ({ children, className = '', isFull }: Props): React.ReactElement
   );
 }
 
-export default React.memo(styled(Table)(({ theme }: ThemeProps) => `
+export default React.memo(styled(Table)<Props>`
   border: 0;
   display: block;
-  font-size: ${theme.labelFontSize};
+  font-size: var(--labelFontSize);
-  line-height: ${theme.labelLineHeight};
+  line-height: var(--labelLineHeight);
   margin-bottom: 1rem;
 
   &.isFull {
@@ -73,4 +71,4 @@ export default React.memo(styled(Table)(({ theme }: ThemeProps) => `
       white-space: normal;
     }
   }
-`));
+`);

packages/extension-ui/src/components/TextInputs.ts

@@ -1,26 +1,24 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { css } from 'styled-components';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   withError?: boolean;
 }
 
-const TextInput = css(({ theme, withError }: Props) => `
+const TextInput = css<Props>(({ withError }) => `
-  background: ${theme.inputBackground};
+  background: var(--inputBackground);
-  border-radius: ${theme.borderRadius};
+  border-radius: var(--borderRadius);
-  border: 1px solid ${theme.inputBorderColor};
+  border: 1px solid var(--inputBorderColor);
-  border-color: ${withError ? theme.errorBorderColor : theme.inputBorderColor};
+  border-color: var(${withError ? '--errorBorderColor' : '--inputBorderColor'});
   box-sizing: border-box;
-  color: ${withError ? theme.errorColor : theme.textColor};
+  color: var(${withError ? '--errorColor' : '--textColor'});
   display: block;
-  font-family: ${theme.fontFamily};
+  font-family: var(--fontFamily);
-  font-size: ${theme.fontSize};
+  font-size: var(--fontSize);
   height: 40px;
   outline: none;
   padding: 0.5rem 0.75rem;
@@ -28,7 +26,7 @@ const TextInput = css(({ theme, withError }: Props) => `
   width: 100%;
 
   &:read-only {
-    background: ${theme.readonlyInputBackground};
+    background: var(--readonlyInputBackground);
     box-shadow: none;
     outline: none;
   }

packages/extension-ui/src/components/Toast/Toast.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types.js';
-
 import React from 'react';
 
 import { styled } from '../../styled.js';
@@ -10,6 +8,7 @@ import { styled } from '../../styled.js';
 interface Props {
   content: React.ReactChild;
   className?: string;
+  visible?: boolean;
 }
 
 function Toast ({ className, content }: Props): React.ReactElement<Props> {
@@ -20,7 +19,7 @@ function Toast ({ className, content }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Toast)<{visible: boolean}>`
+export default styled(Toast)<Props>`
   position: fixed;
   display: ${({ visible }): string => visible ? 'block' : 'none'};
   height: 40px;
@@ -32,6 +31,6 @@ export default styled(Toast)<{visible: boolean}>`
   && {
     margin: auto;
     border-radius: 25px;
-    background: ${({ theme }: ThemeProps): string => theme.highlightedAreaBackground};
+    background: var(--highlightedAreaBackground);
   }
 `;

packages/extension-ui/src/components/VerticalSpace.tsx

@@ -13,6 +13,6 @@ function VerticalSpace ({ className }: Props): React.ReactElement<Props> {
   return <div className={className} />;
 }
 
-export default styled(VerticalSpace)`
+export default styled(VerticalSpace)<Props>`
   height: 100%;
 `;

packages/extension-ui/src/components/View.tsx

@@ -1,48 +1,44 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
+import React, { useEffect } from 'react';
-import type { AvailableThemes } from './index.js';
+import { createGlobalStyle } from 'styled-components';
-
-import React, { useCallback, useState } from 'react';
-import { createGlobalStyle, ThemeProvider } from 'styled-components';
 
 // FIXME We should not import from index when this one is imported there as well
-import { chooseTheme, Main, themes, ThemeSwitchContext } from './index.js';
+import { chooseTheme, Main, ThemeSwitchContext } from './index.js';
 
 interface Props {
   children: React.ReactNode;
   className?: string;
 }
 
+function setGlobalTheme (theme: string): void {
+  const _theme = theme === 'dark'
+    ? 'dark'
+    : 'light';
+
+  localStorage.setItem('theme', _theme);
+  document?.documentElement?.setAttribute('data-theme', _theme);
+}
+
 function View ({ children, className }: Props): React.ReactElement<Props> {
-  const [theme, setTheme] = useState(chooseTheme());
+  useEffect((): void => {
-
+    setGlobalTheme(chooseTheme());
-  const switchTheme = useCallback(
+  }, []);
-    (theme: AvailableThemes): void => {
-      localStorage.setItem('theme', theme);
-      setTheme(theme);
-    },
-    []
-  );
-
-  const _theme = themes[theme];
 
   return (
-    <ThemeSwitchContext.Provider value={switchTheme}>
+    <ThemeSwitchContext.Provider value={setGlobalTheme}>
-      <ThemeProvider theme={_theme}>
+      <BodyTheme />
-        <BodyTheme theme={_theme} />
+      <Main className={className}>
-        <Main className={className}>
+        {children}
-          {children}
+      </Main>
-        </Main>
-      </ThemeProvider>
     </ThemeSwitchContext.Provider>
   );
 }
 
-const BodyTheme = createGlobalStyle<ThemeProps>`
+const BodyTheme = createGlobalStyle`
   body {
-    background-color: ${({ theme }: ThemeProps): string => theme.bodyColor};
+    background-color: var(--bodyColor);
   }
 
   html {

packages/extension-ui/src/components/Warning.tsx

@@ -1,15 +1,13 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   children: React.ReactNode;
   className?: string;
   isBelowInput?: boolean;
@@ -28,18 +26,18 @@ function Warning ({ children, className = '', isBelowInput, isDanger }: Props):
   );
 }
 
-export default React.memo(styled(Warning)<Props>(({ isDanger, theme }: Props) => `
+export default React.memo(styled(Warning)<Props>(({ isDanger }) => `
   display: flex;
   flex-direction: row;
   padding-left: 18px;
-  color: ${theme.subTextColor};
+  color: var(--subTextColor);
   margin-right: 20px;
   margin-top: 6px;
-  border-left: ${`0.25rem solid ${theme.iconWarningColor}`};
+  border-left: 0.25rem solid var(--iconWarningColor);
 
   &.belowInput {
-    font-size: ${theme.labelFontSize};
+    font-size: var(--labelFontSize);
-    line-height: ${theme.labelLineHeight};
+    line-height: var(--labelLineHeight);
 
     &.danger {
       margin-top: -10px;
@@ -47,7 +45,7 @@ export default React.memo(styled(Warning)<Props>(({ isDanger, theme }: Props) =>
   }
 
   &.danger {
-    border-left-color: ${theme.buttonBackgroundDanger};
+    border-left-color: var(--buttonBackgroundDanger);
   }
 
   .warning-message {
@@ -57,6 +55,6 @@ export default React.memo(styled(Warning)<Props>(({ isDanger, theme }: Props) =>
 
   .warningImage {
     margin: 5px 10px 5px 0;
-    color: ${isDanger ? theme.iconDangerColor : theme.iconWarningColor};
+    color: var(${isDanger ? '--iconDangerColor' : '--iconWarningColor'});
   }
 `));

packages/extension-ui/src/components/contexts.tsx

@@ -3,7 +3,7 @@
 
 import type { AccountsContext, AuthorizeRequest, MetadataRequest, SigningRequest } from '@polkadot/extension-base/background/types';
 import type { SettingsStruct } from '@polkadot/ui-settings/types';
-import type { AvailableThemes } from './themes';
+import type { Theme } from './themes.js';
 
 import React from 'react';
 
@@ -18,7 +18,7 @@ const MediaContext = React.createContext<boolean>(false);
 const MetadataReqContext = React.createContext<MetadataRequest[]>([]);
 const SettingsContext = React.createContext<SettingsStruct>(settings.get());
 const SigningReqContext = React.createContext<SigningRequest[]>([]);
-const ThemeSwitchContext = React.createContext<(theme: AvailableThemes) => void>(noop);
+const ThemeSwitchContext = React.createContext<(theme: Theme) => void>(noop);
 const ToastContext = React.createContext<({show: (message: string) => void})>({ show: noop });
 
 export { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext, ThemeSwitchContext, ToastContext };

packages/extension-ui/src/components/themes.ts

@@ -1,91 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-const darkTheme = {
+export declare type Theme = 'light' | 'dark';
-  accountDotsIconColor: '#8E8E8E',
-  addAccountImageBackground: '#1A1B20',
-  backButtonBackground: '#3A3B41',
-  backButtonBackgroundHover: '#3a3b41ad',
-  backButtonTextColor: '#FFFFFF',
-  background: '#26272C',
-  bodyColor: '#20222A',
-  borderRadius: '4px',
-  boxBackground: '#1A1B20',
-  boxBorderColor: '#303030',
-  boxLineHeight: '1rem',
-  boxMargin: '0.75rem 0',
-  boxPadding: '0 0.25rem',
-  boxShadow: 'rgba(0, 0, 0, 0.86)',
-  buttonBackground: '#E86F00',
-  buttonBackgroundDanger: '#AF1111',
-  buttonBackgroundDangerHover: '#D93B3B',
-  buttonBackgroundHover: '#ED9329',
-  buttonTextColor: '#FFFFFF',
-  connectedDotColor: 'seagreen',
-  errorBorderColor: '#7E3530',
-  errorColor: '#E42F2F',
-  fontFamily: 'Nunito, sans-serif',
-  fontSize: '16px',
-  highlightedAreaBackground: '#212226',
-  iconDangerColor: '#AF1111',
-  iconNeutralColor: '#8E8E8E',
-  iconWarningColor: '#FF7D01',
-  id: 'dark',
-  identiconBackground: '#F4F5F8',
-  inputBackground: '#111218',
-  inputBorderColor: '#43444B',
-  inputLabelFontSize: '10px',
-  labelColor: '#9F9E99',
-  labelFontSize: '13px',
-  labelLineHeight: '18px',
-  lineHeight: '26px',
-  parentLabelColor: '#4A7463',
-  popupBackground: '#38393F',
-  primaryColor: '#FF7D01',
-  readonlyInputBackground: '#1A1B20',
-  subTextColor: '#DDD',
-  textColor: '#FFFFFF',
-  textColorDanger: '#FF8686'
-};
 
-export declare type Theme = typeof darkTheme;
+export const themes = ['light', 'dark'] as const;
 
-const lightTheme: Theme = {
+export function chooseTheme (): Theme {
-  ...darkTheme,
-  addAccountImageBackground: '#FFF',
-  backButtonBackground: '#D7D7D7',
-  backButtonBackgroundHover: '#d7d7d7ad',
-  backButtonTextColor: '#454545',
-  background: '#FAFAFA',
-  bodyColor: '#FFFFFF',
-  boxBackground: '#FFFFFF',
-  boxBorderColor: '#DADFEA',
-  boxShadow: 'rgba(0, 0, 0, 0.3)',
-  buttonBackgroundDanger: '#DC2222',
-  errorBorderColor: '#E42F2F',
-  highlightedAreaBackground: '#EFEFEF',
-  iconDangerColor: '#DC2222',
-  iconNeutralColor: '#939CB1',
-  id: 'light',
-  inputBackground: '#FFFFFF',
-  inputBorderColor: '#DDE1EB',
-  labelColor: '#333333',
-  parentLabelColor: '#215B4F',
-  popupBackground: '#FFFFFF',
-  readonlyInputBackground: '#FFF',
-  subTextColor: '#454545',
-  textColor: '#242529',
-  textColorDanger: '#F24A4A'
-};
-
-export const themes = {
-  dark: darkTheme,
-  light: lightTheme
-};
-
-export declare type AvailableThemes = keyof typeof themes;
-
-export function chooseTheme (): AvailableThemes {
   const preferredTheme = localStorage.getItem('theme');
 
   if (preferredTheme) {

packages/extension-ui/src/partials/AccountSelection.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Trans } from 'react-i18next';
 
@@ -11,7 +9,7 @@ import { useTranslation } from '../hooks/index.js';
 import AccountsTree from '../Popup/Accounts/AccountsTree.js';
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   url: string;
   origin: string;
@@ -92,7 +90,7 @@ function AccounSelection ({ className, origin, showHidden = false, url, withWarn
   );
 }
 
-export default styled(AccounSelection)(({ theme }: Props) => `
+export default styled(AccounSelection)<Props>`
   .accountList {
     overflow-y: auto;
     height: 270px;
@@ -100,7 +98,7 @@ export default styled(AccounSelection)(({ theme }: Props) => `
 
   .tab-name,
   .tab-url {
-    color: ${theme.textColor};
+    color: var(--textColor);
     display: inline-block;
     max-height: 10rem;
     width: 100%;
@@ -120,4 +118,4 @@ export default styled(AccounSelection)(({ theme }: Props) => `
       width: 100%
     }
   }
-`);
+`;

packages/extension-ui/src/partials/Header.spec.tsx

@@ -11,9 +11,7 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import enzyme from 'enzyme';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { ThemeProvider } from 'styled-components';
 
-import { themes } from '../components/index.js';
 import Header from './Header.js';
 import Settings from './MenuSettings.js';
 
@@ -27,10 +25,7 @@ describe('Header component', () => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   const mountHeader = (props: React.ComponentProps<typeof Header> = {}): ReactWrapper => mount(
     <MemoryRouter>
-      <ThemeProvider theme={themes.dark}>
+      <Header {...props} />
-        <Header {...props}>
-        </Header>
-      </ThemeProvider>
     </MemoryRouter>);
 
   it('gear icon is not highlighted when settings are hidden', () => {

packages/extension-ui/src/partials/Header.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { faArrowLeft, faCog, faPlusCircle, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -17,7 +15,7 @@ import { styled } from '../styled.js';
 import MenuAdd from './MenuAdd.js';
 import MenuSettings from './MenuSettings.js';
 
-interface Props extends ThemeProps {
+interface Props {
   children?: React.ReactNode;
   className?: string;
   onFilter?: (filter: string) => void;
@@ -187,7 +185,7 @@ function Header ({ children, className = '', onFilter, showAdd, showBackArrow, s
   );
 }
 
-export default React.memo(styled(Header)(({ theme }: Props) => `
+export default React.memo(styled(Header)<Props>`
   max-width: 100%;
   box-sizing: border-box;
   font-weight: normal;
@@ -203,15 +201,15 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
     display: flex;
     justify-content: space-between;
     width: 100%;
-    border-bottom: 1px solid ${theme.inputBorderColor};
+    border-bottom: 1px solid var(--inputBorderColor);
     min-height: 70px;
 
     .branding {
       display: flex;
       justify-content: center;
       align-items: center;
-      color: ${theme.labelColor};
+      color: var(--labelColor);
-      font-family: ${theme.fontFamily};
+      font-family: var(--fontFamily);
       text-align: center;
       margin-left: 24px;
 
@@ -222,8 +220,8 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
       }
 
       .logoText {
-        color: ${theme.textColor};
+        color: var(--textColor);
-        font-family: ${theme.fontFamily};
+        font-family: var(--fontFamily);
         font-size: 20px;
         line-height: 27px;
       }
@@ -241,14 +239,14 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
     }
 
     .connectedAccounts {
-      border: 1px solid ${theme.inputBorderColor};
+      border: 1px solid var(--inputBorderColor);
       border-radius: 4px;
       padding: 0 0.5rem;
 
       .greenDot {
         margin-right: 0.3rem;
         font-size: 1.5rem;
-        color: ${theme.connectedDotColor};
+        color: var(--connectedDotColor);
         padding-bottom: 0.2rem;
       }
     }
@@ -291,15 +289,15 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
   }
 
   .plusIcon, .cogIcon, .searchIcon {
-    color: ${theme.iconNeutralColor};
+    color: var(--iconNeutralColor);
 
     &.selected {
-      color: ${theme.primaryColor};
+      color: var(--primaryColor);
     }
   }
 
   .arrowLeftIcon {
-    color: ${theme.labelColor};
+    color: var(--labelColor);
     margin-right: 1rem;
     cursor: pointer;
   }
@@ -307,4 +305,4 @@ export default React.memo(styled(Header)(({ theme }: Props) => `
   &.smallMargin {
     margin-bottom: 15px;
   }
-`));
+`);

packages/extension-ui/src/partials/HeaderWithSteps.tsx

@@ -1,15 +1,13 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import React, { useCallback, useContext } from 'react';
 
 import { ActionContext, ActionText } from '../components/index.js';
 import { styled } from '../styled.js';
 import Header from './Header.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   step: number;
   text: string;
@@ -41,11 +39,11 @@ function HeaderWithSteps ({ className, step, text }: Props): React.ReactElement<
   );
 }
 
-export default React.memo(styled(HeaderWithSteps)(({ theme }: Props) => `
+export default React.memo(styled(HeaderWithSteps)<Props>`
   .current {
-    font-size: ${theme.labelFontSize};
+    font-size: var(--labelFontSize);
-    line-height: ${theme.labelLineHeight};
+    line-height: var(--labelLineHeight);
-    color: ${theme.primaryColor};
+    color: var(--primaryColor);
   }
 
   .steps {
@@ -59,8 +57,8 @@ export default React.memo(styled(HeaderWithSteps)(({ theme }: Props) => `
   }
 
   .total {
-    font-size: ${theme.labelFontSize};
+    font-size: var(--labelFontSize);
-    line-height: ${theme.labelLineHeight};
+    line-height: var(--labelLineHeight);
-    color: ${theme.textColor};
+    color: var(--textColor);
   }
-`));
+`);

packages/extension-ui/src/partials/MenuAdd.tsx

@@ -1,8 +1,6 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types.js';
-
 import { faUsb } from '@fortawesome/free-brands-svg-icons';
 import { faCodeBranch, faFileExport, faFileUpload, faKey, faPlusCircle, faQrcode } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -13,7 +11,7 @@ import { useIsPopup, useLedger, useTranslation } from '../hooks/index.js';
 import { windowOpen } from '../messaging.js';
 import { styled } from '../styled.js';
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   reference: React.MutableRefObject<null>;
 }
@@ -128,7 +126,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(MenuAdd)(({ theme }: Props) => `
+export default React.memo(styled(MenuAdd)<Props>`
   margin-top: 50px;
   right: 50px; // 24 + 18 + 8
   user-select: none;
@@ -146,9 +144,9 @@ export default React.memo(styled(MenuAdd)(({ theme }: Props) => `
     }
 
     .svg-inline--fa {
-      color: ${theme.iconNeutralColor};
+      color: var(--iconNeutralColor);
       margin-right: 0.3rem;
       width: 0.875em;
     }
   }
-`));
+`);

packages/extension-ui/src/partials/MenuSettings.tsx

@@ -1,15 +1,12 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Theme, ThemeProps } from '../types.js';
-
 import { faExpand, faTasks } from '@fortawesome/free-solid-svg-icons';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { ThemeContext } from 'styled-components';
 
 import settings from '@polkadot/ui-settings';
 
-import { ActionContext, ActionText, Checkbox, Dropdown, Menu, MenuDivider, MenuItem, Svg, Switch, themes, ThemeSwitchContext } from '../components/index.js';
+import { ActionContext, ActionText, Checkbox, chooseTheme, Dropdown, Menu, MenuDivider, MenuItem, Switch, ThemeSwitchContext } from '../components/index.js';
 import { useIsPopup, useTranslation } from '../hooks/index.js';
 import { setNotification, windowOpen } from '../messaging.js';
 import { styled } from '../styled.js';
@@ -20,7 +17,7 @@ interface Option {
   value: string;
 }
 
-interface Props extends ThemeProps {
+interface Props {
   className?: string;
   reference: React.MutableRefObject<null>;
 }
@@ -37,8 +34,8 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
   const [camera, setCamera] = useState(settings.camera === 'on');
   const [prefix, setPrefix] = useState(`${settings.prefix === -1 ? 42 : settings.prefix}`);
   const [notification, updateNotification] = useState(settings.notification);
-  const themeContext = useContext(ThemeContext as React.Context<Theme>);
+  const [theme, setTheme] = useState(chooseTheme());
-  const setTheme = useContext(ThemeSwitchContext);
+  const setThemeContext = useContext(ThemeSwitchContext);
   const isPopup = useIsPopup();
   const languageOptions = useMemo(() => getLanguageOptions(), []);
   const onAction = useContext(ActionContext);
@@ -63,9 +60,14 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
     }, []
   );
 
-  const _onChangeTheme = useCallback(
+  const _onSetTheme = useCallback(
-    (checked: boolean): void => setTheme(checked ? 'dark' : 'light'),
+    (checked: boolean): void => {
-    [setTheme]
+      const theme = checked ? 'dark' : 'light';
+
+      setThemeContext(theme);
+      setTheme(theme);
+    },
+    [setThemeContext]
   );
 
   const _onWindowOpen = useCallback(
@@ -96,9 +98,9 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
         title='Theme'
       >
         <Switch
-          checked={themeContext.id === themes.dark.id}
+          checked={theme === 'dark'}
           checkedLabel={t('Dark')}
-          onChange={_onChangeTheme}
+          onChange={_onSetTheme}
           uncheckedLabel={t('Light')}
         />
       </MenuItem>
@@ -172,22 +174,22 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
   );
 }
 
-export default React.memo(styled(MenuSettings)(({ theme }: Props) => `
+export default React.memo(styled(MenuSettings)<Props>`
   margin-top: 50px;
   right: 24px;
   user-select: none;
 
   .openWindow, .manageWebsiteAccess{
     span {
-      color: ${theme.textColor};
+      color: var(--textColor);
-      font-size: ${theme.fontSize};
+      font-size: var(--fontSize);
-      line-height: ${theme.lineHeight};
+      line-height: var(--lineHeight);
       text-decoration: none;
       vertical-align: middle;
     }
 
-    ${Svg} {
+    .Comp--Svg {
-      background: ${theme.textColor};
+      background: var(--textColor);
       height: 20px;
       top: 4px;
       width: 20px;
@@ -196,7 +198,7 @@ export default React.memo(styled(MenuSettings)(({ theme }: Props) => `
 
   > .setting {
     > .checkbox {
-      color: ${theme.textColor};
+      color: var(--textColor);
       line-height: 20px;
       font-size: 15px;
       margin-bottom: 0;
@@ -206,16 +208,16 @@ export default React.memo(styled(MenuSettings)(({ theme }: Props) => `
       }
 
       label {
-        color: ${theme.textColor};
+        color: var(--textColor);
       }
     }
 
     > .dropdown {
-      background: ${theme.background};
+      background: var(--background);
       margin-bottom: 0;
       margin-top: 9px;
       margin-right: 0;
       width: 100%;
     }
   }
-`));
+`);

packages/extension-ui/src/styled.ts

@@ -1,16 +1,4 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { StyledInterface } from 'styled-components';
+export { styled } from 'styled-components';
-
-import styledComponents from 'styled-components';
-
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-export const styled = (
-  (styledComponents as unknown as { styled: StyledInterface }).styled ||
-  (styledComponents as unknown as { default: StyledInterface }).default ||
-  styledComponents as unknown as StyledInterface
-);

packages/extension/package.json

@@ -21,10 +21,10 @@
     "@polkadot/extension-base": "0.46.6-3-x",
     "@polkadot/extension-inject": "0.46.6-3-x",
     "@polkadot/extension-ui": "0.46.6-3-x",
-    "tslib": "^2.6.1"
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.76.16",
+    "@polkadot/dev": "^0.76.17",
     "browser-resolve": "^2.0.0",
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",

packages/extension/public/index.html

@@ -21,6 +21,83 @@
         text-align: left;
         width: 560px;
       }
+
+      :root {
+        /* general items */
+        --borderRadius: 4px;
+        --boxLineHeight: 1rem;
+        --boxMargin: 0.75rem 0;
+        --boxPadding: 0 0.25rem;
+        --fontFamily: Nunito, sans-serif;
+        --fontSize: 16px;
+        --inputLabelFontSize: 10px;
+        --labelFontSize: 13px;
+        --labelLineHeight: 18px;
+        --lineHeight: 26px;
+        /* shared colors */
+        --accountDotsIconColor: #8E8E8E;
+        --buttonBackground: #E86F00;
+        --buttonBackgroundDangerHover: #D93B3B;
+        --buttonBackgroundHover: #ED9329;
+        --buttonTextColor: #FFFFFF;
+        --connectedDotColor: seagreen;
+        --errorColor: #E42F2F;
+        --iconWarningColor: #FF7D01;
+        --identiconBackground: #F4F5F8;
+        --primaryColor: #FF7D01;
+      }
+
+      [data-theme="dark"] {
+        --addAccountImageBackground: #1A1B20;
+        --backButtonBackground: #3A3B41;
+        --backButtonBackgroundHover: #3a3b41ad;
+        --backButtonTextColor: #FFFFFF;
+        --background: #26272C;
+        --bodyColor: #20222A;
+        --boxBackground: #1A1B20;
+        --boxBorderColor: #303030;
+        --boxShadow: rgba(0, 0, 0, 0.86);
+        --buttonBackgroundDanger: #AF1111;
+        --errorBorderColor: #7E3530;
+        --highlightedAreaBackground: #212226;
+        --iconDangerColor: #AF1111;
+        --iconNeutralColor: #8E8E8E;
+        --inputBackground: #111218;
+        --inputBorderColor: #43444B;
+        --labelColor: #9F9E99;
+        --parentLabelColor: #4A7463;
+        --popupBackground: #38393F;
+        --readonlyInputBackground: #1A1B20;
+        --subTextColor: #DDD;
+        --textColor: #FFFFFF;
+        --textColorDanger: #FF8686;
+      }
+
+      [data-theme="light"] {
+        --addAccountImageBackground: #FFF;
+        --backButtonBackground: #D7D7D7;
+        --backButtonBackgroundHover: #d7d7d7ad;
+        --backButtonTextColor: #454545;
+        --background: #FAFAFA;
+        --bodyColor: #FFFFFF;
+        --boxBackground: #FFFFFF;
+        --boxBorderColor: #DADFEA;
+        --boxShadow: rgba(0, 0, 0, 0.3);
+        --buttonBackgroundDanger: #DC2222;
+        --errorBorderColor: #E42F2F;
+        --highlightedAreaBackground: #EFEFEF;
+        --iconDangerColor: #DC2222;
+        --iconNeutralColor: #939CB1;
+        --inputBackground: #FFFFFF;
+        --inputBorderColor: #DDE1EB;
+        --labelColor: #333333;
+        --parentLabelColor: #215B4F;
+        --popupBackground: #FFFFFF;
+        --readonlyInputBackground: #FFF;
+        --subTextColor: #454545;
+        --textColor: #242529;
+        --textColorDanger: #F24A4A;
+      }
     </style>
   </head>
   <body>