@ckeditor/ckeditor5-ai 47.5.0 → 47.6.0-alpha.0

package/theme/aiquickactions/aiquickactionsballoon.css

@@ -44,44 +44,52 @@
 		}
 
 		/* Content wrapper containing the loader, streamable content and mini toolbar. */
-		& .ck-ai-actions-balloon-content-wrapper {
-			@mixin ck-rounded-corners;
+		& .ck-ai-actions-balloon-content {
+			/* Allow the mini toolbar to be positioned absolutely. */
+			position: relative;
 
-			--ck-border-radius: 4px;
+			/* Wrapper containing the loader and streamable content. */
+			& .ck-ai-actions-balloon-content-wrapper {
+				@mixin ck-rounded-corners;
 
-			height: var(--ck-ai-actions-balloon-content-height);
-			border: 1px solid var(--ck-color-base-border);
-			position: relative;
+				--ck-border-radius: 4px;
 
-			/* The content of the balloon that gets streamed. */
-			& .ck-ai-suggestion-streamable-content {
-				overflow-y: auto;
-				word-break: normal;
-				text-wrap: auto;
-				padding: var(--ck-spacing-large);
 				height: var(--ck-ai-actions-balloon-content-height);
-			}
+				border: 1px solid var(--ck-color-base-border);
+
+				/* Clip the streamable content's scrollbars when border-radius is applied. */
+				overflow: hidden;
+
+				/* The content of the balloon that gets streamed. */
+				& .ck-ai-suggestion-streamable-content {
+					overflow-y: auto;
+					word-break: normal;
+					text-wrap: auto;
+					padding: var(--ck-spacing-large);
+					height: 100%;
+				}
 
-			/* The loader of the balloon. */
-			& .ck.ck-ai-suggestion__loader {
-				padding: var(--ck-spacing-large) !important;
-				height: var(--ck-ai-actions-balloon-content-height);
+				/* The loader of the balloon. */
+				& .ck.ck-ai-suggestion__loader {
+					padding: var(--ck-spacing-large) !important;
+					height: var(--ck-ai-actions-balloon-content-height);
 
-				& .ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
-					--ck-ai-spinner-size: 18px;
-				}
+					& .ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
+						--ck-ai-spinner-size: 18px;
+					}
 
-				& .ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
-					--ck-ai-spinner-size: 18px;
-				}
+					& .ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
+						--ck-ai-spinner-size: 18px;
+					}
 
-				& .ck-ai-suggestion__loader-text {
-					margin-left: var(--ck-spacing-medium);
-				}
+					& .ck-ai-suggestion__loader-text {
+						margin-left: var(--ck-spacing-medium);
+					}
 
-				/* Hide the content when the loader is visible. */
-				&:not(.ck-hidden) + .ck-ai-suggestion-streamable-content {
-					display: none;
+					/* Hide the content when the loader is visible. */
+					&:not(.ck-hidden) + .ck-ai-suggestion-streamable-content {
+						display: none;
+					}
 				}
 			}
 

package/theme/aireviewcore/aireviewcore-check-run.css

@@ -146,6 +146,10 @@
 				/* To prevent jumping when visibility of buttons is changing.
 				TODO: probably it will be replaced with different loader UI. */
 				min-height: 30px;
+
+				& .ck-ai_review__check-run-accept-all-button {
+					border: none;
+				}
 			}
 		}
 

package/theme/aireviewcore/aireviewcore.css

@@ -44,16 +44,16 @@
 		span.ck-ai_review-marker_strikethrough {
 			position: relative;
 
+			&.ck-ai_review__change_active {
+				--ck-ai_review-suggestion-color: var(--ck-ai_review-suggestion-color-active);
+			}
+
 			&:before {
 				border-bottom: 3px solid var(--ck-ai_review-suggestion-color);
 				position: absolute;
 				content: "";
 				width: 100%;
 				height: 60%;
-
-				&.ck-ai_review__change_active {
-					--ck-ai_review-suggestion-color: var(--ck-ai_review-suggestion-color-active);
-				}
 			}
 		}
 

package/theme/aitabs/aitabsresizebutton.css

@@ -0,0 +1,14 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * 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-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+.ck.ck-button.ck-ai-tabs__resize {
+	&.ck-on:not(:hover) {
+		background-color: var(--ck-ai-button-tertiary-background-color);
+	}
+}

package/theme/aitranslate/aitranslate.css

@@ -40,6 +40,10 @@
 
 			& .ck-ai_review__check-run-results-header {
 				& .ck-ai_review__check-run-results-header-buttons {
+					& .ck-ai_review__check-run-accept-all-button {
+						border: none;
+					}
+
 					& .ck-ai_review__check-run-toggle-diff-button {
 						display: none;
 						visibility: hidden ;

package/theme/common/aibutton.css

@@ -14,6 +14,7 @@
 	--ck-ai-button-primary-background-color: hsla(263, 59%, 52%, 1);
 	--ck-ai-button-primary-disabled-background-color: hsla(263, 59%, 52%, 0.5);
 	--ck-ai-button-primary-hover-background-color: hsla(263, 59%, 40%, 1);
+	--ck-ai-button-primary-active-background-color: hsla(263, 59%, 40%, 1);
 
 	/* Secondary button */
 	--ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
@@ -25,22 +26,17 @@
 	--ck-ai-button-secondary-hover-background-color: hsla(262, 100%, 96%, 1);
 	--ck-ai-button-secondary-active-background-color: hsla(262, 100%, 96%, 1);
 
-	/* Tertiary text button */
-	--ck-ai-button-tertiary-text-color: hsla(263, 59%, 52%, 1);
-	--ck-ai-button-tertiary-disabled-text-color: hsla(263, 59%, 52%, 0.5);
-	--ck-ai-button-tertiary-text-background-color: transparent;
-	--ck-ai-button-tertiary-text-hover-background-color: hsla(262, 100%, 96%, 1);
-	--ck-ai-button-tertiary-text-hover-color: hsla(0, 0%, 20%, 1);
-
-	/* Tertiary filled button */
-	--ck-ai-button-tertiary-filled-color: hsla(0, 0%, 44%, 1);
-	--ck-ai-button-tertiary-filled-disabled-color: hsla(0, 0%, 44%, 0.5);
-	--ck-ai-button-tertiary-filled-hover-color: hsla(0, 0%, 20%, 1);
-	--ck-ai-button-tertiary-filled-active-color: hsla(263, 59%, 52%, 1);
-	--ck-ai-button-tertiary-filled-background-color: transparent;
-	--ck-ai-button-tertiary-filled-disabled-background-color: hsla(0, 0%, 93%, 1);
-	--ck-ai-button-tertiary-filled-hover-background-color: hsla(262, 100%, 96%, 1);
-	--ck-ai-button-tertiary-filled-active-background-color: hsla(262, 100%, 96%, 1);
+	/* Tertiary button */
+	--ck-ai-button-tertiary-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-button-tertiary-disabled-color: hsla(0, 0%, 44%, 0.5);
+	--ck-ai-button-tertiary-hover-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-button-tertiary-active-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-button-tertiary-background-color: transparent;
+	--ck-ai-button-tertiary-disabled-background-color: transparent;
+	--ck-ai-button-tertiary-hover-background-color: hsla(0, 0%, 94%, 1);
+	--ck-ai-button-tertiary-active-background-color: hsla(262, 100%, 96%, 1);
+	--ck-ai-button-tertiary-hover-active-background-color: hsla(261, 100%, 93%, 1);
+	--ck-ai-button-tertiary-hover-active-color: hsla(263, 59%, 52%, 1);
 }
 
 .ck.ck-button {
@@ -48,9 +44,11 @@
 		color: var(--ck-ai-button-primary-color);
 		background-color: var(--ck-ai-button-primary-background-color);
 		border: 1px solid transparent;
+		gap: var(--ck-spacing-small);
 
-		&:hover {
-			background-color: var(--ck-ai-button-primary-hover-background-color);
+		&:active,
+		&.ck-on {
+			background-color: var(--ck-ai-button-primary-active-background-color);
 		}
 
 		&:disabled,
@@ -63,16 +61,17 @@
 				opacity: 1;
 			}
 		}
+
+		&:hover:not(.ck-disabled) {
+			background-color: var(--ck-ai-button-primary-hover-background-color);
+		}
 	}
 
 	&.ck-ai-button-secondary {
 		color: var(--ck-ai-button-secondary-color);
 		background-color: var(--ck-ai-button-secondary-background-color);
 		border: 1px solid var(--ck-ai-button-secondary-border-color);
-
-		&:hover {
-			background-color: var(--ck-ai-button-secondary-hover-background-color);
-		}
+		gap: var(--ck-spacing-small);
 
 		&:active,
 		&.ck-on {
@@ -90,76 +89,66 @@
 				opacity: 1;
 			}
 		}
-	}
 
-	&.ck-ai-button-tertiary-text {
-		color: var(--ck-ai-button-tertiary-text-color);
-		background-color: var(--ck-ai-button-tertiary-text-background-color);
-		border: none;
-
-		&:hover {
-			background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
-			color: var(--ck-ai-button-tertiary-text-hover-color);
-
-			& > .ck.ck-button__icon {
-				color: var(--ck-ai-button-tertiary-text-hover-color);
-			}
+		&:hover:not(.ck-disabled) {
+			background-color: var(--ck-ai-button-secondary-hover-background-color);
 		}
+	}
 
-		&.ck-on {
-			&:hover {
-				background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
-
-				& > .ck.ck-button__icon {
-					color: var(--ck-ai-button-tertiary-text-hover-color);
-				}
-			}
-		}
+	&.ck-ai-button-tertiary {
+		color: var(--ck-ai-button-tertiary-color);
+		background-color: var(--ck-ai-button-tertiary-background-color);
+		border: none;
+		gap: var(--ck-spacing-small);
 
 		&:disabled,
 		&.ck-disabled {
-			color: var(--ck-ai-button-tertiary-disabled-text-color);
+			color: var(--ck-ai-button-tertiary-disabled-color);
+			background-color: var(--ck-ai-button-tertiary-disabled-background-color);
 
 			& > .ck.ck-button__label,
 			& > .ck-button__icon {
 				opacity: 1;
 			}
 		}
-	}
-
-	&.ck-ai-button-tertiary-filled {
-		color: var(--ck-ai-button-tertiary-filled-color);
-		background-color: var(--ck-ai-button-tertiary-filled-background-color);
-		border: none;
-
-		&:hover {
-			color: var(--ck-ai-button-tertiary-filled-hover-color);
-			background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
-		}
 
 		&:active,
 		&.ck-on {
-			color: var(--ck-ai-button-tertiary-filled-active-color);
-			background-color: var(--ck-ai-button-tertiary-filled-active-background-color);
-		}
+			&:not(.ck-disabled) {
+				color: var(--ck-ai-button-tertiary-active-color);
+				background-color: var(--ck-ai-button-tertiary-active-background-color);
 
-		&:disabled,
-		&.ck-disabled {
-			color: var(--ck-ai-button-tertiary-filled-disabled-color);
-			background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
+				&:hover {
+					color: var(--ck-ai-button-tertiary-hover-active-color);
+					background-color: var(--ck-ai-button-tertiary-hover-active-background-color);
+				}
 
-			& > .ck.ck-button__label,
-			& > .ck-button__icon {
-				opacity: 1;
+				& > .ck.ck-button__icon {
+					color: var(--ck-ai-button-tertiary-active-color);
+				}
 			}
 		}
+
+		/* stylelint-disable-next-line no-descending-specificity */
+		&:hover:not(.ck-disabled, :active, .ck-on) {
+			color: var(--ck-ai-button-tertiary-hover-color);
+			background-color: var(--ck-ai-button-tertiary-hover-background-color);
+		}
+	}
+
+	&.ck-ai-button-primary,
+	&.ck-ai-button-secondary,
+	&.ck-ai-button-tertiary {
+		& .ck.ck-icon.ck-button__icon {
+			--ck-icon-size: 16px;
+		}
 	}
 
 	&.ck-ai-button-stop-generating {
 		min-height: 22px;
 		padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
 
-		.ck.ck-icon.ck-button__icon {
+		& .ck.ck-icon.ck-button__icon {
 			height: 14px;
 			width: 14px;
 			margin-right: 4px;

package/theme/common/aiheader.css

@@ -72,7 +72,7 @@
 			margin-inline-end: var(--ck-spacing-small);
 
 			&:hover {
-				background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+				background-color: var(--ck-ai-button-tertiary-hover-background-color);
 			}
 
 			& > .ck-button__icon {

package/theme/common/aisuggestioncontentparttoolbar.css

@@ -27,7 +27,7 @@
 		color: var(--ck-ai-chat-suggestion-icon-default-color);
 
 		&:hover {
-			background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
+			background-color: var(--ck-ai-button-secondary-hover-background-color);
 			color: var(--ck-ai-background-color-action-button);
 		}
 	}

package/theme/common/aisuggestionstreamablecontent.css

@@ -7,7 +7,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
-.ck.ck-ai-suggestion-streamable-content {
+.ck.ck-content.ck-ai-suggestion-streamable-content {
+	/* Don't inherit padding from page's .ck-content styles because they can be too large for the suggestion preview. */
+	padding: 0;
+
 	/* Keep the content close to the header (headings, paragraphs, blockquotes, etc. have variable margins). */
 	& :first-child {
 		margin-top: 0;