@potok/theme - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

components/PotokThemeProvider.jsx

@@ -19,4 +19,6 @@ // @flow
  */
-const PotokThemeProvider = ({ appearance, device, children }: Props) => (
-  <ThemeProvider theme={{ appearance, device }}>{children}</ThemeProvider>
+const PotokThemeProvider = ({ appearance, device, color, children }: Props) => (
+  <ThemeProvider theme={{ appearance, device, color }}>
+    {children}
+  </ThemeProvider>
 );
@@ -23,0 +25,0 @@

index.js

@@ -5,3 +5,3 @@ import { css } from 'styled-components';
 
-export { default as colors } from './lib/colors';
+export { themedColors as colors } from './lib/colors';
 export { default as PotokThemeProvider } from './components/PotokThemeProvider';
@@ -11,2 +11,3 @@ export {
   devices as themeDevices,
+  colors as themeColors,
 } from './lib/theme';
@@ -13,0 +14,0 @@ export { default as themed } from './lib/themed';

lib/colors.js

@@ -1,4 +0,11 @@
-export default {
+import _ from 'lodash';
+
+import { colors as colorThemes } from './theme';
+
+const themedPalette = {
   // Primary colors
-  B500: '#26bdfc', // base blue
+  B500: {
+    [colorThemes.default]: '#26bdfc', // base blue
+    [colorThemes.recruitmentAgency]: '#5649f2',
+  },
   G500: '#0ce0ad', // base green
@@ -9,6 +16,18 @@ R500: '#ff5a6e', // base red
   // Secondary colors
-  B600: '#1fa6f2',
-  B400: '#26cbff',
-  B100: '#b3e9ff',
-  B50: '#f1fbff',
+  B600: {
+    [colorThemes.default]: '#1fa6f2',
+    [colorThemes.recruitmentAgency]: '#4758f3',
+  },
+  B400: {
+    [colorThemes.default]: '#26cbff',
+    [colorThemes.recruitmentAgency]: '#6284ff',
+  },
+  B100: {
+    [colorThemes.default]: '#b3e9ff',
+    [colorThemes.recruitmentAgency]: '#a1c4f9',
+  },
+  B50: {
+    [colorThemes.default]: '#f1fbff',
+    [colorThemes.recruitmentAgency]: '#f2f8ff',
+  },
   G400: '#01fdd5',
@@ -30,1 +49,9 @@ G300: '#1cedbb',
 };
+
+export const themedColors = Object.keys(themedPalette).reduce((acc, key) => {
+  acc[key] = (props: ThemeProps) => {
+    const theme = _.get(props, 'theme.color') || 'default';
+    return _.get(themedPalette, [key, theme]) || _.get(themedPalette, key);
+  };
+  return acc;
+}, {});

lib/theme.js

@@ -11,4 +11,9 @@ export const appearances = {
 
+export const colors = {
+  default: 'default',
+  recruitmentAgency: 'recruitmentAgency',
+};
+
 const theme = {};
 
 export default theme;

lib/types.js

 // @flow
-import { appearances, devices } from './theme';
+import { appearances, devices, colors } from './theme';
 
 export type ThemeAppearance = $Values<appearances>;
 export type ThemeDevice = $Values<devices>;
-export type Theme = { appearance: ThemeAppearance, device: ThemeDevice };
+export type ThemeColor = $Values<colors>;
+export type Theme = {
+  appearance: ThemeAppearance,
+  device: ThemeDevice,
+  color: ThemeColor,
+};
 export type ThemeProps = { theme: Theme };

package.json

 {
   "name": "@potok/theme",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Potok.io UI Kit Theme package",
@@ -5,0 +5,0 @@ "main": "./index.js",

No alert changes

Improved metrics

Total package byte prevSize

4373

increased by29.34%

Lines of code

138

increased by35.29%

No dependency changes