Merge pull request #594 from shopgate/PWA-1787-theme-config

The theme's color variables and global font variables are now configurable via the New Merchant Admin
shopgate · Apr 2, 2019 · 4be468c · 4be468c
2 parents 88817de + 79a6ba5
commit 4be468c
Show file tree

Hide file tree

Showing 207 changed files with 713 additions and 587 deletions.
diff --git a/libraries/common/helpers/config/index.js b/libraries/common/helpers/config/index.js
@@ -1,5 +1,6 @@
-import { themeConfig as mock } from './mock';
 import pck from './../../package';
+import { getThemeConfig } from './theme';
+
 /**
  * Provides a default app config as a fallback.
  * @type {Object}
@@ -25,6 +26,7 @@ const defaultAppConfig = {
   showGmdMenuSubHeaders: false,
   benchmark: false,
   sentry: {},
+  theme: {},
   cartShippingHideAnonymousLegacy: null,
   cartShippingTextAnonymousLegacy: null,
   cart: {},
@@ -38,16 +40,6 @@ export const themeName = process.env.THEME || 'theme';
  */
 export const pckVersion = pck.version;
 
-/**
- * Provides a default theme config as a fallback.
- * @type {Object}
- */
-const defaultThemeConfig = {
-  font: {},
-  colors: {},
-  variables: {},
-};
-
 /**
  * Provides a default components config as a fallback.
  * @type {{portals: {}, widgets: {}}}
@@ -76,7 +68,7 @@ export const componentsConfig = {
  * The theme configuration.
  * @typedef {Object}
  */
-export const themeConfig = process.env.NODE_ENV === 'test' ? mock : (process.env.THEME_CONFIG || defaultThemeConfig);
+export const themeConfig = getThemeConfig(appConfig);
 
 /**
  * The shop number.

diff --git a/libraries/common/helpers/config/theme.js b/libraries/common/helpers/config/theme.js
@@ -0,0 +1,33 @@
+import { themeConfig } from './mock';
+
+/**
+ * Provides a default theme config as a fallback.
+ * @type {Object}
+ */
+const defaultConfig = {
+  font: {},
+  colors: {},
+  variables: {},
+};
+
+/**
+ * Builds the theme config.
+ * @param {Object} appConfig The app config.
+ * @returns {Object}
+ */
+export function getThemeConfig({ theme: { styles: { globals = {} } = {} } = {} } = {}) {
+  if (process.env.NODE_ENV === 'test') {
+    return themeConfig;
+  }
+
+  const oldTheme = process.env.THEME_CONFIG || defaultConfig;
+
+  return {
+    font: globals.font,
+    colors: globals.colors,
+    variables: {
+      ...(oldTheme.variables || {}),
+      materialShadow: globals.variables.baseShadow,
+    },
+  };
+}
diff --git a/libraries/common/styles/reset/root.js b/libraries/common/styles/reset/root.js
@@ -1,4 +1,7 @@
 import { css } from 'glamor';
+import { themeConfig } from '../../helpers/config';
+
+const { font } = themeConfig;
 
 css.global('*, *:before, *:after', {
   boxSizing: 'border-box',
@@ -20,8 +23,13 @@ css.global('html', {
 });
 
 css.global('body', {
+  font: `${font.rootSize}px/${font.lineHeight} ${font.family}`,
   overflow: 'auto',
   margin: 0,
   WebkitOverflowScrolling: 'touch',
   WebkitUserSelect: 'none',
 });
+
+css.global('[data-pattern]', {
+  height: '100% !important',
+});
diff --git a/themes/theme-gmd/.babelrc b/themes/theme-gmd/.babelrc
@@ -20,8 +20,7 @@
           "Components": "./components",
           "Config": "./config",
           "Extensions": "./extensions",
-          "Pages": "./pages",
-          "Styles": "./styles"
+          "Pages": "./pages"
         }
       }
     ]

diff --git a/themes/theme-gmd/components/AppBar/presets/DefaultBar/components/CartBadge/style.js b/themes/theme-gmd/components/AppBar/presets/DefaultBar/components/CartBadge/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 export default css({
   position: 'absolute',

diff --git a/themes/theme-gmd/components/AppBar/presets/DefaultBar/components/CartButton/index.jsx b/themes/theme-gmd/components/AppBar/presets/DefaultBar/components/CartButton/index.jsx
@@ -9,12 +9,14 @@ import {
   APP_BAR_CART_BUTTON_BEFORE,
   APP_BAR_CART_BUTTON_AFTER,
 } from '@shopgate/pwa-common/constants/Portals';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Badge from '../CartBadge';
 import connect from './connector';
 import styles from './style';
 import transition from './transition';
 
+const { colors } = themeConfig;
+
 /**
  * The CartButton component.
  */

diff --git a/themes/theme-gmd/components/CategoryList/style.js b/themes/theme-gmd/components/CategoryList/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors } = themeConfig;
 
 export default css({
   background: colors.light,

diff --git a/themes/theme-gmd/components/ChipLayout/index.jsx b/themes/theme-gmd/components/ChipLayout/index.jsx
@@ -2,9 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import I18n from '@shopgate/pwa-common/components/I18n';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import styles from './style';
 
+const { variables } = themeConfig;
+
 /**
  * The height of one row.
  * @type {number}
@@ -34,7 +36,7 @@ class ChipLayout extends Component {
 
   static defaultProps = {
     children: null,
-    handleMoreButton: () => {},
+    handleMoreButton: () => { },
     invertMoreButton: false,
     maxRows: 2,
     moreLabel: 'more',

diff --git a/themes/theme-gmd/components/ChipLayout/style.js b/themes/theme-gmd/components/ChipLayout/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 /**
  * Returns the styling based on the container height.

diff --git a/themes/theme-gmd/components/FilterBar/components/Content/components/FilterButton/style.js b/themes/theme-gmd/components/FilterBar/components/Content/components/FilterButton/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables } = themeConfig;
 
 const button = css({
   color: 'inherit',

diff --git a/themes/theme-gmd/components/FilterBar/components/Content/components/FilterChips/style.js b/themes/theme-gmd/components/FilterBar/components/Content/components/FilterChips/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables } = themeConfig;
 
 export default css({
   overflow: 'auto',

diff --git a/themes/theme-gmd/components/FilterBar/components/Content/components/Sort/style.js b/themes/theme-gmd/components/FilterBar/components/Content/components/Sort/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 const button = css({
   color: 'inherit',

diff --git a/themes/theme-gmd/components/FilterBar/components/Content/components/ViewSwitch/style.js b/themes/theme-gmd/components/FilterBar/components/Content/components/ViewSwitch/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables } = themeConfig;
 
 const button = css({
   color: 'inherit',

diff --git a/themes/theme-gmd/components/FilterBar/index.jsx b/themes/theme-gmd/components/FilterBar/index.jsx
@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Content from './components/Content';
 import styles from './style';
 
+const { colors } = themeConfig;
+
 /**
  * The FilterBar component.
  */

diff --git a/themes/theme-gmd/components/Headline/style.js b/themes/theme-gmd/components/Headline/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables } = themeConfig;
 
 const headline = css({
   fontSize: 18,

diff --git a/themes/theme-gmd/components/List/components/Item/style.js b/themes/theme-gmd/components/List/components/Item/style.js
@@ -1,8 +1,9 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { IMAGE_SPACE } from '../../style';
 
+const { colors, variables } = themeConfig;
+
 const disabled = css({
   color: colors.shade5,
 }).toString();

diff --git a/themes/theme-gmd/components/List/style.js b/themes/theme-gmd/components/List/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables, colors } = themeConfig;
 
 export const IMAGE_SPACE = 72;
 

diff --git a/themes/theme-gmd/components/Logo/style.js b/themes/theme-gmd/components/Logo/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables } = themeConfig;
 
 const container = css({
   alignItems: 'center',

diff --git a/themes/theme-gmd/components/NavDrawer/components/Header/index.jsx b/themes/theme-gmd/components/NavDrawer/components/Header/index.jsx
@@ -4,10 +4,12 @@ import { onlyUpdateForKeys } from 'recompose';
 import I18n from '@shopgate/pwa-common/components/I18n';
 import { NavDrawer } from '@shopgate/pwa-ui-material';
 import AccountBoxIcon from '@shopgate/pwa-ui-shared/icons/AccountBoxIcon';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from './connector';
 import styles from './style';
 
+const { colors } = themeConfig;
+
 const enhance = onlyUpdateForKeys(['email']);
 
 /**

diff --git a/themes/theme-gmd/components/NavDrawer/components/Header/style.js b/themes/theme-gmd/components/NavDrawer/components/Header/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 const container = css({
   color: colors.accentContrast,

diff --git a/...-gmd/components/NavDrawer/components/Main/components/CartButton/components/Badge/style.js b/...-gmd/components/NavDrawer/components/Main/components/CartButton/components/Badge/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 const size = variables.gap.big * 1.125;
 

diff --git a/...components/NavDrawer/components/Main/components/FavoritesButton/components/Badge/style.js b/...components/NavDrawer/components/Main/components/FavoritesButton/components/Badge/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors } = themeConfig;
 
 export default css({
   background: colors.primary,

diff --git a/themes/theme-gmd/components/Picker/components/Button/style.js b/themes/theme-gmd/components/Picker/components/Button/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 const buttonDefaults = {
   display: 'block',

diff --git a/themes/theme-gmd/components/Picker/style.js b/themes/theme-gmd/components/Picker/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { variables } = themeConfig;
 
 export default css({
   display: 'flex',

diff --git a/themes/theme-gmd/components/ProductCard/style.js b/themes/theme-gmd/components/ProductCard/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors } = themeConfig;
 
 const container = css({
   position: 'relative',

diff --git a/themes/theme-gmd/components/ProductGrid/components/Item/style.js b/themes/theme-gmd/components/ProductGrid/components/Item/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors } = themeConfig;
 
 export default css({
   position: 'relative',

diff --git a/themes/theme-gmd/components/ProductGrid/components/Layout/style.js b/themes/theme-gmd/components/ProductGrid/components/Layout/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors } = themeConfig;
 
 export default css({
   paddingBottom: 2,

diff --git a/themes/theme-gmd/components/ProductImage/index.jsx b/themes/theme-gmd/components/ProductImage/index.jsx
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import Image from '@shopgate/pwa-common/components/Image';
 import Placeholder from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import styles from './style';
 
+const { colors } = themeConfig;
+
 /**
  * The product image component.
  * This component will behave like the core Image component with the additional
@@ -37,7 +39,7 @@ class ProductImage extends Component {
     animating: true,
     className: null,
     forcePlaceholder: false,
-    highestResolutionLoaded: () => {},
+    highestResolutionLoaded: () => { },
     ratio: null,
     resolutions: [
       {

diff --git a/themes/theme-gmd/components/ProductList/components/Item/style.js b/themes/theme-gmd/components/ProductList/components/Item/style.js
@@ -1,6 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
-import variables from 'Styles/variables';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors, variables } = themeConfig;
 
 const elementPadding = variables.gap.big / 2;
 

diff --git a/themes/theme-gmd/components/ProductList/components/Layout/style.js b/themes/theme-gmd/components/ProductList/components/Layout/style.js
@@ -1,5 +1,7 @@
 import { css } from 'glamor';
-import colors from 'Styles/colors';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+const { colors } = themeConfig;
 
 const list = css({
   background: colors.background,