content: import React from 'react';
  
  import { Box, Button, Grommet, Heading } from 'grommet';
  
  const kindButtonTheme = {
    global: {
      colors: {
        brand: '#ee9933',
        'brand-contrast': '#ee993333',
        active: '#eecc33',
      },
      font: { family: 'Arial' },
    },
    button: {
      default: {
        color: 'text',
        border: undefined,
        padding: {
          horizontal: '12px',
          vertical: '8px',
        },
      },
      primary: {
        background: { color: 'brand' },
        border: undefined,
        color: 'text-strong',
        font: { weight: 'bold' },
        padding: {
          horizontal: '12px',
          vertical: '8px',
        },
      },
      secondary: {
        border: { color: 'brand', width: '4px' },
        color: 'text',
        padding: {
          horizontal: '8px',
          vertical: '4px',
        },
      },
      active: {
        background: { color: 'brand-contrast' },
        color: 'text',
        secondary: {
          background: 'none',
          border: {
            color: 'brand-contrast',
          },
        },
      },
      disabled: {
        opacity: 0.3,
        secondary: {
          border: { color: 'text-weak' },
        },
      },
      hover: {
        background: { color: 'active' },
        secondary: {
          border: { color: 'active' },
        },
      },
    },
  };
  
  const customTheme = {
    global: {
      font: {
        family: 'Arial',
      },
    },
    button: {
      border: {
        radius: undefined,
        color: '#2196f3',
      },
      disabled: {
        color: 'orange',
        border: {
          color: 'orange',
        },
        extend: `border: 10px dashed red;`,
      },
      padding: {
        vertical: '12px',
        horizontal: '24px',
      },
      primary: {
        color: '#2196f3',
        active: {
          border: {
            color: 'red',
          },
          extend: `background: cadetblue;`,
        },
        extend: `background: skyblue; border: 5px dotted green;`,
      },
      extend: (props) => {
        let extraStyles = '';
        if (props.primary) {
          extraStyles = `
              text-transform: uppercase;
            `;
        }
        return `
            font-size: 12px;
            font-weight: bold;
            ${extraStyles}
          `;
      },
    },
  };
  
  const coloredButton = {
    button: {
      border: {
        color: 'accent-1',
      },
      color: { dark: 'accent-1', light: 'dark-2' },
      primary: {
        color: 'neutral-2',
      },
    },
  };
  
  export const ThemedButtons = () => (
    <>
      <Grommet theme={kindButtonTheme}>
        <Box gap="small" pad="large">
          <Heading level={2} size="small">
            new custom theme
          </Heading>
          <Box align="center" direction="row" gap="small">
            <Button label="default" onClick={() => {}} />
            <Button label="active default" onClick={() => {}} active />
            <Button label="disabled default" onClick={() => {}} disabled />
          </Box>
          <Box align="center" direction="row" gap="small">
            <Button label="primary" onClick={() => {}} primary />
            <Button label="active primary" onClick={() => {}} primary active />
            <Button
              label="disabled primary"
              onClick={() => {}}
              primary
              disabled
            />
          </Box>
          <Box align="center" direction="row" gap="small">
            <Button label="secondary" onClick={() => {}} secondary />
            <Button
              label="active secondary"
              onClick={() => {}}
              secondary
              active
            />
            <Button
              label="disabled secondary"
              onClick={() => {}}
              secondary
              disabled
            />
          </Box>
        </Box>
      </Grommet>
      <Grommet theme={customTheme}>
        <Box
          align="center"
          justify="center"
          pad="large"
          direction="row"
          gap="small"
        >
          <Button label="custom theme" onClick={() => {}} primary />
          <Button
            label="custom active primary"
            onClick={() => {}}
            primary
            active
          />
          <Button label="primary disabled" onClick={() => {}} primary disabled />
          <Button label="Disabled" onClick={() => {}} disabled />
          <Button label="Plain Disabled" onClick={() => {}} plain disabled />
        </Box>
      </Grommet>
      <Grommet theme={coloredButton}>
        <Box align="center" pad="large">
          <Button as="span" label="theme on dark background" primary />
        </Box>
      </Grommet>
      <Box align="center" pad="large">
        <Button as="span" label="Custom as=span" />
      </Box>
    </>
  );
  
  ThemedButtons.storyName = 'Themed Buttons';
  
  export default {
    title: 'Controls/Button/Custom Themed/Themed Buttons',
  };
  