@fluent-windows/core/es/IconButton/IconButton.styled.js

React components that inspired by Microsoft's Fluent Design System.

import { lighten } from '../styles';

const root = theme => ({
  border: 'none',
  outline: 'none',
  display: 'inline-flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  cursor: 'pointer',
  color: 'inherit',
  borderRadius: '50%',
  overflow: 'hidden',
  transition: theme.transitions.button,
  '&:disabled': {
    color: theme.colors.standard.dark3,
    cursor: 'not-allowed',
    pointerEvents: 'none'
  }
});

const variantStandard = theme => ({
  color: theme.colors.primary.default,
  backgroundColor: 'transparent',
  '&:hover, &:focus': {
    backgroundColor: lighten(theme.colors.primary.light1, 0.08)
  },
  '&:active': {
    backgroundColor: lighten(theme.colors.primary.light1, 0.36)
  }
});

const variantPrimary = theme => ({
  color: theme.colors.white.default,
  backgroundColor: theme.colors.primary.default,
  boxShadow: theme.shadows[3],
  '&:hover, &:focus': {
    backgroundColor: theme.colors.primary.dark1
  },
  '&:active': {
    color: theme.colors.white.default,
    backgroundColor: theme.colors.primary.dark3,
    boxShadow: theme.shadows[4]
  }
});

const sizeSmall = theme => theme.sizes.small.iconButton;

const sizeMedium = theme => theme.sizes.medium.iconButton;

const sizeLarge = theme => theme.sizes.large.iconButton;

export const styles = theme => ({
  root: root(theme),
  variantStandard: variantStandard(theme),
  variantPrimary: variantPrimary(theme),
  sizeSmall: sizeSmall(theme),
  sizeMedium: sizeMedium(theme),
  sizeLarge: sizeLarge(theme)
});