@kitconcept/volto-light-theme 6.0.0-alpha.17 → 6.0.0-alpha.18

package/.changelog.draft

@@ -1,35 +1,12 @@
-## 6.0.0-alpha.17 (2025-03-20)
-
-### Breaking
-
-- Renamed widget: `ThemeColorPicker` -> `ColorPicker`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
-- Renamed widget: `BackgroundColorWidget` -> `themeColorSwatch`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
-- Renamed widget: `sizeWidget` -> `size`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
+## 6.0.0-alpha.18 (2025-03-21)
 
 ### Feature
 
-- New widget: `colorPicker`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
-- New widget: `themeColorSwatch`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
-- Add `@kitconcept/volto-banner-block` to the recommended VLT add-ons. @sneridagh [#487](https://github.com/kitconcept/volto-light-theme/pull/487)
-- New widget: `object_list`. @sneridagh [#491](https://github.com/kitconcept/volto-light-theme/pull/491)
-- Use the `@inherit` endpoint. @sneridagh [#494](https://github.com/kitconcept/volto-light-theme/pull/494)
-- Update volto-highlight-block to 4.1.0 @sneridagh [#498](https://github.com/kitconcept/volto-light-theme/pull/498)
+- Add Color Contrast Checker component @danalvrz [#463](https://github.com/kitconcept/volto-light-theme/pull/463)
+- Add docs for ColorContrastChecker. @danalvrz [#507](https://github.com/kitconcept/volto-light-theme/pull/507)
 
 ### Bugfix
 
-- Remove title attribute from the logo. @davisagli [#336](https://github.com/kitconcept/volto-light-theme/pull/336)
-- Color fixes for description, links and buttons for Slider & Highlight blocks. @danalvrz [#476](https://github.com/kitconcept/volto-light-theme/pull/476)
-- Fixed nested blocks theme: when the theme is not set, inherit from parent instead of getting the default one for the current nested block. @sneridagh [#489](https://github.com/kitconcept/volto-light-theme/pull/489)
-- Fix workflow: acceptance always runs, even if one of the dependencies are skipped. @sneridagh [#492](https://github.com/kitconcept/volto-light-theme/pull/492)
-- Add actions to header + Fix hydration problem in /edit + Sitemap container. @sneridagh [#492](https://github.com/kitconcept/volto-light-theme/pull/492)
-- Specify desktop flex direction starting at 768px screen width. @danalvrz [#496](https://github.com/kitconcept/volto-light-theme/pull/496)
-
-### Internal
-
-- Added deployment workflow. @ericof [#495](https://github.com/kitconcept/volto-light-theme/pull/495)
-
-### Documentation
-
-- Update requirements for plone.restapi in docs. @sneridagh [#498](https://github.com/kitconcept/volto-light-theme/pull/498)
+- Make the `footer_links` and `footer_logos` loops more resilient. @sneridagh [#508](https://github.com/kitconcept/volto-light-theme/pull/508)
 
 

package/CHANGELOG.md

@@ -8,6 +8,17 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.18 (2025-03-21)
+
+### Feature
+
+- Add Color Contrast Checker component @danalvrz [#463](https://github.com/kitconcept/volto-light-theme/pull/463)
+- Add docs for ColorContrastChecker. @danalvrz [#507](https://github.com/kitconcept/volto-light-theme/pull/507)
+
+### Bugfix
+
+- Make the `footer_links` and `footer_logos` loops more resilient. @sneridagh [#508](https://github.com/kitconcept/volto-light-theme/pull/508)
+
 ## 6.0.0-alpha.17 (2025-03-20)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.17",
+  "version": "6.0.0-alpha.18",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Footer/FooterLinks.tsx

@@ -10,7 +10,7 @@ const FooterLinks = (props: FooterLinksProps) => {
 
   return (
     <ul className="footer-links">
-      {!isEmpty(links)
+      {links && Array.isArray(links)
         ? links.map((link) => {
             if (isEmpty(link) || !link.href) return null;
 

package/src/components/Footer/FooterLogos.tsx

@@ -1,5 +1,4 @@
 import type { Content } from '@plone/types';
-import isEmpty from 'lodash/isEmpty';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { useSelector } from 'react-redux';
@@ -39,7 +38,7 @@ const FooterLogos = () => {
           [logosSize]: logosSize,
         })}
       >
-        {!isEmpty(logos)
+        {logos && Array.isArray(logos)
           ? logos.map((logo) => {
               const logoInfo: {
                 hrefTitle: string;

package/src/components/Header/Header.jsx

@@ -114,6 +114,7 @@ const IntranetHeader = ({ pathname, siteLabel, token }) => {
           <div className="tools">
             {!token && <Anontools />}
             {headerActions &&
+              Array.isArray(headerActions) &&
               headerActions.map((item) => (
                 <UniversalLink key={item['@id']} href={item.href?.[0]['@id']}>
                   {item.title}

package/src/components/Widgets/ColorContrastChecker.tsx

@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import type { Content } from '@plone/types';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  form: {
+    global: Content;
+  };
+};
+
+const ColorContrastChecker = (props: { id: string; value: string }) => {
+  const { id, value } = props;
+  const [ligtherColor, setLigtherColor] = useState('#ffffff');
+  const [darkerColor, setDarkerColor] = useState('#000000');
+  const [contrastRatio, setContrastRatio] = useState(21);
+
+  const formData = useSelector<FormState, Content>(
+    (state) => state.form.global,
+  );
+  const colorMap = config.settings.colorMap;
+  const colorPair = colorMap[id].colorPair;
+  const colorDefault = colorMap[id].default;
+
+  // Convert hex to RGB
+  const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16),
+        }
+      : null;
+  };
+
+  // Calculate relative luminance
+  const getLuminance = (r, g, b) => {
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+      c = c / 255;
+      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  };
+
+  // Calculate contrast ratio
+  const getContrastRatio = (l1, l2) => {
+    const lighter = Math.max(l1, l2);
+    const darker = Math.min(l1, l2);
+    return (lighter + 0.05) / (darker + 0.05);
+  };
+
+  const ligtherColorObject = hexToRgb(ligtherColor);
+  const darkerColorObject = hexToRgb(darkerColor);
+
+  const lcLum = getLuminance(
+    ligtherColorObject?.r,
+    ligtherColorObject?.g,
+    ligtherColorObject?.b,
+  );
+  const dcLum = getLuminance(
+    darkerColorObject?.r,
+    darkerColorObject?.g,
+    darkerColorObject?.b,
+  );
+
+  const ratio = getContrastRatio(lcLum, dcLum);
+
+  useEffect(() => {
+    setDarkerColor(value ?? colorDefault);
+    setLigtherColor(formData[colorPair] ?? colorMap[colorPair].default);
+    setContrastRatio(ratio);
+  }, [ratio, value, formData, colorDefault, colorPair, colorMap]);
+
+  // Get WCAG compliance levels
+  const getComplianceLevel = (ratio) => {
+    if (ratio >= 3) return 'AA Large';
+    return 'Failed';
+  };
+
+  return (
+    <>
+      {formData[id] && contrastRatio < 4.5 && (
+        <span
+          className={cx('color-contrast-label')}
+          role="alert"
+          aria-live="polite"
+        >
+          The color contrast ratio ({contrastRatio.toFixed(2)}:1) might not be
+          accesible for all. WCAG Level: {getComplianceLevel(contrastRatio)}
+          <a
+            target="_blank"
+            href="https://webaim.org/articles/contrast/"
+            rel="noreferrer"
+          >
+            &#x3F;
+          </a>
+        </span>
+      )}
+    </>
+  );
+};
+
+export default ColorContrastChecker;

package/src/components/Widgets/ColorPicker.tsx

@@ -2,6 +2,7 @@ import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWr
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
 import { ColorSwatch, CloseIcon } from '@plone/components';
+import ColorContrastChecker from './ColorContrastChecker';
 
 const ColorPicker = (props: {
   id: string;
@@ -12,40 +13,43 @@ const ColorPicker = (props: {
   const { id, onChange, value } = props;
 
   return (
-    <FormFieldWrapper {...props} className="theme-color-picker">
-      <DialogTrigger>
-        <Button className="theme-color-picker-button">
-          <ColorSwatch color={value || '#fff'} />
-        </Button>
+    <>
+      <FormFieldWrapper {...props} className="theme-color-picker">
+        <DialogTrigger>
+          <Button className="theme-color-picker-button">
+            <ColorSwatch color={value || '#fff'} />
+          </Button>
 
-        <Popover placement="bottom start">
-          <Dialog className="theme-color-picker-dialog">
-            <HexColorPicker
-              color={value || ''}
-              onChange={(value) => {
-                // edge case for Batman value
-                if (value !== '#NaNNaNNaN') {
-                  onChange(id, value);
-                }
-              }}
-            />
-          </Dialog>
-        </Popover>
-      </DialogTrigger>
-      <HexColorInput
-        color={value || ''}
-        onChange={(value) => onChange(id, value)}
-        prefixed
-      />
-      <Button
-        className="theme-color-picker-reset react-aria-Button"
-        onPress={() => {
-          onChange(id, '');
-        }}
-      >
-        <CloseIcon size="S" />
-      </Button>
-    </FormFieldWrapper>
+          <Popover placement="bottom start">
+            <Dialog className="theme-color-picker-dialog">
+              <HexColorPicker
+                color={value || ''}
+                onChange={(value) => {
+                  // edge case for Batman value
+                  if (value !== '#NaNNaNNaN') {
+                    onChange(id, value);
+                  }
+                }}
+              />
+            </Dialog>
+          </Popover>
+        </DialogTrigger>
+        <HexColorInput
+          color={value || ''}
+          onChange={(value) => onChange(id, value)}
+          prefixed
+        />
+        <Button
+          className="theme-color-picker-reset react-aria-Button"
+          onPress={() => {
+            onChange(id, '');
+          }}
+        >
+          <CloseIcon size="S" />
+        </Button>
+      </FormFieldWrapper>
+      <ColorContrastChecker {...props} />
+    </>
   );
 };
 

package/src/config/settings.ts

@@ -34,5 +34,26 @@ export default function install(config: ConfigType) {
     },
   ];
 
+  config.settings.colorMap = {
+    primary_color: {
+      colorPair: 'primary_foreground_color',
+      default: '#ffffff',
+    },
+    primary_foreground_color: {
+      colorPair: 'primary_color',
+      default: '#000000',
+    },
+    secondary_color: {
+      colorPair: 'secondary_foreground_color',
+      default: '#ecebeb',
+    },
+    secondary_foreground_color: {
+      colorPair: 'secondary_color',
+      default: '#000000',
+    },
+    accent_color: { colorPair: 'accent_foreground_color', default: '#ecebeb' },
+    accent_foreground_color: { colorPair: 'accent_color', default: '#ffffff' },
+  };
+
   return config;
 }

package/src/theme/_widgets.scss

@@ -60,6 +60,24 @@
   }
 }
 
+span.color-contrast-label {
+  position: relative;
+  display: block;
+  padding-left: 20%;
+  color: #ed6500;
+  font-size: 13px;
+  a {
+    padding: 0.1rem 0.25rem;
+    border: 1px solid var(--link-foreground-color);
+    border-radius: 100%;
+    margin: 0;
+    margin-left: 4px;
+    margin-left: 4px;
+    font-size: 0.4rem;
+    vertical-align: super;
+  }
+}
+
 .react-aria-ColorSwatch {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
 }