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

package/scss/lib/forms/input-slider/_mixins.scss

@@ -0,0 +1,147 @@
+// slider / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds reusable track styling
+@mixin uilib-input-slider-track {
+	width: 100%;
+	height: var(--uilib-input-slider-track-height);
+
+	cursor: pointer;
+}
+
+// Builds reusable thumb styling
+@mixin uilib-input-slider-thumb {
+	width: var(--uilib-input-slider-thumb-size);
+	height: var(--uilib-input-slider-thumb-size);
+	box-sizing: border-box;
+
+	border: var(--uilib-stroke-size-050) solid var(--uilib-input-slider-thumb-border-color);
+	border-radius: var(--uilib-input-slider-thumb-radius);
+
+	background: var(--uilib-color-core-neutral);
+
+	cursor: grab;
+}
+
+// Builds slider
+@mixin uilib-input-slider() {
+	.uilib-input-slider {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200);
+		justify-content: space-between;
+
+		margin-top: var(--uilib-spacing-200);
+
+		&__label {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-body-medium);
+		}
+
+		&__input {
+			--uilib-input-slider-position: 0;
+			--uilib-input-slider-track-background: linear-gradient(
+				to right,
+				var(--uilib-input-slider-track-color-selected),
+				var(--uilib-input-slider-track-color-selected) var(--uilib-input-slider-position),
+				var(--uilib-input-slider-track-color) var(--uilib-input-slider-position),
+				var(--uilib-input-slider-track-color)
+			);
+
+			width: 100%;
+			margin: calc(calc(var(--uilib-input-slider-thumb-size) - var(--uilib-input-slider-track-height)) / 2) 0;
+
+			background: transparent;
+
+			-webkit-appearance: none;
+			appearance: none;
+
+			&::-webkit-slider-runnable-track {
+				@include uilib-input-slider-track;
+
+				/* stylelint-disable-next-line order/order */
+				border: 0;
+				border-radius: var(--uilib-input-slider-track-radius);
+
+				background: var(--uilib-input-slider-track-background);
+			}
+
+			&::-webkit-slider-thumb {
+				@include uilib-input-slider-thumb;
+
+				/* stylelint-disable-next-line order/order */
+				margin-top: calc((var(--uilib-input-slider-track-height) - var(--uilib-input-slider-thumb-size)) / 2);
+
+				-webkit-appearance: none;
+			}
+
+			&::-moz-focus-outer {
+				border: 0;
+			}
+
+			&::-moz-range-track {
+				@include uilib-input-slider-track;
+
+				/* stylelint-disable-next-line order/order */
+				height: calc(var(--uilib-input-slider-track-height) / 2);
+
+				border: 0;
+				border-radius: var(--uilib-input-slider-track-radius);
+
+				background: var(--uilib-input-slider-track-background);
+			}
+
+			&::-moz-range-thumb {
+				@include uilib-input-slider-thumb;
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&:focus-visible {
+				box-shadow: none;
+
+				&::before {
+					display: none;
+				}
+
+				&::-webkit-slider-thumb {
+					box-shadow: var(--uilib-focus-default);
+				}
+
+				&::-moz-range-thumb {
+					box-shadow: var(--uilib-focus-default);
+				}
+			}
+
+			&:active {
+				&::-webkit-slider-thumb {
+					cursor: grabbing;
+				}
+
+				&::-moz-range-thumb {
+					cursor: grabbing;
+				}
+			}
+
+			&:disabled,
+			&:active:disabled {
+				&::-webkit-slider-thumb,
+				&::-webkit-slider-runnable-track {
+					cursor: default;
+				}
+
+				&::-moz-range-thumb {
+					cursor: default;
+				}
+			}
+		}
+	}
+
+	.uilib-input-slider-text-input,
+	.uilib-input-slider-text-input.uilib-input-text {
+		width: 5.625rem; /* 90 / 16 */
+
+		.uilib-input-text__button {
+			display: none;
+		}
+	}
+}

package/scss/lib/forms/input-slider/_variables.scss

@@ -0,0 +1,12 @@
+@use '../../../variables/env-variables' as *;
+
+// Input slider specific variables to allow theming
+$uilib-input-slider-variables: (
+	track-color: var(--uilib-color-other-disabled-strong),
+	track-color-selected: var(--uilib-color-core-interaction),
+	track-height: 0.375rem,
+	/* 6 / 16 */ track-radius: var(--uilib-border-radius-pill),
+	thumb-size: 2rem,
+	/* 32 / 16 */ thumb-radius: var(--uilib-border-radius-circle),
+	thumb-border-color: var(--uilib-color-core-interaction),
+) !default;

package/scss/lib/forms/input-stepper/_index.scss

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

package/scss/lib/forms/input-stepper/_mixins.scss

@@ -0,0 +1,143 @@
+// stepper / _mixins
+@use 'sass:map';
+@use '../../utility/mixins' as *;
+@use '../../grid/mixins' as *;
+@use '../../../variables/breakpoints' as *;
+
+// Builds stepper
+@mixin uilib-input-stepper() {
+	tui-uilib-input-stepper:defined {
+		--button-spacing: calc(3 * var(--uilib-spacing-050)); // 6px
+		margin-left: calc(var(--button-spacing) * -1);
+
+		.uilib-input-stepper__button {
+			display: inline-flex;
+
+			margin: var(--button-spacing); // 6px
+			&--decrement .uilib-icon-button__icon {
+				-webkit-mask-image: var(--uilib-input-stepper-icon-decrement);
+				mask-image: var(--uilib-input-stepper-icon-decrement);
+			}
+
+			&--increment .uilib-icon-button__icon {
+				-webkit-mask-image: var(--uilib-input-stepper-icon-increment);
+				mask-image: var(--uilib-input-stepper-icon-increment);
+			}
+		}
+
+		.uilib-input-stepper__input {
+			&.uilib-input-text {
+				width: 2rem;
+				height: 2rem;
+				min-height: 2rem; // override default component prop
+				padding: var(--uilib-spacing-100);
+				box-sizing: border-box;
+
+				border: 0;
+
+				background-color: transparent;
+
+				input {
+					text-align: center;
+				}
+
+				&:has(.uilib-input-text__input:focus) {
+					&::before {
+						// reduce focus box sizes
+						--size: calc(100% - var(--uilib-spacing-200));
+						top: var(--uilib-spacing-100);
+						left: var(--uilib-spacing-100);
+					}
+				}
+			}
+		}
+	}
+
+	.uilib-input-stepper {
+		display: flex;
+		align-items: center;
+
+		margin: 0;
+	}
+
+	.uilib-form-row.uilib-form-row--stepper {
+		// container for query
+		container-name: uilib-form-row-stepper;
+		container-type: inline-size;
+
+		width: 100%;
+
+		@include uilib-breakpoint(xs) {
+			.uilib-form-row__wrapper {
+				max-width: 17.5rem; /* 280 / 16 */
+			}
+		}
+
+		.uilib-form-row__wrapper {
+			--controlbox-minwidth: 7.125rem; // based on 2x(IconButton) + Input widths - 6px spacing'
+
+			display: grid;
+			grid-template:
+				'uilib-input-stepper-label uilib-input-stepper-controls' auto
+				'uilib-input-stepper-hint  uilib-input-stepper-controls' auto
+				'uilib-input-stepper-error uilib-input-stepper-error' auto
+				/ minmax(0, 1fr) minmax(var(--controlbox-minwidth), max-content);
+			column-gap: var(--uilib-spacing-600);
+			align-items: center;
+
+			width: 100%;
+		}
+
+		.uilib-form-row__label {
+			grid-area: uilib-input-stepper-label;
+
+			// if there is no hint, label takes over hint's row space
+			&:not(:has(+ .uilib-form-row__hint)) {
+				grid-row: 1 / 3;
+			}
+		}
+
+		.uilib-form-row__hint {
+			grid-area: uilib-input-stepper-hint;
+		}
+
+		.uilib-form-row__input {
+			grid-area: uilib-input-stepper-controls;
+
+			justify-self: end;
+			align-items: start;
+
+			margin: 0;
+
+			input {
+				font: var(--uilib-typography-body-large-strong);
+			}
+		}
+
+		.uilib-form-row__error {
+			grid-area: uilib-input-stepper-error;
+
+			margin-top: var(--uilib-spacing-200);
+		}
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@container uilib-form-row-stepper (max-width: calc(15rem - 1px)) {
+		.uilib-form-row__wrapper {
+			grid-template:
+				'label' auto
+				'hint' auto
+				'controls' auto
+				'error' auto
+				/ 1fr;
+		}
+
+		.uilib-form-row__input {
+			justify-self: stretch;
+		}
+
+		.uilib-form-row__error {
+			margin-top: 0;
+		}
+	}
+}

package/scss/lib/forms/input-stepper/_variables.scss

@@ -0,0 +1,7 @@
+@use '../../../variables/env-variables' as *;
+
+// Input stepper specific variables to allow theming
+$uilib-input-stepper-variables: (
+	icon-increment: url('#{$uilib-assets-base-url}v3/icons/tui/standard/plus.svg'),
+	icon-decrement: url('#{$uilib-assets-base-url}v3/icons/tui/standard/minus.svg'),
+) !default;

package/scss/lib/forms/input-switch/_index.scss

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

package/scss/lib/forms/input-switch/_mixins.scss

@@ -0,0 +1,122 @@
+// switch / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds Switch input
+@mixin uilib-input-switch() {
+	.uilib-form-row {
+		&--input-switch {
+			display: flex;
+			justify-self: flex-start;
+
+			width: fit-content;
+			margin-top: var(--uilib-spacing-200);
+			margin-bottom: var(--uilib-spacing-200);
+		}
+
+		&__input {
+			margin-top: 0;
+		}
+	}
+
+	.uilib-input-switch {
+		display: flex;
+		flex-wrap: nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: self-start;
+
+		margin-top: var(--uilib-spacing-050);
+		padding: var(--uilib-spacing-200) 0;
+
+		color: var(--uilib-color-text-body);
+		font: var(--uilib-typography-body-medium);
+
+		cursor: pointer;
+
+		&--title {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-form-row-label-font);
+		}
+
+		&:has(.uilib-input-switch__input[disabled]) {
+			cursor: auto;
+		}
+
+		&:has(.uilib-input-switch__input:focus-visible) {
+			@include uilib-focus;
+
+			&::before {
+				border-radius: var(--uilib-border-radius-100);
+			}
+		}
+
+		&__input {
+			position: absolute;
+
+			width: 0;
+			height: 0;
+
+			visibility: visible;
+
+			opacity: 0;
+
+			&:checked + .uilib-input-switch__track {
+				border-color: var(--uilib-input-switch-track-border-color-selected);
+
+				background-color: var(--uilib-input-switch-track-color-selected);
+
+				&::before {
+					background-color: var(--uilib-input-switch-thumb-color-selected);
+
+					transform: translateX(115%);
+				}
+			}
+
+			&[disabled] + .uilib-input-switch__track {
+				border-color: var(--uilib-input-switch-track-border-color-disabled);
+
+				background-color: var(--uilib-input-switch-track-color-disabled);
+
+				&::before {
+					background-color: var(--uilib-input-switch-thumb-color-selected);
+				}
+			}
+		}
+
+		&__track {
+			display: flex;
+			align-items: center;
+
+			width: var(--uilib-input-switch-track-width);
+			height: var(--uilib-input-switch-track-height);
+			min-width: var(--uilib-input-switch-track-width);
+			margin-top: calc(var(--uilib-spacing-050) * -1);
+			padding: var(--uilib-spacing-100);
+
+			border: var(--uilib-stroke-size-025) solid var(--uilib-input-switch-track-border-color);
+			border-radius: var(--uilib-input-switch-track-radius);
+
+			background-color: var(--uilib-input-switch-track-color);
+
+			&::before {
+				content: '';
+
+				display: block;
+
+				width: var(--uilib-input-switch-thumb-size);
+				height: var(--uilib-input-switch-thumb-size);
+
+				border-radius: var(--uilib-input-switch-thumb-radius);
+
+				background-color: var(--uilib-input-switch-thumb-color);
+
+				box-shadow: 0 0.06rem 0.125rem var(--uilib-color-other-elevation);
+
+				transform: translateX(0);
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
+			}
+		}
+	}
+}

package/scss/lib/forms/input-switch/_variables.scss

@@ -0,0 +1,18 @@
+@use '../../../variables/env-variables' as *;
+
+// Input switch specific variables to allow theming
+$uilib-input-switch-variables: (
+	track-color: var(--uilib-color-core-neutral),
+	track-color-selected: var(--uilib-color-core-interaction),
+	track-color-disabled: var(--uilib-color-other-disabled-soft),
+	track-border-color: var(--uilib-color-border-input),
+	track-border-color-selected: var(--uilib-color-border-interaction),
+	track-border-color-disabled: var(--uilib-color-other-disabled-soft),
+	track-height: 1.5rem,
+	track-width: 2.75rem,
+	/* 24 / 16 */ track-radius: var(--uilib-border-radius-pill),
+	thumb-size: 1rem,
+	/* 16 / 16 */ thumb-radius: var(--uilib-border-radius-circle),
+	thumb-color: var(--uilib-color-other-disabled-strong),
+	thumb-color-selected: var(--uilib-color-core-neutral),
+) !default;

package/scss/lib/forms/input-text/_index.scss

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

package/scss/lib/forms/input-text/_mixins.scss

@@ -0,0 +1,155 @@
+// text / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds text input
+@mixin uilib-input-text() {
+	.uilib-input-text {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		width: 100%;
+		min-height: 2.375rem; /* 38 / 16 */
+		padding: var(--uilib-spacing-200);
+
+		border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-input);
+		border-radius: var(--uilib-border-radius-100);
+
+		background: var(--uilib-color-core-neutral);
+
+		&__icon,
+		&__icon.uilib-icon {
+			background: var(--uilib-color-text-strong);
+		}
+
+		&__input {
+			flex-grow: 1;
+			flex-shrink: 1;
+
+			min-width: 0;
+			min-height: 2.375rem; /* 38 / 16 */
+			margin: calc(var(--uilib-spacing-200) * -1);
+			padding: var(--uilib-spacing-200);
+
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-medium);
+
+			border: 0;
+
+			background: transparent;
+
+			appearance: none;
+
+			&:focus::before,
+			&:focus-visible::before {
+				display: none; /* Fix for iOS and Android double focus */
+			}
+
+			&:disabled {
+				color: var(--uilib-color-text-body);
+
+				& + .uilib-input-text__button {
+					display: none;
+				}
+			}
+
+			&[aria-invalid='true']:not(:disabled) {
+				color: var(--uilib-color-text-danger);
+			}
+
+			// Hide placeholder as should not be used
+			&::placeholder {
+				opacity: 0;
+			}
+
+			/* stylelint-disable-next-line selector-no-vendor-prefix */
+			&::-webkit-input-placeholder {
+				opacity: 0;
+			}
+
+			/* stylelint-disable-next-line selector-no-vendor-prefix */
+			&::-moz-placeholder {
+				opacity: 0;
+			}
+
+			&[type='date']::-webkit-calendar-picker-indicator {
+				inline-size: unset;
+				block-size: unset;
+				width: 1.25rem; /* 20 / 16 */
+				aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+				margin-left: var(--uilib-spacing-200);
+				padding: 0;
+
+				background: var(--uilib-color-core-interaction);
+				-webkit-mask-image: var(--uilib-input-text-icon-calendar);
+				mask-image: var(--uilib-input-text-icon-calendar);
+				-webkit-mask-repeat: no-repeat;
+				mask-repeat: no-repeat;
+				-webkit-mask-position: center;
+				mask-position: center;
+				-webkit-mask-size: cover;
+				mask-size: cover;
+
+				cursor: pointer;
+			}
+		}
+
+		&:has(.uilib-input-text__input[aria-invalid='true']) {
+			border-color: var(--uilib-color-border-danger);
+		}
+
+		&:has(.uilib-input-text__input:disabled) {
+			border-color: var(--uilib-color-border-input);
+
+			background: var(--uilib-color-other-disabled-soft);
+
+			.uilib-input-text__icon,
+			.uilib-input-text__icon.uilib-icon {
+				background: var(--uilib-color-other-disabled-strong);
+			}
+		}
+
+		&:has(.uilib-input-text__input:focus) {
+			@include uilib-focus;
+		}
+
+		&__valid,
+		&__valid.uilib-icon {
+			flex-shrink: 0;
+
+			background: var(--uilib-color-status-success-icon);
+		}
+
+		&__button {
+			flex-shrink: 0;
+
+			margin: calc(-1 * calc(var(--uilib-spacing-100) + var(--uilib-spacing-050))) calc(-1 * var(--uilib-spacing-100));
+
+			&--invisible.uilib-icon-button {
+				display: none;
+			}
+
+			.uilib-icon-button__icon {
+				-webkit-mask-image: var(--uilib-input-text-icon-clear);
+				mask-image: var(--uilib-input-text-icon-clear);
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&--show .uilib-icon-button__icon {
+				-webkit-mask-image: var(--uilib-input-text-icon-show);
+				mask-image: var(--uilib-input-text-icon-show);
+			}
+
+			&--hide .uilib-icon-button__icon {
+				-webkit-mask-image: var(--uilib-input-text-icon-hide);
+				mask-image: var(--uilib-input-text-icon-hide);
+			}
+
+			&:focus-visible {
+				@include uilib-focus;
+			}
+		}
+	}
+}

package/scss/lib/forms/input-text/_variables.scss

@@ -0,0 +1,9 @@
+@use '../../../variables/env-variables' as *;
+
+// Input text specific variables to allow theming
+$uilib-input-text-variables: (
+	icon-clear: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
+	icon-show: url('#{$uilib-assets-base-url}v3/icons/tui/standard/view.svg'),
+	icon-hide: url('#{$uilib-assets-base-url}v3/icons/tui/standard/view-hidden.svg'),
+	icon-calendar: url('#{$uilib-assets-base-url}v3/icons/tui/standard/calendar.svg'),
+) !default;

package/scss/lib/forms/textarea/_index.scss

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