Page Title

Figma shows the Typography node behind the link.
Please update the url at Specs.

I think I've found it:
https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Design-system?node-i...

This is a good novice issue.

However, this element hasn't been properly documented in Figma so I think it would be better to postpone this for now.

Added related ticket of content header with specs

Updated link to content header specs
Also please have a look at the typography specs as well (linked in the description too)

Added headings line height in variables.js and applied it on page-title

I'd use --size-headings-lineheight to keep naming consistent with the other variable above.

Looks good to me.

As for naming, just realized that --size-lineheight-heading might be more consistant with the other vars. Any opinions on that?

Sounds right I must say :)

Some more questions about the variables : how about adding all heading font sizes too and spacing values ? And should that be done in a separated task ?

indeed, see #3027977: Add spacing and font size variables.

Postponing this issue on the other one.

To have shortcut module icon available here

we need to do same on theme install or add it in shortcut install.
https://cgit.drupalcode.org/drupal/tree/core/modules/shortcut/shortcut.i...

@finnsky good catch, needs core issue to fix

until core not fixed that issue may be resolved with command
drush config-set claro.settings third_party_settings.shortcut.module_link TRUE -y

1) Added patch for shortcut icon with drush command from #24
2) no design for shortcut-action__icon, so i added simple implementation.
3) no design for shortcut-action__message. i did same

i added new libraries as libraries-extend. since stable files contain some toolbar styles which impossible to override right now

+++ b/css/src/theme/shortcut.theme.css
@@ -0,0 +1,40 @@
+  color: #fff;

For more consistency, I guess we should use var(--color-white) here.

Moved the CSS into a single file that I moved under the components folder. I also removed the stable CSS since we override all of their settings anyway.

I tried to vertically align the shortcut-action with the page title. Also moved it closer to the title to match the designs.

Edit: I also added configuration to show the shortcut-action after installing the theme.

The patch from #32 breaks Shortcut toolbar icon – NW.

P.s.: In #3020422: Toolbar style update, I created an icon font, I'd consider re-using the star icons from there.

Could you please follow patch naming convention? It would help reviewers a lot.

Fixed #33. I also moved the star by 1px. I've been going back and forth on that and I think this looks a little bit better.

Not implementing the icon font, for now. That is something that should be discussed separately.

Re #35

1. +++ b/css/src/components/shortcut.css
   @@ -0,0 +1,61 @@
   +  transition: all 200ms ease-out;
   

   Where is this transition defined?

   Btw, I'd be happy to see a variable here.

2. +++ b/css/src/components/shortcut.css
   @@ -0,0 +1,61 @@
   +  vertical-align: -1px;
   

   We want to have rem instead of px.

It's really close :)

Added a patch to fix the comments at #36

I think that this deserves an RTBC :)

+++ b/css/src/base/variables.css
@@ -90,4 +91,11 @@
+  --size-shortcut-icon: var(--space-l);

+++ b/css/src/components/shortcut.css
@@ -0,0 +1,61 @@
+  width: var(--size-shortcut-icon);
+  height: var(--size-shortcut-icon);

I don't think we should depend on the browser default font size on sprites since this will completely break if the default value is anything higher than 16px. Therefore this should be defined in px value instead of rem.

Re #39:
Mmmm, nice catch!

But instead of turning back to pixel units there, let's define a background-size, and the described issue will be fixed. I think that's the better approach.

This should fix #39. Also changed the border radius to px as per the instructions from the design team.

Bullet-proof, RTBC!

The usual screenshot are attached.

Committed and pushed. Thank you everyone!