import { fontSizes, fontWeights, lineHeights } from '../global/typography';
import { sizes } from '../global/sizes';
import { space } from '../global/space';
import { radii } from '../global/borders';
import { systemPalette } from '../global/colors';

const progressColors = {
  text: systemPalette.bodyText,
  background: systemPalette.neutralLightBackground,
  success: systemPalette.success,
  danger: systemPalette.danger,
  primary: systemPalette.primary,
  warning: systemPalette.warning,
  error: systemPalette.error,
  circleStroke: systemPalette.neutralLightBackground,
};

const progressFontSizes = {
  barSmall: `${fontSizes.xsmall}px`,
  barMedium: `${fontSizes.small}px`,
  circleSmall: `${fontSizes.large}px`,
  circleMedium: `${fontSizes.xxxlarge}px`,
};

const progressFontWeights = {
  default: fontWeights.regular,
};

const progressLineHeights = {
  barSmall: `${lineHeights.xsmall}px`,
  barMedium: `${lineHeights.small}px`,
};

const progressSpace = {
  barTextPadding: `${space.small}px`,
};

const progressSizes = {
  barWrapperSmallHeight: progressLineHeights.barSmall,
  barWrapperMediumHeight: progressLineHeights.barMedium,
  barSmallHeight: `${sizes.xsmall}px`,
  barMediumHeight: `${sizes.small}px`,
  barTextWidth: `${sizes.xlarge}px`,
  circleSmall: '64px',
  circleMedium: '112px',
  circleSmallStroke: `${sizes.xsmall}px`,
  circleMediumStroke: `${sizes.small}px`,
};

const progressRadii = {
  bar: `${radii.base}px`,
};

export {
  progressColors,
  progressFontSizes,
  progressFontWeights,
  progressLineHeights,
  progressSpace,
  progressSizes,
  progressRadii,
};