diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md index 54eaebef20..0f156cf8a9 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 + 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 `` 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..136e6b09c4 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 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 new file mode 100644 index 0000000000..b64e94c1ea --- /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/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx index 41ecc9f5d6..13c0095184 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: +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 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/news/6539.feature b/packages/types/news/6539.feature new file mode 100644 index 0000000000..4bad8ad4c9 --- /dev/null +++ b/packages/types/news/6539.feature @@ -0,0 +1 @@ +Added the typing for the new `cssLayers` configuration object setting. @sneridagh diff --git a/packages/types/src/config/Settings.d.ts b/packages/types/src/config/Settings.d.ts index 68419e2db2..61e87a8955 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/news/6539.feature b/packages/volto/news/6539.feature new file mode 100644 index 0000000000..1e91372fc7 --- /dev/null +++ b/packages/volto/news/6539.feature @@ -0,0 +1 @@ +Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx index 90237ca65f..096f485388 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 + + )} + {head.style.toComponent()}