@primer/primitives

{ "borderWidth-default": { "key": "{borderWidth.default}", "$value": ["0.0625rem", "1px"], "$description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": "{borderWidth.thin}", "$description": "Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "key": "{borderWidth.default}" }, "name": "borderWidth-default", "attributes": {}, "path": ["borderWidth", "default"] }, "borderWidth-thick": { "key": "{borderWidth.thick}", "$value": ["0.125rem", "2px"], "$description": "Scale token: 2px border width for emphasis or focus states.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] }, "org.primer.llm": { "usage": ["focus-indicator", "selected-state", "emphasis-border"], "rules": "MUST use for focus rings on interactive elements. Do NOT use for subtle dividers." } }, "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": { "value": 2, "unit": "px" }, "$description": "Scale token: 2px border width for emphasis or focus states.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] }, "org.primer.llm": { "usage": ["focus-indicator", "selected-state", "emphasis-border"], "rules": "MUST use for focus rings on interactive elements. Do NOT use for subtle dividers." } }, "key": "{borderWidth.thick}" }, "name": "borderWidth-thick", "attributes": {}, "path": ["borderWidth", "thick"] }, "borderWidth-thicker": { "key": "{borderWidth.thicker}", "$value": ["0.25rem", "4px"], "$description": "Scale token: 4px border width for strong emphasis.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": { "value": 4, "unit": "px" }, "$description": "Scale token: 4px border width for strong emphasis.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "key": "{borderWidth.thicker}" }, "name": "borderWidth-thicker", "attributes": {}, "path": ["borderWidth", "thicker"] }, "borderWidth-thin": { "key": "{borderWidth.thin}", "$value": ["0.0625rem", "1px"], "$description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": { "value": 1, "unit": "px" }, "$description": "Scale token: 1px border width. Use when selecting an explicit size from the border-width scale.", "$type": "dimension", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "key": "{borderWidth.thin}" }, "name": "borderWidth-thin", "attributes": {}, "path": ["borderWidth", "thin"] }, "boxShadow-thick": { "key": "{boxShadow.thick}", "$value": "inset 0 0 0 0.125rem,2px", "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift", "$type": "custom-string", "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": "inset 0 0 0 {borderWidth.thick}", "$description": "Thick shadow (2px) used instead of a border for emphasis without layout shift", "$type": "custom-string", "key": "{boxShadow.thick}" }, "name": "boxShadow-thick", "attributes": {}, "path": ["boxShadow", "thick"] }, "boxShadow-thicker": { "key": "{boxShadow.thicker}", "$value": "inset 0 0 0 0.25rem,4px", "$description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact", "$type": "custom-string", "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": "inset 0 0 0 {borderWidth.thicker}", "$description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact", "$type": "custom-string", "key": "{boxShadow.thicker}" }, "name": "boxShadow-thicker", "attributes": {}, "path": ["boxShadow", "thicker"] }, "boxShadow-thin": { "key": "{boxShadow.thin}", "$value": "inset 0 0 0 0.0625rem,1px", "$description": "Thin shadow used instead of a border to prevent layout shift", "$type": "custom-string", "filePath": "src/tokens/functional/size/border.json5", "isSource": true, "original": { "$value": "inset 0 0 0 {borderWidth.thin}", "$description": "Thin shadow used instead of a border to prevent layout shift", "$type": "custom-string", "key": "{boxShadow.thin}" }, "name": "boxShadow-thin", "attributes": {}, "path": ["boxShadow", "thin"] }, "focus-outline-offset": { "key": "{focus.outline-offset}", "$value": ["-0.125rem", "-2px"], "$type": "dimension", "$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "filePath": "src/tokens/component/focus.json5", "isSource": true, "original": { "$value": { "value": -2, "unit": "px" }, "$type": "dimension", "$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "key": "{focus.outline-offset}" }, "name": "focus-outline-offset", "attributes": {}, "path": ["focus", "outline-offset"] }, "focus-outline-width": { "key": "{focus.outline-width}", "$value": ["0.125rem", "2px"], "$type": "dimension", "$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] }, "org.primer.llm": { "usage": ["focus-ring", "keyboard-focus", "accessibility"], "rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance." } }, "filePath": "src/tokens/component/focus.json5", "isSource": true, "original": { "$value": { "value": 2, "unit": "px" }, "$type": "dimension", "$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] }, "org.primer.llm": { "usage": ["focus-ring", "keyboard-focus", "accessibility"], "rules": "MUST use for all keyboard focus indicators. Required for WCAG 2.4.7 compliance." } }, "key": "{focus.outline-width}" }, "name": "focus-outline-width", "attributes": {}, "path": ["focus", "outline-width"] }, "outline-focus-offset": { "key": "{outline.focus.offset}", "$value": ["-0.125rem", "-2px"], "$type": "dimension", "$deprecated": ["-0.125rem", "-2px"], "$description": "Deprecated. Use focus.outline-offset instead.", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "filePath": "src/tokens/component/focus.json5", "isSource": true, "original": { "$value": "{focus.outline-offset}", "$type": "dimension", "$deprecated": "{focus.outline-offset}", "$description": "Deprecated. Use focus.outline-offset instead.", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "key": "{outline.focus.offset}" }, "name": "outline-focus-offset", "attributes": {}, "path": ["outline", "focus", "offset"] }, "outline-focus-width": { "key": "{outline.focus.width}", "$value": ["0.125rem", "2px"], "$type": "dimension", "$deprecated": ["0.125rem", "2px"], "$description": "Deprecated. Use focus.outline-width instead.", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "filePath": "src/tokens/component/focus.json5", "isSource": true, "original": { "$value": "{focus.outline-width}", "$type": "dimension", "$deprecated": "{focus.outline-width}", "$description": "Deprecated. Use focus.outline-width instead.", "$extensions": { "org.primer.figma": { "collection": "functional/size", "scopes": ["borderWidth", "effectFloat"] } }, "key": "{outline.focus.width}" }, "name": "outline-focus-width", "attributes": {}, "path": ["outline", "focus", "width"] } }