umberto 4.4.0 → 4.4.1

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. */

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

@@ -1,40 +1,46 @@
 // 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:math';
+
 nav.secondary-navigation {
-	@include u-baseline-margin( 0 );
+	@include font.u-baseline-margin( 0 );
 
-	@include u-responsive-wide {
-		padding-top: u-spacing( 4 ) * 2;
-		padding-right: u-spacing( 4 );
+	@include globals.u-responsive-wide {
+		padding-top: spacing.u-spacing( 4 ) * 2;
+		padding-right: spacing.u-spacing( 4 );
 		position: fixed;
-		top: $u-top-height;
+		top: globals.$u-top-height;
 		right: 0;
-		height: calc( 100vh - #{$u-top-height} - 50px );
+		height: calc( 100vh - #{globals.$u-top-height} - 50px );
 		overflow-y: auto;
-		width: $u-sidebar-width;
-		background-color: u-color( 'background-bright' );
+		width: globals.$u-sidebar-width;
+		background-color: color.u-color( 'background-bright' );
 	}
 
-	@include u-responsive-narrow {
-		padding: u-spacing( 2 );
-		background-color: u-color( 'background-hue-light' );
+	@include globals.u-responsive-narrow {
+		padding: spacing.u-spacing( 2 );
+		background-color: color.u-color( 'background-hue-light' );
 	}
 
 	/* Main navigation title. */
 	h3 {
-		margin-bottom: u-spacing( 0 );
+		margin-bottom: spacing.u-spacing( 0 );
 		padding-top: 0;
 	}
 
 	a {
 		display: block;
 		font-size: 14px;
-		color: u-color( 'text-gray' );
+		color: color.u-color( 'text-gray' );
 		position: relative;
 		transition: 200ms ease color;
 		margin: 0;
-		padding: u-spacing( -3 ) 0;
+		padding: spacing.u-spacing( -3 ) 0;
 		line-height: 1.4;
 
 		/* Styles for active item dot. */
@@ -51,28 +57,28 @@ nav.secondary-navigation {
 			border-radius: 50%;
 			transition: 200ms ease opacity;
 
-			@include u-responsive-narrow {
+			@include globals.u-responsive-narrow {
 				display: none;
 			}
 		}
 
 		&:hover {
-			color: u-color( 'link' );
+			color: color.u-color( 'link' );
 			text-decoration: none;
 
 			&::before{
-				background: u-color( 'text-gray' );
+				background: color.u-color( 'text-gray' );
 				opacity: 1;
 			}
 		}
 
 		&.secondary-navigation__current-position {
-			color: u-color( 'link' );
+			color: color.u-color( 'link' );
 			-webkit-text-stroke-width: thin;
 
 			&::before {
 				opacity: 1;
-				background: u-color( 'link' );
+				background: color.u-color( 'link' );
 			}
 		}
 	}
@@ -81,10 +87,10 @@ nav.secondary-navigation {
 	> ol {
 		border-left: 1px solid #eee;
 		padding-left: 1em;
-		margin-left: u-spacing( -3 );
+		margin-left: spacing.u-spacing( -3 );
 		padding-top: 0;
 
-		@include u-responsive-narrow {
+		@include globals.u-responsive-narrow {
 			border-left: 0;
 			padding-left: 0;
 		}
@@ -96,7 +102,7 @@ nav.secondary-navigation {
 
 		ol {
 			margin: 0;
-			margin-left: u-spacing( 0 );
+			margin-left: spacing.u-spacing( 0 );
 
 			// We need to move dot to the left, because of left margin of nested list.
 			a.secondary-navigation__current-position::before,
@@ -117,30 +123,30 @@ nav.secondary-navigation {
 
 
 nav.api-secondary-navigation {
-	@include u-baseline-margin( 0 );
-	background: u-color( 'background-hue-light' );
-	padding-left: 2*u-spacing( 0 );
-	padding-right: u-spacing( 0 );
-	padding-bottom: u-spacing( 4 );
-
-	@include u-responsive-narrow {
-		padding-top: u-spacing( 4 );
+	@include font.u-baseline-margin( 0 );
+	background: color.u-color( 'background-hue-light' );
+	padding-left: 2*spacing.u-spacing( 0 );
+	padding-right: spacing.u-spacing( 0 );
+	padding-bottom: spacing.u-spacing( 4 );
+
+	@include globals.u-responsive-narrow {
+		padding-top: spacing.u-spacing( 4 );
 	}
 
-	@include u-responsive-wide {
+	@include globals.u-responsive-wide {
 		position: fixed;
-		top: $u-top-height;
+		top: globals.$u-top-height;
 		right: 0;
-		height: calc( 100vh - #{$u-top-height} - 50px );
+		height: calc( 100vh - #{globals.$u-top-height} - 50px );
 		overflow-y: auto;
-		width: $u-sidebar-width;
-		background-color: u-color( 'background-bright' );
-		border-left: 1px solid u-color( 'background-hue' );
-		padding-top: u-spacing( 4 ) * 2;
+		width: globals.$u-sidebar-width;
+		background-color: color.u-color( 'background-bright' );
+		border-left: 1px solid color.u-color( 'background-hue' );
+		padding-top: spacing.u-spacing( 4 ) * 2;
 	}
 
 	h3 {
-		margin-bottom: math.div( u-spacing( 0 ), 3 );
+		margin-bottom: math.div( spacing.u-spacing( 0 ), 3 );
 		padding-top: 0;
 	}
 }

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

@@ -1,6 +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
 
+@use 'helpers/color';
+
 .toggler {
 	&--collapsed,
 	&--expanded {
@@ -17,13 +19,13 @@
 		&::before {
 			margin-left: 1px;
 			border-width: 4px 0 4px 6px;
-			border-color: transparent transparent transparent u-color( 'toggler' );
+			border-color: transparent transparent transparent color.u-color( 'toggler' );
 
 		}
 
 		&:hover {
 			&::before {
-				border-color: transparent transparent transparent u-color( 'toggler', -8% );
+				border-color: transparent transparent transparent color.u-color( 'toggler', -8% );
 			}
 		}
 	}
@@ -32,12 +34,12 @@
 		&::before {
 			margin-top: 1px;
 			border-width: 6px 4px 0 4px;
-			border-color: u-color( 'toggler' ) transparent transparent transparent;
+			border-color: color.u-color( 'toggler' ) transparent transparent transparent;
 		}
 
 		&:hover {
 			&::before {
-				border-color: u-color( 'toggler', -8% ) transparent transparent transparent;
+				border-color: color.u-color( 'toggler', -8% ) transparent transparent transparent;
 			}
 		}
 	}