@primer/primitives 11.8.0-rc.fe40f878 → 11.8.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.
- package/DESIGN_TOKENS_SPEC.md +32 -0
- package/README.md +5 -0
- package/dist/css/functional/spacing/space.css +8 -0
- package/dist/css/primitives.css +1 -0
- package/dist/docs/functional/spacing/space.json +224 -0
- package/dist/fallbacks/functional/spacing/space.json +8 -0
- package/dist/figma/figma.json +6 -6
- package/dist/figma/scales/dark-dimmed.json +629 -629
- package/dist/figma/scales/dark-high-constrast.json +628 -628
- package/dist/figma/scales/light-high-constrast.json +626 -626
- package/dist/styleLint/functional/spacing/space.json +224 -0
- package/package.json +5 -3
- package/src/tokens/functional/spacing/space.json5 +94 -0
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space-lg": {
|
|
3
|
+
"key": "{space.lg}",
|
|
4
|
+
"$value": ["1rem", "16px"],
|
|
5
|
+
"$type": "dimension",
|
|
6
|
+
"$description": "Spacious spacing for major layout divisions and visual separation between content blocks.",
|
|
7
|
+
"$extensions": {
|
|
8
|
+
"org.primer.llm": {
|
|
9
|
+
"usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
|
|
10
|
+
"rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
|
|
11
|
+
},
|
|
12
|
+
"org.primer.figma": {
|
|
13
|
+
"collection": "functional/size",
|
|
14
|
+
"scopes": ["gap"]
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
18
|
+
"isSource": true,
|
|
19
|
+
"original": {
|
|
20
|
+
"$value": "{base.size.16}",
|
|
21
|
+
"$type": "dimension",
|
|
22
|
+
"$description": "Spacious spacing for major layout divisions and visual separation between content blocks.",
|
|
23
|
+
"$extensions": {
|
|
24
|
+
"org.primer.llm": {
|
|
25
|
+
"usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
|
|
26
|
+
"rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
|
|
27
|
+
},
|
|
28
|
+
"org.primer.figma": {
|
|
29
|
+
"collection": "functional/size",
|
|
30
|
+
"scopes": ["gap"]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"key": "{space.lg}"
|
|
34
|
+
},
|
|
35
|
+
"name": "space-lg",
|
|
36
|
+
"attributes": {},
|
|
37
|
+
"path": ["space", "lg"]
|
|
38
|
+
},
|
|
39
|
+
"space-md": {
|
|
40
|
+
"key": "{space.md}",
|
|
41
|
+
"$value": ["0.75rem", "12px"],
|
|
42
|
+
"$type": "dimension",
|
|
43
|
+
"$description": "Relaxed spacing for breathing room and comfortable internal container space.",
|
|
44
|
+
"$extensions": {
|
|
45
|
+
"org.primer.llm": {
|
|
46
|
+
"usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
|
|
47
|
+
"rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
|
|
48
|
+
},
|
|
49
|
+
"org.primer.figma": {
|
|
50
|
+
"collection": "functional/size",
|
|
51
|
+
"scopes": ["gap"]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
55
|
+
"isSource": true,
|
|
56
|
+
"original": {
|
|
57
|
+
"$value": "{base.size.12}",
|
|
58
|
+
"$type": "dimension",
|
|
59
|
+
"$description": "Relaxed spacing for breathing room and comfortable internal container space.",
|
|
60
|
+
"$extensions": {
|
|
61
|
+
"org.primer.llm": {
|
|
62
|
+
"usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
|
|
63
|
+
"rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
|
|
64
|
+
},
|
|
65
|
+
"org.primer.figma": {
|
|
66
|
+
"collection": "functional/size",
|
|
67
|
+
"scopes": ["gap"]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
"key": "{space.md}"
|
|
71
|
+
},
|
|
72
|
+
"name": "space-md",
|
|
73
|
+
"attributes": {},
|
|
74
|
+
"path": ["space", "md"]
|
|
75
|
+
},
|
|
76
|
+
"space-sm": {
|
|
77
|
+
"key": "{space.sm}",
|
|
78
|
+
"$value": ["0.5rem", "8px"],
|
|
79
|
+
"$type": "dimension",
|
|
80
|
+
"$description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts.",
|
|
81
|
+
"$extensions": {
|
|
82
|
+
"org.primer.llm": {
|
|
83
|
+
"usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
|
|
84
|
+
"rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
|
|
85
|
+
},
|
|
86
|
+
"org.primer.figma": {
|
|
87
|
+
"collection": "functional/size",
|
|
88
|
+
"scopes": ["gap"]
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
92
|
+
"isSource": true,
|
|
93
|
+
"original": {
|
|
94
|
+
"$value": "{base.size.8}",
|
|
95
|
+
"$type": "dimension",
|
|
96
|
+
"$description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts.",
|
|
97
|
+
"$extensions": {
|
|
98
|
+
"org.primer.llm": {
|
|
99
|
+
"usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
|
|
100
|
+
"rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
|
|
101
|
+
},
|
|
102
|
+
"org.primer.figma": {
|
|
103
|
+
"collection": "functional/size",
|
|
104
|
+
"scopes": ["gap"]
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
"key": "{space.sm}"
|
|
108
|
+
},
|
|
109
|
+
"name": "space-sm",
|
|
110
|
+
"attributes": {},
|
|
111
|
+
"path": ["space", "sm"]
|
|
112
|
+
},
|
|
113
|
+
"space-xl": {
|
|
114
|
+
"key": "{space.xl}",
|
|
115
|
+
"$value": ["1.5rem", "24px"],
|
|
116
|
+
"$type": "dimension",
|
|
117
|
+
"$description": "Expansive spacing for large sections and top-level structure separation.",
|
|
118
|
+
"$extensions": {
|
|
119
|
+
"org.primer.llm": {
|
|
120
|
+
"usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
|
|
121
|
+
"rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
|
|
122
|
+
},
|
|
123
|
+
"org.primer.figma": {
|
|
124
|
+
"collection": "functional/size",
|
|
125
|
+
"scopes": ["gap"]
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
129
|
+
"isSource": true,
|
|
130
|
+
"original": {
|
|
131
|
+
"$value": "{base.size.24}",
|
|
132
|
+
"$type": "dimension",
|
|
133
|
+
"$description": "Expansive spacing for large sections and top-level structure separation.",
|
|
134
|
+
"$extensions": {
|
|
135
|
+
"org.primer.llm": {
|
|
136
|
+
"usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
|
|
137
|
+
"rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
|
|
138
|
+
},
|
|
139
|
+
"org.primer.figma": {
|
|
140
|
+
"collection": "functional/size",
|
|
141
|
+
"scopes": ["gap"]
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
"key": "{space.xl}"
|
|
145
|
+
},
|
|
146
|
+
"name": "space-xl",
|
|
147
|
+
"attributes": {},
|
|
148
|
+
"path": ["space", "xl"]
|
|
149
|
+
},
|
|
150
|
+
"space-xs": {
|
|
151
|
+
"key": "{space.xs}",
|
|
152
|
+
"$value": ["0.25rem", "4px"],
|
|
153
|
+
"$type": "dimension",
|
|
154
|
+
"$description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room.",
|
|
155
|
+
"$extensions": {
|
|
156
|
+
"org.primer.llm": {
|
|
157
|
+
"usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
|
|
158
|
+
"rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
|
|
159
|
+
},
|
|
160
|
+
"org.primer.figma": {
|
|
161
|
+
"collection": "functional/size",
|
|
162
|
+
"scopes": ["gap"]
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
166
|
+
"isSource": true,
|
|
167
|
+
"original": {
|
|
168
|
+
"$value": "{base.size.4}",
|
|
169
|
+
"$type": "dimension",
|
|
170
|
+
"$description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room.",
|
|
171
|
+
"$extensions": {
|
|
172
|
+
"org.primer.llm": {
|
|
173
|
+
"usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
|
|
174
|
+
"rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
|
|
175
|
+
},
|
|
176
|
+
"org.primer.figma": {
|
|
177
|
+
"collection": "functional/size",
|
|
178
|
+
"scopes": ["gap"]
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
"key": "{space.xs}"
|
|
182
|
+
},
|
|
183
|
+
"name": "space-xs",
|
|
184
|
+
"attributes": {},
|
|
185
|
+
"path": ["space", "xs"]
|
|
186
|
+
},
|
|
187
|
+
"space-xxs": {
|
|
188
|
+
"key": "{space.xxs}",
|
|
189
|
+
"$value": ["0.125rem", "2px"],
|
|
190
|
+
"$type": "dimension",
|
|
191
|
+
"$description": "Ultra-compact spacing for form field separators and tight visual divisions.",
|
|
192
|
+
"$extensions": {
|
|
193
|
+
"org.primer.llm": {
|
|
194
|
+
"usage": ["gap", "padding", "margin", "form-separators"],
|
|
195
|
+
"rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
|
|
196
|
+
},
|
|
197
|
+
"org.primer.figma": {
|
|
198
|
+
"collection": "functional/size",
|
|
199
|
+
"scopes": ["gap"]
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
203
|
+
"isSource": true,
|
|
204
|
+
"original": {
|
|
205
|
+
"$value": "{base.size.2}",
|
|
206
|
+
"$type": "dimension",
|
|
207
|
+
"$description": "Ultra-compact spacing for form field separators and tight visual divisions.",
|
|
208
|
+
"$extensions": {
|
|
209
|
+
"org.primer.llm": {
|
|
210
|
+
"usage": ["gap", "padding", "margin", "form-separators"],
|
|
211
|
+
"rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
|
|
212
|
+
},
|
|
213
|
+
"org.primer.figma": {
|
|
214
|
+
"collection": "functional/size",
|
|
215
|
+
"scopes": ["gap"]
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
"key": "{space.xxs}"
|
|
219
|
+
},
|
|
220
|
+
"name": "space-xxs",
|
|
221
|
+
"attributes": {},
|
|
222
|
+
"path": ["space", "xxs"]
|
|
223
|
+
}
|
|
224
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/primitives",
|
|
3
|
-
"version": "11.8.0
|
|
3
|
+
"version": "11.8.0",
|
|
4
4
|
"description": "Typography, spacing, and color primitives for Primer design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config eslint.config.mjs && npm run lint:tokens",
|
|
40
40
|
"lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config eslint.config.mjs",
|
|
41
41
|
"lint:tokens": "tsx scripts/validateTokenJson.ts",
|
|
42
|
+
"check:removed-tokens": "tsx scripts/checkRemovedTokens.ts",
|
|
42
43
|
"test": "npm run test:unit && npm run test:integration",
|
|
43
44
|
"test:unit": "vitest run --coverage",
|
|
44
45
|
"test:integration": "vitest run -r integration",
|
|
@@ -46,7 +47,8 @@
|
|
|
46
47
|
"prepack": "npm run build",
|
|
47
48
|
"release": "changeset publish",
|
|
48
49
|
"storybook": "npm run build:tokens && cd docs/storybook && npm run storybook",
|
|
49
|
-
"storybook:install": "cd docs/storybook && npm ci --
|
|
50
|
+
"storybook:install": "cd docs/storybook && npm ci --no-audit --no-fund",
|
|
51
|
+
"postinstall": "npm run storybook:install"
|
|
50
52
|
},
|
|
51
53
|
"prettier": "@github/prettier-config",
|
|
52
54
|
"devDependencies": {
|
|
@@ -82,4 +84,4 @@
|
|
|
82
84
|
"zod-validation-error": "^4.0.1",
|
|
83
85
|
"colorjs.io": "^0.6.1"
|
|
84
86
|
}
|
|
85
|
-
}
|
|
87
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{
|
|
2
|
+
space: {
|
|
3
|
+
xxs: {
|
|
4
|
+
$value: '{base.size.2}',
|
|
5
|
+
$type: 'dimension',
|
|
6
|
+
$description: 'Ultra-compact spacing for form field separators and tight visual divisions.',
|
|
7
|
+
$extensions: {
|
|
8
|
+
'org.primer.llm': {
|
|
9
|
+
usage: ['gap', 'padding', 'margin', 'form-separators'],
|
|
10
|
+
rules: 'Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements.',
|
|
11
|
+
},
|
|
12
|
+
'org.primer.figma': {
|
|
13
|
+
collection: 'functional/size',
|
|
14
|
+
scopes: ['gap'],
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
xs: {
|
|
19
|
+
$value: '{base.size.4}',
|
|
20
|
+
$type: 'dimension',
|
|
21
|
+
$description: 'Compact spacing for small badges, tight internal spacing, and minimal breathing room.',
|
|
22
|
+
$extensions: {
|
|
23
|
+
'org.primer.llm': {
|
|
24
|
+
usage: ['gap', 'padding', 'margin', 'badge-spacing', 'list-items'],
|
|
25
|
+
rules: 'Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins.',
|
|
26
|
+
},
|
|
27
|
+
'org.primer.figma': {
|
|
28
|
+
collection: 'functional/size',
|
|
29
|
+
scopes: ['gap'],
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
sm: {
|
|
34
|
+
$value: '{base.size.8}',
|
|
35
|
+
$type: 'dimension',
|
|
36
|
+
$description: 'Default spacing for most UI elements. Comfortable visual density for standard component layouts.',
|
|
37
|
+
$extensions: {
|
|
38
|
+
'org.primer.llm': {
|
|
39
|
+
usage: ['gap', 'padding', 'margin', 'flex-gap', 'grid-gap', 'card-padding'],
|
|
40
|
+
rules: 'Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins.',
|
|
41
|
+
},
|
|
42
|
+
'org.primer.figma': {
|
|
43
|
+
collection: 'functional/size',
|
|
44
|
+
scopes: ['gap'],
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
md: {
|
|
49
|
+
$value: '{base.size.12}',
|
|
50
|
+
$type: 'dimension',
|
|
51
|
+
$description: 'Relaxed spacing for breathing room and comfortable internal container space.',
|
|
52
|
+
$extensions: {
|
|
53
|
+
'org.primer.llm': {
|
|
54
|
+
usage: ['gap', 'padding', 'margin', 'panel-padding', 'section-separation'],
|
|
55
|
+
rules: 'Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts.',
|
|
56
|
+
},
|
|
57
|
+
'org.primer.figma': {
|
|
58
|
+
collection: 'functional/size',
|
|
59
|
+
scopes: ['gap'],
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
lg: {
|
|
64
|
+
$value: '{base.size.16}',
|
|
65
|
+
$type: 'dimension',
|
|
66
|
+
$description: 'Spacious spacing for major layout divisions and visual separation between content blocks.',
|
|
67
|
+
$extensions: {
|
|
68
|
+
'org.primer.llm': {
|
|
69
|
+
usage: ['gap', 'padding', 'margin', 'section-gap', 'container-margin'],
|
|
70
|
+
rules: 'Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins.',
|
|
71
|
+
},
|
|
72
|
+
'org.primer.figma': {
|
|
73
|
+
collection: 'functional/size',
|
|
74
|
+
scopes: ['gap'],
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
xl: {
|
|
79
|
+
$value: '{base.size.24}',
|
|
80
|
+
$type: 'dimension',
|
|
81
|
+
$description: 'Expansive spacing for large sections and top-level structure separation.',
|
|
82
|
+
$extensions: {
|
|
83
|
+
'org.primer.llm': {
|
|
84
|
+
usage: ['gap', 'padding', 'margin', 'page-sections', 'major-divisions'],
|
|
85
|
+
rules: 'Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room.',
|
|
86
|
+
},
|
|
87
|
+
'org.primer.figma': {
|
|
88
|
+
collection: 'functional/size',
|
|
89
|
+
scopes: ['gap'],
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
}
|