From 29abe8a5c6f8038b2d014ad1c391b14ac2fa5af5 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Dec 2024 12:05:59 +0100
Subject: [PATCH 1/4] Fix precedence of the quanta layer by adding a base layer
 for all the basic components. Added a setting in config object for setting
 the site's CSS layers.

---
 packages/components/src/styles/basic/BlockToolbar.css      | 2 +-
 packages/components/src/styles/basic/Breadcrumbs.css       | 2 +-
 packages/components/src/styles/basic/Button.css            | 2 +-
 packages/components/src/styles/basic/Calendar.css          | 2 +-
 packages/components/src/styles/basic/Checkbox.css          | 2 +-
 packages/components/src/styles/basic/CheckboxGroup.css     | 2 +-
 packages/components/src/styles/basic/ColorArea.css         | 2 +-
 packages/components/src/styles/basic/ColorField.css        | 2 +-
 packages/components/src/styles/basic/ColorPicker.css       | 2 +-
 packages/components/src/styles/basic/ColorSlider.css       | 2 +-
 packages/components/src/styles/basic/ColorSwatch.css       | 2 +-
 packages/components/src/styles/basic/ColorSwatchPicker.css | 2 +-
 packages/components/src/styles/basic/ColorWheel.css        | 2 +-
 packages/components/src/styles/basic/ComboBox.css          | 2 +-
 packages/components/src/styles/basic/Container.css         | 2 +-
 packages/components/src/styles/basic/DateField.css         | 2 +-
 packages/components/src/styles/basic/DatePicker.css        | 2 +-
 packages/components/src/styles/basic/DateRangePicker.css   | 2 +-
 packages/components/src/styles/basic/Dialog.css            | 2 +-
 packages/components/src/styles/basic/Disclosure.css        | 2 +-
 packages/components/src/styles/basic/Form.css              | 2 +-
 packages/components/src/styles/basic/GridList.css          | 2 +-
 packages/components/src/styles/basic/Label.css             | 2 +-
 packages/components/src/styles/basic/Link.css              | 2 +-
 packages/components/src/styles/basic/ListBox.css           | 2 +-
 packages/components/src/styles/basic/Menu.css              | 2 +-
 packages/components/src/styles/basic/Meter.css             | 2 +-
 packages/components/src/styles/basic/Modal.css             | 2 +-
 packages/components/src/styles/basic/NumberField.css       | 2 +-
 packages/components/src/styles/basic/Popover.css           | 2 +-
 packages/components/src/styles/basic/ProgressBar.css       | 2 +-
 packages/components/src/styles/basic/RadioGroup.css        | 2 +-
 packages/components/src/styles/basic/RangeCalendar.css     | 2 +-
 packages/components/src/styles/basic/SearchField.css       | 2 +-
 packages/components/src/styles/basic/Select.css            | 2 +-
 packages/components/src/styles/basic/Slider.css            | 2 +-
 packages/components/src/styles/basic/Switch.css            | 2 +-
 packages/components/src/styles/basic/Table.css             | 2 +-
 packages/components/src/styles/basic/Tabs.css              | 2 +-
 packages/components/src/styles/basic/TagGroup.css          | 2 +-
 packages/components/src/styles/basic/TextField.css         | 2 +-
 packages/components/src/styles/basic/TimeField.css         | 2 +-
 packages/components/src/styles/basic/ToggleButton.css      | 2 +-
 packages/components/src/styles/basic/Toolbar.css           | 2 +-
 packages/components/src/styles/basic/Tooltip.css           | 2 +-
 packages/components/src/styles/basic/icons.css             | 2 +-
 packages/types/src/config/Settings.d.ts                    | 1 +
 packages/volto/src/helpers/Html/Html.jsx                   | 6 ++++++
 48 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/styles/basic/BlockToolbar.css b/packages/components/src/styles/basic/BlockToolbar.css
index 19c101a290..1799ce9bb0 100644
--- a/packages/components/src/styles/basic/BlockToolbar.css
+++ b/packages/components/src/styles/basic/BlockToolbar.css
@@ -4,7 +4,7 @@
 @import './Menu.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .blocks-toolbar {
     display: flex;
     flex-wrap: wrap;
diff --git a/packages/components/src/styles/basic/Breadcrumbs.css b/packages/components/src/styles/basic/Breadcrumbs.css
index 0aaa86cac1..d6d5a8e83c 100644
--- a/packages/components/src/styles/basic/Breadcrumbs.css
+++ b/packages/components/src/styles/basic/Breadcrumbs.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Breadcrumbs {
     display: flex;
     align-items: center;
diff --git a/packages/components/src/styles/basic/Button.css b/packages/components/src/styles/basic/Button.css
index c6849f7fb4..d4e79025e3 100644
--- a/packages/components/src/styles/basic/Button.css
+++ b/packages/components/src/styles/basic/Button.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Button {
     padding: 8px 8px;
     border: 1px solid var(--border-color);
diff --git a/packages/components/src/styles/basic/Calendar.css b/packages/components/src/styles/basic/Calendar.css
index ec81b10c4d..0c16b5071c 100644
--- a/packages/components/src/styles/basic/Calendar.css
+++ b/packages/components/src/styles/basic/Calendar.css
@@ -1,7 +1,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Calendar {
     width: fit-content;
     max-width: 100%;
diff --git a/packages/components/src/styles/basic/Checkbox.css b/packages/components/src/styles/basic/Checkbox.css
index 46f856ac1d..7ca3ed1197 100644
--- a/packages/components/src/styles/basic/Checkbox.css
+++ b/packages/components/src/styles/basic/Checkbox.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Checkbox {
     --selected-color: var(--highlight-background);
     --selected-color-pressed: var(--highlight-background-pressed);
diff --git a/packages/components/src/styles/basic/CheckboxGroup.css b/packages/components/src/styles/basic/CheckboxGroup.css
index 1939115950..ca543fcb41 100644
--- a/packages/components/src/styles/basic/CheckboxGroup.css
+++ b/packages/components/src/styles/basic/CheckboxGroup.css
@@ -3,7 +3,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-CheckboxGroup {
     display: flex;
     flex-direction: column;
diff --git a/packages/components/src/styles/basic/ColorArea.css b/packages/components/src/styles/basic/ColorArea.css
index e5a81b7512..fa49256001 100644
--- a/packages/components/src/styles/basic/ColorArea.css
+++ b/packages/components/src/styles/basic/ColorArea.css
@@ -1,6 +1,6 @@
 @import './ColorSlider.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorArea {
     width: 192px;
     height: 192px;
diff --git a/packages/components/src/styles/basic/ColorField.css b/packages/components/src/styles/basic/ColorField.css
index 41442cbbe8..d09a7709f5 100644
--- a/packages/components/src/styles/basic/ColorField.css
+++ b/packages/components/src/styles/basic/ColorField.css
@@ -2,7 +2,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorField {
     display: flex;
     flex-direction: column;
diff --git a/packages/components/src/styles/basic/ColorPicker.css b/packages/components/src/styles/basic/ColorPicker.css
index 9bfd25e9cb..344565fdbf 100644
--- a/packages/components/src/styles/basic/ColorPicker.css
+++ b/packages/components/src/styles/basic/ColorPicker.css
@@ -10,7 +10,7 @@
 @import './Select.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .color-picker {
     display: flex;
     align-items: center;
diff --git a/packages/components/src/styles/basic/ColorSlider.css b/packages/components/src/styles/basic/ColorSlider.css
index f61f4b0d5e..cd54265e3a 100644
--- a/packages/components/src/styles/basic/ColorSlider.css
+++ b/packages/components/src/styles/basic/ColorSlider.css
@@ -1,4 +1,4 @@
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorSlider {
     display: grid;
     max-width: 300px;
diff --git a/packages/components/src/styles/basic/ColorSwatch.css b/packages/components/src/styles/basic/ColorSwatch.css
index f617ec5341..f8127e8756 100644
--- a/packages/components/src/styles/basic/ColorSwatch.css
+++ b/packages/components/src/styles/basic/ColorSwatch.css
@@ -1,6 +1,6 @@
 @import './ColorSlider.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorSwatch {
     width: 32px;
     height: 32px;
diff --git a/packages/components/src/styles/basic/ColorSwatchPicker.css b/packages/components/src/styles/basic/ColorSwatchPicker.css
index 5a82e24a96..c91c37180a 100644
--- a/packages/components/src/styles/basic/ColorSwatchPicker.css
+++ b/packages/components/src/styles/basic/ColorSwatchPicker.css
@@ -2,7 +2,7 @@
 @import './ColorField.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorSwatchPicker {
     display: flex;
     flex-wrap: wrap;
diff --git a/packages/components/src/styles/basic/ColorWheel.css b/packages/components/src/styles/basic/ColorWheel.css
index c7a953896d..fcff769737 100644
--- a/packages/components/src/styles/basic/ColorWheel.css
+++ b/packages/components/src/styles/basic/ColorWheel.css
@@ -1,4 +1,4 @@
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorThumb {
     width: 20px;
     height: 20px;
diff --git a/packages/components/src/styles/basic/ComboBox.css b/packages/components/src/styles/basic/ComboBox.css
index fc597eb7ee..f3a2d64b7d 100644
--- a/packages/components/src/styles/basic/ComboBox.css
+++ b/packages/components/src/styles/basic/ComboBox.css
@@ -5,7 +5,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ComboBox {
     color: var(--text-color);
 
diff --git a/packages/components/src/styles/basic/Container.css b/packages/components/src/styles/basic/Container.css
index f7448a20b2..da97f93bf3 100644
--- a/packages/components/src/styles/basic/Container.css
+++ b/packages/components/src/styles/basic/Container.css
@@ -1,4 +1,4 @@
-@layer plone-components {
+@layer plone-components.base {
   .q.container {
     container-type: inline-size;
 
diff --git a/packages/components/src/styles/basic/DateField.css b/packages/components/src/styles/basic/DateField.css
index d0220e4999..7eca458b11 100644
--- a/packages/components/src/styles/basic/DateField.css
+++ b/packages/components/src/styles/basic/DateField.css
@@ -2,7 +2,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-DateField {
     color: var(--text-color);
   }
diff --git a/packages/components/src/styles/basic/DatePicker.css b/packages/components/src/styles/basic/DatePicker.css
index dcfd458c83..796e0439e5 100644
--- a/packages/components/src/styles/basic/DatePicker.css
+++ b/packages/components/src/styles/basic/DatePicker.css
@@ -6,7 +6,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-DatePicker {
     color: var(--text-color);
 
diff --git a/packages/components/src/styles/basic/DateRangePicker.css b/packages/components/src/styles/basic/DateRangePicker.css
index bb44b073c1..c48d9ac33f 100644
--- a/packages/components/src/styles/basic/DateRangePicker.css
+++ b/packages/components/src/styles/basic/DateRangePicker.css
@@ -6,7 +6,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-DateRangePicker {
     color: var(--text-color);
 
diff --git a/packages/components/src/styles/basic/Dialog.css b/packages/components/src/styles/basic/Dialog.css
index 45ca2210c8..64366c4693 100644
--- a/packages/components/src/styles/basic/Dialog.css
+++ b/packages/components/src/styles/basic/Dialog.css
@@ -3,7 +3,7 @@
 @import './Modal.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Dialog {
     padding: 30px;
     outline: none;
diff --git a/packages/components/src/styles/basic/Disclosure.css b/packages/components/src/styles/basic/Disclosure.css
index 5704d093c1..cb8cb529db 100644
--- a/packages/components/src/styles/basic/Disclosure.css
+++ b/packages/components/src/styles/basic/Disclosure.css
@@ -1,7 +1,7 @@
 @import './theme.css';
 @import './Button.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Disclosure {
     .react-aria-Button[slot='trigger'] {
       display: flex;
diff --git a/packages/components/src/styles/basic/Form.css b/packages/components/src/styles/basic/Form.css
index cebcb43466..00b864fa21 100644
--- a/packages/components/src/styles/basic/Form.css
+++ b/packages/components/src/styles/basic/Form.css
@@ -2,7 +2,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Form {
     display: flex;
     flex-direction: column;
diff --git a/packages/components/src/styles/basic/GridList.css b/packages/components/src/styles/basic/GridList.css
index 22ab490bcf..91944e9b21 100644
--- a/packages/components/src/styles/basic/GridList.css
+++ b/packages/components/src/styles/basic/GridList.css
@@ -3,7 +3,7 @@
 @import './ToggleButton.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-GridList {
     display: flex;
     overflow: auto;
diff --git a/packages/components/src/styles/basic/Label.css b/packages/components/src/styles/basic/Label.css
index f3755f1ddc..1544ab27d9 100644
--- a/packages/components/src/styles/basic/Label.css
+++ b/packages/components/src/styles/basic/Label.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Label {
     /* TODO: Review since taken from default quanta */
     font-size: 0.9rem;
diff --git a/packages/components/src/styles/basic/Link.css b/packages/components/src/styles/basic/Link.css
index 8f91a261ed..08e46bddd5 100644
--- a/packages/components/src/styles/basic/Link.css
+++ b/packages/components/src/styles/basic/Link.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Link {
     position: relative;
     color: var(--link-color);
diff --git a/packages/components/src/styles/basic/ListBox.css b/packages/components/src/styles/basic/ListBox.css
index 9cec61d80a..e9a5d92adf 100644
--- a/packages/components/src/styles/basic/ListBox.css
+++ b/packages/components/src/styles/basic/ListBox.css
@@ -1,7 +1,7 @@
 @import './Checkbox.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ListBox {
     display: flex;
     overflow: auto;
diff --git a/packages/components/src/styles/basic/Menu.css b/packages/components/src/styles/basic/Menu.css
index 594f7b7ea1..dbf9370209 100644
--- a/packages/components/src/styles/basic/Menu.css
+++ b/packages/components/src/styles/basic/Menu.css
@@ -2,7 +2,7 @@
 @import './Popover.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Menu {
     overflow: auto;
     min-width: 150px;
diff --git a/packages/components/src/styles/basic/Meter.css b/packages/components/src/styles/basic/Meter.css
index 2ab6709510..2947240afe 100644
--- a/packages/components/src/styles/basic/Meter.css
+++ b/packages/components/src/styles/basic/Meter.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Meter {
     --fill-color: forestgreen;
 
diff --git a/packages/components/src/styles/basic/Modal.css b/packages/components/src/styles/basic/Modal.css
index 544e1c224d..b1c90d8578 100644
--- a/packages/components/src/styles/basic/Modal.css
+++ b/packages/components/src/styles/basic/Modal.css
@@ -2,7 +2,7 @@
 @import './TextField.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ModalOverlay {
     position: fixed;
     z-index: 100;
diff --git a/packages/components/src/styles/basic/NumberField.css b/packages/components/src/styles/basic/NumberField.css
index a5ed24c70a..b657f6b201 100644
--- a/packages/components/src/styles/basic/NumberField.css
+++ b/packages/components/src/styles/basic/NumberField.css
@@ -2,7 +2,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-NumberField {
     margin-bottom: 8px;
     color: var(--text-color);
diff --git a/packages/components/src/styles/basic/Popover.css b/packages/components/src/styles/basic/Popover.css
index 89e8f419e5..5712ae8fcf 100644
--- a/packages/components/src/styles/basic/Popover.css
+++ b/packages/components/src/styles/basic/Popover.css
@@ -3,7 +3,7 @@
 @import './Switch.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Popover {
     --background-color: var(--overlay-background);
     max-width: 250px;
diff --git a/packages/components/src/styles/basic/ProgressBar.css b/packages/components/src/styles/basic/ProgressBar.css
index 2a171ea53b..12119e67eb 100644
--- a/packages/components/src/styles/basic/ProgressBar.css
+++ b/packages/components/src/styles/basic/ProgressBar.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ProgressBar {
     display: grid;
     width: 250px;
diff --git a/packages/components/src/styles/basic/RadioGroup.css b/packages/components/src/styles/basic/RadioGroup.css
index 2a05774dcc..07b905498d 100644
--- a/packages/components/src/styles/basic/RadioGroup.css
+++ b/packages/components/src/styles/basic/RadioGroup.css
@@ -2,7 +2,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-RadioGroup {
     display: flex;
     flex-direction: column;
diff --git a/packages/components/src/styles/basic/RangeCalendar.css b/packages/components/src/styles/basic/RangeCalendar.css
index 025c9ee54d..f409bb678b 100644
--- a/packages/components/src/styles/basic/RangeCalendar.css
+++ b/packages/components/src/styles/basic/RangeCalendar.css
@@ -1,7 +1,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-RangeCalendar {
     width: fit-content;
     max-width: 100%;
diff --git a/packages/components/src/styles/basic/SearchField.css b/packages/components/src/styles/basic/SearchField.css
index ef23082851..ccd7d27570 100644
--- a/packages/components/src/styles/basic/SearchField.css
+++ b/packages/components/src/styles/basic/SearchField.css
@@ -2,7 +2,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-SearchField {
     display: grid;
     width: fit-content;
diff --git a/packages/components/src/styles/basic/Select.css b/packages/components/src/styles/basic/Select.css
index bcffcaedf1..592796bc13 100644
--- a/packages/components/src/styles/basic/Select.css
+++ b/packages/components/src/styles/basic/Select.css
@@ -4,7 +4,7 @@
 @import './Form.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Select {
     color: var(--text-color);
 
diff --git a/packages/components/src/styles/basic/Slider.css b/packages/components/src/styles/basic/Slider.css
index 00f6a8bb76..2de1068078 100644
--- a/packages/components/src/styles/basic/Slider.css
+++ b/packages/components/src/styles/basic/Slider.css
@@ -1,7 +1,7 @@
 @import './NumberField.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Slider {
     display: grid;
     max-width: 300px;
diff --git a/packages/components/src/styles/basic/Switch.css b/packages/components/src/styles/basic/Switch.css
index 85b4e44b9f..0508d2aa29 100644
--- a/packages/components/src/styles/basic/Switch.css
+++ b/packages/components/src/styles/basic/Switch.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Switch {
     display: flex;
     align-items: center;
diff --git a/packages/components/src/styles/basic/Table.css b/packages/components/src/styles/basic/Table.css
index 5ac6d90256..6a55a242cc 100644
--- a/packages/components/src/styles/basic/Table.css
+++ b/packages/components/src/styles/basic/Table.css
@@ -5,7 +5,7 @@
 @import './Menu.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   :root {
     --plone-table-border: 0 none;
     --plone-table-border-radius: 0;
diff --git a/packages/components/src/styles/basic/Tabs.css b/packages/components/src/styles/basic/Tabs.css
index 9662ecd6a4..811168c931 100644
--- a/packages/components/src/styles/basic/Tabs.css
+++ b/packages/components/src/styles/basic/Tabs.css
@@ -2,7 +2,7 @@
 @import './Link.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Tabs {
     display: flex;
     color: var(--text-color);
diff --git a/packages/components/src/styles/basic/TagGroup.css b/packages/components/src/styles/basic/TagGroup.css
index d50abf9140..9fc9df8916 100644
--- a/packages/components/src/styles/basic/TagGroup.css
+++ b/packages/components/src/styles/basic/TagGroup.css
@@ -1,7 +1,7 @@
 @import './ToggleButton.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-TagGroup {
     display: flex;
     flex-direction: column;
diff --git a/packages/components/src/styles/basic/TextField.css b/packages/components/src/styles/basic/TextField.css
index f99b9178df..4be3b73c95 100644
--- a/packages/components/src/styles/basic/TextField.css
+++ b/packages/components/src/styles/basic/TextField.css
@@ -2,7 +2,7 @@
 @import './Label.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-TextField {
     display: flex;
     width: fit-content;
diff --git a/packages/components/src/styles/basic/TimeField.css b/packages/components/src/styles/basic/TimeField.css
index 4fb876a93b..b1ca5453e7 100644
--- a/packages/components/src/styles/basic/TimeField.css
+++ b/packages/components/src/styles/basic/TimeField.css
@@ -2,7 +2,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-TimeField {
     color: var(--text-color);
   }
diff --git a/packages/components/src/styles/basic/ToggleButton.css b/packages/components/src/styles/basic/ToggleButton.css
index 6e7ad2bb39..50dd494b1a 100644
--- a/packages/components/src/styles/basic/ToggleButton.css
+++ b/packages/components/src/styles/basic/ToggleButton.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ToggleButton {
     padding: 8px 8px;
     border: 1px solid var(--border-color);
diff --git a/packages/components/src/styles/basic/Toolbar.css b/packages/components/src/styles/basic/Toolbar.css
index 306f570fc7..07b03e84a9 100644
--- a/packages/components/src/styles/basic/Toolbar.css
+++ b/packages/components/src/styles/basic/Toolbar.css
@@ -4,7 +4,7 @@
 @import './Menu.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Toolbar {
     display: flex;
     flex-wrap: wrap;
diff --git a/packages/components/src/styles/basic/Tooltip.css b/packages/components/src/styles/basic/Tooltip.css
index 8965f2bd7e..8bec7761ed 100644
--- a/packages/components/src/styles/basic/Tooltip.css
+++ b/packages/components/src/styles/basic/Tooltip.css
@@ -1,7 +1,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Tooltip {
     max-width: 150px;
     padding: 2px 8px;
diff --git a/packages/components/src/styles/basic/icons.css b/packages/components/src/styles/basic/icons.css
index ec69303237..6cfd1b3a50 100644
--- a/packages/components/src/styles/basic/icons.css
+++ b/packages/components/src/styles/basic/icons.css
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   :root {
     /* These has to be mapped to global css custom properties based on the SG scales */
     --quanta-icon-default-size-s: 18px;
diff --git a/packages/types/src/config/Settings.d.ts b/packages/types/src/config/Settings.d.ts
index 68419e2db2..4c94813e66 100644
--- a/packages/types/src/config/Settings.d.ts
+++ b/packages/types/src/config/Settings.d.ts
@@ -101,4 +101,5 @@ export interface SettingsConfig {
     includeSiteTitle: boolean;
     titleAndSiteTitleSeparator: string;
   };
+  cssLayers: string;
 }
diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx
index 90237ca65f..cafcba6d2a 100644
--- a/packages/volto/src/helpers/Html/Html.jsx
+++ b/packages/volto/src/helpers/Html/Html.jsx
@@ -102,6 +102,12 @@ class Html extends Component {
           {head.meta.toComponent()}
           {head.link.toComponent()}
           {head.script.toComponent()}
+
+          {config.settings.cssLayers && (
+            // Load the CSS layers from config, if any
+            <style>{config.settings.cssLayers}</style>
+          )}
+
           {head.style.toComponent()}
 
           <script

From 4a14f615d93c39246f9b339982a3af0293788882 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Dec 2024 12:40:18 +0100
Subject: [PATCH 2/4] Add docs and move to use an array

---
 .../source/configuration/settings-reference.md |  7 +++++++
 packages/components/README.md                  | 12 ++++++++++--
 .../components/src/stories/Introduction.mdx    | 18 +++++++++++++-----
 packages/types/src/config/Settings.d.ts        |  2 +-
 packages/volto/src/helpers/Html/Html.jsx       |  2 +-
 5 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md
index 54eaebef20..ae5e32cc76 100644
--- a/docs/source/configuration/settings-reference.md
+++ b/docs/source/configuration/settings-reference.md
@@ -463,6 +463,13 @@ querystringSearchGet
     [See an explanation of character limits in URLs](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers/417184#417184).
     Please test this setting properly before enabling in a production site.
 
+cssLayers
+    If you want to use CSS layers in Volto styling, it's possible to define them making sure that they are defined and applied at the very top level of the page (head tag).
+    By using this configuration, you can pass the layer list definition as an array:
+
+    ```js
+    config.settings.cssLayers = ['reset', 'plone-components', 'layout', 'addons', 'theme'];
+    ```
 ```
 
 ## Views settings
diff --git a/packages/components/README.md b/packages/components/README.md
index af2f8c0589..ba7a55d313 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -62,11 +62,19 @@ Using them as a baseline will allow you to quickly build your theme around them.
 `@plone/components` basic styles provide a simple, yet powerful, set of tokenized custom CSS properties that will help you customize your own styles on the top of the basic styling.
 You can override them in your classes while maintaining them for others.
 
+### CSS layers
+
+This package use CSS layers to provide a way to style the components in a more flexible way.
+It uses the `plone-components` layer name to scope all the CSS declarations in the package.
+The basic styling uses the nested `plone-components.base` named layer.
+You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
+
 ### Quanta
 
 This package also features the Quanta components.
-The Quanta theme is an example of it.
-These components use the basic styling as a baseline, not only in styling, but also in the component side, reusing the CSS and custom CSS properties in it.
+These components use the basic styling as a baseline, extending them to achieve Quanta look and feel.
+They also extend the basic React components in a composable way.
+The Quanta styling is scoped in the `plone-components.quanta` named layer.
 
 Quanta is built upon the basic styles in an additive way.
 The use of the Quanta CSS implies using it upon basic styling.
diff --git a/packages/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx
index 41ecc9f5d6..8ddefc56b6 100644
--- a/packages/components/src/stories/Introduction.mdx
+++ b/packages/components/src/stories/Introduction.mdx
@@ -5,16 +5,17 @@ import { Meta } from '@storybook/blocks';
 
 # `@plone/components`
 
-This package contains ReactJS components for using Plone as a headless CMS.
+This package contains ReactJS components for Plone 7 and Plone's API-first CMS story.
 
 The purpose of this package is to provide an agnostic set of baseline components to build Plone sites upon.
 
 ## Usage
 
-Using the package manager of your choice (npm, yarn, pnpm) install the package:
+Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app.
+Use pnpm in case you are adding them a Volto add-on/workspace:
 
 ```shell
-yarn add @plone/components
+pnpm add @plone/components
 ```
 
 Whenever you want to use the components, all are exported as named exports:
@@ -53,12 +54,19 @@ or selectively:
 import '@plone/components/src/styles/basic/TextField.css';
 ```
 
+### CSS layers
+
+This package use CSS layers to provide a way to style the components in a more flexible way.
+It uses the `plone-components` layer name to scope all the CSS declarations in the package.
+The basic styling uses the nested `plone-components.base` named layer.
+You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
 
 ## Quanta
 
 This package also features the Quanta components.
-The Quanta theme is an example of it.
-These components use the basic styling as a baseline, not only in styling, but also in the component side, reusing the CSS and custom CSS properties in it.
+These components use the basic styling as a baseline, extending them to achieve Quanta look and feel.
+They also extend the basic React components in a composable way.
+The Quanta styling is scoped in the `plone-components.quanta` named layer.
 
 Quanta is built upon the basic styles in an additive way.
 The use of the Quanta CSS implies using it upon basic styling.
diff --git a/packages/types/src/config/Settings.d.ts b/packages/types/src/config/Settings.d.ts
index 4c94813e66..61e87a8955 100644
--- a/packages/types/src/config/Settings.d.ts
+++ b/packages/types/src/config/Settings.d.ts
@@ -101,5 +101,5 @@ export interface SettingsConfig {
     includeSiteTitle: boolean;
     titleAndSiteTitleSeparator: string;
   };
-  cssLayers: string;
+  cssLayers: string[];
 }
diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx
index cafcba6d2a..096f485388 100644
--- a/packages/volto/src/helpers/Html/Html.jsx
+++ b/packages/volto/src/helpers/Html/Html.jsx
@@ -105,7 +105,7 @@ class Html extends Component {
 
           {config.settings.cssLayers && (
             // Load the CSS layers from config, if any
-            <style>{config.settings.cssLayers}</style>
+            <style>{`@layer ${config.settings.cssLayers.join(', ')};`}</style>
           )}
 
           {head.style.toComponent()}

From 8c1bf9a14ab4b010417566fb406ff462692e1195 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Sat, 14 Dec 2024 12:42:48 +0100
Subject: [PATCH 3/4] Changelog

---
 packages/components/news/6539.bugfix | 1 +
 packages/types/news/6539.feature     | 1 +
 packages/volto/news/6539.feature     | 1 +
 3 files changed, 3 insertions(+)
 create mode 100644 packages/components/news/6539.bugfix
 create mode 100644 packages/types/news/6539.feature
 create mode 100644 packages/volto/news/6539.feature

diff --git a/packages/components/news/6539.bugfix b/packages/components/news/6539.bugfix
new file mode 100644
index 0000000000..361d1622ce
--- /dev/null
+++ b/packages/components/news/6539.bugfix
@@ -0,0 +1 @@
+Fixed precedence of the quanta layer by adding a base layer for all the basic components. @sneridagh
diff --git a/packages/types/news/6539.feature b/packages/types/news/6539.feature
new file mode 100644
index 0000000000..143b1dea15
--- /dev/null
+++ b/packages/types/news/6539.feature
@@ -0,0 +1 @@
+Added the type for a setting in config object for setting the site's CSS layers. @sneridagh
diff --git a/packages/volto/news/6539.feature b/packages/volto/news/6539.feature
new file mode 100644
index 0000000000..af18c38ee5
--- /dev/null
+++ b/packages/volto/news/6539.feature
@@ -0,0 +1 @@
+Added a setting in config object for setting the site's CSS layers, if required. @sneridagh

From fe5b450bd660774b8764cfd57478e543edabe1ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Fern=C3=A1ndez=20de=20Alba?=
 <sneridagh@gmail.com>
Date: Sat, 14 Dec 2024 16:33:46 +0100
Subject: [PATCH 4/4] Apply suggestions from code review

Co-authored-by: Steve Piercy <web@stevepiercy.com>
---
 docs/source/configuration/settings-reference.md  |  2 +-
 packages/components/README.md                    |  4 ++--
 packages/components/news/6539.bugfix             |  2 +-
 packages/components/src/stories/Introduction.mdx | 10 +++++-----
 packages/types/news/6539.feature                 |  2 +-
 packages/volto/news/6539.feature                 |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md
index ae5e32cc76..0f156cf8a9 100644
--- a/docs/source/configuration/settings-reference.md
+++ b/docs/source/configuration/settings-reference.md
@@ -464,7 +464,7 @@ querystringSearchGet
     Please test this setting properly before enabling in a production site.
 
 cssLayers
-    If you want to use CSS layers in Volto styling, it's possible to define them making sure that they are defined and applied at the very top level of the page (head tag).
+   To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `<head>` tag.
     By using this configuration, you can pass the layer list definition as an array:
 
     ```js
diff --git a/packages/components/README.md b/packages/components/README.md
index ba7a55d313..136e6b09c4 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -64,7 +64,7 @@ You can override them in your classes while maintaining them for others.
 
 ### CSS layers
 
-This package use CSS layers to provide a way to style the components in a more flexible way.
+This package uses CSS layers to style the components in a more flexible way.
 It uses the `plone-components` layer name to scope all the CSS declarations in the package.
 The basic styling uses the nested `plone-components.base` named layer.
 You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
@@ -72,7 +72,7 @@ You can use the `plone-components` layer to override the basic styling, or use t
 ### Quanta
 
 This package also features the Quanta components.
-These components use the basic styling as a baseline, extending them to achieve Quanta look and feel.
+These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel.
 They also extend the basic React components in a composable way.
 The Quanta styling is scoped in the `plone-components.quanta` named layer.
 
diff --git a/packages/components/news/6539.bugfix b/packages/components/news/6539.bugfix
index 361d1622ce..b64e94c1ea 100644
--- a/packages/components/news/6539.bugfix
+++ b/packages/components/news/6539.bugfix
@@ -1 +1 @@
-Fixed precedence of the quanta layer by adding a base layer for all the basic components. @sneridagh
+Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh
diff --git a/packages/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx
index 8ddefc56b6..13c0095184 100644
--- a/packages/components/src/stories/Introduction.mdx
+++ b/packages/components/src/stories/Introduction.mdx
@@ -11,8 +11,8 @@ The purpose of this package is to provide an agnostic set of baseline components
 
 ## Usage
 
-Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app.
-Use pnpm in case you are adding them a Volto add-on/workspace:
+You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app.
+If you add the components to a Volto add-on or workspace, use pnpm, as shown.
 
 ```shell
 pnpm add @plone/components
@@ -56,15 +56,15 @@ import '@plone/components/src/styles/basic/TextField.css';
 
 ### CSS layers
 
-This package use CSS layers to provide a way to style the components in a more flexible way.
+This package uses CSS layers to style the components in a more flexible way.
 It uses the `plone-components` layer name to scope all the CSS declarations in the package.
 The basic styling uses the nested `plone-components.base` named layer.
 You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
 
-## Quanta
+### Quanta
 
 This package also features the Quanta components.
-These components use the basic styling as a baseline, extending them to achieve Quanta look and feel.
+These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel.
 They also extend the basic React components in a composable way.
 The Quanta styling is scoped in the `plone-components.quanta` named layer.
 
diff --git a/packages/types/news/6539.feature b/packages/types/news/6539.feature
index 143b1dea15..4bad8ad4c9 100644
--- a/packages/types/news/6539.feature
+++ b/packages/types/news/6539.feature
@@ -1 +1 @@
-Added the type for a setting in config object for setting the site's CSS layers. @sneridagh
+Added the typing for the new `cssLayers` configuration object setting. @sneridagh
diff --git a/packages/volto/news/6539.feature b/packages/volto/news/6539.feature
index af18c38ee5..1e91372fc7 100644
--- a/packages/volto/news/6539.feature
+++ b/packages/volto/news/6539.feature
@@ -1 +1 @@
-Added a setting in config object for setting the site's CSS layers, if required. @sneridagh
+Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh