How to use the @storybook/theming.styled.button function in @storybook/theming

'&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },

  '::placeholder': {
    color: theme.color.mediumdark,
  },

  '&:placeholder-shown ~ button': {
    // hide cancel button using CSS only
    opacity: 0,
  },
}));

export type CancelButtonProps = React.ComponentProps<'button'>;

const CancelButton = styled.button(({ theme }) => ({
  border: 0,
  margin: 0,
  padding: 4,
  textDecoration: 'none',

  background: theme.appBorderColor,
  borderRadius: '1em',
  cursor: 'pointer',
  opacity: 1,
  transition: 'all 150ms ease-out',

  position: 'absolute',
  top: '50%',
  transform: 'translateY(-50%)',
  right: 2,

import React from 'react';
import { styled, color, typography } from '@storybook/theming';

interface ButtonProps extends StyledButtonProps {
  onClick?: Function;
  numberOfButtons: number;
  text: string;
}

interface StyledButtonProps {
  variant: 'small' | 'large';
  outline: boolean;
}

const StyledButton = styled.button(({ outline, variant }: StyledButtonProps) => ({
  backgroundColor: outline ? 'white' : color.primary,
  borderRadius: 20,
  border: `1px solid ${color.primary}`,
  cursor: 'pointer',
  color: outline ? color.primary : 'white',
  fontFamily: typography.fonts.base,
  fontSize: variant === 'small' ? typography.size.s3 : typography.size.l3,
  padding: '10px 20px',
  margin: 10,
}));

const TypescriptButton = (props: ButtonProps) => {
  const { variant, outline, numberOfButtons, text } = props;

  const maxNumberOfButtons = numberOfButtons > 15 || numberOfButtons < 0 ? 1 : numberOfButtons;

overflow: 'hidden',
  position: 'relative',
  color: '#1ea7fd',
  '& > *': {
    margin: 'auto',
    height: '100%',
    width: '100%',
  },
});
export const Detail = styled.span(text, {
  textAlign: 'right',
  paddingRight: 10,
  color: '#999',
});

export const Item = styled.button({
  display: 'flex',
  height: 32,
  boxSizing: 'border-box',
  border: '0 none',
  borderBottom: '1px solid #eee',
  width: '100%',
  textAlign: 'left',
  padding: 0,
  background: 'none',
  cursor: 'pointer',

  '&:last-child': {
    borderBottom: '0 none',
  },

  '&:hover, &:focus': {

import { styled } from '@storybook/theming';

export default styled.button(
  {
    border: '1px solid rgba(0, 0, 0, 0)',
    font: 'inherit',
    background: 'none',
    boxShadow: 'none',
    padding: 0,
    ':hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.05)',
      border: '1px solid #ccc',
    },
  },
  ({ highlight }) =>
    highlight
      ? [
          {
            backgroundColor: 'rgba(0, 0, 0, 0.05)',

'& > div:first-child': {
    borderTop: '0 none',
  },
  '&:hover': {
    button: {
      visibility: 'visible',
    },
  },
}));

export const HeaderItem = styled.div({
  fontSize: 18,
  fontWeight: 500,
});

export const Button = styled.button(({ theme }) => ({
  color: theme.color.secondary,
  backgroundColor: theme.color.secondary,
  fontSize: 11,
  whiteSpace: 'nowrap',
  borderStyle: 'none',
  borderWidth: 0,
  padding: '5px 14px',
  borderRadius: 30,
  margin: '6px 6px 6px 0',
  transition: 'all .2s ease',
  cursor: 'pointer',
  '&:hover, &:focus': {
    backgroundColor: theme.color.secondary,
    color: theme.color.secondary,
    outline: '0 none',
    cursor: 'pointer',

float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
    display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
    alignItems: 'center',
    width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',

    input: {
      marginLeft: 10,
      marginRight: 0,
      marginTop: 0,
      marginBottom: 0,
    },
  };
});

const Item = styled.button(
  ({ theme }) => ({
    textDecoration: 'none',
    padding: '10px 15px',
    cursor: 'pointer',
    fontWeight: theme.typography.weight.bold,
    fontSize: theme.typography.size.s2 - 1,
    lineHeight: 1,
    height: 40,
    border: 'none',
    borderTop: '3px solid transparent',
    borderBottom: '3px solid transparent',
    background: 'transparent',

    '&:focus': {
      outline: '0 none',
      borderBottom: `3px solid ${theme.color.secondary}`,

import { TokenGroup } from '../interfaces/token-group.interface';
import { HardCodedValuesTable } from './HardCodedValuesTable';
import { IconChevronLeft, IconChevronRight } from './Icons';
import { TokenTable } from './TokenTable';

const Panel = styled.div(() => ({
  color: '#444',
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
  fontWeight: 'normal',
  lineHeight: 1.5,
  maxWidth: '940px',
  padding: '20px'
}));

const Button = styled.button(() => ({
  background: 'transparent',
  border: 'none',
  color: '#1ea7fd',
  cursor: 'pointer',
  fontWeight: 'bold',
  padding: 0,

  '& svg': {
    verticalAlign: 'middle',
    position: 'relative',
    top: '-1px',
    width: '16px',
    height: '16px'
  }
}));

({ shown }) =>
    shown
      ? {}
      : {
          display: 'none',
        },
  ({ failed }) =>
    failed
      ? {
          border: '1px solid #fadddd',
          backgroundColor: '#fff5f5',
        }
      : {}
);

const Button = styled.button({
  display: 'table-cell',
  textTransform: 'uppercase',
  letterSpacing: '3.5px',
  fontSize: 12,
  fontWeight: 'bolder',
  color: 'rgb(130, 130, 130)',
  border: '1px solid rgb(193, 193, 193)',
  textAlign: 'center',
  borderRadius: 2,
  padding: 5,
  cursor: 'pointer',
  paddingLeft: 8,
  margin: '0 0 0 5px',
  backgroundColor: 'inherit',
  verticalAlign: 'top',
  outline: 0,

import React from 'react';
import PropTypes from 'prop-types';

import { styled } from '@storybook/theming';

const Container = styled.div(({ theme }) => ({
  position: 'absolute',
  bottom: 0,
  right: 0,
  maxWidth: '100%',
  display: 'flex',
  background: theme.background.content,
}));

export const ActionButton = styled.button(({ theme }) => ({
  border: '0 none',
  padding: '4px 10px',
  cursor: 'pointer',
  display: 'flex',
  alignItems: 'center',

  color: theme.color.defaultText,
  background: theme.background.content,

  fontSize: 12,
  lineHeight: '16px',
  fontWeight: theme.typography.weight.bold,

  borderTop: `1px solid ${theme.appBorderColor}`,
  borderLeft: `1px solid ${theme.appBorderColor}`,
  marginLeft: -1,

import { styled } from '@storybook/theming';

export interface TabButtonProps {
  active?: boolean;
  textColor?: string;
}

export const TabButton = styled.button(
  {
    whiteSpace: 'normal',
    display: 'inline-flex',
    overflow: 'hidden',
    verticalAlign: 'top',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    textDecoration: 'none',

    '&:empty': {
      display: 'none',
    },
  },
  ({ theme }) => ({
    padding: '0 15px',