@descope/web-components-ui 1.0.40 → 1.0.42
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +35 -18
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +416 -343
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/index.js +3 -3
- package/src/components/descope-checkbox/index.js +2 -2
- package/src/components/descope-combo/index.js +12 -12
- package/src/components/descope-container/Container.js +57 -51
- package/src/components/descope-container/index.js +1 -1
- package/src/components/descope-date-picker/index.js +13 -7
- package/src/components/descope-email-field/index.js +2 -2
- package/src/components/descope-number-field/index.js +2 -2
- package/src/components/descope-password-field/index.js +2 -2
- package/src/components/descope-switch-toggle/index.js +2 -2
- package/src/components/descope-text-area/index.js +2 -2
- package/src/components/descope-text-field/index.js +3 -3
- package/src/componentsHelpers/componentNameValidationMixin.js +21 -17
- package/src/componentsHelpers/createProxy/helpers.js +31 -27
- package/src/componentsHelpers/createStyleMixin/helpers.js +65 -47
- package/src/componentsHelpers/createStyleMixin/index.js +76 -55
- package/src/componentsHelpers/draggableMixin.js +25 -26
- package/src/constants.js +1 -1
- package/src/dev/index.js +4 -3
- package/src/helpers.js +8 -6
- package/src/index.cjs.js +1 -1
- package/src/index.js +13 -13
- package/src/index.umd.js +11 -5
- package/src/theme/components/button.js +37 -37
- package/src/theme/components/container.js +10 -12
- package/src/theme/components/textArea.js +3 -3
- package/src/theme/components/textField.js +1 -1
- package/src/theme/globals.js +44 -36
- package/src/theme/index.js +2 -2
- package/src/themeHelpers/index.js +45 -30
- 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
|
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) =>
|
6
|
+
export const getDefaultThemeStyles = (themeName) =>
|
7
|
+
themeToStyle(theme, themeName);
|
package/src/helpers.js
CHANGED
@@ -1,8 +1,10 @@
|
|
1
|
-
export const kebabCase = str =>
|
2
|
-
|
3
|
-
.replace(/[
|
4
|
-
.
|
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) =>
|
9
|
+
export const getCssVarName = (...args) =>
|
10
|
+
`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
|
package/src/index.cjs.js
CHANGED
package/src/index.js
CHANGED
@@ -1,17 +1,17 @@
|
|
1
|
-
import
|
2
|
-
import
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
import
|
9
|
-
import
|
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
|
16
|
-
export { genColor } from
|
17
|
-
export { default as defaultTheme } from
|
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', {
|
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
|
-
|
7
|
-
|
12
|
+
const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1');
|
13
|
+
acc[componentName] = () => components(key);
|
8
14
|
|
9
|
-
|
10
|
-
}, {})
|
15
|
+
return acc;
|
16
|
+
}, {});
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import globals from
|
2
|
-
import { getThemeRefs, createHelperVars } from
|
3
|
-
import Button, { componentName } from
|
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]:
|
24
|
-
[vars.fontSize]:
|
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]:
|
29
|
-
[vars.fontSize]:
|
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]:
|
34
|
-
[vars.fontSize]:
|
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]:
|
39
|
-
[vars.fontSize]:
|
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]:
|
44
|
-
[vars.fontSize]:
|
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]:
|
51
|
-
[vars.borderWidth]:
|
52
|
-
[vars.borderStyle]:
|
53
|
-
[vars.borderColor]:
|
50
|
+
[vars.cursor]: 'pointer',
|
51
|
+
[vars.borderWidth]: '2px',
|
52
|
+
[vars.borderStyle]: 'solid',
|
53
|
+
[vars.borderColor]: 'transparent',
|
54
54
|
|
55
|
-
|
56
|
-
[vars.width]:
|
55
|
+
_fullWidth: {
|
56
|
+
[vars.width]: '100%'
|
57
57
|
},
|
58
58
|
_loading: {
|
59
|
-
[vars.cursor]:
|
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]:
|
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,
|
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
|
-
|
18
|
+
_borderOffset: {
|
19
19
|
[vars.outlineOffset]: '2px'
|
20
20
|
},
|
21
21
|
|
22
22
|
_bordered: {
|
23
|
-
[vars.
|
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
|
-
|
31
|
+
_fullWidth: {
|
32
32
|
[vars.width]: '100%'
|
33
33
|
},
|
34
34
|
|
package/src/theme/globals.js
CHANGED
@@ -1,62 +1,70 @@
|
|
1
|
-
import { genColors } from
|
1
|
+
import { genColors } from '../themeHelpers/processColors';
|
2
2
|
|
3
3
|
export const colors = genColors({
|
4
4
|
surface: {
|
5
|
-
main:
|
6
|
-
light:
|
7
|
-
dark:
|
5
|
+
main: 'lightgray',
|
6
|
+
light: '#fff',
|
7
|
+
dark: '#000'
|
8
8
|
},
|
9
|
-
primary:
|
10
|
-
secondary:
|
11
|
-
success:
|
12
|
-
error:
|
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: [
|
18
|
-
weight:
|
19
|
-
size:
|
17
|
+
font: ['Courier New', 'Arial', 'sans-serif'],
|
18
|
+
weight: '700',
|
19
|
+
size: '48px'
|
20
20
|
},
|
21
21
|
h2: {
|
22
|
-
font: [
|
23
|
-
weight:
|
24
|
-
size:
|
22
|
+
font: ['Courier New', 'sans-serif'],
|
23
|
+
weight: '500',
|
24
|
+
size: '38px'
|
25
25
|
},
|
26
26
|
h3: {
|
27
|
-
font: [
|
28
|
-
weight:
|
29
|
-
size:
|
30
|
-
}
|
27
|
+
font: ['Courier New', 'sans-serif'],
|
28
|
+
weight: '300',
|
29
|
+
size: '28px'
|
30
|
+
}
|
31
31
|
};
|
32
32
|
|
33
33
|
const spacing = {
|
34
|
-
xs:
|
35
|
-
sm:
|
36
|
-
md:
|
37
|
-
lg:
|
38
|
-
xl:
|
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:
|
43
|
-
md:
|
44
|
-
lg:
|
42
|
+
sm: '1px',
|
43
|
+
md: '2px',
|
44
|
+
lg: '3px'
|
45
45
|
};
|
46
46
|
|
47
47
|
const radius = {
|
48
|
-
sm:
|
49
|
-
md:
|
50
|
-
lg:
|
48
|
+
sm: '5px',
|
49
|
+
md: '25px',
|
50
|
+
lg: '50px'
|
51
51
|
};
|
52
52
|
|
53
53
|
const shadow = {
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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
|
};
|
package/src/theme/index.js
CHANGED
@@ -1,10 +1,10 @@
|
|
1
|
-
import merge from
|
2
|
-
import set from
|
3
|
-
import { DESCOPE_PREFIX } from
|
4
|
-
import { getCssVarName, kebabCase } from
|
5
|
-
import { getComponentName } from
|
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) =>
|
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) =>
|
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
|
-
|
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('_'))
|
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(
|
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
|
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]) =>
|
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
|
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
|
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
|
};
|