@fluent-windows/core/es/styles/createSize.js

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

import { deepMerge } from '../utils';

function createSize(sizes = {}) {
  const defaultSizes = {
    small: {
      button: {
        padding: '0 8px'
      },
      iconButton: {
        padding: 8,
        fontSize: '0.8em'
      }
    },
    medium: {
      button: {
        padding: '3px 12px'
      },
      iconButton: {
        padding: 12
      },
      input: {
        padding: '11px 6px'
      },
      inputWithLabel: {
        padding: '16px 6px 6px'
      },
      inputLabel: {
        transform: 'translate(16px, 12px)'
      },
      inputLabelFocus: {
        transform: 'scale(0.65) translate(12px, 8px)'
      }
    },
    large: {
      button: {
        padding: '8px 42px'
      },
      iconButton: {
        padding: 16,
        fontSize: '1.2em'
      }
    }
  };
  return deepMerge(sizes, defaultSizes);
}

export default createSize;