chore(tools): split color tokens to separate layers (#42388)

tools/ui-components/src/color-system.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import colorList from './colors.css';
+
+// ---------------------------------------------------------- //
+//                      HELPER FUNCTIONS                      //
+// ---------------------------------------------------------- //
+// Transform colorList from an object to an array of objects
+const transformedColorList = Object.keys(colorList).map(colorName => ({
+  label: colorName.replace('--', ''),
+  value: colorList[colorName]
+}));
+
+// Get the background and text color values of each palette item
+const getPaletteItemStyle = color => {
+  const itemTextColor = color.label.substring(color.label.length - 2);
+
+  return {
+    backgroundColor: color.value,
+    // Extract the scale from the color label.
+    // If the scale is greater or equal to 50, use white text for the label; otherwise, use dark text.
+    color: parseInt(itemTextColor, 10) >= 50 ? '#ffffff' : '#0a0a23'
+  };
+};
+
+const getPaletteByColorName = name =>
+  transformedColorList.filter(color => color.label.includes(name));
+
+// ---------------------------------------------------------- //
+//                         COMPONENTS                         //
+// ---------------------------------------------------------- //
+const Palette = ({ colors }) => {
+  return (
+    <div className='inline-flex flex-col m-4 w-3/12'>
+      {colors.map(color => (
+        <div
+          className='flex items-center p-2 h-8'
+          key={color.label}
+          style={getPaletteItemStyle(color)}
+        >
+          {color.label}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Palette.propTypes = {
+  colors: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string
+    })
+  )
+};
+
+export const AllPalettes = () => {
+  return (
+    <>
+      <Palette colors={getPaletteByColorName('gray')} />
+      <Palette colors={getPaletteByColorName('purple')} />
+      <Palette colors={getPaletteByColorName('yellow')} />
+      <Palette colors={getPaletteByColorName('blue')} />
+      <Palette colors={getPaletteByColorName('green')} />
+      <Palette colors={getPaletteByColorName('red')} />
+    </>
+  );
+};