@equinor/eds-utils/dist/esm/utils/templates/focus.mjs

Utility functions and hooks for the Equinor Design System

import { css } from 'styled-components';
import { tokens } from '@equinor/eds-tokens';
import { shorthand } from './common.mjs';

const {
  colors: {
    interactive: {
      focus: {
        rgba: focusColor
      }
    }
  }
} = tokens;
const outlineTemplate = outline => {
  const {
    color = focusColor,
    style = 'dashed',
    width = '2px',
    offset = '0px',
    type
  } = outline;
  const outline_ = {
    color,
    style,
    width,
    offset,
    type
  };
  return css({
    outline: shorthand(outline_),
    outlineOffset: outline_.offset
  });
};

export { outlineTemplate };