浏览代码

Removed redundant color variables.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
a7838fe3ac

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css

@@ -14,7 +14,7 @@
 			}
 
 			/* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */
-			background: var(--ck-color-editor-toolbar-background);
+			background: var(--ck-color-base-foreground);
 			border-bottom-width: 0;
 		}
 
@@ -34,5 +34,5 @@
 		border-top-right-radius: 0;
 	}
 
-	border: 1px solid var(--ck-color-editor-border);
+	border: 1px solid var(--ck-color-base-border);
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown.css

@@ -41,8 +41,8 @@
 	@mixin ck-rounded-corners;
 	@mixin ck-drop-shadow;
 
-	background: var(--ck-color-dropdown-panel-background);
-	border: 1px solid var(--ck-color-dropdown-panel-border);
+	background: var(--ck-color-base-background);
+	border: 1px solid var(--ck-color-base-border);
 
 	/* Compensate double border from button and from box when positioned below the button. */
 	bottom: 1px;

+ 5 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui.css

@@ -33,7 +33,7 @@
 	& .ck-button {
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.ck-disabled {
-			background: var(--ck-color-editor-toolbar-background);
+			background: var(--ck-color-base-foreground);
 		}
 
 		&.ck-on {
@@ -45,24 +45,24 @@
 		border-width: 1px;
 
 		&:not(:hover):not(:focus):not(.ck-on) {
-			background: var(--ck-color-editor-dropdown-background);
+			background: var(--ck-color-base-background);
 		}
 	}
 
 	@nest .ck-toolbar-container & {
-		background: var(--ck-color-editor-toolbar-background);
+		background: var(--ck-color-base-foreground);
 	}
 }
 
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
 	&:after {
-		border-bottom-color: var(--ck-color-editor-toolbar-background);
+		border-bottom-color: var(--ck-color-base-foreground);
 	}
 }
 
 .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
 	&:after {
-		border-top-color: var(--ck-color-editor-toolbar-background);
+		border-top-color: var(--ck-color-base-foreground);
 	}
 }

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

@@ -12,8 +12,8 @@
 	@mixin ck-rounded-corners;
 	@mixin ck-box-shadow var(--ck-inner-shadow);
 
-	background: var(--ck-color-input-background);
-	border: 1px solid var(--ck-color-input-border);
+	background: var(--ck-color-base-background);
+	border: 1px solid var(--ck-color-base-border);
 	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
 	min-width: 21em;
 

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

@@ -11,7 +11,7 @@
 	@mixin ck-rounded-corners;
 
 	list-style-type: none;
-	background: var(--ck-color-list-background);
+	background: var(--ck-color-base-background);
 }
 
 .ck-list__item {
@@ -21,7 +21,7 @@
 
 	&:hover,
 	&:focus {
-		background: var(--ck-color-list-item-background-hover);
+		background: var(--ck-color-base-foreground);
 	}
 
 	&:focus {
@@ -32,11 +32,11 @@
 }
 
 .ck-list__item_active {
-	background: var(--ck-color-list-item-background-active);
-	color: var(--ck-color-list-item-text-active);
+	background: var(--ck-color-base-active);
+	color: var(--ck-color-base-background);
 
 	&:hover,
 	&:focus {
-		background: var(--ck-color-list-item-background-active-focus);
+		background: var(--ck-color-base-active-focus);
 	}
 }

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

@@ -18,8 +18,8 @@
 
 	min-height: 15px;
 
-	background: var(--ck-color-panel-background);
-	border: 1px solid var(--ck-color-panel-border);
+	background: var(--ck-color-base-background);
+	border: 1px solid var(--ck-color-base-border);
 
 	&.ck-balloon-panel_with-arrow {
 		&:before,
@@ -37,11 +37,11 @@
 		}
 
 		&:before {
-			border-color: transparent transparent var(--ck-color-panel-border) transparent;
+			border-color: transparent transparent var(--ck-color-base-border) transparent;
 		}
 
 		&:after {
-			border-color: transparent transparent var(--ck-color-panel-background) transparent;
+			border-color: transparent transparent var(--ck-color-base-background) transparent;
 			margin-top: var(--ck-balloon-arrow-offset);
 		}
 	}
@@ -53,11 +53,11 @@
 		}
 
 		&:before {
-			border-color: var(--ck-color-panel-border) transparent  transparent;
+			border-color: var(--ck-color-base-border) transparent  transparent;
 		}
 
 		&:after {
-			border-color: var(--ck-color-panel-background) transparent transparent transparent;
+			border-color: var(--ck-color-base-background) transparent transparent transparent;
 			margin-bottom: var(--ck-balloon-arrow-offset);
 		}
 	}

+ 2 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -9,7 +9,7 @@
 	@mixin ck-rounded-corners;
 
 	padding: var(--ck-spacing-small);
-	border: 1px solid var(--ck-color-toolbar-border);
+	border: 1px solid var(--ck-color-base-border);
 
 	/* Allow wrapping toolbar items to the new line. */
 	white-space: initial;
@@ -39,7 +39,7 @@
 	width: 1px;
 	height: calc(1em + 2 * var(--ck-spacing-medium));
 	vertical-align: middle;
-	background: var(--ck-color-toolbar-border);
+	background: var(--ck-color-base-border);
 }
 
 .ck-toolbar__newline {

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

@@ -28,7 +28,7 @@
 		& .ck-tooltip__text::after {
 			top: calc(-1 * var(--ck-tooltip-arrow-size));
 			transform: translateX( -50% );
-			border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
+			border-color: transparent transparent var(--ck-color-base-text) transparent;
 			border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
 		}
 	}
@@ -49,7 +49,7 @@
 		& .ck-tooltip__text::after {
 			bottom: calc(-1 * var(--ck-tooltip-arrow-size));
 			transform: translateX( -50% );
-			border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
+			border-color: var(--ck-color-base-text) transparent transparent transparent;
 			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
 		}
 	}
@@ -60,9 +60,9 @@
 
 	font-size: .9em;
 	line-height: 1.5;
-	color: var(--ck-color-tooltip-text);
+	color: var(--ck-color-base-background);
 	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-	background: var(--ck-color-tooltip-background);
+	background: var(--ck-color-base-text);
 	position: relative;
 	left: -50%;
 

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

@@ -8,20 +8,18 @@
 	--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-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-shadow-drop: 									rgba(0,0,0,.2);
+	--ck-color-shadow-inner: 									rgba(0,0,0,.1);
 
-	/* ----------------------------------------------------------------------------- */
+	/* -- Buttons ------------------------------------------------------------------------------- */
 
 	--ck-color-button-default-background: 						var(--ck-color-base-background);
 	--ck-color-button-default-border: 							var(--ck-color-base-border);
@@ -54,34 +52,17 @@
 	--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);
+	/* -- Dropdown ------------------------------------------------------------------------------ */
+
 	--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);
+	/* -- Input --------------------------------------------------------------------------------- */
+
 	--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);
+	/* -- Editor -------------------------------------------------------------------------------- */
 
 	--ck-color-editor-toolbar-button-on-background: 			#dedede;
 	--ck-color-editor-toolbar-button-on-border: 				transparent;
@@ -92,6 +73,4 @@
 	--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);
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css

@@ -34,7 +34,7 @@
 	/* These are rule inherited by all children elements. */
 	border-collapse: collapse;
 	font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
-	color: var(--ck-color-text);
+	color: var(--ck-color-base-text);
 	text-align: left;
 	white-space: nowrap;
 	cursor: auto;