8
0
Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
3ab3b06cdb

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

@@ -4,70 +4,70 @@
  */
 
 :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-active-focus:								#0e7ee2;
+	--ck-color-base-foreground: 								hsl(0, 0%, 97%);
+	--ck-color-base-background: 								hsl(0, 0%, 100%);
+	--ck-color-base-border: 									hsl(0, 0%, 75%);
+	--ck-color-base-action: 									hsl(104, 44%, 48%);
+	--ck-color-base-focus: 										hsl(209, 92%, 70%);
+	--ck-color-base-text: 										hsl(0, 0%, 20%);
+	--ck-color-base-active: 									hsl(208, 88%, 52%);
+	--ck-color-base-active-focus:								hsl(208, 88%, 47%);
 
 	/* -- Generic colors ------------------------------------------------------------------------ */
 
-	--ck-color-focus-border: 									#48a3f5;
-	--ck-color-focus-shadow:									#78bbf8;
+	--ck-color-focus-border: 									hsl(208, 90%, 62%);
+	--ck-color-focus-shadow:									hsl(209, 90%, 72%);
 	--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: 									hsla(0, 0%, 0%, 0.2);
+	--ck-color-shadow-inner: 									hsla(0, 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);
-	--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-default-focus-background: 				hsl(0, 0%, 90%);
+	--ck-color-button-default-focus-border: 					hsl(0, 0%, 65%);
+	--ck-color-button-default-active-background: 				hsl(0, 0%, 85%);
+	--ck-color-button-default-active-border: 					hsl(0, 0%, 60%);
+	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
+	--ck-color-button-default-disabled-background: 				hsl(0, 0%, 100%);
+	--ck-color-button-default-disabled-border: 					hsl(0, 0%, 78%);
 
 	--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-on-border: 								hsl(0, 0%, 72%);
+	--ck-color-button-on-focus-background: 						hsl(0, 0%, 87%);
+	--ck-color-button-on-focus-border: 							hsl(0, 0%, 62%);
+	--ck-color-button-on-active-background: 					hsl(0, 0%, 82%);
+	--ck-color-button-on-active-border: 						hsl(0, 0%, 57%);
+	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 72%);
+	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 100%);
+	--ck-color-button-on-disabled-border: 						hsl(0, 0%, 75%);
 
 	--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-border: 							hsl(104, 44%, 39%);
+	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
+	--ck-color-button-action-focus-border: 						hsl(104, 44%, 35%);
+	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
+	--ck-color-button-action-active-border: 					hsl(104, 44%, 33%);
+	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
+	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
+	--ck-color-button-action-disabled-border: 					hsl(104, 44%, 38%);
 	--ck-color-button-action-text: 								var(--ck-color-base-background);
 
 	/* -- Dropdown ------------------------------------------------------------------------------ */
 
 	--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-dropdown-symbol: 								hsl(0, 0%, 44%);
 
 	/* -- Input --------------------------------------------------------------------------------- */
 
 	--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-input-disabled-background: 						hsl(0, 0%, 95%);
+	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);
+	--ck-color-input-disabled-text: 							hsl(0, 0%, 36%);
 
 	/* -- List ---------------------------------------------------------------------------------- */
 
@@ -97,28 +97,28 @@
 	--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-background: 			hsl(0, 0%, 87%);
 	--ck-color-editor-toolbar-button-on-border: 				transparent;
-	--ck-color-editor-toolbar-button-on-focus-background: 		#c5c5c5;
+	--ck-color-editor-toolbar-button-on-focus-background: 		hsl(0, 0%, 77%);
 	--ck-color-editor-toolbar-button-on-focus-border: 			transparent;
-	--ck-color-editor-toolbar-button-on-active-background: 		#b9b9b9;
+	--ck-color-editor-toolbar-button-on-active-background: 		hsl(0, 0%, 73%);
 	--ck-color-editor-toolbar-button-on-active-border: 			transparent;
-	--ck-color-editor-toolbar-button-on-active-shadow: 			#a1a1a1;
-	--ck-color-editor-toolbar-button-on-disabled-background: 	#dedede;
+	--ck-color-editor-toolbar-button-on-active-shadow: 			hsl(0, 0%, 63%);
+	--ck-color-editor-toolbar-button-on-disabled-background: 	hsl(0, 0%, 87%);
 	--ck-color-editor-toolbar-button-on-disabled-border: 		transparent;
 
 	--ck-color-editor-dropdown-background: 						var(--ck-color-base-background);
 
 	/* -- Engine -------------------------------------------------------------------------------- */
 
-	--ck-color-engine-placeholder-text: 						#c2c2c2;
+	--ck-color-engine-placeholder-text: 						hsl(0, 0%, 76%);
 
 	/* -- Block quote --------------------------------------------------------------------------- */
 
-	--ck-color-block-quote-border:		 						#ccc;
+	--ck-color-block-quote-border:		 						hsl(0, 0%, 80%);
 
 	/* -- Upload -------------------------------------------------------------------------------- */
 
-	--ck-color-upload-bar-background:		 					#6ab5f9;
-	--ck-color-upload-infinite-background:		 				rgba(0,0,0,0.1);
+	--ck-color-upload-bar-background:		 					hsl(209, 92%, 70%);
+	--ck-color-upload-infinite-background:		 				hsla(0, 0%, 0%, 0.1);
 }

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

@@ -33,8 +33,8 @@
 	& .ck-editable {
 		border: 1px solid transparent;
 
-		/*The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
-		These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.*/
+		/* The :focus style is applied before .ck-editable_focused class is rendered in the view.
+		These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
 		&.ck-editable_focused,
 		&:focus {
 			@mixin ck-focus-ring;