PostCSS layout helpers inconsistency

TY4DVenom → made their first commit to this issue’s fork.

I am working on it.

I fixed the issue please review the patch.

This needs to be done for all the instances of [number] * var(--sp) in Olivero theme. It seems it is only done for --sp3 only.

I have changed all layout helper variables to fit the predetermined ones on variable.pcss.

Should we create instances that do not exist as variables but follow the pattern of the layout helpers? for consistency.

There are calc(13 * (var(--sp)); adn cal(4.5 * var(--sp)); that are not defined as variables.

Or is this too much?

I have updated all the instances, attached interdiff for same. please review

There are still instances which are not updated. Eg 0.5 * var(--sp).

Also I think #10 can also be covered under this issue. Adding IS update tag for this change.

Why are we using patches when there is a fork already? Just curious.

The issue fork has the changes you mentioned and I will add the extra ones as soon as my day starts.

Updated summary, and changed back to 10.1.x since drupalpod is not working with 11.x apparently.

As per last comment #17 changes in MR, reviewing it

Hi

Tested the MR 4398 for inconsistency in the use of spacing variables or layout helpers in the PostCSS files issue, like replacing the instances of `calc(2 * var(--sp)); calc(3 * var(--sp)); calc(4 * var(--sp)); ` with var(--sp2), var(--sp3) var(--sp4); and created new helper like : var(--sp3-5)l var(--sp13); are used in the relevant PCSS files are done.

Here are the steps I followed to test the changes:

1. Installed Drupal 10.1.x-dev version and navigated to the 'core/themes/olivero/css' path.
2. Switched to the MR (#4398) and verified the changes in the PCSS files.

Note: I didn't take screenshots because this issue is about code consistency, not visual changes.
Looks good for RTBC+

Setting NW for CI failure. Also MR should be against 11.x. Changes should done only in pcss file and then yarn run build:css should be run to get those changes in css files.

camoa → closed merge request !4525

I have worked out the rebase of Drupal 11.x and compiled CSS via yarn run build:css.

Still some reference left in node-teaser.pcss.css and social-bar.pcss.css

There seems one more --header-height-wide-when-fixed: calc(6 * var(--sp)); in variables.css and variables.pcss.css

Changes looks good to me. Marking as RTBC.

I searched but could not find any other similar cases that could be replaced.

Minor spacing issue fixed on commit:

--- a/core/themes/olivero/css/layout/social-bar.pcss.css
+++ b/core/themes/olivero/css/layout/social-bar.pcss.css
@@ -23,7 +23,7 @@
   @media (--nav) {
     position: relative;
     width: var(--content-left);
-    padding-block:var(--sp5);
+    padding-block: var(--sp5);
     padding-inline-start: 0;
     padding-inline-end: 0;

Committed and pushed 418e5a48ac to 11.x and 3913db9d4d to 10.2.x and 2945fff811 to 10.1.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.