umberto 6.0.0 → 6.1.0

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

@@ -0,0 +1,223 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+/**
+ * Okaidia theme for JavaScript, CSS and HTML.
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ *
+ * 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;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 0.9em; // Decreased from 1.0 to 0.9.
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.75; // Increased from 1.5 to 1.75.
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre.highlight[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code.highlight[class*="language-"],
+pre.highlight[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code.highlight[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #8292a2;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.attr-name,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted,
+.token.keyword {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number,
+.token.regex,
+.token.important {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted,
+.token.atrule,
+.token.attr-value {
+	color: #e6db74;
+}
+
+.token.function {
+	color: #a6e22e;
+}
+
+.token.class-name,
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.language-yaml {
+	.token.string {
+		color: #a6e22e;
+	}
+}
+
+div.code-toolbar {
+	position: relative;
+
+	& > .toolbar {
+		position: absolute;
+		top: spacing.u-spacing( -2 );
+		right: spacing.u-spacing( -2 );
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+
+		.toolbar-item + .toolbar-item {
+			margin-left: spacing.u-spacing( -3 );
+		}
+
+		& button {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			overflow: hidden;
+			width: 35px;
+			height: 35px;
+			border: 0;
+			margin: 0;
+			padding: 0;
+
+			background: transparent;
+			border-radius: 2px;
+			opacity: .5;
+			transition: opacity .08s ease-in-out, background .08s ease-in-out;
+
+			&::before {
+				width: 20px;
+				height: 20px;
+				filter: invert( 1 );
+			}
+
+			&:hover {
+				opacity: 1;
+				background: hsla(0,0%,100%,0.13);
+			}
+
+			&[data-copy-state="copy-success"] {
+				opacity: 1;
+			}
+
+			&.copy-to-clipboard-button {
+				&::before {
+					content: url( ../img/clipboard.svg );
+					/* This icon looks better with the center of weight slightly shifted. */
+					margin-left: 2px;
+				}
+
+				&[data-copy-state="copy-success"]::before {
+					content: url( ../img/tick.svg );
+					margin-left: 0;
+					filter: invert( 0 );
+
+					animation-duration: .5s;
+  					animation-name: bounce-in;
+				}
+			}
+
+			&.download-snippet-button::before {
+				content: url( ../img/download.svg );
+			}
+		}
+
+		& span {
+			display: none;
+		}
+	}
+}
+
+@keyframes bounce-in {
+	0% {
+		opacity: 0;
+		transform: scale3d(.5, .5, .5);
+	}
+
+	20% {
+		transform: scale3d(1.1, 1.1, 1.1);
+	}
+
+	40% {
+		transform: scale3d(.8, .8, .8);
+	}
+
+	60% {
+		opacity: 1;
+		transform: scale3d(1.05, 1.05, 1.05);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale3d(1, 1, 1);
+	}
+}

package/themes/umberto/src/umberto/css/_rwd-breadcrumbs.scss

@@ -0,0 +1,28 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+@use 'helpers/globals';
+
+.rwd-breadcrumbs {
+	display: none;
+
+	@include globals.u-responsive-tablet {
+		display: block;
+	}
+
+	a {
+		display: inline-block;
+		font-size: 0.9em;
+
+		&:last-child {
+			// Highlight last item.
+			font-weight: bold;
+		}
+	}
+
+	&__separator {
+		opacity: 0.3;
+		margin: 0 5px;
+		display: inline-block;
+	}
+}

package/themes/umberto/src/umberto/css/_rwd-menu.scss

@@ -0,0 +1,89 @@
+// 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';
+
+.header__menu-rwd {
+	display: none;
+	height: calc( 100% - #{ globals.$u-top-main } );
+	overflow-x: hidden;
+	background: color.u-color( 'background-bright' );
+
+	a {
+		color: color.u-color( 'text-invert' );
+		display: block;
+		width: 100%;
+
+		&:hover{
+			text-decoration: none;
+		}
+
+		/* We need to hide wrongly generated links by umberto. */
+		&:empty {
+			display: none;
+		}
+	}
+
+	/* 1st level of tree. */
+	ul.header__menu-rwd__projects {
+
+		/* Make different appearance of project names (CK5, CK4, Letters etc.). */
+		li[data-project] {
+			border-bottom: 1px solid color.u-color( 'separator' );
+
+			> a {
+				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: color.u-color( 'background-bright' );
+			padding-bottom: 0;
+
+			/* Style elements like Builds, Framework, Examples, API, Features. */
+			li[data-group] {
+				border-bottom: 1px solid color.u-color( 'separator' );
+
+				> a {
+					padding: spacing.u-spacing( -1 );
+					margin-left: spacing.u-spacing( 0 );
+					text-transform: uppercase;
+				}
+			}
+		}
+
+		/* 3rd level of tree. */
+		ul.header__menu-rwd__projects-subpages {
+			margin-top: -1 * spacing.u-spacing( -3 );
+			margin-bottom: spacing.u-spacing( -1 );
+		}
+
+		/* Highlight active and focused item. */
+		.tree__item__wrapper--active,
+		.tree__item__wrapper:focus,
+		.tree__item__wrapper:active {
+			font-weight: bold;
+			background-color: color.u-color( 'separator' );
+		}
+
+		/* Disable active effect during scrolling on the mobile. */
+		.tree__item__wrapper:hover {
+			font-weight: normal;
+			background-color: transparent;
+		}
+
+		/* Style API tree differently. */
+		.api-tree {
+			padding-bottom: 0;
+		}
+	}
+
+}

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

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

package/themes/umberto/src/umberto/css/_theme-dark.scss

@@ -0,0 +1,175 @@
+// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
+// For licensing, see LICENSE.md.
+
+/* If you want to activate dark mode, fire in the console `localStorage.setItem( 'theme', 'theme-dark' ); `*/
+:root {
+	--dark--3: hsl(0, 0%, 20%);
+	--dark--2: hsl(0, 0%, 16%);
+	--dark--1: hsl(0, 0%, 12%);
+	--dark-link-color: hsl(196, 100%, 50%);
+	--light: hsl(0, 0%, 97%);
+}
+
+html.theme-dark{
+	body {
+		color: var(--light);
+		background-color: var(--dark--1);
+	}
+
+	.main .main__content,
+	nav.api-secondary-navigation,
+	.main .side-navigation__wrapper,
+	.main .side-navigation__inner,
+	.main__content--sdk .sdk-sample-source-code__code-block-action-buttons a{
+		background-color: var(--dark--1);
+		border-color: var(--dark--2);
+	}
+
+	.api-subheader .badge,
+	.collapsing-list__term .badge,
+	.collapsing-list__term .badge a {
+		color: var(--light);
+		border-color: var(--light)
+	}
+
+	.tree li .tree__item__wrapper--active {
+		background-color: var(--dark--3)
+	}
+
+	.tree.api-tree,
+	.tree li a,
+	.top__menu li a,
+	nav.secondary-navigation,
+	nav.secondary-navigation a,
+	nav.api-info-box.api-secondary-navigation dt,
+	.api-tree__filter label,
+	.api-subheader__navigation-category,
+	div.api-props-filter h4,
+	.footer p,
+	.header__menu-rwd,
+	.header__menu-rwd ul.header__menu-rwd__projects li[data-project]>a,
+	.algolia-docsearch-suggestion,
+	.algolia-autocomplete .ds-suggestion .algolia-docsearch-suggestion--subcategory-column-text,
+	.algolia-autocomplete .algolia-docsearch-suggestion--category-header,
+	input.example-input,
+	.collapsing-list__description dl .dlheading5,
+	.collapsing-list__description dl .dlheading6 {
+		color: var(--light);
+	}
+
+	.top .header__sub,
+	.header__menu-rwd ul.header__menu-rwd__projects li[data-project]>a,
+	.main__content--sdk a.sdk-sample-source-code__button:hover,
+	.main__content--sdk a.sdk-sample-source-code__button.active{
+		background-color: var(--dark--3);
+		border-color: var(--dark--2);
+	}
+
+	.top,
+	.top .header__main,
+	.top__menu li a:hover,
+	.main__content-inner .api-subheader__navigation-category,
+	.tree li .tree__item__wrapper:hover,
+	p.notice, div.notice, nav.notice, div.tip, p.tip,
+	div.docs-categories__item ul li a:hover,
+	div.docs-categories__item ul li a:focus,
+	.formatted .hljs,
+	.main__content-inner .api-subheader__navigation-category:hover ul,
+	.header__menu-rwd,
+	.main__content--sdk a.sdk-sample-source-code__button,{
+		background-color: var(--dark--2);
+	}
+
+	.top__search__box,
+	.api-tree__filter,
+	div.api-props-filter,
+	.header__menu-rwd ul.header__menu-rwd__projects ul.header__menu-rwd__projects-pages,
+	nav.secondary-navigation{
+		background-color: var(--dark--1);
+		color: var(--light);
+	}
+
+	.formatted code:not(.hljs){
+		background-color: rgba( 255, 255, 255, 0.1 );
+		padding: .1em .25em;
+	}
+
+	nav.secondary-navigation>ol,
+	div.api-props-filter{
+		border-color: var(--dark--2);
+	}
+
+	.main .main__content .github-contrib img,
+	div.api-props-filter h4::before{
+		filter: invert(85%);
+	}
+
+	.top__menu li a,
+	.footer,
+	.formatted kbd,
+	input.example-input {
+		background-color: transparent;
+	}
+
+	.footer,
+	.api-tree__filter{
+		border-color: transparent;
+	}
+
+	/* LINK COLORS. */
+	a,
+	.formatted a code:not(.hljs),
+	nav.secondary-navigation a.secondary-navigation__current-position,
+	div.main__content-inner a.headerlink,
+	nav.secondary-navigation a:hover{
+		color: var(--dark-link-color);
+	}
+
+	nav.secondary-navigation a.secondary-navigation__current-position::before{
+		background-color: var(--dark-link-color);
+	}
+
+	/* SEARCH */
+	.algolia-autocomplete .ds-dropdown-menu,
+	.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column,
+	.algolia-autocomplete .algolia-docsearch-suggestion--category-header{
+		background-color: var(--dark--1);
+	}
+
+	.algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
+		background-color: var(--dark--3);
+		color: var(--dark-link-color);
+	}
+
+	a.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary,
+	.algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
+		text-decoration: none;
+	}
+	.algolia-docsearch-suggestion--content,
+	.algolia-autocomplete .algolia-docsearch-suggestion__secondary,
+	.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column,
+	.collapsing-list__term{
+		border-color: var(--dark--3);
+	}
+
+	.algolia-docsearch-footer .algolia-docsearch-footer--logo{
+		background: none;
+	}
+
+	/* FIX CKEDITOR CONTENT COLOR. */
+	.ck-content {
+		background-color: var(--light);
+		color: var(--dark--1);
+	}
+
+	/* #709. */
+	.docs-categories__item ul li:first-of-type a:hover{
+		border-top-left-radius: 7px;
+		border-top-right-radius: 7px;
+	}
+
+	.docs-categories__item ul li:last-of-type a:hover{
+		border-bottom-left-radius: 7px;
+		border-bottom-right-radius: 7px;
+	}
+}

package/themes/umberto/src/umberto/css/_toggler.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/color';
+
+.toggler {
+	&--collapsed,
+	&--expanded {
+		&::before {
+			content: "";
+			width: 0;
+			height: 0;
+			display: inline-block;
+			border-style: solid;
+		}
+	}
+
+	&--collapsed {
+		&::before {
+			margin-left: 1px;
+			border-width: 4px 0 4px 6px;
+			border-color: transparent transparent transparent color.u-color( 'toggler' );
+
+		}
+
+		&:hover {
+			&::before {
+				border-color: transparent transparent transparent color.u-color( 'toggler', -8% );
+			}
+		}
+	}
+
+	&--expanded {
+		&::before {
+			margin-top: 1px;
+			border-width: 6px 4px 0 4px;
+			border-color: color.u-color( 'toggler' ) transparent transparent transparent;
+		}
+
+		&:hover {
+			&::before {
+				border-color: color.u-color( 'toggler', -8% ) transparent transparent transparent;
+			}
+		}
+	}
+}