Last changes

.eslintignore

@@ -3,4 +3,3 @@ cypress
 node_modules
 acceptance
 *.json
-remove_me

.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',
       {

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:*"

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 ? (
         <>
-          {/* <BodyClass className={isSubsite ? 'is-subsite' : null}></BodyClass> */}
           <BodyClass className={theme ? `theme--${theme}` : null}></BodyClass>
 
           {theme && (
             <Helmet>
-              <style>{`
-                :root {
-                  --custom-theme-color1: ${color1};
-                  --custom-theme-color2: ${color2};
-                  --custom-theme-color3: ${color3};
-                  --custom-theme-color4: ${color4};
-              }
-              `}</style>
+              <style>
+                {`
+:root {
+  ${buildStyleTag(content, COLORS)}
+}
+                `}
+              </style>
             </Helmet>
           )}
         </>

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 (
+    <FormFieldWrapper {...props} className="color">
+      <ColorPicker
+        defaultValue="#ffffff"
+        onChange={(value) =>
+          props.onChange(props.id, value?.toString('hex') || null)
+        }
+        value={props.value || '#ffffff'}
+      />
+      <ColorField
+        aria-label={`Pick a color for ${props.title}`}
+        value={props.value}
+        onChange={(value) =>
+          props.onChange(props.id, value?.toString('hex') || null)
+        }
+      />
+    </FormFieldWrapper>
+  );
+};
+
+export default ColorPickerWidget;

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;
+}

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;

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);
+}

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 */