streamlit · mayagbarnes · Sep 2, 2025 · Aug 21, 2025 · Aug 21, 2025 · Aug 21, 2025
diff --git a/...laywright/__snapshots__/linux/custom_theme_test/custom_themed_app[chromium].png b/...laywright/__snapshots__/linux/custom_theme_test/custom_themed_app[chromium].png
diff --git a/...playwright/__snapshots__/linux/custom_theme_test/custom_themed_app[firefox].png b/...playwright/__snapshots__/linux/custom_theme_test/custom_themed_app[firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/custom_theme_test/custom_themed_app[webkit].png b/e2e_playwright/__snapshots__/linux/custom_theme_test/custom_themed_app[webkit].png
diff --git a/..._snapshots__/linux/sidebar_custom_theme_test/sidebar_custom_theme[chromium].png b/..._snapshots__/linux/sidebar_custom_theme_test/sidebar_custom_theme[chromium].png
diff --git a/...__snapshots__/linux/sidebar_custom_theme_test/sidebar_custom_theme[firefox].png b/...__snapshots__/linux/sidebar_custom_theme_test/sidebar_custom_theme[firefox].png
diff --git a/.../__snapshots__/linux/sidebar_custom_theme_test/sidebar_custom_theme[webkit].png b/.../__snapshots__/linux/sidebar_custom_theme_test/sidebar_custom_theme[webkit].png
diff --git a/...itor_config_test/st_data_editor-multiselect_col_editor[dark_theme-chromium].png b/...itor_config_test/st_data_editor-multiselect_col_editor[dark_theme-chromium].png
diff --git a/...ditor_config_test/st_data_editor-multiselect_col_editor[dark_theme-firefox].png b/...ditor_config_test/st_data_editor-multiselect_col_editor[dark_theme-firefox].png
diff --git a/...editor_config_test/st_data_editor-multiselect_col_editor[dark_theme-webkit].png b/...editor_config_test/st_data_editor-multiselect_col_editor[dark_theme-webkit].png
diff --git a/..._dataframe_config_test/st_dataframe-multiselect_column[dark_theme-chromium].png b/..._dataframe_config_test/st_dataframe-multiselect_column[dark_theme-chromium].png
diff --git a/...t_dataframe_config_test/st_dataframe-multiselect_column[dark_theme-firefox].png b/...t_dataframe_config_test/st_dataframe-multiselect_column[dark_theme-firefox].png
diff --git a/...st_dataframe_config_test/st_dataframe-multiselect_column[dark_theme-webkit].png b/...st_dataframe_config_test/st_dataframe-multiselect_column[dark_theme-webkit].png
diff --git a/...snapshots__/linux/st_exception_test/st_exception-basic[light_theme-firefox].png b/...snapshots__/linux/st_exception_test/st_exception-basic[light_theme-firefox].png
diff --git a/...__snapshots__/linux/st_markdown_test/st_badge-examples[dark_theme-chromium].png b/...__snapshots__/linux/st_markdown_test/st_badge-examples[dark_theme-chromium].png
diff --git a/.../__snapshots__/linux/st_markdown_test/st_badge-examples[dark_theme-firefox].png b/.../__snapshots__/linux/st_markdown_test/st_badge-examples[dark_theme-firefox].png
diff --git a/...t/__snapshots__/linux/st_markdown_test/st_badge-examples[dark_theme-webkit].png b/...t/__snapshots__/linux/st_markdown_test/st_badge-examples[dark_theme-webkit].png
diff --git a/...napshots__/linux/st_markdown_test/st_badge-width_100px[dark_theme-chromium].png b/...napshots__/linux/st_markdown_test/st_badge-width_100px[dark_theme-chromium].png
diff --git a/...snapshots__/linux/st_markdown_test/st_badge-width_100px[dark_theme-firefox].png b/...snapshots__/linux/st_markdown_test/st_badge-width_100px[dark_theme-firefox].png
diff --git a/..._snapshots__/linux/st_markdown_test/st_badge-width_100px[dark_theme-webkit].png b/..._snapshots__/linux/st_markdown_test/st_badge-width_100px[dark_theme-webkit].png
diff --git a/...pshots__/linux/st_markdown_test/st_badge-width_content[dark_theme-chromium].png b/...pshots__/linux/st_markdown_test/st_badge-width_content[dark_theme-chromium].png
diff --git a/...apshots__/linux/st_markdown_test/st_badge-width_content[dark_theme-firefox].png b/...apshots__/linux/st_markdown_test/st_badge-width_content[dark_theme-firefox].png
diff --git a/...napshots__/linux/st_markdown_test/st_badge-width_content[dark_theme-webkit].png b/...napshots__/linux/st_markdown_test/st_badge-width_content[dark_theme-webkit].png
diff --git a/...pshots__/linux/st_markdown_test/st_badge-width_stretch[dark_theme-chromium].png b/...pshots__/linux/st_markdown_test/st_badge-width_stretch[dark_theme-chromium].png
diff --git a/...apshots__/linux/st_markdown_test/st_badge-width_stretch[dark_theme-firefox].png b/...apshots__/linux/st_markdown_test/st_badge-width_stretch[dark_theme-firefox].png
diff --git a/...napshots__/linux/st_markdown_test/st_badge-width_stretch[dark_theme-webkit].png b/...napshots__/linux/st_markdown_test/st_badge-width_stretch[dark_theme-webkit].png
diff --git a/...t_markdown_test/st_markdown-many_elements_in_one_block[dark_theme-chromium].png b/...t_markdown_test/st_markdown-many_elements_in_one_block[dark_theme-chromium].png
diff --git a/...st_markdown_test/st_markdown-many_elements_in_one_block[dark_theme-firefox].png b/...st_markdown_test/st_markdown-many_elements_in_one_block[dark_theme-firefox].png
diff --git a/.../st_markdown_test/st_markdown-many_elements_in_one_block[dark_theme-webkit].png b/.../st_markdown_test/st_markdown-many_elements_in_one_block[dark_theme-webkit].png
diff --git a/...ht/__snapshots__/linux/st_metric_test/st_metric-border[dark_theme-chromium].png b/...ht/__snapshots__/linux/st_metric_test/st_metric-border[dark_theme-chromium].png
diff --git a/...ght/__snapshots__/linux/st_metric_test/st_metric-border[dark_theme-firefox].png b/...ght/__snapshots__/linux/st_metric_test/st_metric-border[dark_theme-firefox].png
diff --git a/...ight/__snapshots__/linux/st_metric_test/st_metric-border[dark_theme-webkit].png b/...ight/__snapshots__/linux/st_metric_test/st_metric-border[dark_theme-webkit].png
diff --git a/...snapshots__/linux/st_metric_test/st_metric-chart_hover[dark_theme-chromium].png b/...snapshots__/linux/st_metric_test/st_metric-chart_hover[dark_theme-chromium].png
diff --git a/..._snapshots__/linux/st_metric_test/st_metric-chart_hover[dark_theme-firefox].png b/..._snapshots__/linux/st_metric_test/st_metric-chart_hover[dark_theme-firefox].png
diff --git a/...__snapshots__/linux/st_metric_test/st_metric-chart_hover[dark_theme-webkit].png b/...__snapshots__/linux/st_metric_test/st_metric-chart_hover[dark_theme-webkit].png
diff --git a/...napshots__/linux/st_metric_test/st_metric-code_in_help[dark_theme-chromium].png b/...napshots__/linux/st_metric_test/st_metric-code_in_help[dark_theme-chromium].png
diff --git a/...ight/__snapshots__/linux/st_metric_test/st_metric-gray[dark_theme-chromium].png b/...ight/__snapshots__/linux/st_metric_test/st_metric-gray[dark_theme-chromium].png
diff --git a/...right/__snapshots__/linux/st_metric_test/st_metric-gray[dark_theme-firefox].png b/...right/__snapshots__/linux/st_metric_test/st_metric-gray[dark_theme-firefox].png
diff --git a/...wright/__snapshots__/linux/st_metric_test/st_metric-gray[dark_theme-webkit].png b/...wright/__snapshots__/linux/st_metric_test/st_metric-gray[dark_theme-webkit].png
diff --git a/...ght/__snapshots__/linux/st_metric_test/st_metric-green[dark_theme-chromium].png b/...ght/__snapshots__/linux/st_metric_test/st_metric-green[dark_theme-chromium].png
diff --git a/...ight/__snapshots__/linux/st_metric_test/st_metric-green[dark_theme-firefox].png b/...ight/__snapshots__/linux/st_metric_test/st_metric-green[dark_theme-firefox].png
diff --git a/...right/__snapshots__/linux/st_metric_test/st_metric-green[dark_theme-webkit].png b/...right/__snapshots__/linux/st_metric_test/st_metric-green[dark_theme-webkit].png
diff --git a/...ots__/linux/st_metric_test/st_metric-help_and_ellipses[dark_theme-chromium].png b/...ots__/linux/st_metric_test/st_metric-help_and_ellipses[dark_theme-chromium].png
diff --git a/...hots__/linux/st_metric_test/st_metric-help_and_ellipses[dark_theme-firefox].png b/...hots__/linux/st_metric_test/st_metric-help_and_ellipses[dark_theme-firefox].png
diff --git a/...shots__/linux/st_metric_test/st_metric-help_and_ellipses[dark_theme-webkit].png b/...shots__/linux/st_metric_test/st_metric-help_and_ellipses[dark_theme-webkit].png
diff --git a/...pshots__/linux/st_metric_test/st_metric-label_collapse[dark_theme-chromium].png b/...pshots__/linux/st_metric_test/st_metric-label_collapse[dark_theme-chromium].png
diff --git a/...apshots__/linux/st_metric_test/st_metric-label_collapse[dark_theme-firefox].png b/...apshots__/linux/st_metric_test/st_metric-label_collapse[dark_theme-firefox].png
diff --git a/...napshots__/linux/st_metric_test/st_metric-label_collapse[dark_theme-webkit].png b/...napshots__/linux/st_metric_test/st_metric-label_collapse[dark_theme-webkit].png
diff --git a/...napshots__/linux/st_metric_test/st_metric-label_hidden[dark_theme-chromium].png b/...napshots__/linux/st_metric_test/st_metric-label_hidden[dark_theme-chromium].png
diff --git a/...snapshots__/linux/st_metric_test/st_metric-label_hidden[dark_theme-firefox].png b/...snapshots__/linux/st_metric_test/st_metric-label_hidden[dark_theme-firefox].png
diff --git a/..._snapshots__/linux/st_metric_test/st_metric-label_hidden[dark_theme-webkit].png b/..._snapshots__/linux/st_metric_test/st_metric-label_hidden[dark_theme-webkit].png
diff --git a/...pshots__/linux/st_metric_test/st_metric-markdown_label[dark_theme-chromium].png b/...pshots__/linux/st_metric_test/st_metric-markdown_label[dark_theme-chromium].png
diff --git a/...apshots__/linux/st_metric_test/st_metric-markdown_label[dark_theme-firefox].png b/...apshots__/linux/st_metric_test/st_metric-markdown_label[dark_theme-firefox].png
diff --git a/...napshots__/linux/st_metric_test/st_metric-markdown_label[dark_theme-webkit].png b/...napshots__/linux/st_metric_test/st_metric-markdown_label[dark_theme-webkit].png
diff --git a/...right/__snapshots__/linux/st_metric_test/st_metric-red[dark_theme-chromium].png b/...right/__snapshots__/linux/st_metric_test/st_metric-red[dark_theme-chromium].png
diff --git a/...wright/__snapshots__/linux/st_metric_test/st_metric-red[dark_theme-firefox].png b/...wright/__snapshots__/linux/st_metric_test/st_metric-red[dark_theme-firefox].png
diff --git a/...ywright/__snapshots__/linux/st_metric_test/st_metric-red[dark_theme-webkit].png b/...ywright/__snapshots__/linux/st_metric_test/st_metric-red[dark_theme-webkit].png
diff --git a/e2e_playwright/st_markdown_test.py b/e2e_playwright/st_markdown_test.py
@@ -80,13 +80,13 @@ def test_displays_individual_markdowns(app: Page):
     rainbow_background = markdown_elements.nth(9).locator("span").first
     green_background = markdown_elements.nth(10).locator("span").first
 
-    expect(blue_background).to_have_css("background-color", "rgba(28, 131, 225, 0.1)")
+    expect(blue_background).to_have_css("background-color", "rgba(28, 131, 255, 0.1)")
     expect(red_background).to_have_css("background-color", "rgba(255, 43, 43, 0.1)")
     expect(rainbow_background).to_have_css(
         "background-image",
-        "linear-gradient(to right, rgba(255, 43, 43, 0.1), rgba(255, 227, 18, 0.1), "
-        "rgba(250, 202, 43, 0.1), rgba(33, 195, 84, 0.1), rgba(28, 131, 225, 0.1), "
-        "rgba(128, 61, 245, 0.1), rgba(88, 63, 132, 0.1))",
+        "linear-gradient(to right, rgba(255, 43, 43, 0.1), rgba(255, 164, 33, 0.1), "
+        "rgba(255, 255, 18, 0.1), rgba(33, 195, 84, 0.1), rgba(28, 131, 255, 0.1), "
+        "rgba(154, 93, 255, 0.1), rgba(88, 63, 132, 0.1))",
     )
     expect(green_background).to_have_css("background-color", "rgba(33, 195, 84, 0.1)")
 

diff --git a/frontend/lib/src/components/elements/Metric/Metric.test.tsx b/frontend/lib/src/components/elements/Metric/Metric.test.tsx
@@ -140,7 +140,7 @@ describe("Metric element", () => {
       "color: rgb(163, 168, 184);"
     )
     expect(screen.getByTestId("stMetricDelta")).toHaveStyle(
-      "background-color: rgba(128, 132, 149, 0.1);"
+      "background-color: rgba(49, 51, 63, 0.1);"
     )
   })
 
@@ -412,7 +412,7 @@ describe("Metric element", () => {
           expect.objectContaining({
             mark: expect.objectContaining({
               type: "area",
-              opacity: 0.2,
+              opacity: 1,
               line: expect.objectContaining({
                 strokeWidth: 2,
                 strokeCap: "round",

diff --git a/frontend/lib/src/components/elements/Metric/Metric.tsx b/frontend/lib/src/components/elements/Metric/Metric.tsx
@@ -36,6 +36,7 @@ import { Placement } from "~lib/components/shared/Tooltip"
 import TooltipIcon from "~lib/components/shared/TooltipIcon"
 import { StyledWidgetLabelHelpInline } from "~lib/components/widgets/BaseWidget"
 import { useCalculatedDimensions } from "~lib/hooks/useCalculatedDimensions"
+import { getMetricBackgroundColor } from "~lib/theme/getColors"
 import { labelVisibilityProtoValueToEnum } from "~lib/util/utils"
 
 import {
@@ -100,9 +101,11 @@ export function getMetricChartSpec(
           }),
           ...(chartType === MetricProto.ChartType.AREA && {
             type: "area",
-            opacity: 0.2,
+            color: getMetricBackgroundColor(theme, metricColor),
+            opacity: 1,
             line: {
               color: getMetricColor(theme, metricColor),
+              opacity: 1,
               strokeWidth: 2,
               strokeCap: "round",
             },

diff --git a/frontend/lib/src/components/elements/Metric/styled-components.ts b/frontend/lib/src/components/elements/Metric/styled-components.ts
@@ -15,13 +15,12 @@
  */
 
 import styled from "@emotion/styled"
-import { transparentize } from "color2k"
 
 import { Metric as MetricProto } from "@streamlit/protobuf"
 
 import { StyledWidgetLabel } from "~lib/components/widgets/BaseWidget/styled-components"
 import { EmotionTheme } from "~lib/theme"
-import { hasLightBackgroundColor } from "~lib/theme/getColors"
+import { getMetricBackgroundColor } from "~lib/theme/getColors"
 import { LabelVisibilityOptions } from "~lib/util/utils"
 
 export interface StyledMetricContainerProps {
@@ -115,35 +114,6 @@ export const getMetricColor = (
   }
 }
 
-// Delta uses the same background colors as background colored Markdown text.
-// TODO: We should refactor this and probably move it somewhere else (e.g. getColors.ts)
-// when we work on text/background colors for advanced theming.
-const getMetricBackgroundColor = (
-  theme: EmotionTheme,
-  color: MetricProto.MetricColor
-): string => {
-  const lightTheme = hasLightBackgroundColor(theme)
-
-  switch (color) {
-    case MetricProto.MetricColor.RED:
-      return transparentize(
-        theme.colors[lightTheme ? "red80" : "red60"],
-        lightTheme ? 0.9 : 0.7
-      )
-    case MetricProto.MetricColor.GREEN:
-      return transparentize(
-        theme.colors[lightTheme ? "green70" : "green60"],
-        lightTheme ? 0.9 : 0.7
-      )
-    // this must be grey
-    default:
-      return transparentize(
-        theme.colors[lightTheme ? "gray70" : "gray50"],
-        lightTheme ? 0.9 : 0.7
-      )
-  }
-}
-
 export const StyledMetricDeltaText = styled.div<StyledMetricDeltaTextProps>(
   ({ theme, metricColor }) => ({
     color: getMetricColor(theme, metricColor),

diff --git a/frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx b/frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx
@@ -17,14 +17,14 @@
 import React, { ReactElement } from "react"
 
 import { cleanup, screen } from "@testing-library/react"
-import { transparentize } from "color2k"
 import ReactMarkdown from "react-markdown"
 
 import IsDialogContext from "~lib/components/core/IsDialogContext"
 import IsSidebarContext from "~lib/components/core/IsSidebarContext"
 import { LibContext } from "~lib/components/core/LibContext"
 import { mockTheme } from "~lib/mocks/mockTheme"
 import { render } from "~lib/test_util"
+import { getMarkdownBgColors } from "~lib/theme/getColors"
 import { colors } from "~lib/theme/primitives/colors"
 
 import StreamlitMarkdown, {
@@ -137,6 +137,25 @@ describe("linkReference", () => {
 })
 
 describe("StreamlitMarkdown", () => {
+  let bgColors: ReturnType<typeof getMarkdownBgColors>
+  let backgroundColorMapping: Map<string, string>
+
+  beforeAll(() => {
+    // Use the actual implementation to get background colors
+    bgColors = getMarkdownBgColors(mockTheme.emotion)
+
+    backgroundColorMapping = new Map([
+      ["red", bgColors.redbg],
+      ["orange", bgColors.orangebg],
+      ["yellow", bgColors.yellowbg],
+      ["blue", bgColors.bluebg],
+      ["green", bgColors.greenbg],
+      ["violet", bgColors.violetbg],
+      ["gray", bgColors.graybg],
+      ["grey", bgColors.graybg],
+    ])
+  })
+
   it("renders header anchors when isInSidebar is false", () => {
     const source = "# header"
     render(
@@ -457,26 +476,7 @@ describe("StreamlitMarkdown", () => {
   })
 
   it("properly adds background colors", () => {
-    const redbg = transparentize(colors.red80, 0.9)
-    const orangebg = transparentize(colors.yellow70, 0.9)
-    const yellowbg = transparentize(colors.yellow80, 0.9)
-    const greenbg = transparentize(colors.green70, 0.9)
-    const bluebg = transparentize(colors.blue70, 0.9)
-    const violetbg = transparentize(colors.purple70, 0.9)
-    const graybg = transparentize(colors.gray70, 0.9)
-
-    const colorMapping = new Map([
-      ["red", redbg],
-      ["orange", orangebg],
-      ["yellow", yellowbg],
-      ["blue", bluebg],
-      ["green", greenbg],
-      ["violet", violetbg],
-      ["gray", graybg],
-      ["grey", graybg],
-    ])
-
-    colorMapping.forEach(function (style, color) {
+    backgroundColorMapping.forEach(function (style, color) {
       const source = `:${color}-background[text]`
       render(<StreamlitMarkdown source={source} allowHTML={false} />)
       const markdown = screen.getByText("text")
@@ -490,32 +490,16 @@ describe("StreamlitMarkdown", () => {
   })
 
   it("properly adds rainbow background color", () => {
-    const redbg = transparentize(colors.red80, 0.9)
-    const orangebg = transparentize(colors.yellow70, 0.9)
-    const yellowbg = transparentize(colors.yellow70, 0.9)
-    const greenbg = transparentize(colors.green70, 0.9)
-    const bluebg = transparentize(colors.blue70, 0.9)
-    const violetbg = transparentize(colors.purple70, 0.9)
-    const purplebg = transparentize(colors.purple90, 0.9)
-
-    const colorMapping = new Map([
-      [
-        "rainbow",
-        `linear-gradient(to right, ${redbg}, ${orangebg}, ${yellowbg}, ${greenbg}, ${bluebg}, ${violetbg}, ${purplebg})`,
-      ],
-    ])
+    const { redbg, orangebg, yellowbg, greenbg, bluebg, violetbg, purplebg } =
+      bgColors
+    const rainbowGradient = `linear-gradient(to right, ${redbg}, ${orangebg}, ${yellowbg}, ${greenbg}, ${bluebg}, ${violetbg}, ${purplebg})`
 
-    colorMapping.forEach(function (style, color) {
-      const source = `:${color}-background[text]`
-      render(<StreamlitMarkdown source={source} allowHTML={false} />)
-      const markdown = screen.getByText("text")
-      const tagName = markdown.nodeName.toLowerCase()
-      expect(tagName).toBe("span")
-      expect(markdown).toHaveStyle(`background: ${style}`)
-
-      // Removes rendered StreamlitMarkdown component before next case run
-      cleanup()
-    })
+    const source = `:rainbow-background[text]`
+    render(<StreamlitMarkdown source={source} allowHTML={false} />)
+    const markdown = screen.getByText("text")
+    const tagName = markdown.nodeName.toLowerCase()
+    expect(tagName).toBe("span")
+    expect(markdown).toHaveStyle(`background: ${rainbowGradient}`)
   })
 
   it("renders small text properly", () => {

diff --git a/frontend/lib/src/mocks/mockTheme.ts b/frontend/lib/src/mocks/mockTheme.ts
@@ -41,15 +41,13 @@ const requiredThemeColors = {
   bgColor: colors.white,
   secondaryBg: colors.gray20,
   bodyText: colors.gray85,
+  link: colors.blue80,
+
+  // TODO (mgbarnes): Transition each of these to updated text colors
   warning: colors.yellow110,
-  warningBg: transparentize(colors.yellow80, 0.8),
   success: colors.green100,
-  successBg: transparentize(colors.green80, 0.8),
-  infoBg: transparentize(colors.blue70, 0.9),
   info: colors.blue100,
   danger: colors.red100,
-  dangerBg: transparentize(colors.red70, 0.8),
-  link: colors.blue80,
 
   primary: colors.red70,
   secondary: colors.blue70,
@@ -72,6 +70,15 @@ const requiredThemeColors = {
   greenColor: colors.green70,
   violetColor: colors.purple70,
   grayColor: colors.gray60,
+
+  // Default background theme colors (light theme)
+  redBackgroundColor: transparentize(colors.red80, 0.9),
+  orangeBackgroundColor: transparentize(colors.orange70, 0.9),
+  yellowBackgroundColor: transparentize(colors.yellow65, 0.9),
+  blueBackgroundColor: transparentize(colors.blue65, 0.9),
+  greenBackgroundColor: transparentize(colors.green70, 0.9),
+  violetBackgroundColor: transparentize(colors.purple60, 0.9),
+  grayBackgroundColor: transparentize(colors.gray85, 0.9),
 }
 
 interface OptionalThemeColors {

diff --git a/frontend/lib/src/theme/emotionBaseTheme/themeColors.ts b/frontend/lib/src/theme/emotionBaseTheme/themeColors.ts
@@ -24,14 +24,6 @@ const requiredThemeColors = {
   bgColor: colors.white,
   secondaryBg: colors.gray20,
   bodyText: colors.gray85,
-  warning: colors.yellow110,
-  warningBg: transparentize(colors.yellow80, 0.8),
-  success: colors.green100,
-  successBg: transparentize(colors.green80, 0.8),
-  infoBg: transparentize(colors.blue70, 0.9),
-  info: colors.blue100,
-  danger: colors.red100,
-  dangerBg: transparentize(colors.red70, 0.8),
   link: colors.blue80,
 
   primary: colors.red70,
@@ -42,6 +34,12 @@ const requiredThemeColors = {
   gray: colors.gray60,
   darkGray: colors.gray70,
 
+  // TODO (mgbarnes): Transition each of these to updated text colors
+  warning: colors.yellow110,
+  success: colors.green100,
+  info: colors.blue100,
+  danger: colors.red100,
+
   // TODO (mgbarnes): Reduce/remove these colors to avoid
   // confusion with the default main/text/bg theme colors
   red: colors.red80,
@@ -56,6 +54,15 @@ const requiredThemeColors = {
   greenColor: colors.green70,
   violetColor: colors.purple70,
   grayColor: colors.gray60,
+
+  // Default background theme colors (light theme)
+  redBackgroundColor: transparentize(colors.red80, 0.9),
+  orangeBackgroundColor: transparentize(colors.orange70, 0.9),
+  yellowBackgroundColor: transparentize(colors.yellow65, 0.9),
+  blueBackgroundColor: transparentize(colors.blue65, 0.9),
+  greenBackgroundColor: transparentize(colors.green70, 0.9),
+  violetBackgroundColor: transparentize(colors.purple60, 0.9),
+  grayBackgroundColor: transparentize(colors.gray85, 0.9),
 }
 
 export type RequiredThemeColors = Record<

diff --git a/frontend/lib/src/theme/emotionDarkTheme/themeColors.ts b/frontend/lib/src/theme/emotionDarkTheme/themeColors.ts
@@ -22,21 +22,19 @@ export default {
   ...colors,
   bgColor: colors.gray100,
   bodyText: colors.gray10,
-  warning: colors.yellow20,
-  warningBg: transparentize(colors.yellow70, 0.8),
-  success: colors.green10,
-  successBg: transparentize(colors.green60, 0.8),
-  info: colors.blue20,
-  infoBg: transparentize(colors.blue60, 0.8),
-  danger: colors.red20,
-  dangerBg: transparentize(colors.red60, 0.8),
   // Brighten link color a bit so they're easier to read:
   link: lighten(colors.blue80, 0.2),
 
   primary: colors.red70,
   secondaryBg: colors.gray90,
   disabled: colors.gray70,
 
+  // TODO (mgbarnes): Transition each of these to updated text colors
+  warning: colors.yellow20,
+  success: colors.green10,
+  info: colors.blue20,
+  danger: colors.red20,
+
   // TODO (mgbarnes): Reduce/remove these colors to avoid
   // confusion with the default main/text/bg theme colors
   red: colors.red70,
@@ -51,4 +49,13 @@ export default {
   greenColor: colors.green80,
   violetColor: colors.purple70,
   grayColor: colors.gray80,
+
+  // Default background theme colors (dark theme)
+  redBackgroundColor: transparentize(colors.red60, 0.8),
+  orangeBackgroundColor: transparentize(colors.orange80, 0.8),
+  yellowBackgroundColor: transparentize(colors.yellow65, 0.8),
+  blueBackgroundColor: transparentize(colors.blue60, 0.8),
+  greenBackgroundColor: transparentize(colors.green60, 0.8),
+  violetBackgroundColor: transparentize(colors.purple60, 0.8),
+  grayBackgroundColor: transparentize(colors.gray70, 0.8),
 }
diff --git a/frontend/lib/src/theme/emotionLightTheme/themeColors.ts b/frontend/lib/src/theme/emotionLightTheme/themeColors.ts
@@ -14,18 +14,8 @@
  * limitations under the License.
  */
 
-import { transparentize } from "color2k"
-
 import { colors } from "~lib/theme/primitives/colors"
 
 export default {
   ...colors,
-  // For this one, we use a specific color,
-  // outside our standard color palette,
-  // to ensure contrast is good enough for accessibility
-  warning: "#926C05",
-  warningBg: transparentize(colors.yellow70, 0.9),
-  successBg: transparentize(colors.green70, 0.9),
-  danger: colors.red100,
-  dangerBg: transparentize(colors.red80, 0.91),
 }