Skip to content
Primer Design System/React

Primer Design System

BrandAbout

Site navigation

  • Introduction
    • Getting started
    • Theming
    • Theme reference
    • Linting
    • System props
    • Core concepts
    • Philosophy
    • Overriding styles
    • Server-side rendering
    • Component status
  • Hooks
    • useSafeTimeout
  • Components
    • ActionList
    • ActionMenu
    • AnchoredOverlay
    • Autocomplete
    • Avatar
    • AvatarPair
    • AvatarStack
    • Box
    • BranchName
    • Breadcrumbs
    • Button
    • ButtonGroup
    • Checkbox
    • CheckboxGroup
    • CircleBadge
    • CircleOcticon
    • CounterLabel
    • Details
    • Dialog
    • FilteredSearch
    • FilterList
    • Flash
    • FormControl
    • Header
    • Heading
    • IconButton
    • Label
    • LabelGroup
    • Link
    • NavList
    • Overlay
    • Pagehead
    • PageLayout
    • Pagination
    • PointerBox
    • Popover
    • ProgressBar
    • RelativeTime
    • Radio
    • RadioGroup
    • SegmentedControl
    • Select
    • SelectPanel
    • Spinner
    • SplitPageLayout
    • StateLabel
    • Octicon
    • SubNav
    • ToggleSwitch
    • TabNav
    • Textarea
    • Text
    • TextInput
    • TextInputWithTokens
    • Timeline
    • Token
    • Tooltip
    • TreeView
    • Truncate
    • UnderlineNav
  • Drafts
    • Dialog v2
    • InlineAutocomplete
    • MarkdownEditor
    • MarkdownViewer
    • UnderlineNav v2
    • PageHeader
    • Hidden
  • Deprecated
    • ActionList (legacy)
    • ActionMenu (legacy)
    • BorderBox
    • Buttons (legacy)
    • ChoiceFieldset
    • ChoiceInputField
    • Dropdown
    • DropdownMenu
    • Flex
    • FormGroup
    • Grid
    • InputField
    • Label
    • Position
    • SelectMenu
    • SideNav
  • GitHub

Theme Reference

The default theme object for Primer React components

Colors in this theme object are imported from Primer Primitives.

  • animation {...}
  • borderWidths [...]
  • breakpoints [...]
  • fonts {...}
  • fontSizes [...]
  • fontWeights {...}
  • lineHeights {...}
  • radii [...]
  • sizes {...}
  • space [...]
  • colorSchemes {...}

See Theming to learn how theming works in Primer React.

Footer

Edit this page on GitHub
1 contributortbenning
Last edited by tbenning on January 6, 2023