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

package/scss/themes/tui/_overrides.scss

@@ -0,0 +1,33 @@
+@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,
+	(
+		'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,22 @@
+@use 'sass:map';
+@use '../../variables/primitives' as *;
+
+$uilib-tui-primitives: map.merge(
+	$uilib-primitives,
+	(
+		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,15 @@
+// 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';
+
+// font-family
+$uilib-font-family-ambit:
+	#{$app-prefix}Ambit,
+	#{$app-prefix}AmbitFallbackFont,
+	sans-serif; // override #{meta.inspect($uilib-font-family-lead)};

package/scss/themes/tui/fonts.json

@@ -0,0 +1,58 @@
+[
+	{
+		"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"
+	}
+]

package/scss/themes/tui/fonts.scss

@@ -0,0 +1,10 @@
+// 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/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,157 @@
+// 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);
+
+	// 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 text
+	@include util.uilib-build-css-vars('input-text', $uilib-input-text-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,137 @@
+{
+	"colors": {
+		"border": {
+			"displayType": "color",
+			"tokens": {
+				"color-border-dashed": {
+					"primitive": "color-neutral-50",
+					"title": "Border dashed",
+					"lowContrast": true
+				}
+			}
+		},
+		"promotion": {
+			"displayType": "color",
+			"tokens": {
+				"color-promotion-free-kids": {
+					"primitive": "color-coolblue-70",
+					"title": "Promotion free kids",
+					"lowContrast": true
+				}
+			}
+		},
+		"other": {
+			"displayType": "color",
+			"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-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;

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,16 @@
+// Elevations
+@use 'sass:map';
+@use '../lib/utility/mixins' as util;
+
+$uilib-elevation-base: (
+	// 0 0 2 0 / 16px
+	0: 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),
+	// 0 0 8 0 / 16px
+	200: 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);
+}