@wordpress/edit-site 5.6.0 → 5.7.0
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/CHANGELOG.md +2 -0
- package/build/components/add-new-template/new-template-part.js +3 -11
- package/build/components/add-new-template/new-template-part.js.map +1 -1
- package/build/components/add-new-template/new-template.js +7 -7
- package/build/components/add-new-template/new-template.js.map +1 -1
- package/build/components/add-new-template/utils.js +1 -1
- package/build/components/add-new-template/utils.js.map +1 -1
- package/build/components/block-editor/editor-canvas.js +7 -10
- package/build/components/block-editor/editor-canvas.js.map +1 -1
- package/build/components/global-styles/context-menu.js +2 -3
- package/build/components/global-styles/context-menu.js.map +1 -1
- package/build/components/global-styles/hooks.js +1 -58
- package/build/components/global-styles/hooks.js.map +1 -1
- package/build/components/global-styles/preview.js +3 -4
- package/build/components/global-styles/preview.js.map +1 -1
- package/build/components/global-styles/screen-block-list.js +3 -4
- package/build/components/global-styles/screen-block-list.js.map +1 -1
- package/build/components/global-styles/screen-colors.js +22 -211
- package/build/components/global-styles/screen-colors.js.map +1 -1
- package/build/components/global-styles/screen-typography-element.js +4 -0
- package/build/components/global-styles/screen-typography-element.js.map +1 -1
- package/build/components/global-styles/screen-typography.js +5 -0
- package/build/components/global-styles/screen-typography.js.map +1 -1
- package/build/components/global-styles/ui.js +5 -35
- package/build/components/global-styles/ui.js.map +1 -1
- package/build/components/global-styles-renderer/index.js +1 -2
- package/build/components/global-styles-renderer/index.js.map +1 -1
- package/build/components/secondary-sidebar/list-view-sidebar.js +6 -1
- package/build/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
- package/build/components/start-template-options/index.js +44 -9
- package/build/components/start-template-options/index.js.map +1 -1
- package/build/components/style-book/index.js +6 -7
- package/build/components/style-book/index.js.map +1 -1
- package/build/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
- package/build-module/components/add-new-template/new-template-part.js +3 -9
- package/build-module/components/add-new-template/new-template-part.js.map +1 -1
- package/build-module/components/add-new-template/new-template.js +7 -7
- package/build-module/components/add-new-template/new-template.js.map +1 -1
- package/build-module/components/add-new-template/utils.js +1 -1
- package/build-module/components/add-new-template/utils.js.map +1 -1
- package/build-module/components/block-editor/editor-canvas.js +8 -11
- package/build-module/components/block-editor/editor-canvas.js.map +1 -1
- package/build-module/components/global-styles/context-menu.js +2 -2
- package/build-module/components/global-styles/context-menu.js.map +1 -1
- package/build-module/components/global-styles/hooks.js +1 -52
- package/build-module/components/global-styles/hooks.js.map +1 -1
- package/build-module/components/global-styles/preview.js +3 -4
- package/build-module/components/global-styles/preview.js.map +1 -1
- package/build-module/components/global-styles/screen-block-list.js +3 -3
- package/build-module/components/global-styles/screen-block-list.js.map +1 -1
- package/build-module/components/global-styles/screen-colors.js +23 -208
- package/build-module/components/global-styles/screen-colors.js.map +1 -1
- package/build-module/components/global-styles/screen-typography-element.js +4 -0
- package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
- package/build-module/components/global-styles/screen-typography.js +5 -0
- package/build-module/components/global-styles/screen-typography.js.map +1 -1
- package/build-module/components/global-styles/ui.js +5 -30
- package/build-module/components/global-styles/ui.js.map +1 -1
- package/build-module/components/global-styles-renderer/index.js +1 -2
- package/build-module/components/global-styles-renderer/index.js.map +1 -1
- package/build-module/components/secondary-sidebar/list-view-sidebar.js +6 -2
- package/build-module/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
- package/build-module/components/start-template-options/index.js +45 -10
- package/build-module/components/start-template-options/index.js.map +1 -1
- package/build-module/components/style-book/index.js +7 -8
- package/build-module/components/style-book/index.js.map +1 -1
- package/build-module/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
- package/build-style/style-rtl.css +4 -17
- package/build-style/style.css +4 -17
- package/package.json +31 -31
- package/src/components/add-new-template/new-template-part.js +1 -6
- package/src/components/add-new-template/new-template.js +3 -6
- package/src/components/add-new-template/utils.js +1 -1
- package/src/components/block-editor/editor-canvas.js +13 -23
- package/src/components/global-styles/context-menu.js +2 -2
- package/src/components/global-styles/hooks.js +1 -78
- package/src/components/global-styles/preview.js +1 -1
- package/src/components/global-styles/screen-block-list.js +2 -2
- package/src/components/global-styles/screen-colors.js +25 -229
- package/src/components/global-styles/screen-typography-element.js +4 -0
- package/src/components/global-styles/screen-typography.js +6 -0
- package/src/components/global-styles/stories/index.js +425 -0
- package/src/components/global-styles/style.scss +4 -18
- package/src/components/global-styles/ui.js +6 -31
- package/src/components/global-styles-renderer/index.js +1 -2
- package/src/components/secondary-sidebar/list-view-sidebar.js +4 -3
- package/src/components/start-template-options/index.js +40 -8
- package/src/components/style-book/index.js +10 -16
- package/src/components/style-book/style.scss +1 -1
- package/src/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build/components/global-styles/color-utils.js +0 -17
- package/build/components/global-styles/color-utils.js.map +0 -1
- package/build/components/global-styles/screen-background-color.js +0 -114
- package/build/components/global-styles/screen-background-color.js.map +0 -1
- package/build/components/global-styles/screen-button-color.js +0 -88
- package/build/components/global-styles/screen-button-color.js.map +0 -1
- package/build/components/global-styles/screen-heading-color.js +0 -165
- package/build/components/global-styles/screen-heading-color.js.map +0 -1
- package/build/components/global-styles/screen-link-color.js +0 -105
- package/build/components/global-styles/screen-link-color.js.map +0 -1
- package/build/components/global-styles/screen-text-color.js +0 -71
- package/build/components/global-styles/screen-text-color.js.map +0 -1
- package/build-module/components/global-styles/color-utils.js +0 -9
- package/build-module/components/global-styles/color-utils.js.map +0 -1
- package/build-module/components/global-styles/screen-background-color.js +0 -97
- package/build-module/components/global-styles/screen-background-color.js.map +0 -1
- package/build-module/components/global-styles/screen-button-color.js +0 -73
- package/build-module/components/global-styles/screen-button-color.js.map +0 -1
- package/build-module/components/global-styles/screen-heading-color.js +0 -149
- package/build-module/components/global-styles/screen-heading-color.js.map +0 -1
- package/build-module/components/global-styles/screen-link-color.js +0 -89
- package/build-module/components/global-styles/screen-link-color.js.map +0 -1
- package/build-module/components/global-styles/screen-text-color.js +0 -56
- package/build-module/components/global-styles/screen-text-color.js.map +0 -1
- package/src/components/global-styles/color-utils.js +0 -14
- package/src/components/global-styles/screen-background-color.js +0 -132
- package/src/components/global-styles/screen-button-color.js +0 -104
- package/src/components/global-styles/screen-heading-color.js +0 -206
- package/src/components/global-styles/screen-link-color.js +0 -124
- package/src/components/global-styles/screen-text-color.js +0 -62
|
@@ -45,6 +45,7 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
|
|
|
45
45
|
'elements.button.color.background': 'color',
|
|
46
46
|
'elements.button.typography.fontFamily': 'font-family',
|
|
47
47
|
'elements.button.typography.fontSize': 'font-size',
|
|
48
|
+
'elements.caption.color.text': 'color',
|
|
48
49
|
'elements.heading.color': 'color',
|
|
49
50
|
'elements.heading.color.background': 'color',
|
|
50
51
|
'elements.heading.typography.fontFamily': 'font-family',
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useHasColorPanel = useHasColorPanel;
|
|
7
|
-
|
|
8
|
-
var _hooks = require("./hooks");
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Internal dependencies
|
|
12
|
-
*/
|
|
13
|
-
function useHasColorPanel(name) {
|
|
14
|
-
const supports = (0, _hooks.useSupportedStyles)(name);
|
|
15
|
-
return supports.includes('color') || supports.includes('backgroundColor') || supports.includes('background') || supports.includes('linkColor');
|
|
16
|
-
}
|
|
17
|
-
//# sourceMappingURL=color-utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/color-utils.js"],"names":["useHasColorPanel","name","supports","includes"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,SAASA,gBAAT,CAA2BC,IAA3B,EAAkC;AACxC,QAAMC,QAAQ,GAAG,+BAAoBD,IAApB,CAAjB;AACA,SACCC,QAAQ,CAACC,QAAT,CAAmB,OAAnB,KACAD,QAAQ,CAACC,QAAT,CAAmB,iBAAnB,CADA,IAEAD,QAAQ,CAACC,QAAT,CAAmB,YAAnB,CAFA,IAGAD,QAAQ,CAACC,QAAT,CAAmB,WAAnB,CAJD;AAMA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useSupportedStyles } from './hooks';\n\nexport function useHasColorPanel( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn (\n\t\tsupports.includes( 'color' ) ||\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' ) ||\n\t\tsupports.includes( 'linkColor' )\n\t);\n}\n"]}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _element = require("@wordpress/element");
|
|
11
|
-
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
-
|
|
16
|
-
var _i18n = require("@wordpress/i18n");
|
|
17
|
-
|
|
18
|
-
var _blockEditor = require("@wordpress/block-editor");
|
|
19
|
-
|
|
20
|
-
var _header = _interopRequireDefault(require("./header"));
|
|
21
|
-
|
|
22
|
-
var _hooks = require("./hooks");
|
|
23
|
-
|
|
24
|
-
var _privateApis = require("../../private-apis");
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* External dependencies
|
|
28
|
-
*/
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* WordPress dependencies
|
|
32
|
-
*/
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Internal dependencies
|
|
36
|
-
*/
|
|
37
|
-
const {
|
|
38
|
-
useGlobalSetting,
|
|
39
|
-
useGlobalStyle
|
|
40
|
-
} = (0, _privateApis.unlock)(_blockEditor.privateApis);
|
|
41
|
-
|
|
42
|
-
function ScreenBackgroundColor(_ref) {
|
|
43
|
-
let {
|
|
44
|
-
name,
|
|
45
|
-
variation = ''
|
|
46
|
-
} = _ref;
|
|
47
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
48
|
-
const supports = (0, _hooks.useSupportedStyles)(name);
|
|
49
|
-
const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
|
|
50
|
-
const [areCustomGradientsEnabled] = useGlobalSetting('color.customGradient', name);
|
|
51
|
-
const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
|
|
52
|
-
const gradientsPerOrigin = (0, _hooks.useGradientsPerOrigin)(name);
|
|
53
|
-
const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
|
|
54
|
-
const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
|
|
55
|
-
const hasGradientColor = supports.includes('background') && (gradientsPerOrigin.length > 0 || areCustomGradientsEnabled);
|
|
56
|
-
const [backgroundColor, setBackgroundColor] = useGlobalStyle(prefix + 'color.background', name);
|
|
57
|
-
const [userBackgroundColor] = useGlobalStyle(prefix + 'color.background', name, 'user');
|
|
58
|
-
const [gradient, setGradient] = useGlobalStyle(prefix + 'color.gradient', name);
|
|
59
|
-
const [userGradient] = useGlobalStyle(prefix + 'color.gradient', name, 'user');
|
|
60
|
-
|
|
61
|
-
if (!hasBackgroundColor && !hasGradientColor) {
|
|
62
|
-
return null;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
let backgroundSettings = {};
|
|
66
|
-
|
|
67
|
-
if (hasBackgroundColor) {
|
|
68
|
-
backgroundSettings = {
|
|
69
|
-
colorValue: backgroundColor,
|
|
70
|
-
onColorChange: setBackgroundColor
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
if (backgroundColor) {
|
|
74
|
-
backgroundSettings.clearable = backgroundColor === userBackgroundColor;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
let gradientSettings = {};
|
|
79
|
-
|
|
80
|
-
if (hasGradientColor) {
|
|
81
|
-
gradientSettings = {
|
|
82
|
-
gradientValue: gradient,
|
|
83
|
-
onGradientChange: setGradient
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
if (gradient) {
|
|
87
|
-
gradientSettings.clearable = gradient === userGradient;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const controlProps = { ...backgroundSettings,
|
|
92
|
-
...gradientSettings
|
|
93
|
-
};
|
|
94
|
-
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
|
|
95
|
-
title: (0, _i18n.__)('Background'),
|
|
96
|
-
description: (0, _i18n.__)('Set a background color or gradient for the whole site.')
|
|
97
|
-
}), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, (0, _extends2.default)({
|
|
98
|
-
className: (0, _classnames.default)('edit-site-screen-background-color__control', {
|
|
99
|
-
'has-no-tabs': !hasBackgroundColor || !hasGradientColor
|
|
100
|
-
}),
|
|
101
|
-
colors: colorsPerOrigin,
|
|
102
|
-
gradients: gradientsPerOrigin,
|
|
103
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
104
|
-
disableCustomGradients: !areCustomGradientsEnabled,
|
|
105
|
-
showTitle: false,
|
|
106
|
-
enableAlpha: true,
|
|
107
|
-
__experimentalIsRenderedInSidebar: true,
|
|
108
|
-
headingLevel: 3
|
|
109
|
-
}, controlProps)));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
var _default = ScreenBackgroundColor;
|
|
113
|
-
exports.default = _default;
|
|
114
|
-
//# sourceMappingURL=screen-background-color.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","ScreenBackgroundColor","name","variation","prefix","supports","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tuseSupportedStyles,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackgroundColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = useSupportedStyles( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useGlobalSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useGlobalStyle(\n\t\tprefix + 'color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useGlobalStyle(\n\t\tprefix + 'color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-screen-background-color__control',\n\t\t\t\t\t{\n\t\t\t\t\t\t'has-no-tabs':\n\t\t\t\t\t\t\t! hasBackgroundColor || ! hasGradientColor,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\theadingLevel={ 3 }\n\t\t\t\t{ ...controlProps }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _element = require("@wordpress/element");
|
|
11
|
-
|
|
12
|
-
var _i18n = require("@wordpress/i18n");
|
|
13
|
-
|
|
14
|
-
var _blockEditor = require("@wordpress/block-editor");
|
|
15
|
-
|
|
16
|
-
var _header = _interopRequireDefault(require("./header"));
|
|
17
|
-
|
|
18
|
-
var _hooks = require("./hooks");
|
|
19
|
-
|
|
20
|
-
var _privateApis = require("../../private-apis");
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* WordPress dependencies
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Internal dependencies
|
|
28
|
-
*/
|
|
29
|
-
const {
|
|
30
|
-
useGlobalSetting,
|
|
31
|
-
useGlobalStyle
|
|
32
|
-
} = (0, _privateApis.unlock)(_blockEditor.privateApis);
|
|
33
|
-
|
|
34
|
-
function ScreenButtonColor(_ref) {
|
|
35
|
-
let {
|
|
36
|
-
name,
|
|
37
|
-
variation = ''
|
|
38
|
-
} = _ref;
|
|
39
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
40
|
-
const supports = (0, _hooks.useSupportedStyles)(name);
|
|
41
|
-
const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
|
|
42
|
-
const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
|
|
43
|
-
const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
|
|
44
|
-
const hasButtonColor = supports.includes('buttonColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
|
|
45
|
-
const [buttonTextColor, setButtonTextColor] = useGlobalStyle(prefix + 'elements.button.color.text', name);
|
|
46
|
-
const [userButtonTextColor] = useGlobalStyle('elements.button.color.text', name, 'user');
|
|
47
|
-
const [buttonBgColor, setButtonBgColor] = useGlobalStyle('elements.button.color.background', name);
|
|
48
|
-
const [userButtonBgColor] = useGlobalStyle('elements.button.color.background', name, 'user');
|
|
49
|
-
|
|
50
|
-
if (!hasButtonColor) {
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
|
|
55
|
-
title: (0, _i18n.__)('Buttons'),
|
|
56
|
-
description: (0, _i18n.__)('Set the default colors used for buttons across the site.')
|
|
57
|
-
}), (0, _element.createElement)("h3", {
|
|
58
|
-
className: "edit-site-global-styles-section-title"
|
|
59
|
-
}, (0, _i18n.__)('Text color')), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
|
|
60
|
-
className: "edit-site-screen-button-color__control",
|
|
61
|
-
colors: colorsPerOrigin,
|
|
62
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
63
|
-
showTitle: false,
|
|
64
|
-
enableAlpha: true,
|
|
65
|
-
__experimentalIsRenderedInSidebar: true,
|
|
66
|
-
colorValue: buttonTextColor,
|
|
67
|
-
onColorChange: setButtonTextColor,
|
|
68
|
-
clearable: buttonTextColor === userButtonTextColor,
|
|
69
|
-
headingLevel: 4
|
|
70
|
-
}), (0, _element.createElement)("h3", {
|
|
71
|
-
className: "edit-site-global-styles-section-title"
|
|
72
|
-
}, (0, _i18n.__)('Background color')), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
|
|
73
|
-
className: "edit-site-screen-button-color__control",
|
|
74
|
-
colors: colorsPerOrigin,
|
|
75
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
76
|
-
showTitle: false,
|
|
77
|
-
enableAlpha: true,
|
|
78
|
-
__experimentalIsRenderedInSidebar: true,
|
|
79
|
-
colorValue: buttonBgColor,
|
|
80
|
-
onColorChange: setButtonBgColor,
|
|
81
|
-
clearable: buttonBgColor === userButtonBgColor,
|
|
82
|
-
headingLevel: 4
|
|
83
|
-
}));
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
var _default = ScreenButtonColor;
|
|
87
|
-
exports.default = _default;
|
|
88
|
-
//# sourceMappingURL=screen-button-color.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","ScreenButtonColor","name","variation","prefix","supports","colorsPerOrigin","areCustomSolidsEnabled","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAQA;;AACA;;AACA;;AAdA;AACA;AACA;;AAOA;AACA;AACA;AAKA,MAAM;AAAEA,EAAAA,gBAAF;AAAoBC,EAAAA;AAApB,IAAuC,yBAAQC,wBAAR,CAA7C;;AAEA,SAASC,iBAAT,OAAuD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACtD,QAAMC,MAAM,GAAGD,SAAS,GAAI,cAAcA,SAAW,GAA7B,GAAkC,EAA1D;AACA,QAAME,QAAQ,GAAG,+BAAoBH,IAApB,CAAjB;AACA,QAAMI,eAAe,GAAG,+BAAoBJ,IAApB,CAAxB;AACA,QAAM,CAAEK,sBAAF,IAA6BT,gBAAgB,CAAE,cAAF,EAAkBI,IAAlB,CAAnD;AACA,QAAM,CAAEM,mBAAF,IAA0BV,gBAAgB,CAC/C,kBAD+C,EAE/CI,IAF+C,CAAhD;AAKA,QAAMO,cAAc,GACnBJ,QAAQ,CAACK,QAAT,CAAmB,aAAnB,KACAF,mBADA,KAEEF,eAAe,CAACK,MAAhB,GAAyB,CAAzB,IAA8BJ,sBAFhC,CADD;AAKA,QAAM,CAAEK,eAAF,EAAmBC,kBAAnB,IAA0Cd,cAAc,CAC7DK,MAAM,GAAG,4BADoD,EAE7DF,IAF6D,CAA9D;AAIA,QAAM,CAAEY,mBAAF,IAA0Bf,cAAc,CAC7C,4BAD6C,EAE7CG,IAF6C,EAG7C,MAH6C,CAA9C;AAMA,QAAM,CAAEa,aAAF,EAAiBC,gBAAjB,IAAsCjB,cAAc,CACzD,kCADyD,EAEzDG,IAFyD,CAA1D;AAIA,QAAM,CAAEe,iBAAF,IAAwBlB,cAAc,CAC3C,kCAD2C,EAE3CG,IAF2C,EAG3C,MAH2C,CAA5C;;AAMA,MAAK,CAAEO,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,SAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,0DADa;AAFf,IADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,YAAJ,CADH,CARD,EAYC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGH,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEC,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGK,eAPd;AAQC,IAAA,aAAa,EAAGC,kBARjB;AASC,IAAA,SAAS,EAAGD,eAAe,KAAKE,mBATjC;AAUC,IAAA,YAAY,EAAG;AAVhB,IAZD,EAyBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,kBAAJ,CADH,CAzBD,EA6BC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGR,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEC,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGQ,aAPd;AAQC,IAAA,aAAa,EAAGC,gBARjB;AASC,IAAA,SAAS,EAAGD,aAAa,KAAKE,iBAT/B;AAUC,IAAA,YAAY,EAAG;AAVhB,IA7BD,CADD;AA4CA;;eAEchB,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { useSupportedStyles, useColorsPerOrigin } from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenButtonColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = useSupportedStyles( name );\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(\n\t\tprefix + 'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useGlobalStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useGlobalStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h3 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h3>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t\theadingLevel={ 4 }\n\t\t\t/>\n\n\t\t\t<h3 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h3>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t\theadingLevel={ 4 }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}
|
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _element = require("@wordpress/element");
|
|
11
|
-
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
|
-
var _i18n = require("@wordpress/i18n");
|
|
15
|
-
|
|
16
|
-
var _components = require("@wordpress/components");
|
|
17
|
-
|
|
18
|
-
var _blockEditor = require("@wordpress/block-editor");
|
|
19
|
-
|
|
20
|
-
var _header = _interopRequireDefault(require("./header"));
|
|
21
|
-
|
|
22
|
-
var _hooks = require("./hooks");
|
|
23
|
-
|
|
24
|
-
var _privateApis = require("../../private-apis");
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* WordPress dependencies
|
|
28
|
-
*/
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Internal dependencies
|
|
32
|
-
*/
|
|
33
|
-
const {
|
|
34
|
-
useGlobalSetting,
|
|
35
|
-
useGlobalStyle
|
|
36
|
-
} = (0, _privateApis.unlock)(_blockEditor.privateApis);
|
|
37
|
-
|
|
38
|
-
function ScreenHeadingColor(_ref) {
|
|
39
|
-
let {
|
|
40
|
-
name,
|
|
41
|
-
variation = ''
|
|
42
|
-
} = _ref;
|
|
43
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
44
|
-
const [selectedLevel, setCurrentTab] = (0, _element.useState)('heading');
|
|
45
|
-
const supports = (0, _hooks.useSupportedStyles)(name);
|
|
46
|
-
const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
|
|
47
|
-
const [areCustomGradientsEnabled] = useGlobalSetting('color.customGradient', name);
|
|
48
|
-
const [isTextEnabled] = useGlobalSetting('color.text', name);
|
|
49
|
-
const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
|
|
50
|
-
const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
|
|
51
|
-
const gradientsPerOrigin = (0, _hooks.useGradientsPerOrigin)(name);
|
|
52
|
-
const hasTextColor = supports.includes('color') && isTextEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
|
|
53
|
-
const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
|
|
54
|
-
const hasGradientColor = supports.includes('background') && (gradientsPerOrigin.length > 0 || areCustomGradientsEnabled);
|
|
55
|
-
const [color, setColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.text', name);
|
|
56
|
-
const [userColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.text', name, 'user');
|
|
57
|
-
const [backgroundColor, setBackgroundColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.background', name);
|
|
58
|
-
const [userBackgroundColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.background', name, 'user');
|
|
59
|
-
const [gradient, setGradient] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.gradient', name);
|
|
60
|
-
const [userGradient] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.gradient', name, 'user');
|
|
61
|
-
|
|
62
|
-
if (!hasTextColor && !hasBackgroundColor && !hasGradientColor) {
|
|
63
|
-
return null;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
let backgroundSettings = {};
|
|
67
|
-
|
|
68
|
-
if (hasBackgroundColor) {
|
|
69
|
-
backgroundSettings = {
|
|
70
|
-
colorValue: backgroundColor,
|
|
71
|
-
onColorChange: setBackgroundColor
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
if (backgroundColor) {
|
|
75
|
-
backgroundSettings.clearable = backgroundColor === userBackgroundColor;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
let gradientSettings = {};
|
|
80
|
-
|
|
81
|
-
if (hasGradientColor) {
|
|
82
|
-
gradientSettings = {
|
|
83
|
-
gradientValue: gradient,
|
|
84
|
-
onGradientChange: setGradient
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
if (gradient) {
|
|
88
|
-
gradientSettings.clearable = gradient === userGradient;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
const controlProps = { ...backgroundSettings,
|
|
93
|
-
...gradientSettings
|
|
94
|
-
};
|
|
95
|
-
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
|
|
96
|
-
title: (0, _i18n.__)('Headings'),
|
|
97
|
-
description: (0, _i18n.__)('Set the default color used for headings across the site.')
|
|
98
|
-
}), (0, _element.createElement)("div", {
|
|
99
|
-
className: "edit-site-global-styles-screen-heading-color"
|
|
100
|
-
}, (0, _element.createElement)("h3", null, (0, _i18n.__)('Select heading level')), (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
|
|
101
|
-
__nextHasNoMarginBottom: true,
|
|
102
|
-
label: (0, _i18n.__)('Select heading level'),
|
|
103
|
-
hideLabelFromVision: true,
|
|
104
|
-
value: selectedLevel,
|
|
105
|
-
onChange: setCurrentTab,
|
|
106
|
-
isBlock: true
|
|
107
|
-
}, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
108
|
-
value: "heading"
|
|
109
|
-
/* translators: 'All' refers to selecting all heading levels
|
|
110
|
-
and applying the same style to h1-h6. */
|
|
111
|
-
,
|
|
112
|
-
label: (0, _i18n.__)('All')
|
|
113
|
-
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
114
|
-
value: "h1",
|
|
115
|
-
label: (0, _i18n.__)('H1')
|
|
116
|
-
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
117
|
-
value: "h2",
|
|
118
|
-
label: (0, _i18n.__)('H2')
|
|
119
|
-
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
120
|
-
value: "h3",
|
|
121
|
-
label: (0, _i18n.__)('H3')
|
|
122
|
-
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
123
|
-
value: "h4",
|
|
124
|
-
label: (0, _i18n.__)('H4')
|
|
125
|
-
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
126
|
-
value: "h5",
|
|
127
|
-
label: (0, _i18n.__)('H5')
|
|
128
|
-
}), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
|
|
129
|
-
value: "h6",
|
|
130
|
-
label: (0, _i18n.__)('H6')
|
|
131
|
-
}))), hasTextColor && (0, _element.createElement)("div", {
|
|
132
|
-
className: "edit-site-global-styles-screen-heading-color"
|
|
133
|
-
}, (0, _element.createElement)("h3", null, selectedLevel === 'heading' ? (0, _i18n.__)('Text color for all heading levels') : (0, _i18n.sprintf)(
|
|
134
|
-
/* translators: %s: heading level (h1-h6) */
|
|
135
|
-
(0, _i18n.__)('Text color for %s'), selectedLevel.toUpperCase())), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
|
|
136
|
-
className: "edit-site-screen-heading-text-color__control",
|
|
137
|
-
colors: colorsPerOrigin,
|
|
138
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
139
|
-
showTitle: false,
|
|
140
|
-
enableAlpha: true,
|
|
141
|
-
__experimentalIsRenderedInSidebar: true,
|
|
142
|
-
colorValue: color,
|
|
143
|
-
onColorChange: setColor,
|
|
144
|
-
clearable: color === userColor,
|
|
145
|
-
headingLevel: 4
|
|
146
|
-
})), hasBackgroundColor && (0, _element.createElement)("div", {
|
|
147
|
-
className: "edit-site-global-styles-screen-heading-color"
|
|
148
|
-
}, (0, _element.createElement)("h3", null, selectedLevel === 'heading' ? (0, _i18n.__)('Background color for all heading levels') : (0, _i18n.sprintf)(
|
|
149
|
-
/* translators: %s: heading level (h1-h6) */
|
|
150
|
-
(0, _i18n.__)('Background color for %s'), selectedLevel.toUpperCase())), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, (0, _extends2.default)({
|
|
151
|
-
className: "edit-site-screen-heading-background-color__control",
|
|
152
|
-
colors: colorsPerOrigin,
|
|
153
|
-
gradients: gradientsPerOrigin,
|
|
154
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
155
|
-
disableCustomGradients: !areCustomGradientsEnabled,
|
|
156
|
-
showTitle: false,
|
|
157
|
-
enableAlpha: true,
|
|
158
|
-
__experimentalIsRenderedInSidebar: true,
|
|
159
|
-
headingLevel: 4
|
|
160
|
-
}, controlProps))));
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
var _default = ScreenHeadingColor;
|
|
164
|
-
exports.default = _default;
|
|
165
|
-
//# sourceMappingURL=screen-heading-color.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","ScreenHeadingColor","name","variation","prefix","selectedLevel","setCurrentTab","supports","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tuseSupportedStyles,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenHeadingColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\tconst supports = useSupportedStyles( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useGlobalSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst [ isTextEnabled ] = useGlobalSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );\n\n\tconst [ color, setColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useGlobalStyle(\n\t\tprefix + 'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h3>{ __( 'Select heading level' ) }</h3>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels\n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t ) }\n\t\t\t\t\t</h3>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t\theadingLevel={ 4 }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h3>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t ) }\n\t\t\t\t\t</h3>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\theadingLevel={ 4 }\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _element = require("@wordpress/element");
|
|
11
|
-
|
|
12
|
-
var _i18n = require("@wordpress/i18n");
|
|
13
|
-
|
|
14
|
-
var _blockEditor = require("@wordpress/block-editor");
|
|
15
|
-
|
|
16
|
-
var _components = require("@wordpress/components");
|
|
17
|
-
|
|
18
|
-
var _header = _interopRequireDefault(require("./header"));
|
|
19
|
-
|
|
20
|
-
var _hooks = require("./hooks");
|
|
21
|
-
|
|
22
|
-
var _privateApis = require("../../private-apis");
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* WordPress dependencies
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Internal dependencies
|
|
30
|
-
*/
|
|
31
|
-
const {
|
|
32
|
-
useGlobalSetting,
|
|
33
|
-
useGlobalStyle
|
|
34
|
-
} = (0, _privateApis.unlock)(_blockEditor.privateApis);
|
|
35
|
-
|
|
36
|
-
function ScreenLinkColor(_ref) {
|
|
37
|
-
let {
|
|
38
|
-
name,
|
|
39
|
-
variation = ''
|
|
40
|
-
} = _ref;
|
|
41
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
42
|
-
const supports = (0, _hooks.useSupportedStyles)(name);
|
|
43
|
-
const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
|
|
44
|
-
const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
|
|
45
|
-
const [isLinkEnabled] = useGlobalSetting('color.link', name);
|
|
46
|
-
const hasLinkColor = supports.includes('linkColor') && isLinkEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
|
|
47
|
-
const pseudoStates = {
|
|
48
|
-
default: {
|
|
49
|
-
label: (0, _i18n.__)('Default'),
|
|
50
|
-
value: useGlobalStyle(prefix + 'elements.link.color.text', name)[0],
|
|
51
|
-
handler: useGlobalStyle(prefix + 'elements.link.color.text', name)[1],
|
|
52
|
-
userValue: useGlobalStyle(prefix + 'elements.link.color.text', name, 'user')[0]
|
|
53
|
-
},
|
|
54
|
-
hover: {
|
|
55
|
-
label: (0, _i18n.__)('Hover'),
|
|
56
|
-
value: useGlobalStyle(prefix + 'elements.link.:hover.color.text', name)[0],
|
|
57
|
-
handler: useGlobalStyle(prefix + 'elements.link.:hover.color.text', name)[1],
|
|
58
|
-
userValue: useGlobalStyle(prefix + 'elements.link.:hover.color.text', name, 'user')[0]
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
if (!hasLinkColor) {
|
|
63
|
-
return null;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const tabs = Object.entries(pseudoStates).map(_ref2 => {
|
|
67
|
-
let [selector, config] = _ref2;
|
|
68
|
-
return {
|
|
69
|
-
name: selector,
|
|
70
|
-
title: config.label,
|
|
71
|
-
className: `color-text-${selector}`
|
|
72
|
-
};
|
|
73
|
-
});
|
|
74
|
-
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
|
|
75
|
-
title: (0, _i18n.__)('Links'),
|
|
76
|
-
description: (0, _i18n.__)('Set the colors used for links across the site.')
|
|
77
|
-
}), (0, _element.createElement)(_components.TabPanel, {
|
|
78
|
-
tabs: tabs
|
|
79
|
-
}, tab => {
|
|
80
|
-
var _pseudoStates$tab$nam;
|
|
81
|
-
|
|
82
|
-
const pseudoSelectorConfig = (_pseudoStates$tab$nam = pseudoStates[tab.name]) !== null && _pseudoStates$tab$nam !== void 0 ? _pseudoStates$tab$nam : null;
|
|
83
|
-
|
|
84
|
-
if (!pseudoSelectorConfig) {
|
|
85
|
-
return null;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
|
|
89
|
-
className: "edit-site-screen-link-color__control",
|
|
90
|
-
colors: colorsPerOrigin,
|
|
91
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
92
|
-
showTitle: false,
|
|
93
|
-
enableAlpha: true,
|
|
94
|
-
__experimentalIsRenderedInSidebar: true,
|
|
95
|
-
colorValue: pseudoSelectorConfig.value,
|
|
96
|
-
onColorChange: pseudoSelectorConfig.handler,
|
|
97
|
-
clearable: pseudoSelectorConfig.value === pseudoSelectorConfig.userValue,
|
|
98
|
-
headingLevel: 3
|
|
99
|
-
}));
|
|
100
|
-
}));
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
var _default = ScreenLinkColor;
|
|
104
|
-
exports.default = _default;
|
|
105
|
-
//# sourceMappingURL=screen-link-color.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorPrivateApis","ScreenLinkColor","name","variation","prefix","supports","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { useSupportedStyles, useColorsPerOrigin } from './hooks';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ScreenLinkColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = useSupportedStyles( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst [ isLinkEnabled ] = useGlobalSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.color.text',\n\t\t\t\tname\n\t\t\t)[ 0 ],\n\t\t\thandler: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.color.text',\n\t\t\t\tname\n\t\t\t)[ 1 ],\n\t\t\tuserValue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.:hover.color.text',\n\t\t\t\tname\n\t\t\t)[ 0 ],\n\t\t\thandler: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.:hover.color.text',\n\t\t\t\tname\n\t\t\t)[ 1 ],\n\t\t\tuserValue: useGlobalStyle(\n\t\t\t\tprefix + 'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\theadingLevel={ 3 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
|
|
10
|
-
var _element = require("@wordpress/element");
|
|
11
|
-
|
|
12
|
-
var _i18n = require("@wordpress/i18n");
|
|
13
|
-
|
|
14
|
-
var _blockEditor = require("@wordpress/block-editor");
|
|
15
|
-
|
|
16
|
-
var _header = _interopRequireDefault(require("./header"));
|
|
17
|
-
|
|
18
|
-
var _hooks = require("./hooks");
|
|
19
|
-
|
|
20
|
-
var _privateApis = require("../../private-apis");
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* WordPress dependencies
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Internal dependencies
|
|
28
|
-
*/
|
|
29
|
-
const {
|
|
30
|
-
useGlobalSetting,
|
|
31
|
-
useGlobalStyle
|
|
32
|
-
} = (0, _privateApis.unlock)(_blockEditor.privateApis);
|
|
33
|
-
|
|
34
|
-
function ScreenTextColor(_ref) {
|
|
35
|
-
let {
|
|
36
|
-
name,
|
|
37
|
-
variation = ''
|
|
38
|
-
} = _ref;
|
|
39
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
40
|
-
const supports = (0, _hooks.useSupportedStyles)(name);
|
|
41
|
-
const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
|
|
42
|
-
const [isTextEnabled] = useGlobalSetting('color.text', name);
|
|
43
|
-
const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
|
|
44
|
-
const hasTextColor = supports.includes('color') && isTextEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
|
|
45
|
-
const [color, setColor] = useGlobalStyle(prefix + 'color.text', name);
|
|
46
|
-
const [userColor] = useGlobalStyle(prefix + 'color.text', name, 'user');
|
|
47
|
-
|
|
48
|
-
if (!hasTextColor) {
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
|
|
53
|
-
title: (0, _i18n.__)('Text'),
|
|
54
|
-
description: (0, _i18n.__)('Set the default color used for text across the site.')
|
|
55
|
-
}), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
|
|
56
|
-
className: "edit-site-screen-text-color__control",
|
|
57
|
-
colors: colorsPerOrigin,
|
|
58
|
-
disableCustomColors: !areCustomSolidsEnabled,
|
|
59
|
-
showTitle: false,
|
|
60
|
-
enableAlpha: true,
|
|
61
|
-
__experimentalIsRenderedInSidebar: true,
|
|
62
|
-
colorValue: color,
|
|
63
|
-
onColorChange: setColor,
|
|
64
|
-
clearable: color === userColor,
|
|
65
|
-
headingLevel: 3
|
|
66
|
-
}));
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
var _default = ScreenTextColor;
|
|
70
|
-
exports.default = _default;
|
|
71
|
-
//# sourceMappingURL=screen-text-color.js.map
|