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

package/scss/lib/icon/_mixins.scss

@@ -0,0 +1,54 @@
+// icon / _mixins
+@use 'sass:map';
+@use 'variables' as *;
+@use '../../variables/icons' as *;
+@use '../../variables/env-variables' as *;
+
+// Builds icon
+@mixin uilib-icon() {
+	.uilib-icon {
+		display: flex;
+
+		width: var(--uilib-icon-size-default);
+
+		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+		background: currentcolor;
+		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;
+
+		/* stylelint-disable-next-line order/order */
+		@each $size, $value in $uilib-icon-sizes {
+			&--#{$size} {
+				width: var(--uilib-icon-size-#{$size});
+			}
+		}
+	}
+}
+
+// Set mask image
+@mixin uilib-icon-mask-image($theme, $name, $type: 'standard') {
+	$theme-name: map.get($uilib-theme-icon-map-config, $theme);
+
+	/* stylelint-disable-next-line order/order */
+	--icon-url: url('#{$uilib-assets-base-url}v3/icons/#{$theme-name}/#{$type}/#{$name}.svg');
+	-webkit-mask-image: var(--icon-url);
+	mask-image: var(--icon-url);
+}
+
+// Set background image - for multicolor icons
+@mixin uilib-icon-background-image($theme, $name, $type: 'color') {
+	$theme-name: map.get($uilib-theme-icon-map-config, $theme);
+
+	/* stylelint-disable-next-line order/order */
+	--icon-url: url('#{$uilib-assets-base-url}v3/icons/#{$theme-name}/#{$type}/#{$name}.svg');
+	background-color: transparent;
+	background-image: var(--icon-url);
+}

package/scss/lib/icon/_variables.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+$uilib-theme-icon-map-default: (
+	tui: 'tui',
+	crystalski: 'crystalski',
+	firstchoice: 'firstchoice',
+	vipselection: 'tui',
+);
+$uilib-theme-icon-map-custom: () !default;
+$uilib-theme-icon-map-config: map.merge($uilib-theme-icon-map-default, $uilib-theme-icon-map-custom);

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

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

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

@@ -0,0 +1,168 @@
+// icon button / _mixins
+@use '../utility/mixins' as *;
+
+// Builds icon button
+@mixin uilib-icon-button() {
+	.uilib-icon-button {
+		position: relative;
+
+		display: inline-flex;
+		flex-flow: row nowrap;
+		justify-content: center;
+		align-items: center;
+
+		width: 2.75rem; /* 44px */
+		padding: 0;
+		aspect-ratio: 1/1;
+
+		color: var(--uilib-icon-button-primary-color);
+		font: var(--uilib-typography-label-medium);
+		text-decoration: none;
+
+		border-radius: var(--uilib-icon-button-radius);
+
+		background: var(--uilib-icon-button-primary-bg-color);
+
+		cursor: pointer;
+
+		appearance: none;
+
+		@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);
+		}
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-primary-hover-bg-color);
+		}
+
+		&:focus-visible {
+			@include uilib-focus;
+		}
+
+		&:active:not(:disabled, .uilib-icon-button--disabled) {
+			transform: scale(0.96);
+		}
+
+		&__content {
+			flex-grow: 1;
+		}
+
+		&__icon {
+			pointer-events: none;
+		}
+	}
+
+	.uilib-icon-button--ghost {
+		color: var(--uilib-icon-button-ghost-color);
+
+		background: var(--uilib-icon-button-ghost-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-ghost-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--secondary {
+		color: var(--uilib-icon-button-secondary-color);
+
+		border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-icon-button-secondary-color);
+
+		background: var(--uilib-icon-button-secondary-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-secondary-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--control {
+		color: var(--uilib-icon-button-control-color);
+
+		background: var(--uilib-icon-button-control-bg-color);
+
+		box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-control-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--promotion {
+		color: var(--uilib-icon-button-promotion-color);
+
+		background: var(--uilib-icon-button-promotion-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-promotion-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--search {
+		color: var(--uilib-icon-button-search-color);
+
+		background: var(--uilib-icon-button-search-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-search-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--shortlist {
+		color: var(--uilib-icon-button-shortlist-color);
+
+		background: var(--uilib-icon-button-shortlist-bg-color);
+
+		box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-shortlist-hover-bg-color);
+		}
+
+		.uilib-icon-button__icon--selected {
+			display: none;
+		}
+
+		&[aria-pressed='true'] .uilib-icon-button__icon {
+			display: none;
+
+			&--selected {
+				display: block;
+			}
+		}
+	}
+
+	.uilib-icon-button:disabled,
+	.uilib-icon-button--disabled {
+		color: var(--uilib-icon-button-disabled-color);
+
+		border-color: var(--uilib-icon-button-disabled-bg-color);
+
+		background: var(--uilib-icon-button-disabled-bg-color);
+
+		box-shadow: none;
+
+		cursor: default;
+	}
+
+	.uilib-icon-button--ghost:disabled,
+	.uilib-icon-button--ghost.uilib-icon-button--disabled {
+		color: var(--uilib-icon-button-disabled-bg-color);
+
+		border-color: var(--uilib-icon-button-ghost-bg-color);
+
+		background: var(--uilib-icon-button-ghost-bg-color);
+
+		cursor: default;
+	}
+
+	.uilib-icon-button--small {
+		width: 2rem; /* 32px */
+	}
+
+	.uilib-icon-button--large {
+		width: 4rem; /* 64px */
+	}
+}

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

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables/colors' as *;
+
+// Icon button specific variables to allow theming
+$uilib-icon-button-variables: (
+	radius: var(--uilib-border-radius-pill),
+	ghost-color: var(--uilib-color-core-interaction),
+	ghost-bg-color: transparent,
+	ghost-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
+	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%),
+	control-color: var(--uilib-color-core-interaction),
+	control-bg-color: var(--uilib-color-core-neutral),
+	control-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 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%),
+	shortlist-color: var(--uilib-color-text-promotion),
+	shortlist-bg-color: var(--uilib-color-core-neutral),
+	shortlist-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'promotion'), 90%),
+	disabled-color: var(--uilib-color-other-disabled-strong),
+	disabled-bg-color: var(--uilib-color-other-disabled-soft),
+) !default;

package/scss/lib/image/_index.scss

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

package/scss/lib/image/_mixins.scss

@@ -0,0 +1,89 @@
+// 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;
+			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/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;