@proximus/lavender-buttonicon-native 0.1.0-alpha.1 → 0.1.0-alpha.3

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.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.2...@proximus/lavender-buttonicon-native@0.1.0-alpha.3) (2025-09-12)
+
+**Note:** Version bump only for package @proximus/lavender-buttonicon-native
+
+# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.1...@proximus/lavender-buttonicon-native@0.1.0-alpha.2) (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.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.0...@proximus/lavender-buttonicon-native@0.1.0-alpha.1) (2025-08-13)
 
 ### Bug Fixes

package/dist/PxButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxButtonIcon.d.ts","sourceRoot":"","sources":["../src/PxButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuCD,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,gBAAgB,qBAiClB"}
+{"version":3,"file":"PxButtonIcon.d.ts","sourceRoot":"","sources":["../src/PxButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG1E,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,gBAAgB,qBAkClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-buttonicon-native",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "Button icon component",
   "license": "MIT",
   "main": "src/index.ts",
@@ -16,10 +16,10 @@
     "@proximus/lavender-texts-native": "workspace:*"
   },
   "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"
@@ -35,5 +35,5 @@
       }
     }
   },
-  "gitHead": "d422a1d369000e1e249afb26de2cef08930c2407"
+  "gitHead": "6328f584529cb675f4a2ede8ad89f31e2b3c9ffb"
 }

package/src/PxButtonIcon.tsx

@@ -9,8 +9,8 @@ import {
 import { a11y, e2eID } from '@proximus/lavender-common-native';
 import { PxIcon } from '@proximus/lavender-icon-native';
 import React from 'react';
-import { Colors } from '@proximus/lavender-styling-native';
 import type { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
+import { ITheme, useTheme } from '@proximus/lavender-styling-native';
 
 export interface IButtonIconProps extends AccessibilityProps {
   iconName: IconName;
@@ -22,40 +22,43 @@ export interface IButtonIconProps extends AccessibilityProps {
   testID?: string;
 }
 
-function getBackgroundColor({ variant, inverted }: Partial<IButtonIconProps>) {
+function getBackgroundColor(
+  { variant, inverted }: Partial<IButtonIconProps>,
+  theme: ITheme
+) {
   if (!inverted) {
     if (variant === 'primary') {
-      return Colors.v8_1.shadesOfPurple.purple;
+      return theme.t('ColorBackgroundContainerPrimaryDefault');
     }
     if (variant === 'secondary') {
-      return Colors.v8_1.shadesOfPurple.purpleLight;
+      return theme.t('ColorBackgroundContainerSecondaryDefault');
     }
     return 'transparent';
   } else {
     if (variant === 'primary') {
-      return Colors.v8_1.white;
+      return theme.t('ColorBackgroundContainerPrimaryInverted');
     }
     if (variant === 'secondary') {
-      return Colors.v8_1.shadesOfGrey.dark320;
+      return theme.t('ColorBackgroundContainerSecondaryInverted');
     }
     return 'transparent';
   }
 }
 
-function getColor({ variant, inverted }: Partial<IButtonIconProps>) {
+function getColor(
+  { variant, inverted }: Partial<IButtonIconProps>,
+  theme: ITheme
+) {
   if (!inverted) {
     if (variant === 'primary') {
-      return Colors.v8_1.white;
+      return theme.t('ColorTextBrandInverted');
     }
-    if (variant === 'secondary') {
-      return Colors.v8_1.shadesOfPurple.purple;
-    }
-    return Colors.v8_1.shadesOfPurple.purple;
+    return theme.t('ColorTextBrandDefault');
   } else {
     if (variant === 'primary') {
-      return Colors.v8_1.shadesOfPurple.purple;
+      return theme.t('ColorTextBrandDefault');
     }
-    return Colors.v8_1.white;
+    return theme.t('ColorTextBrandInverted');
   }
 }
 
@@ -70,8 +73,9 @@ export function PxButtonIcon({
   accessibilityHint,
   inverted,
 }: IButtonIconProps) {
-  const backgroundColor = getBackgroundColor({ variant, inverted });
-  const color = getColor({ variant, inverted });
+  const { theme } = useTheme();
+  const backgroundColor = getBackgroundColor({ variant, inverted }, theme);
+  const color = getColor({ variant, inverted }, theme);
 
   return (
     <TouchableOpacity