@moneylion/react-native-offer-carousel 1.3.1 → 1.4.1

package/src/capabilities/core/src/system/cnfContext/schemas/Brand.ts

@@ -1,50 +1,55 @@
 import { Schema } from "effect";
 
-export type ThemeColors = Schema.Schema.Type<typeof ThemeColors>;
-const ThemeColors = Schema.Struct({
-	backgroundPrimary: Schema.String,
-	backgroundPrimaryFaded: Schema.String,
-	backgroundPrimaryHighlighted: Schema.String,
-	backgroundCritical: Schema.String,
-	backgroundCriticalFaded: Schema.String,
-	backgroundCriticalHighlighted: Schema.String,
-	backgroundWarning: Schema.String,
-	backgroundWarningFaded: Schema.String,
-	backgroundWarningHighlighted: Schema.String,
-	backgroundPositive: Schema.String,
-	backgroundPositiveFaded: Schema.String,
-	backgroundPositiveHighlighted: Schema.String,
-	backgroundNeutral: Schema.String,
-	backgroundNeutralFaded: Schema.String,
-	backgroundNeutralHighlighted: Schema.String,
-	backgroundDisabled: Schema.String,
-	backgroundDisabledFaded: Schema.String,
-	backgroundElevationBase: Schema.String,
-	backgroundElevationRaised: Schema.String,
-	backgroundElevationOverlay: Schema.String,
-	backgroundPage: Schema.String,
-	backgroundPageFaded: Schema.String,
-	borderPrimary: Schema.String,
-	borderPrimaryFaded: Schema.String,
-	borderCritical: Schema.String,
-	borderCriticalFaded: Schema.String,
-	borderWarning: Schema.String,
-	borderWarningFaded: Schema.String,
-	borderPositive: Schema.String,
-	borderPositiveFaded: Schema.String,
-	borderNeutral: Schema.String,
-	borderNeutralFaded: Schema.String,
-	borderDisabled: Schema.String,
-	foregroundPrimary: Schema.String,
-	foregroundCritical: Schema.String,
-	foregroundWarning: Schema.String,
-	foregroundPositive: Schema.String,
-	foregroundNeutral: Schema.String,
-	foregroundNeutralFaded: Schema.String,
-	foregroundDisabled: Schema.String,
-	brand: Schema.String,
-	white: Schema.String,
-	black: Schema.String,
+export type ReshapedThemeColorObject = Schema.Schema.Type<
+	typeof ReshapedThemeColorObject
+>;
+const ReshapedThemeColorObject = Schema.Struct({
+	hex: Schema.String,
+	hexDark: Schema.optional(Schema.String),
+});
+
+export type ReshapedThemeColors = Schema.Schema.Type<
+	typeof ReshapedThemeColors
+>;
+const ReshapedThemeColors = Schema.Struct({
+	backgroundCritical: ReshapedThemeColorObject,
+	backgroundCriticalFaded: ReshapedThemeColorObject,
+	backgroundDisabled: ReshapedThemeColorObject,
+	backgroundDisabledFaded: ReshapedThemeColorObject,
+	backgroundElevationBase: ReshapedThemeColorObject,
+	backgroundElevationOverlay: ReshapedThemeColorObject,
+	backgroundElevationRaised: ReshapedThemeColorObject,
+	backgroundNeutral: ReshapedThemeColorObject,
+	backgroundNeutralFaded: ReshapedThemeColorObject,
+	backgroundPage: ReshapedThemeColorObject,
+	backgroundPageFaded: ReshapedThemeColorObject,
+	backgroundPositive: ReshapedThemeColorObject,
+	backgroundPositiveFaded: ReshapedThemeColorObject,
+	backgroundPrimary: ReshapedThemeColorObject,
+	backgroundPrimaryFaded: ReshapedThemeColorObject,
+	backgroundWarning: ReshapedThemeColorObject,
+	backgroundWarningFaded: ReshapedThemeColorObject,
+	black: ReshapedThemeColorObject,
+	borderCritical: ReshapedThemeColorObject,
+	borderCriticalFaded: ReshapedThemeColorObject,
+	borderDisabled: ReshapedThemeColorObject,
+	borderNeutral: ReshapedThemeColorObject,
+	borderNeutralFaded: ReshapedThemeColorObject,
+	borderPositive: ReshapedThemeColorObject,
+	borderPositiveFaded: ReshapedThemeColorObject,
+	borderPrimary: ReshapedThemeColorObject,
+	borderPrimaryFaded: ReshapedThemeColorObject,
+	borderWarning: ReshapedThemeColorObject,
+	borderWarningFaded: ReshapedThemeColorObject,
+	brand: ReshapedThemeColorObject,
+	foregroundCritical: ReshapedThemeColorObject,
+	foregroundDisabled: ReshapedThemeColorObject,
+	foregroundNeutral: ReshapedThemeColorObject,
+	foregroundNeutralFaded: ReshapedThemeColorObject,
+	foregroundPositive: ReshapedThemeColorObject,
+	foregroundPrimary: ReshapedThemeColorObject,
+	foregroundWarning: ReshapedThemeColorObject,
+	white: ReshapedThemeColorObject,
 });
 
 export type Links = Schema.Schema.Type<typeof Links>;
@@ -120,7 +125,7 @@ const BrandFields = Schema.Struct({
 	displayName: Schema.String,
 	isLicensed: Schema.optional(Schema.Boolean),
 	hideLicensedLogo: Schema.optional(Schema.Boolean),
-	themeColors: ThemeColors,
+	reshapedThemeColors: ReshapedThemeColors,
 	links: Schema.optional(Links),
 	logos: Schema.optional(Logos),
 	font: Schema.optional(Font),

package/src/capabilities/ui/elements/src/components/MarkdownText/components.tsx

@@ -10,7 +10,7 @@ import Text, {
 	type TextWeight,
 	type Variant,
 } from "../../../../../../components/Text";
-import type { ThemeColors } from "../../../../../core/src";
+import type { ThemeColors } from "../../../../../../context/ThemeProvider";
 
 const BoldText = ({ children }: { children: React.ReactNode }) => {
 	const processChildren = (_children: React.ReactNode) => {

package/src/components/Common/BaseOfferCard/index.tsx

@@ -11,6 +11,7 @@ import { Dimensions, StyleSheet } from "react-native";
 import { ThumborImage } from "../../../capabilities/ui/elements/src";
 import { arrayToMarkdownList } from "../../../capabilities/offer-catalog/src";
 import { MarkdownText } from "../../../capabilities/ui/elements/src/components/MarkdownText";
+import { useTheme } from "../../../context/ThemeProvider";
 
 const CardWidth = 282;
 
@@ -24,7 +25,7 @@ const BaseOfferCard = ({
 
 	return (
 		<View
-			borderColor={showCardBorder ? "borderNeutralFaded" : undefined}
+			borderColor={showCardBorder ? "borderNeutral" : undefined}
 			direction={"column"}
 			backgroundColor={"backgroundElevationBase"}
 			width={fullCardWidth ? screenWidth - 32 : CardWidth} // 32 = left(16) + right(16) margin of the card
@@ -118,13 +119,18 @@ const PartnerImage = (
 	);
 };
 
-const TopContainer = ({ children, ...viewProps }: ViewProps) => (
-	<View {...viewProps} gap={3} direction={"column"}>
-		{children}
+const TopContainer = ({ children, ...viewProps }: ViewProps) => {
+	const themeContext = useTheme();
+	const theme = themeContext?.theme || {};
 
-		<Divider />
-	</View>
-);
+	return (
+		<View {...viewProps} gap={3} direction={"column"}>
+			{children}
+
+			<Divider color={theme.borderNeutral} />
+		</View>
+	);
+};
 
 const TopBar = ({ children, ...viewProps }: ViewProps) => (
 	<View
@@ -211,6 +217,9 @@ const DescriptionHandler = ({
 	contentDescription?: string;
 	hasDivider?: boolean;
 }) => {
+	const themeContext = useTheme();
+	const theme = themeContext?.theme || {};
+
 	const renderContentDescription = () => {
 		if (descriptionPoints.length > 0) {
 			return (
@@ -236,7 +245,7 @@ const DescriptionHandler = ({
 
 	return (
 		<View gap={3} direction={"column"}>
-			{hasDivider && <Divider />}
+			{hasDivider && <Divider color={theme.borderNeutral} />}
 			{renderContentDescription()}
 		</View>
 	);

package/src/components/Divider/index.tsx

@@ -27,7 +27,6 @@ const styles = StyleSheet.create({
 	divider: {
 		height: 1,
 		width: "100%",
-		backgroundColor: "#E0E0E0", // Default neutral border color
 		marginVertical: 12,
 	},
 });

package/src/components/DynamicOffers/Render/DynamicOffersRender.tsx

@@ -291,13 +291,13 @@ export const DynamicOffersRender = ({
 					isHorizontalScroll,
 				});
 	}, [
+		offers,
+		isHorizontalScroll,
 		displayLayout,
 		productTypeBuilder,
-		offers,
 		showProductTypeLabel,
 		fallbackTemplate,
 		showCardBorder,
-		isHorizontalScroll,
 	]);
 
 	// Wrapped offer components with layout measurement
@@ -369,7 +369,11 @@ export const DynamicOffersRender = ({
 					{showHeaderText && (
 						<View style={styles.headerTextContainer}>
 							{showTitle && (
-								<Text variant="featured-3" weight="bold">
+								<Text
+									variant="featured-3"
+									weight="bold"
+									color="foregroundNeutral"
+								>
 									{title}
 								</Text>
 							)}

package/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+import type { CustomError } from "../MoneyLionOfferCarousel";
+
+interface Props {
+	children: React.ReactNode;
+	fallbackUI?: React.ReactNode;
+	onError: (error: CustomError) => void;
+}
+
+interface State {
+	hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+	constructor(props: Props) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(_error: Error) {
+		return { hasError: true };
+	}
+
+	componentDidCatch(error: Error) {
+		this.props.onError({
+			message: error.message,
+			timestamp: new Date().toISOString(),
+		});
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return this.props.fallbackUI ?? null;
+		}
+
+		return this.props.children;
+	}
+}
+
+export default ErrorBoundary;

package/src/components/Layouts/HeadlineWithDescriptionCard/index.tsx

@@ -16,6 +16,7 @@ type HeadlineWithDescriptionCardProps = {
 	fullCardWidth?: boolean;
 	isHorizontalScroll?: boolean;
 };
+
 export const HeadlineWithDescriptionCard = ({
 	offer,
 	productTypeBuilder,

package/src/components/Modal/AllOffersModal.tsx

@@ -14,6 +14,7 @@ import {
 import Text from "../Text";
 import { DynamicOffersContainer } from "../DynamicOffers/DynamicOffersContainer";
 import type { DynamicOfferProps } from "../DynamicOffers/DynamicOffers";
+import { useTheme } from "../../context/ThemeProvider";
 
 type AllOffersModalProps = {
 	visible: boolean;
@@ -50,6 +51,8 @@ export const AllOffersModal = ({
 	onClose,
 	config,
 }: AllOffersModalProps) => {
+	const { theme } = useTheme();
+
 	const { brand, title } = config;
 	const footerLinks = brand.links;
 
@@ -100,16 +103,28 @@ export const AllOffersModal = ({
 			visible={visible}
 			onRequestClose={onClose}
 		>
-			<SafeAreaView style={styles.modalContainer}>
+			<SafeAreaView
+				style={[
+					styles.modalContainer,
+					{ backgroundColor: theme.backgroundPageFaded },
+				]}
+			>
 				<View style={styles.modalHeader}>
 					<TouchableOpacity
 						onPress={onClose}
 						style={styles.closeXButton}
 						hitSlop={{ top: 15, right: 15, bottom: 15, left: 15 }}
 					>
-						<Text style={styles.closeXText}>✕</Text>
+						<Text style={styles.closeXText} color={"foregroundNeutral"}>
+							✕
+						</Text>
 					</TouchableOpacity>
-					<Text variant="title-3" weight="bold" style={styles.headerTitle}>
+					<Text
+						variant="title-3"
+						weight="bold"
+						color={"foregroundNeutral"}
+						style={styles.headerTitle}
+					>
 						{title}
 					</Text>
 				</View>
@@ -157,7 +172,6 @@ export const AllOffersModal = ({
 const styles = StyleSheet.create({
 	modalContainer: {
 		flex: 1,
-		backgroundColor: "#EEEEEE",
 	},
 	modalHeader: {
 		flexDirection: "row",
@@ -173,11 +187,11 @@ const styles = StyleSheet.create({
 	},
 	closeXText: {
 		fontSize: 20,
-		color: "#000000",
 	},
 	headerTitle: {
 		textAlign: "center",
 		alignSelf: "center",
+		paddingHorizontal: 36, // To ensure title doesn't overlap with close button
 	},
 	contentWrapper: {
 		flex: 1,

package/src/components/Modal/OfferDetailsModal.tsx

@@ -15,6 +15,7 @@ import { Disclaimer } from "./Disclaimer";
 import { CallToAction } from "../Common/DynamicOfferCard/CallToAction";
 import Divider from "../Divider";
 import type { BaseOffer } from "../../capabilities/offer-catalog/src";
+import { useTheme } from "../../context/ThemeProvider";
 
 type OfferDetailsModalProps = {
 	visible: boolean;
@@ -31,35 +32,48 @@ export const OfferDetailsModal = ({
 	onClose,
 	offerIndex,
 }: OfferDetailsModalProps) => {
+	const { theme, isDarkTheme } = useTheme();
+
 	const showDescriptionPoints = Boolean(offer?.descriptionPoints?.length);
 
 	const showDisclaimer = Boolean(offer?.legalLanguage);
 
 	const showDivider = showDescriptionPoints && showDisclaimer;
 
+	const backgroundColor = theme.backgroundElevationOverlay;
+
 	return (
 		<Modal
 			animationType="slide"
-			transparent={false}
+			transparent={true}
 			visible={visible}
 			onRequestClose={onClose}
 			statusBarTranslucent={true}
 		>
-			<SafeAreaView style={styles.modalContainer}>
+			<SafeAreaView style={[styles.modalContainer, { backgroundColor }]}>
 				{visible && (
 					<StatusBar
-						backgroundColor={"#ffffff"}
-						barStyle={"dark-content"}
+						backgroundColor={backgroundColor}
+						barStyle={isDarkTheme ? "light-content" : "dark-content"}
 						translucent={false}
 					/>
 				)}
-				<View style={styles.modalHeader}>
+				<View
+					style={[
+						styles.modalHeader,
+						{ borderBottomColor: theme.borderNeutral },
+					]}
+				>
 					<TouchableOpacity
 						onPress={onClose}
 						style={styles.closeXButton}
 						hitSlop={{ top: 15, right: 15, bottom: 15, left: 15 }}
 					>
-						<Text style={styles.closeXText}>✕</Text>
+						<Text
+							style={[styles.closeXText, { color: theme.foregroundNeutral }]}
+						>
+							✕
+						</Text>
 					</TouchableOpacity>
 				</View>
 
@@ -91,7 +105,6 @@ export const OfferDetailsModal = ({
 const styles = StyleSheet.create({
 	modalContainer: {
 		flex: 1,
-		backgroundColor: "#ffffff",
 		marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
 	},
 	modalHeader: {
@@ -100,7 +113,6 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		paddingBottom: 32,
 		borderBottomWidth: 1,
-		borderBottomColor: "#e0e0e0",
 		position: "relative",
 	},
 	closeXButton: {
@@ -111,7 +123,6 @@ const styles = StyleSheet.create({
 	},
 	closeXText: {
 		fontSize: 20,
-		color: "#000000",
 	},
 	modalContent: {
 		flex: 1,

package/src/components/MoneyLionOfferCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { localCnfContext } from "../config/mocks/cnfContext";
 import { Text } from "react-native";
 import { getPageData } from "../pageData";
@@ -16,6 +16,15 @@ import {
 import { getConfigApiBaseUrl } from "../apiEnvironment";
 import { ConfigurationProvider } from "../context/ConfigurationProvider";
 import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
+import { getThemeColors } from "../utils/getThemeColors";
+import type { ReshapedThemeColors } from "../capabilities/core/src";
+import ErrorBoundary from "./ErrorBoundary";
+
+export type CustomError = {
+	code?: number;
+	message: string;
+	timestamp: string;
+};
 
 export type MoneyLionOfferCarouselProps = {
 	channel: string;
@@ -34,11 +43,9 @@ export type MoneyLionOfferCarouselProps = {
 	showDescriptionPoints?: boolean;
 	title?: string;
 	subtitle?: string;
-	onError?: (error: {
-		code?: number;
-		message: string;
-		timestamp: string;
-	}) => void;
+	isDarkTheme?: boolean;
+	fallbackUI?: React.ReactNode;
+	onError?: (error: CustomError) => void;
 	onLoad?: (numOffers: number) => void;
 };
 
@@ -91,8 +98,8 @@ const getConfiguration = async ({
 	}
 };
 
-export const MoneyLionOfferCarousel = (
-	props: MoneyLionOfferCarouselProps &
+const InternalMoneyLionOfferCarousel = (
+	props: Omit<MoneyLionOfferCarouselProps, "fallbackUI"> &
 		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
 ) => {
 	const {
@@ -106,6 +113,7 @@ export const MoneyLionOfferCarousel = (
 		onLoad,
 		title,
 		subtitle,
+		isDarkTheme = false,
 	} = props;
 
 	const {
@@ -227,6 +235,17 @@ export const MoneyLionOfferCarousel = (
 		onLoad,
 	]);
 
+	const themeColors = useMemo(
+		() =>
+			context
+				? getThemeColors(
+						context.brand.reshapedThemeColors || ({} as ReshapedThemeColors),
+						isDarkTheme
+					)
+				: getThemeColors({} as ReshapedThemeColors, isDarkTheme),
+		[context, isDarkTheme]
+	);
+
 	if (isLoading) {
 		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
 	}
@@ -264,12 +283,12 @@ export const MoneyLionOfferCarousel = (
 		brand: context.brand,
 	};
 
-	const themeColor = {
-		...context.brand.themeColors,
-	};
-
 	return (
-		<ThemeProvider themeColors={themeColor} fontFamily={fontFamily}>
+		<ThemeProvider
+			themeColors={themeColors}
+			fontFamily={fontFamily}
+			isDarkTheme={isDarkTheme}
+		>
 			<EventHandlerProvider
 				eventHandlers={{
 					...eventHandlers,
@@ -284,3 +303,20 @@ export const MoneyLionOfferCarousel = (
 		</ThemeProvider>
 	);
 };
+
+export const MoneyLionOfferCarousel = (
+	props: MoneyLionOfferCarouselProps &
+		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
+) => {
+	const { fallbackUI, onError } = props;
+
+	const handleError = (err: CustomError): void => {
+		onError?.(err);
+	};
+
+	return (
+		<ErrorBoundary fallbackUI={fallbackUI} onError={handleError}>
+			<InternalMoneyLionOfferCarousel {...props} />
+		</ErrorBoundary>
+	);
+};

package/src/config/mocks/cnfContext.ts

@@ -36,50 +36,46 @@ export const localCnfContext: CnfContext = {
 			icon: null,
 		},
 		type: "business",
-		themeColors: {
-			backgroundCritical: "#ff7200",
-			backgroundCriticalFaded: "#fff2e8",
-			backgroundCriticalHighlighted: "#ee6a00",
-			backgroundDisabled: "#eeeeee",
-			backgroundDisabledFaded: "#f6f6f6",
-			backgroundElevationBase: "#ffffff",
-			backgroundElevationOverlay: "#ffffff",
-			backgroundElevationRaised: "#ffffff",
-			backgroundNeutral: "#e2e2e2",
-			backgroundNeutralFaded: "#f5f5f5",
-			backgroundNeutralHighlighted: "#d7d7d7",
-			backgroundPage: "#ffffff",
-			backgroundPageFaded: "#f9f9f9",
-			backgroundPositive: "#00e5c4",
-			backgroundPositiveFaded: "#e8fffc",
-			backgroundPositiveHighlighted: "#00d9b9",
-			backgroundPrimary: "#00e5c4",
-			backgroundPrimaryFaded: "#e8fffc",
-			backgroundPrimaryHighlighted: "#00d9b9",
-			backgroundWarning: "#facc15",
-			backgroundWarningFaded: "#fffae9",
-			backgroundWarningHighlighted: "#edc113",
-			black: "#000000",
-			borderCritical: "#d35d00",
-			borderCriticalFaded: "#fce3ce",
-			borderDisabled: "#e2e2e2",
-			borderNeutral: "#bbbbbb",
-			borderNeutralFaded: "#e1e1e1",
-			borderPositive: "#00bfa3",
-			borderPositiveFaded: "#b8faf2",
-			borderPrimary: "#00bfa3",
-			borderPrimaryFaded: "#b8faf2",
-			borderWarning: "#cfa90f",
-			borderWarningFaded: "#faedbb",
-			brand: "#00e5c4",
-			foregroundCritical: "#a94900",
-			foregroundDisabled: "#cccccc",
-			foregroundNeutral: "#181818",
-			foregroundNeutralFaded: "#666666",
-			foregroundPositive: "#007362",
-			foregroundPrimary: "#007362",
-			foregroundWarning: "#7b6305",
-			white: "#ffffff",
+		// reshapedThemeColors is being used as fallback in the getThemeColors util
+		reshapedThemeColors: {
+			backgroundCritical: { hex: "#ff7200", hexDark: "#ff7200" },
+			backgroundCriticalFaded: { hex: "#fff2ec", hexDark: "#361e11" },
+			backgroundDisabled: { hex: "#eeeeed", hexDark: "#252523" },
+			backgroundDisabledFaded: { hex: "#f7f6f6", hexDark: "#1c1b19" },
+			backgroundElevationBase: { hex: "#ffffff", hexDark: "#171615" },
+			backgroundElevationOverlay: { hex: "#ffffff", hexDark: "#1e1e1c" },
+			backgroundElevationRaised: { hex: "#ffffff", hexDark: "#191917" },
+			backgroundNeutral: { hex: "#e2e2e2", hexDark: "#3f3c35" },
+			backgroundNeutralFaded: { hex: "#f4f4f4", hexDark: "#24221e" },
+			backgroundPage: { hex: "#ffffff", hexDark: "#0e0e0e" },
+			backgroundPageFaded: { hex: "#fbfbfb", hexDark: "#141413" },
+			backgroundPositive: { hex: "#00e5c4", hexDark: "#00e5c4" },
+			backgroundPositiveFaded: { hex: "#ebfff9", hexDark: "#122a24" },
+			backgroundPrimary: { hex: "#00e5c4", hexDark: "#00e5c4" },
+			backgroundPrimaryFaded: { hex: "#ebfff9", hexDark: "#122a24" },
+			backgroundWarning: { hex: "#facc15", hexDark: "#facc15" },
+			backgroundWarningFaded: { hex: "#fff6dd", hexDark: "#2b2410" },
+			black: { hex: "#000000" },
+			borderCritical: { hex: "#aa4a00", hexDark: "#f4b89b" },
+			borderCriticalFaded: { hex: "#f3dcd0", hexDark: "#553220" },
+			borderDisabled: { hex: "#e3e2e0", hexDark: "#282725" },
+			borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
+			borderNeutralFaded: { hex: "#00000014", hexDark: "#ffffff14" },
+			borderPositive: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			borderPositiveFaded: { hex: "#cfede5", hexDark: "#21443c" },
+			borderPrimary: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			borderPrimaryFaded: { hex: "#cfede5", hexDark: "#21443c" },
+			borderWarning: { hex: "#816802", hexDark: "#fbf3db" },
+			borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" },
+			brand: { hex: "#00e5c4" },
+			foregroundCritical: { hex: "#aa4a00", hexDark: "#f4b89b" },
+			foregroundDisabled: { hex: "#cdccc9", hexDark: "#4c4a47" },
+			foregroundNeutral: { hex: "#2e2e2e", hexDark: "#f4f4f4" },
+			foregroundNeutralFaded: { hex: "#6a6a6a", hexDark: "#c9c9c9" },
+			foregroundPositive: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			foregroundPrimary: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			foregroundWarning: { hex: "#816802", hexDark: "#fbf3db" },
+			white: { hex: "#ffffff" },
 		},
 		isLicensed: true,
 		allowedMarks: { logo: true, name: true },