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

const container = css({
  display: 'flex',
  marginLeft: -1, // Removes margin of svg.
}).toString();

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 container = css({
  bottom: 0,
  backgroundColor: '#fafafa',
  boxShadow: themeConfig.shadows.scannerBar,
  fontSize: 14,
  alignItems: 'center',
}).toString();

const column = css({
  margin: `${themeConfig.variables.gap.big}px`,
  ':not(:first-child)': {
    marginLeft: 0,
  },
}).toString();

export default {
  container,
  column,
};

const button = (text, background) => ({
  position: 'relative',
  display: 'inline-block',
  outline: 0,
  color: text,
  backgroundColor: background,
  minWidth: 64,
  ...themeConfig.variables.buttonBase,
});

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

const buttonPadding = `0 ${themeConfig.variables.gap.big}px 0`;

/**
 * Creates the button style.
 * @param {string} text The text color.
 * @param {string|null} background The fill color.
 * @return {Object} The button style.
 */
const button = (text, background) => ({
  position: 'relative',
  display: 'inline-block',
  outline: 0,
  color: text,
  backgroundColor: background,
  minWidth: 64,
  ...themeConfig.variables.buttonBase,
});

* @returns {string} The style class name.
 */
const chip = (hasRemoveButton = true, inverted = false) => css({
  ...chipBase(hasRemoveButton),
  backgroundColor: (inverted ? themeConfig.colors.accent : themeConfig.colors.accentContrast),
  color: (inverted ? themeConfig.colors.accentContrast : themeConfig.colors.accent),
}).toString();

const removeButton = css({
  flexShrink: 0,
  padding: 0,
}).toString();

const name = css({
  paddingLeft: (themeConfig.variables.gap.small * 0.5),
  paddingRight: (themeConfig.variables.gap.small * 0.5),
  paddingTop: 3,
  paddingBottom: 3,
  fontSize: 12,
  fontWeight: 500,
  textOverflow: 'ellipsis',
  maxWidth: '100%',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  display: 'block',
  lineHeight: '1',
  color: 'inherit',
}).toString();

export default {
  chip,
  removeButton,

fontSize: 14,
    lineHeight: 1,
    padding: '.5em 10px',
    position: 'absolute',
    top: 16,
    right: 16,
    zIndex: 10,
  }).toString(),
};

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();

const outerGap = 40;

const container = css({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  width: `calc(100vw - ${outerGap * 2}px)`,
  maxHeight: `calc(100vh - ${outerGap * 2}px)`,
  borderRadius: 2,
  boxShadow: themeConfig.shadows.dialog,
  background: themeConfig.colors.light,
}).toString();

const content = css({
  padding: themeConfig.variables.gap.small * 3,
}).toString();

const title = css({
  fontSize: '1.25em',
  lineHeight: themeConfig.typography.lineHeight,
  fontWeight: 500,
  paddingBottom: themeConfig.variables.gap.small,
  marginTop: '-.25em',
}).toString();

const body = css({
  color: themeConfig.colors.shade6,
  flexGrow: 1,
  overflow: 'auto',
}).toString();

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

/**
 * The styles for the container element.
 */
const formElement = css({
  position: 'relative',
  paddingBottom: themeConfig.variables.gap.big,
  width: '100%',
}).toString();

/**
 * Adds an additional gap at the top for floating labels.
 * @type {string}
 */
const labelReservedSpace = css({
  paddingTop: themeConfig.variables.gap.big * 1.5,
}).toString();

export default {
  formElement,
  labelReservedSpace,
};

/**
 * The styles for the container element.
 */
const formElement = css({
  position: 'relative',
  paddingBottom: themeConfig.variables.gap.big,
  width: '100%',
}).toString();

/**
 * Adds an additional gap at the top for floating labels.
 * @type {string}
 */
const labelReservedSpace = css({
  paddingTop: themeConfig.variables.gap.big * 1.5,
}).toString();

export default {
  formElement,
  labelReservedSpace,
};