Focus outlines

The default focus styles are defined in You can change the following custom properties to alter focus appearance:

  • --focus-outline-width: 2px
  • --focus-outline-offset: 3px
  • --focus-outline-color: currentColor
  • --focus-outline-style: dotted
  • --focus-form-outline-width: 3px
  • --focus-form-outline-offset: 0
  • --focus-form-outline-color: "theme(colors.primary.DEFAULT / .5)"
  • --focus-form-outline-style: solid

If you want to override the outline colour on a per component basis you can set a colour by adding an outline-* class.

When your browser supports focus-visible, Peak will automatically disable the outlines upon focus and show then upon focus-visible.