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

package/scss/lib/scroller/_mixins.scss

@@ -0,0 +1,130 @@
+// scroller / _mixins
+@use 'variables' as *;
+@use '../utility/mixins' as *;
+
+// Builds scroller
+@mixin uilib-scroller() {
+	@property --uilib-scroller-start-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@property --uilib-scroller-end-fade {
+		syntax: '<length>';
+		inherits: false;
+		initial-value: 0;
+	}
+
+	@keyframes uilib-scrollfade {
+		0% {
+			--uilib-scroller-start-fade: 0;
+		}
+
+		10%,
+		100% {
+			--uilib-scroller-start-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		0%,
+		90% {
+			--uilib-scroller-end-fade: var(--uilib-scroller-fade-size);
+		}
+
+		/* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
+		100% {
+			--uilib-scroller-end-fade: 0;
+		}
+	}
+
+	.uilib-scroller {
+		$mask-vertical:
+			linear-gradient(to bottom, #0000, #ffff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
+			linear-gradient(to right, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
+		$mask-horizontal:
+			linear-gradient(to right, #0000, #fff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
+			linear-gradient(to bottom, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
+
+		position: relative;
+
+		display: block;
+
+		overflow: hidden;
+
+		&:has(.uilib-scroller__inner:focus-visible) {
+			border-radius: var(--uilib-scroller-focus-radius);
+
+			box-shadow: var(--uilib-focus-default);
+
+			&::before {
+				border-radius: var(--uilib-scroller-focus-radius);
+			}
+		}
+
+		&__inner {
+			width: 100%;
+			height: 100%;
+
+			overflow-x: hidden;
+			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+			overflow-y: auto;
+			-webkit-mask: #{$mask-vertical};
+			mask: #{$mask-vertical};
+
+			animation: uilib-scrollfade;
+			animation-timeline: --uilib-scrollfade;
+			scroll-timeline: --uilib-scrollfade y;
+
+			/* Edge legacy */
+			-ms-overflow-style: initial;
+
+			/* Firefox and new Chrome, Edge and Opera */
+			scrollbar-color: var(--uilib-scroller-thumb-color) transparent;
+			scrollbar-width: auto;
+
+			&:focus-visible::before {
+				display: none;
+			}
+
+			/* Chrome, Edge, Opera, and Safari */
+			&::-webkit-scrollbar {
+				display: initial;
+
+				width: var(--uilib-scroller-thumb-size);
+				height: var(--uilib-scroller-thumb-size);
+				-webkit-overflow-scrolling: auto;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				border: var(--uilib-spacing-100) solid transparent;
+				border-radius: var(--uilib-scroller-thumb-radius);
+
+				background-color: var(--uilib-scroller-thumb-color);
+				background-clip: padding-box;
+
+				cursor: pointer;
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--horizontal &__inner {
+			overflow-x: auto;
+			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+			overflow-y: hidden;
+			-webkit-mask: #{$mask-horizontal};
+			mask: #{$mask-horizontal};
+
+			scroll-timeline: --uilib-scrollfade x;
+		}
+
+		&--nofade &__inner {
+			-webkit-mask: none;
+			mask: none;
+		}
+	}
+}

package/scss/lib/scroller/_variables.scss

@@ -0,0 +1,9 @@
+$uilib-scroller-variables: (
+	thumb-size: var(--uilib-spacing-400),
+	thumb-radius: var(--uilib-border-radius-pill),
+	thumb-color: var(--uilib-color-other-scroll-handle),
+	fade-size: var(--uilib-spacing-400),
+	focus-radius: var(--uilib-border-radius-100),
+	// Do not advertise this. This is for the JS to use
+	bar-size: var(--uilib-spacing-400),
+) !default;

package/scss/lib/show-more-less/_index.scss

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

package/scss/lib/show-more-less/_mixins.scss

@@ -0,0 +1,90 @@
+// show more less / _mixins
+// Builds show-more-less
+@mixin uilib-show-more-less() {
+	.uilib-show-more-less {
+		display: block;
+
+		margin: var(--uilib-spacing-200) 0 var(--uilib-spacing-600);
+	}
+
+	.uilib-show-more-less__intro,
+	.uilib-show-more-less__content {
+		& > *:first-child {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.uilib-show-more-less[text-only] .uilib-show-more-less__content {
+		display: inline;
+
+		margin-right: var(--uilib-spacing-100);
+
+		& > *:last-child {
+			display: inline;
+		}
+	}
+
+	.uilib-show-more-less:not([text-only]) .uilib-show-more-less__content {
+		margin-top: var(--uilib-spacing-400);
+		margin-bottom: var(--uilib-spacing-200);
+	}
+
+	.uilib-show-more-less:not([text-only])[is-hydrated] .uilib-show-more-less__content {
+		block-size: 0;
+		content-visibility: hidden;
+
+		margin-top: 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,
+				margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+		}
+	}
+
+	.uilib-show-more-less:not([text-only])[is-open] .uilib-show-more-less__content {
+		block-size: auto;
+		content-visibility: visible;
+
+		margin-top: var(--uilib-spacing-400);
+	}
+
+	.uilib-show-more-less__button {
+		margin-top: var(--uilib-spacing-200);
+	}
+
+	.uilib-show-more-less__icon {
+		--webkit-mask-image: var(--uilib-show-more-less-icon);
+		mask-image: var(--uilib-show-more-less-icon);
+
+		transform: rotate(0deg);
+
+		@media (prefers-reduced-motion: no-preference) {
+			transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+		}
+	}
+
+	.uilib-show-more-less[is-open] .uilib-show-more-less__icon {
+		transform: rotate(180deg);
+	}
+
+	.uilib-show-more-less[text-only] .uilib-show-more-less__icon {
+		display: none;
+	}
+
+	.uilib-show-more-less--inverse {
+		color: var(--uilib-color-text-inverse);
+
+		.uilib-show-more-less__button {
+			color: var(--uilib-color-text-inverse);
+			text-decoration-color: var(--uilib-color-text-inverse);
+		}
+	}
+}

package/scss/lib/show-more-less/_variables.scss

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

package/scss/lib/skeleton/_index.scss

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

package/scss/lib/skeleton/_mixins.scss

@@ -0,0 +1,151 @@
+@use './variables' as *;
+@use '../grid/mixins' as *;
+
+@mixin uilib-skeleton() {
+	// syncing animation across all skeletons
+	@property --uilib-skeleton-position {
+		syntax: '<number>';
+		inherits: true;
+		initial-value: -1;
+	}
+
+	@keyframes shimmer {
+		from {
+			--uilib-skeleton-position: 1;
+		}
+
+		to {
+			--uilib-skeleton-position: -1;
+		}
+	}
+
+	.uilib-skeleton {
+		width: 100%;
+
+		border-radius: calc(var(--uilib-spacing-400) - var(--uilib-border-radius-100));
+
+		background: linear-gradient(
+			90deg,
+			var(--uilib-skeleton-color) 0%,
+			var(--uilib-skeleton-shimmer-color) 4%,
+			var(--uilib-skeleton-color) 8%,
+			var(--uilib-skeleton-color) 32%,
+			var(--uilib-skeleton-shimmer-color) 36%,
+			var(--uilib-skeleton-color) 40%,
+			var(--uilib-skeleton-color) 62%,
+			var(--uilib-skeleton-shimmer-color) 66%,
+			var(--uilib-skeleton-color) 70%
+		);
+		background-position-x: calc(var(--uilib-skeleton-position) * 100%);
+		background-size: 200% 100%;
+		background-attachment: fixed; // required to sync all skeletons
+
+		container-type: inline-size;
+
+		// Skeleton types
+		&--heading {
+			height: 1.5rem;
+
+			border-radius: var(--uilib-border-radius-100);
+		}
+
+		&--subheading {
+			height: 1rem;
+
+			border-radius: var(--uilib-border-radius-100);
+		}
+
+		&--text {
+			height: 1rem;
+
+			border-radius: var(--uilib-border-radius-100);
+		}
+
+		&--circle {
+			flex-shrink: 0;
+
+			width: var(--uilib-spacing-500);
+			height: var(--uilib-spacing-500);
+
+			border-radius: 50%;
+		}
+
+		&--card {
+			display: grid;
+
+			@container (min-width: 35rem) {
+				grid-template-columns: 45% 55%;
+			}
+		}
+
+		&--container {
+			padding: var(--uilib-spacing-400);
+		}
+
+		&--spacer {
+			background: transparent;
+
+			animation: none;
+
+			&:not([class*='--h-']) {
+				flex-grow: 1;
+			}
+		}
+
+		// Skeleton variants
+
+		&--outlined {
+			border: var(--uilib-stroke-size-025) solid var(--uilib-skeleton-color);
+
+			background: var(--uilib-color-core-neutral);
+		}
+
+		&--rounded-bottom {
+			border-radius: 0 0 var(--uilib-border-radius-600) var(--uilib-border-radius-600);
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			animation: shimmer 4s linear infinite;
+		}
+
+		// Width utilities
+		@for $i from 1 through 10 {
+			&--w-#{$i * 10} {
+				width: #{$i * 10%};
+			}
+			&--w-#{$i * 10}-xs {
+				@include uilib-breakpoint(xs) {
+					width: #{$i * 10%};
+				}
+			}
+		}
+
+		// Height utilities
+		@for $i from 1 through 20 {
+			&--h-#{$i} {
+				height: #{$i * 1rem};
+			}
+		}
+	}
+
+	// Skeleton Layout
+	.uilib-skeleton-layout {
+		display: flex;
+		gap: var(--uilib-spacing-200);
+
+		width: 100%;
+		container-type: inline-size;
+
+		&--gap-sm {
+			gap: var(--uilib-spacing-100);
+		}
+
+		&--column {
+			flex-direction: column;
+		}
+
+		&--justify-between {
+			justify-content: space-between;
+		}
+	}
+}

package/scss/lib/skeleton/_variables.scss

@@ -0,0 +1,8 @@
+@use 'sass:map';
+@use '../../variables/colors' as *;
+@use '../../variables/primitives' as *;
+
+$uilib-skeleton-variables: (
+	color: map.get($uilib-color-semantic, 'other-skeleton-loading'),
+	shimmer-color: map.get($uilib-primitives, 'color-neutral-20'),
+) !default;

package/scss/lib/tooltip/_index.scss

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

package/scss/lib/tooltip/_mixins.scss

@@ -0,0 +1,305 @@
+// tooltip / _mixins
+// Builds tooltip
+@mixin uilib-tooltip() {
+	.uilib-tooltip {
+		$spacing-075: 0.1875rem; /* 3px */
+		$spacing-150: 0.375rem; /* 6px */
+		$spacing-250: 0.625rem; /* 10px */
+		$overlay-space: calc(#{$spacing-250} * -1); /* 6 (pointer) + 4 (gap) */
+		$overlay-alignment: calc(#{$spacing-150} * -1); /* 6 */
+
+		position: relative;
+
+		display: inline-block;
+
+		// Extra specificity required to ensure link styling override
+		.uilib-tooltip__trigger {
+			text-decoration-style: dotted;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--icon .uilib-tooltip__trigger {
+			vertical-align: calc(#{$spacing-075} * -1);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--inverse .uilib-tooltip__trigger {
+			color: var(--uilib-color-text-inverse);
+			text-decoration-color: var(--uilib-link-decoration-color-inverse);
+		}
+
+		&--inverse.uilib-tooltip--icon .uilib-tooltip__trigger:hover {
+			background: var(--uilib-color-other-button-hover-state);
+		}
+
+		&__live {
+			position: fixed;
+			z-index: var(--uilib-layer-tooltip);
+
+			transform: translate(0, -100%);
+
+			pointer-events: none;
+		}
+
+		&__overlay {
+			position: absolute;
+			left: 50%;
+			bottom: #{$overlay-space};
+
+			width: max-content;
+			max-width: min(14rem, calc(100vw - 1rem)); /* 224 / 16 */
+			padding: var(--uilib-spacing-100) var(--uilib-spacing-200);
+
+			color: var(--uilib-tooltip-color-text);
+			font: var(--uilib-typography-body-medium);
+			white-space: normal;
+
+			border-radius: var(--uilib-tooltip-radius);
+
+			background: var(--uilib-tooltip-color-bg);
+
+			cursor: default;
+
+			opacity: 0;
+			transform: translate(-50%, 100%);
+
+			&--show {
+				opacity: 1;
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition: opacity var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast);
+			}
+
+			&::before {
+				position: absolute;
+				top: 0;
+				left: 50%;
+				content: '';
+
+				display: block;
+
+				border-color: transparent transparent var(--uilib-tooltip-color-bg);
+				border-style: solid;
+				border-width: 0 0.5rem 0.5rem;
+
+				transform: translate(-50%, -75%);
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&--left {
+				left: #{$overlay-alignment};
+
+				transform: translate(0, 100%);
+
+				&::before {
+					left: var(--uilib-spacing-200);
+
+					transform: translate(0, -75%);
+				}
+
+				&.uilib-tooltip__overlay--center {
+					top: 50%;
+					left: #{$overlay-space};
+					bottom: unset;
+
+					transform: translate(-100%, -50%);
+
+					&::before {
+						top: 50%;
+						left: unset;
+						right: 0;
+
+						border-color: transparent transparent transparent var(--uilib-tooltip-color-bg);
+						border-width: 0.5rem 0 0.5rem 0.5rem;
+
+						transform: translate(75%, -50%);
+					}
+				}
+			}
+
+			&--right {
+				left: unset;
+				right: #{$overlay-alignment};
+
+				transform: translate(0, 100%);
+
+				&::before {
+					left: unset;
+					right: var(--uilib-spacing-200);
+
+					transform: translate(0, -75%);
+				}
+
+				&.uilib-tooltip__overlay--center {
+					top: 50%;
+					bottom: unset;
+					right: #{$overlay-space};
+
+					transform: translate(100%, -50%);
+
+					&::before {
+						top: 50%;
+						left: 0;
+						right: unset;
+
+						border-color: transparent var(--uilib-tooltip-color-bg) transparent transparent;
+						border-width: 0.5rem 0.5rem 0.5rem 0;
+
+						transform: translate(-75%, -50%);
+					}
+				}
+			}
+
+			&--top {
+				top: #{$overlay-space};
+				bottom: unset;
+
+				transform: translate(-50%, -100%);
+
+				&::before {
+					top: unset;
+					bottom: 0;
+
+					border-color: var(--uilib-tooltip-color-bg) transparent transparent;
+					border-width: 0.5rem 0.5rem 0;
+
+					transform: translate(-50%, 75%);
+				}
+
+				&.uilib-tooltip__overlay--left {
+					transform: translate(0, -100%);
+
+					&::before {
+						transform: translate(0, 75%);
+					}
+
+					&.uilib-tooltip__overlay--center {
+						top: #{$overlay-alignment};
+
+						transform: translate(-100%, 0);
+
+						&::before {
+							top: var(--uilib-spacing-200);
+							bottom: unset;
+
+							transform: translate(75%, 0);
+						}
+					}
+				}
+
+				&.uilib-tooltip__overlay--right {
+					transform: translate(0, -100%);
+
+					&::before {
+						transform: translate(0, 75%);
+					}
+
+					&.uilib-tooltip__overlay--center {
+						top: #{$overlay-alignment};
+
+						transform: translate(100%, 0);
+
+						&::before {
+							top: var(--uilib-spacing-200);
+							bottom: unset;
+
+							transform: translate(-75%, 0);
+						}
+					}
+				}
+			}
+
+			&--bottom {
+				&.uilib-tooltip__overlay--left {
+					transform: translate(0, -100%);
+
+					&.uilib-tooltip__overlay--center {
+						top: unset;
+						bottom: #{$overlay-alignment};
+
+						transform: translate(-100%, 0);
+
+						&::before {
+							top: unset;
+							bottom: var(--uilib-spacing-200);
+
+							transform: translate(75%, 0);
+						}
+					}
+				}
+
+				&.uilib-tooltip__overlay--right {
+					transform: translate(-100%, -100%);
+
+					&.uilib-tooltip__overlay--center {
+						top: unset;
+						bottom: #{$overlay-alignment};
+
+						transform: translate(100%, 0);
+
+						&::before {
+							top: unset;
+							bottom: var(--uilib-spacing-200);
+
+							transform: translate(-75%, 0);
+						}
+					}
+				}
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--icon .uilib-tooltip__overlay,
+		&__live--icon .uilib-tooltip__overlay {
+			bottom: calc(#{$overlay-space} + var(--uilib-spacing-200));
+
+			&--left,
+			&--right {
+				&.uilib-tooltip__overlay--center {
+					top: calc(50% + var(--uilib-spacing-050));
+					bottom: unset;
+				}
+			}
+
+			&--left {
+				left: 0;
+
+				&.uilib-tooltip__overlay--center {
+					left: calc(var(--uilib-spacing-050) * -1);
+				}
+			}
+
+			&--right {
+				left: unset;
+				right: 0;
+
+				&.uilib-tooltip__overlay--center {
+					right: calc(var(--uilib-spacing-050) * -1);
+				}
+			}
+
+			&--top {
+				top: calc(#{$overlay-space} + var(--uilib-spacing-200));
+				bottom: unset;
+
+				&.uilib-tooltip__overlay--left,
+				&.uilib-tooltip__overlay--right {
+					&.uilib-tooltip__overlay--center {
+						top: 0;
+					}
+				}
+			}
+
+			&--bottom {
+				&.uilib-tooltip__overlay--left,
+				&.uilib-tooltip__overlay--right {
+					&.uilib-tooltip__overlay--center {
+						top: unset;
+						bottom: 0;
+					}
+				}
+			}
+		}
+	}
+}