@tui/design-system 0.1.0

package/scss/themes/crystalski/theme.json

@@ -0,0 +1,232 @@
+{
+	"colors": {
+		"core": {
+			"tokens": {
+				"color-core-interaction": {
+					"primitive": "color-purple-80"
+				},
+				"color-core-brand": {
+					"primitive": "color-green-70"
+				},
+				"color-core-brand-strong": {
+					"primitive": "color-blue-90"
+				},
+				"color-core-surface": {
+					"primitive": "color-green-10"
+				},
+				"color-core-neutral": {
+					"primitive": "color-neutral-10"
+				}
+			}
+		},
+		"text": {
+			"tokens": {
+				"color-text-strong": {
+					"primitive": "color-blue-90"
+				},
+				"color-text-body": {
+					"primitive": "color-neutral-90"
+				},
+				"color-text-link": {
+					"primitive": "color-purple-80"
+				},
+				"color-text-link-visited": {
+					"primitive": "color-purple-100"
+				},
+				"color-text-link-visited-inverse": {
+					"primitive": "color-purple-40"
+				},
+				"color-text-inverse": {
+					"primitive": "color-neutral-10"
+				},
+				"color-text-promotion": {
+					"primitive": "color-red-70"
+				},
+				"color-text-danger": {
+					"primitive": "color-red-80"
+				}
+			}
+		},
+		"status": {
+			"tokens": {
+				"color-status-success-surface": {
+					"primitive": "color-green-20"
+				},
+				"color-status-danger-surface": {
+					"primitive": "color-red-20"
+				},
+				"color-status-warning-surface": {
+					"primitive": "color-yellow-20"
+				},
+				"color-status-info-surface": {
+					"primitive": "color-purple-20"
+				},
+				"color-status-success-icon": {
+					"primitive": "color-green-80",
+					"darkColor": false,
+					"lowContrast": false
+				},
+				"color-status-danger-icon": {
+					"primitive": "color-red-80"
+				},
+				"color-status-warning-icon": {
+					"primitive": "color-yellow-80"
+				},
+				"color-status-info-icon": {
+					"primitive": "color-purple-80"
+				}
+			}
+		},
+		"canvas": {
+			"tokens": {
+				"color-canvas-default": {
+					"primitive": "color-neutral-10"
+				},
+				"color-canvas-contrast": {
+					"primitive": "color-neutral-20"
+				},
+				"color-canvas-footer": {
+					"primitive": "color-neutral-90",
+					"title": "Canvas footer",
+					"darkColor": true
+				}
+			}
+		},
+		"border": {
+			"tokens": {
+				"color-border-interaction": {
+					"primitive": "color-purple-80"
+				},
+				"color-border-brand": {
+					"primitive": "color-green-70",
+					"title": "Border brand"
+				},
+				"color-border-brand-strong": {
+					"primitive": "color-blue-90"
+				},
+				"color-border-input": {
+					"primitive": "color-neutral-70"
+				},
+				"color-border-card": {
+					"primitive": "color-neutral-30"
+				},
+				"color-border-danger": {
+					"primitive": "color-red-70"
+				},
+				"color-border-inverse": {
+					"primitive": "color-neutral-10"
+				},
+				"color-border-divider": {
+					"primitive": "color-neutral-30"
+				}
+			}
+		},
+		"promotion": {
+			"tokens": {
+				"color-promotion": {
+					"primitive": "color-red-70"
+				}
+			}
+		},
+		"other": {
+			"tokens": {
+				"color-other-disabled-soft": {
+					"primitive": "color-neutral-40"
+				},
+				"color-other-disabled-strong": {
+					"primitive": "color-neutral-70"
+				},
+				"color-other-active-state-tint": {
+					"primitive": "color-blue-20 30%"
+				},
+				"color-other-button-hover-state": {
+					"primitive": "color-neutral-10"
+				},
+				"color-other-secondary-button-hover-state": {
+					"primitive": "color-purple-80",
+					"darkColor": true
+				},
+				"color-other-skeleton-loading": {
+					"primitive": "color-neutral-30"
+				}
+			}
+		}
+	},
+	"focus": {
+		"tokens": {
+			"focus-default": {
+				"primitive": "2px color-neutral-10, 4px color-purple-80, 6px color-purple-80 40%"
+			}
+		}
+	},
+	"alert": {
+		"tokens": {
+			"alert-icon-info-bg": {
+				"primitive": "uilib-color-status-info-icon"
+			},
+			"alert-icon-error-bg": {
+				"primitive": "uilib-color-status-error-icon"
+			},
+			"alert-icon-warning-bg": {
+				"primitive": "uilib-color-status-warning-icon"
+			},
+			"alert-icon-success-bg": {
+				"primitive": "uilib-color-status-success-icon"
+			},
+			"alert-text-color": {
+				"primitive": "uilib-color-text-body"
+			}
+		}
+	},
+	"button": {
+		"tokens": {
+			"button-tertiary-color": {
+				"primitive": "uilib-color-text-inverse"
+			},
+			"button-tertiary-bg-color": {
+				"primitive": "uilib-color-core-brand-strong"
+			},
+			"button-tertiary-hover-bg-color": {
+				"primitive": "uilib-color-core-brand-strong + 20% uilib-color-core-neutral"
+			}
+		}
+	},
+	"form-row": {
+		"tokens": {
+			"form-row-label-font": {
+				"primitive": "uilib-typography-label-medium-strong"
+			}
+		}
+	},
+	"input-checkbox": {
+		"tokens": {
+			"input-checkbox-text-color-strong": {
+				"primitive": "uilib-color-text-body"
+			}
+		}
+	},
+	"input-radio": {
+		"tokens": {
+			"input-radio-text-color-strong": {
+				"primitive": "uilib-color-text-body"
+			}
+		}
+	},
+	"info-tag": {
+		"tokens": {
+			"info-tag-text-color": {
+				"primitive": "uilib-color-text-body"
+			},
+			"info-tag-local-product-bg-color": {
+				"primitive": "uilib-color-canvas-contrast"
+			}
+		}
+	},
+	"ratings-numerical": {
+		"tokens": {
+			"ratings-numerical-brand-color": {
+				"primitive": "uuilib-color-text-body"
+			}
+		}
+	}
+}

package/scss/themes/firstchoice/_colors.scss

@@ -0,0 +1,53 @@
+// firstchoice / colors
+@use 'sass:map';
+@use 'sass:color';
+@use 'primitives' as *;
+
+$uilib-color-semantic-firstchoice: (
+	core-interaction: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
+	core-brand: map.get($uilib-firstchoice-primitives, 'color-pink-60'),
+	core-brand-strong: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	core-surface: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
+	core-neutral: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
+	text-strong: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	text-body: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	text-link: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
+	text-link-visited: map.get($uilib-firstchoice-primitives, 'color-purple-60'),
+	text-link-visited-inverse: map.get($uilib-firstchoice-primitives, 'color-purple-30'),
+	text-inverse: map.get($uilib-firstchoice-primitives, 'color-sand-10'),
+	text-promotion: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	text-danger: map.get($uilib-firstchoice-primitives, 'color-red-80'),
+	text-tooltip: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	status-success-surface: map.get($uilib-firstchoice-primitives, 'color-greenmoss-20'),
+	status-danger-surface: map.get($uilib-firstchoice-primitives, 'color-red-20'),
+	status-warning-surface: map.get($uilib-firstchoice-primitives, 'color-orange-20'),
+	status-info-surface: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
+	status-success-icon: map.get($uilib-firstchoice-primitives, 'color-greenmoss-70'),
+	status-danger-icon: map.get($uilib-firstchoice-primitives, 'color-red-80'),
+	status-warning-icon: map.get($uilib-firstchoice-primitives, 'color-orange-60'),
+	status-info-icon: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	canvas-default: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
+	canvas-contrast: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
+	border-interaction: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
+	border-brand-strong: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	border-input: map.get($uilib-firstchoice-primitives, 'color-neutral-70'),
+	border-card: map.get($uilib-firstchoice-primitives, 'color-sand-50'),
+	border-divider: map.get($uilib-firstchoice-primitives, 'color-sand-50'),
+	border-dashed: var(--uilib-color-border-divider),
+	border-danger: map.get($uilib-firstchoice-primitives, 'color-red-70'),
+	border-inverse: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
+	border-insider: map.get($uilib-firstchoice-primitives, 'color-purple-40'),
+	promotion: map.get($uilib-firstchoice-primitives, 'color-pink-30'),
+	promotion-free-kids: map.get($uilib-firstchoice-primitives, 'color-greenpalm-30'),
+	promotion-insider-soft: map.get($uilib-firstchoice-primitives, 'color-purple-40'),
+	promotion-insider-strong: map.get($uilib-firstchoice-primitives, 'color-purple-20'),
+	sustainability: map.get($uilib-firstchoice-primitives, 'color-greenjade-70'),
+	sustainability-soft: map.get($uilib-firstchoice-primitives, 'color-greenmoss-30'),
+	other-disabled-soft: map.get($uilib-firstchoice-primitives, 'color-neutral-30'),
+	other-disabled-strong: map.get($uilib-firstchoice-primitives, 'color-neutral-70'),
+	other-active-state-tint: map.get($uilib-firstchoice-primitives, 'color-pink-20'),
+	other-button-hover-state: map.get($uilib-firstchoice-primitives, 'color-pink-30'),
+	other-secondary-button-hover-state: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
+	other-skeleton-loading: map.get($uilib-firstchoice-primitives, 'color-neutral-20'),
+	other-scroll-handle: map.get($uilib-firstchoice-primitives, 'color-neutral-50'),
+) !default;

package/scss/themes/firstchoice/_overrides.scss

@@ -0,0 +1,355 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../variables' as *;
+@forward '../../variables';
+@use 'colors' as *;
+@use 'primitives' as *;
+@use 'typography' as *;
+
+// typography
+$uilib-firstchoice-font-families: map.merge(
+	$uilib-font-families,
+	(
+		'display': #{$uilib-font-family-pastichegrotesque},
+		'lead': #{$uilib-font-family-pastichegrotesque},
+		'base': #{$uilib-font-family-rondelle},
+	)
+);
+
+/* prettier-ignore */
+$uilib-firstchoice-font-styles: map.merge(
+	$uilib-font-styles,
+	(
+		// 20 / 16px
+		'component-heading-xlarge': var(--uilib-font-weight-semibold) map.get($uilib-firstchoice-primitives, 'font-size-140') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		'component-heading-xlarge-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-140') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		// 18 / 16px
+		'component-heading-large': var(--uilib-font-weight-semibold) map.get($uilib-firstchoice-primitives, 'font-size-120') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		'component-heading-large-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-120') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		// 16 / 16px
+		'component-heading-medium': var(--uilib-font-weight-semibold) map.get($uilib-firstchoice-primitives, 'font-size-100') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		'component-heading-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-100') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		// 14 / 16px
+		'component-heading-small': var(--uilib-font-weight-semibold) map.get($uilib-firstchoice-primitives, 'font-size-80') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		'component-heading-small-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-80') / var(--uilib-line-height-heading) var(--uilib-font-family-base),
+		// 16 / 16px
+		'body-large': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-100') / var(--uilib-line-height-body)
+			var(--uilib-font-family-base),
+		'body-large-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-100') / var(--uilib-line-height-body)
+			var(--uilib-font-family-base),
+		// 14 / 16px
+		'body-medium': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-80') / var(--uilib-line-height-body)
+			var(--uilib-font-family-base),
+		'body-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-80') / var(--uilib-line-height-body)
+			var(--uilib-font-family-base),
+		// 13 / 16px
+		'body-small': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-60') / var(--uilib-line-height-body)
+			var(--uilib-font-family-base),
+		'body-small-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-60') / var(--uilib-line-height-body)
+			var(--uilib-font-family-base),
+		// 16 / 16px
+		'label-large': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		'label-large-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-100') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		// 14 / 16px
+		'label-medium': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-80') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		'label-medium-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-80') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		// 13 / 16px
+		'label-small': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-60') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		'label-small-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-60') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		// 11 / 16px
+		'label-xsmall': var(--uilib-font-weight-regular) map.get($uilib-firstchoice-primitives, 'font-size-40') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+		'label-xsmall-strong': var(--uilib-font-weight-bold) map.get($uilib-firstchoice-primitives, 'font-size-40') / var(--uilib-line-height-heading)
+			var(--uilib-font-family-base),
+	)
+);
+$uilib-firstchoice-font-weight: map.merge(
+	$uilib-font-weight,
+	(
+		'semibold': 900,
+		'bold': 900,
+	)
+);
+
+// focus
+$uilib-firstchoice-focus-default:
+	0 0 0 0.125rem map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
+	0 0 0 0.25rem map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	0 0 0 0.375rem color.scale(map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'), $alpha: -60%);
+$uilib-firstchoice-focus: map.merge(
+	$uilib-focus-base,
+	(
+		default: $uilib-firstchoice-focus-default,
+	)
+);
+
+// Accordion
+$uilib-firstchoice-accordion-variables: map.merge(
+	$uilib-accordion-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
+	)
+);
+
+// Alert
+$uilib-firstchoice-alert-variables: map.merge(
+	$uilib-alert-variables,
+	(
+		icon-info-bg: var(--uilib-color-status-info-icon),
+		icon-info-mask: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/letter-i-circled-filled.svg'),
+		icon-error-bg: var(--uilib-color-status-danger-icon),
+		icon-error-mask: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/exclamation-mark-circled-filled.svg'),
+		icon-warning-bg: var(--uilib-color-status-warning-icon),
+		icon-warning-mask: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/warning-filled.svg'),
+		icon-success-bg: var(--uilib-color-status-success-icon),
+		icon-success-mask: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/checkmark-circled-filled.svg'),
+	)
+);
+
+// Breadcrumb
+$uilib-firstchoice-breadcrumb-variables: map.merge(
+	$uilib-breadcrumb-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
+	)
+);
+
+// Button
+$uilib-firstchoice-button-variables: map.merge(
+	$uilib-button-variables,
+	(
+		radius: var(--uilib-border-radius-200),
+		primary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-interaction'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+		secondary-color: var(--uilib-color-text-strong),
+		secondary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				map.get($uilib-color-semantic-firstchoice, 'text-strong'),
+				80%
+			),
+		tertiary-color: var(--uilib-color-text-inverse),
+		tertiary-bg-color: var(--uilib-color-core-brand-strong),
+		tertiary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-brand-strong'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+		promotion-bg-color: var(--uilib-color-core-interaction),
+		promotion-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-interaction'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+		search-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-brand-strong'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+	)
+);
+
+// Card - search
+$uilib-firstchoice-card-search-variables: map.merge(
+	$uilib-card-search-variables,
+	(
+		radius: var(--uilib-border-radius-200),
+		radius-spacing: var(--uilib-spacing-200),
+		highlights-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
+	)
+);
+
+// Flight details
+$uilib-firstchoice-flight-details-variables: map.merge(
+	$uilib-flight-details-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
+	)
+);
+
+// Form row
+$uilib-firstchoice-form-row-variables: map.merge(
+	$uilib-form-row-variables,
+	(
+		label-font: var(--uilib-typography-label-medium-strong),
+		icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/exclamation-mark-circled-filled.svg'),
+	)
+);
+
+// Form input checkbox
+$uilib-firstchoice-input-checkbox-variables: map.merge(
+	$uilib-input-checkbox-variables,
+	(
+		icon-checked: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/checkmark.svg'),
+		icon-indeterminate: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/minus.svg'),
+	)
+);
+
+// Form input slider
+$uilib-firstchoice-input-slider-variables: map.merge(
+	$uilib-input-slider-variables,
+	(
+		thumb-radius: var(--uilib-border-radius-200),
+	)
+);
+
+// Form input stepper
+$uilib-crystalski-input-stepper-variables: map.merge(
+	$uilib-input-stepper-variables,
+	(
+		icon-increment: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/plus.svg'),
+		icon-decrement: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/minus.svg'),
+	)
+);
+
+// Form input text
+$uilib-firstchoice-input-text-variables: map.merge(
+	$uilib-input-text-variables,
+	(
+		icon-clear: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/cross.svg'),
+		icon-show: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/view.svg'),
+		icon-hide: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/view-hidden.svg'),
+		icon-calendar: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/calendar.svg'),
+	)
+);
+
+// Icon button
+$uilib-firstchoice-icon-button-variables: map.merge(
+	$uilib-icon-button-variables,
+	(
+		radius: var(--uilib-border-radius-200),
+		ghost-color: var(--uilib-color-text-strong),
+		ghost-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				map.get($uilib-color-semantic-firstchoice, 'text-strong'),
+				80%
+			),
+		primary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-interaction'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+		secondary-color: var(--uilib-color-text-strong),
+		secondary-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				map.get($uilib-color-semantic-firstchoice, 'text-strong'),
+				80%
+			),
+		control-color: var(--uilib-color-text-strong),
+		control-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				map.get($uilib-color-semantic-firstchoice, 'text-strong'),
+				80%
+			),
+		promotion-bg-color: var(--uilib-color-core-interaction),
+		promotion-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-interaction'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+		search-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-brand-strong'),
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				80%
+			),
+		shortlist-color: var(--uilib-color-core-interaction),
+		shortlist-hover-bg-color: color.mix(
+				map.get($uilib-color-semantic-firstchoice, 'core-neutral'),
+				map.get($uilib-color-semantic-firstchoice, 'core-interaction'),
+				90%
+			),
+	)
+);
+
+// Info tag
+$uilib-firstchoice-info-tag-variables: map.merge(
+	$uilib-info-tag-variables,
+	(
+		local-product-bg-color: var(--uilib-color-canvas-contrast),
+	)
+);
+
+// List
+$uilib-firstchoice-list-variables: map.merge(
+	$uilib-list-variables,
+	(
+		bullet-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/list-item.svg'),
+	)
+);
+
+// Loader
+$uilib-firstchoice-loader-variables: map.merge(
+	$uilib-loader-variables,
+	(
+		image: url('#{$uilib-assets-base-url}v3/motion/firstchoice/loader.svg'),
+	)
+);
+
+// Pagination
+$uilib-firstchoice-pagination-variables: map.merge(
+	$uilib-pagination-variables,
+	(
+		icon-prev: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-left.svg'),
+		icon-next: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
+	)
+);
+
+// Price
+$uilib-firstchoice-price-variables: map.merge(
+	$uilib-price-variables,
+	(
+		discount-color: var(--uilib-color-text-danger),
+	)
+);
+
+// Ratings and Reviews - Numerical
+$uilib-firstchoice-ratings-numerical-variables: map.merge(
+	$uilib-ratings-numerical-variables,
+	(
+		brand-radius: var(--uilib-border-radius-100),
+		brand-logo: url('#{$uilib-assets-base-url}v3/logos/firstchoice/fc-fav-white.svg'),
+		alt-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/star-filled.svg'),
+	)
+);
+
+// Ratings and Reviews - Percentage
+$uilib-firstchoice-ratings-percentage-variables: map.merge(
+	$uilib-ratings-percentage-variables,
+	(
+		leading-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/thumbs-up.svg'),
+	)
+);
+
+// Ratings and Reviews - Range Icons
+$uilib-firstchoice-ratings-range-icons-variables: map.merge(
+	$uilib-ratings-range-icons-variables,
+	(
+		star-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/firstchoice-star-unchecked.svg'),
+		star-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/firstchoice-star-checked.svg'),
+	)
+);
+
+// Show more/less
+$uilib-firstchoice-show-more-less-variables: map.merge(
+	$uilib-show-more-less-variables,
+	(
+		icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
+	)
+);
+
+// Skeleton
+$uilib-firstchoice-skeleton-variables: map.merge(
+	$uilib-skeleton-variables,
+	(
+		color: map.get($uilib-color-semantic-firstchoice, 'other-skeleton-loading'),
+		shimmer-color: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
+	)
+);