[ Themes / Typescript ]: Hierarchical theme type & helper functions

hierarchy.ts

// tslint:disable:object-literal-sort-keys

interface MinorHierarchy<T> {
  one: T
  two: T
  three: T
  four: T
}

export const createMinorHierarchy = <T>(
  one: T,
  two: T,
  three: T,
  four: T
): MinorHierarchy<T> => ({
  one,
  two,
  three,
  four,
})

interface MajorHierarchy<T> extends MinorHierarchy<T> {
  five: T
  six: T
  seven: T
  eight: T
  nine: T
}

export const createMajorHierarchy = <T>(
  one: T,
  two: T,
  three: T,
  four: T,
  five: T,
  six: T,
  seven: T,
  eight: T,
  nine: T
): MajorHierarchy<T> => ({
  one,
  two,
  three,
  four,
  five,
  six,
  seven,
  eight,
  nine,
})

interface HierarchicalTheme {
  margin: MajorHierarchy<string>
  padding: MajorHierarchy<string>
  width: MajorHierarchy<string>
  height: MajorHierarchy<string>
  opacity: MajorHierarchy<string>

  border: {
    radius: MinorHierarchy<string>
    width: MinorHierarchy<string>
  }

  colors: {
    neutral: MajorHierarchy<string>
    primary: MajorHierarchy<string>

    supporting: {
      accent: MajorHierarchy<string>
      success: MajorHierarchy<string>
      destructive: MajorHierarchy<string>
      warning: MajorHierarchy<string>
    }
  }

  icons: {
    size: MinorHierarchy<string>
  }

  font: {
    serif: string
    sans: string
    weight: MajorHierarchy<string>
    size: MajorHierarchy<string>
    lineHeight: MajorHierarchy<string>
  }

  shadows: {
    drop: MinorHierarchy<string>
    inset: MinorHierarchy<string>
  }
}

export const createHierarchy = (hierarchical: HierarchicalTheme) => hierarchical