@proximus/lavender-topnavigation-native 0.1.0-alpha.0 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.1...@proximus/lavender-topnavigation-native@0.1.0-alpha.2) (2025-09-12)
+
+**Note:** Version bump only for package @proximus/lavender-topnavigation-native
+
+# [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.0...@proximus/lavender-topnavigation-native@0.1.0-alpha.1) (2025-09-05)
+
+### Features
+
+- **BCRI-4279213:** update token architecture and component styles ([#18](https://github.com/Pxs-Corporate/react-native-lavender/issues/18)) ([2fabf41](https://github.com/Pxs-Corporate/react-native-lavender/commit/2fabf416ce069e9756daa868c3012181db87e7f5))
+
 # 0.1.0-alpha.0 (2025-08-14)
 
 ### Bug Fixes

package/dist/PxTopNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxTopNavigation.d.ts","sourceRoot":"","sources":["../src/PxTopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAA8B,MAAM,OAAO,CAAC;AA+BnD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAsHD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}
+{"version":3,"file":"PxTopNavigation.d.ts","sourceRoot":"","sources":["../src/PxTopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyBnD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AA8HD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-topnavigation-native",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Lavender react native top navigation component",
   "license": "MIT",
   "main": "src/index.ts",
@@ -18,10 +18,10 @@
     "react-native-gesture-handler": "*"
   },
   "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.1",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.1",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.1",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.1"
+    "@proximus/lavender-common-native": "0.1.0-alpha.3",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.3",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.2",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.3"
   },
   "publishConfig": {
     "access": "public"
@@ -37,5 +37,5 @@
       }
     }
   },
-  "gitHead": "7883d62b0246c39143275a6759cc287e54caeb40"
+  "gitHead": "6328f584529cb675f4a2ede8ad89f31e2b3c9ffb"
 }

package/src/PxTopNavigation.tsx

@@ -9,15 +9,9 @@ import React, { useEffect, useState } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
 import { a11y } from '@proximus/lavender-common-native';
 import { Body, Header as TextHeader } from '@proximus/lavender-texts-native';
-import { Colors } from '@proximus/lavender-styling-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PxIcon } from '@proximus/lavender-icon-native';
-import {
-  BackgroundColorActionNeutralDefault,
-  BorderColorActionNeutralDefault,
-  IconColorActionBrandDefault,
-  BorderSizeM,
-} from '@proximus/lavender-styling/dist/js/proximus/themesTokens.js';
+import { useTheme } from '@proximus/lavender-styling-native';
 
 function isWhiteColor(color: string | number | undefined): boolean {
   if (!color) return false;
@@ -33,7 +27,7 @@ function isWhiteColor(color: string | number | undefined): boolean {
     )
   )
     return true;
-  return color === Colors.v8_1.white;
+  return false;
 }
 
 export interface PxTopNavigationProps {
@@ -54,12 +48,14 @@ export interface PxTopNavigationProps {
 
 function LeftComponent({
   title,
-  titleColor = Colors.v8_1.white,
+  titleColor,
   description,
   prefix,
   descriptionContent,
   centerTitle = false,
 }: PxTopNavigationProps) {
+  const { theme } = useTheme();
+
   return (
     <View style={styles.leftComponent}>
       {prefix}
@@ -70,7 +66,7 @@ function LeftComponent({
           style={[
             styles.textHeader,
             {
-              color: titleColor,
+              color: titleColor || theme.t('ColorTextBrandInverted'),
               textAlign: centerTitle ? 'center' : 'left',
             },
           ]}
@@ -96,7 +92,7 @@ function LeftComponent({
               style={[
                 styles.description,
                 {
-                  color: titleColor,
+                  color: titleColor || theme.t('ColorTextBrandInverted'),
                   textAlign: centerTitle ? 'center' : 'left',
                 },
               ]}
@@ -129,6 +125,8 @@ function Menu({ menuElement }: PxTopNavigationProps) {
 function Search({ searchElement, colors }: PxTopNavigationProps) {
   const [isWhiteBackground, setIsWhiteBackground] = useState(false);
 
+  const { theme } = useTheme();
+
   useEffect(() => {
     setIsWhiteBackground(
       isWhiteColor(colors?.[0]) && isWhiteColor(colors?.[1])
@@ -139,15 +137,19 @@ function Search({ searchElement, colors }: PxTopNavigationProps) {
       style={[
         styles.search,
         {
-          ...(isWhiteBackground
-            ? { backgroundColor: BackgroundColorActionNeutralDefault }
-            : {}),
           ...(isWhiteBackground
             ? {
-                borderColor: BorderColorActionNeutralDefault,
-                borderWidth: BorderSizeM.number,
+                backgroundColor: theme.t(
+                  'ColorBackgroundContainerDefaultDefault'
+                ),
+                borderColor: theme.t('ColorBorderNeutralDefault'),
+                borderWidth: theme.t('SizeBorderS').number,
               }
-            : {}),
+            : {
+                backgroundColor: theme.t(
+                  'ColorBackgroundContainerLightDefault'
+                ),
+              }),
         },
       ]}
     >
@@ -156,7 +158,7 @@ function Search({ searchElement, colors }: PxTopNavigationProps) {
         size={24}
         color={
           isWhiteBackground || !colors?.[0]
-            ? IconColorActionBrandDefault
+            ? theme.t('ColorIconBrandDefault')
             : (colors?.[0] as string)
         }
         accessible={false}
@@ -209,11 +211,9 @@ const styles = StyleSheet.create({
     margin: 8,
   },
   textHeader: {
-    color: Colors.v8_1.white,
     fontSize: 16,
   },
   description: {
-    color: Colors.v8_1.white,
     fontSize: 12,
   },
   leftComponent: {
@@ -234,7 +234,6 @@ const styles = StyleSheet.create({
   },
   search: {
     padding: 11,
-    backgroundColor: Colors.v8_1.white,
     borderRadius: 12,
     marginVertical: 8,
     marginHorizontal: 16,