@primer/primitives

{ "borderRadius-default": { "key": "{borderRadius.default}", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-default) /* utility class: .rounded-2 */" } } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": "{borderRadius.medium}", "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-default) /* utility class: .rounded-2 */" } } }, "key": "{borderRadius.default}" }, "name": "borderRadius-default", "attributes": {}, "path": ["borderRadius", "default"], "value": "0.375rem", "type": "dimension", "description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt" }, "borderRadius-full": { "key": "{borderRadius.full}", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-full) /* utility class: .circle */" } }, "org.primer.llm": { "usage": ["avatar", "pill-badge", "circular-button"], "rules": "Use for avatars and pill-shaped elements. Do NOT use for rectangular containers." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 9999, "unit": "px" }, "$type": "dimension", "$description": "Use this border radius for pill shaped elements", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-full) /* utility class: .circle */" } }, "org.primer.llm": { "usage": ["avatar", "pill-badge", "circular-button"], "rules": "Use for avatars and pill-shaped elements. Do NOT use for rectangular containers." } }, "key": "{borderRadius.full}" }, "name": "borderRadius-full", "attributes": {}, "path": ["borderRadius", "full"], "value": "624.9375rem", "type": "dimension", "description": "Use this border radius for pill shaped elements" }, "borderRadius-large": { "key": "{borderRadius.large}", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-large) /* utility class: .rounded-3 */" } }, "org.primer.llm": { "usage": ["dialog", "card", "modal"], "rules": "Recommended for dialogs and modals." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 12, "unit": "px" }, "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-large) /* utility class: .rounded-3 */" } }, "org.primer.llm": { "usage": ["dialog", "card", "modal"], "rules": "Recommended for dialogs and modals." } }, "key": "{borderRadius.large}" }, "name": "borderRadius-large", "attributes": {}, "path": ["borderRadius", "large"], "value": "0.75rem", "type": "dimension", "description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired." }, "borderRadius-medium": { "key": "{borderRadius.medium}", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */" } }, "org.primer.llm": { "usage": ["button", "input", "textarea", "select", "card", "container"], "rules": "Default choice for most components. Use for inputs, cards, and general containers." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 6, "unit": "px" }, "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */" } }, "org.primer.llm": { "usage": ["button", "input", "textarea", "select", "card", "container"], "rules": "Default choice for most components. Use for inputs, cards, and general containers." } }, "key": "{borderRadius.medium}" }, "name": "borderRadius-medium", "attributes": {}, "path": ["borderRadius", "medium"], "value": "0.375rem", "type": "dimension", "description": "Medium border radius (6px). The default choice for most buttons, cards, and containers" }, "borderRadius-small": { "key": "{borderRadius.small}", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-small) /* utility class: .rounded-1 */" } }, "org.primer.llm": { "usage": ["badge", "tag", "label", "small-input"], "rules": "Use for small UI elements under 16px height. Do NOT use for buttons or cards." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 3, "unit": "px" }, "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["radius"], "codeSyntax": { "web": "var(--borderRadius-small) /* utility class: .rounded-1 */" } }, "org.primer.llm": { "usage": ["badge", "tag", "label", "small-input"], "rules": "Use for small UI elements under 16px height. Do NOT use for buttons or cards." } }, "key": "{borderRadius.small}" }, "name": "borderRadius-small", "attributes": {}, "path": ["borderRadius", "small"], "value": "0.1875rem", "type": "dimension", "description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height" } }