Minor refactoring to use the destructured code pattern while importing from other modules.

5 files changed, 15 insertions, 15 deletions

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 8eba17415..0d036293a 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,7 +1,7 @@
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
@@ -34,13 +34,13 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
-    position: 'relative' as CSS.Property.Position,
+    position: 'relative' as Property.Position,
     transition: 'background .5s, opacity 0.3s',
-    textAlign: 'center' as CSS.Property.TextAlign,
+    textAlign: 'center' as Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.Property.Width<string>,
+    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -113,7 +113,7 @@ const styles = (theme: Theme) => ({
     opacity: theme.inputDisabledOpacity,
   },
   loader: {
-    position: 'relative' as CSS.Property.Position,
+    position: 'relative' as Property.Position,
     width: 20,
     height: 18,
     zIndex: 9999,
@@ -125,7 +125,7 @@ const styles = (theme: Theme) => ({
     transition: 'all 0.3s',
     marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
     marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
-    position: (props: IProps): CSS.Property.Position => props.stretch ? 'absolute' : 'inherit',
+    position: (props: IProps): Property.Position => props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index 99b0685a8..1fe6a03cd 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -1,5 +1,5 @@
 import { Theme } from '@meetfranz/theme';
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
@@ -85,7 +85,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.Property.BoxSizing,
+    boxSizing: 'border-box' as Property.BoxSizing,
     display: 'flex',
     height: theme.inputHeight,
     order: 1,
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts
index f1fb09367..15cc6ca1b 100644
--- a/packages/forms/src/textarea/styles.ts
+++ b/packages/forms/src/textarea/styles.ts
@@ -1,5 +1,5 @@
 import { Theme } from '@meetfranz/theme';
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 
 export default (theme: Theme) => ({
   label: {
@@ -42,7 +42,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.Property.BoxSizing,
+    boxSizing: 'border-box' as Property.BoxSizing,
     display: 'flex',
     order: 1,
     width: '100%',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index 50716450b..d484cd042 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
@@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({
     background: theme.toggleBackground,
     borderRadius: theme.borderRadius,
     height: theme.toggleHeight,
-    position: 'relative' as CSS.Property.Position,
+    position: 'relative' as Property.Position,
     width: theme.toggleWidth,
   },
   button: {
@@ -33,7 +33,7 @@ const styles = (theme: Theme) => ({
     height: theme.toggleHeight - 2,
     left: 1,
     top: 1,
-    position: 'absolute' as CSS.Property.Position,
+    position: 'absolute' as Property.Position,
     transition: 'all .5s',
   },
   buttonActive: {
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 78d1dcbb9..94df5afd1 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -1,13 +1,13 @@
 import makeDarkThemeConfig from './themes/dark';
 import makeDefaultThemeConfig from './themes/default';
-import * as legacyStyles from './themes/legacy';
+import { themeBrandPrimary } from './themes/legacy';
 
 export enum ThemeType {
   default = 'default',
   dark = 'dark',
 }
 
-export const DEFAULT_ACCENT_COLOR = legacyStyles.themeBrandPrimary;
+export const DEFAULT_ACCENT_COLOR = themeBrandPrimary;
 
 export function theme(themeId: ThemeType,
                       brandColor: string = DEFAULT_ACCENT_COLOR) {