Align content area CSS variables to --ck-content-* prefix.

docs/updating/update-to-46.md

@@ -1,8 +1,8 @@
 ---
 category: update-guides
-meta-title: Update to version 45.x | CKEditor 5 Documentation
-menu-title: Update to v45.x
-order: 79
+meta-title: Update to version 46.x | CKEditor 5 Documentation
+menu-title: Update to v46.x
+order: 78
 modified_at: 2025-06-16
 ---
 
@@ -14,14 +14,49 @@ modified_at: 2025-06-16
 	You may try removing the `package-lock.json` or `yarn.lock` files (if applicable) and reinstalling all packages before rebuilding the editor. For best results, make sure you use the most recent package versions.
 </info-box>
 
-## Update to CKEditor&nbsp;5 v46.0
+## Update to CKEditor&nbsp;5 v46.0.0
 
 Released on xxx, 2025. ([See full release notes](https://github.com/ckeditor/ckeditor5/releases/tag/v46.0.0))
 
 Below are the most important changes that require your attention when upgrading to CKEditor&nbsp;5 v46.0.0.
 
-### First heading
-
 ### Major breaking changes in this release
 
+#### Content area CSS variables renamed to --ck-content-* prefix
+
+To improve consistency, all CSS variables that affect the styles of the editor content area ("content styles") have been renamed to use the `--ck-content-*` prefix. This change affects variables used for highlights, image captions, mentions, table captions, image style spacing, and todo list checkmarks.
+
+| Old variable name                           | New variable name                                 |
+|---------------------------------------------|---------------------------------------------------|
+| `--ck-highlight-marker-yellow`                | `--ck-content-highlight-marker-yellow`               |
+| `--ck-highlight-marker-green`                 | `--ck-content-highlight-marker-green`                |
+| `--ck-highlight-marker-pink`                  | `--ck-content-highlight-marker-pink`                 |
+| `--ck-highlight-marker-blue`                  | `--ck-content-highlight-marker-blue`                 |
+| `--ck-highlight-pen-red`                      | `--ck-content-highlight-pen-red`                    |
+| `--ck-highlight-pen-green`                    | `--ck-content-highlight-pen-green`                  |
+| `--ck-color-image-caption-background`         | `--ck-content-color-image-caption-background`        |
+| `--ck-color-image-caption-text`               | `--ck-content-color-image-caption-text`              |
+| `--ck-color-mention-background`               | `--ck-content-color-mention-background`              |
+| `--ck-color-mention-text`                     | `--ck-content-color-mention-text`                    |
+| `--ck-color-selector-caption-background`      | `--ck-content-color-selector-caption-background`     |
+| `--ck-color-selector-caption-text`            | `--ck-content-color-selector-caption-text`           |
+| `--ck-image-style-spacing`                    | `--ck-content-image-style-spacing`                   |
+| `--ck-inline-image-style-spacing`             | `--ck-content-inline-image-style-spacing`            |
+| `--ck-todo-list-checkmark-size`               | `--ck-content-todo-list-checkmark-size`              |
+| `--ck-table-of-contents-padding`               | `--ck-content-table-of-contents-padding`              |
+| `--ck-table-of-contents-line-height`           | `--ck-content-table-of-contents-line-height`           |
+| `--ck-table-of-contents-items-start-padding`    | `--ck-content-table-of-contents-items-start-padding`    |
+
+**Migration:**
+- Update your custom stylesheets, themes, and integrations to use the new variable names.
+- The old variable names are no longer supported and will not have any effect.
+
+Example:
+```css
+:root {
+  --ck-content-highlight-marker-yellow: #fdfd77;
+  --ck-content-color-image-caption-background: hsl(0, 0%, 97%);
+}
+```
+
 ### Minor breaking changes in this release

packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-variables.html

@@ -2,13 +2,13 @@
 	/* We are not using here :root because of many instances of editor */
 	#snippet-highlight-custom-colors-variables + .ck-editor {
 		/* Make green a little darker. */
-		--ck-highlight-marker-green: #199c19;
+		--ck-content-highlight-marker-green: #199c19;
 
 		/* Make the yellow more "dirty". */
-		--ck-highlight-marker-yellow: #cac407;
+		--ck-content-highlight-marker-yellow: #cac407;
 
 		/* Make red more pinkish. */
-		--ck-highlight-pen-red: #ec3e6e;
+		--ck-content-highlight-pen-red: #ec3e6e;
 	}
 </style>
 

packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-variables.js

@@ -43,21 +43,21 @@ HighlightEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'var(--ck-highlight-marker-green)',
+					color: 'var(--ck-content-highlight-marker-green)',
 					type: 'marker'
 				},
 				{
 					model: 'yellowMarker',
 					class: 'marker-yellow',
 					title: 'Yellow marker',
-					color: 'var(--ck-highlight-marker-yellow)',
+					color: 'var(--ck-content-highlight-marker-yellow)',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'var(--ck-highlight-pen-red)',
+					color: 'var(--ck-content-highlight-pen-red)',
 					type: 'pen'
 				}
 			]

packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-options.js

@@ -43,14 +43,14 @@ HighlightEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'var(--ck-highlight-marker-green)',
+					color: 'var(--ck-content-highlight-marker-green)',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'var(--ck-highlight-pen-red)',
+					color: 'var(--ck-content-highlight-pen-red)',
 					type: 'pen'
 				}
 			]

packages/ckeditor5-highlight/docs/features/highlight.md

@@ -70,14 +70,14 @@ ClassicEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'var(--ck-highlight-marker-green)',
+					color: 'var(--ck-content-highlight-marker-green)',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'var(--ck-highlight-pen-red)',
+					color: 'var(--ck-content-highlight-pen-red)',
 					type: 'pen'
 				}
 			]
@@ -127,13 +127,13 @@ The highlight feature is using the power of [CSS variables](https://developer.mo
 ```css
 :root {
 	/* Make green a little darker. */
-	--ck-highlight-marker-green: #199c19;
+	--ck-content-highlight-marker-green: #199c19;
 
 	/* Make the yellow more "dirty". */
-	--ck-highlight-marker-yellow: #cac407;
+	--ck-content-highlight-marker-yellow: #cac407;
 
 	/* Make red more pinkish. */
-	--ck-highlight-pen-red: #ec3e6e;
+	--ck-content-highlight-pen-red: #ec3e6e;
 }
 ```
 
@@ -223,34 +223,15 @@ The {@link module:highlight/highlight~Highlight} plugin registers:
 
 	```js
 	highlight.options = [
-		{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-highlight-marker-yellow)', type: 'marker' },
-		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-highlight-marker-green)', type: 'marker' },
-		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-highlight-marker-pink)', type: 'marker' },
-		{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-highlight-marker-blue)', type: 'marker' },
-		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-highlight-pen-red)', type: 'pen' },
-		{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-highlight-pen-green)', type: 'pen' }
+		{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-content-highlight-marker-yellow)', type: 'marker' },
+		{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-content-highlight-marker-green)', type: 'marker' },
+		{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-content-highlight-marker-pink)', type: 'marker' },
+		{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-content-highlight-marker-blue)', type: 'marker' },
+		{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-content-highlight-pen-red)', type: 'pen' },
+		{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-content-highlight-pen-green)', type: 'pen' }
 	]
 	```
 
 	the `'highlight'` command will accept the corresponding strings as values:
 
-	* `'yellowMarker'` – available as the `'highlight:yellowMarker'` button,
-	* `'greenMarker'` – available as the `'highlight:greenMarker'` button,
-	* `'pinkMarker'` – available as the `'highlight:pinkMarker'` button,
-	* `'blueMarker'` – available as the `'highlight:blueMarker'` button,
-	* `'redPen'` – available as the `'highlight:redPen'` button,
-	* `'greenPen'` – available as the `'highlight:greenPen'` button.
-
-	Passing an empty `value` will remove any `highlight` attribute from the selection:
-
-	```js
-	editor.execute( 'highlight' );
-	```
-
-<info-box>
-	We recommend using the official {@link framework/development-tools/inspector CKEditor&nbsp;5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
-</info-box>
-
-## Contribute
-
-The source code of the feature is available on GitHub at [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-highlight](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-highlight).
+	* `'yellowMarker'` &ndash; available as the `'highlight:yellowMarker'`

packages/ckeditor5-highlight/src/highlightconfig.ts

@@ -15,7 +15,7 @@
  * 	model: 'pinkMarker',
  * 	class: 'marker-pink',
  * 	title: 'Pink Marker',
- * 	color: 'var(--ck-highlight-marker-pink)',
+ * 	color: 'var(--ck-content-highlight-marker-pink)',
  * 	type: 'marker'
  * }
  * ```
@@ -75,42 +75,42 @@ export interface HighlightConfig {
 	 * 		model: 'yellowMarker',
 	 * 		class: 'marker-yellow',
 	 * 		title: 'Yellow marker',
-	 * 		color: 'var(--ck-highlight-marker-yellow)',
+	 * 		color: 'var(--ck-content-highlight-marker-yellow)',
 	 * 		type: 'marker'
 	 * 	},
 	 * 	{
 	 * 		model: 'greenMarker',
 	 * 		class: 'marker-green',
 	 * 		title: 'Green marker',
-	 * 		color: 'var(--ck-highlight-marker-green)',
+	 * 		color: 'var(--ck-content-highlight-marker-green)',
 	 * 		type: 'marker'
 	 * 	},
 	 * 	{
 	 * 		model: 'pinkMarker',
 	 * 		class: 'marker-pink',
 	 * 		title: 'Pink marker',
-	 * 		color: 'var(--ck-highlight-marker-pink)',
+	 * 		color: 'var(--ck-content-highlight-marker-pink)',
 	 * 		type: 'marker'
 	 * 	},
 	 * 	{
 	 * 		model: 'blueMarker',
 	 * 		class: 'marker-blue',
 	 * 		title: 'Blue marker',
-	 * 		color: 'var(--ck-highlight-marker-blue)',
+	 * 		color: 'var(--ck-content-highlight-marker-blue)',
 	 * 		type: 'marker'
 	 * 	},
 	 * 	{
 	 * 		model: 'redPen',
 	 * 		class: 'pen-red',
 	 * 		title: 'Red pen',
-	 * 		color: 'var(--ck-highlight-pen-red)',
+	 * 		color: 'var(--ck-content-highlight-pen-red)',
 	 * 		type: 'pen'
 	 * 	},
 	 * 	{
 	 * 		model: 'greenPen',
 	 * 		class: 'pen-green',
 	 * 		title: 'Green pen',
-	 * 		color: 'var(--ck-highlight-pen-green)',
+	 * 		color: 'var(--ck-content-highlight-pen-green)',
 	 * 		type: 'pen'
 	 * 	}
 	 * ]
@@ -126,12 +126,12 @@ export interface HighlightConfig {
 	 *
 	 * ```css
 	 * :root {
-	 * 	--ck-highlight-marker-yellow: #fdfd77;
-	 * 	--ck-highlight-marker-green: #63f963;
-	 * 	--ck-highlight-marker-pink: #fc7999;
-	 * 	--ck-highlight-marker-blue: #72cdfd;
-	 * 	--ck-highlight-pen-red: #e91313;
-	 * 	--ck-highlight-pen-green: #118800;
+	 * 	--ck-content-highlight-marker-yellow: #fdfd77;
+	 * 	--ck-content-highlight-marker-green: #63f963;
+	 * 	--ck-content-highlight-marker-pink: #fc7999;
+	 * 	--ck-content-highlight-marker-blue: #72cdfd;
+	 * 	--ck-content-highlight-pen-red: #e91313;
+	 * 	--ck-content-highlight-pen-green: #118800;
 	 * }
 	 *
 	 * .marker-yellow { ... }
@@ -159,14 +159,14 @@ export interface HighlightConfig {
 	 * 					model: 'pinkMarker',
 	 * 					class: 'marker-pink',
 	 * 					title: 'Pink Marker',
-	 * 					color: 'var(--ck-highlight-marker-pink)',
+	 * 					color: 'var(--ck-content-highlight-marker-pink)',
 	 * 					type: 'marker'
 	 * 				},
 	 * 				{
 	 * 					model: 'redPen',
 	 * 					class: 'pen-red',
 	 * 					title: 'Red Pen',
-	 * 					color: 'var(--ck-highlight-pen-red)',
+	 * 					color: 'var(--ck-content-highlight-pen-red)',
 	 * 					type: 'pen'
 	 * 				},
 	 * 			]

packages/ckeditor5-highlight/src/highlightediting.ts

@@ -45,42 +45,42 @@ export class HighlightEditing extends Plugin {
 					model: 'yellowMarker',
 					class: 'marker-yellow',
 					title: 'Yellow marker',
-					color: 'var(--ck-highlight-marker-yellow)',
+					color: 'var(--ck-content-highlight-marker-yellow)',
 					type: 'marker'
 				},
 				{
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'var(--ck-highlight-marker-green)',
+					color: 'var(--ck-content-highlight-marker-green)',
 					type: 'marker'
 				},
 				{
 					model: 'pinkMarker',
 					class: 'marker-pink',
 					title: 'Pink marker',
-					color: 'var(--ck-highlight-marker-pink)',
+					color: 'var(--ck-content-highlight-marker-pink)',
 					type: 'marker'
 				},
 				{
 					model: 'blueMarker',
 					class: 'marker-blue',
 					title: 'Blue marker',
-					color: 'var(--ck-highlight-marker-blue)',
+					color: 'var(--ck-content-highlight-marker-blue)',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'var(--ck-highlight-pen-red)',
+					color: 'var(--ck-content-highlight-pen-red)',
 					type: 'pen'
 				},
 				{
 					model: 'greenPen',
 					class: 'pen-green',
 					title: 'Green pen',
-					color: 'var(--ck-highlight-pen-green)',
+					color: 'var(--ck-content-highlight-pen-green)',
 					type: 'pen'
 				}
 			]

packages/ckeditor5-highlight/tests/highlightediting.js

@@ -102,42 +102,42 @@ describe( 'HighlightEditing', () => {
 							model: 'yellowMarker',
 							class: 'marker-yellow',
 							title: 'Yellow marker',
-							color: 'var(--ck-highlight-marker-yellow)',
+							color: 'var(--ck-content-highlight-marker-yellow)',
 							type: 'marker'
 						},
 						{
 							model: 'greenMarker',
 							class: 'marker-green',
 							title: 'Green marker',
-							color: 'var(--ck-highlight-marker-green)',
+							color: 'var(--ck-content-highlight-marker-green)',
 							type: 'marker'
 						},
 						{
 							model: 'pinkMarker',
 							class: 'marker-pink',
 							title: 'Pink marker',
-							color: 'var(--ck-highlight-marker-pink)',
+							color: 'var(--ck-content-highlight-marker-pink)',
 							type: 'marker'
 						},
 						{
 							model: 'blueMarker',
 							class: 'marker-blue',
 							title: 'Blue marker',
-							color: 'var(--ck-highlight-marker-blue)',
+							color: 'var(--ck-content-highlight-marker-blue)',
 							type: 'marker'
 						},
 						{
 							model: 'redPen',
 							class: 'pen-red',
 							title: 'Red pen',
-							color: 'var(--ck-highlight-pen-red)',
+							color: 'var(--ck-content-highlight-pen-red)',
 							type: 'pen'
 						},
 						{
 							model: 'greenPen',
 							class: 'pen-green',
 							title: 'Green pen',
-							color: 'var(--ck-highlight-pen-green)',
+							color: 'var(--ck-content-highlight-pen-green)',
 							type: 'pen'
 						}
 					]