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

package/scss/variables/base-theme.json

@@ -0,0 +1,2142 @@
+{
+	"colors": {
+		"core": {
+			"displayType": "color",
+			"tokens": {
+				"color-core-interaction": {
+					"primitive": "color-blue-70",
+					"title": "Core interaction",
+					"darkColor": true
+				},
+				"color-core-brand": {
+					"primitive": "color-coolblue-50",
+					"title": "Core brand"
+				},
+				"color-core-brand-strong": {
+					"primitive": "color-blue-100",
+					"title": "Core brand strong",
+					"darkColor": true
+				},
+				"color-core-surface": {
+					"primitive": "color-coolblue-20",
+					"title": "Core surface"
+				},
+				"color-core-neutral": {
+					"primitive": "color-neutral-10",
+					"title": "Core neutral"
+				}
+			}
+		},
+		"text": {
+			"displayType": "color",
+			"tokens": {
+				"color-text-strong": {
+					"primitive": "color-blue-100",
+					"title": "Text strong",
+					"darkColor": true
+				},
+				"color-text-body": {
+					"primitive": "color-neutral-90",
+					"title": "Text body",
+					"darkColor": true
+				},
+				"color-text-link": {
+					"primitive": "color-blue-70",
+					"title": "Text link",
+					"darkColor": true
+				},
+				"color-text-inverse": {
+					"primitive": "color-neutral-10",
+					"title": "Text inverse"
+				},
+				"color-text-link-visited": {
+					"primitive": "color-purple-80",
+					"title": "Text link visited",
+					"darkColor": true
+				},
+				"color-text-link-visited-inverse": {
+					"primitive": "color-purple-30",
+					"title": "Text link visited inverse"
+				},
+				"color-text-promotion": {
+					"primitive": "color-red-80",
+					"title": "Text promotion",
+					"darkColor": true
+				},
+				"color-text-danger": {
+					"primitive": "color-red-80",
+					"title": "Text danger",
+					"darkColor": true
+				}
+			}
+		},
+		"status": {
+			"displayType": "color",
+			"tokens": {
+				"color-status-success-surface": {
+					"primitive": "color-green-20",
+					"title": "Status sucess surface"
+				},
+				"color-status-danger-surface": {
+					"primitive": "color-red-20",
+					"title": "Status danger surface"
+				},
+				"color-status-warning-surface": {
+					"primitive": "color-orange-20",
+					"title": "Status warning surface"
+				},
+				"color-status-info-surface": {
+					"primitive": "color-blue-20",
+					"title": "Status info surface"
+				},
+				"color-status-success-icon": {
+					"primitive": "color-green-80",
+					"title": "Status sucess icon",
+					"lowContrast": true
+				},
+				"color-status-danger-icon": {
+					"primitive": "color-red-80",
+					"title": "Status danger icon",
+					"darkColor": true
+				},
+				"color-status-warning-icon": {
+					"primitive": "color-orange-80",
+					"title": "Status warning icon",
+					"lowContrast": true
+				},
+				"color-status-info-icon": {
+					"primitive": "color-blue-100",
+					"title": "Status info icon",
+					"darkColor": true
+				}
+			}
+		},
+		"canvas": {
+			"displayType": "color",
+			"tokens": {
+				"color-canvas-default": {
+					"primitive": "color-neutral-10",
+					"title": "Canvas default"
+				},
+				"color-canvas-contrast": {
+					"primitive": "color-neutral-20",
+					"title": "Canvas contrast"
+				}
+			}
+		},
+		"border": {
+			"displayType": "color",
+			"tokens": {
+				"color-border-interaction": {
+					"primitive": "color-blue-70",
+					"title": "Border interaction",
+					"darkColor": true
+				},
+				"color-border-brand-strong": {
+					"primitive": "color-blue-100",
+					"title": "Border brand strong",
+					"darkColor": true
+				},
+				"color-border-input": {
+					"primitive": "color-neutral-70",
+					"title": "Border input",
+					"darkColor": true
+				},
+				"color-border-card": {
+					"primitive": "color-neutral-40",
+					"title": "Border card"
+				},
+				"color-border-inverse": {
+					"primitive": "color-neutral-10",
+					"title": "Border inverse"
+				},
+				"color-border-divider": {
+					"primitive": "color-neutral-40",
+					"title": "Border divider"
+				},
+				"color-border-danger": {
+					"primitive": "color-red-80",
+					"title": "Border danger",
+					"darkColor": true
+				}
+			}
+		},
+		"promotion": {
+			"displayType": "color",
+			"tokens": {
+				"color-promotion": {
+					"primitive": "color-red-80",
+					"title": "Promotion deals",
+					"darkColor": true
+				}
+			}
+		},
+		"other": {
+			"displayType": "color",
+			"tokens": {
+				"color-other-disabled-soft": {
+					"primitive": "color-neutral-40",
+					"title": "Disabled soft"
+				},
+				"color-other-disabled-strong": {
+					"primitive": "color-neutral-70",
+					"title": "Disabled strong",
+					"darkColor": true
+				},
+				"color-other-elevation": {
+					"primitive": "color-neutral-100 40%",
+					"title": "Elevation",
+					"darkColor": true
+				},
+				"color-other-scrim": {
+					"primitive": "color-neutral-100 80%",
+					"title": "Scrim",
+					"darkColor": true
+				},
+				"color-other-active-state-tint": {
+					"primitive": "color-blue-20 30%",
+					"title": "Active state tint"
+				},
+				"color-other-button-hover-state": {
+					"primitive": "color-neutral-10 20%",
+					"title": "Button hover state"
+				},
+				"color-other-secondary-button-hover-state": {
+					"primitive": "color-blue-20 30%",
+					"title": "Secondary button hover state"
+				},
+				"color-other-skeleton-loading": {
+					"primitive": "color-neutral-40",
+					"title": "Skeleton loading"
+				},
+				"color-other-scroll-handle": {
+					"primitive": "color-neutral-50",
+					"title": "Scroll handle colour"
+				}
+			}
+		},
+		"brands": {
+			"description": "Specific brand colours",
+			"displayType": "color",
+			"tokens": {
+				"color-brand-trip-advisor": {
+					"primitive": "color-brand-trip-advisor-green",
+					"title": "Trip Advisor",
+					"lowContrast": true
+				},
+				"color-brand-paypal": {
+					"primitive": "color-brand-paypal-blue",
+					"title": "PayPal",
+					"darkColor": true
+				}
+			}
+		}
+	},
+	"elevations": {
+		"displayType": "shadow",
+		"tokens": {
+			"elevation-none": {
+				"title": "none"
+			},
+			"elevation-100": {
+				"title": "100",
+				"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%"
+			}
+		}
+	},
+	"focus": {
+		"displayType": "size",
+		"tokens": {
+			"focus-default": {
+				"title": "Focus",
+				"primitive": "2px color-neutral-10, 4px color-blue-60, 6px color-blue-60 40%",
+				"longValue": true,
+				"displayType": "shadow"
+			},
+			"focus-size": {
+				"title": "Focus style size",
+				"description": "Focus style size"
+			},
+			"focus-gap": {
+				"title": "Focus style gap",
+				"description": "Focus style gap"
+			}
+		}
+	},
+	"borderradius": {
+		"displayType": "radius",
+		"tokens": {
+			"border-radius-none": {
+				"title": "Border radius none"
+			},
+			"border-radius-100": {
+				"title": "Border radius 100",
+				"useWith": ["Alert", "Accordion", "Image counter", "Pagination"]
+			},
+			"border-radius-200": {
+				"title": "Border radius 200",
+				"useWith": ["Card"]
+			},
+			"border-radius-400": {
+				"title": "Border radius 400",
+				"useWith": ["Eye catcher"]
+			},
+			"border-radius-600": {
+				"title": "Border radius 600",
+				"useWith": ["Skeleton", "Card"]
+			},
+			"border-radius-1000": {
+				"title": "Border radius 1000",
+				"useWith": ["Header"]
+			},
+			"border-radius-1400": {
+				"title": "Border radius 1400",
+				"useWith": ["Header"]
+			},
+			"border-radius-1800": {
+				"title": "Border radius 1800",
+				"useWith": ["Header"]
+			},
+			"border-radius-pill": {
+				"title": "Border radius pill",
+				"useWith": ["Button", "Filter", "Tag"]
+			},
+			"border-radius-circle": {
+				"title": "Border radius circle",
+				"useWith": ["Profile pictures", "Icon buttons"]
+			}
+		}
+	},
+	"aspectratios": {
+		"displayType": "aspect",
+		"tokens": {
+			"aspect-ratio-1x1-square": {
+				"title": "Aspect ratio 1:1 square",
+				"description": "1:1 Square"
+			},
+			"aspect-ratio-4x3-portrait": {
+				"title": "Aspect ratio 4:3 portrait",
+				"description": "4:3 Portrait"
+			},
+			"aspect-ratio-4x3-landscape": {
+				"title": "Aspect ratio 4:3 landscape",
+				"description": "4:3 Landscape"
+			},
+			"aspect-ratio-16x9-wide": {
+				"title": "Aspect ratio 16:9 wide",
+				"description": "16:9 Wide"
+			},
+			"aspect-ratio-3x1-panoramic": {
+				"title": "Aspect ratio 3:1 panoramic",
+				"description": "3:1 Panoramic"
+			}
+		}
+	},
+	"layers": {
+		"displayType": "empty",
+		"tokens": {
+			"layer-hidden": {
+				"title": "Hidden",
+				"description": "The hidden element is on the lowest level, with the smallest index value of -1"
+			},
+			"layer-default": {
+				"title": "Default",
+				"description": "Default level for any element. For use with resetting if required."
+			},
+			"layer-top": {
+				"title": "Top",
+				"description": "Displayed above the default"
+			},
+			"layer-dropdown": {
+				"title": "Dropdown",
+				"description": "Below the sticky/fixed elements but above default content"
+			},
+			"layer-sticky": {
+				"title": "Sticky",
+				"description": "Below fixed elements but above dropdown"
+			},
+			"layer-modal": {
+				"title": "Modal",
+				"description": "Above sticky elements but below popover and tooltips"
+			},
+			"layer-popover": {
+				"title": "Popover",
+				"description": "Above modal elements but below tooltips"
+			},
+			"layer-tooltip": {
+				"title": "Tooltip",
+				"description": "Above all other elements"
+			}
+		}
+	},
+	"spacing": {
+		"displayType": "size",
+		"tokens": {
+			"spacing-auto": {
+				"title": "Spacing auto"
+			},
+			"spacing-none": {
+				"title": "Spacing none"
+			},
+			"spacing-050": {
+				"title": "Spacing 050"
+			},
+			"spacing-100": {
+				"title": "Spacing 100"
+			},
+			"spacing-200": {
+				"title": "Spacing 200"
+			},
+			"spacing-300": {
+				"title": "Spacing 300"
+			},
+			"spacing-400": {
+				"title": "Spacing 400"
+			},
+			"spacing-500": {
+				"title": "Spacing 500"
+			},
+			"spacing-600": {
+				"title": "Spacing 600"
+			},
+			"spacing-700": {
+				"title": "Spacing 700"
+			},
+			"spacing-800": {
+				"title": "Spacing 800"
+			},
+			"spacing-900": {
+				"title": "Spacing 900"
+			},
+			"spacing-1000": {
+				"title": "Spacing 1000"
+			},
+			"spacing-1100": {
+				"title": "Spacing 1100"
+			},
+			"spacing-1200": {
+				"title": "Spacing 1200"
+			},
+			"spacing-1300": {
+				"title": "Spacing 1300"
+			},
+			"spacing-1400": {
+				"title": "Spacing 1400"
+			},
+			"spacing-1500": {
+				"title": "Spacing 1500"
+			},
+			"spacing-1600": {
+				"title": "Spacing 1600"
+			}
+		}
+	},
+	"strokes": {
+		"stroke-sizes": {
+			"displayType": "border-width",
+			"tokens": {
+				"stroke-size-025": {
+					"title": "Thin"
+				},
+				"stroke-size-050": {
+					"title": "Medium"
+				},
+				"stroke-size-075": {
+					"title": "Thick"
+				}
+			}
+		},
+		"stroke-styles": {
+			"displayType": "border-style",
+			"tokens": {
+				"stroke-style-none": {
+					"title": "None"
+				},
+				"stroke-style-solid": {
+					"title": "Solid"
+				},
+				"stroke-style-dashed": {
+					"title": "Dashed"
+				}
+			}
+		}
+	},
+	"typography": {
+		"font-size": {
+			"displayType": "font-size",
+			"tokens": {
+				"font-size-root": {
+					"title": "Root font size"
+				}
+			}
+		},
+		"font-family": {
+			"displayType": "font-family",
+			"tokens": {
+				"font-family-display": {
+					"title": "Display"
+				},
+				"font-family-lead": {
+					"title": "Lead"
+				},
+				"font-family-base": {
+					"title": "Base"
+				}
+			}
+		},
+		"line-height": {
+			"displayType": "line-height",
+			"tokens": {
+				"line-height-heading": {
+					"title": "Heading"
+				},
+				"line-height-body": {
+					"title": "Body"
+				},
+				"line-height-none": {
+					"title": "None"
+				}
+			}
+		},
+		"font-weight": {
+			"displayType": "font-weight",
+			"tokens": {
+				"font-weight-regular": {
+					"title": "Regular"
+				},
+				"font-weight-semibold": {
+					"title": "Semibold"
+				},
+				"font-weight-bold": {
+					"title": "Bold"
+				}
+			}
+		},
+		"typography": {
+			"displayType": "font",
+			"tokens": {
+				"typography-display-large": {
+					"title": "Display large"
+				},
+				"typography-display-medium": {
+					"title": "Display medium"
+				},
+				"typography-display-small": {
+					"title": "Display small"
+				},
+				"typography-heading-xxlarge": {
+					"title": "Heading xxlarge"
+				},
+				"typography-heading-xlarge": {
+					"title": "Heading xlarge"
+				},
+				"typography-heading-large": {
+					"title": "Heading large"
+				},
+				"typography-heading-medium": {
+					"title": "Heading medium"
+				},
+				"typography-heading-small": {
+					"title": "Heading small"
+				},
+				"typography-component-heading-xxlarge": {
+					"title": "Component heading xxlarge"
+				},
+				"typography-component-heading-xxlarge-strong": {
+					"title": "Component heading xxlarge strong"
+				},
+				"typography-component-heading-xlarge": {
+					"title": "Component heading xlarge"
+				},
+				"typography-component-heading-xlarge-strong": {
+					"title": "Component heading xlarge strong"
+				},
+				"typography-component-heading-large": {
+					"title": "Component heading large"
+				},
+				"typography-component-heading-large-strong": {
+					"title": "Component heading large strong"
+				},
+				"typography-component-heading-medium": {
+					"title": "Component heading medium"
+				},
+				"typography-component-heading-medium-strong": {
+					"title": "Component heading medium strong"
+				},
+				"typography-component-heading-small": {
+					"title": "Component heading small"
+				},
+				"typography-component-heading-small-strong": {
+					"title": "Component heading small strong"
+				},
+				"typography-body-large": {
+					"title": "Body large"
+				},
+				"typography-body-large-strong": {
+					"title": "Body large strong"
+				},
+				"typography-body-medium": {
+					"title": "Body medium"
+				},
+				"typography-body-medium-strong": {
+					"title": "Body medium strong"
+				},
+				"typography-body-small": {
+					"title": "Body small"
+				},
+				"typography-body-small-strong": {
+					"title": "Body small strong"
+				},
+				"typography-label-large": {
+					"title": "Label large"
+				},
+				"typography-label-large-strong": {
+					"title": "Label large strong"
+				},
+				"typography-label-medium": {
+					"title": "Label medium"
+				},
+				"typography-label-medium-strong": {
+					"title": "Label medium strong"
+				},
+				"typography-label-small": {
+					"title": "Label small"
+				},
+				"typography-label-small-strong": {
+					"title": "Label small strong"
+				},
+				"typography-label-xsmall": {
+					"title": "Label xsmall"
+				},
+				"typography-label-xsmall-strong": {
+					"title": "Label xsmall strong"
+				}
+			}
+		}
+	},
+	"icon": {
+		"description": "Icon sizes are matched to body copy sizes calculated line-heights so that they align nicely when placed inline with copy.",
+		"displayType": "size",
+		"tokens": {
+			"icon-size-default": {
+				"title": "Default icon size"
+			},
+			"icon-size-xsmall": {
+				"title": "Xsmall icon size"
+			},
+			"icon-size-small": {
+				"title": "Small icon size"
+			},
+			"icon-size-medium": {
+				"title": "Medium icon size"
+			},
+			"icon-size-large": {
+				"title": "Large icon size"
+			},
+			"icon-size-xlarge": {
+				"title": "Xlarge icon size"
+			},
+			"icon-size-xxlarge": {
+				"title": "XXlarge icon size"
+			},
+			"icon-size-xxxlarge": {
+				"title": "XXXlarge icon size"
+			}
+		}
+	},
+	"grid": {
+		"displayType": "empty",
+		"tokens": {
+			"grid-columns": {
+				"title": "Grid columns",
+				"description": "Number of base grid columns",
+				"value": "12"
+			},
+			"grid-gutter-width": {
+				"title": "Gutter width",
+				"description": "Horizontal spacing between grid elements (row-gap)",
+				"value": "1rem (16px)",
+				"displayType": "size"
+			},
+			"grid-gutter-height": {
+				"title": "Gutter height",
+				"description": "Vertical spacing between grid elements (column-gap)",
+				"value": "1rem (16px)",
+				"displayType": "size"
+			},
+			"layout-max-width": {
+				"title": "Max page width",
+				"description": "Maximum width of the content",
+				"value": "80rem (1280px)"
+			},
+			"layout-app-height": {
+				"title": "Max app height",
+				"description": "Height of the content on the viewport",
+				"value": "100dvh"
+			}
+		}
+	},
+	"motion": {
+		"description": "Motion timings and functions - Hover over the example to preview the transition timing or function",
+		"displayType": "motion",
+		"tokens": {
+			"motion-duration-slow": {
+				"displayType": "timing",
+				"title": "Slow transition"
+			},
+			"motion-duration-medium": {
+				"displayType": "timing",
+				"title": "Medium transition"
+			},
+			"motion-duration-fast": {
+				"displayType": "timing",
+				"title": "Fast transition"
+			},
+			"motion-timing-inout": {
+				"title": "EaseInOut",
+				"description": "EaseInOut - Default for any motion requirements"
+			},
+			"motion-timing-in": {
+				"title": "EaseInSine",
+				"description": "EaseInSine - Where interactions require instant feedback for the user. Maximum duration of 0.5s"
+			},
+			"motion-timing-out": {
+				"title": "EaseOutSine",
+				"description": "EaseOutSine - Where interactions require instant feedback for the user. Maximum duration of 0.5s"
+			},
+			"motion-timing-brand": {
+				"title": "EaseOutBack",
+				"description": "EaseOutBack - We should aim to implement a sense of joy to the user. Creating moments that feel a little playful. For these interactions we use EaseOutBack which creates a subtle bounce moment. This should be used on the  Navigation Button, Naviagtion Drop Down, Carousel Swipe and List Image Transition. We can also use this with type to create a nice bounce effect when staggering the postions of the letters"
+			}
+		}
+	},
+	"accordion": {
+		"tokens": {
+			"accordion-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-100",
+				"title": "Accordion radius",
+				"description": "Accordion radius"
+			},
+			"accordion-logo-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-100",
+				"title": "Accordion logo radius",
+				"description": "Accordion logo radius"
+			},
+			"accordion-icon": {
+				"displayType": "icon",
+				"title": "Accordion icon",
+				"description": "Accordion icon",
+				"longValue": true
+			},
+			"accordion-default-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-neutral",
+				"title": "Accordion default background colour",
+				"description": "Accordion default background colour"
+			},
+			"accordion-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-card",
+				"title": "Accordion border",
+				"description": "Accordion border colour"
+			},
+			"accordion-divider-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-card",
+				"title": "Accordion divider",
+				"description": "Accordion divider colour"
+			}
+		}
+	},
+	"active-tag": {
+		"tokens": {
+			"active-tag-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-200",
+				"title": "Active tag radius",
+				"description": "Active tag radius"
+			},
+			"active-tag-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-input",
+				"title": "Active tag border",
+				"description": "Active tag border color"
+			},
+			"active-tag-background-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-neutral",
+				"title": "Active tag background color",
+				"description": "Active tag background color"
+			},
+			"active-tag-cross-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Active tag cross color",
+				"description": "Active tag cross color"
+			},
+			"active-tag-icon": {
+				"displayType": "icon",
+				"title": "Active tag icon",
+				"description": "Active tag icon",
+				"longValue": true
+			}
+		}
+	},
+	"alert": {
+		"displayType": "icon",
+		"tokens": {
+			"alert-icon-info-bg": {
+				"title": "Alert info icon background",
+				"description": "Alert info icon background",
+				"longValue": true
+			},
+			"alert-icon-info-mask": {
+				"title": "Alert info icon mask",
+				"description": "Alert info icon mask",
+				"longValue": true
+			},
+			"alert-icon-error-bg": {
+				"title": "Alert error icon background",
+				"description": "Alert error icon background",
+				"longValue": true
+			},
+			"alert-icon-error-mask": {
+				"title": "Alert error icon mask",
+				"description": "Alert error icon mask",
+				"longValue": true
+			},
+			"alert-icon-warning-bg": {
+				"title": "Alert warning icon background",
+				"description": "Alert warning icon background",
+				"longValue": true
+			},
+			"alert-icon-warning-mask": {
+				"title": "Alert warning icon mask",
+				"description": "Alert warning icon mask",
+				"longValue": true
+			},
+			"alert-icon-success-bg": {
+				"title": "Alert success icon background",
+				"description": "Alert success icon background",
+				"longValue": true
+			},
+			"alert-icon-success-mask": {
+				"title": "Alert success icon mask",
+				"description": "Alert success icon mask",
+				"longValue": true
+			},
+			"alert-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-100",
+				"title": "Alert container radius",
+				"description": "Alert container radius"
+			},
+			"alert-text-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-strong",
+				"title": "Text colour",
+				"description": "Text colour"
+			}
+		}
+	},
+	"breadcrumb": {
+		"tokens": {
+			"breadcrumb-icon": {
+				"displayType": "icon",
+				"title": "Breadcrumb separator icon",
+				"description": "Icon displayed with within breadcrumb",
+				"longValue": true
+			}
+		}
+	},
+	"button": {
+		"displayType": "color",
+		"tokens": {
+			"button-radius": {
+				"primitive": "uilib-border-radius-pill",
+				"displayType": "radius",
+				"title": "Button radius",
+				"description": "Button radius"
+			},
+			"button-primary-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Primary text colour",
+				"description": "Primary text colour"
+			},
+			"button-primary-bg-color": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Primary background colour",
+				"description": "Primary background colour"
+			},
+			"button-primary-hover-bg-color": {
+				"primitive": "uilib-color-core-interaction + 20% uilib-color-core-neutral",
+				"title": "Primary background color - hover",
+				"description": "Primary background color - hover"
+			},
+			"button-secondary-color": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Secondary text and border colour",
+				"description": "Secondary text and border colour"
+			},
+			"button-secondary-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Secondary background colour",
+				"description": "Secondary background colour"
+			},
+			"button-secondary-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-core-interaction",
+				"title": "Secondary background color - hover",
+				"description": "Secondary background color - hover"
+			},
+			"button-tertiary-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Tertiary text colour",
+				"description": "Tertiary text colour"
+			},
+			"button-tertiary-bg-color": {
+				"primitive": "uilib-color-core-brand",
+				"title": "Tertiary background colour",
+				"description": "Tertiary background colour"
+			},
+			"button-tertiary-hover-bg-color": {
+				"primitive": "uilib-color-core-brand + 20% uilib-color-core-neutral",
+				"title": "Tertiary background color - hover",
+				"description": "Tertiary background color - hover"
+			},
+			"button-promotion-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Promotion text colour",
+				"description": "Promotion text colour"
+			},
+			"button-promotion-bg-color": {
+				"primitive": "uilib-color-promotion",
+				"title": "Promotion background colour",
+				"description": "Promotion background colour"
+			},
+			"button-promotion-hover-bg-color": {
+				"primitive": "uilib-color-promotion + 20% uilib-color-core-neutral",
+				"title": "Promotion background color - hover",
+				"description": "Promotion background color - hover"
+			},
+			"button-search-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Search text colour",
+				"description": "Search text colour"
+			},
+			"button-search-bg-color": {
+				"primitive": "uilib-color-core-brand-strong",
+				"title": "Search background colour",
+				"description": "Search background colour"
+			},
+			"button-search-hover-bg-color": {
+				"primitive": "uilib-color-core-brand-strong + 20% uilib-color-core-neutral",
+				"title": "Search background color - hover",
+				"description": "Search background color - hover"
+			},
+			"button-disabled-color": {
+				"primitive": "uilib-color-other-disabled-strong",
+				"title": "Disabled text colour",
+				"description": "Disabled text colour"
+			},
+			"button-disabled-bg-color": {
+				"primitive": "uilib-color-other-disabled-soft",
+				"title": "Disabled background and border colour",
+				"description": "Disabled background and border colour"
+			}
+		}
+	},
+	"card-search": {
+		"tokens": {
+			"card-search-radius": {
+				"primitive": "uilib-border-radius-400",
+				"displayType": "radius",
+				"title": "Card radius",
+				"description": "Card radius"
+			},
+			"card-search-radius-spacing": {
+				"primitive": "uilib-border-spacing-400",
+				"displayType": "size",
+				"title": "Spacing required for card radius",
+				"description": "Spacing required for card radius"
+			},
+			"card-search-color-flagship": {
+				"primitive": "uilib-color-core-brand-strong",
+				"displayType": "color",
+				"title": "Background for flagship wrapper",
+				"description": "Background for flagship wrapper"
+			},
+			"card-search-color-flagship-text": {
+				"primitive": "uilib-color-text-inverse",
+				"displayType": "color",
+				"title": "Text colour for flagship wrapper",
+				"description": "Text colour for flagship wrapper"
+			},
+			"card-search-highlights-icon": {
+				"displayType": "icon",
+				"title": "Icon for show/hide within highlight section",
+				"description": "Icon for show/hide within highlight section"
+			}
+		}
+	},
+	"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",
+				"longValue": true
+			},
+			"form-row-icon": {
+				"displayType": "icon",
+				"title": "Form row error icon",
+				"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"
+			}
+		}
+	},
+	"icon-button": {
+		"displayType": "color",
+		"tokens": {
+			"icon-button-radius": {
+				"primitive": "uilib-border-radius-pill",
+				"displayType": "radius",
+				"title": "Button radius",
+				"description": "Button radius"
+			},
+			"icon-button-ghost-color": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Ghost text colour",
+				"description": "Ghost text colour"
+			},
+			"icon-button-ghost-bg-color": {
+				"primitive": "transparent",
+				"title": "Ghost background colour",
+				"description": "Ghost background colour"
+			},
+			"icon-button-ghost-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-core-interaction",
+				"title": "Ghost background color - hover",
+				"description": "Ghost background color - hover"
+			},
+			"icon-button-primary-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Primary text colour",
+				"description": "Primary text colour"
+			},
+			"icon-button-primary-bg-color": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Primary background colour",
+				"description": "Primary background colour"
+			},
+			"icon-button-primary-hover-bg-color": {
+				"primitive": "uilib-color-core-interaction + 20% uilib-color-core-neutral",
+				"title": "Primary background color - hover",
+				"description": "Primary background color - hover"
+			},
+			"icon-button-secondary-color": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Secondary text and border colour",
+				"description": "Secondary text and border colour"
+			},
+			"icon-button-secondary-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Secondary background colour",
+				"description": "Secondary background colour"
+			},
+			"icon-button-secondary-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-core-interaction",
+				"title": "Secondary background color - hover",
+				"description": "Secondary background color - hover"
+			},
+			"icon-button-control-color": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Control text colour",
+				"description": "Control text colour"
+			},
+			"icon-button-control-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Control background colour",
+				"description": "Control background colour"
+			},
+			"icon-button-control-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 20% uilib-color-core-interaction",
+				"title": "Control background color - hover",
+				"description": "Control background color - hover"
+			},
+			"icon-button-promotion-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Promotion text colour",
+				"description": "Promotion text colour"
+			},
+			"icon-button-promotion-bg-color": {
+				"primitive": "uilib-color-promotion",
+				"title": "Promotion background colour",
+				"description": "Promotion background colour"
+			},
+			"icon-button-promotion-hover-bg-color": {
+				"primitive": "uilib-color-promotion + 20% uilib-color-core-neutral",
+				"title": "Promotion background color - hover",
+				"description": "Promotion background color - hover"
+			},
+			"icon-button-search-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Search text colour",
+				"description": "Search text colour"
+			},
+			"icon-button-search-bg-color": {
+				"primitive": "uilib-color-core-brand-strong",
+				"title": "Search background colour",
+				"description": "Search background colour"
+			},
+			"icon-button-search-hover-bg-color": {
+				"primitive": "uilib-color-core-brand-strong + 20% uilib-color-core-neutral",
+				"title": "Search background color - hover",
+				"description": "Search background color - hover"
+			},
+			"icon-button-disabled-color": {
+				"primitive": "uilib-color-other-disabled-strong",
+				"title": "Disabled text colour",
+				"description": "Disabled text colour"
+			},
+			"icon-button-disabled-bg-color": {
+				"primitive": "uilib-color-other-disabled-soft",
+				"title": "Disabled background and border colour",
+				"description": "Disabled background and border colour"
+			},
+			"icon-button-shortlist-color": {
+				"primitive": "uilib-color-text-promotion",
+				"title": "Shortlist text colour",
+				"description": "Shortlist text colour"
+			},
+			"icon-button-shortlist-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Shortlist background colour",
+				"description": "Shortlist background colour"
+			},
+			"icon-button-shortlist-hover-bg-color": {
+				"primitive": "uilib-color-core-neutral + 10% uilib-color-promotion",
+				"title": "Shortlist background color - hover",
+				"description": "Shortlist background color - hover"
+			}
+		}
+	},
+	"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": {
+				"displayType": "icon",
+				"title": "Checked icon",
+				"description": "Checked icon",
+				"longValue": true
+			},
+			"input-checkbox-icon-indeterminate": {
+				"displayType": "icon",
+				"title": "Indeterminate icon",
+				"description": "Indeterminate icon",
+				"longValue": true
+			},
+			"input-checkbox-text-color-strong": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-strong",
+				"title": "Text colour (strong variant)",
+				"description": "Text colour (strong variant)"
+			},
+			"input-checkbox-confirm-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-100",
+				"title": "Confirmation checkbox container radius",
+				"description": "Confirmation checkbox container radius"
+			}
+		}
+	},
+	"input-chip": {
+		"tokens": {
+			"input-chip-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-200",
+				"title": "Chip radius",
+				"description": "Border radius for chip component"
+			},
+
+			"input-chip-default-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-neutral",
+				"title": "Default background colour",
+				"description": "Default background colour"
+			},
+			"input-chip-default-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-border-card",
+				"title": "Default border colour",
+				"description": "Default border colour"
+			},
+			"input-chip-default-text-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-strong",
+				"title": "Default text colour",
+				"description": "Default text colour"
+			},
+			"input-chip-hover-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Hover background colour",
+				"description": "Background colour when hovered"
+			},
+			"input-chip-active-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-active-state-tint",
+				"title": "Selected background colour",
+				"description": "Background colour when selected"
+			},
+			"input-chip-active-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Active border colour",
+				"description": "Active border colour"
+			},
+			"input-chip-active-hover-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Selected hover background colour",
+				"description": "Hover background colour when selected"
+			},
+			"input-chip-disabled-text-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-disabled-soft",
+				"title": "Disabled text colour",
+				"description": "Disabled text colour"
+			},
+			"input-chip-disabled-bg-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-neutral",
+				"title": "Disabled background colour",
+				"description": "Disabled background colour"
+			}
+		}
+	},
+	"input-count": {
+		"displayType": "color",
+		"tokens": {
+			"input-count-radius": {
+				"primitive": "uilib-border-radius-100",
+				"displayType": "radius",
+				"title": "Input count border radius",
+				"description": "Input count border radius"
+			},
+			"input-count-color-bg": {
+				"primitive": "uilib-color-canvas-default",
+				"title": "Input count background color",
+				"description": "Input count background color"
+			},
+			"input-count-color-border": {
+				"primitive": "uilib-color-border-input",
+				"title": "Input count border color",
+				"description": "Input count border color"
+			},
+			"input-count-color-text": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Input count text color",
+				"description": "Input count text color"
+			},
+			"input-count-color-selected": {
+				"primitive": "uilib-color-core-interaction",
+				"title": "Input count selected state background and border color",
+				"description": "Input count selected state background and border color"
+			},
+			"input-count-color-selected-text": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Input count selected text color",
+				"description": "Input count selected text color"
+			},
+			"input-count-font": {
+				"primitive": "uilib-typography-body-medium-strong",
+				"displayType": "font",
+				"title": "Input count font",
+				"description": "Input count font",
+				"longValue": true
+			},
+			"input-count-size": {
+				"primitive": "uilib-spacing-800",
+				"displayType": "size",
+				"title": "Input count minimum size",
+				"description": "Input count minimum size"
+			}
+		}
+	},
+	"input-radio": {
+		"tokens": {
+			"input-radio-text-color-strong": {
+				"displayType": "color",
+				"primitive": "uilib-color-text-strong",
+				"title": "Text colour (strong variant)",
+				"description": "Text colour (strong variant)"
+			}
+		}
+	},
+	"input-slider": {
+		"tokens": {
+			"input-slider-track-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-other-disabled-strong",
+				"title": "Default track colour",
+				"description": "Default track colour"
+			},
+			"input-slider-track-color-selected": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Selected track colour",
+				"description": "Selected track colour"
+			},
+			"input-slider-track-height": {
+				"displayType": "size",
+				"title": "Track height",
+				"description": "Track height"
+			},
+			"input-slider-track-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-pill",
+				"title": "Track radius",
+				"description": "Track radius"
+			},
+			"input-slider-thumb-size": {
+				"displayType": "size",
+				"title": "Thumb size",
+				"description": "Thumb size"
+			},
+			"input-slider-thumb-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-circle",
+				"title": "Thumb radius",
+				"description": "Thumb radius"
+			},
+			"input-slider-thumb-border-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-interaction",
+				"title": "Thumb border colour",
+				"description": "Thumb border colour"
+			}
+		}
+	},
+	"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": {
+			"input-text-icon-clear": {
+				"title": "Clear icon",
+				"description": "Clear icon",
+				"longValue": true
+			},
+			"input-text-icon-show": {
+				"title": "Show password icon",
+				"description": "Show password icon",
+				"longValue": true
+			},
+			"input-text-icon-hide": {
+				"title": "Hide password icon",
+				"description": "Hide password icon",
+				"longValue": true
+			},
+			"input-text-icon-calendar": {
+				"title": "Calendar icon",
+				"description": "Calendar icon",
+				"longValue": true
+			}
+		}
+	},
+	"link": {
+		"displayType": "color",
+		"tokens": {
+			"link-decoration-color": {
+				"primitive": "uilib-color-text-link",
+				"title": "Link underline color",
+				"description": "Link underline color"
+			},
+			"link-decoration-color-visited": {
+				"primitive": "uilib-color-text-link-visited",
+				"title": "Visited link underline color",
+				"description": "Visited link underline color"
+			},
+			"link-decoration-color-inverse": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Inversed link underline color",
+				"description": "Inversed link underline color"
+			},
+			"link-decoration-color-inverse-visited": {
+				"primitive": "uilib-color-text-link-visited-inverse",
+				"title": "Visited inversed link underline color",
+				"description": "Visited inversed link underline color"
+			},
+			"link-decoration-style": {
+				"primitive": "uilib-stroke-style-solid",
+				"title": "Link underline style",
+				"description": "Link underline style",
+				"displayType": "border-style"
+			},
+			"link-decoration-thickness": {
+				"primitive": "uilib-stroke-size-025",
+				"title": "Link underline thickness",
+				"description": "Link underline thickness",
+				"displayType": "border-width"
+			},
+			"link-decoration-thickness-hover": {
+				"primitive": "uilib-stroke-size-050",
+				"title": "Link underline thickness on hover",
+				"description": "Link underline thickness on hover",
+				"displayType": "border-width"
+			},
+			"link-underline-offset": {
+				"primitive": "uilib-spacing-050",
+				"title": "Spacing between link label and underline",
+				"description": "Spacing between link label and underline",
+				"displayType": "size"
+			}
+		}
+	},
+	"list": {
+		"tokens": {
+			"list-bullet-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "List bullet color",
+				"description": "List bullet color",
+				"displayType": "color"
+			},
+			"list-bullet-icon": {
+				"title": "List bullet icon",
+				"description": "List bullet icon",
+				"displayType": "icon"
+			},
+			"list-image-radius": {
+				"primitive": "uilib-border-radius-100",
+				"title": "List image radius",
+				"description": "List image radius",
+				"displayType": "radius"
+			},
+			"list-image-radius-alt": {
+				"primitive": "uilib-border-radius-circle",
+				"title": "List image radius (alt)",
+				"description": "List image radius (alt)",
+				"displayType": "radius"
+			}
+		}
+	},
+	"loader": {
+		"tokens": {
+			"loader-image": {
+				"title": "Loader image",
+				"description": "Loader image",
+				"displayType": "image",
+				"longValue": true
+			},
+			"loader-small": {
+				"title": "Loader image size small",
+				"description": "Loader image size small",
+				"displayType": "empty"
+			},
+			"loader-medium": {
+				"title": "Loader image size medium",
+				"description": "Loader image size medium",
+				"displayType": "empty"
+			},
+			"loader-large": {
+				"title": "Loader image size large",
+				"description": "Loader image size large",
+				"displayType": "empty"
+			},
+			"loader-font-small": {
+				"primitive": "uilib-typography-component-heading-medium",
+				"title": "Loader font small",
+				"description": "Loader font small",
+				"displayType": "font",
+				"longValue": true
+			},
+			"loader-font-medium": {
+				"primitive": "uilib-typography-component-heading-large",
+				"title": "Loader font medium",
+				"description": "Loader font medium",
+				"displayType": "font",
+				"longValue": true
+			},
+			"loader-font-large": {
+				"primitive": "uilib-typography-component-heading-xlarge",
+				"title": "Loader font large",
+				"description": "Loader font large",
+				"displayType": "font",
+				"longValue": true
+			}
+		}
+	},
+	"media-button": {
+		"displayType": "color",
+		"tokens": {
+			"media-button-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Media button text color",
+				"description": "Media button text color"
+			}
+		}
+	},
+	"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": {
+			"pagination-text-color": {
+				"primitive": "uilib-color-text-body",
+				"title": "Pagination text color",
+				"description": "Pagination text color"
+			},
+			"pagination-border-radius": {
+				"primitive": "uilib-icon-button-radius",
+				"displayType": "radius",
+				"title": "Pagination text color",
+				"description": "Pagination text color"
+			},
+			"pagination-icon-color": {
+				"primitive": "uilib-icon-button-ghost-color",
+				"title": "Icon color",
+				"description": "Icon color"
+			},
+			"pagination-selected-bg": {
+				"primitive": "uilib-icon-button-ghost-color",
+				"title": "Background color of the selected page",
+				"description": "Background color of the selected page"
+			},
+			"pagination-hover-bg": {
+				"primitive": "icon-button-ghost-hover-bg-color",
+				"displayType": "color",
+				"title": "Background color on page hover",
+				"description": "Background color on page hover"
+			},
+			"pagination-icon-prev": {
+				"displayType": "icon",
+				"title": "Previous control icon",
+				"description": "Previous control icon"
+			},
+			"pagination-icon-next": {
+				"displayType": "icon",
+				"title": "Next control icon",
+				"description": "Next control icon"
+			}
+		}
+	},
+	"price": {
+		"tokens": {
+			"price-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Total price tooltip color",
+				"description": "Total price underline color",
+				"displayType": "color"
+			},
+			"price-font-primary": {
+				"primitive": "uilib-font-family-lead",
+				"title": "Primary price font",
+				"description": "Primary price font",
+				"displayType": "font",
+				"longValue": true
+			},
+			"price-font-secondary": {
+				"primitive": "uilib-font-family-base",
+				"title": "Secondary price font",
+				"description": "Secondary price font",
+				"displayType": "font",
+				"longValue": true
+			},
+			"price-discount-color": {
+				"primitive": "uilib-color-promotion",
+				"title": "Discount colour",
+				"description": "Discount colour",
+				"displayType": "color"
+			},
+			"price-font-main-medium": {
+				"primitive": "uilib-typography-component-heading-xlarge-strong",
+				"title": "Main price unit for Medium variant",
+				"description": "Main price unit for Medium variant",
+				"displayType": "font",
+				"longValue": true
+			},
+			"price-font-main-large": {
+				"primitive": "uilib-typography-component-heading-xxlarge-strong",
+				"title": "Main unit font for Medium variant",
+				"description": "Main unit font for Medium variant",
+				"displayType": "font"
+			},
+			"price-font-sub-large": {
+				"primitive": "uilib-typography-component-heading-medium-strong",
+				"title": "Sub unit font for Large variant",
+				"description": "Sub unit font for Large variant",
+				"displayType": "font",
+				"longValue": true
+			}
+		}
+	},
+	"promo-tag": {
+		"tokens": {
+			"promo-tag-radius": {
+				"primitive": "uilib-border-radius-400",
+				"title": "Promo tag radius",
+				"description": "Promo tag radius",
+				"displayType": "radius"
+			},
+			"promo-tag-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Promo tag text color",
+				"description": "Promo tag text color",
+				"displayType": "color"
+			},
+			"promo-tag-bg-color": {
+				"primitive": "uilib-color-core-neutral",
+				"title": "Promo tag filled background color",
+				"description": "Promo tag filled background color",
+				"displayType": "color"
+			},
+			"promo-tag-font": {
+				"primitive": "uilib-typography-label-small",
+				"title": "Promo tag font",
+				"description": "Promo tag font",
+				"displayType": "font",
+				"longValue": true
+			}
+		}
+	},
+	"ratings-numerical": {
+		"displayType": "color",
+		"tokens": {
+			"ratings-numerical-font": {
+				"primitive": "uilib-typography-body-medium",
+				"title": "Numerical rating default font",
+				"description": "Numerical rating default font",
+				"displayType": "font",
+				"longValue": true
+			},
+			"ratings-numerical-color": {
+				"primitive": "uilib-color-text-body",
+				"title": "Numerical rating default text color",
+				"description": "Numerical rating default text color"
+			},
+			"ratings-numerical-color-inverse": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Numerical rating inverse text color",
+				"description": "Numerical rating inverse text color"
+			},
+			"ratings-numerical-brand-bg": {
+				"primitive": "uilib-color-core-brand",
+				"title": "Numerical rating background color (brand variant)",
+				"description": "Numerical rating background color (brand variant)"
+			},
+			"ratings-numerical-brand-color": {
+				"primitive": "uilib-color-text-strong",
+				"title": "Numerical rating font color (brand variant)",
+				"description": "Numerical rating font color (brand variant)"
+			},
+			"ratings-numerical-brand-logo": {
+				"title": "Numerical rating brand logo",
+				"description": "Numerical rating brand logo",
+				"displayType": "image",
+				"longValue": true
+			},
+			"ratings-numerical-brand-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-pill",
+				"title": "Numerical rating radius (brand variant)",
+				"description": "Numerical rating radius (brand variant)"
+			},
+			"ratings-numerical-alt-bg": {
+				"primitive": "uilib-color-core-brand-strong",
+				"title": "Numerical rating background color (alt variant)",
+				"description": "Numerical rating background color (alt variant)"
+			},
+			"ratings-numerical-alt-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Numerical rating font color (alt variant)",
+				"description": "Numerical rating font color (alt variant)"
+			},
+			"ratings-numerical-alt-icon": {
+				"title": "Numerical rating alt icon",
+				"description": "Numerical rating alt icon",
+				"displayType": "icon"
+			},
+			"ratings-numerical-alt-icon-color": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Numerical rating icon color (alt variant)",
+				"description": "Numerical rating icon color (alt variant)"
+			},
+			"ratings-numerical-alt-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-100",
+				"title": "Numerical rating radius (alt variant)",
+				"description": "Numerical rating radius (alt variant)"
+			}
+		}
+	},
+	"ratings-percentage": {
+		"displayType": "icon",
+		"tokens": {
+			"ratings-percentage-leading-icon": {
+				"title": "Percentage leading icon",
+				"description": "Percentage leading icon",
+				"longValue": true
+			}
+		}
+	},
+	"ratings-range-icons": {
+		"displayType": "icon",
+		"tokens": {
+			"ratings-range-icons-tui-t-rating-icon": {
+				"title": "Tui-t rating icon",
+				"description": "Tui-t rating single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-star-rating-icon-checked": {
+				"title": "Star rating checked icon",
+				"description": "Star rating checked single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-star-rating-icon": {
+				"title": "Star rating unchecked icon",
+				"description": "Star rating unchecked single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-sun-rating-icon-checked": {
+				"title": "Sun rating checked icon",
+				"description": "Sun rating checked single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-sun-rating-icon": {
+				"title": "Sun rating unchecked icon",
+				"description": "Sun rating unchecked single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-tripadvisor-rating-icon": {
+				"title": "Tripadvisor unchecked rating icon",
+				"description": "Tripadvisor unchecked rating single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-tripadvisor-rating-icon-checked": {
+				"title": "Tripadvisor checked rating icon",
+				"description": "Tripadvisor checked rating single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-tripadvisor-logo": {
+				"title": "Tripadvisor logo",
+				"description": "Tripadvisor logo as leading image on ratings",
+				"longValue": true,
+				"displayType": "image"
+			},
+			"ratings-range-icons-tui-t-plus-color": {
+				"title": "Tui T Plus color",
+				"description": "Tui T Plus color",
+				"displayType": "color"
+			}
+		}
+	},
+	"ratings-range-bar": {
+		"displayType": "color",
+		"tokens": {
+			"ratings-range-bar-icon-color": {
+				"title": "Icon colour",
+				"description": "Colour of the icon before label",
+				"primitive": "--uilib-color-status-info-icon"
+			},
+			"ratings-range-bar-bar-width": {
+				"title": "Range bar width",
+				"description": "Default range bar width",
+				"displayType": "size"
+			},
+			"ratings-range-bar-bar-color": {
+				"title": "Range bar colour",
+				"description": "Default range bar colour",
+				"primitive": "--uilib-color-core-brand"
+			},
+			"ratings-range-bar-bar-background": {
+				"title": "Range bar background",
+				"description": "Default range bar background colour",
+				"primitive": "--uilib-color-core-surface"
+			},
+			"ratings-range-bar-tripadvisor-bar-width": {
+				"title": "Tripadvisor range bar width",
+				"description": "Tripadvisor range bar width",
+				"displayType": "size"
+			},
+			"ratings-range-bar-tripadvisor-bar-color": {
+				"title": "Tripadvisor range bar colour",
+				"description": "Tripadvisor range bar colour",
+				"primitive": "--uilib-color-brand-trip-advisor"
+			},
+			"ratings-range-bar-tripadvisor-bar-background": {
+				"title": "Tripadvisor range bar background",
+				"description": "Tripadvisor range bar background colour",
+				"primitive": "--uilib-color-other-disabled-soft"
+			}
+		}
+	},
+	"scroller": {
+		"tokens": {
+			"scroller-thumb-size": {
+				"displayType": "size",
+				"title": "Scrollbar thumb size",
+				"description": "Scrollbar thumb size",
+				"primitive": "uilib-spacing-400"
+			},
+			"scroller-thumb-radius": {
+				"displayType": "radius",
+				"title": "Scrollbar thumb radius",
+				"description": "Scrollbar thumb radius",
+				"primitive": "uilib-border-radius-pill"
+			},
+			"scroller-thumb-color": {
+				"displayType": "color",
+				"title": "Scrollbar thumb colour",
+				"description": "Scrollbar thumb colour",
+				"primitive": "uilib-color-other-scroll-handle"
+			},
+			"scroller-fade-size": {
+				"displayType": "size",
+				"title": "Scrollbar fade size",
+				"description": "Scrollbar fade size",
+				"primitive": "uilib-spacing-400"
+			},
+			"scroller-focus-radius": {
+				"displayType": "radius",
+				"title": "Scrollbar focus radius",
+				"description": "Scrollbar focus radius",
+				"primitive": "uilib-border-radius-100"
+			}
+		}
+	},
+	"show-more-less": {
+		"tokens": {
+			"show-more-less-icon": {
+				"displayType": "icon",
+				"title": "Show more/less icon",
+				"description": "Show more/less icon",
+				"longValue": true
+			}
+		}
+	},
+	"skeleton": {
+		"displayType": "color",
+		"tokens": {
+			"skeleton-color": {
+				"primitive": "uilib-color-other-skeleton-loading",
+				"title": "Skeleton loading colour",
+				"description": "Skeleton loading colour"
+			},
+			"skeleton-shimmer-color": {
+				"primitive": "color-neutral-20",
+				"title": "Skeleton shimmer colour",
+				"description": "Skeleton shimmer colour"
+			}
+		}
+	},
+	"tooltip": {
+		"displayType": "color",
+		"tokens": {
+			"tooltip-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-100",
+				"title": "Tooltip overlay border radius",
+				"description": "Tooltip overlay border radius"
+			},
+			"tooltip-color-bg": {
+				"primitive": "uilib-color-text-body",
+				"title": "Tooltip overlay background colour",
+				"description": "Tooltip overlay background colour"
+			},
+			"tooltip-color-text": {
+				"primitive": "uilib-color-text-inverse",
+				"title": "Tooltip overlay text colour",
+				"description": "Tooltip overlay text colour"
+			}
+		}
+	}
+}