Change the value of the focused cell background variable

theme/ckeditor5-table/tableediting.css

@@ -3,30 +3,24 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck-widget.table {
-	& .ck-editor__nested-editable.ck-editor__nested-editable_focused,
-	& .ck-editor__nested-editable:focus {
-		background: inherit;
-
-		/* Fixes the problem where surrounding cells cover the focused cell's border.
-		It does not fix the problem in all places but the UX is improved.
-		See https://github.com/ckeditor/ckeditor5-table/issues/29. */
-		border-style: none;
-		outline: 1px solid var(--ck-color-focus-border);
-		outline-offset: -1px; /* progressive enhancement - no IE support */
-	}
+:root {
+	--ck-color-table-focused-cell-background: hsla(208, 90%, 80%, .3);
+}
 
+.ck-widget.table {
+	& td,
 	& th {
 		&.ck-editor__nested-editable.ck-editor__nested-editable_focused,
 		&.ck-editor__nested-editable:focus {
-			/* We can't just set `inherit` here as well, because we use `hsla` as an "overlay"
-			to darken the background based on the set table background.
-
-			The value should be the same as for the table header element without focus.
-			See related issue https://github.com/ckeditor/ckeditor5/issues/6228.
+			/* A very slight background to highlight the focused cell */
+			background: var(--ck-color-table-focused-cell-background);
 
-			This is also a workaround for overriding the styling that comes from the `widget`. */
-			background: hsla(0, 0%, 0%, 10%);
+			/* Fixes the problem where surrounding cells cover the focused cell's border.
+			It does not fix the problem in all places but the UX is improved.
+			See https://github.com/ckeditor/ckeditor5-table/issues/29. */
+			border-style: none;
+			outline: 1px solid var(--ck-color-focus-border);
+			outline-offset: -1px; /* progressive enhancement - no IE support */
 		}
 	}
 }