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

package/scss/themes/tui/_colors.scss

@@ -0,0 +1,61 @@
+// tui / colors
+@use 'sass:map';
+@use '../../variables' as *;
+@use './primitives' as *;
+
+// Add tui specific colours to tui color map
+$uilib-color-semantic-tui: map.merge(
+	$uilib-color-semantic,
+	(
+		core-brand-strong: map.get($uilib-tui-primitives, 'color-blue-100'),
+		border-dashed: map.get($uilib-tui-primitives, 'color-neutral-50'),
+		promotion-free-kids: map.get($uilib-tui-primitives, 'color-coolblue-70'),
+		other-gradient-linear-soft: linear-gradient(
+				180deg,
+				map.get($uilib-tui-primitives, 'color-coolblue-20') 0.33%,
+				map.get($uilib-tui-primitives, 'color-neutral-10') 99.66%
+			),
+		other-gradient-linear: linear-gradient(
+				180deg,
+				map.get($uilib-tui-primitives, 'color-coolblue-50') 0.33%,
+				map.get($uilib-tui-primitives, 'color-neutral-10') 99.66%
+			),
+		other-gradient-linear-strong: linear-gradient(
+				180deg,
+				map.get($uilib-tui-primitives, 'color-blue-100') 0.33%,
+				map.get($uilib-tui-primitives, 'color-neutral-10') 99.66%
+			),
+		other-gradient-diagonal-soft: linear-gradient(
+				249deg,
+				map.get($uilib-tui-primitives, 'color-coolblue-20') 0.33%,
+				map.get($uilib-tui-primitives, 'color-neutral-10') 99.66%
+			),
+		other-gradient-diagonal: linear-gradient(
+				249deg,
+				map.get($uilib-tui-primitives, 'color-coolblue-50') 0.33%,
+				map.get($uilib-tui-primitives, 'color-neutral-10') 99.66%
+			),
+		other-gradient-diagonal-strong: linear-gradient(
+				249deg,
+				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'),
+		brand-splashworld: map.get($uilib-tui-primitives, 'color-brand-splashworld-blue'),
+		brand-riu: map.get($uilib-tui-primitives, 'color-brand-riu-red'),
+		brand-soneo: map.get($uilib-tui-primitives, 'color-brand-soneo-blue'),
+		brand-small-and-friendly: map.get($uilib-tui-primitives, 'color-brand-small-and-friendly-blue'),
+		brand-robinson: map.get($uilib-tui-primitives, 'color-brand-robinson-blue'),
+		brand-scene: map.get($uilib-tui-primitives, 'color-brand-scene-black'),
+		brand-time-to-smile: map.get($uilib-tui-primitives, 'color-brand-time-to-smile-gold'),
+		brand-holiday-villages: map.get($uilib-tui-primitives, 'color-brand-holiday-villages-purple'),
+		brand-kids-club: map.get($uilib-tui-primitives, 'color-brand-kids-club-blue'),
+		brand-trip-advisor: map.get($uilib-tui-primitives, 'color-brand-trip-advisor-green'),
+		brand-paypal: map.get($uilib-tui-primitives, 'color-brand-paypal-blue'),
+		brand-local: map.get($uilib-tui-primitives, 'color-brand-local-biege'),
+		brand-musement: map.get($uilib-tui-primitives, 'color-brand-musement-yellow'),
+	)
+);

package/scss/themes/tui/_overrides.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables' as *;
+@forward '../../variables';
+@use 'colors' as *;
+@use 'typography' as *;
+
+// typography
+$uilib-tui-font-families: map.merge(
+	$uilib-font-families,
+	(
+		'display': #{$uilib-font-family-tui-headline},
+		'lead': #{$uilib-font-family-ambit},
+	)
+);
+
+// Card - search
+$uilib-tui-card-search-variables: map.merge(
+	$uilib-card-search-variables,
+	(
+		color-brand: var(--uilib-color-brand-tui-blue),
+	)
+);
+
+// Ratings and Reviews - Numerical
+$uilib-tui-ratings-numerical-variables: map.merge(
+	$uilib-ratings-numerical-variables,
+	(
+		alt-icon-color: var(--uilib-color-brand-musement),
+	)
+);
+
+// Skeleton
+$uilib-tui-skeleton-variables: $uilib-skeleton-variables;

package/scss/themes/tui/_primitives.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../../variables/primitives' as *;
+
+$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,
+		color-brand-splashworld-blue: #65c4d7,
+		color-brand-riu-red: #d3030e,
+		color-brand-soneo-blue: #006bb8,
+		color-brand-small-and-friendly-blue: #0076ad,
+		color-brand-robinson-blue: #0068b3,
+		color-brand-scene-black: #000,
+		color-brand-time-to-smile-gold: #b0b578,
+		color-brand-holiday-villages-purple: #9c1981,
+		color-brand-kids-club-blue: #1b115c,
+		color-brand-local-biege: #d5d2c1,
+		color-brand-musement-yellow: #f4ca48,
+	)
+);

package/scss/themes/tui/_typography.scss

@@ -0,0 +1,24 @@
+// tui / typography
+@use 'sass:meta';
+@use 'sass:map';
+@use '../../variables/prefix' as *;
+@use '../../variables/typography' as *;
+
+// 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,
+	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

@@ -0,0 +1,117 @@
+[
+	{
+		"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",
+		"display": "swap",
+		"weight": "700",
+		"style": "normal"
+	},
+	{
+		"family": "TUITypeLight",
+		"path": "v3/fonts/tuitypelight-bold-italic.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "italic"
+	},
+	{
+		"family": "TUITypeLight",
+		"path": "v3/fonts/tuitypelight-regular.subset.woff2",
+		"display": "swap",
+		"weight": "400",
+		"style": "normal"
+	},
+	{
+		"family": "TUITypeLight",
+		"path": "v3/fonts/tuitypelight-regular-italic.subset.woff2",
+		"display": "swap",
+		"weight": "400",
+		"style": "italic"
+	},
+	{
+		"family": "Ambit",
+		"path": "v3/fonts/ambit-bold.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "normal"
+	},
+	{
+		"family": "Ambit",
+		"path": "v3/fonts/ambit-bold-italic.subset.woff2",
+		"display": "swap",
+		"weight": "700",
+		"style": "italic"
+	},
+	{
+		"family": "Ambit",
+		"path": "v3/fonts/ambit-semibold.subset.woff2",
+		"display": "swap",
+		"weight": "600",
+		"style": "normal"
+	},
+	{
+		"family": "Ambit",
+		"path": "v3/fonts/ambit-semibold-italic.subset.woff2",
+		"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

@@ -0,0 +1,12 @@
+// fonts
+// Dont include ambit regular as not used for theme
+@forward '../../variables/fonts/ambit-bold-italic';
+@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';
+@forward '../../variables/fonts/tuitypelight-regular-italic';

package/scss/themes/tui/index.scss

@@ -0,0 +1,166 @@
+// import theme variables
+@use 'sass:list';
+@use 'colors' as *;
+@use 'overrides' as *;
+@use 'typography' as *;
+@use '../../lib/utility/mixins' as util;
+
+:root[data-theme='tui'],
+:host([data-theme='tui']),
+[data-theme='tui'],
+.theme-tui {
+	// Theme-name
+	--uilib-theme-name: 'tui';
+
+	// Aspect ratios
+	@include util.uilib-build-css-vars('aspect-ratio', $uilib-aspect-ratios);
+
+	// Breakpoints
+	@include util.uilib-build-css-vars('breakpoints', $uilib-breakpoints);
+
+	// Border radius
+	@include util.uilib-build-css-vars('border-radius', $uilib-radius);
+
+	// Colors / light
+	@include uilib-color-palette-base-vars($uilib-color-semantic-tui);
+
+	// Elevations
+	@include uilib-elevation-base-vars;
+
+	// Focus
+	@include util.uilib-build-css-vars('focus', $uilib-focus-base);
+
+	// Grid
+	@include uilib-grid-base-vars;
+
+	// Icon
+	@include uilib-icon-base-vars($uilib-icon-sizes);
+
+	// Layers
+	@include uilib-layers-base-vars();
+
+	// Motion
+	@include uilib-motion-base-vars($uilib-motion);
+
+	// Spacing
+	@include util.uilib-build-css-vars('spacing', $uilib-spacing);
+
+	// Strokes
+	@include util.uilib-build-css-vars('stroke-size', $uilib-stroke-sizes);
+	@include util.uilib-build-css-vars('stroke-style', $uilib-stroke-styles);
+
+	// Typography / font-family
+	@include util.uilib-build-css-vars('font-family', $uilib-tui-font-families);
+
+	// Typography / font-weight and line-height
+	@include uilib-font-base-vars;
+
+	// COMPONENTS
+	// Accordion
+	@include util.uilib-build-css-vars('accordion', $uilib-accordion-variables);
+
+	// Active tag
+	@include util.uilib-build-css-vars('active-tag', $uilib-active-tag-variables);
+
+	// Alert
+	@include util.uilib-build-css-vars('alert', $uilib-alert-variables);
+
+	// Breadcrumb
+	@include util.uilib-build-css-vars('breadcrumb', $uilib-breadcrumb-variables);
+
+	// Button
+	@include util.uilib-build-css-vars('button', $uilib-button-variables);
+
+	// 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);
+
+	// Form input checkbox
+	@include util.uilib-build-css-vars('input-checkbox', $uilib-input-checkbox-variables);
+
+	// Form input chip
+	@include util.uilib-build-css-vars('input-chip', $uilib-input-chip-variables);
+
+	// Form input count
+	@include util.uilib-build-css-vars('input-count', $uilib-input-count-variables);
+
+	// Form input radio
+	@include util.uilib-build-css-vars('input-radio', $uilib-input-radio-variables);
+
+	// Form input slider
+	@include util.uilib-build-css-vars('input-slider', $uilib-input-slider-variables);
+
+	// 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);
+
+	// Image
+	@include util.uilib-build-css-vars('image', $uilib-image-variables);
+
+	// Info tag
+	@include util.uilib-build-css-vars('info-tag', $uilib-info-tag-variables);
+
+	// Link
+	@include util.uilib-build-css-vars('link', $uilib-link-variables);
+
+	// List
+	@include util.uilib-build-css-vars('list', $uilib-list-variables);
+
+	// Loader
+	@include util.uilib-build-css-vars('loader', $uilib-loader-variables);
+
+	// Media button
+	@include util.uilib-build-css-vars('media-button', $uilib-media-button-variables);
+
+	// Modal
+	@include util.uilib-build-css-vars('modal', $uilib-modal-variables);
+
+	// Pagination
+	@include util.uilib-build-css-vars('pagination', $uilib-pagination-variables);
+
+	// Price
+	@include util.uilib-build-css-vars('price', $uilib-price-variables);
+
+	// Promo tag
+	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-variables);
+
+	// Ratings and Reviews - Numerical
+	@include util.uilib-build-css-vars('ratings-numerical', $uilib-tui-ratings-numerical-variables);
+
+	// Ratings and Reviews - Percentage
+	@include util.uilib-build-css-vars('ratings-percentage', $uilib-ratings-percentage-variables);
+
+	// Ratings and Reviews - Range Icons
+	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-ratings-range-icons-variables);
+
+	// Ratings and Reviews - Range bar
+	@include util.uilib-build-css-vars('ratings-range-bar', $uilib-ratings-range-bar-variables);
+
+	// Scroller
+	@include util.uilib-build-css-vars('scroller', $uilib-scroller-variables);
+
+	// Show more/less
+	@include util.uilib-build-css-vars('show-more-less', $uilib-show-more-less-variables);
+
+	// Skeleton
+	@include util.uilib-build-css-vars('skeleton', $uilib-skeleton-variables);
+
+	// Tooltip
+	@include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
+}

package/scss/themes/tui/theme.json

@@ -0,0 +1,139 @@
+{
+	"colors": {
+		"border": {
+			"tokens": {
+				"color-border-dashed": {
+					"primitive": "color-neutral-50",
+					"title": "Border dashed",
+					"lowContrast": true
+				}
+			}
+		},
+		"promotion": {
+			"tokens": {
+				"color-promotion-free-kids": {
+					"primitive": "color-coolblue-70",
+					"title": "Promotion free kids",
+					"lowContrast": true
+				}
+			}
+		},
+		"other": {
+			"tokens": {
+				"color-other-gradient-linear-soft": {
+					"displayType": "gradient",
+					"primitive": "color-coolblue-20 to color-neutral-10",
+					"title": "Linear gradient soft"
+				},
+				"color-other-gradient-diagonal-soft": {
+					"displayType": "gradient",
+					"primitive": "color-coolblue-20 to color-neutral-10",
+					"title": "Diagonal gradient soft"
+				},
+				"color-other-gradient-linear": {
+					"displayType": "gradient",
+					"primitive": "color-coolblue-50 to color-neutral-10",
+					"title": "Linear gradient"
+				},
+				"color-other-gradient-diagonal": {
+					"displayType": "gradient",
+					"primitive": "color-coolblue-50 to color-neutral-10",
+					"title": "Diagonal gradient"
+				},
+				"color-other-gradient-linear-strong": {
+					"displayType": "gradient",
+					"primitive": "color-blue-100 to color-neutral-10",
+					"title": "Linear gradient strong"
+				},
+				"color-other-gradient-diagonal-strong": {
+					"displayType": "gradient",
+					"primitive": "color-blue-100 to color-neutral-10",
+					"title": "Diagonal gradient strong"
+				}
+			}
+		},
+		"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",
+					"darkColor": true
+				},
+				"color-brand-magiclife": {
+					"primitive": "color-brand-magiclife-yellow",
+					"title": "Magic Life"
+				},
+				"color-brand-bluestar": {
+					"primitive": "color-brand-bluestar-blue",
+					"title": "Bluestar"
+				},
+				"color-brand-splashworld": {
+					"primitive": "color-brand-splashworld-blue",
+					"title": "Splashworld",
+					"lowContrast": true
+				},
+				"color-brand-riu": {
+					"primitive": "color-brand-riu-red",
+					"title": "RIU",
+					"darkColor": true
+				},
+				"color-brand-soneo": {
+					"primitive": "color-brand-soneo-blue",
+					"title": "Soneo",
+					"darkColor": true
+				},
+				"color-brand-small-and-friendly": {
+					"primitive": "color-brand-small-and-friendly-blue",
+					"title": "Small & Friendly",
+					"darkColor": true
+				},
+				"color-brand-robinson": {
+					"primitive": "color-brand-robinson-blue",
+					"title": "Robinson",
+					"darkColor": true
+				},
+				"color-brand-scene": {
+					"primitive": "color-brand-scene-black",
+					"title": "Scene",
+					"darkColor": true
+				},
+				"color-brand-time-to-smile": {
+					"primitive": "color-brand-time-to-smile-gold",
+					"title": "Time to Smile",
+					"lowContrast": true
+				},
+				"color-brand-holiday-villages": {
+					"primitive": "color-brand-holiday-villages-purple",
+					"title": "Holiday villages",
+					"darkColor": true
+				},
+				"color-brand-kids-club": {
+					"primitive": "color-brand-kids-club-blue",
+					"title": "Kids club",
+					"darkColor": true
+				},
+				"color-brand-local": {
+					"primitive": "color-brand-local-biege",
+					"title": "Local"
+				},
+				"color-brand-musement": {
+					"primitive": "color-brand-musement-yellow",
+					"title": "Musement"
+				}
+			}
+		}
+	},
+	"ratings-numerical": {
+		"tokens": {
+			"ratings-numerical-alt-icon-color": {
+				"primitive": "uilib-color-brand-musement"
+			}
+		}
+	}
+}

package/scss/variables/_aspect-ratios.scss

@@ -0,0 +1,8 @@
+// Aspect ratios
+$uilib-aspect-ratios: (
+	'1x1-square': '1 / 1',
+	'4x3-portrait': '3 / 4',
+	'4x3-landscape': '4 / 3',
+	'16x9-wide': '16 / 9',
+	'3x1-panoramic': '3 / 1',
+) !default;

package/scss/variables/_assets.scss

@@ -0,0 +1,6 @@
+@use '../variables/env-variables' as *;
+
+// assets path
+$uilib-assets-icon-path: '#{$uilib-assets-base-url}v3/icons/tui/standard' !default;
+$uilib-assets-logo-path: '#{$uilib-assets-base-url}v3/logos' !default;
+$uilib-assets-image-path: '#{$uilib-assets-base-url}v3/images' !default;

package/scss/variables/_border-radius.scss

@@ -0,0 +1,20 @@
+// Border radius
+$uilib-radius: (
+	'none': 0,
+	// 4px
+	'100': 0.25rem,
+	// 8px
+	'200': 0.5rem,
+	// 16px
+	'400': 1rem,
+	// 24px
+	'600': 1.5rem,
+	// 40px
+	'1000': 2.5rem,
+	// 56px
+	'1400': 3.5rem,
+	// 72px
+	'1800': 4.5rem,
+	'pill': 100rem,
+	'circle': 50%,
+) !default;

package/scss/variables/_breakpoints.scss

@@ -0,0 +1,17 @@
+// Define the media query breakpoints
+$uilib-breakpoints: (
+	// 320px
+	xxs: 20rem,
+	// 580px
+	xs: 36.25rem,
+	// 760px
+	sm: 47.5rem,
+	// 960px
+	md: 60rem,
+	// 1200px
+	lg: 75rem,
+	// 1440px
+	xl: 90rem,
+	// 1920px
+	xxl: 120rem
+) !default;