[Draft] Introducing more granular CSS design tokens for UI.

packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css

@@ -3,36 +3,51 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Size */
+	--ck-autocomplete-results-max-height: 200px;
+
+	/* Radius */
+	/* Set to a radius value (e.g. var(--ck-radius-base)) to disable attached-corner behavior and use uniform corners. */
+	--ck-autocomplete-results-uniform-border-radius: var(--ck-border-radius-uniform);
+	--ck-autocomplete-results-border-radius: var(--ck-border-radius-surface-attached);
+
+	/* Border */
+	--ck-autocomplete-results-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
+
+	/* Color */
+	--ck-autocomplete-results-background-color: var(--ck-color-surface-container);
+}
+
 .ck.ck-autocomplete {
 	& > .ck-search__results {
-		border-radius: var(--ck-rounded-corners-radius);
-		box-shadow: var(--ck-drop-shadow), 0 0;
-		max-height: 200px;
+		border-radius: var(--ck-autocomplete-results-border-radius);
+		box-shadow: var(--ck-shadow-surface-floating), 0 0;
+		max-height: var(--ck-autocomplete-results-max-height);
 		overflow-y: auto;
-		background: var(--ck-color-base-background);
-		border: 1px solid var(--ck-color-dropdown-panel-border);
+		background: var(--ck-autocomplete-results-background-color);
+		border: var(--ck-autocomplete-results-border);
 		min-width: auto;
 		position: absolute;
 
 		&.ck-search__results_n {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
+			border-radius: var(--ck-autocomplete-results-uniform-border-radius, var(--ck-border-radius-surface-attached-bottom));
 
 			/* Prevent duplicated borders between the input and the results pane. */
-			margin-bottom: -1px;
+			margin-bottom: calc(-1 * var(--ck-border-width-surface));
 			bottom: 100%;
 		}
 
 		&.ck-search__results_s {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
+			border-radius: var(--ck-autocomplete-results-uniform-border-radius, var(--ck-border-radius-surface-attached-top));
 
 			/* Prevent duplicated borders between the input and the results pane. */
-			margin-top: -1px;
+			margin-top: calc(-1 * var(--ck-border-width-surface));
 			top: 100%;
 			bottom: auto;
 		}
-		z-index: var(--ck-z-panel)
+		/* Backward compatibility: falls back to legacy --ck-z-panel if overridden. */
+		z-index: var(--ck-z-panel, var(--ck-z-overlay))
 	}
 	position: relative
 }

packages/ckeditor5-ui/theme/components/button/button.css

@@ -3,12 +3,48 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	/* Spacing */
+	--ck-button-padding: var(--ck-spacing-control-padding-block);
+
+	/* Radius */
+	--ck-button-border-radius: var(--ck-border-radius-control);
+
+	/* Border */
+	--ck-button-border: var(--ck-border-width-control) solid transparent;
+
+	/* Color */
+	--ck-button-default-background-color: transparent;
+	--ck-button-default-hover-background-color: var(--ck-color-interactive-hover-surface);
+	--ck-button-default-active-background-color: var(--ck-color-interactive-active-surface);
+	--ck-button-default-disabled-background-color: transparent;
+	--ck-button-on-background-color: var(--ck-color-interactive-selected-surface);
+	--ck-button-on-hover-background-color: var(--ck-color-interactive-selected-surface-hover);
+	--ck-button-on-active-background-color: var(--ck-color-interactive-selected-surface-hover);
+	/* Intentionally hardcoded: no matching semantic disabled surface exists yet. */
+	--ck-button-on-disabled-background-color: hsl(211, 15%, 95%);
+	--ck-button-on-text-color: var(--ck-color-interactive-selected-text);
+	--ck-button-action-background-color: var(--ck-color-interactive-primary-surface);
+	--ck-button-action-hover-background-color: var(--ck-color-interactive-primary-surface-hover);
+	--ck-button-action-active-background-color: var(--ck-color-interactive-primary-surface-hover);
+	/* Intentionally hardcoded: a faded variant of the action color with no semantic equivalent yet. */
+	--ck-button-action-disabled-background-color: hsl(104, 44%, 58%);
+	--ck-button-action-text-color: var(--ck-color-interactive-primary-text);
+	--ck-button-save-color: var(--ck-color-feedback-success);
+	--ck-button-cancel-color: var(--ck-color-feedback-warning);
+
+	/* State / meta */
+	--ck-button-focus-border-color: var(--ck-interactive-focus-border-color);
+	/* Backward compatibility: falls back to legacy --ck-disabled-opacity if overridden. */
+	--ck-button-opacity-disabled: var(--ck-disabled-opacity, var(--ck-opacity-disabled))
+}
+
 .ck.ck-button,
 a.ck.ck-button {
-	--ck-button-background: var(--ck-color-button-default-background);
-	--ck-button-hover-background: var(--ck-color-button-default-hover-background);
-	--ck-button-active-background: var(--ck-color-button-default-active-background);
-	--ck-button-disabled-background: var(--ck-color-button-default-disabled-background);
+	--ck-button-background: var(--ck-button-default-background-color);
+	--ck-button-hover-background: var(--ck-button-default-hover-background-color);
+	--ck-button-active-background: var(--ck-button-default-active-background-color);
+	--ck-button-disabled-background: var(--ck-button-default-disabled-background-color);
 
 	background: var(--ck-button-background);
 
@@ -22,16 +58,16 @@ a.ck.ck-button {
 		}
 	}
 
-	border-radius: var(--ck-rounded-corners-radius);
+	border-radius: var(--ck-button-border-radius);
 	white-space: nowrap;
 	cursor: default;
 	vertical-align: middle;
-	padding: var(--ck-spacing-tiny);
+	padding: var(--ck-button-padding);
 	text-align: center;
 
 	/* A very important piece of styling. Go to variable declaration to learn more. */
-	min-width: var(--ck-ui-component-min-height);
-	min-height: var(--ck-ui-component-min-height);
+	min-width: var(--ck-size-control-min-height);
+	min-height: var(--ck-size-control-min-height);
 
 	/* Normalize the height of the line. Removing this will break consistent height
 	among text and text-less buttons (with icons). */
@@ -41,10 +77,10 @@ a.ck.ck-button {
 	font-size: inherit;
 
 	/* Avoid flickering when the foucs border shows up. */
-	border: 1px solid transparent;
+	border: var(--ck-button-border);
 
 	/* Apply some smooth transition to the box-shadow and border. */
-	transition: box-shadow .2s ease-in-out, border .2s ease-in-out;
+	transition: box-shadow var(--ck-transition-duration-control) var(--ck-transition-timing-function-control), border var(--ck-transition-duration-control) var(--ck-transition-timing-function-control);
 
 	/* https://github.com/ckeditor/ckeditor5/issues/3414 */
 	-webkit-appearance: none;
@@ -56,15 +92,15 @@ a.ck.ck-button {
 	align-items: center;
 
 	@media (prefers-reduced-motion: reduce) {
-		transition: none;
+		transition: var(--ck-transition-none);
 	}
 
 	/* stylelint-disable no-descending-specificity */
 	&:active,
 	&:focus {
 		outline: none;
-		border: var(--ck-focus-ring);
-		box-shadow: var(--ck-focus-outer-shadow), 0 0;
+		border-color: var(--ck-button-focus-border-color);
+		box-shadow: var(--ck-interactive-focus-shadow), 0 0;
 	}
 
 	/* Allow icon coloring using the text "color" property. */
@@ -78,7 +114,7 @@ a.ck.ck-button {
 	& .ck-button__label {
 		/* Enable font size inheritance, which allows fluid UI scaling. */
 		font-size: inherit;
-		font-weight: inherit;
+		font-weight: var(--ck-font-weight-ui-inherit);
 		color: inherit;
 		cursor: inherit;
 
@@ -102,11 +138,11 @@ a.ck.ck-button {
 		opacity: .5;
 
 		[dir="ltr"] & {
-			margin-left: var(--ck-spacing-large);
+			margin-left: var(--ck-spacing-control-meta-gap);
 		}
 
 		[dir="rtl"] & {
-			margin-right: var(--ck-spacing-large);
+			margin-right: var(--ck-spacing-control-meta-gap);
 		}
 	}
 
@@ -117,16 +153,16 @@ a.ck.ck-button {
 		&:active,
 		&:focus {
 			/* The disabled button should have a slightly less visible shadow when focused. */
-			box-shadow: var(--ck-focus-disabled-outer-shadow), 0 0;
+			box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
 		}
 
 		& .ck-button__icon {
-			opacity: var(--ck-disabled-opacity);
+			opacity: var(--ck-button-opacity-disabled);
 		}
 
 		/* https://github.com/ckeditor/ckeditor5/issues/3376 */
 		& .ck-button__label {
-			opacity: var(--ck-disabled-opacity);
+			opacity: var(--ck-button-opacity-disabled);
 		}
 
 		& .ck-button__keystroke {
@@ -135,15 +171,15 @@ a.ck.ck-button {
 	}
 
 	&.ck-button_with-text {
-		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+		padding: var(--ck-spacing-control-padding-block) var(--ck-spacing-control-padding-inline);
 
 		& .ck-button__icon {
 			[dir="ltr"] & {
-				margin-right: var(--ck-spacing-medium);
+				margin-right: var(--ck-spacing-control-icon-gap);
 			}
 
 			[dir="rtl"] & {
-				margin-left: var(--ck-spacing-medium);
+				margin-left: var(--ck-spacing-control-icon-gap);
 			}
 		}
 		& .ck-button__label {
@@ -160,20 +196,20 @@ a.ck.ck-button {
 
 	/* A style of the button which is currently on, e.g. its feature is active. */
 	&.ck-on {
-		--ck-button-background: var(--ck-color-button-on-background);
-		--ck-button-hover-background: var(--ck-color-button-on-hover-background);
-		--ck-button-active-background: var(--ck-color-button-on-active-background);
-		--ck-button-disabled-background: var(--ck-color-button-on-disabled-background);
+		--ck-button-background: var(--ck-button-on-background-color);
+		--ck-button-hover-background: var(--ck-button-on-hover-background-color);
+		--ck-button-active-background: var(--ck-button-on-active-background-color);
+		--ck-button-disabled-background: var(--ck-button-on-disabled-background-color);
 
-		color: var(--ck-color-button-on-color);
+		color: var(--ck-button-on-text-color);
 	}
 
 	&.ck-button-save {
-		color: var(--ck-color-button-save);
+		color: var(--ck-button-save-color);
 	}
 
 	&.ck-button-cancel {
-		color: var(--ck-color-button-cancel);
+		color: var(--ck-button-cancel-color);
 	}
 
 	/* stylelint-disable no-descending-specificity */
@@ -196,15 +232,15 @@ a.ck.ck-button {
 
 .ck.ck-button-action,
 a.ck.ck-button-action {
-	--ck-button-background: var(--ck-color-button-action-background);
-	--ck-button-hover-background: var(--ck-color-button-action-hover-background);
-	--ck-button-active-background: var(--ck-color-button-action-active-background);
-	--ck-button-disabled-background: var(--ck-color-button-action-disabled-background);
+	--ck-button-background: var(--ck-button-action-background-color);
+	--ck-button-hover-background: var(--ck-button-action-hover-background-color);
+	--ck-button-active-background: var(--ck-button-action-active-background-color);
+	--ck-button-disabled-background: var(--ck-button-action-disabled-background-color);
 
-	color: var(--ck-color-button-action-text);
+	color: var(--ck-button-action-text-color);
 }
 
 .ck.ck-button-bold,
 a.ck.ck-button-bold {
-	font-weight: bold;
+	font-weight: var(--ck-font-weight-ui-emphasis);
 }

packages/ckeditor5-ui/theme/components/button/listitembutton.css

@@ -4,22 +4,30 @@
  */
 
 
+:root {
+	/* Spacing */
+	--ck-list-item-button-padding: var(--ck-spacing-control-padding-block) calc(2 * var(--ck-spacing-control-padding-inline));
+
+	/* Radius */
+	--ck-list-item-button-border-radius: 0;
+}
+
 .ck.ck-button.ck-list-item-button {
-	padding: var(--ck-spacing-tiny) calc(2 * var(--ck-spacing-standard));
+	padding: var(--ck-list-item-button-padding);
 
 	&,
 	&.ck-on {
-		background: var(--ck-color-list-background);
+		background: var(--ck-list-background-color);
 		color: var(--ck-color-text);
 	}
 
 	&:has(.ck-list-item-button__check-holder) {
 		[dir="ltr"] & {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
@@ -32,7 +40,7 @@
 	&.ck-button.ck-on:hover,
 	&.ck-on:not(.ck-list-item-button_toggleable),
 	&.ck-on:hover {
-		background: var(--ck-color-list-button-hover-background);
+		background: var(--ck-list-button-hover-background-color);
 
 		&:not(.ck-disabled) {
 			color: var(--ck-color-text);
@@ -43,7 +51,7 @@
 .ck.ck-list-item-button {
 	min-height: unset;
 	width: 100%;
-	border-radius: 0;
+	border-radius: var(--ck-list-item-button-border-radius);
 
 	[dir="ltr"] & {
 		text-align: left;
@@ -55,11 +63,11 @@
 
 	&.ck-list-item-button_toggleable {
 		[dir="ltr"] & {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}
 
@@ -69,11 +77,11 @@
 		height: .9em;
 
 		[dir="ltr"] & {
-			margin-right: var(--ck-spacing-small);
+			margin-right: var(--ck-spacing-control-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			margin-left: var(--ck-spacing-small);
+			margin-left: var(--ck-spacing-control-padding-inline-compact);
 		}
 	}