@descope/web-components-ui 1.0.40 → 1.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/cjs/index.cjs.js +35 -18
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +416 -343
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/descope-button/index.js +3 -3
  7. package/src/components/descope-checkbox/index.js +2 -2
  8. package/src/components/descope-combo/index.js +12 -12
  9. package/src/components/descope-container/Container.js +57 -51
  10. package/src/components/descope-container/index.js +1 -1
  11. package/src/components/descope-date-picker/index.js +13 -7
  12. package/src/components/descope-email-field/index.js +2 -2
  13. package/src/components/descope-number-field/index.js +2 -2
  14. package/src/components/descope-password-field/index.js +2 -2
  15. package/src/components/descope-switch-toggle/index.js +2 -2
  16. package/src/components/descope-text-area/index.js +2 -2
  17. package/src/components/descope-text-field/index.js +3 -3
  18. package/src/componentsHelpers/componentNameValidationMixin.js +21 -17
  19. package/src/componentsHelpers/createProxy/helpers.js +31 -27
  20. package/src/componentsHelpers/createStyleMixin/helpers.js +65 -47
  21. package/src/componentsHelpers/createStyleMixin/index.js +76 -55
  22. package/src/componentsHelpers/draggableMixin.js +25 -26
  23. package/src/constants.js +1 -1
  24. package/src/dev/index.js +4 -3
  25. package/src/helpers.js +8 -6
  26. package/src/index.cjs.js +1 -1
  27. package/src/index.js +13 -13
  28. package/src/index.umd.js +11 -5
  29. package/src/theme/components/button.js +37 -37
  30. package/src/theme/components/container.js +10 -12
  31. package/src/theme/components/textArea.js +3 -3
  32. package/src/theme/components/textField.js +1 -1
  33. package/src/theme/globals.js +44 -36
  34. package/src/theme/index.js +2 -2
  35. package/src/themeHelpers/index.js +45 -30
  36. package/src/themeHelpers/processColors.js +10 -7
package/src/dev/index.js CHANGED
@@ -1,6 +1,7 @@
1
- import theme from '../theme'
2
- import { themeToStyle } from "../themeHelpers";
1
+ import theme from '../theme';
2
+ import { themeToStyle } from '../themeHelpers';
3
3
 
4
4
  // this file is used for exposing stuff to the dev env only
5
5
 
6
- export const getDefaultThemeStyles = (themeName) => themeToStyle(theme, themeName)
6
+ export const getDefaultThemeStyles = (themeName) =>
7
+ themeToStyle(theme, themeName);
package/src/helpers.js CHANGED
@@ -1,8 +1,10 @@
1
- export const kebabCase = str => str
2
- .replace(/([a-z])([A-Z])/g, "$1-$2")
3
- .replace(/[\s_.]+/g, '-')
4
- .toLowerCase();
1
+ export const kebabCase = (str) =>
2
+ str
3
+ .replace(/([a-z])([A-Z])/g, '$1-$2')
4
+ .replace(/[\s_.]+/g, '-')
5
+ .toLowerCase();
5
6
 
6
- export const kebabCaseJoin = (...args) => kebabCase(args.join('-'))
7
+ export const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
7
8
 
8
- export const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`
9
+ export const getCssVarName = (...args) =>
10
+ `--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
package/src/index.cjs.js CHANGED
@@ -1,3 +1,3 @@
1
1
  // CJS is used by screen-renderer-service, we cannot load vaadin there,
2
2
  // so we are exporting only the css generation stuff
3
- export * from './themeHelpers'
3
+ export * from './themeHelpers';
package/src/index.js CHANGED
@@ -1,17 +1,17 @@
1
- import "./components/descope-button";
2
- import "./components/descope-combo";
3
- import "./components/descope-text-field";
4
- import "./components/descope-number-field";
5
- import "./components/descope-email-field";
6
- import "./components/descope-password-field";
7
- import "./components/descope-text-area";
8
- import "./components/descope-date-picker";
9
- import "./components/descope-container";
1
+ import './components/descope-button';
2
+ import './components/descope-combo';
3
+ import './components/descope-text-field';
4
+ import './components/descope-number-field';
5
+ import './components/descope-email-field';
6
+ import './components/descope-password-field';
7
+ import './components/descope-text-area';
8
+ import './components/descope-date-picker';
9
+ import './components/descope-container';
10
10
 
11
11
  export {
12
12
  globalsThemeToStyle,
13
13
  componentsThemeToStyle,
14
- themeToStyle,
15
- } from "./themeHelpers";
16
- export { genColor } from "./themeHelpers/processColors";
17
- export { default as defaultTheme } from "./theme";
14
+ themeToStyle
15
+ } from './themeHelpers';
16
+ export { genColor } from './themeHelpers/processColors';
17
+ export { default as defaultTheme } from './theme';
package/src/index.umd.js CHANGED
@@ -1,10 +1,16 @@
1
- const components = import.meta.webpackContext('./components', { recursive: true, regExp: /index.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
1
+ const components = import.meta.webpackContext('./components', {
2
+ recursive: true,
3
+ regExp: /index.js$/,
4
+ mode: 'lazy',
5
+ chunkName: '[request]',
6
+ prefetch: true
7
+ });
2
8
 
3
9
  // all components must be in a folder with the component name, and have an index.js file
4
10
  // e.g. ./descope-button/index.js
5
11
  module.exports = components.keys().reduce((acc, key) => {
6
- const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1')
7
- acc[componentName] = () => components(key)
12
+ const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
13
+ acc[componentName] = () => components(key);
8
14
 
9
- return acc;
10
- }, {})
15
+ return acc;
16
+ }, {});
@@ -1,6 +1,6 @@
1
- import globals from "../globals";
2
- import { getThemeRefs, createHelperVars } from "../../themeHelpers";
3
- import Button, { componentName } from "../../components/descope-button/Button";
1
+ import globals from '../globals';
2
+ import { getThemeRefs, createHelperVars } from '../../themeHelpers';
3
+ import Button, { componentName } from '../../components/descope-button/Button';
4
4
 
5
5
  const globalRefs = getThemeRefs(globals);
6
6
  const vars = Button.cssVarList;
@@ -10,7 +10,7 @@ const mode = {
10
10
  secondary: globalRefs.colors.secondary,
11
11
  success: globalRefs.colors.success,
12
12
  error: globalRefs.colors.error,
13
- surface: globalRefs.colors.surface,
13
+ surface: globalRefs.colors.surface
14
14
  };
15
15
 
16
16
  const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName);
@@ -20,43 +20,43 @@ const button = {
20
20
 
21
21
  size: {
22
22
  xs: {
23
- [vars.height]: "10px",
24
- [vars.fontSize]: "10px",
25
- [vars.padding]: `0 ${globalRefs.spacing.xs}`,
23
+ [vars.height]: '10px',
24
+ [vars.fontSize]: '10px',
25
+ [vars.padding]: `0 ${globalRefs.spacing.xs}`
26
26
  },
27
27
  sm: {
28
- [vars.height]: "20px",
29
- [vars.fontSize]: "10px",
30
- [vars.padding]: `0 ${globalRefs.spacing.sm}`,
28
+ [vars.height]: '20px',
29
+ [vars.fontSize]: '10px',
30
+ [vars.padding]: `0 ${globalRefs.spacing.sm}`
31
31
  },
32
32
  md: {
33
- [vars.height]: "30px",
34
- [vars.fontSize]: "14px",
35
- [vars.padding]: `0 ${globalRefs.spacing.md}`,
33
+ [vars.height]: '30px',
34
+ [vars.fontSize]: '14px',
35
+ [vars.padding]: `0 ${globalRefs.spacing.md}`
36
36
  },
37
37
  lg: {
38
- [vars.height]: "40px",
39
- [vars.fontSize]: "20px",
40
- [vars.padding]: `0 ${globalRefs.spacing.lg}`,
38
+ [vars.height]: '40px',
39
+ [vars.fontSize]: '20px',
40
+ [vars.padding]: `0 ${globalRefs.spacing.lg}`
41
41
  },
42
42
  xl: {
43
- [vars.height]: "50px",
44
- [vars.fontSize]: "25px",
45
- [vars.padding]: `0 ${globalRefs.spacing.xl}`,
46
- },
43
+ [vars.height]: '50px',
44
+ [vars.fontSize]: '25px',
45
+ [vars.padding]: `0 ${globalRefs.spacing.xl}`
46
+ }
47
47
  },
48
48
 
49
49
  [vars.borderRadius]: globalRefs.radius.lg,
50
- [vars.cursor]: "pointer",
51
- [vars.borderWidth]: "2px",
52
- [vars.borderStyle]: "solid",
53
- [vars.borderColor]: "transparent",
50
+ [vars.cursor]: 'pointer',
51
+ [vars.borderWidth]: '2px',
52
+ [vars.borderStyle]: 'solid',
53
+ [vars.borderColor]: 'transparent',
54
54
 
55
- _fullwidth: {
56
- [vars.width]: "100%",
55
+ _fullWidth: {
56
+ [vars.width]: '100%'
57
57
  },
58
58
  _loading: {
59
- [vars.cursor]: "wait",
59
+ [vars.cursor]: 'wait'
60
60
  },
61
61
 
62
62
  variant: {
@@ -64,11 +64,11 @@ const button = {
64
64
  [vars.color]: helperRefs.contrast,
65
65
  [vars.backgroundColor]: helperRefs.main,
66
66
  _hover: {
67
- [vars.backgroundColor]: helperRefs.dark,
67
+ [vars.backgroundColor]: helperRefs.dark
68
68
  },
69
69
  _loading: {
70
- [vars.backgroundColor]: helperRefs.main,
71
- },
70
+ [vars.backgroundColor]: helperRefs.main
71
+ }
72
72
  },
73
73
  outline: {
74
74
  [vars.color]: helperRefs.main,
@@ -77,9 +77,9 @@ const button = {
77
77
  [vars.color]: helperRefs.dark,
78
78
  [vars.borderColor]: helperRefs.dark,
79
79
  _error: {
80
- [vars.color]: helperRefs.error,
81
- },
82
- },
80
+ [vars.color]: helperRefs.error
81
+ }
82
+ }
83
83
  },
84
84
  link: {
85
85
  [vars.color]: helperRefs.main,
@@ -89,10 +89,10 @@ const button = {
89
89
  [vars.borderRadius]: 0,
90
90
  _hover: {
91
91
  [vars.color]: helperRefs.main,
92
- [vars.textDecoration]: "underline",
93
- },
94
- },
95
- },
92
+ [vars.textDecoration]: 'underline'
93
+ }
94
+ }
95
+ }
96
96
  };
97
97
 
98
98
  export default button;
@@ -18,10 +18,8 @@ const horizontalAlignment = {
18
18
  end: { horizontalAlignment: 'end' }
19
19
  };
20
20
 
21
- const [helperTheme, helperRefs, helperVars] = createHelperVars(
22
- { verticalAlignment, horizontalAlignment },
23
- 'container'
24
- );
21
+ const [helperTheme, helperVars, helperRefs] =
22
+ createHelperVars({ verticalAlignment, horizontalAlignment }, 'container')
25
23
 
26
24
  const container = {
27
25
  ...helperTheme,
@@ -72,15 +70,15 @@ const container = {
72
70
  },
73
71
 
74
72
  shadow: {
75
- sm: {
76
- [vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
77
- },
78
- md: {
79
- [vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
73
+ sm: {
74
+ [vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
75
+ },
76
+ md: {
77
+ [vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
78
+ },
79
+ lg: {
80
+ [vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
80
81
  },
81
- lg: {
82
- [vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
83
- }
84
82
  },
85
83
 
86
84
  borderRadius: {
@@ -15,12 +15,12 @@ const textArea = {
15
15
  [vars.borderStyle]: 'solid',
16
16
  [vars.borderColor]: 'transparent',
17
17
 
18
- _borderoffset: {
18
+ _borderOffset: {
19
19
  [vars.outlineOffset]: '2px'
20
20
  },
21
21
 
22
22
  _bordered: {
23
- [vars.inputBorderColor]: globalRefs.colors.surface.main
23
+ [vars.borderColor]: globalRefs.colors.surface.main
24
24
  },
25
25
 
26
26
  _focused: {
@@ -28,7 +28,7 @@ const textArea = {
28
28
  [vars.outline]: `2px solid ${globalRefs.colors.surface.main}`
29
29
  },
30
30
 
31
- _fullwidth: {
31
+ _fullWidth: {
32
32
  [vars.width]: '100%'
33
33
  },
34
34
 
@@ -61,7 +61,7 @@ export const textField = (vars) => ({
61
61
  [vars.backgroundColor]: globalRefs.colors.surface.main
62
62
  },
63
63
 
64
- _fullwidth: {
64
+ _fullWidth: {
65
65
  [vars.width]: '100%'
66
66
  },
67
67
 
@@ -1,62 +1,70 @@
1
- import { genColors } from "../themeHelpers/processColors";
1
+ import { genColors } from '../themeHelpers/processColors';
2
2
 
3
3
  export const colors = genColors({
4
4
  surface: {
5
- main: "lightgray",
6
- light: "#fff",
7
- dark: "#000",
5
+ main: 'lightgray',
6
+ light: '#fff',
7
+ dark: '#000'
8
8
  },
9
- primary: "#0082B5",
10
- secondary: "#7D14EB",
11
- success: "green",
12
- error: "red",
9
+ primary: '#0082B5',
10
+ secondary: '#7D14EB',
11
+ success: 'green',
12
+ error: 'red'
13
13
  });
14
14
 
15
15
  const typography = {
16
16
  h1: {
17
- font: ["Courier New", "Arial", "sans-serif"],
18
- weight: "700",
19
- size: "48px",
17
+ font: ['Courier New', 'Arial', 'sans-serif'],
18
+ weight: '700',
19
+ size: '48px'
20
20
  },
21
21
  h2: {
22
- font: ["Courier New", "sans-serif"],
23
- weight: "500",
24
- size: "38px",
22
+ font: ['Courier New', 'sans-serif'],
23
+ weight: '500',
24
+ size: '38px'
25
25
  },
26
26
  h3: {
27
- font: ["Courier New", "sans-serif"],
28
- weight: "300",
29
- size: "28px",
30
- },
27
+ font: ['Courier New', 'sans-serif'],
28
+ weight: '300',
29
+ size: '28px'
30
+ }
31
31
  };
32
32
 
33
33
  const spacing = {
34
- xs: "2px",
35
- sm: "4px",
36
- md: "8px",
37
- lg: "16px",
38
- xl: "32px",
34
+ xs: '2px',
35
+ sm: '4px',
36
+ md: '8px',
37
+ lg: '16px',
38
+ xl: '32px'
39
39
  };
40
40
 
41
41
  const border = {
42
- sm: "1px",
43
- md: "2px",
44
- lg: "3px",
42
+ sm: '1px',
43
+ md: '2px',
44
+ lg: '3px'
45
45
  };
46
46
 
47
47
  const radius = {
48
- sm: "5px",
49
- md: "25px",
50
- lg: "50px",
48
+ sm: '5px',
49
+ md: '25px',
50
+ lg: '50px'
51
51
  };
52
52
 
53
53
  const shadow = {
54
- color: colors.primary.main,
55
- size: {
56
- sm: `0 0 10px`,
57
- md: `0 0 20px`,
58
- lg: `0 0 30px`,
59
- },
54
+ wide: {
55
+ sm: '0 2px 3px -0.5px',
56
+ md: '0 4px 6px -1px',
57
+ lg: '0 10px 15px -3px',
58
+ xl: '0 20px 25px -5px',
59
+ '2xl': '0 25px 50px -12px',
60
+ },
61
+ narrow: {
62
+ sm: '0 1px 2px -1px',
63
+ md: '0 2px 4px -2px',
64
+ lg: '0 4px 6px -4px',
65
+ xl: '0 8px 10px -6px',
66
+ '2xl': '0 16px 16px -8px',
67
+ }
60
68
  };
61
69
 
62
70
  export default {
@@ -65,5 +73,5 @@ export default {
65
73
  spacing,
66
74
  border,
67
75
  radius,
68
- shadow,
76
+ shadow
69
77
  };
@@ -1,4 +1,4 @@
1
- import globals from "./globals"
1
+ import globals from './globals';
2
2
  import components from './components';
3
3
 
4
- export default { globals, components }
4
+ export default { globals, components };
@@ -1,10 +1,10 @@
1
- import merge from "lodash.merge";
2
- import set from "lodash.set";
3
- import { DESCOPE_PREFIX } from "../constants";
4
- import { getCssVarName, kebabCase } from "../helpers";
5
- import { getComponentName } from "../componentsHelpers";
1
+ import merge from 'lodash.merge';
2
+ import set from 'lodash.set';
3
+ import { DESCOPE_PREFIX } from '../constants';
4
+ import { getCssVarName, kebabCase } from '../helpers';
5
+ import { getComponentName } from '../componentsHelpers';
6
6
 
7
- const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)
7
+ const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
8
8
 
9
9
  const transformTheme = (theme, path, getTransformation) => {
10
10
  return Object.entries(theme).reduce((acc, [key, val]) => {
@@ -16,79 +16,94 @@ const transformTheme = (theme, path, getTransformation) => {
16
16
  }, {});
17
17
  };
18
18
 
19
- const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ")
19
+ const stringifyArray = (strArr) =>
20
+ strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
20
21
 
21
22
  export const themeToCSSVarsObj = (theme) =>
22
23
  transformTheme(theme, [], (path, val) => ({
23
- [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
24
+ [getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
24
25
  }));
25
26
 
26
27
  export const getThemeRefs = (theme, prefix) =>
27
- transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
28
+ transformTheme(theme, [], (path) =>
29
+ set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
30
+ );
28
31
 
29
32
  export const globalsThemeToStyle = (theme, themeName = '') => `
30
33
  *[data-theme="${themeName}"] {
31
34
  ${Object.entries(themeToCSSVarsObj(theme)).reduce(
32
- (acc, entry) => (acc += `${entry.join(":")};\n`), ''
33
- )}
35
+ (acc, entry) => (acc += `${entry.join(':')};\n`),
36
+ ''
37
+ )}
34
38
  }
35
- `
39
+ `;
36
40
 
37
41
  const componentsThemeToStyleObj = (componentsTheme) =>
38
42
  transformTheme(componentsTheme, [], (path, val) => {
39
- const [component, ...restPath] = path
40
- const property = restPath.pop()
43
+ const [component, ...restPath] = path;
44
+ const property = restPath.pop();
41
45
 
42
46
  // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
43
47
  // starts with underscore -> attribute selector
44
48
 
45
49
  const attrsSelector = restPath.reduce((acc, section, idx) => {
46
- if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
50
+ if (section.startsWith('_'))
51
+ return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
47
52
 
48
53
  const nextSection = restPath[idx + 1];
49
54
 
50
55
  if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
51
- console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`)
56
+ console.error(
57
+ 'theme generator',
58
+ `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
59
+ );
52
60
  return acc;
53
61
  }
54
62
 
55
- return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
63
+ return (acc += `[${kebabCase(section)}="${restPath
64
+ .splice(idx + 1, 1)
65
+ .join('')}"]`);
56
66
  }, '');
57
67
 
58
- let selector = `${getComponentName(component)}${attrsSelector}`
68
+ let selector = `${getComponentName(component)}${attrsSelector}`;
59
69
 
60
70
  return {
61
71
  [selector]: {
62
72
  [property]: val
63
73
  }
64
- }
74
+ };
65
75
  });
66
76
 
67
77
  export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
68
78
  Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
69
- (acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
79
+ (acc, [selector, vars]) =>
80
+ (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
81
+ vars
82
+ )
83
+ .map(([key, val]) => `${key}: ${val}`)
84
+ .join(';\n')} \n}\n\n`),
70
85
  ''
71
86
  );
72
87
 
73
88
  export const themeToStyle = ({ globals, components }, themeName) => `
74
89
  ${globalsThemeToStyle(globals, themeName)}
75
90
  ${componentsThemeToStyle(components, themeName)}
76
- `
91
+ `;
77
92
 
78
- const useVar = varName => `var(${varName})`
93
+ const useVar = (varName) => `var(${varName})`;
79
94
 
80
95
  export const createHelperVars = (theme, prefix) => {
81
96
  const res = transformTheme(theme, [], (path, value) => {
82
97
  const modifiedPath = [...path];
83
- const property = modifiedPath.splice(-1)
84
- const varName = getCssVarName(prefix, property)
98
+ const property = modifiedPath.splice(-1);
99
+ const varName = getCssVarName(prefix, property);
85
100
 
86
- const vars = { [property]: varName }
87
- const theme = set({}, [...modifiedPath, varName], value)
88
- const useVars = { [property]: useVar(varName) }
101
+ const vars = { [property]: varName };
102
+ const theme = set({}, [...modifiedPath, varName], value);
103
+ const useVars = { [property]: useVar(varName) };
89
104
 
90
- return { theme, useVars, vars }
91
- })
105
+ return { theme, useVars, vars };
106
+ });
92
107
 
93
- return [res.theme, res.useVars, res.vars]
108
+ return [res.theme, res.useVars, res.vars];
94
109
  };
@@ -1,10 +1,13 @@
1
- import Color from "color";
1
+ import Color from 'color';
2
2
 
3
3
  const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
4
4
  const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
5
5
  const genContrast = (c, percentage = 0.9) => {
6
6
  const isDark = c.isDark();
7
- return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
7
+ return c
8
+ .mix(Color(isDark ? 'white' : 'black'), percentage)
9
+ .saturate(1)
10
+ .hex();
8
11
  };
9
12
 
10
13
  export const genColor = (color) => {
@@ -14,16 +17,16 @@ export const genColor = (color) => {
14
17
  main: mainColor.hex(),
15
18
  dark: color.dark || genDark(mainColor),
16
19
  light: color.light || genLight(mainColor),
17
- contrast: color.contrast || genContrast(mainColor),
18
- }
19
- }
20
+ contrast: color.contrast || genContrast(mainColor)
21
+ };
22
+ };
20
23
 
21
24
  export const genColors = (colors) => {
22
25
  return Object.keys(colors).reduce((acc, colorName) => {
23
26
  const currentColor = colors[colorName];
24
27
 
25
28
  return Object.assign(acc, {
26
- [colorName]: genColor(currentColor),
27
- })
29
+ [colorName]: genColor(currentColor)
30
+ });
28
31
  }, {});
29
32
  };