@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.
- 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
|
};
|