From 7ef615644ca4788d10ecfa8b088634e477e6868e Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Wed, 15 Feb 2023 18:14:38 +0200 Subject: [PATCH 1/3] update colors docs --- docs/foundation/colors.md | 48 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/docs/foundation/colors.md b/docs/foundation/colors.md index 0495dd2c0c..fbd48e153a 100644 --- a/docs/foundation/colors.md +++ b/docs/foundation/colors.md @@ -3,6 +3,54 @@ sidebar_position: 2 sidebar_label: Colors title: "Colors" --- +## Colors +Our default library Colors object is using **System Colors** and **Design Tokens**. + +### System Colors +The System Colors are all the colors we use in our design system. (red30, grey10 and so on). + +### Design Tokens +Design Tokens are contextual colors based on the system colors. +The design token name structure is "$[property]-[semantic]-[weight]". (e.g $backgroundPrimaryHeavy, $textSuccessLight) +* **Property** - The property we use this token for. The properties are: + * `background` + * `text` + * `icon` + * `outline` + + +* **Semantic** - the meaning of the color, what is the message that we want to pass using this color. The semantics are: + * `neutral` + * `primary` - the primary color of the app, means, blue for Spaces app and green for Fit app. + * `general` + * `success` + * `warning` + * `danger` + * `disabled` + * `inverted` + * `default` + + +* **Weight** - the weight of the color (optional). The weights are: + * `light` + * `medium` + * `heavy` + +So, for example, a valid token can be: `$backgroundPrimaryHeavy` or `$textSuccess`. +A full list of our design tokens can be found here - + +### Dark Mode Support +By using design tokens, your getting dark mode support out of the box! +Each token is mapped to a single system color in light mode and to a (usually different) single system color in dark mode. +For example, `$textSuccess` is mapped to `green10` in light (deafult) mode, and to `green60` in dark mode. +All the design tokens and their mapping in light mode can be found [here](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokens.ts), dark mode mapping can be found [here](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokensDM.ts). + +### Generate Your Own Design Tokens +To generate the design tokens, based on your app primary color, use: +```javascript +Colros.loadDesignTokens({primaryColor: }); +``` +This method will update all the `primary` tokens to be based on your app primary color, both in light and dark mode. ### loadColors Load a set of colors to be used in the app. From 77147d4ed139f0e476e09c402c22d1c523ed838d Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Thu, 16 Feb 2023 10:30:17 +0200 Subject: [PATCH 2/3] improve docs --- docs/foundation/colors.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/foundation/colors.md b/docs/foundation/colors.md index fbd48e153a..e1e52f13a7 100644 --- a/docs/foundation/colors.md +++ b/docs/foundation/colors.md @@ -45,8 +45,9 @@ Each token is mapped to a single system color in light mode and to a (usually di For example, `$textSuccess` is mapped to `green10` in light (deafult) mode, and to `green60` in dark mode. All the design tokens and their mapping in light mode can be found [here](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokens.ts), dark mode mapping can be found [here](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokensDM.ts). -### Generate Your Own Design Tokens -To generate the design tokens, based on your app primary color, use: +### Add Your Own Design Tokens +Adding or overriding your own design tokens can be done by using the [loadSchemes](https://wix.github.io/react-native-ui-lib/docs/foundation/colors#loadschemes) method. +To generate the design tokens, based on your app primary color and load them automatically into the `Colors` object, use: ```javascript Colros.loadDesignTokens({primaryColor: }); ``` @@ -78,6 +79,7 @@ import {View, Text, Colors} from 'react-native-ui-lib'; ### loadSchemes Load a set of scheme colors to support dark/light mode. This feature works hand in hand with our modifiers +This method also supports adding and overriding design tokens: ```js Colors.loadSchemes({ @@ -86,14 +88,18 @@ Colors.loadSchemes({ textColor: Colors.grey10, moonOrSun: Colors.yellow30, mountainForeground: Colors.green30, - mountainBackground: Colors.green50 + mountainBackground: Colors.green50, + $backgroundSuccess: Colors.green40 + $backgroundSuccessLight: Colors.green70 }, dark: { screenBG: Colors.grey10, textColor: Colors.white, moonOrSun: Colors.grey80, mountainForeground: Colors.violet10, - mountainBackground: Colors.violet20 + mountainBackground: Colors.violet20, + $backgroundSuccess: Colors.green40 + $backgroundSuccessLight: Colors.green20 } }); ``` From 6ad971969b0a06674dfd617a8dc968be6e0d25f5 Mon Sep 17 00:00:00 2001 From: Lidor Dafna Date: Thu, 16 Feb 2023 10:31:04 +0200 Subject: [PATCH 3/3] add missing comma --- docs/foundation/colors.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/foundation/colors.md b/docs/foundation/colors.md index e1e52f13a7..f0c5c53c73 100644 --- a/docs/foundation/colors.md +++ b/docs/foundation/colors.md @@ -89,7 +89,7 @@ Colors.loadSchemes({ moonOrSun: Colors.yellow30, mountainForeground: Colors.green30, mountainBackground: Colors.green50, - $backgroundSuccess: Colors.green40 + $backgroundSuccess: Colors.green40, $backgroundSuccessLight: Colors.green70 }, dark: { @@ -98,7 +98,7 @@ Colors.loadSchemes({ moonOrSun: Colors.grey80, mountainForeground: Colors.violet10, mountainBackground: Colors.violet20, - $backgroundSuccess: Colors.green40 + $backgroundSuccess: Colors.green40, $backgroundSuccessLight: Colors.green20 } });