Procházet zdrojové kódy

Normalized CSS variable names in the list component.

Aleksander Nowodzinski před 7 roky
rodič
revize
79b0b3cf87

+ 3 - 3
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -65,9 +65,9 @@
 	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
 
 	--ck-color-list-background: var(--ck-custom-background);
-	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
-	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
-	--ck-color-list-item-text-active: var(--ck-custom-white);
+	--ck-color-list-button-hover-background: var(--ck-custom-foreground);
+	--ck-color-list-button-on-background: hsl(208, 88%, 52%);
+	--ck-color-list-button-on-text: var(--ck-custom-white);
 
 	/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
 

+ 4 - 4
packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md

@@ -131,10 +131,10 @@ The file containing custom variables will be named `custom.css` and it will look
 	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
 
 	--ck-color-list-background: var(--ck-custom-background);
-	--ck-color-list-button-background-hover: var(--ck-color-base-foreground);
-	--ck-color-list-button-background-active: var(--ck-color-base-active);
-	--ck-color-list-button-background-active-focus: var(--ck-color-base-active-focus);
-	--ck-color-list-button-text-active: var(--ck-color-base-background);
+	--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
+	--ck-color-list-button-on-background: var(--ck-color-base-active);
+	--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+	--ck-color-list-button-on-text: var(--ck-color-base-background);
 
 	/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
 

+ 3 - 3
packages/ckeditor5-theme-lark/tests/manual/inverted.html

@@ -59,9 +59,9 @@
 		/* -- Overrides the default .ck-list class colors ------------------------------------------- */
 
 		--ck-color-list-background: var(--ck-custom-background);
-		--ck-color-list-button-background-hover: var(--ck-custom-foreground);
-		--ck-color-list-button-background-active: hsl(208, 88%, 52%);
-		--ck-color-list-button-text-active: var(--ck-custom-white);
+		--ck-color-list-button-hover-background: var(--ck-custom-foreground);
+		--ck-color-list-button-on-background: hsl(208, 88%, 52%);
+		--ck-color-list-button-on-text: var(--ck-custom-white);
 
 		/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
 

+ 4 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -42,18 +42,18 @@
 		}
 
 		&.ck-on {
-			background: var(--ck-color-list-button-background-active);
-			color: var(--ck-color-list-button-text-active);
+			background: var(--ck-color-list-button-on-background);
+			color: var(--ck-color-list-button-on-text);
 
 			&:hover:not(ck-disabled),
 			&:focus {
-				background: var(--ck-color-list-button-background-active-focus);
+				background: var(--ck-color-list-button-on-background-focus);
 			}
 		}
 
 		&:hover:not(.ck-disabled),
 		&:focus {
-			background: var(--ck-color-list-button-background-hover);
+			background: var(--ck-color-list-button-hover-background);
 		}
 	}
 }

+ 4 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -62,10 +62,10 @@
 	/* -- List ---------------------------------------------------------------------------------- */
 
 	--ck-color-list-background: 								var(--ck-color-base-background);
-	--ck-color-list-button-background-hover: 					var(--ck-color-base-foreground);
-	--ck-color-list-button-background-active: 					var(--ck-color-base-active);
-	--ck-color-list-button-background-active-focus: 			var(--ck-color-base-active-focus);
-	--ck-color-list-button-text-active:							var(--ck-color-base-background);
+	--ck-color-list-button-hover-background: 					var(--ck-color-base-foreground);
+	--ck-color-list-button-on-background: 						var(--ck-color-base-active);
+	--ck-color-list-button-on-background-focus: 				var(--ck-color-base-active-focus);
+	--ck-color-list-button-on-text:								var(--ck-color-base-background);
 
 	/* -- Panel --------------------------------------------------------------------------------- */