umberto 7.0.2 → 8.0.0

package/themes/umberto/layout/gloria/_api-docs/mixin.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Mixin' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/cog.svg', kind: 'Mixin' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/module.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-red.svg', kind: 'Module' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-red.svg', kind: 'Module' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/namespace.pug

@@ -1,10 +1,10 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-brown.svg', kind: 'Namespace' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/box-brown.svg', kind: 'Namespace' } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_api-docs/typedef.pug

@@ -1,37 +1,37 @@
 extends api-base
-include ./_mixin/_api-title
+include ./_header/index
 include ./_mixin/_params
 include ./_mixin/_return
 include ./_mixin/_related
 include ./_mixin/_link-or-text
 
 block prepend content
-    +apiTitle( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/data.svg', kind: 'Typedef' } )
+	+apiHeader( { iconPath: 'assets/' + umbertoVersion + '/gloria/img/data.svg', kind: 'Typedef' } )
 
 block append content
-    if data.types.length == 1 && data.types[ 0 ] == 'function'
-        div.typedef-callback
-            if isNonEmptyArray( data.params )
-                h4 Parameters
-                +paramsMixin( data.params )
+	if data.types.length == 1 && data.types[ 0 ] == 'function'
+		div.typedef-callback
+			if isNonEmptyArray( data.params )
+				h4.b-h4 Parameters
+				+paramsMixin( data.params )
 
-            if isNonEmptyArray( data.returns )
-                h4 Returns
-                dl
-                    each ret in data.returns
-                        +return( ret )
+			if isNonEmptyArray( data.returns )
+				h4.b-h4 Returns
+				dl
+					each ret in data.returns
+						+return( ret )
 
-            if isNonEmptyArray( data.see )
-                +related( data.see )
+			if isNonEmptyArray( data.see )
+				+related( data.see )
 
-    if data.firedBy
-        h2 Fired by
-        ul
-            each firedByItem in data.firedBy
-                li
-                    +linkOrText( firedByItem.url, { linkText: firedByItem.name } )
+	if data.firedBy
+		h2.b-h2 Fired by
+		ul
+			each firedByItem in data.firedBy
+				li
+					+linkOrText( firedByItem.url, { linkText: firedByItem.name } )
 
 //- Make sure to add the report issue widget at the end of the page.
 block append content
-    if page.reportIssueWidget
-        include ../_partial/report-issue-widget
+	if page.reportIssueWidget
+		// TODO: Add report issue widget.

package/themes/umberto/layout/gloria/_components/badge/_style.scss

@@ -0,0 +1,27 @@
+.c-badge {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: var(--spacing-5);
+	height: var(--spacing-5);
+	border-radius: var(--radius-full);
+	font-size: var(--font-size-xs);
+
+	&--premium {
+		background-color: var(--color-warning-100);
+		color: var(--color-warning-600);
+		border: 1px solid var(--color-warning-600);
+	}
+
+	&--status {
+		background-color: var(--color-success-100);
+		color: var(--color-success-600);
+		border: 1px solid var(--color-success-600);
+	}
+
+	&--experiment {
+		background-color: var(--color-cyan-50);
+		color: var(--color-cyan-600);
+		border: 1px solid var(--color-cyan-600);
+	}
+}

package/themes/umberto/layout/gloria/_components/badge/index.pug

@@ -0,0 +1,30 @@
+//- Badge component
+//-
+//- Examples:
+//- +badge({ variant: 'premium' })
+//- +badge({ variant: 'status' })
+//- +badge({ variant: 'experiment' })
+mixin badge({ variant, ariaLabel, tooltip })
+	-
+		const ariaLabelFallback = ariaLabel || `Badge with the ${variant} icon`;
+		const tooltipId = uRandomId( 'tooltip' );
+		const safeTooltip = tooltip || ({
+			premium: 'Premium feature',
+			status: 'New or updated content',
+			experiment: 'Experimental feature',
+		})[ variant ];
+
+	span.c-badge(
+		class={
+			[`c-badge--${ variant }`]: variant
+		},
+		role='status',
+		'aria-label'=ariaLabelFallback,
+		'aria-describedby'=tooltipId,
+	)
+		+svg-icon({ icon: variant, ariaHidden: true, className: 'badge__icon' })
+		+tooltip-popover({
+			id: tooltipId,
+			text: safeTooltip,
+			position: 'top'
+		})

package/themes/umberto/layout/gloria/_components/banner/_style.scss

@@ -0,0 +1,133 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+:root {
+	--banner-bg-color: hsl(270, 100%, 19%);
+	--banner-button-bg-color: hsl(77, 84%, 52%);
+	--banner-button-bg-color-hover: hsl(270, 100%, 28%);
+	--banner-button-border-color-hover: var(--banner-button-bg-color);
+	--banner-button-text-color-hover: var(--banner-button-bg-color);
+}
+
+.c-banner {
+	position: relative;
+	z-index: 1;
+	overflow: hidden;
+	background-color: var(--banner-bg-color);
+	margin: var(--spacing-9) 0;
+	padding: var(--spacing-8);
+	border-radius: var(--radius-1);
+	color: var(--color-common-white);
+
+	&--light {
+		background-color: var(--color-common-white);
+		color: var(--color-text-primary);
+		border: 1px solid transparent;
+		background-clip: padding-box, border-box;
+		background-origin: border-box;
+		background-image: linear-gradient(90deg, white, white),
+			linear-gradient(283.29deg, hsl(264, 100%, 55%) 3.84%, hsl(162, 70%, 49%) 47.87%, hsl(77, 76%, 52%) 98.54%);
+	}
+
+	&__headline {
+		display: inline-block;
+		margin-top: 0;
+		color: var(--color-common-white);
+		font-weight: var(--font-weight-bolder);
+		font-family: var(--font-family-heading);
+		font-size: var(--font-size-2xl);
+		line-height: var(--line-height-sm);
+
+		.c-banner--light & {
+			color: var(--color-common-black);
+		}
+
+		span {
+			background: linear-gradient(90deg, hsl(77, 84%, 52%) 60.96%, hsl(162, 72%, 50%) 106.5%);
+			background-clip: text;
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+
+			.c-banner--light & {
+				background: none;
+				color: var(--color-primary);
+				-webkit-text-fill-color: unset;
+			}
+		}
+	}
+
+	&__paragraph {
+		margin: 0;
+		color: var(--color-common-white);
+		font-size: var(--font-size-sm);
+
+		.c-banner--light & {
+			color: var(--color-common-black);
+
+			@include min-width($breakpoint-md) {
+				max-width: 70%;
+			}
+		}
+	}
+
+	&__buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--spacing-6);
+		margin-top: var(--spacing-8);
+		margin-bottom: 0;
+
+		.c-banner:not(.c-banner--light) & {
+			.c-button {
+				color: var(--banner-bg-color);
+				background-color: var(--banner-button-bg-color);
+				font-weight: var(--font-weight-bold);
+				border-color: var(--banner-button-bg-color);
+
+				&:hover {
+					color: var(--banner-button-text-color-hover);
+					background-color: transparent;
+					border-color: var(--banner-button-border-color-hover);
+				}
+			}
+		}
+	}
+
+	&__list {
+		margin: var(--spacing-2) 0;
+
+		&-item {
+			color: var(--color-common-white);
+			font-size: var(--font-size-sm);
+
+			&::marker {
+				color: var(--color-common-white);
+			}
+
+			&:not(:first-child) {
+				margin-top: var(--spacing-2);
+			}
+		}
+	}
+
+	.c-banner__background-image {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		z-index: -1;
+		pointer-events: none;
+	}
+
+	&:not(.c-banner--light) > * {
+		&:not(.hex-bg-wrapper) {
+			max-width: calc(100% + var(--spacing-8) - 312px); /* 312px is the width of the hexagon SVG. */
+
+			@include breakpoint-only($breakpoint-sm, $breakpoint-lg) {
+				max-width: calc(100% + var(--spacing-8) - 200px);
+			}
+
+			@include max-width($breakpoint-sm) {
+				max-width: 100%;
+			}
+		}
+	}
+}

package/themes/umberto/layout/gloria/_components/banner/index.pug

@@ -0,0 +1,3 @@
+mixin banner()
+	div.c-banner
+		block

package/themes/umberto/layout/gloria/_components/button/_style.scss

@@ -0,0 +1,183 @@
+@use "@gloria/a11y/_mixins.scss" as *;
+
+.c-button {
+	display: inline-flex;
+	margin: 0;
+	padding: var(--spacing-2) var(--spacing-4);
+	flex-direction: row;
+	align-items: center;
+	border-radius: var(--radius-1);
+	cursor: pointer;
+	user-select: none;
+	vertical-align: middle;
+	appearance: none;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: inherit;
+	font-family: inherit;
+	text-decoration: none;
+	text-align: center;
+
+	@include a11y-keyboard-focus-ring( true, false,
+		background-color var(--duration-normal) var(--cbuc-cubic-out),
+		color var(--duration-normal) var(--cbuc-cubic-out)
+	);
+
+	&.is-block {
+		display: flex;
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	&--xs {
+		height: 24px;
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-xs);
+	}
+
+	&--sm {
+		height: 32px;
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-xs);
+	}
+
+	&--base {
+		height: 40px;
+		font-size: var(--font-size-base);
+		line-height: var(--line-height-xs);
+	}
+
+	&--lg {
+		height: 48px;
+		font-size: var(--font-size-lg);
+		line-height: var(--line-height-xs);
+	}
+
+	&--square {
+		justify-content: center;
+		padding: var(--spacing-2);
+		aspect-ratio: 1;
+		min-width: 40px;
+
+		& .c-icon {
+			width: var(--font-size-base);
+			height: var(--font-size-base);
+		}
+	}
+
+	&--rounded {
+		border-radius: var(--radius-full);
+	}
+
+	&--primary {
+		border: 1px solid var(--color-primary-500);
+		background-color: var(--color-primary-500);
+		color: var(--color-common-white);
+		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.043);
+
+		&.is-active,
+		&:hover {
+			background-color: var(--color-primary-600);
+		}
+
+		&:active {
+			background-color: var(--color-primary-700);
+		}
+
+		&[disabled] {
+			&,
+			&:hover,
+			&:active {
+				background-color: var(--color-secondary-light-disabled);
+				color: var(--color-text-disabled);
+				border: 1px solid var(--color-secondary-light-disabled);
+			}
+		}
+	}
+
+	&--secondary {
+		color: var(--color-primary-500);
+		background-color: var(--color-common-white);
+		border: 1px solid var(--color-primary-500);
+		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
+
+		&.is-active,
+		&:hover {
+			background-color: var(--color-primary-100);
+		}
+
+		&:active {
+			background-color: var(--color-primary-200);
+		}
+
+		&[disabled] {
+			&,
+			&:hover,
+			&:active {
+				background-color: var(--color-secondary-100-disabled);
+				color: var(--color-secondary-400);
+				border: 1px solid var(--color-secondary-100-disabled);
+			}
+		}
+	}
+
+	&--toolbar {
+		color: var(--color-text-secondary);
+		border: 1px solid rgba(41, 52, 64, 0.2);
+		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
+		padding: var(--spacing-2) var(--spacing-3);
+
+		& .c-icon {
+			color: var(--color-fill-custom, --color-from-parameter);
+		}
+
+		&.is-active,
+		&:hover {
+			background-color: rgba(41, 52, 64, 0.08);
+			border: 1px solid rgba(41, 52, 64, 0.2);
+		}
+
+		&:active {
+			color: var(--color-text-primary);
+			background-color: rgba(41, 52, 64, 0.16);
+			border: 1px solid rgba(41, 52, 64, 0.3);
+		}
+
+		&[disabled] {
+			&,
+			&:hover,
+			&:active {
+				background-color: var(--color-secondary-100-disabled);
+				color: var(--color-secondary-400);
+				border: 1px solid var(--color-secondary-100-disabled);
+			}
+		}
+	}
+
+	&--transparent {
+		color: var(--color-fill-custom, --color-from-parameter);
+
+		&.is-active,
+		&:hover,
+		&:active {
+			color: var(--color-primary-500);
+		}
+
+		&[disabled] {
+
+			&,
+			&:hover,
+			&:active {
+				color: var(--color-secondary-light-disabled);
+			}
+		}
+	}
+
+	&--small-padding {
+		padding: var(--spacing-1) var(--spacing-2);
+	}
+}

package/themes/umberto/layout/gloria/_components/button/index.pug

@@ -0,0 +1,140 @@
+//- Button component
+//-
+//- Examples:
+//- +button({ label: 'Simple button' })
+//- +button({ label: 'Primary button', variant: 'primary' })
+//- +button({ label: 'Secondary button', variant: 'secondary' })
+//- +button({ label: 'With icon', icon: 'github' })
+//- +button({ label: 'Icon right', icon: 'github', iconPosition: 'right' })
+//- +button({ icon: 'github', square: true })
+//- +button({ icon: 'github', rounded: true })
+//- +button({ label: 'Disabled button', disabled: true })
+//- +button({ label: 'Extra small button', size: 'xs' })
+//- +button({ label: 'Small button', size: 'sm' })
+//- +button({ label: 'Base button', size: 'base' })
+//- +button({ label: 'Large button', size: 'lg' })
+//- +button({ variant: 'secondary' })
+//- +button({ variant: 'transparent', fillColor: '--color-orange-600' })
+//-   span Custom content
+mixin button({ variant = 'primary', tooltip, blockDisplay, active, disabled, id, className, square, rounded, type = 'button', size = 'base', label, ariaLabel, ariaControls, icon, labelClassName, iconClassName, fillColor, iconPosition = 'left' })
+	- const showTooltip = !!id && !!tooltip && !ariaLabel;
+
+	button.c-button(
+		id=id,
+		disabled=disabled,
+		class={
+			'is-block': blockDisplay,
+			'is-active': active,
+			[`c-button--${variant}`]: variant,
+			[`c-button--${size}`]: size,
+			'c-button--square': ((!block && !label && icon) || square),
+			'c-button--rounded': rounded
+		},
+		class=className,
+		type=type,
+		'aria-label'=ariaLabel || false,
+		'aria-labelledby'=showTooltip ? `${ id }-tooltip` : false,
+		'aria-controls'=ariaControls || false,
+		'aria-haspopup'=ariaControls ? 'true' : false,
+		'aria-expanded'=ariaControls ? 'false' : false,
+		'style'=fillColor ? '--color-fill-custom:var('+fillColor+')' : false
+	)&attributes(attributes)
+		if block
+			block
+		else
+			+_button-content({
+				label,
+				icon,
+				iconPosition,
+				labelClassName,
+				iconClassName,
+				ariaHidden: !!ariaLabel
+			})
+
+	if showTooltip
+		+tooltip-popover({
+			id: `${ id }-tooltip`,
+			text: tooltip,
+			position: 'top',
+			mode: 'hover'
+		})
+
+//- Button link component
+//-
+//- Examples:
+//- +button-link({ label: 'Link button', href: '#' })
+//- +button-link({ label: 'External link', href: 'https://example.com', target: '_blank' })
+//- +button-link({ label: 'Link with icon', icon: 'github', href: '#' })
+//- +button-link({ label: 'Secondary link', variant: 'secondary', href: '#' })
+//- +button-link({ icon: 'github', square: true, href: '#' })
+//- +button-link({ icon: 'github', rounded: true, href: '#' })
+//- +button-link({ href: '#', variant: 'primary' })
+//-   img(src='/path/to/image.png', alt='Custom image')
+mixin button-link({ variant = 'primary', tooltip, blockDisplay, active, disabled, id, className, square, rounded, size = 'base', label, ariaLabel, icon, labelClassName, iconClassName, fillColor, iconPosition = 'left', href, target, rel })
+	-
+		const finalHref = uParseHref( href, { path: page.path, projectName: page.projectName, BASE_PATH: page.BASE_PATH } )
+		const showTooltip = !!id && !!tooltip && !ariaLabel;
+
+	a.c-button(
+		id=id,
+		href=finalHref,
+		target=target,
+		rel=rel,
+		disabled=disabled,
+		class={
+			'is-block': blockDisplay,
+			'is-active': active,
+			[`c-button--${variant}`]: variant,
+			[`c-button--${size}`]: size,
+			'c-button--square': ((!block && !label && icon) || square),
+			'c-button--rounded': rounded
+		},
+		class=className,
+		'aria-label'=ariaLabel || false
+		'aria-labelledby'=showTooltip ? `${ id }-tooltip` : false
+		'style'=fillColor ? '--color-fill-custom:var('+fillColor+')' : false
+	)&attributes(attributes)
+		if block
+			block
+		else
+			+_button-content({
+				label,
+				icon,
+				iconPosition,
+				iconClassName,
+				ariaHidden: !!ariaLabel
+			})
+
+	if showTooltip
+		+tooltip-popover({
+			id: `${ id }-tooltip`,
+			text: tooltip,
+			position: 'top',
+			mode: 'hover'
+		})
+
+//- Button content mixin. It's designed to be part of the button, button-link and other mixins.
+//-
+//- Examples:
+//- +_button-content({ label: 'Button', icon: 'github' })
+//- +_button-content({ label: 'Button', icon: 'github', iconPosition: 'right' })
+mixin _button-content({ label, ariaHidden, icon, labelClassName, iconClassName, iconPosition = 'left' })
+	if icon && iconPosition === 'left'
+		+svg-icon({ icon, ariaHidden: true, className: iconClassName })
+		if label
+			+spacer({ x: 2 })
+
+	if !!label || !!icon
+		span.c-button__label(
+			aria-hidden=(ariaHidden ? 'true' : false),
+			class=labelClassName
+		)
+			= label
+
+			if !!label && !ariaHidden && icon
+				span.a11y-sr-only= ` (with ${icon} icon)`
+
+	if icon && iconPosition === 'right'
+		if label
+			+spacer({ x: 2 })
+		+svg-icon({ icon, ariaHidden: true, className: iconClassName })

package/themes/umberto/layout/gloria/_components/callout/_style.scss

@@ -0,0 +1,56 @@
+@use "@gloria/layout/_mixins.scss" as *;
+
+.c-callout {
+	--callout-variant-color: var(--color-primary-500);
+
+	position: relative;
+	margin: var(--spacing-7) auto;
+	border: var(--callout-variant-color) 2px solid;
+	border-radius: var(--radius-2);
+
+	&--info {
+		--callout-variant-color: var(--color-info-500);
+	}
+
+	&--warning {
+		--callout-variant-color: var(--color-warning-500);
+	}
+
+	&--rose {
+		--callout-variant-color: var(--color-rose-500);
+	}
+
+	&--blue {
+		--callout-variant-color: var(--color-blue-700);
+	}
+
+	&--success {
+		--callout-variant-color: var(--color-success-500);
+	}
+
+	&__title {
+		position: absolute;
+		left: calc(var(--font-size-lg) * -0.5 - 1px);
+		top: -0.75em;
+		padding-right: var(--spacing-2);
+		font-size: var(--font-size-lg);
+		font-weight: var(--font-weight-bold);
+		font-family: var(--font-family-heading);
+		background: var(--color-common-white);
+		color: var(--callout-variant-color);
+
+		.c-icon {
+			width: var(--font-size-lg);
+			height: var(--font-size-lg);
+		}
+	}
+
+	&__content {
+		padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-5);
+		color: var(--color-secondary-800);
+
+		> *:last-child {
+			margin-bottom: 0;
+		}
+	}
+}