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

package/scss/lib/forms/textarea/_mixins.scss

@@ -0,0 +1,88 @@
+// textarea / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds textarea
+@mixin uilib-textarea() {
+	.uilib-textarea {
+		display: flex;
+		flex-direction: column;
+
+		max-width: 42.5rem; /* 680px / 16 */
+
+		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);
+
+		&:focus-within {
+			@include uilib-focus;
+		}
+
+		&:has(textarea[aria-invalid='true']) {
+			border-color: var(--uilib-color-border-danger);
+		}
+
+		&:has(textarea:disabled) {
+			border-color: var(--uilib-color-border-input);
+
+			background: var(--uilib-color-other-disabled-soft);
+		}
+
+		textarea {
+			flex: 1;
+
+			width: 100%;
+			min-width: 0;
+			min-height: 4rem; /* 38px / 16 */
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-300);
+
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-medium);
+
+			border: 0;
+			border-radius: var(--uilib-border-radius-100);
+
+			background: transparent;
+
+			appearance: none;
+			resize: none;
+
+			/* Edge legacy */
+			-ms-overflow-style: initial;
+
+			scrollbar-width: thin;
+
+			scrollbar-color: var(--uilib-scroller-thumb-color) transparent;
+
+			&:focus::before,
+			&:focus-visible::before {
+				display: none; /* Fix for iOS and Android double focus */
+			}
+
+			&:focus-visible::before {
+				display: none;
+			}
+
+			&::-webkit-scrollbar-button {
+				display: none;
+
+				width: 0;
+				height: 0;
+			}
+
+			&::-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;
+			}
+		}
+	}
+}

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

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

package/scss/lib/hero/_mixins.scss

@@ -0,0 +1,336 @@
+// hero / _mixins
+@use 'sass:map';
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+@use '../../variables/breakpoints' as *;
+
+// Builds hero
+@mixin uilib-hero() {
+	$hero-image-height: 21.063rem; /* 337 / 16 */
+	$hero-image-slim-height: 15.4375rem; /* 247 / 16 */
+	$hero-height-medium: 39.5rem; /* 632 / 16 */
+	$hero-height-slim-medium: 25rem; /* 400 / 16 */
+	$hero-height-large: 34.375rem; /* 550 / 16 */
+	$hero-height-slim-large: 24.375rem; /* 390 / 16 */
+	$hero-content-width: 18.5rem; /* 296 / 16 */
+	$hero-content-center-width: 42.188rem; /* 675 / 16 */
+
+	.uilib-hero {
+		position: relative;
+
+		container-type: inline-size;
+		container-name: uilib-hero;
+
+		&__image.uilib-image {
+			position: absolute;
+			inset: auto auto 0 50%;
+
+			min-width: 100%;
+			min-height: #{$hero-image-height};
+
+			background-size: min(60%, 30rem);
+
+			transform: translateX(-50%);
+
+			mask-image: var(--uilib-hero-image-mask);
+			mask-size: cover;
+			mask-repeat: no-repeat;
+			mask-position: center bottom;
+		}
+
+		&__inner {
+			position: relative;
+
+			max-width: var(--uilib-layout-max-width);
+			margin: 0 auto;
+			padding-bottom: calc(#{$hero-image-height} - var(--uilib-hero-image-mask-height-small));
+		}
+
+		&__content {
+			position: relative;
+
+			max-width: 100%;
+			padding: var(--uilib-spacing-800);
+			box-sizing: content-box;
+
+			color: var(--uilib-hero-content-text-color);
+			font: var(--uilib-typography-component-heading-xlarge);
+			text-align: center;
+
+			border-radius: var(--uilib-hero-content-radius) var(--uilib-hero-content-radius) 0 0;
+
+			mask-image: var(--uilib-hero-image-mask);
+			mask-size: cover;
+			mask-repeat: no-repeat;
+			mask-position: center bottom;
+
+			background: var(--uilib-hero-content-bg-small);
+		}
+
+		&__heading {
+			margin-bottom: var(--uilib-spacing-200);
+
+			font: var(--uilib-typography-display-small);
+
+			strong {
+				font: var(--uilib-typography-display-large);
+			}
+		}
+
+		&__caveat {
+			margin-top: var(--uilib-spacing-200);
+
+			font: var(--uilib-typography-body-small-strong);
+		}
+
+		em {
+			color: var(--uilib-hero-content-text-highlight-color);
+			font-style: normal;
+		}
+
+		&__button {
+			display: inline-block;
+
+			margin-top: var(--uilib-spacing-800);
+
+			border-radius: var(--uilib-button-radius);
+
+			&::after {
+				position: absolute;
+				inset: 0;
+				content: '';
+
+				display: block;
+			}
+
+			&:focus-visible {
+				position: static;
+
+				&::before {
+					display: none;
+				}
+
+				.uilib-button {
+					@include uilib-focus();
+				}
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--center {
+			.uilib-hero__image.uilib-image {
+				inset: 0 auto 0 50%;
+
+				height: 100%;
+
+				border-radius: var(--uilib-hero-image-radius-small);
+
+				background-image: none;
+			}
+
+			.uilib-hero__inner {
+				padding-top: var(--uilib-spacing-400);
+				padding-right: var(--uilib-spacing-400);
+				padding-left: var(--uilib-spacing-400);
+			}
+
+			.uilib-hero__content {
+				padding: var(--uilib-spacing-600);
+
+				border-radius: var(--uilib-hero-content-radius);
+
+				background: var(--uilib-hero-content-bg);
+
+				mask-image: none;
+			}
+		}
+
+		&--flagship {
+			.uilib-hero__content {
+				color: var(--uilib-hero-flagship-content-text-color);
+
+				background: var(--uilib-hero-flagship-content-bg-small);
+			}
+
+			em {
+				color: var(--uilib-hero-flagship-content-text-highlight-color);
+			}
+		}
+
+		&--illustration {
+			.uilib-hero__image.uilib-image {
+				inset: 0 auto 0 50%;
+
+				min-height: 100%;
+
+				border-radius: var(--uilib-hero-image-radius-small);
+
+				background-image: none;
+
+				@container uilib-hero (max-width: #{map.get($uilib-breakpoints, xs)}) {
+					img {
+						object-position: bottom center;
+					}
+				}
+			}
+
+			.uilib-hero__content {
+				background: transparent;
+			}
+
+			.uilib-hero__caveat {
+				margin-top: var(--uilib-spacing-200);
+
+				font: var(--uilib-typography-body-small);
+			}
+		}
+
+		&--slim {
+			.uilib-hero__image.uilib-image {
+				min-height: #{$hero-image-slim-height};
+			}
+
+			.uilib-hero__inner {
+				padding-bottom: calc(#{$hero-image-slim-height} - var(--uilib-hero-image-mask-height-small));
+			}
+
+			.uilib-hero__content {
+				font: var(--uilib-typography-label-medium);
+			}
+		}
+
+		&--reduced {
+			min-height: 0;
+
+			.uilib-hero__image.uilib-image {
+				display: none;
+			}
+
+			.uilib-hero__inner {
+				padding-bottom: 0;
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@include uilib-container-breakpoint(xs, 'uilib-hero') {
+			&__image.uilib-image {
+				height: 100%;
+
+				border-radius: var(--uilib-hero-image-radius-large);
+			}
+
+			&__inner {
+				display: flex;
+				flex-flow: row nowrap;
+				justify-content: flex-start;
+				align-items: flex-start;
+
+				min-height: #{$hero-height-medium};
+				padding: var(--uilib-spacing-600) var(--uilib-spacing-1600) var(--uilib-spacing-1200);
+			}
+
+			&__content {
+				width: #{$hero-content-width};
+				padding: var(--uilib-spacing-600) var(--uilib-spacing-800);
+
+				text-align: left;
+
+				border-radius: var(--uilib-hero-content-radius);
+
+				mask: none;
+
+				background: var(--uilib-hero-content-bg);
+			}
+
+			&__heading {
+				font: var(--uilib-typography-heading-xxlarge);
+
+				strong {
+					font: var(--uilib-typography-display-small);
+				}
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&--right {
+				.uilib-hero__inner {
+					justify-content: flex-end;
+				}
+			}
+
+			&--center {
+				.uilib-hero__image.uilib-image {
+					border-radius: var(--uilib-hero-image-radius-large);
+				}
+
+				.uilib-hero__inner {
+					justify-content: center;
+				}
+
+				.uilib-hero__content {
+					width: #{$hero-content-center-width};
+					padding: var(--uilib-spacing-800);
+
+					text-align: center;
+
+					border-radius: var(--uilib-border-radius-1000) var(--uilib-border-radius-1000) var(--uilib-border-radius-1800)
+						var(--uilib-border-radius-1800);
+				}
+			}
+
+			&--flagship {
+				.uilib-hero__content {
+					background: var(--uilib-hero-flagship-content-bg);
+				}
+			}
+
+			&--illustration {
+				.uilib-hero__image.uilib-image {
+					border-radius: var(--uilib-hero-image-radius-large);
+
+					background-position: center;
+				}
+
+				&__heading {
+					font: var(--uilib-typography-heading-small);
+
+					strong {
+						font: var(--uilib-typography-display-large);
+					}
+				}
+			}
+
+			&--slim {
+				.uilib-hero__image.uilib-image {
+					min-height: 100%;
+				}
+
+				.uilib-hero__inner {
+					min-height: #{$hero-height-slim-medium};
+					padding-bottom: var(--uilib-spacing-1200);
+				}
+			}
+
+			&--reduced {
+				.uilib-hero__image.uilib-image {
+					display: block;
+				}
+
+				.uilib-hero__inner {
+					padding-bottom: var(--uilib-spacing-1200);
+				}
+			}
+		}
+
+		@include uilib-container-breakpoint(sm, 'uilib-hero') {
+			&__inner {
+				min-height: #{$hero-height-large};
+				padding: var(--uilib-spacing-600) 10rem var(--uilib-spacing-1200); /* 160 / 16 */
+			}
+
+			/* stylelint-disable-next-line order/order */
+			&--slim &__inner {
+				min-height: #{$hero-height-slim-large};
+			}
+		}
+	}
+}

package/scss/lib/hero/_variables.scss

@@ -0,0 +1,21 @@
+@use 'sass:color';
+@use '../../variables/env-variables' as *;
+
+// Hero specific variables to allow theming
+$uilib-hero-variables: (
+	image-radius-small: var(--uilib-border-radius-600) var(--uilib-border-radius-600) 0 0,
+	image-radius-large: var(--uilib-border-radius-1800) var(--uilib-border-radius-1800) 0 0,
+	image-mask:
+		url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NzM4IiB2aWV3Qm94PSIwIDAgMTkyMCA2NzM4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjAwN18yKSI+CjxwYXRoIGQ9Ik0xOTIwIDY1NzUuNDJWMEgwVjY1NzUuMDZDMjg4LjQzNSA2Njc5LjI3IDYxNC44MjIgNjczOCA5NjAuNSA2NzM4QzEzMDUuNzggNjczOCAxNjMxLjgxIDY2NzkuNCAxOTIwIDY1NzUuNDJaIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjAwN18yIj4KPHJlY3Qgd2lkdGg9IjE5MjAiIGhlaWdodD0iNjczOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K),
+	image-mask-height-small: var(--uilib-spacing-1200),
+	image-mask-height-large: var(--uilib-spacing-1600),
+	content-radius: var(--uilib-border-radius-600),
+	content-bg-small: var(--uilib-color-core-surface),
+	content-bg: color-mix(in srgb, var(--uilib-color-core-neutral) 90%, transparent),
+	content-text-color: var(--uilib-color-text-strong),
+	content-text-highlight-color: var(--uilib-color-text-promotion),
+	flagship-content-bg-small: var(--uilib-color-core-brand-strong),
+	flagship-content-bg: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent),
+	flagship-content-text-color: var(--uilib-color-text-inverse),
+	flagship-content-text-highlight-color: var(--uilib-color-text-inverse),
+) !default;

package/scss/lib/icon/_index.scss

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