How to use the styled-system.variant function in styled-system

knobSize: 24,
      trackHeight: 10,
      fontSize: 'medium',
      valueSpacing: '1.65rem',
    },
    large: {
      knobSize: 32,
      trackHeight: 12,
      fontSize: 'large',
      valueSpacing: '1.9rem',
    },
  },
}
/* eslint-enable sort-keys */

export const sliderSize = variant(sliderSizeMap)

import * as React from 'react';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { variant as styledVariant } from 'styled-system';
import { themeGet } from '@styled-system/theme-get';
import { Merge } from 'type-fest';
import { Spinner } from '../Spinner';
import { BaseButton, ButtonHTML, ButtonSizes, BaseButtonProps } from './BaseButton';

type ColorVariants = 'neutral' | 'default' | 'primary' | 'secondary' | 'danger' | string;

const fillButtonVariants = styledVariant({
  key: 'buttonVariants.fill',
});

const fillButtonIconVariants = styledVariant({
  key: 'buttonIconVariants.fill',
});

const outlineButtonVariants = styledVariant({
  key: 'buttonVariants.outline',
});

const outlineButtonIconVariants = styledVariant({
  key: 'buttonIconVariants.outline',
});

// Until we get Icon converted to an emotion component, we'll need to rely on flameName

| 'default'

  /**
   *  @default false
   **/
  rounded?: boolean

  /**
   * Defines the size of Badge diameter.
   * @default "medium"
   */
  size?: BadgeSizes
}

/* eslint-disable sort-keys */
const size = variant({
  prop: 'size',
  variants: {
    small: {
      fontSize: 'xxsmall',
      lineHeight: '16px',
      px: 'xxsmall',
    },
    medium: {
      fontSize: 'xsmall',
      lineHeight: '24px',
      px: 'xsmall',
    },
    large: {
      fontSize: 'medium',
      lineHeight: '32px',
      px: 'xsmall',

body::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: ${(props) => props.theme.colors.border1};
    }

    * {
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    button {
        cursor: pointer;
    }
`

const containers = variant({
  scale: 'containers',
  prop: 'type',
})

const themes = { light: lightTheme }

export { GlobalStyles, containers, themes }

fontFamily,
  fontWeight,
  letterSpacing
} from 'styled-system'

import styled from 'styled-components'
import propTypes from '@styled-system/prop-types'

import Box from './Box'

const Text = styled(Box)(
  compose(
    fontFamily,
    fontWeight,
    letterSpacing,
    variant({ key: 'textStyles' })
  )
)

Text.propTypes = {
  ...Box.propTypes,
  ...propTypes.fontFamily,
  ...propTypes.fontWeight,
  ...propTypes.letterSpacing
}

Text.defaultProps = {
  as: 'div',
  fontFamily: 'sans',
  mt: 0,
  mb: 0,
  mr: 0,

cssProperty: "wordBreak"
});
const wordSpacing = style({
  prop: "wordSpacing",
  cssProperty: "wordSpacing"
});
const wordWrap = style({
  prop: "wordWrap",
  cssProperty: "wordWrap"
});

const hoverState = variant({
  prop: "hover",
  key: "hover"
});
const debugState = variant({
  prop: "debug",
  key: "debug"
});

const Div = styled("div")(
  alignContent,
  alignItems,
  alignSelf,
  all,
  animation,
  animationDelay,
  animationDirection,
  animationDuration,
  animationFillMode,
  animationIterationCount,
  animationName,

import PropTypes from 'prop-types'
import styled from 'styled-components'
import {COMMON} from './constants'
import theme from './theme'
import buttonStyles from './ButtonStyles'
import {compose, variant, layout, fontSize} from 'styled-system'
import systemPropTypes from '@styled-system/prop-types'

const variants = variant({
  variants: {
    small: {
      fontSize: 0
    },
    medium: {
      fontSize: 1
    },
    large: {
      fontSize: 2
    }
  }
})

const Button = styled.button.attrs(({disabled, onClick}) => ({
  onClick: disabled ? undefined : onClick
}))`

${flexWrap}
	${flexDirection}
	${alignItems}
	${justifyContent}
`;

const mainWrapperStyle = css`
	flex: 1;
	${space}
	${width}
	${constainerStyles}
`;

const textStyles = variant({ key: 'texts' });

const headingStyles = variant({ key: 'heading' });

const textStyle = css`
	font-family: ${props => props.theme.fonts.regular};
	margin: 0;
	color: ${props => props.theme.colors.text};
	${space}
	${fontSize}
	${fontWeight}
	${textAlign}
	${lineHeight}
	${color}
	${textStyles}
	${headingStyles}
`;

const headingStyle = css`

color: colors.yellow[700],
    },
    error: {
      backgroundColor: colors.red[100],
      borderColor: colors.red[500],
      color: colors.red[700],
    },
  },
  sizes: {
    navbarHeight: 68,
  },
});

const theme = generateTheme();

export const buttonStyle = variant({
  key: 'buttons',
  prop: 'buttonStyle',
});

export const buttonSize = variant({
  key: 'buttonSizes',
  prop: 'buttonSize',
});

export const messageType = variant({
  key: 'messageTypes',
  prop: 'type',
});

export default theme;

import system from "system-components";
import styled from "styled-components";
import { variant } from "styled-system";

const messageStyle = variant({
  key: "signalColorCombos"
});
const basicMessageStyle = variant({
  key: "signalColors"
});

const MessageWrapper = system(
  {
    display: "flex",
    flex: 1,
    px: 0,
    py: 0,
    fontFamily: "base"
  },
  props => ({
    userSelect: "none"
  })
);