Improve text contrast in object detail in static embed (#46968)

* Theme object detail texts

* Add loki tests

frontend/src/metabase/css/core/colors.module.css

@@ -206,6 +206,10 @@
   color: var(--mb-color-text-secondary);
 }
 
+.textTertiary {
+  color: var(--mb-color-text-tertiary);
+}
+
 .bgLight,
 .bgLightHover:hover {
   background-color: var(--mb-color-bg-light);

frontend/src/metabase/public/containers/PublicOrEmbeddedDashboard/PublicOrEmbeddedDashboardView.stories.tsx

@@ -13,7 +13,10 @@ import { waitTimeContext } from "metabase/context/wait-time";
 import LegacyTooltip from "metabase/core/components/Tooltip";
 import { publicReducers } from "metabase/reducers-public";
 import { Box, Card, Popover, Text, Tooltip } from "metabase/ui";
+import { registerVisualization } from "metabase/visualizations";
 import TABLE_RAW_SERIES from "metabase/visualizations/components/TableSimple/stories-data/table-simple-orders-with-people.json";
+import ObjectDetail from "metabase/visualizations/visualizations/ObjectDetail";
+import type { DashboardCard } from "metabase-types/api";
 import {
   createMockCard,
   createMockColumn,
@@ -94,6 +97,7 @@ const CARD_TABLE_ID = getNextId();
 const TAB_ID = getNextId();
 const PARAMETER_ID = "param-hex";
 const initialState = createMockState({
+  currentUser: null,
   settings: createMockSettingsState({
     "hide-embed-branding?": false,
   }),
@@ -125,13 +129,14 @@ const store = getStore(publicReducers, initialState);
 
 interface CreateDashboardOpts {
   hasScroll?: boolean;
+  dashcards?: DashboardCard[];
 }
-function createDashboard({ hasScroll }: CreateDashboardOpts = {}) {
+function createDashboard({ hasScroll, dashcards }: CreateDashboardOpts = {}) {
   return createMockDashboard({
     id: DASHBOARD_ID,
     name: "My dashboard",
     width: "full",
-    dashcards: [
+    dashcards: dashcards ?? [
       createMockDashboardCard({
         id: DASHCARD_BAR_ID,
         dashboard_tab_id: TAB_ID,
@@ -357,6 +362,37 @@ export function ComponentCompatibility() {
   );
 }
 
+// Card visualizations
+
+// @ts-expect-error: incompatible prop types with registerVisualization
+registerVisualization(ObjectDetail);
+
+export const CardVisualizationsLightTheme = Template.bind({});
+CardVisualizationsLightTheme.args = {
+  ...defaultArgs,
+  dashboard: createDashboard({
+    dashcards: [
+      createMockDashboardCard({
+        id: DASHCARD_TABLE_ID,
+        dashboard_tab_id: TAB_ID,
+        card: createMockCard({
+          id: CARD_TABLE_ID,
+          name: "Table detail",
+          display: "object",
+        }),
+        size_x: 12,
+        size_y: 8,
+      }),
+    ],
+  }),
+};
+
+export const CardVisualizationsDarkTheme = Template.bind({});
+CardVisualizationsDarkTheme.args = {
+  ...CardVisualizationsLightTheme.args,
+  theme: "night",
+};
+
 const EXPLICIT_SIZE_WAIT_TIME = 300;
 function ScrollDecorator(Story: Story) {
   useEffect(() => {

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailsTable.tsx

@@ -61,7 +61,7 @@ export function DetailsTableCell({
     isLink = false;
   } else {
     if (value === null || value === undefined || value === "") {
-      cellValue = <span className={CS.textLight}>{t`Empty`}</span>;
+      cellValue = <span className={CS.textTertiary}>{t`Empty`}</span>;
     } else if (isa(column.semantic_type, TYPE.SerializedJSON)) {
       let formattedJson;
       try {
@@ -186,7 +186,7 @@ export function DetailsTable({
                   value={row[columnIndex] ?? t`Empty`}
                   isColumnName
                   settings={settings}
-                  className={cx(CS.textBold, CS.textMedium)}
+                  className={cx(CS.textBold, CS.textSecondary)}
                   onVisualizationClick={onVisualizationClick}
                   visualizationIsClickable={visualizationIsClickable}
                 />
@@ -199,7 +199,7 @@ export function DetailsTable({
                   settings={settings}
                   className={cx(
                     CS.textBold,
-                    CS.textDark,
+                    CS.textPrimary,
                     CS.textSpaced,
                     CS.textWrap,
                   )}