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

sneridagh · 2024-12-14T11:10:29Z

@pnicolli I found a bug in the definition of the layers, the quanta plone-components.quanta layer needs to have more priority than the base one. I misunderstood how nested layers worked.

I added a nested plone-components.base layer to all basic components. So, if we want to override declarations in the nested (default) layers, we only have to scope them to the main layer.

Also, I added the ability to setup the layers at the top (Html.jsx component), so we have a "main" centralized entry point to define them in Volto.

… basic components. Added a setting in config object for setting the site's CSS layers.

netlify · 2024-12-14T11:10:49Z

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	`8c1bf9a`
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/675d6f3ffe75b100082b74ff

stevepiercy · 2024-12-14T12:06:47Z

packages/components/src/stories/Introduction.mdx


 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.


Suggested change

Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app.

You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app.

stevepiercy · 2024-12-14T12:07:54Z

packages/components/src/stories/Introduction.mdx


 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:


Suggested change

Use pnpm in case you are adding them a Volto add-on/workspace:

If you add the components to a Volto add-on or workspace, use pnpm, as shown.

stevepiercy · 2024-12-14T12:08:19Z

packages/components/src/stories/Introduction.mdx

@@ -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.


Suggested change

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.

stevepiercy · 2024-12-14T12:08:53Z

packages/components/src/stories/Introduction.mdx


 ## 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.


Suggested change

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.

stevepiercy · 2024-12-14T12:18:43Z

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


Suggested change

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

stevepiercy · 2024-12-14T12:20:27Z

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


Suggested change

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

stevepiercy · 2024-12-14T12:21:53Z

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).


Suggested change

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.

stevepiercy · 2024-12-14T12:22:58Z

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.


Suggested change

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.

stevepiercy · 2024-12-14T12:24:24Z

packages/components/src/stories/Introduction.mdx

+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


I think this needs to increase a level because it is under Styling, not a sibling to it.

Suggested change

## Quanta

### Quanta

stevepiercy · 2024-12-14T12:24:58Z

packages/components/README.md

 ### 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.


Suggested change

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.

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

29abe8a

… basic components. Added a setting in config object for setting the site's CSS layers.

sneridagh added 2 commits December 14, 2024 12:40

Add docs and move to use an array

4a14f61

Changelog

8c1bf9a

sneridagh requested review from stevepiercy and pnicolli December 14, 2024 11:43

stevepiercy requested changes Dec 14, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

sneridagh commented Dec 14, 2024

netlify bot commented Dec 14, 2024 •

edited

Loading

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

stevepiercy Dec 14, 2024

	Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app.
	You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app.

	Use pnpm in case you are adding them a Volto add-on/workspace:
	If you add the components to a Volto add-on or workspace, use pnpm, as shown.

	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.

	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.

		@@ -0,0 +1 @@
		Added the type for a setting in config object for setting the site's CSS layers. @sneridagh

	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

		@@ -0,0 +1 @@
		Fixed precedence of the quanta layer by adding a base layer for all the basic components. @sneridagh

	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.

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

Are you sure you want to change the base?

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

Conversation

sneridagh commented Dec 14, 2024

netlify bot commented Dec 14, 2024 • edited Loading

✅ Deploy Preview for plone-components canceled.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Dec 14, 2024 •

edited

Loading