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';

tools/ui-components/tailwind.config.js

@@ -3,40 +3,7 @@ module.exports = {
   darkMode: false,
   theme: {
     colors: {
-      // Configure the color palette here
-      // Layout Colors
-      gray00: '#ffffff',
-      gray05: '#f5f6f7',
-      gray10: '#dfdfe2',
-      gray15: '#d0d0d5',
-      gray45: '#858591',
-      gray75: '#3b3b4f',
-      gray80: '#2a2a40',
-      gray85: '#1b1b32',
-      gray90: '#0a0a23',
-      // Accent Colors - Primary
-      blue: '#99c9ff',
-      green: '#acd157',
-      purple: '#dbb8ff',
-      yellow: '#f1be32',
-      // Accent Colors - Secondary
-      darkBlue: '#002ead',
-      darkGreen: '#00471b',
-      darkPurple: '#5a01a7',
-      darkYellow: '#4d3800',
-      // Colors in variables.css
-      blueMid: '#198eee',
-      blueTranslucent: 'rgba(0, 46, 173, 0.3)',
-      blueTranslucentDark: 'rgba(153, 201, 255, 0.3)',
-      editorBackgroundDark: '#2a2b40',
-      loveDark: '#f82153',
-      darkRed: '#850000',
-      editorBackground: '#fffffe',
-      love: '#f8577c',
-      purpleMid: '#9400d3',
-      red: '#ffadad',
-      yellowGold: '#ffbf00',
-      yellowLight: '#ffc300'
+      fccSecondary: 'var(--green90)'
     }
   },
   variants: {