umberto 4.4.0 → 4.4.1

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 Changelog
 =========
 
+## [4.4.1](https://github.com/cksource/umberto/compare/v4.4.0...v4.4.1) (2024-10-30)
+
+### Other changes
+
+* The SASS deprecation warnings are no longer displayed when building the documentation. Closes [#1224](https://github.com/cksource/umberto/issues/1224). ([commit](https://github.com/cksource/umberto/commit/1bcbb5babcf7aa047e8c41d5962ef5dc085fc0fd))
+* Remove the _book_ icon from titles (from the `<h1>` element).
+
+
 ## [4.4.0](https://github.com/cksource/umberto/compare/v4.3.0...v4.4.0) (2024-10-02)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "files": [

package/themes/umberto/layout/page.pug

@@ -4,7 +4,6 @@ block content
 	- const split = uSplitToTitleAndContent( page.content );
 
 	h1.main__content-title
-		img( src=relative_url( page.path, 'assets/' + umbertoVersion + '/img/book.svg' ) alt="guide" )
 		!= split.title || page.title
 
 	if page.toc !== false

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

@@ -1,29 +1,33 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
 nav.api-info-box.api-secondary-navigation{
-	@include u-responsive-narrow {
-		padding: u-spacing( 2 ) u-spacing( 2 ) u-spacing( -3 );
+	@include globals.u-responsive-narrow {
+		padding: spacing.u-spacing( 2 ) spacing.u-spacing( 2 ) spacing.u-spacing( -3 );
 		min-width: 12em;
 
 		dt {
-			border-bottom: 1px solid u-color( 'separator' )
+			border-bottom: 1px solid color.u-color( 'separator' )
 		}
 
 		dd {
-			margin-right: u-spacing( -1 );
+			margin-right: spacing.u-spacing( -1 );
 		  	margin-bottom: 0;
 		}
 	}
 
-	@include u-responsive-wide {
+	@include globals.u-responsive-wide {
 		dl {
-			margin-bottom: 1.5 * $u-footer-height;
+			margin-bottom: 1.5 * globals.$u-footer-height;
 		}
 	}
 
-	@include u-responsive-wide-md {
-		padding-left: u-spacing(4);
+	@include globals.u-responsive-wide-md {
+		padding-left: spacing.u-spacing(4);
 	}
 
 	// Fix "no-breaking-space" as pseudoelement in the ToC for API (hierachy).
@@ -42,7 +46,7 @@ nav.api-info-box.api-secondary-navigation{
 	}
 
 	dt {
-		@include u-micro-header;
+		@include globals.u-micro-header;
 		margin-bottom: .5em;
 
 		&:first-child {
@@ -52,7 +56,7 @@ nav.api-info-box.api-secondary-navigation{
 
 	ul {
 		list-style: none;
-		margin: 0 0 u-spacing( 1 ) u-spacing( 2 );
+		margin: 0 0 spacing.u-spacing( 1 ) spacing.u-spacing( 2 );
 		padding: 0;
 
 		code {

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

@@ -1,17 +1,21 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@use 'helpers/color';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
 div.api-props-filter {
 	right: 0;
-	left: $u-sidebar-width;
-	padding-top: u-spacing( -1 );
+	left: globals.$u-sidebar-width;
+	padding-top: spacing.u-spacing( -1 );
 	margin-bottom: 0;
 	text-align: center;
 
-	@include u-sticky-filter;
+	@include globals.u-sticky-filter;
 
 	h4 {
-		@include u-micro-header;
+		@include globals.u-micro-header;
 	}
 
 	ul {
@@ -24,12 +28,12 @@ div.api-props-filter {
 	}
 
 	input:checked + label span {
-		color: u-color( 'text-invert' );
-		background: u-color( 'selected' );
-		border-color: u-color( 'selected' );
+		color: color.u-color( 'text-invert' );
+		background: color.u-color( 'selected' );
+		border-color: color.u-color( 'selected' );
 
 		&:hover {
-			background: u-color( 'selected', 5% );
+			background: color.u-color( 'selected', 5% );
 		}
 	}
 
@@ -38,24 +42,24 @@ div.api-props-filter {
 		margin: 0 auto;
 		padding-left: 0;
 
-		@include u-responsive-narrow {
+		@include globals.u-responsive-narrow {
 			padding: {
-				left: $u-content-margin;
-				right: $u-content-margin;
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
 			}
-			width: $u-content-max-width;
+			width: globals.$u-content-max-width;
 		}
 
-		@include u-responsive-wide {
-			width: $u-content-min-width + $u-sidebar-width;
+		@include globals.u-responsive-wide {
+			width: globals.$u-content-min-width + globals.$u-sidebar-width;
 		}
 
-		@include u-responsive-wide-md {
-			width: $u-content-md-width + $u-sidebar-width;
+		@include globals.u-responsive-wide-md {
+			width: globals.$u-content-md-width + globals.$u-sidebar-width;
 		}
 
-		@include u-responsive-wide-plus {
-			width: $u-content-max-width + $u-sidebar-width;
+		@include globals.u-responsive-wide-plus {
+			width: globals.$u-content-max-width + globals.$u-sidebar-width;
 		}
 	}
 
@@ -65,7 +69,7 @@ div.api-props-filter {
 	}
 
 	h4 {
-		margin: 0 u-spacing( 2 ) 0 0;
+		margin: 0 spacing.u-spacing( 2 ) 0 0;
 		padding: 0;
 
 		&::before {
@@ -73,12 +77,12 @@ div.api-props-filter {
 			display: inline-block;
 			width: 13px;
 			float: left;
-			margin-right: u-spacing( -2 );
+			margin-right: spacing.u-spacing( -2 );
 			position: relative;
 			top: 2px;
 		}
 
-		@include u-responsive-narrow {
+		@include globals.u-responsive-narrow {
 			display:none;
 		}
 	}
@@ -93,59 +97,10 @@ div.api-props-filter {
 
 	li {
 		display: inline-block;
-		margin-left: u-spacing( -2 );
+		margin-left: spacing.u-spacing( -2 );
 	}
 
 	input {
 		display: none;
 	}
-
-	//@include u-responsive-narrow {
-	//	@include u-sticky-filter;
-	//
-	//	right: 0;
-	//	left: $u-sidebar-width;
-	//	padding-left: 3*u-spacing( 3 );
-	//
-	//	ul, h4 {
-	//		display: inline-block;
-	//		vertical-align: middle;
-	//	}
-	//
-	//	h4 {
-	//		margin: 0 u-spacing( 2 ) 0 0;
-	//		padding: 0;
-	//
-	//		&::before {
-	//			content: url( ../img/filter.svg );
-	//			display: inline-block;
-	//			width: 13px;
-	//			float: left;
-	//			margin-right: u-spacing( -2 );
-	//			position: relative;
-	//			top: 2px;
-	//		}
-	//	}
-	//
-	//	&::before {
-	//		display: none;
-	//	}
-	//
-	//	ul {
-	//		padding: 0;
-	//	}
-	//
-	//	li {
-	//		display: inline-block;
-	//		margin-left: u-spacing( -2 );
-	//	}
-	//
-	//	input {
-	//		display: none;
-	//	}
-	//}
-	//
-	//@include u-responsive-wide {
-	//	padding: u-spacing( 4 );
-	//}
 }

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

@@ -1,6 +1,9 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@use 'helpers/font';
+@use 'helpers/globals';
+
 .main__content-inner {
 	.hidden-loading {
 		display: none;
@@ -16,20 +19,20 @@
 			display: none;
 		}
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			flex-wrap: wrap;
 		}
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			&__badges {
 				width: 100%;
 			}
 		}
 
 		&__navigation {
-			@include u-font-mono;
+			@include font.u-font-mono;
 
-			@include u-responsive-mobile {
+			@include globals.u-responsive-mobile {
 				margin-left: auto;
 			}
 

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

@@ -1,11 +1,16 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
 .tree.api-tree {
-	@include u-font-mono;
+	@include font.u-font-mono;
 
-	@include u-responsive-tablet {
-		@include levels( 3, 1 );
+	@include globals.u-responsive-tablet {
+		@include globals.levels( 3, 1 );
 	}
 
 	/* Generate styles for tree levels on <960px devices differently.
@@ -14,7 +19,7 @@
 	[data-private], [data-protected] {
 		display: none;
 
-		@include u-responsive-tablet {
+		@include globals.u-responsive-tablet {
 			display: block;
 		}
 	}
@@ -29,16 +34,16 @@
 		padding-top: 0;
 		padding-bottom: 0;
 
-		@include u-responsive-tablet {
-			padding: u-spacing( -3 ) 0;
+		@include globals.u-responsive-tablet {
+			padding: spacing.u-spacing( -3 ) 0;
 		}
 	}
 
 	li::before {
 		top: .4em;
 
-		@include u-responsive-tablet {
-			top: u-spacing( -1 );
+		@include globals.u-responsive-tablet {
+			top: spacing.u-spacing( -1 );
 			margin-left: -10px !important;
 		}
 	}
@@ -48,13 +53,13 @@
 .api-tree__filter {
 	text-align: center;
 	left: 0;
-	width: $u-sidebar-width;
-	border-right: 1px solid u-color( 'background-hue' );
+	width: globals.$u-sidebar-width;
+	border-right: 1px solid color.u-color( 'background-hue' );
 
-	@include u-sticky-filter;
-	@include u-unselectable;
+	@include globals.u-sticky-filter;
+	@include globals.u-unselectable;
 
-	@include u-responsive-tablet {
+	@include globals.u-responsive-tablet {
 		display: none;
 	}
 
@@ -64,7 +69,7 @@
 
 	// TODO: Magic numbers below...
 	label {
-		@include u-micro-header;
+		@include globals.u-micro-header;
 		padding-right: 65px;
 	}
 
@@ -82,7 +87,7 @@
 			display: inline-block;
 			width: 50px;
 			height: 20px;
-			background: u-color( 'primary' );
+			background: color.u-color( 'primary' );
 			position: absolute;
 			right: 0;
 			top: -4px;
@@ -106,7 +111,7 @@
 		&::before {
 			content: "Yes";
 			padding-left: 7px;
-			background: u-color( 'selected' );
+			background: color.u-color( 'selected' );
 		}
 
 		&::after {

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

@@ -1,14 +1,18 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/spacing';
+
 @mixin badge( $color ) {
 	&--#{ $color } {
-		border-color: u-color( 'badge-#{ $color }' );
-		color: u-color( 'badge-#{ $color }' );
+		border-color: color.u-color( 'badge-#{ $color }' );
+		color: color.u-color( 'badge-#{ $color }' );
 
 		.badge__invert {
-			color: u-color( 'text-invert' );
-			background: u-color( 'badge-#{ $color }' );
+			color: color.u-color( 'text-invert' );
+			background: color.u-color( 'badge-#{ $color }' );
 		}
 
 	  	a {
@@ -16,7 +20,7 @@
 			text-decoration: none;
 
 			&:hover {
-				color: u-color('badge-#{ $color }', -50% );
+				color: color.u-color('badge-#{ $color }', -50% );
 				text-decoration: none;
 			}
 		}
@@ -26,9 +30,9 @@
 .badge {
 	vertical-align: middle;
 	text-transform: uppercase;
-	font-size: u-font-size( -1 );
-	padding: u-spacing( -3 ) u-spacing( -2 ) u-spacing( -3 );
-	border: 1px solid u-color( 'text' );
+	font-size: font.u-font-size( -1 );
+	padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 ) spacing.u-spacing( -3 );
+	border: 1px solid color.u-color( 'text' );
 	margin-right: 1rem;
 
 	&.badge--has-invert {
@@ -36,10 +40,10 @@
 	}
 
 	.badge__invert {
-		color: u-color( 'text-invert' );
-		background: u-color( 'text' );
-		padding: u-spacing( -3 ) u-spacing( -2 );
-		margin-left: u-spacing( -4 );
+		color: color.u-color( 'text-invert' );
+		background: color.u-color( 'text' );
+		padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 );
+		margin-left: spacing.u-spacing( -4 );
 	}
 
 	@include badge( 'gray' );

package/themes/umberto/src/css/_code-switcher.scss

@@ -1,9 +1,16 @@
+// Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/spacing';
+
 .code-switcher {
-    margin-bottom: u-spacing( -1 );
+    margin-bottom: spacing.u-spacing( -1 );
     padding-top: 4px;
     border-radius: 4px;
 
-    background-color: u-color( 'snippet-background' );
+    background-color: color.u-color( 'snippet-background' );
 
     pre.highlight[class*=language-] {
         margin: 0;
@@ -19,7 +26,7 @@
         padding: 4px 12px;
         border-radius: 2px;
 
-        background-color: u-color( 'background-gray' );
+        background-color: color.u-color( 'background-gray' );
     }
 
     &__button {
@@ -32,23 +39,23 @@
 
         background-color: transparent;
 
-        font-size: u-font-size( 0 );
+        font-size: font.u-font-size( 0 );
         font-weight: 500;
 
-        color: u-color( 'text-invert-gray' );
+        color: color.u-color( 'text-invert-gray' );
 
         cursor: pointer;
 
         transition: 150ms ease color;
 
         &:hover {
-            color: u-color( 'text-invert' );
+            color: color.u-color( 'text-invert' );
         }
         
         &--active {
-            border-bottom: 2px solid u-color( 'text-invert' );
+            border-bottom: 2px solid color.u-color( 'text-invert' );
 
-            color: u-color( 'text-invert' );
+            color: color.u-color( 'text-invert' );
         }
     }
 }

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

@@ -1,6 +1,11 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/spacing';
+@use 'sass:math';
+
 ul.collapsing-list {
 	margin: 0;
 	padding: 0;
@@ -8,16 +13,16 @@ ul.collapsing-list {
 }
 
 .collapsing-list {
-	margin-top: u-spacing( 1 );
+	margin-top: spacing.u-spacing( 1 );
 
 	dd {
-		min-height: u-spacing( 1 );
+		min-height: spacing.u-spacing( 1 );
 		margin: 0;
 	}
 
 	@keyframes highlight {
 		0% {
-			background: u-color( 'highlight' )
+			background: color.u-color( 'highlight' )
 		}
 		100% {
 			background: none;
@@ -25,7 +30,7 @@ ul.collapsing-list {
 	}
 
 	&--empty {
-		margin-bottom: u-spacing( 0 );
+		margin-bottom: spacing.u-spacing( 0 );
 
 		&::before {
 			content: "No items to display for current filtering criteria."
@@ -33,7 +38,7 @@ ul.collapsing-list {
 	}
 
 	&__content h4 {
-		@include u-baseline-padding( 0 );
+		@include font.u-baseline-padding( 0 );
 	}
 	&__item {
 		&--first {
@@ -48,13 +53,13 @@ ul.collapsing-list {
 	}
 
 	&__term {
-		padding-top: u-spacing( 0 );
+		padding-top: spacing.u-spacing( 0 );
 		position: relative;
 		display: flex;
-		border-top: 1px solid u-color( 'separator' );
+		border-top: 1px solid color.u-color( 'separator' );
 
 		&--no-excerpt {
-			padding: u-spacing( -3 ) 0;
+			padding: spacing.u-spacing( -3 ) 0;
 		}
 
 		&.toggler {
@@ -63,22 +68,22 @@ ul.collapsing-list {
 				cursor: pointer;
 
 				& + .collapsing-list__description {
-					padding-left: u-spacing(3);
+					padding-left: spacing.u-spacing(3);
 				}
 
 				&::before {
 					position: absolute;
-					top: u-spacing(-1);
+					top: spacing.u-spacing(-1);
 					left: 0;
 				}
 			}
 
 			&--collapsed {
-				padding: u-spacing( -3 ) 0 u-spacing( -3 ) u-spacing( 3 );
+				padding: spacing.u-spacing( -3 ) 0 spacing.u-spacing( -3 ) spacing.u-spacing( 3 );
 
 				& + .collapsing-list__description {
 					.collapsing-list__excerpt {
-						height: $u-line-height-base + em;
+						height: font.$u-line-height-base + em;
 
 						/* #791. Wrap excerpt one liner with (...) when collapsed. */
 						p {
@@ -93,13 +98,13 @@ ul.collapsing-list {
 					}
 
 					.collapsing-list__excerpt {
-						margin-bottom: u-spacing( -3 );
+						margin-bottom: spacing.u-spacing( -3 );
 					}
 				}
 			}
 
 			&--expanded {
-				padding: u-spacing( -3 ) 0 u-spacing( -3 ) u-spacing( 3 );
+				padding: spacing.u-spacing( -3 ) 0 spacing.u-spacing( -3 ) spacing.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) {
@@ -113,7 +118,7 @@ ul.collapsing-list {
 							overflow: visible;
 							height: auto;
 							white-space: inherit;
-							margin-bottom: u-spacing( -3 );
+							margin-bottom: spacing.u-spacing( -3 );
 						}
 					}
 
@@ -144,7 +149,7 @@ ul.collapsing-list {
 			padding-top: 0;
 			width: 100%;
 
-			@include u-baseline( 0 );
+			@include font.u-baseline( 0 );
 
 			code {
 				font-weight: 400;
@@ -157,7 +162,7 @@ ul.collapsing-list {
 			.badges {
 				text-align: right;
 				float: right;
-				margin-left: u-spacing( 0 );
+				margin-left: spacing.u-spacing( 0 );
 			}
 		}
 
@@ -181,7 +186,7 @@ ul.collapsing-list {
 	}
 
 	&__description {
-		//padding: 0 0 0 u-spacing( 3 );
+		//padding: 0 0 0 spacing.u-spacing( 3 );
 		overflow: hidden;
 
 		.collapsing-list__excerpt {
@@ -190,31 +195,31 @@ ul.collapsing-list {
 			&--short {
 				text-overflow: ellipsis;
 				overflow: hidden;
-				height: $u-line-height-base + em;
+				height: font.$u-line-height-base + em;
 				white-space: nowrap;
-				margin-bottom: math.div( u-spacing( 0 ), 2 );
+				margin-bottom: math.div( spacing.u-spacing( 0 ), 2 );
 			}
 		}
 
 		dl {
-			padding: 0 0 0 u-spacing( 3 );
+			padding: 0 0 0 spacing.u-spacing( 3 );
 
 			dd p {
-				padding-left: u-spacing( 3 );
+				padding-left: spacing.u-spacing( 3 );
 			}
 
 			.dlheading5,
 			.dlheading6 {
-				@include u-baseline( 0 );
-				padding-left: u-spacing( 3 );
+				@include font.u-baseline( 0 );
+				padding-left: spacing.u-spacing( 3 );
 				font-weight: 400;
-				color: rgba( u-color( 'text-header' ), .9 );
+				color: rgba( color.u-color( 'text-header' ), .9 );
 			}
 		}
 	}
 
 	&__bottom {
-		margin-bottom: u-spacing( 0 );
+		margin-bottom: spacing.u-spacing( 0 );
 	}
 
 	&--filtered {
@@ -233,15 +238,15 @@ ul.collapsing-list {
 
 	.collapsing-list__description {
 		ul, ol {
-			@include u-baseline( 0 );
+			@include font.u-baseline( 0 );
 		}
 	}
 
 	&__dev-names {
 		code#{&}--active {
 			display: block;
-			color: u-color( 'text', 40% );
-			font-size: u-font-size( -1 );
+			color: color.u-color( 'text', 40% );
+			font-size: font.u-font-size( -1 );
 			cursor: default;
 			white-space: nowrap;
 			overflow: hidden;