@dreamcommerce/aurora 2.17.21-3 → 2.17.22-1
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/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js +6 -2
- package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js → color-picker-shades.js} +3 -3
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js +92 -0
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +7 -3
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js +6 -0
- package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/index.js +3 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js +69 -0
- package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -0
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js +1 -1
- package/build/cjs/packages/aurora/src/css/color_picker_new/main.module.less.js +4 -1
- package/build/cjs/packages/aurora/src/css/color_picker_new/main.module.less.js.map +1 -1
- package/build/cjs/packages/aurora/src/translations/en.json.js +2 -1
- package/build/cjs/packages/aurora/src/translations/en.json.js.map +1 -1
- package/build/cjs/packages/aurora/src/translations/pl.json.js +2 -1
- package/build/cjs/packages/aurora/src/translations/pl.json.js.map +1 -1
- package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.d.ts +3 -1
- package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.js +6 -2
- package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-shades.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js → color-picker-shades.js} +3 -3
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.d.ts +7 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js +84 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js.map +1 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +7 -3
- package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/constants.js +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.d.ts +3 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.js +4 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/index.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/index.js +3 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts +13 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts +8 -0
- package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js +69 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
- package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -0
- package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/tree/components/tree_node.js +1 -1
- package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js +4 -1
- package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js.map +1 -1
- package/build/esm/packages/aurora/src/translations/en.json +2 -1
- package/build/esm/packages/aurora/src/translations/en.json.js +2 -1
- package/build/esm/packages/aurora/src/translations/en.json.js.map +1 -1
- package/build/esm/packages/aurora/src/translations/pl.json +2 -1
- package/build/esm/packages/aurora/src/translations/pl.json.js +2 -1
- package/build/esm/packages/aurora/src/translations/pl.json.js.map +1 -1
- package/package.json +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts +0 -1
- /package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js.map → color-picker-shades.js.map} +0 -0
- /package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js.map → color-picker-shades.js.map} +0 -0
|
@@ -3,18 +3,22 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var main_module = require('../css/icons/main.module.less.js');
|
|
6
7
|
|
|
7
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
9
|
|
|
9
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
11
|
|
|
11
|
-
var IconListArrowDown = function IconListArrowDown() {
|
|
12
|
+
var IconListArrowDown = function IconListArrowDown(_ref) {
|
|
13
|
+
var className = _ref.className,
|
|
14
|
+
size = _ref.size;
|
|
12
15
|
return /*#__PURE__*/React__default['default'].createElement("svg", {
|
|
13
16
|
width: "6",
|
|
14
17
|
height: "4",
|
|
15
18
|
viewBox: "0 0 6 4",
|
|
16
19
|
fill: "none",
|
|
17
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
20
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
+
className: "".concat(className || '', " ").concat(main_module['default']["icon_".concat(size)])
|
|
18
22
|
}, /*#__PURE__*/React__default['default'].createElement("path", {
|
|
19
23
|
id: "Polygon 1",
|
|
20
24
|
d: "M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var ColorPickerShades = function ColorPickerShades() {
|
|
19
19
|
var _useContext = React.useContext(context.ColorPickerNewContext),
|
|
20
20
|
hslArr = _useContext.hslArr,
|
|
21
21
|
handlePickSwatch = _useContext.handlePickSwatch;
|
|
@@ -96,5 +96,5 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
|
|
|
96
96
|
})));
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
-
exports.
|
|
100
|
-
//# sourceMappingURL=color-picker-
|
|
99
|
+
exports.ColorPickerShades = ColorPickerShades;
|
|
100
|
+
//# sourceMappingURL=color-picker-shades.js.map
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
|
|
7
|
+
var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
8
|
+
var context = require('../context.js');
|
|
9
|
+
var css_classes = require('../css_classes.js');
|
|
10
|
+
var utilities = require('../utilities.js');
|
|
11
|
+
var main_module = require('../../../css/color_picker_new/main.module.less.js');
|
|
12
|
+
var colorPickerSwatch = require('./color-picker-swatch.js');
|
|
13
|
+
var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
|
|
14
|
+
|
|
15
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
+
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
+
|
|
19
|
+
var ColorPickerVariables = function ColorPickerVariables(_ref) {
|
|
20
|
+
var variables = _ref.variables;
|
|
21
|
+
|
|
22
|
+
var _useContext = React.useContext(context.ColorPickerNewContext),
|
|
23
|
+
handlePickSwatch = _useContext.handlePickSwatch;
|
|
24
|
+
|
|
25
|
+
var _useTranslation = useTranslation.useTranslation(),
|
|
26
|
+
_useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
|
|
27
|
+
t = _useTranslation2[0];
|
|
28
|
+
|
|
29
|
+
var _useState = React.useState(false),
|
|
30
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
31
|
+
isOpen = _useState2[0],
|
|
32
|
+
setIsOpen = _useState2[1];
|
|
33
|
+
|
|
34
|
+
var primaryShades = utilities.getVariableShades({
|
|
35
|
+
color: variables.primary
|
|
36
|
+
});
|
|
37
|
+
var secondaryShades = utilities.getVariableShades({
|
|
38
|
+
color: variables.secondary
|
|
39
|
+
});
|
|
40
|
+
var neutralShades = utilities.getVariableShades({
|
|
41
|
+
color: variables.neutral,
|
|
42
|
+
isNeutral: true
|
|
43
|
+
});
|
|
44
|
+
var allShades = [].concat(_rollupPluginBabelHelpers.toConsumableArray(primaryShades), _rollupPluginBabelHelpers.toConsumableArray(secondaryShades), _rollupPluginBabelHelpers.toConsumableArray(neutralShades));
|
|
45
|
+
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
46
|
+
className: main_module['default'][css_classes.cssColorPickerSwatches]
|
|
47
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
48
|
+
className: main_module['default'][css_classes.cssColorPickerSwatchesHeader]
|
|
49
|
+
}, /*#__PURE__*/React__default['default'].createElement("p", null, t('Theme colors')), /*#__PURE__*/React__default['default'].createElement("div", {
|
|
50
|
+
className: main_module['default'][css_classes.cssColorPickerSwatchesHeaderIcon],
|
|
51
|
+
onClick: function onClick() {
|
|
52
|
+
return setIsOpen(!isOpen);
|
|
53
|
+
}
|
|
54
|
+
}, /*#__PURE__*/React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, {
|
|
55
|
+
className: "".concat(!isOpen ? main_module['default'][css_classes.cssColorPickerSwatchesHeaderIconRotate] : '')
|
|
56
|
+
}))), /*#__PURE__*/React__default['default'].createElement("div", {
|
|
57
|
+
className: main_module['default'][css_classes.cssColorPickerSwatchesContent]
|
|
58
|
+
}, Object.values(variables).map(function (variable, index) {
|
|
59
|
+
var colorTiny = utilities.getTinyColorInstance(variable);
|
|
60
|
+
var colorHex = utilities.getHexValue(colorTiny);
|
|
61
|
+
|
|
62
|
+
var handleOnClick = function handleOnClick() {
|
|
63
|
+
handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
|
|
67
|
+
size: "small",
|
|
68
|
+
onClick: handleOnClick,
|
|
69
|
+
key: "".concat(variable, "-").concat(index),
|
|
70
|
+
color: colorHex
|
|
71
|
+
});
|
|
72
|
+
})), isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
|
|
73
|
+
className: main_module['default'][css_classes.cssColorPickerSwatchesSubContent]
|
|
74
|
+
}, allShades.map(function (variable, index) {
|
|
75
|
+
var colorTiny = utilities.getTinyColorInstance(variable);
|
|
76
|
+
var colorHex = utilities.getHexValue(colorTiny);
|
|
77
|
+
|
|
78
|
+
var handleOnClick = function handleOnClick() {
|
|
79
|
+
handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
|
|
83
|
+
size: "small",
|
|
84
|
+
onClick: handleOnClick,
|
|
85
|
+
key: "".concat(variable, "-").concat(index),
|
|
86
|
+
color: colorHex
|
|
87
|
+
});
|
|
88
|
+
})));
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
exports.ColorPickerVariables = ColorPickerVariables;
|
|
92
|
+
//# sourceMappingURL=color-picker-variables.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js
CHANGED
|
@@ -13,7 +13,8 @@ var colorPickerFooter = require('./color-picker-footer.js');
|
|
|
13
13
|
var colorPickerHeader = require('./color-picker-header.js');
|
|
14
14
|
var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
|
|
15
15
|
var colorPickerSwatch = require('./color-picker-swatch.js');
|
|
16
|
-
var
|
|
16
|
+
var colorPickerShades = require('./color-picker-shades.js');
|
|
17
|
+
var colorPickerVariables = require('./color-picker-variables.js');
|
|
17
18
|
var dropdown = require('../../dropdown/components/dropdown.js');
|
|
18
19
|
|
|
19
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -22,7 +23,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
22
23
|
|
|
23
24
|
var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
|
|
24
25
|
var id = _ref.id,
|
|
25
|
-
name = _ref.name
|
|
26
|
+
name = _ref.name,
|
|
27
|
+
colorVariables = _ref.colorVariables;
|
|
26
28
|
|
|
27
29
|
var _useContext = React.useContext(context.ColorPickerNewContext),
|
|
28
30
|
color = _useContext.color,
|
|
@@ -57,7 +59,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
|
|
|
57
59
|
hideInputs: true,
|
|
58
60
|
hidePresets: true,
|
|
59
61
|
className: "".concat(main_module['default'][css_classes.cssColorPickerRbgcp])
|
|
60
|
-
}), /*#__PURE__*/React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null), /*#__PURE__*/React__default['default'].createElement(
|
|
62
|
+
}), /*#__PURE__*/React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null), /*#__PURE__*/React__default['default'].createElement(colorPickerShades.ColorPickerShades, null), colorVariables.isVisible && /*#__PURE__*/React__default['default'].createElement(colorPickerVariables.ColorPickerVariables, {
|
|
63
|
+
variables: colorVariables.variables
|
|
64
|
+
})), /*#__PURE__*/React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null))));
|
|
61
65
|
};
|
|
62
66
|
|
|
63
67
|
exports.default = ColorPickerNewPure;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,0FAA8F;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,0FAA8F;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var COLOR_PICKER_INITIAL_STATE = '#000000';
|
|
6
|
-
var COLOR_PICKER_WIDTH =
|
|
6
|
+
var COLOR_PICKER_WIDTH = 247;
|
|
7
7
|
var COLOR_PICKER_HEIGHT = 200;
|
|
8
8
|
var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
|
|
9
9
|
var COLOR_PICKER_TYPES = {
|
|
@@ -9,7 +9,10 @@ var cssColorPickerHeader = 'color-picker__header';
|
|
|
9
9
|
var cssColorPickerCloseIcon = 'color-picker__close-icon';
|
|
10
10
|
var cssColorPickerSwatches = 'color-picker__swatches';
|
|
11
11
|
var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
|
|
12
|
+
var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
|
|
13
|
+
var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
|
|
12
14
|
var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
|
|
15
|
+
var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
|
|
13
16
|
var cssColorPickerSwatch = 'color-picker__swatch';
|
|
14
17
|
var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
|
|
15
18
|
var cssColorPickerSwatchBig = 'color-picker__swatch_big';
|
|
@@ -41,4 +44,7 @@ exports.cssColorPickerSwatchSmall = cssColorPickerSwatchSmall;
|
|
|
41
44
|
exports.cssColorPickerSwatches = cssColorPickerSwatches;
|
|
42
45
|
exports.cssColorPickerSwatchesContent = cssColorPickerSwatchesContent;
|
|
43
46
|
exports.cssColorPickerSwatchesHeader = cssColorPickerSwatchesHeader;
|
|
47
|
+
exports.cssColorPickerSwatchesHeaderIcon = cssColorPickerSwatchesHeaderIcon;
|
|
48
|
+
exports.cssColorPickerSwatchesHeaderIconRotate = cssColorPickerSwatchesHeaderIconRotate;
|
|
49
|
+
exports.cssColorPickerSwatchesSubContent = cssColorPickerSwatchesSubContent;
|
|
44
50
|
//# sourceMappingURL=css_classes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -15,6 +15,7 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
|
|
|
15
15
|
var id = _ref.id,
|
|
16
16
|
name = _ref.name,
|
|
17
17
|
initialColor = _ref.initialColor,
|
|
18
|
+
colorVariables = _ref.colorVariables,
|
|
18
19
|
onChange = _ref.onChange,
|
|
19
20
|
onCancel = _ref.onCancel,
|
|
20
21
|
onSave = _ref.onSave;
|
|
@@ -60,7 +61,8 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
|
|
|
60
61
|
value: value
|
|
61
62
|
}, /*#__PURE__*/React__default['default'].createElement(pureColorPicker['default'], {
|
|
62
63
|
id: id,
|
|
63
|
-
name: name
|
|
64
|
+
name: name,
|
|
65
|
+
colorVariables: colorVariables
|
|
64
66
|
}));
|
|
65
67
|
};
|
|
66
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
5
6
|
var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
|
|
6
7
|
|
|
7
8
|
var getTinyColorInstance = function getTinyColorInstance(color) {
|
|
@@ -37,11 +38,79 @@ var getAllColorTypes = function getAllColorTypes(color) {
|
|
|
37
38
|
hexString: hexString
|
|
38
39
|
};
|
|
39
40
|
};
|
|
41
|
+
var getVariableShades = function getVariableShades(_ref) {
|
|
42
|
+
var color = _ref.color,
|
|
43
|
+
_ref$isNeutral = _ref.isNeutral,
|
|
44
|
+
isNeutral = _ref$isNeutral === void 0 ? false : _ref$isNeutral;
|
|
45
|
+
var colorTiny = getTinyColorInstance(color);
|
|
46
|
+
var colorHsl = colorTiny.toHsl();
|
|
47
|
+
var blackShade = [{
|
|
48
|
+
h: colorHsl.h,
|
|
49
|
+
s: colorHsl.s,
|
|
50
|
+
l: 100
|
|
51
|
+
}];
|
|
52
|
+
var whiteShade = [{
|
|
53
|
+
h: colorHsl.h,
|
|
54
|
+
s: colorHsl.s,
|
|
55
|
+
l: 0
|
|
56
|
+
}];
|
|
57
|
+
var shades = [{
|
|
58
|
+
h: colorHsl.h,
|
|
59
|
+
s: colorHsl.s,
|
|
60
|
+
l: 99
|
|
61
|
+
}, {
|
|
62
|
+
h: colorHsl.h,
|
|
63
|
+
s: colorHsl.s,
|
|
64
|
+
l: 98
|
|
65
|
+
}, {
|
|
66
|
+
h: colorHsl.h,
|
|
67
|
+
s: colorHsl.s,
|
|
68
|
+
l: 95
|
|
69
|
+
}, {
|
|
70
|
+
h: colorHsl.h,
|
|
71
|
+
s: colorHsl.s,
|
|
72
|
+
l: 90
|
|
73
|
+
}, {
|
|
74
|
+
h: colorHsl.h,
|
|
75
|
+
s: colorHsl.s,
|
|
76
|
+
l: 80
|
|
77
|
+
}, {
|
|
78
|
+
h: colorHsl.h,
|
|
79
|
+
s: colorHsl.s,
|
|
80
|
+
l: 70
|
|
81
|
+
}, {
|
|
82
|
+
h: colorHsl.h,
|
|
83
|
+
s: colorHsl.s,
|
|
84
|
+
l: 60
|
|
85
|
+
}, {
|
|
86
|
+
h: colorHsl.h,
|
|
87
|
+
s: colorHsl.s,
|
|
88
|
+
l: 50
|
|
89
|
+
}, {
|
|
90
|
+
h: colorHsl.h,
|
|
91
|
+
s: colorHsl.s,
|
|
92
|
+
l: 40
|
|
93
|
+
}, {
|
|
94
|
+
h: colorHsl.h,
|
|
95
|
+
s: colorHsl.s,
|
|
96
|
+
l: 30
|
|
97
|
+
}, {
|
|
98
|
+
h: colorHsl.h,
|
|
99
|
+
s: colorHsl.s,
|
|
100
|
+
l: 20
|
|
101
|
+
}, {
|
|
102
|
+
h: colorHsl.h,
|
|
103
|
+
s: colorHsl.s,
|
|
104
|
+
l: 10
|
|
105
|
+
}];
|
|
106
|
+
return [].concat(_rollupPluginBabelHelpers.toConsumableArray(isNeutral ? blackShade : []), shades, _rollupPluginBabelHelpers.toConsumableArray(isNeutral ? whiteShade : []));
|
|
107
|
+
};
|
|
40
108
|
|
|
41
109
|
exports.getAllColorTypes = getAllColorTypes;
|
|
42
110
|
exports.getHexValue = getHexValue;
|
|
43
111
|
exports.getHexValueString = getHexValueString;
|
|
44
112
|
exports.getRgbaValue = getRgbaValue;
|
|
45
113
|
exports.getTinyColorInstance = getTinyColorInstance;
|
|
114
|
+
exports.getVariableShades = getVariableShades;
|
|
46
115
|
exports.isHexChar = isHexChar;
|
|
47
116
|
//# sourceMappingURL=utilities.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js
CHANGED
|
@@ -20,6 +20,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
|
|
|
20
20
|
errors = _ref.errors,
|
|
21
21
|
labelAdditionalInfo = _ref.labelAdditionalInfo,
|
|
22
22
|
initialColor = _ref.initialColor,
|
|
23
|
+
colorVariables = _ref.colorVariables,
|
|
23
24
|
onChange = _ref.onChange,
|
|
24
25
|
onCancel = _ref.onCancel,
|
|
25
26
|
onSave = _ref.onSave;
|
|
@@ -38,6 +39,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
|
|
|
38
39
|
id: id,
|
|
39
40
|
name: name,
|
|
40
41
|
initialColor: initialColor,
|
|
42
|
+
colorVariables: colorVariables,
|
|
41
43
|
onChange: onChange,
|
|
42
44
|
onCancel: onCancel,
|
|
43
45
|
onSave: onSave
|
package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
7
7
|
var classnames = require('classnames');
|
|
8
|
+
var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
|
|
8
9
|
var reactTransitionGroup = require('react-transition-group');
|
|
9
10
|
var css_classes = require('../css_classes.js');
|
|
10
11
|
var main_module = require('../../../css/tree/main.module.less.js');
|
|
11
|
-
var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
|
|
12
12
|
var tree_hook = require('../hooks/tree_hook.js');
|
|
13
13
|
var tree_node_hook = require('../hooks/tree_node_hook.js');
|
|
14
14
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width:
|
|
7
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width: 280px;\n padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n display: flex;\n flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n order: -1;\n padding: 0 !important;\n margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n width: 24px;\n height: 24px;\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px 9px 16px;\n border-bottom: 1px solid #f3f4f8;\n color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n padding: 6px 16px 0 16px;\n border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[12];\n grid-template-columns: repeat(12, 1fr);\n gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n position: relative;\n width: 26px;\n height: 26px;\n border-radius: 3px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n width: 16px;\n height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n width: 30px;\n height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n position: absolute;\n top: 7px;\n left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n font-size: 12px;\n color: #2d3748;\n text-transform: uppercase;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center right;\n padding-right: 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n display: flex;\n border: 1px solid #abb4cd;\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n border-color: transparent;\n border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n display: flex;\n background-color: transparent;\n cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n fill: #2d3748;\n}\n";
|
|
8
8
|
var styles = {
|
|
9
9
|
"color-picker__container": "main-module_color-picker__container__14ccI",
|
|
10
10
|
"color-picker__rbgcp": "main-module_color-picker__rbgcp__2FKdw",
|
|
@@ -12,7 +12,10 @@ var styles = {
|
|
|
12
12
|
"color-picker__footer": "main-module_color-picker__footer__3JvEl",
|
|
13
13
|
"color-picker__swatches": "main-module_color-picker__swatches__1s2pY",
|
|
14
14
|
"color-picker__swatches-header": "main-module_color-picker__swatches-header__187FL",
|
|
15
|
+
"color-picker__swatches-header-icon": "main-module_color-picker__swatches-header-icon__3RQMl",
|
|
16
|
+
"color-picker__swatches-header-icon_rotate-180": "main-module_color-picker__swatches-header-icon_rotate-180__1R-dA",
|
|
15
17
|
"color-picker__swatches-content": "main-module_color-picker__swatches-content__3EFZR",
|
|
18
|
+
"color-picker__swatches-subcontent": "main-module_color-picker__swatches-subcontent__1uyUb",
|
|
16
19
|
"color-picker__swatch": "main-module_color-picker__swatch__2IbgR",
|
|
17
20
|
"color-picker__swatch_small": "main-module_color-picker__swatch_small__3Z0pq",
|
|
18
21
|
"color-picker__swatch_big": "main-module_color-picker__swatch_big__2tsQC",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import cssClasses from '../css/icons/main.module.less.js';
|
|
2
3
|
|
|
3
|
-
var IconListArrowDown = function IconListArrowDown() {
|
|
4
|
+
var IconListArrowDown = function IconListArrowDown(_ref) {
|
|
5
|
+
var className = _ref.className,
|
|
6
|
+
size = _ref.size;
|
|
4
7
|
return /*#__PURE__*/React.createElement("svg", {
|
|
5
8
|
width: "6",
|
|
6
9
|
height: "4",
|
|
7
10
|
viewBox: "0 0 6 4",
|
|
8
11
|
fill: "none",
|
|
9
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
12
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
13
|
+
className: "".concat(className || '', " ").concat(cssClasses["icon_".concat(size)])
|
|
10
14
|
}, /*#__PURE__*/React.createElement("path", {
|
|
11
15
|
id: "Polygon 1",
|
|
12
16
|
d: "M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ColorPickerShades: () => JSX.Element;
|
|
@@ -7,7 +7,7 @@ import { getTinyColorInstance, getHexValue } from '../utilities.js';
|
|
|
7
7
|
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
8
8
|
import { ColorPickerSwatch } from './color-picker-swatch.js';
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var ColorPickerShades = function ColorPickerShades() {
|
|
11
11
|
var _useContext = useContext(ColorPickerNewContext),
|
|
12
12
|
hslArr = _useContext.hslArr,
|
|
13
13
|
handlePickSwatch = _useContext.handlePickSwatch;
|
|
@@ -88,5 +88,5 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
|
|
|
88
88
|
})));
|
|
89
89
|
};
|
|
90
90
|
|
|
91
|
-
export {
|
|
92
|
-
//# sourceMappingURL=color-picker-
|
|
91
|
+
export { ColorPickerShades };
|
|
92
|
+
//# sourceMappingURL=color-picker-shades.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IColorPickerColorVariablesType } from '../types';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
interface IColorPickerVariablesProps {
|
|
4
|
+
variables: IColorPickerColorVariablesType;
|
|
5
|
+
}
|
|
6
|
+
export declare const ColorPickerVariables: React.FC<IColorPickerVariablesProps>;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import React, { useContext, useState } from 'react';
|
|
2
|
+
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
|
+
import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
4
|
+
import { ColorPickerNewContext } from '../context.js';
|
|
5
|
+
import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesContent, cssColorPickerSwatchesSubContent } from '../css_classes.js';
|
|
6
|
+
import { getVariableShades, getTinyColorInstance, getHexValue } from '../utilities.js';
|
|
7
|
+
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
8
|
+
import { ColorPickerSwatch } from './color-picker-swatch.js';
|
|
9
|
+
import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
|
|
10
|
+
|
|
11
|
+
var ColorPickerVariables = function ColorPickerVariables(_ref) {
|
|
12
|
+
var variables = _ref.variables;
|
|
13
|
+
|
|
14
|
+
var _useContext = useContext(ColorPickerNewContext),
|
|
15
|
+
handlePickSwatch = _useContext.handlePickSwatch;
|
|
16
|
+
|
|
17
|
+
var _useTranslation = useTranslation(),
|
|
18
|
+
_useTranslation2 = _slicedToArray(_useTranslation, 1),
|
|
19
|
+
t = _useTranslation2[0];
|
|
20
|
+
|
|
21
|
+
var _useState = useState(false),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
isOpen = _useState2[0],
|
|
24
|
+
setIsOpen = _useState2[1];
|
|
25
|
+
|
|
26
|
+
var primaryShades = getVariableShades({
|
|
27
|
+
color: variables.primary
|
|
28
|
+
});
|
|
29
|
+
var secondaryShades = getVariableShades({
|
|
30
|
+
color: variables.secondary
|
|
31
|
+
});
|
|
32
|
+
var neutralShades = getVariableShades({
|
|
33
|
+
color: variables.neutral,
|
|
34
|
+
isNeutral: true
|
|
35
|
+
});
|
|
36
|
+
var allShades = [].concat(_toConsumableArray(primaryShades), _toConsumableArray(secondaryShades), _toConsumableArray(neutralShades));
|
|
37
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: styles[cssColorPickerSwatches]
|
|
39
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: styles[cssColorPickerSwatchesHeader]
|
|
41
|
+
}, /*#__PURE__*/React.createElement("p", null, t('Theme colors')), /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: styles[cssColorPickerSwatchesHeaderIcon],
|
|
43
|
+
onClick: function onClick() {
|
|
44
|
+
return setIsOpen(!isOpen);
|
|
45
|
+
}
|
|
46
|
+
}, /*#__PURE__*/React.createElement(IconListArrowDown, {
|
|
47
|
+
className: "".concat(!isOpen ? styles[cssColorPickerSwatchesHeaderIconRotate] : '')
|
|
48
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
49
|
+
className: styles[cssColorPickerSwatchesContent]
|
|
50
|
+
}, Object.values(variables).map(function (variable, index) {
|
|
51
|
+
var colorTiny = getTinyColorInstance(variable);
|
|
52
|
+
var colorHex = getHexValue(colorTiny);
|
|
53
|
+
|
|
54
|
+
var handleOnClick = function handleOnClick() {
|
|
55
|
+
handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
|
|
59
|
+
size: "small",
|
|
60
|
+
onClick: handleOnClick,
|
|
61
|
+
key: "".concat(variable, "-").concat(index),
|
|
62
|
+
color: colorHex
|
|
63
|
+
});
|
|
64
|
+
})), isOpen && /*#__PURE__*/React.createElement("div", {
|
|
65
|
+
className: styles[cssColorPickerSwatchesSubContent]
|
|
66
|
+
}, allShades.map(function (variable, index) {
|
|
67
|
+
var colorTiny = getTinyColorInstance(variable);
|
|
68
|
+
var colorHex = getHexValue(colorTiny);
|
|
69
|
+
|
|
70
|
+
var handleOnClick = function handleOnClick() {
|
|
71
|
+
handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
|
|
75
|
+
size: "small",
|
|
76
|
+
onClick: handleOnClick,
|
|
77
|
+
key: "".concat(variable, "-").concat(index),
|
|
78
|
+
color: colorHex
|
|
79
|
+
});
|
|
80
|
+
})));
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export { ColorPickerVariables };
|
|
84
|
+
//# sourceMappingURL=color-picker-variables.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js
CHANGED
|
@@ -9,12 +9,14 @@ import { ColorPickerFooter } from './color-picker-footer.js';
|
|
|
9
9
|
import { ColorPickerHeader } from './color-picker-header.js';
|
|
10
10
|
import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
|
|
11
11
|
import { ColorPickerSwatch } from './color-picker-swatch.js';
|
|
12
|
-
import {
|
|
12
|
+
import { ColorPickerShades } from './color-picker-shades.js';
|
|
13
|
+
import { ColorPickerVariables } from './color-picker-variables.js';
|
|
13
14
|
import Dropdown from '../../dropdown/components/dropdown.js';
|
|
14
15
|
|
|
15
16
|
var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
|
|
16
17
|
var id = _ref.id,
|
|
17
|
-
name = _ref.name
|
|
18
|
+
name = _ref.name,
|
|
19
|
+
colorVariables = _ref.colorVariables;
|
|
18
20
|
|
|
19
21
|
var _useContext = useContext(ColorPickerNewContext),
|
|
20
22
|
color = _useContext.color,
|
|
@@ -49,7 +51,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
|
|
|
49
51
|
hideInputs: true,
|
|
50
52
|
hidePresets: true,
|
|
51
53
|
className: "".concat(styles[cssColorPickerRbgcp])
|
|
52
|
-
}), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(
|
|
54
|
+
}), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerShades, null), colorVariables.isVisible && /*#__PURE__*/React.createElement(ColorPickerVariables, {
|
|
55
|
+
variables: colorVariables.variables
|
|
56
|
+
})), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
|
|
53
57
|
};
|
|
54
58
|
|
|
55
59
|
export default ColorPickerNewPure;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const COLOR_PICKER_INITIAL_STATE = "#000000";
|
|
2
|
-
export declare const COLOR_PICKER_WIDTH =
|
|
2
|
+
export declare const COLOR_PICKER_WIDTH = 247;
|
|
3
3
|
export declare const COLOR_PICKER_HEIGHT = 200;
|
|
4
4
|
export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;
|
|
5
5
|
export declare const COLOR_PICKER_TYPES: {
|
|
@@ -5,7 +5,10 @@ export declare const cssColorPickerHeader = "color-picker__header";
|
|
|
5
5
|
export declare const cssColorPickerCloseIcon = "color-picker__close-icon";
|
|
6
6
|
export declare const cssColorPickerSwatches = "color-picker__swatches";
|
|
7
7
|
export declare const cssColorPickerSwatchesHeader = "color-picker__swatches-header";
|
|
8
|
+
export declare const cssColorPickerSwatchesHeaderIcon = "color-picker__swatches-header-icon";
|
|
9
|
+
export declare const cssColorPickerSwatchesHeaderIconRotate = "color-picker__swatches-header-icon_rotate-180";
|
|
8
10
|
export declare const cssColorPickerSwatchesContent = "color-picker__swatches-content";
|
|
11
|
+
export declare const cssColorPickerSwatchesSubContent = "color-picker__swatches-subcontent";
|
|
9
12
|
export declare const cssColorPickerSwatch = "color-picker__swatch";
|
|
10
13
|
export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
|
|
11
14
|
export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";
|
|
@@ -5,7 +5,10 @@ var cssColorPickerHeader = 'color-picker__header';
|
|
|
5
5
|
var cssColorPickerCloseIcon = 'color-picker__close-icon';
|
|
6
6
|
var cssColorPickerSwatches = 'color-picker__swatches';
|
|
7
7
|
var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
|
|
8
|
+
var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
|
|
9
|
+
var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
|
|
8
10
|
var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
|
|
11
|
+
var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
|
|
9
12
|
var cssColorPickerSwatch = 'color-picker__swatch';
|
|
10
13
|
var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
|
|
11
14
|
var cssColorPickerSwatchBig = 'color-picker__swatch_big';
|
|
@@ -18,5 +21,5 @@ var cssColorPickerInputsValue = 'color-picker__inputs-value';
|
|
|
18
21
|
var cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
|
|
19
22
|
var cssColorPickerFooter = 'color-picker__footer';
|
|
20
23
|
|
|
21
|
-
export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
|
|
24
|
+
export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
|
|
22
25
|
//# sourceMappingURL=css_classes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { IColorPickerNewProps } from './types';
|
|
2
|
-
declare const ColorPickerNewWithContext: ({ id, name, initialColor, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
|
|
2
|
+
declare const ColorPickerNewWithContext: ({ id, name, initialColor, colorVariables, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
|
|
3
3
|
export default ColorPickerNewWithContext;
|
|
@@ -7,6 +7,7 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
|
|
|
7
7
|
var id = _ref.id,
|
|
8
8
|
name = _ref.name,
|
|
9
9
|
initialColor = _ref.initialColor,
|
|
10
|
+
colorVariables = _ref.colorVariables,
|
|
10
11
|
onChange = _ref.onChange,
|
|
11
12
|
onCancel = _ref.onCancel,
|
|
12
13
|
onSave = _ref.onSave;
|
|
@@ -52,7 +53,8 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
|
|
|
52
53
|
value: value
|
|
53
54
|
}, /*#__PURE__*/React.createElement(ColorPickerNewPure, {
|
|
54
55
|
id: id,
|
|
55
|
-
name: name
|
|
56
|
+
name: name,
|
|
57
|
+
colorVariables: colorVariables
|
|
56
58
|
}));
|
|
57
59
|
};
|
|
58
60
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,11 +2,24 @@ import { Dispatch, SetStateAction } from 'react';
|
|
|
2
2
|
export interface IColorPickerNewPureProps {
|
|
3
3
|
id: string;
|
|
4
4
|
name?: string;
|
|
5
|
+
colorVariables: IColorPickerColorVariables;
|
|
6
|
+
}
|
|
7
|
+
export interface IColorPickerColorVariables {
|
|
8
|
+
isVisible: boolean;
|
|
9
|
+
variables: IColorPickerColorVariablesType;
|
|
10
|
+
}
|
|
11
|
+
export interface IColorPickerColorVariablesType {
|
|
12
|
+
primary: string;
|
|
13
|
+
secondary: string;
|
|
14
|
+
neutral: string;
|
|
15
|
+
text: string;
|
|
16
|
+
background: string;
|
|
5
17
|
}
|
|
6
18
|
export interface IColorPickerNewProps {
|
|
7
19
|
id: string;
|
|
8
20
|
name?: string;
|
|
9
21
|
initialColor?: ColorPickerColorTypes['hex'] | undefined;
|
|
22
|
+
colorVariables: IColorPickerColorVariables;
|
|
10
23
|
onChange?: (color: IColorPickerColor) => void;
|
|
11
24
|
onCancel?: () => void;
|
|
12
25
|
onSave?: (color: IColorPickerColor) => void;
|
|
@@ -6,3 +6,11 @@ export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
|
|
|
6
6
|
export declare const getHexValueString: (colorSet: tinycolor.Instance) => string;
|
|
7
7
|
export declare const isHexChar: (value: string) => boolean;
|
|
8
8
|
export declare const getAllColorTypes: (color: string) => IColorPickerColor;
|
|
9
|
+
export declare const getVariableShades: ({ color, isNeutral }: {
|
|
10
|
+
color: string;
|
|
11
|
+
isNeutral?: boolean | undefined;
|
|
12
|
+
}) => {
|
|
13
|
+
h: number;
|
|
14
|
+
s: number;
|
|
15
|
+
l: number;
|
|
16
|
+
}[];
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
1
2
|
import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
|
|
2
3
|
|
|
3
4
|
var getTinyColorInstance = function getTinyColorInstance(color) {
|
|
@@ -33,6 +34,73 @@ var getAllColorTypes = function getAllColorTypes(color) {
|
|
|
33
34
|
hexString: hexString
|
|
34
35
|
};
|
|
35
36
|
};
|
|
37
|
+
var getVariableShades = function getVariableShades(_ref) {
|
|
38
|
+
var color = _ref.color,
|
|
39
|
+
_ref$isNeutral = _ref.isNeutral,
|
|
40
|
+
isNeutral = _ref$isNeutral === void 0 ? false : _ref$isNeutral;
|
|
41
|
+
var colorTiny = getTinyColorInstance(color);
|
|
42
|
+
var colorHsl = colorTiny.toHsl();
|
|
43
|
+
var blackShade = [{
|
|
44
|
+
h: colorHsl.h,
|
|
45
|
+
s: colorHsl.s,
|
|
46
|
+
l: 100
|
|
47
|
+
}];
|
|
48
|
+
var whiteShade = [{
|
|
49
|
+
h: colorHsl.h,
|
|
50
|
+
s: colorHsl.s,
|
|
51
|
+
l: 0
|
|
52
|
+
}];
|
|
53
|
+
var shades = [{
|
|
54
|
+
h: colorHsl.h,
|
|
55
|
+
s: colorHsl.s,
|
|
56
|
+
l: 99
|
|
57
|
+
}, {
|
|
58
|
+
h: colorHsl.h,
|
|
59
|
+
s: colorHsl.s,
|
|
60
|
+
l: 98
|
|
61
|
+
}, {
|
|
62
|
+
h: colorHsl.h,
|
|
63
|
+
s: colorHsl.s,
|
|
64
|
+
l: 95
|
|
65
|
+
}, {
|
|
66
|
+
h: colorHsl.h,
|
|
67
|
+
s: colorHsl.s,
|
|
68
|
+
l: 90
|
|
69
|
+
}, {
|
|
70
|
+
h: colorHsl.h,
|
|
71
|
+
s: colorHsl.s,
|
|
72
|
+
l: 80
|
|
73
|
+
}, {
|
|
74
|
+
h: colorHsl.h,
|
|
75
|
+
s: colorHsl.s,
|
|
76
|
+
l: 70
|
|
77
|
+
}, {
|
|
78
|
+
h: colorHsl.h,
|
|
79
|
+
s: colorHsl.s,
|
|
80
|
+
l: 60
|
|
81
|
+
}, {
|
|
82
|
+
h: colorHsl.h,
|
|
83
|
+
s: colorHsl.s,
|
|
84
|
+
l: 50
|
|
85
|
+
}, {
|
|
86
|
+
h: colorHsl.h,
|
|
87
|
+
s: colorHsl.s,
|
|
88
|
+
l: 40
|
|
89
|
+
}, {
|
|
90
|
+
h: colorHsl.h,
|
|
91
|
+
s: colorHsl.s,
|
|
92
|
+
l: 30
|
|
93
|
+
}, {
|
|
94
|
+
h: colorHsl.h,
|
|
95
|
+
s: colorHsl.s,
|
|
96
|
+
l: 20
|
|
97
|
+
}, {
|
|
98
|
+
h: colorHsl.h,
|
|
99
|
+
s: colorHsl.s,
|
|
100
|
+
l: 10
|
|
101
|
+
}];
|
|
102
|
+
return [].concat(_toConsumableArray(isNeutral ? blackShade : []), shades, _toConsumableArray(isNeutral ? whiteShade : []));
|
|
103
|
+
};
|
|
36
104
|
|
|
37
|
-
export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, isHexChar };
|
|
105
|
+
export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, getVariableShades, isHexChar };
|
|
38
106
|
//# sourceMappingURL=utilities.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js
CHANGED
|
@@ -12,6 +12,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
|
|
|
12
12
|
errors = _ref.errors,
|
|
13
13
|
labelAdditionalInfo = _ref.labelAdditionalInfo,
|
|
14
14
|
initialColor = _ref.initialColor,
|
|
15
|
+
colorVariables = _ref.colorVariables,
|
|
15
16
|
onChange = _ref.onChange,
|
|
16
17
|
onCancel = _ref.onCancel,
|
|
17
18
|
onSave = _ref.onSave;
|
|
@@ -30,6 +31,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
|
|
|
30
31
|
id: id,
|
|
31
32
|
name: name,
|
|
32
33
|
initialColor: initialColor,
|
|
34
|
+
colorVariables: colorVariables,
|
|
33
35
|
onChange: onChange,
|
|
34
36
|
onCancel: onCancel,
|
|
35
37
|
onSave: onSave
|
package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { useRef, Children } from 'react';
|
|
2
2
|
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
+
import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
|
|
4
5
|
import { CSSTransition } from 'react-transition-group';
|
|
5
6
|
import { TREE_NODE_CSS_CLASSES } from '../css_classes.js';
|
|
6
7
|
import cssClasses from '../../../css/tree/main.module.less.js';
|
|
7
|
-
import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
|
|
8
8
|
import { useTree } from '../hooks/tree_hook.js';
|
|
9
9
|
import { useTreeNode } from '../hooks/tree_node_hook.js';
|
|
10
10
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width:
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width: 280px;\n padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n display: flex;\n flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n order: -1;\n padding: 0 !important;\n margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n width: 24px;\n height: 24px;\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px 9px 16px;\n border-bottom: 1px solid #f3f4f8;\n color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n padding: 6px 16px 0 16px;\n border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[12];\n grid-template-columns: repeat(12, 1fr);\n gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n position: relative;\n width: 26px;\n height: 26px;\n border-radius: 3px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n width: 16px;\n height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n width: 30px;\n height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n position: absolute;\n top: 7px;\n left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n font-size: 12px;\n color: #2d3748;\n text-transform: uppercase;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center right;\n padding-right: 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n display: flex;\n border: 1px solid #abb4cd;\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n border-color: transparent;\n border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n display: flex;\n background-color: transparent;\n cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n fill: #2d3748;\n}\n";
|
|
4
4
|
var styles = {
|
|
5
5
|
"color-picker__container": "main-module_color-picker__container__14ccI",
|
|
6
6
|
"color-picker__rbgcp": "main-module_color-picker__rbgcp__2FKdw",
|
|
@@ -8,7 +8,10 @@ var styles = {
|
|
|
8
8
|
"color-picker__footer": "main-module_color-picker__footer__3JvEl",
|
|
9
9
|
"color-picker__swatches": "main-module_color-picker__swatches__1s2pY",
|
|
10
10
|
"color-picker__swatches-header": "main-module_color-picker__swatches-header__187FL",
|
|
11
|
+
"color-picker__swatches-header-icon": "main-module_color-picker__swatches-header-icon__3RQMl",
|
|
12
|
+
"color-picker__swatches-header-icon_rotate-180": "main-module_color-picker__swatches-header-icon_rotate-180__1R-dA",
|
|
11
13
|
"color-picker__swatches-content": "main-module_color-picker__swatches-content__3EFZR",
|
|
14
|
+
"color-picker__swatches-subcontent": "main-module_color-picker__swatches-subcontent__1uyUb",
|
|
12
15
|
"color-picker__swatch": "main-module_color-picker__swatch__2IbgR",
|
|
13
16
|
"color-picker__swatch_small": "main-module_color-picker__swatch_small__3Z0pq",
|
|
14
17
|
"color-picker__swatch_big": "main-module_color-picker__swatch_big__2tsQC",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const ColorPickerSwatches: () => JSX.Element;
|
|
File without changes
|