@esri/calcite-design-tokens 1.0.0 → 1.1.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 (111) hide show
  1. package/.eslintrc.cjs +85 -0
  2. package/.turbo/turbo-build.log +64 -0
  3. package/.turbo/turbo-test.log +14 -0
  4. package/CHANGELOG.md +17 -4
  5. package/CONTRIBUTING.md +41 -0
  6. package/LICENSE.md +13 -0
  7. package/README.md +9 -11
  8. package/dist/css/brand-light.css +1 -1
  9. package/dist/css/calcite-dark.css +1 -1
  10. package/dist/css/calcite-headless.css +2 -1
  11. package/dist/css/calcite-light.css +1 -1
  12. package/dist/scss/brand-light.scss +1 -1
  13. package/dist/scss/calcite-dark.scss +1 -1
  14. package/dist/scss/calcite-headless.scss +3 -1
  15. package/dist/scss/calcite-light.scss +1 -1
  16. package/jest.config.json +16 -0
  17. package/package.json +11 -72
  18. package/src/$metadata.json +76 -0
  19. package/src/$themes.json +2360 -0
  20. package/src/brand/dark.json +1 -0
  21. package/src/brand/global.json +1 -0
  22. package/src/brand/light.json +20 -0
  23. package/src/calcite/dark.json +2488 -0
  24. package/src/calcite/light.json +2508 -0
  25. package/src/component/accordion-item.json +172 -0
  26. package/src/component/accordion.json +192 -0
  27. package/src/component/action-bar-grid.json +66 -0
  28. package/src/component/action-bar.json +66 -0
  29. package/src/component/action-pad-grid.json +80 -0
  30. package/src/component/action-pad.json +80 -0
  31. package/src/component/action.json +156 -0
  32. package/src/component/alert.json +258 -0
  33. package/src/component/avatar.json +140 -0
  34. package/src/component/block-section.json +124 -0
  35. package/src/component/block.json +198 -0
  36. package/src/component/button.json +650 -0
  37. package/src/component/card.json +116 -0
  38. package/src/component/checkbox.json +110 -0
  39. package/src/component/chip.json +382 -0
  40. package/src/component/color-picker.json +148 -0
  41. package/src/component/combobox.json +152 -0
  42. package/src/component/date-picker.json +354 -0
  43. package/src/component/dropdown-item.json +384 -0
  44. package/src/component/dropdown.json +58 -0
  45. package/src/component/fab.json +490 -0
  46. package/src/component/filter.json +174 -0
  47. package/src/component/input-date-picker.json +224 -0
  48. package/src/component/input-datetime-local.json +230 -0
  49. package/src/component/input-email.json +244 -0
  50. package/src/component/input-file.json +244 -0
  51. package/src/component/input-message.json +72 -0
  52. package/src/component/input-month.json +244 -0
  53. package/src/component/input-number.json +244 -0
  54. package/src/component/input-password.json +244 -0
  55. package/src/component/input-search.json +244 -0
  56. package/src/component/input-telephone.json +244 -0
  57. package/src/component/input-text.json +244 -0
  58. package/src/component/input-time.json +1 -0
  59. package/src/component/input-week.json +244 -0
  60. package/src/component/label.json +26 -0
  61. package/src/component/link.json +44 -0
  62. package/src/component/loader.json +130 -0
  63. package/src/component/modal.json +278 -0
  64. package/src/component/notice.json +280 -0
  65. package/src/component/pagination.json +152 -0
  66. package/src/component/panel-header.json +88 -0
  67. package/src/component/popover.json +170 -0
  68. package/src/component/radio.json +124 -0
  69. package/src/component/rating.json +243 -0
  70. package/src/component/scrim.json +18 -0
  71. package/src/component/segmented-control.json +154 -0
  72. package/src/component/slider-histogram-range.json +284 -0
  73. package/src/component/slider-histogram.json +280 -0
  74. package/src/component/slider-range.json +226 -0
  75. package/src/component/slider.json +226 -0
  76. package/src/component/split-button.json +830 -0
  77. package/src/component/stepper-item.json +372 -0
  78. package/src/component/stepper.json +152 -0
  79. package/src/component/switch.json +178 -0
  80. package/src/component/tab-title.json +228 -0
  81. package/src/component/tabs.json +242 -0
  82. package/src/component/textarea.json +200 -0
  83. package/src/component/time-picker.json +138 -0
  84. package/src/component/tip-manager.json +118 -0
  85. package/src/component/tip.json +114 -0
  86. package/src/component/tooltip.json +66 -0
  87. package/src/component/tree-item.json +176 -0
  88. package/src/core.json +1709 -0
  89. package/src/semantic.json +1709 -0
  90. package/support/run.ts +16 -0
  91. package/support/token-transformer/format/scss.ts +81 -0
  92. package/support/token-transformer/getThemes.ts +41 -0
  93. package/support/token-transformer/parse/expandComposites.test.ts +144 -0
  94. package/support/token-transformer/parse/expandComposites.ts +72 -0
  95. package/support/token-transformer/sd-run.ts +147 -0
  96. package/support/token-transformer/transform/nameCamelCase.test.ts +36 -0
  97. package/support/token-transformer/transform/nameCamelCase.ts +15 -0
  98. package/support/token-transformer/transform/nameKebabCase.test.ts +36 -0
  99. package/support/token-transformer/transform/nameKebabCase.ts +26 -0
  100. package/support/token-transformer/utils/compositeTokens.test.ts +133 -0
  101. package/support/token-transformer/utils/compositeTokens.ts +103 -0
  102. package/support/token-transformer/utils/convertTokenToStyleDictionaryFormat.ts +20 -0
  103. package/support/token-transformer/utils/matchList.ts +11 -0
  104. package/support/token-transformer/utils/parseName.ts +18 -0
  105. package/support/token-transformer/utils/parseTokenPath.ts +19 -0
  106. package/support/token-transformer/utils/regex.ts +9 -0
  107. package/support/token-transformer/utils/sortAllTokens.ts +12 -0
  108. package/support/token-transformer/utils/transformOptions.ts +31 -0
  109. package/tsconfig-base.json +17 -0
  110. package/tsconfig-eslint.json +4 -0
  111. package/tsconfig.json +4 -0
package/src/component/panel-header.json ADDED
@@ -0,0 +1,88 @@
1
+ {
2
+ "panel-header": {
3
+ "font": {
4
+ "light": {
5
+ "value": "$semantic.ui.color.text.2.light",
6
+ "type": "color"
7
+ },
8
+ "dark": {
9
+ "value": "$semantic.ui.color.text.2.dark",
10
+ "type": "color"
11
+ },
12
+ "heading": {
13
+ "md": {
14
+ "value": "$semantic.font.default.medium.0h",
15
+ "type": "typography"
16
+ }
17
+ },
18
+ "description": {
19
+ "md": {
20
+ "value": "$semantic.font.default.regular.-1h",
21
+ "type": "typography"
22
+ }
23
+ }
24
+ },
25
+ "icon": {
26
+ "light": {
27
+ "value": "$semantic.ui.color.text.3.light",
28
+ "type": "color"
29
+ },
30
+ "dark": {
31
+ "value": "$semantic.ui.color.text.3.dark",
32
+ "type": "color"
33
+ }
34
+ },
35
+ "border": {
36
+ "light": {
37
+ "value": "$semantic.ui.color.border.3.light",
38
+ "type": "color"
39
+ },
40
+ "dark": {
41
+ "value": "$semantic.ui.color.border.3.dark",
42
+ "type": "color"
43
+ }
44
+ },
45
+ "background": {
46
+ "light": {
47
+ "value": "$semantic.ui.color.foreground.1.light",
48
+ "type": "color"
49
+ },
50
+ "dark": {
51
+ "value": "$semantic.ui.color.foreground.1.dark",
52
+ "type": "color"
53
+ }
54
+ },
55
+ "border-width": {
56
+ "md": {
57
+ "value": "$core.border.border-width.0",
58
+ "type": "borderWidth"
59
+ }
60
+ },
61
+ "icon-size": {
62
+ "md": {
63
+ "value": "$core.sizing.7",
64
+ "type": "sizing"
65
+ }
66
+ },
67
+ "space-between": {
68
+ "md": {
69
+ "value": "$core.spacing.1",
70
+ "type": "spacing"
71
+ }
72
+ },
73
+ "space-around": {
74
+ "left-right": {
75
+ "md": {
76
+ "value": "$core.spacing.5",
77
+ "type": "spacing"
78
+ }
79
+ },
80
+ "top-bottom": {
81
+ "md": {
82
+ "value": "$core.spacing.6",
83
+ "type": "spacing"
84
+ }
85
+ }
86
+ }
87
+ }
88
+ }
package/src/component/popover.json ADDED
@@ -0,0 +1,170 @@
1
+ {
2
+ "popover": {
3
+ "font": {
4
+ "light": {
5
+ "value": "$semantic.ui.color.text.1.light",
6
+ "type": "color"
7
+ },
8
+ "dark": {
9
+ "value": "$semantic.ui.color.text.1.dark",
10
+ "type": "color"
11
+ },
12
+ "sm": {
13
+ "value": "$semantic.font.wrap.medium.-1",
14
+ "type": "typography"
15
+ },
16
+ "md": {
17
+ "value": "$semantic.font.wrap.medium.0",
18
+ "type": "typography"
19
+ },
20
+ "lg": {
21
+ "value": "$semantic.font.wrap.medium.1",
22
+ "type": "typography"
23
+ }
24
+ },
25
+ "icon": {
26
+ "light": {
27
+ "value": "$semantic.ui.color.text.3.light",
28
+ "type": "color"
29
+ },
30
+ "dark": {
31
+ "value": "$semantic.ui.color.text.3.dark",
32
+ "type": "color"
33
+ }
34
+ },
35
+ "border": {
36
+ "light": {
37
+ "value": "$semantic.ui.color.border.3.light",
38
+ "type": "color"
39
+ },
40
+ "dark": {
41
+ "value": "$semantic.ui.color.border.3.dark",
42
+ "type": "color"
43
+ }
44
+ },
45
+ "background": {
46
+ "light": {
47
+ "value": "$semantic.ui.color.foreground.1.light",
48
+ "type": "color"
49
+ },
50
+ "dark": {
51
+ "value": "$semantic.ui.color.foreground.1.dark",
52
+ "type": "color"
53
+ }
54
+ },
55
+ "border-radius": {
56
+ "sm": {
57
+ "value": "$core.border.border-radius.1",
58
+ "type": "borderRadius"
59
+ },
60
+ "md": {
61
+ "value": "$core.border.border-radius.1",
62
+ "type": "borderRadius"
63
+ },
64
+ "lg": {
65
+ "value": "$core.border.border-radius.1",
66
+ "type": "borderRadius"
67
+ }
68
+ },
69
+ "border-width": {
70
+ "sm": {
71
+ "value": "$core.border.border-width.0",
72
+ "type": "borderWidth"
73
+ },
74
+ "md": {
75
+ "value": "$core.border.border-width.0",
76
+ "type": "borderWidth"
77
+ },
78
+ "lg": {
79
+ "value": "$core.border.border-width.0",
80
+ "type": "borderWidth"
81
+ }
82
+ },
83
+ "pointer-size": {
84
+ "sm": {
85
+ "value": "$core.sizing.6",
86
+ "type": "sizing"
87
+ },
88
+ "md": {
89
+ "value": "$core.sizing.6",
90
+ "type": "sizing"
91
+ },
92
+ "lg": {
93
+ "value": "$core.sizing.6",
94
+ "type": "sizing"
95
+ }
96
+ },
97
+ "icon-size": {
98
+ "sm": {
99
+ "value": "$core.sizing.7",
100
+ "type": "sizing"
101
+ },
102
+ "md": {
103
+ "value": "$core.sizing.7",
104
+ "type": "sizing"
105
+ },
106
+ "lg": {
107
+ "value": "$core.sizing.9",
108
+ "type": "sizing"
109
+ }
110
+ },
111
+ "space-between": {
112
+ "sm": {
113
+ "value": "$core.spacing.none",
114
+ "type": "spacing"
115
+ },
116
+ "md": {
117
+ "value": "$core.spacing.none",
118
+ "type": "spacing"
119
+ },
120
+ "lg": {
121
+ "value": "$core.spacing.none",
122
+ "type": "spacing"
123
+ }
124
+ },
125
+ "space-around": {
126
+ "left-right": {
127
+ "sm": {
128
+ "value": "$core.spacing.5",
129
+ "type": "spacing"
130
+ },
131
+ "md": {
132
+ "value": "$core.spacing.7",
133
+ "type": "spacing"
134
+ },
135
+ "lg": {
136
+ "value": "$core.spacing.8",
137
+ "type": "spacing"
138
+ }
139
+ },
140
+ "left-top-bottom": {
141
+ "sm": {
142
+ "value": "$core.spacing.3",
143
+ "type": "spacing"
144
+ },
145
+ "md": {
146
+ "value": "$core.spacing.5",
147
+ "type": "spacing"
148
+ },
149
+ "lg": {
150
+ "value": "$core.spacing.7",
151
+ "type": "spacing"
152
+ }
153
+ }
154
+ },
155
+ "shadow": {
156
+ "sm": {
157
+ "value": "{core.box-shadow.2}",
158
+ "type": "boxShadow"
159
+ },
160
+ "md": {
161
+ "value": "{core.box-shadow.2}",
162
+ "type": "boxShadow"
163
+ },
164
+ "lg": {
165
+ "value": "{core.box-shadow.2}",
166
+ "type": "boxShadow"
167
+ }
168
+ }
169
+ }
170
+ }
package/src/component/radio.json ADDED
@@ -0,0 +1,124 @@
1
+ {
2
+ "radio": {
3
+ "comp-size": {
4
+ "sm": {
5
+ "value": "$core.sizing.5",
6
+ "type": "sizing"
7
+ },
8
+ "md": {
9
+ "value": "$core.sizing.6",
10
+ "type": "sizing"
11
+ },
12
+ "lg": {
13
+ "value": "$core.sizing.7",
14
+ "type": "sizing"
15
+ }
16
+ },
17
+ "space-between": {
18
+ "sm": {
19
+ "value": "$core.sizing.3",
20
+ "type": "spacing"
21
+ },
22
+ "md": {
23
+ "value": "$core.sizing.3",
24
+ "type": "spacing"
25
+ },
26
+ "lg": {
27
+ "value": "$core.sizing.3",
28
+ "type": "spacing"
29
+ }
30
+ },
31
+ "background": {
32
+ "light": {
33
+ "value": "$semantic.ui.color.foreground.1.light",
34
+ "type": "color"
35
+ },
36
+ "dark": {
37
+ "value": "$semantic.ui.color.foreground.1.dark",
38
+ "type": "color"
39
+ }
40
+ },
41
+ "border-radius": {
42
+ "value": "$semantic.border.border-radius.pill",
43
+ "type": "borderRadius"
44
+ },
45
+ "border-width": {
46
+ "unchecked": {
47
+ "value": "$core.border.border-width.0",
48
+ "type": "borderWidth"
49
+ },
50
+ "checked": {
51
+ "sm": {
52
+ "value": "$core.border.border-width.2",
53
+ "type": "borderWidth"
54
+ },
55
+ "md": {
56
+ "value": "$core.border.border-width.2",
57
+ "type": "borderWidth"
58
+ },
59
+ "lg": {
60
+ "value": "$core.border.border-width.3",
61
+ "type": "borderWidth"
62
+ }
63
+ }
64
+ },
65
+ "border": {
66
+ "unchecked": {
67
+ "light": {
68
+ "value": "$semantic.ui.color.text.3.light",
69
+ "type": "color"
70
+ },
71
+ "dark": {
72
+ "value": "$semantic.ui.color.text.3.dark",
73
+ "type": "color"
74
+ }
75
+ },
76
+ "checked": {
77
+ "light": {
78
+ "value": "$semantic.ui.color.brand.default.light",
79
+ "type": "color"
80
+ },
81
+ "dark": {
82
+ "value": "$semantic.ui.color.brand.default.dark",
83
+ "type": "color"
84
+ }
85
+ }
86
+ },
87
+ "font": {
88
+ "sm": {
89
+ "value": "$semantic.font.default.regular.-2h",
90
+ "type": "typography"
91
+ },
92
+ "md": {
93
+ "value": "$semantic.font.default.regular.-1h",
94
+ "type": "typography"
95
+ },
96
+ "lg": {
97
+ "value": "$semantic.font.default.regular.0h",
98
+ "type": "typography"
99
+ },
100
+ "light": {
101
+ "value": "$semantic.ui.color.text.1.light",
102
+ "type": "color"
103
+ },
104
+ "dark": {
105
+ "value": "$semantic.ui.color.text.1.dark",
106
+ "type": "color"
107
+ }
108
+ },
109
+ "space-around": {
110
+ "sm": {
111
+ "value": "$core.sizing.3",
112
+ "type": "spacing"
113
+ },
114
+ "md": {
115
+ "value": "$core.sizing.5",
116
+ "type": "spacing"
117
+ },
118
+ "lg": {
119
+ "value": "$core.sizing.7",
120
+ "type": "spacing"
121
+ }
122
+ }
123
+ }
124
+ }
package/src/component/rating.json ADDED
@@ -0,0 +1,243 @@
1
+ {
2
+ "rating": {
3
+ "comp-size": {
4
+ "sm": {
5
+ "value": "$core.sizing.9",
6
+ "type": "sizing"
7
+ },
8
+ "md": {
9
+ "value": "$core.sizing.11",
10
+ "type": "sizing"
11
+ },
12
+ "lg": {
13
+ "value": "$core.sizing.14",
14
+ "type": "sizing"
15
+ }
16
+ },
17
+ "chip": {
18
+ "border-radius": {
19
+ "value": "$semantic.border.border-radius.pill",
20
+ "type": "borderRadius"
21
+ },
22
+ "value_text": {
23
+ "font": {
24
+ "sm": {
25
+ "value": "$semantic.font.default.bold.-2h",
26
+ "type": "typography"
27
+ },
28
+ "md": {
29
+ "value": "$semantic.font.default.bold.-1h",
30
+ "type": "typography"
31
+ },
32
+ "lg": {
33
+ "value": "$semantic.font.default.bold.0h",
34
+ "type": "typography"
35
+ },
36
+ "light": {
37
+ "value": "$semantic.ui.color.text.1.light",
38
+ "type": "color"
39
+ },
40
+ "dark": {
41
+ "value": "$semantic.ui.color.text.1.dark",
42
+ "type": "color"
43
+ }
44
+ }
45
+ },
46
+ "count": {
47
+ "font": {
48
+ "sm": {
49
+ "value": {
50
+ "typography": "$core.font.font-size.1",
51
+ "fontWeights": "$core.font.font-weight.medium-italic"
52
+ },
53
+ "type": "composition"
54
+ },
55
+ "md": {
56
+ "value": {
57
+ "typography": "$core.font.font-size.2",
58
+ "fontWeights": "$core.font.font-weight.medium-italic"
59
+ },
60
+ "type": "composition"
61
+ },
62
+ "lg": {
63
+ "value": {
64
+ "typography": "$core.font.font-size.3",
65
+ "fontWeights": "$core.font.font-weight.medium-italic"
66
+ },
67
+ "type": "composition"
68
+ },
69
+ "light": {
70
+ "value": "$semantic.ui.color.text.2.light",
71
+ "type": "color"
72
+ },
73
+ "dark": {
74
+ "value": "$semantic.ui.color.text.2.dark",
75
+ "type": "color"
76
+ }
77
+ }
78
+ },
79
+ "foreground": {
80
+ "light": {
81
+ "value": "$semantic.ui.color.foreground.2.light",
82
+ "type": "color"
83
+ },
84
+ "dark": {
85
+ "value": "$semantic.ui.color.foreground.2.dark",
86
+ "type": "color"
87
+ }
88
+ }
89
+ },
90
+ "star": {
91
+ "comp-size": {
92
+ "sm": {
93
+ "value": "$core.sizing.7",
94
+ "type": "sizing"
95
+ },
96
+ "md": {
97
+ "value": "$core.sizing.9",
98
+ "type": "sizing"
99
+ },
100
+ "lg": {
101
+ "value": "$core.sizing.11",
102
+ "type": "sizing"
103
+ }
104
+ },
105
+ "background": {
106
+ "default": {
107
+ "light": {
108
+ "value": "$semantic.ui.color.border.input.light",
109
+ "type": "color"
110
+ },
111
+ "dark": {
112
+ "value": "$semantic.ui.color.border.input.dark",
113
+ "type": "color"
114
+ }
115
+ },
116
+ "active": {
117
+ "light": {
118
+ "value": "$semantic.ui.color.brand.default.light",
119
+ "type": "color"
120
+ },
121
+ "dark": {
122
+ "value": "$semantic.ui.color.brand.default.dark",
123
+ "type": "color"
124
+ }
125
+ },
126
+ "average": {
127
+ "light": {
128
+ "value": "$semantic.ui.color.warning.default.light",
129
+ "type": "color"
130
+ },
131
+ "dark": {
132
+ "value": "$semantic.ui.color.warning.default.dark",
133
+ "type": "color"
134
+ }
135
+ }
136
+ }
137
+ },
138
+ "star-container": {
139
+ "space-between": {
140
+ "sm": {
141
+ "value": "$core.sizing.1",
142
+ "type": "spacing"
143
+ },
144
+ "md": {
145
+ "value": "$core.sizing.3",
146
+ "type": "spacing"
147
+ },
148
+ "lg": {
149
+ "value": "$core.sizing.5",
150
+ "type": "spacing"
151
+ }
152
+ },
153
+ "space-around": {
154
+ "sm": {
155
+ "value": "$core.sizing.1",
156
+ "type": "spacing"
157
+ },
158
+ "md": {
159
+ "value": "$core.sizing.1",
160
+ "type": "spacing"
161
+ },
162
+ "lg": {
163
+ "value": "$core.sizing.2",
164
+ "type": "spacing"
165
+ }
166
+ }
167
+ },
168
+ "average": {
169
+ "space-between": {
170
+ "sm": {
171
+ "value": "$core.sizing.1",
172
+ "type": "spacing"
173
+ },
174
+ "md": {
175
+ "value": "$core.sizing.3",
176
+ "type": "spacing"
177
+ },
178
+ "lg": {
179
+ "value": "$core.sizing.5",
180
+ "type": "spacing"
181
+ }
182
+ },
183
+ "chip": {
184
+ "space-between": {
185
+ "sm": {
186
+ "value": "$core.sizing.1",
187
+ "type": "spacing"
188
+ },
189
+ "md": {
190
+ "value": "$core.sizing.3",
191
+ "type": "spacing"
192
+ },
193
+ "lg": {
194
+ "value": "$core.sizing.5",
195
+ "type": "spacing"
196
+ }
197
+ },
198
+ "space-arround": {
199
+ "sm": {
200
+ "value": "$core.sizing.3",
201
+ "type": "spacing"
202
+ },
203
+ "md": {
204
+ "value": "$core.sizing.5",
205
+ "type": "spacing"
206
+ },
207
+ "lg": {
208
+ "value": "$core.sizing.7",
209
+ "type": "spacing"
210
+ }
211
+ }
212
+ }
213
+ },
214
+ "space-between": {
215
+ "sm": {
216
+ "value": "$core.spacing.1",
217
+ "type": "spacing"
218
+ },
219
+ "md": {
220
+ "value": "$core.spacing.3",
221
+ "type": "spacing"
222
+ },
223
+ "lg": {
224
+ "value": "$core.spacing.3",
225
+ "type": "spacing"
226
+ }
227
+ },
228
+ "space-around": {
229
+ "sm": {
230
+ "value": "$core.spacing.3",
231
+ "type": "spacing"
232
+ },
233
+ "md": {
234
+ "value": "$core.spacing.5",
235
+ "type": "spacing"
236
+ },
237
+ "lg": {
238
+ "value": "$core.spacing.7",
239
+ "type": "spacing"
240
+ }
241
+ }
242
+ }
243
+ }
package/src/component/scrim.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "scrim": {
3
+ "background": {
4
+ "light": {
5
+ "value": "$semantic.ui.color.foreground.1.light",
6
+ "type": "color"
7
+ },
8
+ "dark": {
9
+ "value": "$semantic.ui.color.foreground.1.dark",
10
+ "type": "color"
11
+ }
12
+ },
13
+ "opacity": {
14
+ "value": "$core.opacity.85",
15
+ "type": "opacity"
16
+ }
17
+ }
18
+ }