umberto 4.4.0 → 4.4.2

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;

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

@@ -1,24 +1,31 @@
 // 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';
+@use 'sass:map';
+@use 'sass:math';
+
 .main__content {
-	@include u-box;
+	@include globals.u-box;
 	max-width: 100%;
-	min-width: $u-content-min-width + 2 * $u-content-margin;
+	min-width: globals.$u-content-min-width + 2 * globals.$u-content-margin;
 	flex: 1;
-	padding: u-spacing( 4 ) 0 3*u-spacing( 2 );
+	padding: spacing.u-spacing( 4 ) 0 3 * spacing.u-spacing( 2 );
 	position: relative;
 
-	@include u-responsive-wide {
-		padding-right: $u-sidebar-width;
+	@include globals.u-responsive-wide {
+		padding-right: globals.$u-sidebar-width;
 	}
 
-	@include u-responsive-tablet {
+	@include globals.u-responsive-tablet {
 		min-width: unset;
 	}
 
-	@include u-responsive-mobile {
-		padding: u-spacing( 0 ) 0;
+	@include globals.u-responsive-mobile {
+		padding: spacing.u-spacing( 0 ) 0;
 	}
 
 	&-inner {
@@ -30,39 +37,39 @@
 		}
 		max-width: 100%;
 
-		@include u-responsive-narrow {
-			max-width: $u-content-max-width + 2*$u-content-margin;
+		@include globals.u-responsive-narrow {
+			max-width: globals.$u-content-max-width + 2 * globals.$u-content-margin;
 			padding: {
-				left: $u-content-margin;
-				right: $u-content-margin;
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
 			}
 		}
 
-		@include u-responsive-wide {
+		@include globals.u-responsive-wide {
 			width: auto;
 			margin: {
-				left: $u-content-margin;
-				right: $u-content-margin;
+				left: globals.$u-content-margin;
+				right: globals.$u-content-margin;
 			}
 		}
 
-		@include u-responsive-wide-plus {
-			width: $u-content-max-width;
+		@include globals.u-responsive-wide-plus {
+			width: globals.$u-content-max-width;
 			margin: 0 auto;
 		}
 
-		@include u-responsive-tablet {
+		@include globals.u-responsive-tablet {
 			max-width: 100%;
 			padding: {
-				left: u-spacing( 3 );
-				right: u-spacing( 3 );
+				left: spacing.u-spacing( 3 );
+				right: spacing.u-spacing( 3 );
 			}
 		}
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			padding: {
-				left: u-spacing( 0 );
-				right: u-spacing( 0 );
+				left: spacing.u-spacing( 0 );
+				right: spacing.u-spacing( 0 );
 			}
 		}
 
@@ -71,26 +78,26 @@
 			height: auto;
 		}
 
-		@include u-responsive-wide-plus {
+		@include globals.u-responsive-wide-plus {
 			img {
-				max-width: $u-content-max-width;
+				max-width: globals.$u-content-max-width;
 			}
 		}
 
 
 		h1 {
 			&:first-of-type {
-				margin-bottom: math.div( u-spacing( 0 ), 2 );
+				margin-bottom: math.div( spacing.u-spacing( 0 ), 2 );
 			}
 		}
 
 	.types {
-			margin-bottom: u-spacing( 2 );
+			margin-bottom: spacing.u-spacing( 2 );
 		}
 		/* #351 Npm badge should be aligned to the left instead of centered. */
 		a[href*="npmjs.com"] {
 			img {
-				margin: u-spacing( -2 ) 0 u-spacing( 3 );
+				margin: spacing.u-spacing( -2 ) 0 spacing.u-spacing( 3 );
 			}
 		}
 	}
@@ -107,14 +114,14 @@
 
 		img {
 			height: 2.7em;
-			margin-right: u-spacing( 3 );
+			margin-right: spacing.u-spacing( 3 );
 		}
 
 		h1 {
 			/* #494. Break long named API elements in the main header. */
 			word-break: break-word;
 
-			$rhythm: map-get( $u-baseline-levels, 4 );
+			$rhythm: map.get( font.$u-baseline-levels, 4 );
 
 			padding: 0;
 			margin: 0;
@@ -124,7 +131,7 @@
 			font-size: 0.9em;
 			padding: 0;
 			margin: -0.4em 0 0 0;
-			color: u-color( 'text', 50% );
+			color: color.u-color( 'text', 50% );
 
 			&--hidden {
 				display: none;
@@ -133,7 +140,7 @@
 	}
 
 	h1.main__content-title {
-		// @include u-font-mono;
+		// @include font.u-font-mono;
 		// Never separate the icon from the title.
 		// white-space: nowrap;
 		display: inline-block;
@@ -143,10 +150,10 @@
 			vertical-align: middle;
 			position: relative;
 			top: -.1em;
-			margin-right: u-spacing( -2 );
+			margin-right: spacing.u-spacing( -2 );
 
-			@include u-responsive-mobile {
-				margin-right: u-spacing( -4 );
+			@include globals.u-responsive-mobile {
+				margin-right: spacing.u-spacing( -4 );
 			}
 		}
 	}
@@ -157,7 +164,7 @@
 
 		/* #469. Method name in the API collapsing list should be styled differently. */
 		a.member-name,
-		span.member-name, {
+		span.member-name {
 			font-weight: bold;
 		}
 	}
@@ -173,11 +180,11 @@
 
 	.typedef-callback {
 		h4 {
-			@include u-baseline-padding( 0 );
+			@include font.u-baseline-padding( 0 );
 		}
 
 		dl {
-			padding: 0 0 0 u-spacing( 3 );
+			padding: 0 0 0 spacing.u-spacing( 3 );
 		}
 
 		dt code {
@@ -186,11 +193,11 @@
 		}
 
 		dd {
-			min-height: u-spacing( 1 );
+			min-height: spacing.u-spacing( 1 );
 			margin: 0;
 
 			p {
-				padding-left: u-spacing( 3 );
+				padding-left: spacing.u-spacing( 3 );
 			}
 		}
 	}
@@ -201,12 +208,12 @@
 		top: 0;
 
 		// https://github.com/cksource/umberto/issues/348
-		@include u-responsive-narrow {
-			right: $u-content-margin;
+		@include globals.u-responsive-narrow {
+			right: globals.$u-content-margin;
 		}
 
 		// We dont' need these buttons on mobile: https://github.com/cksource/umberto/issues/538
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			display: none;
 		}
 

package/themes/umberto/src/css/_docsearch.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/color';
+@use 'helpers/globals';
+
 $border-color-light: hsl( 0, 0%, 90% );
 $border-color-dark: hsl( 0, 0%, 50% );
 
@@ -8,7 +11,7 @@ $border-color-dark: hsl( 0, 0%, 50% );
 	.algolia-docsearch-suggestion--category-header {
 		background: hsl(0, 0%, 96%);
 		font-size: 1.2em;
-		color: u-color( 'text-gray') ;
+		color: color.u-color( 'text-gray') ;
 		border-bottom: 1px solid $border-color-dark;
 		border-top: 1px solid $border-color-dark;
 
@@ -59,17 +62,17 @@ $border-color-dark: hsl( 0, 0%, 50% );
 		overflow-y: auto;
 		max-height: 90vh;
 
-		@include u-responsive-tablet-plus {
+		@include globals.u-responsive-tablet-plus {
 			max-width: 800px;
 			width: 800px;
 		}
 
-		@include u-responsive-tablet {
+		@include globals.u-responsive-tablet {
 			max-width: 80vw;
 			width: 80vw;
 		}
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			max-width: 95vw;
 			width: 95vw;
 		}
@@ -78,7 +81,7 @@ $border-color-dark: hsl( 0, 0%, 50% );
 	.ds-suggestion {
 		.algolia-docsearch-suggestion {
 			&--subcategory-column-text {
-				color: u-color( text );
+				color: color.u-color( text );
 			}
 			&--no-results {
 				border: none;
@@ -86,7 +89,7 @@ $border-color-dark: hsl( 0, 0%, 50% );
 				font-weight: 400;
 			}
 			&----category-header {
-				color: u-color( 'text-gray' );
+				color: color.u-color( 'text-gray' );
 			}
 		}
 

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

@@ -1,13 +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/globals';
+
 $u-button-size-width: 72px;
 $u-space-between: 15px;
 $u-icon-size: 36px;
 
 .dropdown {
 	&__wrapper {
-		width: $u-sidebar-width;
+		width: globals.$u-sidebar-width;
 		position: relative;
 		padding-left: $u-space-between;
 	}
@@ -16,15 +19,15 @@ $u-icon-size: 36px;
 		display: inline-block;
 		padding-left: $u-space-between;
 		font-weight: bold;
-		color: u-color( 'text-gray' );
-		line-height: $u-top-sub;
+		color: color.u-color( 'text-gray' );
+		line-height: globals.$u-top-sub;
 	}
 
 	&__content {
 		position: absolute;
 		overflow: hidden;
 		z-index: 1;
-		background: u-color( 'background-bright' );
+		background: color.u-color( 'background-bright' );
 		transition: opacity 200ms ease-in-out;
 
 	  	li {
@@ -33,7 +36,7 @@ $u-icon-size: 36px;
 
 		  	a {
 			  	display: block;
-				color: u-color( 'text-gray' );
+				color: color.u-color( 'text-gray' );
 				text-decoration: none;
 				transition: all 200ms ease-in-out;
 			}

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

@@ -1,8 +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/spacing';
+
 .feedback-widget {
-	border-top: 1px solid u-color( 'separator' );
-	margin-top: u-spacing( 3 );
-	padding-top: u-spacing( 3 ) * 2;
+	border-top: 1px solid color.u-color( 'separator' );
+	margin-top: spacing.u-spacing( 3 );
+	padding-top: spacing.u-spacing( 3 ) * 2;
 }

package/themes/umberto/src/css/_font-external.scss

@@ -0,0 +1,8 @@
+// Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+// All external fonts have to be imported via this file, and this file can only be imported once in the root file.
+// This is because if a file that has external imports is imported in several places, imports such as the one below
+// will be duplicated in compiled css.
+
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');

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

@@ -1,35 +1,40 @@
 // 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';
+
 .footer {
 	z-index: 30;
-	font-size: u-font-size( -2 );
-  	width: $u-sidebar-width;
-  	height: 50px;
+	font-size: font.u-font-size( -2 );
+	width: globals.$u-sidebar-width;
+	height: 50px;
 
-	@include u-responsive-narrow {
-		background: u-color( 'background-bright' );
+	@include globals.u-responsive-narrow {
+		background: color.u-color( 'background-bright' );
 		text-align: right;
-		padding: u-spacing( -2 ) u-spacing( 4 ) u-spacing( 0 ) u-spacing( 2 );
+		padding: spacing.u-spacing( -2 ) spacing.u-spacing( 4 ) spacing.u-spacing( 0 ) spacing.u-spacing( 2 );
 		position: relative;
 		float:right;
-	  	height: $u-footer-height;
+		height: globals.$u-footer-height;
 	}
 
-	@include u-responsive-wide {
+	@include globals.u-responsive-wide {
 		position: fixed;
-	  	bottom: 0;
-	  	right: 0;
+		bottom: 0;
+		right: 0;
 
-	  	&--bordered {
-			border-left: 1px solid u-color( 'background-hue' );
+		&--bordered {
+			border-left: 1px solid color.u-color( 'background-hue' );
 		}
 	}
 
 	p {
-		color: u-color( 'text', 20% );
-	  	position: absolute;
-		bottom: u-spacing( 2 );
-		right: u-spacing( 3 );
+		color: color.u-color( 'text', 20% );
+		position: absolute;
+		bottom: spacing.u-spacing( 2 );
+		right: spacing.u-spacing( 3 );
 	}
 }