Merge pull request #30 from BouyguesTelecom/merging/colors

🚀 One Colors.tsx for both (web/native)

examples/mobile/android/link-assets-manifest.json

@@ -3,19 +3,19 @@
   "data": [
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "875cf0cecd647bcf22e79d633d868c1b1ec98dfa"
     },
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "283f21b44efbdbf276ba802be2d949a36bbc4233"
     },
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "fdd3002e7d814ee47c1c1b8487c72c6bbb3a2d00"
     },
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "8a4ace9392d06bcb7f8ea2f5169b07e4c383a90d"
     }
   ]
 }

examples/mobile/ios/link-assets-manifest.json

@@ -3,19 +3,19 @@
   "data": [
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "875cf0cecd647bcf22e79d633d868c1b1ec98dfa"
     },
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "283f21b44efbdbf276ba802be2d949a36bbc4233"
     },
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "fdd3002e7d814ee47c1c1b8487c72c6bbb3a2d00"
     },
     {
       "path": "../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf",
-      "sha1": "da39a3ee5e6b4b0d3255bfef95601890afd80709"
+      "sha1": "8a4ace9392d06bcb7f8ea2f5169b07e4c383a90d"
     }
   ]
 }

examples/mobile/ios/mobile.xcodeproj/project.pbxproj

@@ -8,16 +8,16 @@
 
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* mobileTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* mobileTests.m */; };
-		1042F44948434C5BBBBBA927 /* poppins-semibold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E82D29C4001E4B98A04752C8 /* poppins-semibold.ttf */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		3371BE20F7DD0B74E30764D1 /* libPods-mobile-mobileTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2DF92BD080ABE1C428CC6C27 /* libPods-mobile-mobileTests.a */; };
-		51711AA02FDC4A3EAC72F2E8 /* poppins-regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 39412D012C7B42729E7025B4 /* poppins-regular.ttf */; };
-		577149A71B0C41A8822613D2 /* poppins-medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C2D59AFCCD8348ADB003F0F4 /* poppins-medium.ttf */; };
 		80C4062C8BC347587BEB983C /* libPods-mobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 482FF49AB0073B44D856E475 /* libPods-mobile.a */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
-		99DA179A6F8E47A3B2958B07 /* poppins-bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 64A035288FD84C999C9653A9 /* poppins-bold.ttf */; };
+		38CC72CCB89541D9BB981D47 /* poppins-bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3F0B14C312F049EC96BE998E /* poppins-bold.ttf */; };
+		86C9997DE0514596B2DF011F /* poppins-medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5A52BB194E1C46D990E75A5E /* poppins-medium.ttf */; };
+		21CB18AB12064015ACCED963 /* poppins-regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 12742FEDB2044517AA235D2F /* poppins-regular.ttf */; };
+		800F25BB93064DF9B6A345F1 /* poppins-semibold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FC45F2891F654F61B834167D /* poppins-semibold.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -42,16 +42,16 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = mobile/main.m; sourceTree = "<group>"; };
 		13F3ECF40D54B87EA2D14D2D /* Pods-mobile.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile.debug.xcconfig"; path = "Target Support Files/Pods-mobile/Pods-mobile.debug.xcconfig"; sourceTree = "<group>"; };
 		2DF92BD080ABE1C428CC6C27 /* libPods-mobile-mobileTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-mobile-mobileTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		39412D012C7B42729E7025B4 /* poppins-regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-regular.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf"; sourceTree = "<group>"; };
 		482FF49AB0073B44D856E475 /* libPods-mobile.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-mobile.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		64A035288FD84C999C9653A9 /* poppins-bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-bold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf"; sourceTree = "<group>"; };
 		74F5C4D2108852BC1E7491EC /* Pods-mobile-mobileTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile-mobileTests.debug.xcconfig"; path = "Target Support Files/Pods-mobile-mobileTests/Pods-mobile-mobileTests.debug.xcconfig"; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = mobile/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		84EFA559DA33BE4E7F84E533 /* Pods-mobile-mobileTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile-mobileTests.release.xcconfig"; path = "Target Support Files/Pods-mobile-mobileTests/Pods-mobile-mobileTests.release.xcconfig"; sourceTree = "<group>"; };
 		C136A1CF80277E7F9C861A8C /* Pods-mobile.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-mobile.release.xcconfig"; path = "Target Support Files/Pods-mobile/Pods-mobile.release.xcconfig"; sourceTree = "<group>"; };
-		C2D59AFCCD8348ADB003F0F4 /* poppins-medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-medium.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf"; sourceTree = "<group>"; };
-		E82D29C4001E4B98A04752C8 /* poppins-semibold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "poppins-semibold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		3F0B14C312F049EC96BE998E /* poppins-bold.ttf */ = {isa = PBXFileReference; name = "poppins-bold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5A52BB194E1C46D990E75A5E /* poppins-medium.ttf */ = {isa = PBXFileReference; name = "poppins-medium.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		12742FEDB2044517AA235D2F /* poppins-regular.ttf */ = {isa = PBXFileReference; name = "poppins-regular.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		FC45F2891F654F61B834167D /* poppins-semibold.ttf */ = {isa = PBXFileReference; name = "poppins-semibold.ttf"; path = "../../../node_modules/@trilogy-ds/assets/lib/fonts/ttf/poppins-semibold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -149,10 +149,10 @@
 		9453D6895A8A4C60A85663D3 /* Resources */ = {
 			isa = PBXGroup;
 			children = (
-				64A035288FD84C999C9653A9 /* poppins-bold.ttf */,
-				C2D59AFCCD8348ADB003F0F4 /* poppins-medium.ttf */,
-				39412D012C7B42729E7025B4 /* poppins-regular.ttf */,
-				E82D29C4001E4B98A04752C8 /* poppins-semibold.ttf */,
+				3F0B14C312F049EC96BE998E /* poppins-bold.ttf */,
+				5A52BB194E1C46D990E75A5E /* poppins-medium.ttf */,
+				12742FEDB2044517AA235D2F /* poppins-regular.ttf */,
+				FC45F2891F654F61B834167D /* poppins-semibold.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -263,10 +263,10 @@
 			files = (
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				99DA179A6F8E47A3B2958B07 /* poppins-bold.ttf in Resources */,
-				577149A71B0C41A8822613D2 /* poppins-medium.ttf in Resources */,
-				51711AA02FDC4A3EAC72F2E8 /* poppins-regular.ttf in Resources */,
-				1042F44948434C5BBBBBA927 /* poppins-semibold.ttf in Resources */,
+				38CC72CCB89541D9BB981D47 /* poppins-bold.ttf in Resources */,
+				86C9997DE0514596B2DF011F /* poppins-medium.ttf in Resources */,
+				21CB18AB12064015ACCED963 /* poppins-regular.ttf in Resources */,
+				800F25BB93064DF9B6A345F1 /* poppins-semibold.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

examples/react-template/screens/Card.tsx

@@ -41,7 +41,7 @@ export const CardScreen = (): JSX.Element => {
     <Section>
       <Title level={TitleLevels.TWO}>CardImage & markup </Title>
       <Spacer size={SpacerSize.MEDIUM} />
-      <Card active backgroundColor={TrilogyColor.WHITE}>
+      <Card active backgroundColor={TrilogyColor.BACKGROUND}>
         <CardImage src="https://i.etsystatic.com/10951167/r/il/df66c4/1860902191/il_570xN.1860902191_kuoj.jpg" />
         <CardContent>
           <Title overline>Desktop Card Vertical Markup A</Title>
@@ -61,7 +61,7 @@ export const CardScreen = (): JSX.Element => {
 
       <Title level={TitleLevels.TWO}>CardImage & markup </Title>
       <Spacer size={SpacerSize.MEDIUM} />
-      <Card markup={CardMarkup.A} backgroundColor={TrilogyColor.WHITE}>
+      <Card markup={CardMarkup.A} backgroundColor={TrilogyColor.BACKGROUND}>
         <CardImage src="https://i.etsystatic.com/10951167/r/il/df66c4/1860902191/il_570xN.1860902191_kuoj.jpg" />
         <CardContent>
           <Title overline>Desktop Card Vertical Markup A</Title>
@@ -136,7 +136,7 @@ export const CardScreen = (): JSX.Element => {
           size={"3"}
           src="https://i.etsystatic.com/10951167/r/il/df66c4/1860902191/il_570xN.1860902191_kuoj.jpg"
         />
-        <CardContent backgroundColor={TrilogyColor.WHITE}>
+        <CardContent backgroundColor={TrilogyColor.BACKGROUND}>
           <Title overline>Desktop Card Horizontal</Title>
           <Title level={TitleLevels.ONE}>Card Title</Title>
           <Text>

examples/react-template/screens/Divider.tsx

@@ -19,7 +19,7 @@ export const DividerScreen = (): JSX.Element => {
         <Divider
           color={TrilogyColor.MAIN}
           backgroundColor={TrilogyColor.MAIN}
-          textColor={TrilogyColor.WHITE}
+          textColor={TrilogyColor.BACKGROUND}
           iconName={IconName.EYE_SLASH}
         />
         <Text>Lorem ipsum dolor sit amet</Text>
@@ -30,7 +30,7 @@ export const DividerScreen = (): JSX.Element => {
         <Divider
           color={TrilogyColor.MAIN}
           textColor={TrilogyColor.MAIN}
-          backgroundColor={TrilogyColor.WHITE}
+          backgroundColor={TrilogyColor.BACKGROUND}
           content={"New Message"}
         />
         <Text>Lorem ipsum dolor sit amet</Text>

examples/react-template/screens/Input.tsx

@@ -33,7 +33,7 @@ export const InputScreen = (): JSX.Element => {
   }
 
   return (
-    <Section background={TrilogyColor.WHITE}>
+    <Section background={TrilogyColor.BACKGROUND}>
       <Input
         disabled
         hovered

examples/react-template/screens/SegmentedControl.tsx

@@ -8,7 +8,7 @@ import { TrilogyColor } from "@trilogy-ds/react";
 
 export const SegmentedControlScreen = (): JSX.Element => {
   return (
-    <Section background={TrilogyColor.WHITE}>
+    <Section background={TrilogyColor.BACKGROUND}>
       <SegmentControl>
         <SegmentControlItem active onClick={() => alert("Appels")}>
           Item 1

examples/react-template/vite.config.js

@@ -33,6 +33,6 @@ export default defineConfig({
     modules: false,
   },
   build: {
-    commonjsOptions: { transformMixedEsModules: true } // Change
+    commonjsOptions: { transformMixedEsModules: true }
   }
 })

packages/react/components/box/Box.native.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View, } from "react-native"
 import { BoxProps } from "./BoxProps"
-import { getColorStyle, TrilogyColor, TrilogyColorValues, } from "../../objects/facets/Color"
+import { getColorStyle, TrilogyColor, TrilogyColorValues } from "../../objects/facets/Color"
 import ContentLoader, { Rect } from "react-content-loader/native"
 import { getBackgroundStyle } from "../../objects/atoms/Background"
 import { ComponentName } from "../enumsComponentsName"
@@ -54,7 +54,7 @@ const Box = ({
       borderStyle: flat ? "solid" : undefined,
       borderWidth: (flat && 1) || (active && 2) || 0,
       borderColor: active
-        ? getColorStyle(TrilogyColor.MAIN)
+        ? getColorStyle(TrilogyColor.MAIN, 0)
         : getColorStyle(TrilogyColor.FONT, 1),
       marginTop: hat ? 35 : 0,
       flex: fullheight ? 1 : 0,
@@ -74,7 +74,7 @@ const Box = ({
     skeleton: {
       width: "100%",
       minHeight: 50,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0),
       overflow: "hidden",
       borderRadius: boxRadius,
     },

packages/react/components/button/Button.native.tsx

@@ -7,11 +7,10 @@ import {
 } from "react-native"
 import { View } from "../view"
 import {
-  getButtonColorStyle,
   getLoadingClassName,
   getVariantClassName,
 } from "../../objects"
-import { getColorStyle, TrilogyColor } from "../../objects/facets/Color"
+import { getColorStyle, TrilogyColor, getButtonColorStyle } from "../../objects/facets/Color"
 import { ButtonProps } from "./ButtonProps"
 import { Icon, IconSize } from "../icon"
 import { ButtonVariant } from "./ButtonEnum"
@@ -74,15 +73,15 @@ const findBorderColor = ({
   return (
     (disabled &&
       variant === ButtonVariant.PRIMARY &&
-      getColorStyle(TrilogyColor.DISABLED)) ||
+      getColorStyle(TrilogyColor.DISABLED, 0)) ||
     (!disabled &&
       !!loading &&
       variant === ButtonVariant.PRIMARY &&
-      getColorStyle(TrilogyColor.DISABLED)) ||
+      getColorStyle(TrilogyColor.DISABLED, 0)) ||
     (!disabled &&
       variant === ButtonVariant.PRIMARY &&
       getColorStyle(TrilogyColor.INFO, 1)) ||
-    getColorStyle(TrilogyColor.WHITE)
+    getColorStyle(TrilogyColor.WHITE, 0)
   )
 }
 

packages/react/components/card/Card.native.tsx

@@ -34,7 +34,7 @@ const Card = ({
   floating,
   onClick,
   skeleton,
-  backgroundColor = TrilogyColor.WHITE,
+  backgroundColor = TrilogyColor.BACKGROUND,
   reversed,
   fullheight,
   active,

packages/react/components/card/CardProps.ts

@@ -8,22 +8,28 @@ import { JustifiableProps } from '../../objects/facets/Justifiable'
  */
 
 export enum CardMarkup {
-  DIV = 'div',
-  A = 'a',
+  DIV = "div",
+  A = "a",
 }
 
-export type CardMarkupValues = keyof typeof CardMarkup
-export interface CardProps extends AlignableProps, Fullheight, JustifiableProps, Clickable, Accessibility {
-  children?: React.ReactNode
-  flat?: boolean
-  horizontal?: boolean
-  floating?: boolean
-  skeleton?: boolean
-  className?: string
-  onClick?: ClickEvent
-  markup?: CardMarkup | CardMarkupValues
-  backgroundColor?: TrilogyColor.WHITE | 'transparent'
-  reversed?: boolean
-  to?: string
-  active?: boolean
+export type CardMarkupValues = keyof typeof CardMarkup;
+
+export interface CardProps
+  extends AlignableProps,
+    Fullheight,
+    JustifiableProps,
+    Clickable,
+    Accessibility {
+  children?: React.ReactNode;
+  flat?: boolean;
+  horizontal?: boolean;
+  floating?: boolean;
+  skeleton?: boolean;
+  className?: string;
+  onClick?: ClickEvent;
+  markup?: CardMarkup | CardMarkupValues;
+  backgroundColor?: TrilogyColor.BACKGROUND | "transparent";
+  reversed?: boolean;
+  to?: string;
+  active?: boolean;
 }

packages/react/components/card/content/CardContentProps.ts

@@ -1,27 +1,27 @@
-import { ButtonMarkup, ButtonMarkupValues, ButtonVariant, ButtonVariantValues } from '../../button/ButtonEnum'
-import { TitleLevels, TitleLevelValues } from '../../title/TitleEnum'
-import { TextLevelValues } from '../../text/TextEnum'
-import { ClickEvent } from '../../../events/OnClickEvent'
-import { Accessibility, Clickable, TrilogyColor } from '../../../objects'
+import { ButtonMarkup, ButtonMarkupValues, ButtonVariant, ButtonVariantValues, } from "../../button/ButtonEnum"
+import { TitleLevels, TitleLevelValues } from "../../title/TitleEnum"
+import { TextLevelValues } from "../../text/TextEnum"
+import { ClickEvent } from "../../../events/OnClickEvent"
+import { Accessibility, Clickable, TrilogyColor } from "../../../objects"
 
 /**
  * Card Content Interface
  */
 export interface CardContentProps extends Clickable, Accessibility {
-  children?: React.ReactNode
-  titleSup?: string
-  titleSupLevel?: TextLevelValues
-  title?: string
-  titleLevel?: TitleLevels | TitleLevelValues
-  buttonText?: string
-  text?: string
-  textLevel?: TextLevelValues
-  buttonVariant?: ButtonVariant | ButtonVariantValues
-  buttonClick?: ClickEvent
-  className?: string
-  buttonMarkup?: ButtonMarkup | ButtonMarkupValues
-  onClick?: ClickEvent
+  children?: React.ReactNode;
+  titleSup?: string;
+  titleSupLevel?: TextLevelValues;
+  title?: string;
+  titleLevel?: TitleLevels | TitleLevelValues;
+  buttonText?: string;
+  text?: string;
+  textLevel?: TextLevelValues;
+  buttonVariant?: ButtonVariant | ButtonVariantValues;
+  buttonClick?: ClickEvent;
+  className?: string;
+  buttonMarkup?: ButtonMarkup | ButtonMarkupValues;
+  onClick?: ClickEvent;
 
-  floating?: boolean
-  backgroundColor?: TrilogyColor.WHITE | 'transparent'
+  floating?: boolean;
+  backgroundColor?: TrilogyColor.BACKGROUND | "transparent";
 }

packages/react/components/title/Title.native.tsx

@@ -76,7 +76,7 @@ const Title = ({
       color:
         ((overline || subtitle) &&
           !level &&
-          getColorStyle(TrilogyColor.MAIN)) ||
+          getColorStyle(TrilogyColor.MAIN, 0)) ||
         (!skeleton && setTypographyColor(typo, inverted)) ||
         "transparent",
       textAlign: setTypographyAlign(typo),
@@ -88,7 +88,7 @@ const Title = ({
       alignSelf: getAlignSelf(),
       borderRadius: 5,
       borderWidth: 0.1,
-      borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0),
       overflow: "hidden",
       height: titlesLevels(),
     },