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

const timePickerColors = {
  columnBorder: systemPalette.defaultBorder,
  cell: systemPalette.text,
  cellActive: systemPalette.defaultBackground,
  cellHover: systemPalette.primaryLightBackground,
  cellBackground: systemPalette.defaultLightBackground,
};

const timePickerSpace = {
  cellPadding: `0 0 0 ${space.medium}px`,
};

const timePickerFontSizes = {
  cell: `${fontSizes.medium}px`,
};

const timePickerFontWeights = {
  cellActive: fontWeights.semiBold,
};

const timePickerLineHeights = {
  cell: `${lineHeights.xxxlarge}px`,
};

const timePickerSizes = {
  columnWidth: '56px',
  columnAfterHeight: '160px',
  columnHeight: '192px',
  cellHeight: `${sizes.xlarge}px`,
};

const timePickerBorderWidths = {
  column: `${borderWidths.base}px`,
};

export {
  timePickerColors,
  timePickerSpace,
  timePickerFontSizes,
  timePickerFontWeights,
  timePickerLineHeights,
  timePickerSizes,
  timePickerBorderWidths,
};