@component-driven/mixins

$3

Creates consistent :focus styles for any element.

> Note: Please import "focus-visible"; once in your application.

``javascript
import 'focus-visible' // :focus-visible polyfill
import styled, { ThemeProvider } from 'styled-components'
import WithSelector from '@component-driven/with-selector'
import { focusRing } from './'

const Button = styled('button')
padding: 10px;
border: 2px solid blue;
border-radius: 4px;
:hover {
background: red;
}
${focusRing('primary')}

; theme={{
colors: {
primary: '#fc0'
}
}}
>
Button{' '}

Focused


Focused


`

$3

Can be used separately to add consistent styles to other elements

`javascript
import styled, { ThemeProvider } from 'styled-components'
import { focusBoxShadow } from './'

const theme = {
colors: {
token: '#fc0'
}
}

const Example = styled('div')
padding: 10px;
border: 1px solid;
border-color: ${props => props.theme.colors.token};
${focusBoxShadow('token')}

;
Box with box-shadow "focus" effect

`

$3

Creates consistent :disabled styles for any element.

`javascript
import styled from 'styled-components'
import { disabled } from './'

const Select = styled('select')
${disabled()}

;
Select...

``