@kitconcept/volto-light-theme 8.0.0-alpha.4 → 8.0.0-alpha.5

package/.changelog.draft

@@ -1,11 +1,16 @@
-## 8.0.0-alpha.4 (2025-11-05)
+## 8.0.0-alpha.5 (2025-11-11)
+
+### Feature
+
+- Registry color definitions support for ColorSwatch widget. @sneridagh [#723](https://github.com/kitconcept/volto-light-theme/pull/723)
 
 ### Bugfix
 
-- Fixed slider config, in case slider is not present. @sneridagh 
+- Fixes text in the sticky menu if the text was long enough to wrap. @jnptk [#691](https://github.com/kitconcept/volto-light-theme/pull/691)
+- Identify intranet header with a className in `header header-intranet` div. @sneridagh 
 
 ### Internal
 
-- Updated volto-dsgvo-banner baseline to latest (3.x series). @sneridagh 
+- Normalize all remaining add-ons to be "alpha" versions exclusively for vlt8. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,21 @@
 
 <!-- towncrier release notes start -->
 
+## 8.0.0-alpha.5 (2025-11-11)
+
+### Feature
+
+- Registry color definitions support for ColorSwatch widget. @sneridagh [#723](https://github.com/kitconcept/volto-light-theme/pull/723)
+
+### Bugfix
+
+- Fixes text in the sticky menu if the text was long enough to wrap. @jnptk [#691](https://github.com/kitconcept/volto-light-theme/pull/691)
+- Identify intranet header with a className in `header header-intranet` div. @sneridagh 
+
+### Internal
+
+- Normalize all remaining add-ons to be "alpha" versions exclusively for vlt8. @sneridagh 
+
 ## 8.0.0-alpha.4 (2025-11-05)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.4",
+  "version": "8.0.0-alpha.5",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -45,7 +45,7 @@
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
     "vitest": "^3.1.2",
-    "@plone/types": "2.0.0-alpha.8"
+    "@plone/types": "2.0.0-alpha.10"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

package/src/components/Header/Header.tsx

@@ -162,7 +162,7 @@ const IntranetHeader = ({ pathname, content }) => {
 
   return (
     <>
-      <div className="header">
+      <div className="header header-intranet">
         <div className="tools-wrapper">
           <LanguageSelector />
 

package/src/components/Widgets/ColorSwatch.stories.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import type { StyleDefinition } from '@plone/types';
+
+import ColorSwatch, { type ColorSwatchProps } from './ColorSwatch';
+
+const palettes: StyleDefinition[] = [
+  {
+    name: 'default',
+    label: 'Default',
+    style: {
+      '--theme-color': '#ffffff',
+      '--theme-foreground-color': '#1b1c1d',
+      '--theme-low-contrast-foreground-color': '#585858',
+    },
+  },
+  {
+    name: 'warm',
+    label: 'Warm',
+    style: {
+      '--theme-color': '#fff5ed',
+      '--theme-foreground-color': '#6b2c1f',
+      '--theme-low-contrast-foreground-color': '#b06a54',
+    },
+  },
+  {
+    name: 'unstyled',
+    label: 'No Inline Style',
+    style: undefined,
+  },
+];
+
+const themePalettes: StyleDefinition[] = [
+  {
+    name: 'ocean',
+    label: 'Ocean',
+    style: {
+      '--theme-color': '#dff5ff',
+      '--theme-foreground-color': '#003d5b',
+      '--theme-low-contrast-foreground-color': '#5c6b73',
+    },
+  },
+  {
+    name: 'forest',
+    label: 'Forest',
+    style: {
+      '--theme-color': '#e6f4ea',
+      '--theme-foreground-color': '#1e4d2b',
+      '--theme-low-contrast-foreground-color': '#4b7754',
+    },
+  },
+];
+
+const meta = {
+  title: 'Widgets/ColorSwatch',
+  component: ColorSwatch,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div style={{ width: 320 }}>
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorSwatch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const InteractiveColorSwatch = (args: ColorSwatchProps) => {
+  const [value, setValue] = React.useState(args.value || args.default);
+
+  return (
+    <>
+      <ColorSwatch
+        {...args}
+        onChange={(id, selectedValue) => {
+          setValue(selectedValue);
+          args.onChange?.(id, selectedValue);
+        }}
+      />
+      <div style={{ marginTop: '10px' }}>
+        The selected value is: <strong>{value}</strong>
+      </div>
+    </>
+  );
+};
+
+export const DefaultPalette: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    title: 'Color palette',
+    value: 'default',
+    colors: palettes,
+    onChange: fn(),
+  },
+};
+
+export const ThemePalette: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'theme',
+    title: 'Theme palette',
+    value: 'ocean',
+    themes: themePalettes,
+    onChange: fn(),
+  },
+};
+
+export const ColorPaletteWithDefault: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    title: 'Color palette',
+    colors: palettes,
+    default: 'warm',
+    onChange: fn(),
+  },
+};
+
+export const ColorPaletteNoValueNoDefault: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    title: 'Color palette',
+    colors: palettes,
+    onChange: fn(),
+  },
+};
+
+export const ColorPaletteNoValueNoDefaultWithFallbackToFirst: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    title: 'Color palette',
+    themes: themePalettes,
+    onChange: fn(),
+  },
+};

package/src/components/Widgets/ColorSwatch.test.tsx

@@ -0,0 +1,188 @@
+import React, { createContext, useContext } from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import ColorSwatch from './ColorSwatch';
+import type { StyleDefinition } from '@plone/types';
+
+vi.mock('@plone/volto/components/manage/Widgets/FormFieldWrapper', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="form-field-wrapper">{children}</div>
+  ),
+}));
+
+const MockRadioGroupContext = createContext<
+  ((value: string) => void) | undefined
+>(undefined);
+
+vi.mock('@plone/components', () => ({
+  RadioGroup: ({
+    children,
+    onChange,
+    ...rest
+  }: {
+    children: React.ReactNode;
+    onChange?: (value: string) => void;
+  }) => {
+    const { isDisabled: _isDisabled, ...passThrough } = rest as Record<
+      string,
+      unknown
+    >;
+
+    return (
+      <MockRadioGroupContext.Provider value={onChange}>
+        <div role="radiogroup" {...passThrough}>
+          {React.Children.map(children, (child) =>
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  onSelect: onChange,
+                })
+              : child,
+          )}
+        </div>
+      </MockRadioGroupContext.Provider>
+    );
+  },
+  Radio: ({
+    value,
+    onSelect,
+    className,
+    children,
+    ...rest
+  }: {
+    value: string;
+    onSelect?: (value: string) => void;
+    className?: string;
+    children?: React.ReactNode;
+  }) => {
+    const groupOnChange = useContext(MockRadioGroupContext);
+    return (
+      <button
+        type="button"
+        className={className}
+        data-value={value}
+        onClick={() => {
+          groupOnChange?.(value);
+          onSelect?.(value);
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+  Tooltip: ({ children }: { children: React.ReactNode }) => (
+    <span data-testid="tooltip">{children}</span>
+  ),
+}));
+
+vi.mock('react-aria-components', () => ({
+  Focusable: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+const palette: StyleDefinition[] = [
+  {
+    name: 'default',
+    label: 'Default',
+    style: { '--theme-color': '#fff' },
+  },
+  {
+    name: 'ocean',
+    label: 'Ocean',
+    style: { '--theme-color': '#00a0e6' },
+  },
+  {
+    name: 'sunset',
+    label: 'Sunset',
+    style: { '--theme-color': '#ff6b00' },
+  },
+];
+
+const renderColorSwatch = (
+  props: Partial<React.ComponentProps<typeof ColorSwatch>> = {},
+) => {
+  const { colors = palette, themes, onChange = vi.fn(), ...rest } = props;
+
+  const componentProps: React.ComponentProps<typeof ColorSwatch> = {
+    id: 'theme',
+    label: 'Theme',
+    title: 'Theme',
+    colors,
+    onChange,
+    ...rest,
+  } as React.ComponentProps<typeof ColorSwatch>;
+
+  if (themes !== undefined) {
+    componentProps.themes = themes;
+  }
+
+  return render(<ColorSwatch {...componentProps} />);
+};
+
+const getActiveClassName = (container: HTMLElement | Document) =>
+  container.querySelector('.color-swatch-option-handler.active')?.className ??
+  '';
+
+describe('ColorSwatch', () => {
+  it('renders nothing when no palettes are provided', () => {
+    const { container } = renderColorSwatch({ themes: [] });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('highlights the provided value', () => {
+    const { container } = renderColorSwatch({ value: 'ocean' });
+    expect(getActiveClassName(container)).toContain('ocean');
+  });
+
+  it('highlights the default value when no current value exists', () => {
+    const { container } = renderColorSwatch({
+      value: undefined,
+      default: 'sunset',
+    });
+    expect(getActiveClassName(container)).toContain('sunset');
+  });
+
+  it('falls back to the "default" palette name when no value or default is provided', () => {
+    const { container } = renderColorSwatch({
+      value: undefined,
+      default: undefined,
+    });
+    expect(getActiveClassName(container)).toContain('default');
+  });
+
+  it('falls back to the first color when no "default" palette is present', () => {
+    const colorsWithoutDefault: StyleDefinition[] = [
+      {
+        name: 'primary',
+        label: 'Primary',
+        style: { '--theme-color': '#333' },
+      },
+      {
+        name: 'secondary',
+        label: 'Secondary',
+        style: { '--theme-color': '#666' },
+      },
+    ];
+
+    const { container } = renderColorSwatch({
+      colors: colorsWithoutDefault,
+      value: undefined,
+      default: undefined,
+    });
+
+    expect(getActiveClassName(container)).toContain('primary');
+  });
+
+  it('notifies when a different swatch is chosen', () => {
+    const handleChange = vi.fn();
+    const { container } = renderColorSwatch({ onChange: handleChange });
+    const buttons = container.querySelectorAll('.color-swatch-option-wrapper');
+
+    fireEvent.click(buttons[2]);
+
+    expect(handleChange).toHaveBeenCalledWith('theme', 'sunset');
+  });
+});

package/src/components/Widgets/ColorSwatch.tsx

@@ -1,58 +1,96 @@
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import { Button } from '@plone/components';
+import { Radio, RadioGroup, Tooltip } from '@plone/components';
 import cx from 'classnames';
+import { Focusable, TooltipTrigger } from 'react-aria-components';
+import type { StyleDefinition } from '@plone/types';
 
-export type Color =
-  | {
-      name: string;
-      label: string;
-      style: Record<`--${string}`, string>;
-    }
-  | {
-      name: string;
-      label: string;
-      style: undefined;
-    };
-
-export type ColorSwatchProps = {
+type BaseColorSwatchProps = {
   id: string;
   title: string;
+  label: string;
   value?: string;
-  default?: string | object;
+  default?: string;
   required?: boolean;
-  missing_value?: unknown;
   className?: string;
   onChange: (id: string, value: any) => void;
-  colors: Color[];
-  themes: Color[];
+  disabled?: boolean;
+  isDisabled?: boolean;
 };
 
+type ColorsOnly = { colors: StyleDefinition[]; themes?: undefined };
+type ThemesOnly = { themes: StyleDefinition[]; colors?: undefined };
+
+export type ColorSwatchProps = BaseColorSwatchProps & (ColorsOnly | ThemesOnly);
+
 const ColorSwatch = (props: ColorSwatchProps) => {
-  const { id, value, onChange } = props;
+  const {
+    id,
+    label,
+    title,
+    value,
+    onChange,
+    disabled,
+    isDisabled,
+    default: defaultValue,
+  } = props;
   const colors = props.themes || props.colors || [];
 
+  const selectedColorName = colors.find(({ name }) => name === value)?.name;
+  const defaultSelectedColorName =
+    !selectedColorName && typeof defaultValue === 'string'
+      ? colors.find(({ name }) => name === defaultValue)?.name
+      : undefined;
+
+  const fallbackColorName =
+    !selectedColorName && !defaultSelectedColorName
+      ? colors.find(({ name }) => name === 'default')?.name || colors[0]?.name
+      : undefined;
+
+  const radioGroupValueProps: {
+    value?: string;
+    defaultValue?: string;
+  } = selectedColorName
+    ? { value: selectedColorName }
+    : defaultSelectedColorName
+      ? { defaultValue: defaultSelectedColorName }
+      : fallbackColorName
+        ? { defaultValue: fallbackColorName }
+        : {};
+
+  const currentColorName =
+    selectedColorName ?? defaultSelectedColorName ?? fallbackColorName;
+
   return colors.length > 0 ? (
     <FormFieldWrapper {...props} className="color-swatch-widget">
-      <div className="buttons">
-        {colors.map((color) => {
-          const colorName = color.name;
-          return (
-            <Button
-              key={id + colorName}
-              className={cx(colorName, { active: value === colorName })}
-              onPress={(e) => {
-                onChange(
-                  id,
-                  colorName === value ? props.missing_value : colorName,
-                );
-              }}
-              value={value}
-              style={color.style}
-              aria-label={color.label}
-            />
-          );
-        })}
-      </div>
+      <RadioGroup
+        aria-label={title || label || id}
+        orientation="horizontal"
+        {...radioGroupValueProps}
+        onChange={(value) => onChange(id, value)}
+        isDisabled={disabled || isDisabled}
+      >
+        {colors.map((color) => (
+          <Radio
+            aria-label={color.label}
+            value={color.name}
+            className="color-swatch-option-wrapper"
+            key={color.name}
+          >
+            <TooltipTrigger delay={120} closeDelay={80} trigger="hover">
+              <Focusable>
+                <div
+                  role="img"
+                  className={cx('color-swatch-option-handler', color.name, {
+                    active: currentColorName === color.name,
+                  })}
+                  style={color.style}
+                ></div>
+              </Focusable>
+              <Tooltip>{color.label}</Tooltip>
+            </TooltipTrigger>
+          </Radio>
+        ))}
+      </RadioGroup>
     </FormFieldWrapper>
   ) : null;
 };

package/src/components/Widgets/ThemeColorSwatch.tsx

@@ -2,16 +2,12 @@ import ColorSwatchWidget from './ColorSwatch';
 import config from '@plone/volto/registry';
 import type { ColorSwatchProps } from './ColorSwatch';
 
-const ThemeColorSwatch = (props: ColorSwatchProps) => {
-  const colors: ColorSwatchProps['colors'] = config.blocks.themes;
+const ThemeColorSwatch = (
+  props: Omit<ColorSwatchProps, 'themes' | 'colors'>,
+) => {
+  const themes: ColorSwatchProps['themes'] = config.blocks.themes;
 
-  const defaultValue = colors.find(
-    (color) => color.name === config.settings.defaultBackgroundColor,
-  )?.style;
-
-  return (
-    <ColorSwatchWidget {...props} default={defaultValue} colors={colors} />
-  );
+  return <ColorSwatchWidget {...props} themes={themes} />;
 };
 
 export default ThemeColorSwatch;

package/src/config/blocks.tsx

@@ -4,8 +4,12 @@ import type { StyleDefinition } from '@plone/types';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { composeSchema } from '@plone/volto/helpers/Extensions';
-import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
 import { defaultStylingSchema } from '../components/Blocks/schema';
+import {
+  blockThemesEnhancer,
+  styleDefinitionsEnhancer,
+} from '../helpers/styleDefinitions';
+
 import {
   gridTeaserDisableStylingSchema,
   teaserSchemaEnhancer,
@@ -40,7 +44,6 @@ import { tocBlockSchemaEnhancer } from '../components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from '../components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from '../components/Blocks/Slider/schema';
 import EventMetadataView from '../components/Blocks/EventMetadata/View';
-import isEmpty from 'lodash/isEmpty';
 
 import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/SearchBlockView';
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
@@ -142,38 +145,18 @@ export default function install(config: ConfigType) {
     },
   ];
 
-  function blockThemesEnhancer({ data, container }) {
-    if (!data['@type']) return {};
-    const blockConfig = config.blocks.blocksConfig[data['@type']];
-    if (!blockConfig) return {};
-    const blockStyleDefinitions =
-      // We look up for the blockThemes in the block's config, then in the global config
-      // We keep `colors` for BBB, but `themes` should be used
-      blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
-
-    if (
-      !isEmpty(container) &&
-      container.theme &&
-      (!data.theme || data.theme === 'default')
-    ) {
-      return findStyleByName(blockStyleDefinitions, container.theme);
-    }
-    if (data.theme) {
-      return data.theme
-        ? findStyleByName(blockStyleDefinitions, data.theme)
-        : {};
-    } else {
-      // No theme, return default color
-      return findStyleByName(config.blocks.themes, 'default');
-    }
-  }
-
   config.registerUtility({
     name: 'blockThemesEnhancer',
     type: 'styleWrapperStyleObjectEnhancer',
     method: blockThemesEnhancer,
   });
 
+  config.registerUtility({
+    name: 'styleDefinitionsEnhancer',
+    type: 'styleWrapperStyleObjectEnhancer',
+    method: styleDefinitionsEnhancer,
+  });
+
   // No required blocks except eventMetadata
   config.blocks.requiredBlocks = [
     ...config.blocks.requiredBlocks,

package/src/config/widgets.ts

@@ -1,8 +1,5 @@
 import type { ConfigType } from '@plone/registry';
-import BlockWidth from '../components/Widgets/BlockWidth';
-import BlockAlignment from '../components/Widgets/BlockAlignment';
 import ColorSwatch from '../components/Widgets/ColorSwatch';
-import Size from '../components/Widgets/Size';
 import ColorPicker from '../components/Widgets/ColorPicker';
 import ThemeColorSwatch from '../components/Widgets/ThemeColorSwatch';
 // import BlocksObject from '../components/Widgets/BlocksObject';
@@ -12,7 +9,6 @@ import { footerLogosSchema } from '../components/Widgets/schema/footerLogosSchem
 import { footerLinksSchema } from '../components/Widgets/schema/footerLinksSchema';
 import { iconLinkListSchema } from '../components/Widgets/schema/iconLinkListSchema';
 import ModalJSONEditor from '../components/Widgets/ModalJSONEditor';
-import AlignWidget from '../components/Widgets/AlignWidget';
 
 export default function install(config: ConfigType) {
   // Color picker widget override - use our own non-semanticUI widget
@@ -20,20 +16,16 @@ export default function install(config: ConfigType) {
   // `color_picker` is a terrible name for this widget, it should be `colorSwatch`
   // ToDo: Rename it in Volto 19
   config.widgets.widget.color_picker = ColorSwatch;
+  config.widgets.widget.colorSwatch = ColorSwatch;
 
   // ObjectList widget override - use our own non-semanticUI widget
   // it uses also dnd-kit for drag and drop
   config.widgets.widget.object_list = ObjectList;
 
-  config.widgets.widget.align = AlignWidget;
-
   // Force Preview image link widget to the image widget
   config.widgets.id.preview_image_link = config.widgets.widget.image;
 
-  config.widgets.widget.blockWidth = BlockWidth;
-  config.widgets.widget.blockAlignment = BlockAlignment;
   config.widgets.widget.colorPicker = ColorPicker;
-  config.widgets.widget.size = Size;
   config.widgets.widget.themeColorSwatch = ThemeColorSwatch;
 
   config.widgets.widget.modalJSONEditor = ModalJSONEditor;

package/src/helpers/styleDefinitions.test.tsx

@@ -0,0 +1,30 @@
+import { styleDefinitionsEnhancer } from './styleDefinitions';
+import config from '@plone/volto/registry';
+
+describe('styleDefinitionsEnhancer', () => {
+  it('should enhance style definitions correctly', () => {
+    const data = {
+      styles: {
+        backgroundColor: 'red',
+        textColor: 'blue',
+      },
+    };
+
+    config.registerUtility({
+      type: 'styleFieldDefinition',
+      name: 'backgroundColor',
+      method: () => {
+        return [
+          { name: 'red', label: 'Red', style: { '--bg-color': 'red' } },
+          { name: 'green', label: 'Green', style: { '--bg-color': 'green' } },
+        ];
+      },
+    });
+
+    const container = {};
+
+    const result = styleDefinitionsEnhancer({ data, container });
+
+    expect(result).toEqual({ '--bg-color': 'red' });
+  });
+});

package/src/helpers/styleDefinitions.ts

@@ -0,0 +1,49 @@
+import config from '@plone/volto/registry';
+import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
+import isEmpty from 'lodash/isEmpty';
+
+export function blockThemesEnhancer({ data, container }) {
+  if (!data['@type']) return {};
+  const blockConfig = config.blocks.blocksConfig[data['@type']];
+  if (!blockConfig) return {};
+  const blockStyleDefinitions =
+    // We look up for the blockThemes in the block's config, then in the global config
+    // We keep `colors` for BBB, but `themes` should be used
+    blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
+
+  if (
+    !isEmpty(container) &&
+    container.theme &&
+    (!data.theme || data.theme === 'default')
+  ) {
+    return findStyleByName(blockStyleDefinitions, container.theme);
+  }
+  if (data.theme) {
+    return data.theme ? findStyleByName(blockStyleDefinitions, data.theme) : {};
+  } else {
+    // No theme, return default color
+    return findStyleByName(config.blocks.themes, 'default');
+  }
+}
+
+export function styleDefinitionsEnhancer({ data, container }) {
+  let resultantStyles = {};
+  Object.keys(data.styles || {}).forEach((fieldName) => {
+    const styleFieldEnhancer = config.getUtility({
+      type: 'styleFieldDefinition',
+      name: fieldName,
+    });
+
+    if (styleFieldEnhancer.method) {
+      resultantStyles = {
+        ...resultantStyles,
+        ...findStyleByName(
+          styleFieldEnhancer.method({ data, container }),
+          data.styles[fieldName],
+        ),
+      };
+    }
+  });
+
+  return resultantStyles;
+}

package/src/theme/_widgets.scss

@@ -89,20 +89,18 @@ span.color-contrast-label {
 }
 
 .color-swatch-widget {
-  .buttons {
-    flex: 1 1 100%;
-    margin: 1rem 0 0.5rem;
-    text-align: center;
+  .react-aria-RadioGroup {
+    gap: 5px;
   }
 
-  button {
+  .color-swatch-option-handler {
     position: relative;
     width: 32px;
     height: 32px;
     padding: 1rem;
     border: 2px solid #ccc;
     border-radius: 100%;
-    margin-right: 0.25rem;
+    cursor: pointer;
 
     &.active {
       border: 2px solid red;
@@ -121,18 +119,9 @@ span.color-contrast-label {
   }
 }
 
-.color-swatch-widget button {
-  background-color: var(--theme-color);
-}
-
-.color-swatch-widget .button.grey,
-.color-swatch-widget .button.grey.active,
-.color-swatch-widget .ui.grey.button:hover {
-  background-color: var(--theme-color);
-}
-.color-swatch-widget .button.active,
-.color-swatch-widget .button.active:hover {
+.color-swatch-widget .color-swatch-option-handler {
   background-color: var(--theme-color);
+  color: var(--theme-foreground-color);
 }
 
 .buttons-widget-option {

package/src/theme/sticky-menu.scss

@@ -21,7 +21,9 @@ body.cms-ui .sticky-menu {
     flex-direction: column;
     padding: 0;
     margin: 0;
+    gap: 1px;
     list-style: none;
+    text-align: center;
 
     li a {
       display: flex;
@@ -34,24 +36,24 @@ body.cms-ui .sticky-menu {
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 180% */
+      line-height: 12px;
       text-transform: capitalize;
     }
 
     li {
       display: flex;
-      height: 93px;
+      min-height: 97px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      margin-bottom: 2px;
+      padding: 5px 10px;
       background: var(--sticky-menu-color, #555);
       color: var(--sticky-menu-foreground-color, #fff);
       font-family: Inter;
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 180% */
+      line-height: 12px;
       text-transform: capitalize;
     }
 

package/src/components/Widgets/AlignWidget.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-import type { IntlShape } from 'react-intl';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-  narrow: {
-    id: 'Narrow',
-    defaultMessage: 'Narrow',
-  },
-  wide: {
-    id: 'Wide',
-    defaultMessage: 'Wide',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  wide: [imageWideSVG, intl.formatMessage(messages.wide)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-});
-
-type AlignWidgetProps = ButtonsWidgetProps & {
-  defaultAction?: string;
-};
-
-const AlignWidget = (props: AlignWidgetProps) => {
-  const intl = useIntl();
-
-  const {
-    actions = ['left', 'center', 'right', 'full'],
-    actionsInfoMap,
-    default: defaultValue,
-    defaultAction,
-  } = props;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={actions}
-      actionsInfoMap={actionsInfo}
-      default={defaultValue ?? defaultAction ?? 'center'}
-    />
-  );
-};
-
-export default AlignWidget;

package/src/components/Widgets/BlockAlignment.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-import type { IntlShape } from 'react-intl';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    style: {
-      '--block-alignment': 'var(--align-left)',
-    },
-    name: 'left',
-    label: 'Left',
-  },
-  {
-    style: {
-      '--block-alignment': 'var(--align-center)',
-    },
-    name: 'center',
-    label: 'Center',
-  },
-  {
-    style: {
-      '--block-alignment': 'var(--align-right)',
-    },
-    name: 'right',
-    label: 'Right',
-  },
-];
-
-const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default BlockAlignmentWidget;

package/src/components/Widgets/BlockWidth.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import type { IntlShape } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  narrow: {
-    id: 'Narrow',
-    defaultMessage: 'Narrow',
-  },
-  default: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  layout: {
-    id: 'Layout',
-    defaultMessage: 'Layout',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  default: [imageFitSVG, intl.formatMessage(messages.default)],
-  layout: [imageWideSVG, intl.formatMessage(messages.layout)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    style: {
-      '--block-width': 'var(--narrow-container-width)',
-    },
-    name: 'narrow',
-    label: 'Narrow',
-  },
-  {
-    style: {
-      '--block-width': 'var(--default-container-width)',
-    },
-    name: 'default',
-    label: 'Default',
-  },
-  {
-    style: {
-      '--block-width': 'var(--layout-container-width)',
-    },
-    name: 'layout',
-    label: 'Layout',
-  },
-  {
-    style: {
-      '--block-width': 'unset',
-    },
-    name: 'full',
-    label: 'Full',
-  },
-];
-
-const BlockWidthWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default BlockWidthWidget;

package/src/components/Widgets/Buttons.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { RadioGroup } from '@plone/components';
-import { Radio } from 'react-aria-components';
-import isEqual from 'lodash/isEqual';
-import type { StyleDefinition } from '@plone/types';
-
-/**
- * A tuple that has an icon in the first element and a i18n string in the second.
- */
-export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
-
-type ActionValue = string | Record<`--${string}`, string>;
-
-export type ButtonsWidgetProps = {
-  /**
-   * Unique identifier for the widget.
-   */
-  id: string;
-
-  /**
-   * Callback function to handle changes.
-   */
-  onChange: (id: string, value: ActionValue) => void;
-
-  /**
-   * List of actions available for the widget.
-   */
-  actions?: Array<StyleDefinition | string>;
-
-  /**
-   * Map containing additional the information (icon and i18n string) for each action.
-   */
-  actionsInfoMap?: Record<string, ActionInfo>;
-
-  /**
-   * List of actions to be filtered out. In case that we don't want the default ones
-   * we can filter them out.
-   */
-  filterActions?: string[];
-
-  /**
-   * Current value of the widget.
-   */
-  value?: ActionValue;
-
-  /**
-   * Default value of the widget.
-   */
-  default?: ActionValue;
-
-  /**
-   * Indicates if the widget is disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicates if the widget is disabled (alternative flag for compatibility reasons).
-   */
-  isDisabled?: boolean;
-  [key: string]: any;
-};
-
-type NormalizedAction = {
-  name: string;
-  value: ActionValue;
-};
-
-const ButtonsWidget = (props: ButtonsWidgetProps) => {
-  const {
-    disabled,
-    id,
-    onChange,
-    actions = [],
-    actionsInfoMap,
-    value,
-    isDisabled,
-    default: defaultValue,
-  } = props;
-  const normalizedActions = React.useMemo<NormalizedAction[]>(
-    () =>
-      actions.map((action) =>
-        typeof action === 'string'
-          ? { name: action, value: action }
-          : {
-              name: action.name,
-              value: action.style ?? action.name,
-            },
-      ),
-    [actions],
-  );
-
-  const selectedActionName = React.useMemo(
-    () =>
-      normalizedActions.find((action) => isEqual(value, action.value))?.name,
-    [normalizedActions, value],
-  );
-
-  const handleChange = React.useCallback(
-    (selectedName: string) => {
-      const selectedAction = normalizedActions.find(
-        ({ name }) => name === selectedName,
-      );
-
-      if (selectedAction) {
-        onChange(id, selectedAction.value);
-      }
-    },
-    [id, normalizedActions, onChange],
-  );
-
-  React.useEffect(() => {
-    if (!value && defaultValue) {
-      const nextValue =
-        typeof defaultValue === 'string'
-          ? normalizedActions.find(({ name }) => name === defaultValue)
-              ?.value ?? defaultValue
-          : defaultValue;
-
-      onChange(id, nextValue);
-    }
-  }, [defaultValue, id, normalizedActions, onChange, value]);
-
-  return (
-    <FormFieldWrapper {...props} className="widget">
-      <RadioGroup
-        aria-label={props.title || props.label || id}
-        orientation="horizontal"
-        value={selectedActionName}
-        onChange={handleChange}
-        isDisabled={disabled || isDisabled}
-        className="buttons buttons-widget"
-      >
-        {normalizedActions.map((action) => {
-          const actionInfo = actionsInfoMap?.[action.name];
-          const [iconOrText, ariaLabel] = actionInfo ?? [
-            action.name,
-            action.name,
-          ];
-
-          return (
-            <Radio
-              key={action.name}
-              aria-label={ariaLabel}
-              value={action.name}
-              className="buttons-widget-option"
-            >
-              {typeof iconOrText === 'string' ? (
-                <div className="image-sizes-text">{iconOrText}</div>
-              ) : (
-                <Icon
-                  name={iconOrText}
-                  title={ariaLabel || action.name}
-                  size="24px"
-                  ariaHidden={true}
-                />
-              )}
-            </Radio>
-          );
-        })}
-      </RadioGroup>
-    </FormFieldWrapper>
-  );
-};
-
-export default ButtonsWidget;

package/src/components/Widgets/Size.tsx

@@ -1,78 +0,0 @@
-import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, {
-  type ActionInfo,
-  type ButtonsWidgetProps,
-} from './Buttons';
-import type { IntlShape } from 'react-intl';
-import type { StyleDefinition } from '@plone/types';
-
-const messages = defineMessages({
-  s: {
-    id: 'Small',
-    defaultMessage: 'Small',
-  },
-  m: {
-    id: 'Medium',
-    defaultMessage: 'Medium',
-  },
-  l: {
-    id: 'Large',
-    defaultMessage: 'Large',
-  },
-});
-
-export const defaultActionsInfo = ({
-  intl,
-}: {
-  intl: IntlShape;
-}): Record<string, ActionInfo> => ({
-  s: ['S', intl.formatMessage(messages.s)],
-  m: ['M', intl.formatMessage(messages.m)],
-  l: ['L', intl.formatMessage(messages.l)],
-});
-
-const DEFAULT_ACTIONS: StyleDefinition[] = [
-  {
-    name: 's',
-    label: 'Small',
-    style: undefined,
-  },
-  {
-    name: 'm',
-    label: 'Medium',
-    style: undefined,
-  },
-  {
-    name: 'l',
-    label: 'Large',
-    style: undefined,
-  },
-];
-
-const SizeWidget = (props: ButtonsWidgetProps) => {
-  const intl = useIntl();
-
-  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
-  const filteredActions =
-    filterActions && filterActions.length > 0
-      ? actions.filter((action) => {
-          const actionName = typeof action === 'string' ? action : action.name;
-          return filterActions.includes(actionName);
-        })
-      : actions;
-
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <ButtonsWidget
-      {...props}
-      actions={filteredActions}
-      actionsInfoMap={actionsInfo}
-    />
-  );
-};
-
-export default SizeWidget;