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

const tabsSpace = {
  padding: `${space.small}px ${space.medium}px`,
  marginRight: `${space.xxsmall}px`,
  panelPadding: `${space.medium}px`,
  iconMarginRight: `${space.small}px`,
  indicatorBottom: `-${borderWidths.base}px`,
  subPadding: `${space.small}px ${space.medium}px`,
};

const tabsSizes = {
  indicatorHeight: `${sizes.xxsmall}px`,
};

const tabsColors = {
  background: systemPalette.defaultBackground,
  activeBackground: systemPalette.defaultLightBackground,
  border: systemPalette.defaultBorder,
  focusBorder: systemPalette.primary,
  text: systemPalette.text,
  panelText: systemPalette.text,
  panelBackground: systemPalette.defaultLightBackground,
  hoverText: systemPalette.primary,
  focusText: systemPalette.primary,
  activeText: systemPalette.primary,
  disabledText: systemPalette.subduedText,
  subFocusText: systemPalette.activePrimary,
};

const tabsRadii = {
  default: `${radii.base}px ${radii.base}px 0 0`,
  panel: `0 0 ${radii.base}px ${radii.base}px`,
};

const tabsFontSizes = {
  default: `${fontSizes.medium}px`,
  panel: `${fontSizes.medium}px`,
};

const tabsLineHeights = {
  default: `${lineHeights.medium}px`,
  panel: `${lineHeights.medium}px`,
};

const tabsFontWeights = {
  default: fontWeights.regular,
  panel: fontWeights.regular,
};

const tabsBorderWidths = {
  default: `${borderWidths.base}px`,
};

export {
  tabsSpace,
  tabsSizes,
  tabsColors,
  tabsFontSizes,
  tabsLineHeights,
  tabsFontWeights,
  tabsBorderWidths,
  tabsRadii,
};