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

package/scss/lib/image/_mixins.scss

@@ -0,0 +1,49 @@
+// image / _mixins
+@use '../../variables/env-variables' as *;
+
+// Builds image
+@mixin uilib-image() {
+	.uilib-image {
+		display: flex;
+
+		border-radius: var(--uilib-image-rectangle);
+
+		background-color: var(--uilib-color-core-surface);
+		background-image: var(--uilib-image-fallback);
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: 60%;
+
+		overflow: hidden;
+		aspect-ratio: var(--uilib-image-wide);
+
+		&--landscape {
+			aspect-ratio: var(--uilib-image-landscape);
+		}
+
+		&--panoramic {
+			aspect-ratio: var(--uilib-image-panoramic);
+		}
+
+		&--portrait {
+			aspect-ratio: var(--uilib-image-portrait);
+		}
+
+		&--square {
+			aspect-ratio: var(--uilib-image-square);
+		}
+
+		&--rounded {
+			border-radius: var(--uilib-image-rounded);
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+
+			font-size: 0;
+
+			object-fit: cover;
+		}
+	}
+}

package/scss/lib/image/_variables.scss

@@ -0,0 +1,13 @@
+@use '../../variables/env-variables' as *;
+
+// Image specific variables to allow theming
+$uilib-image-variables: (
+	landscape: var(--uilib-aspect-ratio-4x3-landscape),
+	panoramic: var(--uilib-aspect-ratio-3x1-panoramic),
+	portrait: var(--uilib-aspect-ratio-4x3-portrait),
+	square: var(--uilib-aspect-ratio-1x1-square),
+	wide: var(--uilib-aspect-ratio-16x9-wide),
+	rectangle: var(--uilib-border-radius-none),
+	rounded: var(--uilib-border-radius-600),
+	fallback: url('#{$uilib-assets-base-url}v3/illustrations/tui/sunset-adults.svg'),
+) !default;

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

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

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

@@ -0,0 +1,100 @@
+/* info-tag / _mixins */
+@use 'variables' as *;
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+// Builds info-tag
+@mixin uilib-info-tag() {
+	.uilib-info-tag {
+		position: relative;
+
+		display: inline-flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-100);
+		align-items: flex-start;
+
+		padding: var(--uilib-spacing-050) var(--uilib-spacing-100); /* 2px 4px */
+
+		color: var(--uilib-info-tag-text-color);
+		font: var(--uilib-typography-label-xsmall);
+		text-align: left;
+		text-decoration: none;
+
+		border-radius: var(--uilib-info-tag-radius);
+
+		background: var(--uilib-info-tag-neutral-bg-color);
+	}
+
+	.uilib-info-tag__content {
+		line-height: 1rem;
+		overflow-wrap: break-word;
+	}
+
+	.uilib-icon.uilib-info-tag__icon {
+		flex-shrink: 0;
+	}
+
+	.uilib-info-tag--scarcity {
+		background: var(--uilib-info-tag-scarcity-bg-color);
+	}
+
+	.uilib-info-tag--info {
+		background: var(--uilib-info-tag-info-bg-color);
+	}
+
+	.uilib-info-tag--local-product {
+		background: var(--uilib-info-tag-local-product-bg-color);
+	}
+
+	// Tooltip variant styles
+	.uilib-info-tag .uilib-tooltip.uilib-tooltip--icon {
+		margin: calc(var(--uilib-spacing-200) * -1);
+
+		vertical-align: top;
+
+		.uilib-icon-button:hover {
+			background: none;
+		}
+	}
+
+	// Medium size info tag styles
+	.uilib-info-tag.uilib-info-tag--medium {
+		padding: calc(var(--uilib-spacing-050) * 3) var(--uilib-spacing-200); /*  6px 8px */
+	}
+
+	.uilib-info-tag--medium .uilib-info-tag__icon {
+		top: var(--uilib-spacing-150);
+	}
+
+	.uilib-info-tag--medium .uilib-tooltip.uilib-tooltip--icon {
+		top: var(--uilib-spacing-150);
+	}
+}
+
+@mixin uilib-info-tag-list() {
+	.uilib-info-tag-list {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-300) var(--uilib-spacing-200);
+
+		margin: var(--uilib-spacing-300) 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/info-tag/_variables.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables/colors' as *;
+
+/* Info tag specific variables to allow theming */
+$uilib-info-tag-variables: (
+	radius: var(--uilib-border-radius-100),
+	text-color: var(--uilib-color-text-strong),
+	info-bg-color: var(--uilib-color-status-info-surface),
+	local-product-bg-color: var(--uilib-color-brand-local),
+	neutral-bg-color: var(--uilib-color-core-neutral),
+	scarcity-bg-color: var(--uilib-color-status-warning-surface),
+) !default;

package/scss/lib/link/_index.scss

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

package/scss/lib/link/_mixins.scss

@@ -0,0 +1,86 @@
+// Link / _mixins
+// Builds link
+@mixin uilib-link() {
+	.uilib-link {
+		@include uilib-link-base;
+
+		&__label {
+			pointer-events: none;
+		}
+
+		// Extra specificity required to ensure positioning
+		& .uilib-link__icon {
+			display: inline-block;
+
+			vertical-align: middle;
+
+			&:first-child {
+				margin-right: var(--uilib-spacing-100);
+			}
+
+			&:last-child {
+				margin-left: var(--uilib-spacing-100);
+			}
+		}
+	}
+
+	.uilib-link--inverse {
+		@include uilib-link-inverse;
+	}
+}
+
+@mixin uilib-link-base() {
+	display: inline;
+
+	margin: calc(var(--uilib-focus-gap) * -1);
+	padding: 0;
+
+	color: var(--uilib-color-text-link);
+	text-align: inherit;
+	text-decoration: underline;
+	text-decoration-style: var(--uilib-link-decoration-style);
+	text-decoration-color: var(--uilib-link-decoration-color);
+	text-decoration-thickness: var(--uilib-link-decoration-thickness);
+	text-underline-offset: var(--uilib-link-underline-offset);
+
+	border: var(--uilib-focus-gap) solid transparent;
+	border-radius: var(--uilib-border-radius-100);
+
+	background-color: transparent;
+
+	cursor: pointer;
+
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+
+	&:hover {
+		text-decoration-thickness: var(--uilib-link-decoration-thickness-hover);
+	}
+
+	&:focus-visible {
+		box-shadow: var(--uilib-focus-default);
+
+		&::before {
+			display: none;
+		}
+	}
+
+	&:visited {
+		color: var(--uilib-color-text-link-visited);
+
+		text-decoration-color: var(--uilib-link-decoration-color-visited);
+	}
+}
+
+@mixin uilib-link-inverse() {
+	color: var(--uilib-color-text-inverse);
+
+	text-decoration-color: var(--uilib-link-decoration-color-inverse);
+
+	&:visited {
+		color: var(--uilib-color-text-link-visited-inverse);
+
+		text-decoration-color: var(--uilib-link-decoration-color-inverse-visited);
+	}
+}

package/scss/lib/link/_variables.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+
+// Link specific variables to allow theming
+$uilib-link-variables: (
+	decoration-color: var(--uilib-color-text-link),
+	decoration-color-visited: var(--uilib-color-text-link-visited),
+	decoration-color-inverse: var(--uilib-color-text-inverse),
+	decoration-color-inverse-visited: var(--uilib-color-text-link-visited-inverse),
+	decoration-style: var(--uilib-stroke-style-solid),
+	decoration-thickness: var(--uilib-stroke-size-025),
+	decoration-thickness-hover: var(--uilib-stroke-size-050),
+	underline-offset: var(--uilib-spacing-050),
+) !default;

package/scss/lib/list/_index.scss

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

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-0);
+
+		// 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;