Move small and bold styles from global styles to markdown component (s…

…treamlit#9821)

## Describe your changes

This PR removes all the `small/strong/b`-related styles from global
styles and applies them in the Markdown component instead.

## Testing Plan

- No logical or visual changes. Existing tests should be sufficient.

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.

e2e_playwright/app_hotkeys_test.py

@@ -23,11 +23,7 @@
 def test_shows_clear_cache_dialog_when_c_is_pressed(app: Page):
     app.keyboard.type("c")
     expect(app.get_by_role("dialog")).to_be_visible()
-    expect(app.get_by_role("dialog")).to_have_text(
-        """
-Clear cachesAre you sure you want to clear the app's function caches?This will remove all cached entries from functions using @st.cache_data and @st.cache_resource.CancelClear caches
-    """
-    )
+    expect(app.get_by_role("dialog")).to_contain_text("Clear caches")
 
 
 modifier_keys = ["Control", "Meta"]

frontend/app/src/components/StreamlitDialog/StreamlitDialog.tsx

@@ -30,7 +30,6 @@ import {
 import { STREAMLIT_HOME_URL } from "@streamlit/app/src/urls"
 import {
   StyledCode,
-  StyledInlineCode,
   StyledPre,
 } from "@streamlit/lib/src/components/elements/CodeBlock/styled-components"
 
@@ -190,19 +189,20 @@ interface ClearCacheProps {
  * onClose         - callback to close the dialog
  */
 function clearCacheDialog(props: ClearCacheProps): ReactElement {
+  // Markdown New line is 2 spaces + \n
+  const newLineMarkdown = "  \n"
+  const clearCacheInfo = [
+    `**Are you sure you want to clear the app's function caches?**`,
+    "This will remove all cached entries from functions using",
+    "`@st.cache_data` and `@st.cache_resource`.",
+  ].join(newLineMarkdown)
+
   return (
     <div data-testid="stClearCacheDialog">
       <Modal isOpen onClose={props.onClose}>
         <ModalHeader>Clear caches</ModalHeader>
         <ModalBody>
-          <div>
-            <b>Are you sure you want to clear the app's function caches?</b>
-          </div>
-          <div>
-            This will remove all cached entries from functions using{" "}
-            <StyledInlineCode>@st.cache_data</StyledInlineCode> and{" "}
-            <StyledInlineCode>@st.cache_resource</StyledInlineCode>.
-          </div>
+          <StreamlitMarkdown source={clearCacheInfo} allowHTML={false} />
         </ModalBody>
         <ModalFooter>
           <ModalButton kind={BaseButtonKind.TERTIARY} onClick={props.onClose}>

frontend/lib/src/components/elements/ArrowTable/ArrowTable.tsx

@@ -44,11 +44,7 @@ export function ArrowTable(props: Readonly<TableProps>): ReactElement {
     <StyledTableContainer className="stTable" data-testid="stTable">
       {cssStyles && <style>{cssStyles}</style>}
       <StyledTable id={cssId} data-testid="stTableStyledTable">
-        {caption && (
-          <caption>
-            <small>{caption}</small>
-          </caption>
-        )}
+        {caption && <caption>{caption}</caption>}
         {columnHeaders.length > 0 && (
           <thead>
             {columnHeaders.map(rowIndex =>

frontend/lib/src/components/elements/ArrowTable/styled-components.ts

@@ -34,10 +34,13 @@ export const StyledTable = styled.table(({ theme }) => ({
   captionSide: "bottom",
   border: `${theme.sizes.borderWidth} solid ${theme.colors.borderColorLight}`,
   "& caption": {
+    fontFamily: theme.genericFonts.bodyFont,
+    fontSize: theme.fontSizes.sm,
     paddingTop: theme.spacing.sm,
     paddingBottom: 0,
     color: theme.colors.fadedText60,
     textAlign: "left",
+    wordWrap: "break-word",
   },
 }))
 

frontend/lib/src/components/elements/Toast/styled-components.tsx

@@ -67,4 +67,7 @@ export const StyledMessageWrapper = styled.div(({ theme }) => ({
   minHeight: "100%",
   fontSize: theme.fontSizes.sm,
   lineHeight: theme.lineHeights.base,
+  div: {
+    display: "inline-flex",
+  },
 }))

frontend/lib/src/components/shared/ErrorElement/ErrorElement.tsx

@@ -21,7 +21,7 @@ import AlertContainer, {
 } from "@streamlit/lib/src/components/shared/AlertContainer"
 import { StyledCode } from "@streamlit/lib/src/components/elements/CodeBlock/styled-components"
 
-import { StyledStackTrace } from "./styled-components"
+import { StyledErrorName, StyledStackTrace } from "./styled-components"
 
 export interface ErrorElementProps {
   name: string
@@ -47,7 +47,7 @@ function ErrorElement(props: ErrorElementProps): ReactElement {
 
   return (
     <AlertContainer kind={Kind.ERROR} width={width}>
-      <strong>{name}: </strong>
+      <StyledErrorName>{name}: </StyledErrorName>
       {message}
       {stack ? (
         <StyledStackTrace data-testid="stErrorElementStack">

frontend/lib/src/components/shared/ErrorElement/styled-components.ts

@@ -29,3 +29,7 @@ export const StyledStackTrace = styled.pre(({ theme }) => ({
   padding: theme.spacing.lg,
   border: `${theme.sizes.borderWidth} solid ${theme.colors.borderColor}`,
 }))
+
+export const StyledErrorName = styled.strong(({ theme }) => ({
+  fontWeight: theme.fontWeights.bold,
+}))

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx

@@ -332,7 +332,11 @@ describe("StreamlitMarkdown", () => {
     render(<StreamlitMarkdown source={source} allowHTML={false} isToast />)
 
     const textTag = screen.getByText("Here is some toast text")
-    expect(textTag).toHaveStyle("font-size: 14px")
+    expect(textTag).toBeInTheDocument()
+
+    // Use the smaller font size for the markdown container
+    const markdownContainer = screen.getByTestId("stMarkdownContainer")
+    expect(markdownContainer).toHaveStyle("font-size: 14px")
   })
 
   it("renders regular text sizing when largerLabel is true", () => {

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts

@@ -163,10 +163,15 @@ export const StyledStreamlitMarkdown =
     }) => {
       // Widget Labels have smaller font size with exception of Button/Checkbox/Radio Button labels
       // Toasts also have smaller font size
-      const labelFontSize = (isLabel && !largerLabel) || isToast
+      const useSmallerFontSize =
+        (isLabel && !largerLabel) || isToast || isCaption
+
       return {
         fontFamily: theme.genericFonts.bodyFont,
+        fontSize: useSmallerFontSize ? theme.fontSizes.sm : theme.fontSizes.md,
         marginBottom: isLabel ? "" : `-${theme.spacing.lg}`,
+        opacity: isCaption ? 0.6 : undefined,
+        color: "inherit",
         ...sharedMarkdownStyle(theme),
         ...getMarkdownHeadingDefinitions(
           theme,
@@ -181,7 +186,6 @@ export const StyledStreamlitMarkdown =
           marginTop: theme.spacing.none,
           marginLeft: theme.spacing.none,
           marginRight: theme.spacing.none,
-          ...(labelFontSize ? { fontSize: theme.fontSizes.sm } : {}),
         },
 
         img: {
@@ -199,7 +203,6 @@ export const StyledStreamlitMarkdown =
           // But this would require some styling changes.
           margin: "0.2em 0 0.2em 1.2em",
           padding: "0 0 0 0.6em",
-          fontSize: theme.fontSizes.md,
         },
 
         // Handles quotes:
@@ -209,6 +212,10 @@ export const StyledStreamlitMarkdown =
           borderLeft: `${theme.sizes.borderWidth} solid ${theme.colors.lightGray}`,
         },
 
+        "b, strong": {
+          fontWeight: theme.fontWeights.bold,
+        },
+
         // Handles the horizontal divider:
         hr: {
           margin: "2em 0",
@@ -251,25 +258,9 @@ export const StyledStreamlitMarkdown =
           borderRadius: theme.radii.md,
         },
 
-        ...(isToast
-          ? {
-              div: {
-                display: "inline-flex",
-              },
-            }
-          : {}),
-
-        ...(isCaption
-          ? {
-              color: isInSidebarOrDialog
-                ? theme.colors.gray
-                : theme.colors.fadedText60,
-              fontSize: theme.fontSizes.sm,
-              "p, ol, ul, dl, li": {
-                fontSize: "inherit",
-              },
-            }
-          : {}),
+        "p, ol, ul, dl, li": {
+          fontSize: "inherit",
+        },
       }
     }
   )

frontend/lib/src/components/widgets/BaseWidget/WidgetLabel.test.tsx

@@ -41,8 +41,10 @@ describe("Widget Label", () => {
     render(<WidgetLabel {...props} />)
 
     expect(screen.getByTestId("stWidgetLabel")).toBeInTheDocument()
-    // Test that isLabel prop is true, which makes font size smaller
-    expect(screen.getByText(`${props.label}`)).toHaveStyle(`font-size: 14px`)
+
+    // Use the smaller font size for the markdown container
+    const markdownContainer = screen.getByTestId("stMarkdownContainer")
+    expect(markdownContainer).toHaveStyle("font-size: 14px")
   })
 
   it("can be disabled", () => {

frontend/lib/src/components/widgets/DataFrame/Tooltip.test.tsx

@@ -36,7 +36,7 @@ describe("Dataframe Tooltip", () => {
     const tooltipContent = screen.getByText("This is a tooltip.")
     expect(tooltipContent).toBeInTheDocument()
     // Uses markdown to render the content:
-    expect(tooltipContent).toHaveStyle("font-weight: bold")
+    expect(tooltipContent).toHaveStyle("font-weight: 600")
   })
 
   test("renders the tooltip at the correct position", () => {

frontend/lib/src/theme/globalStyles.ts

@@ -111,21 +111,6 @@ export const globalStyles = (theme: EmotionTheme): SerializedStyles => css`
     margin-bottom: 0;
   }
 
-  // Strong
-  //
-  // Add the correct font weight in Chrome, Edge, and Safari
-
-  b,
-  strong {
-    font-weight: ${theme.fontWeights.bold};
-  }
-
-  // Small
-
-  small {
-    font-size: ${theme.fontSizes.sm};
-  }
-
   // And undo these styles for placeholder links/named anchors (without href).
   // It would be more straightforward to just use a[href] in previous block, but that
   // causes specificity issues in many other styles that are too complex to fix.