@primer/primitives/dist/css/functional/size/border.css

Typography, spacing, and color primitives for Primer design system

:root {
  --borderWidth-thick: 0.125rem; /** Scale token: 2px border width for emphasis or focus states. */
  --borderWidth-thicker: 0.25rem; /** Scale token: 4px border width for strong emphasis. */
  --borderWidth-thin: 0.0625rem; /** Scale token: 1px border width. Use when selecting an explicit size from the border-width scale. */
  --focus-outline-offset: -0.125rem; /** Focus outline offset (-2px). Negative value creates an inset outline for keyboard focus indicators, ensuring the focus ring stays within the element bounds */
  --focus-outline-width: 0.125rem; /** Focus outline width (2px). Standard width for keyboard focus indicators to meet WCAG 2.4.7 accessibility requirements */
  --borderWidth-default: var(--borderWidth-thin); /** Semantic token: preferred default border width for standard component borders. Use this in normal component code unless a specific scale value is required. */
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
  --boxShadow-thicker: inset 0 0 0 var(--borderWidth-thicker); /** Thickest shadow (4px) used for high emphasis borders without layout shift. Use sparingly for maximum visual impact */
  --boxShadow-thin: inset 0 0 0 var(--borderWidth-thin); /** Thin shadow used instead of a border to prevent layout shift */
  --outline-focus-offset: var(--focus-outline-offset); /** Deprecated. Use focus.outline-offset instead. */
  --outline-focus-width: var(--focus-outline-width); /** Deprecated. Use focus.outline-width instead. */
}