Here is a first draft... 90% is coming from the claro theme... I have little merit

it comes with a proposal to add variables used at some other places

   /*  PROPOSAL TO ADD THOSES VARIABLES (and update other css rules accordingly)  */
  --font-weight-bold: 700;
  --color-focus: var(--color--blue-70);
  --color-disabled: var(--color--gray-30);
   /* END PROPOSAL */

and a small correction in fieldset (couldn't resist)

 .fieldset__description.is-disabled {
-  color: var(--input--disabled-fg-color); //variable doesn't exists
+  color: var(--color-disabled);
 }

details

CommentFileSizeAuthor
#10 3129147-9.patch18.13 KBmherchel
#4 Снимок экрана 2020-04-20 в 17.21.31.png121.14 KBkostyashupenko
#4 Снимок экрана 2020-04-20 в 17.21.16.png15.19 KBkostyashupenko
#4 Снимок экрана 2020-04-20 в 17.21.06.png15.36 KBkostyashupenko
#4 Снимок экрана 2020-04-20 в 17.20.23.png15.42 KBkostyashupenko
#4 Снимок экрана 2020-04-20 в 17.20.16.png15.75 KBkostyashupenko
#3 interdiff_1-3.txt58.05 KBkostyashupenko
#3 3129147-3.patch17.92 KBkostyashupenko
DETAILS.png50.92 KBdunebl
0001-Details-theming-First-draft.patch49.74 KBdunebl

Comments

DuneBL created an issue. See original summary.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: dunebl » kostyashupenko

I'm gonna review it

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned
StatusFileSize
new 3129147-3.patch17.92 KB
new interdiff_1-3.txt58.05 KB

Thanks @DuneBL for your init patch.
I did some cleanup and added styles to relate it with Olivero design.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
StatusFileSize
new Снимок экрана 2020-04-20 в 17.20.16.png15.75 KB
new Снимок экрана 2020-04-20 в 17.20.23.png15.42 KB
new Снимок экрана 2020-04-20 в 17.21.06.png15.36 KB
new Снимок экрана 2020-04-20 в 17.21.16.png15.19 KB
new Снимок экрана 2020-04-20 в 17.21.31.png121.14 KB

Some screenshots.

Default state:
Details default

Default focus state:
Details default focus

Default hover state:
Details default hover

Default hover + focus states:
Details default focus and hover

Expanded state:
Details expanded

dunebl’s picture

dunebl
Primary language French
commented

This is really cleaner... very good job @kostyashupenko, it is perfect

We can handle the small bug of fieldset somewhere else?

.fieldset__description.is-disabled {
-  color: var(--input--disabled-fg-color); //variable doesn't exists
+  color: var(--color--gray-30);
 }

I see that you don't want to add the other variables included my proposal:

  --font-weight-bold: 700;
  --color-focus: var(--color--blue-70);
  --color-disabled: var(--color--gray-30);

Why adding those variables?:
Ex: If you are not familiar with the css, you don't know that --color--gray-30 is the color used for disabled fields...This is not adding a color, it is adding a way to discover how the theme is constructed... anyway I can live without.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented

If you are not familiar with the css

:)

@DuneBL true, but i really missed that part and forgot to say that better manage color-focus, color-disable, font-weight properties and other in a separate task. You can create a follow-up and you are right

I just didnt want to manage it in this task, so i did revert of your code, but totally forgot to write comment about it

dunebl’s picture

dunebl
Primary language French
commented
Status: Needs review » Reviewed & tested by the community

follow-up created: #3129291: Abstract Olivero's CSS Variables to help people to understand how the theme is constructed

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

oooh that looks pretty!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Attaching updated patch. Messed up the interdiff, but the only change is that I'm extending the core/drupal.collapse library with the olivero/details library, into which I moved the CSS into.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3129147-9.patch18.13 KB
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Fixed

Committed. Thanks!

Status: Fixed » Closed (fixed)

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