Unify color components

docuilib/src/theme/ReactLiveScope/ColorsTable.tsx → docuilib/src/theme/ReactLiveScope/ColorsDoc.tsx

@@ -10,7 +10,7 @@ const {Toast} = Incubator;
 const TOKENS_CATEGORIES = ['Background', 'Text', 'Icon', 'Outline', 'System'];
 const TOKENS_ARRAYS = {};
 
-export default function ColorsTable() {
+export function ColorsTable() {
   const [selectedCategory, setSelectedCategory] = useState('Background');
   const [selectedSegment, setSelectedSegment] = useState(0);
   const [message, setMessage] = useState('');
@@ -186,7 +186,67 @@ export default function ColorsTable() {
   );
 }
 
+export function ColorsPalette() {
+  const SYSTEM_COLORS = ['grey', 'violet', 'blue', 'green', 'red', 'yellow', 'orange'];
+  const BASE_PALETTE = ['1', '5', '10', '20', '30', '40', '50', '60', '70', '80'];
+
+  const renderTints = color => {
+    const colorName = color.charAt(0).toUpperCase() + color.slice(1);
+    return (
+      <View row spread marginB-20>
+        {BASE_PALETTE.map((colorKey, index) => {
+          const colorProp = {[`bg-${color}${colorKey}`]: true};
+          const textColor = colorKey < 40 ? Colors.white : Colors.black;
+          return (
+            <View key={`${colorKey}-${index}`}>
+              <View key={`${colorKey}-${index}`} center style={styles.colorContainer} {...colorProp}>
+                <Text style={{color: textColor}}>{'AAA'}</Text>
+              </View>
+              <View>
+                <Text $textDisabled text80R>
+                  {colorName + ' ' + colorKey}
+                </Text>
+                <Text $textDisabled text80R>
+                  {Colors[`${color}${colorKey}`]}
+                </Text>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const renderColors = (colors, title) => {
+    return (
+      <View padding-page>
+        <Text text50 marginB-20>
+          {title}
+        </Text>
+
+        {_.map(colors, (color, index) => {
+          return (
+            <View key={`${color}-${index}`} center>
+              {renderTints(color)}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  return (
+    <View bg-grey80 flex padding-20 bg-$backgroundDefault>
+      {renderColors(SYSTEM_COLORS, 'SYSTEM COLORS')}
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
+  colorContainer: {
+    height: 90,
+    width: 90
+  },
   segmentedControlContainer: {
     width: '50%',
     marginVertical: Spacings.s2

docuilib/src/theme/ReactLiveScope/index.js

@@ -22,8 +22,7 @@ import SortableList from 'react-native-ui-lib/sortableList';
 import Switch from 'react-native-ui-lib/switch';
 import TextField from 'react-native-ui-lib/textField';
 import * as Playground from './Playground';
-import ColorsTable from './ColorsTable';
-import ColorsPalette from './ColorsPalette';
+import * as ColorsDoc from './ColorsDoc';
 
 Assets.loadAssetsGroup('icons.demo', {
   // chevronDown: require('../../assets/icons/chevronDown.png').default,
@@ -58,8 +57,7 @@ const ReactLiveScope = {
   /* Docs' utils and components */
   Data,
   Playground,
-  ColorsTable,
-  ColorsPalette,
+  ...ColorsDoc,
   /* UI Lib's components */
   ActionBar,
   Assets,