import { vars, createComponentTheme } from '../../css';
import { menuContract } from './menu.contract';

export const menuTheme = createComponentTheme(menuContract, {
  borderWidths: {
    base: '1px',
  },
  sizes: {
    // 220 / 16
    baseWidth: '13.75rem',
    // 188 / 16
    compactBaseWidth: '11.75rem',
  },
  space: {
    basePaddingX: vars.space[2],
    basePaddingY: vars.space[6],
    itemPaddingX: vars.space[6],
    itemPaddingY: vars.space[3],
    compactBasePaddingX: vars.space[1],
    compactBasePaddingY: vars.space[2],
    compactItemPaddingX: vars.space[1],
    compactItemPaddingY: vars.space[1],
    subBasePaddingLeft: vars.space[5],
    subItemPaddingX: vars.space[5],
    itemsGap: vars.space[1],
  },
  fontSizes: {
    base: vars.fontSizes.md,
    compact: vars.fontSizes.sm,
  },
});