From 1149f39f0500b934a41b31f419a4b915688317be Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 25 May 2023 12:17:50 -0600
Subject: [PATCH] WIP

---
 src/content/Text.tsx       | 15 +++++++++++++++
 src/content/types.ts       |  3 +++
 src/types/core.ts          |  4 ++++
 stories/Colors.stories.tsx | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+)

diff --git a/src/content/Text.tsx b/src/content/Text.tsx
index a58fc053..012efa49 100644
--- a/src/content/Text.tsx
+++ b/src/content/Text.tsx
@@ -5,10 +5,17 @@ import React, {
   CSSProperties,
 } from 'react';
 import { css } from '@emotion/react';
+<<<<<<< HEAD
 import { ColorValue, DOMProps, DOMRef, StyleProps } from '../types';
 import { useDOMRef } from '../utils/useDOMRef';
 import theme, { designationColors } from '../theme';
 import { TextColor, Size, TextElementType, Weight } from './types';
+=======
+import { DOMRef, TextColorValue } from '../types';
+import { useDOMRef } from '../utils/useDOMRef';
+import theme from '../theme';
+import { Size, TextElementType, Weight } from './types';
+>>>>>>> 2afd5d8 (WIP)
 import { textSizeCSS, textWeightCSS } from './styles';
 import { filterDOMProps } from '@react-aria/utils';
 import { colorValue, useStyleProps } from '../utils';
@@ -37,12 +44,16 @@ export interface TextProps extends DOMProps, StyleProps {
    * The color of the text
    * @default 'white90'
    */
+<<<<<<< HEAD
   color?: TextColor;
   /**
    * The font style
    * @default 'normal'
    */
   fontStyle?: CSSProperties['fontStyle'];
+=======
+  color?: TextColorValue;
+>>>>>>> 2afd5d8 (WIP)
   /**
    * The disabled state of the text
    */
@@ -53,6 +64,7 @@ export interface TextProps extends DOMProps, StyleProps {
   className?: string;
 }
 
+<<<<<<< HEAD
 const getTextColor = (color: TextColor) => {
   if (color.startsWith('designation')) {
     // Return the designation color (e.x. the main primary / reference colors)
@@ -65,6 +77,9 @@ const getTextColor = (color: TextColor) => {
   return colorValue(color as ColorValue);
 };
 const textCSS = (color: TextColor) => css`
+=======
+const textCSS = (color: TextColorValue) => css`
+>>>>>>> 2afd5d8 (WIP)
   /* default to no margin */
   margin: 0;
   color: ${getTextColor(color)};
diff --git a/src/content/types.ts b/src/content/types.ts
index 6fca3e64..fc429b32 100644
--- a/src/content/types.ts
+++ b/src/content/types.ts
@@ -11,6 +11,7 @@ export type Size =
 
 export type Weight = 'heavy' | 'normal';
 
+<<<<<<< HEAD
 export type TextColor =
   | 'white90'
   | 'white70'
@@ -19,6 +20,8 @@ export type TextColor =
   | DesignationColorValue
   | ColorValue;
 
+=======
+>>>>>>> 2afd5d8 (WIP)
 export type TextElementType =
   | 'span'
   | 'h1'
diff --git a/src/types/core.ts b/src/types/core.ts
index f6ef1917..e7533c2a 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -300,6 +300,10 @@ export type ColorValue =
   | 'warning'
   | 'danger';
 
+<<<<<<< HEAD
 export type DesignationColorValue =
   | 'designationPurple'
   | 'designationTurquoise';
+=======
+export type TextColorValue = 'white90' | 'white70' | 'white30' | 'inherit';
+>>>>>>> 2afd5d8 (WIP)
diff --git a/stories/Colors.stories.tsx b/stories/Colors.stories.tsx
index 1520d8b4..1d421d1e 100644
--- a/stories/Colors.stories.tsx
+++ b/stories/Colors.stories.tsx
@@ -85,14 +85,17 @@ function Colors() {
             </li>
           ))}
         </ul>
+        z
       </section>
     );
   });
 
+  const designationColorKeys = Object.keys(designationColors);
   const designations = (
     <section>
       <Heading>Designation Colors</Heading>
       <ul style={listStyle}>
+<<<<<<< HEAD
         {Object.keys(designationColors)
           .filter(c => c.startsWith('designation'))
           .map((c, i) => (
@@ -100,16 +103,44 @@ function Colors() {
               <Color color={designationColors[c]} name={c} />
             </li>
           ))}
+=======
+        {designationColorKeys.map((c, i) => (
+          <li key={i}>
+            <Color color={designationColors[c]} name={c} />
+          </li>
+        ))}
+>>>>>>> 2afd5d8 (WIP)
       </ul>
     </section>
   );
 
+<<<<<<< HEAD
   const colorPaletteSection = (
     <section>
       <Heading>Color Palette</Heading>
       <ColorGradient colorGradient={colorPalette.purpleColors} />
       <ColorGradient colorGradient={colorPalette.turquoiseColors} />
       <ColorGradient colorGradient={colorPalette.grayColors} />
+=======
+  const colorGroups = Object.keys(colorPalette);
+  const colorPaletteEl = (
+    <section>
+      <Heading>Color Palette</Heading>
+      {/* <div>
+        {colorGroups.map((colorGroup, i) => {
+          return (
+            <div>
+              {colorGroup}
+              <ul>
+                {colorPalette[colorGroup].map(color => (
+                  <li>{color}</li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div> */}
+>>>>>>> 2afd5d8 (WIP)
     </section>
   );
 
@@ -123,6 +154,7 @@ function Colors() {
       <br />
       {colorPaletteSection}
       {designations}
+      {colorPaletteEl}
       {components}
     </main>
   );