@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5
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_GUIDE.md +185 -0
- package/DESIGN_TOKENS_SPEC.md +565 -0
- package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
- package/dist/build/filters/hasLlmExtensions.js +11 -0
- package/dist/build/filters/index.d.ts +1 -0
- package/dist/build/filters/index.js +1 -0
- package/dist/build/formats/index.d.ts +1 -0
- package/dist/build/formats/index.js +1 -0
- package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
- package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
- package/dist/build/platforms/index.d.ts +1 -0
- package/dist/build/platforms/index.js +1 -0
- package/dist/build/platforms/llmGuidelines.d.ts +2 -0
- package/dist/build/platforms/llmGuidelines.js +17 -0
- package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
- package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
- package/dist/build/primerStyleDictionary.js +7 -1
- package/dist/build/schemas/borderToken.d.ts +22 -2
- package/dist/build/schemas/borderToken.js +6 -0
- package/dist/build/schemas/colorToken.d.ts +4 -0
- package/dist/build/schemas/colorToken.js +2 -0
- package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
- package/dist/build/schemas/cubicBezierToken.js +10 -2
- package/dist/build/schemas/designToken.d.ts +1 -1
- package/dist/build/schemas/designToken.js +113 -21
- package/dist/build/schemas/dimensionToken.d.ts +14 -3
- package/dist/build/schemas/dimensionToken.js +6 -2
- package/dist/build/schemas/dimensionValue.d.ts +24 -1
- package/dist/build/schemas/dimensionValue.js +20 -1
- package/dist/build/schemas/durationToken.d.ts +13 -1
- package/dist/build/schemas/durationToken.js +6 -0
- package/dist/build/schemas/durationValue.d.ts +11 -1
- package/dist/build/schemas/durationValue.js +13 -3
- package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
- package/dist/build/schemas/fontFamilyToken.js +2 -0
- package/dist/build/schemas/fontWeightToken.d.ts +4 -0
- package/dist/build/schemas/fontWeightToken.js +2 -0
- package/dist/build/schemas/gradientToken.d.ts +4 -0
- package/dist/build/schemas/gradientToken.js +2 -0
- package/dist/build/schemas/llmExtension.d.ts +9 -0
- package/dist/build/schemas/llmExtension.js +11 -0
- package/dist/build/schemas/numberToken.d.ts +4 -0
- package/dist/build/schemas/numberToken.js +2 -0
- package/dist/build/schemas/shadowToken.d.ts +676 -84
- package/dist/build/schemas/shadowToken.js +2 -0
- package/dist/build/schemas/stringToken.d.ts +6 -0
- package/dist/build/schemas/stringToken.js +6 -0
- package/dist/build/schemas/transitionToken.d.ts +20 -2
- package/dist/build/schemas/transitionToken.js +6 -0
- package/dist/build/schemas/typographyToken.d.ts +38 -4
- package/dist/build/schemas/typographyToken.js +6 -0
- package/dist/build/schemas/validTokenType.d.ts +5 -1
- package/dist/build/schemas/validTokenType.js +71 -17
- package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
- package/dist/build/schemas/viewportRangeToken.js +6 -0
- package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
- package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
- package/dist/build/transformers/dimensionToRem.d.ts +2 -1
- package/dist/build/transformers/dimensionToRem.js +21 -22
- package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
- package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
- package/dist/build/transformers/durationToCss.d.ts +2 -1
- package/dist/build/transformers/durationToCss.js +18 -11
- package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
- package/dist/build/transformers/utilities/parseDimension.js +31 -0
- package/dist/build/types/dimensionTokenValue.d.ts +9 -0
- package/dist/css/base/motion/motion.css +5 -4
- package/dist/css/functional/size/border.css +9 -14
- package/dist/css/functional/size/radius.css +7 -0
- package/dist/css/functional/size/size-coarse.css +3 -3
- package/dist/css/functional/size/size-fine.css +3 -3
- package/dist/css/functional/size/viewport.css +1 -1
- package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-colorblind.css +194 -190
- package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-dimmed.css +194 -190
- package/dist/css/functional/themes/dark-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-tritanopia.css +194 -190
- package/dist/css/functional/themes/dark.css +194 -190
- package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-colorblind.css +194 -190
- package/dist/css/functional/themes/light-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-tritanopia.css +194 -190
- package/dist/css/functional/themes/light.css +194 -190
- package/dist/css/functional/typography/typography.css +4 -4
- package/dist/css/primitives.css +5 -0
- package/dist/docs/base/motion/motion.json +181 -32
- package/dist/docs/base/size/size.json +76 -19
- package/dist/docs/base/typography/typography.json +24 -6
- package/dist/docs/functional/size/border.json +62 -182
- package/dist/docs/functional/size/breakpoints.json +24 -6
- package/dist/docs/functional/size/radius.json +221 -0
- package/dist/docs/functional/size/size-coarse.json +45 -3
- package/dist/docs/functional/size/size-fine.json +45 -3
- package/dist/docs/functional/size/size.json +60 -15
- package/dist/docs/functional/size/viewport.json +2 -2
- package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
- package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
- package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
- package/dist/docs/functional/themes/dark.json +1043 -97
- package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-colorblind.json +1049 -103
- package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
- package/dist/docs/functional/themes/light.json +1049 -103
- package/dist/docs/functional/typography/typography.json +180 -10
- package/dist/fallbacks/base/motion/motion.json +49 -12
- package/dist/fallbacks/functional/size/border.json +0 -5
- package/dist/fallbacks/functional/size/radius.json +7 -0
- package/dist/fallbacks/functional/size/viewport.json +1 -1
- package/dist/figma/dimension/dimension.json +30 -20
- package/dist/figma/themes/dark-colorblind.json +85 -0
- package/dist/figma/themes/dark-dimmed.json +134 -49
- package/dist/figma/themes/dark-high-contrast.json +85 -0
- package/dist/figma/themes/dark-tritanopia.json +85 -0
- package/dist/figma/themes/dark.json +85 -0
- package/dist/figma/themes/light-colorblind.json +89 -4
- package/dist/figma/themes/light-high-contrast.json +89 -4
- package/dist/figma/themes/light-tritanopia.json +89 -4
- package/dist/figma/themes/light.json +89 -4
- package/dist/figma/typography/typography.json +44 -40
- package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
- package/dist/internalCss/dark-colorblind.css +208 -218
- package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
- package/dist/internalCss/dark-dimmed.css +208 -218
- package/dist/internalCss/dark-high-contrast.css +208 -218
- package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
- package/dist/internalCss/dark-tritanopia.css +208 -218
- package/dist/internalCss/dark.css +208 -218
- package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
- package/dist/internalCss/light-colorblind.css +208 -218
- package/dist/internalCss/light-high-contrast.css +208 -218
- package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
- package/dist/internalCss/light-tritanopia.css +208 -218
- package/dist/internalCss/light.css +208 -218
- package/dist/styleLint/base/motion/motion.json +181 -32
- package/dist/styleLint/base/size/size.json +76 -19
- package/dist/styleLint/base/typography/typography.json +30 -12
- package/dist/styleLint/functional/size/border.json +55 -175
- package/dist/styleLint/functional/size/breakpoints.json +24 -6
- package/dist/styleLint/functional/size/radius.json +221 -0
- package/dist/styleLint/functional/size/size-coarse.json +45 -3
- package/dist/styleLint/functional/size/size-fine.json +45 -3
- package/dist/styleLint/functional/size/size.json +111 -66
- package/dist/styleLint/functional/size/viewport.json +2 -2
- package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
- package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
- package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
- package/dist/styleLint/functional/themes/dark.json +975 -29
- package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
- package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
- package/dist/styleLint/functional/themes/light.json +981 -35
- package/dist/styleLint/functional/typography/typography.json +196 -26
- package/package.json +6 -3
- package/src/tokens/base/motion/easing.json5 +39 -4
- package/src/tokens/base/motion/timing.json5 +12 -12
- package/src/tokens/base/size/size.json5 +19 -19
- package/src/tokens/base/typography/typography.json5 +6 -6
- package/src/tokens/functional/border/border.json5 +25 -0
- package/src/tokens/functional/color/bgColor.json5 +165 -0
- package/src/tokens/functional/color/borderColor.json5 +146 -0
- package/src/tokens/functional/color/control.json5 +24 -0
- package/src/tokens/functional/color/data-vis.json5 +7 -0
- package/src/tokens/functional/color/display.json5 +7 -0
- package/src/tokens/functional/color/fgColor.json5 +101 -1
- package/src/tokens/functional/color/focus.json5 +5 -0
- package/src/tokens/functional/color/selection.json5 +5 -0
- package/src/tokens/functional/color/syntax.json5 +14 -0
- package/src/tokens/functional/shadow/shadow.json5 +49 -4
- package/src/tokens/functional/size/border.json5 +22 -74
- package/src/tokens/functional/size/breakpoints.json5 +6 -6
- package/src/tokens/functional/size/radius.json5 +90 -0
- package/src/tokens/functional/size/size-coarse.json5 +24 -3
- package/src/tokens/functional/size/size-fine.json5 +45 -24
- package/src/tokens/functional/size/size.json5 +50 -15
- package/src/tokens/functional/size/viewport.json5 +1 -1
- package/src/tokens/functional/typography/font-stack.json5 +60 -0
- package/src/tokens/functional/typography/typography.json5 +71 -44
- package/dist/build/parsers/index.d.ts +0 -1
- package/dist/build/parsers/index.js +0 -1
- package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
- package/dist/build/parsers/w3cJsonParser.js +0 -25
- package/dist/removed/testing.json5 +0 -4
- package/src/tokens/removed/testing.json5 +0 -4
|
@@ -5,17 +5,26 @@
|
|
|
5
5
|
"org.primer.figma": {
|
|
6
6
|
"collection": "typography",
|
|
7
7
|
"scopes": ["fontFamily"]
|
|
8
|
+
},
|
|
9
|
+
"org.primer.llm": {
|
|
10
|
+
"usage": ["code-block", "inline-code", "terminal", "technical-data", "tabular-numbers"],
|
|
11
|
+
"rules": "MUST use for all code display. Use for technical content requiring fixed-width characters."
|
|
8
12
|
}
|
|
9
13
|
},
|
|
10
|
-
"filePath": "src/tokens/functional/typography/
|
|
14
|
+
"filePath": "src/tokens/functional/typography/font-stack.json5",
|
|
11
15
|
"isSource": true,
|
|
12
16
|
"original": {
|
|
13
17
|
"$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
14
18
|
"$type": "fontFamily",
|
|
19
|
+
"$description": "Monospace font stack for code, technical content, and tabular data.",
|
|
15
20
|
"$extensions": {
|
|
16
21
|
"org.primer.figma": {
|
|
17
22
|
"collection": "typography",
|
|
18
23
|
"scopes": ["fontFamily"]
|
|
24
|
+
},
|
|
25
|
+
"org.primer.llm": {
|
|
26
|
+
"usage": ["code-block", "inline-code", "terminal", "technical-data", "tabular-numbers"],
|
|
27
|
+
"rules": "MUST use for all code display. Use for technical content requiring fixed-width characters."
|
|
19
28
|
}
|
|
20
29
|
},
|
|
21
30
|
"key": "{fontStack.monospace}"
|
|
@@ -24,7 +33,8 @@
|
|
|
24
33
|
"attributes": {},
|
|
25
34
|
"path": ["fontStack", "monospace"],
|
|
26
35
|
"value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
27
|
-
"type": "fontFamily"
|
|
36
|
+
"type": "fontFamily",
|
|
37
|
+
"description": "Monospace font stack for code, technical content, and tabular data."
|
|
28
38
|
},
|
|
29
39
|
"fontStack-sansSerif": {
|
|
30
40
|
"key": "{fontStack.sansSerif}",
|
|
@@ -32,17 +42,26 @@
|
|
|
32
42
|
"org.primer.figma": {
|
|
33
43
|
"collection": "typography",
|
|
34
44
|
"scopes": ["fontFamily"]
|
|
45
|
+
},
|
|
46
|
+
"org.primer.llm": {
|
|
47
|
+
"usage": ["body-text", "form-inputs", "labels", "paragraphs"],
|
|
48
|
+
"rules": "Default font stack for all UI text. Use for body text and standard UI elements. MUST use for readable content."
|
|
35
49
|
}
|
|
36
50
|
},
|
|
37
|
-
"filePath": "src/tokens/functional/typography/
|
|
51
|
+
"filePath": "src/tokens/functional/typography/font-stack.json5",
|
|
38
52
|
"isSource": true,
|
|
39
53
|
"original": {
|
|
40
54
|
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
41
55
|
"$type": "fontFamily",
|
|
56
|
+
"$description": "Sans-serif font stack for body text and general UI elements.",
|
|
42
57
|
"$extensions": {
|
|
43
58
|
"org.primer.figma": {
|
|
44
59
|
"collection": "typography",
|
|
45
60
|
"scopes": ["fontFamily"]
|
|
61
|
+
},
|
|
62
|
+
"org.primer.llm": {
|
|
63
|
+
"usage": ["body-text", "form-inputs", "labels", "paragraphs"],
|
|
64
|
+
"rules": "Default font stack for all UI text. Use for body text and standard UI elements. MUST use for readable content."
|
|
46
65
|
}
|
|
47
66
|
},
|
|
48
67
|
"key": "{fontStack.sansSerif}"
|
|
@@ -51,7 +70,8 @@
|
|
|
51
70
|
"attributes": {},
|
|
52
71
|
"path": ["fontStack", "sansSerif"],
|
|
53
72
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
54
|
-
"type": "fontFamily"
|
|
73
|
+
"type": "fontFamily",
|
|
74
|
+
"description": "Sans-serif font stack for body text and general UI elements."
|
|
55
75
|
},
|
|
56
76
|
"fontStack-sansSerifDisplay": {
|
|
57
77
|
"key": "{fontStack.sansSerifDisplay}",
|
|
@@ -59,17 +79,26 @@
|
|
|
59
79
|
"org.primer.figma": {
|
|
60
80
|
"collection": "typography",
|
|
61
81
|
"scopes": ["fontFamily"]
|
|
82
|
+
},
|
|
83
|
+
"org.primer.llm": {
|
|
84
|
+
"usage": ["heading", "title", "display-text", "hero-text"],
|
|
85
|
+
"rules": "Use for headings and display text. Prefer over sansSerif for titles."
|
|
62
86
|
}
|
|
63
87
|
},
|
|
64
|
-
"filePath": "src/tokens/functional/typography/
|
|
88
|
+
"filePath": "src/tokens/functional/typography/font-stack.json5",
|
|
65
89
|
"isSource": true,
|
|
66
90
|
"original": {
|
|
67
91
|
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
68
92
|
"$type": "fontFamily",
|
|
93
|
+
"$description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct.",
|
|
69
94
|
"$extensions": {
|
|
70
95
|
"org.primer.figma": {
|
|
71
96
|
"collection": "typography",
|
|
72
97
|
"scopes": ["fontFamily"]
|
|
98
|
+
},
|
|
99
|
+
"org.primer.llm": {
|
|
100
|
+
"usage": ["heading", "title", "display-text", "hero-text"],
|
|
101
|
+
"rules": "Use for headings and display text. Prefer over sansSerif for titles."
|
|
73
102
|
}
|
|
74
103
|
},
|
|
75
104
|
"key": "{fontStack.sansSerifDisplay}"
|
|
@@ -78,7 +107,8 @@
|
|
|
78
107
|
"attributes": {},
|
|
79
108
|
"path": ["fontStack", "sansSerifDisplay"],
|
|
80
109
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
81
|
-
"type": "fontFamily"
|
|
110
|
+
"type": "fontFamily",
|
|
111
|
+
"description": "Display font stack for headings and titles. Same as sansSerif but semantically distinct."
|
|
82
112
|
},
|
|
83
113
|
"fontStack-system": {
|
|
84
114
|
"key": "{fontStack.system}",
|
|
@@ -88,11 +118,12 @@
|
|
|
88
118
|
"scopes": ["fontFamily"]
|
|
89
119
|
}
|
|
90
120
|
},
|
|
91
|
-
"filePath": "src/tokens/functional/typography/
|
|
121
|
+
"filePath": "src/tokens/functional/typography/font-stack.json5",
|
|
92
122
|
"isSource": true,
|
|
93
123
|
"original": {
|
|
94
124
|
"$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
95
125
|
"$type": "fontFamily",
|
|
126
|
+
"$description": "System font stack optimized for cross-platform rendering. Primary font for all UI text.",
|
|
96
127
|
"$extensions": {
|
|
97
128
|
"org.primer.figma": {
|
|
98
129
|
"collection": "typography",
|
|
@@ -105,7 +136,8 @@
|
|
|
105
136
|
"attributes": {},
|
|
106
137
|
"path": ["fontStack", "system"],
|
|
107
138
|
"value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
|
108
|
-
"type": "fontFamily"
|
|
139
|
+
"type": "fontFamily",
|
|
140
|
+
"description": "System font stack optimized for cross-platform rendering. Primary font for all UI text."
|
|
109
141
|
},
|
|
110
142
|
"text-body-lineHeight-large": {
|
|
111
143
|
"key": "{text.body.lineHeight.large}",
|
|
@@ -208,6 +240,12 @@
|
|
|
208
240
|
},
|
|
209
241
|
"text-body-shorthand-large": {
|
|
210
242
|
"key": "{text.body.shorthand.large}",
|
|
243
|
+
"$extensions": {
|
|
244
|
+
"org.primer.llm": {
|
|
245
|
+
"usage": ["markdown-content", "article-text", "readme", "comment-body"],
|
|
246
|
+
"rules": "Use for user-generated content and markdown. Better readability for longer text."
|
|
247
|
+
}
|
|
248
|
+
},
|
|
211
249
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
212
250
|
"isSource": true,
|
|
213
251
|
"original": {
|
|
@@ -219,6 +257,12 @@
|
|
|
219
257
|
},
|
|
220
258
|
"$type": "typography",
|
|
221
259
|
"$description": "User-generated content, markdown rendering.",
|
|
260
|
+
"$extensions": {
|
|
261
|
+
"org.primer.llm": {
|
|
262
|
+
"usage": ["markdown-content", "article-text", "readme", "comment-body"],
|
|
263
|
+
"rules": "Use for user-generated content and markdown. Better readability for longer text."
|
|
264
|
+
}
|
|
265
|
+
},
|
|
222
266
|
"key": "{text.body.shorthand.large}"
|
|
223
267
|
},
|
|
224
268
|
"name": "text-body-shorthand-large",
|
|
@@ -230,6 +274,12 @@
|
|
|
230
274
|
},
|
|
231
275
|
"text-body-shorthand-medium": {
|
|
232
276
|
"key": "{text.body.shorthand.medium}",
|
|
277
|
+
"$extensions": {
|
|
278
|
+
"org.primer.llm": {
|
|
279
|
+
"usage": ["body-text", "ui-text", "form-label", "button-text", "navigation"],
|
|
280
|
+
"rules": "RECOMMENDED default for UI text. Use for buttons, labels, and general interface text."
|
|
281
|
+
}
|
|
282
|
+
},
|
|
233
283
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
234
284
|
"isSource": true,
|
|
235
285
|
"original": {
|
|
@@ -241,6 +291,12 @@
|
|
|
241
291
|
},
|
|
242
292
|
"$type": "typography",
|
|
243
293
|
"$description": "Default UI font. Most commonly used for body text.",
|
|
294
|
+
"$extensions": {
|
|
295
|
+
"org.primer.llm": {
|
|
296
|
+
"usage": ["body-text", "ui-text", "form-label", "button-text", "navigation"],
|
|
297
|
+
"rules": "RECOMMENDED default for UI text. Use for buttons, labels, and general interface text."
|
|
298
|
+
}
|
|
299
|
+
},
|
|
244
300
|
"key": "{text.body.shorthand.medium}"
|
|
245
301
|
},
|
|
246
302
|
"name": "text-body-shorthand-medium",
|
|
@@ -252,6 +308,12 @@
|
|
|
252
308
|
},
|
|
253
309
|
"text-body-shorthand-small": {
|
|
254
310
|
"key": "{text.body.shorthand.small}",
|
|
311
|
+
"$extensions": {
|
|
312
|
+
"org.primer.llm": {
|
|
313
|
+
"usage": ["helper-text", "footnote", "metadata", "timestamp"],
|
|
314
|
+
"rules": "Use sparingly for secondary information. Do NOT use for primary content or interactive elements."
|
|
315
|
+
}
|
|
316
|
+
},
|
|
255
317
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
256
318
|
"isSource": true,
|
|
257
319
|
"original": {
|
|
@@ -263,6 +325,12 @@
|
|
|
263
325
|
},
|
|
264
326
|
"$type": "typography",
|
|
265
327
|
"$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.",
|
|
328
|
+
"$extensions": {
|
|
329
|
+
"org.primer.llm": {
|
|
330
|
+
"usage": ["helper-text", "footnote", "metadata", "timestamp"],
|
|
331
|
+
"rules": "Use sparingly for secondary information. Do NOT use for primary content or interactive elements."
|
|
332
|
+
}
|
|
333
|
+
},
|
|
266
334
|
"key": "{text.body.shorthand.small}"
|
|
267
335
|
},
|
|
268
336
|
"name": "text-body-shorthand-small",
|
|
@@ -415,6 +483,12 @@
|
|
|
415
483
|
},
|
|
416
484
|
"text-caption-shorthand": {
|
|
417
485
|
"key": "{text.caption.shorthand}",
|
|
486
|
+
"$extensions": {
|
|
487
|
+
"org.primer.llm": {
|
|
488
|
+
"usage": ["caption", "label", "badge-text", "single-line-metadata"],
|
|
489
|
+
"rules": "Use only for single-line or short text. Does NOT meet accessibility requirements for body text."
|
|
490
|
+
}
|
|
491
|
+
},
|
|
418
492
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
419
493
|
"isSource": true,
|
|
420
494
|
"original": {
|
|
@@ -426,6 +500,12 @@
|
|
|
426
500
|
},
|
|
427
501
|
"$type": "typography",
|
|
428
502
|
"$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.",
|
|
503
|
+
"$extensions": {
|
|
504
|
+
"org.primer.llm": {
|
|
505
|
+
"usage": ["caption", "label", "badge-text", "single-line-metadata"],
|
|
506
|
+
"rules": "Use only for single-line or short text. Does NOT meet accessibility requirements for body text."
|
|
507
|
+
}
|
|
508
|
+
},
|
|
429
509
|
"key": "{text.caption.shorthand}"
|
|
430
510
|
},
|
|
431
511
|
"name": "text-caption-shorthand",
|
|
@@ -524,6 +604,12 @@
|
|
|
524
604
|
},
|
|
525
605
|
"text-codeBlock-shorthand": {
|
|
526
606
|
"key": "{text.codeBlock.shorthand}",
|
|
607
|
+
"$extensions": {
|
|
608
|
+
"org.primer.llm": {
|
|
609
|
+
"usage": ["code-block", "pre-element", "code-snippet", "terminal-output"],
|
|
610
|
+
"rules": "MUST use for multi-line code. Use monospace font stack."
|
|
611
|
+
}
|
|
612
|
+
},
|
|
527
613
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
528
614
|
"isSource": true,
|
|
529
615
|
"original": {
|
|
@@ -535,6 +621,12 @@
|
|
|
535
621
|
},
|
|
536
622
|
"$type": "typography",
|
|
537
623
|
"$description": "Default style for rendering code blocks.",
|
|
624
|
+
"$extensions": {
|
|
625
|
+
"org.primer.llm": {
|
|
626
|
+
"usage": ["code-block", "pre-element", "code-snippet", "terminal-output"],
|
|
627
|
+
"rules": "MUST use for multi-line code. Use monospace font stack."
|
|
628
|
+
}
|
|
629
|
+
},
|
|
538
630
|
"key": "{text.codeBlock.shorthand}"
|
|
539
631
|
},
|
|
540
632
|
"name": "text-codeBlock-shorthand",
|
|
@@ -555,7 +647,10 @@
|
|
|
555
647
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
556
648
|
"isSource": true,
|
|
557
649
|
"original": {
|
|
558
|
-
"$value":
|
|
650
|
+
"$value": {
|
|
651
|
+
"value": 13,
|
|
652
|
+
"unit": "px"
|
|
653
|
+
},
|
|
559
654
|
"$type": "dimension",
|
|
560
655
|
"$extensions": {
|
|
561
656
|
"org.primer.figma": {
|
|
@@ -600,6 +695,12 @@
|
|
|
600
695
|
},
|
|
601
696
|
"text-codeInline-shorthand": {
|
|
602
697
|
"key": "{text.codeInline.shorthand}",
|
|
698
|
+
"$extensions": {
|
|
699
|
+
"org.primer.llm": {
|
|
700
|
+
"usage": ["inline-code", "code-element", "variable-name", "command"],
|
|
701
|
+
"rules": "Use for inline code within text. Size inherits from parent using em units."
|
|
702
|
+
}
|
|
703
|
+
},
|
|
603
704
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
604
705
|
"isSource": true,
|
|
605
706
|
"original": {
|
|
@@ -610,6 +711,12 @@
|
|
|
610
711
|
},
|
|
611
712
|
"$type": "typography",
|
|
612
713
|
"$description": "Inline code blocks using em units to inherit size from its parent.",
|
|
714
|
+
"$extensions": {
|
|
715
|
+
"org.primer.llm": {
|
|
716
|
+
"usage": ["inline-code", "code-element", "variable-name", "command"],
|
|
717
|
+
"rules": "Use for inline code within text. Size inherits from parent using em units."
|
|
718
|
+
}
|
|
719
|
+
},
|
|
613
720
|
"key": "{text.codeInline.shorthand}"
|
|
614
721
|
},
|
|
615
722
|
"name": "text-codeInline-shorthand",
|
|
@@ -630,7 +737,10 @@
|
|
|
630
737
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
631
738
|
"isSource": true,
|
|
632
739
|
"original": {
|
|
633
|
-
"$value":
|
|
740
|
+
"$value": {
|
|
741
|
+
"value": 0.9285,
|
|
742
|
+
"unit": "em"
|
|
743
|
+
},
|
|
634
744
|
"$type": "dimension",
|
|
635
745
|
"$extensions": {
|
|
636
746
|
"org.primer.figma": {
|
|
@@ -743,6 +853,12 @@
|
|
|
743
853
|
},
|
|
744
854
|
"text-display-shorthand": {
|
|
745
855
|
"key": "{text.display.shorthand}",
|
|
856
|
+
"$extensions": {
|
|
857
|
+
"org.primer.llm": {
|
|
858
|
+
"usage": ["hero-section", "landing-page", "marketing-header"],
|
|
859
|
+
"rules": "Use sparingly for hero sections. Switch to title.large on narrow viewports."
|
|
860
|
+
}
|
|
861
|
+
},
|
|
746
862
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
747
863
|
"isSource": true,
|
|
748
864
|
"original": {
|
|
@@ -754,6 +870,12 @@
|
|
|
754
870
|
},
|
|
755
871
|
"$type": "typography",
|
|
756
872
|
"$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
|
|
873
|
+
"$extensions": {
|
|
874
|
+
"org.primer.llm": {
|
|
875
|
+
"usage": ["hero-section", "landing-page", "marketing-header"],
|
|
876
|
+
"rules": "Use sparingly for hero sections. Switch to title.large on narrow viewports."
|
|
877
|
+
}
|
|
878
|
+
},
|
|
757
879
|
"key": "{text.display.shorthand}"
|
|
758
880
|
},
|
|
759
881
|
"name": "text-display-shorthand",
|
|
@@ -852,6 +974,12 @@
|
|
|
852
974
|
},
|
|
853
975
|
"text-subtitle-shorthand": {
|
|
854
976
|
"key": "{text.subtitle.shorthand}",
|
|
977
|
+
"$extensions": {
|
|
978
|
+
"org.primer.llm": {
|
|
979
|
+
"usage": ["subtitle", "description", "secondary-heading", "lead-text"],
|
|
980
|
+
"rules": "Use below titles for supporting text. Normal weight distinguishes from title styles."
|
|
981
|
+
}
|
|
982
|
+
},
|
|
855
983
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
856
984
|
"isSource": true,
|
|
857
985
|
"original": {
|
|
@@ -863,6 +991,12 @@
|
|
|
863
991
|
},
|
|
864
992
|
"$type": "typography",
|
|
865
993
|
"$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
|
|
994
|
+
"$extensions": {
|
|
995
|
+
"org.primer.llm": {
|
|
996
|
+
"usage": ["subtitle", "description", "secondary-heading", "lead-text"],
|
|
997
|
+
"rules": "Use below titles for supporting text. Normal weight distinguishes from title styles."
|
|
998
|
+
}
|
|
999
|
+
},
|
|
866
1000
|
"key": "{text.subtitle.shorthand}"
|
|
867
1001
|
},
|
|
868
1002
|
"name": "text-subtitle-shorthand",
|
|
@@ -1027,6 +1161,12 @@
|
|
|
1027
1161
|
},
|
|
1028
1162
|
"text-title-shorthand-large": {
|
|
1029
1163
|
"key": "{text.title.shorthand.large}",
|
|
1164
|
+
"$extensions": {
|
|
1165
|
+
"org.primer.llm": {
|
|
1166
|
+
"usage": ["page-heading", "issue-title", "pr-title", "h1"],
|
|
1167
|
+
"rules": "Use for primary page headings. Switch to title.medium on narrow viewports."
|
|
1168
|
+
}
|
|
1169
|
+
},
|
|
1030
1170
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
1031
1171
|
"isSource": true,
|
|
1032
1172
|
"original": {
|
|
@@ -1038,6 +1178,12 @@
|
|
|
1038
1178
|
},
|
|
1039
1179
|
"$type": "typography",
|
|
1040
1180
|
"$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
|
|
1181
|
+
"$extensions": {
|
|
1182
|
+
"org.primer.llm": {
|
|
1183
|
+
"usage": ["page-heading", "issue-title", "pr-title", "h1"],
|
|
1184
|
+
"rules": "Use for primary page headings. Switch to title.medium on narrow viewports."
|
|
1185
|
+
}
|
|
1186
|
+
},
|
|
1041
1187
|
"key": "{text.title.shorthand.large}"
|
|
1042
1188
|
},
|
|
1043
1189
|
"name": "text-title-shorthand-large",
|
|
@@ -1049,6 +1195,12 @@
|
|
|
1049
1195
|
},
|
|
1050
1196
|
"text-title-shorthand-medium": {
|
|
1051
1197
|
"key": "{text.title.shorthand.medium}",
|
|
1198
|
+
"$extensions": {
|
|
1199
|
+
"org.primer.llm": {
|
|
1200
|
+
"usage": ["section-heading", "card-title", "dialog-title", "h2"],
|
|
1201
|
+
"rules": "RECOMMENDED default for page titles. Use for section headings and dialog titles."
|
|
1202
|
+
}
|
|
1203
|
+
},
|
|
1052
1204
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
1053
1205
|
"isSource": true,
|
|
1054
1206
|
"original": {
|
|
@@ -1060,6 +1212,12 @@
|
|
|
1060
1212
|
},
|
|
1061
1213
|
"$type": "typography",
|
|
1062
1214
|
"$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
|
|
1215
|
+
"$extensions": {
|
|
1216
|
+
"org.primer.llm": {
|
|
1217
|
+
"usage": ["section-heading", "card-title", "dialog-title", "h2"],
|
|
1218
|
+
"rules": "RECOMMENDED default for page titles. Use for section headings and dialog titles."
|
|
1219
|
+
}
|
|
1220
|
+
},
|
|
1063
1221
|
"key": "{text.title.shorthand.medium}"
|
|
1064
1222
|
},
|
|
1065
1223
|
"name": "text-title-shorthand-medium",
|
|
@@ -1071,6 +1229,12 @@
|
|
|
1071
1229
|
},
|
|
1072
1230
|
"text-title-shorthand-small": {
|
|
1073
1231
|
"key": "{text.title.shorthand.small}",
|
|
1232
|
+
"$extensions": {
|
|
1233
|
+
"org.primer.llm": {
|
|
1234
|
+
"usage": ["subsection-heading", "list-title", "h3", "sidebar-heading"],
|
|
1235
|
+
"rules": "Use for smaller headings within sections. Same size as body.large but semibold."
|
|
1236
|
+
}
|
|
1237
|
+
},
|
|
1074
1238
|
"filePath": "src/tokens/functional/typography/typography.json5",
|
|
1075
1239
|
"isSource": true,
|
|
1076
1240
|
"original": {
|
|
@@ -1082,6 +1246,12 @@
|
|
|
1082
1246
|
},
|
|
1083
1247
|
"$type": "typography",
|
|
1084
1248
|
"$description": "Uses the same size as body (large) with a heavier weight of semibold (600).",
|
|
1249
|
+
"$extensions": {
|
|
1250
|
+
"org.primer.llm": {
|
|
1251
|
+
"usage": ["subsection-heading", "list-title", "h3", "sidebar-heading"],
|
|
1252
|
+
"rules": "Use for smaller headings within sections. Same size as body.large but semibold."
|
|
1253
|
+
}
|
|
1254
|
+
},
|
|
1085
1255
|
"key": "{text.title.shorthand.small}"
|
|
1086
1256
|
},
|
|
1087
1257
|
"name": "text-title-shorthand-small",
|
|
@@ -1,18 +1,55 @@
|
|
|
1
1
|
{
|
|
2
2
|
"--base-easing-linear": [0, 0, 1, 1],
|
|
3
|
+
"--base-easing-ease": [0.25, 0.1, 0.25, 1],
|
|
3
4
|
"--base-easing-easeIn": [0.7, 0.1, 0.75, 0.9],
|
|
4
5
|
"--base-easing-easeOut": [0.3, 0.8, 0.6, 1],
|
|
5
6
|
"--base-easing-easeInOut": [0.6, 0, 0.2, 1],
|
|
6
|
-
"--base-duration-0":
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"--base-duration-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"--base-duration-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
7
|
+
"--base-duration-0": {
|
|
8
|
+
"value": 0,
|
|
9
|
+
"unit": "ms"
|
|
10
|
+
},
|
|
11
|
+
"--base-duration-50": {
|
|
12
|
+
"value": 50,
|
|
13
|
+
"unit": "ms"
|
|
14
|
+
},
|
|
15
|
+
"--base-duration-100": {
|
|
16
|
+
"value": 100,
|
|
17
|
+
"unit": "ms"
|
|
18
|
+
},
|
|
19
|
+
"--base-duration-200": {
|
|
20
|
+
"value": 200,
|
|
21
|
+
"unit": "ms"
|
|
22
|
+
},
|
|
23
|
+
"--base-duration-300": {
|
|
24
|
+
"value": 300,
|
|
25
|
+
"unit": "ms"
|
|
26
|
+
},
|
|
27
|
+
"--base-duration-400": {
|
|
28
|
+
"value": 400,
|
|
29
|
+
"unit": "ms"
|
|
30
|
+
},
|
|
31
|
+
"--base-duration-500": {
|
|
32
|
+
"value": 500,
|
|
33
|
+
"unit": "ms"
|
|
34
|
+
},
|
|
35
|
+
"--base-duration-600": {
|
|
36
|
+
"value": 600,
|
|
37
|
+
"unit": "ms"
|
|
38
|
+
},
|
|
39
|
+
"--base-duration-700": {
|
|
40
|
+
"value": 700,
|
|
41
|
+
"unit": "ms"
|
|
42
|
+
},
|
|
43
|
+
"--base-duration-800": {
|
|
44
|
+
"value": 800,
|
|
45
|
+
"unit": "ms"
|
|
46
|
+
},
|
|
47
|
+
"--base-duration-900": {
|
|
48
|
+
"value": 900,
|
|
49
|
+
"unit": "ms"
|
|
50
|
+
},
|
|
51
|
+
"--base-duration-1000": {
|
|
52
|
+
"value": 1000,
|
|
53
|
+
"unit": "ms"
|
|
54
|
+
}
|
|
18
55
|
}
|
|
@@ -6,11 +6,6 @@
|
|
|
6
6
|
"--borderWidth-thin": "0.0625rem",
|
|
7
7
|
"--borderWidth-thick": "0.125rem",
|
|
8
8
|
"--borderWidth-thicker": "0.25rem",
|
|
9
|
-
"--borderRadius-small": "0.1875rem",
|
|
10
|
-
"--borderRadius-medium": "0.375rem",
|
|
11
|
-
"--borderRadius-large": "0.75rem",
|
|
12
|
-
"--borderRadius-full": "624.9375rem",
|
|
13
|
-
"--borderRadius-default": "0.375rem",
|
|
14
9
|
"--outline-focus-offset": "-0.125rem",
|
|
15
10
|
"--outline-focus-width": "0.125rem"
|
|
16
11
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"--viewportRange-narrow": "(max-width: calc(48rem - 0.02px))",
|
|
3
|
-
"--viewportRange-narrowLandscape": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
|
|
3
|
+
"--viewportRange-narrowLandscape": "((max-width: calc(63.25rem - 0.02px)) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
|
|
4
4
|
"--viewportRange-regular": "(min-width: 48rem)",
|
|
5
5
|
"--viewportRange-wide": "(min-width: 87.5rem)",
|
|
6
6
|
"--viewportRange-portrait": "(orientation: portrait)",
|
|
@@ -972,6 +972,7 @@
|
|
|
972
972
|
"name": "borderWidth/default",
|
|
973
973
|
"value": 1,
|
|
974
974
|
"type": "FLOAT",
|
|
975
|
+
"description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
|
|
975
976
|
"refId": "functional/size/borderWidth/default",
|
|
976
977
|
"reference": "functional/size/borderWidth/thin",
|
|
977
978
|
"collection": "functional/size",
|
|
@@ -983,6 +984,7 @@
|
|
|
983
984
|
"name": "borderWidth/thin",
|
|
984
985
|
"value": 1,
|
|
985
986
|
"type": "FLOAT",
|
|
987
|
+
"description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
|
|
986
988
|
"refId": "functional/size/borderWidth/thin",
|
|
987
989
|
"collection": "functional/size",
|
|
988
990
|
"mode": "default",
|
|
@@ -993,6 +995,7 @@
|
|
|
993
995
|
"name": "borderWidth/thick",
|
|
994
996
|
"value": 2,
|
|
995
997
|
"type": "FLOAT",
|
|
998
|
+
"description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
|
|
996
999
|
"refId": "functional/size/borderWidth/thick",
|
|
997
1000
|
"collection": "functional/size",
|
|
998
1001
|
"mode": "default",
|
|
@@ -1003,16 +1006,40 @@
|
|
|
1003
1006
|
"name": "borderWidth/thicker",
|
|
1004
1007
|
"value": 4,
|
|
1005
1008
|
"type": "FLOAT",
|
|
1009
|
+
"description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
|
|
1006
1010
|
"refId": "functional/size/borderWidth/thicker",
|
|
1007
1011
|
"collection": "functional/size",
|
|
1008
1012
|
"mode": "default",
|
|
1009
1013
|
"group": "functional/size",
|
|
1010
1014
|
"scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
|
|
1011
1015
|
},
|
|
1016
|
+
{
|
|
1017
|
+
"name": "outline/focus/offset",
|
|
1018
|
+
"value": -2,
|
|
1019
|
+
"type": "FLOAT",
|
|
1020
|
+
"description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
|
|
1021
|
+
"refId": "functional/size/outline/focus/offset",
|
|
1022
|
+
"collection": "functional/size",
|
|
1023
|
+
"mode": "default",
|
|
1024
|
+
"group": "functional/size",
|
|
1025
|
+
"scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
"name": "outline/focus/width",
|
|
1029
|
+
"value": 2,
|
|
1030
|
+
"type": "FLOAT",
|
|
1031
|
+
"description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
|
|
1032
|
+
"refId": "functional/size/outline/focus/width",
|
|
1033
|
+
"collection": "functional/size",
|
|
1034
|
+
"mode": "default",
|
|
1035
|
+
"group": "functional/size",
|
|
1036
|
+
"scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
|
|
1037
|
+
},
|
|
1012
1038
|
{
|
|
1013
1039
|
"name": "borderRadius/small",
|
|
1014
1040
|
"value": 3,
|
|
1015
1041
|
"type": "FLOAT",
|
|
1042
|
+
"description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
|
|
1016
1043
|
"refId": "functional/size/borderRadius/small",
|
|
1017
1044
|
"collection": "functional/size",
|
|
1018
1045
|
"mode": "default",
|
|
@@ -1026,6 +1053,7 @@
|
|
|
1026
1053
|
"name": "borderRadius/medium",
|
|
1027
1054
|
"value": 6,
|
|
1028
1055
|
"type": "FLOAT",
|
|
1056
|
+
"description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
|
|
1029
1057
|
"refId": "functional/size/borderRadius/medium",
|
|
1030
1058
|
"collection": "functional/size",
|
|
1031
1059
|
"mode": "default",
|
|
@@ -1039,6 +1067,7 @@
|
|
|
1039
1067
|
"name": "borderRadius/large",
|
|
1040
1068
|
"value": 12,
|
|
1041
1069
|
"type": "FLOAT",
|
|
1070
|
+
"description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
|
|
1042
1071
|
"refId": "functional/size/borderRadius/large",
|
|
1043
1072
|
"collection": "functional/size",
|
|
1044
1073
|
"mode": "default",
|
|
@@ -1066,6 +1095,7 @@
|
|
|
1066
1095
|
"name": "borderRadius/default",
|
|
1067
1096
|
"value": 6,
|
|
1068
1097
|
"type": "FLOAT",
|
|
1098
|
+
"description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
|
|
1069
1099
|
"refId": "functional/size/borderRadius/default",
|
|
1070
1100
|
"reference": "functional/size/borderRadius/medium",
|
|
1071
1101
|
"collection": "functional/size",
|
|
@@ -1075,25 +1105,5 @@
|
|
|
1075
1105
|
"codeSyntax": {
|
|
1076
1106
|
"web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
|
|
1077
1107
|
}
|
|
1078
|
-
},
|
|
1079
|
-
{
|
|
1080
|
-
"name": "outline/focus/offset",
|
|
1081
|
-
"value": -2,
|
|
1082
|
-
"type": "FLOAT",
|
|
1083
|
-
"refId": "functional/size/outline/focus/offset",
|
|
1084
|
-
"collection": "functional/size",
|
|
1085
|
-
"mode": "default",
|
|
1086
|
-
"group": "functional/size",
|
|
1087
|
-
"scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
|
|
1088
|
-
},
|
|
1089
|
-
{
|
|
1090
|
-
"name": "outline/focus/width",
|
|
1091
|
-
"value": 2,
|
|
1092
|
-
"type": "FLOAT",
|
|
1093
|
-
"refId": "functional/size/outline/focus/width",
|
|
1094
|
-
"collection": "functional/size",
|
|
1095
|
-
"mode": "default",
|
|
1096
|
-
"group": "functional/size",
|
|
1097
|
-
"scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"]
|
|
1098
1108
|
}
|
|
1099
1109
|
]
|