@volue/design-colors 1.4.0-next.2 → 2.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.
Files changed (15) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +2 -1
  3. package/dist/index.common.d.ts +84 -57
  4. package/dist/index.common.js +82 -58
  5. package/dist/index.custom-properties.css +1 -1
  6. package/dist/index.map.scss +1 -1
  7. package/dist/index.module.d.ts +84 -57
  8. package/dist/index.module.js +83 -57
  9. package/dist/index.scss +1 -1
  10. package/package.json +3 -2
  11. package/src/backgroundFills.json +54 -54
  12. package/src/palette.json +173 -0
  13. package/src/text.json +92 -0
  14. package/src/textColors.json +0 -92
  15. package/src/tokens.json +0 -171
package/CHANGELOG.md CHANGED
@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. See [Conven
4
4
 
5
5
  <!-- MONODEPLOY:BELOW -->
6
6
 
7
+ ## [2.0.0](https://github.com/Volue/wave/compare/@volue/design-colors@1.3.0...@volue/design-colors@2.0.0) "@volue/design-colors" (2023-03-01)
8
+
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+
12
+ * **tokens:** export color tokens as nested object structure
13
+
14
+ ### Features
15
+
16
+ * **tokens:** export color tokens as nested object structure ([76d3771](https://github.com/Volue/wave/commit/76d3771ea31bcdcc1ced79de138ee0a063776f2d))
17
+ * **tokens:** manage tokens with `style-dictionary` ([f5feb97](https://github.com/Volue/wave/commit/f5feb97602f04e96464b5ebba2155bb01a37b276))
18
+
19
+
20
+
21
+
7
22
  ## [1.3.0](https://github.com/Volue/wave/compare/@volue/design-colors@1.2.4...@volue/design-colors@1.3.0) "@volue/design-colors" (2022-09-22)
8
23
 
9
24
 
package/README.md CHANGED
@@ -17,10 +17,11 @@ yarn add @volue/design-colors
17
17
  ### JavaScript
18
18
 
19
19
  In JavaScript, design token names are formatted in [lower camelCase](https://en.wikipedia.org/wiki/Camel_case).
20
+ Tokens are exported as nested object structure.
20
21
 
21
22
  ```js
22
23
  const tokens = require('@volue/design-colors');
23
- console.log(tokens.colorBlue100); // rgb(0, 0, 0)
24
+ console.log(tokens.palette.colorBlue100); // rgb(38, 115, 170)
24
25
  ```
25
26
 
26
27
  In JSON, design token names are formatted in [SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case).
package/dist/index.common.d.ts CHANGED
@@ -1,57 +1,84 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 15 Feb 2023 21:33:33 GMT
4
- */
5
-
6
- export const colorBlack : "#000000";
7
- export const colorWhite : "#ffffff";
8
- export const colorGray5 : "#f2f2f2";
9
- export const colorGray10 : "#e5e5e5";
10
- export const colorGray15 : "#d9d9d9";
11
- export const colorGray25 : "#b2b2b2";
12
- export const colorGray50 : "#666666";
13
- export const colorGray75 : "#333333";
14
- export const colorPrimary5 : "#f2f4f5";
15
- export const colorPrimary10 : "#e6e9ea";
16
- export const colorPrimary60 : "#6b8085";
17
- export const colorPrimary100 : "#082b33";
18
- export const colorPrimary120 : "#062228";
19
- export const colorAccent5 : "#f2f8f8";
20
- export const colorAccent10 : "#e5f1f2";
21
- export const colorAccent15 : "#d9ebec";
22
- export const colorAccent25 : "#bfddde";
23
- export const colorAccent60 : "#7fbbbd";
24
- export const colorAccent100 : "#01797d";
25
- export const colorAccent120 : "#016063";
26
- export const colorBlue10 : "#e9f1f6";
27
- export const colorBlue50 : "#92b8d4";
28
- export const colorBlue100 : "#2673aa";
29
- export const colorBlue120 : "#1a5178";
30
- export const colorGreen10 : "#ecf3ea";
31
- export const colorGreen50 : "#a0c29b";
32
- export const colorGreen100 : "#438538";
33
- export const colorGreen120 : "#295222";
34
- export const colorOrange10 : "#fbf0e5";
35
- export const colorOrange50 : "#ecb67f";
36
- export const colorOrange100 : "#da6e00";
37
- export const colorOrange120 : "#a65300";
38
- export const colorRed10 : "#fbe9ea";
39
- export const colorRed50 : "#df9e99";
40
- export const colorRed100 : "#bf3f34";
41
- export const colorRed120 : "#8c2e26";
42
- export const colorTeal10 : "#e9f6f7";
43
- export const colorTeal50 : "#94d1d5";
44
- export const colorTeal100 : "#2ba3ab";
45
- export const colorTeal120 : "#1e7278";
46
- export const colorPink10 : "#faebef";
47
- export const colorPink50 : "#e79eb0";
48
- export const colorPink100 : "#cf3f63";
49
- export const colorPink120 : "#9c2f4a";
50
- export const colorPurple10 : "#f1ecf5";
51
- export const colorPurple50 : "#bfa9d3";
52
- export const colorPurple100 : "#8054a8";
53
- export const colorPurple120 : "#593b75";
54
- export const colorYellow10 : "#fdfaf4";
55
- export const colorYellow50 : "#fdd9a3";
56
- export const colorYellow100 : "#faa600";
57
- export const colorYellow120 : "#c78500";
1
+ export default tokens;
2
+ declare const tokens: {
3
+ "palette": {
4
+ "colorBlack": "#000000",
5
+ "colorWhite": "#ffffff",
6
+ "colorGray5": "#f2f2f2",
7
+ "colorGray10": "#e5e5e5",
8
+ "colorGray15": "#d9d9d9",
9
+ "colorGray25": "#b2b2b2",
10
+ "colorGray50": "#666666",
11
+ "colorGray75": "#333333",
12
+ "colorPrimary5": "#f2f4f5",
13
+ "colorPrimary10": "#e6e9ea",
14
+ "colorPrimary60": "#6b8085",
15
+ "colorPrimary100": "#082b33",
16
+ "colorPrimary120": "#062228",
17
+ "colorAccent5": "#f2f8f8",
18
+ "colorAccent10": "#e5f1f2",
19
+ "colorAccent15": "#d9ebec",
20
+ "colorAccent25": "#bfddde",
21
+ "colorAccent60": "#7fbbbd",
22
+ "colorAccent100": "#01797d",
23
+ "colorAccent120": "#016063",
24
+ "colorBlue10": "#e9f1f6",
25
+ "colorBlue50": "#92b8d4",
26
+ "colorBlue100": "#2673aa",
27
+ "colorBlue120": "#1a5178",
28
+ "colorGreen10": "#ecf3ea",
29
+ "colorGreen50": "#a0c29b",
30
+ "colorGreen100": "#438538",
31
+ "colorGreen120": "#295222",
32
+ "colorOrange10": "#fbf0e5",
33
+ "colorOrange50": "#ecb67f",
34
+ "colorOrange100": "#da6e00",
35
+ "colorOrange120": "#a65300",
36
+ "colorRed10": "#fbe9ea",
37
+ "colorRed50": "#df9e99",
38
+ "colorRed100": "#bf3f34",
39
+ "colorRed120": "#8c2e26",
40
+ "colorTeal10": "#e9f6f7",
41
+ "colorTeal50": "#94d1d5",
42
+ "colorTeal100": "#2ba3ab",
43
+ "colorTeal120": "#1e7278",
44
+ "colorPink10": "#faebef",
45
+ "colorPink50": "#e79eb0",
46
+ "colorPink100": "#cf3f63",
47
+ "colorPink120": "#9c2f4a",
48
+ "colorPurple10": "#f1ecf5",
49
+ "colorPurple50": "#bfa9d3",
50
+ "colorPurple100": "#8054a8",
51
+ "colorPurple120": "#593b75",
52
+ "colorYellow10": "#fdfaf4",
53
+ "colorYellow50": "#fdd9a3",
54
+ "colorYellow100": "#faa600",
55
+ "colorYellow120": "#c78500"
56
+ },
57
+ "text": {
58
+ "colorWhite": "#ffffff",
59
+ "colorBlack": "#000000",
60
+ "colorGray50": "#666666",
61
+ "colorGray75": "#333333",
62
+ "colorPrimary60": "#6b8085",
63
+ "colorPrimary100": "#082b33",
64
+ "colorPrimary120": "#062228",
65
+ "colorAccent100": "#01797d",
66
+ "colorAccent120": "#016063",
67
+ "colorBlue100": "#2673aa",
68
+ "colorBlue120": "#1a5178",
69
+ "colorGreen100": "#438538",
70
+ "colorGreen120": "#295222",
71
+ "colorOrange100": "#da6e00",
72
+ "colorOrange120": "#a65300",
73
+ "colorRed100": "#bf3f34",
74
+ "colorRed120": "#8c2e26",
75
+ "colorTeal100": "#2ba3ab",
76
+ "colorTeal120": "#1e7278",
77
+ "colorPurple100": "#8054a8",
78
+ "colorPurple120": "#593b75",
79
+ "colorPink100": "#cf3f63",
80
+ "colorPink120": "#9c2f4a",
81
+ "colorYellow100": "#faa600",
82
+ "colorYellow120": "#c78500"
83
+ }
84
+ };
package/dist/index.common.js CHANGED
@@ -1,59 +1,83 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 15 Feb 2023 21:33:33 GMT
4
- */
5
-
6
1
  module.exports = {
7
- "colorBlack": "#000000",
8
- "colorWhite": "#ffffff",
9
- "colorGray5": "#f2f2f2",
10
- "colorGray10": "#e5e5e5",
11
- "colorGray15": "#d9d9d9",
12
- "colorGray25": "#b2b2b2",
13
- "colorGray50": "#666666",
14
- "colorGray75": "#333333",
15
- "colorPrimary5": "#f2f4f5",
16
- "colorPrimary10": "#e6e9ea",
17
- "colorPrimary60": "#6b8085",
18
- "colorPrimary100": "#082b33",
19
- "colorPrimary120": "#062228",
20
- "colorAccent5": "#f2f8f8",
21
- "colorAccent10": "#e5f1f2",
22
- "colorAccent15": "#d9ebec",
23
- "colorAccent25": "#bfddde",
24
- "colorAccent60": "#7fbbbd",
25
- "colorAccent100": "#01797d",
26
- "colorAccent120": "#016063",
27
- "colorBlue10": "#e9f1f6",
28
- "colorBlue50": "#92b8d4",
29
- "colorBlue100": "#2673aa",
30
- "colorBlue120": "#1a5178",
31
- "colorGreen10": "#ecf3ea",
32
- "colorGreen50": "#a0c29b",
33
- "colorGreen100": "#438538",
34
- "colorGreen120": "#295222",
35
- "colorOrange10": "#fbf0e5",
36
- "colorOrange50": "#ecb67f",
37
- "colorOrange100": "#da6e00",
38
- "colorOrange120": "#a65300",
39
- "colorRed10": "#fbe9ea",
40
- "colorRed50": "#df9e99",
41
- "colorRed100": "#bf3f34",
42
- "colorRed120": "#8c2e26",
43
- "colorTeal10": "#e9f6f7",
44
- "colorTeal50": "#94d1d5",
45
- "colorTeal100": "#2ba3ab",
46
- "colorTeal120": "#1e7278",
47
- "colorPink10": "#faebef",
48
- "colorPink50": "#e79eb0",
49
- "colorPink100": "#cf3f63",
50
- "colorPink120": "#9c2f4a",
51
- "colorPurple10": "#f1ecf5",
52
- "colorPurple50": "#bfa9d3",
53
- "colorPurple100": "#8054a8",
54
- "colorPurple120": "#593b75",
55
- "colorYellow10": "#fdfaf4",
56
- "colorYellow50": "#fdd9a3",
57
- "colorYellow100": "#faa600",
58
- "colorYellow120": "#c78500"
59
- };
2
+ "palette": {
3
+ "colorBlack": "#000000",
4
+ "colorWhite": "#ffffff",
5
+ "colorGray5": "#f2f2f2",
6
+ "colorGray10": "#e5e5e5",
7
+ "colorGray15": "#d9d9d9",
8
+ "colorGray25": "#b2b2b2",
9
+ "colorGray50": "#666666",
10
+ "colorGray75": "#333333",
11
+ "colorPrimary5": "#f2f4f5",
12
+ "colorPrimary10": "#e6e9ea",
13
+ "colorPrimary60": "#6b8085",
14
+ "colorPrimary100": "#082b33",
15
+ "colorPrimary120": "#062228",
16
+ "colorAccent5": "#f2f8f8",
17
+ "colorAccent10": "#e5f1f2",
18
+ "colorAccent15": "#d9ebec",
19
+ "colorAccent25": "#bfddde",
20
+ "colorAccent60": "#7fbbbd",
21
+ "colorAccent100": "#01797d",
22
+ "colorAccent120": "#016063",
23
+ "colorBlue10": "#e9f1f6",
24
+ "colorBlue50": "#92b8d4",
25
+ "colorBlue100": "#2673aa",
26
+ "colorBlue120": "#1a5178",
27
+ "colorGreen10": "#ecf3ea",
28
+ "colorGreen50": "#a0c29b",
29
+ "colorGreen100": "#438538",
30
+ "colorGreen120": "#295222",
31
+ "colorOrange10": "#fbf0e5",
32
+ "colorOrange50": "#ecb67f",
33
+ "colorOrange100": "#da6e00",
34
+ "colorOrange120": "#a65300",
35
+ "colorRed10": "#fbe9ea",
36
+ "colorRed50": "#df9e99",
37
+ "colorRed100": "#bf3f34",
38
+ "colorRed120": "#8c2e26",
39
+ "colorTeal10": "#e9f6f7",
40
+ "colorTeal50": "#94d1d5",
41
+ "colorTeal100": "#2ba3ab",
42
+ "colorTeal120": "#1e7278",
43
+ "colorPink10": "#faebef",
44
+ "colorPink50": "#e79eb0",
45
+ "colorPink100": "#cf3f63",
46
+ "colorPink120": "#9c2f4a",
47
+ "colorPurple10": "#f1ecf5",
48
+ "colorPurple50": "#bfa9d3",
49
+ "colorPurple100": "#8054a8",
50
+ "colorPurple120": "#593b75",
51
+ "colorYellow10": "#fdfaf4",
52
+ "colorYellow50": "#fdd9a3",
53
+ "colorYellow100": "#faa600",
54
+ "colorYellow120": "#c78500"
55
+ },
56
+ "text": {
57
+ "colorWhite": "#ffffff",
58
+ "colorBlack": "#000000",
59
+ "colorGray50": "#666666",
60
+ "colorGray75": "#333333",
61
+ "colorPrimary60": "#6b8085",
62
+ "colorPrimary100": "#082b33",
63
+ "colorPrimary120": "#062228",
64
+ "colorAccent100": "#01797d",
65
+ "colorAccent120": "#016063",
66
+ "colorBlue100": "#2673aa",
67
+ "colorBlue120": "#1a5178",
68
+ "colorGreen100": "#438538",
69
+ "colorGreen120": "#295222",
70
+ "colorOrange100": "#da6e00",
71
+ "colorOrange120": "#a65300",
72
+ "colorRed100": "#bf3f34",
73
+ "colorRed120": "#8c2e26",
74
+ "colorTeal100": "#2ba3ab",
75
+ "colorTeal120": "#1e7278",
76
+ "colorPurple100": "#8054a8",
77
+ "colorPurple120": "#593b75",
78
+ "colorPink100": "#cf3f63",
79
+ "colorPink120": "#9c2f4a",
80
+ "colorYellow100": "#faa600",
81
+ "colorYellow120": "#c78500"
82
+ }
83
+ }
package/dist/index.custom-properties.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 15 Feb 2023 21:33:33 GMT
3
+ * Generated on Wed, 01 Mar 2023 08:39:31 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/index.map.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Wed, 15 Feb 2023 21:33:33 GMT
4
+ * Generated on Wed, 01 Mar 2023 08:39:31 GMT
5
5
  */
6
6
 
7
7
  $colors-map: (
package/dist/index.module.d.ts CHANGED
@@ -1,57 +1,84 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 15 Feb 2023 21:33:33 GMT
4
- */
5
-
6
- export const colorBlack : "#000000";
7
- export const colorWhite : "#ffffff";
8
- export const colorGray5 : "#f2f2f2";
9
- export const colorGray10 : "#e5e5e5";
10
- export const colorGray15 : "#d9d9d9";
11
- export const colorGray25 : "#b2b2b2";
12
- export const colorGray50 : "#666666";
13
- export const colorGray75 : "#333333";
14
- export const colorPrimary5 : "#f2f4f5";
15
- export const colorPrimary10 : "#e6e9ea";
16
- export const colorPrimary60 : "#6b8085";
17
- export const colorPrimary100 : "#082b33";
18
- export const colorPrimary120 : "#062228";
19
- export const colorAccent5 : "#f2f8f8";
20
- export const colorAccent10 : "#e5f1f2";
21
- export const colorAccent15 : "#d9ebec";
22
- export const colorAccent25 : "#bfddde";
23
- export const colorAccent60 : "#7fbbbd";
24
- export const colorAccent100 : "#01797d";
25
- export const colorAccent120 : "#016063";
26
- export const colorBlue10 : "#e9f1f6";
27
- export const colorBlue50 : "#92b8d4";
28
- export const colorBlue100 : "#2673aa";
29
- export const colorBlue120 : "#1a5178";
30
- export const colorGreen10 : "#ecf3ea";
31
- export const colorGreen50 : "#a0c29b";
32
- export const colorGreen100 : "#438538";
33
- export const colorGreen120 : "#295222";
34
- export const colorOrange10 : "#fbf0e5";
35
- export const colorOrange50 : "#ecb67f";
36
- export const colorOrange100 : "#da6e00";
37
- export const colorOrange120 : "#a65300";
38
- export const colorRed10 : "#fbe9ea";
39
- export const colorRed50 : "#df9e99";
40
- export const colorRed100 : "#bf3f34";
41
- export const colorRed120 : "#8c2e26";
42
- export const colorTeal10 : "#e9f6f7";
43
- export const colorTeal50 : "#94d1d5";
44
- export const colorTeal100 : "#2ba3ab";
45
- export const colorTeal120 : "#1e7278";
46
- export const colorPink10 : "#faebef";
47
- export const colorPink50 : "#e79eb0";
48
- export const colorPink100 : "#cf3f63";
49
- export const colorPink120 : "#9c2f4a";
50
- export const colorPurple10 : "#f1ecf5";
51
- export const colorPurple50 : "#bfa9d3";
52
- export const colorPurple100 : "#8054a8";
53
- export const colorPurple120 : "#593b75";
54
- export const colorYellow10 : "#fdfaf4";
55
- export const colorYellow50 : "#fdd9a3";
56
- export const colorYellow100 : "#faa600";
57
- export const colorYellow120 : "#c78500";
1
+ export default tokens;
2
+ declare const tokens: {
3
+ "palette": {
4
+ "colorBlack": "#000000",
5
+ "colorWhite": "#ffffff",
6
+ "colorGray5": "#f2f2f2",
7
+ "colorGray10": "#e5e5e5",
8
+ "colorGray15": "#d9d9d9",
9
+ "colorGray25": "#b2b2b2",
10
+ "colorGray50": "#666666",
11
+ "colorGray75": "#333333",
12
+ "colorPrimary5": "#f2f4f5",
13
+ "colorPrimary10": "#e6e9ea",
14
+ "colorPrimary60": "#6b8085",
15
+ "colorPrimary100": "#082b33",
16
+ "colorPrimary120": "#062228",
17
+ "colorAccent5": "#f2f8f8",
18
+ "colorAccent10": "#e5f1f2",
19
+ "colorAccent15": "#d9ebec",
20
+ "colorAccent25": "#bfddde",
21
+ "colorAccent60": "#7fbbbd",
22
+ "colorAccent100": "#01797d",
23
+ "colorAccent120": "#016063",
24
+ "colorBlue10": "#e9f1f6",
25
+ "colorBlue50": "#92b8d4",
26
+ "colorBlue100": "#2673aa",
27
+ "colorBlue120": "#1a5178",
28
+ "colorGreen10": "#ecf3ea",
29
+ "colorGreen50": "#a0c29b",
30
+ "colorGreen100": "#438538",
31
+ "colorGreen120": "#295222",
32
+ "colorOrange10": "#fbf0e5",
33
+ "colorOrange50": "#ecb67f",
34
+ "colorOrange100": "#da6e00",
35
+ "colorOrange120": "#a65300",
36
+ "colorRed10": "#fbe9ea",
37
+ "colorRed50": "#df9e99",
38
+ "colorRed100": "#bf3f34",
39
+ "colorRed120": "#8c2e26",
40
+ "colorTeal10": "#e9f6f7",
41
+ "colorTeal50": "#94d1d5",
42
+ "colorTeal100": "#2ba3ab",
43
+ "colorTeal120": "#1e7278",
44
+ "colorPink10": "#faebef",
45
+ "colorPink50": "#e79eb0",
46
+ "colorPink100": "#cf3f63",
47
+ "colorPink120": "#9c2f4a",
48
+ "colorPurple10": "#f1ecf5",
49
+ "colorPurple50": "#bfa9d3",
50
+ "colorPurple100": "#8054a8",
51
+ "colorPurple120": "#593b75",
52
+ "colorYellow10": "#fdfaf4",
53
+ "colorYellow50": "#fdd9a3",
54
+ "colorYellow100": "#faa600",
55
+ "colorYellow120": "#c78500"
56
+ },
57
+ "text": {
58
+ "colorWhite": "#ffffff",
59
+ "colorBlack": "#000000",
60
+ "colorGray50": "#666666",
61
+ "colorGray75": "#333333",
62
+ "colorPrimary60": "#6b8085",
63
+ "colorPrimary100": "#082b33",
64
+ "colorPrimary120": "#062228",
65
+ "colorAccent100": "#01797d",
66
+ "colorAccent120": "#016063",
67
+ "colorBlue100": "#2673aa",
68
+ "colorBlue120": "#1a5178",
69
+ "colorGreen100": "#438538",
70
+ "colorGreen120": "#295222",
71
+ "colorOrange100": "#da6e00",
72
+ "colorOrange120": "#a65300",
73
+ "colorRed100": "#bf3f34",
74
+ "colorRed120": "#8c2e26",
75
+ "colorTeal100": "#2ba3ab",
76
+ "colorTeal120": "#1e7278",
77
+ "colorPurple100": "#8054a8",
78
+ "colorPurple120": "#593b75",
79
+ "colorPink100": "#cf3f63",
80
+ "colorPink120": "#9c2f4a",
81
+ "colorYellow100": "#faa600",
82
+ "colorYellow120": "#c78500"
83
+ }
84
+ };