umberto 4.4.0 → 4.4.2

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

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

@@ -3,23 +3,24 @@
 
 // Division using / is deprecated, math.div() has to be used instead.
 // See: https://sass-lang.com/documentation/breaking-changes/slash-div
-@use 'sass:math';
 
 @use '~tippy.js/dist/tippy.css';
 @use '~tippy.js/themes/light-border.css';
 @use '~tippy.js/animations/scale.css';
-
-@import 'helpers/globals';
-@import 'helpers/font';
-@import 'helpers/reset';
-@import 'helpers/color';
-@import 'helpers/spacing';
+@use 'font-external';
+@use 'helpers/color';
+@use 'helpers/font';
+@use 'helpers/globals';
+@use 'helpers/reset';
+@use 'helpers/spacing';
+@use 'sass:math';
+@use 'sass:meta';
 
 @mixin u-std-font {
 	font-weight: 400;
-	line-height: $u-line-height-base;
-	font-family: $u-font-face;
-	font-size: $u-font-size-base;
+	line-height: font.$u-line-height-base;
+	font-family: font.$u-font-face;
+	font-size: font.$u-font-size-base;
 }
 
 body, html {
@@ -32,11 +33,11 @@ body, html {
 }
 
 body {
-	padding: $u-top-height 0 0;
-	color: u-color( text, 10% );
+	padding: globals.$u-top-height 0 0;
+	color: color.u-color( text, 10% );
 
-	@include u-responsive-tablet {
-		padding: $u-top-main 0 0;
+	@include globals.u-responsive-tablet {
+		padding: globals.$u-top-main 0 0;
 	}
 }
 
@@ -45,7 +46,7 @@ button, input {
 }
 
 a {
-	color: u-color( 'link' );
+	color: color.u-color( 'link' );
 	text-decoration: none;
 
 	&:hover {
@@ -57,60 +58,60 @@ a {
 	display: none;
 }
 
-@import 'tree';
-@import 'top';
-@import 'main';
-@import 'formatted';
-@import 'collapsinglist';
-@import 'footer';
-@import 'toggler';
-@import 'badge';
-@import 'dropdown';
-@import 'secondary-navigation';
-@import 'docsearch';
-@import 'loading-spinner';
+@include meta.load-css('tree');
+@include meta.load-css('top');
+@include meta.load-css('main');
+@include meta.load-css('formatted');
+@include meta.load-css('collapsinglist');
+@include meta.load-css('footer');
+@include meta.load-css('toggler');
+@include meta.load-css('badge');
+@include meta.load-css('dropdown');
+@include meta.load-css('secondary-navigation');
+@include meta.load-css('docsearch');
+@include meta.load-css('loading-spinner');
 // PAGES
 
 // GUIDES
-@import 'notice';
-@import 'guide-sdk-tree';
-@import 'guide-content';
+@include meta.load-css('notice');
+@include meta.load-css('guide-sdk-tree');
+@include meta.load-css('guide-content');
 
 // API
-@import 'api-content';
-@import 'api-info-box';
-@import 'api-props-filter';
-@import 'api-tree';
-@import 'api-subheader';
-@import 'api-see-source';
+@include meta.load-css('api-content');
+@include meta.load-css('api-info-box');
+@include meta.load-css('api-props-filter');
+@include meta.load-css('api-tree');
+@include meta.load-css('api-subheader');
+@include meta.load-css('api-see-source');
 
 // RWD
-@import 'rwd-menu';
-@import 'rwd-breadcrumbs';
+@include meta.load-css('rwd-menu');
+@include meta.load-css('rwd-breadcrumbs');
 
 // SDK
-@import 'pages/sdk';
+@include meta.load-css('pages/sdk');
 
 // External Styles
-@import 'prism';
+@include meta.load-css('prism');
 
 // Dark mode
-@import 'theme-dark';
+@include meta.load-css('theme-dark');
 
 // Dedicated print styles
-@import 'print';
+@include meta.load-css('print');
 
 // Components
-@import 'feedback-widget';
+@include meta.load-css('feedback-widget');
 
 // Lightbox plugin for {@img ... } element
-@import 'components/lightbox';
+@include meta.load-css('components/lightbox');
 
 // Toolbar icons inside guides.
-@import "editor-icon";
+@include meta.load-css("editor-icon");
 
 // The warning banner feature (displayed in the header).
-@import "warning-banner";
+@include meta.load-css("warning-banner");
 
 // The code switcher component
-@import "code-switcher";
+@include meta.load-css("code-switcher");

package/themes/umberto/src/js/_codeswitcherbuttons.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals umberto */
+import $ from 'jquery';
 
 const type = {
 	selfHosted: 'selfhosted',
@@ -17,19 +17,29 @@ const codeSwitcherToolbarClass = 'code-switcher__toolbar';
 
 function switchSnippetContent( originalSnippetContent, newType ) {
 	let newSnippetContent;
+	const gplComment = ' // Or \'GPL\'.';
+	const licenseKey = 'licenseKey: \'<YOUR_LICENSE_KEY>\',';
 
 	if ( newType === type.cloud ) {
 		newSnippetContent = originalSnippetContent
 			.replace( /import {/g, 'const {' )
 			.replace( /} from/g, '} =' )
 			.replace( /'ckeditor5';/g, 'CKEDITOR;' )
-			.replace( /'ckeditor5-premium-features'/g, 'CKEDITOR_PREMIUM_FEATURES' );
+			.replace( /'ckeditor5-premium-features'/g, 'CKEDITOR_PREMIUM_FEATURES' )
+			.replace( `${ licenseKey }${ gplComment }`, licenseKey );
 	} else if ( newType === type.selfHosted ) {
 		newSnippetContent = originalSnippetContent
 			.replace( /const {/g, 'import {' )
 			.replace( /} =/g, '} from' )
 			.replace( /CKEDITOR;/g, '\'ckeditor5\';' )
-			.replace( /CKEDITOR_PREMIUM_FEATURES/g, '\'ckeditor5-premium-features\'' );
+			.replace( /CKEDITOR_PREMIUM_FEATURES/g, '\'ckeditor5-premium-features\'' )
+			.replace( licenseKey, ( match, _, wholeString ) => {
+				if ( wholeString.includes( gplComment ) ) {
+					return match;
+				} else {
+					return `${ match }${ gplComment }`;
+				}
+			} );
 	}
 
 	return newSnippetContent;
@@ -88,20 +98,13 @@ export function createCodeSwitcherButtons() {
 
 		const activeType = switcher.classList[ switcher.classList.length - 1 ];
 
-		const infoCircle = document.createElement( 'img' );
-
-		infoCircle.setAttribute( 'src', `/assets/${ umberto.version }/img/info-circle.svg` );
-		infoCircle.classList.add( 'code-switcher__info' );
-
 		const selfHostedButton = createButton( 'Self-hosted (npm)', activeType === type.selfHosted );
 
 		selfHostedButton.setAttribute( 'title', 'Self-hosted shows imports for installations using npm or ZIP setups.' );
-		selfHostedButton.append( infoCircle.cloneNode( true ) );
 
 		const cloudButton = createButton( 'Cloud (CDN)', activeType === type.cloud );
 
 		cloudButton.setAttribute( 'title', 'Cloud shows imports for installations using CDN setups.' );
-		cloudButton.append( infoCircle.cloneNode( true ) );
 
 		const switcherToolbar = switcher.querySelector( `.${ codeSwitcherToolbarClass }` );
 
@@ -132,4 +135,12 @@ export function createCodeSwitcherButtons() {
 			saveSnippetType( type.cloud );
 		} );
 	} );
+
+	/* eslint-disable max-len */
+	const infoCircle = $( `
+		<svg class="code-switcher__info" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M6 0.75C3.10078 0.75 0.75 3.10078 0.75 6C0.75 8.89922 3.10078 11.25 6 11.25C8.89922 11.25 11.25 8.89922 11.25 6C11.25 3.10078 8.89922 0.75 6 0.75ZM6 10.3594C3.59297 10.3594 1.64063 8.40703 1.64063 6C1.64063 3.59297 3.59297 1.64063 6 1.64063C8.40703 1.64063 10.3594 3.59297 10.3594 6C10.3594 8.40703 8.40703 10.3594 6 10.3594Z" fill="white"/>
+			<path d="M5.43732 3.9375C5.43732 4.08668 5.49658 4.22976 5.60207 4.33525C5.70756 4.44074 5.85063 4.5 5.99982 4.5C6.149 4.5 6.29207 4.44074 6.39756 4.33525C6.50305 4.22976 6.56232 4.08668 6.56232 3.9375C6.56232 3.78832 6.50305 3.64524 6.39756 3.53975C6.29207 3.43426 6.149 3.375 5.99982 3.375C5.85063 3.375 5.70756 3.43426 5.60207 3.53975C5.49658 3.64524 5.43732 3.78832 5.43732 3.9375ZM6.28107 5.25H5.71857C5.667 5.25 5.62482 5.29219 5.62482 5.34375V8.53125C5.62482 8.58281 5.667 8.625 5.71857 8.625H6.28107C6.33263 8.625 6.37482 8.58281 6.37482 8.53125V5.34375C6.37482 5.29219 6.33263 5.25 6.28107 5.25Z" fill="white"/>
+		</svg>` );
+	infoCircle.appendTo( `.${ buttonClass }` );
 }