@ckeditor/ckeditor5-comments 39.0.1 → 40.0.0

package/theme/comment.css

@@ -3,7 +3,8 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 :root {
@@ -41,7 +42,7 @@
 
 			/* Half width of line. */
 			- 2px
-			);
+		);
 		width: 4px;
 		height: 100%;
 		background-color: var(--ck-color-comment-separator);
@@ -68,48 +69,16 @@
 	}
 }
 
-.ck .ck-comment--info {
-	& .ck-comment__content {
-		font-style: italic;
-	}
-}
-
-.ck .ck-comment__main {
-	& .ck-comment__input-wrapper {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		transition: all 300ms linear;
-
-		& .ck-comment__input {
-			padding: 0;
-		}
-	}
-}
-
 .ck .ck-comment__content {
 	word-break: break-word;
 }
 
-.ck .ck-comment__user {
-	/* Display user above vertical line. */
-	z-index: var(--ck-z-default);
-}
-
-	/* We need specificity 030 to beat styles in `commentinput.css`. */
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
-	background: var(--ck-color-base-action);
-	color: white;
-
-	&:hover {
-		background: var(--ck-color-button-save);
+.ck .ck-comment--info {
+	& .ck-comment__content {
+		font-style: italic;
 	}
 }
 
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel {
-	color: var(--ck-color-text);
-}
-
 /* Common styles for typography inside comment element and editable input.
 We are styling resetting list-style because of parent <ul> element. */
 .ck .ck-comment,
@@ -139,6 +108,38 @@ We are styling resetting list-style because of parent <ul> element. */
 	}
 }
 
+.ck .ck-comment__main {
+	& .ck-comment__input-wrapper {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		transition: all 300ms linear;
+
+		& .ck-comment__input {
+			padding: 0;
+		}
+	}
+}
+
+.ck .ck-comment__user {
+	/* Display user above vertical line. */
+	z-index: var(--ck-z-default);
+}
+
+/* We need specificity 030 to beat styles in `commentinput.css`. */
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
+	background: var(--ck-color-base-action);
+	color: hsl(0, 0%, 100%);
+
+	&:hover {
+		background: var(--ck-color-button-save);
+	}
+}
+
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel {
+	color: var(--ck-color-text);
+}
+
 .ck .ck-comment__external {
 	font-style: italic;
 	color: var(--ck-color-annotation-info);
@@ -167,6 +168,6 @@ We are styling resetting list-style because of parent <ul> element. */
 			& .ck-button__label {
 				margin: 0 var(--ck-spacing-large);
 			}
-	 	}
+		}
 	}
 }

package/theme/commentinput.css

@@ -3,7 +3,8 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 .ck .ck-comment__input-container {

package/theme/commentmarker.css

@@ -3,7 +3,8 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 :root {
@@ -28,6 +29,11 @@
 .ck-comment-marker--active {
 	background: var(--ck-color-comment-marker-active);
 
+	/* See #2469. Inactive comment marker inside an active one should be highlighted too. */
+	& .ck-comment-marker {
+		background: var(--ck-color-comment-marker-active);
+	}
+
 	&.ck-widget {
 		border-color: var(--ck-color-comment-marker-active);
 
@@ -36,9 +42,4 @@
 			background-color: var(--ck-color-comment-marker);
 		}
 	}
-
-	/* See #2469. Inactive comment marker inside an active one should be highlighted too. */
-	& .ck-comment-marker {
-		background: var(--ck-color-comment-marker-active);
-	}
 }

package/theme/commentsarchive.css

@@ -3,7 +3,8 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 .ck .ck-comments-archive-dropdown {

package/theme/commentthread.css

@@ -3,15 +3,19 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 :root {
 	--ck-color-thread-remove-background: var(--ck-color-comment-remove-background);
 	--ck-color-comment-count: hsl(210, 52%, 57%);
 
-	--ck-color-thread-header-background: #FDFADF;
-	--ck-color-thread-header-active-background: #FFF4A8;
+	--ck-color-thread-header-background: hsl(54, 88%, 93%);
+	--ck-color-thread-header-active-background: hsl(52, 100%, 83%);
+
+	--ck-color-unlinked-background: hsl(0, 0%, 96%);
+	--ck-color-unlinked-active-background: hsl(0, 0%, 92%);
 }
 
 .ck .ck-thread {
@@ -76,7 +80,7 @@
 			z-index: 2;
 
 			background: var(--ck-color-base-background);
-			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
+			box-shadow: 0 2px 3px hsla(0, 0%, 100%, 0.2);
 			border-radius: 2px;
 			white-space: normal;
 			box-sizing: border-box;
@@ -84,28 +88,6 @@
 	}
 }
 
-/* Handle visibility of vertical line below avatars. */
-.ck .ck-thread__comments .ck-comment__wrapper {
-	&:last-of-type {
-		& .ck-comment::after {
-			opacity: 0;
-		}
-	}
-}
-
-.ck .ck-thread__container {
-	transition: transform 300ms ease;
-}
-
-.ck .ck-thread__comments {
-	position: relative;
-	z-index: var(--ck-z-default);
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	border-radius: var(--ck-border-radius);
-}
-
 .ck .ck-thread__comment-count {
 	/* Make avatar size in the comment smaller than in presence list. */
 	--ck-user-avatar-size: 28px;
@@ -126,21 +108,6 @@
 	}
 }
 
-.ck .ck-thread--active {
-	& .ck-comment__options.ck-dropdown {
-		display: block;
-	}
-
-	& .ck-thread__input {
-		display: block;
-		background-color: var(--ck-color-comment-background);
-	}
-
-	& .ck-thread__header {
-		background-color: var(--ck-color-thread-header-active-background);
-	}
-}
-
 .ck .ck-thread--remove {
 	& .ck-comment {
 		background-color: var(--ck-color-comment-remove-background);
@@ -166,6 +133,66 @@
 	}
 }
 
+/* Handle visibility of vertical line below avatars. */
+.ck .ck-thread__comments .ck-comment__wrapper {
+	&:last-of-type {
+		& .ck-comment::after {
+			opacity: 0;
+		}
+	}
+}
+
+.ck .ck-thread__container {
+	transition: transform 300ms ease;
+}
+
+.ck .ck-thread__comments {
+	position: relative;
+	z-index: var(--ck-z-default);
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	border-radius: var(--ck-border-radius);
+}
+
+.ck .ck-thread__input {
+	/* #1829. Firefox is wrongly rendering flex container width 100% with overflowed (non-spaced) text. */
+	width: calc( 100% - var(--ck-user-avatar-size) );
+	white-space: normal;
+
+	transition: background-color 200ms ease-in-out;
+	border-radius: var(--ck-border-radius);
+
+	/*
+		This is equal to the height of the wrapper when the editor instance is loaded.
+		Editor instance is loaded _after_ the comment view is created,
+		so the min-height is set to avoid jitter.
+	*/
+	min-height: 38px;
+}
+
+.ck .ck-thread--active {
+	& .ck-comment__options.ck-dropdown {
+		display: block;
+	}
+
+	& .ck-thread__input {
+		display: block;
+		background-color: var(--ck-color-comment-background);
+	}
+
+	& .ck-thread__header {
+		background-color: var(--ck-color-thread-header-active-background);
+	}
+}
+
+.ck .ck-thread--unlinked {
+	--ck-color-comment-box-border: var(--ck-color-base-border);
+
+	--ck-color-thread-header-background: var(--ck-color-unlinked-background);
+	--ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
+}
+
 .ck .ck-thread--remove-confirmation {
 	& .ck-thread__container {
 		transform: translate3d( -100%, 0, 0 );
@@ -210,19 +237,3 @@
 		margin: 0;
 	}
 }
-
-.ck .ck-thread__input {
-	/* #1829. Firefox is wrongly rendering flex container width 100% with overflowed (non-spaced) text. */
-	width: calc( 100% - var(--ck-user-avatar-size) );
-	white-space: normal;
-
-	transition: background-color 200ms ease-in-out;
-	border-radius: var(--ck-border-radius);
-
-	/*
-		This is equal to the height of the wrapper when the editor instance is loaded.
-		Editor instance is loaded _after_ the comment view is created,
-		so the min-height is set to avoid jitter.
-	*/
-	min-height: 38px;
-}

package/theme/icons/add-comment.svg

@@ -4,7 +4,7 @@
  CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 
- Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 
 !-->
 

package/theme/icons/comments-archive.svg

@@ -4,7 +4,7 @@
  CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 
- Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 
 !-->
 

package/theme/icons/edit-comment.svg

@@ -4,7 +4,7 @@
  CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 
- Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 
 !-->
 

package/theme/icons/remove-comment.svg

@@ -4,7 +4,7 @@
  CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 
- Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 
 !-->
 

package/theme/sidebar-narrow.css

@@ -3,7 +3,8 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 :root {
@@ -47,14 +48,14 @@
 	height: 16px;
 	background: hsl(0, 0%, 20%);
 	font-weight: bold;
-	color: #fff;
+	color: hsl(0, 0%, 100%);
 	font-size: var(--ck-annotation-counter-number-size);
 	font-family: var(--ck-font-face);
 	right: 0;
 	top: -6px;
 
 	/* Improve visibility of counter number. */
-	text-shadow: -1px 0 2px #444, 1px 0 2px #444;
+	text-shadow: -1px 0 2px hsl(0, 0%, 27%), 1px 0 2px hsl(0, 0%, 27%);
 
 	/* Display number perfectly center of circle. */
 	display: flex;

package/theme/sidebar.css

@@ -3,7 +3,8 @@
  * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
  * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
  *
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */
 
 :root {
@@ -34,17 +35,8 @@
 	box-shadow: var(--ck-color-annotation-wrapper-drop-shadow);
 }
 
-/* Handle case where annotation is inactive and users hover them. */
-.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover {
-	box-shadow: var(--ck-drop-shadow);
-}
-
-.ck.ck-annotation-wrapper--active {
-	box-shadow: var(--ck-drop-shadow-active);
-}
-
-.ck.ck-annotation-wrapper:hover,
-.ck.ck-annotation-wrapper--active {
+.ck.ck-annotation-wrapper--active,
+.ck.ck-annotation-wrapper:hover{
 	& .ck-annotation__actions {
 		opacity: 1;
 
@@ -61,3 +53,12 @@
 		color: var(--ck-color-button-cancel)
 	}
 }
+
+/* Handle case where annotation is inactive and users hover them. */
+.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover {
+	box-shadow: var(--ck-drop-shadow);
+}
+
+.ck.ck-annotation-wrapper--active {
+	box-shadow: var(--ck-drop-shadow-active);
+}