@potok/theme - npm Package Compare versions

Comparing version 0.7.0-alpha.7cca553f to 0.7.0-alpha.8102716a

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

 import { css } from 'styled-components';
-import themed from './lib/themed';
-import { appearances } from './lib/theme';
+import { default as themed, themedColors } from './lib/themed';
+import { appearances, colors as themeColors } from './lib/theme';
 
-export { default as colors } from './lib/colors';
+export { themedColors as colors } from './lib/colors';
 export { default as PotokThemeProvider } from './components/PotokThemeProvider';
@@ -7,0 +7,0 @@ export {

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
@@ -29,1 +36,9 @@ R500: '#ff5a6e', // base red
 };
+
+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.7.0-alpha.7cca553f",
+  "version": "0.7.0-alpha.8102716a",
   "description": "Potok.io UI Kit Theme package",
@@ -5,0 +5,0 @@ "main": "./index.js",

No alert changes

Improved metrics

Total package byte prevSize

4087

increased by20.35%

Lines of code

125

increased by22.55%

No dependency changes