Skip to content

Commit 9e9e7ab

Browse files
ethansharethanshar
committed
Improve general doc pages content
1 parent 45d619d commit 9e9e7ab

File tree

8 files changed

+323
-159
lines changed

8 files changed

+323
-159
lines changed

‎docs/foundation/assets.md

+8-9
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ sidebar_label: Assets
44
title: "Assets"
55
---
66

7-
Assets are a big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere.
8-
Load groups of assets and easily render them with the _Image_ component.
7+
Assets are fundamental building blocks in UI systems, encompassing icons, placeholders, and illustrations that enhance the user interface. The Assets system allows you to efficiently manage and render these resources using the _Image_ component.
98

109
```javascript
1110
import {Assets, Image} from 'react-native-ui-lib';
1211

12+
// Load a simple asset group
1313
Assets.loadAssetsGroup('icons', {
1414
icon1: require('icon1.png'),
1515
icon2: require('icon2.png'),
1616
icon3: require('icon3.png'),
1717
});
1818

19-
// or as a nested group to create your own hierarchy
19+
// Load nested asset groups for better organization
2020
Assets.loadAssetsGroup('illustrations.placeholders', {
2121
emptyCart: require('emptyCart.png'),
2222
emptyProduct: require('emptyProduct.png'),
@@ -25,15 +25,14 @@ Assets.loadAssetsGroup('illustrations.emptyStates.', {
2525
noMessages: require('noMessages.png'),
2626
noContacts: require('noContacts.png'),
2727
});
28-
2928
```
3029

31-
And use them like this
30+
Render assets in your components:
3231
```jsx
33-
// Use them with the Image component (our Image component)
34-
<Image assetName="icon1"/> // default assetGroup is "icons"
32+
// Using the Image component with asset references
33+
<Image assetName="icon1"/> // icons is the default assetGroup
3534
<Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>
3635

37-
// The old fashion way will work as well
36+
// Direct asset reference
3837
<Image source={Assets.icons.icon1}/>
39-
```
38+
```

‎docs/foundation/colors.md

+67-34
Original file line numberDiff line numberDiff line change
@@ -16,55 +16,88 @@ Our default library Colors object is using **System Colors** and **Design Tokens
1616
<TabItem value="design_tokens" label="Design Tokens" default>
1717
### Design Tokens
1818

19-
Design Tokens are contextual colors based on the system colors.
20-
The design token name structure is "$[property]-[semantic]-[weight]". (e.g $backgroundPrimaryHeavy, $textSuccessLight)
19+
Design Tokens provide semantic meaning to our color system by mapping contextual usage to system colors.
20+
Each token follows the naming pattern: `$[property][Semantic][Weight]`
2121

22-
<ColorsTable />
22+
For example:
23+
- `$backgroundPrimaryHeavy`: A heavy primary background color
24+
- `$textSuccess`: Success-themed text color
25+
- `$iconWarning`: Warning-themed icon color
2326

24-
- **Property** - The property we use this token for. The properties are:
27+
### Design Token Structure
2528

26-
- `background`
27-
- `text`
28-
- `icon`
29-
- `outline`
29+
Design tokens follow a structured naming convention: `$[property][Semantic][Weight]`, where:
3030

31-
- **Semantic** - the meaning of the color, what is the message that we want to pass using this color. The semantics are:
31+
#### Property
32+
Defines the UI element the token applies to:
33+
- `background` - Background colors
34+
- `text` - Text colors
35+
- `icon` - Icon colors
36+
- `outline` - Border/outline colors
3237

33-
- `neutral`
34-
- `primary` - the primary color of the app, means, blue for Spaces app and green for Fit app.
35-
- `general`
36-
- `success`
37-
- `warning`
38-
- `danger`
39-
- `disabled`
40-
- `inverted`
41-
- `default`
38+
#### Semantic
39+
Represents the contextual meaning:
40+
- `neutral` - Neutral/default state
41+
- `primary` - App's primary brand color
42+
- `general` - General purpose
43+
- `success` - Positive/success states
44+
- `warning` - Warning/caution states
45+
- `danger` - Error/danger states
46+
- `disabled` - Disabled state
47+
- `inverted` - Reversed/contrasting colors
48+
- `default` - Default state
4249

43-
- **Weight** - the weight of the color (optional). The weights are:
44-
- `light`
45-
- `medium`
46-
- `heavy`
50+
#### Weight (Optional)
51+
Indicates the color intensity:
52+
- `light` - Lighter variation
53+
- `medium` - Medium intensity
54+
- `heavy` - Heavier/darker variation
4755

48-
So, for example, a valid token can be: `$backgroundPrimaryHeavy` or `$textSuccess`.
49-
A full list of our design tokens can be found here -
56+
Examples:
57+
- `$backgroundPrimaryHeavy` - Dark variant of primary background
58+
- `$textSuccess` - Success state text color
59+
- `$iconWarning` - Warning state icon color
5060

51-
### Dark Mode Support
61+
View all available design tokens in our [token definition files](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokens.ts).
5262

53-
By using design tokens, your getting dark mode support out of the box!
54-
Each token is mapped to a single system color in light mode and to a (usually different) single system color in dark mode.
55-
For example, `$textSuccess` is mapped to `green10` in light (deafult) mode, and to `green60` in dark mode.
56-
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).
63+
<ColorsTable />
5764

58-
### Add Your Own Design Tokens
5965

60-
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.
61-
To generate the design tokens, based on your app primary color and load them automatically into the `Colors` object, use:
66+
### Dark Mode Integration
67+
68+
Design tokens provide seamless dark mode support through automatic color mapping. Each token maps to appropriate system colors for both light and dark themes:
69+
70+
```javascript
71+
// Example mapping
72+
$textSuccess → green10 (light mode)
73+
$textSuccess → green60 (dark mode)
74+
```
75+
76+
View the complete token mappings:
77+
- [Light mode tokens](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokens.ts)
78+
- [Dark mode tokens](https://github.com/wix/react-native-ui-lib/blob/master/src/style/designTokensDM.ts)
79+
80+
### Custom Design Tokens
81+
82+
Customize the design system by:
83+
84+
1. Using `loadSchemes()` to override existing tokens
85+
2. Generating tokens from your primary brand color:
6286

6387
```javascript
64-
Colors.loadDesignTokens({primaryColor: <your primary color>});
88+
Colors.loadSchemes({
89+
light: {
90+
$textDefault: '#20303C'
91+
},
92+
dark: {
93+
$textDefault: '#F8F8F8'
94+
}
95+
});
6596
```
6697

67-
This method will update all the `primary` tokens to be based on your app primary color, both in light and dark mode.
98+
This defines the default text color token for both light and dark modes.
99+
100+
68101
</TabItem>
69102
<TabItem value="system_colors" label="System Colors">
70103

‎docs/foundation/modifiers.md

+121-60
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,32 @@ sidebar_label: Modifiers
44
title: "Modifiers"
55
---
66

7-
As you have probably noticed already, we translate our style presets into modifiers.
8-
**Modifiers** help you create a stunning UI easily and quickly.
9-
10-
**[!IMPORTANT]**
11-
Make sure to use modifiers only on UILib components, as some modifiers can cause issues on Android when used on React Native components directly.
7+
Discover the power of our style presets transformed into modifiers.
8+
**Modifiers** are a powerful tool designed to streamline UI development, making it both efficient and elegant.
129

1310
## Layout Modifiers
14-
Use our alignment properties to quickly position the content of your view without getting confused calculating all those flex rules.
15-
- flex - apply `flex:1` on a view
16-
- flex-[value] - When you want to control the flex value
17-
- flexS - FlexShrink
18-
- flexG - FlexGrow
19-
- left
20-
- top
21-
- right
22-
- bottom
23-
- row - change direction to row (default is column)
24-
- center
25-
- centerH - center content horizontally
26-
- centerV - center content vertically
27-
- spread - spread content (similar to `space-between`)
28-
29-
! Notice that the layout modifiers affect the View's children
11+
Streamline your layout design with our intuitive alignment properties. These modifiers simplify view positioning without the complexity of manual flex calculations.
12+
13+
### Basic Flex Properties
14+
- `flex` - Apply `flex: 1` to expand a view
15+
- `flex-[value]` - Set a specific flex value
16+
- `flexS` - Enable flex shrink
17+
- `flexG` - Enable flex grow
18+
19+
### Alignment Properties
20+
- `left` - Align content to the left
21+
- `right` - Align content to the right
22+
- `top` - Align content to the top
23+
- `bottom` - Align content to the bottom
24+
- `center` - Center content both horizontally and vertically
25+
- `centerH` - Center content horizontally
26+
- `centerV` - Center content vertically
27+
28+
### Layout Direction
29+
- `row` - Set flex direction to row (default is column)
30+
- `spread` - Distribute content evenly (equivalent to `space-between`)
31+
32+
> Note: Layout modifiers affect the positioning of the View's children elements
3033
3134
```jsx
3235
<View flex left>
@@ -52,68 +55,126 @@ Use our alignment properties to quickly position the content of your view withou
5255
<img src="https://cloud.githubusercontent.com/assets/1780255/24798566/4de91efc-1b9f-11e7-9974-e06e3daa7c63.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798569/50dc99a4-1b9f-11e7-8231-fbcbb139a010.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798571/52766d08-1b9f-11e7-95a3-b2b262e81170.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798572/545b7abe-1b9f-11e7-9098-409ceee6ff22.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798575/55e3c4f4-1b9f-11e7-998d-7986a038abb6.png" width="160"/>
5356

5457
## Spacing Modifiers
55-
It's always important to use your margins and paddings correctly, and that's also easier to do with modifiers:
56-
57-
- padding-[value] - will add padding to all corners (e.g. padding-30 will add 30 pt of padding)
58-
- paddingL-[value] - Left padding
59-
- paddingT-[value] - Top padding
60-
- paddingR-[value] - Right padding
61-
- paddingB-[value] - Bottom padding
62-
- paddingH-[value] - Horizontal padding
63-
- paddingV-[value] - Vertical padding
58+
Enhance your layout consistency with our intuitive spacing modifiers for margins and paddings:
59+
60+
### Padding Modifiers
61+
Apply padding with simple, descriptive modifiers:
62+
- `padding-[value]` - Uniform padding on all sides
63+
- `paddingL-[value]` - Left padding
64+
- `paddingT-[value]` - Top padding
65+
- `paddingR-[value]` - Right padding
66+
- `paddingB-[value]` - Bottom padding
67+
- `paddingH-[value]` - Horizontal padding (left + right)
68+
- `paddingV-[value]` - Vertical padding (top + bottom)
69+
6470
```jsx
65-
<View paddingV-20 paddingH-30>...</View>
71+
<View paddingV-20 paddingH-30>
72+
{/* Content with vertical padding of 20 and horizontal padding of 30 */}
73+
</View>
6674
```
6775

68-
- margin-[value]
69-
- marginL-[value] - Left margin
70-
- marginT-[value] - Top margin
71-
- marginR-[value] - Right margin
72-
- marginB-[value] - Bottom margin
73-
- marginH-[value] - Horizontal margin
74-
- marginV-[value] - Vertical margin
76+
### Margin Modifiers
77+
Control spacing between elements with margin modifiers:
78+
- `margin-[value]` - Uniform margin on all sides
79+
- `marginL-[value]` - Left margin
80+
- `marginT-[value]` - Top margin
81+
- `marginR-[value]` - Right margin
82+
- `marginB-[value]` - Bottom margin
83+
- `marginH-[value]` - Horizontal margin (left + right)
84+
- `marginV-[value]` - Vertical margin (top + bottom)
7585

7686
```jsx
77-
<View marginT-5 marginB-10>...</View>
87+
<View marginT-5 marginB-10>
88+
{/* Content with top margin of 5 and bottom margin of 10 */}
89+
</View>
7890
```
7991

80-
! padding and margin modifiers can also take [Spacing](https://github.com/wix/react-native-ui-lib/blob/master/src/style/spacings.ts) constants.
92+
### Gap Modifiers
93+
Control the spacing between child elements in a container:
94+
- `gap-[value]` - Uniform gap between all children
95+
96+
```jsx
97+
<View row gap-10>
98+
<Button label="First" />
99+
<Button label="Second" />
100+
<Button label="Third" />
101+
</View>
102+
```
103+
104+
These modifiers are particularly useful for creating evenly spaced layouts without manually adding margins to individual elements.
105+
106+
> **Note**: Spacing modifiers can use your app's predefined spacing presets for consistent design. These presets are defined in our `spacings.ts` [file](https://github.com/wix/react-native-ui-lib/blob/master/src/style/spacings.ts) and allow for uniform spacing patterns throughout your application.
107+
108+
81109
```jsx
82-
<View margin-s5 padding-s2>...</View>
110+
<View margin-s5 padding-s2>
111+
{/* Using preset spacing values */}
112+
</View>
83113
```
114+
115+
84116
## Position Modifiers
85-
Use the position modifiers to quickly set an absolute position for your views.
86-
- `abs` will set the absolute position on your View
87-
- `absL`, `absT`, `absR`, `absB` - set the absolute position and align to Left, Top, Right, Bottom accordingly
88-
- `absH` and `absV` - position absolute and stretch horizontally or vertically
89-
- `absF` will set the absolute position and fill the parent view (similar to StyleSheet.absoluteFillObject)
117+
Easily control component positioning with our absolute position modifiers:
90118

91-
## Styling Modifiers
92-
The last type of modifiers is for styling your components
119+
### Basic Positioning
120+
- `abs` - Apply absolute positioning to a component
93121

94-
- [colorKey] - Controls the color of text components
95-
- background-[colorKey] (or bg-[colorKey]) - Background color
122+
### Edge Alignment
123+
- `absL` - Position absolutely and align to the left edge
124+
- `absT` - Position absolutely and align to the top edge
125+
- `absR` - Position absolutely and align to the right edge
126+
- `absB` - Position absolutely and align to the bottom edge
127+
128+
### Stretch Options
129+
- `absH` - Position absolutely and stretch horizontally
130+
- `absV` - Position absolutely and stretch vertically
131+
- `absF` - Position absolutely and fill the entire parent container (equivalent to `StyleSheet.absoluteFillObject`)
96132

97133
```jsx
98-
<Text blue30>...</Text>
99-
<View bg-grey70>...</View>
100-
<TouchableOpacity bg-red30/>
134+
<View absL>
135+
<Text>Left-aligned absolute content</Text>
136+
</View>
137+
138+
<View absF>
139+
<Text>Full-screen absolute content</Text>
140+
</View>
101141
```
102142

103-
- [typographyKey] - Controls the typography of text components
143+
## Style Modifiers
144+
Enhance your components' visual appearance with our style modifiers:
145+
146+
### Color Modifiers
147+
Apply colors to text and backgrounds:
148+
- `[colorKey]` - Set text color (for Text components)
149+
- `background-[colorKey]` or `bg-[colorKey]` - Set background color
150+
104151
```jsx
105-
<Text text70>...</Text>
106-
<TextInput text80/>
152+
<Text blue30>Blue text</Text>
153+
<View bg-grey70>Grey background</View>
154+
<TouchableOpacity bg-red30>Red button</TouchableOpacity>
107155
```
108156

109-
- br[borderRadiusKey] - Set the border radius for the view (e.g. `br10`, `br20`, .., `br60`)
157+
### Typography Modifiers
158+
Control text styling with typography presets:
159+
- `[typographyKey]` - Apply typography presets to text elements
160+
110161
```jsx
111-
<View br40>...</View>
162+
<Text text70>Styled text</Text>
163+
<TextInput text80 />
112164
```
113165

166+
### Border Radius Modifiers
167+
Add rounded corners with predefined sizes:
168+
- `br[size]` - Apply border radius (sizes: 10, 20, ..., 60)
169+
170+
```jsx
171+
<View br40>
172+
<Text>Rounded container</Text>
173+
</View>
174+
```
114175

115-
! all styling modifiers are based on our [`Colors` & `Typography` presets](/docs/foundation/style).
116-
You can load your own presets and use them as modifiers.
176+
> **Note**: All style modifiers are based on the [`Colors` & `Typography` presets](/docs/foundation/style).
177+
> You can customize these presets by loading your own design tokens.
117178
118179

119180

0 commit comments

Comments
 (0)