@primer/primitives/dist/docs/functional/size/border.json

Typography, spacing, and color primitives for Primer design system

{
  "borderWidth-default": {
    "key": "{borderWidth.default}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["borderWidth", "effectFloat"]
      }
    },
    "filePath": "src/tokens/functional/size/border.json5",
    "isSource": true,
    "original": {
      "$value": "{borderWidth.thin}",
      "$description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)",
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["borderWidth", "effectFloat"]
        }
      },
      "key": "{borderWidth.default}"
    },
    "name": "borderWidth-default",
    "attributes": {},
    "path": ["borderWidth", "default"],
    "value": "0.0625rem",
    "type": "dimension",
    "description": "Default border width for most UI elements. Alias of borderWidth.thin (1px)"
  },
  "borderWidth-thick": {
    "key": "{borderWidth.thick}",
    "$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": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries",
      "$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"],
    "value": "0.125rem",
    "type": "dimension",
    "description": "Thick 2px border for emphasis. Use for focus indicators, selected states, or to emphasize important boundaries"
  },
  "borderWidth-thicker": {
    "key": "{borderWidth.thicker}",
    "$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": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators",
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["borderWidth", "effectFloat"]
        }
      },
      "key": "{borderWidth.thicker}"
    },
    "name": "borderWidth-thicker",
    "attributes": {},
    "path": ["borderWidth", "thicker"],
    "value": "0.25rem",
    "type": "dimension",
    "description": "Extra thick 4px border for maximum emphasis. Use sparingly for high-contrast focus indicators or critical visual separators"
  },
  "borderWidth-thin": {
    "key": "{borderWidth.thin}",
    "$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": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface",
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["borderWidth", "effectFloat"]
        }
      },
      "key": "{borderWidth.thin}"
    },
    "name": "borderWidth-thin",
    "attributes": {},
    "path": ["borderWidth", "thin"],
    "value": "0.0625rem",
    "type": "dimension",
    "description": "Standard 1px border width. Use for most borders, dividers, and outlines throughout the interface"
  },
  "boxShadow-thick": {
    "key": "{boxShadow.thick}",
    "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"],
    "value": "inset 0 0 0 0.125rem",
    "type": "custom-string",
    "description": "Thick shadow (2px) used instead of a border for emphasis without layout shift"
  },
  "boxShadow-thicker": {
    "key": "{boxShadow.thicker}",
    "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"],
    "value": "inset 0 0 0 0.25rem",
    "type": "custom-string",
    "description": "Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact"
  },
  "boxShadow-thin": {
    "key": "{boxShadow.thin}",
    "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"],
    "value": "inset 0 0 0 0.0625rem",
    "type": "custom-string",
    "description": "Thin shadow used instead of a border to prevent layout shift"
  },
  "outline-focus-offset": {
    "key": "{outline.focus.offset}",
    "$extensions": {
      "org.primer.figma": {
        "collection": "functional/size",
        "scopes": ["borderWidth", "effectFloat"]
      }
    },
    "filePath": "src/tokens/functional/size/border.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": -2,
        "unit": "px"
      },
      "$description": "Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds",
      "$type": "dimension",
      "$extensions": {
        "org.primer.figma": {
          "collection": "functional/size",
          "scopes": ["borderWidth", "effectFloat"]
        }
      },
      "key": "{outline.focus.offset}"
    },
    "name": "outline-focus-offset",
    "attributes": {},
    "path": ["outline", "focus", "offset"],
    "value": "-0.125rem",
    "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"
  },
  "outline-focus-width": {
    "key": "{outline.focus.width}",
    "$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/functional/size/border.json5",
    "isSource": true,
    "original": {
      "$value": {
        "value": 2,
        "unit": "px"
      },
      "$description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements",
      "$type": "dimension",
      "$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": "{outline.focus.width}"
    },
    "name": "outline-focus-width",
    "attributes": {},
    "path": ["outline", "focus", "width"],
    "value": "0.125rem",
    "type": "dimension",
    "description": "Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements"
  }
}