feat: text designation colors, fontStyle (#130)

* feat: text designation colors, fontStyle * comment out colors * comment out colors * fix extension * add color gradients
Arize-ai · May 26, 2023 · fc04b6a · fc04b6a
1 parent eaeb23c
commit fc04b6a
Show file tree

Hide file tree

Showing 9 changed files with 196 additions and 49 deletions.
diff --git a/src/colorPalette.tsx b/src/colorPalette.tsx
@@ -0,0 +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 = {
+  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/content/Text.tsx b/src/content/Text.tsx
@@ -1,10 +1,17 @@
-import React, { ElementType, ReactNode, forwardRef, HTMLProps } from 'react';
+import React, {
+  ElementType,
+  ReactNode,
+  forwardRef,
+  HTMLProps,
+  CSSProperties,
+} from 'react';
 import { css } from '@emotion/react';
 import { DOMRef } from '../types';
 import { useDOMRef } from '../utils/useDOMRef';
-import theme from '../theme';
-import { Color, Size, TextElementType, Weight } from './types';
+import theme, { designationColors } from '../theme';
+import { TextColor, Size, TextElementType, Weight } from './types';
 import { textSizeCSS, textWeightCSS } from './styles';
+import { filterDOMProps } from '@react-aria/utils';
 
 export interface TextProps extends HTMLProps<HTMLSpanElement> {
   /**
@@ -30,7 +37,12 @@ export interface TextProps extends HTMLProps<HTMLSpanElement> {
    * The color of the text
    * @default 'white90'
    */
-  color?: Color;
+  color?: TextColor;
+  /**
+   * The font style
+   * @default 'normal'
+   */
+  fontStyle?: CSSProperties['fontStyle'];
   /**
    * The disabled state of the text
    */
@@ -41,10 +53,17 @@ export interface TextProps extends HTMLProps<HTMLSpanElement> {
   className?: string;
 }
 
-const textCSS = (color: Color) => css`
+const getTextColor = (color: TextColor) => {
+  if (color.startsWith('designation')) {
+    // Return the designation color (e.x. the main primary / reference colors)
+    return designationColors[color];
+  }
+  return theme.textColors[color];
+};
+const textCSS = (color: TextColor) => css`
   /* default to no margin */
   margin: 0;
-  color: ${theme.textColors[color]};
+  color: ${getTextColor(color)};
 `;
 
 /**
@@ -58,6 +77,7 @@ function Text(props: TextProps, ref: DOMRef<HTMLSpanElement>) {
     textSize = 'medium',
     elementType = 'span',
     weight = 'normal',
+    fontStyle = 'normal',
     ...otherProps
   } = props;
   const TextTag = elementType as ElementType;
@@ -66,11 +86,12 @@ function Text(props: TextProps, ref: DOMRef<HTMLSpanElement>) {
   return (
     <TextTag
       className="ac-text"
-      {...otherProps}
+      {...filterDOMProps(otherProps)}
       css={css`
         ${textCSS(color)};
         ${textSizeCSS(textSize)};
         ${textWeightCSS(weight)};
+        font-style: ${fontStyle};
       `}
       ref={domRef}
     >

diff --git a/src/content/types.ts b/src/content/types.ts
@@ -1,3 +1,5 @@
+import { DesignationColorValue } from '../types';
+
 export type Size =
   | 'xxxlarge'
   | 'xxlarge'
@@ -9,7 +11,12 @@ export type Size =
 
 export type Weight = 'heavy' | 'normal';
 
-export type Color = 'white90' | 'white70' | 'white30' | 'inherit';
+export type TextColor =
+  | 'white90'
+  | 'white70'
+  | 'white30'
+  | 'inherit'
+  | DesignationColorValue;
 
 export type TextElementType =
   | 'span'

diff --git a/src/field/FieldColorDesignation.tsx b/src/field/FieldColorDesignation.tsx
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { designationColors } from '../theme';
+import { DesignationColorValue } from '../types';
 
 /**
  * A decorative wrapper around a field to designate the field's color.
@@ -11,7 +12,7 @@ type FieldColorDesignationProps = {
   /**
    * The color to use for the field's border
    */
-  color: keyof typeof designationColors;
+  color: DesignationColorValue;
 };
 
 export function FieldColorDesignation(props: FieldColorDesignationProps) {

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.ts → src/theme.tsx b/src/theme.ts → src/theme.tsx
@@ -1,16 +1,7 @@
 import { lighten, darken } from 'polished';
+import * as _colorPalette from './colorPalette';
 
-const grayColors = {
-  gray900: '#181B1F',
-  gray800: '#1d2126',
-  gray700: '#23282e',
-  gray600: '#282e35',
-  gray500: '#2f353d',
-  gray400: '#3d434a',
-  gray300: '#4a5057',
-  gray200: '#585d64', // disabled text
-  gray100: '#666b71',
-} as const;
+export const colorPalette = _colorPalette;
 
 const arizeColors = {
   arizePink: '#CA2A76',
@@ -47,10 +38,11 @@ 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,
@@ -61,22 +53,22 @@ export const theme = {
     statusWarning: '#E69958',
     statusDanger: '#F85149',
     dividerColor: '#32383f',
-    hoverBgColor: grayColors.gray400,
+    hoverBgColor: _colorPalette.grayColors.gray400,
   },
   textColors,
   labelColors,
   // Add any component specific overrides here
   components: {
     card: {
-      backgroundColor: grayColors.gray800,
-      borderColor: grayColors.gray400,
+      backgroundColor: _colorPalette.grayColors.gray800,
+      borderColor: _colorPalette.grayColors.gray400,
     },
     accordion: {
-      backgroundColor: grayColors.gray500,
-      borderColor: grayColors.gray400,
+      backgroundColor: _colorPalette.grayColors.gray500,
+      borderColor: _colorPalette.grayColors.gray400,
     },
     tabs: {
-      borderColor: grayColors.gray400,
+      borderColor: _colorPalette.grayColors.gray400,
     },
     tooltip: {
       backgroundColor: '#3C4C5D',
@@ -87,18 +79,18 @@ export const theme = {
       borderColor: '#6F7D8C',
     },
     dropdown: {
-      backgroundColor: grayColors.gray500,
-      borderColor: grayColors.gray100,
-      hoverBorderColor: lighten(0.2, grayColors.gray100),
+      backgroundColor: _colorPalette.grayColors.gray500,
+      borderColor: _colorPalette.grayColors.gray100,
+      hoverBorderColor: lighten(0.2, _colorPalette.grayColors.gray100),
       activeBorderColor: arizeColors.arizeLightBlue,
-      activeBackgroundColor: darken(0.02, grayColors.gray500),
+      activeBackgroundColor: darken(0.02, _colorPalette.grayColors.gray500),
     },
     textField: {
-      borderColor: grayColors.gray100,
-      hoverBorderColor: lighten(0.2, grayColors.gray100),
+      borderColor: _colorPalette.grayColors.gray100,
+      hoverBorderColor: lighten(0.2, _colorPalette.grayColors.gray100),
       activeBorderColor: arizeColors.arizeLightBlue,
-      backgroundColor: grayColors.gray500,
-      activeBackgroundColor: darken(0.02, grayColors.gray500),
+      backgroundColor: _colorPalette.grayColors.gray500,
+      activeBackgroundColor: darken(0.02, _colorPalette.grayColors.gray500),
     },
     button: {
       primaryBorderColor: '#5BAECC',
@@ -112,7 +104,7 @@ export const theme = {
       successHoverBackgroundColor: '#7EE787',
     },
     modal: {
-      backgroundColor: grayColors.gray800,
+      backgroundColor: _colorPalette.grayColors.gray800,
     },
   },
   typography: {

diff --git a/src/types/core.ts b/src/types/core.ts
@@ -106,3 +106,7 @@ export type ColorValue =
   | 'gray-800'
   | 'gray-900'
   | 'danger';
+
+export type DesignationColorValue =
+  | 'designationPurple'
+  | 'designationTurquoise';
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>