umberto 4.4.0 → 4.4.1

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 );
 	}
 }

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

@@ -1,36 +1,44 @@
 // 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:list';
+@use 'sass:map';
+@use 'sass:math';
+
 .formatted {
 	// @include u-draw-baseline( 0 );
 
 	p, ul, ol, blockquote, pre {
-		@include u-baseline( 0 );
+		@include font.u-baseline( 0 );
 	}
 
 	h1 {
-		@include u-baseline( 4 );
+		@include font.u-baseline( 4 );
 
 		& + dl {
-			margin-top: u-spacing( 0 );
+			margin-top: spacing.u-spacing( 0 );
 		}
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			font-size: 1.9em;
 		}
 	}
 
 	dd {
-		margin-bottom: u-spacing( 0 );
+		margin-bottom: spacing.u-spacing( 0 );
 	}
 
 	// temporary, should not be needed after typography redesign
 	h1:first-of-type {
-		$rhythm: map-get( $u-baseline-levels, 4 );
+		$rhythm: map.get( font.$u-baseline-levels, 4 );
 		width: 100%;
 
-		padding-top: nth( $rhythm, 3 ) - 0.5em;
-		margin-bottom: nth( $rhythm, 4 ) - 0.5em;
+		padding-top: list.nth( $rhythm, 3 ) - 0.5em;
+		margin-bottom: list.nth( $rhythm, 4 ) - 0.5em;
 
 		& + h2 {
 			padding-top: 0;
@@ -38,12 +46,12 @@
 	}
 
 	h2 {
-		@include u-baseline( 3 );
+		@include font.u-baseline( 3 );
 		padding-bottom: .2em;
-		border-bottom: 1px solid u-color( 'separator' );
+		border-bottom: 1px solid color.u-color( 'separator' );
 		font-weight: 400;
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			font-size: 1.5em;
 		}
 	}
@@ -53,19 +61,19 @@
 	}
 
 	h3 {
-		@include u-baseline( 2 );
+		@include font.u-baseline( 2 );
 		font-weight: 400;
 	}
 
 	h4 {
-		@include u-baseline( 1 );
-		@include u-baseline-margin( 2 );
-		@include u-baseline-padding( 2 );
+		@include font.u-baseline( 1 );
+		@include font.u-baseline-margin( 2 );
+		@include font.u-baseline-padding( 2 );
 		font-weight: 400;
 	}
 
 	h5 {
-		@include u-baseline( 0 );
+		@include font.u-baseline( 0 );
 		font-weight: 400;
 	}
 
@@ -88,17 +96,17 @@
 	}
 
 	code {
-		font-family: $u-font-face-mono;
+		font-family: font.$u-font-face-mono;
 		font-size: .866666em; // 13px
-		padding: u-spacing( 2 );
+		padding: spacing.u-spacing( 2 );
 	}
 
 	:not( pre ) > code:not( .highlight ) {
 		& {
-			// It's a darker shade of u-color( 'background-hue' ) so it looks good in info-boxes.
+			// It's a darker shade of color.u-color( 'background-hue' ) so it looks good in info-boxes.
 			// See #230.
 			background: rgba( 202, 205, 207, 0.3 );
-			padding: u-spacing( -4 ) u-spacing( -3 );
+			padding: spacing.u-spacing( -4 ) spacing.u-spacing( -3 );
 			border-radius: 3px;
 		}
 
@@ -118,7 +126,7 @@
 	}
 
 	a code:not( .highlight ) {
-		color: u-color( 'link' );
+		color: color.u-color( 'link' );
 	}
 
 	.highlight {
@@ -126,7 +134,7 @@
 		color: #f8f8f2;
 
 		a {
-			color: u-color( 'text-invert' );
+			color: color.u-color( 'text-invert' );
 		}
 	}
 
@@ -137,7 +145,7 @@
 	}
 
 	blockquote {
-		border-left: 1px solid u-color( toggler );
+		border-left: 1px solid color.u-color( toggler );
 		padding-left: 10px;
 		padding-top: 0;
 		font-style: italic;
@@ -145,24 +153,24 @@
 
 	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% );
+		background: color.u-color( 'background-dark' );
+		border: solid 1px color.u-border-color( 'background-hue', 5% );
+		border-bottom-color: color.u-border-color( 'background-hue', -5% );
+		box-shadow: inset 0 -1px 0  color.u-border-color( 'background-hue', -5% );
 		font-size: .866666em; // 13px
-		padding: u-spacing( -3 ) u-spacing( -2 );
+		padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 );
 		line-height: 1em;
 		vertical-align: middle;
 		border-radius: 3px;
 	}
 
 	ul, ol {
-		margin-left: 2 * u-spacing( 2 );
+		margin-left: 2 * spacing.u-spacing( 2 );
 
-		@include u-baseline-margin( 0 );
+		@include font.u-baseline-margin( 0 );
 
-		@include u-responsive-mobile {
-			margin-left: u-spacing( 2 );
+		@include globals.u-responsive-mobile {
+			margin-left: spacing.u-spacing( 2 );
 		}
 	}
 
@@ -172,7 +180,7 @@
 			margin-bottom: 0;
 
 			&:last-of-type {
-				margin-bottom: math.div( u-spacing( 0 ), 3 );
+				margin-bottom: math.div( spacing.u-spacing( 0 ), 3 );
 			}
 		}
 
@@ -185,13 +193,13 @@
 
 	p img {
 		display: block;
-		margin: u-spacing( 3 ) auto;
+		margin: spacing.u-spacing( 3 ) auto;
 		box-sizing: content-box;
 	}
 
 	iframe:not( .cke_wysiwyg_frame ) {
 		display: block;
-		margin: u-spacing( 3 ) auto;
+		margin: spacing.u-spacing( 3 ) auto;
 	}
 
 	ol {
@@ -199,7 +207,7 @@
 	}
 
 	table {
-		margin: u-spacing( 3 ) 0;
+		margin: spacing.u-spacing( 3 ) 0;
 		width: 100%;
 
 		/* See: #794. Long code or snippet without any white-space is breaking table. */
@@ -210,7 +218,7 @@
 	}
 
 	td, th {
-		border: 1px solid u-border-color( 'background-dark', 20% );
+		border: 1px solid color.u-border-color( 'background-dark', 20% );
 		padding: 6px 12px;
 	}
 
@@ -267,10 +275,10 @@
 	[dir=rtl] {
 		ul, ol {
 			margin-left: 0;
-			margin-right: 2 * u-spacing( 2 );
+			margin-right: 2 * spacing.u-spacing( 2 );
 
-			@include u-responsive-mobile {
-				margin-right: u-spacing( 2 );
+			@include globals.u-responsive-mobile {
+				margin-right: spacing.u-spacing( 2 );
 			}
 		}
 	}

package/themes/umberto/src/css/_guide-content.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/spacing';
+
 .main__content-inner {
   	h2, h3, h4, h5, h6 {
 		// Make sure only those headers that have IDs (and a link) get the relative position because applying
@@ -14,7 +17,7 @@
 				position: absolute;
 				padding: 0 1em;
 				left: -2em;
-				color: u-color( 'link', 20% );
+				color: color.u-color( 'link', 20% );
 			}
 
 			&:hover {
@@ -28,7 +31,7 @@
 	.inline {
 	  	display: inline-block;
 	  	margin: 0;
-	  	padding: 0 u-spacing( -2 );
+	  	padding: 0 spacing.u-spacing( -2 );
 	  	vertical-align: text-bottom;
 	}
 }

package/themes/umberto/src/css/_guide-sdk-tree.scss

@@ -1,13 +1,13 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-@import 'helpers/globals';
+@use 'helpers/spacing';
 
 .guide-tree,
 .sdk-tree {
 	.tree__item__text {
-		padding-top: u-spacing( -2 );
-		padding-bottom: u-spacing( -2 );
+		padding-top: spacing.u-spacing( -2 );
+		padding-bottom: spacing.u-spacing( -2 );
 		margin-top: 0;
 		margin-bottom: 0;
 	}