import { fontSizeRootValue } from './typographyTokens';

export const spacingBaselineValue = 8;

function calcSpace(space: number): number {
  return (spacingBaselineValue * space) / fontSizeRootValue;
}

/* Spacing */
export const spacingBaseline = spacingBaselineValue + 'px';
export const spacing0_25x = calcSpace(0.25) + 'rem';
export const spacing0_5x = calcSpace(0.5) + 'rem';
export const spacing1x = calcSpace(1) + 'rem';
export const spacing1_5x = calcSpace(1.5) + 'rem';
export const spacing2x = calcSpace(2) + 'rem';
export const spacing3x = calcSpace(3) + 'rem';
export const spacing4x = calcSpace(4) + 'rem';
export const spacing5x = calcSpace(5) + 'rem';
export const spacing6x = calcSpace(6) + 'rem';

/* Spacing Layout */
export const spacingLayout2x = calcSpace(2) + 'rem';
export const spacingLayout3x = calcSpace(3) + 'rem';
export const spacingLayout4x = calcSpace(4) + 'rem';
export const spacingLayout6x = calcSpace(6) + 'rem';
export const spacingLayout8x = calcSpace(8) + 'rem';
export const spacingLayout12x = calcSpace(12) + 'rem';
export const spacingLayout20x = calcSpace(20) + 'rem';

export interface spacingTokens {
  /* Spacing */
  spacingBaselineValue: number;
  spacingBaseline: string;
  spacing0_25x: string;
  spacing0_5x: string;
  spacing1x: string;
  spacing1_5x: string;
  spacing2x: string;
  spacing3x: string;
  spacing4x: string;
  spacing5x: string;
  spacing6x: string;

  /* Spacing Layout */
  spacingLayout2x: string;
  spacingLayout3x: string;
  spacingLayout4x: string;
  spacingLayout6x: string;
  spacingLayout8x: string;
  spacingLayout12x: string;
  spacingLayout20x: string;
}