Merge pull request #147 from ckeditor/t/134

Other: Improved the visual styles of the split button when hovered or open. Closes [#134](https://github.com/ckeditor/ckeditor5-theme-lark/issues/134).

theme/ckeditor5-ui/components/dropdown/splitbutton.css

@@ -5,6 +5,11 @@
 
 @import "../../../mixins/_rounded.css";
 
+:root {
+	--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
+	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
+}
+
 .ck-splitbutton {
 	& > .ck-splitbutton__action {
 		/* Don't round the first button on the right side */
@@ -15,9 +20,6 @@
 	}
 
 	& > .ck-splitbutton__arrow {
-		/* Disable a double border between the button and the arrow button. */
-		border-left: 0;
-
 		/* It's a text-less button but still, it should not be square. */
 		min-width: unset;
 
@@ -31,4 +33,19 @@
 			width: var(--ck-dropdown-arrow-size);
 		}
 	}
+
+	/* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
+	as a whole. The background of both buttons should stand out and there should be a visual
+	separation between both buttons. */
+	&.ck-splitbutton_open,
+	&:hover {
+		/* When the split button hovered as a whole, not as individual buttons. */
+		& > .ck-button:not(.ck-on):not(:hover) {
+			background: var(--ck-color-split-button-hover-background);
+		}
+
+		& > .ck-splitbutton__arrow {
+			border-left-color: var(--ck-color-split-button-hover-border);
+		}
+	}
 }