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

package/scss/themes/firstchoice/index.scss

@@ -74,6 +74,9 @@
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-firstchoice-card-search-variables);
 
+	// Flight details
+	@include util.uilib-build-css-vars('flight-details', $uilib-firstchoice-flight-details-variables);
+
 	// Form row
 	@include util.uilib-build-css-vars('form-row', $uilib-firstchoice-form-row-variables);
 
@@ -95,9 +98,15 @@
 	// Form input slider
 	@include util.uilib-build-css-vars('input-slider', $uilib-firstchoice-input-slider-variables);
 
+	// Form input switch
+	@include util.uilib-build-css-vars('input-switch', $uilib-input-switch-variables);
+
 	// Form input text
 	@include util.uilib-build-css-vars('input-text', $uilib-firstchoice-input-text-variables);
 
+	// Hero
+	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-firstchoice-icon-button-variables);
 

package/scss/themes/firstchoice/theme.json

@@ -287,7 +287,7 @@
 	},
 	"info-tag": {
 		"tokens": {
-			"local-product-bg-color": {
+			"info-tag-local-product-bg-color": {
 				"primitive": "uilib-color-canvas-contrast"
 			}
 		}

package/scss/themes/tui/_colors.scss

@@ -40,6 +40,7 @@ $uilib-color-semantic-tui: map.merge(
 				map.get($uilib-tui-primitives, 'color-blue-100') 0.33%,
 				map.get($uilib-tui-primitives, 'color-neutral-10') 99.66%
 			),
+		brand-tui: map.get($uilib-tui-primitives, 'color-brand-tui-midnight-blue'),
 		brand-tui-blue: map.get($uilib-tui-primitives, 'color-brand-tui-blue-blue'),
 		brand-magiclife: map.get($uilib-tui-primitives, 'color-brand-magiclife-yellow'),
 		brand-bluestar: map.get($uilib-tui-primitives, 'color-brand-bluestar-blue'),

package/scss/themes/tui/_overrides.scss

@@ -9,7 +9,8 @@
 $uilib-tui-font-families: map.merge(
 	$uilib-font-families,
 	(
-		'lead': $uilib-font-family-ambit,
+		'display': #{$uilib-font-family-tui-headline},
+		'lead': #{$uilib-font-family-ambit},
 	)
 );
 

package/scss/themes/tui/_primitives.scss

@@ -4,6 +4,7 @@
 $uilib-tui-primitives: map.merge(
 	$uilib-primitives,
 	(
+		color-brand-tui-midnight-blue: #0b092d,
 		color-brand-tui-blue-blue: #1b115c,
 		color-brand-magiclife-yellow: #fff700,
 		color-brand-bluestar-blue: #c2e6fa,

package/scss/themes/tui/_typography.scss

@@ -7,9 +7,18 @@
 // import font f-mod fallbacks
 @forward '../../variables/fonts/ambit-fallback';
 @forward '../../variables/fonts/tuitypelight-fallback';
+@forward '../../variables/fonts/tuiheadline-fallback';
 
 // font-family
 $uilib-font-family-ambit:
 	#{$app-prefix}Ambit,
 	#{$app-prefix}AmbitFallbackFont,
-	sans-serif; // override #{meta.inspect($uilib-font-family-lead)};
+	arial,
+	sans-serif;
+
+// font-family
+$uilib-font-family-tui-headline:
+	#{$app-prefix}TUIHeadline,
+	#{$app-prefix}TUIHeadlineFallbackFont,
+	'arial black',
+	sans-serif;

package/scss/themes/tui/fonts.json

@@ -1,4 +1,18 @@
 [
+	{
+		"family": "TUIHeadline",
+		"path": "v3/fonts/tuiheadline-black.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "normal"
+	},
+	{
+		"family": "TUIHeadline",
+		"path": "v3/fonts/tuiheadline-black-italic.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "italic"
+	},
 	{
 		"family": "TUITypeLight",
 		"path": "v3/fonts/tuitypelight-bold.subset.woff2",
@@ -54,5 +68,50 @@
 		"display": "swap",
 		"weight": "600",
 		"style": "italic"
+	},
+	{
+		"weight": "400 600",
+		"family": "AmbitFallbackFont",
+		"src": "local(arial)",
+		"sizeAdjust": "103.5%",
+		"ascentOverride": "83%",
+		"descentOverride": "18%",
+		"lineGapOverride": "10.8%"
+	},
+	{
+		"weight": "700",
+		"family": "AmbitFallbackFont",
+		"src": "local('arial bold')",
+		"sizeAdjust": "103.5%",
+		"ascentOverride": "83%",
+		"descentOverride": "21.2%",
+		"lineGapOverride": "7.5%"
+	},
+	{
+		"weight": "400",
+		"family": "TUITypeLightFallbackFont",
+		"src": "local('arial')",
+		"sizeAdjust": "84.5%",
+		"ascentOverride": "101.1%",
+		"descentOverride": "16.5%",
+		"lineGapOverride": "17.5%"
+	},
+	{
+		"weight": "700",
+		"family": "TUITypeLightFallbackFont",
+		"src": "local('arial bold')",
+		"sizeAdjust": "84.5%",
+		"ascentOverride": "101.1%",
+		"descentOverride": "16.5%",
+		"lineGapOverride": "17.5%"
+	},
+	{
+		"weight": "700",
+		"family": "TUIHeadlineFallbackFont",
+		"src": "local('arial bold')",
+		"sizeAdjust": "80.3%",
+		"ascentOverride": "93%",
+		"descentOverride": "28.9%",
+		"lineGapOverride": "22.3%"
 	}
 ]

package/scss/themes/tui/fonts.scss

@@ -4,6 +4,8 @@
 @forward '../../variables/fonts/ambit-bold';
 @forward '../../variables/fonts/ambit-semibold-italic';
 @forward '../../variables/fonts/ambit-semibold';
+@forward '../../variables/fonts/tuiheadline-black';
+@forward '../../variables/fonts/tuiheadline-black-italic';
 @forward '../../variables/fonts/tuitypelight-bold';
 @forward '../../variables/fonts/tuitypelight-bold-italic';
 @forward '../../variables/fonts/tuitypelight-regular';

package/scss/themes/tui/index.scss

@@ -74,6 +74,9 @@
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-tui-card-search-variables);
 
+	// Flight details
+	@include util.uilib-build-css-vars('flight-details', $uilib-flight-details-variables);
+
 	// Form row
 	@include util.uilib-build-css-vars('form-row', $uilib-form-row-variables);
 
@@ -95,9 +98,15 @@
 	// Form input stepper
 	@include util.uilib-build-css-vars('input-stepper', $uilib-input-stepper-variables);
 
+	// Form input switch
+	@include util.uilib-build-css-vars('input-switch', $uilib-input-switch-variables);
+
 	// Form input text
 	@include util.uilib-build-css-vars('input-text', $uilib-input-text-variables);
 
+	// Hero
+	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-icon-button-variables);
 

package/scss/themes/tui/theme.json

@@ -1,7 +1,6 @@
 {
 	"colors": {
 		"border": {
-			"displayType": "color",
 			"tokens": {
 				"color-border-dashed": {
 					"primitive": "color-neutral-50",
@@ -11,7 +10,6 @@
 			}
 		},
 		"promotion": {
-			"displayType": "color",
 			"tokens": {
 				"color-promotion-free-kids": {
 					"primitive": "color-coolblue-70",
@@ -21,7 +19,6 @@
 			}
 		},
 		"other": {
-			"displayType": "color",
 			"tokens": {
 				"color-other-gradient-linear-soft": {
 					"displayType": "gradient",
@@ -58,6 +55,11 @@
 		"brands": {
 			"description": "Specific brand colours. Many of these colours are specific to the tui theme only",
 			"tokens": {
+				"color-brand-tui": {
+					"primitive": "color-brand-tui-midnight-blue",
+					"title": "TUI",
+					"darkColor": true
+				},
 				"color-brand-tui-blue": {
 					"primitive": "color-brand-tui-blue-blue",
 					"title": "TUI Blue",

package/scss/variables/_elevations.scss

@@ -3,12 +3,13 @@
 @use '../lib/utility/mixins' as util;
 
 $uilib-elevation-base: (
+	'none': none,
 	// 0 0 2 0 / 16px
-	0: 0 0 0.125rem 0 var(--uilib-color-other-elevation),
+	100: 0 0 0.125rem 0 var(--uilib-color-other-elevation),
 	// 0 0 4 0 / 16px
-	100: 0 0 0.25rem 0 var(--uilib-color-other-elevation),
+	200: 0 0 0.25rem 0 var(--uilib-color-other-elevation),
 	// 0 0 8 0 / 16px
-	200: 0 0 0.5rem 0 var(--uilib-color-other-elevation)
+	300: 0 0 0.5rem 0 var(--uilib-color-other-elevation),
 ) !default;
 
 @mixin uilib-elevation-base-vars() {

package/scss/variables/_env-variables.scss

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

package/scss/variables/_typography.scss

@@ -9,10 +9,12 @@
 $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;