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

package/scss/lib/accordion/_mixins.scss

@@ -0,0 +1,233 @@
+// accordion / _mixins
+@use '../utility/mixins' as *;
+
+// Builds accordion
+@mixin uilib-accordion() {
+	.uilib-accordion {
+		position: relative;
+
+		margin: var(--uilib-spacing-400) var(--uilib-spacing-none) var(--uilib-spacing-600);
+
+		border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-accordion-border-color);
+		border-radius: var(--uilib-accordion-radius);
+
+		background: var(--uilib-accordion-default-bg-color);
+
+		&::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;
+			}
+		}
+
+		&[open]::details-content {
+			block-size: auto;
+		}
+
+		&[open] > .uilib-accordion-summary::after {
+			transform: rotate(180deg);
+		}
+	}
+
+	.uilib-accordion-summary {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-100) var(--uilib-spacing-200);
+
+		padding: var(--uilib-spacing-300) var(--uilib-spacing-1100) var(--uilib-spacing-300) var(--uilib-spacing-300);
+
+		border-radius: var(--uilib-border-radius-100);
+
+		cursor: pointer;
+
+		appearance: none;
+
+		&::after {
+			$icon-pos: calc(calc(var(--uilib-spacing-1100) - var(--uilib-icon-size-medium)) / 2);
+
+			position: absolute;
+			top: $icon-pos;
+			right: $icon-pos;
+			content: '';
+
+			display: block;
+
+			width: var(--uilib-icon-size-medium);
+
+			background: var(--uilib-color-core-interaction);
+
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+			-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-accordion-icon);
+			mask-image: var(--uilib-accordion-icon);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
+		}
+
+		&:focus-visible {
+			@include uilib-focus;
+
+			// Override default focus position so focus displays over whole accordion
+			/* stylelint-disable-next-line order/order */
+			position: static;
+		}
+
+		&::marker {
+			content: '';
+		}
+
+		&::-webkit-details-marker {
+			display: none;
+		}
+	}
+
+	.uilib-accordion--logo .uilib-accordion-summary {
+		min-height: calc(calc(var(--uilib-spacing-300) * 2) + var(--uilib-spacing-1600));
+		padding-left: calc(var(--uilib-spacing-300) + var(--uilib-spacing-1600) + var(--uilib-spacing-200));
+	}
+
+	.uilib-accordion--icon .uilib-accordion-summary {
+		min-height: calc(calc(var(--uilib-spacing-300) * 2) + var(--uilib-icon-size-small));
+		padding-left: calc(var(--uilib-spacing-300) + var(--uilib-icon-size-small) + var(--uilib-spacing-200));
+	}
+
+	.uilib-accordion-summary__heading {
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-component-heading-small-strong);
+		text-wrap: initial;
+	}
+
+	.uilib-accordion-summary__subtitle {
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-body-medium);
+	}
+
+	.uilib-accordion-summary__logo,
+	.uilib-accordion-summary__icon {
+		position: absolute;
+		top: var(--uilib-spacing-300);
+		left: var(--uilib-spacing-300);
+	}
+
+	.uilib-accordion-summary__logo {
+		width: var(--uilib-spacing-1600); /* 64px */
+		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+		border-radius: var(--uilib-accordion-logo-radius);
+
+		overflow: hidden;
+
+		img {
+			object-fit: cover;
+			object-position: center;
+		}
+	}
+
+	.uilib-accordion-summary__icon {
+		background-color: var(--uilib-color-text-strong);
+	}
+
+	.uilib-accordion__content {
+		padding: 0 var(--uilib-spacing-300) var(--uilib-spacing-300);
+	}
+}
+
+@mixin uilib-accordion-group() {
+	.uilib-accordion-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-400);
+		align-items: flex-start;
+
+		margin: var(--uilib-spacing-400) var(--uilib-spacing-none) var(--uilib-spacing-600);
+
+		container-type: inline-size;
+		container-name: uilib-accordion;
+	}
+
+	.uilib-accordion-group::part(wrapper) {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-400);
+		align-items: flex-start;
+
+		width: 100%;
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@container uilib-accordion (min-width: 30rem) {
+		.uilib-accordion-group::part(wrapper) {
+			display: grid;
+			grid-template-columns: 1fr max-content;
+			gap: var(--uilib-spacing-400) var(--uilib-spacing-600);
+			align-items: end;
+		}
+	}
+
+	.uilib-accordion-group__intro {
+		grid-column: 1;
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.uilib-accordion-group__button {
+		grid-column: 2;
+	}
+
+	.uilib-accordion-group__intro + .uilib-accordion-group__button {
+		margin-top: calc(var(--uilib-spacing-200) * -1);
+	}
+
+	.uilib-accordion-list {
+		grid-column: 1 / span 2;
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-100);
+
+		width: 100%;
+		margin: var(--uilib-spacing-none);
+		padding: var(--uilib-spacing-none);
+
+		& > .uilib-accordion-list__item > .uilib-accordion {
+			margin: 0;
+		}
+	}
+
+	.uilib-accordion-list--divider {
+		gap: var(--uilib-spacing-none);
+
+		& > .uilib-accordion-list__item > .uilib-accordion {
+			border: none;
+		}
+
+		& > .uilib-accordion-list__item:not(:first-child) > .uilib-accordion {
+			border-top-left-radius: var(--uilib-border-radius-none);
+			border-top-right-radius: var(--uilib-border-radius-none);
+		}
+
+		& > .uilib-accordion-list__item:not(:last-child) > .uilib-accordion {
+			border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-accordion-divider-color);
+			border-bottom-right-radius: var(--uilib-border-radius-none);
+			border-bottom-left-radius: var(--uilib-border-radius-none);
+		}
+	}
+}

package/scss/lib/accordion/_variables.scss

@@ -0,0 +1,11 @@
+@use '../../variables/env-variables' as *;
+
+// Accordion specific variables to allow theming
+$uilib-accordion-variables: (
+	radius: var(--uilib-border-radius-100),
+	logo-radius: var(--uilib-border-radius-100),
+	icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+	default-bg-color: var(--uilib-color-canvas-default),
+	border-color: var(--uilib-color-border-card),
+	divider-color: var(--uilib-color-border-card),
+) !default;

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

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

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

@@ -0,0 +1,112 @@
+// active-tag / _mixins
+@use '../utility/mixins' as *;
+
+// Builds active-tag
+@mixin uilib-active-tag() {
+	.uilib-active-tag {
+		display: flex;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		max-width: fit-content;
+		min-height: 2rem;
+		max-height: 3.125rem;
+		padding: var(--uilib-spacing-100) var(--uilib-spacing-200) var(--uilib-spacing-100) var(--uilib-spacing-300);
+
+		border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-active-tag-border-color);
+		border-radius: var(--uilib-active-tag-radius);
+
+		background-color: var(--uilib-active-tag-background-color);
+
+		cursor: pointer;
+
+		&:focus-visible {
+			@include uilib-focus;
+		}
+
+		&__icon,
+		&__cross {
+			flex-shrink: 0;
+			align-self: flex-start;
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			margin-top: var(--uilib-spacing-100);
+		}
+
+		&__cross {
+			color: var(--uilib-active-tag-cross-color);
+		}
+
+		&__label {
+			display: -webkit-box;
+
+			text-align: left;
+			text-overflow: ellipsis;
+
+			overflow: hidden;
+			-webkit-line-clamp: 2;
+			line-clamp: 2;
+			-webkit-box-orient: vertical;
+		}
+
+		.uilib-ratings-range-icons {
+			margin: 0;
+		}
+	}
+}
+
+@mixin uilib-active-tag-group() {
+	.uilib-active-tag-group {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		&__list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uilib-spacing-200);
+
+			margin: 0;
+			padding: 0;
+
+			list-style: none;
+		}
+
+		&__item {
+			&--hidden {
+				display: none;
+			}
+
+			&--buttons {
+				display: flex;
+				flex-flow: row wrap;
+				gap: var(--uilib-spacing-200) var(--uilib-spacing-300);
+				align-items: center;
+
+				min-height: 2rem; /* 32 / 16 */
+			}
+		}
+
+		&__icon {
+			--webkit-mask-image: var(--uilib-active-tag-icon);
+			mask-image: var(--uilib-active-tag-icon);
+
+			transform: rotate(0deg);
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
+		}
+
+		&[is-open] {
+			.uilib-active-tag-group__icon {
+				transform: rotate(180deg);
+			}
+		}
+
+		&__button--clear.uilib-link {
+			margin-top: calc(calc(var(--uilib-focus-gap) + var(--uilib-spacing-050)) * -1);
+		}
+	}
+}

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

@@ -0,0 +1,8 @@
+// Active tag specific variables to allow theming
+$uilib-active-tag-variables: (
+	radius: var(--uilib-border-radius-200),
+	border-color: var(--uilib-color-border-input),
+	background-color: var(--uilib-color-core-neutral),
+	cross-color: var(--uilib-color-core-interaction),
+	icon: var(--uilib-show-more-less-icon),
+) !default;

package/scss/lib/alert/_index.scss

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

package/scss/lib/alert/_mixins.scss

@@ -0,0 +1,135 @@
+// Alert / _mixins
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+// Builds alert
+@mixin uilib-alert() {
+	.uilib-alert {
+		position: relative;
+
+		min-height: calc(calc(var(--uilib-spacing-300) * 2) + var(--uilib-icon-size-small));
+		margin: var(--uilib-spacing-200) 0;
+		padding: var(--uilib-spacing-300);
+		padding-left: calc(var(--uilib-spacing-300) + var(--uilib-spacing-200) + var(--uilib-icon-size-small));
+
+		color: var(--uilib-alert-text-color);
+
+		border-color: var(--uilib-color-status-info-icon);
+		border-radius: var(--uilib-alert-radius);
+
+		background: var(--uilib-color-status-info-surface);
+
+		&::before {
+			position: absolute;
+			top: var(--uilib-spacing-300);
+			left: var(--uilib-spacing-300);
+			content: '';
+
+			display: block;
+
+			width: var(--uilib-icon-size-small);
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			background: var(--uilib-alert-icon-info-bg);
+			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-alert-icon-info-mask);
+			mask-image: var(--uilib-alert-icon-info-mask);
+		}
+	}
+
+	.uilib-alert--error {
+		border-color: var(--uilib-color-status-danger-icon);
+
+		background: var(--uilib-color-status-danger-surface);
+
+		&::before {
+			background: var(--uilib-alert-icon-error-bg);
+			-webkit-mask-image: var(--uilib-alert-icon-error-mask);
+			mask-image: var(--uilib-alert-icon-error-mask);
+		}
+	}
+
+	.uilib-alert--warning {
+		border-color: var(--uilib-color-status-warning-icon);
+
+		background: var(--uilib-color-status-warning-surface);
+
+		&::before {
+			background: var(--uilib-alert-icon-warning-bg);
+			-webkit-mask-image: var(--uilib-alert-icon-warning-mask);
+			mask-image: var(--uilib-alert-icon-warning-mask);
+		}
+	}
+
+	.uilib-alert--success {
+		border-color: var(--uilib-color-status-success-icon);
+
+		background: var(--uilib-color-status-success-surface);
+
+		&::before {
+			background: var(--uilib-alert-icon-success-bg);
+			-webkit-mask-image: var(--uilib-alert-icon-success-mask);
+			mask-image: var(--uilib-alert-icon-success-mask);
+		}
+	}
+
+	.uilib-alert__heading {
+		font: var(--uilib-typography-component-heading-small-strong);
+		text-wrap: initial;
+	}
+
+	.uilib-alert__message {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-300);
+
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.uilib-alert--list {
+		display: flex;
+		flex-flow: column;
+		gap: var(--uilib-spacing-300);
+
+		border-left-width: var(--uilib-spacing-100);
+		border-left-style: var(--uilib-stroke-style-solid);
+
+		.uilib-alert__message {
+			margin-left: calc(calc(var(--uilib-spacing-100) + var(--uilib-icon-size-small)) * -1);
+		}
+	}
+
+	.uilib-alert__link:not(:first-child) {
+		margin-top: calc(var(--uilib-spacing-300) * -1);
+	}
+
+	.uilib-alert--close {
+		padding-right: calc(var(--uilib-spacing-300) + var(--uilib-spacing-200) + var(--uilib-icon-size-xsmall));
+	}
+
+	// Extra specificity required to ensure positioning
+	.uilib-alert .uilib-alert__close {
+		position: absolute;
+		top: var(--uilib-spacing-100);
+		right: var(--uilib-spacing-100);
+
+		&:focus-visible {
+			position: absolute;
+		}
+	}
+}

package/scss/lib/alert/_variables.scss

@@ -0,0 +1,15 @@
+@use '../../variables/env-variables' as *;
+
+// alert specific variables to allow theming
+$uilib-alert-variables: (
+	icon-info-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/letter-i-circled-filled.svg'),
+	icon-info-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/letter-i-circled-filled.svg'),
+	icon-error-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/exclamation-mark-circled-filled.svg'),
+	icon-error-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/exclamation-mark-circled-filled.svg'),
+	icon-warning-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/warning.svg'),
+	icon-warning-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/warning.svg'),
+	icon-success-bg: url('#{$uilib-assets-base-url}v3/icons/tui/color/checkmark-circled-filled.svg'),
+	icon-success-mask: url('#{$uilib-assets-base-url}v3/icons/tui/color/checkmark-circled-filled.svg'),
+	radius: var(--uilib-border-radius-100),
+	text-color: var(--uilib-color-text-strong),
+) !default;

package/scss/lib/breadcrumb/_index.scss

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

package/scss/lib/breadcrumb/_mixins.scss

@@ -0,0 +1,58 @@
+// breadcrumb / _mixins
+// Builds breadcrumb
+@mixin uilib-breadcrumb() {
+	.uilib-breadcrumb {
+		&__list {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100);
+
+			margin: var(--uilib-spacing-400) 0;
+			padding: 0;
+		}
+
+		&__item {
+			position: relative;
+
+			&:not(:last-child)::after {
+				position: relative;
+				content: '';
+
+				display: inline-block;
+
+				width: var(--uilib-icon-size-xsmall);
+
+				vertical-align: middle;
+
+				background-color: currentcolor;
+				background-position: center center;
+				background-size: cover;
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+				-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-breadcrumb-icon);
+				mask-image: var(--uilib-breadcrumb-icon);
+			}
+		}
+
+		// Extra specificity required to ensure styling overide for link
+		& .uilib-breadcrumb__link:visited {
+			color: var(--uilib-color-text-link);
+		}
+
+		&__item--current .uilib-breadcrumb__link {
+			color: var(--uilib-color-text-body);
+			text-decoration: none;
+
+			pointer-events: none;
+
+			&:visited {
+				color: var(--uilib-color-text-body);
+			}
+		}
+	}
+}

package/scss/lib/breadcrumb/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../variables/env-variables' as *;
+
+// Breadcrumb specific variables to allow theming
+$uilib-breadcrumb-variables: (
+	icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+) !default;

package/scss/lib/button/_index.scss

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