@primer/primitives 7.15.4-rc.1e6df86 → 7.15.4-rc.2e212d2

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 (92) hide show
  1. package/dist/js/colors/light.js +1 -1
  2. package/dist/js/colors/light_colorblind.js +1 -1
  3. package/dist/js/colors/light_high_contrast.js +1 -1
  4. package/dist/js/colors/light_tritanopia.js +1 -1
  5. package/dist/json/colors/light.json +1 -1
  6. package/dist/json/colors/light_colorblind.json +1 -1
  7. package/dist/json/colors/light_high_contrast.json +1 -1
  8. package/dist/json/colors/light_tritanopia.json +1 -1
  9. package/dist/scss/colors/_light.scss +1 -1
  10. package/dist/scss/colors/_light_colorblind.scss +1 -1
  11. package/dist/scss/colors/_light_high_contrast.scss +1 -1
  12. package/dist/scss/colors/_light_tritanopia.scss +1 -1
  13. package/dist/ts/colors/light.ts +1 -1
  14. package/dist/ts/colors/light_colorblind.ts +1 -1
  15. package/dist/ts/colors/light_high_contrast.ts +1 -1
  16. package/dist/ts/colors/light_tritanopia.ts +1 -1
  17. package/package.json +1 -1
  18. package/tokens-next-private/css/functional/themes/light-colorblind.css +2 -2
  19. package/tokens-next-private/css/functional/themes/light-high-contrast.css +2 -2
  20. package/tokens-next-private/css/functional/themes/light-tritanopia.css +2 -2
  21. package/tokens-next-private/css/functional/themes/light.css +2 -2
  22. package/tokens-next-private/docs/functional/size/border.json +32 -8
  23. package/tokens-next-private/docs/functional/size/size.json +48 -12
  24. package/tokens-next-private/docs/functional/themes/dark-colorblind.json +448 -112
  25. package/tokens-next-private/docs/functional/themes/dark-dimmed.json +448 -112
  26. package/tokens-next-private/docs/functional/themes/dark-high-contrast.json +448 -112
  27. package/tokens-next-private/docs/functional/themes/dark-tritanopia.json +448 -112
  28. package/tokens-next-private/docs/functional/themes/dark.json +448 -112
  29. package/tokens-next-private/docs/functional/themes/light-colorblind.json +450 -114
  30. package/tokens-next-private/docs/functional/themes/light-high-contrast.json +450 -114
  31. package/tokens-next-private/docs/functional/themes/light-tritanopia.json +450 -114
  32. package/tokens-next-private/docs/functional/themes/light.json +450 -114
  33. package/tokens-next-private/figma/dimension/dimension.json +40 -10
  34. package/tokens-next-private/figma/themes/dark.json +224 -56
  35. package/tokens-next-private/figma/themes/light.json +228 -60
  36. package/tokens-next-private/scss/functional/themes/light-colorblind.scss +1 -1
  37. package/tokens-next-private/scss/functional/themes/light-high-contrast.scss +1 -1
  38. package/tokens-next-private/scss/functional/themes/light-tritanopia.scss +1 -1
  39. package/tokens-next-private/scss/functional/themes/light.scss +1 -1
  40. package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
  41. package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
  42. package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
  43. package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
  44. package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
  45. package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
  46. package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
  47. package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
  48. package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
  49. package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
  50. package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
  51. package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
  52. package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
  53. package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
  54. package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
  55. package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
  56. package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
  57. package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
  58. package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
  59. package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
  60. package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
  61. package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
  62. package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
  63. package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
  64. package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
  65. package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
  66. package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
  67. package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
  68. package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
  69. package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
  70. package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
  71. package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
  72. package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
  73. package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
  74. package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
  75. package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
  76. package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
  77. package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
  78. package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
  79. package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
  80. package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
  81. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  82. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
  83. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  84. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
  85. package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
  86. package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
  87. package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
  88. package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
  89. package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
  90. package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
  91. package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
  92. package/tokens-v2-private/ts/tokens/functional/typography/typography.js +1 -1
package/dist/js/colors/light.js CHANGED
@@ -40,7 +40,7 @@ exports.default = {
40
40
  },
41
41
  "prettylights": {
42
42
  "syntax": {
43
- "comment": "#6e7781",
43
+ "comment": "#57606a",
44
44
  "constant": "#0550ae",
45
45
  "entity": "#6639ba",
46
46
  "storageModifierImport": "#24292f",
package/dist/js/colors/light_colorblind.js CHANGED
@@ -40,7 +40,7 @@ exports.default = {
40
40
  },
41
41
  "prettylights": {
42
42
  "syntax": {
43
- "comment": "#6e7781",
43
+ "comment": "#57606a",
44
44
  "constant": "#0550ae",
45
45
  "entity": "#6639ba",
46
46
  "storageModifierImport": "#24292f",
package/dist/js/colors/light_high_contrast.js CHANGED
@@ -40,7 +40,7 @@ exports.default = {
40
40
  },
41
41
  "prettylights": {
42
42
  "syntax": {
43
- "comment": "#66707b",
43
+ "comment": "#4b535d",
44
44
  "constant": "#023b95",
45
45
  "entity": "#512598",
46
46
  "storageModifierImport": "#0e1116",
package/dist/js/colors/light_tritanopia.js CHANGED
@@ -40,7 +40,7 @@ exports.default = {
40
40
  },
41
41
  "prettylights": {
42
42
  "syntax": {
43
- "comment": "#6e7781",
43
+ "comment": "#57606a",
44
44
  "constant": "#0550ae",
45
45
  "entity": "#6639ba",
46
46
  "storageModifierImport": "#24292f",
package/dist/json/colors/light.json CHANGED
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#6e7781",
41
+ "comment": "#57606a",
42
42
  "constant": "#0550ae",
43
43
  "entity": "#6639ba",
44
44
  "storageModifierImport": "#24292f",
package/dist/json/colors/light_colorblind.json CHANGED
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#6e7781",
41
+ "comment": "#57606a",
42
42
  "constant": "#0550ae",
43
43
  "entity": "#6639ba",
44
44
  "storageModifierImport": "#24292f",
package/dist/json/colors/light_high_contrast.json CHANGED
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#66707b",
41
+ "comment": "#4b535d",
42
42
  "constant": "#023b95",
43
43
  "entity": "#512598",
44
44
  "storageModifierImport": "#0e1116",
package/dist/json/colors/light_tritanopia.json CHANGED
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#6e7781",
41
+ "comment": "#57606a",
42
42
  "constant": "#0550ae",
43
43
  "entity": "#6639ba",
44
44
  "storageModifierImport": "#24292f",
package/dist/scss/colors/_light.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --color-diffstat-addition-border: rgba(31,35,40,0.15);
22
22
  --color-diffstat-addition-bg: #1f883d;
23
23
  --color-search-keyword-hl: #fff8c5;
24
- --color-prettylights-syntax-comment: #6e7781;
24
+ --color-prettylights-syntax-comment: #57606a;
25
25
  --color-prettylights-syntax-constant: #0550ae;
26
26
  --color-prettylights-syntax-entity: #6639ba;
27
27
  --color-prettylights-syntax-storage-modifier-import: #24292f;
package/dist/scss/colors/_light_colorblind.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --color-diffstat-addition-border: rgba(27,31,36,0.15);
22
22
  --color-diffstat-addition-bg: #0969da;
23
23
  --color-search-keyword-hl: #fff8c5;
24
- --color-prettylights-syntax-comment: #6e7781;
24
+ --color-prettylights-syntax-comment: #57606a;
25
25
  --color-prettylights-syntax-constant: #0550ae;
26
26
  --color-prettylights-syntax-entity: #6639ba;
27
27
  --color-prettylights-syntax-storage-modifier-import: #24292f;
package/dist/scss/colors/_light_high_contrast.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --color-diffstat-addition-border: rgba(1,4,9,0.8);
22
22
  --color-diffstat-addition-bg: #055d20;
23
23
  --color-search-keyword-hl: #fcf7be;
24
- --color-prettylights-syntax-comment: #66707b;
24
+ --color-prettylights-syntax-comment: #4b535d;
25
25
  --color-prettylights-syntax-constant: #023b95;
26
26
  --color-prettylights-syntax-entity: #512598;
27
27
  --color-prettylights-syntax-storage-modifier-import: #0e1116;
package/dist/scss/colors/_light_tritanopia.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --color-diffstat-addition-border: rgba(27,31,36,0.15);
22
22
  --color-diffstat-addition-bg: #0969da;
23
23
  --color-search-keyword-hl: #fff8c5;
24
- --color-prettylights-syntax-comment: #6e7781;
24
+ --color-prettylights-syntax-comment: #57606a;
25
25
  --color-prettylights-syntax-constant: #0550ae;
26
26
  --color-prettylights-syntax-entity: #6639ba;
27
27
  --color-prettylights-syntax-storage-modifier-import: #24292f;
package/dist/ts/colors/light.ts CHANGED
@@ -38,7 +38,7 @@ export default {
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#6e7781",
41
+ "comment": "#57606a",
42
42
  "constant": "#0550ae",
43
43
  "entity": "#6639ba",
44
44
  "storageModifierImport": "#24292f",
package/dist/ts/colors/light_colorblind.ts CHANGED
@@ -38,7 +38,7 @@ export default {
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#6e7781",
41
+ "comment": "#57606a",
42
42
  "constant": "#0550ae",
43
43
  "entity": "#6639ba",
44
44
  "storageModifierImport": "#24292f",
package/dist/ts/colors/light_high_contrast.ts CHANGED
@@ -38,7 +38,7 @@ export default {
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#66707b",
41
+ "comment": "#4b535d",
42
42
  "constant": "#023b95",
43
43
  "entity": "#512598",
44
44
  "storageModifierImport": "#0e1116",
package/dist/ts/colors/light_tritanopia.ts CHANGED
@@ -38,7 +38,7 @@ export default {
38
38
  },
39
39
  "prettylights": {
40
40
  "syntax": {
41
- "comment": "#6e7781",
41
+ "comment": "#57606a",
42
42
  "constant": "#0550ae",
43
43
  "entity": "#6639ba",
44
44
  "storageModifierImport": "#24292f",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "7.15.4-rc.1e6df86",
3
+ "version": "7.15.4-rc.2e212d2",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
package/tokens-next-private/css/functional/themes/light-colorblind.css CHANGED
@@ -286,7 +286,7 @@
286
286
  --color-ansi-magenta-bright: #a475f9;
287
287
  --color-ansi-cyan: #1b7c83;
288
288
  --color-ansi-cyan-bright: #3192aa;
289
- --color-prettylights-syntax-comment: #6e7781;
289
+ --color-prettylights-syntax-comment: #57606a;
290
290
  --color-prettylights-syntax-constant: #0550ae;
291
291
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
292
292
  --color-prettylights-syntax-entity: #6639ba;
@@ -706,7 +706,7 @@
706
706
  --color-ansi-magenta-bright: #a475f9;
707
707
  --color-ansi-cyan: #1b7c83;
708
708
  --color-ansi-cyan-bright: #3192aa;
709
- --color-prettylights-syntax-comment: #6e7781;
709
+ --color-prettylights-syntax-comment: #57606a;
710
710
  --color-prettylights-syntax-constant: #0550ae;
711
711
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
712
712
  --color-prettylights-syntax-entity: #6639ba;
package/tokens-next-private/css/functional/themes/light-high-contrast.css CHANGED
@@ -286,7 +286,7 @@
286
286
  --color-ansi-magenta-bright: #844ae7;
287
287
  --color-ansi-cyan: #1b7c83;
288
288
  --color-ansi-cyan-bright: #3192aa;
289
- --color-prettylights-syntax-comment: #66707b;
289
+ --color-prettylights-syntax-comment: #4b535d;
290
290
  --color-prettylights-syntax-constant: #023b95;
291
291
  --color-prettylights-syntax-constant-other-reference-link: #032563;
292
292
  --color-prettylights-syntax-entity: #512598;
@@ -706,7 +706,7 @@
706
706
  --color-ansi-magenta-bright: #844ae7;
707
707
  --color-ansi-cyan: #1b7c83;
708
708
  --color-ansi-cyan-bright: #3192aa;
709
- --color-prettylights-syntax-comment: #66707b;
709
+ --color-prettylights-syntax-comment: #4b535d;
710
710
  --color-prettylights-syntax-constant: #023b95;
711
711
  --color-prettylights-syntax-constant-other-reference-link: #032563;
712
712
  --color-prettylights-syntax-entity: #512598;
package/tokens-next-private/css/functional/themes/light-tritanopia.css CHANGED
@@ -286,7 +286,7 @@
286
286
  --color-ansi-magenta-bright: #a475f9;
287
287
  --color-ansi-cyan: #1b7c83;
288
288
  --color-ansi-cyan-bright: #3192aa;
289
- --color-prettylights-syntax-comment: #6e7781;
289
+ --color-prettylights-syntax-comment: #57606a;
290
290
  --color-prettylights-syntax-constant: #0550ae;
291
291
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
292
292
  --color-prettylights-syntax-entity: #6639ba;
@@ -706,7 +706,7 @@
706
706
  --color-ansi-magenta-bright: #a475f9;
707
707
  --color-ansi-cyan: #1b7c83;
708
708
  --color-ansi-cyan-bright: #3192aa;
709
- --color-prettylights-syntax-comment: #6e7781;
709
+ --color-prettylights-syntax-comment: #57606a;
710
710
  --color-prettylights-syntax-constant: #0550ae;
711
711
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
712
712
  --color-prettylights-syntax-entity: #6639ba;
package/tokens-next-private/css/functional/themes/light.css CHANGED
@@ -286,7 +286,7 @@
286
286
  --color-ansi-magenta-bright: #a475f9;
287
287
  --color-ansi-cyan: #1b7c83;
288
288
  --color-ansi-cyan-bright: #3192aa;
289
- --color-prettylights-syntax-comment: #6e7781;
289
+ --color-prettylights-syntax-comment: #57606a;
290
290
  --color-prettylights-syntax-constant: #0550ae;
291
291
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
292
292
  --color-prettylights-syntax-entity: #6639ba;
@@ -706,7 +706,7 @@
706
706
  --color-ansi-magenta-bright: #a475f9;
707
707
  --color-ansi-cyan: #1b7c83;
708
708
  --color-ansi-cyan-bright: #3192aa;
709
- --color-prettylights-syntax-comment: #6e7781;
709
+ --color-prettylights-syntax-comment: #57606a;
710
710
  --color-prettylights-syntax-constant: #0550ae;
711
711
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
712
712
  --color-prettylights-syntax-entity: #6639ba;
package/tokens-next-private/docs/functional/size/border.json CHANGED
@@ -85,7 +85,10 @@
85
85
  "$extensions": {
86
86
  "org.primer.figma": {
87
87
  "collection": "functional/size",
88
- "scopes": ["radius"]
88
+ "scopes": ["radius"],
89
+ "codeSyntax": {
90
+ "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
91
+ }
89
92
  }
90
93
  },
91
94
  "filePath": "src/tokens/functional/size/border.json",
@@ -96,7 +99,10 @@
96
99
  "$extensions": {
97
100
  "org.primer.figma": {
98
101
  "collection": "functional/size",
99
- "scopes": ["radius"]
102
+ "scopes": ["radius"],
103
+ "codeSyntax": {
104
+ "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
105
+ }
100
106
  }
101
107
  }
102
108
  },
@@ -110,7 +116,10 @@
110
116
  "$extensions": {
111
117
  "org.primer.figma": {
112
118
  "collection": "functional/size",
113
- "scopes": ["radius"]
119
+ "scopes": ["radius"],
120
+ "codeSyntax": {
121
+ "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
122
+ }
114
123
  }
115
124
  },
116
125
  "filePath": "src/tokens/functional/size/border.json",
@@ -121,7 +130,10 @@
121
130
  "$extensions": {
122
131
  "org.primer.figma": {
123
132
  "collection": "functional/size",
124
- "scopes": ["radius"]
133
+ "scopes": ["radius"],
134
+ "codeSyntax": {
135
+ "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
136
+ }
125
137
  }
126
138
  }
127
139
  },
@@ -135,7 +147,10 @@
135
147
  "$extensions": {
136
148
  "org.primer.figma": {
137
149
  "collection": "functional/size",
138
- "scopes": ["radius"]
150
+ "scopes": ["radius"],
151
+ "codeSyntax": {
152
+ "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
153
+ }
139
154
  }
140
155
  },
141
156
  "filePath": "src/tokens/functional/size/border.json",
@@ -146,7 +161,10 @@
146
161
  "$extensions": {
147
162
  "org.primer.figma": {
148
163
  "collection": "functional/size",
149
- "scopes": ["radius"]
164
+ "scopes": ["radius"],
165
+ "codeSyntax": {
166
+ "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
167
+ }
150
168
  }
151
169
  }
152
170
  },
@@ -161,7 +179,10 @@
161
179
  "$extensions": {
162
180
  "org.primer.figma": {
163
181
  "collection": "functional/size",
164
- "scopes": ["radius"]
182
+ "scopes": ["radius"],
183
+ "codeSyntax": {
184
+ "web": "var(--borderRadius-full) /* utility class: .circle */"
185
+ }
165
186
  }
166
187
  },
167
188
  "filePath": "src/tokens/functional/size/border.json",
@@ -173,7 +194,10 @@
173
194
  "$extensions": {
174
195
  "org.primer.figma": {
175
196
  "collection": "functional/size",
176
- "scopes": ["radius"]
197
+ "scopes": ["radius"],
198
+ "codeSyntax": {
199
+ "web": "var(--borderRadius-full) /* utility class: .circle */"
200
+ }
177
201
  }
178
202
  }
179
203
  },
package/tokens-next-private/docs/functional/size/size.json CHANGED
@@ -1268,8 +1268,11 @@
1268
1268
  "$extensions": {
1269
1269
  "org.primer.figma": {
1270
1270
  "collection": "pattern/size",
1271
+ "scopes": ["gap"],
1271
1272
  "group": "component",
1272
- "scopes": ["gap"]
1273
+ "codeSyntax": {
1274
+ "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
1275
+ }
1273
1276
  }
1274
1277
  },
1275
1278
  "filePath": "src/tokens/functional/size/size.json",
@@ -1280,8 +1283,11 @@
1280
1283
  "$extensions": {
1281
1284
  "org.primer.figma": {
1282
1285
  "collection": "pattern/size",
1286
+ "scopes": ["gap"],
1283
1287
  "group": "component",
1284
- "scopes": ["gap"]
1288
+ "codeSyntax": {
1289
+ "web": "var(--stack-padding-condensed) /* utility class: .p-2 */"
1290
+ }
1285
1291
  }
1286
1292
  }
1287
1293
  },
@@ -1296,7 +1302,10 @@
1296
1302
  "org.primer.figma": {
1297
1303
  "collection": "pattern/size",
1298
1304
  "group": "component",
1299
- "scopes": ["gap"]
1305
+ "scopes": ["gap"],
1306
+ "codeSyntax": {
1307
+ "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
1308
+ }
1300
1309
  }
1301
1310
  },
1302
1311
  "filePath": "src/tokens/functional/size/size.json",
@@ -1308,7 +1317,10 @@
1308
1317
  "org.primer.figma": {
1309
1318
  "collection": "pattern/size",
1310
1319
  "group": "component",
1311
- "scopes": ["gap"]
1320
+ "scopes": ["gap"],
1321
+ "codeSyntax": {
1322
+ "web": "var(--stack-padding-normal) /* utility class: .p-3 */"
1323
+ }
1312
1324
  }
1313
1325
  }
1314
1326
  },
@@ -1323,7 +1335,10 @@
1323
1335
  "org.primer.figma": {
1324
1336
  "collection": "pattern/size",
1325
1337
  "group": "component",
1326
- "scopes": ["gap"]
1338
+ "scopes": ["gap"],
1339
+ "codeSyntax": {
1340
+ "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
1341
+ }
1327
1342
  }
1328
1343
  },
1329
1344
  "filePath": "src/tokens/functional/size/size.json",
@@ -1335,7 +1350,10 @@
1335
1350
  "org.primer.figma": {
1336
1351
  "collection": "pattern/size",
1337
1352
  "group": "component",
1338
- "scopes": ["gap"]
1353
+ "scopes": ["gap"],
1354
+ "codeSyntax": {
1355
+ "web": "var(--stack-padding-spacious) /* utility class: .p-4 */"
1356
+ }
1339
1357
  }
1340
1358
  }
1341
1359
  },
@@ -1350,7 +1368,10 @@
1350
1368
  "org.primer.figma": {
1351
1369
  "collection": "pattern/size",
1352
1370
  "group": "component",
1353
- "scopes": ["gap"]
1371
+ "scopes": ["gap"],
1372
+ "codeSyntax": {
1373
+ "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
1374
+ }
1354
1375
  }
1355
1376
  },
1356
1377
  "filePath": "src/tokens/functional/size/size.json",
@@ -1362,7 +1383,10 @@
1362
1383
  "org.primer.figma": {
1363
1384
  "collection": "pattern/size",
1364
1385
  "group": "component",
1365
- "scopes": ["gap"]
1386
+ "scopes": ["gap"],
1387
+ "codeSyntax": {
1388
+ "web": "var(--stack-gap-condensed) /* utility class: .gap-2 */"
1389
+ }
1366
1390
  }
1367
1391
  }
1368
1392
  },
@@ -1377,7 +1401,10 @@
1377
1401
  "org.primer.figma": {
1378
1402
  "collection": "pattern/size",
1379
1403
  "group": "component",
1380
- "scopes": ["gap"]
1404
+ "scopes": ["gap"],
1405
+ "codeSyntax": {
1406
+ "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
1407
+ }
1381
1408
  }
1382
1409
  },
1383
1410
  "filePath": "src/tokens/functional/size/size.json",
@@ -1389,7 +1416,10 @@
1389
1416
  "org.primer.figma": {
1390
1417
  "collection": "pattern/size",
1391
1418
  "group": "component",
1392
- "scopes": ["gap"]
1419
+ "scopes": ["gap"],
1420
+ "codeSyntax": {
1421
+ "web": "var(--stack-gap-normal) /* utility class: .gap-3 */"
1422
+ }
1393
1423
  }
1394
1424
  }
1395
1425
  },
@@ -1404,7 +1434,10 @@
1404
1434
  "org.primer.figma": {
1405
1435
  "collection": "pattern/size",
1406
1436
  "group": "component",
1407
- "scopes": ["gap"]
1437
+ "scopes": ["gap"],
1438
+ "codeSyntax": {
1439
+ "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
1440
+ }
1408
1441
  }
1409
1442
  },
1410
1443
  "filePath": "src/tokens/functional/size/size.json",
@@ -1416,7 +1449,10 @@
1416
1449
  "org.primer.figma": {
1417
1450
  "collection": "pattern/size",
1418
1451
  "group": "component",
1419
- "scopes": ["gap"]
1452
+ "scopes": ["gap"],
1453
+ "codeSyntax": {
1454
+ "web": "var(--stack-gap-spacious) /* utility class: .gap-4 */"
1455
+ }
1420
1456
  }
1421
1457
  }
1422
1458
  },