@grantcodes/style-dictionary 1.1.0 → 1.2.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 (65) hide show
  1. package/.turbo/turbo-build.log +45 -0
  2. package/CHANGELOG.md +7 -0
  3. package/README.md +37 -0
  4. package/biome.json +9 -0
  5. package/build.js +10 -0
  6. package/config.js +485 -0
  7. package/demo.html +171 -0
  8. package/lib/color-generator.js +13 -0
  9. package/lib/get-style-dictionary-config.js +223 -0
  10. package/lib/get-themes.js +10 -0
  11. package/lib/index.js +3 -0
  12. package/package.json +60 -35
  13. package/tests/tokens.test.js +87 -0
  14. package/tokens/core/tier-1-definitions/colors.json +175 -0
  15. package/tokens/core/tier-1-definitions/z-index.json +29 -0
  16. package/tokens/grantcodes/tier-1-definitions/animation.json +27 -0
  17. package/tokens/grantcodes/tier-1-definitions/borders.json +36 -0
  18. package/tokens/grantcodes/tier-1-definitions/colors.json +35 -0
  19. package/tokens/grantcodes/tier-1-definitions/shadows.json +39 -0
  20. package/tokens/grantcodes/tier-1-definitions/typography.json +133 -0
  21. package/tokens/grantcodes/tier-2-usage/00-colors-background.json +72 -0
  22. package/tokens/grantcodes/tier-2-usage/00-colors-border.json +42 -0
  23. package/tokens/grantcodes/tier-2-usage/00-colors-content.json +45 -0
  24. package/tokens/grantcodes/tier-2-usage/animation.json +23 -0
  25. package/tokens/grantcodes/tier-2-usage/borders.json +26 -0
  26. package/tokens/grantcodes/tier-2-usage/shadows.json +39 -0
  27. package/tokens/grantcodes/tier-2-usage/typography-usage.json +277 -0
  28. package/tokens/grantcodes/tier-3-components/button.json +94 -0
  29. package/tokens/grantcodes/tier-3-components/focus-ring.json +26 -0
  30. package/tokens/grantcodes/tier-3-components/form.json +69 -0
  31. package/tokens/grantcodes/tier-3-components/link.json +39 -0
  32. package/tokens/todomap/tier-1-definitions/colors.json +92 -0
  33. package/tokens/todomap/tier-1-definitions/typography.json +10 -0
  34. package/tokens/todomap/tier-2-usage/00-colors-background.json +36 -0
  35. package/tokens/todomap/tier-2-usage/00-colors-content.json +33 -0
  36. package/tokens/todomap/tier-2-usage/typography-usage.json +20 -0
  37. package/tokens/todomap/tier-3-components/button.json +141 -0
  38. package/tokens/todomap/tier-3-components/focus-ring.json +26 -0
  39. package/tokens/todomap/tier-3-components/form.json +69 -0
  40. package/tokens/todomap/tier-3-components/link.json +39 -0
  41. package/tokens/wireframe/tier-1-definitions/animation.json +18 -0
  42. package/tokens/wireframe/tier-1-definitions/borders.json +42 -0
  43. package/tokens/wireframe/tier-1-definitions/colors.json +36 -0
  44. package/tokens/wireframe/tier-1-definitions/shadows.json +39 -0
  45. package/tokens/wireframe/tier-1-definitions/typography.json +130 -0
  46. package/tokens/wireframe/tier-2-usage/00-colors-background.json +86 -0
  47. package/tokens/wireframe/tier-2-usage/00-colors-border.json +42 -0
  48. package/tokens/wireframe/tier-2-usage/00-colors-content.json +45 -0
  49. package/tokens/wireframe/tier-2-usage/animation.json +24 -0
  50. package/tokens/wireframe/tier-2-usage/borders.json +33 -0
  51. package/tokens/wireframe/tier-2-usage/shadows.json +39 -0
  52. package/tokens/wireframe/tier-2-usage/typography-usage.json +445 -0
  53. package/tokens/wireframe/tier-3-components/button.json +94 -0
  54. package/tokens/wireframe/tier-3-components/focus-ring.json +26 -0
  55. package/tokens/wireframe/tier-3-components/form.json +69 -0
  56. package/tokens/wireframe/tier-3-components/link.json +39 -0
  57. package/.github/workflows/create-release.yml +0 -45
  58. package/.simple-git-hooks.cjs +0 -1
  59. package/commitlint.config.cjs +0 -1
  60. package/dist/css/default/style-dictionary.css +0 -181
  61. package/dist/css/todomap/style-dictionary.css +0 -181
  62. package/dist/js/default/style-dictionary.js +0 -179
  63. package/dist/js/todomap/style-dictionary.js +0 -179
  64. package/dist/scss/default/_style-dictionary.scss +0 -181
  65. package/dist/scss/todomap/_style-dictionary.scss +0 -181
@@ -0,0 +1,175 @@
1
+ {
2
+ "color": {
3
+ "neutral": {
4
+ "white": {
5
+ "value": "oklch(100% 0 0)"
6
+ },
7
+ "100": {
8
+ "value": "oklch(95% 0 0)"
9
+ },
10
+ "200": {
11
+ "value": "oklch(90% 0 0)"
12
+ },
13
+ "300": {
14
+ "value": "oklch(80% 0 0)"
15
+ },
16
+ "400": {
17
+ "value": "oklch(70% 0 0)"
18
+ },
19
+ "500": {
20
+ "value": "oklch(60% 0 0)"
21
+ },
22
+ "600": {
23
+ "value": "oklch(50% 0 0)"
24
+ },
25
+ "700": {
26
+ "value": "oklch(40% 0 0)"
27
+ },
28
+ "800": {
29
+ "value": "oklch(30% 0 0)"
30
+ },
31
+ "900": {
32
+ "value": "oklch(20% 0 0)"
33
+ },
34
+ "black": {
35
+ "value": "oklch(0% 0 0)"
36
+ }
37
+ },
38
+ "utility": {
39
+ "green": {
40
+ "100": {
41
+ "value": "oklch(96.73% 0.0537 129.1)"
42
+ },
43
+ "200": {
44
+ "value": "oklch(93.45% 0.107 131.96)"
45
+ },
46
+ "300": {
47
+ "value": "oklch(87.97% 0.1546 135.05)"
48
+ },
49
+ "400": {
50
+ "value": "oklch(81.78% 0.1827 137.62)"
51
+ },
52
+ "500": {
53
+ "value": "oklch(74.01% 0.2132 139.87)"
54
+ },
55
+ "600": {
56
+ "value": "oklch(65.44% 0.1981 141.12)"
57
+ },
58
+ "700": {
59
+ "value": "oklch(57.11% 0.1795 142.12)"
60
+ },
61
+ "800": {
62
+ "value": "oklch(48.67% 0.1572 142.68)"
63
+ },
64
+ "900": {
65
+ "value": "oklch(42.59% 0.1358 143.3)"
66
+ }
67
+ },
68
+ "blue": {
69
+ "100": {
70
+ "value": "oklch(95.86% 0.0542 179.13)"
71
+ },
72
+ "200": {
73
+ "value": "oklch(92.82% 0.0973 184.41)"
74
+ },
75
+ "300": {
76
+ "value": "oklch(90.54% 0.1282 189.63)"
77
+ },
78
+ "500": {
79
+ "value": "oklch(81.86% 0.141005 208.7047)"
80
+ },
81
+ "600": {
82
+ "value": "oklch(68.89% 0.125872 220.4932)"
83
+ },
84
+ "700": {
85
+ "value": "oklch(56.7% 0.116289 232.4331)"
86
+ },
87
+ "800": {
88
+ "value": "oklch(45.75% 0.107158 241.2805)"
89
+ },
90
+ "900": {
91
+ "value": "oklch(37.55% 0.1037 249.04)"
92
+ }
93
+ },
94
+ "yellow": {
95
+ "100": {
96
+ "value": "oklch(97.66% 0.0606 103.43)"
97
+ },
98
+ "200": {
99
+ "value": "oklch(95.72% 0.1147 103.53)"
100
+ },
101
+ "300": {
102
+ "value": "oklch(93.47% 0.1552 102.21)"
103
+ },
104
+ "400": {
105
+ "value": "oklch(91.68% 0.1745 101.08)"
106
+ },
107
+ "500": {
108
+ "value": "oklch(88.99% 0.183778 97.6996)"
109
+ },
110
+ "600": {
111
+ "value": "oklch(78.68% 0.162 96.43)"
112
+ },
113
+ "700": {
114
+ "value": "oklch(68.35% 0.14027 94.7302)"
115
+ },
116
+ "800": {
117
+ "value": "oklch(58.04% 0.1189 93.71)"
118
+ },
119
+ "900": {
120
+ "value": "oklch(50.09% 0.1025 92.6)"
121
+ }
122
+ },
123
+ "red": {
124
+ "100": {
125
+ "value": "oklch(94.96% 0.0395 73.45)"
126
+ },
127
+ "200": {
128
+ "value": "oklch(89.21% 0.076552 65.9429)"
129
+ },
130
+ "300": {
131
+ "value": "oklch(82.67% 0.1156 57.65)"
132
+ },
133
+ "400": {
134
+ "value": "oklch(77.04% 0.1486 49.15)"
135
+ },
136
+ "500": {
137
+ "value": "oklch(69.31% 0.203172 39.994)"
138
+ },
139
+ "600": {
140
+ "value": "oklch(60.03% 0.1938 35.81)"
141
+ },
142
+ "700": {
143
+ "value": "oklch(51.18% 0.1802 32.56)"
144
+ },
145
+ "800": {
146
+ "value": "oklch(42.79% 0.16 30.38)"
147
+ },
148
+ "900": {
149
+ "value": "oklch(36.89% 0.1443 28.98)"
150
+ }
151
+ }
152
+ },
153
+ "transparent": {
154
+ "0": {
155
+ "value": "oklch(100% 0 0 / 0)"
156
+ },
157
+ "10": {
158
+ "value": "oklch(100% 0 0 / 0.1)"
159
+ },
160
+ "25": {
161
+ "value": "oklch(100% 0 0 / 0.25)"
162
+ },
163
+ "50": {
164
+ "value": "oklch(100% 0 0 / 0.5)"
165
+ },
166
+ "75": {
167
+ "value": "oklch(100% 0 0 / 0.75)"
168
+ },
169
+ "90": {
170
+ "value": "oklch(100% 0 0 / 0.9)"
171
+ }
172
+ }
173
+ }
174
+ }
175
+
@@ -0,0 +1,29 @@
1
+ {
2
+ "z-index": {
3
+ "top": {
4
+ "value": "99999"
5
+ },
6
+ "500": {
7
+ "value": "500"
8
+ },
9
+ "400": {
10
+ "value": "400"
11
+ },
12
+ "300": {
13
+ "value": "300"
14
+ },
15
+ "200": {
16
+ "value": "200"
17
+ },
18
+ "100": {
19
+ "value": "100"
20
+ },
21
+ "0": {
22
+ "value": "0"
23
+ },
24
+ "bottom": {
25
+ "value": "-100"
26
+ }
27
+ }
28
+ }
29
+
@@ -0,0 +1,27 @@
1
+ {
2
+ "animation": {
3
+ "duration": {
4
+ "10": {
5
+ "value": "100ms"
6
+ },
7
+ "20": {
8
+ "value": "200ms"
9
+ },
10
+ "30": {
11
+ "value": "300ms"
12
+ },
13
+ "40": {
14
+ "value": "400ms"
15
+ }
16
+ },
17
+ "timing-function": {
18
+ "ease": {
19
+ "value": "ease-in-out"
20
+ },
21
+ "linear": {
22
+ "value": "linear"
23
+ }
24
+ }
25
+ }
26
+ }
27
+
@@ -0,0 +1,36 @@
1
+ {
2
+ "border": {
3
+ "radius": {
4
+ "square": {
5
+ "value": "0"
6
+ },
7
+ "125": {
8
+ "value": "0.125rem"
9
+ },
10
+ "250": {
11
+ "value": "0.25rem"
12
+ },
13
+ "500": {
14
+ "value": "0.5rem"
15
+ },
16
+ "1000": {
17
+ "value": "1rem"
18
+ },
19
+ "rounded": {
20
+ "value": "50%"
21
+ }
22
+ },
23
+ "width": {
24
+ "1": {
25
+ "value": "1px"
26
+ },
27
+ "2": {
28
+ "value": "2px"
29
+ },
30
+ "4": {
31
+ "value": "4px"
32
+ }
33
+ }
34
+ }
35
+ }
36
+
@@ -0,0 +1,35 @@
1
+ {
2
+ "color": {
3
+ "brand": {
4
+ "purple": {
5
+ "100": {
6
+ "value": "oklch(95% 0.04 279.42)"
7
+ },
8
+ "200": {
9
+ "value": "oklch(90% 0.08 279.42)"
10
+ },
11
+ "300": {
12
+ "value": "oklch(82% 0.12 279.42)"
13
+ },
14
+ "400": {
15
+ "value": "oklch(74% 0.17 279.42)"
16
+ },
17
+ "500": {
18
+ "value": "oklch(65% 0.22 279.42)"
19
+ },
20
+ "600": {
21
+ "value": "oklch(55% 0.26 279.42)"
22
+ },
23
+ "700": {
24
+ "value": "oklch(45% 0.24 279.42)"
25
+ },
26
+ "800": {
27
+ "value": "oklch(35% 0.18 279.42)"
28
+ },
29
+ "900": {
30
+ "value": "oklch(25% 0.12 279.42)"
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
@@ -0,0 +1,39 @@
1
+ {
2
+ "shadow": {
3
+ "sm": {
4
+ "x": {
5
+ "value": "0px"
6
+ },
7
+ "y": {
8
+ "value": "4px"
9
+ },
10
+ "blur": {
11
+ "value": "4px"
12
+ },
13
+ "spread": {
14
+ "value": "0px"
15
+ },
16
+ "color": {
17
+ "value": "#00000040"
18
+ }
19
+ },
20
+ "md": {
21
+ "x": {
22
+ "value": "0px"
23
+ },
24
+ "y": {
25
+ "value": "8px"
26
+ },
27
+ "blur": {
28
+ "value": "6px"
29
+ },
30
+ "spread": {
31
+ "value": "-6px"
32
+ },
33
+ "color": {
34
+ "value": "#0000001a"
35
+ }
36
+ }
37
+ }
38
+ }
39
+
@@ -0,0 +1,133 @@
1
+ {
2
+ "typography": {
3
+ "font-family": {
4
+ "system": {
5
+ "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
6
+ },
7
+ "greycliff": {
8
+ "value": "Greycliff, {typography.font-family.system}"
9
+ }
10
+ },
11
+ "font-weight": {
12
+ "400": {
13
+ "value": "400"
14
+ },
15
+ "600": {
16
+ "value": "600"
17
+ },
18
+ "700": {
19
+ "value": "700"
20
+ }
21
+ },
22
+ "font-size": {
23
+ "12": {
24
+ "value": "12px"
25
+ },
26
+ "14": {
27
+ "value": "14px"
28
+ },
29
+ "16": {
30
+ "value": "16px"
31
+ },
32
+ "18": {
33
+ "value": "18px"
34
+ },
35
+ "20": {
36
+ "value": "20px"
37
+ },
38
+ "24": {
39
+ "value": "24px"
40
+ },
41
+ "28": {
42
+ "value": "28px"
43
+ },
44
+ "32": {
45
+ "value": "32px"
46
+ },
47
+ "40": {
48
+ "value": "40px"
49
+ },
50
+ "48": {
51
+ "value": "48px"
52
+ },
53
+ "56": {
54
+ "value": "56px"
55
+ },
56
+ "64": {
57
+ "value": "64px"
58
+ },
59
+ "100": {
60
+ "value": "100px"
61
+ }
62
+ },
63
+ "line-height": {
64
+ "16": {
65
+ "value": "16px"
66
+ },
67
+ "20": {
68
+ "value": "20px"
69
+ },
70
+ "24": {
71
+ "value": "24px"
72
+ },
73
+ "28": {
74
+ "value": "28px"
75
+ },
76
+ "32": {
77
+ "value": "32px"
78
+ },
79
+ "36": {
80
+ "value": "36px"
81
+ },
82
+ "40": {
83
+ "value": "40px"
84
+ },
85
+ "48": {
86
+ "value": "48px"
87
+ },
88
+ "56": {
89
+ "value": "56px"
90
+ },
91
+ "64": {
92
+ "value": "64px"
93
+ },
94
+ "72": {
95
+ "value": "72px"
96
+ },
97
+ "110": {
98
+ "value": "110px"
99
+ }
100
+ },
101
+ "letter-spacing": {
102
+ "0": {
103
+ "value": "0px"
104
+ },
105
+ "2": {
106
+ "value": "2px"
107
+ },
108
+ "minus-2": {
109
+ "value": "-2px"
110
+ },
111
+ "minus-1-half": {
112
+ "value": "-1.5px"
113
+ },
114
+ "minus-1": {
115
+ "value": "-1px"
116
+ },
117
+ "minus-half": {
118
+ "value": "-0.5px"
119
+ },
120
+ "half": {
121
+ "value": "0.5px"
122
+ }
123
+ },
124
+ "text-transform": {
125
+ "none": {
126
+ "value": "none"
127
+ },
128
+ "uppercase": {
129
+ "value": "uppercase"
130
+ }
131
+ }
132
+ }
133
+ }
@@ -0,0 +1,72 @@
1
+ {
2
+ "color": {
3
+ "background": {
4
+ "default": {
5
+ "value": "{color.neutral.white}"
6
+ },
7
+ "default-hover": {
8
+ "value": "{color.neutral.300}"
9
+ },
10
+ "subtle": {
11
+ "value": "{color.neutral.100}"
12
+ },
13
+ "subtle-hover": {
14
+ "value": "{color.neutral.200}"
15
+ },
16
+ "knockout": {
17
+ "value": "{color.neutral.black}"
18
+ },
19
+ "brand": {
20
+ "value": "{color.brand.purple.100}"
21
+ },
22
+ "brand-hover": {
23
+ "value": "{color.brand.purple.200}"
24
+ },
25
+ "brand-disabled": {
26
+ "value": "{color.neutral.200}"
27
+ },
28
+ "brand-knockout": {
29
+ "value": "{color.brand.purple.800}"
30
+ },
31
+ "brand-knockout-hover": {
32
+ "value": "{color.brand.purple.700}"
33
+ },
34
+ "utility": {
35
+ "error": {
36
+ "value": "{color.utility.red.100}"
37
+ },
38
+ "error-knockout": {
39
+ "value": "{color.utility.red.600}"
40
+ },
41
+ "warning": {
42
+ "value": "{color.utility.yellow.100}"
43
+ },
44
+ "warning-knockout": {
45
+ "value": "{color.utility.yellow.600}"
46
+ },
47
+ "success": {
48
+ "value": "{color.utility.green.100}"
49
+ },
50
+ "success-knockout": {
51
+ "value": "{color.utility.green.600}"
52
+ },
53
+ "info": {
54
+ "value": "{color.utility.blue.100}"
55
+ },
56
+ "info-knockout": {
57
+ "value": "{color.utility.blue.600}"
58
+ }
59
+ },
60
+ "disabled": {
61
+ "value": "{color.neutral.200}"
62
+ },
63
+ "transparent": {
64
+ "value": "{color.transparent.25}"
65
+ },
66
+ "transparent-strong": {
67
+ "value": "{color.transparent.90}"
68
+ }
69
+ }
70
+ }
71
+ }
72
+
@@ -0,0 +1,42 @@
1
+ {
2
+ "color": {
3
+ "border": {
4
+ "default": {
5
+ "value": "{color.neutral.300}"
6
+ },
7
+ "default-hover": {
8
+ "value": "{color.neutral.500}"
9
+ },
10
+ "subtle": {
11
+ "value": "{color.neutral.200}"
12
+ },
13
+ "strong": {
14
+ "value": "{color.neutral.900}"
15
+ },
16
+ "knockout": {
17
+ "value": "{color.neutral.400}"
18
+ },
19
+ "brand": {
20
+ "value": "{color.brand.purple.700}"
21
+ },
22
+ "utility": {
23
+ "error": {
24
+ "value": "{color.utility.red.700}"
25
+ },
26
+ "warning": {
27
+ "value": "{color.utility.yellow.700}"
28
+ },
29
+ "success": {
30
+ "value": "{color.utility.green.700}"
31
+ },
32
+ "info": {
33
+ "value": "{color.utility.blue.700}"
34
+ }
35
+ },
36
+ "disabled": {
37
+ "value": "{color.neutral.200}"
38
+ }
39
+ }
40
+ }
41
+ }
42
+
@@ -0,0 +1,45 @@
1
+ {
2
+ "color": {
3
+ "content": {
4
+ "default": {
5
+ "value": "{color.neutral.900}"
6
+ },
7
+ "default-hover": {
8
+ "value": "{color.neutral.black}"
9
+ },
10
+ "subtle": {
11
+ "value": "{color.neutral.500}"
12
+ },
13
+ "knockout": {
14
+ "value": "{color.neutral.white}"
15
+ },
16
+ "brand": {
17
+ "value": "{color.brand.purple.600}"
18
+ },
19
+ "brand-hover": {
20
+ "value": "{color.brand.purple.900}"
21
+ },
22
+ "brand-knockout": {
23
+ "value": "{color.brand.purple.100}"
24
+ },
25
+ "disabled": {
26
+ "value": "{color.neutral.600}"
27
+ },
28
+ "utility": {
29
+ "error": {
30
+ "value": "{color.utility.red.600}"
31
+ },
32
+ "warning": {
33
+ "value": "{color.utility.yellow.600}"
34
+ },
35
+ "success": {
36
+ "value": "{color.utility.green.600}"
37
+ },
38
+ "info": {
39
+ "value": "{color.utility.blue.600}"
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+
@@ -0,0 +1,23 @@
1
+ {
2
+ "animation": {
3
+ "fade": {
4
+ "quick": {
5
+ "value": "{animation.duration.10}"
6
+ },
7
+ "long": {
8
+ "value": "{animation.duration.40}"
9
+ }
10
+ },
11
+ "move": {
12
+ "quick": {
13
+ "value": "{animation.duration.20}"
14
+ },
15
+ "long": {
16
+ "value": "{animation.duration.40}"
17
+ }
18
+ },
19
+ "ease": {
20
+ "value": "{animation.timing-function.ease}"
21
+ }
22
+ }
23
+ }
@@ -0,0 +1,26 @@
1
+ {
2
+ "border": {
3
+ "radius": {
4
+ "sm": {
5
+ "value": "{border.radius.125}"
6
+ },
7
+ "md": {
8
+ "value": "{border.radius.500}"
9
+ },
10
+ "lg": {
11
+ "value": "{border.radius.1000}"
12
+ }
13
+ },
14
+ "width": {
15
+ "sm": {
16
+ "value": "{border.width.1}"
17
+ },
18
+ "md": {
19
+ "value": "{border.width.2}"
20
+ },
21
+ "lg": {
22
+ "value": "{border.width.4}"
23
+ }
24
+ }
25
+ }
26
+ }