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

package/scss/lib/pagination/_mixins.scss

@@ -0,0 +1,220 @@
+// pagination / _mixins
+@use '../utility/mixins' as *;
+@use '../grid/mixins' as *;
+
+/// Pagination component styles
+/// @group Pagination
+@mixin uilib-pagination {
+	.uilib-pagination__container {
+		// container for query
+		container-name: uilib-pagination;
+		container-type: inline-size;
+
+		margin: var(--uilib-spacing-1100) 0;
+	}
+
+	.uilib-pagination {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-100);
+		justify-content: center;
+		align-items: center;
+
+		@container uilib-pagination (max-width: 30rem) {
+			flex-wrap: wrap;
+			gap: var(--uilib-spacing-050);
+
+			& > * {
+				// align buttons on small screens
+				display: flex;
+			}
+		}
+
+		// Page number buttons
+		&__page {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+
+			width: var(--uilib-spacing-1100);
+			height: var(--uilib-spacing-1100);
+
+			color: var(--uilib-pagination-text-color);
+			font-weight: var(--uilib-font-weight-bold);
+			text-decoration: none;
+
+			border: none;
+			border-radius: var(--uilib-pagination-border-radius);
+
+			background-color: transparent;
+
+			cursor: pointer;
+
+			appearance: none;
+
+			// Selected page
+			&--selected {
+				color: var(--uilib-color-text-inverse);
+
+				background-color: var(--uilib-pagination-selected-bg);
+
+				pointer-events: none;
+			}
+
+			@container uilib-pagination (max-width: 23.5rem) {
+				width: var(--uilib-spacing-900);
+				height: var(--uilib-spacing-900);
+			}
+
+			@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);
+			}
+
+			&:focus-visible {
+				@include uilib-focus;
+			}
+
+			&:not(.uilib-pagination__page--selected) {
+				&:hover {
+					background-color: var(--uilib-pagination-hover-bg);
+				}
+
+				&:focus-visible::before {
+					--size: calc(100% - calc(var(--uilib-focus-size) * 2));
+					--position: var(--uilib-focus-size);
+
+					top: var(--position);
+					left: var(--position);
+
+					width: var(--size);
+					height: var(--size);
+				}
+			}
+		}
+
+		// Ellipsis
+		&__ellipsis {
+			$ellipsis-content: '\2026';
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+
+			width: auto;
+			height: var(--uilib-spacing-1100);
+			margin: 0 calc(-1 * var(--uilib-spacing-050));
+
+			color: var(--uilib-pagination-text-color);
+			font-weight: var(--uilib-font-weight-bold);
+
+			@container uilib-pagination (max-width: 23.5rem) {
+				height: var(--uilib-spacing-900);
+			}
+
+			&::after {
+				content: $ellipsis-content;
+
+				display: block;
+			}
+		}
+
+		// Extra specificity required to ensure override link styles
+		.uilib-pagination__control {
+			position: relative;
+
+			display: inline-flex;
+			align-items: center;
+
+			&--prev::after {
+				--icon-url: var(--uilib-pagination-icon-prev);
+				margin-right: var(--uilib-spacing-050);
+
+				@container uilib-pagination (max-width: 30rem) {
+					margin: 0;
+				}
+			}
+
+			&--next::after {
+				--icon-url: var(--uilib-pagination-icon-next);
+				margin-left: var(--uilib-spacing-050);
+
+				@container uilib-pagination (max-width: 30rem) {
+					margin: 0;
+				}
+			}
+
+			@container uilib-pagination (max-width: 30rem) {
+				color: var(--uilib-pagination-icon-color);
+
+				border-radius: var(--uilib-pagination-border-radius);
+
+				@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);
+				}
+
+				&::after {
+					content: '';
+
+					display: inline-block;
+
+					width: var(--uilib-spacing-1100);
+					height: var(--uilib-spacing-1100);
+
+					background-color: currentcolor;
+					-webkit-mask-repeat: no-repeat;
+					mask-repeat: no-repeat;
+					-webkit-mask-position: center;
+					mask-position: center;
+					-webkit-mask-size: 1.5rem;
+					mask-size: 1.5rem;
+
+					@container uilib-pagination (max-width: 23.5rem) {
+						width: var(--uilib-spacing-900);
+						height: var(--uilib-spacing-900);
+					}
+				}
+
+				&:hover {
+					background-color: var(--uilib-pagination-hover-bg);
+				}
+
+				&:focus-visible {
+					margin: 0;
+
+					border: 0;
+					border-radius: var(--uilib-pagination-border-radius);
+
+					box-shadow: none;
+
+					&::before {
+						display: block;
+					}
+				}
+
+				.uilib-link__label {
+					@include uilib-visually-hidden;
+				}
+			}
+
+			&::after {
+				-webkit-mask-image: var(--icon-url);
+				mask-image: var(--icon-url);
+
+				display: none;
+
+				@container uilib-pagination (max-width: 30rem) {
+					display: inline-flex;
+				}
+			}
+
+			&:visited {
+				color: var(--uilib-color-text-link);
+			}
+		}
+	}
+}

package/scss/lib/pagination/_variables.scss

@@ -0,0 +1,12 @@
+@use '../../variables/env-variables' as *;
+
+// Pagination specific variables to allow theming
+$uilib-pagination-variables: (
+	text-color: var(--uilib-color-text-body),
+	border-radius: var(--uilib-icon-button-radius),
+	icon-color: var(--uilib-icon-button-ghost-color),
+	selected-bg: var(--uilib-icon-button-ghost-color),
+	hover-bg: var(--uilib-icon-button-ghost-hover-bg-color),
+	icon-prev: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-left.svg'),
+	icon-next: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+) !default;

package/scss/lib/price/_index.scss

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

package/scss/lib/price/_mixins.scss

@@ -0,0 +1,83 @@
+// price / _mixins
+@use '../utility/mixins' as *;
+
+// Price component mixin
+@mixin uilib-price() {
+	// Base price container
+	.uilib-price {
+		color: var(--uilib-price-color);
+		font: var(--uilib-price-font-secondary);
+
+		&__hidden {
+			@include uilib-visually-hidden;
+		}
+
+		// Content container
+		&__content {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 var(--uilib-spacing-200);
+			align-items: baseline;
+		}
+
+		// Prefix element
+		&__prefix {
+			margin-right: var(--uilib-spacing-050);
+
+			font: var(--uilib-price-font-primary);
+		}
+
+		// Currency element
+		&__currency,
+		&__main-unit,
+		&__sub-unit,
+		&__suffix {
+			font: var(--uilib-price-font-primary);
+			font-weight: var(--uilib-font-weight-bold);
+		}
+
+		&__prefix,
+		&__currency,
+		&__main-unit,
+		&__sub-unit,
+		&__suffix {
+			&:not(:first-child) {
+				margin-left: calc(var(--uilib-spacing-200) * -1);
+			}
+		}
+
+		// Original price element
+		&__original-price {
+			text-decoration: line-through;
+		}
+
+		// Discount element
+		&__discount {
+			color: var(--uilib-price-discount-color);
+			font-weight: var(--uilib-font-weight-bold);
+		}
+
+		&__total {
+			margin-top: calc(-1 * var(--uilib-spacing-100));
+		}
+	}
+
+	// Medium size variant
+	.uilib-price--medium {
+		.uilib-price__main-unit {
+			font: var(--uilib-price-font-main-medium);
+		}
+	}
+
+	// Large size variant
+	.uilib-price--large {
+		.uilib-price__main-unit {
+			font: var(--uilib-price-font-main-large);
+		}
+
+		.uilib-price__sub-unit,
+		.uilib-price__suffix {
+			font: var(--uilib-price-font-sub-large);
+		}
+	}
+}

package/scss/lib/price/_variables.scss

@@ -0,0 +1,10 @@
+// price specific variables to allow theming
+$uilib-price-variables: (
+	color: var(--uilib-color-text-strong),
+	font-primary: var(--uilib-typography-component-heading-medium),
+	font-secondary: var(--uilib-typography-body-large),
+	discount-color: var(--uilib-color-promotion),
+	font-main-medium: var(--uilib-typography-component-heading-xlarge-strong),
+	font-main-large: var(--uilib-typography-component-heading-xxlarge-strong),
+	font-sub-large: var(--uilib-typography-component-heading-medium-strong),
+) !default;

package/scss/lib/promo-tag/_index.scss

@@ -0,0 +1,4 @@
+// promo tag / index
+@use 'mixins' as *;
+@include uilib-promo-tag;
+@include uilib-promo-tag-list;

package/scss/lib/promo-tag/_mixins.scss

@@ -0,0 +1,81 @@
+// promo-tag / _mixins
+@use '../utility/mixins' as *;
+
+// Builds promo-tag
+@mixin uilib-promo-tag() {
+	.uilib-promo-tag {
+		display: flex;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		max-width: fit-content;
+		padding: var(--uilib-spacing-100);
+
+		/* Label/Medium */
+		color: var(--uilib-promo-tag-color);
+		font: var(--uilib-promo-tag-font);
+		text-wrap: wrap;
+
+		&--filled {
+			min-height: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
+			padding: var(--uilib-spacing-100) var(--uilib-spacing-300) var(--uilib-spacing-100) var(--uilib-spacing-200);
+
+			border-radius: var(--uilib-promo-tag-radius);
+
+			background-color: var(--uilib-promo-tag-bg-color);
+		}
+
+		&--filled.uilib-promo-tag--circle-icon {
+			padding-left: var(--uilib-spacing-100);
+		}
+
+		&__icon {
+			flex-shrink: 0;
+			align-self: flex-start;
+			aspect-ratio: 1 / 1;
+
+			margin-top: calc(var(--uilib-spacing-50) * 0.75); /* 1.5px / 16px */
+		}
+
+		&__hidden {
+			@include uilib-visually-hidden;
+		}
+	}
+
+	.uilib-promo-tag--filled .uilib-promo-tag__icon {
+		margin-top: var(--uilib-spacing-100);
+	}
+
+	.uilib-promo-tag--circle-icon .uilib-promo-tag__icon {
+		margin: 0;
+	}
+}
+
+@mixin uilib-promo-tag-list() {
+	.uilib-promo-tag-list {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200) var(--uilib-spacing-100);
+		align-items: center;
+
+		margin: var(--uilib-spacing-200) 0;
+		padding: 0;
+
+		list-style: none;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		& > li {
+			margin: 0;
+			padding: 0;
+
+			list-style: none;
+		}
+	}
+}

package/scss/lib/promo-tag/_variables.scss

@@ -0,0 +1,7 @@
+// Promo tag specific variables to allow theming
+$uilib-promo-tag-variables: (
+	radius: var(--uilib-border-radius-400),
+	color: var(--uilib-color-text-strong),
+	bg-color: var(--uilib-color-core-neutral),
+	font: var(--uilib-typography-label-small),
+) !default;

package/scss/lib/ratings-reviews/numerical/_index.scss

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

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

@@ -0,0 +1,91 @@
+// rating numerical / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds rating numerical
+@mixin uilib-ratings-numerical() {
+	.uilib-ratings-numerical {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		color: var(--uilib-ratings-numerical-color);
+		font: var(--uilib-ratings-numerical-font);
+
+		&--inverse {
+			color: var(--uilib-ratings-numerical-color-inverse);
+		}
+
+		&--filter &__score::before {
+			display: none;
+		}
+
+		&__score {
+			display: inline-flex;
+			gap: var(--uilib-spacing-100);
+			justify-content: center;
+			align-items: center;
+
+			min-height: var(--uilib-spacing-600);
+			padding: var(--uilib-spacing-100) var(--uilib-spacing-200);
+
+			font: var(--uilib-ratings-numerical-font-score);
+
+			&::before {
+				content: '';
+
+				display: block;
+
+				width: var(--uilib-icon-size-xsmall);
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+				background-repeat: no-repeat;
+				background-position: center center;
+				background-size: contain;
+				-webkit-mask-repeat: no-repeat;
+				mask-repeat: no-repeat;
+				-webkit-mask-position: center;
+				mask-position: center;
+				-webkit-mask-size: cover;
+				mask-size: cover;
+			}
+		}
+
+		&__link {
+			flex: auto;
+		}
+
+		&__hidden {
+			@include uilib-visually-hidden;
+		}
+	}
+
+	.uilib-ratings-numerical--brand .uilib-ratings-numerical__score {
+		color: var(--uilib-ratings-numerical-brand-color);
+
+		border-radius: var(--uilib-ratings-numerical-brand-radius);
+
+		background: var(--uilib-ratings-numerical-brand-bg);
+
+		&::before {
+			background-image: var(--uilib-ratings-numerical-brand-logo);
+		}
+	}
+
+	.uilib-ratings-numerical--alt .uilib-ratings-numerical__score {
+		min-height: var(--uilib-ratings-numerical-alt-height);
+
+		color: var(--uilib-ratings-numerical-alt-color);
+
+		border-radius: var(--uilib-ratings-numerical-alt-radius);
+
+		background: var(--uilib-ratings-numerical-alt-bg);
+
+		&::before {
+			background: var(--uilib-ratings-numerical-alt-icon-color);
+
+			-webkit-mask-image: var(--uilib-ratings-numerical-alt-icon);
+			mask-image: var(--uilib-ratings-numerical-alt-icon);
+		}
+	}
+}

package/scss/lib/ratings-reviews/numerical/_variables.scss

@@ -0,0 +1,18 @@
+@use '../../../variables/env-variables' as *;
+
+// Numerical rating specific variables to allow theming
+$uilib-ratings-numerical-variables: (
+	font: var(--uilib-typography-body-medium),
+	color: var(--uilib-color-text-body),
+	color-inverse: var(--uilib-color-text-inverse),
+	font-score: var(--uilib-typography-label-small),
+	brand-bg: var(--uilib-color-core-brand),
+	brand-color: var(--uilib-color-text-strong),
+	brand-logo: url('#{$uilib-assets-base-url}v3/logos/tui/tui-smile.svg'),
+	brand-radius: var(--uilib-border-radius-pill),
+	alt-bg: var(--uilib-color-core-brand-strong),
+	alt-color: var(--uilib-color-text-inverse),
+	alt-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/star-filled.svg'),
+	alt-icon-color: var(--uilib-color-text-inverse),
+	alt-radius: var(--uilib-border-radius-100),
+) !default;

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

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

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

@@ -0,0 +1,74 @@
+// rating percentage / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds rating percentage
+@mixin uilib-ratings-percentage() {
+	.uilib-ratings-percentage {
+		display: inline-flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200) var(--uilib-spacing-100);
+		align-items: baseline;
+
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-body-medium);
+
+		&::before {
+			content: '';
+
+			display: inline-block;
+			flex-shrink: 0;
+			align-self: center;
+
+			width: var(--uilib-icon-size-xsmall);
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			background: var(--uilib-color-text-strong);
+			-webkit-mask-repeat: no-repeat;
+			mask-repeat: no-repeat;
+			-webkit-mask-position: center;
+			mask-position: center;
+			-webkit-mask-size: cover;
+			mask-size: cover;
+			-webkit-mask-image: var(--uilib-ratings-percentage-leading-icon);
+			mask-image: var(--uilib-ratings-percentage-leading-icon);
+		}
+
+		&__rating {
+			display: inline-flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100);
+
+			font: var(--uilib-typography-label-medium);
+
+			&:has(+ .uilib-ratings-percentage__reviews)::after {
+				content: '';
+
+				display: inline-block;
+
+				border-right: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-text-strong);
+			}
+		}
+
+		&__reviews,
+		&__reviews.uilib-link {
+			color: var(--uilib-color-strong);
+			text-decoration-color: var(--uilib-color-strong);
+		}
+
+		&__logo {
+			display: inline-block;
+			align-self: flex-end;
+
+			height: 1.625rem; /* 26 / 16 */
+
+			&--holidaycheck {
+				height: 1.125rem; /* 18 / 16 */
+				margin-bottom: calc(var(--uilib-spacing-050) * -1);
+			}
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+	}
+}

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

@@ -0,0 +1,6 @@
+@use '../../../variables/env-variables' as *;
+
+// Percentage rating specific variables to allow theming
+$uilib-ratings-percentage-variables: (
+	leading-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/thumbs-up.svg'),
+) !default;

package/scss/lib/ratings-reviews/range-bar/_index.scss

@@ -0,0 +1,3 @@
+// rating range icons / index
+@use 'mixins' as *;
+@include uilib-ratings-range-bar;