@tui/design-system 5.0.0-beta.4 → 5.0.0-beta.5

package/scss/lib/forms/textarea/_mixins.scss

@@ -0,0 +1,88 @@
+// textarea / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds textarea
+@mixin uilib-textarea() {
+	.uilib-textarea {
+		display: flex;
+		flex-direction: column;
+
+		max-width: 42.5rem; /* 680px / 16 */
+
+		border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-input);
+		border-radius: var(--uilib-border-radius-100);
+
+		background: var(--uilib-color-core-neutral);
+
+		&:focus-within {
+			@include uilib-focus;
+		}
+
+		&:has(textarea[aria-invalid='true']) {
+			border-color: var(--uilib-color-border-danger);
+		}
+
+		&:has(textarea:disabled) {
+			border-color: var(--uilib-color-border-input);
+
+			background: var(--uilib-color-other-disabled-soft);
+		}
+
+		textarea {
+			flex: 1;
+
+			width: 100%;
+			min-width: 0;
+			min-height: 4rem; /* 38px / 16 */
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-300);
+
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-medium);
+
+			border: 0;
+			border-radius: var(--uilib-border-radius-100);
+
+			background: transparent;
+
+			appearance: none;
+			resize: none;
+
+			/* Edge legacy */
+			-ms-overflow-style: initial;
+
+			scrollbar-width: thin;
+
+			scrollbar-color: var(--uilib-scroller-thumb-color) transparent;
+
+			&:focus::before,
+			&:focus-visible::before {
+				display: none; /* Fix for iOS and Android double focus */
+			}
+
+			&:focus-visible::before {
+				display: none;
+			}
+
+			&::-webkit-scrollbar-button {
+				display: none;
+
+				width: 0;
+				height: 0;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				border: var(--uilib-spacing-100) solid transparent;
+				border-radius: var(--uilib-scroller-thumb-radius);
+
+				background-color: var(--uilib-scroller-thumb-color);
+				background-clip: padding-box;
+
+				cursor: pointer;
+			}
+		}
+	}
+}

package/scss/lib/hero/_index.scss

@@ -0,0 +1,3 @@
+// hero / index
+@use 'mixins' as *;
+@include uilib-hero;

package/scss/lib/hero/_mixins.scss

@@ -0,0 +1,336 @@
+// hero / _mixins
+@use 'sass:map';
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+@use '../../variables/breakpoints' as *;
+
+// Builds hero
+@mixin uilib-hero() {
+	$hero-image-height: 21.063rem; /* 337 / 16 */
+	$hero-image-slim-height: 15.4375rem; /* 247 / 16 */
+	$hero-height-medium: 39.5rem; /* 632 / 16 */
+	$hero-height-slim-medium: 25rem; /* 400 / 16 */
+	$hero-height-large: 34.375rem; /* 550 / 16 */
+	$hero-height-slim-large: 24.375rem; /* 390 / 16 */
+	$hero-content-width: 18.5rem; /* 296 / 16 */
+	$hero-content-center-width: 42.188rem; /* 675 / 16 */
+
+	.uilib-hero {
+		position: relative;
+
+		container-type: inline-size;
+		container-name: uilib-hero;
+
+		&__image.uilib-image {
+			position: absolute;
+			inset: auto auto 0 50%;
+
+			min-width: 100%;
+			min-height: #{$hero-image-height};
+
+			background-size: min(60%, 30rem);
+
+			transform: translateX(-50%);
+
+			mask-image: var(--uilib-hero-image-mask);
+			mask-size: cover;
+			mask-repeat: no-repeat;
+			mask-position: center bottom;
+		}
+
+		&__inner {
+			position: relative;
+
+			max-width: var(--uilib-layout-max-width);
+			margin: 0 auto;
+			padding-bottom: calc(#{$hero-image-height} - var(--uilib-hero-image-mask-height-small));
+		}
+
+		&__content {
+			position: relative;
+
+			max-width: 100%;
+			padding: var(--uilib-spacing-800);
+			box-sizing: content-box;
+
+			color: var(--uilib-hero-content-text-color);
+			font: var(--uilib-typography-component-heading-xlarge);
+			text-align: center;
+
+			border-radius: var(--uilib-hero-content-radius) var(--uilib-hero-content-radius) 0 0;
+
+			mask-image: var(--uilib-hero-image-mask);
+			mask-size: cover;
+			mask-repeat: no-repeat;
+			mask-position: center bottom;
+
+			background: var(--uilib-hero-content-bg-small);
+		}
+
+		&__heading {
+			margin-bottom: var(--uilib-spacing-200);
+
+			font: var(--uilib-typography-display-small);
+
+			strong {
+				font: var(--uilib-typography-display-large);
+			}
+		}
+
+		&__caveat {
+			margin-top: var(--uilib-spacing-200);
+
+			font: var(--uilib-typography-body-small-strong);
+		}
+
+		em {
+			color: var(--uilib-hero-content-text-highlight-color);
+			font-style: normal;
+		}
+
+		&__button {
+			display: inline-block;
+
+			margin-top: var(--uilib-spacing-800);
+
+			border-radius: var(--uilib-button-radius);
+
+			&::after {
+				position: absolute;
+				inset: 0;
+				content: '';
+
+				display: block;
+			}
+
+			&:focus-visible {
+				position: static;
+
+				&::before {
+					display: none;
+				}
+
+				.uilib-button {
+					@include uilib-focus();
+				}
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--center {
+			.uilib-hero__image.uilib-image {
+				inset: 0 auto 0 50%;
+
+				height: 100%;
+
+				border-radius: var(--uilib-hero-image-radius-small);
+
+				background-image: none;
+			}
+
+			.uilib-hero__inner {
+				padding-top: var(--uilib-spacing-400);
+				padding-right: var(--uilib-spacing-400);
+				padding-left: var(--uilib-spacing-400);
+			}
+
+			.uilib-hero__content {
+				padding: var(--uilib-spacing-600);
+
+				border-radius: var(--uilib-hero-content-radius);
+
+				background: var(--uilib-hero-content-bg);
+
+				mask-image: none;
+			}
+		}
+
+		&--flagship {
+			.uilib-hero__content {
+				color: var(--uilib-hero-flagship-content-text-color);
+
+				background: var(--uilib-hero-flagship-content-bg-small);
+			}
+
+			em {
+				color: var(--uilib-hero-flagship-content-text-highlight-color);
+			}
+		}
+
+		&--illustration {
+			.uilib-hero__image.uilib-image {
+				inset: 0 auto 0 50%;
+
+				min-height: 100%;
+
+				border-radius: var(--uilib-hero-image-radius-small);
+
+				background-image: none;
+
+				@container uilib-hero (max-width: #{map.get($uilib-breakpoints, xs)}) {
+					img {
+						object-position: bottom center;
+					}
+				}
+			}
+
+			.uilib-hero__content {
+				background: transparent;
+			}
+
+			.uilib-hero__caveat {
+				margin-top: var(--uilib-spacing-200);
+
+				font: var(--uilib-typography-body-small);
+			}
+		}
+
+		&--slim {
+			.uilib-hero__image.uilib-image {
+				min-height: #{$hero-image-slim-height};
+			}
+
+			.uilib-hero__inner {
+				padding-bottom: calc(#{$hero-image-slim-height} - var(--uilib-hero-image-mask-height-small));
+			}
+
+			.uilib-hero__content {
+				font: var(--uilib-typography-label-medium);
+			}
+		}
+
+		&--reduced {
+			min-height: 0;
+
+			.uilib-hero__image.uilib-image {
+				display: none;
+			}
+
+			.uilib-hero__inner {
+				padding-bottom: 0;
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@include uilib-container-breakpoint(xs, 'uilib-hero') {
+			&__image.uilib-image {
+				height: 100%;
+
+				border-radius: var(--uilib-hero-image-radius-large);
+			}
+
+			&__inner {
+				display: flex;
+				flex-flow: row nowrap;
+				justify-content: flex-start;
+				align-items: flex-start;
+
+				min-height: #{$hero-height-medium};
+				padding: var(--uilib-spacing-600) var(--uilib-spacing-1600) var(--uilib-spacing-1200);
+			}
+
+			&__content {
+				width: #{$hero-content-width};
+				padding: var(--uilib-spacing-600) var(--uilib-spacing-800);
+
+				text-align: left;
+
+				border-radius: var(--uilib-hero-content-radius);
+
+				mask: none;
+
+				background: var(--uilib-hero-content-bg);
+			}
+
+			&__heading {
+				font: var(--uilib-typography-heading-xxlarge);
+
+				strong {
+					font: var(--uilib-typography-display-small);
+				}
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&--right {
+				.uilib-hero__inner {
+					justify-content: flex-end;
+				}
+			}
+
+			&--center {
+				.uilib-hero__image.uilib-image {
+					border-radius: var(--uilib-hero-image-radius-large);
+				}
+
+				.uilib-hero__inner {
+					justify-content: center;
+				}
+
+				.uilib-hero__content {
+					width: #{$hero-content-center-width};
+					padding: var(--uilib-spacing-800);
+
+					text-align: center;
+
+					border-radius: var(--uilib-border-radius-1000) var(--uilib-border-radius-1000) var(--uilib-border-radius-1800)
+						var(--uilib-border-radius-1800);
+				}
+			}
+
+			&--flagship {
+				.uilib-hero__content {
+					background: var(--uilib-hero-flagship-content-bg);
+				}
+			}
+
+			&--illustration {
+				.uilib-hero__image.uilib-image {
+					border-radius: var(--uilib-hero-image-radius-large);
+
+					background-position: center;
+				}
+
+				&__heading {
+					font: var(--uilib-typography-heading-small);
+
+					strong {
+						font: var(--uilib-typography-display-large);
+					}
+				}
+			}
+
+			&--slim {
+				.uilib-hero__image.uilib-image {
+					min-height: 100%;
+				}
+
+				.uilib-hero__inner {
+					min-height: #{$hero-height-slim-medium};
+					padding-bottom: var(--uilib-spacing-1200);
+				}
+			}
+
+			&--reduced {
+				.uilib-hero__image.uilib-image {
+					display: block;
+				}
+
+				.uilib-hero__inner {
+					padding-bottom: var(--uilib-spacing-1200);
+				}
+			}
+		}
+
+		@include uilib-container-breakpoint(sm, 'uilib-hero') {
+			&__inner {
+				min-height: #{$hero-height-large};
+				padding: var(--uilib-spacing-600) 10rem var(--uilib-spacing-1200); /* 160 / 16 */
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&--slim &__inner {
+				min-height: #{$hero-height-slim-large};
+			}
+		}
+	}
+}

package/scss/lib/hero/_variables.scss

@@ -0,0 +1,21 @@
+@use 'sass:color';
+@use '../../variables/env-variables' as *;
+
+// Hero specific variables to allow theming
+$uilib-hero-variables: (
+	image-radius-small: var(--uilib-border-radius-600) var(--uilib-border-radius-600) 0 0,
+	image-radius-large: var(--uilib-border-radius-1800) var(--uilib-border-radius-1800) 0 0,
+	image-mask:
+		url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NzM4IiB2aWV3Qm94PSIwIDAgMTkyMCA2NzM4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjAwN18yKSI+CjxwYXRoIGQ9Ik0xOTIwIDY1NzUuNDJWMEgwVjY1NzUuMDZDMjg4LjQzNSA2Njc5LjI3IDYxNC44MjIgNjczOCA5NjAuNSA2NzM4QzEzMDUuNzggNjczOCAxNjMxLjgxIDY2NzkuNCAxOTIwIDY1NzUuNDJaIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjAwN18yIj4KPHJlY3Qgd2lkdGg9IjE5MjAiIGhlaWdodD0iNjczOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K),
+	image-mask-height-small: var(--uilib-spacing-1200),
+	image-mask-height-large: var(--uilib-spacing-1600),
+	content-radius: var(--uilib-border-radius-600),
+	content-bg-small: var(--uilib-color-core-surface),
+	content-bg: color-mix(in srgb, var(--uilib-color-core-neutral) 90%, transparent),
+	content-text-color: var(--uilib-color-text-strong),
+	content-text-highlight-color: var(--uilib-color-text-promotion),
+	flagship-content-bg-small: var(--uilib-color-core-brand-strong),
+	flagship-content-bg: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent),
+	flagship-content-text-color: var(--uilib-color-text-inverse),
+	flagship-content-text-highlight-color: var(--uilib-color-text-inverse),
+) !default;

package/scss/lib/image/_mixins.scss

@@ -44,6 +44,46 @@
 			font-size: 0;
 
 			object-fit: cover;
+			object-position: center;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--focus {
+			&-top-left img {
+				object-position: top left;
+			}
+
+			&-top-center img {
+				object-position: top center;
+			}
+
+			&-top-right img {
+				object-position: top right;
+			}
+
+			&-center-left img {
+				object-position: center left;
+			}
+
+			&-center img {
+				object-position: center;
+			}
+
+			&-center-right img {
+				object-position: center right;
+			}
+
+			&-bottom-left img {
+				object-position: bottom left;
+			}
+
+			&-bottom-center img {
+				object-position: bottom center;
+			}
+
+			&-bottom-right img {
+				object-position: bottom right;
+			}
 		}
 	}
 }

package/scss/lib/media-button/_mixins.scss

@@ -12,7 +12,7 @@
 
 		background: var(--uilib-button-secondary-bg-color);
 
-		box-shadow: var(--uilib-elevation-0);
+		box-shadow: var(--uilib-elevation-100);
 
 		// Ensure min hit target is 44px
 		&::after {

package/scss/lib/pagination/_mixins.scss

@@ -197,7 +197,7 @@
 				}
 
 				.uilib-link__label {
-					@include uilib-visually-hidden();
+					@include uilib-visually-hidden;
 				}
 			}
 

package/scss/lib/ratings-reviews/percentage/_mixins.scss

@@ -68,7 +68,7 @@
 		}
 
 		&__visually-hidden {
-			@include uilib-visually-hidden();
+			@include uilib-visually-hidden;
 		}
 	}
 }

package/scss/lib/show-more-less/_mixins.scss

@@ -61,7 +61,7 @@
 	}
 
 	.uilib-show-more-less__icon {
-		--webkit-mask-image: var(--uilib-show-more-less-icon);
+		-webkit-mask-image: var(--uilib-show-more-less-icon);
 		mask-image: var(--uilib-show-more-less-icon);
 
 		transform: rotate(0deg);

package/scss/mixins.scss

@@ -7,6 +7,7 @@
 @forward 'lib/cards/card/mixins';
 @forward 'lib/cards/search/mixins';
 @forward 'lib/divider/mixins';
+@forward 'lib/flight-details/mixins';
 @forward 'lib/flyout-dropdown/mixins';
 @forward 'lib/forms/form-row/mixins';
 @forward 'lib/forms/input-checkbox/mixins';
@@ -14,8 +15,10 @@
 @forward 'lib/forms/input-count/mixins';
 @forward 'lib/forms/input-radio/mixins';
 @forward 'lib/forms/input-slider/mixins';
+@forward 'lib/forms/input-switch/mixins';
 @forward 'lib/forms/input-text/mixins';
 @forward 'lib/grid/mixins';
+@forward 'lib/hero/mixins';
 @forward 'lib/icon/mixins';
 @forward 'lib/icon-button/mixins';
 @forward 'lib/image/mixins';

package/scss/themes/crystalski/_overrides.scss

@@ -10,8 +10,9 @@
 $uilib-crystalski-font-families: map.merge(
 	$uilib-font-families,
 	(
-		'lead': $uilib-font-family-brandon,
-		'base': $uilib-font-family-brandon,
+		'display': #{$uilib-font-family-brandon},
+		'lead': #{$uilib-font-family-brandon},
+		'base': #{$uilib-font-family-brandon},
 	)
 );
 $uilib-crystalski-font-weight: map.merge(
@@ -108,6 +109,14 @@ $uilib-crystalski-card-search-variables: map.merge(
 	)
 );
 
+// Flight details
+$uilib-crystalski-flight-details-variables: map.merge(
+	$uilib-flight-details-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-down.svg'),
+	)
+);
+
 // Form row
 $uilib-crystalski-form-row-variables: map.merge(
 	$uilib-form-row-variables,

package/scss/themes/crystalski/fonts.json

@@ -26,5 +26,24 @@
 		"display": "swap",
 		"weight": "400",
 		"style": "normal"
+	},
+	{
+		"weight": "400 700",
+		"family": "BrandonFallbackFont",
+		"src": "local('verdana')",
+		"sizeAdjust": "85.5%",
+		"ascentOverride": "110.8%",
+		"descentOverride": "31.7%",
+		"lineGapOverride": "19.1%"
+	},
+	{
+		"weight": "400 700",
+		"family": "BrandonFallbackFont",
+		"style": "italic",
+		"src": "local('verdana italic')",
+		"sizeAdjust": "85.5%",
+		"ascentOverride": "110.8%",
+		"descentOverride": "31.7%",
+		"lineGapOverride": "19.1%"
 	}
 ]

package/scss/themes/crystalski/index.scss

@@ -74,6 +74,9 @@
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-crystalski-card-search-variables);
 
+	// Flight details
+	@include util.uilib-build-css-vars('flight-details', $uilib-crystalski-flight-details-variables);
+
 	// Form row
 	@include util.uilib-build-css-vars('form-row', $uilib-crystalski-form-row-variables);
 
@@ -95,9 +98,15 @@
 	// Form input slider
 	@include util.uilib-build-css-vars('input-slider', $uilib-input-slider-variables);
 
+	// Form input switch
+	@include util.uilib-build-css-vars('input-switch', $uilib-input-switch-variables);
+
 	// Form input text
 	@include util.uilib-build-css-vars('input-text', $uilib-crystalski-input-text-variables);
 
+	// Hero
+	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-crystalski-icon-button-variables);
 

package/scss/themes/crystalski/theme.json

@@ -217,7 +217,7 @@
 			"info-tag-text-color": {
 				"primitive": "uilib-color-text-body"
 			},
-			"local-product-bg-color": {
+			"info-tag-local-product-bg-color": {
 				"primitive": "uilib-color-canvas-contrast"
 			}
 		}

package/scss/themes/firstchoice/_overrides.scss

@@ -10,8 +10,9 @@
 $uilib-firstchoice-font-families: map.merge(
 	$uilib-font-families,
 	(
-		'base': $uilib-font-family-rondelle,
-		'lead': $uilib-font-family-pastichegrotesque,
+		'display': #{$uilib-font-family-pastichegrotesque},
+		'lead': #{$uilib-font-family-pastichegrotesque},
+		'base': #{$uilib-font-family-rondelle},
 	)
 );
 
@@ -166,6 +167,14 @@ $uilib-firstchoice-card-search-variables: map.merge(
 	)
 );
 
+// Flight details
+$uilib-firstchoice-flight-details-variables: map.merge(
+	$uilib-flight-details-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
+	)
+);
+
 // Form row
 $uilib-firstchoice-form-row-variables: map.merge(
 	$uilib-form-row-variables,

package/scss/themes/firstchoice/fonts.json

@@ -19,5 +19,32 @@
 		"display": "swap",
 		"weight": "400",
 		"style": "normal"
+	},
+	{
+		"weight": "400 900",
+		"family": "PasticheGrotesqueFallbackFont",
+		"src": "local('arial black')",
+		"sizeAdjust": "92%",
+		"ascentOverride": "95.5%",
+		"descentOverride": "22.6%",
+		"lineGapOverride": "12.7%"
+	},
+	{
+		"weight": "400",
+		"family": "RondelleFallbackFont",
+		"src": "local('verdana')",
+		"sizeAdjust": "95%",
+		"ascentOverride": "81.6%",
+		"descentOverride": "23.2%",
+		"lineGapOverride": "24%"
+	},
+	{
+		"weight": "700 900",
+		"family": "RondelleFallbackFont",
+		"src": "local('arial black')",
+		"sizeAdjust": "90%",
+		"ascentOverride": "81.5%",
+		"descentOverride": "30.1%",
+		"lineGapOverride": "25.3%"
 	}
 ]