How to use the @storybook/design-system.styles.color function in @storybook/design-system

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link, styles } from '@storybook/design-system';
import { rgba } from 'polished';
import GatsbyLink from './GatsbyLink';

const boxLinkStyles = `
  && {
    display: block;
    background: ${styles.color.lightest};
    border: 1px solid ${styles.color.border};
    border-radius: 4px;
    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;

    &:hover {
      border-color: ${rgba(styles.color.secondary, 0.5)};
      transform: translate3d(0, -3px, 0);
      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
    }

    &:active {
      border-color: ${rgba(styles.color.secondary, 1)};
      transform: translate3d(0, 0, 0);
    }
  }
`;

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { styles } from '@storybook/design-system';
import Stat from './Stat';

const Wrapper = styled.div`
  background: ${styles.color.green};
  padding: 20px;
`;

storiesOf('Basics|Stat', module)
  .addParameters({ component: Stat })
  .addDecorator(story => {story()})
  .add('default', () => );

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link, styles } from '@storybook/design-system';
import { rgba } from 'polished';
import GatsbyLink from './GatsbyLink';

const boxLinkStyles = `
  && {
    display: block;
    background: ${styles.color.lightest};
    border: 1px solid ${styles.color.border};
    border-radius: 4px;
    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;

    &:hover {
      border-color: ${rgba(styles.color.secondary, 0.5)};
      transform: translate3d(0, -3px, 0);
      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
    }

    &:active {
      border-color: ${rgba(styles.color.secondary, 1)};
      transform: translate3d(0, 0, 0);
    }
  }
`;

`

const Controls = styled.div`
  user-select: none;
  grid-area: controls;
  display: flex;
  justify-content: center;
  align-items: center;
`
const Image = styled.img`
  height: 20px;
`
const Project = styled.li`
  position: relative;
  padding: 12px;
  border-bottom: 1px solid ${styles.color.mediumlight};
  cursor: ${props => (props.isDisabled ? "default" : "pointer")};
  word-wrap: break-word;
  transition: all 0.2s;
  &:hover {
    background: ${props => (props.isDisabled ? "transparent" : styles.color.lighter)};
  }
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s;
    background-image: linear-gradient(

display: block;
  height: 16px;
  color: ${styles.color.mediumdark};
`
const Output = styled.small`
  display: block;
  height: 14px;
  color: ${props => (props.error ? styles.color.negative : styles.color.mediumdark)};
  font-family: monospace;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
`
const Button = styled.button`
  font-size: 0.75em;
  background: ${styles.color.primary};
  color: white;
  border: 0;
  border-radius: 20px;
  padding: 8px 12px;
  font-weight: bold;
  outline: 0;
  cursor: pointer;
`
const Remove = styled.button`
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  background: none;
  outline: 0;
`