Version 0.3.1

Make design system colors overridable

changelog.md

@@ -5,7 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [0.3.1 - 2020-07-16]
+
+### Added
+
+- `utils/colors` added function to override design system colors
+
+### Changed
+
+- `components/PurchasePanel` replace price color to `colors.uma`
 
 ## [0.2.11 - 2020-07-09]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-urbi-ui",
-  "version": "0.2.11",
+  "version": "0.3.1",
   "description": "Urbi's UI library",
   "license": "Apache-2.0",
   "author": "Michele Bonazza <[email protected]> (https://github.com/micheleb)",

showcase/index.js

@@ -1,4 +1,7 @@
 import { AppRegistry } from 'react-native';
-import App from './App';
 
-AppRegistry.registerComponent('RNUrbiUI', () => App);
+// this is how you override colors throughout the app
+// import { overrideColors } from 'react-native-urbi-ui/utils/colors';
+// overrideColors({ brand: 'red', primary: 'tomato' });
+
+AppRegistry.registerComponent('RNUrbiUI', () => require('./App').default);

showcase/package.json

@@ -22,7 +22,7 @@
     "react-native-reanimated": "^1.4.0",
     "react-native-svg": "^12.1.0",
     "react-native-typography": "1.4.1",
-    "react-native-urbi-ui": "0.2.11",
+    "react-native-urbi-ui": "0.3.1",
     "react-native-vector-icons": "6.6.0",
     "react-navigation": "^4.0.10",
     "react-navigation-stack": "^1.9.4",

src/utils/colors.ts

@@ -1,10 +1,3 @@
-export const urbiPink = '#ec008b';
-export const urbiGrayPink = '#e090be';
-export const buttonGray = 'rgba(0, 0, 0, 0.6)';
-export const lightGray = 'rgba(0, 0, 0, 0.4)';
-export const brandSemitransparent = 'rgba(236, 0, 139, 0.5)';
-export const successSemitransparent = 'rgba(12, 199, 0, 0.6)';
-
 export const colors = {
   brand: '#ec008b',
   primary: '#467189',
@@ -32,6 +25,17 @@ export const colors = {
   subway: '#980056',
 };
 
+/**
+ * Replaces colors in the design system with the argument ones.
+ * Must be called at the very top of your index.js (or equivalent)
+ * @param overrides the colors that you want to override
+ */
+export const overrideColors = (overrides: Partial<typeof colors>) => {
+  Object.entries(overrides).forEach(([k, v]) => {
+    colors[k] = v;
+  });
+};
+
 export const hexToRgba = (hex: string, alpha: number) => {
   const { r, g, b } = hexToRgb(hex);
   return `rgba(${[r, g, b, alpha].join(',')})`;