umberto 1.17.0 → 2.0.1

package/themes/umberto/layout/_api-docs/api-base.pug

@@ -1,6 +1,8 @@
 extends ../base
 
 block content
+    include _partial/loading-spinner
+
     include _partial/api-subheader
 
     include _partial/api-info-box

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/src/css/_api-content.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .main__content--api {

package/themes/umberto/src/css/_api-info-box.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 nav.api-info-box.api-secondary-navigation{

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 div.api-props-filter {
@@ -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/_api-see-source.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .main__content--api {

package/themes/umberto/src/css/_api-subheader.scss

@@ -1,9 +1,16 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .main__content-inner {
+	.hidden-loading {
+		display: none;
+	}
+
 	.api-subheader {
-		display: flex;
+		&.hidden-loading {
+			display: none;
+		}
+
 		justify-content: space-between;
 		align-items: center;
 		margin-bottom: 20px;

package/themes/umberto/src/css/_api-tree.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .tree.api-tree {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 @mixin badge( $color ) {
@@ -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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 ul.collapsing-list {
@@ -12,7 +12,7 @@ ul.collapsing-list {
 
 	dd {
 		min-height: u-spacing( 1 );
-	  	margin: 0;
+		margin: 0;
 	}
 
 	@keyframes highlight {
@@ -49,11 +49,11 @@ ul.collapsing-list {
 
 	&__term {
 		padding-top: u-spacing( 0 );
-	  	position: relative;
+		position: relative;
 		display: flex;
 		border-top: 1px solid u-color( 'separator' );
 
-	  	&.toggler {
+		&.toggler {
 			&--collapsed,
 			&--expanded {
 				cursor: pointer;
@@ -85,7 +85,7 @@ ul.collapsing-list {
 					}
 
 					.collapsing-list__content {
-					  	display: none;
+						display: none;
 					}
 
 					.collapsing-list__excerpt {
@@ -95,7 +95,7 @@ ul.collapsing-list {
 			}
 
 			&--expanded {
-			  	padding: u-spacing( -3 ) 0 u-spacing( -3 ) u-spacing( 3 );
+				padding: u-spacing( -3 ) 0 u-spacing( -3 ) u-spacing( 3 );
 
 				// Do not touch dedicated error code page. See: https://github.com/cksource/umberto/issues/788
 				& + .collapsing-list__description:not(.collapsing-list__description--error-page) {
@@ -133,7 +133,7 @@ ul.collapsing-list {
 			}
 		}
 
-	  	h3 {
+		h3 {
 			@include u-baseline( 0 );
 
 			code {
@@ -144,7 +144,7 @@ ul.collapsing-list {
 			padding-top: 0;
 
 			&:first-of-type {
-			  flex: 2;
+				flex: 2;
 			}
 		}
 
@@ -158,15 +158,15 @@ ul.collapsing-list {
 			margin-left: u-spacing( 0 );
 		}
 
-	  	&.hidden {
-		  	&::before {
-			  	display: none;
+		&.hidden {
+			&::before {
+				display: none;
 			}
 
-		  	&.toggler {
+			&.toggler {
 				&--collapsed,
 				&--expanded {
-  					cursor: auto;
+					cursor: auto;
 				}
 			}
 		}
@@ -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 );
 			}
 		}
 
@@ -196,18 +196,18 @@ ul.collapsing-list {
 				padding-left: u-spacing( 3 );
 			}
 
-		  	.dlheading5,
-		  	.dlheading6 {
+			.dlheading5,
+			.dlheading6 {
 				@include u-baseline( 0 );
-			  	padding-left: u-spacing( 3 );
+				padding-left: u-spacing( 3 );
 				font-weight: 400;
-			  	color: rgba( u-color( 'text-header' ), .9 );
+				color: rgba( u-color( 'text-header' ), .9 );
 			}
 		}
 	}
 
-  	&__bottom {
-	  	margin-bottom: u-spacing( 0 );
+	&__bottom {
+		margin-bottom: u-spacing( 0 );
 	}
 
 	&--filtered {
@@ -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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .main__content {
@@ -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/_docsearch.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 $border-color-light: hsl( 0, 0%, 90% );

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 $u-button-size-width: 72px;

package/themes/umberto/src/css/_editor-icon.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 // Synchronize these classes with `scripts/utils/parseicontag.js`.

package/themes/umberto/src/css/_feedback-widget.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .feedback-widget {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .footer {
@@ -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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .formatted {
@@ -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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .main__content-inner {
@@ -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/_guide-sdk-tree.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 @import 'helpers/globals';

package/themes/umberto/src/css/_loading-spinner.scss

@@ -0,0 +1,33 @@
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.loading {
+	.loading-spinner,
+	.loading-spinner:after {
+	  border-radius: 50%;
+	  width: 10em;
+	  height: 10em;
+	}
+
+	.loading-spinner {
+	  margin: 60px auto;
+	  font-size: 10px;
+	  position: relative;
+	  text-indent: -9999em;
+	  border-top: 1.1em solid rgba(0,0,0, 0.2);
+	  border-right: 1.1em solid rgba(0,0,0, 0.2);
+	  border-bottom: 1.1em solid rgba(0,0,0, 0.2);
+	  border-left: 1.1em solid #000000;
+	  transform: translateZ(0);
+	  animation: spin 1.1s infinite linear;
+	}
+
+	@keyframes spin {
+	  0% {
+		transform: rotate(0deg);
+	  }
+	  100% {
+		transform: rotate(360deg);
+	  }
+	}
+}

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .main {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .side-navigation {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 p.notice,
@@ -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/_print.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 @media print {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 /**

package/themes/umberto/src/css/_rwd-breadcrumbs.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .rwd-breadcrumbs {

package/themes/umberto/src/css/_rwd-menu.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .header__menu-rwd {

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 nav.secondary-navigation {
@@ -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/_theme-dark.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 /* If you want to activate dark mode, fire in the console `localStorage.setItem( 'theme', 'theme-dark' ); `*/

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .toggler {
@@ -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;
 			}
 		}
 	}

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 $u-button-size-width: 72px;
@@ -96,8 +96,8 @@ $u-rwd-button-size: 24px;
 						border-radius: 5px;
 						transition: 250ms all ease;
 
-						&:nth-child( 2 ) { top: ( $u-rwd-button-size / 3 ) * 1; }
-						&:nth-child( 3 ) { top: ( $u-rwd-button-size / 3 ) * 2; }
+						&:nth-child( 2 ) { top: math.div( $u-rwd-button-size, 3 ) * 1; }
+						&:nth-child( 3 ) { top: math.div( $u-rwd-button-size, 3 ) * 2; }
 					}
 				}
 			}
@@ -258,7 +258,7 @@ $u-rwd-button-size: 24px;
 				transition: 150ms ease all;
 
 				&:hover {
-					background-color: u-color( 'background-dark', -3 );
+					background-color: u-color( 'background-dark', -3% );
 				}
 
 				&:hover,
@@ -275,7 +275,7 @@ $u-rwd-button-size: 24px;
 					svg {
 						fill: currentColor;
 						width: 30px;
-						margin-top: ($u-top-sub - 30px) / 2;
+						margin-top: math.div( $u-top-sub - 30px, 2 );
 					}
 				}
 			}
@@ -308,7 +308,7 @@ $u-rwd-button-size: 24px;
 			}
 
 			&::-webkit-input-placeholder {
-				color: u-color( 'text', 70 );
+				color: u-color( 'text', 70% );
 			}
 
 			&:focus,

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 @import 'helpers/globals';
@@ -95,7 +95,7 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 				background-color: u-color( 'background-hue' );
 
 				&:hover {
-					background-color: u-color( 'background-hue', -3 );
+					background-color: u-color( 'background-hue', -3% );
 				}
 			}
 		}

package/themes/umberto/src/css/_warning-banner.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .top {

package/themes/umberto/src/css/components/_lightbox.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 /* Set bigger z-index than documentation header. */

package/themes/umberto/src/css/helpers/_color.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 $u-colors: (
@@ -33,10 +33,10 @@ $u-colors: (
 	'hint-warning': #FF1D00
 );
 
-@function u-color( $name, $offset: 0 ) {
+@function u-color( $name, $offset: 0% ) {
 	@return scale-color( map-get( $u-colors, $name ), $lightness: $offset );
 }
 
-@function u-border-color( $name, $offset: 0 ) {
-	@return u-color( $name, $offset - 25 );
+@function u-border-color( $name, $offset: 0% ) {
+	@return u-color( $name, $offset - 25% );
 }

package/themes/umberto/src/css/helpers/_font.scss

@@ -1,4 +1,4 @@
-// Copyright (c) 2017-2021, CKSource - Frederico Knabben. All rights reserved.
+// Copyright (c) 2017-2022, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
@@ -25,7 +25,7 @@ $u-font-sizes: (
 @mixin u-font-mono {
 	font-family: $u-font-face-mono;
 	font-size: .9em;
-	color: u-color( text, 20 );
+	color: u-color( text, 20% );
 }
 
 $u-baseline-levels: (