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

package/scss/lib/button/_mixins.scss

@@ -0,0 +1,187 @@
+// button / _mixins
+@use 'variables' as *;
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+// Builds button
+@mixin uilib-button() {
+	.uilib-button {
+		position: relative;
+
+		display: inline-flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		width: 100%;
+		min-height: var(--uilib-spacing-1000); /* 40px */
+		padding: var(--uilib-spacing-200) var(--uilib-spacing-500); /* 8px 20px */
+
+		color: var(--uilib-button-primary-color);
+		font: var(--uilib-typography-label-medium);
+		text-align: center;
+		text-decoration: none;
+
+		border-radius: var(--uilib-button-radius);
+
+		background: var(--uilib-button-primary-bg-color);
+
+		cursor: pointer;
+
+		appearance: none;
+
+		@include uilib-breakpoint(xs) {
+			width: auto;
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			transition:
+				border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+				background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+				color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+				transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+		}
+
+		&::after {
+			position: absolute;
+			inset: -1px 0;
+			content: '';
+
+			display: block;
+		}
+
+		&:hover:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-primary-hover-bg-color);
+		}
+
+		&:focus-visible {
+			@include uilib-focus;
+		}
+
+		&:active:not(:disabled, .uilib-button--disabled) {
+			transform: scale(0.96);
+		}
+	}
+
+	.uilib-button__icon {
+		flex-shrink: 0;
+	}
+
+	.uilib-button__content {
+		flex-grow: 1;
+	}
+
+	.uilib-button--secondary {
+		padding: calc(var(--uilib-spacing-200) - var(--uilib-stroke-size-050)) calc(var(--uilib-spacing-500) - var(--uilib-stroke-size-050)); /* 6px 18px */
+
+		color: var(--uilib-button-secondary-color);
+
+		border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-button-secondary-color);
+
+		background: var(--uilib-button-secondary-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-secondary-hover-bg-color);
+		}
+	}
+
+	.uilib-button--tertiary {
+		color: var(--uilib-button-tertiary-color);
+
+		background: var(--uilib-button-tertiary-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-tertiary-hover-bg-color);
+		}
+	}
+
+	.uilib-button--promotion {
+		color: var(--uilib-button-promotion-color);
+
+		background: var(--uilib-button-promotion-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-promotion-hover-bg-color);
+		}
+	}
+
+	.uilib-button--search {
+		color: var(--uilib-button-search-color);
+
+		background: var(--uilib-button-search-bg-color);
+
+		&:hover:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-search-hover-bg-color);
+		}
+	}
+
+	.uilib-button:disabled,
+	.uilib-button--disabled {
+		color: var(--uilib-button-disabled-color);
+
+		border-color: var(--uilib-button-disabled-bg-color);
+
+		background: var(--uilib-button-disabled-bg-color);
+
+		cursor: default;
+	}
+
+	.uilib-button--large {
+		min-height: var(--uilib-spacing-1200); /* 48px */
+		padding: var(--uilib-spacing-200) var(--uilib-spacing-600); /* 8px 24px */
+
+		font: var(--uilib-typography-label-large);
+
+		&::after {
+			inset: 0;
+		}
+	}
+
+	.uilib-button--large.uilib-button--secondary {
+		padding: calc(var(--uilib-spacing-200) - var(--uilib-stroke-size-050)) calc(var(--uilib-spacing-600) - var(--uilib-stroke-size-050)); /* 6px 22px */
+	}
+
+	.uilib-button--width-restrict {
+		width: auto;
+	}
+}
+
+@mixin uilib-button-list() {
+	.uilib-button-list {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-200);
+
+		margin: var(--uilib-spacing-200) 0;
+		padding: 0;
+
+		list-style: none;
+
+		@include uilib-breakpoint(xs) {
+			flex-flow: row wrap;
+		}
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		& > li {
+			margin: 0;
+			padding: 0;
+
+			list-style: none;
+		}
+
+		&.uilib-button-list--center {
+			justify-content: center;
+		}
+
+		&.uilib-button-list--right {
+			justify-content: flex-end;
+		}
+	}
+}

package/scss/lib/button/_variables.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables/colors' as *;
+
+// Button specific variables to allow theming
+$uilib-button-variables: (
+	radius: var(--uilib-border-radius-pill),
+	primary-color: var(--uilib-color-text-inverse),
+	primary-bg-color: var(--uilib-color-core-interaction),
+	primary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-interaction'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	secondary-color: var(--uilib-color-core-interaction),
+	secondary-bg-color: var(--uilib-color-core-neutral),
+	secondary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
+	tertiary-color: var(--uilib-color-text-strong),
+	tertiary-bg-color: var(--uilib-color-core-brand),
+	tertiary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-brand'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	promotion-color: var(--uilib-color-text-inverse),
+	promotion-bg-color: var(--uilib-color-promotion),
+	promotion-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'promotion'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	search-color: var(--uilib-color-text-inverse),
+	search-bg-color: var(--uilib-color-core-brand-strong),
+	search-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-brand-strong'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	disabled-color: var(--uilib-color-other-disabled-strong),
+	disabled-bg-color: var(--uilib-color-other-disabled-soft),
+) !default;

package/scss/lib/cards/card/_index.scss

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

package/scss/lib/cards/card/_mixins.scss

@@ -0,0 +1,37 @@
+// Card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+
+// Builds card
+@mixin uilib-card() {
+	.uilib-card {
+		border-radius: var(--uilib-border-radius-400);
+
+		box-shadow: var(--uilib-elevation-0);
+
+		&--link:has(a:focus-visible, button:focus-visible) {
+			@include uilib-focus;
+
+			a {
+				box-shadow: none;
+			}
+
+			a::before,
+			button::before {
+				display: none;
+			}
+		}
+
+		&__content-container {
+			padding: var(--uilib-spacing-400);
+
+			background: var(--uilib-color-canvas-default);
+		}
+
+		&__supplementary-container {
+			padding: var(--uilib-spacing-200);
+
+			background: var(--uilib-color-canvas-contrast);
+		}
+	}
+}

package/scss/lib/cards/card/_variables.scss

@@ -0,0 +1,2 @@
+// Card specific variables to allow theming
+$uilib-card-variables: () !default;

package/scss/lib/cards/search/_index.scss

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

package/scss/lib/cards/search/_mixins.scss

@@ -0,0 +1,432 @@
+// Search card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+
+// Builds search card
+@mixin uilib-card-search() {
+	.uilib-card-search {
+		// container for query
+		container-name: uilib-card-search;
+		container-type: inline-size;
+
+		position: relative;
+
+		border-radius: var(--uilib-card-search-radius);
+
+		background: var(--uilib-color-canvas-default);
+
+		box-shadow: var(--uilib-elevation-0);
+
+		&__image-content {
+			grid-area: uilib-card-search-image;
+
+			position: relative;
+
+			display: grid;
+			grid-template:
+				'uilib-card-search-tags' auto
+				'uilib-card-search-media' min-content;
+			gap: var(--uilib-spacing-200);
+
+			width: 100%;
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-search-radius-spacing));
+
+			aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
+
+			.uilib-card-search__product-label,
+			.uilib-card-search__brand {
+				grid-area: uilib-card-search-tags;
+
+				position: relative;
+				z-index: 1;
+
+				place-self: start start;
+			}
+
+			.uilib-card-search__brand {
+				width: 4rem; /* 64 / 16 */
+				height: calc(4rem + var(--uilib-spacing-100)); /* 64 / 16 */
+				margin-top: calc(var(--uilib-spacing-300) * -1);
+				margin-left: calc(var(--uilib-card-search-radius-spacing) - var(--uilib-spacing-200));
+				padding-top: var(--uilib-spacing-100);
+
+				border-radius: 0 0 var(--uilib-border-radius-100) var(--uilib-border-radius-100);
+
+				background: var(--uilib-card-search-color-flagship);
+
+				overflow: hidden;
+			}
+
+			tui-uilib-image {
+				display: contents;
+			}
+
+			.uilib-card-search__image {
+				position: absolute;
+				inset: 0 auto 0 50%;
+
+				min-width: 100%;
+
+				border-radius: var(--uilib-card-search-radius) var(--uilib-card-search-radius) 0 0;
+
+				transform: translateX(-50%);
+
+				overflow: hidden;
+			}
+		}
+
+		&__media-buttons {
+			grid-area: uilib-card-search-media;
+
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: flex-end;
+
+			li {
+				flex-grow: 1;
+			}
+		}
+
+		li.uilib-card-search__quick-view {
+			flex-grow: 0;
+		}
+
+		&__content-container {
+			grid-area: uilib-card-search-content;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-card-search-radius-spacing) * -1);
+
+			border-radius: var(--uilib-card-search-radius);
+
+			box-shadow: var(--uilib-elevation-0);
+		}
+
+		&__main-content {
+			grid-area: uilib-card-search-content;
+
+			border-radius: var(--uilib-card-search-radius);
+
+			/* Adjust a white space to 8px */
+			.uilib-link:not(.uilib-tooltip__trigger) {
+				margin-left: calc(var(--uilib-spacing-200) - 1ex);
+			}
+		}
+
+		&__supplementary-container {
+			grid-area: uilib-card-search-supplementary;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-spacing-200) * -1);
+
+			border-radius: 0 0 var(--uilib-card-search-radius) var(--uilib-card-search-radius);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-search (min-width: 35rem) {
+			&__inner {
+				display: grid;
+				grid-template:
+					'uilib-card-search-image uilib-card-search-content' 1fr
+					'uilib-card-search-supplementary uilib-card-search-content' minmax(0, min-content) / 45% 55%;
+				align-content: start;
+				align-items: stretch;
+			}
+
+			&__image-content {
+				min-height: auto;
+				padding: var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-search-radius-spacing)) var(--uilib-spacing-200)
+					var(--uilib-spacing-200);
+
+				transform: none;
+
+				aspect-ratio: auto;
+
+				.uilib-card-search__image {
+					min-height: 100%;
+
+					border-radius: var(--uilib-card-search-radius) 0 0 var(--uilib-card-search-radius);
+				}
+
+				&:has(~ .uilib-card-search__content-container .uilib-card-search__supplementary-container) .uilib-card-search__image {
+					border-bottom-left-radius: 0;
+				}
+			}
+
+			&__content-container {
+				display: contents;
+			}
+
+			&__main-content {
+				position: relative;
+				z-index: 1;
+
+				display: flex;
+				flex-flow: column;
+
+				margin-top: 0;
+				margin-left: calc(var(--uilib-card-search-radius-spacing) * -1);
+
+				box-shadow: var(--uilib-elevation-0);
+			}
+
+			&__supplementary-container {
+				position: static;
+				z-index: 0;
+
+				align-self: start;
+
+				margin-top: 0;
+				padding-right: calc(var(--uilib-spacing-200) + var(--uilib-card-search-radius-spacing));
+
+				border-radius: 0;
+				border-bottom-left-radius: var(--uilib-card-search-radius);
+			}
+		}
+
+		&-room-info {
+			container-name: uilib-card-search-room;
+			container-type: inline-size;
+
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-100);
+
+			@container uilib-card-search-room (min-width: 15rem) {
+				&__item {
+					display: flex;
+					flex-flow: row nowrap;
+					gap: 1ex;
+
+					white-space: nowrap;
+				}
+
+				&__detail {
+					text-overflow: ellipsis;
+
+					overflow: hidden;
+				}
+			}
+		}
+
+		&-unit-details {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-200);
+
+			&__heading {
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-component-heading-small);
+
+				&:has(~ .uilib-card-search-unit-details__shortlist) {
+					padding-right: var(--uilib-spacing-900);
+				}
+			}
+
+			&__shortlist.uilib-icon-button {
+				position: absolute;
+				top: var(--uilib-spacing-200);
+				right: var(--uilib-spacing-200);
+
+				&:focus-visible {
+					position: absolute;
+				}
+			}
+
+			&__rating-list {
+				display: flex;
+				flex-flow: row wrap;
+				gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+				align-items: center;
+
+				li {
+					display: inline-flex;
+				}
+			}
+		}
+
+		&-unit-specifications {
+			display: flex;
+			flex-flow: column;
+			flex-grow: 1;
+			gap: var(--uilib-spacing-200);
+
+			margin-top: var(--uilib-spacing-200);
+
+			& > *,
+			& > ul {
+				margin: 0;
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-search (min-width: 35rem) {
+			&-unit-specifications {
+				margin-top: var(--uilib-spacing-300);
+				padding-top: var(--uilib-spacing-300);
+
+				border-top: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-card);
+			}
+		}
+
+		&-unit-price {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: flex-end;
+			align-items: start;
+
+			margin-top: var(--uilib-spacing-400);
+			padding-top: var(--uilib-spacing-400);
+
+			border-top: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-card);
+
+			&__price {
+				flex-grow: 1;
+			}
+
+			&__deposit {
+				width: 100%;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-label-small-strong);
+				text-align: right;
+			}
+		}
+
+		&__airline-logo {
+			display: inline-block;
+
+			height: 1rem;
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&-flagship-wrapper {
+			container-name: uilib-card-search-wrapper;
+			container-type: inline-size;
+
+			padding-top: var(--uilib-spacing-300);
+
+			border-radius: var(--uilib-card-search-radius);
+
+			background: var(--uilib-card-search-color-flagship);
+
+			box-shadow: var(--uilib-elevation-0);
+
+			.uilib-card-search {
+				box-shadow: none;
+			}
+		}
+
+		&-highlights {
+			position: relative;
+
+			display: block;
+
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-400);
+
+			color: var(--uilib-card-search-color-flagship-text);
+
+			&:defined {
+				padding-right: calc(var(--uilib-spacing-600) + 2.75rem); /* 8+4+44 / 16 */
+			}
+
+			&__list {
+				display: flex;
+				flex-flow: column;
+				gap: var(--uilib-spacing-200) var(--uilib-spacing-600);
+			}
+
+			&-item {
+				display: grid;
+				grid-template:
+					'icon title' 1fr
+					'icon description' auto
+					/ var(--uilib-icon-size-large) 1fr;
+				gap: 0 var(--uilib-spacing-200);
+				align-items: baseline;
+
+				&__icon {
+					grid-area: icon;
+				}
+
+				&__title {
+					grid-area: title;
+
+					align-self: center;
+
+					font: var(--uilib-typography-component-heading-small-strong);
+				}
+
+				&__description {
+					grid-area: description;
+
+					block-size: auto;
+
+					font: var(--uilib-typography-body-medium);
+
+					overflow: hidden;
+
+					@media (prefers-reduced-motion: no-preference) {
+						transition:
+							block-size var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out),
+							content-visibility var(--uilib-motion-duration-fast) allow-discrete;
+					}
+
+					&[aria-hidden='true'] {
+						block-size: 0;
+					}
+				}
+			}
+
+			&__button.uilib-icon-button {
+				position: absolute;
+				bottom: var(--uilib-spacing-200);
+				right: var(--uilib-spacing-200);
+
+				&:hover:not(:disabled, .uilib-icon-button--disabled) {
+					background: none;
+				}
+
+				&:focus-visible {
+					position: absolute;
+				}
+
+				&[aria-expanded='true'] .uilib-card-search-highlights__button-icon {
+					transform: rotate(180deg);
+				}
+			}
+
+			&__button-icon {
+				color: var(--uilib-card-search-color-flagship-text);
+				-webkit-mask-image: var(--uilib-card-search-highlights-icon);
+				mask-image: var(--uilib-card-search-highlights-icon);
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out);
+				}
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-card-search-wrapper (min-width: 35rem) {
+				&__list {
+					flex-flow: row nowrap;
+
+					padding-right: var(--uilib-spacing-400);
+				}
+
+				&__button.uilib-icon-button {
+					display: none;
+				}
+			}
+		}
+	}
+}

package/scss/lib/cards/search/_variables.scss

@@ -0,0 +1,10 @@
+@use '../../../variables/env-variables' as *;
+
+// Search card specific variables to allow theming
+$uilib-card-search-variables: (
+	radius: var(--uilib-border-radius-400),
+	radius-spacing: var(--uilib-spacing-400),
+	color-flagship: var(--uilib-color-core-brand-strong),
+	color-flagship-text: var(--uilib-color-text-inverse),
+	highlights-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/divider/_index.scss

@@ -0,0 +1,4 @@
+// divider / index
+@use 'variables' as *;
+@use 'mixins' as *;
+@include uilib-divider;