umberto 4.4.0 → 4.4.1

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

@@ -1,13 +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';
+@use 'sass:math';
+
 $u-button-size-width: 72px;
 $u-space-between: 15px;
 $u-icon-size: 36px;
 $u-rwd-button-size: 24px;
 
 .top {
-	background: u-color( 'primary' );
+	background: color.u-color( 'primary' );
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -15,7 +21,7 @@ $u-rwd-button-size: 24px;
 	z-index: 9999; // Render it above CKEditor's UI.
 	align-items: center;
 
-	@include u-responsive-tablet {
+	@include globals.u-responsive-tablet {
 		background: transparent;
 
 		&.rwd-menu-active {
@@ -48,7 +54,7 @@ $u-rwd-button-size: 24px;
 	}
 
 	.header__main {
-		padding: u-spacing( -2 ) u-spacing( 0 );
+		padding: spacing.u-spacing( -2 ) spacing.u-spacing( 0 );
 		display: flex;
 		justify-content: space-between;
 		background-color: inherit;
@@ -56,9 +62,9 @@ $u-rwd-button-size: 24px;
 		z-index: inherit;
 
 		// handle header on smaller viewport
-		@include u-responsive-tablet {
-			height: $u-top-main;
-			background-color: u-color( 'primary' );
+		@include globals.u-responsive-tablet {
+			height: globals.$u-top-main;
+			background-color: color.u-color( 'primary' );
 			padding: 10px;
 			flex-wrap: wrap;
 			align-items: center;
@@ -71,13 +77,13 @@ $u-rwd-button-size: 24px;
 		&-rwd-button {
 			display: none;
 
-			@include u-responsive-tablet {
+			@include globals.u-responsive-tablet {
 				position: absolute;
 				display: block;
 				width: $u-rwd-button-size;
 				height: $u-rwd-button-size;
-				margin-left: u-spacing( -2 );
-				@include u-v-center;
+				margin-left: spacing.u-spacing( -2 );
+				@include globals.u-v-center;
 
 				a {
 					margin-top: 2px;
@@ -90,7 +96,7 @@ $u-rwd-button-size: 24px;
 
 					span {
 						position: absolute;
-						background: u-color( 'background-bright' );
+						background: color.u-color( 'background-bright' );
 						width: 100%;
 						height: 3px;
 						border-radius: 5px;
@@ -102,7 +108,7 @@ $u-rwd-button-size: 24px;
 				}
 			}
 
-			@include u-responsive-mobile {
+			@include globals.u-responsive-mobile {
 				margin-left: 0;
 			}
 		}
@@ -122,16 +128,16 @@ $u-rwd-button-size: 24px;
 			&-home {
 				font-size: 1.5em;
 				text-decoration: none;
-				color: u-color( 'background-hue-light' );
+				color: color.u-color( 'background-hue-light' );
 
-				@include u-responsive-tablet {
-					font-size: u-font-size( 2 );
+				@include globals.u-responsive-tablet {
+					font-size: font.u-font-size( 2 );
 
 					// We need to add margin in case of rwd button.
-					margin-left: u-spacing( 2 ) * 2;
+					margin-left: spacing.u-spacing( 2 ) * 2;
 				}
 
-				@include u-responsive-mobile {
+				@include globals.u-responsive-mobile {
 					display: none;
 				}
 			}
@@ -190,24 +196,24 @@ $u-rwd-button-size: 24px;
 
 
 	.header__sub {
-		height: $u-top-sub;
+		height: globals.$u-top-sub;
 		display: flex;
-		background: u-color( 'background-dark' );
-		border-bottom: 1px solid u-color( 'background-hue' );
+		background: color.u-color( 'background-dark' );
+		border-bottom: 1px solid color.u-color( 'background-hue' );
 		position: relative;
 
-		@include u-responsive-tablet {
+		@include globals.u-responsive-tablet {
 			display: none;
 		}
 	}
 
 	&__logo {
 		// NOTE: IE11 does not support calc() here in flex.
-		flex: 0 0 $u-sidebar-width;
+		flex: 0 0 globals.$u-sidebar-width;
 
 		&__product-title {
 			display: block;
-			font-size: u-font-size( 2 );
+			font-size: font.u-font-size( 2 );
 		}
 	}
 
@@ -216,7 +222,7 @@ $u-rwd-button-size: 24px;
 		margin: 0;
 		list-style: none;
 
-		@include u-responsive-tablet {
+		@include globals.u-responsive-tablet {
 			flex-wrap: wrap;
 		}
 
@@ -228,23 +234,23 @@ $u-rwd-button-size: 24px;
 			}
 
 			&--active {
-				background: u-color( 'text-invert' );
+				background: color.u-color( 'text-invert' );
 
 				svg {
-					fill: u-color( 'primary' );
+					fill: color.u-color( 'primary' );
 				}
 			}
 		}
 
 		li {
-			margin-right: u-spacing( 0 );
+			margin-right: spacing.u-spacing( 0 );
 
 			&.top__menu-project-logo
 				a {
 					padding-left: 65px;
 					background-size: 38px;
 					background-repeat: no-repeat;
-					background-position: u-spacing( 1 ) 5px;
+					background-position: spacing.u-spacing( 1 ) 5px;
 
 					/* Disable hover/focus border on project logo href. */
 					border-bottom: 0;
@@ -254,22 +260,22 @@ $u-rwd-button-size: 24px;
 				display: block;
 				font-weight: 600;
 				text-decoration: none;
-				background-color: u-color( 'background-dark' );
-				color: u-color( 'text-gray' );
+				background-color: color.u-color( 'background-dark' );
+				color: color.u-color( 'text-gray' );
 				border-bottom: 2px solid transparent;
 				position: relative;
-				height: $u-top-sub;
-				line-height: $u-top-sub;
-				padding: 0 u-spacing( 0 );
+				height: globals.$u-top-sub;
+				line-height: globals.$u-top-sub;
+				padding: 0 spacing.u-spacing( 0 );
 				transition: 150ms ease all;
 
 				&:hover {
-					background-color: u-color( 'background-dark', -3% );
+					background-color: color.u-color( 'background-dark', -3% );
 				}
 
 				&:hover,
 				&.top__menu__item--active {
-					border-color: u-color( 'primary' );
+					border-color: color.u-color( 'primary' );
 				}
 
 				// Disable colored border for GH and control svg.
@@ -281,7 +287,7 @@ $u-rwd-button-size: 24px;
 					svg {
 						fill: currentColor;
 						width: 30px;
-						margin-top: math.div( $u-top-sub - 30px, 2 );
+						margin-top: math.div( globals.$u-top-sub - 30px, 2 );
 					}
 				}
 			}
@@ -293,28 +299,28 @@ $u-rwd-button-size: 24px;
 		position: relative;
 		align-self: flex-start;
 
-		@include u-responsive-tablet {
+		@include globals.u-responsive-tablet {
 			flex: unset;
 		}
 
 		&__box {
-			background: u-color( 'background-bright' );
+			background: color.u-color( 'background-bright' );
 			font-weight: 400;
-			font-size: u-font-size( 0 );
+			font-size: font.u-font-size( 0 );
 			height: 40px;
 			width: 240px;
 			border: 0;
-			padding: 0 2*u-spacing( 4 ) 0 u-spacing( 1 );
+			padding: 0 2*spacing.u-spacing( 4 ) 0 spacing.u-spacing( 1 );
 			border-radius: 25px;
 			border: 2px solid transparent;
 
-			@include u-responsive-tablet {
+			@include globals.u-responsive-tablet {
 				width: unset;
 				height: 35px;
 			}
 
 			&::-webkit-input-placeholder {
-				color: u-color( 'text', 70% );
+				color: color.u-color( 'text', 70% );
 			}
 
 			&:focus,
@@ -326,11 +332,11 @@ $u-rwd-button-size: 24px;
 		}
 
 		&__button {
-			@include u-v-center;
+			@include globals.u-v-center;
 			width: 15px;
 			height: 17px;
 			position: absolute;
-			right: u-spacing( 1 );
+			right: spacing.u-spacing( 1 );
 			background: none;
 			border: none;
 			padding: 0;

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

@@ -1,7 +1,10 @@
 // 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/color';
+@use 'helpers/font';
+@use 'helpers/globals';
+@use 'helpers/spacing';
 
 /* Global styles for tree navigation in umberto.
 Note: there are also dedicated styles for API Tree and Guides & SDK Tree.
@@ -11,17 +14,17 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 	list-style: none;
 
 	// Make sure the filter never floats over the tree.
-	padding-bottom: $u-line-height-base + em;
+	padding-bottom: font.$u-line-height-base + em;
 
-	@include u-unselectable;
+	@include globals.u-unselectable;
 
 	// Generate styles for tree levels recursively.
-	@include u-responsive-tablet-plus {
-		@include levels( 1, 1 );
+	@include globals.u-responsive-tablet-plus {
+		@include globals.levels( 1, 1 );
 	}
 
-	@include u-responsive-tablet {
-		@include levels( 1, 0 );
+	@include globals.u-responsive-tablet {
+		@include globals.levels( 1, 0 );
 	}
 
 	&.guide-tree {
@@ -54,14 +57,14 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 				& .tree__item__badge.tree__item__badge_new {
 					/* In CSS you cannot get rid of text-decoration in children, you must hack it :( */
 					text-decoration: underline;
-					text-decoration-color: u-color( 'badge-green' );
+					text-decoration-color: color.u-color( 'badge-green' );
 				}
 			}
 		}
 
 		.tree__item__text {
 			display: inline-block;
-			padding: u-spacing( -3 ) 0;
+			padding: spacing.u-spacing( -3 ) 0;
 			position: relative;
 			margin-right: auto;
 			white-space: nowrap;
@@ -75,17 +78,17 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 				width: 13px;
 				height: 13px;
 				display: inline-block;
-				margin-right: u-spacing( -2 );
+				margin-right: spacing.u-spacing( -2 );
 				background-repeat: no-repeat;
 			}
 		}
 
 		.tree__item__badge {
-			margin: 0 u-spacing( -2 );
+			margin: 0 spacing.u-spacing( -2 );
 		}
 
 		.tree__item__badge:last-of-type {
-			margin-right: u-spacing( 2 );
+			margin-right: spacing.u-spacing( 2 );
 		}
 
 		.tree__item__wrapper {
@@ -95,18 +98,18 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 			flex-wrap: nowrap;
 			align-content: center;
 			justify-content: flex-start;
-		  	margin-left: calc( -1 * #{ u-spacing( 3 ) } );
+		  	margin-left: calc( -1 * #{ spacing.u-spacing( 3 ) } );
 
 			&:hover {
-				background-color: u-color( 'background-dark' );
+				background-color: color.u-color( 'background-dark' );
 			}
 
 			&--active {
 				overflow: hidden;
-				background-color: u-color( 'background-hue' );
+				background-color: color.u-color( 'background-hue' );
 
 				&:hover {
-					background-color: u-color( 'background-hue', -3% );
+					background-color: color.u-color( 'background-hue', -3% );
 				}
 			}
 		}
@@ -187,13 +190,13 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 
 /* These styles are outside the .tree scope because badges are also occasionally used in the guide content. */
 .tree__item__badge {
-	margin: 0 u-spacing( -3 );
+	margin: 0 spacing.u-spacing( -3 );
 	text-transform: uppercase;
 	font-weight: bold;
 	font-size: 10px;
 	border-radius: 20px;
-	/* u-spacing() lacks granularity here :( */
-	padding: u-spacing( -4 ) .6em;
+	/* spacing.u-spacing() lacks granularity here :( */
+	padding: spacing.u-spacing( -4 ) .6em;
 	vertical-align: middle;
 }
 
@@ -202,8 +205,8 @@ See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
 }
 
 .tree__item__badge_new {
-	background: u-color( 'badge-green' );
-	color: u-color( 'text-invert' );
+	background: color.u-color( 'badge-green' );
+	color: color.u-color( 'text-invert' );
 }
 
 .tree__item__badge_premium {

package/themes/umberto/src/css/_warning-banner.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/globals';
+@use 'helpers/spacing';
+
 .top {
 	.warning-banner {
 		position: fixed;
@@ -20,7 +23,7 @@
 		border-radius: 0 0 3px 3px;
 		box-shadow: 0 2px 4px #00000030;
 
-		@include u-responsive-mobile {
+		@include globals.u-responsive-mobile {
 			display: none;
 		}
 
@@ -31,13 +34,13 @@
 		& span:first-child {
 			background: #1A1A1A;
 			color: #FCEB77;
-			padding: u-spacing( -3 ) u-spacing( -1 );
+			padding: spacing.u-spacing( -3 ) spacing.u-spacing( -1 );
 			text-transform: uppercase;
 			font-weight: bold;
 		}
 
 		& span:last-child {
-			padding: 0 u-spacing( 0 );
+			padding: 0 spacing.u-spacing( 0 );
 		}
 	}
 }

package/themes/umberto/src/css/helpers/_color.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 'sass:color';
+@use 'sass:map';
+
 $u-colors: (
 	'primary': #3E59AD,
 	'primary-dark': #314687,
@@ -38,7 +41,7 @@ $u-colors: (
 );
 
 @function u-color( $name, $offset: 0% ) {
-	@return scale-color( map-get( $u-colors, $name ), $lightness: $offset );
+	@return color.scale( map.get( $u-colors, $name ), $lightness: $offset );
 }
 
 @function u-border-color( $name, $offset: 0% ) {

package/themes/umberto/src/css/helpers/_font.scss

@@ -1,7 +1,10 @@
 // Copyright (c) 2017-2024, CKSource Holding sp. z o.o. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
+@use 'color';
+@use 'globals';
+@use 'sass:list';
+@use 'sass:map';
 
 $u-font-size-base: 15px;
 $u-line-height-base: 1.6;
@@ -20,13 +23,13 @@ $u-font-sizes: (
 );
 
 @function u-font-size( $level ) {
-	@return map-get( $u-font-sizes, $level ) + rem;
+	@return map.get( $u-font-sizes, $level ) + rem;
 }
 
 @mixin u-font-mono {
 	font-family: $u-font-face-mono;
 	font-size: .9em;
-	color: u-color( text, 20% );
+	color: color.u-color( text, 20% );
 }
 
 $u-baseline-levels: (
@@ -38,20 +41,20 @@ $u-baseline-levels: (
 );
 
 @mixin u-baseline-margin( $level ) {
-	$rhythm: map-get( $u-baseline-levels, $level );
-	margin-bottom: nth( $rhythm, 4 );
+	$rhythm: map.get( $u-baseline-levels, $level );
+	margin-bottom: list.nth( $rhythm, 4 );
 }
 
 @mixin u-baseline-padding( $level ) {
-	$rhythm: map-get( $u-baseline-levels, $level );
-	padding-top: nth( $rhythm, 3 );
+	$rhythm: map.get( $u-baseline-levels, $level );
+	padding-top: list.nth( $rhythm, 3 );
 }
 
 @mixin u-baseline( $level ) {
-	$rhythm: map-get( $u-baseline-levels, $level );
+	$rhythm: map.get( $u-baseline-levels, $level );
 
-	font-size: nth( $rhythm, 1 );
-	line-height: nth( $rhythm, 2 );
-	padding-top: nth( $rhythm, 3 );
-	margin-bottom: nth( $rhythm, 4 );
+	font-size: list.nth( $rhythm, 1 );
+	line-height: list.nth( $rhythm, 2 );
+	padding-top: list.nth( $rhythm, 3 );
+	margin-bottom: list.nth( $rhythm, 4 );
 }

package/themes/umberto/src/css/helpers/_globals.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 'spacing';
+@use 'color';
+
 $u-top-main: 55px;
 $u-top-sub: 45px;
 $u-top-height: $u-top-main + $u-top-sub;
@@ -30,7 +33,7 @@ $u-top-icon-width: 30px;
 }
 
 @mixin u-box {
-	background: u-color( 'background-bright' );
+	background: color.u-color( 'background-bright' );
 }
 
 @mixin u-responsive-mobile() {
@@ -93,14 +96,12 @@ $u-top-icon-width: 30px;
 	z-index: 20;
 	bottom: 0px;
 	margin-bottom: 0;
-	padding: u-spacing( 0 ) u-spacing( 2 );
-	border-top: 1px solid u-color( 'background-hue' );
-	// background: u-color( 'background-hue', 40% );
-	background: u-color( 'background-bright' );
+	padding: spacing.u-spacing( 0 ) spacing.u-spacing( 2 );
+	border-top: 1px solid color.u-color( 'background-hue' );
+	background: color.u-color( 'background-bright' );
 	height: 50px;
 	border-top: 1px solid #eee;
 	border-left: 0;
-	// box-shadow: 2px 2px 0 #fafafa;
 }
 
 @mixin u-micro-header {
@@ -108,18 +109,18 @@ $u-top-icon-width: 30px;
 	font-size: .85em;
 	text-transform: uppercase;
 	font-weight: 600;
-	color: u-color( 'text', 20% );
+	color: color.u-color( 'text', 20% );
 }
 
 @mixin levels( $depth, $spacing ) {
 	@if ( $depth < 8 ) {
 		li {
 			&::before {
-				left: calc( #{ $depth * u-spacing( $spacing ) } - 8px );
+				left: calc( #{ $depth * spacing.u-spacing( $spacing ) } - 8px );
 			}
 
 			.tree__item__text {
-				margin-left: ( $depth + 1.5 ) * u-spacing( $spacing );
+				margin-left: ( $depth + 1.5 ) * spacing.u-spacing( $spacing );
 			}
 
 			@include levels( $depth + 1, $spacing );

package/themes/umberto/src/css/helpers/_spacing.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 'sass:map';
+
 $u-def-spacing: 1em;
 $u-def-spacings: (
 	-4: .1,
@@ -15,5 +17,5 @@ $u-def-spacings: (
 );
 
 @function u-spacing( $spacing ) {
-	@return $u-def-spacing * map-get( $u-def-spacings, $spacing );
+	@return $u-def-spacing * map.get( $u-def-spacings, $spacing );
 }

package/themes/umberto/src/css/pages/_sdk.scss

@@ -6,6 +6,10 @@
  * `.main__content--sdk` is added when `page.isSdk` = true.
  */
 
+@use '../helpers/color';
+@use '../helpers/font';
+@use '../helpers/spacing';
+
 .main__content--sdk {
 	h1 {
 		// "Documentation" link in the title.
@@ -24,11 +28,11 @@
 	// Toggler
 	a.sdk-sample-source-code__button {
 		width: 100%;
-		background: u-color( 'background-hue-light' );
+		background: color.u-color( 'background-hue-light' );
 		display: block;
 		padding: 10px 20px;
 		position: relative;
-		border-left: 3px solid u-color( 'hint-info' );
+		border-left: 3px solid color.u-color( 'hint-info' );
 		transition: 200ms ease background;
 		text-decoration: none;
 
@@ -36,7 +40,7 @@
 			content: '';
 			border-width: 3px 3px 0 0;
 			border-style: solid;
-			border-color: u-color( 'hint-info' );
+			border-color: color.u-color( 'hint-info' );
 			width: 12px;
 			height: 12px;
 			transform: rotate(135deg);
@@ -47,7 +51,7 @@
 
 		&:hover,
 		&.active {
-			background: u-color( 'background-hue' );
+			background: color.u-color( 'background-hue' );
 		}
 
 		// rotate arrow if active
@@ -63,7 +67,7 @@
 		display: none;
 		padding: 0;
 		position: relative;
-		@include u-font-mono;
+		@include font.u-font-mono;
 
 		&.active {
 			display: block;
@@ -77,14 +81,14 @@
 
 		// copy and download buttons
 		a {
-			background: u-color( 'background-hue-light' );
-			padding: u-spacing( 0 );
+			background: color.u-color( 'background-hue-light' );
+			padding: spacing.u-spacing( 0 );
 			display: inline-block;
 			text-decoration: none;
 
 			&:hover {
 				opacity: 1;
-				background: u-color( 'background-hue' )
+				background: color.u-color( 'background-hue' )
 			}
 		}
 	}