Tables

export type Tables = {
  th?: TableTH;
  body?: TableBody;
};
 
export interface TableTH extends Omit<TableCell, 'borderLeft'> {
  fontWeight?: CSSProperties['fontWeight'];
  color?: CSSProperties['color'];
  background?: CSSProperties['background'];
  borderTop?: CSSProperties['borderTop'];
  textTransform?: CSSProperties['textTransform'];
  inner?: TableTHInner;
  first?: TableTHFirst;
  last?: TableTHLast;
  '&:hover'?: {
    color?: CSSProperties['color'];
    background?: CSSProperties['background'];
  };
  group?: {
    textTransform?: CSSProperties['textTransform'];
    fontWeight?: CSSProperties['fontWeight'];
    fontSize?: CSSProperties['fontSize'];
  };
  column?: {
    background?: CSSProperties['background'];
    color?: CSSProperties['color'];
    padding?: CSSProperties['padding'];
    borderRight?: CSSProperties['borderBottom'];
    borderLeft?: CSSProperties['borderLeft'];
  };
  row?: {
    padding?: CSSProperties['padding'];
    borderBottom?: CSSProperties['borderBottom'];
    borderLeft?: CSSProperties['borderLeft'];
    borderRight?: CSSProperties['borderRight'];
  };
  level?: {
    2: {
      background?: CSSProperties['background'];
    };
  };
}
 
export type TableTHFirst = { borderLeft: CSSProperties['borderLeft'] };
export type TableTHLast = { borderRight: CSSProperties['borderRight'] };
 
export type TableTHInner = {
  borderBottomWidth?: CSSProperties['borderBottomWidth'];
  borderRight?: boolean;
  padding?: CSSProperties['padding'];
};
 
export type TableBody = {
  borderLeft?: CSSProperties['borderLeft'];
  borderRight?: CSSProperties['borderRight'];
  cells?: TableCell;
  odd?: TableRowsStripes;
  even?: TableRowsStripes;
};
 
export type TableRowsStripes = {
  background?: CSSProperties['background'];
  color?: CSSProperties['color'];
  '&:hover'?: {
    color?: CSSProperties['color'];
    background?: CSSProperties['background'];
  };
};
 
export type TableCell = {
  borderBottom?: CSSProperties['borderBottom'];
  borderLeft?: CSSProperties['borderLeft'];
  borderRight?: CSSProperties['borderRight'];
  fontSize?: CSSProperties['fontSize'];
  padding?: CSSProperties['padding'];
};

export interface TableTH extends Omit<TableCell, "borderLeft"> {
  // as Base Table Properties
  group: {
    fontSize: 13,
    fontWeight: 400,
  },
  column: {
    background: `rgba(48, 116, 217, 0.05)`,
    padding: '0.5rem',
    borderRight: `1px solid ${brandColor(70)}`,
  },
  row: {
    borderBottom: `1px solid ${brandColor(70)}`,
    padding: '0.5rem',
  },
}