@tui/design-system 1.6.0 → 1.8.0

package/scss/lib/highlight-panel/_mixins.scss

@@ -0,0 +1,244 @@
+// Highlight panel / _mixins
+@use 'variables' as *;
+@use '../utility/mixins' as *;
+@use '../icon/mixins' as *;
+
+$uilib-highlight-panel-included: false !default;
+
+@mixin uilib-highlight-panel() {
+	@if not $uilib-highlight-panel-included {
+		$uilib-highlight-panel-included: true !global;
+
+		@include uilib-icon;
+		@include uilib-highlight-panel-master;
+	}
+}
+
+@mixin uilib-highlight-panel-master() {
+	.uilib-highlight-panel {
+		&::after {
+			content: '';
+
+			display: block;
+
+			height: var(--uilib-spacing-400);
+
+			border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
+			border-top: 0;
+			border-radius: 0 0 var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius);
+
+			background: var(--uilib-highlight-panel-bg-color);
+		}
+
+		// ─── Header ───
+		&__header {
+			position: relative;
+
+			display: flex;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+
+			padding: var(--uilib-spacing-200) calc(var(--uilib-icon-size-small) + var(--uilib-spacing-600)) var(--uilib-spacing-600)
+				var(--uilib-spacing-400);
+
+			color: var(--uilib-highlight-panel-header-font-color);
+
+			border-radius: var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius) 0 0;
+
+			background: var(--uilib-highlight-panel-header-bg-color);
+
+			// Remove native summary markers
+			list-style: none;
+
+			&::after {
+				position: absolute;
+				inset: auto 0 0;
+				content: '';
+
+				display: block;
+
+				height: var(--uilib-spacing-400);
+
+				border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
+				border-bottom-width: 0;
+				border-radius: var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius) 0 0;
+
+				background: var(--uilib-highlight-panel-bg-color);
+			}
+
+			&:focus-visible {
+				@include uilib-focus;
+
+				&::before {
+					bottom: calc(var(--uilib-spacing-400) - var(--uilib-focus-gap));
+
+					border-radius: var(--uilib-highlight-panel-radius);
+				}
+			}
+
+			&::-webkit-details-marker {
+				display: none;
+			}
+
+			&::marker {
+				content: '';
+
+				display: none;
+			}
+		}
+
+		// Clickable header (collapsible variant)
+		&__collapsible > &__header {
+			cursor: pointer;
+		}
+
+		// Collapsible details element (nested inside panel)
+		&__collapsible {
+			// Reset details styling
+			margin: 0;
+			padding: 0;
+
+			border: 0;
+		}
+
+		&__collapsible &__header-text::before {
+			display: block;
+		}
+
+		&__collapsible[open] &__header-text::before {
+			transform: translate(0, calc((var(--uilib-icon-size-small) / 2) * -1)) rotate(180deg);
+		}
+
+		&__collapsible::details-content {
+			block-size: 0;
+
+			overflow: hidden;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+					content-visibility var(--uilib-motion-duration-medium) allow-discrete;
+			}
+		}
+
+		&__collapsible[open]::details-content {
+			block-size: auto;
+		}
+
+		&__header-text {
+			display: flex;
+			flex-direction: column;
+
+			// ─── Toggle indicator (collapsible) ───
+			&::before {
+				position: absolute;
+				top: calc(50% - var(--uilib-spacing-200));
+				right: var(--uilib-spacing-400);
+				content: '';
+
+				display: none;
+
+				width: var(--uilib-icon-size-small);
+				height: var(--uilib-icon-size-small);
+
+				background-color: var(--uilib-highlight-panel-header-icon-color);
+
+				-webkit-mask: var(--uilib-highlight-panel-toggle-icon) no-repeat center;
+				mask: var(--uilib-highlight-panel-toggle-icon) no-repeat center;
+				-webkit-mask-size: contain;
+				mask-size: contain;
+
+				transform: translate(0, calc((var(--uilib-icon-size-small) / 2) * -1));
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
+			}
+		}
+
+		&__title {
+			font: var(--uilib-highlight-panel-header-font);
+		}
+
+		&__subtitle {
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		&__icon {
+			flex-shrink: 0;
+		}
+
+		// ─── Content ───
+		// ─── Footer (always visible in collapsible mode) ───
+		&__content,
+		&__footer {
+			padding: 0 var(--uilib-spacing-400);
+
+			border: var(--uilib-stroke-size-025) solid var(--uilib-highlight-panel-border-color);
+			border-top-width: 0;
+			border-bottom-width: 0;
+
+			background: var(--uilib-highlight-panel-bg-color);
+		}
+
+		&__content {
+			padding-top: var(--uilib-spacing-400);
+
+			border-top-width: var(--uilib-stroke-size-025);
+			border-radius: var(--uilib-highlight-panel-radius) var(--uilib-highlight-panel-radius) 0 0;
+		}
+
+		&:has(&__header) &__content {
+			padding-top: 0;
+
+			border-top-width: 0;
+			border-radius: 0;
+		}
+
+		&:has(&__footer) &__content {
+			padding-bottom: var(--uilib-spacing-200);
+
+			&--divider::after {
+				content: '';
+
+				display: block;
+
+				width: 100%;
+				margin-top: var(--uilib-spacing-200);
+
+				border-bottom: var(--uilib-stroke-size-050) solid var(--uilib-color-border-divider);
+			}
+		}
+
+		// ─── Variants ───
+		/* stylelint-disable-next-line order/order */
+		&--strong &__header {
+			color: var(--uilib-highlight-panel-header-font-color-strong);
+
+			background: var(--uilib-highlight-panel-header-bg-color-strong);
+
+			&-text::before {
+				background-color: var(--uilib-highlight-panel-header-icon-color-strong);
+			}
+		}
+
+		&--brand &__header {
+			color: var(--uilib-highlight-panel-header-font-color-brand);
+
+			background: var(--uilib-highlight-panel-header-bg-overlay-brand, none), var(--uilib-highlight-panel-header-bg-color-brand);
+			background-repeat: no-repeat;
+			background-position:
+				right top,
+				center;
+			background-size: 50%, auto;
+
+			&-text::before {
+				background-color: var(--uilib-highlight-panel-header-icon-color-brand);
+			}
+		}
+
+		&--brand &__title {
+			font: var(--uilib-highlight-panel-header-font-brand);
+		}
+	}
+}

package/scss/lib/highlight-panel/_variables.scss

@@ -0,0 +1,21 @@
+@use '../../variables/env-variables' as *;
+
+// Highlight panel specific variables to allow theming
+$uilib-highlight-panel-variables: (
+	radius: var(--uilib-border-radius-400),
+	border-color: var(--uilib-color-border-card),
+	bg-color: var(--uilib-color-canvas-default),
+	header-font: var(--uilib-typography-component-heading-medium),
+	header-font-brand: var(--uilib-typography-component-heading-large-strong),
+	header-font-color: var(--uilib-color-text-strong),
+	header-font-color-strong: var(--uilib-color-text-inverse),
+	header-font-color-brand: var(--uilib-color-text-strong),
+	header-icon-color: var(--uilib-color-core-interaction),
+	header-icon-color-strong: var(--uilib-color-text-inverse),
+	header-icon-color-brand: var(--uilib-color-core-interaction),
+	header-bg-color: var(--uilib-color-core-surface),
+	header-bg-color-strong: var(--uilib-color-core-brand-strong),
+	header-bg-color-brand: var(--uilib-color-core-brand),
+	header-bg-overlay-brand: none,
+	toggle-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/list/_mixins.scss

@@ -18,110 +18,178 @@ $uilib-list-included: false !default;
 @mixin uilib-list-master() {
 	.uilib-list {
 		@include uilib-list-base;
-	}
 
-	.uilib-list--strong {
-		color: var(--uilib-color-text-strong);
-	}
+		/* stylelint-disable-next-line order/order */
+		&--strong {
+			color: var(--uilib-color-text-strong);
+		}
 
-	.uilib-list--label {
-		color: var(--uilib-color-text-strong);
-		font: var(--uilib-typography-label-medium);
-	}
+		&--label {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-label-medium);
+		}
 
-	.uilib-list--icon,
-	.uilib-list--image {
-		& > li::before {
-			display: none;
+		&--icon,
+		&--image {
+			& > li::before {
+				display: none;
+			}
 		}
-	}
 
-	.uilib-list__icon {
-		position: absolute;
-		top: 0;
-		left: 0;
+		&__icon {
+			position: absolute;
+			top: 0;
+			left: 0;
 
-		&.uilib-icon {
-			background: var(--uilib-list-bullet-color);
+			&.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));
+		/* stylelint-disable-next-line order/order */
+		&--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 {
-			top: calc(var(--uilib-spacing-300) / 4);
+		&--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--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));
+		&--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__icon {
+		&__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 {
-		& > 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));
+		/* stylelint-disable-next-line order/order */
+		&--image-alt > li > &__image {
+			border-radius: var(--uilib-list-image-alt-radius);
 		}
-	}
 
-	.uilib-list__image {
-		position: absolute;
-		top: 0;
-		left: 0;
+		&--inverse {
+			@include uilib-list-inverse;
 
-		width: var(--uilib-spacing-1000);
-		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+			.uilib-list__icon {
+				background: var(--uilib-color-text-inverse);
+			}
+		}
 
-		border-radius: var(--uilib-list-image-radius);
+		&--numbered {
+			@include uilib-list-ordered;
 
-		overflow: hidden;
+			&.uilib-list--inverse {
+				@include uilib-list-ordered-inverse;
+			}
+		}
+
+		&--plain {
+			& > li {
+				padding: 0;
 
-		img {
-			object-fit: cover;
-			object-position: center;
+				&::before {
+					display: none;
+				}
+			}
 		}
-	}
 
-	.uilib-list--image-alt > li > .uilib-list__image {
-		border-radius: var(--uilib-list-image-alt-radius);
-	}
+		&--columns {
+			display: block;
+
+			columns: 20ch 2;
 
-	.uilib-list--inverse {
-		@include uilib-list-inverse;
+			& > li {
+				margin-bottom: var(--uilib-spacing-100);
 
-		.uilib-list__icon {
-			background: var(--uilib-color-text-inverse);
+				break-inside: avoid;
+			}
+		}
+
+		&--horizontal {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200) var(--uilib-spacing-400);
 		}
-	}
 
-	.uilib-list--numbered {
-		@include uilib-list-ordered;
+		&__title {
+			display: block;
 
-		&.uilib-list--inverse {
-			@include uilib-list-ordered-inverse;
+			font: var(--uilib-list-multiline-title-font);
 		}
-	}
 
-	.uilib-list--columns {
-		display: block;
+		li:has(> &__title) {
+			font: var(--uilib-typography-body-medium);
+		}
+
+		&:not(&--inverse) li.uilib-list__highlight-item {
+			color: var(--uilib-list-highlight-color);
+
+			&::before {
+				color: var(--uilib-list-highlight-color);
+			}
 
-		columns: 20ch 2;
+			.uilib-list__icon {
+				background-color: var(--uilib-list-highlight-color);
+			}
+		}
 
-		& > li {
-			margin-bottom: var(--uilib-spacing-100);
+		&:not(&--inverse, &--numbered) li.uilib-list__highlight-item::before {
+			background-color: var(--uilib-list-highlight-color);
+		}
+
+		li:has(&__hint) {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			gap: 0 var(--uilib-spacing-200);
+			align-items: baseline;
+
+			> :not(.uilib-list__hint) {
+				grid-column: 1;
+			}
+
+			.uilib-list__icon,
+			.uilib-list__image {
+				grid-column: unset;
+			}
+		}
+
+		&__hint {
+			grid-row: 1 / span 20;
+			grid-column: 2;
 		}
 	}
 }
@@ -178,6 +246,8 @@ $uilib-list-included: false !default;
 	& > li {
 		padding-left: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-200));
 
+		counter-increment: list-item;
+
 		&::before {
 			left: 0;
 			content: counters(list-item, '.') '.';

package/scss/lib/list/_variables.scss

@@ -6,4 +6,6 @@ $uilib-list-variables: (
 	bullet-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/list-item.svg'),
 	image-radius: var(--uilib-border-radius-100),
 	image-alt-radius: var(--uilib-border-radius-circle),
+	multiline-title-font: var(--uilib-typography-label-medium),
+	highlight-color: var(--uilib-color-text-promotion),
 ) !default;

package/scss/lib/modal/_variables.scss

@@ -1,11 +1,8 @@
 @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: (
 	close-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
 	backdrop-color: var(--uilib-color-other-scrim),
-	radius: map.get($uilib-radius, '400'),
+	radius: var(--uilib-border-radius-400),
 ) !default;

package/scss/lib/patterns/review-card/_index.scss

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