@new-ui/colors 0.3.0 → 1.1.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.
Files changed (17) hide show
  1. package/README.md +18 -17
  2. package/dist/themes/dark-cold.css +50 -2
  3. package/dist/themes/dark-warm.css +50 -2
  4. package/dist/themes/dark.css +50 -2
  5. package/dist/themes/light-cold.css +4 -4
  6. package/dist/themes/light-warm.css +4 -4
  7. package/dist/themes/light.css +4 -4
  8. package/help/cover.png +0 -0
  9. package/package.json +2 -2
  10. package/tokens/themes/dark/dark.json +193 -1
  11. package/tokens/themes/dark-cold/dark.json +193 -1
  12. package/tokens/themes/dark-warm/dark.json +193 -1
  13. package/tokens/themes/light/light.json +3 -3
  14. package/tokens/themes/light-cold/light.json +3 -3
  15. package/tokens/themes/light-warm/light.json +3 -3
  16. package/help/dark.png +0 -0
  17. package/help/light.png +0 -0
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
- ![](help/dark.png)
1
+ ![](help/cover.png)
2
2
 
3
3
  ## Install
4
- Install New UI Colors from your terminal via npm. Current version is 0.3.0
4
+ Install New UI Colors from your terminal via npm. Current version is 1.1.0
5
5
 
6
6
  ```
7
7
  npm i @new-ui/colors
@@ -10,25 +10,25 @@ npm i @new-ui/colors
10
10
  To get started quickly, you can use the CDN files.
11
11
 
12
12
  Light themes:
13
+ ```html
14
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.1.0/dist/themes/light.min.css">
13
15
  ```
14
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/light.css">
16
+ ```html
17
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.1.0/dist/themes/light-warm.min.css">
15
18
  ```
16
- ```
17
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/light-warm.css">
18
- ```
19
- ```
20
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/light-cold.css">
19
+ ```html
20
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.1.0/dist/themes/light-cold.min.css">
21
21
  ```
22
22
 
23
- Dark themes [WIP]:
24
- ```
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/dark.css">
26
- ```
27
- ```
28
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/dark-warm.css">
23
+ Dark themes:
24
+ ```html
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.1.0/dist/themes/dark.min.css">
29
26
  ```
27
+ ```html
28
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.1.0/dist/themes/dark-warm.min.css">
30
29
  ```
31
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@0.3.0/dist/themes/dark-cold.css">
30
+ ```html
31
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@new-ui/colors@1.1.0/dist/themes/dark-cold.min.css">
32
32
  ```
33
33
 
34
34
  ## Build
@@ -53,6 +53,7 @@ npm run build:tokens -- --theme=dark-warm
53
53
  npm run build:tokens -- --theme=dark-cold
54
54
  ```
55
55
 
56
- ## Get a Figma copy
56
+ ## Recommended Defaults
57
+ Refer to the Figma file for the color tokens cheatsheet.
57
58
 
58
- [New UI Colors - Light](https://www.figma.com/community/file/1179503548902179413)
59
+ [Get a Figma copy](https://www.figma.com/community/file/1179503548902179413)
package/dist/themes/dark-cold.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 11 Dec 2022 21:08:08 GMT
3
+ * Generated on Wed, 21 Dec 2022 20:53:22 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
- --background: var(--black);
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(--cold8);
152
+ --icon-secondary: var(--cold4);
153
+ --icon-primary: var(--cold2);
154
+ --button-disabled: var(--cold9);
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);
136
184
  }
package/dist/themes/dark-warm.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 11 Dec 2022 21:08:03 GMT
3
+ * Generated on Wed, 21 Dec 2022 20:53:16 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
- --background: var(--black);
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(--warm8);
152
+ --icon-secondary: var(--warm4);
153
+ --icon-primary: var(--warm2);
154
+ --button-disabled: var(--warm9);
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);
136
184
  }
package/dist/themes/dark.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 11 Dec 2022 21:08:15 GMT
3
+ * Generated on Wed, 21 Dec 2022 20:53:11 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
- --background: var(--black);
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(--grey8);
152
+ --icon-secondary: var(--grey4);
153
+ --icon-primary: var(--grey2);
154
+ --button-disabled: var(--grey9);
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
  }
package/dist/themes/light-cold.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 11 Dec 2022 21:07:21 GMT
3
+ * Generated on Wed, 21 Dec 2022 20:53:06 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,12 +144,12 @@
144
144
  --support-warning: var(--yellow5);
145
145
  --support-error: var(--red5);
146
146
  --link-visited: var(--indigo5);
147
- --link-subtle: var(--cold7);
147
+ --link-subtle: var(--cold8);
148
148
  --link-hover: var(--blue6);
149
149
  --link: var(--blue5);
150
150
  --icon-on-color: var(--white);
151
- --icon-disabled: var(--cold7);
152
- --icon-secondary: var(--cold8);
151
+ --icon-disabled: var(--cold4);
152
+ --icon-secondary: var(--cold7);
153
153
  --icon-primary: var(--cold9);
154
154
  --button-disabled: var(--cold4);
155
155
  --button-danger-active: var(--red7);
package/dist/themes/light-warm.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 11 Dec 2022 21:07:14 GMT
3
+ * Generated on Wed, 21 Dec 2022 20:53:01 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,12 +144,12 @@
144
144
  --support-warning: var(--yellow5);
145
145
  --support-error: var(--red5);
146
146
  --link-visited: var(--indigo5);
147
- --link-subtle: var(--warm7);
147
+ --link-subtle: var(--warm8);
148
148
  --link-hover: var(--blue6);
149
149
  --link: var(--blue5);
150
150
  --icon-on-color: var(--white);
151
- --icon-disabled: var(--warm7);
152
- --icon-secondary: var(--warm8);
151
+ --icon-disabled: var(--warm4);
152
+ --icon-secondary: var(--warm7);
153
153
  --icon-primary: var(--warm9);
154
154
  --button-disabled: var(--warm4);
155
155
  --button-danger-active: var(--red7);
package/dist/themes/light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 11 Dec 2022 21:07:08 GMT
3
+ * Generated on Wed, 21 Dec 2022 20:52:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -144,12 +144,12 @@
144
144
  --support-warning: var(--yellow5);
145
145
  --support-error: var(--red5);
146
146
  --link-visited: var(--indigo5);
147
- --link-subtle: var(--grey7);
147
+ --link-subtle: var(--grey8);
148
148
  --link-hover: var(--blue6);
149
149
  --link: var(--blue5);
150
150
  --icon-on-color: var(--white);
151
- --icon-disabled: var(--grey7);
152
- --icon-secondary: var(--grey8);
151
+ --icon-disabled: var(--grey4);
152
+ --icon-secondary: var(--grey7);
153
153
  --icon-primary: var(--grey9);
154
154
  --button-disabled: var(--grey4);
155
155
  --button-danger-active: var(--red7);
package/help/cover.png ADDED
Binary file
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@new-ui/colors",
3
- "version": "0.3.0",
4
- "description": "![](help/dark.png)",
3
+ "version": "1.1.0",
4
+ "description": "Colors are now one less thing to worry about.",
5
5
  "main": "index.js",
6
6
  "scripts": {
7
7
  "build:tokens": "node ./build-tokens.js"
package/tokens/themes/dark/dark.json CHANGED
@@ -1,6 +1,198 @@
1
1
  {
2
2
  "$background": {
3
- "value": "{$black}",
3
+ "value": "{$grey10}",
4
+ "type": "color"
5
+ },
6
+ "$background-secondary": {
7
+ "value": "{$grey9}",
8
+ "type": "color"
9
+ },
10
+ "$background-hover": {
11
+ "value": "{$grey9}",
12
+ "type": "color"
13
+ },
14
+ "$background-selected": {
15
+ "value": "{$grey8}",
16
+ "type": "color"
17
+ },
18
+ "$background-selected-hover": {
19
+ "value": "{$grey7}",
20
+ "type": "color"
21
+ },
22
+ "$background-red": {
23
+ "value": "{$red8}",
24
+ "type": "color"
25
+ },
26
+ "$background-orange": {
27
+ "value": "{$orange8}",
28
+ "type": "color"
29
+ },
30
+ "$background-yellow": {
31
+ "value": "{$yellow8}",
32
+ "type": "color"
33
+ },
34
+ "$background-green": {
35
+ "value": "{$green8}",
36
+ "type": "color"
37
+ },
38
+ "$background-mint": {
39
+ "value": "{$mint8}",
40
+ "type": "color"
41
+ },
42
+ "$background-teal": {
43
+ "value": "{$teal8}",
44
+ "type": "color"
45
+ },
46
+ "$background-cyan": {
47
+ "value": "{$cyan8}",
48
+ "type": "color"
49
+ },
50
+ "$background-blue": {
51
+ "value": "{$blue8}",
52
+ "type": "color"
53
+ },
54
+ "$background-indigo": {
55
+ "value": "{$indigo8}",
56
+ "type": "color"
57
+ },
58
+ "$background-purple": {
59
+ "value": "{$purple8}",
60
+ "type": "color"
61
+ },
62
+ "$background-pink": {
63
+ "value": "{$pink8}",
64
+ "type": "color"
65
+ },
66
+ "$background-brown": {
67
+ "value": "{$brown8}",
68
+ "type": "color"
69
+ },
70
+ "$border-muted": {
71
+ "value": "{$grey9}",
72
+ "type": "color"
73
+ },
74
+ "$border-default": {
75
+ "value": "{$grey7}",
76
+ "type": "color"
77
+ },
78
+ "$border-strong": {
79
+ "value": "{$grey5}",
80
+ "type": "color"
81
+ },
82
+ "$button-primary": {
83
+ "value": "{$blue4}",
84
+ "type": "color"
85
+ },
86
+ "$button-primary-hover": {
87
+ "value": "{$blue3}",
88
+ "type": "color"
89
+ },
90
+ "$button-primary-active": {
91
+ "value": "{$blue3}",
92
+ "type": "color"
93
+ },
94
+ "$button-secondary": {
95
+ "value": "{$grey1}",
96
+ "type": "color"
97
+ },
98
+ "$button-secondary-hover": {
99
+ "value": "{$grey2}",
100
+ "type": "color"
101
+ },
102
+ "$button-secondary-active": {
103
+ "value": "{$grey3}",
104
+ "type": "color"
105
+ },
106
+ "$button-danger": {
107
+ "value": "{$red4}",
108
+ "type": "color"
109
+ },
110
+ "$button-danger-hover": {
111
+ "value": "{$red3}",
112
+ "type": "color"
113
+ },
114
+ "$button-danger-active": {
115
+ "value": "{$red3}",
116
+ "type": "color"
117
+ },
118
+ "$button-disabled": {
119
+ "value": "{$grey9}",
120
+ "type": "color"
121
+ },
122
+ "$icon-primary": {
123
+ "value": "{$grey2}",
124
+ "type": "color"
125
+ },
126
+ "$icon-secondary": {
127
+ "value": "{$grey4}",
128
+ "type": "color"
129
+ },
130
+ "$icon-disabled": {
131
+ "value": "{$grey8}",
132
+ "type": "color"
133
+ },
134
+ "$icon-on-color": {
135
+ "value": "{$white}",
136
+ "type": "color"
137
+ },
138
+ "$link": {
139
+ "value": "{$blue4}",
140
+ "type": "color"
141
+ },
142
+ "$link-hover": {
143
+ "value": "{$blue3}",
144
+ "type": "color"
145
+ },
146
+ "$link-subtle": {
147
+ "value": "{$grey1}",
148
+ "type": "color"
149
+ },
150
+ "$link-visited": {
151
+ "value": "{$indigo4}",
152
+ "type": "color"
153
+ },
154
+ "$support-error": {
155
+ "value": "{$red4}",
156
+ "type": "color"
157
+ },
158
+ "$support-warning": {
159
+ "value": "{$yellow4}",
160
+ "type": "color"
161
+ },
162
+ "$support-success": {
163
+ "value": "{$green4}",
164
+ "type": "color"
165
+ },
166
+ "$support-info": {
167
+ "value": "{$blue4}",
168
+ "type": "color"
169
+ },
170
+ "$text-primary": {
171
+ "value": "{$grey1}",
172
+ "type": "color"
173
+ },
174
+ "$text-primary-alt": {
175
+ "value": "{$grey3}",
176
+ "type": "color"
177
+ },
178
+ "$text-secondary": {
179
+ "value": "{$grey5}",
180
+ "type": "color"
181
+ },
182
+ "$text-placeholder": {
183
+ "value": "{$grey6}",
184
+ "type": "color"
185
+ },
186
+ "$text-on-color": {
187
+ "value": "{$white}",
188
+ "type": "color"
189
+ },
190
+ "$text-error": {
191
+ "value": "{$red4}",
192
+ "type": "color"
193
+ },
194
+ "$text-success": {
195
+ "value": "{$green4}",
4
196
  "type": "color"
5
197
  }
6
198
  }
package/tokens/themes/dark-cold/dark.json CHANGED
@@ -1,6 +1,198 @@
1
1
  {
2
2
  "$background": {
3
- "value": "{$black}",
3
+ "value": "{$cold10}",
4
+ "type": "color"
5
+ },
6
+ "$background-secondary": {
7
+ "value": "{$cold9}",
8
+ "type": "color"
9
+ },
10
+ "$background-hover": {
11
+ "value": "{$cold9}",
12
+ "type": "color"
13
+ },
14
+ "$background-selected": {
15
+ "value": "{$cold8}",
16
+ "type": "color"
17
+ },
18
+ "$background-selected-hover": {
19
+ "value": "{$cold7}",
20
+ "type": "color"
21
+ },
22
+ "$background-red": {
23
+ "value": "{$red8}",
24
+ "type": "color"
25
+ },
26
+ "$background-orange": {
27
+ "value": "{$orange8}",
28
+ "type": "color"
29
+ },
30
+ "$background-yellow": {
31
+ "value": "{$yellow8}",
32
+ "type": "color"
33
+ },
34
+ "$background-green": {
35
+ "value": "{$green8}",
36
+ "type": "color"
37
+ },
38
+ "$background-mint": {
39
+ "value": "{$mint8}",
40
+ "type": "color"
41
+ },
42
+ "$background-teal": {
43
+ "value": "{$teal8}",
44
+ "type": "color"
45
+ },
46
+ "$background-cyan": {
47
+ "value": "{$cyan8}",
48
+ "type": "color"
49
+ },
50
+ "$background-blue": {
51
+ "value": "{$blue8}",
52
+ "type": "color"
53
+ },
54
+ "$background-indigo": {
55
+ "value": "{$indigo8}",
56
+ "type": "color"
57
+ },
58
+ "$background-purple": {
59
+ "value": "{$purple8}",
60
+ "type": "color"
61
+ },
62
+ "$background-pink": {
63
+ "value": "{$pink8}",
64
+ "type": "color"
65
+ },
66
+ "$background-brown": {
67
+ "value": "{$brown8}",
68
+ "type": "color"
69
+ },
70
+ "$border-muted": {
71
+ "value": "{$cold9}",
72
+ "type": "color"
73
+ },
74
+ "$border-default": {
75
+ "value": "{$cold7}",
76
+ "type": "color"
77
+ },
78
+ "$border-strong": {
79
+ "value": "{$cold5}",
80
+ "type": "color"
81
+ },
82
+ "$button-primary": {
83
+ "value": "{$blue4}",
84
+ "type": "color"
85
+ },
86
+ "$button-primary-hover": {
87
+ "value": "{$blue3}",
88
+ "type": "color"
89
+ },
90
+ "$button-primary-active": {
91
+ "value": "{$blue3}",
92
+ "type": "color"
93
+ },
94
+ "$button-secondary": {
95
+ "value": "{$cold1}",
96
+ "type": "color"
97
+ },
98
+ "$button-secondary-hover": {
99
+ "value": "{$cold2}",
100
+ "type": "color"
101
+ },
102
+ "$button-secondary-active": {
103
+ "value": "{$cold3}",
104
+ "type": "color"
105
+ },
106
+ "$button-danger": {
107
+ "value": "{$red4}",
108
+ "type": "color"
109
+ },
110
+ "$button-danger-hover": {
111
+ "value": "{$red3}",
112
+ "type": "color"
113
+ },
114
+ "$button-danger-active": {
115
+ "value": "{$red3}",
116
+ "type": "color"
117
+ },
118
+ "$button-disabled": {
119
+ "value": "{$cold9}",
120
+ "type": "color"
121
+ },
122
+ "$icon-primary": {
123
+ "value": "{$cold2}",
124
+ "type": "color"
125
+ },
126
+ "$icon-secondary": {
127
+ "value": "{$cold4}",
128
+ "type": "color"
129
+ },
130
+ "$icon-disabled": {
131
+ "value": "{$cold8}",
132
+ "type": "color"
133
+ },
134
+ "$icon-on-color": {
135
+ "value": "{$white}",
136
+ "type": "color"
137
+ },
138
+ "$link": {
139
+ "value": "{$blue4}",
140
+ "type": "color"
141
+ },
142
+ "$link-hover": {
143
+ "value": "{$blue3}",
144
+ "type": "color"
145
+ },
146
+ "$link-subtle": {
147
+ "value": "{$cold1}",
148
+ "type": "color"
149
+ },
150
+ "$link-visited": {
151
+ "value": "{$indigo4}",
152
+ "type": "color"
153
+ },
154
+ "$support-error": {
155
+ "value": "{$red4}",
156
+ "type": "color"
157
+ },
158
+ "$support-warning": {
159
+ "value": "{$yellow4}",
160
+ "type": "color"
161
+ },
162
+ "$support-success": {
163
+ "value": "{$green4}",
164
+ "type": "color"
165
+ },
166
+ "$support-info": {
167
+ "value": "{$blue4}",
168
+ "type": "color"
169
+ },
170
+ "$text-primary": {
171
+ "value": "{$cold1}",
172
+ "type": "color"
173
+ },
174
+ "$text-primary-alt": {
175
+ "value": "{$cold3}",
176
+ "type": "color"
177
+ },
178
+ "$text-secondary": {
179
+ "value": "{$cold5}",
180
+ "type": "color"
181
+ },
182
+ "$text-placeholder": {
183
+ "value": "{$cold6}",
184
+ "type": "color"
185
+ },
186
+ "$text-on-color": {
187
+ "value": "{$white}",
188
+ "type": "color"
189
+ },
190
+ "$text-error": {
191
+ "value": "{$red4}",
192
+ "type": "color"
193
+ },
194
+ "$text-success": {
195
+ "value": "{$green4}",
4
196
  "type": "color"
5
197
  }
6
198
  }
package/tokens/themes/dark-warm/dark.json CHANGED
@@ -1,6 +1,198 @@
1
1
  {
2
2
  "$background": {
3
- "value": "{$black}",
3
+ "value": "{$warm10}",
4
+ "type": "color"
5
+ },
6
+ "$background-secondary": {
7
+ "value": "{$warm9}",
8
+ "type": "color"
9
+ },
10
+ "$background-hover": {
11
+ "value": "{$warm9}",
12
+ "type": "color"
13
+ },
14
+ "$background-selected": {
15
+ "value": "{$warm8}",
16
+ "type": "color"
17
+ },
18
+ "$background-selected-hover": {
19
+ "value": "{$warm7}",
20
+ "type": "color"
21
+ },
22
+ "$background-red": {
23
+ "value": "{$red8}",
24
+ "type": "color"
25
+ },
26
+ "$background-orange": {
27
+ "value": "{$orange8}",
28
+ "type": "color"
29
+ },
30
+ "$background-yellow": {
31
+ "value": "{$yellow8}",
32
+ "type": "color"
33
+ },
34
+ "$background-green": {
35
+ "value": "{$green8}",
36
+ "type": "color"
37
+ },
38
+ "$background-mint": {
39
+ "value": "{$mint8}",
40
+ "type": "color"
41
+ },
42
+ "$background-teal": {
43
+ "value": "{$teal8}",
44
+ "type": "color"
45
+ },
46
+ "$background-cyan": {
47
+ "value": "{$cyan8}",
48
+ "type": "color"
49
+ },
50
+ "$background-blue": {
51
+ "value": "{$blue8}",
52
+ "type": "color"
53
+ },
54
+ "$background-indigo": {
55
+ "value": "{$indigo8}",
56
+ "type": "color"
57
+ },
58
+ "$background-purple": {
59
+ "value": "{$purple8}",
60
+ "type": "color"
61
+ },
62
+ "$background-pink": {
63
+ "value": "{$pink8}",
64
+ "type": "color"
65
+ },
66
+ "$background-brown": {
67
+ "value": "{$brown8}",
68
+ "type": "color"
69
+ },
70
+ "$border-muted": {
71
+ "value": "{$warm9}",
72
+ "type": "color"
73
+ },
74
+ "$border-default": {
75
+ "value": "{$warm7}",
76
+ "type": "color"
77
+ },
78
+ "$border-strong": {
79
+ "value": "{$warm5}",
80
+ "type": "color"
81
+ },
82
+ "$button-primary": {
83
+ "value": "{$blue4}",
84
+ "type": "color"
85
+ },
86
+ "$button-primary-hover": {
87
+ "value": "{$blue3}",
88
+ "type": "color"
89
+ },
90
+ "$button-primary-active": {
91
+ "value": "{$blue3}",
92
+ "type": "color"
93
+ },
94
+ "$button-secondary": {
95
+ "value": "{$warm1}",
96
+ "type": "color"
97
+ },
98
+ "$button-secondary-hover": {
99
+ "value": "{$warm2}",
100
+ "type": "color"
101
+ },
102
+ "$button-secondary-active": {
103
+ "value": "{$warm3}",
104
+ "type": "color"
105
+ },
106
+ "$button-danger": {
107
+ "value": "{$red4}",
108
+ "type": "color"
109
+ },
110
+ "$button-danger-hover": {
111
+ "value": "{$red3}",
112
+ "type": "color"
113
+ },
114
+ "$button-danger-active": {
115
+ "value": "{$red3}",
116
+ "type": "color"
117
+ },
118
+ "$button-disabled": {
119
+ "value": "{$warm9}",
120
+ "type": "color"
121
+ },
122
+ "$icon-primary": {
123
+ "value": "{$warm2}",
124
+ "type": "color"
125
+ },
126
+ "$icon-secondary": {
127
+ "value": "{$warm4}",
128
+ "type": "color"
129
+ },
130
+ "$icon-disabled": {
131
+ "value": "{$warm8}",
132
+ "type": "color"
133
+ },
134
+ "$icon-on-color": {
135
+ "value": "{$white}",
136
+ "type": "color"
137
+ },
138
+ "$link": {
139
+ "value": "{$blue4}",
140
+ "type": "color"
141
+ },
142
+ "$link-hover": {
143
+ "value": "{$blue3}",
144
+ "type": "color"
145
+ },
146
+ "$link-subtle": {
147
+ "value": "{$warm1}",
148
+ "type": "color"
149
+ },
150
+ "$link-visited": {
151
+ "value": "{$indigo4}",
152
+ "type": "color"
153
+ },
154
+ "$support-error": {
155
+ "value": "{$red4}",
156
+ "type": "color"
157
+ },
158
+ "$support-warning": {
159
+ "value": "{$yellow4}",
160
+ "type": "color"
161
+ },
162
+ "$support-success": {
163
+ "value": "{$green4}",
164
+ "type": "color"
165
+ },
166
+ "$support-info": {
167
+ "value": "{$blue4}",
168
+ "type": "color"
169
+ },
170
+ "$text-primary": {
171
+ "value": "{$warm1}",
172
+ "type": "color"
173
+ },
174
+ "$text-primary-alt": {
175
+ "value": "{$warm3}",
176
+ "type": "color"
177
+ },
178
+ "$text-secondary": {
179
+ "value": "{$warm5}",
180
+ "type": "color"
181
+ },
182
+ "$text-placeholder": {
183
+ "value": "{$warm6}",
184
+ "type": "color"
185
+ },
186
+ "$text-on-color": {
187
+ "value": "{$white}",
188
+ "type": "color"
189
+ },
190
+ "$text-error": {
191
+ "value": "{$red4}",
192
+ "type": "color"
193
+ },
194
+ "$text-success": {
195
+ "value": "{$green4}",
4
196
  "type": "color"
5
197
  }
6
198
  }
package/tokens/themes/light/light.json CHANGED
@@ -124,11 +124,11 @@
124
124
  "type": "color"
125
125
  },
126
126
  "$icon-secondary": {
127
- "value": "{$grey8}",
127
+ "value": "{$grey7}",
128
128
  "type": "color"
129
129
  },
130
130
  "$icon-disabled": {
131
- "value": "{$grey7}",
131
+ "value": "{$grey4}",
132
132
  "type": "color"
133
133
  },
134
134
  "$icon-on-color": {
@@ -144,7 +144,7 @@
144
144
  "type": "color"
145
145
  },
146
146
  "$link-subtle": {
147
- "value": "{$grey7}",
147
+ "value": "{$grey8}",
148
148
  "type": "color"
149
149
  },
150
150
  "$link-visited": {
package/tokens/themes/light-cold/light.json CHANGED
@@ -124,11 +124,11 @@
124
124
  "type": "color"
125
125
  },
126
126
  "$icon-secondary": {
127
- "value": "{$cold8}",
127
+ "value": "{$cold7}",
128
128
  "type": "color"
129
129
  },
130
130
  "$icon-disabled": {
131
- "value": "{$cold7}",
131
+ "value": "{$cold4}",
132
132
  "type": "color"
133
133
  },
134
134
  "$icon-on-color": {
@@ -144,7 +144,7 @@
144
144
  "type": "color"
145
145
  },
146
146
  "$link-subtle": {
147
- "value": "{$cold7}",
147
+ "value": "{$cold8}",
148
148
  "type": "color"
149
149
  },
150
150
  "$link-visited": {
package/tokens/themes/light-warm/light.json CHANGED
@@ -124,11 +124,11 @@
124
124
  "type": "color"
125
125
  },
126
126
  "$icon-secondary": {
127
- "value": "{$warm8}",
127
+ "value": "{$warm7}",
128
128
  "type": "color"
129
129
  },
130
130
  "$icon-disabled": {
131
- "value": "{$warm7}",
131
+ "value": "{$warm4}",
132
132
  "type": "color"
133
133
  },
134
134
  "$icon-on-color": {
@@ -144,7 +144,7 @@
144
144
  "type": "color"
145
145
  },
146
146
  "$link-subtle": {
147
- "value": "{$warm7}",
147
+ "value": "{$warm8}",
148
148
  "type": "color"
149
149
  },
150
150
  "$link-visited": {
package/help/dark.png DELETED
Binary file
package/help/light.png DELETED
Binary file