@jaak/primitives/lib/theme.js

JAAK UI primitives

/**
 * Valid modular scale ratios
 *
 * @see https://polished.js.org/docs/#modularscaleratio
 *
 * @type {Array}
 */
const ModularScaleRatio = [
  'minorSecond',
  'majorSecond',
  'minorThird',
  'majorThird',
  'perfectFourth',
  'augFourth',
  'perfectFifth',
  'minorSixth',
  'goldenSection',
  'majorSixth',
  'minorSeventh',
  'majorSeventh',
  'octave',
  'majorTenth',
  'majorEleventh',
  'majorTwelfth',
  'doubleOctave',
]

/**
 * Generate the default theme object
 *
 * @see http://www.modularscale.com/?1&em&1.333
 * @see https://polished.js.org/docs/#modularscale
 *
 * @param  {Number|String} modularScaleBase  Modular scale base value
 * @param  {String}        modularScaleRatio Modular scale name
 * @return {Object}                          Default theme
 */
const getDefaultTheme = (modularScaleBase, modularScaleRatio) => ({
  depth: {},
  dimension: {
    modularScaleBase: modularScaleBase,
    modularScaleRatio: modularScaleRatio,
  },
  palette: {
    primary: '#f08f74',
    secondary: '#342e3f',
  },
  typography: {
    baseFontSize: 0,
  },
})

/**
 * Generate a theme that can be used with styled-components `<ThemeProvider>` 💅
 *
 * @see https://www.styled-components.com/docs/advanced#theming
 *
 * @param  {Object}        [customTheme={}]                    Optional custom theme values
 * @param  {Number|String} [modularScaleBase='1em']            Modular scale base value
 * @param  {String}        [modularScaleRatio='perfectFourth'] Modular scale name
 * @return {Object}                                            Primitives theme
 */
const makeTheme = (
  customTheme = {},
  modularScaleBase = '1em',
  modularScaleRatio = 'perfectFourth'
) => {
  if (typeof customTheme !== 'object') {
    throw new Error('`customTheme` is not of type object.')
  }

  if (
    typeof modularScaleBase !== 'string' &&
    typeof modularScaleBase !== 'number'
  ) {
    throw new Error('`modularScaleBase` is not of type string or number.')
  }

  if (
    typeof modularScaleRatio !== 'string' ||
    !ModularScaleRatio.includes(modularScaleRatio)
  ) {
    throw new Error(
      '`modularScaleRatio` is not of type string or not a valid scale.'
    )
  }

  const defaultTheme = getDefaultTheme(modularScaleBase, modularScaleRatio)

  return Object.keys(defaultTheme).reduce((obj, key) => {
    return Object.assign({}, obj, {
      [key]: {
        ...defaultTheme[key],
        ...customTheme[key],
      },
    })
  }, {})
}

export default makeTheme