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

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

@@ -3,13 +3,20 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-autocomplete-results-border-radius: var(--ck-border-radius-surface-attached);
+	--ck-autocomplete-results-shadow: var(--ck-shadow-surface-floating);
+	--ck-autocomplete-results-max-height: var(--ck-size-autocomplete-max-height);
+	--ck-color-autocomplete-results-background: 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-autocomplete-results-shadow), 0 0;
+		max-height: var(--ck-autocomplete-results-max-height);
 		overflow-y: auto;
-		background: var(--ck-color-base-background);
+		background: var(--ck-color-autocomplete-results-background);
 		border: 1px solid var(--ck-color-dropdown-panel-border);
 		min-width: auto;
 		position: absolute;

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

@@ -3,6 +3,18 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-button-border-radius: var(--ck-border-radius-control);
+	--ck-button-min-size: var(--ck-size-control-min-height);
+	--ck-button-focus-ring: var(--ck-focus-ring-interactive);
+	--ck-button-focus-shadow: var(--ck-focus-shadow-interactive);
+	--ck-button-focus-disabled-shadow: var(--ck-focus-shadow-disabled-interactive);
+	--ck-button-padding: var(--ck-spacing-control-padding-block);
+	--ck-button-padding-inline: var(--ck-spacing-control-padding-inline);
+	--ck-button-icon-gap: var(--ck-spacing-control-icon-gap);
+	--ck-button-keystroke-gap: var(--ck-spacing-control-meta-gap);
+}
+
 .ck.ck-button,
 a.ck.ck-button {
 	--ck-button-background: var(--ck-color-button-default-background);
@@ -22,16 +34,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-button-min-size);
+	min-height: var(--ck-button-min-size);
 
 	/* Normalize the height of the line. Removing this will break consistent height
 	among text and text-less buttons (with icons). */
@@ -63,8 +75,8 @@ a.ck.ck-button {
 	&:active,
 	&:focus {
 		outline: none;
-		border: var(--ck-focus-ring);
-		box-shadow: var(--ck-focus-outer-shadow), 0 0;
+		border: var(--ck-button-focus-ring);
+		box-shadow: var(--ck-button-focus-shadow), 0 0;
 	}
 
 	/* Allow icon coloring using the text "color" property. */
@@ -102,11 +114,11 @@ a.ck.ck-button {
 		opacity: .5;
 
 		[dir="ltr"] & {
-			margin-left: var(--ck-spacing-large);
+			margin-left: var(--ck-button-keystroke-gap);
 		}
 
 		[dir="rtl"] & {
-			margin-right: var(--ck-spacing-large);
+			margin-right: var(--ck-button-keystroke-gap);
 		}
 	}
 
@@ -117,7 +129,7 @@ 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-button-focus-disabled-shadow), 0 0;
 		}
 
 		& .ck-button__icon {
@@ -135,15 +147,15 @@ a.ck.ck-button {
 	}
 
 	&.ck-button_with-text {
-		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+		padding: var(--ck-button-padding) var(--ck-button-padding-inline);
 
 		& .ck-button__icon {
 			[dir="ltr"] & {
-				margin-right: var(--ck-spacing-medium);
+				margin-right: var(--ck-button-icon-gap);
 			}
 
 			[dir="rtl"] & {
-				margin-left: var(--ck-spacing-medium);
+				margin-left: var(--ck-button-icon-gap);
 			}
 		}
 		& .ck-button__label {

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

@@ -4,8 +4,15 @@
  */
 
 
+:root {
+	--ck-list-item-button-padding-block: var(--ck-spacing-control-padding-block);
+	--ck-list-item-button-padding-inline: calc(2 * var(--ck-spacing-control-padding-inline));
+	--ck-list-item-button-padding-inline-compact: var(--ck-spacing-control-padding-inline-compact);
+	--ck-list-item-button-check-icon-gap: var(--ck-spacing-control-padding-inline-compact);
+}
+
 .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-block) var(--ck-list-item-button-padding-inline);
 
 	&,
 	&.ck-on {
@@ -15,11 +22,11 @@
 
 	&:has(.ck-list-item-button__check-holder) {
 		[dir="ltr"] & {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-list-item-button-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-list-item-button-padding-inline-compact);
 		}
 	}
 
@@ -55,11 +62,11 @@
 
 	&.ck-list-item-button_toggleable {
 		[dir="ltr"] & {
-			padding-left: var(--ck-spacing-small);
+			padding-left: var(--ck-list-item-button-padding-inline-compact);
 		}
 
 		[dir="rtl"] & {
-			padding-right: var(--ck-spacing-small);
+			padding-right: var(--ck-list-item-button-padding-inline-compact);
 		}
 	}
 
@@ -69,11 +76,11 @@
 		height: .9em;
 
 		[dir="ltr"] & {
-			margin-right: var(--ck-spacing-small);
+			margin-right: var(--ck-list-item-button-check-icon-gap);
 		}
 
 		[dir="rtl"] & {
-			margin-left: var(--ck-spacing-small);
+			margin-left: var(--ck-list-item-button-check-icon-gap);
 		}
 	}
 

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

@@ -6,6 +6,10 @@
 :root {
 	/* 34px at 13px font-size */
 	--ck-switch-button-toggle-width: 2.6153846154em;
+	--ck-switch-button-toggle-border-radius: var(--ck-border-radius-control);
+	--ck-switch-button-toggle-inner-border-radius: calc(.5 * var(--ck-switch-button-toggle-border-radius));
+	--ck-switch-button-focus-ring: var(--ck-focus-ring-interactive);
+	--ck-switch-button-label-gap: calc(2 * var(--ck-spacing-control-meta-gap));
 	/* 14px at 13px font-size */
 	--ck-switch-button-toggle-inner-size: calc(1.0769230769em + 1px);
 	--ck-switch-button-translation: calc(
@@ -29,17 +33,17 @@
 	& .ck-button__label {
 		[dir="ltr"] & {
 			/* Separate the label from the switch */
-			margin-right: calc(2 * var(--ck-spacing-large));
+			margin-right: var(--ck-switch-button-label-gap);
 		}
 
 		[dir="rtl"] & {
 			/* Separate the label from the switch */
-			margin-left: calc(2 * var(--ck-spacing-large));
+			margin-left: var(--ck-switch-button-label-gap);
 		}
 	}
 
 	& .ck-button__toggle {
-		border-radius: var(--ck-rounded-corners-radius);
+		border-radius: var(--ck-switch-button-toggle-border-radius);
 
 		/* Apply some smooth transition to the box-shadow and border. */
 		/* Gently animate the background color of the toggle switch */
@@ -59,7 +63,7 @@
 		}
 
 		& .ck-button__toggle__inner {
-			border-radius: calc(.5 * var(--ck-rounded-corners-radius));
+			border-radius: var(--ck-switch-button-toggle-inner-border-radius);
 			width: var(--ck-switch-button-toggle-inner-size);
 			height: var(--ck-switch-button-toggle-inner-size);
 			background: var(--ck-color-switch-button-inner-background);
@@ -96,7 +100,7 @@
 		& .ck-button__toggle {
 			box-shadow: 0 0 0 1px var(--ck-color-base-background), 0 0 0 5px var(--ck-color-focus-outer-shadow);
 			outline-offset: 1px;
-			outline: var(--ck-focus-ring);
+			outline: var(--ck-switch-button-focus-ring);
 		}
 	}
 

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

@@ -5,6 +5,10 @@
 
 :root {
 	--ck-collapsible-arrow-size: calc(0.5 * var(--ck-icon-size));
+	--ck-collapsible-arrow-gap: var(--ck-spacing-control-icon-gap);
+	--ck-collapsible-children-padding-block-start: var(--ck-spacing-surface-section-gap-block);
+	--ck-collapsible-children-padding-inline: var(--ck-spacing-control-meta-gap);
+	--ck-collapsible-children-padding-block-end: var(--ck-spacing-content-edge-margin-block);
 }
 
 .ck.ck-collapsible {
@@ -25,13 +29,13 @@
 		}
 
 		& > .ck-icon {
-			margin-right: var(--ck-spacing-medium);
+			margin-right: var(--ck-collapsible-arrow-gap);
 			width: var(--ck-collapsible-arrow-size);
 		}
 	}
 
 	& > .ck-collapsible__children {
-		padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large);
+		padding: var(--ck-collapsible-children-padding-block-start) var(--ck-collapsible-children-padding-inline) var(--ck-collapsible-children-padding-block-end);
 	}
 
 	&.ck-collapsible_collapsed {

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

@@ -6,6 +6,8 @@
 
 :root {
 	--ck-color-grid-tile-size: 24px;
+	--ck-color-grid-high-contrast-tile-padding-inline: var(--ck-spacing-surface-padding-inline);
+	--ck-color-grid-label-padding-inline: var(--ck-spacing-control-padding-inline);
 
 	/* Not using global colors here because these may change but some colors in a pallette
 	 * require special treatment. For instance, this ensures no matter what the UI text color is,
@@ -60,7 +62,7 @@
 		height: unset;
 		min-width: unset;
 		min-height: unset;
-		padding: 0 var(--ck-spacing-small);
+		padding: 0 var(--ck-color-grid-high-contrast-tile-padding-inline);
 
 		& .ck-button__label {
 			display: inline-block;
@@ -89,5 +91,5 @@
 }
 
 .ck.ck-color-grid__label {
-	padding: 0 var(--ck-spacing-standard);
+	padding: 0 var(--ck-color-grid-label-padding-inline);
 }

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

@@ -3,6 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-color-picker-row-margin-block-start: var(--ck-spacing-content-edge-margin-block);
+	--ck-color-picker-hash-padding-block-start: var(--ck-spacing-control-padding-block);
+	--ck-color-picker-hash-padding-inline-end: var(--ck-spacing-control-icon-gap);
+}
+
 .color-picker-hex-input {
 	width: max-content;
 
@@ -16,7 +22,7 @@
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: space-between;
-	margin: var(--ck-spacing-large) 0 0;
+	margin: var(--ck-color-picker-row-margin-block-start) 0 0;
 	width: unset;
 
 	& .ck.ck-labeled-field-view {
@@ -28,7 +34,7 @@
 	}
 
 	& .ck-color-picker__hash-view {
-		padding-top: var(--ck-spacing-tiny);
-		padding-right: var(--ck-spacing-medium);
+		padding-top: var(--ck-color-picker-hash-padding-block-start);
+		padding-right: var(--ck-color-picker-hash-padding-inline-end);
 	}
 }

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

@@ -3,6 +3,11 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-color-selector-picker-padding-block: calc(var(--ck-spacing-control-padding-inline) / 2);
+	--ck-color-selector-picker-padding-inline: var(--ck-spacing-control-padding-inline);
+	--ck-color-selector-picker-icon-gap: var(--ck-spacing-control-padding-inline);
+}
 
 .ck.ck-color-selector {
 	/* View fragment with color grids. */
@@ -20,7 +25,7 @@
 
 		/* stylelint-disable-next-line no-descending-specificity */
 		& .ck-button.ck-color-selector__color-picker {
-			padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
+			padding: var(--ck-color-selector-picker-padding-block) var(--ck-color-selector-picker-padding-inline);
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
 
@@ -30,11 +35,11 @@
 
 			& .ck.ck-icon {
 				[dir="ltr"] & {
-					margin-right: var(--ck-spacing-standard);
+					margin-right: var(--ck-color-selector-picker-icon-gap);
 				}
 
 				[dir="rtl"] & {
-					margin-left: var(--ck-spacing-standard);
+					margin-left: var(--ck-color-selector-picker-icon-gap);
 				}
 			}
 		}

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

@@ -8,8 +8,11 @@
 	--ck-dialog-drop-shadow: 0px 0px 6px 2px hsl(0deg 0% 0% / 15%);
 	--ck-dialog-max-width: 100vw;
 	--ck-dialog-max-height: 90vh;
-	--ck-color-dialog-background: var(--ck-color-base-background);
-	--ck-color-dialog-form-header-border: var(--ck-color-base-border);
+	--ck-dialog-border-radius: var(--ck-border-radius-surface);
+	--ck-dialog-shadow: var(--ck-dialog-drop-shadow);
+	--ck-color-dialog-background: var(--ck-color-surface-container);
+	--ck-color-dialog-border: var(--ck-color-border-container);
+	--ck-color-dialog-form-header-border: var(--ck-color-border-container);
 }
 
 .ck.ck-dialog-overlay {
@@ -33,15 +36,13 @@
 }
 
 .ck.ck-dialog {
-	border-radius: var(--ck-rounded-corners-radius);
-	box-shadow: var(--ck-drop-shadow), 0 0;
-
-	--ck-drop-shadow: var(--ck-dialog-drop-shadow);
+	border-radius: var(--ck-dialog-border-radius);
+	box-shadow: var(--ck-dialog-shadow), 0 0;
 
 	background: var(--ck-color-dialog-background);
 	max-height: var(--ck-dialog-max-height);
 	max-width: var(--ck-dialog-max-width);
-	border: 1px solid var(--ck-color-base-border);
+	border: 1px solid var(--ck-color-dialog-border);
 	overscroll-behavior: contain;
 	overscroll-behavior: none;
 	width: fit-content;

packages/ckeditor5-ui/theme/components/dialog/dialogactions.css

@@ -3,13 +3,18 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-dialog-actions-padding: var(--ck-spacing-content-edge-margin-block);
+	--ck-dialog-actions-gap: var(--ck-spacing-content-edge-margin-block);
+}
+
 .ck.ck-dialog {
 	& .ck.ck-dialog__actions {
-		padding: var(--ck-spacing-large);
+		padding: var(--ck-dialog-actions-padding);
 		display: flex;
 
 		& > * + * {
-			margin-left: var(--ck-spacing-large);
+			margin-left: var(--ck-dialog-actions-gap);
 		}
 		justify-content: flex-end
 	}