umberto 10.0.0 → 10.1.1

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 Changelog
 =========
 
+## [10.1.1](https://github.com/cksource/umberto/compare/v10.1.0...v10.1.1) (March 4, 2026)
+
+### Bug fixes
+
+* Fixed a deprecation warning displayed during documentation builds by migrating Sass compilation to the modern Dart Sass JavaScript API. The `legacy-js-api` warning is no longer emitted.
+
+
+## [10.1.0](https://github.com/cksource/umberto/compare/v10.0.0...v10.1.0) (March 4, 2026)
+
+### Features
+
+* Add support for experimental features in the callout component and in the badges normalization script.
+
+### Bug fixes
+
+* Fixed the deprecation warning regarding the `Sass if() syntax` thrown during building docs.
+* Disabled inserting a space between the anchor link and heading when converting a document from Markdown to HTML.
+
+
 ## [10.0.0](https://github.com/cksource/umberto/compare/v9.4.0...v10.0.0) (February 16, 2026)
 
 ### BREAKING CHANGES
@@ -39,29 +58,6 @@ Changelog
 
 * Improved rendering of [`templateLiteral`](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html) types that reference a module. They are now rendered as clickable links pointing to the corresponding page.
 
-
-## [9.2.0](https://github.com/cksource/umberto/compare/v9.1.3...v9.2.0) (January 7, 2026)
-
-### Features
-
-* Enabled Shiki syntax highlighting for diff blocks in Gloria. This improves the readability and usability of diffs in the documentation.
-
-### Bug fixes
-
-* Fix crashes of Table of Contents on some pages where headings are not placed in expected HTML structure.
-* No longer stop building of the document when invalid links are found during link validation if some parts of the documentation are skipped (API, SDK, Guides).
-
-
-## [9.1.3](https://github.com/cksource/umberto/compare/v9.1.2...v9.1.3) (December 19, 2025)
-
-### Bug fixes
-
-* Fixed the conflict where typing the forward slash in the Kapa widget would trigger the Algolia search.
-
-### Other changes
-
-* Added CKBox (`CKBOX_VERSION`) and CKEditor 5 (`CKEDITOR_VERSION`) versions to events sent to Sentry integration.
-
 ---
 
 To see all releases, visit the [release page](https://github.com/cksource/umberto/releases).

package/hexo-config.json

@@ -29,7 +29,8 @@
 					"options": {
 						"toc": false,
 						"anchorClassName": "headerlink",
-						"anchorLinkSymbol": "#"
+						"anchorLinkSymbol": "#",
+						"anchorLinkSpace": false
 					}
 				}
 			},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "10.0.0",
+  "version": "10.1.1",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",
@@ -33,14 +33,14 @@
     "hexo-generator-category": "^2.0.0",
     "hexo-generator-index": "^4.0.0",
     "hexo-generator-tag": "^2.0.0",
-    "hexo-renderer-markdown-it-plus": "^1.0.5",
+    "hexo-renderer-markdown-it-plus": "^1.0.6",
     "hexo-renderer-pug": "^3.0.0",
     "htmlparser2": "^10.0.0",
     "javascript-stringify": "^2.1.0",
     "jquery": "~3.7.1",
     "js-beautify": "^1.14.4",
     "lodash": "^4.17.21",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.1.1",
     "markdown-it-expand-tabs": "^1.0.13",
     "markdown-it-toc-and-anchor": "^4.2.0",
     "medium-zoom": "^1.0.6",

package/scripts/filter/before-post-render/gloria/prerender-xml-pug-components.cjs

@@ -65,7 +65,8 @@ const PATTERN_ELEMENTS = [
 		attributesMapper: ( { attributes } ) => {
 			const variants = [
 				'info', 'warning', 'error', 'success',
-				'note', 'tip', 'important', 'caution'
+				'note', 'tip', 'important', 'caution',
+				'experimental'
 			];
 
 			// First check if variant is directly specified

package/scripts/utils/normalizebadges.cjs

@@ -9,6 +9,10 @@ const KNOWN_BADGES = {
 	premium: {
 		name: 'premium',
 		label: 'Premium feature'
+	},
+	experimental: {
+		name: 'experiment',
+		label: 'Experimental feature'
 	}
 };
 

package/src/tasks/compile-sass.js

@@ -3,17 +3,16 @@
  * For licensing, see LICENSE.md.
  */
 
-import { fileURLToPath } from 'node:url';
+import { pathToFileURL } from 'node:url';
 import * as sass from 'sass';
 import fs from 'fs-extra';
 import upath from 'upath';
 
-export function compileSass( src, dst ) {
-	return new Promise( ( resolve, reject ) => {
-		const options = {
-			file: src,
-			outputStyle: 'compressed',
-			importer( url, file, done ) {
+export async function compileSass( src, dst ) {
+	const options = {
+		style: 'compressed',
+		importers: [ {
+			findFileUrl( url ) {
 				// In case of import from the `themes/umberto/src` directory.
 				const themeMatch = url && url.match( /@([^/]+)\/(.+)/ );
 
@@ -22,53 +21,24 @@ export function compileSass( src, dst ) {
 					const filePath = upath.join( import.meta.dirname, '../../themes/umberto/src', theme, 'css', remainingPath );
 
 					if ( fs.existsSync( filePath ) ) {
-						return done( { file: filePath } );
+						return pathToFileURL( filePath );
 					}
 				}
 
 				// In case of an import from the `node_modules` directory.
 				if ( url.startsWith( '~' ) ) {
-					// Resolve the path regarding the current working directory.
-					const absolutePath = fileURLToPath( import.meta.resolve( url.substr( 1 ) ) );
-
-					return fs.readFile( absolutePath, 'utf-8', ( err, data ) => {
-						if ( err ) {
-							return done( err );
-						}
-
-						return done( {
-							contents: data
-						} );
-					} );
+					return new URL( import.meta.resolve( url.substr( 1 ) ) );
 				}
 
-				// Import a local file (a relative path).
-				const directory = upath.dirname( file );
-
-				// Replace "directory/filename" with "directory/_filename.scss".
-				const fileName = url.replace( /(.+)(?:\/(.+))$/, ( match, dirName, fileName ) => {
-					return dirName + '/_' + fileName + '.scss';
-				} );
-
-				return done( {
-					file: upath.join( directory, fileName )
-				} );
+				return null;
 			}
-		};
+		} ]
+	};
 
-		sass.render( options, ( err, result ) => {
-			if ( err ) {
-				return reject( err );
-			}
+	const result = await sass.compileAsync( src, options );
 
-			fs.mkdirsSync( upath.dirname( dst ) );
-			fs.writeFile( upath.resolve( dst ), result.css.toString( 'utf-8' ), err => {
-				if ( err ) {
-					return reject( err );
-				}
+	fs.mkdirsSync( upath.dirname( dst ) );
+	await fs.writeFile( upath.resolve( dst ), result.css );
 
-				return resolve( true );
-			} );
-		} );
-	} );
+	return true;
 }

package/themes/umberto/layout/gloria/_components/callout/_style.scss

@@ -28,6 +28,10 @@
 		--callout-variant-color: var(--color-success-500);
 	}
 
+	&--cyan {
+		--callout-variant-color: var(--color-cyan-600);
+	}
+
 	&__title {
 		position: absolute;
 		left: calc(var(--font-size-lg) * -0.5 - 1px);

package/themes/umberto/layout/gloria/_components/callout/index.pug

@@ -65,6 +65,12 @@ mixin callout({ variant })
 				icon: 'close-circle',
 				title: 'Caution',
 				role: 'alert'
+			},
+			experimental: {
+				className: 'c-callout--cyan',
+				icon: 'experiment',
+				title: 'Experimental',
+				role: 'note'
 			}
 		};
 

package/themes/umberto/src/gloria/css/a11y/_mixins.scss

@@ -1,7 +1,11 @@
 @use 'sass:list';
 
 @mixin a11y-focus-ring-outline($inset: false) {
-	$inset-value: if($inset, 'inset', '');
+	$inset-value: '';
+
+	@if $inset {
+		$inset-value: 'inset';
+	}
 
 	outline: 0;
 	box-shadow: 0 0 0 .2rem var(--a11y-focus-ring-color, color-mix(in srgb, var(--color-primary-500) 20%, transparent)) #{$inset-value};