8
0
فهرست منبع

Merge pull request #139 from ckeditor/t/135

Other: Removed the "generic" layer of the theme to simplify it and improve the maintainability. Closes #135.

BREAKING CHANGE: The `.ck-editor-toolbar` CSS class has been removed.
BREAKING CHANGE: Various CSS variables (mostly colors) have been removed. Please make sure your code uses the latest theme API.
BREAKING CHANGE: From now on there's only one subset of the theme, aligned to the default look of CKEditor 5.
Aleksander Nowodzinski 7 سال پیش
والد
کامیت
0a87a15c75

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

@@ -35,15 +35,15 @@
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 	--ck-color-button-default-disabled-border: var(--ck-custom-border);
 
-	--ck-color-button-on-background: var(--ck-custom-foreground);
-	--ck-color-button-on-border: var(--ck-custom-border);
-	--ck-color-button-on-focus-background: hsl(255, 4%, 21%);
-	--ck-color-button-on-focus-border: hsl(0, 0%, 20%);
-	--ck-color-button-on-active-background: hsl(255, 4%, 20%);
-	--ck-color-button-on-active-border: hsl(300, 1%, 19%);
-	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
-	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
-	--ck-color-button-on-disabled-border: var(--ck-custom-border);
+	--ck-color-button-on-background: hsl(0, 0%, 24%);
+	--ck-color-button-on-border: transparent;
+	--ck-color-button-on-focus-background: hsl(0, 0%, 21%);
+	--ck-color-button-on-focus-border: transparent;
+	--ck-color-button-on-active-background: hsl(0, 0%, 15%);
+	--ck-color-button-on-active-border: transparent;
+	--ck-color-button-on-active-shadow: hsl(0, 0%, 18%);
+	--ck-color-button-on-disabled-background: transparent;
+	--ck-color-button-on-disabled-border: transparent;
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-border: hsl(168, 60%, 55%);
@@ -95,20 +95,8 @@
 
 	/* -- Overrides the default colors used by the editor --------------------------------------- */
 
-	--ck-color-editor-border: var(--ck-custom-background);
-	--ck-color-editor-toolbar-background: var(--ck-custom-background);
-
-	--ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 24%);
-	--ck-color-editor-toolbar-button-on-border: transparent;
-	--ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%);
-	--ck-color-editor-toolbar-button-on-focus-border: transparent;
-	--ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%);
-	--ck-color-editor-toolbar-button-on-active-border: transparent;
-	--ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%);
-	--ck-color-editor-toolbar-button-on-disabled-background: transparent;
-	--ck-color-editor-toolbar-button-on-disabled-border: transparent;
-
-	--ck-color-editor-dropdown-background: hsl(270, 1%, 33%);
+	--ck-color-base-border: var(--ck-custom-background);
+	--ck-color-dropdown-background: hsl(270, 1%, 33%);
 
 	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
 

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

@@ -102,15 +102,15 @@ The file containing custom variables will be named `custom.css` and it will look
 	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 	--ck-color-button-default-disabled-border: var(--ck-custom-border);
 
-	--ck-color-button-on-background: var(--ck-custom-foreground);
-	--ck-color-button-on-border: var(--ck-custom-border);
-	--ck-color-button-on-focus-background: hsl(255, 4%, 21%);
-	--ck-color-button-on-focus-border: hsl(0, 0%, 20%);
-	--ck-color-button-on-active-background: hsl(255, 4%, 20%);
-	--ck-color-button-on-active-border: hsl(300, 1%, 19%);
-	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
-	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
-	--ck-color-button-on-disabled-border: var(--ck-custom-border);
+	--ck-color-button-on-background: hsl(0, 0%, 24%);
+	--ck-color-button-on-border: transparent;
+	--ck-color-button-on-focus-background: hsl(0, 0%, 21%);
+	--ck-color-button-on-focus-border: transparent;
+	--ck-color-button-on-active-background: hsl(0, 0%, 15%);
+	--ck-color-button-on-active-border: transparent;
+	--ck-color-button-on-active-shadow: hsl(0, 0%, 18%);
+	--ck-color-button-on-disabled-background: transparent;
+	--ck-color-button-on-disabled-border: transparent;
 
 	--ck-color-button-action-background: hsl(168, 76%, 42%);
 	--ck-color-button-action-border: hsl(168, 60%, 55%);
@@ -152,7 +152,7 @@ The file containing custom variables will be named `custom.css` and it will look
 
 	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
 
-	--ck-color-toolbar-background: var(--ck-custom-foreground);
+	--ck-color-toolbar-background: var(--ck-custom-background);
 	--ck-color-toolbar-border: var(--ck-custom-border);
 
 	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
@@ -162,20 +162,8 @@ The file containing custom variables will be named `custom.css` and it will look
 
 	/* -- Overrides the default colors used by the editor --------------------------------------- */
 
-	--ck-color-editor-border: var(--ck-custom-background);
-	--ck-color-editor-toolbar-background: var(--ck-custom-background);
-
-	--ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 24%);
-	--ck-color-editor-toolbar-button-on-border: transparent;
-	--ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%);
-	--ck-color-editor-toolbar-button-on-focus-border: transparent;
-	--ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%);
-	--ck-color-editor-toolbar-button-on-active-border: transparent;
-	--ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%);
-	--ck-color-editor-toolbar-button-on-disabled-background: transparent;
-	--ck-color-editor-toolbar-button-on-disabled-border: transparent;
-
-	--ck-color-editor-dropdown-background: hsl(270, 1%, 33%);
+	--ck-color-base-border: var(--ck-custom-background);
+	--ck-color-dropdown-background: hsl(270, 1%, 33%);
 
 	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
 

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

@@ -81,7 +81,7 @@
 
 		/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
 
-		--ck-color-toolbar-background: var(--ck-custom-foreground);
+		--ck-color-toolbar-background: var(--ck-custom-background);
 		--ck-color-toolbar-border: var(--ck-custom-border);
 
 		/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
@@ -91,20 +91,19 @@
 
 		/* -- Overrides the default colors used by the editor --------------------------------------- */
 
-		--ck-color-editor-border: var(--ck-custom-background);
-		--ck-color-editor-toolbar-background: var(--ck-custom-background);
+		--ck-color-base-border: var(--ck-custom-background);
 
-		--ck-color-editor-toolbar-button-on-background: hsl(0, 0%, 18%);
-		--ck-color-editor-toolbar-button-on-border: transparent;
-		--ck-color-editor-toolbar-button-on-focus-background: hsl(0, 0%, 21%);
-		--ck-color-editor-toolbar-button-on-focus-border: transparent;
-		--ck-color-editor-toolbar-button-on-active-background: hsl(0, 0%, 15%);
-		--ck-color-editor-toolbar-button-on-active-border: transparent;
-		--ck-color-editor-toolbar-button-on-active-shadow: hsl(0, 0%, 18%);
-		--ck-color-editor-toolbar-button-on-disabled-background: transparent;
-		--ck-color-editor-toolbar-button-on-disabled-border: transparent;
+		--ck-color-button-on-background: hsl(0, 0%, 18%);
+		--ck-color-button-on-border: transparent;
+		--ck-color-button-on-focus-background: hsl(0, 0%, 21%);
+		--ck-color-button-on-focus-border: transparent;
+		--ck-color-button-on-active-background: hsl(0, 0%, 15%);
+		--ck-color-button-on-active-border: transparent;
+		--ck-color-button-on-active-shadow: hsl(0, 0%, 18%);
+		--ck-color-button-on-disabled-background: transparent;
+		--ck-color-button-on-disabled-border: transparent;
 
-		--ck-color-editor-dropdown-background: hsl(270, 1%, 33%);
+		--ck-color-editor-background: hsl(270, 1%, 33%);
 
 		/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
 

+ 0 - 6
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -53,7 +53,6 @@
 
 		<div id="button-icon-custom"></div>
 
-		<br/>
 		<br/>
 
 		<div id="button-icon-states"></div>
@@ -68,7 +67,6 @@
 
 	<h3>Button: Tooltip</h3>
 	<div id="button-tooltip" class="ck-reset_all"></div>
-<hr/>
 
 <h2>Dropdown</h2>
 
@@ -78,8 +76,6 @@
 	<h3>ButtonDropdown</h3>
 	<div id="button-dropdown" class="ck-reset_all"></div>
 
-<hr/>
-
 <h2>Toolbar</h2>
 
 	<h3>Toolbar: Text</h3>
@@ -100,8 +96,6 @@
 	<h3>Toolbar: Multi-row</h3>
 	<div id="toolbar-multi-row" class="ck-reset_all"></div>
 
-<hr/>
-
 <h2>Inputs</h2>
 
 	<h3>Labeled</h3>

+ 111 - 106
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -95,19 +95,19 @@ function renderIcon() {
 function renderButton() {
 	// --- States ------------------------------------------------------------
 
-	ui.buttonStates.add( button( {
-		label: 'State: normal (none)',
-	} ) );
-
-	ui.buttonStates.add( button( {
-		label: 'State: disabled',
-		isEnabled: false
-	} ) );
-
-	ui.buttonStates.add( button( {
-		label: 'State: on',
-		isOn: true
-	} ) );
+	ui.buttonStates.add( toolbar( [
+		button( {
+			label: 'State: normal (none)',
+		} ),
+		button( {
+			label: 'State: disabled',
+			isEnabled: false
+		} ),
+		button( {
+			label: 'State: on',
+			isOn: true
+		} )
+	] ) );
 
 	// --- Types ------------------------------------------------------------
 
@@ -115,9 +115,9 @@ function renderButton() {
 	const roundedButton = button( { label: 'Rounded corners' } );
 	const boldButton = button( { label: 'Bold text' } );
 
-	ui.buttonTypes.add( actionButton );
-	ui.buttonTypes.add( roundedButton );
-	ui.buttonTypes.add( boldButton );
+	ui.buttonTypes.add( toolbar( [
+		actionButton, roundedButton, boldButton
+	] ) );
 
 	// TODO: It requires model interface.
 	actionButton.element.classList.add( 'ck-button-action' );
@@ -130,59 +130,50 @@ function renderButton() {
 
 	// --- Icon ------------------------------------------------------------
 
-	ui.buttonIcon.add( button( {
-		label: 'Bold',
-		icon: boldIcon
-	} ) );
+	ui.buttonIcon.add( toolbar( [
+		button( {
+			label: 'Bold',
+			icon: boldIcon
+		} )
+	] ) );
 
 	const styledButton = button( {
 		label: 'Button with an icon and custom styles',
 		icon: italicIcon
 	} );
 
-	ui.buttonIconCustom.add( styledButton );
+	ui.buttonIconCustom.add( toolbar( [ styledButton ] ) );
 
 	// TODO: It probably requires model interface.
 	styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
 
-	ui.buttonIconStates.add( button( {
-		label: 'Disabled',
-		icon: boldIcon,
-		isEnabled: false
-	} ) );
-
 	const disabledActionButton = button( {
 		label: 'Disabled action',
 		icon: boldIcon,
 		isEnabled: false
 	} );
 
-	ui.buttonIconStates.add( disabledActionButton );
+	ui.buttonIconStates.add( toolbar( [
+		button( {
+			label: 'Disabled',
+			icon: boldIcon,
+			isEnabled: false
+		} ),
+		disabledActionButton,
+		button( {
+			label: 'Bold',
+			withText: false,
+			tooltip: true,
+			icon: boldIcon
+		} )
+	] ) );
 
 	// TODO: It requires model interface.
 	disabledActionButton.element.classList.add( 'ck-button-action' );
 
-	ui.buttonIconStates.add( button( {
-		label: 'Bold',
-		withText: false,
-		tooltip: true,
-		icon: boldIcon
-	} ) );
-
 	// --- Responsive ------------------------------------------------------------
 
 	for ( let i = 1; i < 4; i++ ) {
-		ui[ `buttonResponsive${ i }` ].add( button( {
-			label: 'A button',
-			isEnabled: true
-		} ) );
-
-		ui[ `buttonResponsive${ i }` ].add( button( {
-			label: 'Bold',
-			icon: boldIcon,
-			isEnabled: true
-		} ) );
-
 		const notextButton = button( {
 			label: 'Bold',
 			withText: false,
@@ -190,7 +181,18 @@ function renderButton() {
 			icon: boldIcon
 		} );
 
-		ui[ `buttonResponsive${ i }` ].add( notextButton );
+		ui[ `buttonResponsive${ i }` ].add( toolbar( [
+			button( {
+				label: 'A button',
+				isEnabled: true
+			} ),
+			button( {
+				label: 'Bold',
+				icon: boldIcon,
+				isEnabled: true
+			} ),
+			notextButton
+		] ) );
 
 		// TODO: It requires model interface.
 		notextButton.element.classList.add( 'ck-button-action' );
@@ -198,19 +200,20 @@ function renderButton() {
 
 	// --- Tooltip ------------------------------------------------------------
 
-	ui.buttonTooltip.add( button( {
-		label: 'This button has a tooltip (south)',
-		withText: true,
-		tooltip: 'The content of the tooltip',
-	} ) );
-
-	ui.buttonTooltip.add( button( {
-		label: 'This one too – north',
-		withText: true,
-		keystroke: 'Ctrl+N',
-		tooltip: true,
-		tooltipPosition: 'n'
-	} ) );
+	ui.buttonTooltip.add( toolbar( [
+		button( {
+			label: 'This button has a tooltip (south)',
+			withText: true,
+			tooltip: 'The content of the tooltip',
+		} ),
+		button( {
+			label: 'This one too – north',
+			withText: true,
+			keystroke: 'Ctrl+N',
+			tooltip: true,
+			tooltipPosition: 'n'
+		} )
+	] ) );
 }
 
 function renderDropdown() {
@@ -225,53 +228,55 @@ function renderDropdown() {
 		} ) );
 	} );
 
-	ui.listDropdown.add( listDropdown( {
-		label: 'Normal state',
-		isEnabled: true,
-		items: collection
-	} ) );
-
-	ui.listDropdown.add( listDropdown( {
-		label: 'Disabled',
-		isEnabled: false,
-		items: collection
-	} ) );
-
-	ui.buttonDropdown.add( toolbarDropdown( {
-		label: 'Normal state',
-		isEnabled: true,
-		buttons: [
-			button( {
-				withText: false,
-				label: 'foo',
-				icon: boldIcon
-			} ),
-			button( {
-				withText: false,
-				label: 'foo',
-				icon: italicIcon
-			} )
-		]
-	} ) );
+	ui.listDropdown.add( toolbar( [
+		listDropdown( {
+			label: 'Normal state',
+			isEnabled: true,
+			items: collection
+		} ),
+		listDropdown( {
+			label: 'Disabled',
+			isEnabled: false,
+			items: collection
+		} )
+	] ) );
 
-	ui.buttonDropdown.add( toolbarDropdown( {
-		label: 'Disabled',
-		isEnabled: false,
-		buttons: [
-			button( {
-				withText: false,
-				isEnabled: false,
-				label: 'foo',
-				icon: boldIcon
-			} ),
-			button( {
-				withText: false,
-				isEnabled: false,
-				label: 'foo',
-				icon: italicIcon
-			} )
-		]
-	} ) );
+	ui.buttonDropdown.add( toolbar( [
+		toolbarDropdown( {
+			label: 'Normal state',
+			isEnabled: true,
+			buttons: [
+				button( {
+					withText: false,
+					label: 'foo',
+					icon: boldIcon
+				} ),
+				button( {
+					withText: false,
+					label: 'foo',
+					icon: italicIcon
+				} )
+			]
+		} ),
+		toolbarDropdown( {
+			label: 'Disabled',
+			isEnabled: false,
+			buttons: [
+				button( {
+					withText: false,
+					isEnabled: false,
+					label: 'foo',
+					icon: boldIcon
+				} ),
+				button( {
+					withText: false,
+					isEnabled: false,
+					label: 'foo',
+					icon: italicIcon
+				} )
+			]
+		} )
+	] ) );
 }
 
 function renderToolbar() {

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

@@ -13,7 +13,6 @@
 				border-bottom-right-radius: 0;
 			}
 
-			background: var(--ck-color-editor-toolbar-background);
 			border-bottom-width: 0;
 		}
 
@@ -38,6 +37,6 @@
 	}
 
 	&:not(.ck-focused) {
-		border-color: var(--ck-color-editor-border);
+		border-color: var(--ck-color-base-border);
 	}
 }

+ 0 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -6,10 +6,6 @@
 .ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
 
-	& .ck-button {
-		border-width: 0;
-	}
-
 	&:focus {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
 		outline: none;

+ 0 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -11,10 +11,6 @@
 .ck-link-actions {
 	padding: var(--ck-spacing-standard);
 
-	& .ck-button {
-		border: 0;
-	}
-
 	& .ck-button.ck-link-actions__preview {
 		padding-left: 0;
 		padding-right: 0;
@@ -24,7 +20,6 @@
 		&:focus,
 		&:active {
 			background: none;
-			border: 0;
 		}
 
 		&:active {

+ 0 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -6,10 +6,6 @@
 .ck-link-form {
 	padding: var(--ck-spacing-standard);
 
-	& .ck-button {
-		border-width: 0;
-	}
-
 	&:focus {
 		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
 		outline: none;

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

@@ -14,8 +14,6 @@ a.ck-button {
 	@mixin ck-button-colors --ck-color-button-default;
 	@mixin ck-rounded-corners;
 
-	border-width: 1px;
-	border-style: solid;
 	white-space: nowrap;
 	cursor: default;
 	vertical-align: middle;
@@ -33,9 +31,15 @@ a.ck-button {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 
+	/* Avoid flickering when the foucs border shows up. */
+	border: 1px solid transparent;
+
 	&:focus {
 		@mixin ck-focus-ring;
 		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+
+		/* Disable border part of the focus ring for the buttons. It is too much. */
+		border-color: transparent;
 	}
 
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */

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

@@ -29,41 +29,14 @@
 	}
 }
 
-.ck-editor-toolbar {
-	& .ck-button,
-	& .ck-button:focus {
-		border-width: 0;
-	}
-
-	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/120 */
-	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/131 */
-	& > .ck-button,
-	& > .ck-dropdown > .ck-button,
-	& > .ck-file-dialog-button > .ck-button,
-	& > .ck-dropdown > .ck-splitbutton > .ck-button {
-		&:not(:hover):not(:focus):not(.ck-on),
-		&.ck-disabled {
-			background: transparent;
-		}
-
-		&.ck-on {
-			@mixin ck-button-colors --ck-color-editor-toolbar-button-on;
-		}
-	}
-
-	@nest .ck-toolbar-container & {
-		background: var(--ck-color-editor-toolbar-background);
-	}
-}
-
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
-.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
+.ck-toolbar-container[class*="arrow_n"] {
 	&::after {
 		border-bottom-color: var(--ck-color-base-foreground);
 	}
 }
 
-.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
+.ck-toolbar-container[class*="arrow_s"] {
 	&::after {
 		border-top-color: var(--ck-color-base-foreground);
 	}

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

@@ -8,6 +8,7 @@
 .ck-toolbar {
 	@mixin ck-rounded-corners;
 
+	background: var(--ck-color-toolbar-background);
 	padding: 0 var(--ck-spacing-small);
 	border: 1px solid var(--ck-color-toolbar-border);
 

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

@@ -23,35 +23,23 @@
 
 	/* -- 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-background: 						transparent;
 	--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: 								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-default-disabled-background: 				transparent;
+
+	--ck-color-button-on-background: 							hsl(0, 0%, 87%);
+	--ck-color-button-on-focus-background: 						hsl(0, 0%, 77%);
+	--ck-color-button-on-active-background: 					hsl(0, 0%, 73%);
+	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
+	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
 
 	--ck-color-button-action-background: 						var(--ck-color-base-action);
-	--ck-color-button-action-border: 							var(--ck-color-base-action);
 	--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 ------------------------------------------------------------------------------ */
@@ -85,7 +73,7 @@
 
 	/* -- Toolbar ------------------------------------------------------------------------------- */
 
-	--ck-color-toolbar-background: 								var(--ck-color-base-background);
+	--ck-color-toolbar-background: 								var(--ck-color-base-foreground);
 	--ck-color-toolbar-border: 									var(--ck-color-base-border);
 
 	/* -- Tooltip ------------------------------------------------------------------------------- */
@@ -93,23 +81,6 @@
 	--ck-color-tooltip-background: 								var(--ck-color-base-text);
 	--ck-color-tooltip-text: 									var(--ck-color-base-background);
 
-	/* -- Editor -------------------------------------------------------------------------------- */
-
-	--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: 			hsl(0, 0%, 87%);
-	--ck-color-editor-toolbar-button-on-border: 				transparent;
-	--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: 		hsl(0, 0%, 73%);
-	--ck-color-editor-toolbar-button-on-active-border: 			transparent;
-	--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: 						hsl(0, 0%, 76%);

+ 0 - 4
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css

@@ -11,18 +11,15 @@
  */
 @define-mixin ck-button-colors $prefix {
 	background: var($(prefix)-background);
-	border-color: var($(prefix)-border);
 
 	&:not(.ck-disabled) {
 		&:hover,
 		&:focus {
 			background: var($(prefix)-focus-background);
-			border-color: var($(prefix)-focus-border);
 		}
 
 		&:active {
 			background: var($(prefix)-active-background);
-			border-color: var($(prefix)-active-border);
 			box-shadow: inset 0 2px 2px var($(prefix)-active-shadow);
 		}
 	}
@@ -30,6 +27,5 @@
 	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
 	&.ck-disabled {
 		background: var($(prefix)-disabled-background);
-		border-color: var($(prefix)-disabled-border);
 	}
 }