apphouse/dist/styles/getFocusStyles.ts

Component library for React that uses observable state management and theme-able components.

import { BaseStyleProps } from './baseStyles.interface';
import { FocusStyles } from './defaults/themes.interface';
/**
 * @description - Get styles for focused events
 * @returns {FocusStyles}
 */
export const getFocusStyles = ({
  tokens,
  colors
}: BaseStyleProps): FocusStyles => {
  const { borderWidth } = tokens;

  const keyboardFocusStyle = {
    borderStyle: 'solid',
    outline: 'solid',
    borderWidth: borderWidth.default,
    outlineWidth: borderWidth.default,
    outlineOffset: 0,
    borderRadius: tokens.radius.m,
    borderColor: colors.focusRingInset,
    outlineColor: colors.focusRingOutline
  };
  const mouseFocusStyle = {
    borderStyle: 'none',
    outline: 'none',
    borderWidth: 0,
    outlineWidth: 0,
    outlineOffset: 0,
    borderRadius: 0,
    borderColor: 'none',
    outlineColor: 'none'
  };
  return {
    keyboard: keyboardFocusStyle,
    mouse: mouseFocusStyle
  };
};