@new-ui/colors 0.2.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -9
- package/dist/themes/dark-cold.css +184 -0
- package/dist/themes/dark-warm.css +184 -0
- package/dist/themes/dark.css +50 -2
- package/dist/themes/light-cold.css +184 -0
- package/dist/themes/light-warm.css +184 -0
- package/dist/themes/light.css +20 -20
- package/help/dark.png +0 -0
- package/package.json +2 -2
- package/tokens/themes/dark/dark.json +193 -1
- package/tokens/themes/dark-cold/dark.json +198 -0
- package/tokens/themes/dark-warm/dark.json +198 -0
- package/tokens/themes/light/light.json +19 -19
- package/tokens/themes/light-cold/light.json +198 -0
- package/tokens/themes/light-warm/light.json +198 -0
- package/help/light.png +0 -0
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
3
|
## Install
|
|
4
|
-
Install New UI Colors from your terminal via npm. Current version is 0.
|
|
4
|
+
Install New UI Colors from your terminal via npm. Current version is 1.0.0
|
|
5
5
|
|
|
6
6
|
```
|
|
7
7
|
npm i @new-ui/colors
|
|
@@ -9,14 +9,26 @@ npm i @new-ui/colors
|
|
|
9
9
|
|
|
10
10
|
To get started quickly, you can use the CDN files.
|
|
11
11
|
|
|
12
|
-
Light
|
|
12
|
+
Light themes:
|
|
13
13
|
```
|
|
14
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.
|
|
14
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light.css">
|
|
15
|
+
```
|
|
16
|
+
```
|
|
17
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light-warm.css">
|
|
18
|
+
```
|
|
19
|
+
```
|
|
20
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/light-cold.css">
|
|
15
21
|
```
|
|
16
22
|
|
|
17
|
-
Dark
|
|
23
|
+
Dark themes:
|
|
24
|
+
```
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark.css">
|
|
18
26
|
```
|
|
19
|
-
|
|
27
|
+
```
|
|
28
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark-warm.css">
|
|
29
|
+
```
|
|
30
|
+
```
|
|
31
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.0.0/dist/themes/dark-cold.css">
|
|
20
32
|
```
|
|
21
33
|
|
|
22
34
|
## Build
|
|
@@ -27,16 +39,21 @@ To build themes from tokens.
|
|
|
27
39
|
npm install
|
|
28
40
|
```
|
|
29
41
|
|
|
30
|
-
Light
|
|
42
|
+
Light themes:
|
|
31
43
|
```
|
|
32
44
|
npm run build:tokens -- --theme=light
|
|
45
|
+
npm run build:tokens -- --theme=light-warm
|
|
46
|
+
npm run build:tokens -- --theme=light-cold
|
|
33
47
|
```
|
|
34
48
|
|
|
35
|
-
Dark
|
|
49
|
+
Dark themes:
|
|
36
50
|
```
|
|
37
|
-
npm run build:tokens -- --theme=
|
|
51
|
+
npm run build:tokens -- --theme=dark
|
|
52
|
+
npm run build:tokens -- --theme=dark-warm
|
|
53
|
+
npm run build:tokens -- --theme=dark-cold
|
|
38
54
|
```
|
|
39
55
|
|
|
40
56
|
## Get a Figma copy
|
|
57
|
+
Refer to the Figma file for the color tokens cheatsheet.
|
|
41
58
|
|
|
42
|
-
[New UI Colors
|
|
59
|
+
[New UI Colors](https://www.figma.com/community/file/1179503548902179413)
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Mon, 12 Dec 2022 16:49:40 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--white: hsl(0, 0%, 100%);
|
|
8
|
+
--black: hsl(0, 0%, 0%);
|
|
9
|
+
--cold10: hsl(206, 16%, 8%);
|
|
10
|
+
--cold9: hsl(200, 12%, 15%);
|
|
11
|
+
--cold8: hsl(207, 10%, 23%);
|
|
12
|
+
--cold7: hsl(207, 7%, 32%);
|
|
13
|
+
--cold6: hsl(210, 6%, 44%);
|
|
14
|
+
--cold5: hsl(216, 7%, 56%);
|
|
15
|
+
--cold4: hsl(210, 8%, 66%);
|
|
16
|
+
--cold3: hsl(210, 11%, 78%);
|
|
17
|
+
--cold2: hsl(213, 15%, 88%);
|
|
18
|
+
--cold1: hsl(220, 30%, 96%);
|
|
19
|
+
--warm10: hsl(0, 7%, 8%);
|
|
20
|
+
--warm9: hsl(0, 3%, 15%);
|
|
21
|
+
--warm8: hsl(0, 3%, 23%);
|
|
22
|
+
--warm7: hsl(0, 3%, 33%);
|
|
23
|
+
--warm6: hsl(0, 2%, 44%);
|
|
24
|
+
--warm5: hsl(0, 2%, 55%);
|
|
25
|
+
--warm4: hsl(0, 3%, 67%);
|
|
26
|
+
--warm3: hsl(10, 5%, 78%);
|
|
27
|
+
--warm2: hsl(10, 10%, 89%);
|
|
28
|
+
--warm1: hsl(12, 24%, 96%);
|
|
29
|
+
--grey10: hsl(0, 0%, 9%);
|
|
30
|
+
--grey9: hsl(0, 0%, 15%);
|
|
31
|
+
--grey8: hsl(0, 0%, 22%);
|
|
32
|
+
--grey7: hsl(0, 0%, 32%);
|
|
33
|
+
--grey6: hsl(0, 0%, 44%);
|
|
34
|
+
--grey5: hsl(0, 0%, 55%);
|
|
35
|
+
--grey4: hsl(0, 0%, 66%);
|
|
36
|
+
--grey3: hsl(0, 0%, 78%);
|
|
37
|
+
--grey2: hsl(0, 0%, 88%);
|
|
38
|
+
--grey1: hsl(0, 0%, 96%);
|
|
39
|
+
--brown8: hsl(35, 27%, 14%);
|
|
40
|
+
--brown7: hsl(34, 26%, 26%);
|
|
41
|
+
--brown6: hsl(33, 26%, 38%);
|
|
42
|
+
--brown5: hsl(34, 27%, 50%);
|
|
43
|
+
--brown4: hsl(34, 26%, 54%);
|
|
44
|
+
--brown3: hsl(34, 26%, 74%);
|
|
45
|
+
--brown2: hsl(35, 27%, 86%);
|
|
46
|
+
--brown1: hsl(33, 29%, 94%);
|
|
47
|
+
--pink8: hsl(349, 69%, 16%);
|
|
48
|
+
--pink7: hsl(349, 71%, 31%);
|
|
49
|
+
--pink6: hsl(348, 70%, 45%);
|
|
50
|
+
--pink5: hsl(349, 100%, 59%);
|
|
51
|
+
--pink4: hsl(349, 100%, 62%);
|
|
52
|
+
--pink3: hsl(349, 100%, 78%);
|
|
53
|
+
--pink2: hsl(349, 100%, 89%);
|
|
54
|
+
--pink1: hsl(348, 100%, 95%);
|
|
55
|
+
--purple8: hsl(280, 46%, 17%);
|
|
56
|
+
--purple7: hsl(279, 46%, 31%);
|
|
57
|
+
--purple6: hsl(280, 46%, 45%);
|
|
58
|
+
--purple5: hsl(280, 68%, 60%);
|
|
59
|
+
--purple4: hsl(280, 68%, 63%);
|
|
60
|
+
--purple3: hsl(279, 68%, 79%);
|
|
61
|
+
--purple2: hsl(280, 68%, 89%);
|
|
62
|
+
--purple1: hsl(279, 68%, 95%);
|
|
63
|
+
--indigo8: hsl(242, 43%, 16%);
|
|
64
|
+
--indigo7: hsl(241, 43%, 31%);
|
|
65
|
+
--indigo6: hsl(241, 43%, 45%);
|
|
66
|
+
--indigo5: hsl(241, 61%, 59%);
|
|
67
|
+
--indigo4: hsl(241, 61%, 62%);
|
|
68
|
+
--indigo3: hsl(241, 61%, 79%);
|
|
69
|
+
--indigo2: hsl(242, 62%, 89%);
|
|
70
|
+
--indigo1: hsl(244, 62%, 95%);
|
|
71
|
+
--blue8: hsl(211, 100%, 14%);
|
|
72
|
+
--blue7: hsl(211, 100%, 26%);
|
|
73
|
+
--blue6: hsl(211, 100%, 38%);
|
|
74
|
+
--blue5: hsl(211, 100%, 50%);
|
|
75
|
+
--blue4: hsl(211, 100%, 54%);
|
|
76
|
+
--blue3: hsl(211, 100%, 74%);
|
|
77
|
+
--blue2: hsl(211, 100%, 86%);
|
|
78
|
+
--blue1: hsl(211, 100%, 94%);
|
|
79
|
+
--cyan8: hsl(199, 64%, 15%);
|
|
80
|
+
--cyan7: hsl(199, 64%, 29%);
|
|
81
|
+
--cyan6: hsl(199, 64%, 42%);
|
|
82
|
+
--cyan5: hsl(199, 78%, 55%);
|
|
83
|
+
--cyan4: hsl(199, 78%, 58%);
|
|
84
|
+
--cyan3: hsl(199, 78%, 76%);
|
|
85
|
+
--cyan2: hsl(199, 78%, 87%);
|
|
86
|
+
--cyan1: hsl(199, 79%, 95%);
|
|
87
|
+
--teal8: hsl(189, 62%, 13%);
|
|
88
|
+
--teal7: hsl(189, 61%, 25%);
|
|
89
|
+
--teal6: hsl(189, 61%, 37%);
|
|
90
|
+
--teal5: hsl(189, 61%, 48%);
|
|
91
|
+
--teal4: hsl(189, 57%, 52%);
|
|
92
|
+
--teal3: hsl(189, 58%, 73%);
|
|
93
|
+
--teal2: hsl(189, 57%, 85%);
|
|
94
|
+
--teal1: hsl(190, 56%, 94%);
|
|
95
|
+
--mint8: hsl(178, 100%, 11%);
|
|
96
|
+
--mint7: hsl(177, 100%, 20%);
|
|
97
|
+
--mint6: hsl(178, 100%, 30%);
|
|
98
|
+
--mint5: hsl(177, 100%, 39%);
|
|
99
|
+
--mint4: hsl(177, 82%, 44%);
|
|
100
|
+
--mint3: hsl(177, 64%, 68%);
|
|
101
|
+
--mint2: hsl(178, 63%, 83%);
|
|
102
|
+
--mint1: hsl(178, 63%, 93%);
|
|
103
|
+
--green8: hsl(136, 59%, 14%);
|
|
104
|
+
--green7: hsl(135, 59%, 26%);
|
|
105
|
+
--green6: hsl(135, 58%, 37%);
|
|
106
|
+
--green5: hsl(135, 59%, 49%);
|
|
107
|
+
--green4: hsl(135, 56%, 53%);
|
|
108
|
+
--green3: hsl(135, 57%, 74%);
|
|
109
|
+
--green2: hsl(136, 56%, 86%);
|
|
110
|
+
--green1: hsl(137, 56%, 94%);
|
|
111
|
+
--yellow8: hsl(48, 100%, 14%);
|
|
112
|
+
--yellow7: hsl(48, 100%, 26%);
|
|
113
|
+
--yellow6: hsl(48, 100%, 38%);
|
|
114
|
+
--yellow5: hsl(48, 100%, 50%);
|
|
115
|
+
--yellow4: hsl(48, 100%, 54%);
|
|
116
|
+
--yellow3: hsl(48, 100%, 74%);
|
|
117
|
+
--yellow2: hsl(48, 100%, 86%);
|
|
118
|
+
--yellow1: hsl(48, 100%, 94%);
|
|
119
|
+
--orange8: hsl(35, 100%, 14%);
|
|
120
|
+
--orange7: hsl(35, 100%, 26%);
|
|
121
|
+
--orange6: hsl(35, 100%, 38%);
|
|
122
|
+
--orange5: hsl(35, 100%, 50%);
|
|
123
|
+
--orange4: hsl(35, 100%, 54%);
|
|
124
|
+
--orange3: hsl(35, 100%, 74%);
|
|
125
|
+
--orange2: hsl(35, 100%, 86%);
|
|
126
|
+
--orange1: hsl(35, 100%, 94%);
|
|
127
|
+
--red8: hsl(3, 69%, 16%);
|
|
128
|
+
--red7: hsl(3, 68%, 31%);
|
|
129
|
+
--red6: hsl(3, 68%, 45%);
|
|
130
|
+
--red5: hsl(3, 100%, 59%);
|
|
131
|
+
--red4: hsl(3, 100%, 63%);
|
|
132
|
+
--red3: hsl(3, 100%, 79%);
|
|
133
|
+
--red2: hsl(3, 100%, 89%);
|
|
134
|
+
--red1: hsl(2, 100%, 95%);
|
|
135
|
+
--text-success: var(--green4);
|
|
136
|
+
--text-error: var(--red4);
|
|
137
|
+
--text-on-color: var(--white);
|
|
138
|
+
--text-placeholder: var(--cold6);
|
|
139
|
+
--text-secondary: var(--cold5);
|
|
140
|
+
--text-primary-alt: var(--cold3);
|
|
141
|
+
--text-primary: var(--cold1);
|
|
142
|
+
--support-info: var(--blue4);
|
|
143
|
+
--support-success: var(--green4);
|
|
144
|
+
--support-warning: var(--yellow4);
|
|
145
|
+
--support-error: var(--red4);
|
|
146
|
+
--link-visited: var(--indigo4);
|
|
147
|
+
--link-subtle: var(--cold1);
|
|
148
|
+
--link-hover: var(--blue3);
|
|
149
|
+
--link: var(--blue4);
|
|
150
|
+
--icon-on-color: var(--white);
|
|
151
|
+
--icon-disabled: var(--cold7);
|
|
152
|
+
--icon-secondary: var(--cold4);
|
|
153
|
+
--icon-primary: var(--cold2);
|
|
154
|
+
--button-disabled: var(--cold6);
|
|
155
|
+
--button-danger-active: var(--red3);
|
|
156
|
+
--button-danger-hover: var(--red3);
|
|
157
|
+
--button-danger: var(--red4);
|
|
158
|
+
--button-secondary-active: var(--cold3);
|
|
159
|
+
--button-secondary-hover: var(--cold2);
|
|
160
|
+
--button-secondary: var(--cold1);
|
|
161
|
+
--button-primary-active: var(--blue3);
|
|
162
|
+
--button-primary-hover: var(--blue3);
|
|
163
|
+
--button-primary: var(--blue4);
|
|
164
|
+
--border-strong: var(--cold5);
|
|
165
|
+
--border-default: var(--cold7);
|
|
166
|
+
--border-muted: var(--cold9);
|
|
167
|
+
--background-brown: var(--brown8);
|
|
168
|
+
--background-pink: var(--pink8);
|
|
169
|
+
--background-purple: var(--purple8);
|
|
170
|
+
--background-indigo: var(--indigo8);
|
|
171
|
+
--background-blue: var(--blue8);
|
|
172
|
+
--background-cyan: var(--cyan8);
|
|
173
|
+
--background-teal: var(--teal8);
|
|
174
|
+
--background-mint: var(--mint8);
|
|
175
|
+
--background-green: var(--green8);
|
|
176
|
+
--background-yellow: var(--yellow8);
|
|
177
|
+
--background-orange: var(--orange8);
|
|
178
|
+
--background-red: var(--red8);
|
|
179
|
+
--background-selected-hover: var(--cold7);
|
|
180
|
+
--background-selected: var(--cold8);
|
|
181
|
+
--background-hover: var(--cold9);
|
|
182
|
+
--background-secondary: var(--cold9);
|
|
183
|
+
--background: var(--cold10);
|
|
184
|
+
}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Mon, 12 Dec 2022 16:49:35 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--white: hsl(0, 0%, 100%);
|
|
8
|
+
--black: hsl(0, 0%, 0%);
|
|
9
|
+
--cold10: hsl(206, 16%, 8%);
|
|
10
|
+
--cold9: hsl(200, 12%, 15%);
|
|
11
|
+
--cold8: hsl(207, 10%, 23%);
|
|
12
|
+
--cold7: hsl(207, 7%, 32%);
|
|
13
|
+
--cold6: hsl(210, 6%, 44%);
|
|
14
|
+
--cold5: hsl(216, 7%, 56%);
|
|
15
|
+
--cold4: hsl(210, 8%, 66%);
|
|
16
|
+
--cold3: hsl(210, 11%, 78%);
|
|
17
|
+
--cold2: hsl(213, 15%, 88%);
|
|
18
|
+
--cold1: hsl(220, 30%, 96%);
|
|
19
|
+
--warm10: hsl(0, 7%, 8%);
|
|
20
|
+
--warm9: hsl(0, 3%, 15%);
|
|
21
|
+
--warm8: hsl(0, 3%, 23%);
|
|
22
|
+
--warm7: hsl(0, 3%, 33%);
|
|
23
|
+
--warm6: hsl(0, 2%, 44%);
|
|
24
|
+
--warm5: hsl(0, 2%, 55%);
|
|
25
|
+
--warm4: hsl(0, 3%, 67%);
|
|
26
|
+
--warm3: hsl(10, 5%, 78%);
|
|
27
|
+
--warm2: hsl(10, 10%, 89%);
|
|
28
|
+
--warm1: hsl(12, 24%, 96%);
|
|
29
|
+
--grey10: hsl(0, 0%, 9%);
|
|
30
|
+
--grey9: hsl(0, 0%, 15%);
|
|
31
|
+
--grey8: hsl(0, 0%, 22%);
|
|
32
|
+
--grey7: hsl(0, 0%, 32%);
|
|
33
|
+
--grey6: hsl(0, 0%, 44%);
|
|
34
|
+
--grey5: hsl(0, 0%, 55%);
|
|
35
|
+
--grey4: hsl(0, 0%, 66%);
|
|
36
|
+
--grey3: hsl(0, 0%, 78%);
|
|
37
|
+
--grey2: hsl(0, 0%, 88%);
|
|
38
|
+
--grey1: hsl(0, 0%, 96%);
|
|
39
|
+
--brown8: hsl(35, 27%, 14%);
|
|
40
|
+
--brown7: hsl(34, 26%, 26%);
|
|
41
|
+
--brown6: hsl(33, 26%, 38%);
|
|
42
|
+
--brown5: hsl(34, 27%, 50%);
|
|
43
|
+
--brown4: hsl(34, 26%, 54%);
|
|
44
|
+
--brown3: hsl(34, 26%, 74%);
|
|
45
|
+
--brown2: hsl(35, 27%, 86%);
|
|
46
|
+
--brown1: hsl(33, 29%, 94%);
|
|
47
|
+
--pink8: hsl(349, 69%, 16%);
|
|
48
|
+
--pink7: hsl(349, 71%, 31%);
|
|
49
|
+
--pink6: hsl(348, 70%, 45%);
|
|
50
|
+
--pink5: hsl(349, 100%, 59%);
|
|
51
|
+
--pink4: hsl(349, 100%, 62%);
|
|
52
|
+
--pink3: hsl(349, 100%, 78%);
|
|
53
|
+
--pink2: hsl(349, 100%, 89%);
|
|
54
|
+
--pink1: hsl(348, 100%, 95%);
|
|
55
|
+
--purple8: hsl(280, 46%, 17%);
|
|
56
|
+
--purple7: hsl(279, 46%, 31%);
|
|
57
|
+
--purple6: hsl(280, 46%, 45%);
|
|
58
|
+
--purple5: hsl(280, 68%, 60%);
|
|
59
|
+
--purple4: hsl(280, 68%, 63%);
|
|
60
|
+
--purple3: hsl(279, 68%, 79%);
|
|
61
|
+
--purple2: hsl(280, 68%, 89%);
|
|
62
|
+
--purple1: hsl(279, 68%, 95%);
|
|
63
|
+
--indigo8: hsl(242, 43%, 16%);
|
|
64
|
+
--indigo7: hsl(241, 43%, 31%);
|
|
65
|
+
--indigo6: hsl(241, 43%, 45%);
|
|
66
|
+
--indigo5: hsl(241, 61%, 59%);
|
|
67
|
+
--indigo4: hsl(241, 61%, 62%);
|
|
68
|
+
--indigo3: hsl(241, 61%, 79%);
|
|
69
|
+
--indigo2: hsl(242, 62%, 89%);
|
|
70
|
+
--indigo1: hsl(244, 62%, 95%);
|
|
71
|
+
--blue8: hsl(211, 100%, 14%);
|
|
72
|
+
--blue7: hsl(211, 100%, 26%);
|
|
73
|
+
--blue6: hsl(211, 100%, 38%);
|
|
74
|
+
--blue5: hsl(211, 100%, 50%);
|
|
75
|
+
--blue4: hsl(211, 100%, 54%);
|
|
76
|
+
--blue3: hsl(211, 100%, 74%);
|
|
77
|
+
--blue2: hsl(211, 100%, 86%);
|
|
78
|
+
--blue1: hsl(211, 100%, 94%);
|
|
79
|
+
--cyan8: hsl(199, 64%, 15%);
|
|
80
|
+
--cyan7: hsl(199, 64%, 29%);
|
|
81
|
+
--cyan6: hsl(199, 64%, 42%);
|
|
82
|
+
--cyan5: hsl(199, 78%, 55%);
|
|
83
|
+
--cyan4: hsl(199, 78%, 58%);
|
|
84
|
+
--cyan3: hsl(199, 78%, 76%);
|
|
85
|
+
--cyan2: hsl(199, 78%, 87%);
|
|
86
|
+
--cyan1: hsl(199, 79%, 95%);
|
|
87
|
+
--teal8: hsl(189, 62%, 13%);
|
|
88
|
+
--teal7: hsl(189, 61%, 25%);
|
|
89
|
+
--teal6: hsl(189, 61%, 37%);
|
|
90
|
+
--teal5: hsl(189, 61%, 48%);
|
|
91
|
+
--teal4: hsl(189, 57%, 52%);
|
|
92
|
+
--teal3: hsl(189, 58%, 73%);
|
|
93
|
+
--teal2: hsl(189, 57%, 85%);
|
|
94
|
+
--teal1: hsl(190, 56%, 94%);
|
|
95
|
+
--mint8: hsl(178, 100%, 11%);
|
|
96
|
+
--mint7: hsl(177, 100%, 20%);
|
|
97
|
+
--mint6: hsl(178, 100%, 30%);
|
|
98
|
+
--mint5: hsl(177, 100%, 39%);
|
|
99
|
+
--mint4: hsl(177, 82%, 44%);
|
|
100
|
+
--mint3: hsl(177, 64%, 68%);
|
|
101
|
+
--mint2: hsl(178, 63%, 83%);
|
|
102
|
+
--mint1: hsl(178, 63%, 93%);
|
|
103
|
+
--green8: hsl(136, 59%, 14%);
|
|
104
|
+
--green7: hsl(135, 59%, 26%);
|
|
105
|
+
--green6: hsl(135, 58%, 37%);
|
|
106
|
+
--green5: hsl(135, 59%, 49%);
|
|
107
|
+
--green4: hsl(135, 56%, 53%);
|
|
108
|
+
--green3: hsl(135, 57%, 74%);
|
|
109
|
+
--green2: hsl(136, 56%, 86%);
|
|
110
|
+
--green1: hsl(137, 56%, 94%);
|
|
111
|
+
--yellow8: hsl(48, 100%, 14%);
|
|
112
|
+
--yellow7: hsl(48, 100%, 26%);
|
|
113
|
+
--yellow6: hsl(48, 100%, 38%);
|
|
114
|
+
--yellow5: hsl(48, 100%, 50%);
|
|
115
|
+
--yellow4: hsl(48, 100%, 54%);
|
|
116
|
+
--yellow3: hsl(48, 100%, 74%);
|
|
117
|
+
--yellow2: hsl(48, 100%, 86%);
|
|
118
|
+
--yellow1: hsl(48, 100%, 94%);
|
|
119
|
+
--orange8: hsl(35, 100%, 14%);
|
|
120
|
+
--orange7: hsl(35, 100%, 26%);
|
|
121
|
+
--orange6: hsl(35, 100%, 38%);
|
|
122
|
+
--orange5: hsl(35, 100%, 50%);
|
|
123
|
+
--orange4: hsl(35, 100%, 54%);
|
|
124
|
+
--orange3: hsl(35, 100%, 74%);
|
|
125
|
+
--orange2: hsl(35, 100%, 86%);
|
|
126
|
+
--orange1: hsl(35, 100%, 94%);
|
|
127
|
+
--red8: hsl(3, 69%, 16%);
|
|
128
|
+
--red7: hsl(3, 68%, 31%);
|
|
129
|
+
--red6: hsl(3, 68%, 45%);
|
|
130
|
+
--red5: hsl(3, 100%, 59%);
|
|
131
|
+
--red4: hsl(3, 100%, 63%);
|
|
132
|
+
--red3: hsl(3, 100%, 79%);
|
|
133
|
+
--red2: hsl(3, 100%, 89%);
|
|
134
|
+
--red1: hsl(2, 100%, 95%);
|
|
135
|
+
--text-success: var(--green4);
|
|
136
|
+
--text-error: var(--red4);
|
|
137
|
+
--text-on-color: var(--white);
|
|
138
|
+
--text-placeholder: var(--warm6);
|
|
139
|
+
--text-secondary: var(--warm5);
|
|
140
|
+
--text-primary-alt: var(--warm3);
|
|
141
|
+
--text-primary: var(--warm1);
|
|
142
|
+
--support-info: var(--blue4);
|
|
143
|
+
--support-success: var(--green4);
|
|
144
|
+
--support-warning: var(--yellow4);
|
|
145
|
+
--support-error: var(--red4);
|
|
146
|
+
--link-visited: var(--indigo4);
|
|
147
|
+
--link-subtle: var(--warm1);
|
|
148
|
+
--link-hover: var(--blue3);
|
|
149
|
+
--link: var(--blue4);
|
|
150
|
+
--icon-on-color: var(--white);
|
|
151
|
+
--icon-disabled: var(--warm7);
|
|
152
|
+
--icon-secondary: var(--warm4);
|
|
153
|
+
--icon-primary: var(--warm2);
|
|
154
|
+
--button-disabled: var(--warm6);
|
|
155
|
+
--button-danger-active: var(--red3);
|
|
156
|
+
--button-danger-hover: var(--red3);
|
|
157
|
+
--button-danger: var(--red4);
|
|
158
|
+
--button-secondary-active: var(--warm3);
|
|
159
|
+
--button-secondary-hover: var(--warm2);
|
|
160
|
+
--button-secondary: var(--warm1);
|
|
161
|
+
--button-primary-active: var(--blue3);
|
|
162
|
+
--button-primary-hover: var(--blue3);
|
|
163
|
+
--button-primary: var(--blue4);
|
|
164
|
+
--border-strong: var(--warm5);
|
|
165
|
+
--border-default: var(--warm7);
|
|
166
|
+
--border-muted: var(--warm9);
|
|
167
|
+
--background-brown: var(--brown8);
|
|
168
|
+
--background-pink: var(--pink8);
|
|
169
|
+
--background-purple: var(--purple8);
|
|
170
|
+
--background-indigo: var(--indigo8);
|
|
171
|
+
--background-blue: var(--blue8);
|
|
172
|
+
--background-cyan: var(--cyan8);
|
|
173
|
+
--background-teal: var(--teal8);
|
|
174
|
+
--background-mint: var(--mint8);
|
|
175
|
+
--background-green: var(--green8);
|
|
176
|
+
--background-yellow: var(--yellow8);
|
|
177
|
+
--background-orange: var(--orange8);
|
|
178
|
+
--background-red: var(--red8);
|
|
179
|
+
--background-selected-hover: var(--warm7);
|
|
180
|
+
--background-selected: var(--warm8);
|
|
181
|
+
--background-hover: var(--warm9);
|
|
182
|
+
--background-secondary: var(--warm9);
|
|
183
|
+
--background: var(--warm10);
|
|
184
|
+
}
|
package/dist/themes/dark.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 12 Dec 2022 16:49:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -132,5 +132,53 @@
|
|
|
132
132
|
--red3: hsl(3, 100%, 79%);
|
|
133
133
|
--red2: hsl(3, 100%, 89%);
|
|
134
134
|
--red1: hsl(2, 100%, 95%);
|
|
135
|
-
--
|
|
135
|
+
--text-success: var(--green4);
|
|
136
|
+
--text-error: var(--red4);
|
|
137
|
+
--text-on-color: var(--white);
|
|
138
|
+
--text-placeholder: var(--grey6);
|
|
139
|
+
--text-secondary: var(--grey5);
|
|
140
|
+
--text-primary-alt: var(--grey3);
|
|
141
|
+
--text-primary: var(--grey1);
|
|
142
|
+
--support-info: var(--blue4);
|
|
143
|
+
--support-success: var(--green4);
|
|
144
|
+
--support-warning: var(--yellow4);
|
|
145
|
+
--support-error: var(--red4);
|
|
146
|
+
--link-visited: var(--indigo4);
|
|
147
|
+
--link-subtle: var(--grey1);
|
|
148
|
+
--link-hover: var(--blue3);
|
|
149
|
+
--link: var(--blue4);
|
|
150
|
+
--icon-on-color: var(--white);
|
|
151
|
+
--icon-disabled: var(--grey7);
|
|
152
|
+
--icon-secondary: var(--grey4);
|
|
153
|
+
--icon-primary: var(--grey2);
|
|
154
|
+
--button-disabled: var(--grey6);
|
|
155
|
+
--button-danger-active: var(--red3);
|
|
156
|
+
--button-danger-hover: var(--red3);
|
|
157
|
+
--button-danger: var(--red4);
|
|
158
|
+
--button-secondary-active: var(--grey3);
|
|
159
|
+
--button-secondary-hover: var(--grey2);
|
|
160
|
+
--button-secondary: var(--grey1);
|
|
161
|
+
--button-primary-active: var(--blue3);
|
|
162
|
+
--button-primary-hover: var(--blue3);
|
|
163
|
+
--button-primary: var(--blue4);
|
|
164
|
+
--border-strong: var(--grey5);
|
|
165
|
+
--border-default: var(--grey7);
|
|
166
|
+
--border-muted: var(--grey9);
|
|
167
|
+
--background-brown: var(--brown8);
|
|
168
|
+
--background-pink: var(--pink8);
|
|
169
|
+
--background-purple: var(--purple8);
|
|
170
|
+
--background-indigo: var(--indigo8);
|
|
171
|
+
--background-blue: var(--blue8);
|
|
172
|
+
--background-cyan: var(--cyan8);
|
|
173
|
+
--background-teal: var(--teal8);
|
|
174
|
+
--background-mint: var(--mint8);
|
|
175
|
+
--background-green: var(--green8);
|
|
176
|
+
--background-yellow: var(--yellow8);
|
|
177
|
+
--background-orange: var(--orange8);
|
|
178
|
+
--background-red: var(--red8);
|
|
179
|
+
--background-selected-hover: var(--grey7);
|
|
180
|
+
--background-selected: var(--grey8);
|
|
181
|
+
--background-hover: var(--grey9);
|
|
182
|
+
--background-secondary: var(--grey9);
|
|
183
|
+
--background: var(--grey10);
|
|
136
184
|
}
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Mon, 12 Dec 2022 16:49:20 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--white: hsl(0, 0%, 100%);
|
|
8
|
+
--black: hsl(0, 0%, 0%);
|
|
9
|
+
--cold10: hsl(206, 16%, 8%);
|
|
10
|
+
--cold9: hsl(200, 12%, 15%);
|
|
11
|
+
--cold8: hsl(207, 10%, 23%);
|
|
12
|
+
--cold7: hsl(207, 7%, 32%);
|
|
13
|
+
--cold6: hsl(210, 6%, 44%);
|
|
14
|
+
--cold5: hsl(216, 7%, 56%);
|
|
15
|
+
--cold4: hsl(210, 8%, 66%);
|
|
16
|
+
--cold3: hsl(210, 11%, 78%);
|
|
17
|
+
--cold2: hsl(213, 15%, 88%);
|
|
18
|
+
--cold1: hsl(220, 30%, 96%);
|
|
19
|
+
--warm10: hsl(0, 7%, 8%);
|
|
20
|
+
--warm9: hsl(0, 3%, 15%);
|
|
21
|
+
--warm8: hsl(0, 3%, 23%);
|
|
22
|
+
--warm7: hsl(0, 3%, 33%);
|
|
23
|
+
--warm6: hsl(0, 2%, 44%);
|
|
24
|
+
--warm5: hsl(0, 2%, 55%);
|
|
25
|
+
--warm4: hsl(0, 3%, 67%);
|
|
26
|
+
--warm3: hsl(10, 5%, 78%);
|
|
27
|
+
--warm2: hsl(10, 10%, 89%);
|
|
28
|
+
--warm1: hsl(12, 24%, 96%);
|
|
29
|
+
--grey10: hsl(0, 0%, 9%);
|
|
30
|
+
--grey9: hsl(0, 0%, 15%);
|
|
31
|
+
--grey8: hsl(0, 0%, 22%);
|
|
32
|
+
--grey7: hsl(0, 0%, 32%);
|
|
33
|
+
--grey6: hsl(0, 0%, 44%);
|
|
34
|
+
--grey5: hsl(0, 0%, 55%);
|
|
35
|
+
--grey4: hsl(0, 0%, 66%);
|
|
36
|
+
--grey3: hsl(0, 0%, 78%);
|
|
37
|
+
--grey2: hsl(0, 0%, 88%);
|
|
38
|
+
--grey1: hsl(0, 0%, 96%);
|
|
39
|
+
--brown8: hsl(35, 27%, 14%);
|
|
40
|
+
--brown7: hsl(34, 26%, 26%);
|
|
41
|
+
--brown6: hsl(33, 26%, 38%);
|
|
42
|
+
--brown5: hsl(34, 27%, 50%);
|
|
43
|
+
--brown4: hsl(34, 26%, 54%);
|
|
44
|
+
--brown3: hsl(34, 26%, 74%);
|
|
45
|
+
--brown2: hsl(35, 27%, 86%);
|
|
46
|
+
--brown1: hsl(33, 29%, 94%);
|
|
47
|
+
--pink8: hsl(349, 69%, 16%);
|
|
48
|
+
--pink7: hsl(349, 71%, 31%);
|
|
49
|
+
--pink6: hsl(348, 70%, 45%);
|
|
50
|
+
--pink5: hsl(349, 100%, 59%);
|
|
51
|
+
--pink4: hsl(349, 100%, 62%);
|
|
52
|
+
--pink3: hsl(349, 100%, 78%);
|
|
53
|
+
--pink2: hsl(349, 100%, 89%);
|
|
54
|
+
--pink1: hsl(348, 100%, 95%);
|
|
55
|
+
--purple8: hsl(280, 46%, 17%);
|
|
56
|
+
--purple7: hsl(279, 46%, 31%);
|
|
57
|
+
--purple6: hsl(280, 46%, 45%);
|
|
58
|
+
--purple5: hsl(280, 68%, 60%);
|
|
59
|
+
--purple4: hsl(280, 68%, 63%);
|
|
60
|
+
--purple3: hsl(279, 68%, 79%);
|
|
61
|
+
--purple2: hsl(280, 68%, 89%);
|
|
62
|
+
--purple1: hsl(279, 68%, 95%);
|
|
63
|
+
--indigo8: hsl(242, 43%, 16%);
|
|
64
|
+
--indigo7: hsl(241, 43%, 31%);
|
|
65
|
+
--indigo6: hsl(241, 43%, 45%);
|
|
66
|
+
--indigo5: hsl(241, 61%, 59%);
|
|
67
|
+
--indigo4: hsl(241, 61%, 62%);
|
|
68
|
+
--indigo3: hsl(241, 61%, 79%);
|
|
69
|
+
--indigo2: hsl(242, 62%, 89%);
|
|
70
|
+
--indigo1: hsl(244, 62%, 95%);
|
|
71
|
+
--blue8: hsl(211, 100%, 14%);
|
|
72
|
+
--blue7: hsl(211, 100%, 26%);
|
|
73
|
+
--blue6: hsl(211, 100%, 38%);
|
|
74
|
+
--blue5: hsl(211, 100%, 50%);
|
|
75
|
+
--blue4: hsl(211, 100%, 54%);
|
|
76
|
+
--blue3: hsl(211, 100%, 74%);
|
|
77
|
+
--blue2: hsl(211, 100%, 86%);
|
|
78
|
+
--blue1: hsl(211, 100%, 94%);
|
|
79
|
+
--cyan8: hsl(199, 64%, 15%);
|
|
80
|
+
--cyan7: hsl(199, 64%, 29%);
|
|
81
|
+
--cyan6: hsl(199, 64%, 42%);
|
|
82
|
+
--cyan5: hsl(199, 78%, 55%);
|
|
83
|
+
--cyan4: hsl(199, 78%, 58%);
|
|
84
|
+
--cyan3: hsl(199, 78%, 76%);
|
|
85
|
+
--cyan2: hsl(199, 78%, 87%);
|
|
86
|
+
--cyan1: hsl(199, 79%, 95%);
|
|
87
|
+
--teal8: hsl(189, 62%, 13%);
|
|
88
|
+
--teal7: hsl(189, 61%, 25%);
|
|
89
|
+
--teal6: hsl(189, 61%, 37%);
|
|
90
|
+
--teal5: hsl(189, 61%, 48%);
|
|
91
|
+
--teal4: hsl(189, 57%, 52%);
|
|
92
|
+
--teal3: hsl(189, 58%, 73%);
|
|
93
|
+
--teal2: hsl(189, 57%, 85%);
|
|
94
|
+
--teal1: hsl(190, 56%, 94%);
|
|
95
|
+
--mint8: hsl(178, 100%, 11%);
|
|
96
|
+
--mint7: hsl(177, 100%, 20%);
|
|
97
|
+
--mint6: hsl(178, 100%, 30%);
|
|
98
|
+
--mint5: hsl(177, 100%, 39%);
|
|
99
|
+
--mint4: hsl(177, 82%, 44%);
|
|
100
|
+
--mint3: hsl(177, 64%, 68%);
|
|
101
|
+
--mint2: hsl(178, 63%, 83%);
|
|
102
|
+
--mint1: hsl(178, 63%, 93%);
|
|
103
|
+
--green8: hsl(136, 59%, 14%);
|
|
104
|
+
--green7: hsl(135, 59%, 26%);
|
|
105
|
+
--green6: hsl(135, 58%, 37%);
|
|
106
|
+
--green5: hsl(135, 59%, 49%);
|
|
107
|
+
--green4: hsl(135, 56%, 53%);
|
|
108
|
+
--green3: hsl(135, 57%, 74%);
|
|
109
|
+
--green2: hsl(136, 56%, 86%);
|
|
110
|
+
--green1: hsl(137, 56%, 94%);
|
|
111
|
+
--yellow8: hsl(48, 100%, 14%);
|
|
112
|
+
--yellow7: hsl(48, 100%, 26%);
|
|
113
|
+
--yellow6: hsl(48, 100%, 38%);
|
|
114
|
+
--yellow5: hsl(48, 100%, 50%);
|
|
115
|
+
--yellow4: hsl(48, 100%, 54%);
|
|
116
|
+
--yellow3: hsl(48, 100%, 74%);
|
|
117
|
+
--yellow2: hsl(48, 100%, 86%);
|
|
118
|
+
--yellow1: hsl(48, 100%, 94%);
|
|
119
|
+
--orange8: hsl(35, 100%, 14%);
|
|
120
|
+
--orange7: hsl(35, 100%, 26%);
|
|
121
|
+
--orange6: hsl(35, 100%, 38%);
|
|
122
|
+
--orange5: hsl(35, 100%, 50%);
|
|
123
|
+
--orange4: hsl(35, 100%, 54%);
|
|
124
|
+
--orange3: hsl(35, 100%, 74%);
|
|
125
|
+
--orange2: hsl(35, 100%, 86%);
|
|
126
|
+
--orange1: hsl(35, 100%, 94%);
|
|
127
|
+
--red8: hsl(3, 69%, 16%);
|
|
128
|
+
--red7: hsl(3, 68%, 31%);
|
|
129
|
+
--red6: hsl(3, 68%, 45%);
|
|
130
|
+
--red5: hsl(3, 100%, 59%);
|
|
131
|
+
--red4: hsl(3, 100%, 63%);
|
|
132
|
+
--red3: hsl(3, 100%, 79%);
|
|
133
|
+
--red2: hsl(3, 100%, 89%);
|
|
134
|
+
--red1: hsl(2, 100%, 95%);
|
|
135
|
+
--text-success: var(--green6);
|
|
136
|
+
--text-error: var(--red6);
|
|
137
|
+
--text-on-color: var(--white);
|
|
138
|
+
--text-placeholder: var(--cold4);
|
|
139
|
+
--text-secondary: var(--cold7);
|
|
140
|
+
--text-primary-alt: var(--cold8);
|
|
141
|
+
--text-primary: var(--cold10);
|
|
142
|
+
--support-info: var(--blue5);
|
|
143
|
+
--support-success: var(--green5);
|
|
144
|
+
--support-warning: var(--yellow5);
|
|
145
|
+
--support-error: var(--red5);
|
|
146
|
+
--link-visited: var(--indigo5);
|
|
147
|
+
--link-subtle: var(--cold7);
|
|
148
|
+
--link-hover: var(--blue6);
|
|
149
|
+
--link: var(--blue5);
|
|
150
|
+
--icon-on-color: var(--white);
|
|
151
|
+
--icon-disabled: var(--cold7);
|
|
152
|
+
--icon-secondary: var(--cold8);
|
|
153
|
+
--icon-primary: var(--cold9);
|
|
154
|
+
--button-disabled: var(--cold4);
|
|
155
|
+
--button-danger-active: var(--red7);
|
|
156
|
+
--button-danger-hover: var(--red6);
|
|
157
|
+
--button-danger: var(--red5);
|
|
158
|
+
--button-secondary-active: var(--cold6);
|
|
159
|
+
--button-secondary-hover: var(--cold7);
|
|
160
|
+
--button-secondary: var(--cold8);
|
|
161
|
+
--button-primary-active: var(--blue7);
|
|
162
|
+
--button-primary-hover: var(--blue6);
|
|
163
|
+
--button-primary: var(--blue5);
|
|
164
|
+
--border-strong: var(--cold6);
|
|
165
|
+
--border-default: var(--cold4);
|
|
166
|
+
--border-muted: var(--cold2);
|
|
167
|
+
--background-brown: var(--brown1);
|
|
168
|
+
--background-pink: var(--pink1);
|
|
169
|
+
--background-purple: var(--purple1);
|
|
170
|
+
--background-indigo: var(--indigo1);
|
|
171
|
+
--background-blue: var(--blue1);
|
|
172
|
+
--background-cyan: var(--cyan1);
|
|
173
|
+
--background-teal: var(--teal1);
|
|
174
|
+
--background-mint: var(--mint1);
|
|
175
|
+
--background-green: var(--green1);
|
|
176
|
+
--background-yellow: var(--yellow1);
|
|
177
|
+
--background-orange: var(--orange1);
|
|
178
|
+
--background-red: var(--red1);
|
|
179
|
+
--background-selected-hover: var(--cold3);
|
|
180
|
+
--background-selected: var(--cold2);
|
|
181
|
+
--background-hover: var(--cold1);
|
|
182
|
+
--background-secondary: var(--cold1);
|
|
183
|
+
--background: var(--white);
|
|
184
|
+
}
|