How to use the @shopgate/pwa-common/helpers/config.themeConfig.colors function in @shopgate/pwa-common

const primary = (disabled, flat) => {
  if (!flat) {
    if (disabled) {
      // Regular disabled button style.
      return createButtonStyles(themeConfig.colors.shade4, themeConfig.colors.shade7);
    }

    // Regular enabled button style.
    return createButtonStyles(themeConfig.colors.accentContrast, themeConfig.colors.accent);
  }

  if (disabled) {
    // Flat disabled button style.
    return createButtonStyles(themeConfig.colors.shade4, null);
  }

  // Flat enabled button style.
  return createButtonStyles(themeConfig.colors.accent, null);
};

import { css } from 'glamor';
// TODO: Remove the usage of themeConfig here
import { themeConfig } from '@shopgate/pwa-common/helpers/config';

const container = css({
  background: themeConfig.colors.background,
  display: 'flex',
  flexDirection: 'column',
  flexShrink: 0,
});

const messageBase = {
  padding: `${themeConfig.variables.gap.small}px ${themeConfig.variables.gap.big}px`,
  fontSize: '0.875rem',
  fontWeight: 500,
  ':not(:last-child)': {
    marginBottom: themeConfig.variables.gap.small * 0.5,
  },
};

const info = css(messageBase, {
  background: themeConfig.colors.accent,

import { css } from 'glamor';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';

const wrapper = css({
  position: 'relative',
  textAlign: 'center',
  color: themeConfig.colors.shade9,
  fontSize: 12,
  paddingBottom: 20,
});

const unselectable = css({
  WebkitTouchCallout: 'none',
  WebkitUserSelect: 'none',
  userSelect: 'none',
});

const deviceId = css({
  wordBreak: ['keep-all', 'break-word'],
  hyphens: 'auto',
  padding: `0 ${themeConfig.variables.gap.big}px`,
});

color: themeConfig.colors.ctaContrast,
}).toString();

/**
 * Styling that is applied to the button when checkmark is shown.
 */
const buttonSuccess = css({
  background: themeConfig.colors.ctaContrast,
  color: themeConfig.colors.cta,
}).toString();

/**
 * Styling that is applied to the button when it is disabled.
 */
const buttonDisabled = css({
  background: themeConfig.colors.shade5,
  color: themeConfig.colors.ctaContrast,
  boxShadow: themeConfig.shadows.buttons.disabled,
}).toString();

/**
 * Basic icon style that is always applied to all icons.
 */
const icon = css({
  transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
  opacity: 1,
  position: 'absolute',
}).toString();

/**
 * Icon style that is applied only to the spinner icon.
 */

const icon = css({
  width: 24,
  height: 24,
}).toString();

const label = css({
  flex: 1,
  fontSize: '1rem',
  lineHeight: 1.5,
  marginLeft: themeConfig.variables.gap.small,
  marginBottom: themeConfig.variables.gap.small,
}).toString();

const active = css({
  color: themeConfig.colors.primary,
}).toString();

export default {
  input,
  icon,
  container,
  label,
  active,
};

import { css } from 'glamor';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';

const wrapper = css({
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
  width: '100%',
  justifyContent: 'center',
  textAlign: 'center',
  background: themeConfig.colors.shade8,
}).toString();

const icon = css({
  width: 216,
  color: themeConfig.colors.primary,
}).toString();

const headline = css({
  fontSize: '1.25rem',
  fontWeight: 500,
  marginTop: 30,
}).toString();

const text = css({
  marginTop: themeConfig.variables.gap.big,
  padding: `0 ${themeConfig.variables.gap.big}px`,

overflow: 'hidden',
  width: '100%',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
};

const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';

/**
 * The styles for the placeholder text.
 */
const placeholder = css({
  position: 'absolute',
  pointerEvents: 'none',
  top: 24,
  color: themeConfig.colors.shade4,
  willChange: 'transform',
  transition: `opacity ${easing}`,
  ...ellipsisLine,
}).toString();

/**
 * The styles for the invisible hint text.
 */
const placeholderInactive = css({
  opacity: 0,
}).toString();

/**
 * Gets the style classes for the underline element.
 * @param {boolean} visible Whether the hint is visible.
 * @return {string} The style classes.

const dot = {
  display: 'inline-block',
  margin: 5,
  borderRadius: '50%',
  width: themeConfig.variables.gap.small,
  height: themeConfig.variables.gap.small,
};

const inactiveIndicator = css({
  ...dot,
  backgroundColor: themeConfig.colors.shade5,
}).toString();

const activeIndicator = css({
  ...dot,
  backgroundColor: themeConfig.colors.shade6,
}).toString();

const container = css({}).toString();

const slide = css({}).toString();

export default {
  slider,
  indicator,
  inactiveIndicator,
  activeIndicator,
  container,
  slide,
};

* Renders a glowing component that is visible when the user interacts with the element.
 */
class Glow extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    color: PropTypes.string,
    styles: PropTypes.shape({
      container: PropTypes.shape(),
      glow: PropTypes.shape(),
      hover: PropTypes.shape(),
    }),
  };

  static defaultProps = {
    color: themeConfig.colors.shade8,
    className: null,
    styles: {
      container: null,
      glow: null,
      hover: null,
    },
  };

  /**
   * The component constructor.
   * @param {Object} props The component props.
   */
  constructor(props) {
    super(props);

    this.timeout = null;

* The style object for a one line text element with an ellipsis on overflow.
 */
const ellipsisLine = {
  overflow: 'hidden',
  width: '100%',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
};

const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';

/**
 * The styles for the error label.
 */
const labelError = css({
  color: themeConfig.colors.error,
}).toString();

/**
 * Regular label is hidden, because placeholder is visible
 */
const labelRegular = css({
  opacity: 0,
}).toString();

/**
 * The styles for the focused label.
 */
const labelFocus = css({
  color: themeConfig.colors.focus,
}).toString();