Theme export format

Author: PatrikMatiasko

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

@@ -2,7 +2,6 @@ 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
@@ -32,7 +31,8 @@ export function useAppTheme(options: UseAppThemeType) {
                             themes[Object.keys(t)[0]] = t
                         })
 
-                        if (appStore.configuration?.theme === '' || appStore.configuration?.theme !== themeData.defaultTheme) {
+                        // if (appStore.configuration?.theme === '' || appStore.configuration?.theme !== themeData.defaultTheme) {
+                        if (appStore.configuration?.theme === '') {
                             dispatch(setTheme(themeData.defaultTheme))
                         }
 
@@ -51,10 +51,6 @@ export function useAppTheme(options: UseAppThemeType) {
 
     const getThemeData = useCallback(
         (currentTheme: string) => {
-            // if (!isEmpty(appStore.configuration.previewTheme)) {
-            //     return appStore.configuration.previewTheme
-            // }
-
             if (appTheme) {
                 const index = appTheme.findIndex((i: any) => Object.keys(i)[0] === currentTheme)
                 if (index >= 0) {
@@ -64,7 +60,7 @@ export function useAppTheme(options: UseAppThemeType) {
 
             return {}
         },
-        [appStore.configuration.previewTheme, appTheme]
+        [appTheme]
     )
 
     return [appTheme, themeError, getThemeData]

src/components/Atomic/Switch/Switch.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react'
+import React, { forwardRef } from 'react'
 import { Props, defaultProps } from './Switch.types'
 import * as styles from './Switch.styles'
 
-const Switch: FC<Props> = (props) => {
+const Switch = forwardRef<HTMLInputElement, Props>((props, ref) => {
     const { id, label, labelBefore, size, defaultChecked, className, disabled, loading, ...rest } = { ...defaultProps, ...props }
     const Slider = styles.slider as any
 
@@ -14,14 +14,15 @@ const Switch: FC<Props> = (props) => {
                     css={(theme) => [styles.input(theme, size || 'big', disabled || false), loading && styles.loading]}
                     defaultChecked={defaultChecked}
                     disabled={disabled || loading}
+                    ref={ref}
                     type='checkbox'
                 />
                 <Slider css={[(styles.sliderStyle(size || 'big'), disabled && styles.disabled)]} size={size} />
             </div>
             {label && <div css={[styles.label, labelBefore && styles.labelBeforeSwitch]}>{label}</div>}
         </label>
     )
-}
+})
 
 Switch.displayName = 'Switch'
 Switch.defaultProps = defaultProps

src/components/Atomic/_utils/colors.ts

@@ -50,17 +50,27 @@ export const uiColorMap = {
         disabled: '#D7D8DA', // TODO
     },
     siemens: {
+        primaryDarken: '#00adb4',
         primary: '#00adb4',
+        primaryHover: '#00adb4',
         primaryBonus: '#00BEDC',
+        primaryBright: '#00adb4',
         yellow: '#ffd732',
         red: '#ef0137',
         green: '#00d7a0',
         info: '#5FBDEB',
         neutral900: '#000028',
         neutral800: '#23233c',
         neutral700: '#353640',
+        neutral600: '#000028',
         neutral500: '#81868D',
+        neutral400: '#000028',
+        neutral300: '#000028',
+        neutral200: '#000028',
+        neutral100: '#000028',
         neutral000: '#FFFFFF',
+        secondary: '#D7D8DA',
+        tertiary: '#D7D8DA',
         disabled: '#D7D8DA',
     },
 }