import { SerializedStyles } from '@emotion/react';

import {
  GumColors,
  GumFontFamily,
  GumFontWeight,
  GumTypescale,
} from './GumVars';

export type GumFontUtils = {
  size: { [key in GumTypescale]: SerializedStyles };
} & { weight: { [key in GumFontWeight]: SerializedStyles } } & {
  family: { [key in GumFontFamily]: SerializedStyles };
};

export type GumTextColor = { [key in GumColors]: SerializedStyles };

export type GumFluidUtils = {
  [key in GumTypescale]: SerializedStyles;
};

export interface GumOpacityUtils {
  o10: SerializedStyles;
  o20: SerializedStyles;
  o30: SerializedStyles;
  o50: SerializedStyles;
  o60: SerializedStyles;
  o70: SerializedStyles;
  o80: SerializedStyles;
  o90: SerializedStyles;
}