umberto 6.0.0 → 6.1.0

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

@@ -0,0 +1,350 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@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: color.u-color( 'primary' );
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 9999; // Render it above CKEditor's UI.
+	align-items: center;
+
+	@include globals.u-responsive-tablet {
+		background: transparent;
+
+		&.rwd-menu-active {
+			height: 100%;
+
+			/* Control menu. */
+			.header__menu-rwd {
+				display: block;
+			}
+
+			/* Control rwd hamburger button. */
+			.header__main-rwd-button {
+				span {
+					&:nth-child( 1 ) {
+						top: 10px;
+						left: 0;
+						transform: rotate( 45deg );
+					}
+					&:nth-child( 2 ) {
+						width: 0;
+						opacity: 0;
+					}
+					&:nth-child( 3 ) {
+						top: 10px;
+						transform: rotate( -45deg );
+					}
+				}
+			}
+		}
+	}
+
+	.header__main {
+		padding: spacing.u-spacing( -2 ) spacing.u-spacing( 0 );
+		display: flex;
+		justify-content: space-between;
+		background-color: inherit;
+		position: relative;
+		z-index: inherit;
+
+		// handle header on smaller viewport
+		@include globals.u-responsive-tablet {
+			height: globals.$u-top-main;
+			background-color: color.u-color( 'primary' );
+			padding: 10px;
+			flex-wrap: wrap;
+			align-items: center;
+
+			.header__main-title {
+				flex-wrap: wrap;
+			}
+		}
+
+		&-rwd-button {
+			display: none;
+
+			@include globals.u-responsive-tablet {
+				position: absolute;
+				display: block;
+				width: $u-rwd-button-size;
+				height: $u-rwd-button-size;
+				margin-left: spacing.u-spacing( -2 );
+				@include globals.u-v-center;
+
+				a {
+					margin-top: 2px;
+
+					display: block;
+					position: relative;
+					height: inherit;
+					width: inherit;
+					cursor: pointer;
+
+					span {
+						position: absolute;
+						background: color.u-color( 'background-bright' );
+						width: 100%;
+						height: 3px;
+						border-radius: 5px;
+						transition: 250ms all ease;
+
+						&:nth-child( 2 ) { top: math.div( $u-rwd-button-size, 3 ) * 1; }
+						&:nth-child( 3 ) { top: math.div( $u-rwd-button-size, 3 ) * 2; }
+					}
+				}
+			}
+
+			@include globals.u-responsive-mobile {
+				margin-left: 0;
+			}
+		}
+
+		// ecosystem icon
+		&-homepage {
+			display: inline-block;
+			height: 41px;
+			vertical-align: middle;
+			margin-right: 1em;
+		}
+
+		&-title {
+			display: flex;
+			align-items: center;
+
+			&-home {
+				font-size: 1.5em;
+				text-decoration: none;
+				color: color.u-color( 'background-hue-light' );
+
+				@include globals.u-responsive-tablet {
+					font-size: font.u-font-size( 2 );
+
+					// We need to add margin in case of rwd button.
+					margin-left: spacing.u-spacing( 2 ) * 2;
+				}
+
+				@include globals.u-responsive-mobile {
+					display: none;
+				}
+			}
+		}
+	}
+
+	/* We need to handle project logo inside subheader. In pug files we can't include svg as plain element because of included variables.
+	 * In the future we can use some hexo plugin to make work such code as:
+	 * `include relative_url( page.path, page.BASE_PATH + page.startPage ) + 'project-logo.svg'
+	 * At this moment this is the best solution.
+	 */
+	&[data-project='ckeditor5'] {
+		li.top__menu-project-logo a {
+			background-image: url("data:image/svg+xml,%3Csvg width='68' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M43.71 11.025a11.508 11.508 0 0 0-1.213 5.159c0 6.42 5.244 11.625 11.713 11.625.083 0 .167 0 .25-.002v16.282a5.464 5.464 0 0 1-2.756 4.739L30.986 60.7a5.548 5.548 0 0 1-5.512 0L4.756 48.828A5.464 5.464 0 0 1 2 44.089V20.344c0-1.955 1.05-3.76 2.756-4.738L25.474 3.733a5.548 5.548 0 0 1 5.512 0l12.724 7.292z' fill='%23FFF'/%3E%3Cpath d='M45.684 8.79a12.604 12.604 0 0 0-1.329 5.65c0 7.032 5.744 12.733 12.829 12.733.091 0 .183-.001.274-.003v17.834a5.987 5.987 0 0 1-3.019 5.19L31.747 63.196a6.076 6.076 0 0 1-6.037 0L3.02 50.193A5.984 5.984 0 0 1 0 45.003V18.997c0-2.14 1.15-4.119 3.019-5.19L25.71.804a6.076 6.076 0 0 1 6.037 0L45.684 8.79zm-29.44 11.89c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h18.479c.833 0 1.509-.67 1.509-1.498v-.715c0-.827-.676-1.498-1.51-1.498H16.244zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm41.191-14.459c-5.835 0-10.565-4.695-10.565-10.486 0-5.792 4.73-10.487 10.565-10.487C63.27 3.703 68 8.398 68 14.19c0 5.791-4.73 10.486-10.565 10.486v-.001z' fill='%231EBC61' fill-rule='nonzero'/%3E%3Cpath d='M60.857 15.995c0-.467-.084-.875-.251-1.225a2.547 2.547 0 0 0-.686-.88 2.888 2.888 0 0 0-1.026-.531 4.418 4.418 0 0 0-1.259-.175c-.134 0-.283.006-.447.018-.15.01-.3.034-.446.07l.075-1.4h3.587v-1.8h-5.462l-.214 5.06c.319-.116.682-.21 1.089-.28.406-.071.77-.107 1.088-.107.218 0 .437.021.655.063.218.041.413.114.585.218s.313.244.422.419c.109.175.163.391.163.65 0 .424-.132.745-.396.961a1.434 1.434 0 0 1-.938.325c-.352 0-.656-.1-.912-.3-.256-.2-.43-.453-.523-.762l-1.925.588c.1.35.258.664.472.943.214.279.47.514.767.706.298.191.63.339.995.443.365.104.749.156 1.151.156.437 0 .86-.064 1.272-.193.41-.13.778-.323 1.1-.581a2.8 2.8 0 0 0 .775-.981c.193-.396.29-.864.29-1.405h-.001z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
+		}
+	}
+
+	&[data-project='ckeditor4'] {
+		li.top__menu-project-logo a {
+			background-image: url("data:image/svg+xml,%3Csvg width='68' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M43.71 11.025a11.508 11.508 0 0 0-1.213 5.159c0 6.42 5.244 11.625 11.713 11.625.083 0 .167 0 .25-.002v16.282a5.464 5.464 0 0 1-2.756 4.739L30.986 60.7a5.548 5.548 0 0 1-5.512 0L4.756 48.828A5.464 5.464 0 0 1 2 44.089V20.344c0-1.955 1.05-3.76 2.756-4.738L25.474 3.733a5.548 5.548 0 0 1 5.512 0l12.724 7.292z' fill='%23FFF'/%3E%3Cpath d='M45.684 8.79a12.604 12.604 0 0 0-1.329 5.65c0 7.032 5.744 12.733 12.829 12.733.091 0 .183-.001.274-.003v17.834a5.987 5.987 0 0 1-3.019 5.19L31.747 63.196a6.076 6.076 0 0 1-6.037 0L3.02 50.193A5.984 5.984 0 0 1 0 45.003V18.997c0-2.14 1.15-4.119 3.019-5.19L25.71.804a6.076 6.076 0 0 1 6.037 0L45.684 8.79zm-29.44 11.89c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h18.479c.833 0 1.509-.67 1.509-1.498v-.715c0-.827-.676-1.498-1.51-1.498H16.244zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm41.191-14.459c-5.835 0-10.565-4.695-10.565-10.486 0-5.792 4.73-10.487 10.565-10.487C63.27 3.703 68 8.398 68 14.19c0 5.791-4.73 10.486-10.565 10.486v-.001z' fill='%230287D0' fill-rule='nonzero'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M59.234 16.85h1.113v-1.66h-1.125V9.892h-2.307l-3.306 5.238v1.72h3.822v1.686h1.803z'/%3E%3Cpath fill='%230287D0' fill-rule='nonzero' d='M57.443 11.991v3.199H55.48l1.928-3.199h.035z'/%3E%3C/g%3E%3C/svg%3E");
+		}
+	}
+
+	&[data-project='letters'] {
+		li.top__menu-project-logo a {
+			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='57' height='64' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath d='M32.18 3.718l20.14 11.635A5.362 5.362 0 0 1 55 19.997v23.27a5.362 5.362 0 0 1-2.68 4.643L32.18 59.545a5.356 5.356 0 0 1-5.36 0L6.68 47.91A5.362 5.362 0 0 1 4 43.267v-23.27a5.362 5.362 0 0 1 2.68-4.644L26.82 3.718a5.356 5.356 0 0 1 5.36 0z' fill='%23FFF'/%3e%3cpath d='M33.458 40.042h1.835a1.344 1.344 0 0 0 0-2.688h-2.304v.005H22.478c-.827 0-1.497.67-1.497 1.498v6.92h-4.557V17.315h18.662v5.705c0 .69.558 1.248 1.247 1.248h5.544v21.51h-9.984a1.248 1.248 0 0 0 0 2.497h11.232c.689 0 1.247-.559 1.247-1.248V22.427a.999.999 0 0 0-.284-.698l-6.463-6.61a.998.998 0 0 0-.713-.301H15.176c-.689 0-1.248.559-1.248 1.248v30.96c0 .69.559 1.248 1.248 1.248h7.053c.689 0 1.247-.559 1.247-1.248v-6.981h9.982v-.003zM31.494.802l22.512 13.005A5.993 5.993 0 0 1 57 18.997v26.007a5.993 5.993 0 0 1-2.994 5.19L31.494 63.196a5.986 5.986 0 0 1-5.988 0L2.994 50.193A5.993 5.993 0 0 1 0 45.003V18.997a5.993 5.993 0 0 1 2.994-5.19L25.506.804a5.986 5.986 0 0 1 5.988 0zM22.51 26.054a1.344 1.344 0 0 0 0 2.689h12.784a1.344 1.344 0 0 0 0-2.689H22.509zm0 5.647a1.344 1.344 0 0 0 0 2.689h8.916a1.344 1.344 0 0 0 0-2.69h-8.916zm14.876-13.885a.1.1 0 0 1 .173-.068l3.91 4.143a.1.1 0 0 1-.072.168h-3.512a.5.5 0 0 1-.499-.499v-3.744z' fill='%23F75C4C' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");
+		}
+	}
+
+	&[data-project='cs'] {
+		li.top__menu-project-logo a {
+			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='57' height='64' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath d='M31.284 2.746l20.932 12.092A5.572 5.572 0 0 1 55 19.663v24.183c0 1.99-1.061 3.83-2.784 4.825L31.284 60.762a5.566 5.566 0 0 1-5.568 0L4.784 48.671A5.572 5.572 0 0 1 2 43.846V19.663c0-1.99 1.061-3.83 2.784-4.825L25.716 2.746a5.566 5.566 0 0 1 5.568 0z' fill='%23FFF'/%3e%3cpath d='M24.057 37.919a1.248 1.248 0 0 0-1.463 1.23v5.885h-4.891c-4.006 0-7.268-3.264-7.268-7.272a7.283 7.283 0 0 1 5.197-6.972c.548-.162.915-.676.891-1.248a7.285 7.285 0 0 1-.006-.3c0-4.008 3.262-7.272 7.268-7.272.56 0 1.112.066 1.658.198.484.117.992-.065 1.29-.464a8.466 8.466 0 0 1 6.784-3.385c4.678 0 8.485 3.81 8.485 8.489 0 .378-.026.75-.076 1.11a1.249 1.249 0 0 0 .622 1.26c2.653 1.5 4.32 4.315 4.32 7.367 0 4.68-3.806 8.489-8.485 8.489h-5.439a1.248 1.248 0 0 0 0 2.497h5.44c6.056 0 10.979-4.926 10.979-10.986 0-3.681-1.864-7.088-4.884-9.107.012-.21.018-.42.018-.63 0-6.059-4.924-10.986-10.98-10.986-3.204 0-6.21 1.388-8.277 3.763a9.508 9.508 0 0 0-1.455-.112c-5.205 0-9.47 4.095-9.749 9.234a9.781 9.781 0 0 0-6.097 9.055c0 5.387 4.38 9.769 9.764 9.769h5.14a2.246 2.246 0 0 0 2.246-2.247v-4.687h10.59a1.352 1.352 0 0 0 0-2.705H24.327c-.092 0-.182.01-.269.027zM31.494.803l22.512 13.004A5.993 5.993 0 0 1 57 18.997v26.007a5.993 5.993 0 0 1-2.994 5.19L31.494 63.196a5.986 5.986 0 0 1-5.988 0L2.994 50.193A5.993 5.993 0 0 1 0 45.003V18.997a5.993 5.993 0 0 1 2.994-5.19L25.506.804a5.986 5.986 0 0 1 5.988 0zm-7.168 25.729a1.352 1.352 0 0 0 0 2.705H35.68a1.352 1.352 0 0 0 0-2.705H24.326zm0 5.68a1.352 1.352 0 0 0 0 2.705h7.96a1.352 1.352 0 0 0 0-2.705h-7.96z' fill='%236C7A89' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");
+		}
+	}
+
+	&[data-project^='ckfinder'] {
+		li.top__menu-project-logo a {
+			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='57' height='63' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath d='M31.369 2.758L52.13 14.575A5.642 5.642 0 0 1 55 19.473v23.633a5.642 5.642 0 0 1-2.869 4.898L31.37 59.821a5.81 5.81 0 0 1-5.738 0L4.87 48.004A5.642 5.642 0 0 1 2 43.106V19.473a5.642 5.642 0 0 1 2.869-4.898L25.63 2.758a5.81 5.81 0 0 1 5.738 0z' fill='%23FFF'/%3e%3cpath d='M34.115 38.177c1.75-1.393 2.87-3.526 2.87-5.917 0-4.199-3.454-7.603-7.714-7.603s-7.713 3.404-7.713 7.603c0 4.2 3.454 7.604 7.713 7.604a7.8 7.8 0 0 0 2.603-.444l3.507 6.531a3.864 3.864 0 0 0 3.408 2.023h5.137c.71 0 1.286-.567 1.286-1.267v-24.37c0-.327-.126-.626-.333-.85a1.01 1.01 0 0 0-.226-.335l-6.626-6.532a1.289 1.289 0 0 0-1.098-.608H15.131c-.71 0-1.286.568-1.286 1.268v31.427c0 .7.576 1.267 1.286 1.267h16.007c.71 0 1.286-.567 1.286-1.267s-.576-1.268-1.286-1.268H16.416V16.547h19.228v5.79c0 .7.575 1.268 1.285 1.268h5.712v21.834h-3.852c-.476 0-.913-.259-1.136-.674l-3.538-6.588zm4.1-20.504v3.397h3.446l-3.446-3.397zM31.585.815l22.33 12.709A6.067 6.067 0 0 1 57 18.79V44.21a6.067 6.067 0 0 1-3.085 5.267l-22.33 12.71a6.248 6.248 0 0 1-6.17 0l-22.33-12.71A6.067 6.067 0 0 1 0 44.21V18.79a6.067 6.067 0 0 1 3.085-5.267L25.415.814a6.248 6.248 0 0 1 6.17 0zm-2.314 36.514c2.84 0 5.142-2.27 5.142-5.069 0-2.8-2.302-5.069-5.142-5.069-2.84 0-5.142 2.27-5.142 5.07 0 2.799 2.302 5.068 5.142 5.068z' fill='%2317C5A9' fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e");
+		}
+	}
+
+	&[data-project^='trial'] {
+		li.top__menu-project-logo a {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='67' height='67' version='1.1'%3E%3Cpath d='m29.23 0.34908c-1.0911 0-2.1811 0.27713-3.1622 0.83323l-11.488 6.5108-11.382 6.6941c-1.9443 1.1432-3.1458 3.2231-3.1638 5.4787l-0.10493 13.203 0.10493 13.205c0.018017 2.2555 1.2195 4.3355 3.1638 5.4787l11.382 6.6925 11.488 6.5124c1.9623 1.1122 4.3637 1.1122 6.326 0l11.488-6.5124 11.382-6.6925c1.9443-1.1432 3.1458-3.2231 3.1638-5.4787l0.10494-13.205-0.10494-13.203c-0.01802-2.2555-1.2194-4.3355-3.1638-5.4787l-11.382-6.6941-11.488-6.5108c-0.98114-0.55611-2.0727-0.83323-3.1638-0.83323zm-0.22711 12.909 4.6783 14.4h15.142l-12.249 8.9009 4.6783 14.4-12.25-8.8993-12.251 8.8993 4.6799-14.4-12.25-8.9009h15.141zm-0.17384 7.7826-2.9711 8.8664h-9.6135l7.7779 5.4787-2.9711 8.8649 7.7779-5.4787 7.7779 5.4787-2.9711-8.8649 7.7779-5.4787h-9.6135z' fill='%23efbb23' stroke-width='.80191'/%3E%3C/svg%3E");
+		}
+	}
+
+	/* Fix proportions of wider logos (ck5 & ck4). */
+	&[data-project='letters'],
+	&[data-project='cs'],
+	&[data-project^='ckfinder'] {
+		li.top__menu-project-logo a {
+			background-size: 33px;
+		}
+	}
+
+
+	.header__sub {
+		height: globals.$u-top-sub;
+		display: flex;
+		background: color.u-color( 'background-dark' );
+		border-bottom: 1px solid color.u-color( 'background-hue' );
+		position: relative;
+
+		@include globals.u-responsive-tablet {
+			display: none;
+		}
+	}
+
+	&__logo {
+		// NOTE: IE11 does not support calc() here in flex.
+		flex: 0 0 globals.$u-sidebar-width;
+
+		&__product-title {
+			display: block;
+			font-size: font.u-font-size( 2 );
+		}
+	}
+
+	&__menu {
+		display: flex;
+		margin: 0;
+		list-style: none;
+
+		@include globals.u-responsive-tablet {
+			flex-wrap: wrap;
+		}
+
+		&__item-home {
+			svg {
+				display: flex;
+				height: 24px;
+				width: 24px;
+			}
+
+			&--active {
+				background: color.u-color( 'text-invert' );
+
+				svg {
+					fill: color.u-color( 'primary' );
+				}
+			}
+		}
+
+		li {
+			margin-right: spacing.u-spacing( 0 );
+
+			&.top__menu-project-logo
+				a {
+					padding-left: 65px;
+					background-size: 38px;
+					background-repeat: no-repeat;
+					background-position: spacing.u-spacing( 1 ) 5px;
+
+					/* Disable hover/focus border on project logo href. */
+					border-bottom: 0;
+				}
+
+			a {
+				display: block;
+				font-weight: 600;
+				text-decoration: none;
+				background-color: color.u-color( 'background-dark' );
+				color: color.u-color( 'text-gray' );
+				border-bottom: 2px solid transparent;
+				position: relative;
+				height: globals.$u-top-sub;
+				line-height: globals.$u-top-sub;
+				padding: 0 spacing.u-spacing( 0 );
+				transition: 150ms ease all;
+
+				&:hover {
+					background-color: color.u-color( 'background-dark', -3% );
+				}
+
+				&:hover,
+				&.top__menu__item--active {
+					border-color: color.u-color( 'primary' );
+				}
+
+				// Disable colored border for GH and control svg.
+				&.top__menu-github-link {
+					&:hover {
+						border-color: transparent
+					}
+
+					svg {
+						fill: currentColor;
+						width: 30px;
+						margin-top: math.div( globals.$u-top-sub - 30px, 2 );
+					}
+				}
+			}
+		}
+	}
+
+	&__search {
+		flex: 0 0 240px;
+		position: relative;
+		align-self: flex-start;
+
+		@include globals.u-responsive-tablet {
+			flex: unset;
+		}
+
+		&__box {
+			background: color.u-color( 'background-bright' );
+			font-weight: 400;
+			font-size: font.u-font-size( 0 );
+			height: 40px;
+			width: 240px;
+			border: 0;
+			padding: 0 2*spacing.u-spacing( 4 ) 0 spacing.u-spacing( 1 );
+			border-radius: 25px;
+			border: 2px solid transparent;
+
+			@include globals.u-responsive-tablet {
+				width: unset;
+				height: 35px;
+			}
+
+			&::-webkit-input-placeholder {
+				color: color.u-color( 'text', 70% );
+			}
+
+			&:focus,
+			&:active {
+				border-color: #5db913;
+				outline: none;
+				box-shadow: 0 0 5px #5db913;
+			}
+		}
+
+		&__button {
+			@include globals.u-v-center;
+			width: 15px;
+			height: 17px;
+			position: absolute;
+			right: spacing.u-spacing( 1 );
+			background: none;
+			border: none;
+			padding: 0;
+
+			img {
+				width: 15px;
+				height: 15px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,218 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@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.
+See: `_api-tree.scss` and `_guide-sdk-tree.scss`. */
+
+.tree {
+	list-style: none;
+
+	// Make sure the filter never floats over the tree.
+	padding-bottom: font.$u-line-height-base + em;
+
+	@include globals.u-unselectable;
+
+	// Generate styles for tree levels recursively.
+	@include globals.u-responsive-tablet-plus {
+		@include globals.levels( 1, 1 );
+	}
+
+	@include globals.u-responsive-tablet {
+		@include globals.levels( 1, 0 );
+	}
+
+	&.guide-tree {
+		opacity: 0; //prevents flickering when applying categories fold state
+	}
+
+	&.state-applied {
+		opacity: 1;
+		transition: opacity 0.05s
+	}
+
+	li {
+		position: relative;
+		cursor: pointer;
+		display: block;
+
+		&::before {
+			position: absolute;
+			z-index: 1;
+			top: .7em;
+		}
+
+		a {
+			text-decoration: none;
+			color: inherit;
+
+			&:hover {
+				text-decoration: underline;
+
+				& .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: color.u-color( 'badge-green' );
+				}
+			}
+		}
+
+		.tree__item__text {
+			display: inline-block;
+			padding: spacing.u-spacing( -3 ) 0;
+			position: relative;
+			margin-right: auto;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			// The icon.
+			&::before {
+				content: '';
+				position: relative;
+				width: 13px;
+				height: 13px;
+				display: inline-block;
+				margin-right: spacing.u-spacing( -2 );
+				background-repeat: no-repeat;
+			}
+		}
+
+		.tree__item__badge {
+			margin: 0 spacing.u-spacing( -2 );
+		}
+
+		.tree__item__badge:last-of-type {
+			margin-right: spacing.u-spacing( 2 );
+		}
+
+		.tree__item__wrapper {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex-wrap: nowrap;
+			align-content: center;
+			justify-content: flex-start;
+		  	margin-left: calc( -1 * #{ spacing.u-spacing( 3 ) } );
+
+			&:hover {
+				background-color: color.u-color( 'background-dark' );
+			}
+
+			&--active {
+				overflow: hidden;
+				background-color: color.u-color( 'background-hue' );
+
+				&:hover {
+					background-color: color.u-color( 'background-hue', -3% );
+				}
+			}
+		}
+
+		.tree__item-nested-list {
+			height: auto;
+			overflow: visible;
+
+			&--hidden {
+				height: 0;
+				overflow: hidden;
+			}
+		}
+	}
+
+	.toggler--collapsed > ul {
+		display: none;
+	}
+
+	.toggler--expanded > ul {
+		display: block;
+	}
+
+	&__item {
+		&--package {
+			&::before{
+				background-image: url( ../img/box-orange.svg );
+			}
+		}
+
+		&--module {
+			&::before{
+				background-image: url( ../img/box-red.svg );
+			}
+		}
+
+	  	&--namespace {
+			&::before{
+			  	background-image: url( ../img/box-brown.svg );
+			}
+		}
+
+		&--folder {
+			// Improving UX of collapsing nested lists.
+			width: 100%;
+
+			&::before{
+				background-image: url( ../img/folder.svg );
+			}
+		}
+
+		&--class {
+			&::before{
+				background-image: url( ../img/cog.svg );
+			}
+		}
+
+		&--interface {
+			&::before{
+				background-image: url( ../img/arrows.svg );
+			}
+		}
+
+		&--typedef {
+			&::before{
+				background-image: url( ../img/data.svg );
+			}
+		}
+
+		&--guide,
+		&--sdk {
+			&::before{
+				background-image: url( ../img/book.svg );
+			}
+		}
+	}
+}
+
+/* These styles are outside the .tree scope because badges are also occasionally used in the guide content. */
+.tree__item__badge {
+	margin: 0 spacing.u-spacing( -3 );
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: 10px;
+	border-radius: 20px;
+	/* spacing.u-spacing() lacks granularity here :( */
+	padding: spacing.u-spacing( -4 ) .6em;
+	vertical-align: middle;
+}
+
+.tree__item__badge .tree__item__badge__text {
+	display: none;
+}
+
+.tree__item__badge_new {
+	background: color.u-color( 'badge-green' );
+	color: color.u-color( 'text-invert' );
+}
+
+.tree__item__badge_premium {
+	background-image: url( ../img/star-in-circle.svg );
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+	display: inline-block;
+}

package/themes/umberto/src/umberto/css/_warning-banner.scss

@@ -0,0 +1,46 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/globals';
+@use 'helpers/spacing';
+
+.top {
+	.warning-banner {
+		position: fixed;
+		display: flex;
+		align-content: center;
+		flex-wrap: nowrap;
+		align-items: center;
+		overflow: hidden;
+		top: 0;
+		z-index: 9999;
+		left: 50%;
+		transform: translateX(-50%);
+
+		background: #FCEB77;
+		font-size: 13px;
+		white-space: nowrap;
+		border-radius: 0 0 3px 3px;
+		box-shadow: 0 2px 4px #00000030;
+
+		@include globals.u-responsive-mobile {
+			display: none;
+		}
+
+		& a {
+			text-decoration: underline;
+		}
+
+		& span:first-child {
+			background: #1A1A1A;
+			color: #FCEB77;
+			padding: spacing.u-spacing( -3 ) spacing.u-spacing( -1 );
+			text-transform: uppercase;
+			font-weight: bold;
+		}
+
+		& span:last-child {
+			padding: 0 spacing.u-spacing( 0 );
+		}
+	}
+}

package/themes/umberto/src/umberto/css/components/_lightbox.scss

@@ -0,0 +1,12 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+/* Set bigger z-index than documentation header. */
+
+.medium-zoom-overlay {
+	z-index: 10000;
+}
+
+.medium-zoom-image {
+	z-index: 10001;
+}

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

@@ -0,0 +1,49 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'sass:color';
+@use 'sass:map';
+
+$u-colors: (
+	'primary': #3E59AD,
+	'primary-dark': #314687,
+	'link': #1b3af2,
+	'accent': #FFF3DC,
+	'background-hue-light': #FBFCFC,
+	'background-hue': #F2F5F7,
+	'background-dark': #f5f5f5,
+	'background-bright': #fff,
+	'background-gray': #474843,
+	'text': #000000,
+	'text-header': #000000,
+	'text-invert': #ffffff,
+	'text-invert-gray': #ffffffb2,
+	'text-gray': #555555,
+	'separator': #E9E9E9,
+	'toggler': #BDBDBD,
+	'highlight': #FFEB3B,
+	'selected': #4FA800,
+	'snippet-background': #272822,
+
+	// Badges
+	'badge-gray': #808080,
+	'badge-orange': #E59E00,
+	'badge-green': #8BC34A,
+	'badge-red': #E50037,
+	'badge-black': #212121,
+	'badge-purple': #AB47BC,
+
+	// Hints
+	'hint-info': #64B5F6,
+	'hint-hint': #AB47BC,
+	'hint-warning': #FFE600,
+	'hint-error': #FF1D00
+);
+
+@function u-color( $name, $offset: 0% ) {
+	@return color.scale( map.get( $u-colors, $name ), $lightness: $offset );
+}
+
+@function u-border-color( $name, $offset: 0% ) {
+	@return u-color( $name, $offset - 25% );
+}