theme generator - live preview

Author: PatrikMatiasko

scripts/build.theme.js

@@ -62,15 +62,13 @@ async function run(argv) {
 
     themes.forEach((theme) => {
         const buildThemeSourcePath = path.join(buildPath, 'lib', 'theme', theme)
-        const buildColorsSourcePath = path.join(buildPath, 'lib', '_utils', 'colors.js')
 
         const d = require(buildThemeSourcePath)
-        const colors = require(buildColorsSourcePath)
 
-        fs.writeJsonSync(path.join(buildThemePath, `${theme}.json`), { ...d.default, colorPalette: colors.uiColorMap[theme] })
+        fs.writeJsonSync(path.join(buildThemePath, `${theme}.json`), { ...d.default })
 
         generalTheme.themes.push({
-            [theme]: { ...d.default, colorPalette: colors.uiColorMap[theme] },
+            [theme]: { ...d.default },
         })
     })
 

src/common/hooks/use-app-theme.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { AnyAction } from 'redux'
 import get from 'lodash/get'
+import isEmpty from 'lodash/isEmpty'
 
 export type UseAppThemeType = {
     getTheme: (url: string) => any
@@ -50,8 +51,8 @@ export function useAppTheme(options: UseAppThemeType) {
 
     const getThemeData = useCallback(
         (currentTheme: string) => {
-            if (appStore.configuration.previewTheme) {
-                return appStore.configuration.previewTheme.theme
+            if (!isEmpty(appStore.configuration.previewTheme)) {
+                return appStore.configuration.previewTheme
             }
 
             if (appTheme) {

src/components/Atomic/SimpleStripTable/SimpleStripTable.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react'
+
 import { Props, defaultProps } from './SimpleStripTable.types'
 import * as styles from './SimpleStripTable.styles'
 import Row from '../Grid/Row'

src/components/Atomic/_theme/siemens.ts

@@ -1,7 +1,7 @@
 import { colors, colorsSiemens } from '../_utils/colors'
-import { required } from '../FormLabel/FormLabel.styles'
 
 const theme = {
+    colorPalette: colorsSiemens,
     colors: {
         ActionButton: {
             floatingMenu: {

src/components/Atomic/_theme/template.ts

@@ -7,6 +7,7 @@ type LogoType = {
 }
 
 export const getThemeTemplate = (colors: any, logoProps: LogoType) => ({
+    colorPalette: colors,
     colors: {
         ActionButton: {
             floatingMenu: {