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

package/scss/lib/list/_mixins.scss

@@ -0,0 +1,198 @@
+// List / _mixins
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+// Builds list
+@mixin uilib-list() {
+	.uilib-list {
+		@include uilib-list-base;
+	}
+
+	.uilib-list--strong {
+		color: var(--uilib-color-text-strong);
+	}
+
+	.uilib-list--label {
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-label-medium);
+	}
+
+	.uilib-list--icon,
+	.uilib-list--image {
+		& > li::before {
+			display: none;
+		}
+	}
+
+	.uilib-list__icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		&.uilib-icon {
+			background: var(--uilib-list-bullet-color);
+		}
+	}
+
+	.uilib-list--icon-small {
+		& > li {
+			min-height: var(--uilib-icon-size-small);
+			padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-200));
+		}
+
+		.uilib-list__icon {
+			top: calc(var(--uilib-spacing-300) / 4);
+		}
+	}
+
+	.uilib-list--icon-large {
+		& > li {
+			min-height: var(--uilib-icon-size-medium);
+			padding-top: calc(calc(var(--uilib-icon-size-medium) - calc(1rem * var(--uilib-line-height-body))) / 2);
+			padding-left: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
+		}
+
+		.uilib-list__icon {
+			top: 0;
+		}
+	}
+
+	.uilib-list--image {
+		& > li {
+			min-height: var(--uilib-spacing-1000);
+			padding-top: calc(var(--uilib-spacing-050) * 5);
+			padding-left: calc(var(--uilib-spacing-1000) + var(--uilib-spacing-200));
+		}
+	}
+
+	.uilib-list__image {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: var(--uilib-spacing-1000);
+		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+		border-radius: var(--uilib-list-image-radius);
+
+		overflow: hidden;
+
+		img {
+			object-fit: cover;
+			object-position: center;
+		}
+	}
+
+	.uilib-list--image-alt > li > .uilib-list__image {
+		border-radius: var(--uilib-list-image-radius-alt);
+	}
+
+	.uilib-list--inverse {
+		@include uilib-list-inverse;
+
+		.uilib-list__icon {
+			background: var(--uilib-color-text-inverse);
+		}
+	}
+
+	.uilib-list--numbered {
+		@include uilib-list-ordered;
+
+		&.uilib-list--inverse {
+			@include uilib-list-ordered-inverse;
+		}
+	}
+
+	.uilib-list--columns {
+		display: block;
+
+		columns: 20ch 2;
+
+		& > li {
+			margin-bottom: var(--uilib-spacing-100);
+		}
+	}
+}
+
+/* For internal use to support richText component */
+@mixin uilib-list-base() {
+	display: flex;
+	flex-flow: column;
+	gap: var(--uilib-spacing-200) var(--uilib-spacing-500);
+
+	margin: 0 0 var(--uilib-spacing-400);
+	padding: 0;
+
+	list-style: none;
+
+	& > li {
+		position: relative;
+
+		padding: 0 0 0 calc(var(--uilib-icon-size-small) + var(--uilib-spacing-200));
+
+		&::before {
+			position: absolute;
+			top: 0;
+			left: 0;
+			content: '';
+
+			display: block;
+
+			width: var(--uilib-icon-size-small);
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			background: var(--uilib-list-bullet-color);
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: cover;
+			-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-list-bullet-icon);
+			mask-image: var(--uilib-list-bullet-icon);
+		}
+
+		& > ul:last-child,
+		& > ol:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+@mixin uilib-list-ordered() {
+	& > li {
+		padding-left: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
+
+		&::before {
+			left: 0;
+			content: counters(list-item, '.') '.';
+
+			color: currentcolor;
+			font: var(--uilib-typography-body-medium);
+			text-align: right;
+
+			background: none;
+			-webkit-mask: unset;
+			mask: unset;
+		}
+	}
+}
+
+@mixin uilib-list-inverse() {
+	color: var(--uilib-color-text-inverse);
+
+	& > li::before {
+		background: var(--uilib-color-text-inverse);
+	}
+}
+
+@mixin uilib-list-ordered-inverse() {
+	& > li::before {
+		color: var(--uilib-color-text-inverse);
+
+		background: none;
+	}
+}

package/scss/lib/list/_variables.scss

@@ -0,0 +1,9 @@
+@use '../../variables/env-variables' as *;
+
+// list specific variables to allow theming
+$uilib-list-variables: (
+	bullet-color: var(--uilib-color-text-strong),
+	bullet-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/list-item.svg'),
+	image-radius: var(--uilib-border-radius-100),
+	image-radius-alt: var(--uilib-border-radius-circle),
+) !default;

package/scss/lib/loader/_index.scss

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

package/scss/lib/loader/_mixins.scss

@@ -0,0 +1,52 @@
+// loader / _mixins
+@use '../utility/mixins' as *;
+
+// Builds loader
+@mixin uilib-loader() {
+	.uilib-loader {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-300);
+		justify-content: center;
+		align-items: center;
+
+		margin: var(--uilib-spacing-600) 0;
+
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-loader-font-small);
+
+		&::before {
+			content: '';
+
+			display: block;
+
+			width: var(--uilib-loader-small);
+			max-width: 100%;
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			background: var(--uilib-loader-image) no-repeat center center;
+			background-size: cover;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--medium {
+			font: var(--uilib-loader-font-medium);
+
+			&::before {
+				width: var(--uilib-loader-medium);
+			}
+		}
+
+		&--large {
+			font: var(--uilib-loader-font-large);
+
+			&::before {
+				width: var(--uilib-loader-large);
+			}
+		}
+
+		&__message--hidden {
+			@include uilib-visually-hidden;
+		}
+	}
+}

package/scss/lib/loader/_variables.scss

@@ -0,0 +1,12 @@
+@use '../../variables/env-variables' as *;
+
+// Loader specific variables to allow theming
+$uilib-loader-variables: (
+	image: url('#{$uilib-assets-base-url}v3/motion/tui/loader.svg'),
+	/* 60 / 16px */ small: 3.75rem,
+	/* 120 / 16px */ medium: 7.5rem,
+	/* 180 / 16px */ large: 11.25rem,
+	font-small: var(--uilib-typography-component-heading-medium),
+	font-medium: var(--uilib-typography-component-heading-large),
+	font-large: var(--uilib-typography-component-heading-xlarge),
+) !default;

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

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

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

@@ -0,0 +1,75 @@
+// media button / _mixins
+// Builds media button
+@mixin uilib-media-button() {
+	.uilib-button.uilib-media-button {
+		width: max-content;
+		min-height: var(--uilib-spacing-800);
+		padding: var(--uilib-spacing-100) var(--uilib-spacing-300);
+
+		color: var(--uilib-media-button-color);
+
+		border: 0;
+
+		background: var(--uilib-button-secondary-bg-color);
+
+		box-shadow: var(--uilib-elevation-100);
+
+		// Ensure min hit target is 44px
+		&::after {
+			position: absolute;
+			top: 50%;
+			left: 0;
+			right: 0;
+			content: '';
+
+			display: block;
+
+			height: 100%;
+			min-height: var(--uilib-spacing-1100);
+
+			border-radius: inherit;
+
+			transform: translate(0, -50%);
+		}
+
+		&:hover:not(:disabled, .uilib-button--disabled) {
+			background: var(--uilib-button-secondary-hover-bg-color);
+		}
+	}
+}
+
+@mixin uilib-media-button-list() {
+	.uilib-media-button-list {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-300) var(--uilib-spacing-200);
+
+		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;
+		}
+
+		&.uilib-button-list--center {
+			justify-content: center;
+		}
+
+		&.uilib-button-list--right {
+			justify-content: flex-end;
+		}
+	}
+}

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

@@ -0,0 +1,4 @@
+// Media button specific variables to allow theming
+$uilib-media-button-variables: (
+	color: var(--uilib-color-text-strong),
+) !default;

package/scss/lib/modal/_index.scss

@@ -0,0 +1,2 @@
+@use 'mixins' as *;
+@include uilib-modal;

package/scss/lib/modal/_mixins.scss

@@ -0,0 +1,135 @@
+@use 'sass:map';
+@use '../../variables/breakpoints' as *;
+@use '../grid/mixins' as *;
+
+@mixin uilib-modal() {
+	@keyframes slide-up {
+		from {
+			transform: translateY(100%);
+		}
+
+		to {
+			transform: translateY(0);
+		}
+	}
+
+	.uilib-modal {
+		$min-height-query: '(min-height: #{map.get($uilib-breakpoints, xs)})';
+		$sizes: (
+			small: 6,
+			medium: 8,
+			large: 12,
+		);
+		inset: auto 0 0;
+
+		display: flex;
+		flex-direction: column;
+
+		width: 100%;
+		max-width: 100%; // reset browser styles
+		max-height: calc(100vh - 2.75rem); // 44px
+		padding: var(--uilib-spacing-400);
+
+		border: none;
+		border-radius: var(--uilib-modal-radius) var(--uilib-modal-radius) 0 0;
+
+		animation: slide-up var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+
+		@include uilib-breakpoint(xs, $min-height-query) {
+			inset: 6.25rem var(--uilib-spacing-400); // 100px 16px
+
+			max-width: calc(min(var(--uilib-layout-max-width), 100vw) - var(--uilib-spacing-800)); // maxWidth - 2 * 16px
+			max-height: calc(100vh - 12.5rem);
+			margin: auto;
+
+			border-radius: var(--uilib-modal-radius);
+
+			&[open] {
+				animation: none;
+			}
+		}
+
+		@each $name, $cols in $sizes {
+			&--#{$name} {
+				width: 100%;
+
+				@include uilib-breakpoint(xs, $min-height-query) {
+					width: calc($cols / 12 * 100%);
+				}
+			}
+		}
+
+		// scroller is block by default, need to make it work with flex
+		.uilib-scroller {
+			display: flex;
+
+			&__inner {
+				flex: 1;
+
+				height: auto;
+			}
+		}
+
+		&:is(dialog):not([open]) {
+			// for dialog animation (only with html dialog)
+			display: none;
+		}
+
+		&::backdrop,
+		&__backdrop {
+			background: var(--uilib-modal-backdrop-color);
+		}
+
+		&__header {
+			display: flex;
+			flex-shrink: 0;
+			justify-content: space-between;
+			align-items: center;
+
+			h3 {
+				font: var(--uilib-typography-component-heading-small);
+			}
+		}
+
+		&__footer-default {
+			display: flex;
+			flex-shrink: 0;
+			gap: var(--uilib-spacing-400);
+			justify-content: end;
+			align-items: center;
+
+			slot[name='price'] {
+				display: flex;
+
+				margin-right: auto;
+
+				@include uilib-breakpoint(xs) {
+					margin-right: 0;
+				}
+			}
+
+			.uilib-divider {
+				display: none;
+
+				@include uilib-breakpoint(xs) {
+					display: flex;
+					align-self: stretch;
+				}
+			}
+
+			// show divider only if price slot is used
+			&:not(:has(slot[name='price'] *)) .uilib-divider {
+				display: none;
+			}
+		}
+
+		&__close-icon .uilib-icon {
+			-webkit-mask-image: var(--uilib-modal-icon-close);
+			mask-image: var(--uilib-modal-icon-close);
+		}
+
+		body:has(&[open]) {
+			overflow: hidden;
+		}
+	}
+}

package/scss/lib/modal/_variables.scss

@@ -0,0 +1,11 @@
+@use '../../variables/env-variables' as *;
+@use '../../variables/primitives' as *;
+@use '../../variables/border-radius' as *;
+@use 'sass:map';
+
+// modal specific variables to allow themeing
+$uilib-modal-variables: (
+	icon-close: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
+	backdrop-color: var(--uilib-color-other-scrim),
+	radius: map.get($uilib-radius, '400'),
+) !default;

package/scss/lib/pagination/_index.scss

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