tokens.css (2776B) download
1* {
2 -neutral-100: #242429;
3 -neutral-200: #303036;
4 -neutral-300: #484851;
5 -neutral-400: #60606C;
6 -neutral-500: #A0A0AB;
7 -neutral-600: #BBBBC3;
8 -neutral-700: #C9C9CF;
9 -neutral-800: #E4E4E7;
10 -neutral-900: #FAFAFA;
11
12 -primary-100: #291D49;
13 -primary-200: #3A2866;
14 -primary-300: #493280;
15 -primary-400: #573D9A;
16 -primary-500: #6E4FBA;
17 -primary-600: #866DC5;
18 -primary-700: #9E8AD1;
19 -primary-800: #B3A4DB;
20 -primary-900: #D2C8E9;
21
22 -secondary-100: #1D2749;
23 -secondary-200: #293666;
24 -secondary-300: #334380;
25 -secondary-400: #3D5199;
26 -secondary-500: #5067B9;
27 -secondary-600: #6D80C5;
28 -secondary-700: #8A99D0;
29 -secondary-800: #A4B0DB;
30 -secondary-900: #C8CFE9;
31
32 -tertiary-100: #663200;
33 -tertiary-200: #994C00;
34 -tertiary-300: #D66A00;
35 -tertiary-400: #FF8914;
36 -tertiary-500: #FF9833;
37 -tertiary-600: #FFA54C;
38 -tertiary-700: #FFB770;
39 -tertiary-800: #FFCB99;
40 -tertiary-900: #FFE3C7;
41
42 -negative-100: #5C0A0A;
43 -negative-200: #8A0F0F;
44 -negative-300: #A11212;
45 -negative-400: #B81414;
46 -negative-500: #CF1717;
47 -negative-600: #E93F3F;
48 -negative-700: #ED5F5F;
49 -negative-800: #F28C8D;
50 -negative-900: #F7BABA;
51
52 -positive-100: #194D1D;
53 -positive-200: #206024;
54 -positive-300: #2D8632;
55 -positive-400: #33993A;
56 -positive-500: #39AC41;
57 -positive-600: #53C65A;
58 -positive-700: #79D27F;
59 -positive-800: #9FDFA3;
60 -positive-900: #C6ECC8;
61
62 -black: #000;
63 -white: #fff;
64
65
66 /* Dark Theme Variables */
67 -background-dark: -neutral-100;
68
69 -surface-dark: -neutral-200;
70 -surface-text-dark: -neutral-400;
71
72 -on-surface-dark: -neutral-300;
73 -on-surface-text-dark: -neutral-700;
74
75 -primary-dark: -primary-800;
76 -primary-text-dark: -primary-400;
77
78 -secondary-dark: -secondary-800;
79 -secondary-text-dark: -secondary-400;
80
81 -tertiary-dark: -tertiary-800;
82 -tertiary-text-dark: -tertiary-400;
83
84 -negative-dark: -negative-800;
85 -negative-text-dark: -negative-400;
86
87 -positive-dark: -positive-800;
88 -positive-text-dark: -positive-400;
89
90
91 /* Light Theme Variables */
92 -background-light: -neutral-700;
93
94 -surface-light: -neutral-800;
95 -surface-text-light: -neutral-400;
96
97 -on-surface-light: -neutral-900;
98 -on-surface-text-light: -neutral-400;
99
100 -primary-light: -primary-500;
101 -primary-text-light: -primary-800;
102
103 -secondary-light: -secondary-500;
104 -secondary-text-light: -secondary-800;
105
106 -tertiary-light: -tertiary-500;
107 -tertiary-text-light: -tertiary-800;
108
109 -negative-light: -negative-500;
110 -negative-text-light: -negative-800;
111
112 -positive-light: -positive-500;
113 -positive-text-light: -positive-800;
114}