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

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/grid/_column.scss

@@ -0,0 +1,51 @@
+// grid column / _mixins
+@use 'mixins' as *;
+@use 'variables' as *;
+@use '../../variables/grid' as *;
+@use '../../variables/breakpoints' as *;
+
+@mixin uilib-generate-grid-for-resolution($resolution: '') {
+	$prefix: '';
+
+	@if $resolution != '' {
+		$prefix: -#{$resolution};
+	}
+
+	// Columns
+	@for $i from 1 through $uilib-grid-columns {
+		#{$uilib-grid-selector-column}-#{$prefix}-#{$i} {
+			@include uilib-grid-col-size($i);
+		}
+	}
+
+	// Order
+	@for $i from 1 through $uilib-grid-columns {
+		#{$uilib-grid-selector-column}--order#{$prefix}-#{$i} {
+			@include uilib-grid-col-order($i);
+		}
+	}
+
+	// Offset
+	@for $i from 1 through $uilib-grid-columns {
+		#{$uilib-grid-selector-column}--offset#{$prefix}-#{$i} {
+			@include uilib-grid-col-offset($i);
+		}
+	}
+	#{$uilib-grid-selector-column}--order#{$prefix}-first {
+		@include uilib-grid-col-order-first;
+	}
+	#{$uilib-grid-selector-column}--order#{$prefix}-last {
+		@include uilib-grid-col-order-last;
+	}
+	#{$uilib-grid-selector-column}--order#{$prefix}-reset {
+		@include uilib-grid-col-order-reset;
+	}
+}
+
+@include uilib-generate-grid-for-resolution;
+
+@each $resolution, $size in $uilib-breakpoints {
+	@include uilib-breakpoint($resolution) {
+		@include uilib-generate-grid-for-resolution($resolution);
+	}
+}

package/scss/lib/grid/_container.scss

@@ -0,0 +1,21 @@
+// grid container / _mixins
+@use 'mixins' as *;
+@use 'variables' as *;
+
+#{$uilib-grid-selector} {
+	@include uilib-grid-container;
+}
+
+$axes: '', 'x', 'y';
+
+@each $axis in $axes {
+	@if $axis == '' {
+		#{$uilib-grid-selector}--no-gutters {
+			@include uilib-grid-no-gutters;
+		}
+	} @else {
+		#{$uilib-grid-selector}--no-gutters-#{$axis} {
+			@include uilib-grid-no-gutters($axis);
+		}
+	}
+}

package/scss/lib/grid/_index.scss

@@ -0,0 +1,3 @@
+// grid / index
+@forward 'column';
+@forward 'container';

package/scss/lib/grid/_mixins.scss

@@ -0,0 +1,126 @@
+// grid / _mixins
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../functions' as *;
+@use '../../variables/grid' as *;
+@use '../../variables/breakpoints' as *;
+
+/// Generates code wrapped into media query, like @media (min-width: 960px) { [your code] }
+///
+/// @param {String} $breakpoint - key of resolution
+/// @param {String} $logic - additional logic for media query
+///
+/// @example scss - Usage
+/// @include uilib-breakpoint(lg) { display: none; }
+/// @include uilib-breakpoint(lg, '(max-width: #{map.get($uilib-breakpoints, xl)})') { display: block }
+///
+/// @example css - CSS output
+/// @media (min-width: 960px) { display: none; }
+/// @media (min-width: 960px) and (max-width: 1921px) { display: block; }
+
+@mixin uilib-breakpoint($breakpoint, $logic: false) {
+	@if $logic {
+		@media #{$logic} and (min-width: map.get($map: $uilib-breakpoints, $key: $breakpoint)) {
+			@content;
+		}
+	} @else {
+		@media (min-width: map.get($map: $uilib-breakpoints, $key: $breakpoint)) {
+			@content;
+		}
+	}
+}
+
+@mixin uilib-container-breakpoint($size, $container-name: null, $logic: null) {
+	/* stylelint-disable container-name-pattern */
+	$breakpoint: map.get($uilib-breakpoints, $size);
+	$has-logic: $logic != null and $logic != false and #{$logic} != '';
+
+	// Expect `$logic` like "(max-width: 47.5rem)" or "(max-width: 47.5rem) and (prefers-reduced-motion: no-preference)"
+	$logic-suffix: if(
+		sass($has-logic): ' and #{$logic}' ; else: '',
+	);
+
+	@if not $breakpoint {
+		@error "Breakpoint `#{$size}` not found in $uilib-breakpoints.";
+	}
+
+	@if $container-name {
+		@container #{$container-name} (min-width: #{$breakpoint})#{$logic-suffix} {
+			@content;
+		}
+	} @else {
+		@container (min-width: #{$breakpoint})#{$logic-suffix} {
+			@content;
+		}
+	}
+	/* stylelint-enable container-name-pattern */
+}
+
+/* --- CSS Grid           ------- */
+@mixin uilib-grid-container {
+	display: grid;
+	grid-template-columns: repeat($uilib-grid-columns, 1fr);
+	gap: $uilib-grid-gutter-width $uilib-grid-gutter-height;
+
+	max-width: $uilib-layout-max-width;
+	margin: 0 auto;
+
+	& > * {
+		// disabling grid columns for tiny screens (less than 320px)
+		@media (max-width: #{map.get($uilib-breakpoints, xxs)}) {
+			grid-column: auto / span 12;
+		}
+	}
+}
+
+@mixin uilib-grid-no-gutters($axis: '') {
+	// add param x/y
+	@if $axis == 'x' {
+		column-gap: 0;
+	}
+
+	@if $axis == 'y' {
+		row-gap: 0;
+	} @else {
+		gap: 0;
+	}
+}
+
+@mixin uilib-grid-col-size($size) {
+	@if meta.type-of($size) != 'number' {
+		@error 'Value for `uilib-grid-col-size` should be a number.';
+	}
+
+	/* stylelint-disable-next-line order/order */
+	grid-column-end: span $size;
+}
+
+@mixin uilib-grid-col-offset($offset) {
+	@if meta.type-of($offset) != 'number' {
+		@error 'Value for `uilib-grid-col-offset` should be a number.';
+	}
+
+	/* stylelint-disable-next-line order/order */
+	grid-column-start: (1 + $offset);
+}
+
+@mixin uilib-grid-col-order($i) {
+	@if meta.type-of($i) != 'number' {
+		@error 'Value for `uilib-grid-col-order` should be a number.';
+	}
+
+	/* stylelint-disable-next-line order/order */
+	order: $i;
+}
+
+@mixin uilib-grid-col-order-first {
+	order: -1;
+}
+
+@mixin uilib-grid-col-order-last {
+	order: (1 + $uilib-grid-columns);
+}
+
+@mixin uilib-grid-col-order-reset {
+	order: 0;
+}

package/scss/lib/grid/_variables.scss

@@ -0,0 +1,11 @@
+// Grid
+@use 'sass:map';
+
+$uilib-grid-selectors-default: (
+	grid: '.uilib-grid',
+	column: '.uilib-grid__col',
+);
+$uilib-grid-selectors-custom: () !default;
+$uilib-grid-selectors-config: map.merge($uilib-grid-selectors-default, $uilib-grid-selectors-custom);
+$uilib-grid-selector: map.get($uilib-grid-selectors-config, 'grid');
+$uilib-grid-selector-column: map.get($uilib-grid-selectors-config, 'column');

package/scss/lib/icon/_index.scss

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

package/scss/lib/icon/_mixins.scss

@@ -0,0 +1,54 @@
+// icon / _mixins
+@use 'sass:map';
+@use 'variables' as *;
+@use '../../variables/icons' as *;
+@use '../../variables/env-variables' as *;
+
+// Builds icon
+@mixin uilib-icon() {
+	.uilib-icon {
+		display: flex;
+
+		width: var(--uilib-icon-size-default);
+
+		aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+		background: currentcolor;
+		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;
+
+		/* stylelint-disable-next-line order/order */
+		@each $size, $value in $uilib-icon-sizes {
+			&--#{$size} {
+				width: var(--uilib-icon-size-#{$size});
+			}
+		}
+	}
+}
+
+// Set mask image
+@mixin uilib-icon-mask-image($theme, $name, $type: 'standard') {
+	$theme-name: map.get($uilib-theme-icon-map-config, $theme);
+
+	/* stylelint-disable-next-line order/order */
+	--icon-url: url('#{$uilib-assets-base-url}v3/icons/#{$theme-name}/#{$type}/#{$name}.svg');
+	-webkit-mask-image: var(--icon-url);
+	mask-image: var(--icon-url);
+}
+
+// Set background image - for multicolor icons
+@mixin uilib-icon-background-image($theme, $name, $type: 'color') {
+	$theme-name: map.get($uilib-theme-icon-map-config, $theme);
+
+	/* stylelint-disable-next-line order/order */
+	--icon-url: url('#{$uilib-assets-base-url}v3/icons/#{$theme-name}/#{$type}/#{$name}.svg');
+	background-color: transparent;
+	background-image: var(--icon-url);
+}

package/scss/lib/icon/_variables.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+$uilib-theme-icon-map-default: (
+	tui: 'tui',
+	crystalski: 'crystalski',
+	firstchoice: 'firstchoice',
+	vipselection: 'tui',
+);
+$uilib-theme-icon-map-custom: () !default;
+$uilib-theme-icon-map-config: map.merge($uilib-theme-icon-map-default, $uilib-theme-icon-map-custom);

package/scss/lib/icon-button/_index.scss

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

package/scss/lib/icon-button/_mixins.scss

@@ -0,0 +1,168 @@
+// icon button / _mixins
+@use '../utility/mixins' as *;
+
+// Builds icon button
+@mixin uilib-icon-button() {
+	.uilib-icon-button {
+		position: relative;
+
+		display: inline-flex;
+		flex-flow: row nowrap;
+		justify-content: center;
+		align-items: center;
+
+		width: 2.75rem; /* 44px */
+		padding: 0;
+		aspect-ratio: 1/1;
+
+		color: var(--uilib-icon-button-primary-color);
+		font: var(--uilib-typography-label-medium);
+		text-decoration: none;
+
+		border-radius: var(--uilib-icon-button-radius);
+
+		background: var(--uilib-icon-button-primary-bg-color);
+
+		cursor: pointer;
+
+		appearance: none;
+
+		@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),
+				transform var(--uilib-motion-timing-inout) var(--uilib-motion-duration-medium);
+		}
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-primary-hover-bg-color);
+		}
+
+		&:focus-visible {
+			@include uilib-focus;
+		}
+
+		&:active:not(:disabled, .uilib-icon-button--disabled) {
+			transform: scale(0.96);
+		}
+
+		&__content {
+			flex-grow: 1;
+		}
+
+		&__icon {
+			pointer-events: none;
+		}
+	}
+
+	.uilib-icon-button--ghost {
+		color: var(--uilib-icon-button-ghost-color);
+
+		background: var(--uilib-icon-button-ghost-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-ghost-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--secondary {
+		color: var(--uilib-icon-button-secondary-color);
+
+		border: var(--uilib-stroke-size-050) var(--uilib-stroke-style-solid) var(--uilib-icon-button-secondary-color);
+
+		background: var(--uilib-icon-button-secondary-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-secondary-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--control {
+		color: var(--uilib-icon-button-control-color);
+
+		background: var(--uilib-icon-button-control-bg-color);
+
+		box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-control-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--promotion {
+		color: var(--uilib-icon-button-promotion-color);
+
+		background: var(--uilib-icon-button-promotion-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-promotion-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--search {
+		color: var(--uilib-icon-button-search-color);
+
+		background: var(--uilib-icon-button-search-bg-color);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-search-hover-bg-color);
+		}
+	}
+
+	.uilib-icon-button--shortlist {
+		color: var(--uilib-icon-button-shortlist-color);
+
+		background: var(--uilib-icon-button-shortlist-bg-color);
+
+		box-shadow: 0 0 var(--uilib-spacing-100) 0 var(--uilib-color-other-elevation);
+
+		&:hover:not(:disabled, .uilib-icon-button--disabled) {
+			background: var(--uilib-icon-button-shortlist-hover-bg-color);
+		}
+
+		.uilib-icon-button__icon--selected {
+			display: none;
+		}
+
+		&[aria-pressed='true'] .uilib-icon-button__icon {
+			display: none;
+
+			&--selected {
+				display: block;
+			}
+		}
+	}
+
+	.uilib-icon-button:disabled,
+	.uilib-icon-button--disabled {
+		color: var(--uilib-icon-button-disabled-color);
+
+		border-color: var(--uilib-icon-button-disabled-bg-color);
+
+		background: var(--uilib-icon-button-disabled-bg-color);
+
+		box-shadow: none;
+
+		cursor: default;
+	}
+
+	.uilib-icon-button--ghost:disabled,
+	.uilib-icon-button--ghost.uilib-icon-button--disabled {
+		color: var(--uilib-icon-button-disabled-bg-color);
+
+		border-color: var(--uilib-icon-button-ghost-bg-color);
+
+		background: var(--uilib-icon-button-ghost-bg-color);
+
+		cursor: default;
+	}
+
+	.uilib-icon-button--small {
+		width: 2rem; /* 32px */
+	}
+
+	.uilib-icon-button--large {
+		width: 4rem; /* 64px */
+	}
+}

package/scss/lib/icon-button/_variables.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables/colors' as *;
+
+// Icon button specific variables to allow theming
+$uilib-icon-button-variables: (
+	radius: var(--uilib-border-radius-pill),
+	ghost-color: var(--uilib-color-core-interaction),
+	ghost-bg-color: transparent,
+	ghost-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
+	primary-color: var(--uilib-color-text-inverse),
+	primary-bg-color: var(--uilib-color-core-interaction),
+	primary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-interaction'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	secondary-color: var(--uilib-color-core-interaction),
+	secondary-bg-color: var(--uilib-color-core-neutral),
+	secondary-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
+	control-color: var(--uilib-color-core-interaction),
+	control-bg-color: var(--uilib-color-core-neutral),
+	control-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'core-interaction'), 80%),
+	promotion-color: var(--uilib-color-text-inverse),
+	promotion-bg-color: var(--uilib-color-promotion),
+	promotion-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'promotion'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	search-color: var(--uilib-color-text-inverse),
+	search-bg-color: var(--uilib-color-core-brand-strong),
+	search-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-brand-strong'), map.get($uilib-color-semantic, 'core-neutral'), 80%),
+	shortlist-color: var(--uilib-color-text-promotion),
+	shortlist-bg-color: var(--uilib-color-core-neutral),
+	shortlist-hover-bg-color: color.mix(map.get($uilib-color-semantic, 'core-neutral'), map.get($uilib-color-semantic, 'promotion'), 90%),
+	disabled-color: var(--uilib-color-other-disabled-strong),
+	disabled-bg-color: var(--uilib-color-other-disabled-soft),
+) !default;

package/scss/lib/image/_index.scss

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