feat: text designation colors, fontStyle

src/colorPalette.tsx

@@ -0,0 +1,27 @@
+export const purpleColors = {
+  purple900: '	rgb(192, 143, 252)',
+  purple800: 'rgb(178, 119, 250)',
+  purple700: '#AE8DF8',
+  purple600: '#A17AF7',
+  purple500: '#9468F6',
+  purple400: '#8755F4',
+  purple300: '#7A43F3',
+  purple200: '#6D30F2',
+  purple100: '#5F1EF1',
+} as const;
+
+// export const turquoiseColors = {
+//   turquoise900: '#9efcfd',
+// } 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',
+} as const;

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}
     >

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'

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) {

src/theme.tsx

@@ -0,0 +1,193 @@
+import { lighten, darken } from 'polished';
+import * as _colorPalette from './colorPalette';
+
+export const colorPalette = _colorPalette;
+
+const arizeColors = {
+  arizePink: '#CA2A76',
+  arizeGreen: '#48BB95',
+  arizeBlue: '#227C9D',
+  arizeLightBlue: '#72D9FF',
+};
+
+const borderColors = {
+  grayBorder: '#2e363e',
+  lightGrayBorder: '#768CA3',
+  lightGrayHoverBorder: lighten(0.2, '#768CA3'),
+};
+
+const textColors = {
+  white90: `rgba(255, 255, 255, 0.9)`,
+  white70: `rgba(255, 255, 255, 0.7)`,
+  white50: `rgba(255, 255, 255, 0.5)`,
+  white30: `rgba(255, 255, 255, 0.3)`,
+  inherit: 'inherit',
+} as const;
+
+const labelColors = {
+  white: `rgba(255, 255, 255, 0.9)`,
+  red: '#F85149',
+  green: '#7EE787',
+  orange: '#E69958',
+  blue: '#72D9FF',
+  purple: '#ADA1FF',
+  gray: 'rgba(255, 255, 255, 0.7)',
+} as const;
+
+/**
+ * Colors to designate specific meaning (e.g. primary / reference)
+ */
+export const designationColors = {
+  designationTurquoise: '#9efcfd',
+  designationPurple: '#ADA1FF',
+} as const;
+
+export const theme = {
+  colors: {
+    ...arizeColors,
+    ..._colorPalette.grayColors,
+    ...borderColors,
+    statusInfo: '#72D9FF',
+    statusSuccess: '#7EE787', // RGB independent success color
+    statusWarning: '#E69958',
+    statusDanger: '#F85149',
+    dividerColor: '#32383f',
+    hoverBgColor: _colorPalette.grayColors.gray400,
+  },
+  textColors,
+  labelColors,
+  // Add any component specific overrides here
+  components: {
+    card: {
+      backgroundColor: _colorPalette.grayColors.gray800,
+      borderColor: _colorPalette.grayColors.gray400,
+    },
+    accordion: {
+      backgroundColor: _colorPalette.grayColors.gray500,
+      borderColor: _colorPalette.grayColors.gray400,
+    },
+    tabs: {
+      borderColor: _colorPalette.grayColors.gray400,
+    },
+    tooltip: {
+      backgroundColor: '#3C4C5D',
+      borderColor: lighten(0.3, '#3C4C5D'),
+    },
+    actionTooltip: {
+      backgroundColor: '#2D3845',
+      borderColor: '#6F7D8C',
+    },
+    dropdown: {
+      backgroundColor: _colorPalette.grayColors.gray500,
+      borderColor: _colorPalette.grayColors.gray100,
+      hoverBorderColor: lighten(0.2, _colorPalette.grayColors.gray100),
+      activeBorderColor: arizeColors.arizeLightBlue,
+      activeBackgroundColor: darken(0.02, _colorPalette.grayColors.gray500),
+    },
+    textField: {
+      borderColor: _colorPalette.grayColors.gray100,
+      hoverBorderColor: lighten(0.2, _colorPalette.grayColors.gray100),
+      activeBorderColor: arizeColors.arizeLightBlue,
+      backgroundColor: _colorPalette.grayColors.gray500,
+      activeBackgroundColor: darken(0.02, _colorPalette.grayColors.gray500),
+    },
+    button: {
+      primaryBorderColor: '#5BAECC',
+      primaryHoverBackgroundColor: '#5BAECC',
+      defaultBorderColor: borderColors.lightGrayBorder,
+      defaultHoverBackgroundColor: '#64768A',
+      dangerBorderColor: lighten(0.1, '#F85149'),
+      dangerHoverBackgroundColor: lighten(0.1, '#F85149'),
+      successColor: '#3C6E40',
+      successBorderColor: '#7EE787',
+      successHoverBackgroundColor: '#7EE787',
+    },
+    modal: {
+      backgroundColor: _colorPalette.grayColors.gray800,
+    },
+  },
+  typography: {
+    weights: {
+      heavy: 500,
+      normal: 400,
+    },
+    sizes: {
+      xxxlarge: {
+        fontSize: 44,
+        lineHeight: 52,
+      },
+      xxlarge: {
+        fontSize: 28,
+        lineHeight: 36,
+      },
+      xlarge: {
+        fontSize: 18,
+        lineHeight: 28,
+      },
+      large: {
+        fontSize: 16,
+        lineHeight: 24,
+      },
+      medium: {
+        fontSize: 14,
+        lineHeight: 20,
+      },
+      small: {
+        fontSize: 12,
+        lineHeight: 16,
+      },
+      xsmall: {
+        fontSize: 10,
+        lineHeight: 16,
+      },
+    },
+  },
+  spacing: {
+    padding4: 4,
+    padding8: 8,
+    padding16: 16,
+    padding24: 24,
+    margin4: 4,
+    margin8: 8,
+    margin16: 16,
+    margin24: 24,
+    popover: {
+      /**
+       * The offset is the distance between the source and the popover edge (or the end of the tip, when there is a tip).
+       */
+      offset: 6,
+    },
+    tooltip: {
+      /**
+       * The offset is the distance between the source and the tooltip edge (or the end of the tip, when there is a tip).
+       */
+      offset: 6,
+    },
+    outline: {
+      thin: 2,
+    },
+  },
+  rounding: {
+    rounding4: 4,
+  },
+  animation: {
+    global: {
+      /**
+       * Fallback to 200ms as an animation duration
+       */
+      duration: 200,
+    },
+  },
+  /**
+   * The height of a single line of form input etc.
+   */
+  singleLineHeight: 36,
+  borderRadius: {
+    medium: 4,
+  },
+  opacity: {
+    disabled: 0.6,
+  },
+};
+
+export default theme;

src/types/core.ts

@@ -106,3 +106,7 @@ export type ColorValue =
   | 'gray-800'
   | 'gray-900'
   | 'danger';
+
+export type DesignationColorValue =
+  | 'designationPurple'
+  | 'designationTurquoise';