add color gradients

Arize-ai · May 25, 2023 · a80a6bb · a80a6bb
1 parent 7c77747
commit a80a6bb
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 22 deletions.
diff --git a/src/colorPalette.tsx b/src/colorPalette.tsx
@@ -1,11 +1,41 @@
+export const purpleColors = {
+  purple100: '#EFE9FE',
+  purple20: '#E2D6FC',
+  purple300: '#D5C4FB',
+  purple400: '#C8B1FA',
+  purple500: '#BB9FF9',
+  purple600: '#AE8DF8',
+  purple700: '#A17AF7',
+  purple800: '#9468F6',
+  purple900: '#8755F4',
+  purple1000: '#7A43F3',
+  purple1100: '#6D30F2',
+  purple1200: '#5F1EF1',
+} as const;
+
+export const turquoiseColors = {
+  turquoise100: '#EBFEFF',
+  turquoise200: '#D8FEFE',
+  turquoise300: '#C4FDFE',
+  turquoise400: '#B1FDFD',
+  turquoise500: '#9EFCFD',
+  turquoise600: '#8BFBFD',
+  turquoise700: '#78FBFC',
+  turquoise800: '#64FAFC',
+  turquoise900: '#51FAFB',
+  turquoise1000: '#3EF9FB',
+  turquoise1100: '#2BF8FB',
+  turquoise1200: '#17F8FA',
+} as const;
+
 export const grayColors = {
-  gray900: '#181B1F',
-  gray800: '#1d2126',
-  gray700: '#23282e',
-  gray600: '#282e35',
-  gray500: '#2f353d',
-  gray400: '#3d434a',
-  gray300: '#4a5057',
-  gray200: '#585d64', // disabled text
   gray100: '#666b71',
+  gray200: '#585d64', // disabled text
+  gray300: '#4a5057',
+  gray400: '#3d434a',
+  gray500: '#2f353d',
+  gray600: '#282e35',
+  gray700: '#23282e',
+  gray800: '#1d2126',
+  gray900: '#181B1F',
 } as const;
diff --git a/src/index.tsx b/src/index.tsx
@@ -32,7 +32,7 @@ export * from './empty';
 export * from './contextualhelp';
 export * from './counter';
 export * from './layout';
-export { theme, designationColors } from './theme';
+export { theme, designationColors, colorPalette } from './theme';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */
 //   children?: ReactChild;

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -38,14 +38,15 @@ const labelColors = {
  * Colors to designate specific meaning (e.g. primary / reference)
  */
 export const designationColors = {
-  designationTurquoise: '#9efcfd',
-  designationPurple: '#ADA1FF',
+  designationTurquoise: colorPalette.turquoiseColors.turquoise500,
+  designationPurple: colorPalette.purpleColors.purple500,
 } as const;
 
+const { grayColors } = _colorPalette;
 export const theme = {
   colors: {
     ...arizeColors,
-    ..._colorPalette.grayColors,
+    ...grayColors,
     ...borderColors,
     statusInfo: '#72D9FF',
     statusSuccess: '#7EE787', // RGB independent success color

diff --git a/stories/Colors.stories.tsx b/stories/Colors.stories.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { theme, designationColors, Text, Heading } from '../src';
+import { theme, designationColors, colorPalette, Text, Heading } from '../src';
 import { Meta, Story } from '@storybook/react';
 // @ts-ignore
 import { withDesign } from 'storybook-addon-designs';
@@ -27,14 +27,38 @@ function Color({ color, name }) {
       <div
         style={{
           backgroundColor: color,
-          width: '100px',
-          height: '100px',
+          width: '60px',
+          height: '60px',
           marginRight: '10px',
           borderRadius: 3,
         }}
       />
-      <Text style={{ userSelect: 'none' }}>{color}</Text>
-      <Text>{name}</Text>
+      <Text style={{ userSelect: 'none' }} textSize="xsmall">
+        {color}
+      </Text>
+      <Text textSize="xsmall">{name}</Text>
+    </div>
+  );
+}
+
+function ColorGradient({ colorGradient }) {
+  console.log(colorGradient);
+  return (
+    <div
+      style={{
+        marginBottom: '5px',
+        marginTop: '5px',
+        display: 'flex',
+        flexDirection: 'row',
+      }}
+    >
+      <ul css={listStyle}>
+        {Object.keys(colorGradient).map((color, i) => (
+          <li key={i}>
+            <Color color={colorGradient[color]} name={color} />
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
@@ -56,6 +80,7 @@ function Colors() {
         <ul style={listStyle}>
           {colors.map((c, i) => (
             <li key={i}>
+              {c}
               <Color color={theme.components[key][c]} name={c} />
             </li>
           ))}
@@ -68,15 +93,26 @@ function Colors() {
     <section>
       <Heading>Designation Colors</Heading>
       <ul style={listStyle}>
-        {Object.keys(designationColors).map((c, i) => (
-          <li key={i}>
-            <Color color={designationColors[c]} name={c} />
-          </li>
-        ))}
+        {Object.keys(designationColors)
+          .filter(c => c.startsWith('designation'))
+          .map((c, i) => (
+            <li key={i}>
+              <Color color={designationColors[c]} name={c} />
+            </li>
+          ))}
       </ul>
     </section>
   );
 
+  const colorPaletteSection = (
+    <section>
+      <Heading>Color Palette</Heading>
+      <ColorGradient colorGradient={colorPalette.purpleColors} />
+      <ColorGradient colorGradient={colorPalette.turquoiseColors} />
+      <ColorGradient colorGradient={colorPalette.grayColors} />
+    </section>
+  );
+
   return (
     <main>
       <ul style={listStyle}>
@@ -85,6 +121,7 @@ function Colors() {
         ))}
       </ul>
       <br />
+      {colorPaletteSection}
       {designations}
       {components}
     </main>