umberto 1.14.0 → 1.18.0

package/README.md

@@ -258,6 +258,8 @@ title: Overview [optional]
 slug: overview [optional]
 order: 10 [optional]
 toc: false [optional]
+toc-limit: 5 [optional]
+badges: [ premium, ... ] [optional]
 sitenav: false [optional]
 feedback-widget: false [optional]
 menu-title: Overview whatever [optional]
@@ -306,6 +308,10 @@ Can be set to sort the guides within the same category. If skipped, guides are s
 
 If defined and set to `false`, table of contents will not be rendered.
 
+#### toc-limit [optional]
+
+If defined and set to `0` or greater integer, the table of contents will be limited to the defined depth (e.g. for value `2`, only `<h2>` and `<h3>` headings will be shown in the table of contents). Value `0` is an equivalent of using `toc: false`.
+
 #### sitenav [optional]
 
 If defined and set to `false`, there will be no left-side navigation and main content will be centered.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "1.14.0",
+  "version": "1.18.0",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [
@@ -42,14 +42,15 @@
     "medium-zoom": "^1.0.5",
     "mkdirp": "^1.0.4",
     "moment": "^2.27.0",
-    "node-sass": "^4.14.1",
     "nyc": "15.1.0",
     "pug": "^3.0.0",
+    "sass": "^1.43.4",
     "sitemap": "^6.1.6",
+    "tippy.js": "^6.3.2",
     "tree-model": "^1.0.7",
     "upath": "^2.0.0",
     "vnu-jar": "^20.5.29",
-    "webpack": "^4.43.0"
+    "webpack": "^5.58.1"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-dev-env": "^21.0.0",

package/scripts/helper/normalize-badges.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const normalizeBadges = require( '../utils/normalizebadges' );
+
+/**
+ * Normalizes badged in page configuration
+ *
+ *		badges: [ premium, badgeFoo, unknownBadge ]
+ *
+ * to Pug-friendly format with unknown badges filtered out:
+ *
+ *		[
+ *			{ name: 'premium', label: 'Premium feature' },
+ *			{ name: 'foo', label: 'A foo page label' }
+ *		]
+ *
+ * @protected
+ * @param {Object} data
+ * @return {Array.<Object>}
+ */
+hexo.extend.helper.register( 'normalizeBadges', normalizeBadges );

package/scripts/helper/u-toc.js

@@ -9,7 +9,16 @@ const cheerio = require( 'cheerio' );
 
 hexo.extend.helper.register( 'uToc', ( data, options = {} ) => {
 	const $ = cheerio.load( data );
-	const headings = $( 'h2,h3,h4,h5,h6' )
+
+	let usedHeadings = [ 'h2', 'h3', 'h4', 'h5', 'h6' ];
+
+	if ( options.tocLimit >= 0 ) {
+		usedHeadings = usedHeadings.slice( 0, options.tocLimit );
+	}
+
+	usedHeadings = usedHeadings.join( ',' );
+
+	const headings = $( usedHeadings )
 		.filter( function() {
 			return !$( this ).parents( '.live-snippet, .collapsing-list__item' ).length;
 		} );

package/scripts/utils/normalizebadges.js

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+const KNOWN_BADGES = {
+	premium: {
+		name: 'premium',
+		label: 'Premium feature'
+	}
+};
+
+/**
+ * Normalizes badged in page configuration
+ *
+ *		badges: [ premium, badgeFoo, unknownBadge ]
+ *
+ * to Pug-friendly format with unknown badges filtered out:
+ *
+ *		[
+ *			{ name: 'premium', label: 'Premium feature' },
+ *			{ name: 'foo', label: 'A foo page label' }
+ *		]
+ *
+ * @protected
+ * @param {Object} data
+ * @return {Array.<Object>}
+ */
+module.exports = function normalizeBadges( data ) {
+	if ( !data.badges ) {
+		return;
+	}
+
+	return data.badges
+		.filter( badgeName => {
+			if ( !KNOWN_BADGES[ badgeName ] ) {
+				console.warn(
+					`Warning: Unknown badge "${ badgeName }" set for the page "${ data.title }". ` +
+					`Known badges are: ${ Object.keys( KNOWN_BADGES ).map( badgeName => `"${ badgeName }"` ).join( ', ' ) }`
+				);
+
+				return false;
+			}
+
+			return true;
+		} )
+		.map( badgeName => KNOWN_BADGES[ badgeName ] );
+};

package/scripts/utils/parselinks.js

@@ -19,10 +19,7 @@ const LINK_REGEXP = /\\?{(?:@linkapi|@link|@linksdk|@linkexample)\s+[^{]+?({[^}]
  * @return {Boolean}
  */
 module.exports = function parseLinks( page, hexo ) {
-	if ( hexo.projectGlobals.common._disabledFilters.has( parseLinks.name ) ) {
-		return;
-	}
-
+	const isSilentError = hexo.projectGlobals.common._disabledFilters.has( parseLinks.name );
 	const relativeUrlHelper = hexo.extend.helper.store.relative_url;
 
 	page.content = page.content.replace( LINK_REGEXP, match => {
@@ -30,11 +27,11 @@ module.exports = function parseLinks( page, hexo ) {
 			return match.replace( /^\\{/, '{' ).replace( /\\}$/, '}' );
 		}
 		if ( match.includes( 'module:' ) || match.includes( '@linkapi' ) ) {
-			return linkToApi( match, page, hexo, { relativeUrlHelper } );
+			return linkToApi( match, page, hexo, { relativeUrlHelper, isSilentError } );
 		} else if ( match.includes( '@linksdk' ) || match.includes( '@linkexample' ) ) {
-			return linkToSdk( match, page, hexo, { relativeUrlHelper } );
+			return linkToSdk( match, page, hexo, { relativeUrlHelper, isSilentError } );
 		} else {
-			return linkToGuide( match, page, hexo, { relativeUrlHelper } );
+			return linkToGuide( match, page, hexo, { relativeUrlHelper, isSilentError } );
 		}
 	} );
 
@@ -47,18 +44,27 @@ module.exports = function parseLinks( page, hexo ) {
  * @param {Object} hexo
  * @param {Object} options
  * @param {Function} options.relativeUrlHelper
+ * @param {Boolean} options.isSilentError
  */
-function linkToApi( str, data, hexo, { relativeUrlHelper } ) {
+function linkToApi( str, data, hexo, { relativeUrlHelper, isSilentError } ) {
 	const linkMatchResult = str.match( /^{((?:@linkapi|@link)[\s\S]+)}$/ );
 
 	if ( !linkMatchResult ) {
-		return onError( str, data.source );
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError
+		} );
 	}
 
 	const linkContentMatchResult = linkMatchResult[ 1 ].match( /^(?:@linkapi|@link)\s*(?:@(\w+))*\s*(\S+)\s*([\s\S]*)$/ );
 
 	if ( !linkContentMatchResult ) {
-		return onError( str, data.source );
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError
+		} );
 	}
 
 	const projectName = linkContentMatchResult[ 1 ] || data.projectName;
@@ -72,14 +78,16 @@ function linkToApi( str, data, hexo, { relativeUrlHelper } ) {
 	}
 
 	if ( !itemName ) {
-		return onError( str, data.source );
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError
+		} );
 	}
 
 	const baseItemName = getBaseItemName( itemName );
-
 	const hashWithoutPrefix = itemName.replace( baseItemName, '' ).slice( 1 );
 	const hash = hashWithoutPrefix ? `#${ hashWithoutPrefix }` : '';
-
 	const project = hexo.projectGlobals[ projectName ];
 
 	let apiSlug;
@@ -89,7 +97,12 @@ function linkToApi( str, data, hexo, { relativeUrlHelper } ) {
 	} else if ( isIgnoredProject( projectName, hexo ) || hexo.projectGlobals.common.isSingleProject ) {
 		return str;
 	} else {
-		return onError( str, data.source, `Project ${ chalk.redBright( projectName ) } is not defined.` );
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError,
+			description: `Project ${ chalk.redBright( projectName ) } is not defined.`
+		} );
 	}
 
 	const basePath = projectName === data.projectName ?
@@ -125,9 +138,12 @@ function linkToApi( str, data, hexo, { relativeUrlHelper } ) {
 			// When link tag follows notation: ...SomeClass#methodName, then must use 'extraId' as the hash.
 			href = relativeUrlHelper( data.path, upath.join( basePath, apiSlug, fileName + `#${ docletByBaseAndHash.extraId }` ) );
 		} else {
-			onError( str, data.source, 'No doclet found. Link remain not transformed.' );
-
-			return str;
+			return onError( {
+				value: str,
+				source: data.source,
+				isSilent: isSilentError,
+				description: 'No doclet found. Link remain not transformed.'
+			} );
 		}
 	}
 
@@ -170,13 +186,18 @@ function getFileName( itemName ) {
  * @param {Object} hexo
  * @param {Object} options
  * @param {Function} options.relativeUrlHelper
+ * @param {Boolean} options.isSilentError
  */
-function linkToSdk( str, data, hexo, { relativeUrlHelper } ) {
+function linkToSdk( str, data, hexo, { relativeUrlHelper, isSilentError } ) {
 	const regExp = /(?:@linksdk|@linkexample) (?:@(\w+) )?(\w+)(?:\.html)?(#\S+)? ([^}]+)/;
 	const match = regExp.exec( str );
 
 	if ( !match ) {
-		return onError( str, data.source );
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError
+		} );
 	}
 
 	const projectName = match[ 1 ] ? match[ 1 ] : data.projectName;
@@ -196,13 +217,18 @@ function linkToSdk( str, data, hexo, { relativeUrlHelper } ) {
  * @param {Object} hexo
  * @param {Object} options
  * @param {Function} options.relativeUrlHelper
+ * @param {Boolean} options.isSilentError
  */
-function linkToGuide( str, data, hexo, { relativeUrlHelper } ) {
+function linkToGuide( str, data, hexo, { relativeUrlHelper, isSilentError } ) {
 	const rgxp = /@link(?:\s+@(\w+))?\s+([^}\s]+)\s*([^}]*)}/;
 	const match = rgxp.exec( str );
 
 	if ( !match ) {
-		return onError( str, data.source );
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError
+		} );
 	}
 
 	const pathToGuideSplit = match[ 2 ].split( '#' );
@@ -215,9 +241,14 @@ function linkToGuide( str, data, hexo, { relativeUrlHelper } ) {
 	if ( shouldIgnoreGuideLink( match, data, projectName, hexo ) ) {
 		if ( isIgnoredProject( projectName, hexo ) || hexo.projectGlobals.common.isSingleProject ) {
 			return str;
-		} else {
-			return onError( str, data.source, `Project ${ chalk.redBright( projectName ) } is not defined.` );
 		}
+
+		return onError( {
+			value: str,
+			source: data.source,
+			isSilent: isSilentError,
+			description: `Project ${ chalk.redBright( projectName ) } is not defined.`
+		} );
 	}
 
 	const projectBasePath = match[ 1 ] ? hexo.projectGlobals[ projectName ].BASE_PATH : data.BASE_PATH;
@@ -228,7 +259,11 @@ function linkToGuide( str, data, hexo, { relativeUrlHelper } ) {
 		targetPath = upath.join( projectBasePath, 'index.html' );
 	} else {
 		if ( !pagePaths ) {
-			return onError( str, data.source );
+			return onError( {
+				value: str,
+				source: data.source,
+				isSilent: isSilentError
+			} );
 		}
 
 		// pathToGuide is guide's physical path in project directory before being processed by hexo.
@@ -241,7 +276,11 @@ function linkToGuide( str, data, hexo, { relativeUrlHelper } ) {
 		} );
 
 		if ( !pagePathData && pathToGuide !== 'index' ) {
-			return onError( str, data.source );
+			return onError( {
+				value: str,
+				source: data.source,
+				isSilent: isSilentError
+			} );
 		}
 
 		targetPath = pagePathData.newDataPath;
@@ -252,15 +291,24 @@ function linkToGuide( str, data, hexo, { relativeUrlHelper } ) {
 	return `<a href=${ href }${ hash }>${ linkText }</a>`;
 }
 
-function onError( tag, source, extraComment ) {
-	process.exitCode = 1;
-
-	console.log(
-		`${ chalk.red( 'Error: ' ) }Failed while convert ${ chalk.cyanBright( tag ) } tag in ` +
-		`${ chalk.magentaBright( source ) }.${ extraComment ? chalk.italic( ' ' + extraComment ) : '' }`
-	);
+/**
+ * @param {String} value An expression that could not be transformed into a link.
+ * @param {String} source A path to the file where the link was found.
+ * @param {Boolean} [isSilent] Whether to report an error when conversion into the link failed.
+ * @param {String} [description] Optional message describing the error.
+ * @return {String}
+ */
+function onError( { value, source, isSilent, description } ) {
+	if ( !isSilent ) {
+		process.exitCode = 1;
+
+		console.log(
+			`${ chalk.red( 'Error: ' ) }Failed while convert ${ chalk.cyanBright( value ) } tag in ` +
+			`${ chalk.magentaBright( source ) }.${ description ? chalk.italic( ' ' + description ) : '' }`
+		);
+	}
 
-	return tag;
+	return value;
 }
 
 function isIgnoredProject( projectName, hexo ) {

package/src/tasks/compile-sass.js

@@ -5,16 +5,47 @@
 
 'use strict';
 
-const sass = require( 'node-sass' );
+const sass = require( 'sass' );
 const fs = require( 'fs-extra' );
 const upath = require( 'upath' );
 
 module.exports = ( src, dst ) => {
 	return new Promise( ( resolve, reject ) => {
-		sass.render( {
+		const options = {
 			file: src,
-			outputStyle: 'compressed'
-		}, ( err, result ) => {
+			outputStyle: 'compressed',
+			importer( url, file, done ) {
+				// In case of an import from the `node_modules` directory.
+				if ( url.startsWith( '~' ) ) {
+					// Resolve the path regarding the current working directory.
+					const absolutePath = require.resolve( url.substr( 1 ) );
+
+					return fs.readFile( absolutePath, 'utf-8', ( err, data ) => {
+						if ( err ) {
+							return done( err );
+						}
+
+						return done( {
+							contents: data
+						} );
+					} );
+				}
+
+				// 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 )
+				} );
+			}
+		};
+
+		sass.render( options, ( err, result ) => {
 			if ( err ) {
 				return reject( err );
 			}

package/themes/umberto/layout/_mixin/nav-tree-item.pug

@@ -6,4 +6,8 @@ mixin navTreeItem( data )
 			div( class=_class )
 				span( class="tree__item--guide tree__item__text" ) #{ menuTitle }
 				- if( data.shouldDisplayNewIndicator )
-					span( class="tree__item__badge tree__item__badge_new" ) New
+					span( class="tree__item__badge tree__item__badge_new" data-badge-tooltip="New or updated content" ) New
+				- if( data.badges )
+					each badge in normalizeBadges( data )
+						span( class="tree__item__badge tree__item__badge_" + badge.name data-badge-tooltip=badge.label )
+							span( class="tree__item__badge__text" ) #{ badge.label }

package/themes/umberto/layout/_mixin/nav-tree-level.pug

@@ -21,6 +21,10 @@ mixin navTreeLevel( data, isRoot )
 		li
 			div.tree__item__wrapper
 				span( class="tree__item--folder tree__item__text" ) #{ data.name }
+				- if( data.badges )
+					each badge in normalizeBadges( data )
+						span( class="tree__item__badge tree__item__badge_" + badge.name data-badge-tooltip=badge.label )
+							span( class="tree__item__badge__text" ) #{ badge.label }
 			ul.tree__item-nested-list
 				each item in dataArr
 					//- Categories have a property 'name', guides don't have property 'name'.

package/themes/umberto/layout/_partial/head.pug

@@ -15,6 +15,8 @@ if ( page[ 'twitter-card' ] || ogConfig.description )
 	meta( name='twitter:card' content= page[ 'twitter-card' ] || ogConfig.description )
 	meta( name='twitter:site' content= '@ckeditor' )
 
+meta( name= 'x-generated-at' content= Date() )
+
 if ( mainOg || ( projectLocals && projectLocals.og ) || page[ 'og-description' ] )
 	meta( property='og:title' content= page[ 'og-title' ] || title )
 	if ( ogConfig.description || page[ 'og-description' ] )

package/themes/umberto/layout/index.pug

@@ -7,7 +7,7 @@ block content
         != split.title || page.title
 
     if page.toc !== false
-        != uToc( page.content )
+        != uToc( page.content, { tocLimit: page[ 'toc-limit' ] } )
 
     != split.content
 

package/themes/umberto/layout/page.pug

@@ -8,7 +8,7 @@ block content
 		!= split.title || page.title
 
 	if page.toc !== false
-		!= uToc( page.content, { groupId: page.groupId } )
+		!= uToc( page.content, { groupId: page.groupId, tocLimit: page[ 'toc-limit' ] } )
 
 	!= split.content
 

package/themes/umberto/layout/sdk.pug

@@ -8,7 +8,7 @@ block content
 		!= split.title || page.title
 
 	if page.toc !== false
-		!= uToc( page.content, { groupId: page.groupId } )
+		!= uToc( page.content, { groupId: page.groupId, tocLimit: page[ 'toc-limit' ] } )
 
 	!= split.content
 

package/themes/umberto/source/assets/_img/star-in-circle.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-11.8%" y="-7.1%" width="123.7%" height="119%" filterUnits="objectBoundingBox" id="c"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0784203589 0" in="shadowBlurOuter1"/></filter><rect id="a" x="0" y="0" width="16" height="16" rx="8"/><path id="d" d="m8 11.12-4.114 2.543 1.147-4.699-3.69-3.127 4.823-.361L8 1l1.834 4.476 4.823.361-3.69 3.127 1.147 4.699z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#EAA930" xlink:href="#a"/><path fill-opacity=".243" fill="#FFF400" mask="url(#b)" d="M-4-3H8v21H-4z"/><g mask="url(#b)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g></g></svg>

package/themes/umberto/src/css/_api-props-filter.scss

@@ -21,7 +21,7 @@ div.api-props-filter {
 		border-color: u-color( 'selected' );
 
 		&:hover {
-			background: u-color( 'selected', 5 );
+			background: u-color( 'selected', 5% );
 		}
 	}
 

package/themes/umberto/src/css/_badge.scss

@@ -16,7 +16,7 @@
 			text-decoration: none;
 
 			&:hover {
-				color: u-color('badge-#{ $color }', -50 );
+				color: u-color('badge-#{ $color }', -50% );
 				text-decoration: none;
 			}
 		}

package/themes/umberto/src/css/_collapsinglist.scss

@@ -185,7 +185,7 @@ ul.collapsing-list {
 				overflow: hidden;
 				height: $u-line-height-base + em;
 				white-space: nowrap;
-				margin-bottom: u-spacing( 0 )/2;
+				margin-bottom: math.div( u-spacing( 0 ), 2 );
 			}
 		}
 
@@ -233,7 +233,7 @@ ul.collapsing-list {
 	&__dev-names {
 		code#{&}--active {
 			display: block;
-			color: u-color( 'text', 40 );
+			color: u-color( 'text', 40% );
 			font-size: u-font-size( -1 );
 			cursor: default;
 		}

package/themes/umberto/src/css/_content.scss

@@ -80,7 +80,7 @@
 
 		h1 {
 			&:first-of-type {
-				margin-bottom: u-spacing( 0 ) / 2;
+				margin-bottom: math.div( u-spacing( 0 ), 2 );
 			}
 		}
 
@@ -124,7 +124,7 @@
 			font-size: 0.9em;
 			padding: 0;
 			margin: -0.4em 0 0 0;
-			color: u-color( 'text', 50 );
+			color: u-color( 'text', 50% );
 
 			&--hidden {
 				display: none;

package/themes/umberto/src/css/_footer.scss

@@ -27,7 +27,7 @@
 	}
 
 	p {
-		color: u-color( 'text', 20 );
+		color: u-color( 'text', 20% );
 	  	position: absolute;
 		bottom: u-spacing( 2 );
 		right: u-spacing( 3 );

package/themes/umberto/src/css/_formatted.scss

@@ -146,9 +146,9 @@
 	kbd {
 		display: inline-block;
 		background: u-color( 'background-dark' );
-		border: solid 1px u-border-color( 'background-hue', 5 );
-		border-bottom-color: u-border-color( 'background-hue', -5 );
-		box-shadow: inset 0 -1px 0  u-border-color( 'background-hue', -5 );
+		border: solid 1px u-border-color( 'background-hue', 5% );
+		border-bottom-color: u-border-color( 'background-hue', -5% );
+		box-shadow: inset 0 -1px 0  u-border-color( 'background-hue', -5% );
 		font-family: $u-font-face-mono;
 		font-size: .8em; // 12px;
 		padding: u-spacing( -3 ) u-spacing( -2 );
@@ -173,7 +173,7 @@
 			margin-bottom: 0;
 
 			&:last-of-type {
-				margin-bottom: u-spacing( 0 )/3;
+				margin-bottom: math.div( u-spacing( 0 ), 3 );
 			}
 		}
 
@@ -211,7 +211,7 @@
 	}
 
 	td, th {
-		border: 1px solid u-border-color( 'background-dark', 20 );
+		border: 1px solid u-border-color( 'background-dark', 20% );
 		padding: 6px 12px;
 	}
 

package/themes/umberto/src/css/_guide-content.scss

@@ -14,7 +14,7 @@
 				position: absolute;
 				padding: 0 1em;
 				left: -2em;
-				color: u-color( 'link', 20 );
+				color: u-color( 'link', 20% );
 			}
 
 			&:hover {

package/themes/umberto/src/css/_notice.scss

@@ -28,8 +28,8 @@ p.tip {
 		width: $u-top-icon-width;
 		height: $u-top-icon-width;
 		position: absolute;
-		left: ($u-top-icon-width*2 - $u-top-icon-width/2 ) * -1;
-		top: $u-top-icon-width/2;
+		left: ( $u-top-icon-width * 2 - math.div( $u-top-icon-width, 2 ) ) * -1;
+		top: math.div( $u-top-icon-width, 2 );
 	}
 
 	@include u-responsive-narrow {
@@ -41,8 +41,8 @@ p.tip {
 			width: $u-top-icon-width;
 			height: $u-top-icon-width;
 			position: absolute;
-			left: $u-top-icon-width - $u-top-icon-width/2;
-			top: $u-top-icon-width/2;
+			left: $u-top-icon-width - math.div( $u-top-icon-width, 2 );
+			top: math.div( $u-top-icon-width, 2 );
 		}
 	}
 

package/themes/umberto/src/css/_secondary-navigation.scss

@@ -140,7 +140,7 @@ nav.api-secondary-navigation {
 	}
 
 	h3 {
-		margin-bottom: u-spacing( 0 ) / 3;
+		margin-bottom: math.div( u-spacing( 0 ), 3 );
 		padding-top: 0;
 	}
 }

package/themes/umberto/src/css/_toggler.scss

@@ -23,7 +23,7 @@
 
 		&:hover {
 			&::before {
-				border-color: transparent transparent transparent u-color( 'toggler', -8 );
+				border-color: transparent transparent transparent u-color( 'toggler', -8% );
 			}
 		}
 	}
@@ -37,7 +37,7 @@
 
 		&:hover {
 			&::before {
-				border-color: u-color( 'toggler', -8 ) transparent transparent transparent;
+				border-color: u-color( 'toggler', -8% ) transparent transparent transparent;
 			}
 		}
 	}