8
0
فهرست منبع

Optimized the color gird component for WCAG AA. Increased the tile size to improve readability, adjusted shadows and borders.

Aleksander Nowodzinski 6 سال پیش
والد
کامیت
252c43916b
1فایلهای تغییر یافته به همراه18 افزوده شده و 6 حذف شده
  1. 18 6
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

+ 18 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -6,7 +6,12 @@
 @import "../../../mixins/_rounded.css";
 
 :root {
-	--ck-color-grid-tile-size: 20px;
+	--ck-color-grid-tile-size: 24px;
+
+	/* Not using global colors here because these may change but some colors in a pallette
+	 * require special treatment. For instance, this ensures no matter what the UI text color is,
+	 * the check icon will look good on the black color tile. */
+	--ck-color-color-grid-check-icon: hsl(0, 0%, 0%);
 }
 
 .ck.ck-color-grid {
@@ -15,14 +20,12 @@
 }
 
 .ck.ck-color-grid__tile {
-	@mixin ck-rounded-corners;
-
 	width: var(--ck-color-grid-tile-size);
 	height: var(--ck-color-grid-tile-size);
 	min-width: var(--ck-color-grid-tile-size);
 	min-height: var(--ck-color-grid-tile-size);
 	padding: 0;
-	transition: 200ms ease box-shadow;
+	transition: .2s ease box-shadow;
 	border: 0;
 
 	&.ck-disabled {
@@ -36,18 +39,27 @@
 
 	& .ck.ck-icon {
 		display: none;
+		color: var(--ck-color-color-grid-check-icon);
 	}
 
 	&.ck-on {
-		box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-base-text);
+		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 1px var(--ck-color-base-text);
 
 		& .ck.ck-icon {
 			display: block;
 		}
 	}
 
+	&.ck-on,
+	&:focus:not( .ck-disabled ),
+	&:hover:not( .ck-disabled ) {
+		/* Disable the default .ck-button's border ring. */
+		border: 0;
+	}
+
+	&:focus:not( .ck-disabled ),
 	&:hover:not( .ck-disabled ) {
-		box-shadow: 0 0 0 2px var(--ck-color-focus-border);
+		box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 1px var(--ck-color-focus-border);
 	}
 }