diff --git a/.eslintignore b/.eslintignore
index efb3c8d6..cf65b9c4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,3 @@ cypress
node_modules
acceptance
*.json
-remove_me
diff --git a/.eslintrc.js b/.eslintrc.js
index c1a0b70a..244b8f7e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,7 +23,12 @@ module.exports = {
rules: {
'import/no-unresolved': 1,
'import/named': 'error',
- 'react/jsx-filename-extension': 'error',
+ 'react/jsx-filename-extension': [
+ 2,
+ {
+ extensions: ['.jsx', '.tsx'],
+ },
+ ],
'no-restricted-imports': [
'error',
{
diff --git a/packages/volto-light-theme/package.json b/packages/volto-light-theme/package.json
index 0d521f83..793870ad 100644
--- a/packages/volto-light-theme/package.json
+++ b/packages/volto-light-theme/package.json
@@ -35,9 +35,13 @@
},
"devDependencies": {
"@plone/scripts": "^3.6.2",
+ "@plone/types": "workspace:*",
+ "@types/react": "^18.2.27",
+ "@types/react-dom": "^18.2.12",
"react-redux": "8.1.2",
"react-router-dom": "5.2.0",
- "release-it": "^17.7.0"
+ "release-it": "^17.7.0",
+ "typescript": "^5.6.3"
},
"dependencies": {
"@plone/components": "workspace:*"
diff --git a/packages/volto-light-theme/src/components/Theming/Theming.jsx b/packages/volto-light-theme/src/components/Theming/Theming.jsx
index 238e0fcb..ec40879b 100644
--- a/packages/volto-light-theme/src/components/Theming/Theming.jsx
+++ b/packages/volto-light-theme/src/components/Theming/Theming.jsx
@@ -3,30 +3,45 @@ import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
import Helmet from '@plone/volto/helpers/Helmet/Helmet';
import config from '@plone/volto/registry';
+function buildStyleTag(content, colors) {
+ if (Array.isArray(colors)) {
+ return colors
+ .filter((color) => content[color])
+ .map((color) => {
+ return `--${color.replace(/_/g, '-')}: ${content[color]};`;
+ });
+ }
+}
+
const Theming = ({ content }) => {
- const theme = content.theme || true;
- const color1 = content.color1 || 'red';
- const color2 = content.color2;
- const color3 = content.color3;
- const color4 = content.color4;
+ const theme = true; // Do we want a named theme?
+
+ const COLORS = [
+ 'theme_color',
+ 'theme_high_contrast_color',
+ 'theme_font_color',
+ 'theme_low_contrast_font_color',
+ 'theme_color_secondary',
+ 'theme_high_contrast_color_secondary',
+ 'theme_font_color_secondary',
+ 'theme_low_contrast_font_color_secondary',
+ ]; // Coming from config?
return (
<>
{theme ? (
<>
- {/* */}
{theme && (
-
+
)}
>
diff --git a/packages/volto-light-theme/src/components/Widgets/ColorPickerWidget.tsx b/packages/volto-light-theme/src/components/Widgets/ColorPickerWidget.tsx
new file mode 100644
index 00000000..b9e4bd77
--- /dev/null
+++ b/packages/volto-light-theme/src/components/Widgets/ColorPickerWidget.tsx
@@ -0,0 +1,34 @@
+import { ColorField, ColorPicker } from '@plone/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+import '@plone/components/src/styles/basic/ColorPicker.css';
+
+const ColorPickerWidget = (props: {
+ id: string;
+ title: string;
+ value: string;
+ default: string;
+ onChange: (id: string, value: any) => void;
+}) => {
+ // console.log(props.value);
+ return (
+
+
+ props.onChange(props.id, value?.toString('hex') || null)
+ }
+ value={props.value || '#ffffff'}
+ />
+
+ props.onChange(props.id, value?.toString('hex') || null)
+ }
+ />
+
+ );
+};
+
+export default ColorPickerWidget;
diff --git a/packages/volto-light-theme/src/components/Widgets/ColorWidget.tsx b/packages/volto-light-theme/src/components/Widgets/ColorWidget.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/volto-light-theme/src/config/widgets.tsx b/packages/volto-light-theme/src/config/widgets.tsx
new file mode 100644
index 00000000..bd5df48d
--- /dev/null
+++ b/packages/volto-light-theme/src/config/widgets.tsx
@@ -0,0 +1,14 @@
+import type { ConfigType } from '@plone/registry';
+import ColorPicker from '../components/Widgets/ColorPickerWidget';
+
+declare module '@plone/types' {
+ export interface WidgetsConfigByWidget {
+ color: typeof ColorPicker;
+ }
+}
+
+export default function install(config: ConfigType) {
+ config.widgets.widget.color = ColorPicker;
+
+ return config;
+}
diff --git a/packages/volto-light-theme/src/index.jsx b/packages/volto-light-theme/src/index.jsx
index d352aa70..dea77a80 100644
--- a/packages/volto-light-theme/src/index.jsx
+++ b/packages/volto-light-theme/src/index.jsx
@@ -38,6 +38,7 @@ import { mapsBlockSchemaEnhancer } from './components/Blocks/Maps/schema';
import { sliderBlockSchemaEnhancer } from './components/Blocks/Slider/schema';
import EventMetadataView from './components/Blocks/EventMetadata/View';
import installSlots from './config/slots';
+import installWidgets from './config/widgets';
const BG_COLORS = [
{ name: 'transparent', label: 'Transparent' },
@@ -57,6 +58,7 @@ defineMessages({
const applyConfig = (config) => {
installSlots(config);
+ installWidgets(config);
config.settings.enableAutoBlockGroupingByBackgroundColor = true;
config.settings.navDepth = 3;
diff --git a/packages/volto-light-theme/src/theme/_widgets.scss b/packages/volto-light-theme/src/theme/_widgets.scss
new file mode 100644
index 00000000..cdfe322a
--- /dev/null
+++ b/packages/volto-light-theme/src/theme/_widgets.scss
@@ -0,0 +1,15 @@
+.field.color {
+ .eight.wide.column {
+ flex-direction: row;
+ align-items: center;
+
+ input {
+ padding-left: 8px;
+ line-height: 1;
+ }
+ }
+}
+
+.react-aria-ColorSwatch {
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
diff --git a/packages/volto-light-theme/src/theme/main.scss b/packages/volto-light-theme/src/theme/main.scss
index bdd44b26..a23f0bd1 100644
--- a/packages/volto-light-theme/src/theme/main.scss
+++ b/packages/volto-light-theme/src/theme/main.scss
@@ -34,6 +34,8 @@
@import 'blocks-chooser';
@import 'blocks/eventMetadata';
+@import 'widgets';
+
@import 'temp';
/* No CSS beyond this point except next line */