8
0
Просмотр исходного кода

Removed color() calls in the styles. Code refactoring.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
1e3077511f

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagecaption.css

@@ -6,7 +6,7 @@
 :root {
 	--ck-color-image-caption-background: var(--ck-color-base-foreground);
 	--ck-color-image-caption-text: var(--ck-color-base-text);
-};
+}
 
 .ck-editor__editable .image > figcaption {
 	color: var(--ck-color-image-caption-text);

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagestyle.css

@@ -6,7 +6,7 @@
 :root {
 	--ck-image-spacing: calc(5 * var(--ck-spacing-small));
 	--ck-image-max-width: 50%;
-};
+}
 
 .ck-editor__editable {
 	& .image-style-side,

+ 3 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext.css

@@ -23,8 +23,8 @@
 	}
 
 	&[readonly] {
-		border: 1px solid color(var(--ck-color-input-border) tint(10));
-		background: color(var(--ck-color-input-background) shade(5));
-		color: color(var(--ck-color-input-text) tint(20)));
+		border: 1px solid var(--ck-color-input-disabled-border);
+		background: var(--ck-color-input-disabled-background);
+		color: var(--ck-color-input-disabled-text);
 	}
 }

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

@@ -37,6 +37,6 @@
 
 	&:hover,
 	&:focus {
-		background: color(var(--ck-color-list-item-background-active) shade(10));
+		background: var(--ck-color-list-item-background-active-focus);
 	}
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -10,7 +10,7 @@
 	--ck-balloon-arrow-offset: 2px;
 	--ck-balloon-arrow-height: 15px;
 	--ck-balloon-arrow-half-width: 10px;
-};
+}
 
 .ck-balloon-panel {
 	@mixin ck-rounded-corners;

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

@@ -4,88 +4,94 @@
  */
 
 :root {
-	--ck-color-base-foreground: 						#f7f7f7;
-	--ck-color-base-background: 						#fff;
-	--ck-color-base-border: 							#BFBFBF;
-	--ck-color-base-action: 							#61B145;
-	--ck-color-base-focus: 								#6ab5f9;
-	--ck-color-base-text: 								#333;
-	--ck-color-base-active: 							#1A8BF1;
+	--ck-color-base-foreground: 								#f7f7f7;
+	--ck-color-base-background: 								#fff;
+	--ck-color-base-border: 									#BFBFBF;
+	--ck-color-base-action: 									#61B145;
+	--ck-color-base-focus: 										#6ab5f9;
+	--ck-color-base-text: 										#333;
+	--ck-color-base-active: 									#1A8BF1;
+	--ck-color-base-active-focus:								#0e7ee2;
 
 	/* ----------------------------------------------------------------------------- */
 
-	--ck-color-border-focus: 							#48a3f5;
-	--ck-color-text: 									var(--ck-color-base-text);
-	--ck-color-shadow-drop: 							rgba( 0, 0, 0, .2 );
-	--ck-color-shadow-inner: 							rgba( 0, 0, 0, .1 );
+	--ck-color-focus-border: 									#48a3f5;
+	--ck-color-focus-shadow:									#78bbf8;
+	--ck-color-text: 											var(--ck-color-base-text);
+	--ck-color-shadow-drop: 									rgba( 0, 0, 0, .2 );
+	--ck-color-shadow-inner: 									rgba( 0, 0, 0, .1 );
 
 	/* ----------------------------------------------------------------------------- */
 
-	--ck-color-button-default-background: 				var(--ck-color-base-background);
-	--ck-color-button-default-border: 					var(--ck-color-base-border);
-	--ck-color-button-default-focus-background: 		#E6E6E6;
-	--ck-color-button-default-focus-border: 			#a5a5a5;
-	--ck-color-button-default-active-background: 		#D9D9D9;
-	--ck-color-button-default-active-border: 			#999999;
-	--ck-color-button-default-active-shadow: 			#BFBFBF;
-	--ck-color-button-default-disabled-background: 		#ffffff;
-	--ck-color-button-default-disabled-border: 			#c6c6c6;
-
-	--ck-color-button-on-background: 					var(--ck-color-base-foreground);
-	--ck-color-button-on-border: 						#B7B7B7;
-	--ck-color-button-on-focus-background: 				#dedede;
-	--ck-color-button-on-focus-border: 					#9e9e9e;
-	--ck-color-button-on-active-background: 			#d1d1d1;
-	--ck-color-button-on-active-border: 				#919191;
-	--ck-color-button-on-active-shadow: 				#777777;
-	--ck-color-button-on-disabled-background: 			#ffffff;
-	--ck-color-button-on-disabled-border: 				#d1d1d1;
-
-	--ck-color-button-action-background: 				var(--ck-color-base-action);
-	--ck-color-button-action-border: 					#396828;
-	--ck-color-button-action-focus-background: 			#4d8c37;
-	--ck-color-button-action-focus-border: 				#25431a;
-	--ck-color-button-action-active-background: 		#437a30;
-	--ck-color-button-action-active-border: 			#1b3113;
-	--ck-color-button-action-active-shadow: 			#070c05;
-	--ck-color-button-action-disabled-background: 		#7ec366;
-	--ck-color-button-action-disabled-border: 			#4d8d36;
-	--ck-color-button-action-text: 						var(--ck-color-base-background);
-
-	--ck-color-dropdown-panel-background: 				var(--ck-color-base-background);
-	--ck-color-dropdown-panel-border: 					var(--ck-color-base-border);
-	--ck-color-dropdown-symbol: 						#707070;
-
-	--ck-color-input-background: 						var(--ck-color-base-background);
-	--ck-color-input-border: 							var(--ck-color-base-border);
-	--ck-color-input-text: 								var(--ck-color-base-text);
-
-	--ck-color-list-background: 						var(--ck-color-base-background);
-	--ck-color-list-item-background-hover: 				var(--ck-color-base-foreground);
-	--ck-color-list-item-background-active: 			var(--ck-color-base-active);
-	--ck-color-list-item-text-active:					var(--ck-color-base-background);
-
-	--ck-color-panel-background: 						var(--ck-color-base-background);
-	--ck-color-panel-border: 							var(--ck-color-base-border);
-
-	--ck-color-toolbar-background: 						var(--ck-color-base-background);
-	--ck-color-toolbar-border: 							var(--ck-color-base-border);
-
-	--ck-color-tooltip-background: 						var(--ck-color-base-text);
-	--ck-color-tooltip-text: 							var(--ck-color-base-background);
-
-	--ck-color-editor-border: 							var(--ck-color-base-border);
-	--ck-color-editor-toolbar-background: 				var(--ck-color-base-foreground);
+	--ck-color-button-default-background: 						var(--ck-color-base-background);
+	--ck-color-button-default-border: 							var(--ck-color-base-border);
+	--ck-color-button-default-focus-background: 				#E6E6E6;
+	--ck-color-button-default-focus-border: 					#a5a5a5;
+	--ck-color-button-default-active-background: 				#D9D9D9;
+	--ck-color-button-default-active-border: 					#999999;
+	--ck-color-button-default-active-shadow: 					#BFBFBF;
+	--ck-color-button-default-disabled-background: 				#ffffff;
+	--ck-color-button-default-disabled-border: 					#c6c6c6;
+
+	--ck-color-button-on-background: 							var(--ck-color-base-foreground);
+	--ck-color-button-on-border: 								#B7B7B7;
+	--ck-color-button-on-focus-background: 						#dedede;
+	--ck-color-button-on-focus-border: 							#9e9e9e;
+	--ck-color-button-on-active-background: 					#d1d1d1;
+	--ck-color-button-on-active-border: 						#919191;
+	--ck-color-button-on-active-shadow: 						#777777;
+	--ck-color-button-on-disabled-background: 					#ffffff;
+	--ck-color-button-on-disabled-border: 						#d1d1d1;
+
+	--ck-color-button-action-background: 						var(--ck-color-base-action);
+	--ck-color-button-action-border: 							#4e8e37;
+	--ck-color-button-action-focus-background: 					#579f3e;
+	--ck-color-button-action-focus-border: 						#467f32;
+	--ck-color-button-action-active-background: 				#52963b;
+	--ck-color-button-action-active-border: 					#42782f;
+	--ck-color-button-action-active-shadow: 					#498534;
+	--ck-color-button-action-disabled-background: 				#7ec366;
+	--ck-color-button-action-disabled-border: 					#4d8d36;
+	--ck-color-button-action-text: 								var(--ck-color-base-background);
+
+	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);
+	--ck-color-dropdown-panel-border: 							var(--ck-color-base-border);
+	--ck-color-dropdown-symbol: 								#707070;
+
+	--ck-color-input-background: 								var(--ck-color-base-background);
+	--ck-color-input-border: 									var(--ck-color-base-border);
+	--ck-color-input-text: 										var(--ck-color-base-text);
+	--ck-color-input-disabled-background: 						#f2f2f2;
+	--ck-color-input-disabled-border: 							#c6c6c6;
+	--ck-color-input-disabled-text: 							#5c5c5c;
+
+	--ck-color-list-background: 								var(--ck-color-base-background);
+	--ck-color-list-item-background-hover: 						var(--ck-color-base-foreground);
+	--ck-color-list-item-background-active: 					var(--ck-color-base-active);
+	--ck-color-list-item-background-active-focus: 				var(--ck-color-base-active-focus);
+	--ck-color-list-item-text-active:							var(--ck-color-base-background);
+
+	--ck-color-panel-background: 								var(--ck-color-base-background);
+	--ck-color-panel-border: 									var(--ck-color-base-border);
+
+	--ck-color-toolbar-background: 								var(--ck-color-base-background);
+	--ck-color-toolbar-border: 									var(--ck-color-base-border);
+
+	--ck-color-tooltip-background: 								var(--ck-color-base-text);
+	--ck-color-tooltip-text: 									var(--ck-color-base-background);
+
+	--ck-color-editor-border: 									var(--ck-color-base-border);
+	--ck-color-editor-toolbar-background: 						var(--ck-color-base-foreground);
 
 	--ck-color-editor-toolbar-button-on-background: 			#dedede;
 	--ck-color-editor-toolbar-button-on-border: 				transparent;
 	--ck-color-editor-toolbar-button-on-focus-background: 		#c5c5c5;
 	--ck-color-editor-toolbar-button-on-focus-border: 			transparent;
-	--ck-color-editor-toolbar-button-on-active-background: 		#b8b8b8;
+	--ck-color-editor-toolbar-button-on-active-background: 		#b9b9b9;
 	--ck-color-editor-toolbar-button-on-active-border: 			transparent;
-	--ck-color-editor-toolbar-button-on-active-shadow: 			#070c05;
+	--ck-color-editor-toolbar-button-on-active-shadow: 			#a1a1a1;
 	--ck-color-editor-toolbar-button-on-disabled-background: 	#dedede;
 	--ck-color-editor-toolbar-button-on-disabled-border: 		transparent;
 
-	--ck-color-editor-dropdown-background: 				var(--ck-color-base-background);
+	--ck-color-editor-dropdown-background: 						var(--ck-color-base-background);
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css

@@ -7,10 +7,10 @@
 	/**
 	 * A visual style of focused element's outer shadow.
 	 */
-	--ck-focus-outer-shadow: 0 0 3px 2px color(var(--ck-color-border-focus) lightness(+15%));
+	--ck-focus-outer-shadow: 0 0 3px 2px var(--ck-color-focus-shadow);
 
 	/**
 	 * A visual style of focused element's border or outline.
 	 */
-	--ck-focus-ring: 1px solid var(--ck-color-border-focus);
+	--ck-focus-ring: 1px solid var(--ck-color-focus-border);
 }

+ 2 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -8,11 +8,10 @@
 
 :root {
 	--ck-widget-outline-thickness: 3px;
-
 	--ck-color-widget-border-blurred: #ddd;
 	--ck-color-widget-border-hover: #FFD25C;
 	--ck-color-widget-editable-focused-background: var(--ck-color-base-background),
-};
+}
 
 .ck-widget {
 	margin: var(--ck-spacing-standard) 0;
@@ -20,7 +19,7 @@
 
 	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
-		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-border-focus);
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
 	}
 
 	@nest .ck-editor__editable.ck-blurred &.ck-widget_selected {