Colors page - design tokens section

docs/foundation/colors.md

@@ -1,62 +1,91 @@
 ---
 sidebar_position: 2
 sidebar_label: Colors
-title: "Colors"
+title: 'Colors'
 ---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import {ColorsTable, ColorsPalette} from '@site/src/components/ColorsSection'
+
 ## 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).
+Our default library Colors object is using **System Colors** and **Design Tokens**.
 
+<Tabs>
+<TabItem value="design_tokens" label="Design Tokens" default>
 ### 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`
+The design token name structure is "$[property]-[semantic]-[weight]". (e.g $backgroundPrimaryHeavy, $textSuccessLight)
+
+<ColorsTable />
+
+- **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 -  
+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).
 
 ### 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
 Colors.loadDesignTokens({primaryColor: <your primary color>});
 ```
+
 This method will update all the `primary` tokens to be based on your app primary color, both in light and dark mode.
+</TabItem>
+<TabItem value="system_colors" label="System Colors">
+
+### System Colors
+
+The System Colors are all the colors we use in our design system. (red30, grey10 and so on).
+
+<ColorsPalette />
+
+</TabItem>
+<TabItem value="accessibility" label="Accessibility">
+</TabItem>
+
+<TabItem value="dev" label="Dev">
 
 ### loadColors
+
 Load a set of colors to be used in the app.  
 These colors will be accessible through the Colors class and as modifiers.
 usage:
+
 ```javascript
 import {Colors} from 'react-native-ui-lib';
 
@@ -77,8 +106,9 @@ 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 feature works hand in hand with our modifiers
 This method also supports adding and overriding design tokens:
 
 ```js
@@ -90,7 +120,7 @@ Colors.loadSchemes({
     mountainForeground: Colors.green30,
     mountainBackground: Colors.green50,
     $backgroundSuccess: Colors.green40,
-    $backgroundSuccessLight: Colors.green70 
+    $backgroundSuccessLight: Colors.green70
   },
   dark: {
     screenBG: Colors.grey10,
@@ -99,7 +129,7 @@ Colors.loadSchemes({
     mountainForeground: Colors.violet10,
     mountainBackground: Colors.violet20,
     $backgroundSuccess: Colors.green40,
-    $backgroundSuccessLight: Colors.green20 
+    $backgroundSuccessLight: Colors.green20
   }
 });
 ```
@@ -108,17 +138,20 @@ Colors.loadSchemes({
 <View flex padding-page bg-screenBG>
   <Text h1 textColor>
     Dark Mode
-  </Text>      
+  </Text>
 </View>
 ```
-  
+
 **Note:** for dark mode support please add the following `require` in your app, in an initial place, before importing `react-native-ui-lib` at the first time.
+
 ```
 require('react-native-ui-lib/config').setConfig({appScheme: 'default'});
 ```
-  
+
 ### rgba
+
 usage:
+
 ```js
 import {Colors} from 'react-native-ui-lib';
 
@@ -127,7 +160,9 @@ Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'
 ```
 
 ### getColorTint
+
 usage:
+
 ```js
 import {Colors} from 'react-native-ui-lib';
 
@@ -136,10 +171,15 @@ Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenera
 ```
 
 ### isDark
+
 returns `true` if a color is considered dark (bright colors will return `false`)
+
 ```js
 import {Colors} from 'react-native-ui-lib';
 
 Colors.isDark(Colors.grey10); // true
 Colors.isDark(Colors.grey80); // false
 ```
+
+</TabItem>
+</Tabs>

docuilib/package.json

@@ -20,6 +20,7 @@
     "@docusaurus/preset-classic": "^3.5.2",
     "@docusaurus/theme-live-codeblock": "^3.5.2",
     "@mdx-js/mdx": "^3.0.1",
+    "@react-native-clipboard/clipboard": "^1.14.2",
     "@svgr/webpack": "^5.5.0",
     "classnames": "^2.3.1",
     "clsx": "^1.1.1",
@@ -31,19 +32,19 @@
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native-ui-lib": "7.32.0-snapshot.5506",
-    "react-native-linear-gradient": "2.6.2",
-    "react-native-reanimated": "^3.15.1",
-    "react-native-shimmer-placeholder": "^2.0.9",
     "@docusaurus/module-type-aliases": "^3.5.2",
     "@docusaurus/types": "^3.5.2",
     "@tsconfig/docusaurus": "^1.0.4",
     "@types/react": "^17.0.14",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
     "babel-plugin-react-native-web": "^0.19.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native-linear-gradient": "2.6.2",
+    "react-native-reanimated": "^3.15.1",
+    "react-native-shimmer-placeholder": "^2.0.9",
+    "react-native-ui-lib": "7.32.0-snapshot.5506",
     "shell-utils": "^1.0.10",
     "typescript": "~5.2.2"
   },