feat(🎨 Themes): Added success and warning colors.

BlueBaseJS · Apr 22, 2019 · 82473d9 · 82473d9
1 parent 9364013
commit 82473d9
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 10 deletions.
diff --git a/src/__tests__/__snapshots__/getComponent.test.tsx.snap b/src/__tests__/__snapshots__/getComponent.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`getComponent should render a button component 1`] = `
           "paddingTop": 8,
         },
         Object {
-          "backgroundColor": "#fafafa",
+          "backgroundColor": "#f5f5f5",
         },
       ]
     }

diff --git a/src/native/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/native/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`Button should render Button with custom children 1`] = `
           "paddingTop": 8,
         },
         Object {
-          "backgroundColor": "#fafafa",
+          "backgroundColor": "#f5f5f5",
         },
         Object {
           "alignSelf": "stretch",
@@ -76,7 +76,7 @@ exports[`Button should render Button with default color styles 1`] = `
           "paddingTop": 8,
         },
         Object {
-          "backgroundColor": "#fafafa",
+          "backgroundColor": "#f5f5f5",
         },
       ]
     }
@@ -132,7 +132,7 @@ exports[`Button should render Button with full width 1`] = `
           "paddingTop": 8,
         },
         Object {
-          "backgroundColor": "#fafafa",
+          "backgroundColor": "#f5f5f5",
         },
         Object {
           "alignSelf": "stretch",
@@ -337,7 +337,7 @@ exports[`Button should use TouchableNativeFeedback on android platform 1`] = `
   styles={
     Object {
       "default": Object {
-        "backgroundColor": "#fafafa",
+        "backgroundColor": "#f5f5f5",
       },
       "defaultText": Object {},
       "fullWidth": Object {

diff --git a/src/themes/__tests__/ThemeContext.test.tsx b/src/themes/__tests__/ThemeContext.test.tsx
@@ -21,7 +21,7 @@ describe('ThemeContext', () => {
 		setTimeout(() => {
 			const tree = component.toJSON();
 			expect(tree).toMatchSnapshot();
-			expect((tree as any).props.style.backgroundColor).toBe('#fafafa');
+			expect((tree as any).props.style.backgroundColor).toBe('#f5f5f5');
 			done();
 		});
 	});
@@ -59,7 +59,7 @@ describe('ThemeContext', () => {
 
 		// Check theme
 		let view = wrapper.find('ThemeDemo').childAt(0).first();
-		expect((view.prop('style') as any).backgroundColor).toBe('#fafafa');
+		expect((view.prop('style') as any).backgroundColor).toBe('#f5f5f5');
 		expect(wrapper.find('ThemeDemo').find('Text').last().text()).toBe('BlueBase Light');
 
 		// Change theme
@@ -89,7 +89,7 @@ describe('ThemeContext', () => {
 
 		// Check theme
 		const view = wrapper.find('ThemeDemo').childAt(0).first();
-		expect((view.prop('style') as any).backgroundColor).toBe('#fafafa');
+		expect((view.prop('style') as any).backgroundColor).toBe('#f5f5f5');
 		expect(wrapper.find('ThemeDemo').find('Text').last().text()).toBe('BlueBase Light');
 
 		// Check Subscription

diff --git a/src/themes/__tests__/__snapshots__/ThemeContext.test.tsx.snap b/src/themes/__tests__/__snapshots__/ThemeContext.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ThemeContext should render a ThemeDemo component with themed background
 <View
   style={
     Object {
-      "backgroundColor": "#fafafa",
+      "backgroundColor": "#f5f5f5",
       "padding": 8,
     }
   }

diff --git a/src/themes/helpers/createPalette.ts b/src/themes/helpers/createPalette.ts
@@ -24,7 +24,9 @@ export const light = {
 	 */
 	background: {
 		card: '#ffffff',
-		default: '#fafafa',
+		default: '#f5f5f5',
+		light: '#fafafa',
+		dark: '#eeeeee',
 	},
 
 	/** The colors used to style the action elements. */
@@ -55,6 +57,8 @@ export const dark = {
 	background: {
 		card: '#424242',
 		default: '#303030',
+		light: '#404040',
+		dark: '#202020',
 	},
 	action: {
 		active: '#ffffff',
@@ -85,6 +89,18 @@ const common = {
 		light: '#ff4081',
 		main: '#f50057',
 	},
+	success: {
+		contrastText: '#fff',
+		dark: '#388e3c',
+		light: '#81c784',
+		main: '#4caf50',
+	},
+	warning: {
+		contrastText: '#fff',
+		dark: '#ffa000',
+		light: '#ffd54f',
+		main: '#ffc107',
+	},
 };
 
 export function createPalette(mode: 'light' | 'dark') {

diff --git a/src/themes/structure/Palette.ts b/src/themes/structure/Palette.ts
@@ -24,6 +24,13 @@ export interface TypeAction {
 
 export interface TypeBackground {
 	default: string;
+
+	/** Lighter shade of background */
+	light: string;
+
+	/** Darker share of background */
+	dark: string;
+
 	card: string;
 }
 
@@ -32,6 +39,8 @@ export type TypeDivider = string;
 export interface Palette {
 	primary: PaletteColor;
 	secondary: PaletteColor;
+	success: PaletteColor;
+	warning: PaletteColor;
 	error: PaletteColor;
 	action: TypeAction;
 	divider: TypeDivider;
@@ -42,6 +51,8 @@ export interface Palette {
 export interface PaletteInput {
 	primary?: Partial<PaletteColor>;
 	secondary?: Partial<PaletteColor>;
+	success?: Partial<PaletteColor>;
+	warning?: Partial<PaletteColor>;
 	error?: Partial<PaletteColor>;
 	action?: Partial<TypeAction>;
 	divider?: TypeDivider;