fix #108 - Fix colors, refac stylguide export (#109)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},

src/components/assets/styles/colors.ts

@@ -3,11 +3,11 @@ import { ColorManipulationTypes, manipulateColor } from 'components/utils'
 const { shade, tint } = ColorManipulationTypes
 
 const black = '#282A35'
-const white = '#FFFFFF'
+const white = '#FEFEFE'
 
 const blue = '#2F54EB'
 const green = '#59C93D'
-const orange = 'EEAB47'
+const orange = '#EEAB47'
 const red = '#EE5C47'
 
 const lightenPercentages = [10, 20, 30, 40, 50, 60, 70, 80, 90]
@@ -66,9 +66,22 @@ const generateShades = (baseColor: string) => {
 	return shades
 }
 
-export const whites = { base: white }
-export const blues = generateShades(blue)
-export const blacks = generateShades(black)
-export const greens = { base: green }
-export const oranges = { base: orange }
-export const reds = { base: red }
+export interface ColorsType {
+	blacks: ShadeType
+	blues: ShadeType
+	greens: { base: string }
+	oranges: { base: string }
+	reds: { base: string }
+	whites: { base: string }
+}
+
+const colors: ColorsType = {
+	blacks: generateShades(black),
+	blues: generateShades(blue),
+	greens: { base: green },
+	oranges: { base: orange },
+	reds: { base: red },
+	whites: { base: white }
+}
+
+export default colors

src/components/assets/styles/index.ts

@@ -1,3 +1,2 @@
-export * from './colors'
 export * from './styleguide'
 export * from './themes'

src/components/assets/styles/styleguide.ts

@@ -1,4 +1,5 @@
-export * from './colors'
+import colors from './colors'
+
 export const defaultFieldWidth = '300px'
 export const fieldErrorStyles = {
 	'@global': {
@@ -16,6 +17,10 @@ export const fieldErrorStyles = {
 export const fontSizeRegular = '14px'
 export const linkColor = '#1EA7FD'
 export const skeletonButtonBorderColor = '#DFDFDF'
-/* eslint-disable sort-keys */
-export const spacing = { s: 8, m: 16, l: 24, xl: 32 }
 export * from './themes'
+
+/* eslint-disable sort-keys */
+export const styleguide = {
+	colors,
+	spacing: { s: 8, m: 16, l: 24, xl: 32 }
+}

src/components/assets/styles/themes.ts

@@ -1,6 +1,8 @@
-import { blacks, blues, greens, oranges, reds, whites } from './colors'
+import colors from './colors'
 import { ColorManipulationTypes, manipulateColor } from 'components/utils'
 
+const { blacks, blues, greens, oranges, reds, whites } = colors
+
 export enum ThemeType {
 	dark = 'dark',
 	light = 'light'
@@ -23,7 +25,7 @@ export interface Theme {
 	warning: string
 }
 
-export const lightPalette: Theme = {
+const lightPalette: Theme = {
 	action: {
 		active: blacks.base,
 		disabled: blacks['lighten-90'] // update when defined by Design
@@ -43,14 +45,14 @@ export const lightPalette: Theme = {
 	warning: oranges.base
 }
 
-export const darkPalette: Theme = {
+const darkPalette: Theme = {
 	action: {
 		active: whites.base,
 		disabled: blacks['lighten-20'] // update when defined by Design
 	},
 	background: {
-		primary: blacks['darken-20'],
-		secondary: blacks.base
+		primary: blacks.base,
+		secondary: blacks['darken-20']
 	},
 	border: blacks['darken-20'],
 	error: reds.base,
@@ -63,7 +65,7 @@ export const darkPalette: Theme = {
 	warning: oranges.base
 }
 
-export const generateThemedStyles = ({
+const generateThemedStyles = ({
 	action,
 	background,
 	border,