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

tools/ui-components/src/button.css

@@ -32,5 +32,5 @@
 }
 
 .fcc-style {
-  @apply bg-darkGreen;
+  @apply bg-fccSecondary;
 }

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')} />
+    </>
+  );
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AllPalettes } from './color-system';
+
+const story = {
+  title: 'Design System/Color',
+  component: AllPalettes
+};
+
+export const ColorSystem = () => <AllPalettes />;
+
+export default story;

tools/ui-components/src/colors.css

@@ -0,0 +1,69 @@
+:root {
+  --gray00: #ffffff;
+  --gray05: #f5f6f7;
+  --gray10: #dfdfe2;
+  --gray15: #d0d0d5;
+  --gray45: #858591;
+  --gray75: #3b3b4f;
+  --gray80: #2a2a40;
+  --gray85: #1b1b32;
+  --gray90: #0a0a23;
+
+  --purple10: #dbb8ff;
+  --purple50: #9400d3;
+  --purple90: #5a01a7;
+
+  --yellow10: #ffc300;
+  --yellow20: #ffbf00;
+  --yellow50: #f1be32;
+  --yellow90: #4d3800;
+
+  --blue10: rgba(153, 201, 255, 0.3);
+  --blue20: rgba(0, 46, 173, 0.3);
+  --blue30: #99c9ff;
+  --blue50: #198eee;
+  --blue90: #002ead;
+
+  --green10: #acd157;
+  --green90: #00471b;
+
+  --red10: #ffadad;
+  --red20: #f8577c;
+  --red80: #f82153;
+  --red90: #850000;
+}
+
+:export {
+  --gray00: var(--gray00);
+  --gray05: var(--gray05);
+  --gray10: var(--gray10);
+  --gray15: var(--gray15);
+  --gray45: var(--gray45);
+  --gray75: var(--gray75);
+  --gray80: var(--gray80);
+  --gray85: var(--gray85);
+  --gray90: var(--gray90);
+
+  --purple10: var(--purple10);
+  --purple50: var(--purple50);
+  --purple90: var(--purple90);
+
+  --yellow10: var(--yellow10);
+  --yellow20: var(--yellow20);
+  --yellow50: var(--yellow50);
+  --yellow90: var(--yellow90);
+
+  --blue10: var(--blue10);
+  --blue20: var(--blue20);
+  --blue30: var(--blue30);
+  --blue50: var(--blue50);
+  --blue90: var(--blue90);
+
+  --green10: var(--green10);
+  --green90: var(--green90);
+
+  --red10: var(--red10);
+  --red20: var(--red20);
+  --red80: var(--red80);
+  --red90: var(--red90);
+}

tools/ui-components/src/global.css

@@ -1,3 +1,4 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+@import './colors';