feat #147, #148 - Update background colors and avatar styles (#149)

* feat #147 - Update background colors

Closes #147

* feat #148 - Update avatar styles

Closes #148

package.json

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

src/components/Avatar/index.tsx

@@ -1,8 +1,23 @@
 import 'antd/lib/avatar/style/index.css'
 import { Avatar as AntDAvatar } from 'antd'
 import { AvatarProps as AntDAvatarProps } from 'antd/lib/avatar'
+import { createUseStyles } from 'react-jss'
+import { styleguide } from 'components/assets/styles'
 import React, { FC, ReactNode } from 'react'
 
+const {
+	colors: { blacks }
+} = styleguide
+
+const useStyles = createUseStyles({
+	'@global': {
+		'.ant-avatar': {
+			background: blacks['lighten-30'],
+			color: blacks['lighten-80']
+		}
+	}
+})
+
 interface SharedAvatarProps {
 	/**
 	 * Letter type unit distance between left and right sides.
@@ -37,8 +52,12 @@ export const Avatar: FC<AvatarProps> = ({
 	gap,
 	icon,
 	size
-}: AvatarProps) => (
-	<AntDAvatar gap={gap} icon={icon} size={size}>
-		{children}
-	</AntDAvatar>
-)
+}: AvatarProps) => {
+	useStyles()
+
+	return (
+		<AntDAvatar gap={gap} icon={icon} size={size}>
+			{children}
+		</AntDAvatar>
+	)
+}

src/components/assets/styles/themes.ts

@@ -35,8 +35,8 @@ export interface Theme {
 
 const lightPalette: Theme = {
 	background: {
-		primary: whites.base,
-		secondary: grays.base
+		primary: grays['lighten-70'],
+		secondary: whites.base
 	},
 	border: blacks['lighten-80'],
 	primary: blacks.base,
@@ -62,8 +62,8 @@ const lightPalette: Theme = {
 
 const darkPalette: Theme = {
 	background: {
-		primary: blacks.base,
-		secondary: blacks['darken-20']
+		primary: blacks['darken-40'],
+		secondary: blacks.base
 	},
 	border: blacks['lighten-20'],
 	primary: blacks['lighten-50'],