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

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

@@ -0,0 +1,72 @@
+// input count / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds input count
+@mixin uilib-input-count() {
+	.uilib-input-count {
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200);
+
+		margin: var(--uilib-spacing-300) 0 0;
+		padding: 0;
+
+		&__input {
+			@include uilib-visually-hidden;
+		}
+
+		&__label {
+			position: relative;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			min-width: var(--uilib-input-count-size);
+			min-height: var(--uilib-input-count-size);
+			padding: var(--uilib-spacing-100) var(--uilib-spacing-200);
+
+			color: var(--uilib-input-count-color-text);
+			font: var(--uilib-input-count-font);
+
+			border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-input-count-color-border);
+			border-radius: var(--uilib-input-count-radius);
+
+			background: var(--uilib-input-count-color-bg);
+
+			cursor: pointer;
+
+			@media (prefers-reduced-motion: no-preference) {
+				transition:
+					border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium),
+					color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+			}
+
+			&::after {
+				position: absolute;
+				inset: calc(calc(var(--uilib-spacing-100) + var(--uilib-stroke-size-025)) * -1); /* 4px + border */
+				content: '';
+
+				display: block;
+			}
+		}
+
+		&__input:checked + .uilib-input-count__label {
+			color: var(--uilib-input-count-color-selected-text);
+
+			border-color: var(--uilib-input-count-color-selected);
+
+			background: var(--uilib-input-count-color-selected);
+		}
+
+		// Include active to prevent focus flicker on click
+		&__input:focus-visible + .uilib-input-count__label {
+			@include uilib-focus;
+		}
+	}
+
+	.uilib-form-row--reduced .uilib-input-count {
+		margin-bottom: var(--uilib-spacing-300);
+	}
+}

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

@@ -0,0 +1,13 @@
+@use '../../../variables/env-variables' as *;
+
+// Input count specific variables to allow theming
+$uilib-input-count-variables: (
+	radius: var(--uilib-border-radius-100),
+	color-bg: var(--uilib-color-canvas-default),
+	color-border: var(--uilib-color-border-input),
+	color-text: var(--uilib-color-text-strong),
+	color-selected: var(--uilib-color-core-interaction),
+	color-selected-text: var(--uilib-color-text-inverse),
+	font: var(--uilib-typography-body-medium-strong),
+	size: var(--uilib-spacing-800) /* 32px / 16px */,
+) !default;

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

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

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

@@ -0,0 +1,139 @@
+// radio / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds radio
+@mixin uilib-input-radio() {
+	.uilib-input-radio {
+		&__input {
+			@include uilib-visually-hidden;
+		}
+
+		&__label {
+			position: relative;
+
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-300);
+			align-items: flex-start;
+
+			padding: var(--uilib-spacing-300);
+
+			border-radius: var(--uilib-border-radius-100);
+
+			&::before,
+			&::after {
+				content: '';
+
+				display: block;
+				flex-shrink: 0;
+
+				width: 1.25rem; /* 20px */
+				height: 1.25rem;
+
+				border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-input);
+				border-radius: var(--uilib-border-radius-circle);
+
+				background: var(--uilib-color-core-neutral);
+
+				cursor: pointer;
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition:
+						border-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						border-width var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						background-color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						color var(--uilib-motion-timing-inout) var(--uilib-motion-duration-fast),
+						transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+				}
+			}
+
+			&::after {
+				position: absolute;
+				top: var(--uilib-spacing-300);
+				left: var(--uilib-spacing-300);
+
+				border: 0.375rem solid var(--uilib-color-core-interaction); /* 6 */
+
+				background: var(--uilib-color-core-neutral);
+
+				transform: scale(0);
+
+				pointer-events: none;
+			}
+		}
+
+		&__input:checked + .uilib-input-radio__label {
+			&::before {
+				border-color: var(--uilib-color-core-interaction);
+
+				background-color: var(--uilib-color-core-interaction);
+			}
+
+			&::after {
+				transform: scale(1);
+			}
+		}
+
+		.uilib-input-radio__label-content {
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-medium);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--title .uilib-input-radio__label-content {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		&--strong .uilib-input-radio__label-content {
+			color: var(--uilib-input-radio-text-color-strong);
+		}
+
+		&__input:focus-visible + .uilib-input-radio__label .uilib-input-radio__label-content {
+			@include uilib-focus;
+
+			/* stylelint-disable-next-line order/order */
+			position: static;
+
+			&::before {
+				border-radius: var(--uilib-border-radius-100);
+			}
+		}
+
+		&__input:disabled + .uilib-input-radio__label {
+			&::before {
+				border-color: var(--uilib-color-other-disabled-soft);
+
+				background: var(--uilib-color-other-disabled-soft);
+
+				cursor: default;
+			}
+
+			&::after {
+				cursor: default;
+			}
+		}
+
+		&__input:disabled:checked + .uilib-input-radio__label {
+			&::before {
+				border-color: var(--uilib-color-other-disabled-soft);
+
+				background: var(--uilib-color-other-disabled-soft);
+			}
+
+			&::after {
+				border-color: var(--uilib-color-other-disabled-soft);
+			}
+		}
+
+		.uilib-ratings-range-icons {
+			display: flex;
+
+			margin: 0;
+		}
+	}
+
+	.uilib-input-radio-list__item .uilib-input-radio-list {
+		padding-left: var(--uilib-spacing-600);
+	}
+}

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

@@ -0,0 +1,6 @@
+@use '../../../variables/env-variables' as *;
+
+// Input radio specific variables to allow theming
+$uilib-input-radio-variables: (
+	text-color-strong: var(--uilib-color-text-strong),
+) !default;

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

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

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-text/_index.scss

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