Fix precedence of the quanta layer by adding a base layer for all the… (

#6539) Co-authored-by: Steve Piercy <web@stevepiercy.com>
plone · Dec 16, 2024 · e0f106a · e0f106a
1 parent e9cbf81
commit e0f106a
Show file tree

Hide file tree

Showing 54 changed files with 87 additions and 54 deletions.
diff --git 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
+   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
+    config.settings.cssLayers = ['reset', 'plone-components', 'layout', 'addons', 'theme'];
+    ```
 ```
 
 ## Views settings

diff --git 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 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
 
 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 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.
 
 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/news/6539.bugfix 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/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:
+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
-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
 
-## Quanta
+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
 
 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 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.
 
 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Switch {
     display: flex;
     align-items: center;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh