Refactor details stylesheet

LGTM!

1. +++ b/core/themes/olivero/css/components/details.css
   @@ -23,50 +23,74 @@
   -  --details-summary-transition: background-color 0.12s ease-in-out;
   ...
   +  transition: background-color 0.2s;
   

   Why are we changing the transition?

2. +++ b/core/themes/olivero/css/components/details.pcss.css
   @@ -5,110 +5,96 @@
   -    margin-block-start: var(--sp1-5);
   -    margin-block-end: var(--sp1-5);
   -    margin-inline-start: var(--sp2);
   -    margin-inline-end: var(--sp2);
   +    margin: calc(2 * var(--details-spacing-unit)) calc(1.5 * var(--details-spacing-unit));
   

   This slightly changes the margin inside the details. I think this looks better with the value before the change because the elements inside the wrapper are aligned with the summary.

   

Addressed #8, attached patch for same.

I tried applying patch #4, but I was getting an error. That's why didn't provided interdiff.

 git apply -v 3312636-4-reroll.patch
Checking patch core/themes/olivero/css/components/details.css...
error: while searching for:

/* Width of the entire grid maxes out. */

:root {
  --details-border-width: 1px;
  --details-summary-transition: background-color 0.12s ease-in-out;
}

.olivero-details {
  display: block;
  margin-block: var(--sp1);
  color: inherit;
  border: var(--details-border-width) solid var(--color--gray-95);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px var(--color--gray-90);
}

/* Details summary styles */

.olivero-details__summary {
  position: relative;
  padding-block: var(--sp1);
  padding-inline-start: var(--sp2);
  padding-inline-end: var(--sp1);
  list-style: none;
  cursor: pointer;
  transition: var(--details-summary-transition);
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: inherit;
  background-color: var(--color--gray-100);
  font-size: var(--line-height-s);
  font-weight: 700;
  line-height: var(--sp1);
}

/* Arrow icon */

.olivero-details__summary:before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--sp0-75);
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  content: "";
  transform: translateY(-50%) rotate(45deg); /* LTR */
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;

error: patch failed: core/themes/olivero/css/components/details.css:23
error: core/themes/olivero/css/components/details.css: patch does not apply
Checking patch core/themes/olivero/css/components/details.pcss.css...

I have replaced transition: background-color 0.2s; with

--details-summary-transition: background-color 0.12s ease-in-out;
transition: var(--details-summary-transition);

Also, replaced margin: calc(2 * var(--details-spacing-unit)) calc(1.5 * var(--details-spacing-unit)); with margin: var(--sp1-5) var(--sp2); in the patch.

Tested out by enabling Olivero when creating content
When to node/add/page
The details section doesn't seem broken. Here's a few screenshots but let me know if there's another section to check.

Create MR from patch 312636-9.patch

Hello,
Tested and verified before applying MR.
Not able to reproduce issue looks good to me.
Attaching screenshots.

@sagarmohite0031 there is not a need for additional screenshots when the ticket already has them. #12 I added screenshots and there's been no change since. Thanks

Restoring previous status.

small nit left, it's a bit longer but it's more consistent.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.