Fix color widget color

mrs.developer.json

@@ -4,7 +4,7 @@
     "package": "@plone/volto",
     "url": "[email protected]:plone/volto.git",
     "https": "https://github.com/plone/volto.git",
-    "tag": "18.0.0-alpha.46"
+    "branch": "main"
   },
   "volto-button-block": {
     "develop": false,

packages/volto-light-theme/src/config/blocks.tsx

@@ -4,10 +4,7 @@ import type { StyleDefinition } from '../index';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { composeSchema } from '@plone/volto/helpers/Extensions';
-import {
-  defaultStylingSchema,
-  removeStylingSchema,
-} from '../components/Blocks/schema';
+import { defaultStylingSchema } from '../components/Blocks/schema';
 import { teaserSchemaEnhancer } from '../components/Blocks/Teaser/schema';
 import { videoBlockSchemaEnhancer } from '../components/Blocks/Video/schema';
 import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
@@ -177,16 +174,6 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
     [['h2', 'h2']];
 
-  console.log(
-    config.blocks.blocksConfig.gridBlock.blocksConfig.listingschemaEnhancer,
-  );
-  config.blocks.blocksConfig.gridBlock.blocksConfig.listingschemaEnhancer =
-    removeStylingSchema;
-  console.log(
-    config.blocks.blocksConfig.gridBlock.blocksConfig.listingvariations,
-  );
-  config.blocks.blocksConfig.gridBlock.blocksConfig.listingvariations = [];
-
   config.blocks.blocksConfig.introduction = {
     ...config.blocks.blocksConfig.introduction,
     unwantedButtons: ['heading-three', 'blockquote'],

packages/volto-light-theme/src/customizations/@root/loadSemanticUI.less

@@ -0,0 +1,4 @@
+@layer semanticUI {
+  @import 'semantic-ui-less/semantic.less';
+  @import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';
+}

packages/volto-light-theme/src/customizations/@root/theme.js

@@ -3,3 +3,8 @@
 import 'semantic-ui-less/semantic.less';
 import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';
 import '@kitconcept/volto-light-theme/theme/main.scss';
+
+// Experimental SemanticUI behind a layer
+// also see https://github.com/kitconcept/volto-light-theme/pull/422
+// import './loadSemanticUI.less';
+// import '@kitconcept/volto-light-theme/theme/main.scss';

packages/volto-light-theme/src/theme/_widgets.scss

@@ -1,19 +1,29 @@
 #sidebar-properties {
-    .field.widget {
-      .buttons {
-        display: flex;
-        align-items: center;
-
-        button {
-          aspect-ratio: 1/1;
-          padding: 5px;
-          &[data-hovered='true'] {
-            box-shadow: inset 0 0 0 2px rgba(0, 112, 162, 0.5);
-          }
-          &.active {
-            box-shadow: inset 0 0 0 2px rgb(0, 112, 162);
-          }
+  .field.widget {
+    .buttons {
+      display: flex;
+      align-items: center;
+
+      button {
+        padding: 5px;
+        aspect-ratio: 1/1;
+        &[data-hovered='true'] {
+          box-shadow: inset 0 0 0 2px rgba(0, 112, 162, 0.5);
+        }
+        &.active {
+          box-shadow: inset 0 0 0 2px rgb(0, 112, 162);
         }
       }
     }
-  }
+  }
+}
+
+.color-picker-widget .button {
+  background-color: var(--theme-color);
+}
+
+// TODO: Remove when layers are in place
+.color-picker-widget .button.grey,
+.color-picker-widget .button.grey.active {
+  background-color: var(--theme-color);
+}

packages/volto-light-theme/src/transforms/to6.ts

@@ -32,15 +32,13 @@ export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) {
           (color) => color.name === block.styles.backgroundColor,
         )?.style;
       delete block.styles.backgroundColor;
-      console.log(block);
     }
 
     if (block?.styles?.buttonAlign) {
       block.styles['blockWidth:noprefix'] = NORMALIZED_WIDTHS.find(
         (width) => width.name === block.styles.buttonAlign,
       )?.style;
       delete block.styles.buttonAlign;
-      console.log(block);
     }
   }
 }