@volue/design-colors 2.0.4-next.0 → 3.0.0-next.1

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 (31) hide show
  1. package/README.md +28 -5
  2. package/dist/flat.common.js +777 -0
  3. package/dist/flat.d.ts +520 -0
  4. package/dist/flat.module.js +520 -0
  5. package/dist/generic.common.js +2719 -0
  6. package/dist/generic.d.ts +1528 -0
  7. package/dist/generic.module.js +2719 -0
  8. package/dist/index.common.js +351 -80
  9. package/dist/index.cssmodules.css +253 -51
  10. package/dist/index.custom-properties.css +254 -52
  11. package/dist/index.d.ts +355 -0
  12. package/dist/index.json +253 -51
  13. package/dist/index.map.scss +254 -52
  14. package/dist/index.module.js +351 -80
  15. package/dist/index.scss +254 -52
  16. package/dist/internal/fillsWithTextColors.json +572 -0
  17. package/flat/package.json +5 -0
  18. package/generic/package.json +5 -0
  19. package/package.json +40 -9
  20. package/src/core.json +201 -0
  21. package/src/datavis.json +197 -0
  22. package/src/functional.json +532 -0
  23. package/src/internal/fills.json +163 -0
  24. package/src/rgb-channels.json +77 -0
  25. package/dist/backgroundFills.withTextColors.json +0 -622
  26. package/dist/index.common.d.ts +0 -84
  27. package/dist/index.module.d.ts +0 -84
  28. package/dist/textColors.json +0 -27
  29. package/src/backgroundFills.json +0 -189
  30. package/src/palette.json +0 -173
  31. package/src/text.json +0 -92
package/README.md CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  Color primitives/tokens to be used across Volue's products
4
4
 
5
- ![Screenshot](https://user-images.githubusercontent.com/927591/106161718-9f898080-6187-11eb-99ca-734cf79ee3b5.png)
6
-
7
5
  ## Installation
8
6
 
9
7
  ```sh
@@ -21,14 +19,27 @@ Tokens are exported as nested object structure.
21
19
 
22
20
  ```js
23
21
  const tokens = require('@volue/design-colors');
24
- console.log(tokens.palette.colorBlue100); // rgb(38, 115, 170)
22
+ console.log(tokens.core.blue100); // rgb(0, 133, 159)
23
+ console.log(tokens.background.surface.default);
24
+ ```
25
+
26
+ #### Flat tokens
27
+
28
+ Use `flat` entrypoint to consume flattened tokens:
29
+
30
+ ```js
31
+ const tokens = require('@volue/design-colors/flat');
32
+ console.log(tokens.colorBlue100);
33
+ console.log(tokens.backgroundSurface);
25
34
  ```
26
35
 
36
+ ### JSON
37
+
27
38
  In JSON, design token names are formatted in [SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case).
28
39
 
29
40
  ```js
30
41
  const tokens = require('@volue/design-colors/dist/index.json');
31
- console.log(tokens['COLOR_BLACK']); // rgb(0, 0, 0)
42
+ console.log(tokens['COLOR_WHITE']); // rgb(255, 255, 255)
32
43
  ```
33
44
 
34
45
  ### Sass
@@ -40,6 +51,18 @@ Sass variables and map keys are formatted in [kebab-case](https://en.wikipedia.o
40
51
  @import '~@volue/design-colors/dist/index';
41
52
 
42
53
  a {
43
- color: $color-accent120;
54
+ color: $color-accent90;
55
+ }
56
+ ```
57
+
58
+ ### CSS variables
59
+
60
+ CSS variables/custom properties are formatted in [kebab-case](https://en.wikipedia.org/wiki/Kebab_case).
61
+
62
+ ```scss
63
+ @import '~@volue/design-colors/dist/index.custom-properties.css';
64
+
65
+ a {
66
+ color: var(--color-accent90);
44
67
  }
45
68
  ```