@ckeditor/ckeditor5-ai/theme/common/aibutton.css

AI features for CKEditor 5.

/*
 * 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-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

:root {
	/* Primary button */
	--ck-ai-button-primary-color: hsla(0, 0%, 100%, 1);
	--ck-ai-button-primary-disabled-color: hsla(0, 0%, 100%, 1);
	--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);

	/* Secondary button */
	--ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
	--ck-ai-button-secondary-disabled-color: hsla(263, 59%, 52%, 0.5);
	--ck-ai-button-secondary-background-color: hsla(0, 0%, 100%, 1);
	--ck-ai-button-secondary-disabled-background-color: hsla(0, 0%, 100%, 0.5);
	--ck-ai-button-secondary-border-color: hsla(262, 51%, 80%, 1);
	--ck-ai-button-secondary-disabled-border-color: hsla(262, 51%, 80%, 0.5);
	--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);
}

.ck.ck-button {
	&.ck-ai-button-primary {
		color: var(--ck-ai-button-primary-color);
		background-color: var(--ck-ai-button-primary-background-color);
		border: 1px solid transparent;

		&:hover {
			background-color: var(--ck-ai-button-primary-hover-background-color);
		}

		&:disabled,
		&.ck-disabled {
			color: var(--ck-ai-button-primary-disabled-color);
			background-color: var(--ck-ai-button-primary-disabled-background-color);

			& > .ck.ck-button__label,
			& > .ck-button__icon {
				opacity: 1;
			}
		}
	}

	&.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);
		}

		&:active,
		&.ck-on {
			background-color: var(--ck-ai-button-secondary-active-background-color);
		}

		&:disabled,
		&.ck-disabled {
			color: var(--ck-ai-button-secondary-disabled-color);
			background-color: var(--ck-ai-button-secondary-disabled-background-color);
			border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);

			& > .ck.ck-button__label,
			& > .ck-button__icon {
				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);
			}
		}

		&.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);
				}
			}
		}

		&:disabled,
		&.ck-disabled {
			color: var(--ck-ai-button-tertiary-disabled-text-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);
		}

		&:disabled,
		&.ck-disabled {
			color: var(--ck-ai-button-tertiary-filled-disabled-color);
			background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);

			& > .ck.ck-button__label,
			& > .ck-button__icon {
				opacity: 1;
			}
		}
	}

	&.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 {
			height: 14px;
			width: 14px;
			margin-right: 4px;
		}
	}
}