umberto 7.0.2 → 8.0.1

package/themes/umberto/src/gloria/css/components/_notification.scss

@@ -0,0 +1,36 @@
+
+
+.notification {
+	position: fixed;
+	z-index: 99999;
+	max-width: 650px;
+	padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-5);
+	background-color: var(--color-common-white);
+	border: var(--color-info-500) 2px solid;
+	border-radius: var(--radius-2);
+	box-shadow: -2px 6px 10px 0px rgba(0, 18, 52, .28);
+	color: var(--color-secondary-800);
+
+	&__title {
+		margin: 0;
+		font-size: var(--font-size-lg);
+		font-weight: var(--font-weight-bold);
+		font-family: var(--font-family-heading);
+		color: var(--color-info-500);
+	}
+
+	&__body {
+
+	}
+
+	&__close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-5);
+		background: none;
+		border: none;
+		box-shadow: none;
+		cursor: pointer;
+	}
+}

package/themes/umberto/src/gloria/css/components/_utils.scss

@@ -0,0 +1,5 @@
+@use 'sass:string';
+
+@function component-path($component, $folder: '_components') {
+  @return string.unquote('../../../../../../themes/umberto/layout/gloria/' + $folder + '/' + $component + '/style');
+}

package/themes/umberto/src/gloria/css/doc/_details.scss

@@ -0,0 +1,11 @@
+@layer doc {
+	.doc.b-details {
+		&:not(:last-child) {
+			margin-bottom: var(--spacing-3);
+		}
+
+		&__summary + .c-code-block {
+			margin-top: var(--spacing-3);
+		}
+	}
+}

package/themes/umberto/src/gloria/css/doc/_editor-icons.scss

@@ -0,0 +1,21 @@
+@layer doc {
+	.editor-icon {
+		white-space: nowrap;
+
+		&::before {
+			content: '(';
+		}
+
+		&::after {
+			content: ')';
+		}
+
+		&__image {
+			display: inline;
+			width: 20px;
+			height: 20px;
+			vertical-align: middle;
+			margin: -2px 2px 0 2px;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/doc/_images.scss

@@ -0,0 +1,9 @@
+@layer doc {
+	.doc.b-image {
+		display: block;
+		margin: 0 auto;
+		max-width: 100%;
+		border-radius: var(--radius-2);
+		overflow: hidden;
+	}
+}

package/themes/umberto/src/gloria/css/doc/_index.scss

@@ -0,0 +1,5 @@
+@use 'typography';
+@use 'editor-icons';
+@use 'images';
+@use 'snippets';
+@use 'details';

package/themes/umberto/src/gloria/css/doc/_snippets.scss

@@ -0,0 +1,127 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+@layer doc {
+	:root {
+		--snippet-max-width: 1520px;
+		--snippet-outside-margin: 48px;
+		--ck-content-font-family: 'Lato';
+	}
+
+	.doc.live-snippet {
+		&--empty {
+			display: none;
+		}
+
+		&--normal:not(:has(.no-transform)) {
+			position: relative;
+			margin: var(--spacing-7) 0 var(--spacing-7) calc(var(--snippet-outside-margin) * -1);
+			width: calc(100% + var(--snippet-outside-margin) * 2);
+			min-height: 95px;
+
+			@include mobile {
+				width: 100%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			&:has(.c-banner) {
+				z-index: var(--z-index-live-snippet);
+			}
+		}
+
+		&--wide {
+			width: 100%;
+
+			--snippet-gap: var(--spacing-12);
+
+			/* Based on `l-container--thin` class properties. */
+			--half-container-gap: calc( ((100vw - min(100vw, 960px)) / 2) + var(--spacing-20));
+
+			@include desktop {
+				width: calc(100vw - var(--sidebar-width-xl) - var(--toc-width-xl) - var(--snippet-gap));
+				margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-width-xl) + var(--snippet-gap) / 2);
+
+				.live-snippet__loader {
+					width: calc(100vw - var(--sidebar-width-xl) - var(--toc-width-xl) - var(--snippet-gap));
+				}
+			}
+
+			@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
+				width: calc(100% + var(--sidebar-width-md)/2);
+				margin-left: calc(-1 * var(--sidebar-width-md)/2 + var(--spacing-16));
+
+				.live-snippet__loader {
+					width: calc(100vw - var(--sidebar-width-md) - var(--snippet-gap));
+				}
+			}
+
+			@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+				width: calc(100vw - var(--sidebar-width-lg) - var(--toc-width-lg) - var(--snippet-gap));
+				margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-width-lg) + var(--snippet-gap) / 2);
+
+				.live-snippet__loader {
+					width: calc(100vw - var(--sidebar-width-lg) - var(--toc-width-lg) - var(--snippet-gap));
+				}
+			}
+
+			> *:not(.live-snippet__loader) {
+				@include desktop {
+					margin-left: auto !important;
+					margin-right: auto !important;
+					max-width: var(--snippet-max-width);
+				}
+			}
+
+			.l-layout__main--no-toc & {
+				--toc-width-xl: 0px;
+				--toc-width-lg: 0px;
+				--toc-width-md: 0px;
+
+				@include min-width(2200px) {
+					position: relative;
+					left: calc(-1 * var(--sidebar-width-xl)/2);
+				}
+			}
+
+			.c-sidebar--collapsed + .l-layout__main & {
+				/* TODO: margin-left calculations */
+				/* Should we change the editor width while the sidebar is collapsed? */
+			}
+
+			.c-sidebar--collapsed + .l-layout__main.l-layout__main--no-toc & {
+				--sidebar-collapsed-calculation: calc(var(--sidebar-width) / 2);
+
+				@include desktop {
+					--sidebar-width: var(--sidebar-width-xl);
+					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-collapsed-calculation) + var(--snippet-gap) / 2);
+				}
+
+				@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
+					--sidebar-width: var(--sidebar-width-md);
+					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-collapsed-calculation) + var(--snippet-gap) / 2);
+				}
+
+				@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+					--sidebar-width: var(--sidebar-width-lg);
+					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-collapsed-calculation) + var(--snippet-gap) / 2);
+				}
+
+				@include min-width(2200px) {
+					margin-left: calc((-1 * var(--half-container-gap)) + var(--sidebar-width-xl) + var(--snippet-gap) / 2);
+				}
+			}
+		}
+
+		&:has(style):not(:has(p, div, .c-banner)) {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border-width: 0;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/doc/_typography.scss

@@ -0,0 +1,5 @@
+@layer doc {
+	.doc.b-bold {
+		font-weight: var(--font-weight-semibold);
+	}
+}

package/themes/umberto/src/gloria/css/layout/_base.scss

@@ -0,0 +1,17 @@
+@use "@gloria/base/_mixins.scss" as *;
+
+@layer layout {
+	html {
+		height: 100%;
+		overscroll-behavior: none;
+		overflow-x: hidden;
+	}
+
+	body {
+		font-size: var(--font-size-base);
+		line-height: var(--line-height-base);
+		font-family: var(--font-family-text);
+		text-wrap: pretty;
+		overscroll-behavior: none;
+	}
+}

package/themes/umberto/src/gloria/css/layout/_breakpoints.scss

@@ -0,0 +1,88 @@
+@use 'mixins' as *;
+
+@layer layout {
+	:root {
+		--breakpoint-sm: #{$breakpoint-sm};
+		--breakpoint-md: #{$breakpoint-md};
+		--breakpoint-lg: #{$breakpoint-lg};
+		--breakpoint-xl: #{$breakpoint-xl};
+	}
+
+	/* Hide on specific breakpoints */
+	.l-hide-sm {
+		@include max-width($breakpoint-sm) {
+			display: none !important;
+		}
+	}
+
+	.l-hide-md {
+		@include max-width($breakpoint-md) {
+			display: none !important;
+		}
+	}
+
+	.l-hide-lg {
+		@include max-width($breakpoint-lg) {
+			display: none !important;
+		}
+	}
+
+	.l-hide-xl {
+		@include max-width($breakpoint-xl) {
+			display: none !important;
+		}
+	}
+
+	/* Show only on specific breakpoint ranges */
+	.l-show-sm-only {
+		@media not all and (max-width: calc(#{$breakpoint-sm} - 1px)),
+			   not all and (min-width: #{$breakpoint-md}) {
+			display: none !important;
+		}
+	}
+
+	.l-show-md-only {
+		@media not all and (min-width: #{$breakpoint-md}),
+			   not all and (max-width: calc(#{$breakpoint-lg} - 1px)) {
+			display: none !important;
+		}
+	}
+
+	.l-show-lg-only {
+		@media not all and (min-width: #{$breakpoint-lg}),
+			   not all and (max-width: calc(#{$breakpoint-xl} - 1px)) {
+			display: none !important;
+		}
+	}
+
+	.l-show-xl-only {
+		@media not all and (min-width: #{$breakpoint-xl}) {
+			display: none !important;
+		}
+	}
+
+	/* Common mobile/desktop helpers */
+	.l-hide-mobile {
+		@include mobile {
+			display: none !important;
+		}
+	}
+
+	.l-hide-desktop {
+		@include desktop {
+			display: none !important;
+		}
+	}
+
+	.l-show-mobile-only {
+		@include desktop {
+			display: none !important;
+		}
+	}
+
+	.l-show-desktop-only {
+		@include mobile {
+			display: none !important;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/layout/_container.scss

@@ -0,0 +1,38 @@
+@use 'mixins' as *;
+
+@layer layout {
+	:root {
+		--container-max-width-sm: 540px;
+		--container-max-width-md: 720px;
+		--container-max-width-lg: 1140px;
+		--container-max-width-xl: 1320px;
+		--container-max-width-thin: 960px;
+	}
+	.l-container {
+		width: 100%;
+		max-width: 100%;
+		margin: 0 auto;
+		padding: 0 var(--spacing-5, 1rem);
+
+		@include min-width($breakpoint-sm) {
+			max-width: var(--container-max-width-sm);
+		}
+
+		@include min-width($breakpoint-md) {
+			max-width: var(--container-max-width-md);
+			padding: 0 var(--spacing-20, 1rem);
+		}
+
+		@include min-width($breakpoint-lg) {
+			max-width: var(--container-max-width-lg);
+		}
+
+		@include min-width($breakpoint-xl) {
+			max-width: var(--container-max-width-xl);
+		}
+
+		&--thin {
+			max-width: min(100vw, var(--container-max-width-thin));
+		}
+	}
+}

package/themes/umberto/src/gloria/css/layout/_index.scss

@@ -0,0 +1,6 @@
+@use 'breakpoints';
+@use 'base';
+@use 'layout';
+@use 'zindex';
+@use 'mixins';
+@use 'container';

package/themes/umberto/src/gloria/css/layout/_layout.scss

@@ -0,0 +1,64 @@
+@use 'mixins' as *;
+
+@layer layout {
+	.l-layout {
+		min-height: 100%;
+		display: flex;
+		flex-direction: column;
+
+		margin: 0;
+		padding: 0;
+
+		&--muted {
+			background: var(--color-gray-200);
+		}
+
+		&__container {
+			display: flex;
+			width: 100%;
+			flex-direction: row;
+			justify-content: center;
+			flex-grow: 1;
+
+			&:has(> .c-sidebar) {
+				@include max-width($breakpoint-lg) {
+					justify-content: flex-end;
+				}
+			}
+		}
+
+		&__main {
+			position: relative;
+			width: 100%;
+			transition: width var(--duration-normal) linear;
+
+			@include desktop {
+				width: calc(100% - var(--sidebar-width-xl) - var(--toc-width-xl));
+			}
+
+			@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
+				width: calc(100% - var(--sidebar-width-md));
+			}
+
+			@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
+				width: calc(100% - var(--sidebar-width-lg) - var(--toc-width-lg));
+			}
+
+			&.l-layout__main--no-toc {
+				--toc-width-xl: 0px;
+				--toc-width-lg: 0px;
+				--toc-width-md: 0px;
+			}
+
+			.c-sidebar--hidden + & {
+				--sidebar-width-xl: 0px;
+				--sidebar-width-lg: 0px;
+				--sidebar-width-md: 0px;
+			}
+		}
+
+		&__header {
+			width: 100%;
+		}
+	}
+}

package/themes/umberto/src/gloria/css/layout/_mixins.scss

@@ -0,0 +1,34 @@
+$breakpoint-sm: 600px;
+$breakpoint-md: 960px;
+$breakpoint-lg: 1440px;
+$breakpoint-xl: 1920px;
+
+@mixin max-width($breakpoint) {
+    @media (max-width: calc(#{$breakpoint} - 1px)) {
+        @content;
+    }
+}
+
+@mixin min-width($breakpoint) {
+    @media (min-width: calc(#{$breakpoint} - 1px)) {
+        @content;
+    }
+}
+
+@mixin breakpoint-only($min, $max) {
+    @media (min-width: #{$min}) and (max-width: calc(#{$max} - 1px)) {
+        @content;
+    }
+}
+
+@mixin mobile {
+    @include max-width($breakpoint-md) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @include min-width($breakpoint-md) {
+        @content;
+    }
+}

package/themes/umberto/src/gloria/css/layout/_zindex.scss

@@ -0,0 +1,12 @@
+@layer layout {
+	:root {
+		--z-index-live-snippet: 1;
+		--z-index-toc-show-button: 2;
+		--z-index-toc: 3;
+		--z-index-tooltip: 9;
+		--z-index-header: 1001; /* To be higher than the editor's sticky panel. */
+		--z-index-overlay: 1002;
+		--z-index-zoom-image-overlay: 1002;
+		--z-index-zoom-image: 1003;
+	}
+}

package/themes/umberto/src/gloria/css/modules/_index.scss

@@ -0,0 +1,29 @@
+@use 'sass:meta';
+@use './utils' as utils;
+
+$modules-with-third-party: (
+	'algolia-search',
+);
+
+@each $mod in $modules-with-third-party {
+	@include meta.load-css(utils.module-path($mod, 'third-party'));
+}
+
+@layer modules {
+	$modules: (
+		'footer',
+		'header',
+		'sidebar',
+		'toc',
+		'main',
+		'mobile-nav',
+		'header-bar',
+		'breadcrumbs',
+		'algolia-search',
+		'not-found'
+	);
+
+	@each $mod in $modules {
+		@include meta.load-css(utils.module-path($mod));
+	}
+}

package/themes/umberto/src/gloria/css/modules/_utils.scss

@@ -0,0 +1,7 @@
+@use 'sass:string';
+
+@function module-path($mod, $file: 'style') {
+	$base-path: '../../../../../../themes/umberto/layout/gloria/_modules/';
+
+	@return string.unquote($base-path + $mod + '/' + $file);
+}

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

@@ -1,117 +1,11 @@
-// 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");
+@use 'fonts';
+@use 'layers';
+@use 'normalize';
+@use 'base';
+@use 'layout';
+@use 'theme/light';
+@use 'utilities';
+@use 'components';
+@use 'modules';
+@use 'doc';
+@use 'a11y';