umberto 6.0.0 → 6.1.0

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

@@ -0,0 +1,60 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'color';
+@use 'globals';
+@use 'sass:list';
+@use 'sass:map';
+
+$u-font-size-base: 15px;
+$u-line-height-base: 1.6;
+$u-font-face: 'Source Sans Pro', system-ui, Roboto, 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+$u-font-face-mono: Monaco, Menlo, Consolas, 'Roboto Mono', 'Courier New', 'Ubuntu Mono', monospace;
+$u-font-sizes: (
+	-2: 0.7,
+	-1: 0.75,
+	-0.5: 0.8,
+	0: 1,
+	1: 1.166,
+	2: 1.333,
+	3: 1.5,
+	4: 1.83,
+	5: 2.333
+);
+
+@function u-font-size( $level ) {
+	@return map.get( $u-font-sizes, $level ) + rem;
+}
+
+@mixin u-font-mono {
+	font-family: $u-font-face-mono;
+	font-size: .9em;
+	color: color.u-color( text, 20% );
+}
+
+$u-baseline-levels: (
+	4: ( 2.36em, 1.33em, 1.00em, 1.67em ),
+	3: ( 1.68em, 1.68em, 0.8em, 0.4em ),
+	2: ( 1.36em, 1.5em, 0.8em, 0.2em ),
+	1: ( 1.2em, 1.4em, 0.8em, 0.2em),
+	0: ( 1.00em, 1.6em, 0.2em, 0.8em ),
+);
+
+@mixin u-baseline-margin( $level ) {
+	$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: list.nth( $rhythm, 3 );
+}
+
+@mixin u-baseline( $level ) {
+	$rhythm: map.get( $u-baseline-levels, $level );
+
+	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/umberto/css/helpers/_globals.scss

@@ -0,0 +1,129 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'spacing';
+@use 'color';
+
+$u-top-main: 55px;
+$u-top-sub: 45px;
+$u-top-height: $u-top-main + $u-top-sub;
+$u-footer-height: 40px;
+$u-sidebar-width: 340px;
+$u-content-max-width: 760px;
+$u-content-md-width: 660px;
+$u-content-min-width: 590px;
+$u-content-margin: 50px;
+$u-grid-unit: 20px;
+
+$u-responsive-mobile: 640px;
+$u-responsive-tablet: 960px;
+$u-responsive-limit: 1360px;
+$u-responsive-md-limit: 1440px;
+$u-responsive-wide-limit: 1600px;
+
+$u-top-icon-width: 30px;
+
+@mixin u-unselectable {
+	user-select: none;
+}
+
+@mixin u-v-center {
+	top: 50%;
+	transform: translateY( -50% );
+}
+
+@mixin u-box {
+	background: color.u-color( 'background-bright' );
+}
+
+@mixin u-responsive-mobile() {
+	@media only screen and (max-width: $u-responsive-mobile) {
+		@content;
+	}
+}
+
+@mixin u-responsive-tablet() {
+	@media only screen and (max-width: $u-responsive-tablet) {
+		@content;
+	}
+}
+
+@mixin u-responsive-tablet-plus() {
+	@media only screen and (min-width: $u-responsive-tablet) {
+		@content;
+	}
+}
+
+@mixin u-responsive-narrow() {
+	@media only screen and (max-width: $u-responsive-limit) {
+		@content;
+	}
+}
+
+@mixin u-responsive-wide() {
+	@media only screen and (min-width: $u-responsive-limit) {
+		@content;
+	}
+}
+
+@mixin u-responsive-wide-md() {
+	@media only screen and (min-width: $u-responsive-md-limit) {
+		@content;
+	}
+}
+
+@mixin u-responsive-wide-plus() {
+	@media only screen and (min-width: $u-responsive-wide-limit) {
+		@content;
+	}
+}
+
+@mixin u-icon-on-top {
+	&::before {
+		width: $u-top-icon-width;
+		height: $u-top-icon-width;
+		display: block;
+
+		position: absolute;
+		top: -$u-top-icon-width/2;
+		left: 50%;
+		margin-left: -$u-top-icon-width/2;
+	}
+}
+
+@mixin u-sticky-filter {
+	position: fixed;
+	z-index: 20;
+	bottom: 0px;
+	margin-bottom: 0;
+	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;
+}
+
+@mixin u-micro-header {
+	text-transform: uppercase;
+	font-size: .85em;
+	text-transform: uppercase;
+	font-weight: 600;
+	color: color.u-color( 'text', 20% );
+}
+
+@mixin levels( $depth, $spacing ) {
+	@if ( $depth < 8 ) {
+		li {
+			&::before {
+				left: calc( #{ $depth * spacing.u-spacing( $spacing ) } - 8px );
+			}
+
+			.tree__item__text {
+				margin-left: ( $depth + 1.5 ) * spacing.u-spacing( $spacing );
+			}
+
+			@include levels( $depth + 1, $spacing );
+		}
+	}
+}

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

@@ -0,0 +1,52 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+*, *:before, *:after {
+	box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

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

@@ -0,0 +1,21 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'sass:map';
+
+$u-def-spacing: 1em;
+$u-def-spacings: (
+	-4: .1,
+	-3: .25,
+	-2: .5,
+	-1: .8,
+	0: 1,
+	1: 1.166,
+	2: 1.333,
+	3: 1.5,
+	4: 1.666
+);
+
+@function u-spacing( $spacing ) {
+	@return $u-def-spacing * map.get( $u-def-spacings, $spacing );
+}

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

@@ -0,0 +1,111 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+/*
+ * Styles for CKEditor 4 SDK examples.
+ * `.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.
+		> a { // #715
+			font-size: 0.5em;
+			display: table;
+		}
+	}
+
+	ul.sdk-sample-source-code {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	// Toggler
+	a.sdk-sample-source-code__button {
+		width: 100%;
+		background: color.u-color( 'background-hue-light' );
+		display: block;
+		padding: 10px 20px;
+		position: relative;
+		border-left: 3px solid color.u-color( 'hint-info' );
+		transition: 200ms ease background;
+		text-decoration: none;
+
+		&::after {
+			content: '';
+			border-width: 3px 3px 0 0;
+			border-style: solid;
+			border-color: color.u-color( 'hint-info' );
+			width: 12px;
+			height: 12px;
+			transform: rotate(135deg);
+			position: absolute;
+			right: 20px;
+			top: 15px;
+		}
+
+		&:hover,
+		&.active {
+			background: color.u-color( 'background-hue' );
+		}
+
+		// rotate arrow if active
+		&.active {
+			&::after{
+				top: 20px;
+				transform: rotate(-45deg);
+			}
+		}
+	}
+
+	pre.sdk-sample-source-code__code-block {
+		display: none;
+		padding: 0;
+		position: relative;
+		@include font.u-font-mono;
+
+		&.active {
+			display: block;
+		}
+	}
+
+	.sdk-sample-source-code__code-block-action-buttons {
+		position: absolute;
+		top: 20px;
+		right: 0;
+
+		// copy and download buttons
+		a {
+			background: color.u-color( 'background-hue-light' );
+			padding: spacing.u-spacing( 0 );
+			display: inline-block;
+			text-decoration: none;
+
+			&:hover {
+				opacity: 1;
+				background: color.u-color( 'background-hue' )
+			}
+		}
+	}
+
+	.sdk-sample-source-code__code-block-copy {
+
+	}
+
+	.sdk-sample-source-code__code-block-download {
+
+	}
+
+	p {
+		img {
+			display: inline;
+			vertical-align: middle;
+			margin: 0;
+		}
+	}
+}

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

@@ -0,0 +1,117 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+// Division using / is deprecated, math.div() has to be used instead.
+// See: https://sass-lang.com/documentation/breaking-changes/slash-div
+
+@use '~tippy.js/dist/tippy.css';
+@use '~tippy.js/themes/light-border.css';
+@use '~tippy.js/animations/scale.css';
+@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: font.$u-line-height-base;
+	font-family: font.$u-font-face;
+	font-size: font.$u-font-size-base;
+}
+
+body, html {
+	@include u-std-font;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	min-height: 100vh;
+	width: 100%;
+	overflow-x: hidden;
+}
+
+body {
+	padding: globals.$u-top-height 0 0;
+	color: color.u-color( text, 10% );
+
+	@include globals.u-responsive-tablet {
+		padding: globals.$u-top-main 0 0;
+	}
+}
+
+button, input {
+	@include u-std-font;
+}
+
+a {
+	color: color.u-color( 'link' );
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.hidden-loading {
+	display: none;
+}
+
+@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
+@include meta.load-css('notice');
+@include meta.load-css('guide-sdk-tree');
+@include meta.load-css('guide-content');
+
+// API
+@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
+@include meta.load-css('rwd-menu');
+@include meta.load-css('rwd-breadcrumbs');
+
+// SDK
+@include meta.load-css('pages/sdk');
+
+// External Styles
+@include meta.load-css('prism');
+
+// Dark mode
+@include meta.load-css('theme-dark');
+
+// Dedicated print styles
+@include meta.load-css('print');
+
+// Components
+@include meta.load-css('feedback-widget');
+
+// Lightbox plugin for {@img ... } element
+@include meta.load-css('components/lightbox');
+
+// Toolbar icons inside guides.
+@include meta.load-css("editor-icon");
+
+// The warning banner feature (displayed in the header).
+@include meta.load-css("warning-banner");
+
+// The code switcher component
+@include meta.load-css("code-switcher");

package/themes/umberto/src/umberto/js/_anchors.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import $ from 'jquery';
+
+/**
+ * Scrolls page to an anchor when clicking a link to an anchor.
+ */
+export function enableAnchors() {
+	setTimeout( scrollToHashTarget, 100 );
+
+	$( window ).on( 'hashchange', () => {
+		setTimeout( scrollToHashTarget, 0 );
+	} );
+
+	$( 'a[href^="#"]' ).on( 'click', function( evt ) {
+		const el = $( this );
+		const href = el.attr( 'href' );
+		const hash = location.hash;
+
+		if ( el.hasClass( 'member-name' ) ) {
+			locationHashUpdate( href );
+			if ( el.hasClass( 'api-subheader__navigation-link' ) ) {
+				scrollToHashTarget();
+			}
+			evt.preventDefault();
+		}
+		else if ( href == hash ) {
+			scrollToHashTarget();
+			evt.preventDefault();
+		}
+	} );
+
+	function scrollToHashTarget() {
+		const target = $( ':target' );
+		const offset = target.offset();
+
+		if ( offset ) {
+			const scrollTop = offset.top - $( '.top' ).height();
+
+			if ( target && target.is( '[class*="toggler"]' ) ) {
+				target.removeClass( 'toggler--collapsed' );
+				target.addClass( 'toggler--expanded' );
+			}
+
+			$( 'html, body' ).scrollTop( scrollTop );
+		}
+	}
+
+	function locationHashUpdate( newHash ) {
+		if ( newHash && newHash !== location.hash ) {
+			location.hash = newHash;
+		}
+	}
+}

package/themes/umberto/src/umberto/js/_apisearch.js

@@ -0,0 +1,126 @@
+/**
+ * @license Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import Fuse from 'fuse.js';
+import $ from 'jquery';
+
+export function setUpFuse() {
+	const options = {
+		shouldSort: true,
+		threshold: 0.35,
+		includeScore: true,
+		keys: [ 'shortName' ]
+	};
+
+	const dataProject = $( '[data-project]' );
+
+	if ( dataProject.length === 0 || $( '.top__menu__api' ).length === 0 ) {
+		return;
+	}
+
+	const projectSlug = dataProject.attr( 'data-project' );
+	const projectPathMatch = new RegExp( `^\\S*/${ projectSlug }/[^/]+` ).exec( window.location.pathname );
+
+	if ( !projectPathMatch ) {
+		return;
+	}
+
+	const projectPath = projectPathMatch[ 0 ];
+
+	$.ajax( {
+		url: `${ projectPath }/api.json`,
+		dataType: 'json'
+	} )
+		.done( data => {
+			const fuse = new Fuse( data, options );
+
+			window.apiSearch = query => {
+				const searchedQuery = query || $( '#docsearch_input' ).val();
+
+				return fuse.search( searchedQuery )
+					.map( match => {
+						if ( match.item.kind === 'class' ||
+							match.item.kind === 'interface' ||
+							match.item.kind === 'typedef' ||
+							match.item.kind === 'mixin' ) {
+							match.score -= 0.01;
+						}
+
+						if ( match.item.priority > 0 ) {
+							match.score -= match.item.priority / 500;
+						}
+
+						return match;
+					} )
+					.sort( ( a, b ) => {
+						return a.score - b.score;
+					} )
+					.map( ( match, idx ) => {
+						match.index = idx;
+
+						return match;
+					} )
+					// Display items of same name lower if they are inherited or mixed.
+					.sort( ( a, b ) => {
+						if ( a.item.name === b.item.name ) {
+							if ( a.item.isDerived === b.item.isDerived ) {
+								return a.index - b.index;
+							} else if ( !a.item.isDerived ) {
+								return -1;
+							} else {
+								return 1;
+							}
+						} else {
+							return a.index - b.index;
+						}
+					} )
+					.map( ( match, idx ) => {
+						match.index = idx;
+
+						return match;
+					} )
+					// Display public items higher.
+					.sort( ( a, b ) => {
+						if ( a.item.access === b.item.access ) {
+							return a.index - b.index;
+						} else if ( a.item.access === 'public' ) {
+							return -1;
+						} else {
+							return 1;
+						}
+					} )
+					.slice( 0, 20 )
+					// Convert search results to format supported by docsearch.
+					.map( match => {
+						return {
+							url: window.location.origin + projectPath + '/' + match.item.url,
+							urlShort: match.item.url,
+							hierarchy: {
+								lvl0: 'API',
+								lvl1: addHighlight( match.item.parent, searchedQuery ),
+								lvl2: addHighlight( match.item.preTitle + match.item.name, searchedQuery )
+							},
+							tags: [ 'api' ],
+							fScore: match.score
+						};
+					} );
+			};
+		} )
+		.fail( () => {
+			console.log( 'Local API search not available.' );
+		} );
+}
+
+function addHighlight( text, searchedQuery ) {
+	const highlightClass = 'algolia-docsearch-suggestion--highlight';
+
+	// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.
+	// See: #984.
+	const escapedQuery = searchedQuery.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
+
+	const queryRegex = new RegExp( `(${ escapedQuery })`, 'gi' );
+
+	return text.replace( queryRegex, `<span class="${ highlightClass }">$1</span>` );
+}