outlineStyle

A utility to apply the focus outline to an element via a selector, typically the focus of another element.

This utility should only be used when applying focus styles indirectly to an element.If you want to apply focus styles directly to your custom focusable element, use the focus outline via atoms or Box props.

Indirectly styling focus outlines

Requires a selector string that targets the element in which the visual focus style should be applied to. Returns a Vanilla Extract style object containing the designed focus outline.

The selector will vary depending on the DOM structure, and the relationship between the focusable and focus styled elements. Refer to Complex Selectors for syntax guidance.

// stylesheet.css.ts
export const visualFocus = style([
  outlineStyle(/* selector string */),
]);

Basic example

Returns a vanilla-extract compatible object that needs to be passed through one of Vanilla Extract’s styling APIs (e.g. ‘globalStyle’) to create the actual styles.

// CustomFormComponent.tsx
import { Box } from 'braid-design-system';
import * as styles from './CustomFormComponent.css.ts';

export const CustomFormComponent = () => (
  <Box>
    <Box component="input" type="range" className={styles.hiddenField} />
    <Box className={styles.thumb} />
  </Box>
);

// CustomFormComponent.css.ts
import { style } from '@vanilla-extract/css';
import { outlineStyle } from 'braid-design-system/css';

export const hiddenField = style({
  outline: 'none', // Remove default outline
});

export const thumb = style([
  // { custom thumb styles },
  outlineStyle(`${hiddenField}:focus-visible ~ &`),
]);

Usage with transitions

The outlineStyle utility applies a transition to the outline.To transition additional properties, combine them with the outline transition.

// stylesheet.css.ts
import { style } from '@vanilla-extract/css';
import { outlineStyle } from 'braid-design-system/css';
import { vars } from '../../themes/vars.css';

const {
  transition: outlineTransition,
  ...restOutlineStyles
 } = outlineStyle(/* selector string */);
  
export const visualFocus = style([
  {
    transition: [vars.transition.fast, outlineTransition].join(', '),
  },
  restOutlineStyles,
]);

Braid Logo