Polkadot Design Tokens

Design tokens used by the Parity Product Design team synced to /src/tokens/

Output is generated (Style Dictionary) and published as a package. Note that this is a manual process, to be automated later.

Current outputs: CSS variables (global, light, dark) + Tailwind config

Installation

Simply install the package by running: with npm:

npm i polkadot-theme

or with yarn:

yarn add polkadot-theme

Simple CSS usage

In order to use just the css color palette coming with the library you need to import in your main css the polkadot-theme main css files (global, light, dark) as can be seen below:

import "polkadot-theme/global.css"
import "polkadot-theme/light.css"
import "polkadot-theme/dark.css"

Then the defined custom CSS properties can be used inside your .css files.

See the end of this file for the variables and the used colors;

Use (Tailwind)

Copy tailwind config to root folder cp -r ./node_modules/polkadot-theme/tailwind.config.cjs ./

Import css

App.tsx

import "polkadot-theme/global.css"
import "polkadot-theme/light.css"
import "polkadot-theme/dark.css"

Implement in components

Button.tsx - variant="ghost"

...
<button className="bg-fill-ghost border-border-hint text-foreground-contrast">
    Press me!
</button>
...

Switch themes ->

Token API

Global Colors

Entire range of colors used in the Polkadot theme. Semantic always reference global colors.

Semantic Colors

Background: for everything that is full screen and serves as a background for an interface

Fill: for UI elements that sit on top of the backgrounds

Border: for borders of UI elements

Foreground: for texts and icons

Typography [WIP]

Generating Output and Publishing Package

Walkthrough ->

0. push changes from Figma file path: src/tokens/
1. npm run generate-output
2. bump version in package.json
3. npm i
4. npm publish

---

ThemeSwitch.tsx

import * as React from "react"

interface IconProps {
  height?: number
}

function setTheme(themeName: string) {
  localStorage.setItem("data-theme", themeName)
  document.documentElement.setAttribute("data-theme", themeName)
}

;(function () {
  if (localStorage.getItem("data-theme") === "dark") {
    setTheme("dark")
  } else {
    setTheme("light")
  }
  console.log(localStorage.getItem("data-theme"))
})()

function IconDark({ height }: IconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height || `24`}
      fill="var(--colors-foreground-contrast)"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      viewBox="0 0 28 29"
    >
      <path
        fillRule="evenodd"
        stroke="none"
        d="M17.284 2.194C10.573.44 3.71 4.458 1.956 11.17.202 17.881 4.22 24.744 10.932 26.499c6.29 1.643 12.71-1.782 14.938-7.742a1 1 0 00-1.584-1.113A7.189 7.189 0 1119.29 4.986a1 1 0 00.396-1.895 12.615 12.615 0 00-2.403-.896z"
        clipRule="evenodd"
      ></path>
    </svg>
  )
}

function IconLight({ height }: IconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height || `24`}
      fill="var(--colors-foreground-contrast)"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      viewBox="0 0 28 28"
    >
      <path
        fillRule="evenodd"
        stroke="none"
        d="M15.485 2a1 1 0 10-2 0v3a1 1 0 102 0V2zM14 8c-3.314 0-6 2.688-6 6.002a6.001 6.001 0 1012 0A6.001 6.001 0 0014 8zm0 14a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-8-8a1 1 0 01-1 1H2a1 1 0 110-2h3a1 1 0 011 1zm20 1a1 1 0 100-2h-3a1 1 0 100 2h3zM8.343 19.657a1 1 0 010 1.414l-2.121 2.121a1 1 0 11-1.415-1.414l2.122-2.121a1 1 0 011.414 0zM23.678 6.222a1 1 0 00-1.415-1.414l-2.121 2.121a1 1 0 001.414 1.414l2.122-2.121zM8.828 8.343a1 1 0 01-1.414 0L5.293 6.222a1 1 0 011.414-1.414L8.83 6.929a1 1 0 010 1.414zm12.95 14.85a1 1 0 001.414-1.415l-2.12-2.121a1 1 0 00-1.415 1.414l2.121 2.121z"
        clipRule="evenodd"
      ></path>
    </svg>
  )
}

export default function ThemeSwitch() {
  const [currentTheme, setCurrentTheme] = React.useState(
    localStorage.getItem("data-theme"),
  )

  const toggleOn = () => {
    const theme = localStorage.getItem("data-theme")
    if (theme === "dark") {
      setTheme("light")
      setCurrentTheme("light")
    } else {
      setTheme("dark")
      setCurrentTheme("dark")
    }
  }

  return (
    <div onClick={toggleOn}>
      {currentTheme === "dark" ? (
        <IconDark height={20} />
      ) : (
        <IconLight height={20} />
      )}
    </div>
  )
}

---

Variables and color palettes

global.css:

1  --font-family-unbounded: Unbounded;
2  --font-family-inter: Inter;
3  --font-family-mono: Roboto Mono;
4  --font-weight-bold: 700;
5  --font-weight-regular: 400;
6  --font-weight-semibold: Semi Bold;
7  --colors-black: #171717;
8  --colors-white: #ffffff;
9  --colors-p-pink-50: #FFF8FC;
10  --colors-p-pink-100: #ffe4f3;
11  --colors-p-pink-200: #f9abd5;
12  --colors-p-pink-300: #f272b6;
13  --colors-p-pink-400: #FD1B93;
14  --colors-p-pink-500: #e6007a;
15  --colors-p-pink-600: #cb006c;
16  --colors-p-pink-700: #a9005a;
17  --colors-p-pink-800: #860047;
18  --colors-p-pink-900: #640035;
19  --colors-p-pink-950: #3f0021;
20  --colors-p-gray-50: #fafafa;
21  --colors-p-gray-100: #ebebeb;
22  --colors-p-gray-200: #e1e1e1;
23  --colors-p-gray-300: #c1c1c1;
24  --colors-p-gray-400: #a1a1a1;
25  --colors-p-gray-500: #8D8D8D;
26  --colors-p-gray-600: #767676;
27  --colors-p-gray-700: #414141;
28  --colors-p-gray-800: #2b2b2b;
29  --colors-p-gray-900: #1a1a1a;
30  --colors-p-gray-950: #111111;
31  --colors-p-red-50: #fffafa;
32  --colors-p-red-100: #fff1f0;
33  --colors-p-red-200: #fed2cd;
34  --colors-p-red-300: #fe8d81;
35  --colors-p-red-400: #fd4935;
36  --colors-p-red-500: #e31902;
37  --colors-p-red-600: #b21200;
38  --colors-p-red-700: #7f0d00;
39  --colors-p-red-800: #4c0800;
40  --colors-p-red-900: #290400;
41  --colors-p-red-950: #190300;
42  --colors-p-white-transparent-100: #ffffff0f;
43  --colors-p-white-transparent-200: #ffffff2b;
44  --colors-p-white-transparent-300: #ffffff45;
45  --colors-p-white-transparent-400: #ffffff61;
46  --colors-p-white-transparent-500: #ffffff7a;
47  --colors-p-white-transparent-600: #ffffff94;
48  --colors-p-white-transparent-700: #ffffffb0;
49  --colors-p-white-transparent-800: #ffffffc9;
50  --colors-p-white-transparent-900: #ffffffe6;
51  --colors-p-black-transparent-50: #00000008;
52  --colors-p-black-transparent-100: #0000000f;
53  --colors-p-black-transparent-200: #00000029;
54  --colors-p-black-transparent-300: #00000040;
55  --colors-p-black-transparent-400: #00000059;
56  --colors-p-black-transparent-500: #00000070;
57  --colors-p-black-transparent-600: #0000008c;
58  --colors-p-black-transparent-700: #000000a8;
59  --colors-p-black-transparent-800: #000000c7;
60  --colors-p-black-transparent-900: #000000e3;
61  --colors-accent-cyan-500: #00B2FF;
62  --colors-accent-cyan-600: #00A6ED;
63  --colors-accent-cyan-700: #0094D4;
64  --colors-accent-green-500: #56f39a;
65  --colors-accent-green-600: #51E591;
66  --colors-accent-green-700: #48CC81;
67  --colors-accent-lime-500: #d3ff33;
68  --colors-accent-lime-600: #BEE52E;
69  --colors-accent-lime-700: #A9CC29;
70  --colors-p-purple-50: #fbfcfe;
71  --colors-p-purple-100: #f3f5fb;
72  --colors-p-purple-200: #e6eaf6;
73  --colors-p-purple-300: #dae0f2;
74  --colors-p-purple-400: #6d3aee;
75  --colors-p-purple-500: #552bbf;
76  --colors-p-purple-600: #442299;
77  --colors-p-purple-700: #321d47;
78  --colors-p-purple-800: #28123e;
79  --colors-p-purple-900: #1c0533;
80  --colors-p-purple-925: #160527;
81  --colors-p-purple-950: #140523;

light.css:

1  --colors-background-default: #fafafa;
2  --colors-background-system: #fafafa;
3  --colors-background-dip: #e1e1e1;
4  --colors-background-float: #ffffff;
5  --colors-fill-primary: #e6007a;
6  --colors-fill-primary-hover: hsl(328 100% 41.7%);
7  --colors-fill-primary-down: hsl(328 100% 39.5%);
8  --colors-fill-secondary: #FFF8FC;
9  --colors-fill-secondary-hover: color(display-p3 1 0.99 0.99);
10  --colors-fill-secondary-down: #FFF8FC;
11  --colors-fill-ghost: #fafafa;
12  --colors-fill-ghost-hover: color(display-p3 0.98 0.98 0.98);
13  --colors-fill-ghost-down: color(display-p3 0.95 0.95 0.95);
14  --colors-fill-match-background: #fafafa;
15  --colors-fill-disabled: #ebebeb;
16  --colors-fill-danger: #e31902;
17  --colors-fill-danger-hover: color(display-p3 0.8 0.2 0.12);
18  --colors-fill-danger-pressed: color(display-p3 0.76 0.19 0.12);
19  --colors-fill-elevate-1: #ffffffb0;
20  --colors-fill-overlay: #ffffff94;
21  --colors-fill-selected: #ebebeb;
22  --colors-fill-white: #ffffff;
23  --colors-fill-separator: #00000029;
24  --colors-fill-elevate: #ffffff;
25  --colors-border-contrast: #1a1a1a;
26  --colors-border-dimmed: #414141;
27  --colors-border-primary: #e6007a;
28  --colors-border-danger: #e31902;
29  --colors-border-hint: #e1e1e1;
30  --colors-border-disabled: #c1c1c1;
31  --colors-border-focus: #2b2b2b;
32  --colors-foreground-contrast: #2b2b2b;
33  --colors-foreground-dimmed: #767676;
34  --colors-foreground-match-background: #fafafa;
35  --colors-foreground-primary: #cb006c;
36  --colors-foreground-white: #ffffff;
37  --colors-foreground-disabled: #8D8D8D;
38  --colors-foreground-danger: #e31902;
39  --colors-foreground-emphasized: #f272b6;
40  --colors-accent-cyan: #00D0FF;
41  --colors-accent-green: #56F39A;
42  --colors-accent-lime: #D3FF33;
43  --colors-accent-random: #aaaaac;
44  --box-shadow-pop: 0 8px 24px 0 #00000030;
45  --box-shadow-idle: 0 2px 4px 0 #00000014;
46  --box-shadow-hover: 0 8px 8px 0 #00000008;
47  --boder-radius-lg: 16px;

dark.css:

1  --colors-background-default: #1a1a1a;
2  --colors-background-system: #111111;
3  --colors-background-float: #2b2b2b;
4  --colors-background-dip: #111111;
5  --colors-fill-primary: #e6007a;
6  --colors-fill-primary-hover: color(display-p3 0.74 0.16 0.43);
7  --colors-fill-primary-down: color(display-p3 0.7 0.15 0.4);
8  --colors-fill-secondary: color(display-p3 0.1 0.1 0.1);
9  --colors-fill-secondary-hover: color(display-p3 0.12 0.12 0.12);
10  --colors-fill-secondary-down: color(display-p3 0.1 0.1 0.1);
11  --colors-fill-ghost: #2b2b2b;
12  --colors-fill-ghost-hover: color(display-p3 0.15 0.15 0.15);
13  --colors-fill-ghost-down: #2b2b2b;
14  --colors-fill-match-background: #1a1a1a;
15  --colors-fill-disabled: #2b2b2b;
16  --colors-fill-danger: #e31902;
17  --colors-fill-danger-hover: color(display-p3 0.8 0.2 0.12);
18  --colors-fill-danger-pressed: color(display-p3 0.78 0.29 0.22);
19  --colors-fill-elevate-1: #ffffffb0;
20  --colors-fill-overlay: #ffffff94;
21  --colors-fill-selected: #2b2b2b;
22  --colors-fill-white: #ffffff;
23  --colors-fill-separator: #ffffff2b;
24  --colors-fill-elevate: #171717;
25  --colors-border-contrast: #ebebeb;
26  --colors-border-dimmed: #a1a1a1;
27  --colors-border-primary: #e6007a;
28  --colors-border-danger: #e31902;
29  --colors-border-hint: #414141;
30  --colors-border-disabled: #767676;
31  --colors-border-focus: #2b2b2b;
32  --colors-foreground-contrast: #fafafa;
33  --colors-foreground-dimmed: #a1a1a1;
34  --colors-foreground-match-background: #1a1a1a;
35  --colors-foreground-primary: #FD1B93;
36  --colors-foreground-white: #ffffff;
37  --colors-foreground-disabled: #a1a1a1;
38  --colors-foreground-danger: #fd4935;
39  --colors-foreground-emphasized: #f272b6;
40  --colors-accent-cyan: #00D0FF;
41  --colors-accent-green: #56F39A;
42  --colors-accent-lime: #D3FF33;
43  --colors-accent-random: #abcabc;
44  --box-shadow-pop: 0 8px 24px 0 #00000030;
45  --box-shadow-idle: 0 2px 4px 0 rgba(0,0,0,0.85);
46  --box-shadow-hover: 0 8px 8px 0 #00000008;