refactor: migrate 57 more refresh-components/Text files to Opal Text (batch 2)

refactor: migrate 29 refresh-components/Text files to Opal Text (batch 1)
Convert boolean-flag Text API to string-enum props. Files with JSX children, conditional boolean props, or className left with TODOs.
2026-03-29 03:22:43 +00:00 · 2026-03-26 11:21:42 -07:00 · 2026-03-26 11:06:29 -07:00 · 2026-03-26 10:34:29 -07:00
235 changed files with 464 additions and 340 deletions
--- a/web/src/app/admin/add-connector/page.tsx
+++ b/web/src/app/admin/add-connector/page.tsx
@@ -31,6 +31,7 @@ import { Credential } from "@/lib/connectors/credentials";
 import { SettingsContext } from "@/providers/SettingsProvider";
 import SourceTile from "@/components/SourceTile";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { ADMIN_ROUTES } from "@/lib/admin-routes";

--- a/web/src/app/admin/api-key/OnyxApiKeyForm.tsx
+++ b/web/src/app/admin/api-key/OnyxApiKeyForm.tsx
@@ -4,7 +4,7 @@ import { createApiKey, updateApiKey } from "./lib";
 import Modal from "@/refresh-components/Modal";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
 import { FormikField } from "@/refresh-components/form/FormikField";
@@ -79,7 +79,7 @@ export default function OnyxApiKeyForm({
          {({ isSubmitting }) => (
            <Form className="w-full overflow-visible">
              <Modal.Body>
-                <Text as="p">
+                <Text as="p" color="text-05">
                  Choose a memorable name for your API key. This is optional and
                  can be added or changed later!
                </Text>
--- a/web/src/app/admin/api-key/page.tsx
+++ b/web/src/app/admin/api-key/page.tsx
@@ -29,6 +29,7 @@ import {
 import CreateButton from "@/refresh-components/buttons/CreateButton";
 import { Button } from "@opal/components";
 import CopyIconButton from "@/refresh-components/buttons/CopyIconButton";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgEdit, SvgInfo, SvgKey, SvgRefreshCw } from "@opal/icons";
 import { useCloudSubscription } from "@/hooks/useCloudSubscription";
--- a/web/src/app/admin/billing/BillingDetailsView.tsx
+++ b/web/src/app/admin/billing/BillingDetailsView.tsx
@@ -9,6 +9,7 @@ import Card from "@/refresh-components/cards/Card";
 import Button from "@/refresh-components/buttons/Button";
 import { Button as OpalButton } from "@opal/components";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Message from "@/refresh-components/messages/Message";
 import InfoBlock from "@/refresh-components/messages/InfoBlock";
--- a/web/src/app/admin/billing/CheckoutView.tsx
+++ b/web/src/app/admin/billing/CheckoutView.tsx
@@ -5,6 +5,7 @@ import { Section } from "@/layouts/general-layouts";
 import * as InputLayouts from "@/layouts/input-layouts";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Card from "@/refresh-components/cards/Card";
 import Separator from "@/refresh-components/Separator";
--- a/web/src/app/admin/billing/LicenseActivationCard.tsx
+++ b/web/src/app/admin/billing/LicenseActivationCard.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import Card from "@/refresh-components/cards/Card";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import InputFile from "@/refresh-components/inputs/InputFile";
 import { Section } from "@/layouts/general-layouts";
--- a/web/src/app/admin/billing/PlansView.tsx
+++ b/web/src/app/admin/billing/PlansView.tsx
@@ -22,6 +22,7 @@ import type { IconProps } from "@opal/types";
 import Card from "@/refresh-components/cards/Card";
 import Button from "@/refresh-components/buttons/Button";
 import { Button as OpalButton } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Section } from "@/layouts/general-layouts";

--- a/web/src/app/admin/billing/page.tsx
+++ b/web/src/app/admin/billing/page.tsx
@@ -5,6 +5,7 @@ import { useSearchParams, useRouter } from "next/navigation";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import { Section } from "@/layouts/general-layouts";
 import Button from "@/refresh-components/buttons/Button";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgArrowUpCircle, SvgWallet } from "@opal/icons";
 import type { IconProps } from "@opal/types";
--- a/web/src/app/admin/configuration/document-processing/page.tsx
+++ b/web/src/app/admin/configuration/document-processing/page.tsx
@@ -7,6 +7,7 @@ import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import useSWR from "swr";
 import { ThreeDotsLoader } from "@/components/Loading";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { cn } from "@/lib/utils";
 import { SvgLock } from "@opal/icons";
--- a/web/src/app/admin/configuration/image-generation/ImageGenerationContent.tsx
+++ b/web/src/app/admin/configuration/image-generation/ImageGenerationContent.tsx
@@ -2,7 +2,7 @@

 import { useState, useMemo } from "react";
 import useSWR from "swr";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { Select } from "@/refresh-components/cards";
 import { useCreateModal } from "@/refresh-components/contexts/ModalContext";
 import { toast } from "@/hooks/useToast";
@@ -135,10 +135,8 @@ export default function ImageGenerationContent() {
      <div className="flex flex-col gap-6">
        {/* Section Header */}
        <div className="flex flex-col gap-0.5">
-          <Text mainContentEmphasis text05>
-            Image Generation Model
-          </Text>
-          <Text secondaryBody text03>
+          <Text font="main-content-emphasis">Image Generation Model</Text>
+          <Text font="secondary-body" color="text-03">
            Select a model to generate images in chat.
          </Text>
        </div>
@@ -157,7 +155,7 @@ export default function ImageGenerationContent() {
        {/* Provider Groups */}
        {IMAGE_PROVIDER_GROUPS.map((group) => (
          <div key={group.name} className="flex flex-col gap-2">
-            <Text secondaryBody text03>
+            <Text font="secondary-body" color="text-03">
              {group.name}
            </Text>
            <div className="flex flex-col gap-2">
--- a/web/src/app/admin/configuration/llm/ModelConfigurationField.tsx
+++ b/web/src/app/admin/configuration/llm/ModelConfigurationField.tsx
@@ -8,6 +8,7 @@ import CreateButton from "@/refresh-components/buttons/CreateButton";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
 import { SvgX } from "@opal/icons";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 function ModelConfigurationRow({
--- a/web/src/app/admin/configuration/web-search/page.tsx
+++ b/web/src/app/admin/configuration/web-search/page.tsx
@@ -3,6 +3,7 @@
 import Image from "next/image";
 import { useMemo, useState, useReducer } from "react";
 import { InfoIcon } from "@/components/icons/icons";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import { Content } from "@opal/layouts";
--- a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";

 import { ValidSources } from "@/lib/types";
 import { Section } from "@/layouts/general-layouts";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import Separator from "@/refresh-components/Separator";
--- a/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx
@@ -10,7 +10,7 @@ import {
 import { IndexAttemptError } from "./types";
 import { localizeAndPrettify } from "@/lib/time";
 import Button from "@/refresh-components/buttons/Button";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { PageSelector } from "@/components/PageSelector";
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { SvgAlertTriangle } from "@opal/icons";
@@ -113,11 +113,11 @@ export default function IndexAttemptErrorsModal({
        <Modal.Body height="full">
          {!isResolvingErrors && (
            <div className="flex flex-col gap-2 flex-shrink-0">
-              <Text as="p">
+              <Text as="p" color="text-05">
                Below are the errors encountered during indexing. Each row
                represents a failed document or entity.
              </Text>
-              <Text as="p">
+              <Text as="p" color="text-05">
                Click the button below to kick off a full re-index to try and
                resolve these errors. This full re-index may take much longer
                than a normal update.
--- a/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx
@@ -21,6 +21,7 @@ import useSWR from "swr";
 import { errorHandlingFetcher } from "@/lib/fetcher";
 import { ThreeDotsLoader } from "@/components/Loading";
 import Modal from "@/refresh-components/Modal";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  SvgCheck,
--- a/web/src/app/admin/connector/[ccPairId]/ReIndexModal.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/ReIndexModal.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 import { toast } from "@/hooks/useToast";
 import { triggerIndexing } from "@/app/admin/connector/[ccPairId]/lib";
 import Modal from "@/refresh-components/Modal";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Separator from "@/refresh-components/Separator";
 import { SvgRefreshCw } from "@opal/icons";
--- a/web/src/app/admin/connector/[ccPairId]/page.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/page.tsx
@@ -7,6 +7,7 @@ import { SourceIcon } from "@/components/SourceIcon";
 import { CCPairStatus, PermissionSyncStatus } from "@/components/Status";
 import { toast } from "@/hooks/useToast";
 import CredentialSection from "@/components/credentials/CredentialSection";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  updateConnectorCredentialPairName,
--- a/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx
+++ b/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx
@@ -59,6 +59,7 @@ import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
 import { deleteConnector } from "@/lib/connector";
 import ConnectorDocsLink from "@/components/admin/connectors/ConnectorDocsLink";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgKey, SvgAlertCircle } from "@opal/icons";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
--- a/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx
+++ b/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx
@@ -19,7 +19,6 @@ import { errorHandlingFetcher } from "@/lib/fetcher";
 import { buildSimilarCredentialInfoURL } from "@/app/admin/connector/[ccPairId]/lib";
 import { Credential } from "@/lib/connectors/credentials";
 import { useFederatedConnectors } from "@/lib/hooks";
-import Text from "@/refresh-components/texts/Text";
 import { useToastFromQuery } from "@/hooks/useToast";

 export default function ConnectorWrapper({
--- a/web/src/app/admin/connectors/[connector]/pages/FieldRendering.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/FieldRendering.tsx
@@ -15,7 +15,7 @@ import * as InputLayouts from "@/layouts/input-layouts";
 import { Content } from "@opal/layouts";
 import CheckboxField from "@/refresh-components/form/LabeledCheckboxField";
 import InputTextAreaField from "@/refresh-components/form/InputTextAreaField";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";

 // Define a general type for form values
 type FormValues = Record<string, any>;
@@ -57,7 +57,7 @@ const TabsField: FC<TabsFieldProps> = ({

      {/* Ensure there's at least one tab before rendering */}
      {tabField.tabs.length === 0 ? (
-        <Text text03 secondaryBody>
+        <Text color="text-03" font="secondary-body">
          No tabs to display.
        </Text>
      ) : (
@@ -253,7 +253,7 @@ export const RenderField: FC<RenderFieldProps> = ({
        )
      ) : field.type === "string_tab" ? (
        <GeneralLayouts.Section>
-          <Text text03 secondaryBody>
+          <Text color="text-03" font="secondary-body">
            {description}
          </Text>
        </GeneralLayouts.Section>
--- a/web/src/app/admin/discord-bot/BotConfigCard.tsx
+++ b/web/src/app/admin/discord-bot/BotConfigCard.tsx
@@ -2,6 +2,7 @@

 import { useState } from "react";
 import { Section } from "@/layouts/general-layouts";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Card from "@/refresh-components/cards/Card";
 import { Button } from "@opal/components";
--- a/web/src/app/admin/discord-bot/[guild-id]/DiscordChannelsTable.tsx
+++ b/web/src/app/admin/discord-bot/[guild-id]/DiscordChannelsTable.tsx
@@ -11,7 +11,7 @@ import {
 import Switch from "@/refresh-components/inputs/Switch";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
 import EmptyMessage from "@/refresh-components/EmptyMessage";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { Section } from "@/layouts/general-layouts";
 import {
  DiscordChannelConfig,
@@ -95,9 +95,7 @@ export function DiscordChannelsTable({
                  width="fit"
                >
                  <ChannelIcon width={16} height={16} />
-                  <Text text04 mainUiBody>
-                    {channel.channel_name}
-                  </Text>
+                  <Text>{channel.channel_name}</Text>
                </Section>
              </TableCell>
              <TableCell>
--- a/web/src/app/admin/discord-bot/[guild-id]/page.tsx
+++ b/web/src/app/admin/discord-bot/[guild-id]/page.tsx
@@ -8,11 +8,10 @@ import { toast } from "@/hooks/useToast";
 import { Section } from "@/layouts/general-layouts";
 import { ContentAction } from "@opal/layouts";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
-import Text from "@/refresh-components/texts/Text";
+import { Button, Text } from "@opal/components";
 import Card from "@/refresh-components/cards/Card";
 import { Callout } from "@/components/ui/callout";
 import Message from "@/refresh-components/messages/Message";
-import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
 import { SvgServer } from "@opal/icons";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
@@ -121,7 +120,7 @@ function GuildDetailContent({
        />

        {!isRegistered ? (
-          <Text text03 secondaryBody>
+          <Text color="text-03" font="secondary-body">
            Channel configuration will be available after the server is
            registered.
          </Text>
--- a/web/src/app/admin/discord-bot/page.tsx
+++ b/web/src/app/admin/discord-bot/page.tsx
@@ -6,7 +6,7 @@ import { ErrorCallout } from "@/components/ErrorCallout";
 import { toast } from "@/hooks/useToast";
 import { Section } from "@/layouts/general-layouts";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import CreateButton from "@/refresh-components/buttons/CreateButton";
 import Modal from "@/refresh-components/Modal";
 import CopyIconButton from "@/refresh-components/buttons/CopyIconButton";
@@ -76,7 +76,7 @@ function DiscordBotContent() {
            description="This key will only be shown once!"
          />
          <Modal.Body>
-            <Text text04 mainUiBody>
+            <Text>
              Copy the command and send it from any text channel in your server!
            </Text>
            <Card variant="secondary">
@@ -85,8 +85,8 @@ function DiscordBotContent() {
                justifyContent="between"
                alignItems="center"
              >
-                <Text text03 secondaryMono>
-                  !register {registrationKey}
+                <Text color="text-03" font="secondary-mono">
+                  {`!register ${registrationKey}`}
                </Text>
                <CopyIconButton
                  getCopyText={() => `!register ${registrationKey}`}
@@ -103,7 +103,7 @@ function DiscordBotContent() {
          justifyContent="between"
          alignItems="center"
        >
-          <Text mainContentEmphasis text05>
+          <Text font="main-content-emphasis" color="text-05">
            Server Configurations
          </Text>
          <CreateButton
--- a/web/src/app/admin/document-index-migration/page.tsx
+++ b/web/src/app/admin/document-index-migration/page.tsx
@@ -9,7 +9,7 @@ const route = ADMIN_ROUTES.INDEX_MIGRATION;

 import Card from "@/refresh-components/cards/Card";
 import { Content, ContentAction } from "@opal/layouts";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
 import Button from "@/refresh-components/buttons/Button";
 import { errorHandlingFetcher } from "@/lib/fetcher";
@@ -38,10 +38,10 @@ function MigrationStatusSection() {
  if (isLoading) {
    return (
      <Card>
-        <Text headingH3>Migration Status</Text>
-        <Text mainUiBody text03>
-          Loading...
+        <Text font="heading-h3" color="text-05">
+          Migration Status
        </Text>
+        <Text color="text-03">Loading...</Text>
      </Card>
    );
  }
@@ -49,10 +49,10 @@ function MigrationStatusSection() {
  if (error) {
    return (
      <Card>
-        <Text headingH3>Migration Status</Text>
-        <Text mainUiBody text03>
-          Failed to load migration status.
+        <Text font="heading-h3" color="text-05">
+          Migration Status
        </Text>
+        <Text color="text-03">Failed to load migration status.</Text>
      </Card>
    );
  }
@@ -73,14 +73,16 @@ function MigrationStatusSection() {

  return (
    <Card>
-      <Text headingH3>Migration Status</Text>
+      <Text font="heading-h3" color="text-05">
+        Migration Status
+      </Text>

      <ContentAction
        title="Started"
        sizePreset="main-ui"
        variant="section"
        rightChildren={
-          <Text mainUiBody>
+          <Text color="text-05">
            {hasStarted ? formatTimestamp(data.created_at!) : "Not started"}
          </Text>
        }
@@ -91,7 +93,7 @@ function MigrationStatusSection() {
        sizePreset="main-ui"
        variant="section"
        rightChildren={
-          <Text mainUiBody>
+          <Text color="text-05">
            {progressPercentage !== null
              ? `${totalChunksMigrated} (approx. progress ${Math.round(
                  progressPercentage
@@ -106,7 +108,7 @@ function MigrationStatusSection() {
        sizePreset="main-ui"
        variant="section"
        rightChildren={
-          <Text mainUiBody>
+          <Text color="text-05">
            {hasCompleted
              ? formatTimestamp(data.migration_completed_at!)
              : hasStarted
@@ -159,10 +161,10 @@ function RetrievalSourceSection() {
  if (isLoading) {
    return (
      <Card>
-        <Text headingH3>Retrieval Source</Text>
-        <Text mainUiBody text03>
-          Loading...
+        <Text font="heading-h3" color="text-05">
+          Retrieval Source
        </Text>
+        <Text color="text-03">Loading...</Text>
      </Card>
    );
  }
@@ -170,10 +172,10 @@ function RetrievalSourceSection() {
  if (error) {
    return (
      <Card>
-        <Text headingH3>Retrieval Source</Text>
-        <Text mainUiBody text03>
-          Failed to load retrieval settings.
+        <Text font="heading-h3" color="text-05">
+          Retrieval Source
        </Text>
+        <Text color="text-03">Failed to load retrieval settings.</Text>
      </Card>
    );
  }
--- a/web/src/app/admin/embeddings/modals/ChangeCredentialsModal.tsx
+++ b/web/src/app/admin/embeddings/modals/ChangeCredentialsModal.tsx
@@ -3,6 +3,7 @@
 import React, { useRef, useState } from "react";
 import Modal from "@/refresh-components/Modal";
 import { Callout } from "@/components/ui/callout";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Separator from "@/refresh-components/Separator";
 import Button from "@/refresh-components/buttons/Button";
--- a/web/src/app/admin/embeddings/modals/DeleteCredentialsModal.tsx
+++ b/web/src/app/admin/embeddings/modals/DeleteCredentialsModal.tsx
@@ -1,4 +1,5 @@
 import Modal from "@/refresh-components/Modal";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import { Callout } from "@/components/ui/callout";
--- a/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx
+++ b/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx
@@ -1,5 +1,6 @@
 import Modal from "@/refresh-components/Modal";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgAlertTriangle } from "@opal/icons";
 export interface InstantSwitchConfirmModalProps {
--- a/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx
+++ b/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx
@@ -1,4 +1,5 @@
 import Modal from "@/refresh-components/Modal";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Callout } from "@/components/ui/callout";
 import { Button } from "@opal/components";
--- a/web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx
+++ b/web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Callout } from "@/components/ui/callout";
 import { Button } from "@opal/components";
--- a/web/src/app/admin/embeddings/modals/SelectModelModal.tsx
+++ b/web/src/app/admin/embeddings/modals/SelectModelModal.tsx
@@ -1,5 +1,6 @@
 import Modal from "@/refresh-components/Modal";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { CloudEmbeddingModel } from "@/components/embedding/interfaces";
 import { SvgServer } from "@opal/icons";
--- a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
+++ b/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
@@ -4,6 +4,7 @@ import { toast } from "@/hooks/useToast";

 import EmbeddingModelSelection from "../EmbeddingModelSelectionForm";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Button from "@/refresh-components/buttons/Button";
 import { Button as OpalButton } from "@opal/components";
--- a/web/src/app/admin/kg/KGEntityTypes.tsx
+++ b/web/src/app/admin/kg/KGEntityTypes.tsx
@@ -8,6 +8,7 @@ import { ValidSources } from "@/lib/types";
 import { FaCircleQuestion } from "react-icons/fa6";
 import { CheckmarkIcon } from "@/components/icons/icons";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import { cn } from "@/lib/utils";
--- a/web/src/app/admin/kg/page.tsx
+++ b/web/src/app/admin/kg/page.tsx
@@ -28,6 +28,7 @@ import Title from "@/components/ui/title";
 import { redirect } from "next/navigation";
 import { useIsKGExposed } from "@/app/admin/kg/utils";
 import KGEntityTypes from "@/app/admin/kg/KGEntityTypes";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { cn } from "@/lib/utils";
 import { SvgSettings } from "@opal/icons";
--- a/web/src/app/admin/scim/ScimModal.tsx
+++ b/web/src/app/admin/scim/ScimModal.tsx
@@ -1,9 +1,8 @@
 import { SvgDownload, SvgKey, SvgRefreshCw } from "@opal/icons";
 import { Interactive } from "@opal/core";
 import { Section } from "@/layouts/general-layouts";
-import { Button } from "@opal/components";
+import { Button, Text } from "@opal/components";
 import { Disabled } from "@opal/core";
-import Text from "@/refresh-components/texts/Text";
 import CopyIconButton from "@/refresh-components/buttons/CopyIconButton";
 import InputTextArea from "@/refresh-components/inputs/InputTextArea";
 import Modal, { BasicModalFooter } from "@/refresh-components/Modal";
@@ -63,7 +62,7 @@ export default function ScimModal({
          }
        >
          <Section alignItems="start" gap={0.5}>
-            <Text as="p" text03>
+            <Text as="p" color="text-03">
              Your current SCIM token will be revoked and a new token will be
              generated. You will need to update the token on your identity
              provider before SCIM provisioning will resume.
--- a/web/src/app/admin/scim/ScimSyncCard.tsx
+++ b/web/src/app/admin/scim/ScimSyncCard.tsx
@@ -4,6 +4,7 @@ import { Section } from "@/layouts/general-layouts";
 import Card from "@/refresh-components/cards/Card";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Separator from "@/refresh-components/Separator";
 import { timeAgo } from "@/lib/time";
--- a/web/src/app/admin/scim/page.tsx
+++ b/web/src/app/admin/scim/page.tsx
@@ -7,7 +7,7 @@ import { toast } from "@/hooks/useToast";
 import { useScimToken } from "@/hooks/useScimToken";
 import { useCreateModal } from "@/refresh-components/contexts/ModalContext";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { ThreeDotsLoader } from "@/components/Loading";

 import type { ScimTokenCreatedResponse, ScimModalView } from "./interfaces";
@@ -43,7 +43,7 @@ function ScimContent() {

  if (tokenError && !is404) {
    return (
-      <Text as="p" text03>
+      <Text as="p" color="text-03">
        Failed to load SCIM token status.
      </Text>
    );
--- a/web/src/app/app/components/AgentDescription.tsx
+++ b/web/src/app/app/components/AgentDescription.tsx
@@ -1,5 +1,6 @@
 "use client";

+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { MinimalPersonaSnapshot } from "@/app/admin/agents/interfaces";

--- a/web/src/app/app/components/AppPopup.tsx
+++ b/web/src/app/app/components/AppPopup.tsx
@@ -3,6 +3,7 @@
 import Modal from "@/refresh-components/Modal";
 import { SettingsContext } from "@/providers/SettingsProvider";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { FormField } from "@/refresh-components/form/FormField";
 import Checkbox from "@/refresh-components/inputs/Checkbox";
--- a/web/src/app/app/components/WelcomeMessage.tsx
+++ b/web/src/app/app/components/WelcomeMessage.tsx
@@ -6,7 +6,7 @@ import {
  GREETING_MESSAGES,
 } from "@/lib/chat/greetingMessages";
 import AgentAvatar from "@/refresh-components/avatars/AgentAvatar";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { MinimalPersonaSnapshot } from "@/app/admin/agents/interfaces";
 import { useState, useEffect } from "react";
 import { useSettingsContext } from "@/providers/SettingsProvider";
@@ -41,7 +41,7 @@ export default function WelcomeMessage({
    content = (
      <div data-testid="onyx-logo" className="flex flex-row items-center gap-4">
        <Logo folded size={32} />
-        <Text as="p" headingH2>
+        <Text as="p" font="heading-h2" color="text-05">
          {greeting}
        </Text>
      </div>
@@ -54,7 +54,7 @@ export default function WelcomeMessage({
          className="flex flex-row items-center gap-3"
        >
          <AgentAvatar agent={agent} size={36} />
-          <Text as="p" headingH2>
+          <Text as="p" font="heading-h2" color="text-05">
            {agent.name}
          </Text>
        </div>
--- a/web/src/app/app/components/projects/ProjectChatSessionList.tsx
+++ b/web/src/app/app/components/projects/ProjectChatSessionList.tsx
@@ -8,6 +8,7 @@ import { ChatSession } from "@/app/app/interfaces";
 import AgentAvatar from "@/refresh-components/avatars/AgentAvatar";
 import { useAgents } from "@/hooks/useAgents";
 import { formatRelativeTime } from "./project_utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { cn } from "@/lib/utils";
 import { UNNAMED_CHAT } from "@/lib/constants";
--- a/web/src/app/app/components/projects/ProjectContextPanel.tsx
+++ b/web/src/app/app/components/projects/ProjectContextPanel.tsx
@@ -12,6 +12,7 @@ import { Button } from "@opal/components";
 import AddInstructionModal from "@/components/modals/AddInstructionModal";
 import UserFilesModal from "@/components/modals/UserFilesModal";
 import { useCreateModal } from "@/refresh-components/contexts/ModalContext";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import CreateButton from "@/refresh-components/buttons/CreateButton";
 import { FileCard, FileCardSkeleton } from "@/sections/cards/FileCard";
--- a/web/src/app/app/message/CodeBlock.tsx
+++ b/web/src/app/app/message/CodeBlock.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import React, { useState, ReactNode, useCallback, useMemo, memo } from "react";
 import { SvgCheck, SvgCode, SvgCopy } from "@opal/icons";

@@ -48,14 +48,14 @@ export const CodeBlock = memo(function CodeBlock({
      {copied ? (
        <div className="flex items-center space-x-2">
          <SvgCheck height={14} width={14} stroke="currentColor" />
-          <Text as="p" secondaryMono>
+          <Text as="p" font="secondary-mono" color="text-05">
            Copied!
          </Text>
        </div>
      ) : (
        <div className="flex items-center space-x-2">
          <SvgCopy height={14} width={14} stroke="currentColor" />
-          <Text as="p" secondaryMono>
+          <Text as="p" font="secondary-mono" color="text-05">
            Copy
          </Text>
        </div>
@@ -131,7 +131,9 @@ export const CodeBlock = memo(function CodeBlock({
                stroke="currentColor"
                className="my-auto"
              />
-              <Text secondaryMono>{language}</Text>
+              <Text font="secondary-mono" color="text-05">
+                {language}
+              </Text>
              {codeText && <CopyButton />}
            </div>
          )}
--- a/web/src/app/app/message/HumanMessage.tsx
+++ b/web/src/app/app/message/HumanMessage.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { FileDescriptor } from "@/app/app/interfaces";
 import "katex/dist/katex.min.css";
 import MessageSwitcher from "@/app/app/message/MessageSwitcher";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { cn } from "@/lib/utils";
 import useScreenSize from "@/hooks/useScreenSize";
--- a/web/src/app/app/message/MemoizedTextComponents.tsx
+++ b/web/src/app/app/message/MemoizedTextComponents.tsx
@@ -14,6 +14,7 @@ import { SubQuestionDetail, CitationMap } from "../interfaces";
 import { ValidSources } from "@/lib/types";
 import { ProjectFile } from "../projects/projectsService";
 import { BlinkingBar } from "./BlinkingBar";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import SourceTag from "@/refresh-components/buttons/source-tag/SourceTag";
 import {
--- a/web/src/app/app/message/MessageSwitcher.tsx
+++ b/web/src/app/app/message/MessageSwitcher.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgChevronLeft, SvgChevronRight } from "@opal/icons";
 const DISABLED_MESSAGE = "Wait for agent message to complete";
--- a/web/src/app/app/message/messageComponents/AgentMessage.tsx
+++ b/web/src/app/app/message/messageComponents/AgentMessage.tsx
@@ -20,7 +20,7 @@ import { usePacedTurnGroups } from "@/app/app/message/messageComponents/timeline
 import MessageToolbar from "@/app/app/message/messageComponents/MessageToolbar";
 import { LlmDescriptor, LlmManager } from "@/lib/hooks";
 import { Message } from "@/app/app/interfaces";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { AgentTimeline } from "@/app/app/message/messageComponents/timeline/AgentTimeline";
 import { useVoiceMode } from "@/providers/VoiceModeProvider";
 import { getTextContent } from "@/app/app/services/packetUtils";
@@ -319,7 +319,7 @@ const AgentMessage = React.memo(function AgentMessage({
        {/* Show stopped message when user cancelled and no display content */}
        {pacedDisplayGroups.length === 0 &&
          stopReason === StopReason.USER_CANCELLED && (
-            <Text as="p" secondaryBody text04>
+            <Text as="p" font="secondary-body">
              User has stopped generation
            </Text>
          )}
--- a/web/src/app/app/message/messageComponents/renderers/CustomToolRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/renderers/CustomToolRenderer.tsx
@@ -10,6 +10,7 @@ import {
 } from "../../../services/streamingModels";
 import { MessageRenderer, RenderType } from "../interfaces";
 import { buildImgUrl } from "../../../components/files/images/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  SvgActions,
--- a/web/src/app/app/message/messageComponents/renderers/MessageTextRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/renderers/MessageTextRenderer.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 import {
--- a/web/src/app/app/message/messageComponents/timeline/AgentTimeline.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/AgentTimeline.tsx
@@ -6,6 +6,7 @@ import { FullChatState, RenderType } from "../interfaces";
 import { TurnGroup } from "./transformers";
 import { cn } from "@/lib/utils";
 import AgentAvatar from "@/refresh-components/avatars/AgentAvatar";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { useTimelineExpansion } from "@/app/app/message/messageComponents/timeline/hooks/useTimelineExpansion";
 import { useTimelineMetrics } from "@/app/app/message/messageComponents/timeline/hooks/useTimelineMetrics";
--- a/web/src/app/app/message/messageComponents/timeline/headers/CompletedHeader.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/headers/CompletedHeader.tsx
@@ -2,9 +2,8 @@

 import React from "react";
 import { SvgFold, SvgExpand, SvgAddLines, SvgMaximize2 } from "@opal/icons";
-import { Button } from "@opal/components";
+import { Button, Text } from "@opal/components";
 import Tag from "@/refresh-components/buttons/Tag";
-import Text from "@/refresh-components/texts/Text";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
 import { Section } from "@/layouts/general-layouts";
 import { ContentAction } from "@opal/layouts";
@@ -64,7 +63,7 @@ function MemoryTagWithTooltip({
              height="auto"
            >
              <div className="p-1">
-                <Text as="p" secondaryBody text03>
+                <Text as="p" font="secondary-body" color="text-03">
                  {memoryText}
                </Text>
              </div>
@@ -174,7 +173,7 @@ export const CompletedHeader = React.memo(function CompletedHeader({
      className="flex items-center justify-between w-full"
    >
      <div className="flex items-center gap-2 px-[var(--timeline-header-text-padding-x)] py-[var(--timeline-header-text-padding-y)]">
-        <Text as="p" mainUiAction text03>
+        <Text as="p" font="main-ui-action" color="text-03">
          {isExpanded ? durationText : imageText ?? durationText}
        </Text>
        {memoryOperation && !isExpanded && (
--- a/web/src/app/app/message/messageComponents/timeline/headers/StoppedHeader.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/headers/StoppedHeader.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { SvgFold, SvgExpand } from "@opal/icons";
-import { Button } from "@opal/components";
-import Text from "@/refresh-components/texts/Text";
+import { Button, Text } from "@opal/components";
 import { cn, noProp } from "@/lib/utils";

 export interface StoppedHeaderProps {
@@ -31,7 +30,7 @@ export const StoppedHeader = React.memo(function StoppedHeader({
      aria-disabled={isInteractive ? undefined : true}
    >
      <div className="px-[var(--timeline-header-text-padding-x)] py-[var(--timeline-header-text-padding-y)]">
-        <Text as="p" mainUiAction text03>
+        <Text as="p" font="main-ui-action" color="text-03">
          Interrupted Thinking
        </Text>
      </div>
--- a/web/src/app/app/message/messageComponents/timeline/headers/StreamingHeader.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/headers/StreamingHeader.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { SvgFold, SvgExpand } from "@opal/icons";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { useStreamingDuration } from "../hooks/useStreamingDuration";
 import { formatDurationSeconds } from "@/lib/time";
--- a/web/src/app/app/message/messageComponents/timeline/primitives/TimelineStepContent.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/primitives/TimelineStepContent.tsx
@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 import { SvgFold, SvgExpand, SvgXOctagon } from "@opal/icons";
 import { IconProps } from "@opal/types";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { TimelineSurfaceBackground } from "@/app/app/message/messageComponents/timeline/primitives/TimelineSurface";

--- a/web/src/app/app/message/messageComponents/timeline/renderers/deepresearch/ResearchAgentRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/deepresearch/ResearchAgentRenderer.tsx
@@ -21,6 +21,7 @@ import {
 } from "@/app/app/message/messageComponents/timeline/TimelineRendererComponent";
 import { TimelineStepComposer } from "@/app/app/message/messageComponents/timeline/TimelineStepComposer";
 import ExpandableTextDisplay from "@/refresh-components/texts/ExpandableTextDisplay";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  processContent,
--- a/web/src/app/app/message/messageComponents/timeline/renderers/fetch/FetchToolRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/fetch/FetchToolRenderer.tsx
@@ -13,6 +13,7 @@ import {
  INITIAL_URLS_TO_SHOW,
  URLS_PER_EXPANSION,
 } from "./fetchStateUtils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgCircle } from "@opal/icons";

--- a/web/src/app/app/message/messageComponents/timeline/renderers/filereader/FileReaderToolRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/filereader/FileReaderToolRenderer.tsx
@@ -12,6 +12,7 @@ import {
 import { BlinkingBar } from "@/app/app/message/BlinkingBar";
 import { Section } from "@/layouts/general-layouts";
 import Card from "@/refresh-components/cards/Card";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 interface FileReaderState {
--- a/web/src/app/app/message/messageComponents/timeline/renderers/memory/MemoryToolRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/memory/MemoryToolRenderer.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/app/app/message/messageComponents/interfaces";
 import { BlinkingBar } from "@/app/app/message/BlinkingBar";
 import { constructCurrentMemoryState } from "./memoryStateUtils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgEditBig, SvgMaximize2 } from "@opal/icons";
 import { cn } from "@/lib/utils";
--- a/web/src/app/app/message/messageComponents/timeline/renderers/search/InternalSearchToolRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/search/InternalSearchToolRenderer.tsx
@@ -16,6 +16,7 @@ import {
  RESULTS_PER_EXPANSION,
  getMetadataTags,
 } from "./searchStateUtils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 const queryToSourceInfo = (query: string, index: number): SourceInfo => ({
--- a/web/src/app/app/message/messageComponents/timeline/renderers/search/WebSearchToolRenderer.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/search/WebSearchToolRenderer.tsx
@@ -13,6 +13,7 @@ import {
  INITIAL_QUERIES_TO_SHOW,
  QUERIES_PER_EXPANSION,
 } from "./searchStateUtils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 const queryToSourceInfo = (query: string, index: number): SourceInfo => ({
--- a/web/src/app/app/message/messageComponents/timeline/renderers/sharedMarkdownComponents.tsx
+++ b/web/src/app/app/message/messageComponents/timeline/renderers/sharedMarkdownComponents.tsx
@@ -1,4 +1,5 @@
 import type { Components } from "react-markdown";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 // Expanded view: normal spacing between paragraphs/lists
--- a/web/src/app/app/shared/[chatId]/SharedChatDisplay.tsx
+++ b/web/src/app/app/shared/[chatId]/SharedChatDisplay.tsx
@@ -12,11 +12,12 @@ import { Section } from "@/layouts/general-layouts";
 import { IllustrationContent } from "@opal/layouts";
 import SvgNotFound from "@opal/illustrations/not-found";
 import { Button } from "@opal/components";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
+import Text from "@/refresh-components/texts/Text";
 import { Persona } from "@/app/admin/agents/interfaces";
 import { MinimalOnyxDocument } from "@/lib/search/interfaces";
 import PreviewModal from "@/sections/modals/PreviewModal";
 import { UNNAMED_CHAT } from "@/lib/constants";
-import Text from "@/refresh-components/texts/Text";
 import useOnMount from "@/hooks/useOnMount";
 import SharedAppInputBar from "@/sections/input/SharedAppInputBar";

--- a/web/src/app/auth/error/AuthErrorContent.tsx
+++ b/web/src/app/auth/error/AuthErrorContent.tsx
@@ -1,6 +1,7 @@
 "use client";

 import AuthFlowContainer from "@/components/auth/AuthFlowContainer";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";

--- a/web/src/app/auth/impersonate/page.tsx
+++ b/web/src/app/auth/impersonate/page.tsx
@@ -11,6 +11,7 @@ import { toast } from "@/hooks/useToast";
 import { TextFormField } from "@/components/Field";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 const ImpersonateSchema = Yup.object().shape({
--- a/web/src/app/auth/login/LoginPage.tsx
+++ b/web/src/app/auth/login/LoginPage.tsx
@@ -6,8 +6,7 @@ import SignInButton from "@/app/auth/login/SignInButton";
 import EmailPasswordForm from "./EmailPasswordForm";
 import { AuthType, NEXT_PUBLIC_FORGOT_PASSWORD_ENABLED } from "@/lib/constants";
 import { useSendAuthRequiredMessage } from "@/lib/extension/utils";
-import Text from "@/refresh-components/texts/Text";
-import { Button } from "@opal/components";
+import { Button, Text } from "@opal/components";
 import Message from "@/refresh-components/messages/Message";

 interface LoginPageProps {
@@ -68,7 +67,7 @@ export default function LoginPage({
              />
              <div className="flex flex-row items-center w-full gap-2">
                <div className="flex-1 border-t border-text-01" />
-                <Text as="p" text03 mainUiMuted>
+                <Text as="p" color="text-03" font="main-ui-muted">
                  or
                </Text>
                <div className="flex-1 border-t border-text-01" />
--- a/web/src/app/auth/login/LoginText.tsx
+++ b/web/src/app/auth/login/LoginText.tsx
@@ -2,6 +2,7 @@

 import React, { useContext } from "react";
 import { SettingsContext } from "@/providers/SettingsProvider";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 export default function LoginText() {
--- a/web/src/app/auth/signup/page.tsx
+++ b/web/src/app/auth/signup/page.tsx
@@ -11,6 +11,7 @@ import SignInButton from "@/app/auth/login/SignInButton";
 import AuthFlowContainer from "@/components/auth/AuthFlowContainer";
 import ReferralSourceSelector from "./ReferralSourceSelector";
 import AuthErrorDisplay from "@/components/auth/AuthErrorDisplay";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { cn } from "@/lib/utils";
 import { AuthType } from "@/lib/constants";
--- a/web/src/app/components/nrf/SettingsPanel.tsx
+++ b/web/src/app/components/nrf/SettingsPanel.tsx
@@ -2,6 +2,7 @@

 import Switch from "@/refresh-components/inputs/Switch";
 import { useNRFPreferences } from "@/components/context/NRFPreferencesContext";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgX, SvgSettings, SvgSun, SvgMoon, SvgCheck } from "@opal/icons";
 import { Button } from "@opal/components";
--- a/web/src/app/craft/components/BigButton.tsx
+++ b/web/src/app/craft/components/BigButton.tsx
@@ -2,6 +2,7 @@

 import { forwardRef, type ButtonHTMLAttributes } from "react";
 import { cn } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 export interface BigButtonProps
--- a/web/src/app/craft/components/BuildLLMPopover.tsx
+++ b/web/src/app/craft/components/BuildLLMPopover.tsx
@@ -7,6 +7,7 @@ import {
  SvgChevronRight,
  SvgPlug,
 } from "@opal/icons";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import Popover, { PopoverMenu } from "@/refresh-components/Popover";
 import Switch from "@/refresh-components/inputs/Switch";
--- a/web/src/app/craft/components/BuildWelcome.tsx
+++ b/web/src/app/craft/components/BuildWelcome.tsx
@@ -2,7 +2,7 @@

 import { useRef } from "react";
 import { BuildFile } from "@/app/craft/contexts/UploadFilesContext";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import Logo from "@/refresh-components/Logo";
 import InputBar, { InputBarHandle } from "@/app/craft/components/InputBar";
 import SuggestedPrompts from "@/app/craft/components/SuggestedPrompts";
@@ -43,7 +43,7 @@ export default function BuildWelcome({
    <div className="h-full flex flex-col items-center justify-center px-4">
      <div className="flex flex-col items-center gap-4 mb-6">
        <Logo folded size={48} />
-        <Text headingH2 text05>
+        <Text font="heading-h2" color="text-05">
          What shall we craft today?
        </Text>
      </div>
--- a/web/src/app/craft/components/ConnectDataBanner.tsx
+++ b/web/src/app/craft/components/ConnectDataBanner.tsx
@@ -2,7 +2,7 @@

 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import {
  ConfluenceIcon,
  GoogleDriveIcon,
@@ -90,7 +90,7 @@ export default function ConnectDataBanner({

        {/* Center: Text and Arrow */}
        <div className="flex items-center justify-center gap-1">
-          <Text secondaryBody text03>
+          <Text font="secondary-body" color="text-03">
            Connect your data
          </Text>
          <SvgChevronRight className="h-4 w-4 text-text-03" />
--- a/web/src/app/craft/components/ConnectorBannersRow.tsx
+++ b/web/src/app/craft/components/ConnectorBannersRow.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { cn } from "@/lib/utils";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import {
  ConfluenceIcon,
  GoogleDriveIcon,
@@ -108,7 +108,7 @@ export default function ConnectorBannersRow({

        {/* Center: Text and Arrow */}
        <div className="flex items-center justify-center gap-1">
-          <Text secondaryBody text03>
+          <Text font="secondary-body" color="text-03">
            Connect your data
          </Text>
          <SvgChevronRight className="h-4 w-4 text-text-03" />
@@ -161,7 +161,7 @@ export default function ConnectorBannersRow({
        <SvgCalendar className="h-4 w-4 text-text-03" />

        {/* Text */}
-        <Text secondaryBody text03>
+        <Text font="secondary-body" color="text-03">
          Get help setting up connectors
        </Text>

--- a/web/src/app/craft/components/FileBrowser.tsx
+++ b/web/src/app/craft/components/FileBrowser.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { useState, useCallback, useEffect } from "react";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import {
--- a/web/src/app/craft/components/FilePreviewModal.tsx
+++ b/web/src/app/craft/components/FilePreviewModal.tsx
@@ -2,6 +2,7 @@

 import { useState, useEffect } from "react";
 import Modal from "@/refresh-components/Modal";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
--- a/web/src/app/craft/components/IntroContent.tsx
+++ b/web/src/app/craft/components/IntroContent.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { motion } from "motion/react";
 import { track, AnalyticsEvent } from "@/lib/analytics";
 import { OnyxLogoTypeIcon } from "@/components/icons/icons";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import BigButton from "@/app/craft/components/BigButton";

--- a/web/src/app/craft/components/OutputPanel.tsx
+++ b/web/src/app/craft/components/OutputPanel.tsx
@@ -20,6 +20,7 @@ import {
  exportDocx,
 } from "@/app/craft/services/apiServices";
 import { cn, getFileIcon } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  SvgGlobe,
--- a/web/src/app/craft/components/SandboxStatusIndicator.tsx
+++ b/web/src/app/craft/components/SandboxStatusIndicator.tsx
@@ -9,7 +9,7 @@ import {
  useIsPreProvisioningFailed,
 } from "@/app/craft/hooks/useBuildSessionStore";
 import { Card } from "@/components/ui/card";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";

 const STATUS_CONFIG = {
  provisioning: {
@@ -143,7 +143,7 @@ export default function SandboxStatusIndicator(
            exit={{ opacity: 0, y: -5 }}
            transition={{ duration: 0.2 }}
          >
-            <Text text05>{label}</Text>
+            <Text color="text-05">{label}</Text>
          </motion.span>
        </AnimatePresence>
      </Card>
--- a/web/src/app/craft/components/ShareButton.tsx
+++ b/web/src/app/craft/components/ShareButton.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { useState, useEffect } from "react";
-import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import { SvgLink, SvgCopy, SvgCheck, SvgX } from "@opal/icons";
 import { setSessionSharing } from "@/app/craft/services/apiServices";
--- a/web/src/app/craft/components/SideBar.tsx
+++ b/web/src/app/craft/components/SideBar.tsx
@@ -12,6 +12,7 @@ import {
 import { useUsageLimits } from "@/app/craft/hooks/useUsageLimits";
 import { CRAFT_SEARCH_PARAM_NAMES } from "@/app/craft/services/searchParams";
 import SidebarTab from "@/refresh-components/buttons/SidebarTab";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import SidebarWrapper from "@/sections/sidebar/SidebarWrapper";
 import SidebarBody from "@/sections/sidebar/SidebarBody";
--- a/web/src/app/craft/components/ToggleWarningModal.tsx
+++ b/web/src/app/craft/components/ToggleWarningModal.tsx
@@ -1,5 +1,6 @@
 "use client";

+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 interface ToggleWarningModalProps {
--- a/web/src/app/craft/components/UpgradePlanModal.tsx
+++ b/web/src/app/craft/components/UpgradePlanModal.tsx
@@ -1,5 +1,6 @@
 "use client";

+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgAlertTriangle } from "@opal/icons";
 import { UsageLimits } from "@/app/craft/types/streamingTypes";
--- a/web/src/app/craft/components/UserMessage.tsx
+++ b/web/src/app/craft/components/UserMessage.tsx
@@ -1,6 +1,6 @@
 "use client";

-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";

 interface UserMessageProps {
  content: string;
@@ -10,7 +10,7 @@ export default function UserMessage({ content }: UserMessageProps) {
  return (
    <div className="flex justify-end py-4">
      <div className="max-w-[80%] whitespace-break-spaces rounded-t-16 rounded-bl-16 bg-background-tint-02 py-3 px-4">
-        <Text as="p" mainContentBody>
+        <Text as="p" font="main-content-body" color="text-05">
          {content}
        </Text>
      </div>
--- a/web/src/app/craft/components/output-panel/ArtifactsTab.tsx
+++ b/web/src/app/craft/components/output-panel/ArtifactsTab.tsx
@@ -2,6 +2,7 @@

 import { useCallback, useEffect, useState } from "react";
 import useSWR from "swr";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import {
--- a/web/src/app/craft/components/output-panel/FilePreviewContent.tsx
+++ b/web/src/app/craft/components/output-panel/FilePreviewContent.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import useSWR from "swr";
 import { fetchFileContent } from "@/app/craft/services/apiServices";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgFileText } from "@opal/icons";
 import { Section } from "@/layouts/general-layouts";
--- a/web/src/app/craft/components/output-panel/FilesTab.tsx
+++ b/web/src/app/craft/components/output-panel/FilesTab.tsx
@@ -10,6 +10,7 @@ import {
 import { fetchDirectoryListing } from "@/app/craft/services/apiServices";
 import { FileSystemEntry } from "@/app/craft/types/streamingTypes";
 import { cn, getFileIcon } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  SvgHardDrive,
--- a/web/src/app/craft/components/output-panel/ImagePreview.tsx
+++ b/web/src/app/craft/components/output-panel/ImagePreview.tsx
@@ -2,7 +2,7 @@

 import { useState, useEffect } from "react";
 import { cn } from "@/lib/utils";
-import Text from "@/refresh-components/texts/Text";
+import { Text } from "@opal/components";
 import { SvgImage } from "@opal/icons";
 import { Section } from "@/layouts/general-layouts";

@@ -37,10 +37,10 @@ export default function ImagePreview({ src, fileName }: ImagePreviewProps) {
        padding={2}
      >
        <SvgImage size={48} className="stroke-text-02" />
-        <Text headingH3 text03>
+        <Text font="heading-h3" color="text-03">
          Failed to load image
        </Text>
-        <Text secondaryBody text02>
+        <Text font="secondary-body" color="text-02">
          The image could not be displayed
        </Text>
      </Section>
@@ -52,7 +52,7 @@ export default function ImagePreview({ src, fileName }: ImagePreviewProps) {
      <div className="flex-1 flex items-center justify-center p-4">
        {imageLoading && (
          <div className="absolute">
-            <Text secondaryBody text03>
+            <Text font="secondary-body" color="text-03">
              Loading image...
            </Text>
          </div>
--- a/web/src/app/craft/components/output-panel/PdfPreview.tsx
+++ b/web/src/app/craft/components/output-panel/PdfPreview.tsx
@@ -2,6 +2,7 @@

 import { useState, useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgFileText } from "@opal/icons";
 import { Section } from "@/layouts/general-layouts";
--- a/web/src/app/craft/components/output-panel/PptxPreview.tsx
+++ b/web/src/app/craft/components/output-panel/PptxPreview.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import useSWR from "swr";
 import { cn } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgChevronLeft, SvgChevronRight, SvgFileText } from "@opal/icons";
 import { Section } from "@/layouts/general-layouts";
--- a/web/src/app/craft/components/output-panel/UrlBar.tsx
+++ b/web/src/app/craft/components/output-panel/UrlBar.tsx
@@ -2,6 +2,7 @@

 import React from "react";
 import { cn } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
--- a/web/src/app/craft/onboarding/components/BuildOnboardingModal.tsx
+++ b/web/src/app/craft/onboarding/components/BuildOnboardingModal.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/lib/analytics";
 import { SvgArrowRight, SvgArrowLeft, SvgX } from "@opal/icons";
 import { cn } from "@/lib/utils";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  BuildUserInfo,
--- a/web/src/app/craft/onboarding/components/NoLlmProvidersModal.tsx
+++ b/web/src/app/craft/onboarding/components/NoLlmProvidersModal.tsx
@@ -2,6 +2,7 @@

 import { useState } from "react";
 import { useRouter } from "next/navigation";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgLock, SvgArrowRight } from "@opal/icons";
 import { logout } from "@/lib/user";
--- a/web/src/app/craft/onboarding/components/NotAllowedModal.tsx
+++ b/web/src/app/craft/onboarding/components/NotAllowedModal.tsx
@@ -2,6 +2,7 @@

 import { useState } from "react";
 import { useRouter } from "next/navigation";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { SvgLock, SvgArrowRight } from "@opal/icons";
 import { logout } from "@/lib/user";
--- a/web/src/app/craft/onboarding/components/OnboardingInfoPages.tsx
+++ b/web/src/app/craft/onboarding/components/OnboardingInfoPages.tsx
@@ -1,5 +1,6 @@
 "use client";

+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
 import {
--- a/web/src/app/craft/onboarding/components/OnboardingLlmSetup.tsx
+++ b/web/src/app/craft/onboarding/components/OnboardingLlmSetup.tsx
@@ -3,6 +3,7 @@
 import { SvgCheckCircle } from "@opal/icons";
 import { cn } from "@/lib/utils";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
 import { LLMProviderName, LLMProviderDescriptor } from "@/interfaces/llm";
--- a/web/src/app/craft/onboarding/components/OnboardingUserInfo.tsx
+++ b/web/src/app/craft/onboarding/components/OnboardingUserInfo.tsx
@@ -2,6 +2,7 @@

 import { cn } from "@/lib/utils";
 import { Disabled } from "@opal/core";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import {
  WorkArea,
--- a/web/src/app/craft/v1/configure/components/ComingSoonConnectors.tsx
+++ b/web/src/app/craft/v1/configure/components/ComingSoonConnectors.tsx
@@ -2,6 +2,7 @@

 import { useState } from "react";
 import Card from "@/refresh-components/cards/Card";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Content } from "@opal/layouts";
 import Separator from "@/refresh-components/Separator";
--- a/web/src/app/craft/v1/configure/components/CreateCredentialInline.tsx
+++ b/web/src/app/craft/v1/configure/components/CreateCredentialInline.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import { Section } from "@/layouts/general-layouts";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { Button } from "@opal/components";
 import { Disabled } from "@opal/core";
--- a/web/src/app/craft/v1/configure/components/DemoDataConfirmModal.tsx
+++ b/web/src/app/craft/v1/configure/components/DemoDataConfirmModal.tsx
@@ -1,5 +1,6 @@
 "use client";

+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";

 interface DemoDataConfirmModalProps {
--- a/web/src/app/craft/v1/configure/components/RequestConnectorModal.tsx
+++ b/web/src/app/craft/v1/configure/components/RequestConnectorModal.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { useState } from "react";
+// TODO(@raunakab): migrate this `refresh-components/Text` to `@opal/components` Text
 import Text from "@/refresh-components/texts/Text";
 import { cn } from "@/lib/utils";
 import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Raunak Bhagat	c079cd867a	refactor: migrate 57 more refresh-components/Text files to Opal Text (batch 2)	2026-03-26 11:21:42 -07:00
Raunak Bhagat	f1c1473903	refactor: migrate 29 refresh-components/Text files to Opal Text (batch 1) Convert boolean-flag Text API to string-enum props. Files with JSX children, conditional boolean props, or className left with TODOs.	2026-03-26 11:06:29 -07:00
Raunak Bhagat	4a67cc0a09	chore: add migration TODOs to all 235 refresh-components/Text imports	2026-03-26 10:34:29 -07:00