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

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;
+					}
+				}
+			}
+		}
+	}
+}

package/scss/lib/tooltip/_variables.scss

@@ -0,0 +1,8 @@
+@use '../../variables/env-variables' as *;
+
+// Tooltip specific variables to allow theming
+$uilib-tooltip-variables: (
+	radius: var(--uilib-border-radius-100),
+	color-bg: var(--uilib-color-text-body),
+	color-text: var(--uilib-color-text-inverse),
+) !default;

package/scss/lib/typography/_index.scss

@@ -0,0 +1,14 @@
+// typography / index
+@use 'variables' as *;
+@use 'mixins' as *;
+@use '../../variables/typography' as *;
+
+// Basic heading and text styles
+@include uilib-typography;
+
+// Utility text styles
+@each $modifier in $uilib-typography-modifiers {
+	#{$uilib-typography-modifier-selector}#{$modifier} {
+		@include uilib-typography-modifier($modifier);
+	}
+}

package/scss/lib/typography/_mixins.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'variables' as *;
+@use '../utility/mixins' as *;
+
+@mixin uilib-typography {
+	@each $token, $class in $uilib-typography-selectors-config {
+		#{$class} {
+			@if string.index($token, 'uilib-color-text-strong') {
+				margin: var(--uilib-spacing-600) 0 var(--uilib-spacing-200);
+			} @else if string.index($token, 'uilib-color-text-body') {
+				margin: 0 0 var(--uilib-spacing-400);
+			}
+
+			@if string.index($token, 'uilib-color') {
+				color: var(--#{$token});
+			} @else {
+				font: var(--#{$token});
+			}
+		}
+	}
+}
+
+@mixin uilib-typography-modifier($modifier) {
+	@include uilib-build-css-props(map.get($uilib-typography-modifiers-config, $modifier));
+}

package/scss/lib/typography/_variables.scss

@@ -0,0 +1,58 @@
+// text sizes
+@use 'sass:map';
+
+$uilib-typography-selectors-default: (
+	uilib-color-text-strong: '.uilib-heading',
+	uilib-typography-heading-xxlarge: '.uilib-heading--xxlarge',
+	uilib-typography-heading-xlarge: '.uilib-heading--xlarge',
+	uilib-typography-heading-large: '.uilib-heading--large',
+	uilib-typography-heading-medium: '.uilib-heading--medium',
+	uilib-typography-heading-small: '.uilib-heading--small',
+	uilib-color-text-body: '.uilib-body',
+	uilib-color-text-inverse: '.uilib-heading--inverse, .uilib-body--inverse',
+	uilib-typography-body-large: '.uilib-body--large',
+	uilib-typography-body-medium: '.uilib-body--medium',
+	uilib-typography-body-small: '.uilib-body--small',
+);
+$uilib-typography-selectors-custom: () !default;
+$uilib-typography-selectors-config: map.merge($uilib-typography-selectors-default, $uilib-typography-selectors-custom);
+
+// Text modifier
+$uilib-typography-modifier-selector: '.uilib-text--' !default;
+$uilib-typography-modifiers-default: (
+	uppercase: (
+		'text-transform': uppercase,
+	),
+	wrap: (
+		'white-space': normal,
+	),
+	nowrap: (
+		'white-space': nowrap,
+	),
+	'wrap-balance': (
+		'text-wrap': balance,
+	),
+	break: (
+		'word-wrap': break-word,
+		'word-break': break-word,
+	),
+	'align-start': (
+		'text-align': start,
+	),
+	'align-center': (
+		'text-align': center,
+	),
+	'align-end': (
+		'text-align': end,
+	),
+	'tabular-nums': (
+		'font-variant-numeric': tabular-nums,
+	),
+	'oldstyle-nums': (
+		'font-variant-numeric': oldstyle-nums,
+	),
+);
+$uilib-typography-modifiers-custom: () !default;
+$uilib-typography-modifiers-config: map.merge($uilib-typography-modifiers-default, $uilib-typography-modifiers-custom);
+$uilib-typography-modifiers:
+	'uppercase', 'wrap', 'nowrap', 'break', 'align-start', 'align-center', 'align-end', 'tabular-nums', 'oldstyle-nums' !default;