@bbl-digital/snorre 4.1.81 → 4.1.83

package/theme-generator.js

@@ -1,448 +1,448 @@
-const fs = require('fs')
-const bbls = require('./theme-bbls.js')
-const {
-  shadeColor,
-  hexToRGBA,
-  getContrastYIQ,
-  hexifyWithWhiteBackground,
-} = require('./theme-helpers.js')
-
-const initTheme = (
-  primary,
-  secondary,
-  bgalpha,
-  customBgColor,
-  customPortalFooterColor,
-  customFooter,
-  defaultMenuBackground,
-  defaultMenuTextColor,
-  defaultMenuItemBackground,
-  defaultMenuItemActiveTextColor,
-  defaultMenuItemActiveBackground,
-  defaultMenuItemIconColor,
-  defaultMenuExternalLinkColor,
-  lightMenuBackground,
-  lightMenuTextColor,
-  lightMenuItemTextColor,
-  lightMenuItemBackground,
-  lightMenuItemActiveTextColor,
-  lightMenuItemActiveBackground,
-  lightMenuItemIconColor,
-  lightMenuExternalLinkColor,
-  submenuColor,
-  submenuItemColor,
-  submenuTextColor,
-  submenuTextColorActive,
-  customIllustrationColor,
-  defaultAppPickerBackground,
-  defaultAppPickerIconColor,
-  defaultAppPickerIconBackgroundColor,
-  defaultAppPickerActiveTextColor,
-  defaultAppPickerActiveBackground,
-  defaultAppPickerActiveIconColor,
-  defaultAppPickerActiveIconBackgroundColor,
-  lightAppPickerBackground,
-  lightAppPickerIconColor,
-  lightAppPickerIconBackground,
-  lightAppPickerActiveTextColor,
-  lightAppPickerActiveBackground,
-  lightAppPickerActiveIconColor,
-  lightAppPickerActiveIconBackground,
-  mypageBoxBorderRadius,
-  mypageBoxShadow,
-  mypageFooterColor,
-  preemptionCardBorderRadius,
-  btnDefault,
-  customGlobalCss = false,
-  secondaryFooter = false
-) => {
-  const getFooterColor = () => {
-    if (customFooter) return customFooter
-    if (secondaryFooter) return shadeColor(secondary, -50)
-    return shadeColor(primary, -50)
-  }
-
-  const styles = {
-    primary: primary,
-    secondary: secondary,
-    bg: customBgColor ? customBgColor : hexToRGBA(primary, bgalpha),
-    primary10opa: hexToRGBA(primary, 0.1),
-    primary20opa: hexToRGBA(primary, 0.2),
-    primary50opa: hexToRGBA(primary, 0.5),
-    primary5darker: shadeColor(primary, -50),
-    secondary5darker: shadeColor(secondary, -50),
-    defaultText: '#000',
-    subtleText: hexToRGBA('#000000', 0.7),
-    secondaryDarkText: shadeColor(secondary, -80),
-    /**
-     * Backgrounds
-     */
-    bgDark: '#10105A',
-    bgMedium: '#CFD9EA',
-    bgLight: '#EEF4FB',
-    bgFooter: customFooter
-      ? customFooter
-      : secondaryFooter
-      ? shadeColor(secondary, -50)
-      : shadeColor(primary, -50),
-    /**
-     * Buttons
-     */
-    btnDefault: btnDefault ? btnDefault : secondary,
-    btnDefaultFontColor: getContrastYIQ(btnDefault ? btnDefault : secondary),
-    btnDefaultDarker: shadeColor(btnDefault ? btnDefault : secondary, -15),
-    btnDefaultLighter: shadeColor(btnDefault ? btnDefault : secondary, 15),
-    btnSuccess: '#4DD964',
-    btnSuccessDarker: '#27B33E',
-    btnSuccessLighter: '#73FF8A',
-    btnDanger: '#EB011A',
-    btnDangerDarker: '#C50000',
-    btnDangerLighter: '#FF2740',
-    btnDisabled: '#D7D7D7',
-    btnHoverTextColor: getContrastYIQ(
-      shadeColor(btnDefault ? btnDefault : secondary, -15)
-    ),
-    /**
-     * Colors
-     */
-    alert: '#EB011A',
-    alertLight: '#FCD6DA',
-    alertBorder: 'rgba(235,1,26,0.25)',
-    info: '#F7B633',
-    infoMedium: '#FBDA99',
-    infoLight: '#FDEDCD',
-    infoBorder: 'rgba(247,182,51,0.5)',
-    success: '#4DD964',
-    successMedium: '#A6ECB2',
-    successLight: '#D2F5D8',
-    successBorder: 'rgba(77,217,100,0.5)',
-    border: '#CFD9EA',
-    gray10: '#BDBDBD',
-    gray20: '#efefef',
-    disabled: '#D7D7D7',
-    /**
-     * Shadows
-     */
-    shadowSmall: '0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
-    shadowBig: '0px 10px 15px 0px rgba(0, 0, 0, 0.1)',
-    /**
-     * Illustrations
-     */
-    illustrationGray: '#C3D0D8',
-    illustrationPrimary50: hexifyWithWhiteBackground(hexToRGBA(primary, 0.5)),
-    illustrationPrimary40: hexifyWithWhiteBackground(hexToRGBA(primary, 0.4)),
-    illustrationPrimary20: hexifyWithWhiteBackground(hexToRGBA(primary, 0.2)),
-    illustrationPrimary10: hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
-    illustrationPrimary5: hexifyWithWhiteBackground(hexToRGBA(primary, 0.08)),
-    customIllustrationColor: customIllustrationColor
-      ? customIllustrationColor
-      : primary,
-
-    /**
-     * App picker - Default
-     */
-    defaultAppPickerBackground: defaultAppPickerBackground
-      ? defaultAppPickerBackground
-      : hexToRGBA('#ffffff', 0.3),
-    defaultAppPickerIconColor: defaultAppPickerIconColor
-      ? defaultAppPickerIconColor
-      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.5)),
-    defaultAppPickerIconBackgroundColor: defaultAppPickerIconBackgroundColor
-      ? defaultAppPickerIconBackgroundColor
-      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
-    defaultAppPickerActiveTextColor: defaultAppPickerActiveTextColor
-      ? defaultAppPickerActiveTextColor
-      : '#ffffff',
-    defaultAppPickerActiveBackground: defaultAppPickerActiveBackground
-      ? defaultAppPickerActiveBackground
-      : '#ffffff',
-    defaultAppPickerActiveIconColor: defaultAppPickerActiveIconColor
-      ? defaultAppPickerActiveIconColor
-      : '#000000',
-    defaultAppPickerActiveIconBackgroundColor:
-      defaultAppPickerActiveIconBackgroundColor
-        ? defaultAppPickerActiveIconBackgroundColor
-        : '#ffffff',
-
-    /**
-     * App picker - Light
-     */
-    lightAppPickerBackground: lightAppPickerBackground
-      ? lightAppPickerBackground
-      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
-    lightAppPickerIconColor: lightAppPickerIconColor
-      ? lightAppPickerIconColor
-      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.5)),
-    lightAppPickerIconBackground: lightAppPickerIconBackground
-      ? lightAppPickerIconBackground
-      : hexifyWithWhiteBackground('rgba(255, 255, 255, 0.7)'),
-    lightAppPickerTextColor: getContrastYIQ(lightMenuBackground || '#ffffff'),
-    lightAppPickerActiveTextColor: lightAppPickerActiveTextColor
-      ? lightAppPickerActiveTextColor
-      : 'black',
-    lightAppPickerActiveBackground: lightAppPickerActiveBackground
-      ? lightAppPickerActiveBackground
-      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
-    lightAppPickerActiveIconColor: lightAppPickerActiveIconColor
-      ? lightAppPickerActiveIconColor
-      : primary,
-    lightAppPickerActiveIconBackground: lightAppPickerActiveIconBackground
-      ? lightAppPickerActiveIconBackground
-      : '#ffffff',
-
-    /**
-     * Sidemenu - Default
-     */
-    defaultMenuBackground: defaultMenuBackground
-      ? defaultMenuBackground
-      : `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), linear-gradient(${primary}, ${primary})`,
-    defaultMenuTextColor: defaultMenuTextColor || '#ffffff',
-    defaultMenuItemBackground: defaultMenuItemBackground || '#ffffff',
-    defaultMenuItemActiveTextColor: defaultMenuItemActiveTextColor || '#ffffff',
-    defaultMenuItemActiveBackground: defaultMenuItemActiveBackground
-      ? defaultMenuItemActiveBackground
-      : `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), linear-gradient(${primary}, ${primary})`,
-    defaultMenuItemIconColor: defaultMenuItemIconColor || '#ffffff',
-    defaultMenuExternalLinkColor: defaultMenuExternalLinkColor || '#ffffff',
-
-    /**
-     * Sidemenu - Light
-     */
-    lightMenuBackground: lightMenuBackground ? lightMenuBackground : '#ffffff',
-    lightMenuTextColor: lightMenuTextColor ? lightMenuTextColor : 'black',
-    lightMenuItemTextColor: lightMenuItemTextColor
-      ? lightMenuItemTextColor
-      : 'black',
-    lightMenuItemBackground: lightMenuItemBackground
-      ? lightMenuItemBackground
-      : 'black',
-    lightMenuItemActiveTextColor: lightMenuItemActiveTextColor
-      ? lightMenuItemActiveTextColor
-      : 'black',
-    lightMenuItemActiveBackground: lightMenuItemActiveBackground
-      ? lightMenuItemActiveBackground
-      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
-    lightMenuItemIconColor: lightMenuItemIconColor
-      ? lightMenuItemIconColor
-      : primary,
-    lightMenuExternalLinkColor: lightMenuExternalLinkColor
-      ? lightMenuExternalLinkColor
-      : primary,
-
-    /**
-     * Submenu
-     */
-    submenuColor: submenuColor
-      ? submenuColor
-      : `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), linear-gradient(${primary}, ${primary})`,
-    submenuItemColor: submenuItemColor
-      ? submenuItemColor
-      : shadeColor(primary, -50),
-    submenuTextColor: submenuTextColor
-      ? submenuTextColor
-      : `rgba(255, 255, 255, 0.7)`,
-    submenuTextColorActive: submenuTextColorActive
-      ? submenuTextColorActive
-      : `#ffffff`,
-
-    customPortalFooterColor: customPortalFooterColor,
-
-    /**
-     * Boxes
-     */
-    mypageBoxBorderRadius: mypageBoxBorderRadius
-      ? mypageBoxBorderRadius
-      : '16px',
-    preemptionCardBorderRadius: preemptionCardBorderRadius
-      ? preemptionCardBorderRadius
-      : '30px',
-    mypageBoxShadow: mypageBoxShadow
-      ? mypageBoxShadow
-      : '0 0 10px 0 rgba(0, 0, 0, 0.1)',
-
-    mypageFooterColor: mypageFooterColor
-      ? mypageFooterColor
-      : customIllustrationColor
-      ? hexToRGBA(customIllustrationColor, 0.1)
-      : hexToRGBA(primary, 0.1),
-
-    customGlobalCss: customGlobalCss,
-  }
-  return styles
-}
-
-const updateTheme = (bbl) => {
-  let bblsToUpdate
-
-  if (bbl) {
-    bblsToUpdate = bbls.filter((x) => x.bbl === bbl)
-  } else {
-    bblsToUpdate = bbls
-  }
-
-  for (const b of bblsToUpdate) {
-    updateBbl(
-      b.bbl,
-      b.theme.primary,
-      b.theme.secondary,
-      b.theme.alpha,
-      b.theme.customBgColor,
-      b.theme.customPortalFooterColor,
-      b.theme.customFooter,
-      b.theme.defaultMenuBackground,
-      b.theme.defaultMenuTextColor,
-      b.theme.defaultMenuItemBackground,
-      b.theme.defaultMenuItemActiveTextColor,
-      b.theme.defaultMenuItemActiveBackground,
-      b.theme.defaultMenuItemIconColor,
-      b.theme.defaultMenuExternalLinkColor,
-      b.theme.lightMenuBackground,
-      b.theme.lightMenuTextColor,
-      b.theme.lightMenuItemTextColor,
-      b.theme.lightMenuItemBackground,
-      b.theme.lightMenuItemActiveTextColor,
-      b.theme.lightMenuItemActiveBackground,
-      b.theme.lightMenuItemIconColor,
-      b.theme.lightMenuExternalLinkColor,
-      b.theme.submenuColor,
-      b.theme.submenuItemColor,
-      b.theme.submenuTextColor,
-      b.theme.submenuTextColorActive,
-      b.theme.customIllustrationColor,
-      b.theme.defaultAppPickerBackground,
-      b.theme.defaultAppPickerIconColor,
-      b.theme.defaultAppPickerIconBackgroundColor,
-      b.theme.defaultAppPickerActiveTextColor,
-      b.theme.defaultAppPickerActiveBackground,
-      b.theme.defaultAppPickerActiveIconColor,
-      b.theme.defaultAppPickerActiveIconBackgroundColor,
-      b.theme.lightAppPickerBackground,
-      b.theme.lightAppPickerIconColor,
-      b.theme.lightAppPickerIconBackground,
-      b.theme.lightAppPickerActiveTextColor,
-      b.theme.lightAppPickerActiveBackground,
-      b.theme.lightAppPickerActiveIconColor,
-      b.theme.lightAppPickerActiveIconBackground,
-      b.theme.mypageBoxBorderRadius,
-      b.theme.mypageBoxShadow,
-      b.theme.mypageFooterColor,
-      b.theme.preemptionCardBorderRadius,
-      b.theme.btnDefault,
-      b.theme.customGlobalCss,
-      b.theme.secondaryFooter
-    )
-  }
-}
-
-const updateBbl = (
-  bbl,
-  primary,
-  secondary,
-  bgalpha,
-  customBgColor,
-  customPortalFooterColor,
-  customFooter,
-  defaultMenuBackground,
-  defaultMenuTextColor,
-  defaultMenuItemBackground,
-  defaultMenuItemActiveTextColor,
-  defaultMenuItemActiveBackground,
-  defaultMenuItemIconColor,
-  defaultMenuExternalLinkColor,
-  lightMenuBackground,
-  lightMenuTextColor,
-  lightMenuItemTextColor,
-  lightMenuItemBackground,
-  lightMenuItemActiveTextColor,
-  lightMenuItemActiveBackground,
-  lightMenuItemIconColor,
-  lightMenuExternalLinkColor,
-  submenuColor,
-  submenuItemColor,
-  submenuTextColor,
-  submenuTextColorActive,
-  customIllustrationColor,
-  defaultAppPickerBackground,
-  defaultAppPickerIconColor,
-  defaultAppPickerIconBackgroundColor,
-  defaultAppPickerActiveTextColor,
-  defaultAppPickerActiveBackground,
-  defaultAppPickerActiveIconColor,
-  defaultAppPickerActiveIconBackgroundColor,
-  lightAppPickerBackground,
-  lightAppPickerIconColor,
-  lightAppPickerIconBackground,
-  lightAppPickerActiveTextColor,
-  lightAppPickerActiveBackground,
-  lightAppPickerActiveIconColor,
-  lightAppPickerActiveIconBackground,
-  mypageBoxBorderRadius,
-  mypageBoxShadow,
-  mypageFooterColor,
-  preemptionCardBorderRadius,
-  btnDefault,
-  customGlobalCss,
-  secondaryFooter = false
-) => {
-  console.log('bbl', bbl)
-  let data = JSON.stringify(
-    initTheme(
-      primary,
-      secondary,
-      bgalpha,
-      customBgColor,
-      customPortalFooterColor,
-      customFooter,
-      defaultMenuBackground,
-      defaultMenuTextColor,
-      defaultMenuItemBackground,
-      defaultMenuItemActiveTextColor,
-      defaultMenuItemActiveBackground,
-      defaultMenuItemIconColor,
-      defaultMenuExternalLinkColor,
-      lightMenuBackground,
-      lightMenuTextColor,
-      lightMenuItemTextColor,
-      lightMenuItemBackground,
-      lightMenuItemActiveTextColor,
-      lightMenuItemActiveBackground,
-      lightMenuItemIconColor,
-      lightMenuExternalLinkColor,
-      submenuColor,
-      submenuItemColor,
-      submenuTextColor,
-      submenuTextColorActive,
-      customIllustrationColor,
-      defaultAppPickerBackground,
-      defaultAppPickerIconColor,
-      defaultAppPickerIconBackgroundColor,
-      defaultAppPickerActiveTextColor,
-      defaultAppPickerActiveBackground,
-      defaultAppPickerActiveIconColor,
-      defaultAppPickerActiveIconBackgroundColor,
-      lightAppPickerBackground,
-      lightAppPickerIconColor,
-      lightAppPickerIconBackground,
-      lightAppPickerActiveTextColor,
-      lightAppPickerActiveBackground,
-      lightAppPickerActiveIconColor,
-      lightAppPickerActiveIconBackground,
-      mypageBoxBorderRadius,
-      mypageBoxShadow,
-      mypageFooterColor,
-      preemptionCardBorderRadius,
-      btnDefault,
-      customGlobalCss,
-      secondaryFooter
-    ),
-    null,
-    2
-  )
-  console.log(data)
-  fs.writeFileSync('themes/' + bbl + '/styles.json', data)
-}
-
-// export bbls with es5
-module.exports = bbls
-
-updateTheme()
+const fs = require('fs')
+const bbls = require('./theme-bbls.js')
+const {
+  shadeColor,
+  hexToRGBA,
+  getContrastYIQ,
+  hexifyWithWhiteBackground,
+} = require('./theme-helpers.js')
+
+const initTheme = (
+  primary,
+  secondary,
+  bgalpha,
+  customBgColor,
+  customPortalFooterColor,
+  customFooter,
+  defaultMenuBackground,
+  defaultMenuTextColor,
+  defaultMenuItemBackground,
+  defaultMenuItemActiveTextColor,
+  defaultMenuItemActiveBackground,
+  defaultMenuItemIconColor,
+  defaultMenuExternalLinkColor,
+  lightMenuBackground,
+  lightMenuTextColor,
+  lightMenuItemTextColor,
+  lightMenuItemBackground,
+  lightMenuItemActiveTextColor,
+  lightMenuItemActiveBackground,
+  lightMenuItemIconColor,
+  lightMenuExternalLinkColor,
+  submenuColor,
+  submenuItemColor,
+  submenuTextColor,
+  submenuTextColorActive,
+  customIllustrationColor,
+  defaultAppPickerBackground,
+  defaultAppPickerIconColor,
+  defaultAppPickerIconBackgroundColor,
+  defaultAppPickerActiveTextColor,
+  defaultAppPickerActiveBackground,
+  defaultAppPickerActiveIconColor,
+  defaultAppPickerActiveIconBackgroundColor,
+  lightAppPickerBackground,
+  lightAppPickerIconColor,
+  lightAppPickerIconBackground,
+  lightAppPickerActiveTextColor,
+  lightAppPickerActiveBackground,
+  lightAppPickerActiveIconColor,
+  lightAppPickerActiveIconBackground,
+  mypageBoxBorderRadius,
+  mypageBoxShadow,
+  mypageFooterColor,
+  preemptionCardBorderRadius,
+  btnDefault,
+  customGlobalCss = false,
+  secondaryFooter = false
+) => {
+  const getFooterColor = () => {
+    if (customFooter) return customFooter
+    if (secondaryFooter) return shadeColor(secondary, -50)
+    return shadeColor(primary, -50)
+  }
+
+  const styles = {
+    primary: primary,
+    secondary: secondary,
+    bg: customBgColor ? customBgColor : hexToRGBA(primary, bgalpha),
+    primary10opa: hexToRGBA(primary, 0.1),
+    primary20opa: hexToRGBA(primary, 0.2),
+    primary50opa: hexToRGBA(primary, 0.5),
+    primary5darker: shadeColor(primary, -50),
+    secondary5darker: shadeColor(secondary, -50),
+    defaultText: '#000',
+    subtleText: hexToRGBA('#000000', 0.7),
+    secondaryDarkText: shadeColor(secondary, -80),
+    /**
+     * Backgrounds
+     */
+    bgDark: '#10105A',
+    bgMedium: '#CFD9EA',
+    bgLight: '#EEF4FB',
+    bgFooter: customFooter
+      ? customFooter
+      : secondaryFooter
+      ? shadeColor(secondary, -50)
+      : shadeColor(primary, -50),
+    /**
+     * Buttons
+     */
+    btnDefault: btnDefault ? btnDefault : secondary,
+    btnDefaultFontColor: getContrastYIQ(btnDefault ? btnDefault : secondary),
+    btnDefaultDarker: shadeColor(btnDefault ? btnDefault : secondary, -15),
+    btnDefaultLighter: shadeColor(btnDefault ? btnDefault : secondary, 15),
+    btnSuccess: '#4DD964',
+    btnSuccessDarker: '#27B33E',
+    btnSuccessLighter: '#73FF8A',
+    btnDanger: '#EB011A',
+    btnDangerDarker: '#C50000',
+    btnDangerLighter: '#FF2740',
+    btnDisabled: '#D7D7D7',
+    btnHoverTextColor: getContrastYIQ(
+      shadeColor(btnDefault ? btnDefault : secondary, -15)
+    ),
+    /**
+     * Colors
+     */
+    alert: '#EB011A',
+    alertLight: '#FCD6DA',
+    alertBorder: 'rgba(235,1,26,0.25)',
+    info: '#F7B633',
+    infoMedium: '#FBDA99',
+    infoLight: '#FDEDCD',
+    infoBorder: 'rgba(247,182,51,0.5)',
+    success: '#4DD964',
+    successMedium: '#A6ECB2',
+    successLight: '#D2F5D8',
+    successBorder: 'rgba(77,217,100,0.5)',
+    border: '#CFD9EA',
+    gray10: '#BDBDBD',
+    gray20: '#efefef',
+    disabled: '#D7D7D7',
+    /**
+     * Shadows
+     */
+    shadowSmall: '0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
+    shadowBig: '0px 10px 15px 0px rgba(0, 0, 0, 0.1)',
+    /**
+     * Illustrations
+     */
+    illustrationGray: '#C3D0D8',
+    illustrationPrimary50: hexifyWithWhiteBackground(hexToRGBA(primary, 0.5)),
+    illustrationPrimary40: hexifyWithWhiteBackground(hexToRGBA(primary, 0.4)),
+    illustrationPrimary20: hexifyWithWhiteBackground(hexToRGBA(primary, 0.2)),
+    illustrationPrimary10: hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
+    illustrationPrimary5: hexifyWithWhiteBackground(hexToRGBA(primary, 0.08)),
+    customIllustrationColor: customIllustrationColor
+      ? customIllustrationColor
+      : primary,
+
+    /**
+     * App picker - Default
+     */
+    defaultAppPickerBackground: defaultAppPickerBackground
+      ? defaultAppPickerBackground
+      : hexToRGBA('#ffffff', 0.3),
+    defaultAppPickerIconColor: defaultAppPickerIconColor
+      ? defaultAppPickerIconColor
+      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.5)),
+    defaultAppPickerIconBackgroundColor: defaultAppPickerIconBackgroundColor
+      ? defaultAppPickerIconBackgroundColor
+      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
+    defaultAppPickerActiveTextColor: defaultAppPickerActiveTextColor
+      ? defaultAppPickerActiveTextColor
+      : '#ffffff',
+    defaultAppPickerActiveBackground: defaultAppPickerActiveBackground
+      ? defaultAppPickerActiveBackground
+      : '#ffffff',
+    defaultAppPickerActiveIconColor: defaultAppPickerActiveIconColor
+      ? defaultAppPickerActiveIconColor
+      : '#000000',
+    defaultAppPickerActiveIconBackgroundColor:
+      defaultAppPickerActiveIconBackgroundColor
+        ? defaultAppPickerActiveIconBackgroundColor
+        : '#ffffff',
+
+    /**
+     * App picker - Light
+     */
+    lightAppPickerBackground: lightAppPickerBackground
+      ? lightAppPickerBackground
+      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
+    lightAppPickerIconColor: lightAppPickerIconColor
+      ? lightAppPickerIconColor
+      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.5)),
+    lightAppPickerIconBackground: lightAppPickerIconBackground
+      ? lightAppPickerIconBackground
+      : hexifyWithWhiteBackground('rgba(255, 255, 255, 0.7)'),
+    lightAppPickerTextColor: getContrastYIQ(lightMenuBackground || '#ffffff'),
+    lightAppPickerActiveTextColor: lightAppPickerActiveTextColor
+      ? lightAppPickerActiveTextColor
+      : 'black',
+    lightAppPickerActiveBackground: lightAppPickerActiveBackground
+      ? lightAppPickerActiveBackground
+      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
+    lightAppPickerActiveIconColor: lightAppPickerActiveIconColor
+      ? lightAppPickerActiveIconColor
+      : primary,
+    lightAppPickerActiveIconBackground: lightAppPickerActiveIconBackground
+      ? lightAppPickerActiveIconBackground
+      : '#ffffff',
+
+    /**
+     * Sidemenu - Default
+     */
+    defaultMenuBackground: defaultMenuBackground
+      ? defaultMenuBackground
+      : `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), linear-gradient(${primary}, ${primary})`,
+    defaultMenuTextColor: defaultMenuTextColor || '#ffffff',
+    defaultMenuItemBackground: defaultMenuItemBackground || '#ffffff',
+    defaultMenuItemActiveTextColor: defaultMenuItemActiveTextColor || '#ffffff',
+    defaultMenuItemActiveBackground: defaultMenuItemActiveBackground
+      ? defaultMenuItemActiveBackground
+      : `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), linear-gradient(${primary}, ${primary})`,
+    defaultMenuItemIconColor: defaultMenuItemIconColor || '#ffffff',
+    defaultMenuExternalLinkColor: defaultMenuExternalLinkColor || '#ffffff',
+
+    /**
+     * Sidemenu - Light
+     */
+    lightMenuBackground: lightMenuBackground ? lightMenuBackground : '#ffffff',
+    lightMenuTextColor: lightMenuTextColor ? lightMenuTextColor : 'black',
+    lightMenuItemTextColor: lightMenuItemTextColor
+      ? lightMenuItemTextColor
+      : 'black',
+    lightMenuItemBackground: lightMenuItemBackground
+      ? lightMenuItemBackground
+      : 'black',
+    lightMenuItemActiveTextColor: lightMenuItemActiveTextColor
+      ? lightMenuItemActiveTextColor
+      : 'black',
+    lightMenuItemActiveBackground: lightMenuItemActiveBackground
+      ? lightMenuItemActiveBackground
+      : hexifyWithWhiteBackground(hexToRGBA(primary, 0.1)),
+    lightMenuItemIconColor: lightMenuItemIconColor
+      ? lightMenuItemIconColor
+      : primary,
+    lightMenuExternalLinkColor: lightMenuExternalLinkColor
+      ? lightMenuExternalLinkColor
+      : primary,
+
+    /**
+     * Submenu
+     */
+    submenuColor: submenuColor
+      ? submenuColor
+      : `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), linear-gradient(${primary}, ${primary})`,
+    submenuItemColor: submenuItemColor
+      ? submenuItemColor
+      : shadeColor(primary, -50),
+    submenuTextColor: submenuTextColor
+      ? submenuTextColor
+      : `rgba(255, 255, 255, 0.7)`,
+    submenuTextColorActive: submenuTextColorActive
+      ? submenuTextColorActive
+      : `#ffffff`,
+
+    customPortalFooterColor: customPortalFooterColor,
+
+    /**
+     * Boxes
+     */
+    mypageBoxBorderRadius: mypageBoxBorderRadius
+      ? mypageBoxBorderRadius
+      : '16px',
+    preemptionCardBorderRadius: preemptionCardBorderRadius
+      ? preemptionCardBorderRadius
+      : '30px',
+    mypageBoxShadow: mypageBoxShadow
+      ? mypageBoxShadow
+      : '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+
+    mypageFooterColor: mypageFooterColor
+      ? mypageFooterColor
+      : customIllustrationColor
+      ? hexToRGBA(customIllustrationColor, 0.1)
+      : hexToRGBA(primary, 0.1),
+
+    customGlobalCss: customGlobalCss,
+  }
+  return styles
+}
+
+const updateTheme = (bbl) => {
+  let bblsToUpdate
+
+  if (bbl) {
+    bblsToUpdate = bbls.filter((x) => x.bbl === bbl)
+  } else {
+    bblsToUpdate = bbls
+  }
+
+  for (const b of bblsToUpdate) {
+    updateBbl(
+      b.bbl,
+      b.theme.primary,
+      b.theme.secondary,
+      b.theme.alpha,
+      b.theme.customBgColor,
+      b.theme.customPortalFooterColor,
+      b.theme.customFooter,
+      b.theme.defaultMenuBackground,
+      b.theme.defaultMenuTextColor,
+      b.theme.defaultMenuItemBackground,
+      b.theme.defaultMenuItemActiveTextColor,
+      b.theme.defaultMenuItemActiveBackground,
+      b.theme.defaultMenuItemIconColor,
+      b.theme.defaultMenuExternalLinkColor,
+      b.theme.lightMenuBackground,
+      b.theme.lightMenuTextColor,
+      b.theme.lightMenuItemTextColor,
+      b.theme.lightMenuItemBackground,
+      b.theme.lightMenuItemActiveTextColor,
+      b.theme.lightMenuItemActiveBackground,
+      b.theme.lightMenuItemIconColor,
+      b.theme.lightMenuExternalLinkColor,
+      b.theme.submenuColor,
+      b.theme.submenuItemColor,
+      b.theme.submenuTextColor,
+      b.theme.submenuTextColorActive,
+      b.theme.customIllustrationColor,
+      b.theme.defaultAppPickerBackground,
+      b.theme.defaultAppPickerIconColor,
+      b.theme.defaultAppPickerIconBackgroundColor,
+      b.theme.defaultAppPickerActiveTextColor,
+      b.theme.defaultAppPickerActiveBackground,
+      b.theme.defaultAppPickerActiveIconColor,
+      b.theme.defaultAppPickerActiveIconBackgroundColor,
+      b.theme.lightAppPickerBackground,
+      b.theme.lightAppPickerIconColor,
+      b.theme.lightAppPickerIconBackground,
+      b.theme.lightAppPickerActiveTextColor,
+      b.theme.lightAppPickerActiveBackground,
+      b.theme.lightAppPickerActiveIconColor,
+      b.theme.lightAppPickerActiveIconBackground,
+      b.theme.mypageBoxBorderRadius,
+      b.theme.mypageBoxShadow,
+      b.theme.mypageFooterColor,
+      b.theme.preemptionCardBorderRadius,
+      b.theme.btnDefault,
+      b.theme.customGlobalCss,
+      b.theme.secondaryFooter
+    )
+  }
+}
+
+const updateBbl = (
+  bbl,
+  primary,
+  secondary,
+  bgalpha,
+  customBgColor,
+  customPortalFooterColor,
+  customFooter,
+  defaultMenuBackground,
+  defaultMenuTextColor,
+  defaultMenuItemBackground,
+  defaultMenuItemActiveTextColor,
+  defaultMenuItemActiveBackground,
+  defaultMenuItemIconColor,
+  defaultMenuExternalLinkColor,
+  lightMenuBackground,
+  lightMenuTextColor,
+  lightMenuItemTextColor,
+  lightMenuItemBackground,
+  lightMenuItemActiveTextColor,
+  lightMenuItemActiveBackground,
+  lightMenuItemIconColor,
+  lightMenuExternalLinkColor,
+  submenuColor,
+  submenuItemColor,
+  submenuTextColor,
+  submenuTextColorActive,
+  customIllustrationColor,
+  defaultAppPickerBackground,
+  defaultAppPickerIconColor,
+  defaultAppPickerIconBackgroundColor,
+  defaultAppPickerActiveTextColor,
+  defaultAppPickerActiveBackground,
+  defaultAppPickerActiveIconColor,
+  defaultAppPickerActiveIconBackgroundColor,
+  lightAppPickerBackground,
+  lightAppPickerIconColor,
+  lightAppPickerIconBackground,
+  lightAppPickerActiveTextColor,
+  lightAppPickerActiveBackground,
+  lightAppPickerActiveIconColor,
+  lightAppPickerActiveIconBackground,
+  mypageBoxBorderRadius,
+  mypageBoxShadow,
+  mypageFooterColor,
+  preemptionCardBorderRadius,
+  btnDefault,
+  customGlobalCss,
+  secondaryFooter = false
+) => {
+  console.log('bbl', bbl)
+  let data = JSON.stringify(
+    initTheme(
+      primary,
+      secondary,
+      bgalpha,
+      customBgColor,
+      customPortalFooterColor,
+      customFooter,
+      defaultMenuBackground,
+      defaultMenuTextColor,
+      defaultMenuItemBackground,
+      defaultMenuItemActiveTextColor,
+      defaultMenuItemActiveBackground,
+      defaultMenuItemIconColor,
+      defaultMenuExternalLinkColor,
+      lightMenuBackground,
+      lightMenuTextColor,
+      lightMenuItemTextColor,
+      lightMenuItemBackground,
+      lightMenuItemActiveTextColor,
+      lightMenuItemActiveBackground,
+      lightMenuItemIconColor,
+      lightMenuExternalLinkColor,
+      submenuColor,
+      submenuItemColor,
+      submenuTextColor,
+      submenuTextColorActive,
+      customIllustrationColor,
+      defaultAppPickerBackground,
+      defaultAppPickerIconColor,
+      defaultAppPickerIconBackgroundColor,
+      defaultAppPickerActiveTextColor,
+      defaultAppPickerActiveBackground,
+      defaultAppPickerActiveIconColor,
+      defaultAppPickerActiveIconBackgroundColor,
+      lightAppPickerBackground,
+      lightAppPickerIconColor,
+      lightAppPickerIconBackground,
+      lightAppPickerActiveTextColor,
+      lightAppPickerActiveBackground,
+      lightAppPickerActiveIconColor,
+      lightAppPickerActiveIconBackground,
+      mypageBoxBorderRadius,
+      mypageBoxShadow,
+      mypageFooterColor,
+      preemptionCardBorderRadius,
+      btnDefault,
+      customGlobalCss,
+      secondaryFooter
+    ),
+    null,
+    2
+  )
+  console.log(data)
+  fs.writeFileSync('themes/' + bbl + '/styles.json', data)
+}
+
+// export bbls with es5
+module.exports = bbls
+
+updateTheme()