@volue/design-colors 3.0.0-next.7 → 3.0.0-next.8

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 (22) hide show
  1. package/README.md +2 -2
  2. package/dist/flat.common.js +231 -207
  3. package/dist/flat.d.ts +212 -196
  4. package/dist/flat.module.js +169 -153
  5. package/dist/generic.common.js +581 -465
  6. package/dist/generic.d.ts +379 -323
  7. package/dist/generic.module.js +581 -465
  8. package/dist/index.common.js +125 -115
  9. package/dist/index.cssmodules.css +106 -98
  10. package/dist/index.custom-properties.css +107 -99
  11. package/dist/index.d.ts +125 -115
  12. package/dist/index.json +106 -98
  13. package/dist/index.map.scss +107 -99
  14. package/dist/index.module.js +125 -115
  15. package/dist/index.scss +107 -99
  16. package/dist/internal/fillsWithTextColors.json +3 -161
  17. package/package.json +1 -1
  18. package/src/core.json +8 -8
  19. package/src/datavis.json +12 -12
  20. package/src/functional.json +118 -85
  21. package/src/internal/fills.json +3 -27
  22. package/src/rgb-channels.json +122 -122
package/src/datavis.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "value": "#eb7072"
15
15
  },
16
16
  "red100": {
17
- "value": "#c6434b"
17
+ "value": "#bb3a42"
18
18
  },
19
19
 
20
20
  "orange20": {
@@ -30,7 +30,7 @@
30
30
  "value": "#e57b1a"
31
31
  },
32
32
  "orange100": {
33
- "value": "#b35d0a"
33
+ "value": "#a4540a"
34
34
  },
35
35
 
36
36
  "brown20": {
@@ -46,7 +46,7 @@
46
46
  "value": "#b89749"
47
47
  },
48
48
  "brown100": {
49
- "value": "#8e7333"
49
+ "value": "#7f672e"
50
50
  },
51
51
 
52
52
  "pear20": {
@@ -62,7 +62,7 @@
62
62
  "value": "#afad07"
63
63
  },
64
64
  "pear100": {
65
- "value": "#888705"
65
+ "value": "#767605"
66
66
  },
67
67
 
68
68
  "lime20": {
@@ -78,7 +78,7 @@
78
78
  "value": "#84ba12"
79
79
  },
80
80
  "lime100": {
81
- "value": "#66910e"
81
+ "value": "#587d0c"
82
82
  },
83
83
 
84
84
  "green20": {
@@ -94,7 +94,7 @@
94
94
  "value": "#3fb845"
95
95
  },
96
96
  "green100": {
97
- "value": "#318d36"
97
+ "value": "#2a792e"
98
98
  },
99
99
 
100
100
  "teal20": {
@@ -110,7 +110,7 @@
110
110
  "value": "#3ab19e"
111
111
  },
112
112
  "teal100": {
113
- "value": "#2a8879"
113
+ "value": "#25796b"
114
114
  },
115
115
 
116
116
  "aqua20": {
@@ -126,7 +126,7 @@
126
126
  "value": "#42abc2"
127
127
  },
128
128
  "aqua100": {
129
- "value": "#2e8495"
129
+ "value": "#297585"
130
130
  },
131
131
 
132
132
  "blue20": {
@@ -142,7 +142,7 @@
142
142
  "value": "#60a1df"
143
143
  },
144
144
  "blue100": {
145
- "value": "#3b7bb7"
145
+ "value": "#346da2"
146
146
  },
147
147
 
148
148
  "lazuli20": {
@@ -158,7 +158,7 @@
158
158
  "value": "#7f94f2"
159
159
  },
160
160
  "lazuli100": {
161
- "value": "#5768df"
161
+ "value": "#4b5cdd"
162
162
  },
163
163
 
164
164
  "purple20": {
@@ -174,7 +174,7 @@
174
174
  "value": "#c574e4"
175
175
  },
176
176
  "purple100": {
177
- "value": "#a345c5"
177
+ "value": "#9e3dc2"
178
178
  },
179
179
 
180
180
  "pink20": {
@@ -190,7 +190,7 @@
190
190
  "value": "#e26ab5"
191
191
  },
192
192
  "pink100": {
193
- "value": "#bc3d91"
193
+ "value": "#b53b8c"
194
194
  }
195
195
  }
196
196
  }
package/src/functional.json CHANGED
@@ -1,67 +1,23 @@
1
1
  {
2
2
  "color": {
3
3
  "background": {
4
- "canvas": {
5
- "@": {
6
- "value": "{color.background.neutral.minimal.value}",
7
- "description": "Canvas background. Used for the background of your app."
8
- },
9
- "subtle": {
10
- "value": "{color.background.neutral.subtle.@.value}",
11
- "description": "Subtle canvas background. Used for the background of your app, e.g. when you create a card-based layout."
12
- }
13
- },
14
- "surface": {
15
- "@": {
16
- "value": "{color.background.neutral.minimal.value}",
17
- "description": "Default surface background. Used for the background area of UI components like cards, inputs etc."
18
- },
19
- "subtle": {
20
- "value": "{color.background.neutral.moderate.@.value}",
21
- "description": "Subtle surface background. Used for the background area of components that should stand out somewhat against default surface or app canvas."
22
- },
23
- "contrast": {
24
- "value": "{color.background.neutral.contrast.value}",
25
- "description": "Contrast surface background. Used for backgrounds of components that should stand out from the rest of the content, such as app header or tooltips."
26
- }
27
- },
28
4
  "neutral": {
29
5
  "minimal": {
30
6
  "value": "{color.core.white.value}",
31
- "description": "Minimal neutral background."
7
+ "description": "Minimal neutral background. Used for the background area of your app and UI components like cards, inputs etc."
32
8
  },
33
9
  "subtle": {
34
- "@": {
35
- "value": "{color.core.gray0.value}",
36
- "description": "Subtle neutral background."
37
- },
38
- "hover": {
39
- "value": "{color.core.gray5.value}",
40
- "description": "Subtle neutral background hover state."
41
- },
42
- "active": {
43
- "value": "{color.core.gray10.value}",
44
- "description": "Subtle neutral background active state."
45
- }
10
+ "value": "{color.core.gray0.value}",
11
+ "description": "Subtle neutral background. Used for the background of your app, e.g. when you create a card-based layout."
46
12
  },
47
13
  "moderate": {
48
- "@": {
49
- "value": "{color.core.gray5.value}",
50
- "description": "Moderate neutral background."
51
- },
52
- "hover": {
53
- "value": "{color.core.gray10.value}",
54
- "description": "Moderate neutral background hover state."
55
- }
14
+ "value": "{color.core.gray5.value}",
15
+ "description": "Moderate neutral background. Used for the background area of components that should stand out somewhat against minimal neutral surfaces."
56
16
  },
57
17
  "@": {
58
18
  "value": "{color.core.gray10.value}",
59
19
  "description": "Default neutral background."
60
20
  },
61
- "hover": {
62
- "value": "{color.core.gray20.value}",
63
- "description": "Default neutral background hover state."
64
- },
65
21
  "bold": {
66
22
  "value": "{color.core.gray60.value}",
67
23
  "description": "Bold neutral background."
@@ -72,7 +28,7 @@
72
28
  },
73
29
  "contrast": {
74
30
  "value": "{color.core.gray100.value}",
75
- "description": "Contrast neutral background."
31
+ "description": "Contrast neutral background. Used for backgrounds of components that should stand out from the rest of the content, such as app header or tooltips."
76
32
  }
77
33
  },
78
34
  "accent": {
@@ -112,9 +68,23 @@
112
68
  "value": "{color.core.accent20.value}",
113
69
  "description": "Default accent background hover state."
114
70
  },
71
+ "active": {
72
+ "value": "{color.core.accent30.value}",
73
+ "description": "Default accent background active state."
74
+ },
115
75
  "bold": {
116
- "value": "{color.core.accent60.value}",
117
- "description": "Bold accent background."
76
+ "@": {
77
+ "value": "{color.core.accent60.value}",
78
+ "description": "Bold accent background."
79
+ },
80
+ "hover": {
81
+ "value": "{color.core.accent70.value}",
82
+ "description": "Bold accent background hover state."
83
+ },
84
+ "active": {
85
+ "value": "{color.core.accent80.value}",
86
+ "description": "Bold accent background active state."
87
+ }
118
88
  },
119
89
  "strong": {
120
90
  "@": {
@@ -124,6 +94,10 @@
124
94
  "hover": {
125
95
  "value": "{color.core.accent90.value}",
126
96
  "description": "Strong accent background hover state."
97
+ },
98
+ "active": {
99
+ "value": "{color.core.accent100.value}",
100
+ "description": "Strong accent background active state."
127
101
  }
128
102
  }
129
103
  },
@@ -150,9 +124,23 @@
150
124
  "value": "{color.core.red20.value}",
151
125
  "description": "Default danger background hover state."
152
126
  },
127
+ "active": {
128
+ "value": "{color.core.red30.value}",
129
+ "description": "Default danger background active state."
130
+ },
153
131
  "bold": {
154
- "value": "{color.core.red70.value}",
155
- "description": "Bold danger background."
132
+ "@": {
133
+ "value": "{color.core.red70.value}",
134
+ "description": "Bold danger background."
135
+ },
136
+ "hover": {
137
+ "value": "{color.core.red80.value}",
138
+ "description": "Bold danger background hover state."
139
+ },
140
+ "active": {
141
+ "value": "{color.core.red90.value}",
142
+ "description": "Bold danger background active state."
143
+ }
156
144
  },
157
145
  "strong": {
158
146
  "@": {
@@ -162,6 +150,10 @@
162
150
  "hover": {
163
151
  "value": "{color.core.red90.value}",
164
152
  "description": "Strong danger background hover state."
153
+ },
154
+ "active": {
155
+ "value": "{color.core.red100.value}",
156
+ "description": "Strong danger background active state."
165
157
  }
166
158
  }
167
159
  },
@@ -188,9 +180,23 @@
188
180
  "value": "{color.core.orange20.value}",
189
181
  "description": "Default warning background hover state."
190
182
  },
183
+ "active": {
184
+ "value": "{color.core.orange30.value}",
185
+ "description": "Default warning background active state."
186
+ },
191
187
  "bold": {
192
- "value": "{color.core.orange70.value}",
193
- "description": "Bold warning background."
188
+ "@": {
189
+ "value": "{color.core.orange70.value}",
190
+ "description": "Bold warning background."
191
+ },
192
+ "hover": {
193
+ "value": "{color.core.orange80.value}",
194
+ "description": "Bold warning background hover state."
195
+ },
196
+ "active": {
197
+ "value": "{color.core.orange90.value}",
198
+ "description": "Bold warning background active state."
199
+ }
194
200
  },
195
201
  "strong": {
196
202
  "@": {
@@ -200,6 +206,10 @@
200
206
  "hover": {
201
207
  "value": "{color.core.orange90.value}",
202
208
  "description": "Strong warning background hover state."
209
+ },
210
+ "active": {
211
+ "value": "{color.core.orange100.value}",
212
+ "description": "Strong warning background active state."
203
213
  }
204
214
  }
205
215
  },
@@ -226,18 +236,36 @@
226
236
  "value": "{color.core.green20.value}",
227
237
  "description": "Default success background hover state."
228
238
  },
239
+ "active": {
240
+ "value": "{color.core.green30.value}",
241
+ "description": "Default success background active state."
242
+ },
229
243
  "bold": {
230
- "value": "{color.core.green80.value}",
231
- "description": "Bold success background."
244
+ "@": {
245
+ "value": "{color.core.green70.value}",
246
+ "description": "Bold success background."
247
+ },
248
+ "hover": {
249
+ "value": "{color.core.green80.value}",
250
+ "description": "Bold success background hover state."
251
+ },
252
+ "active": {
253
+ "value": "{color.core.green90.value}",
254
+ "description": "Bold success background active state."
255
+ }
232
256
  },
233
257
  "strong": {
234
258
  "@": {
235
- "value": "{color.core.green90.value}",
259
+ "value": "{color.core.green80.value}",
236
260
  "description": "Strong success background state."
237
261
  },
238
262
  "hover": {
239
- "value": "{color.core.green100.value}",
263
+ "value": "{color.core.green90.value}",
240
264
  "description": "Strong success background hover state."
265
+ },
266
+ "active": {
267
+ "value": "{color.core.green100.value}",
268
+ "description": "Strong success background active state."
241
269
  }
242
270
  }
243
271
  },
@@ -264,18 +292,36 @@
264
292
  "value": "{color.core.blue20.value}",
265
293
  "description": "Default info background hover state."
266
294
  },
295
+ "active": {
296
+ "value": "{color.core.blue30.value}",
297
+ "description": "Default info background active state."
298
+ },
267
299
  "bold": {
268
- "value": "{color.core.blue80.value}",
269
- "description": "Bold info background."
300
+ "@": {
301
+ "value": "{color.core.blue70.value}",
302
+ "description": "Bold info background."
303
+ },
304
+ "hover": {
305
+ "value": "{color.core.blue80.value}",
306
+ "description": "Bold info background hover state."
307
+ },
308
+ "active": {
309
+ "value": "{color.core.blue90.value}",
310
+ "description": "Bold info background active state."
311
+ }
270
312
  },
271
313
  "strong": {
272
314
  "@": {
273
- "value": "{color.core.blue90.value}",
315
+ "value": "{color.core.blue80.value}",
274
316
  "description": "Strong info background state."
275
317
  },
276
318
  "hover": {
277
- "value": "{color.core.blue100.value}",
319
+ "value": "{color.core.blue90.value}",
278
320
  "description": "Strong info background hover state."
321
+ },
322
+ "active": {
323
+ "value": "{color.core.blue100.value}",
324
+ "description": "Strong info background active state."
279
325
  }
280
326
  }
281
327
  },
@@ -288,22 +334,9 @@
288
334
  "value": "{color.core.gray5.value}",
289
335
  "description": "Subtle disabled background."
290
336
  }
291
- },
292
- "inverse": {
293
- "value": "{color.background.neutral.minimal.value}",
294
- "description": "Inverse background. Used for backgrounds of elements on a strong background.",
295
- "alpha": 0.1125
296
337
  }
297
338
  },
298
339
  "foreground": {
299
- "body": {
300
- "value": "{color.foreground.neutral.@.value}",
301
- "description": "Body foreground. Used for the default body text of your app."
302
- },
303
- "link": {
304
- "value": "{color.foreground.accent.moderate.value}",
305
- "description": "Link foreground"
306
- },
307
340
  "neutral": {
308
341
  "@": {
309
342
  "value": "{color.core.gray100.value}",
@@ -447,6 +480,10 @@
447
480
  "value": "{color.core.accent40.value}",
448
481
  "description": "Default accent border hover state."
449
482
  },
483
+ "active": {
484
+ "value": "{color.core.accent60.value}",
485
+ "description": "Default accent border active state."
486
+ },
450
487
  "bold": {
451
488
  "value": "{color.core.accent70.value}",
452
489
  "description": "Bold accent border."
@@ -490,11 +527,11 @@
490
527
  "description": "Default success border."
491
528
  },
492
529
  "bold": {
493
- "value": "{color.core.green90.value}",
530
+ "value": "{color.core.green80.value}",
494
531
  "description": "Bold success border."
495
532
  },
496
533
  "strong": {
497
- "value": "{color.core.green100.value}",
534
+ "value": "{color.core.green90.value}",
498
535
  "description": "Strong success border."
499
536
  }
500
537
  },
@@ -504,11 +541,11 @@
504
541
  "description": "Default info border."
505
542
  },
506
543
  "bold": {
507
- "value": "{color.core.blue90.value}",
544
+ "value": "{color.core.blue80.value}",
508
545
  "description": "Bold info border."
509
546
  },
510
547
  "strong": {
511
- "value": "{color.core.blue100.value}",
548
+ "value": "{color.core.blue90.value}",
512
549
  "description": "Strong info border."
513
550
  }
514
551
  },
@@ -522,10 +559,6 @@
522
559
  "description": "Subtle disabled border."
523
560
  }
524
561
  },
525
- "focus": {
526
- "value": "{color.border.accent.bold.value}",
527
- "description": "Border focus state."
528
- },
529
562
  "inverse": {
530
563
  "value": "{color.core.white.value}",
531
564
  "description": "Inverse border. Used for borders on strong backgrounds.",
package/src/internal/fills.json CHANGED
@@ -41,42 +41,18 @@
41
41
  "warning": {
42
42
  "value": "{color.foreground.warning.@.value}",
43
43
  "palette": "warning"
44
- },
45
- "link": {
46
- "value": "{color.foreground.link.value}"
47
44
  }
48
45
  },
49
46
  "paletteGroups": {
50
- "canvas": {
51
- "@": {
52
- "value": "{color.background.canvas.@.value}"
53
- },
54
- "subtle": {
55
- "value": "{color.background.canvas.subtle.value}"
56
- }
57
- },
58
-
59
- "surface": {
60
- "@": {
61
- "value": "{color.background.surface.@.value}"
62
- },
63
- "subtle": {
64
- "value": "{color.background.surface.subtle.value}"
65
- },
66
- "contrast": {
67
- "value": "{color.background.surface.contrast.value}"
68
- }
69
- },
70
-
71
47
  "neutral": {
72
48
  "minimal": {
73
49
  "value": "{color.background.neutral.minimal.value}"
74
50
  },
75
51
  "subtle": {
76
- "value": "{color.background.neutral.subtle.@.value}"
52
+ "value": "{color.background.neutral.subtle.value}"
77
53
  },
78
54
  "moderate": {
79
- "value": "{color.background.neutral.moderate.@.value}"
55
+ "value": "{color.background.neutral.moderate.value}"
80
56
  },
81
57
  "@": {
82
58
  "value": "{color.background.neutral.@.value}"
@@ -103,7 +79,7 @@
103
79
  "value": "{color.background.accent.@.value}"
104
80
  },
105
81
  "bold": {
106
- "value": "{color.background.accent.bold.value}"
82
+ "value": "{color.background.accent.bold.@.value}"
107
83
  },
108
84
  "strong": {
109
85
  "value": "{color.background.accent.strong.@.value}"