Update text style and use it more consistently

src/components/Box.tsx

@@ -1,7 +1,5 @@
 import { styled } from "@storybook/theming";
 
-import { Text } from "./Text";
-
 export const Box = styled.div<{ warning?: boolean }>(
   ({ theme }) => ({
     display: "flex",
@@ -20,13 +18,6 @@ export const Box = styled.div<{ warning?: boolean }>(
     warning && { background: theme.base === "dark" ? "#342e1a" : theme.background.warning }
 );
 
-export const BoxContent = styled(Text)(({ theme }) => ({
-  flex: 1,
-  textAlign: "left",
-  whiteSpace: "pre-wrap",
-  color: theme.base === "light" ? theme.color.darker : theme.color.lighter,
-}));
-
 export const BoxTitle = styled.b(() => ({
   display: "block",
   marginBottom: 2,

src/components/BuildProgressBarInline.tsx

@@ -14,23 +14,19 @@ const ProgressTextWrapper = styled(Text)({
   marginTop: 15,
 });
 
-const StyledBuildProgressLabel = styled(BuildProgressLabel)({
-  fontSize: 12,
-});
-
 export function BuildProgressInline({
   localBuildProgress,
 }: {
   localBuildProgress: LocalBuildProgress;
 }) {
   return (
-    <ProgressTextWrapper small as="div">
+    <ProgressTextWrapper center small>
       <ProgressTrack>
         {typeof localBuildProgress.buildProgressPercentage === "number" && (
           <ProgressBar style={{ width: `${localBuildProgress.buildProgressPercentage}%` }} />
         )}
       </ProgressTrack>
-      <StyledBuildProgressLabel localBuildProgress={localBuildProgress} />
+      <BuildProgressLabel center muted small localBuildProgress={localBuildProgress} />
     </ProgressTextWrapper>
   );
 }

src/components/BuildProgressLabel.tsx

@@ -1,30 +1,24 @@
-import { styled } from "@storybook/theming";
-import React from "react";
+import React, { ComponentProps } from "react";
 
 import { BUILD_STEP_CONFIG } from "../buildSteps";
 import { LocalBuildProgress } from "../types";
+import { Text } from "./Text";
 
 interface BuildProgressLabelProps {
   localBuildProgress: LocalBuildProgress;
   withEmoji?: boolean;
 }
 
-const Label = styled.span({
-  fontSize: 14,
-  lineHeight: "20px",
-});
-
 export const BuildProgressLabel = ({
   localBuildProgress,
   withEmoji = false,
-
   ...props
-}: BuildProgressLabelProps) => {
+}: BuildProgressLabelProps & ComponentProps<typeof Text>) => {
   const { emoji, renderProgress } = BUILD_STEP_CONFIG[localBuildProgress.currentStep];
   const label = renderProgress(localBuildProgress);
   return (
-    <Label {...props}>
+    <Text {...props}>
       {withEmoji && emoji} {label}
-    </Label>
+    </Text>
   );
 };

src/components/SnapshotImage.tsx

@@ -153,7 +153,7 @@ export const SnapshotImage = ({
       {hasError && !latestImage && (
         <StyledStack>
           <PhotoIcon color={theme.base === "light" ? "currentColor" : theme.color.medium} />
-          <Text>
+          <Text center muted>
             A snapshot couldn’t be captured. This often occurs when a story has a code error.
             Confirm that this story successfully renders in your local Storybook and run the build
             again.

src/components/Text.tsx

@@ -1,8 +1,33 @@
 import { styled } from "@storybook/theming";
 
-export const Text = styled.div<{ small?: boolean }>(({ small }) => ({
-  fontSize: small ? 12 : 14,
-  lineHeight: small ? "18px" : "20px",
-  textAlign: "center",
-  textWrap: "balance",
-}));
+export const Text = styled.div<{ center?: boolean; muted?: boolean; small?: boolean }>(
+  ({ center, small, theme }) => ({
+    display: "inline-block",
+    color: theme.color.defaultText,
+    fontSize: small ? theme.typography.size.s1 : theme.typography.size.s2,
+    lineHeight: small ? "18px" : "20px",
+    textAlign: center ? "center" : "left",
+    textWrap: "balance",
+  }),
+  ({ muted, theme }) => muted && { color: theme.base === "light" ? theme.color.dark : "#C9CDCF" },
+  ({ theme }) => ({
+    b: {
+      color: theme.color.defaultText,
+    },
+    code: {
+      fontSize: theme.typography.size.s1,
+      border: `1px solid ${theme.appBorderColor}`,
+      borderRadius: 3,
+      padding: 2,
+    },
+    small: {
+      fontSize: theme.typography.size.s1,
+    },
+    span: {
+      whiteSpace: "nowrap",
+    },
+    svg: {
+      verticalAlign: "top",
+    },
+  })
+);

src/components/layout.tsx

@@ -1,5 +1,7 @@
 import { styled } from "@storybook/theming";
 
+import { Text as BaseText } from "./Text";
+
 export const Base = styled.div<{ hidden?: boolean }>(({ hidden, theme }) => ({
   background: theme.background.app,
   containerType: "size",
@@ -52,37 +54,3 @@ export const Col = styled.div<{ push?: boolean }>(
   },
   ({ push }) => push && { marginLeft: "auto" }
 );
-
-export const Text = styled.div(({ theme }) => ({
-  lineHeight: "18px",
-  color: `${theme.color.defaultText}99`,
-  b: {
-    color: theme.color.defaultText,
-  },
-  code: {
-    fontSize: theme.typography.size.s1,
-    border: `1px solid ${theme.appBorderColor}`,
-    borderRadius: 3,
-    padding: "0 3px",
-  },
-  small: {
-    fontSize: theme.typography.size.s1,
-  },
-  span: {
-    whiteSpace: "nowrap",
-  },
-  svg: {
-    verticalAlign: "top",
-  },
-  "@container (min-width: 800px)": {
-    br: {
-      verticalAlign: "top",
-      display: "inline-block",
-      content: "''",
-      background: theme.appBorderColor,
-      width: 1,
-      height: "100%",
-      margin: "0 6px",
-    },
-  },
-}));

src/screens/Authentication/SetSubdomain.tsx

@@ -68,7 +68,7 @@ export const SetSubdomain = ({ onBack, onSignIn }: SetSubdomainProps) => {
           <VisualTestsIcon />
         </div>
         <Heading>Sign in with SSO</Heading>
-        <Text>Enter your team&apos;s Chromatic URL.</Text>
+        <Text muted>Enter your team&apos;s Chromatic URL.</Text>
         <Form onSubmit={handleSubmit}>
           <SuffixInput
             autoFocus

src/screens/Authentication/SignIn.tsx

@@ -39,7 +39,7 @@ export const SignIn = ({ onBack, onSignIn, onSignInWithSSO }: SignInProps) => {
             <LinkIcon />
             <VisualTestsIcon />
             <Heading>Sign in to begin visual testing</Heading>
-            <Text>
+            <Text center muted>
               Pinpoint bugs instantly by connecting with cloud browsers that run visual tests in
               parallel.
             </Text>

src/screens/Authentication/Verify.tsx

@@ -7,7 +7,6 @@ import { BackButton } from "../../components/BackButton";
 import { Button } from "../../components/Button";
 import { Container } from "../../components/Container";
 import { Heading } from "../../components/Heading";
-import { BackIcon } from "../../components/icons/BackIcon";
 import { Screen } from "../../components/Screen";
 import { Stack } from "../../components/Stack";
 import { Text } from "../../components/Text";
@@ -148,10 +147,12 @@ export const Verify = ({
         <Stack>
           <div>
             <Heading>Verify your account</Heading>
-            <Text>
-              Check this verification code on Chromatic to grant access to your published
-              Storybooks.
-            </Text>
+            <div>
+              <Text center muted>
+                Check this verification code on Chromatic to grant access to your published
+                Storybooks.
+              </Text>
+            </div>
             <Digits>
               {userCode?.split("").map((char: string, index: number) => (
                 // eslint-disable-next-line react/no-array-index-key

src/screens/Authentication/Welcome.tsx

@@ -22,7 +22,7 @@ export const Welcome = ({ onNext, onUninstall }: WelcomeProps) => {
           <div>
             <VisualTestsIcon />
             <Heading>Visual tests</Heading>
-            <Text>
+            <Text center muted>
               Catch bugs in UI appearance automatically. Compare image snapshots to detect visual
               changes.
             </Text>

src/screens/Errors/BuildError.tsx

@@ -1,8 +1,7 @@
-import { styled } from "@storybook/theming";
-import React from "react";
+import React, { ReactNode } from "react";
 import stripAnsi from "strip-ansi";
 
-import { Box, BoxContent, BoxTitle } from "../../components/Box";
+import { Box } from "../../components/Box";
 import { Container } from "../../components/Container";
 import { Link } from "../../components/design-system";
 import { Heading } from "../../components/Heading";
@@ -12,9 +11,17 @@ import { Text } from "../../components/Text";
 import { DOCS_URL } from "../../constants";
 import { LocalBuildProgress } from "../../types";
 
-const StyledText = styled(Text)(({ theme }) => ({
-  color: theme.base === "light" ? theme.color.dark : "#C9CDCF",
-}));
+const NewlinesAsBreaks = ({ content }: { content: string }) => {
+  const lines = content.split(/\r?\n/);
+  return (
+    <>
+      {lines.reduce<ReactNode[]>(
+        (acc, line, index) => acc.concat([index && <br />, line].filter(Boolean)),
+        []
+      )}
+    </>
+  );
+};
 
 export const ErrorBox = ({
   localBuildProgress,
@@ -24,14 +31,16 @@ export const ErrorBox = ({
   title?: string;
 }) => (
   <Box warning>
-    <BoxContent>
+    <Text>
       <span>
         {title && <b>{title}: </b>}
-        {stripAnsi(
-          Array.isArray(localBuildProgress.originalError)
-            ? localBuildProgress.originalError[0]?.message
-            : localBuildProgress.originalError?.message || "Unknown error"
-        )}
+        <NewlinesAsBreaks
+          content={stripAnsi(
+            Array.isArray(localBuildProgress.originalError)
+              ? localBuildProgress.originalError[0]?.message
+              : localBuildProgress.originalError?.message || "Unknown error"
+          )}
+        />
       </span>{" "}
       <Link
         target="_blank"
@@ -40,7 +49,7 @@ export const ErrorBox = ({
       >
         {localBuildProgress.errorDetailsUrl ? "Details" : "Troubleshoot"}
       </Link>
-    </BoxContent>
+    </Text>
   </Box>
 );
 
@@ -57,9 +66,9 @@ export const BuildError = ({
         <Stack>
           <div>
             <Heading>Build failed</Heading>
-            <StyledText>
+            <Text center muted>
               Check the Storybook process on the command line for more details.
-            </StyledText>
+            </Text>
           </div>
           <ErrorBox localBuildProgress={localBuildProgress} />
 

src/screens/Errors/BuildLimited.tsx

@@ -1,4 +1,3 @@
-import { styled } from "@storybook/theming";
 import React from "react";
 
 import { Button } from "../../components/Button";
@@ -9,10 +8,6 @@ import { Stack } from "../../components/Stack";
 import { Text } from "../../components/Text";
 import { LocalBuildProgress } from "../../types";
 
-const StyledText = styled(Text)(({ theme }) => ({
-  color: theme.base === "light" ? theme.color.dark : "#C9CDCF",
-}));
-
 export const BuildLimited = ({
   children,
   localBuildProgress,
@@ -26,10 +21,10 @@ export const BuildLimited = ({
         <Stack>
           <div>
             <Heading>Snapshot limit reached</Heading>
-            <StyledText>
+            <Text center muted>
               Your account has reached its monthly snapshot limit. Visual testing is disabled.
               Upgrade your plan to increase your quota.
-            </StyledText>
+            </Text>
           </div>
 
           <Button asChild size="medium" variant="solid">

src/screens/Errors/GitNotFound.tsx

@@ -1,21 +1,17 @@
-import { styled } from "@storybook/theming";
+import { LockIcon } from "@storybook/icons";
 import React from "react";
 
-import { Box, BoxContent, BoxTitle } from "../../components/Box";
+import { Box, BoxTitle } from "../../components/Box";
 import { Code } from "../../components/Code";
 import { Container } from "../../components/Container";
-import { Icon, Link } from "../../components/design-system";
+import { Link } from "../../components/design-system";
 import { Heading } from "../../components/Heading";
 import { VisualTestsIcon } from "../../components/icons/VisualTestsIcon";
 import { Screen } from "../../components/Screen";
 import { Stack } from "../../components/Stack";
 import { Text } from "../../components/Text";
 import { useUninstallAddon } from "../Uninstalled/UninstallContext";
 
-const StyledText = styled(Text)(({ theme }) => ({
-  color: theme.base === "light" ? theme.color.dark : "#C9CDCF",
-}));
-
 export const GitNotFound = () => {
   const { uninstallAddon } = useUninstallAddon();
   return (
@@ -25,19 +21,19 @@ export const GitNotFound = () => {
           <div>
             <VisualTestsIcon />
             <Heading>Visual tests</Heading>
-            <StyledText>
+            <Text center muted>
               Catch bugs in UI appearance automatically. Compare image snapshots to detect visual
               changes.
-            </StyledText>
+            </Text>
           </div>
           <Box>
-            <Icon icon="lock" />
-            <BoxContent>
+            <LockIcon style={{ flexShrink: 0 }} />
+            <Text>
               <BoxTitle>Git not detected</BoxTitle>
               This addon requires Git to associate test results with commits and branches. Run{" "}
               <Code>git init</Code> and make your first commit
               <Code>git commit -m</Code> to get started!
-            </BoxContent>
+            </Text>
           </Box>
           <Link
             target="_blank"