@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-style/stylegrid.css

A bright theme for CKEditor 5.

/*
 * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

:root {
	--ck-style-panel-button-width: 120px;
	--ck-style-panel-button-height: 80px;
	--ck-style-panel-button-label-background: hsl(0, 0%, 94.1%);
	--ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%);
	--ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%);
}

.ck.ck-style-panel .ck-style-grid {
	row-gap: var(--ck-spacing-large);
	column-gap: var(--ck-spacing-large);

	& .ck-style-grid__button {
		--ck-color-button-default-hover-background: var(--ck-color-base-background);
		--ck-color-button-default-active-background: var(--ck-color-base-background);

		padding: 0;
		width: var(--ck-style-panel-button-width);
		height: var(--ck-style-panel-button-height);

		/* Let default .ck-button :focus styles apply */
		&:not(:focus) {
			border: 1px solid var(--ck-color-base-border);
		}

		& .ck-button__label {
			height: 22px;
			line-height: 22px;
			width: 100%;
			padding: 0 var(--ck-spacing-medium);
			overflow: hidden;
			text-overflow: ellipsis;
			flex-shrink: 0;
		}

		& .ck-style-grid__button__preview {
			width: 100%;
			overflow: hidden;
			opacity: .9;

			padding: var(--ck-spacing-medium);
			background: var(--ck-color-base-background);
			border: 2px solid var(--ck-color-base-background);
		}

		&.ck-disabled {
			--ck-color-button-default-disabled-background: var(--ck-color-base-foreground);

			/* Let default .ck-button :focus styles apply */
			&:not(:focus) {
				border-color: var(--ck-style-panel-button-label-background);
			}

			& .ck-style-grid__button__preview {
				opacity: .4;

				border-color: var(--ck-color-base-foreground);
				filter: saturate(.3);
			}
		}

		&.ck-on {
			border-color: var(--ck-color-base-active);

			& .ck-button__label {
				box-shadow: 0 -1px 0 var(--ck-color-base-active);
				z-index: 1; /* Stay on top of the preview with the shadow. */
			}

			&:hover {
				border-color: var(--ck-color-base-active-focus);
			}
		}

		&:not(.ck-on) {
			& .ck-button__label {
				background: var(--ck-style-panel-button-label-background);
			}

			&:hover .ck-button__label {
				background: var(--ck-style-panel-button-hover-label-background);
			}
		}

		&:hover:not(.ck-disabled):not(.ck-on) {
			border-color: var(--ck-style-panel-button-hover-border-color);

			& .ck-style-grid__button__preview {
				opacity: 1;
			}
		}
	}
}