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

package/scss/variables/base-theme.json

@@ -235,18 +235,21 @@
 	"elevations": {
 		"displayType": "shadow",
 		"tokens": {
-			"elevation-0": {
-				"title": "0",
-				"useWith": ["Accordion", "Card"],
-				"primitive": "0X 0Y 2 Blur color-neutral-100 40%"
+			"elevation-none": {
+				"title": "none"
 			},
 			"elevation-100": {
 				"title": "100",
-				"useWith": ["Product cards", "Carousel controls"],
-				"primitive": "0X 0Y 4 Blur color-neutral-100 40%"
+				"useWith": ["Accordion", "Card"],
+				"primitive": "0X 0Y 2 Blur color-neutral-100 40%"
 			},
 			"elevation-200": {
 				"title": "200",
+				"useWith": ["Product cards", "Carousel controls"],
+				"primitive": "0X 0Y 4 Blur color-neutral-100 40%"
+			},
+			"elevation-300": {
+				"title": "300",
 				"useWith": ["Filters", "Dropdown", "Carousel controls", "Hover"],
 				"primitive": "0X 0Y 8 Blur color-neutral-100 40%"
 			}
@@ -481,6 +484,9 @@
 		"font-family": {
 			"displayType": "font-family",
 			"tokens": {
+				"font-family-display": {
+					"title": "Display"
+				},
 				"font-family-lead": {
 					"title": "Lead"
 				},
@@ -544,16 +550,16 @@
 				"typography-heading-small": {
 					"title": "Heading small"
 				},
-				"typography-component-heading-xlarge": {
-					"title": "Component heading xlarge"
+				"typography-component-heading-xxlarge": {
+					"title": "Component heading xxlarge"
 				},
-				"typography-component-heading-xlarge-strong": {
-					"title": "Component heading xlarge strong"
+				"typography-component-heading-xxlarge-strong": {
+					"title": "Component heading xxlarge strong"
 				},
-				"typography-component-heading-xxlarge": {
+				"typography-component-heading-xlarge": {
 					"title": "Component heading xlarge"
 				},
-				"typography-component-heading-xxlarge-strong": {
+				"typography-component-heading-xlarge-strong": {
 					"title": "Component heading xlarge strong"
 				},
 				"typography-component-heading-large": {
@@ -985,18 +991,111 @@
 			}
 		}
 	},
+	"flight-details": {
+		"tokens": {
+			"flight-details-icon": {
+				"displayType": "icon",
+				"title": "Indirect flight details show/hide icon",
+				"description": "Indirect flight details show/hide icon",
+				"longValue": true
+			}
+		}
+	},
 	"form-row": {
 		"tokens": {
 			"form-row-label-font": {
 				"primitive": "uilib-typography-label-medium",
 				"displayType": "font",
 				"title": "Form row label font",
-				"description": "Font style used for form row labels"
+				"description": "Font style used for form row labels",
+				"longValue": true
 			},
 			"form-row-icon": {
 				"displayType": "icon",
 				"title": "Form row error icon",
-				"description": "Icon displayed with error message text"
+				"description": "Icon displayed with error message text",
+				"longValue": true
+			}
+		}
+	},
+	"hero": {
+		"displayType": "color",
+		"tokens": {
+			"hero-image-radius-small": {
+				"primitive": "uilib-border-radius-600 uilib-border-radius-600 0 0",
+				"displayType": "empty",
+				"title": "Border radius for the image at mobile",
+				"description": "Border radius for the image at mobile"
+			},
+			"hero-image-radius-large": {
+				"primitive": "uilib-border-radius-1800 uilib-border-radius-1800 0 0",
+				"displayType": "empty",
+				"title": "Border radius for the image at tablet/desktop",
+				"description": "Border radius for the image at tablet/desktop"
+			},
+			"hero-image-mask": {
+				"displayType": "empty",
+				"title": "Mask for the hero image",
+				"description": "Mask for the hero image",
+				"longValue": true
+			},
+			"hero-image-mask-height-small": {
+				"primitive": "uilib-spacing-1200",
+				"displayType": "size",
+				"title": "Mask height at mobile",
+				"description": "Mask height at mobile"
+			},
+			"hero-image-mask-height-large": {
+				"primitive": "uilib-spacing-1600",
+				"displayType": "size",
+				"title": "Mask height at tablet/desktop",
+				"description": "Mask height at tablet/desktop"
+			},
+			"hero-content-radius": {
+				"primitive": "uilib-border-radius-600",
+				"displayType": "radius",
+				"title": "Border radius for content box",
+				"description": "Border radius for content box"
+			},
+			"hero-content-bg-small": {
+				"primitive": "uilib-color-core-surface",
+				"title": "Background colour for content box at mobile",
+				"description": "Background colour for content box at mobile"
+			},
+			"hero-content-bg": {
+				"primitive": "90% uilib-color-core-neutral",
+				"title": "Background colour for content box at tablet/desktop",
+				"description": "Background colour for content box at tablet/desktop"
+			},
+			"hero-content-text-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Text colour for content",
+				"description": "Text colour for content"
+			},
+			"hero-content-text-highlight-color": {
+				"primitive": "uilib-color-text-promotion",
+				"title": "Highlight text colour for content",
+				"description": "Highlight text colour for content"
+			},
+			"hero-flagship-content-bg-small": {
+				"primitive": "uilib-color-core-brand-strong",
+				"title": "Flagship background colour for content box at mobile",
+				"description": "Background colour for content box at mobile"
+			},
+			"hero-flagship-content-bg": {
+				"primitive": "90% uilib-color-core-brand-strong",
+				"title": "Flagship background colour for content box at tablet/desktop",
+				"description": "Flagship background colour for content box at tablet/desktop"
+			},
+			"hero-flagship-content-text-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Flagship text colour for content",
+				"description": "Flagship text colour for content"
+			},
+			"hero-flagship-content-text-highlight-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Flagship highlight text colour for content",
+				"description": "Flagship highlight colour for content"
 			}
 		}
 	},
@@ -1126,6 +1225,94 @@
 			}
 		}
 	},
+	"image": {
+		"tokens": {
+			"image-landscape": {
+				"title": "Image ratio landscape",
+				"description": "Image ratio landscape",
+				"displayType": "aspect",
+				"primitive": "uilib-aspect-ratio-4x3-landscape"
+			},
+			"image-panoramic": {
+				"title": "Image ratio panoramic",
+				"description": "Image ratio panoramic",
+				"displayType": "aspect",
+				"primitive": "uilib-aspect-ratio-3x1-panoramic"
+			},
+			"image-portrait": {
+				"title": "Image ratio portrait",
+				"description": "Image ratio portrait",
+				"displayType": "aspect",
+				"primitive": "uilib-aspect-ratio-4x3-portrait"
+			},
+			"image-square": {
+				"title": "Image ratio square",
+				"description": "Image ratio square",
+				"displayType": "aspect",
+				"primitive": "uilib-aspect-ratio-1x1-square"
+			},
+			"image-wide": {
+				"title": "Image ratio wide",
+				"description": "Image ratio wide",
+				"displayType": "aspect",
+				"primitive": "uilib-aspect-ratio-16x9-wide"
+			},
+			"image-rectangle": {
+				"title": "Image shape rectangle",
+				"description": "Image shape rectangle",
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-none"
+			},
+			"image-rounded": {
+				"title": "Image shape rounded",
+				"description": "Image shape rounded",
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-600"
+			},
+			"image-fallback": {
+				"title": "Fallback image",
+				"description": "Fallback image",
+				"displayType": "image",
+				"longValue": true
+			}
+		}
+	},
+	"info-tag": {
+		"displayType": "color",
+		"tokens": {
+			"info-tag-radius": {
+				"primitive": "uilib-border-radius-100",
+				"displayType": "radius",
+				"title": "Info tag radius",
+				"description": "Info tag radius"
+			},
+			"info-tag-text-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Text colour",
+				"description": "Text colour"
+			},
+			"info-tag-info-bg-color": {
+				"primitive": "uilib-color-status-info-surface",
+				"title": "Info background colour",
+				"description": "Info background colour"
+			},
+			"info-tag-local-product-bg-color": {
+				"primitive": "uilib-color-brand-local",
+				"title": "Local product background colour",
+				"description": "Local product background colour"
+			},
+			"info-tag-neutral-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Neutral background colour",
+				"description": "Neutral background colour"
+			},
+			"info-tag-scarcity-bg-color": {
+				"primitive": "uilib-color-status-warning-surface",
+				"title": "Scarcity background colour",
+				"description": "Scarcity background colour"
+			}
+		}
+	},
 	"input-checkbox": {
 		"tokens": {
 			"input-checkbox-icon-checked": {
@@ -1219,57 +1406,6 @@
 			}
 		}
 	},
-	"image": {
-		"tokens": {
-			"image-landscape": {
-				"title": "Image ratio landscape",
-				"description": "Image ratio landscape",
-				"displayType": "aspect",
-				"primitive": "uilib-aspect-ratio-4x3-landscape"
-			},
-			"image-panoramic": {
-				"title": "Image ratio panoramic",
-				"description": "Image ratio panoramic",
-				"displayType": "aspect",
-				"primitive": "uilib-aspect-ratio-3x1-panoramic"
-			},
-			"image-portrait": {
-				"title": "Image ratio portrait",
-				"description": "Image ratio portrait",
-				"displayType": "aspect",
-				"primitive": "uilib-aspect-ratio-4x3-portrait"
-			},
-			"image-square": {
-				"title": "Image ratio square",
-				"description": "Image ratio square",
-				"displayType": "aspect",
-				"primitive": "uilib-aspect-ratio-1x1-square"
-			},
-			"image-wide": {
-				"title": "Image ratio wide",
-				"description": "Image ratio wide",
-				"displayType": "aspect",
-				"primitive": "uilib-aspect-ratio-16x9-wide"
-			},
-			"image-rectangle": {
-				"title": "Image shape rectangle",
-				"description": "Image shape rectangle",
-				"displayType": "radius",
-				"primitive": "uilib-border-radius-none"
-			},
-			"image-rounded": {
-				"title": "Image shape rounded",
-				"description": "Image shape rounded",
-				"displayType": "radius",
-				"primitive": "uilib-border-radius-600"
-			},
-			"image-fallback": {
-				"title": "Fallback image",
-				"description": "Fallback image",
-				"displayType": "image"
-			}
-		}
-	},
 	"input-count": {
 		"displayType": "color",
 		"tokens": {
@@ -1373,6 +1509,85 @@
 			}
 		}
 	},
+	"input-switch": {
+		"tokens": {
+			"input-switch-track-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-neutral",
+				"title": "Default track colour",
+				"description": "Default track colour"
+			},
+			"input-switch-track-color-selected": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Selected track colour",
+				"description": "Selected track colour"
+			},
+			"input-switch-track-color-disabled": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-disabled-soft",
+				"title": "Disabled track colour",
+				"description": "Disabled track colour"
+			},
+			"input-switch-track-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-input",
+				"title": "Default track border colour",
+				"description": "Default track border colour"
+			},
+			"input-switch-track-border-color-selected": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-interaction",
+				"title": "Selected track border colour",
+				"description": "Selected track border colour"
+			},
+			"input-switch-track-border-color-disabled": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-disabled-soft",
+				"title": "Disabled track border colour",
+				"description": "Disabled track border colour"
+			},
+			"input-switch-track-height": {
+				"displayType": "size",
+				"title": "Track height",
+				"description": "Track height"
+			},
+			"input-switch-track-width": {
+				"displayType": "size",
+				"title": "Track width",
+				"description": "Track width"
+			},
+			"input-switch-track-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-pill",
+				"title": "Track radius",
+				"description": "Track radius"
+			},
+			"input-switch-thumb-size": {
+				"displayType": "size",
+				"title": "Thumb size",
+				"description": "Thumb size"
+			},
+			"input-switch-thumb-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-circle",
+				"title": "Thumb radius",
+				"description": "Thumb radius"
+			},
+			"input-switch-thumb-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-disabled-strong",
+				"title": "Default Thumb colour",
+				"description": "Default Thumb colour"
+			},
+			"input-switch-thumb-color-selected": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-neutral",
+				"title": "Selected Thumb colour",
+				"description": "Selected Thumb colour"
+			}
+		}
+	},
 	"input-text": {
 		"displayType": "icon",
 		"tokens": {
@@ -1398,42 +1613,6 @@
 			}
 		}
 	},
-	"info-tag": {
-		"displayType": "color",
-		"tokens": {
-			"info-tag-radius": {
-				"primitive": "uilib-border-radius-100",
-				"displayType": "radius",
-				"title": "Info tag radius",
-				"description": "Info tag radius"
-			},
-			"info-tag-text-color": {
-				"primitive": "uilib-color-text-strong",
-				"title": "Text colour",
-				"description": "Text colour"
-			},
-			"info-tag-info-bg-color": {
-				"primitive": "uilib-color-status-info-surface",
-				"title": "Info background colour",
-				"description": "Info background colour"
-			},
-			"info-tag-local-product-bg-color": {
-				"primitive": "uilib-color-brand-local",
-				"title": "Local product background colour",
-				"description": "Local product background colour"
-			},
-			"info-tag-neutral-bg-color": {
-				"primitive": "uilib-color-core-neutral",
-				"title": "Neutral background colour",
-				"description": "Neutral background colour"
-			},
-			"info-tag-scarcity-bg-color": {
-				"primitive": "uilib-color-status-warning-surface",
-				"title": "Scarcity background colour",
-				"description": "Scarcity background colour"
-			}
-		}
-	},
 	"link": {
 		"displayType": "color",
 		"tokens": {
@@ -1515,7 +1694,8 @@
 			"loader-image": {
 				"title": "Loader image",
 				"description": "Loader image",
-				"displayType": "image"
+				"displayType": "image",
+				"longValue": true
 			},
 			"loader-small": {
 				"title": "Loader image size small",
@@ -1536,19 +1716,22 @@
 				"primitive": "uilib-typography-component-heading-medium",
 				"title": "Loader font small",
 				"description": "Loader font small",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			},
 			"loader-font-medium": {
 				"primitive": "uilib-typography-component-heading-large",
 				"title": "Loader font medium",
 				"description": "Loader font medium",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			},
 			"loader-font-large": {
 				"primitive": "uilib-typography-component-heading-xlarge",
 				"title": "Loader font large",
 				"description": "Loader font large",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			}
 		}
 	},
@@ -1562,6 +1745,28 @@
 			}
 		}
 	},
+	"modal": {
+		"tokens": {
+			"modal-backdrop-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-scrim",
+				"title": "Backdrop color",
+				"description": "Modal backdrop overlay color"
+			},
+			"modal-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-400",
+				"title": "Modal border radius",
+				"description": "Modal container border radius"
+			},
+			"modal-icon-close": {
+				"displayType": "icon",
+				"title": "Close icon",
+				"description": "Modal close button icon",
+				"longValue": true
+			}
+		}
+	},
 	"pagination": {
 		"displayType": "color",
 		"tokens": {
@@ -1616,13 +1821,15 @@
 				"primitive": "uilib-font-family-lead",
 				"title": "Primary price font",
 				"description": "Primary price font",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			},
 			"price-font-secondary": {
 				"primitive": "uilib-font-family-base",
 				"title": "Secondary price font",
 				"description": "Secondary price font",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			},
 			"price-discount-color": {
 				"primitive": "uilib-color-promotion",
@@ -1634,7 +1841,8 @@
 				"primitive": "uilib-typography-component-heading-xlarge-strong",
 				"title": "Main price unit for Medium variant",
 				"description": "Main price unit for Medium variant",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			},
 			"price-font-main-large": {
 				"primitive": "uilib-typography-component-heading-xxlarge-strong",
@@ -1646,7 +1854,8 @@
 				"primitive": "uilib-typography-component-heading-medium-strong",
 				"title": "Sub unit font for Large variant",
 				"description": "Sub unit font for Large variant",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			}
 		}
 	},
@@ -1674,7 +1883,8 @@
 				"primitive": "uilib-typography-label-small",
 				"title": "Promo tag font",
 				"description": "Promo tag font",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			}
 		}
 	},
@@ -1685,7 +1895,8 @@
 				"primitive": "uilib-typography-body-medium",
 				"title": "Numerical rating default font",
 				"description": "Numerical rating default font",
-				"displayType": "font"
+				"displayType": "font",
+				"longValue": true
 			},
 			"ratings-numerical-color": {
 				"primitive": "uilib-color-text-body",
@@ -1710,7 +1921,8 @@
 			"ratings-numerical-brand-logo": {
 				"title": "Numerical rating brand logo",
 				"description": "Numerical rating brand logo",
-				"displayType": "image"
+				"displayType": "image",
+				"longValue": true
 			},
 			"ratings-numerical-brand-radius": {
 				"displayType": "radius",
@@ -1926,27 +2138,5 @@
 				"description": "Tooltip overlay text colour"
 			}
 		}
-	},
-	"modal": {
-		"tokens": {
-			"modal-backdrop-color": {
-				"displayType": "color",
-				"primitive": "uilib-color-other-scrim",
-				"title": "Backdrop color",
-				"description": "Modal backdrop overlay color"
-			},
-			"modal-radius": {
-				"displayType": "radius",
-				"primitive": "uilib-border-radius-400",
-				"title": "Modal border radius",
-				"description": "Modal container border radius"
-			},
-			"modal-icon-close": {
-				"displayType": "icon",
-				"title": "Close icon",
-				"description": "Modal close button icon",
-				"longValue": true
-			}
-		}
 	}
 }

package/scss/variables/fonts/_tuiheadline-black-italic.scss

@@ -0,0 +1,10 @@
+@use '../prefix' as *;
+@use './font-path' as *;
+
+@font-face {
+	font-weight: 700;
+	font-family: '#{$app-prefix}TUIHeadline';
+	font-style: italic;
+	src: url('#{$fontpath}tuiheadline-black-italic.subset.woff2') format('woff2');
+	font-display: swap;
+}

package/scss/variables/fonts/_tuiheadline-black.scss

@@ -0,0 +1,10 @@
+@use '../prefix' as *;
+@use './font-path' as *;
+
+@font-face {
+	font-weight: 700;
+	font-family: '#{$app-prefix}TUIHeadline';
+	font-style: normal;
+	src: url('#{$fontpath}tuiheadline-black.subset.woff2') format('woff2');
+	font-display: swap;
+}

package/scss/variables/fonts/_tuiheadline-fallback.scss

@@ -0,0 +1,11 @@
+@use '../prefix' as *;
+
+@font-face {
+	font-weight: 700;
+	font-family: '#{$app-prefix}TUIHeadlineFallbackFont';
+	src: local('arial black');
+	size-adjust: 80.3%;
+	ascent-override: 93%;
+	descent-override: 28.9%;
+	line-gap-override: 22.3%;
+}

package/scss/variables.scss

@@ -25,6 +25,7 @@
 @forward 'lib/cards/card/variables';
 @forward 'lib/cards/search/variables';
 @forward 'lib/divider/variables';
+@forward 'lib/flight-details/variables';
 @forward 'lib/forms/form-row/variables';
 @forward 'lib/forms/input-checkbox/variables';
 @forward 'lib/forms/input-chip/variables';
@@ -32,8 +33,10 @@
 @forward 'lib/forms/input-radio/variables';
 @forward 'lib/forms/input-stepper/variables';
 @forward 'lib/forms/input-slider/variables';
+@forward 'lib/forms/input-switch/variables';
 @forward 'lib/forms/input-text/variables';
 @forward 'lib/grid/variables';
+@forward 'lib/hero/variables';
 @forward 'lib/icon/variables';
 @forward 'lib/icon-button/variables';
 @forward 'lib/image/variables';