Add colors in data viz page

src/app/components/index.tsx

@@ -9,4 +9,4 @@ export * from './contributors';
 export * from './faq';
 export * from './typography';
 export * from './theme';
-export * from './foundations';
+export * from './visualizations';

src/app/components/visualizations/ColorRowBlock.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import colorpatch from '../../assets/visualizations/colorpatch.png';
+
+const Container = styled('div')({
+    width: '100%',
+    borderRadius: '12px',
+    backgroundColor: '#F7F8F8',
+    padding: '16px',
+    gap: '16px',
+    color: '#192024',
+    fontFamily: 'Open Sans',
+    fontSize: '20px;',
+    fontWeight: '600',
+});
+
+const ColsWrapper = styled('div')({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+});
+
+const Column = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    padding: '16px',
+});
+
+const ItemContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    width: '240px',
+    color: '#192024',
+    fontFamily: 'Open Sans',
+    fontSize: '14px',
+    fontWeight: '600',
+    padding: '16px',
+    gap: '8px',
+});
+
+const Circle = styled('div')<{ color: string }>(({ color }) => ({
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    backgroundColor: color,
+    marginRight: '8px',
+    backgroundImage: `url(${colorpatch})`,
+    backgroundSize: 'cover',
+}));
+
+const Label = styled('span')({
+    fontSize: '14px',
+});
+
+type Item = {
+    color: string;
+    label: string;
+};
+
+type BlockLabel = { label: string };
+
+type ColorRowBlockProps = {
+    col1: Item[];
+    col2: Item[];
+    label: BlockLabel[];
+};
+
+export const ColorRowBlock: React.FC<ColorRowBlockProps> = ({ col1, col2, label }) => (
+    <Container>
+        <span style={{ display: 'block', width: '200px' }}>{label.toString()}</span>
+        <ColsWrapper>
+            <Column>
+                {col1.map((item, index) => (
+                    <ItemContainer key={index}>
+                        <Circle color={item.color} />
+                        <Label>{item.label}</Label>
+                    </ItemContainer>
+                ))}
+            </Column>
+            <Column>
+                {col2.map((item, index) => (
+                    <ItemContainer key={index}>
+                        <Circle color={item.color} />
+                        <Label>{item.label}</Label>
+                    </ItemContainer>
+                ))}
+            </Column>
+        </ColsWrapper>
+    </Container>
+);
+
+export default ColorRowBlock;

src/app/components/foundations/index.ts → src/app/components/visualizations/index.ts

@@ -1 +1,2 @@
 export * from './BLCAccordian';
+export * from './ColorRowBlock';

src/docs/visualizations/colors.mdx

@@ -1 +1,121 @@
-# colors
+import { ColorRowBlock, ImageGrid } from '../../app/components';
+import Consistency from '../../app/assets/visualizations/consistency.png';
+import datarel1 from '../../app/assets/visualizations/datarel1.png';
+import datarel2 from '../../app/assets/visualizations/datarel2.png';
+import infohierarchy1 from '../../app/assets/visualizations/infohierarchy1.png';
+import infohierarchy2 from '../../app/assets/visualizations/infohierarchy2.png';
+
+# Colors in Data Visualization
+
+The colors used in Eaton visualizations are a subset of the Eaton color palette. 
+They are part of the  [Eaton Branding Guidelines](https://eaton.sharepoint.com/sites/CommunicationsBrandCenter), 
+and all charts added to Eaton interfaces follow the same rules.
+
+## Color Tokens
+
+Our data viz components make use of the color tokens listed in the Brightlayer UI sticker sheet. This allows 
+automatic switching between Light and Dark modes, and ensure your designs are always using standard Eaton 
+palettes. We offer token support to 5 of the 16 Branding colors.
+
+**Data Series** - these are the hues from the Branding palette that we recommend using for data viz, for having 
+the best contrast relationships and accessibility scores.
+
+These tokens are also ordered from 1 to 5, which is the preferred order of use:  
+\- If you need a single color Bar chart, we recommend using Data Series 1.  
+\- If your Line chart displays 3 lines, we recommend using Data Series 1, 2 and 3.
+
+If you want to use more than 5 hues in a single chart, feel free to use colors from the 
+[Branding palette](https://brightlayer-ui.github.io/style/color#branding-colors) at your discretion. For most 
+cases, we recommend using the 500 values.
+
+<ColorRowBlock
+label={'Data Series'}
+col1={[
+    { color: '#005EB8', label: 'Data Series 1' },
+    { color: '#FFC72C', label: 'Data Series 2' },
+    { color: '#ED8B00', label: 'Data Series 3' },
+    { color: '#B5BD00', label: 'Data Series 4' },
+    { color: '#4C8D2B', label: 'Data Series 5' },
+]} 
+col2={[
+    { color: '#FFFFFF', label: 'On Data Series 1' },
+    { color: '#524700', label: 'On Data Series 2' },
+    { color: '#4B2800', label: 'On Data Series 3' },
+    { color: '#524700', label: 'On Data Series 4' },
+    { color: '#FFFFFF', label: 'On Data Series 5' },
+]}
+/>
+
+**Axis and Grids** - These are the color tokens used on ancillary elements of charts, such as axis, grids and 
+reference lines.
+
+<ColorRowBlock
+label={'Axis and Grids'}
+col1={[
+    { color: '#192024', label: 'Axis' },
+]}
+col2={[
+    { color: '#74777F40', label: 'Grid Line' },
+]}
+/>
+
+**Underlays** - These are the color tokens used on the Underlay component, which conveys additional data insights 
+by outlining data ranges through the use of color.
+
+<ColorRowBlock
+label={'Underlays'}
+col1={[
+    { color: '#BA1B1A1A', label: 'Underlay Danger' },
+    { color: '#1989001A', label: 'Underlay Healthy' },
+    { color: '#71B2C914', label: 'Underlay Night' },
+]}
+col2={[
+    { color: '#FBE3651A', label: 'Underlay Warning' },
+    { color: '#FFC72C14', label: 'Underlay Day' },
+]}
+/>
+
+# Color Guidelines
+
+Color has a substantial influence on how quickly and accurately the audience derives meaning from data. When 
+used correctly, color can help communicate the following;
+
+## Consistency
+
+Using our recommended color palette ensures user experience is consistent across different products and systems. 
+Within a given product or dashboard, ensure that the meaning associated with each color is consistent through all 
+screens.
+
+<ImageGrid
+    images={[Consistency]}
+    regularWidth
+    caption='The meaning associated with Purple (EV Chargers) stays consistent throughout different charts'
+/>
+
+## Data Relationships
+
+Color can be used to communicate the relationship between data. Related data should have similar colors, and unrelated 
+data should have distinct colors.
+
+<ImageGrid
+    images={[datarel1, datarel2]}
+    captionsUnderImages={[
+        'Bar charts showing related \n data use a single color',
+        'Donut charts use distinct colors for quick understanding'
+    ]}
+/>
+
+# Information Hierarchy
+
+Color can effectively communicate the information hierarchy of data visuals by making the most important information 
+vibrant and eye-catching, and the less important information muted (Gray 200).
+
+
+
+<ImageGrid
+    images={[infohierarchy1, infohierarchy2]}
+    captionsUnderImages={[
+        'Line chart using a highlight to guide storytelling and help users focus on most relevant info',
+        'Bar chart with a single bar highlighted to represent This Week (past weeks are shown in grey for reference)'
+    ]}
+/>