@moneylion/react-native-offer-carousel 1.0.5 → 1.0.7

package/src/components/DynamicOffers/DynamicOffers.tsx

@@ -8,7 +8,7 @@ import { View } from "react-native";
 export type DynamicOfferProps = {
 	title: string;
 	displayLayout: Layout;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 	shouldHideFooter: boolean;
 } & Pick<DynamicOffersRenderProps, "offers">;
@@ -16,7 +16,7 @@ export type DynamicOfferProps = {
 export const DynamicOffers = ({
 	title,
 	displayLayout,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 	// shouldHideFooter,
 	offers,
@@ -37,7 +37,7 @@ export const DynamicOffers = ({
 				displayLayout={displayLayout}
 				fallbackTemplate={FallbackOfferTemplate}
 				productTypeBuilder={productTypeBuilder}
-				showBorder={showBorder}
+				showCardBorder={showCardBorder}
 				showProductTypeLabel={showProductTypeLabel}
 			/>
 			{/* {!shouldHideFooter && <Footer offers={offers} />} */}

package/src/components/DynamicOffers/DynamicOffersContainer.tsx

@@ -28,7 +28,7 @@ export const DynamicOffersContainer = React.memo(
 					title={config.title}
 					showProductTypeLabel={config.showProductTypeLabel}
 					displayLayout={config.displayLayout}
-					showBorder={config.showBorder}
+					showCardBorder={config.showCardBorder}
 					shouldHideFooter={config.shouldHideFooter}
 				/>
 			</Suspense>

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

@@ -5,7 +5,6 @@ import React, {
 	useRef,
 	useState,
 } from "react";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src/types/offerCatalogSchema";
 import type { Layout } from "../../../utils";
 import { productTypeBuilder as builder } from "../../../builder/builder";
 import { Offer } from "./Offer";
@@ -19,6 +18,7 @@ import {
 	type NativeSyntheticEvent,
 } from "react-native";
 import { useEventHandler } from "../../../context/EventHandlerProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 export type DynamicOffersRenderProps = {
 	title: string;
@@ -30,7 +30,7 @@ export type DynamicOffersRenderProps = {
 		offerIndex: number;
 	}>;
 	productTypeBuilder: typeof builder;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 
@@ -40,7 +40,7 @@ export const DynamicOffersRender = ({
 	displayLayout,
 	productTypeBuilder = builder,
 	fallbackTemplate,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: DynamicOffersRenderProps) => {
 	// Performance optimization: store card measurements
@@ -178,13 +178,13 @@ export const DynamicOffersRender = ({
 		// Create offer components
 		return displayLayout === "fixed"
 			? [
-					// <VideosCard key="videos-card" videosContent={videosContent} showBorder={showBorder} />,
+					// <VideosCard key="videos-card" videosContent={videosContent} showCardBorder={showCardBorder} />,
 					...Offer({
 						productTypeBuilder,
 						offers,
 						showProductTypeLabel,
 						fallbackTemplate,
-						showBorder,
+						showCardBorder,
 					}),
 				]
 			: Offer({
@@ -192,7 +192,7 @@ export const DynamicOffersRender = ({
 					offers,
 					showProductTypeLabel,
 					fallbackTemplate,
-					showBorder,
+					showCardBorder,
 				});
 	}, [
 		displayLayout,
@@ -200,7 +200,7 @@ export const DynamicOffersRender = ({
 		offers,
 		showProductTypeLabel,
 		fallbackTemplate,
-		showBorder,
+		showCardBorder,
 	]);
 
 	// Wrapped offer components with layout measurement

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

@@ -1,16 +1,16 @@
 import React from "react";
 import { HeadlineWithDescriptionCard } from "../../Layouts/HeadlineWithDescriptionCard";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 export function FallbackOfferTemplate({
 	offer,
 	offerIndex,
-	showBorder = true,
+	showCardBorder = true,
 	showProductTypeLabel = true,
 }: {
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder?: boolean;
+	showCardBorder?: boolean;
 	showProductTypeLabel?: boolean;
 }) {
 	return (
@@ -22,7 +22,7 @@ export function FallbackOfferTemplate({
 				productTypes: [],
 				layout: "headlineWithDescriptionCard",
 			}}
-			showBorder={showBorder}
+			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
 		/>
 	);

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

@@ -3,12 +3,12 @@ import React, { Fragment } from "react";
 import { match } from "ts-pattern";
 
 import type { ProductTypeBuilder } from "../../../builder";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import {
 	DefaultOfferCard,
 	CreditCardOfferCard,
 	HeadlineWithDescriptionCard,
 } from "../../Layouts";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type RenderOfferListProps = {
 	productTypeBuilder: ProductTypeBuilder;
@@ -17,12 +17,14 @@ type RenderOfferListProps = {
 		offer,
 		offerIndex,
 		showProductTypeLabel,
+		showCardBorder,
 	}: {
 		offer: BaseOffer;
 		offerIndex: number;
 		showProductTypeLabel?: boolean;
+		showCardBorder?: boolean;
 	}) => React.ReactNode;
-	showBorder?: boolean;
+	showCardBorder?: boolean;
 	showProductTypeLabel?: boolean;
 	// featureClient?: CnfFeatureClient; TODO: this is the like split on cnf side it uses growthbook
 };
@@ -32,7 +34,7 @@ export const Offer = ({
 	offers,
 	showProductTypeLabel = true,
 	fallbackTemplate,
-	showBorder = true,
+	showCardBorder = true,
 }: RenderOfferListProps) =>
 	offers.map((offer: BaseOffer, offerIndex: number) => {
 		const builder = productTypeBuilder.find(({ productTypes }) =>
@@ -56,7 +58,7 @@ export const Offer = ({
 							key={`${offerIndex}-${offer.uuid}`}
 							offer={offer}
 							productTypeBuilder={layout}
-							showBorder={showBorder}
+							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
 						/>
 					))
@@ -66,7 +68,7 @@ export const Offer = ({
 							key={`${offerIndex}-${offer.uuid}`}
 							offer={offer}
 							productTypeBuilder={layout}
-							showBorder={showBorder}
+							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
 						/>
 					))
@@ -76,7 +78,7 @@ export const Offer = ({
 							key={`${offerIndex}-${offer.uuid}`}
 							offer={offer}
 							productTypeBuilder={layout}
-							showBorder={showBorder}
+							showCardBorder={showCardBorder}
 							showProductTypeLabel={showProductTypeLabel}
 						/>
 					))
@@ -87,6 +89,7 @@ export const Offer = ({
 						const FallbackTemplate = fallbackTemplate;
 						return (
 							<FallbackTemplate
+								showCardBorder={showCardBorder}
 								offerIndex={offerIndex}
 								key={`${offerIndex}-${offer.uuid}`}
 								offer={offer}

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

@@ -1,6 +1,4 @@
 import { get } from "radash";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
-
 import React from "react";
 
 import type { CreditCardOfferCard as CreditCardOfferCardBuilderProps } from "../../../builder";
@@ -10,11 +8,12 @@ import Divider from "../../Divider";
 import Text from "../../Text";
 import { CallToAction } from "../../Common/DynamicOfferCard/CallToAction";
 import { StyleSheet } from "react-native";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type CreditCardOfferCardProps = {
 	productTypeBuilder: CreditCardOfferCardBuilderProps;
 	offer: BaseOffer;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 	offerIndex: number;
 };
@@ -22,7 +21,7 @@ type CreditCardOfferCardProps = {
 export const CreditCardOfferCard = ({
 	offer,
 	productTypeBuilder,
-	// showBorder, TODO: this is unused in the cnf-app as well
+	showCardBorder,
 	showProductTypeLabel,
 	offerIndex,
 }: CreditCardOfferCardProps) => {
@@ -34,7 +33,7 @@ export const CreditCardOfferCard = ({
 	const showBadge = badges.length > 0;
 
 	return (
-		<BaseOfferCard showBorder={showBadge}>
+		<BaseOfferCard showCardBorder={showCardBorder}>
 			{showProductTypeLabel && (
 				<BaseOfferCard.TopBar>
 					<BaseOfferCard.ProductType>
@@ -50,7 +49,7 @@ export const CreditCardOfferCard = ({
 						// imageAttributes={{ title: offer.financialInstitutionDisplayName }}
 						alt={offer.financialInstitutionDisplayName}
 					/>
-					<Text variant="body-2" color="neutral" weight="bold">
+					<Text variant="body-2" color="backgroundNeutral" weight="bold">
 						{offer.financialInstitutionDisplayName}
 					</Text>
 
@@ -75,6 +74,7 @@ export const CreditCardOfferCard = ({
 
 				<BaseOfferCard.BottomBar>
 					<CallToAction
+						color={"backgroundPositive"}
 						offer={offer}
 						overrideUrl={offer.overrideUrl}
 						style={styles.cta}

package/src/components/Layouts/CreditCardOfferCard/statsBuilder.tsx

@@ -1,6 +1,6 @@
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type { CreditCardOfferCard } from "../../../builder";
-import { statsToElementPropsBuilder } from "../../../../src/capabilities/offer-catalog/src/utils/stats";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import { statsToElementPropsBuilder } from "../../../capabilities/offer-catalog/src/utils/stats";
 
 export const makeCreditCardOfferStats =
 	(productTypeBuilder: CreditCardOfferCard) => (offer: BaseOffer) => {

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

@@ -1,18 +1,17 @@
 import { get } from "radash";
-
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import React from "react";
 
 import { makeDefaultOfferCardStats } from "./statsBuilder";
 import type { DefaultOfferCard as DefaultOfferCardBuilderProps } from "../../../builder";
 import { BaseOfferCard, DynamicOfferCard, SeeMore } from "../../Common";
 import { useConfiguration } from "../../../context/ConfigurationProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type DefaultOfferCardProps = {
 	productTypeBuilder: DefaultOfferCardBuilderProps;
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 
@@ -20,7 +19,7 @@ export const DefaultOfferCard = ({
 	offer,
 	productTypeBuilder,
 	offerIndex,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: DefaultOfferCardProps) => {
 	const { stats, topStats } =
@@ -40,7 +39,7 @@ export const DefaultOfferCard = ({
 			key={`${offerIndex}-${offer.uuid}`}
 			offer={offer}
 			offerIndex={offerIndex}
-			showBorder={showBorder}
+			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
 		>
 			<BaseOfferCard.TopContainer>

package/src/components/Layouts/DefaultOfferCard/statsBuilder.tsx

@@ -1,6 +1,6 @@
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type { DefaultOfferCard } from "../../../builder";
-import { statsToElementPropsBuilder } from "../../../../src/capabilities/offer-catalog/src/utils/stats";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
+import { statsToElementPropsBuilder } from "../../../capabilities/offer-catalog/src/utils/stats";
 
 export const makeDefaultOfferCardStats =
 	(productTypeBuilder: DefaultOfferCard) => (offer: BaseOffer) => {

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

@@ -2,23 +2,23 @@ import { get } from "radash";
 
 import React from "react";
 import { SeeMore } from "../../Common/DynamicOfferCard/SeeMore";
-import type { BaseOffer } from "../../../../src/capabilities/offer-catalog/src";
 import type { HeadlineWithDescriptionCard as HeadlineWithDescriptionCardBuilderProps } from "../../../builder";
 import { BaseOfferCard, DynamicOfferCard } from "../../Common";
 import { useConfiguration } from "../../../context/ConfigurationProvider";
+import type { BaseOffer } from "../../../capabilities/offer-catalog/src";
 
 type HeadlineWithDescriptionCardProps = {
 	productTypeBuilder: HeadlineWithDescriptionCardBuilderProps;
 	offer: BaseOffer;
 	offerIndex: number;
-	showBorder: boolean;
+	showCardBorder: boolean;
 	showProductTypeLabel?: boolean;
 };
 export const HeadlineWithDescriptionCard = ({
 	offer,
 	productTypeBuilder,
 	offerIndex,
-	showBorder,
+	showCardBorder,
 	showProductTypeLabel,
 }: HeadlineWithDescriptionCardProps) => {
 	const {
@@ -43,7 +43,7 @@ export const HeadlineWithDescriptionCard = ({
 			key={`${offerIndex}-${offer.uuid}`}
 			offer={offer}
 			offerIndex={offerIndex}
-			showBorder={showBorder}
+			showCardBorder={showCardBorder}
 			showProductTypeLabel={showProductTypeLabel}
 		>
 			<BaseOfferCard.TopContainer>

package/src/components/Modal/DescriptionPoints.tsx

@@ -11,12 +11,12 @@ export function DescriptionPoints({
 }) {
 	return (
 		<View gap={8}>
-			<Text variant={"body-3"} weight={"bold"} color={"neutral"}>
+			<Text variant={"body-3"} weight={"bold"} color={"foregroundNeutral"}>
 				Offer Details
 			</Text>
 			<MarkdownText
 				variant={"body-3"}
-				color={"neutral"}
+				color={"foregroundNeutral"}
 				content={arrayToMarkdownList(descriptionPoints)}
 			/>
 		</View>

package/src/components/Modal/Disclaimer.tsx

@@ -6,10 +6,14 @@ import { MarkdownText } from "../../capabilities/ui/elements/src/components/Mark
 export function Disclaimer({ disclaimer }: { disclaimer: string }) {
 	return (
 		<View gap={16}>
-			<Text variant={"body-3"} weight={"bold"} color={"neutral"}>
+			<Text variant={"body-3"} weight={"bold"} color={"foregroundNeutral"}>
 				Provider Disclaimer
 			</Text>
-			<MarkdownText variant={"body-3"} color={"neutral"} content={disclaimer} />
+			<MarkdownText
+				variant={"body-3"}
+				color={"foregroundNeutral"}
+				content={disclaimer}
+			/>
 		</View>
 	);
 }

package/src/components/Modal/OfferDetailsModal.tsx

@@ -10,11 +10,11 @@ import {
 	Platform,
 } from "react-native";
 import Text from "../Text";
-import type { BaseOffer } from "../../../src/capabilities/offer-catalog/src";
 import { DescriptionPoints } from "./DescriptionPoints";
 import { Disclaimer } from "./Disclaimer";
 import { CallToAction } from "../Common/DynamicOfferCard/CallToAction";
 import Divider from "../Divider";
+import type { BaseOffer } from "../../capabilities/offer-catalog/src";
 
 type OfferDetailsModalProps = {
 	visible: boolean;
@@ -31,6 +31,12 @@ export const OfferDetailsModal = ({
 	onClose,
 	offerIndex,
 }: OfferDetailsModalProps) => {
+	const showDescriptionPoints = Boolean(offer?.descriptionPoints?.length);
+
+	const showDisclaimer = Boolean(offer?.legalLanguage);
+
+	const showDivider = showDescriptionPoints && showDisclaimer;
+
 	return (
 		<Modal
 			animationType="slide"
@@ -61,15 +67,14 @@ export const OfferDetailsModal = ({
 					style={styles.modalContent}
 					contentContainerStyle={styles.scrollContent}
 				>
-					{offer?.descriptionPoints?.length && (
-						<DescriptionPoints descriptionPoints={offer?.descriptionPoints} />
-					)}
-					{offer?.descriptionPoints && offer?.legalLanguage && <Divider />}
-					{offer?.legalLanguage && (
-						<Disclaimer disclaimer={offer.legalLanguage} />
+					{showDescriptionPoints && (
+						<DescriptionPoints descriptionPoints={offer?.descriptionPoints!} />
 					)}
+					{showDivider && <Divider />}
+					{showDisclaimer && <Disclaimer disclaimer={offer.legalLanguage!} />}
 				</ScrollView>
 				<CallToAction
+					color={"backgroundPositive"}
 					offerIndex={offerIndex}
 					offer={offer}
 					overrideUrl={offer.overrideUrl}

package/src/components/MoneyLionOfferCarousel.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { localCnfContext } from "../config/mocks/cnfContext";
 import { Text } from "react-native";
-import type { CnfContext } from "../../src/capabilities/core/src/system/cnfContext/CnfContext";
 import { getPageData } from "../pageData";
 import type { Layout } from "../utils";
 import {
@@ -15,8 +14,8 @@ import {
 	type EventHandlerContextType,
 } from "../context/EventHandlerProvider";
 import { getConfigApiBaseUrl } from "../apiEnvironment";
-import { getDefaultPaletteColor } from "../utils/getDefaultPaletteColor";
 import { ConfigurationProvider } from "../context/ConfigurationProvider";
+import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
 
 export type MoneyLionOfferCarouselProps = {
 	channel: string;
@@ -31,6 +30,8 @@ export type MoneyLionOfferCarouselProps = {
 	fontFamily?: Partial<FontFamily>;
 	showProductTypeLabel?: boolean;
 	isDev: boolean;
+	showCardBorder?: boolean;
+	showDescriptionPoints?: boolean;
 };
 
 const getConfiguration = async ({
@@ -65,7 +66,14 @@ export const MoneyLionOfferCarousel = (
 	props: MoneyLionOfferCarouselProps &
 		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
 ) => {
-	const { channel, zone, subAccountToken, fontFamily, isDev } = props;
+	const {
+		channel,
+		zone,
+		subAccountToken,
+		fontFamily,
+		isDev,
+		showDescriptionPoints = true,
+	} = props;
 
 	const {
 		onInitialize,
@@ -102,7 +110,7 @@ export const MoneyLionOfferCarousel = (
 					subAccountToken,
 					isDev,
 				});
-				setContext({ ...(data.serializableContext as CnfContext), isDev });
+				setContext(data.serializableContext as CnfContext);
 			} catch (err) {
 				setError(
 					err instanceof Error
@@ -127,7 +135,7 @@ export const MoneyLionOfferCarousel = (
 		const fetchPageData = async () => {
 			if (context) {
 				const data = await getPageData({
-					context,
+					context: { ...context, isDev },
 					params: props,
 					onRateTableSubmit,
 				});
@@ -143,7 +151,7 @@ export const MoneyLionOfferCarousel = (
 		};
 
 		fetchPageData();
-	}, [context, onRateTableResponse, onRateTableSubmit, props]);
+	}, [context, isDev, onRateTableResponse, onRateTableSubmit, props]);
 
 	if (isLoading) {
 		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
@@ -165,7 +173,7 @@ export const MoneyLionOfferCarousel = (
 		shouldHideFooter,
 		displayLayout,
 		showProductTypeLabel,
-		showBorder,
+		showCardBorder,
 		title,
 		offers,
 		rateTableUuid,
@@ -177,18 +185,16 @@ export const MoneyLionOfferCarousel = (
 		shouldHideFooter,
 		displayLayout,
 		showProductTypeLabel,
-		showBorder,
+		showCardBorder,
 		title,
 	};
 
-	const palette = {
-		...context.brand.palette,
-		positive:
-			context.brand.palette?.positive ?? getDefaultPaletteColor("positive"),
+	const themeColor = {
+		...context.brand.themeColors,
 	};
 
 	return (
-		<ThemeProvider palette={palette} fontFamily={fontFamily}>
+		<ThemeProvider themeColors={themeColor} fontFamily={fontFamily}>
 			<EventHandlerProvider
 				eventHandlers={{
 					...eventHandlers,
@@ -196,7 +202,7 @@ export const MoneyLionOfferCarousel = (
 					leadUuid,
 				}}
 			>
-				<ConfigurationProvider showDescriptionPoints={false}>
+				<ConfigurationProvider showDescriptionPoints={showDescriptionPoints}>
 					<DynamicOffersContainer config={config} />
 				</ConfigurationProvider>
 			</EventHandlerProvider>

package/src/components/Text/index.tsx

@@ -1,4 +1,3 @@
-// Text.tsx
 import React from "react";
 import {
 	Text as RNText,
@@ -7,7 +6,7 @@ import {
 	type StyleProp,
 	type TextProps as RNTextProps,
 } from "react-native";
-import { useTheme } from "../../context/ThemeProvider";
+import { useTheme, type ThemeColors } from "../../context/ThemeProvider";
 
 // Define the variant types
 export type Variant =
@@ -29,27 +28,14 @@ export type Variant =
 // Define text decoration
 export type TextDecoration = "line-through";
 
-// Define text color
-export type TextColor =
-	| "neutral"
-	| "neutral-faded"
-	| "critical"
-	| "warning"
-	| "positive"
-	| "primary"
-	| "disabled";
-
 // Define text weight
 export type TextWeight = "normal" | "medium" | "bold";
 
-// // Define wrap options
-// export type TextWrap = "balance";
-
 // Define props
 export interface TextProps extends Omit<RNTextProps, "style"> {
 	variant?: Variant;
 	weight?: TextWeight;
-	color?: TextColor;
+	color?: keyof ThemeColors;
 	decoration?: TextDecoration;
 	children?: React.ReactNode;
 	style?: StyleProp<TextStyle>;
@@ -64,26 +50,28 @@ const Text: React.FC<TextProps> = ({
 	style,
 	...restProps
 }) => {
-	const { fontFamily } = useTheme();
+	const themeContext = useTheme();
+	const { fontFamily, theme } = themeContext || { fontFamily: {}, theme: {} };
 
 	// Create style array
 	const styleArray: StyleProp<TextStyle>[] = [styles.base];
 
 	// Add variant styles
-
 	if (variant) {
 		styleArray.push(styles[variant]);
 	}
 
 	// Add font family styles
-	styleArray.push({ fontFamily: fontFamily[weight || "normal"] });
+	if (fontFamily && fontFamily[weight || "normal"]) {
+		styleArray.push({ fontFamily: fontFamily[weight || "normal"] });
+	}
 
 	// Add weight styles
 	styleArray.push({ fontWeight: weight === "medium" ? "500" : weight });
 
-	// Add color styles
-	if (color) {
-		styleArray.push(styles[`color-${color}`]);
+	// Add color styles from theme
+	if (color && theme[color]) {
+		styleArray.push({ color: theme[color] });
 	}
 
 	// Add decoration styles
@@ -104,7 +92,6 @@ const Text: React.FC<TextProps> = ({
 };
 
 // Define styles
-// Note: In a real implementation, these would be derived from a theme or design system
 const styles = StyleSheet.create({
 	"base": {
 		fontFamily: "System",
@@ -172,28 +159,6 @@ const styles = StyleSheet.create({
 		fontSize: 12,
 		lineHeight: 16,
 	},
-	// Colors
-	"color-neutral": {
-		color: "#2E2E2E",
-	},
-	"color-neutral-faded": {
-		color: "#6A6A6A",
-	},
-	"color-critical": {
-		color: "#D32F2F",
-	},
-	"color-warning": {
-		color: "#F57C00",
-	},
-	"color-positive": {
-		color: "#388E3C",
-	},
-	"color-primary": {
-		color: "#007c6a",
-	},
-	"color-disabled": {
-		color: "#AAAAAA",
-	},
 });
 
 export default Text;