undefined - Contrib.social

📌 | Drupal core | CKEditor 5 has its own focus styles, should use the admin theme's

Updating issue description

📌 | Drupal core | CKEditor 5 has its own focus styles, should use the admin theme's

Gin Admin theme also does this to mitigate #32:

.ck-toolbar_grouping:focus,
  .ck-toolbar__items:focus {
    box-shadow: none;
  }
}

This completely hides the green line around the toolbar. Not doing it in case it can have issues for accessibility. I think it's probably OK though: I'm not sure the toolbar should be focusable at all (the toolbar can still be used by the keyboard when the editor is focused), but in that case, we may consider focusing the editor automatically when the empty space in the toolbar is clicked.

📌 | Drupal core | CKEditor 5 has its own focus styles, should use the admin theme's

Comment about 1 month ago →

pere orga Catalonia

Setting it to Ready for review, as I've created an MR that could be acceptable.

Replicating the hover effect could be a separate issue.

📌 | Drupal core | CKEditor 5 has its own focus styles, should use the admin theme's

Comment about 1 month ago →

pere orga Catalonia

I found something simpler, looking at what Gin theme is doing:

--- a/core/themes/claro/css/components/ckeditor5.pcss.css
+++ b/core/themes/claro/css/components/ckeditor5.pcss.css
@@ -1,3 +1,6 @@
 .ck {
   --ck-color-base-border: var(--input-border-color);
+  --ck-focus-ring: 1px solid var(--color-focus);
+  --ck-focus-outer-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  --ck-inner-shadow: var(--ck-focus-outer-shadow);
 }

This has the problems mentioned above, and a few pixels of the toolbar buttons are now below (behind) the green shadow, but I can't see how we could improve this if we apply current Claro's shadow:

📌 | Drupal core | CKEditor 5 has its own focus styles, should use the admin theme's

Comment about 1 month ago →

pere orga Catalonia

I took a look and I don't think this is easy, it requires multiple style changes to CKEditor.

So this is totally doable. At least for a specific theme. For Claro, we'd want

--ck-color-focus-border: var(--color-focus);

This changes the color of the border from blue to green, but it is not much better, because as far as I can see, Claro implements the green outline with box-shadow.

Overriding the following selector gave me a better result:

.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    box-shadow: var(--focus-box-shadow);
}

But still far from perfect: the CKEditor blue focus border is still there (and did not look good if removed, it should probably be converted to be var(--input-border-size) solid var(--input-border-color);, but even then, the green outline still would not match Claro's, mostly because the focused element only has 2 rounded corners instead of 4 (which is another non-focus style difference):

Also, we would need to replicate the hover effect (border-color: var(--input--hover-border-color); box-shadow: inset 0 0 0 var(--input-border-size)...).

And the issue I described in #32 would still happen.

🐛 | Drupal core | CKEditor 5 has its own border color and is not using Claro's colors

Comment about 1 month ago →

pere orga Catalonia

That makes sense.

I see there is no CKEditor-dedicated file in Claro theme. I'm wondering if the right file to put this should be css/theme/field-ui.admin.pcss.css, or maybe a new file css/theme/ckeditor.admin.pcss.css should be created instead?

@pere orga

Merge Requests

!9811CKEditor 5 has its own focus styles, should use the admin theme'sOpen Show issue Drupal core

!9728CKEditor 5 has its own border color and is not using Claro's colorsClosed Show issue Drupal core

!9729CKEditor 5 has its own border color and is not using Claro's colorsClosed Show issue Drupal core

Recent comments

Problem/Motivation

Expected behavior

!9811CKEditor 5 has its own focus styles, should use the admin theme's
Open
Show issue
Drupal core

!9728CKEditor 5 has its own border color and is not using Claro's colors
Closed
Show issue
Drupal core

!9729CKEditor 5 has its own border color and is not using Claro's colors
Closed
Show issue
Drupal core