chore(components): migrate off of text and heading

app/.eslintrc.js

@@ -79,6 +79,20 @@ module.exports = {
         module: "@arizeai/components",
         use: "@phoenix/components",
       },
+      {
+        name: "Text",
+        module: "@arizeai/components",
+        use: "@phoenix/components",
+      },
+      {
+        name: "Heading",
+        module: "@arizeai/components",
+        use: "@phoenix/components",
+      },
+      {
+        name: "theme",
+        module: "@arizeai/components",
+      },
     ],
     "no-duplicate-imports": "error",
   },

app/package.json

@@ -125,9 +125,9 @@
     "dev:embeddings": "pnpm run dev:server:embeddings & pnpm run build:static && pnpm run build:relay && vite",
     "dev:ui": "pnpm run build:static && pnpm run build:relay && vite",
     "dev:server": "source .env && tox r -e phoenix_main -- --dev serve",
-    "dev:server:embeddings": "source .env && tox r -e phoenix_main -- --dev serve --with-fixture=chatbot",
+    "dev:server:embeddings": "source .env && tox r -e phoenix_main -- --dev serve --with-fixture=fashion_mnist",
     "dev:server:test": "node ./tests/utils/testServer.mjs",
-    "dev:server:init": "tox r -e phoenix_main -- --dev serve --with-trace-fixtures=llama_index_rag --with-projects=demo_llama_index --force-fixture-ingestion",
+    "dev:server:init": "tox r -e phoenix_main -- --dev serve --with-trace-fixtures=llama_index_rag --with-projects=SESSIONS-DEMO --force-fixture-ingestion",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src",
     "lint:fix": "eslint --fix ./src",

app/src/App.tsx

@@ -1,8 +1,7 @@
 import React, { Suspense } from "react";
 import { RelayEnvironmentProvider } from "react-relay";
-import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 
-import { Provider, theme } from "@arizeai/components";
+import { Provider } from "@arizeai/components";
 
 import { CredentialsProvider } from "./contexts/CredentialsContext";
 import { FeatureFlagsProvider } from "./contexts/FeatureFlagsContext";
@@ -29,22 +28,20 @@ export function AppContent() {
   const { theme: componentsTheme } = useTheme();
   return (
     <Provider theme={componentsTheme}>
-      <EmotionThemeProvider theme={theme}>
-        <RelayEnvironmentProvider environment={RelayEnvironment}>
-          <GlobalStyles />
-          <FeatureFlagsProvider>
-            <PreferencesProvider>
-              <CredentialsProvider>
-                <Suspense>
-                  <NotificationProvider>
-                    <AppRoutes />
-                  </NotificationProvider>
-                </Suspense>
-              </CredentialsProvider>
-            </PreferencesProvider>
-          </FeatureFlagsProvider>
-        </RelayEnvironmentProvider>
-      </EmotionThemeProvider>
+      <RelayEnvironmentProvider environment={RelayEnvironment}>
+        <GlobalStyles />
+        <FeatureFlagsProvider>
+          <PreferencesProvider>
+            <CredentialsProvider>
+              <Suspense>
+                <NotificationProvider>
+                  <AppRoutes />
+                </NotificationProvider>
+              </Suspense>
+            </CredentialsProvider>
+          </PreferencesProvider>
+        </FeatureFlagsProvider>
+      </RelayEnvironmentProvider>
     </Provider>
   );
 }

app/src/GlobalStyles.tsx

@@ -4,12 +4,12 @@ import { css, Global } from "@emotion/react";
 export function GlobalStyles() {
   return (
     <Global
-      styles={(theme) => css`
+      styles={css`
         body {
           background-color: var(--ac-global-color-grey-75);
           color: var(--ac-global-text-color-900);
           font-family: "Roboto";
-          font-size: ${theme.typography.sizes.medium.fontSize}px;
+          font-size: var(--ac-global-font-size-s);
           margin: 0;
           overflow: hidden;
           #root,
@@ -61,23 +61,39 @@ export function GlobalStyles() {
         }
 
         :root {
-          --px-blue-color: ${theme.colors.arizeBlue};
-
-          --px-section-background-color: ${theme.colors.gray500};
+          --px-section-background-color: #2f353d;
 
           /** The color of shadows on menus etc. */
           --px-overlay-shadow-color: rgba(0, 0, 0, 0.4);
 
           /* An item is a typically something in a list */
-          --px-item-background-color: ${theme.colors.gray800};
-          --px-item-border-color: ${theme.colors.gray600};
+          --px-item-background-color: #1d2126;
+          --px-item-border-color: #282e35;
 
           --px-font-weight-heavy: 600;
 
           --px-gradient-bar-height: 8px;
 
           --px-nav-collapsed-width: 45px;
           --px-nav-expanded-width: 200px;
+
+          --ac-global-opacity-disabled: 0.6;
+          /* Text */
+          --ac-global-font-size-xxs: 10px;
+          --ac-global-font-size-xs: 12px;
+          --ac-global-font-size-s: 14px;
+          --ac-global-font-size-m: 16px;
+          --ac-global-font-size-l: 18px;
+          --ac-global-font-size-xl: 24px;
+          --ac-global-font-size-xxl: 32px;
+
+          --ac-global-line-height-xxs: 12px;
+          --ac-global-line-height-xs: 16px;
+          --ac-global-line-height-s: 20px;
+          --ac-global-line-height-m: 24px;
+          --ac-global-line-height-l: 28px;
+          --ac-global-line-height-xl: 36px;
+          --ac-global-line-height-xxl: 48px;
         }
 
         .ac-theme--dark {

app/src/components/ConfirmNavigation.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { Blocker } from "react-router";
 
-import { Dialog, DialogContainer, Text } from "@arizeai/components";
+import { Dialog, DialogContainer } from "@arizeai/components";
 
-import { Button, Flex, View } from "@phoenix/components";
+import { Button, Flex, Text, View } from "@phoenix/components";
 
 function ConfirmNavigationDialogFooter({ blocker }: { blocker: Blocker }) {
   return (
@@ -39,7 +39,7 @@ export function ConfirmNavigationDialog({
         onDismiss={() => blocker.reset()}
       >
         <Dialog title={"Confirm Navigation"} size="S">
-          <View padding={"size-200"}>
+          <View padding="size-200">
             <Text>{message}</Text>
           </View>
           <ConfirmNavigationDialogFooter blocker={blocker} />

app/src/components/Empty.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { EmptyGraphic, EmptyGraphicProps, Text } from "@arizeai/components";
+import { EmptyGraphic, EmptyGraphicProps } from "@arizeai/components";
+
+import { Text } from "@phoenix/components";
 
 interface EmptyProps extends EmptyGraphicProps {
   message?: string;
@@ -17,8 +19,8 @@ export function Empty(props: EmptyProps) {
       `}
     >
       <div
-        css={(theme) => css`
-          margin: ${theme.spacing.margin24}px;
+        css={css`
+          margin: var(--ac-global-dimension-size-300);
           display: flex;
           flex-direction: column;
           align-items: center;

app/src/components/Loading.tsx

@@ -1,7 +1,9 @@
 import React, { ComponentProps } from "react";
 import { css } from "@emotion/react";
 
-import { ProgressCircle, Text } from "@arizeai/components";
+import { ProgressCircle } from "@arizeai/components";
+
+import { Text } from "@phoenix/components";
 
 type LoadingProps = {
   message?: string;

app/src/components/annotation/AnnotationLabel.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Text } from "@arizeai/components";
-
-import { Flex, Icon, Icons } from "@phoenix/components";
+import { Flex, Icon, Icons, Text } from "@phoenix/components";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 
@@ -100,7 +98,7 @@ export function AnnotationLabel({
       <Flex direction="row" gap="size-100" alignItems="center">
         <AnnotationColorSwatch annotationName={annotation.name} />
         <div css={textCSS}>
-          <Text weight="heavy" textSize="small" color="inherit">
+          <Text weight="heavy" size="XS" color="inherit">
             {annotation.name}
           </Text>
         </div>
@@ -112,7 +110,7 @@ export function AnnotationLabel({
             `
           )}
         >
-          <Text textSize="small">{labelValue}</Text>
+          <Text size="XS">{labelValue}</Text>
         </div>
         {clickable ? <Icon svg={<Icons.ArrowIosForwardOutline />} /> : null}
       </Flex>

app/src/components/annotation/AnnotationTooltip.tsx

@@ -1,13 +1,8 @@
 import React, { CSSProperties, ReactNode } from "react";
 
-import {
-  HelpTooltip,
-  Text,
-  TooltipTrigger,
-  TriggerWrap,
-} from "@arizeai/components";
+import { HelpTooltip, TooltipTrigger, TriggerWrap } from "@arizeai/components";
 
-import { Flex, View } from "@phoenix/components";
+import { Flex, Text, View } from "@phoenix/components";
 import { floatFormatter } from "@phoenix/utils/numberFormatUtils";
 
 import { Annotation } from "./types";
@@ -37,12 +32,7 @@ export function AnnotationTooltip({
           alignItems="center"
         >
           <View>
-            <Text
-              weight="heavy"
-              color="inherit"
-              textSize="large"
-              elementType="h3"
-            >
+            <Text weight="heavy" color="inherit" size="L" elementType="h3">
               {annotation.name}
             </Text>
             <View paddingTop="size-50" minWidth="150px">

app/src/components/auth/DeleteAPIKeyButton.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, useState } from "react";
 
-import { Dialog, DialogContainer, Text } from "@arizeai/components";
+import { Dialog, DialogContainer } from "@arizeai/components";
 
-import { Button, Flex, Icon, Icons, View } from "@phoenix/components";
+import { Button, Flex, Icon, Icons, Text, View } from "@phoenix/components";
 
 export function DeleteAPIKeyButton({
   handleDelete,

app/src/components/auth/OneTimeAPIKeyDialog.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { css } from "@emotion/react";
 
-import { Alert, Dialog, Heading, Text, TextField } from "@arizeai/components";
+import { Alert, Dialog, TextField } from "@arizeai/components";
 
-import { ExternalLink, Flex, View } from "@phoenix/components";
+import { ExternalLink, Flex, Heading, Text, View } from "@phoenix/components";
 import { CodeWrap, PythonBlockWithCopy } from "@phoenix/components/code";
 import { CopyToClipboardButton } from "@phoenix/components/CopyToClipboardButton";
 

app/src/components/chart/ChartTooltip.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { css } from "@emotion/react";
 
-import { Text } from "@arizeai/components";
+import { Text } from "@phoenix/components";
 
 /**
  * Component that renders a small preview of the plot item

app/src/components/chart/defaults.tsx

@@ -1,7 +1,5 @@
 import { ReferenceLineProps, TooltipProps, XAxisProps } from "recharts";
 
-import { theme } from "@arizeai/components";
-
 /**
  * Re-usable default props for the XAxis component.
  */
@@ -22,7 +20,7 @@ export const defaultSelectedTimestampReferenceLineProps: ReferenceLineProps = {
     position: "top",
     style: {
       fill: "#fabe32",
-      fontSize: theme.typography.sizes.small.fontSize,
+      fontSize: "var(--ac-global-font-size-xs)",
     },
   },
 };

app/src/components/code/CodeEditorFieldWrapper.tsx

@@ -5,7 +5,6 @@ import {
   classNames,
   Field,
   FieldProps,
-  theme,
   ValidationState,
 } from "@arizeai/components";
 
@@ -19,7 +18,7 @@ const codeEditorFormWrapperCSS = css`
   &.is-invalid {
     border: 1px solid var(--ac-global-color-danger);
   }
-  border-radius: ${theme.borderRadius.medium}px;
+  border-radius: var(--ac-global-rounding-medium);
   border: 1px solid var(--ac-global-input-field-border-color);
   width: 100%;
   .cm-gutters,

app/src/components/combobox/styles.tsx

@@ -1,6 +1,6 @@
-import { css, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 
-export const comboBoxCSS = (theme: Theme) => css`
+export const comboBoxCSS = css`
   &[data-size="M"] {
     --combobox-vertical-padding: 6px;
     --combobox-horizontal-padding: 6px;
@@ -45,7 +45,7 @@ export const comboBoxCSS = (theme: Theme) => css`
         border: 1px solid var(--ac-global-input-field-border-color-active);
       }
       &[data-disabled] {
-        opacity: ${theme.opacity.disabled};
+        opacity: var(--ac-global-opacity-disabled);
       }
       &[data-invalid]:not([data-focused]) {
         border-color: var(--ac-global-color-danger);
@@ -63,7 +63,7 @@ export const comboBoxCSS = (theme: Theme) => css`
       cursor: pointer;
       padding: 0 10px;
       &[data-disabled] {
-        opacity: ${theme.opacity.disabled};
+        opacity: var(--ac-global-opacity-disabled);
       }
       i {
         font-size: var(--ac-global-dimension-static-font-size-200);

app/src/components/content/Heading.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef, Ref } from "react";
+import {
+  Heading as AriaHeading,
+  HeadingProps as AriaHeadingProps,
+} from "react-aria-components";
+import { css } from "@emotion/react";
+
+import { headingBaseCSS, textBaseCSS } from "./styles";
+import { Weight } from "./types";
+
+export interface HeadingProps extends AriaHeadingProps {
+  /**
+   * Sets the font weight
+   * @default 'normal'
+   */
+  weight?: Weight;
+}
+
+/**
+ * Heading is used to create various levels of typographic hierarchies.
+ */
+function Heading(props: HeadingProps, ref: Ref<HTMLHeadingElement>) {
+  const { children, level = 3, weight = "normal", ...otherProps } = props;
+
+  return (
+    <AriaHeading
+      {...otherProps}
+      css={css(textBaseCSS, headingBaseCSS)}
+      ref={ref}
+      level={level}
+      data-level={level}
+      data-weight={weight}
+    >
+      {children}
+    </AriaHeading>
+  );
+}
+
+const _Heading = forwardRef(Heading);
+export { _Heading as Heading };