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

package/scss/variables/_colors.scss

@@ -0,0 +1,58 @@
+// colors
+@use 'sass:map';
+@use 'sass:color';
+@use 'primitives' as *;
+@use '../lib/utility/mixins' as util;
+
+$uilib-color-semantic: (
+	core-interaction: map.get($uilib-primitives, 'color-blue-70'),
+	core-brand: map.get($uilib-primitives, 'color-coolblue-50'),
+	core-brand-strong: map.get($uilib-primitives, 'color-blue-100'),
+	core-surface: map.get($uilib-primitives, 'color-coolblue-20'),
+	core-neutral: map.get($uilib-primitives, 'color-neutral-10'),
+	text-strong: map.get($uilib-primitives, 'color-blue-100'),
+	text-body: map.get($uilib-primitives, 'color-neutral-90'),
+	text-link: map.get($uilib-primitives, 'color-blue-70'),
+	text-link-visited: map.get($uilib-primitives, 'color-purple-80'),
+	text-link-visited-inverse: map.get($uilib-primitives, 'color-purple-30'),
+	text-inverse: map.get($uilib-primitives, 'color-neutral-10'),
+	text-promotion: map.get($uilib-primitives, 'color-red-80'),
+	text-danger: map.get($uilib-primitives, 'color-red-80'),
+	status-success-surface: map.get($uilib-primitives, 'color-green-20'),
+	status-danger-surface: map.get($uilib-primitives, 'color-red-20'),
+	status-warning-surface: map.get($uilib-primitives, 'color-orange-20'),
+	status-info-surface: map.get($uilib-primitives, 'color-blue-20'),
+	status-success-icon: map.get($uilib-primitives, 'color-green-80'),
+	status-danger-icon: map.get($uilib-primitives, 'color-red-80'),
+	status-warning-icon: map.get($uilib-primitives, 'color-orange-80'),
+	status-info-icon: map.get($uilib-primitives, 'color-blue-100'),
+	canvas-default: map.get($uilib-primitives, 'color-neutral-10'),
+	canvas-contrast: map.get($uilib-primitives, 'color-neutral-20'),
+	border-interaction: map.get($uilib-primitives, 'color-blue-70'),
+	border-brand-strong: map.get($uilib-primitives, 'color-blue-100'),
+	border-input: map.get($uilib-primitives, 'color-neutral-70'),
+	border-card: map.get($uilib-primitives, 'color-neutral-40'),
+	border-danger: map.get($uilib-primitives, 'color-red-80'),
+	border-inverse: map.get($uilib-primitives, 'color-neutral-10'),
+	border-divider: map.get($uilib-primitives, 'color-neutral-40'),
+	promotion: map.get($uilib-primitives, 'color-red-80'),
+	other-disabled-soft: map.get($uilib-primitives, 'color-neutral-40'),
+	other-disabled-strong: map.get($uilib-primitives, 'color-neutral-70'),
+	other-elevation: color.scale(map.get($uilib-primitives, 'color-neutral-100'), $alpha: -60%),
+	other-scrim: color.scale(map.get($uilib-primitives, 'color-neutral-100'), $alpha: -20%),
+	other-active-state-tint: color.scale(map.get($uilib-primitives, 'color-blue-20'), $alpha: -70%),
+	other-button-hover-state: color.scale(map.get($uilib-primitives, 'color-neutral-10'), $alpha: -80%),
+	other-secondary-button-hover-state: color.scale(map.get($uilib-primitives, 'color-blue-20'), $alpha: -70%),
+	other-skeleton-loading: map.get($uilib-primitives, 'color-neutral-40'),
+	brand-trip-advisor: map.get($uilib-primitives, 'color-brand-trip-advisor-green'),
+	brand-paypal: map.get($uilib-primitives, 'color-brand-paypal-blue'),
+	other-scroll-handle: map.get($uilib-primitives, 'color-neutral-50'),
+);
+
+// color palette
+// use theme tui-base as basline
+@mixin uilib-color-palette-base-vars($colors) {
+	$base-colors: map.merge($uilib-color-semantic, $colors);
+
+	@include util.uilib-build-css-vars('color', $base-colors);
+}

package/scss/variables/_directions.scss

@@ -0,0 +1,8 @@
+$uilib-sides: (
+	't': 'top',
+	'r': 'right',
+	'b': 'bottom',
+	'l': 'left',
+	'x': 'x',
+	'y': 'y',
+) !default;

package/scss/variables/_display-values.scss

@@ -0,0 +1,9 @@
+$uilib-display-values: (
+	'block': block,
+	'inline': inline,
+	'inline-block': inline-block,
+	'flex': flex,
+	'grid': grid,
+	'table': table,
+	'none': none,
+) !default;

package/scss/variables/_elevations.scss

@@ -0,0 +1,17 @@
+// Elevations
+@use 'sass:map';
+@use '../lib/utility/mixins' as util;
+
+$uilib-elevation-base: (
+	'none': none,
+	// 0 0 2 0 / 16px
+	100: 0 0 0.125rem 0 var(--uilib-color-other-elevation),
+	// 0 0 4 0 / 16px
+	200: 0 0 0.25rem 0 var(--uilib-color-other-elevation),
+	// 0 0 8 0 / 16px
+	300: 0 0 0.5rem 0 var(--uilib-color-other-elevation),
+) !default;
+
+@mixin uilib-elevation-base-vars() {
+	@include util.uilib-build-css-vars('elevation', $uilib-elevation-base);
+}

package/scss/variables/_env-variables.scss

@@ -0,0 +1 @@
+$uilib-assets-base-url: 'https://mwa.tui.com/shared/mwa/assets/' !default;

package/scss/variables/_focus.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use 'sass:color';
+@use 'primitives' as *;
+@use '../lib/utility/mixins' as util;
+
+$uilib-focus-default:
+	0 0 0 0.125rem map.get($uilib-primitives, 'color-neutral-10'),
+	0 0 0 0.25rem map.get($uilib-primitives, 'color-blue-70'),
+	0 0 0 0.375rem color.scale(map.get($uilib-primitives, 'color-blue-70'), $alpha: -60%);
+$uilib-focus-base: (
+	default: $uilib-focus-default,
+	size: calc(var(--uilib-spacing-050) * 3),
+	gap: var(--uilib-spacing-050),
+) !default;

package/scss/variables/_grid.scss

@@ -0,0 +1,21 @@
+// grid
+$uilib-grid-size: 0.25rem !default; // 4px
+$uilib-grid-columns: 12 !default;
+$uilib-grid-gutter-width: $uilib-grid-size * 4; // 16px
+$uilib-grid-gutter-height: $uilib-grid-size * 4; // 16px
+
+// layout
+$uilib-layout-max-width: 80rem; // 1280px
+$uilib-layout-app-height: 100dvh;
+
+@mixin uilib-grid-base-vars() {
+	// Grid
+	--uilib-grid-size: #{$uilib-grid-size};
+	--uilib-grid-columns: #{$uilib-grid-columns};
+	--uilib-grid-gutter-width: #{$uilib-grid-gutter-width};
+	--uilib-grid-gutter-height: #{$uilib-grid-gutter-height};
+
+	// Layout
+	--uilib-layout-max-width: #{$uilib-layout-max-width};
+	--uilib-layout-app-height: #{$uilib-layout-app-height};
+}

package/scss/variables/_icons.scss

@@ -0,0 +1,26 @@
+@use '../lib/utility/mixins' as util;
+
+// icon sizes
+$uilib-icon-sizes: (
+	// 16px
+	xsmall: 1rem,
+	// 20px
+	small: 1.25rem,
+	// 24px
+	medium: 1.5rem,
+	// 32px
+	large: 2rem,
+	// 36px
+	xlarge: 2.25rem,
+	// 40px
+	xxlarge: 2.5rem,
+	// 48px
+	xxxlarge: 3rem
+) !default;
+
+// generate icon size variables
+@mixin uilib-icon-base-vars($sizes) {
+	--uilib-icon-size-default: 1.25rem;
+
+	@include util.uilib-build-css-vars('icon-size', $sizes);
+}

package/scss/variables/_layers.scss

@@ -0,0 +1,20 @@
+// Layers
+@use 'sass:map';
+@use '../lib/utility/mixins' as util;
+
+$uilib-layers-base: (
+	hidden: -1,
+	default: 0,
+	top: 1,
+	dropdown: 1000,
+	sticky: 1500,
+	fixed: 2000,
+	overlay: 2500,
+	modal: 3000,
+	popover: 3500,
+	tooltip: 4000,
+) !default;
+
+@mixin uilib-layers-base-vars() {
+	@include util.uilib-build-css-vars('layer', $uilib-layers-base);
+}

package/scss/variables/_motion.scss

@@ -0,0 +1,27 @@
+// Elevations
+@use 'sass:map';
+@use '../lib/utility/mixins' as util;
+
+$uilib-motion: (
+	'duration': (
+		'slow': 0.5s,
+		'medium': 0.35s,
+		'fast': 0.2s,
+	),
+	'timing': (
+		// EaseInOut - cubic-bezier(0.42, 0, 0.58, 1)
+		'inout': ease-in-out,
+		// EaseInSine
+		'in': cubic-bezier(0.12, 0, 0.39, 0),
+		// EaseOutSine
+		'out': cubic-bezier(0.61, 1, 0.88, 1),
+		// EaseOutBack
+		'brand': cubic-bezier(0.34, 1.56, 0.64, 1),
+	),
+) !default;
+
+@mixin uilib-motion-base-vars($motion) {
+	@each $name, $value in $motion {
+		@include util.uilib-build-css-vars('motion-#{$name}', $value);
+	}
+}

package/scss/variables/_prefix.scss

@@ -0,0 +1 @@
+$app-prefix: '' !default;

package/scss/variables/_primitives.scss

@@ -0,0 +1,100 @@
+$uilib-primitives: (
+	color-blue-100: #1b115c,
+	color-blue-90: #072d92,
+	color-blue-80: #0a3cc2,
+	color-blue-70: #0c4bf3,
+	color-blue-60: #3567f6,
+	color-blue-50: #6d93f8,
+	color-blue-40: #94b0fa,
+	color-blue-30: #b6c8fc,
+	color-blue-20: #d8e2fd,
+	color-blue-10: #ecf1fe,
+
+	color-coolblue-100: #054461,
+	color-coolblue-90: #076692,
+	color-coolblue-80: #0a88c2,
+	color-coolblue-70: #0caaf3,
+	color-coolblue-60: #38b9f5,
+	color-coolblue-50: #70cbf4,
+	color-coolblue-40: #a9dff8,
+	color-coolblue-30: #c6eafb,
+	color-coolblue-20: #e2f4fd,
+	color-coolblue-10: #f0fafe,
+
+	color-green-100: #05423d,
+	color-green-90: #246f49,
+	color-green-80: #2ba168,
+	color-green-70: #30b675,
+	color-green-60: #61c48d,
+	color-green-50: #87d2a6,
+	color-green-40: #a9e0bf,
+	color-green-30: #c5e4cd,
+	color-green-20: #dff6eb,
+	color-green-10: #effbf5,
+
+	color-red-100: #600609,
+	color-red-90: #90090e,
+	color-red-80: #c00c12,
+	color-red-70: #f00f17,
+	color-red-60: #f23a41,
+	color-red-50: #f66f74,
+	color-red-40: #f89699,
+	color-red-30: #fab7b9,
+	color-red-20: #fde2e3,
+	color-red-10: #feecec,
+
+	color-orange-100: #663d00,
+	color-orange-90: #995c00,
+	color-orange-80: #cc7a00,
+	color-orange-70: #f90,
+	color-orange-60: #ffab2e,
+	color-orange-50: #ffc266,
+	color-orange-40: #ffd28f,
+	color-orange-30: #ffe0b2,
+	color-orange-20: #ffefd6,
+	color-orange-10: #fff7eb,
+
+	color-neutral-100: #000,
+	color-neutral-90: #4c4c4c,
+	color-neutral-80: #666,
+	color-neutral-70: #737373,
+	color-neutral-60: #969696,
+	color-neutral-50: #b9b9b9,
+	color-neutral-40: #dcdcdc,
+	color-neutral-30: #ebebeb,
+	color-neutral-20: #f5f5f5,
+	color-neutral-10: #fff,
+
+	color-purple-100: #39115c,
+	color-purple-90: #510792,
+	color-purple-80: #6c0ac2,
+	color-purple-70: #870cf3,
+	color-purple-60: #9c35f6,
+	color-purple-50: #b76df8,
+	color-purple-40: #ca94fa,
+	color-purple-30: #dbb6fc,
+	color-purple-20: #ecd8fd,
+	color-purple-10: #f5ecfe,
+
+	color-brand-trip-advisor-green: #00aa6c,
+	color-brand-paypal-blue: #253b80,
+
+	// 11px
+	font-size-40: 0.6875rem,
+	// 13px
+	font-size-60: 0.8125rem,
+	// 14px
+	font-size-80: 0.875rem,
+	// 16px - baseline
+	font-size-100: 1rem,
+	// 18px
+	font-size-120: 1.125rem,
+	// 20px
+	font-size-140: 1.25rem,
+	// 23px
+	font-size-160: 1.4375rem,
+	// 26px
+	font-size-190: 1.625rem,
+	// 29px
+	font-size-220: 1.8125rem,
+);

package/scss/variables/_spacing.scss

@@ -0,0 +1,38 @@
+$uilib-spacing: (
+	'auto': auto,
+	'none': 0,
+	// 2 / 16px
+	'050': 0.125rem,
+	// 4 / 16px
+	'100': 0.25rem,
+	// 8 / 16px
+	'200': 0.5rem,
+	// 12 / 16px
+	'300': 0.75rem,
+	// 16px
+	'400': 1rem,
+	// 20 / 16px
+	'500': 1.25rem,
+	// 24 / 16px
+	'600': 1.5rem,
+	// 28 / 16px
+	'700': 1.75rem,
+	// 32 / 16px
+	'800': 2rem,
+	// 36 / 16px
+	'900': 2.25rem,
+	// 40 / 16px
+	'1000': 2.5rem,
+	// 44 / 16px
+	'1100': 2.75rem,
+	// 48 / 16px
+	'1200': 3rem,
+	// 52 / 16px
+	'1300': 3.25rem,
+	// 56 / 16px
+	'1400': 3.5rem,
+	// 60 / 16px
+	'1500': 3.75rem,
+	// 64 / 16px
+	'1600': 4rem,
+) !default;

package/scss/variables/_strokes.scss

@@ -0,0 +1,18 @@
+// Strokes
+
+// Strokes / size @16px
+$uilib-stroke-sizes: (
+	// 1 / 16px
+	'025': 0.0625rem,
+	// 2 / 16px
+	'050': 0.125rem,
+	// 3 / 16px
+	'075': 0.1875rem
+) !default;
+
+// Strokes / styles
+$uilib-stroke-styles: (
+	'none': none,
+	'solid': solid,
+	'dashed': dashed,
+) !default;

package/scss/variables/_typography.scss

@@ -0,0 +1,125 @@
+// typography
+@use 'sass:meta';
+@use 'sass:map';
+@use 'primitives' as *;
+@use '../variables/prefix' as *;
+@use '../lib/utility/mixins' as util;
+
+// font-family
+$uilib-font-family-tuitypelight:
+	#{$app-prefix}TUITypeLight,
+	#{$app-prefix}TUITypeLightFallbackFont,
+	arial,
+	sans-serif !default;
+
+// font-families
+$uilib-font-families: (
+	'display': #{meta.inspect($uilib-font-family-tuitypelight)},
+	'lead': #{meta.inspect($uilib-font-family-tuitypelight)},
+	'base': #{meta.inspect($uilib-font-family-tuitypelight)},
+) !default;
+
+// Dymanic font sizes for display headings - https://utopia.fyi/type/calculator/?c=367,40,1.125,960,64,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+// Dymanic font sizes for page headings - https://utopia.fyi/type/calculator/?c=367,14,1.125,960,16,1.2,10,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+$uilib-font-styles: (
+	'display-large': var(--uilib-font-weight-bold) clamp(2.8125rem, 1.5825rem + 5.3626vw, 4.8rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'display-medium': var(--uilib-font-weight-bold) clamp(2.5rem, 1.5717rem + 4.0472vw, 4rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'display-small': var(--uilib-font-weight-bold) clamp(2.2222rem, 1.5346rem + 2.9979vw, 3.3333rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-xxlarge': var(--uilib-font-weight-bold) clamp(1.5768rem, 1.0126rem + 2.4595vw, 2.4883rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-xlarge': var(--uilib-font-weight-bold) clamp(1.4016rem, 0.9857rem + 1.8132vw, 2.0736rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-large': var(--uilib-font-weight-bold) clamp(1.2458rem, 0.9475rem + 1.3009vw, 1.728rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-medium': var(--uilib-font-weight-bold) clamp(1.1074rem, 0.9016rem + 0.8973vw, 1.44rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'heading-small': var(--uilib-font-weight-bold) clamp(0.9844rem, 0.8509rem + 0.5818vw, 1.2rem) / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 23 / 16px
+	'component-heading-xlarge': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-160') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-xxlarge': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-220') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-xxlarge-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-220') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-xlarge-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-160') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 20 / 16px
+	'component-heading-large': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-140') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-large-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-140') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 18 / 16px
+	'component-heading-medium': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 16 / 16px
+	'component-heading-small': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'component-heading-small-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 18 / 16px
+	'body-large': var(--uilib-font-weight-regular) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	'body-large-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	// 16 / 16px
+	'body-medium': var(--uilib-font-weight-regular) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	'body-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	// 14 / 16px
+	'body-small': var(--uilib-font-weight-regular) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	'body-small-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-body)
+		var(--uilib-font-family-base),
+	// 18 / 16px
+	'label-large': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-large-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-120') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 16 / 16px
+	'label-medium': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 14 / 16px
+	'label-small': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-small-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-80') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	// 13 / 16px
+	'label-xsmall': var(--uilib-font-weight-semibold) map.get($uilib-primitives, 'font-size-60') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+	'label-xsmall-strong': var(--uilib-font-weight-bold) map.get($uilib-primitives, 'font-size-60') / var(--uilib-line-height-heading)
+		var(--uilib-font-family-lead),
+) !default;
+
+// font-size/scale variables
+$uilib-font-size-root: 1rem !default; // Browser default > `16px`
+
+// line-height
+$uilib-line-height: (
+	'heading': 1.3,
+	'body': 1.3,
+	'none': 1,
+) !default;
+
+// font-weight
+$uilib-font-weight: (
+	'regular': 400,
+	'semibold': 600,
+	'bold': 700,
+) !default;
+
+@mixin uilib-font-base-vars($typography: $uilib-font-styles, $line-height: $uilib-line-height, $font-weight: $uilib-font-weight) {
+	--uilib-font-size-root: #{$uilib-font-size-root};
+
+	@include util.uilib-build-css-vars('typography', $typography);
+	@include util.uilib-build-css-vars('line-height', $line-height);
+	@include util.uilib-build-css-vars('font-weight', $font-weight);
+}