@primer/primitives 11.8.0-rc.e33d7558 → 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/styleLint/functional/spacing/space.json +224 -0
- package/package.json +4 -3
- package/src/tokens/functional/spacing/space.json5 +94 -0
package/DESIGN_TOKENS_SPEC.md
CHANGED
|
@@ -568,6 +568,38 @@ Extra small resting shadow for minimal elevation
|
|
|
568
568
|
**U:** badge, chip, small-card
|
|
569
569
|
**R:** Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance.
|
|
570
570
|
|
|
571
|
+
## Space
|
|
572
|
+
|
|
573
|
+
### space-lg
|
|
574
|
+
Spacious spacing for major layout divisions and visual separation between content blocks.
|
|
575
|
+
**U:** gap, margin, padding
|
|
576
|
+
**R:** Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins.
|
|
577
|
+
|
|
578
|
+
### space-md
|
|
579
|
+
Relaxed spacing for breathing room and comfortable internal container space.
|
|
580
|
+
**U:** gap, margin, padding
|
|
581
|
+
**R:** Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts.
|
|
582
|
+
|
|
583
|
+
### space-sm
|
|
584
|
+
Default spacing for most UI elements. Comfortable visual density for standard component layouts.
|
|
585
|
+
**U:** gap, margin, padding
|
|
586
|
+
**R:** Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins.
|
|
587
|
+
|
|
588
|
+
### space-xl
|
|
589
|
+
Expansive spacing for large sections and top-level structure separation.
|
|
590
|
+
**U:** gap, margin, padding
|
|
591
|
+
**R:** Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room.
|
|
592
|
+
|
|
593
|
+
### space-xs
|
|
594
|
+
Compact spacing for small badges, tight internal spacing, and minimal breathing room.
|
|
595
|
+
**U:** gap, margin, padding
|
|
596
|
+
**R:** Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins.
|
|
597
|
+
|
|
598
|
+
### space-xxs
|
|
599
|
+
Ultra-compact spacing for form field separators and tight visual divisions.
|
|
600
|
+
**U:** gap, margin, padding
|
|
601
|
+
**R:** Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements.
|
|
602
|
+
|
|
571
603
|
## Spinner
|
|
572
604
|
|
|
573
605
|
Loading spinner size and stroke tokens.
|
package/README.md
CHANGED
|
@@ -40,6 +40,9 @@ All available imports:
|
|
|
40
40
|
/* motion */
|
|
41
41
|
@import '@primer/primitives/dist/css/base/motion/motion.css';
|
|
42
42
|
|
|
43
|
+
/* spacing */
|
|
44
|
+
@import '@primer/primitives/dist/css/functional/spacing/space.css';
|
|
45
|
+
|
|
43
46
|
/* color */
|
|
44
47
|
@import '@primer/primitives/dist/css/functional/themes/light.css';
|
|
45
48
|
@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
|
|
@@ -53,6 +56,8 @@ All available imports:
|
|
|
53
56
|
```
|
|
54
57
|
|
|
55
58
|
> **Note:** Motion CSS imports are required for components with animations, such as `Spinner` from `@primer/react`. If you're experiencing issues with animated components appearing static, ensure you've imported the motion CSS files.
|
|
59
|
+
>
|
|
60
|
+
> **Note:** Spacing tokens provide a unified semantic scale for `gap`, `padding`, and `margin`. Import `functional/spacing/space.css` to use `--space-*` tokens in your components.
|
|
56
61
|
|
|
57
62
|
## Design token data
|
|
58
63
|
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--space-lg: 1rem; /** Spacious spacing for major layout divisions and visual separation between content blocks. */
|
|
3
|
+
--space-md: 0.75rem; /** Relaxed spacing for breathing room and comfortable internal container space. */
|
|
4
|
+
--space-sm: 0.5rem; /** Default spacing for most UI elements. Comfortable visual density for standard component layouts. */
|
|
5
|
+
--space-xl: 1.5rem; /** Expansive spacing for large sections and top-level structure separation. */
|
|
6
|
+
--space-xs: 0.25rem; /** Compact spacing for small badges, tight internal spacing, and minimal breathing room. */
|
|
7
|
+
--space-xxs: 0.125rem; /** Ultra-compact spacing for form field separators and tight visual divisions. */
|
|
8
|
+
}
|
package/dist/css/primitives.css
CHANGED
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space-lg": {
|
|
3
|
+
"key": "{space.lg}",
|
|
4
|
+
"$extensions": {
|
|
5
|
+
"org.primer.llm": {
|
|
6
|
+
"usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
|
|
7
|
+
"rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
|
|
8
|
+
},
|
|
9
|
+
"org.primer.figma": {
|
|
10
|
+
"collection": "functional/size",
|
|
11
|
+
"scopes": ["gap"]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
15
|
+
"isSource": true,
|
|
16
|
+
"original": {
|
|
17
|
+
"$value": "{base.size.16}",
|
|
18
|
+
"$type": "dimension",
|
|
19
|
+
"$description": "Spacious spacing for major layout divisions and visual separation between content blocks.",
|
|
20
|
+
"$extensions": {
|
|
21
|
+
"org.primer.llm": {
|
|
22
|
+
"usage": ["gap", "padding", "margin", "section-gap", "container-margin"],
|
|
23
|
+
"rules": "Spacious (16px). Use for major layout divisions, visual separation between content blocks, and primary container margins."
|
|
24
|
+
},
|
|
25
|
+
"org.primer.figma": {
|
|
26
|
+
"collection": "functional/size",
|
|
27
|
+
"scopes": ["gap"]
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"key": "{space.lg}"
|
|
31
|
+
},
|
|
32
|
+
"name": "space-lg",
|
|
33
|
+
"attributes": {},
|
|
34
|
+
"path": ["space", "lg"],
|
|
35
|
+
"value": "1rem",
|
|
36
|
+
"type": "dimension",
|
|
37
|
+
"description": "Spacious spacing for major layout divisions and visual separation between content blocks."
|
|
38
|
+
},
|
|
39
|
+
"space-md": {
|
|
40
|
+
"key": "{space.md}",
|
|
41
|
+
"$extensions": {
|
|
42
|
+
"org.primer.llm": {
|
|
43
|
+
"usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
|
|
44
|
+
"rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
|
|
45
|
+
},
|
|
46
|
+
"org.primer.figma": {
|
|
47
|
+
"collection": "functional/size",
|
|
48
|
+
"scopes": ["gap"]
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
52
|
+
"isSource": true,
|
|
53
|
+
"original": {
|
|
54
|
+
"$value": "{base.size.12}",
|
|
55
|
+
"$type": "dimension",
|
|
56
|
+
"$description": "Relaxed spacing for breathing room and comfortable internal container space.",
|
|
57
|
+
"$extensions": {
|
|
58
|
+
"org.primer.llm": {
|
|
59
|
+
"usage": ["gap", "padding", "margin", "panel-padding", "section-separation"],
|
|
60
|
+
"rules": "Relaxed (12px). Use for comfortable container padding, relaxed layouts, section separators, and breathing room in dense layouts."
|
|
61
|
+
},
|
|
62
|
+
"org.primer.figma": {
|
|
63
|
+
"collection": "functional/size",
|
|
64
|
+
"scopes": ["gap"]
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"key": "{space.md}"
|
|
68
|
+
},
|
|
69
|
+
"name": "space-md",
|
|
70
|
+
"attributes": {},
|
|
71
|
+
"path": ["space", "md"],
|
|
72
|
+
"value": "0.75rem",
|
|
73
|
+
"type": "dimension",
|
|
74
|
+
"description": "Relaxed spacing for breathing room and comfortable internal container space."
|
|
75
|
+
},
|
|
76
|
+
"space-sm": {
|
|
77
|
+
"key": "{space.sm}",
|
|
78
|
+
"$extensions": {
|
|
79
|
+
"org.primer.llm": {
|
|
80
|
+
"usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
|
|
81
|
+
"rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
|
|
82
|
+
},
|
|
83
|
+
"org.primer.figma": {
|
|
84
|
+
"collection": "functional/size",
|
|
85
|
+
"scopes": ["gap"]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
89
|
+
"isSource": true,
|
|
90
|
+
"original": {
|
|
91
|
+
"$value": "{base.size.8}",
|
|
92
|
+
"$type": "dimension",
|
|
93
|
+
"$description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts.",
|
|
94
|
+
"$extensions": {
|
|
95
|
+
"org.primer.llm": {
|
|
96
|
+
"usage": ["gap", "padding", "margin", "flex-gap", "grid-gap", "card-padding"],
|
|
97
|
+
"rules": "Default (8px). Use for standard component spacing, flex/grid item separation, container padding, and most element margins."
|
|
98
|
+
},
|
|
99
|
+
"org.primer.figma": {
|
|
100
|
+
"collection": "functional/size",
|
|
101
|
+
"scopes": ["gap"]
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
"key": "{space.sm}"
|
|
105
|
+
},
|
|
106
|
+
"name": "space-sm",
|
|
107
|
+
"attributes": {},
|
|
108
|
+
"path": ["space", "sm"],
|
|
109
|
+
"value": "0.5rem",
|
|
110
|
+
"type": "dimension",
|
|
111
|
+
"description": "Default spacing for most UI elements. Comfortable visual density for standard component layouts."
|
|
112
|
+
},
|
|
113
|
+
"space-xl": {
|
|
114
|
+
"key": "{space.xl}",
|
|
115
|
+
"$extensions": {
|
|
116
|
+
"org.primer.llm": {
|
|
117
|
+
"usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
|
|
118
|
+
"rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
|
|
119
|
+
},
|
|
120
|
+
"org.primer.figma": {
|
|
121
|
+
"collection": "functional/size",
|
|
122
|
+
"scopes": ["gap"]
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
126
|
+
"isSource": true,
|
|
127
|
+
"original": {
|
|
128
|
+
"$value": "{base.size.24}",
|
|
129
|
+
"$type": "dimension",
|
|
130
|
+
"$description": "Expansive spacing for large sections and top-level structure separation.",
|
|
131
|
+
"$extensions": {
|
|
132
|
+
"org.primer.llm": {
|
|
133
|
+
"usage": ["gap", "padding", "margin", "page-sections", "major-divisions"],
|
|
134
|
+
"rules": "Expansive (24px). Use for large section separation, top-level layout structure, major page divisions, and expansive breathing room."
|
|
135
|
+
},
|
|
136
|
+
"org.primer.figma": {
|
|
137
|
+
"collection": "functional/size",
|
|
138
|
+
"scopes": ["gap"]
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"key": "{space.xl}"
|
|
142
|
+
},
|
|
143
|
+
"name": "space-xl",
|
|
144
|
+
"attributes": {},
|
|
145
|
+
"path": ["space", "xl"],
|
|
146
|
+
"value": "1.5rem",
|
|
147
|
+
"type": "dimension",
|
|
148
|
+
"description": "Expansive spacing for large sections and top-level structure separation."
|
|
149
|
+
},
|
|
150
|
+
"space-xs": {
|
|
151
|
+
"key": "{space.xs}",
|
|
152
|
+
"$extensions": {
|
|
153
|
+
"org.primer.llm": {
|
|
154
|
+
"usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
|
|
155
|
+
"rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
|
|
156
|
+
},
|
|
157
|
+
"org.primer.figma": {
|
|
158
|
+
"collection": "functional/size",
|
|
159
|
+
"scopes": ["gap"]
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
163
|
+
"isSource": true,
|
|
164
|
+
"original": {
|
|
165
|
+
"$value": "{base.size.4}",
|
|
166
|
+
"$type": "dimension",
|
|
167
|
+
"$description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room.",
|
|
168
|
+
"$extensions": {
|
|
169
|
+
"org.primer.llm": {
|
|
170
|
+
"usage": ["gap", "padding", "margin", "badge-spacing", "list-items"],
|
|
171
|
+
"rules": "Compact (4px). Use for small component spacing, tight list separations, badge padding, and minimal internal margins."
|
|
172
|
+
},
|
|
173
|
+
"org.primer.figma": {
|
|
174
|
+
"collection": "functional/size",
|
|
175
|
+
"scopes": ["gap"]
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"key": "{space.xs}"
|
|
179
|
+
},
|
|
180
|
+
"name": "space-xs",
|
|
181
|
+
"attributes": {},
|
|
182
|
+
"path": ["space", "xs"],
|
|
183
|
+
"value": "0.25rem",
|
|
184
|
+
"type": "dimension",
|
|
185
|
+
"description": "Compact spacing for small badges, tight internal spacing, and minimal breathing room."
|
|
186
|
+
},
|
|
187
|
+
"space-xxs": {
|
|
188
|
+
"key": "{space.xxs}",
|
|
189
|
+
"$extensions": {
|
|
190
|
+
"org.primer.llm": {
|
|
191
|
+
"usage": ["gap", "padding", "margin", "form-separators"],
|
|
192
|
+
"rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
|
|
193
|
+
},
|
|
194
|
+
"org.primer.figma": {
|
|
195
|
+
"collection": "functional/size",
|
|
196
|
+
"scopes": ["gap"]
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
"filePath": "src/tokens/functional/spacing/space.json5",
|
|
200
|
+
"isSource": true,
|
|
201
|
+
"original": {
|
|
202
|
+
"$value": "{base.size.2}",
|
|
203
|
+
"$type": "dimension",
|
|
204
|
+
"$description": "Ultra-compact spacing for form field separators and tight visual divisions.",
|
|
205
|
+
"$extensions": {
|
|
206
|
+
"org.primer.llm": {
|
|
207
|
+
"usage": ["gap", "padding", "margin", "form-separators"],
|
|
208
|
+
"rules": "Ultra-compact (2px). Use for form field separators, tight dividers, and minimal breathing room between small elements."
|
|
209
|
+
},
|
|
210
|
+
"org.primer.figma": {
|
|
211
|
+
"collection": "functional/size",
|
|
212
|
+
"scopes": ["gap"]
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
"key": "{space.xxs}"
|
|
216
|
+
},
|
|
217
|
+
"name": "space-xxs",
|
|
218
|
+
"attributes": {},
|
|
219
|
+
"path": ["space", "xxs"],
|
|
220
|
+
"value": "0.125rem",
|
|
221
|
+
"type": "dimension",
|
|
222
|
+
"description": "Ultra-compact spacing for form field separators and tight visual divisions."
|
|
223
|
+
}
|
|
224
|
+
}
|
|
@@ -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": [
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
"prepack": "npm run build",
|
|
48
48
|
"release": "changeset publish",
|
|
49
49
|
"storybook": "npm run build:tokens && cd docs/storybook && npm run storybook",
|
|
50
|
-
"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"
|
|
51
52
|
},
|
|
52
53
|
"prettier": "@github/prettier-config",
|
|
53
54
|
"devDependencies": {
|
|
@@ -83,4 +84,4 @@
|
|
|
83
84
|
"zod-validation-error": "^4.0.1",
|
|
84
85
|
"colorjs.io": "^0.6.1"
|
|
85
86
|
}
|
|
86
|
-
}
|
|
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
|
+
}
|