@ckeditor/ckeditor5-theme-lark 38.2.0-alpha.0 → 39.0.0

package/README.md

@@ -4,7 +4,6 @@ CKEditor 5 lark theme
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-theme-lark.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
 [![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
-![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-theme-lark)
 
 This package implements lark theme — the default CKEditor 5 theme.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "38.2.0-alpha.0",
+  "version": "39.0.0",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -9,7 +9,7 @@
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "38.2.0-alpha.0"
+    "@ckeditor/ckeditor5-ui": "39.0.0"
   },
   "engines": {
     "node": ">=16.0.0",

package/theme/ckeditor5-table/tableediting.css

@@ -4,7 +4,7 @@
  */
 
 :root {
-	--ck-color-table-focused-cell-background: hsla(212, 90%, 80%, .3);
+	--ck-color-selector-focused-cell-background: hsla(212, 90%, 80%, .3);
 }
 
 .ck-widget.table {
@@ -13,7 +13,7 @@
 		&.ck-editor__nested-editable.ck-editor__nested-editable_focused,
 		&.ck-editor__nested-editable:focus {
 			/* A very slight background to highlight the focused cell */
-			background: var(--ck-color-table-focused-cell-background);
+			background: var(--ck-color-selector-focused-cell-background);
 
 			/* Fixes the problem where surrounding cells cover the focused cell's border.
 			It does not fix the problem in all places but the UX is improved.

package/theme/ckeditor5-ui/components/colorgrid/colorgrid.css

@@ -33,7 +33,7 @@
 		transition: unset;
 	}
 
-	&.ck-color-table__color-tile_bordered {
+	&.ck-color-selector__color-tile_bordered {
 		box-shadow: 0 0 0 1px var(--ck-color-base-border);
 	}
 

package/theme/ckeditor5-ui/components/colorselector/colorselector.css

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-color-selector {
+	/* View fragment with color grids. */
+	& .ck-color-grids-fragment {
+		& .ck-button.ck-color-selector__remove-color,
+		& .ck-button.ck-color-selector__color-picker {
+			width: 100%;
+		}
+
+		& .ck-button.ck-color-selector__color-picker {
+			padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			&:not(:focus) {
+				border-top: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck.ck-icon {
+				@mixin ck-dir ltr {
+					margin-right: var(--ck-spacing-standard);
+				}
+
+				@mixin ck-dir rtl {
+					margin-left: var(--ck-spacing-standard);
+				}
+			}
+		}
+
+		& label.ck.ck-color-grid__label {
+			font-weight: unset;
+		}
+	}
+
+	/* View fragment with a color picker. */
+	& .ck-color-picker-fragment {
+		& .ck.ck-color-picker {
+			padding: 8px;
+
+			& .hex-color-picker {
+				height: 100px;
+				min-width: 180px;
+
+				&::part(saturation) {
+					border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
+				}
+
+				&::part(hue) {
+					border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
+				}
+
+				&::part(saturation-pointer),
+				&::part(hue-pointer) {
+					width: 15px;
+					height: 15px;
+				}
+			}
+		}
+
+		& .ck.ck-color-selector_action-bar {
+			padding: 0 8px 8px;
+		}
+	}
+}

package/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -83,7 +83,7 @@
 		&.ck-off:active,
 		&.ck-on:active {
 			box-shadow: none;
-			
+
 			&:focus {
 				@mixin ck-box-shadow var(--ck-focus-outer-shadow);
 			}
@@ -119,4 +119,8 @@
 	&.ck-dropdown__panel_nw {
 		border-bottom-right-radius: 0;
 	}
+
+	&:focus {
+		outline: none;
+	}
 }

package/theme/ckeditor5-ui/components/editorui/editorui.css

@@ -58,12 +58,12 @@
 /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
 .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"] {
 	&::after {
-		border-bottom-color: var(--ck-color-base-foreground);
+		border-bottom-color: var(--ck-color-panel-background);
 	}
 }
 
 .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"] {
 	&::after {
-		border-top-color: var(--ck-color-base-foreground);
+		border-top-color: var(--ck-color-panel-background);
 	}
 }

package/theme/ckeditor5-font/fontcolor.css

@@ -1,27 +0,0 @@
-/*
- * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
-
-.ck .ck-button.ck-color-table__remove-color {
-	padding: calc(var(--ck-spacing-standard) / 2 ) var(--ck-spacing-standard);
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-
-	&:not(:focus) {
-		border-bottom: 1px solid var(--ck-color-base-border);
-	}
-
-	& .ck.ck-icon {
-		@mixin ck-dir ltr {
-			margin-right: var(--ck-spacing-standard);
-		}
-
-		@mixin ck-dir rtl {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-}
-