umberto 4.4.0 → 4.4.2

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

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

@@ -1,27 +1,32 @@
 // 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';
+@use 'sass:meta';
+
 .main {
 	display: flex;
 	justify-content: flex-end;
 	flex-direction: row-reverse;
 	flex-wrap: nowrap;
-	min-height: calc( 100vh - #{ $u-top-height } );
+	min-height: calc( 100vh - #{ globals.$u-top-height } );
 
-	@include u-responsive-narrow {
-		background: u-color( 'background-bright' );
-		min-height: calc( 100vh - #{ $u-top-height } - #{ $u-footer-height } );
+	@include globals.u-responsive-narrow {
+		background: color.u-color( 'background-bright' );
+		min-height: calc( 100vh - #{ globals.$u-top-height } - #{ globals.$u-footer-height } );
 	}
 
-	@import 'content';
-	@import 'navigation';
+	@include meta.load-css('content');
+	@include meta.load-css('navigation');
 
 	// We need to move it up, because of no subheader
 	&--home {
-		margin-top: $u-top-sub * -1;
+		margin-top: globals.$u-top-sub * -1;
 
-		@include u-responsive-narrow {
-			min-height: calc( 100vh - #{ $u-top-sub } - #{ $u-footer-height } );
+		@include globals.u-responsive-narrow {
+			min-height: calc( 100vh - #{ globals.$u-top-sub } - #{ globals.$u-footer-height } );
 		}
 	}
 
@@ -37,16 +42,16 @@
 		.main__content-inner {
 			width: auto;
 			margin: auto;
-			max-width: $u-content-max-width + 2*$u-content-margin;
+			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-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 );
 				}
 			}
 		}

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

@@ -1,25 +1,29 @@
 // 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';
+
 .side-navigation {
-	flex: 0 0 $u-sidebar-width;
+	flex: 0 0 globals.$u-sidebar-width;
 
-	@include u-responsive-tablet {
+	@include globals.u-responsive-tablet {
 		display: none;
 	}
 
 	// needed for independent scroll
 	&__wrapper {
-		@include u-box;
-		height: calc( 100% - #{ $u-top-height } );
+		@include globals.u-box;
+		height: calc( 100% - #{ globals.$u-top-height } );
 		display: flex;
 		position: fixed;
 	}
 
 	&__inner {
-		width: $u-sidebar-width;
-		padding: u-spacing( 0 ) 0;
-		border-right: 1px solid u-color( 'background-hue' );
+		width: globals.$u-sidebar-width;
+		padding: spacing.u-spacing( 0 ) 0;
+		border-right: 1px solid color.u-color( 'background-hue' );
 		overflow-y: auto;
 		transition: 250ms ease margin;
 		overflow-x: hidden;

package/themes/umberto/src/css/_notice.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/globals';
+@use 'helpers/spacing';
+@use 'sass:math';
+
 p.notice,
 div.notice,
 nav.notice,
@@ -8,10 +13,10 @@ nav.notice,
 div.tip,
 p.tip {
 	position: relative;
-	margin: u-spacing( 4 ) 0;
-	background: u-color( 'background-hue' );
-	border-left: 3px solid u-color( 'hint-info' );
-	padding: u-spacing( 4 );
+	margin: spacing.u-spacing( 4 ) 0;
+	background: color.u-color( 'background-hue' );
+	border-left: 3px solid color.u-color( 'hint-info' );
+	padding: spacing.u-spacing( 4 );
 
 	p {
 		&:first-of-type {
@@ -25,49 +30,49 @@ p.tip {
 
 	&::before {
 		display: block;
-		width: $u-top-icon-width;
-		height: $u-top-icon-width;
+		width: globals.$u-top-icon-width;
+		height: globals.$u-top-icon-width;
 		position: absolute;
-		left: ( $u-top-icon-width * 2 - math.div( $u-top-icon-width, 2 ) ) * -1;
-		top: math.div( $u-top-icon-width, 2 );
+		left: ( globals.$u-top-icon-width * 2 - math.div( globals.$u-top-icon-width, 2 ) ) * -1;
+		top: math.div( globals.$u-top-icon-width, 2 );
 	}
 
-	@include u-responsive-narrow {
+	@include globals.u-responsive-narrow {
 		position: relative;
-		background: u-color( 'background-dark' );
+		background: color.u-color( 'background-dark' );
 
 		&::before {
 			display: block;
-			width: $u-top-icon-width;
-			height: $u-top-icon-width;
+			width: globals.$u-top-icon-width;
+			height: globals.$u-top-icon-width;
 			position: absolute;
-			left: $u-top-icon-width - math.div( $u-top-icon-width, 2 );
-			top: math.div( $u-top-icon-width, 2 );
+			left: globals.$u-top-icon-width - math.div( globals.$u-top-icon-width, 2 );
+			top: math.div( globals.$u-top-icon-width, 2 );
 		}
 	}
 
-	@include u-responsive-mobile {
-		padding: u-spacing( 0 );
-		margin: u-spacing( 0 );
+	@include globals.u-responsive-mobile {
+		padding: spacing.u-spacing( 0 );
+		margin: spacing.u-spacing( 0 );
 	}
 
 	&__hint {
-		border-left: 3px solid u-color( 'hint-info' );
+		border-left: 3px solid color.u-color( 'hint-info' );
 	}
 
 	&__feedback {
-	  	border-left: 3px solid u-color( 'hint-hint' );
-	  	background-color: rgba( u-color( 'hint-hint' ), .1 );
+	  	border-left: 3px solid color.u-color( 'hint-hint' );
+	  	background-color: rgba( color.u-color( 'hint-hint' ), .1 );
 	}
 
 	&__warning {
-		border-left: 3px solid u-color( 'hint-warning' );
-		background-color: rgba( u-color( 'hint-warning' ), .1 );
+		border-left: 3px solid color.u-color( 'hint-warning' );
+		background-color: rgba( color.u-color( 'hint-warning' ), .1 );
 	}
 
 	&__error {
-		border-left: 3px solid u-color( 'hint-error' );
-		background-color: rgba( u-color( 'hint-error' ), .1 );
+		border-left: 3px solid color.u-color( 'hint-error' );
+		background-color: rgba( color.u-color( 'hint-error' ), .1 );
 	}
 
 	&_menu-like {
@@ -76,7 +81,7 @@ p.tip {
 			margin: 0;
 		}
 
-		@include u-responsive-narrow {
+		@include globals.u-responsive-narrow {
 			// background: none;
 
 			li {
@@ -84,24 +89,24 @@ p.tip {
 			}
 		}
 
-		@include u-responsive-wide {
-			padding: u-spacing( 0 ) 0 0;
+		@include globals.u-responsive-wide {
+			padding: spacing.u-spacing( 0 ) 0 0;
 
 			ul, ol {
 				text-align: center;
 
 				li {
 					a {
-						padding: u-spacing( -1 ) u-spacing( 1 );
+						padding: spacing.u-spacing( -1 ) spacing.u-spacing( 1 );
 						display: block;
 
 						&:hover {
-							background: u-color( 'background-dark' );
+							background: color.u-color( 'background-dark' );
 						}
 					}
 
 					& + li {
-						border-top: 1px solid u-color( 'separator' );
+						border-top: 1px solid color.u-color( 'separator' );
 					}
 				}
 

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

@@ -9,6 +9,8 @@
  * The theme was a little bit cleaned up to match Umberto theme.
  */
 
+@use 'helpers/spacing';
+
 code.highlight[class*="language-"],
 pre.highlight[class*="language-"] {
 	color: #f8f8f2;
@@ -126,14 +128,14 @@ div.code-toolbar {
 
 	& > .toolbar {
 		position: absolute;
-		top: u-spacing( -2 );
-		right: u-spacing( -2 );
+		top: spacing.u-spacing( -2 );
+		right: spacing.u-spacing( -2 );
 		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;
 
 		.toolbar-item + .toolbar-item {
-			margin-left: u-spacing( -3 );
+			margin-left: spacing.u-spacing( -3 );
 		}
 
 		& button {

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

@@ -1,10 +1,12 @@
 // 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/globals';
+
 .rwd-breadcrumbs {
 	display: none;
 
-	@include u-responsive-tablet {
+	@include globals.u-responsive-tablet {
 		display: block;
 	}
 

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

@@ -1,14 +1,19 @@
 // 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';
+
 .header__menu-rwd {
 	display: none;
-	height: calc( 100% - #{ $u-top-main } );
+	height: calc( 100% - #{ globals.$u-top-main } );
 	overflow-x: hidden;
-	background: u-color( 'background-bright' );
+	background: color.u-color( 'background-bright' );
 
 	a {
-		color: u-color( 'text-invert' );
+		color: color.u-color( 'text-invert' );
 		display: block;
 		width: 100%;
 
@@ -27,29 +32,29 @@
 
 		/* Make different appearance of project names (CK5, CK4, Letters etc.). */
 		li[data-project] {
-			border-bottom: 1px solid u-color( 'separator' );
+			border-bottom: 1px solid color.u-color( 'separator' );
 
 			> a {
-				padding: u-spacing( -1 );
-				color: u-color( 'text' );
-				background: u-color( 'background-dark' );
-				font-size: u-font-size( 1 );
+				padding: spacing.u-spacing( -1 );
+				color: color.u-color( 'text' );
+				background: color.u-color( 'background-dark' );
+				font-size: font.u-font-size( 1 );
 				font-weight: bold;
 			}
 		}
 
 		/* 2nd level of tree. */
 		ul.header__menu-rwd__projects-pages {
-			background: u-color( 'background-bright' );
+			background: color.u-color( 'background-bright' );
 			padding-bottom: 0;
 
 			/* Style elements like Builds, Framework, Examples, API, Features. */
 			li[data-group] {
-				border-bottom: 1px solid u-color( 'separator' );
+				border-bottom: 1px solid color.u-color( 'separator' );
 
 				> a {
-					padding: u-spacing( -1 );
-					margin-left: u-spacing( 0 );
+					padding: spacing.u-spacing( -1 );
+					margin-left: spacing.u-spacing( 0 );
 					text-transform: uppercase;
 				}
 			}
@@ -57,8 +62,8 @@
 
 		/* 3rd level of tree. */
 		ul.header__menu-rwd__projects-subpages {
-			margin-top: -1 * u-spacing( -3 );
-			margin-bottom: u-spacing( -1 );
+			margin-top: -1 * spacing.u-spacing( -3 );
+			margin-bottom: spacing.u-spacing( -1 );
 		}
 
 		/* Highlight active and focused item. */
@@ -66,7 +71,7 @@
 		.tree__item__wrapper:focus,
 		.tree__item__wrapper:active {
 			font-weight: bold;
-			background-color: u-color( 'separator' );
+			background-color: color.u-color( 'separator' );
 		}
 
 		/* Disable active effect during scrolling on the mobile. */