diff --git a/app/.eslintrc.js b/app/.eslintrc.js index 056675fb89..a0c09d9593 100644 --- a/app/.eslintrc.js +++ b/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", }, diff --git a/app/package.json b/app/package.json index 2c5ab8f828..92b204366a 100644 --- a/app/package.json +++ b/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", diff --git a/app/src/@types/emotion.d.ts b/app/src/@types/emotion.d.ts deleted file mode 100644 index 637f331daa..0000000000 --- a/app/src/@types/emotion.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { theme } from "@arizeai/components"; - -import "@emotion/react"; - -type ACTheme = typeof theme; -declare module "@emotion/react" { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface Theme extends ACTheme {} -} diff --git a/app/src/App.tsx b/app/src/App.tsx index 2c98a09883..153aa4ddb3 100644 --- a/app/src/App.tsx +++ b/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 ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + ); } diff --git a/app/src/GlobalStyles.tsx b/app/src/GlobalStyles.tsx index 733322023b..96c86169c7 100644 --- a/app/src/GlobalStyles.tsx +++ b/app/src/GlobalStyles.tsx @@ -4,12 +4,12 @@ import { css, Global } from "@emotion/react"; export function GlobalStyles() { return ( 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,16 +61,14 @@ 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; @@ -78,6 +76,24 @@ export function GlobalStyles() { --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 { diff --git a/app/src/components/ConfirmNavigation.tsx b/app/src/components/ConfirmNavigation.tsx index 1adaaa3638..511685608c 100644 --- a/app/src/components/ConfirmNavigation.tsx +++ b/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()} > - + {message} diff --git a/app/src/components/Empty.tsx b/app/src/components/Empty.tsx index 3c796d34e3..5b9adc8aff 100644 --- a/app/src/components/Empty.tsx +++ b/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) { `} >
css` - margin: ${theme.spacing.margin24}px; + css={css` + margin: var(--ac-global-dimension-size-300); display: flex; flex-direction: column; align-items: center; diff --git a/app/src/components/Loading.tsx b/app/src/components/Loading.tsx index 0cef8325d1..7b985a4498 100644 --- a/app/src/components/Loading.tsx +++ b/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; diff --git a/app/src/components/annotation/AnnotationLabel.tsx b/app/src/components/annotation/AnnotationLabel.tsx index 411b50ba8f..28f3d3d4e0 100644 --- a/app/src/components/annotation/AnnotationLabel.tsx +++ b/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({
- + {annotation.name}
@@ -112,7 +110,7 @@ export function AnnotationLabel({ ` )} > - {labelValue} + {labelValue}
{clickable ? } /> : null} diff --git a/app/src/components/annotation/AnnotationTooltip.tsx b/app/src/components/annotation/AnnotationTooltip.tsx index 11288d85bd..f46d30ef23 100644 --- a/app/src/components/annotation/AnnotationTooltip.tsx +++ b/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" > - + {annotation.name} diff --git a/app/src/components/auth/DeleteAPIKeyButton.tsx b/app/src/components/auth/DeleteAPIKeyButton.tsx index 4bc6b9f142..17a8404b0d 100644 --- a/app/src/components/auth/DeleteAPIKeyButton.tsx +++ b/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, diff --git a/app/src/components/auth/OneTimeAPIKeyDialog.tsx b/app/src/components/auth/OneTimeAPIKeyDialog.tsx index 97467fff70..38812db90d 100644 --- a/app/src/components/auth/OneTimeAPIKeyDialog.tsx +++ b/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"; diff --git a/app/src/components/chart/ChartTooltip.tsx b/app/src/components/chart/ChartTooltip.tsx index cddb00ca1e..ec24098ef1 100644 --- a/app/src/components/chart/ChartTooltip.tsx +++ b/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 diff --git a/app/src/components/chart/defaults.tsx b/app/src/components/chart/defaults.tsx index 373e0bedcf..9a3eb9686f 100644 --- a/app/src/components/chart/defaults.tsx +++ b/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)", }, }, }; diff --git a/app/src/components/code/CodeEditorFieldWrapper.tsx b/app/src/components/code/CodeEditorFieldWrapper.tsx index 3f890f651a..725ed13aa6 100644 --- a/app/src/components/code/CodeEditorFieldWrapper.tsx +++ b/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, diff --git a/app/src/components/combobox/styles.tsx b/app/src/components/combobox/styles.tsx index 6b28428425..f4b914149a 100644 --- a/app/src/components/combobox/styles.tsx +++ b/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); diff --git a/app/src/components/content/Heading.tsx b/app/src/components/content/Heading.tsx new file mode 100644 index 0000000000..032a470a1b --- /dev/null +++ b/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) { + const { children, level = 3, weight = "normal", ...otherProps } = props; + + return ( + + {children} + + ); +} + +const _Heading = forwardRef(Heading); +export { _Heading as Heading }; diff --git a/app/src/components/content/Text.tsx b/app/src/components/content/Text.tsx new file mode 100644 index 0000000000..c116e75135 --- /dev/null +++ b/app/src/components/content/Text.tsx @@ -0,0 +1,115 @@ +import React, { + CSSProperties, + ElementType, + forwardRef, + ReactNode, + Ref, +} from "react"; +import { filterDOMProps } from "@react-aria/utils"; +import { css } from "@emotion/react"; + +import { + ColorValue, + DOMProps, + StyleProps, + TextColorValue, + TextSize, +} from "@phoenix/components/types"; + +import { colorValue, useStyleProps } from "../utils"; + +import { textBaseCSS } from "./styles"; +import { TextElementType, Weight } from "./types"; + +export interface TextProps extends DOMProps, StyleProps { + /** + * Sets text size + * @default 'S' + */ + size?: TextSize; + /** + * The text node element type + * @default 'span' + */ + elementType?: TextElementType; + /** + * Sets the font weight + * @default 'normal' + */ + weight?: Weight; + /** + * Text content. + */ + children: ReactNode; + /** + * The color of the text + * @default 'text-900' + */ + color?: TextColorValue; + /** + * The font style + * @default 'normal' + */ + fontStyle?: CSSProperties["fontStyle"]; + /** + * The disabled state of the text + */ + isDisabled?: boolean; +} + +const getTextColor = (color: TextColorValue): string => { + if (color === "inherit") { + return "inherit"; + } + if (color.startsWith("text-")) { + const [, num] = color.split("-"); + return `var(--ac-global-text-color-${num})`; + } + return colorValue(color as ColorValue); +}; + +const textCSS = (color: TextColorValue) => + css( + css` + color: ${getTextColor(color)}; + `, + textBaseCSS + ); + +/** + * Text is used to create various sizes of typographic hierarchies. + */ +function Text(props: TextProps, ref: Ref) { + const { isDisabled = false } = props; + const { + children, + color = isDisabled ? "text-300" : "text-900", + size = "S", + elementType = "span", + weight = "normal", + fontStyle = "normal", + ...otherProps + } = props; + const TextTag = elementType as ElementType; + const { styleProps } = useStyleProps(otherProps); + + return ( + + {children} + + ); +} + +const _Text = forwardRef(Text); +export { _Text as Text }; diff --git a/app/src/components/content/index.tsx b/app/src/components/content/index.tsx new file mode 100644 index 0000000000..3916f40f99 --- /dev/null +++ b/app/src/components/content/index.tsx @@ -0,0 +1,2 @@ +export * from "./Text"; +export * from "./Heading"; diff --git a/app/src/components/content/styles.tsx b/app/src/components/content/styles.tsx new file mode 100644 index 0000000000..ed4661fd2a --- /dev/null +++ b/app/src/components/content/styles.tsx @@ -0,0 +1,57 @@ +import { css } from "@emotion/react"; + +export const textBaseCSS = css` + margin: 0; + font-weight: 400; + &[data-size="XS"] { + font-size: var(--ac-global-font-size-xs); + line-height: var(--ac-global-line-height-xs); + } + &[data-size="S"] { + font-size: var(--ac-global-font-size-s); + line-height: var(--ac-global-line-height-s); + } + &[data-size="M"] { + font-size: var(--ac-global-font-size-m); + line-height: var(--ac-global-line-height-m); + } + &[data-size="L"] { + font-size: var(--ac-global-font-size-l); + line-height: var(--ac-global-line-height-l); + } + &[data-size="XL"] { + font-size: var(--ac-global-font-size-xl); + line-height: var(--ac-global-line-height-xl); + } + &[data-weight="heavy"] { + font-weight: 600; + } +`; + +export const headingBaseCSS = css` + color: var(--ac-global-text-color-900); + &[data-level="1"] { + font-size: var(--ac-global-font-size-xl); + line-height: var(--ac-global-line-height-xl); + } + &[data-level="2"] { + font-size: var(--ac-global-font-size-l); + line-height: var(--ac-global-line-height-l); + } + &[data-level="3"] { + font-size: var(--ac-global-font-size-m); + line-height: var(--ac-global-line-height-m); + } + &[data-level="4"] { + font-size: var(--ac-global-font-size-s); + line-height: var(--ac-global-line-height-s); + } + &[data-level="5"] { + font-size: var(--ac-global-font-size-xs); + line-height: var(--ac-global-line-height-xs); + } + &[data-level="6"] { + font-size: var(--ac-global-font-size-xxs); + line-height: var(--ac-global-line-height-xxs); + } +`; diff --git a/app/src/components/content/types.ts b/app/src/components/content/types.ts new file mode 100644 index 0000000000..31b99d23f6 --- /dev/null +++ b/app/src/components/content/types.ts @@ -0,0 +1,20 @@ +export type Size = + | "xxxlarge" + | "xxlarge" + | "xlarge" + | "large" + | "medium" + | "small" + | "xsmall"; + +export type Weight = "heavy" | "normal"; + +export type TextElementType = + | "span" + | "h1" + | "h2" + | "h3" + | "h4" + | "h5" + | "h6" + | "p"; diff --git a/app/src/components/dataset/DatasetPicker.tsx b/app/src/components/dataset/DatasetPicker.tsx index 24bfb7acc0..116e00f512 100644 --- a/app/src/components/dataset/DatasetPicker.tsx +++ b/app/src/components/dataset/DatasetPicker.tsx @@ -1,9 +1,9 @@ import React from "react"; import { graphql, useLazyLoadQuery } from "react-relay"; -import { Item, Picker, PickerProps, Text } from "@arizeai/components"; +import { Item, Picker, PickerProps } from "@arizeai/components"; -import { Flex } from "@phoenix/components"; +import { Flex, Text } from "@phoenix/components"; import { DatasetPickerQuery } from "./__generated__/DatasetPickerQuery.graphql"; @@ -61,7 +61,7 @@ export function DatasetPicker(props: DatasetPickerProps) { width={"100%"} > {dataset.name} - + {dataset.exampleCount} examples diff --git a/app/src/components/experiment/ExperimentActionMenu.tsx b/app/src/components/experiment/ExperimentActionMenu.tsx index 8fbfa15057..2931ab0fe2 100644 --- a/app/src/components/experiment/ExperimentActionMenu.tsx +++ b/app/src/components/experiment/ExperimentActionMenu.tsx @@ -8,10 +8,9 @@ import { Dialog, DialogContainer, Item, - Text, } from "@arizeai/components"; -import { Flex, Icon, Icons } from "@phoenix/components"; +import { Flex, Icon, Icons, Text } from "@phoenix/components"; import { JSONBlock } from "@phoenix/components/code"; import { useNotifySuccess } from "@phoenix/contexts"; import { assertUnreachable } from "@phoenix/typeUtils"; diff --git a/app/src/components/filter/PrimaryInferencesTimeRange.tsx b/app/src/components/filter/PrimaryInferencesTimeRange.tsx index bd1ddca061..87ca6adc48 100644 --- a/app/src/components/filter/PrimaryInferencesTimeRange.tsx +++ b/app/src/components/filter/PrimaryInferencesTimeRange.tsx @@ -3,7 +3,6 @@ import { css } from "@emotion/react"; import { FieldColorDesignation, - Heading, Item, Picker, Tooltip, @@ -11,6 +10,7 @@ import { TriggerWrap, } from "@arizeai/components"; +import { Heading } from "@phoenix/components"; import { useInferences } from "@phoenix/contexts"; import { TimePreset, useTimeRange } from "@phoenix/contexts/TimeRangeContext"; import { fullTimeFormatter } from "@phoenix/utils/timeFormatUtils"; diff --git a/app/src/components/form/DimensionPicker.tsx b/app/src/components/form/DimensionPicker.tsx index 9b464ebaf1..7379f5f8ed 100644 --- a/app/src/components/form/DimensionPicker.tsx +++ b/app/src/components/form/DimensionPicker.tsx @@ -5,15 +5,14 @@ import { css } from "@emotion/react"; import { Content, ContextualHelp, - Heading, Item, Label, LabelProps, Picker, PickerProps, - Text, } from "@arizeai/components"; +import { Heading, Text } from "@phoenix/components"; import RelayEnvironment from "@phoenix/RelayEnvironment"; import { Dimension } from "@phoenix/types"; import { assertUnreachable } from "@phoenix/typeUtils"; diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx index 01f1a1b1a0..063fe27d40 100644 --- a/app/src/components/index.tsx +++ b/app/src/components/index.tsx @@ -12,3 +12,4 @@ export * from "./button"; export * from "./icon"; export * from "./view"; export * from "./layout"; +export * from "./content"; diff --git a/app/src/components/markdown/MarkdownDisplayContext.tsx b/app/src/components/markdown/MarkdownDisplayContext.tsx index e9ab1d2e0c..8decec91dd 100644 --- a/app/src/components/markdown/MarkdownDisplayContext.tsx +++ b/app/src/components/markdown/MarkdownDisplayContext.tsx @@ -12,7 +12,7 @@ import { MarkdownDisplayMode } from "./types"; export type MarkdownDisplayContextType = { mode: MarkdownDisplayMode; - setMode: (theme: MarkdownDisplayMode) => void; + setMode: (mode: MarkdownDisplayMode) => void; }; export const MarkdownDisplayContext = diff --git a/app/src/components/nav/Navbar.tsx b/app/src/components/nav/Navbar.tsx index bbad881879..d97561283c 100644 --- a/app/src/components/nav/Navbar.tsx +++ b/app/src/components/nav/Navbar.tsx @@ -1,10 +1,8 @@ import React, { ReactNode, useState } from "react"; import { Link, NavLink as RRNavLink } from "react-router-dom"; -import { css, Theme } from "@emotion/react"; +import { css } from "@emotion/react"; -import { Text } from "@arizeai/components"; - -import { Icon, Icons } from "@phoenix/components"; +import { Icon, Icons, Text } from "@phoenix/components"; import { useTheme } from "@phoenix/contexts"; import { Logo } from "./Logo"; @@ -70,13 +68,14 @@ const navLinkCSS = css` display: inline-block; } .ac-text { + padding-inline-start: var(--ac-global-dimension-size-50); white-space: nowrap; } `; -const brandCSS = (theme: Theme) => css` +const brandCSS = css` color: var(--ac-global-text-color-900); - font-size: ${theme.typography.sizes.large.fontSize}px; + font-size: var(--ac-global-font-size-xl); text-decoration: none; margin: 0 0 var(--ac-global-dimension-static-size-200) 0; `; diff --git a/app/src/components/pointcloud/ClusterItem.tsx b/app/src/components/pointcloud/ClusterItem.tsx index 616a58c346..4ca74c3d77 100644 --- a/app/src/components/pointcloud/ClusterItem.tsx +++ b/app/src/components/pointcloud/ClusterItem.tsx @@ -1,9 +1,7 @@ import React, { useMemo } from "react"; import { css } from "@emotion/react"; -import { Heading, Text } from "@arizeai/components"; - -import { Flex } from "@phoenix/components"; +import { Flex, Heading, Text } from "@phoenix/components"; import { InferencesRole } from "@phoenix/types"; import { numberFormatter } from "@phoenix/utils/numberFormatUtils"; @@ -137,7 +135,7 @@ export function ClusterItem(props: ClusterItemProps) { {`Cluster ${clusterId}`} {`${props.numPoints} points`} @@ -149,14 +147,14 @@ export function ClusterItem(props: ClusterItemProps) { align-items: end; `} > - + {metricName} - + {numberFormatter(primaryMetricValue)} {!hideReference ? ( - + {numberFormatter(referenceMetricValue)} ) : null} diff --git a/app/src/components/pointcloud/ClusteringSettings.tsx b/app/src/components/pointcloud/ClusteringSettings.tsx index 1a0aeee218..91d315617b 100644 --- a/app/src/components/pointcloud/ClusteringSettings.tsx +++ b/app/src/components/pointcloud/ClusteringSettings.tsx @@ -2,16 +2,9 @@ import React, { useCallback } from "react"; import { Controller, useForm } from "react-hook-form"; import { css } from "@emotion/react"; -import { - Content, - ContextualHelp, - Form, - Heading, - Text, - TextField, -} from "@arizeai/components"; +import { Content, ContextualHelp, Form, TextField } from "@arizeai/components"; -import { Button } from "@phoenix/components"; +import { Button, Heading, Text } from "@phoenix/components"; import { MAX_32_BIT_INTEGER } from "@phoenix/constants/numberConstants"; import { MIN_CLUSTER_MIN_SAMPLES, diff --git a/app/src/components/pointcloud/ColoringStrategyPicker.tsx b/app/src/components/pointcloud/ColoringStrategyPicker.tsx index 9438ec255d..ecdbf01435 100644 --- a/app/src/components/pointcloud/ColoringStrategyPicker.tsx +++ b/app/src/components/pointcloud/ColoringStrategyPicker.tsx @@ -1,14 +1,8 @@ import React from "react"; -import { - Content, - ContextualHelp, - Heading, - Item, - Picker, - Text, -} from "@arizeai/components"; +import { Content, ContextualHelp, Item, Picker } from "@arizeai/components"; +import { Heading, Text } from "@phoenix/components"; import { ColoringStrategy } from "@phoenix/constants/pointCloudConstants"; function isColoringStrategy(strategy: unknown): strategy is ColoringStrategy { diff --git a/app/src/components/pointcloud/PointCloud.tsx b/app/src/components/pointcloud/PointCloud.tsx index 15d6dfeed0..bab5603793 100644 --- a/app/src/components/pointcloud/PointCloud.tsx +++ b/app/src/components/pointcloud/PointCloud.tsx @@ -4,7 +4,6 @@ import { css, ThemeContext as EmotionThemeContext } from "@emotion/react"; import { ActionTooltip, - Heading, TooltipTrigger, TriggerWrap, } from "@arizeai/components"; @@ -18,7 +17,7 @@ import { ThreeDimensionalControls, } from "@arizeai/point-cloud"; -import { Button, Icon, Icons } from "@phoenix/components"; +import { Button, Heading, Icon, Icons } from "@phoenix/components"; import { UNKNOWN_COLOR } from "@phoenix/constants/pointCloudConstants"; import { InferencesContext, diff --git a/app/src/components/pointcloud/PointCloudParameterSettings.tsx b/app/src/components/pointcloud/PointCloudParameterSettings.tsx index d91a057334..8c45db6cfc 100644 --- a/app/src/components/pointcloud/PointCloudParameterSettings.tsx +++ b/app/src/components/pointcloud/PointCloudParameterSettings.tsx @@ -2,16 +2,9 @@ import React, { useCallback } from "react"; import { Controller, useForm } from "react-hook-form"; import { css } from "@emotion/react"; -import { - Content, - ContextualHelp, - Form, - Heading, - Text, - TextField, -} from "@arizeai/components"; +import { Content, ContextualHelp, Form, TextField } from "@arizeai/components"; -import { Button } from "@phoenix/components"; +import { Button, Heading, Text } from "@phoenix/components"; import { MAX_INFERENCES_SAMPLE_SIZE, MAX_MIN_DIST, diff --git a/app/src/components/project/PythonProjectGuide.tsx b/app/src/components/project/PythonProjectGuide.tsx index 00971e39eb..76e161d8c6 100644 --- a/app/src/components/project/PythonProjectGuide.tsx +++ b/app/src/components/project/PythonProjectGuide.tsx @@ -1,8 +1,8 @@ import React from "react"; -import { Heading, TabbedCard, TabPane, Tabs, Text } from "@arizeai/components"; +import { TabbedCard, TabPane, Tabs } from "@arizeai/components"; -import { ExternalLink, View } from "@phoenix/components"; +import { ExternalLink, Heading, Text, View } from "@phoenix/components"; import { CodeWrap } from "@phoenix/components/code/CodeWrap"; import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy"; import { BASE_URL } from "@phoenix/config"; diff --git a/app/src/components/project/TypeScriptProjectGuide.tsx b/app/src/components/project/TypeScriptProjectGuide.tsx index 339e9d7f18..340733fdae 100644 --- a/app/src/components/project/TypeScriptProjectGuide.tsx +++ b/app/src/components/project/TypeScriptProjectGuide.tsx @@ -1,8 +1,6 @@ import React from "react"; -import { Heading, Text } from "@arizeai/components"; - -import { ExternalLink, View } from "@phoenix/components"; +import { ExternalLink, Heading, Text, View } from "@phoenix/components"; import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth"; import { CodeWrap } from "@phoenix/components/code/CodeWrap"; import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy"; diff --git a/app/src/components/resize/styles.tsx b/app/src/components/resize/styles.tsx index 87d60906b6..39426fd24b 100644 --- a/app/src/components/resize/styles.tsx +++ b/app/src/components/resize/styles.tsx @@ -1,4 +1,4 @@ -import { css, Theme } from "@emotion/react"; +import { css } from "@emotion/react"; export const resizeHandleCSS = css` transition: 250ms linear all; @@ -50,7 +50,7 @@ export const resizeHandleCSS = css` } `; -export const compactResizeHandleCSS = (theme: Theme) => css` +export const compactResizeHandleCSS = css` transition: 250ms linear all; background-color: var(--ac-global-color-grey-200); --px-resize-handle-size: 4px; @@ -63,6 +63,6 @@ export const compactResizeHandleCSS = (theme: Theme) => css` } &:hover { - background-color: ${theme.colors.arizeLightBlue}; + background-color: var(--ac-global-color-primary); } `; diff --git a/app/src/components/table/TableEmpty.tsx b/app/src/components/table/TableEmpty.tsx index e7b76c267a..3a821d9e75 100644 --- a/app/src/components/table/TableEmpty.tsx +++ b/app/src/components/table/TableEmpty.tsx @@ -8,9 +8,10 @@ export function TableEmpty(props: { message?: string }) { css` + css={css` text-align: center; - padding: ${theme.spacing.margin24}px ${theme.spacing.margin24}px !important; + padding: var(--ac-global-dimension-size-300) + var(--ac-global-dimension-size-300) !important; `} > {message} diff --git a/app/src/components/table/styles.ts b/app/src/components/table/styles.ts index 0785c20225..c34c218a8e 100644 --- a/app/src/components/table/styles.ts +++ b/app/src/components/table/styles.ts @@ -1,9 +1,9 @@ import { CSSProperties } from "react"; import { Column } from "@tanstack/react-table"; -import { css, Theme } from "@emotion/react"; +import { css } from "@emotion/react"; -export const tableCSS = (theme: Theme) => css` - font-size: ${theme.typography.sizes.medium.fontSize}px; +export const tableCSS = css` + font-size: var(--ac-global-font-size-s); width: 100%; border-collapse: separate; border-spacing: 0; @@ -13,7 +13,8 @@ export const tableCSS = (theme: Theme) => css` z-index: 1; tr { th { - padding: ${theme.spacing.margin4}px ${theme.spacing.margin16}px; + padding: var(--ac-global-dimension-size-50) + var(--ac-global-dimension-size-200); background-color: var(--ac-global-color-grey-100); position: relative; text-align: left; @@ -26,8 +27,8 @@ export const tableCSS = (theme: Theme) => css` cursor: pointer; } .sort-icon { - margin-left: ${theme.spacing.margin4}px; - font-size: ${theme.typography.sizes.small.fontSize}px; + margin-left: var(--ac-global-dimension-size-50); + font-size: var(--ac-global-font-size-xs); vertical-align: middle; display: inline-block; } @@ -70,7 +71,8 @@ export const tableCSS = (theme: Theme) => css` background-color: rgba(var(--ac-global-color-grey-300-rgb), 0.3); } & > td { - padding: ${theme.spacing.margin8}px ${theme.spacing.margin16}px; + padding: var(--ac-global-dimension-size-100) + var(--ac-global-dimension-size-200); } } } @@ -89,24 +91,23 @@ export const borderedTableCSS = css` } `; -export const selectableTableCSS = (theme: Theme) => - css( - tableCSS(theme), - css` - tbody:not(.is-empty) { - tr { - cursor: pointer; - } +export const selectableTableCSS = css( + tableCSS, + css` + tbody:not(.is-empty) { + tr { + cursor: pointer; } - ` - ); + } + ` +); -export const paginationCSS = (theme: Theme) => css` +export const paginationCSS = css` display: flex; justify-content: flex-end; align-items: center; - padding: ${theme.spacing.margin8}px; - gap: ${theme.spacing.margin4}px; + padding: var(--ac-global-dimension-size-100); + gap: var(--ac-global-dimension-size-50); border-top: 1px solid var(--ac-global-color-grey-300); `; diff --git a/app/src/components/trace/AnnotationActionMenu.tsx b/app/src/components/trace/AnnotationActionMenu.tsx index 983f14e194..1e700338ec 100644 --- a/app/src/components/trace/AnnotationActionMenu.tsx +++ b/app/src/components/trace/AnnotationActionMenu.tsx @@ -1,8 +1,8 @@ import React from "react"; -import { ActionMenu, Item, Text } from "@arizeai/components"; +import { ActionMenu, Item } from "@arizeai/components"; -import { Flex, Icon, Icons } from "@phoenix/components"; +import { Flex, Icon, Icons, Text } from "@phoenix/components"; type AnnotationActionMenuProps = { onDelete: () => void; diff --git a/app/src/components/trace/LatencyText.tsx b/app/src/components/trace/LatencyText.tsx index f1e731b74d..e96facf43e 100644 --- a/app/src/components/trace/LatencyText.tsx +++ b/app/src/components/trace/LatencyText.tsx @@ -1,16 +1,14 @@ import React, { useMemo } from "react"; -import { Text, TextProps } from "@arizeai/components"; - -import { Flex, Icon, Icons } from "@phoenix/components"; +import { Flex, Icon, Icons, Text, TextProps } from "@phoenix/components"; import { formatFloat } from "@phoenix/utils/numberFormatUtils"; export function LatencyText({ latencyMs, - textSize = "medium", + size = "M", showIcon = true, }: { latencyMs: number; - textSize?: TextProps["textSize"]; + size?: TextProps["size"]; /** * Whether to show the clock icon. * @default true @@ -43,11 +41,11 @@ export function LatencyText({ gap="size-50" > {showIcon ? ( - + } /> ) : null} - + {latencyText} diff --git a/app/src/components/trace/SpanAnnotationActionMenu.tsx b/app/src/components/trace/SpanAnnotationActionMenu.tsx index 355c2734f8..621fb61d52 100644 --- a/app/src/components/trace/SpanAnnotationActionMenu.tsx +++ b/app/src/components/trace/SpanAnnotationActionMenu.tsx @@ -6,10 +6,10 @@ import React, { } from "react"; import { graphql, useMutation } from "react-relay"; -import { Dialog, DialogContainer, Text } from "@arizeai/components"; +import { Dialog, DialogContainer } from "@arizeai/components"; import { NoticeConfig } from "@arizeai/components/dist/notification/types"; -import { Button, Flex, View } from "@phoenix/components"; +import { Button, Flex, Text, View } from "@phoenix/components"; import { SpanAnnotationActionMenuDeleteMutation } from "./__generated__/SpanAnnotationActionMenuDeleteMutation.graphql"; import { AnnotationActionMenu } from "./AnnotationActionMenu"; diff --git a/app/src/components/trace/TokenCount.tsx b/app/src/components/trace/TokenCount.tsx index c1185b331f..047957bb2a 100644 --- a/app/src/components/trace/TokenCount.tsx +++ b/app/src/components/trace/TokenCount.tsx @@ -1,15 +1,9 @@ import React from "react"; import { css } from "@emotion/react"; -import { - Text, - TextProps, - Tooltip, - TooltipTrigger, - TriggerWrap, -} from "@arizeai/components"; +import { Tooltip, TooltipTrigger, TriggerWrap } from "@arizeai/components"; -import { Flex, Icon, Icons } from "@phoenix/components"; +import { Flex, Icon, Icons, Text, TextProps } from "@phoenix/components"; type TokenCountProps = { /** @@ -27,7 +21,7 @@ type TokenCountProps = { /** * The size of the icon and text */ - textSize?: TextProps["textSize"]; + size?: TextProps["size"]; }; /** @@ -37,7 +31,7 @@ export function TokenCount(props: TokenCountProps) { return ( - {props.tokenCountTotal} + {props.tokenCountTotal} @@ -60,7 +54,7 @@ function TokenItem({ ...textProps }: { children: number; - textSize?: TextProps["textSize"]; + size?: TextProps["size"]; }) { return ( diff --git a/app/src/components/trace/TraceTree.tsx b/app/src/components/trace/TraceTree.tsx index 09055ebff0..d318cd8995 100644 --- a/app/src/components/trace/TraceTree.tsx +++ b/app/src/components/trace/TraceTree.tsx @@ -335,11 +335,11 @@ function SpanTreeEdgeConnector({