UNPKG

@primer/primitives

Version:

Typography, spacing, and color primitives for Primer design system

222 lines (221 loc) • 7.55 kB
{ "borderRadius-default": { "key": "{borderRadius.default}", "$value": ["0.375rem", "6px"], "$description": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.", "$type": "dimension", "$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": "Semantic token: preferred default border radius for standard UI components. Use this in normal component code unless a specific radius is intentionally required.", "$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"] }, "borderRadius-full": { "key": "{borderRadius.full}", "$value": ["624.9375rem", "9999px"], "$type": "dimension", "$description": "Shape token for fully rounded or 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." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 9999, "unit": "px" }, "$type": "dimension", "$description": "Shape token for fully rounded or 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"] }, "borderRadius-large": { "key": "{borderRadius.large}", "$value": ["0.75rem", "12px"], "$description": "Scale token: 12px radius for larger surfaces or softer container treatments.", "$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." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 12, "unit": "px" }, "$description": "Scale token: 12px radius for larger surfaces or softer container treatments.", "$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"] }, "borderRadius-medium": { "key": "{borderRadius.medium}", "$value": ["0.375rem", "6px"], "$description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.", "$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." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 6, "unit": "px" }, "$description": "Scale token: 6px radius in the border-radius scale. Use when selecting a specific radius intentionally.", "$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"] }, "borderRadius-small": { "key": "{borderRadius.small}", "$value": ["0.1875rem", "3px"], "$description": "Scale token: 3px radius for compact UI elements or small component variants.", "$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." } }, "filePath": "src/tokens/functional/size/radius.json5", "isSource": true, "original": { "$value": { "value": 3, "unit": "px" }, "$description": "Scale token: 3px radius for compact UI elements or small component variants.", "$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"] } }