fix(platform): use Paper’s strong text role for dashboard headings and values

Author: emir-karabeg

apps/sim/platform/design-system/components/charts.module.css

@@ -1,4 +1,5 @@
 .chart {
+  color: var(--ui-strong);
   container-type: inline-size;
   display: grid;
   align-content: start;
@@ -140,7 +141,7 @@
   margin-inline-start: auto;
   min-width: var(--spacing-44);
   text-align: end;
-  color: var(--ui-ink);
+  color: var(--ui-strong);
   font-variant-numeric: tabular-nums;
 }
 .tooltip {

apps/sim/platform/design-system/components/workspace.module.css

@@ -52,6 +52,11 @@
   color: var(--ui-secondary);
 }
 .metric dd,
+.header,
+.table td[data-kind="text"] {
+  color: var(--ui-strong);
+}
+.metric dd,
 .table {
   font-variant-numeric: tabular-nums;
 }
@@ -92,9 +97,6 @@
 .table :is([data-kind="status"], [data-kind="percent"]) {
   inline-size: calc(var(--ui-table-wide) + var(--spacing-16));
 }
-.table td[data-kind="text"] {
-  color: var(--ui-ink);
-}
 .table th {
   height: var(--spacing-app-control-md);
 }

apps/sim/platform/design-system/styles/materials.css

@@ -1,6 +1,7 @@
 [data-platform-ui] {
   --ui-canvas: var(--color-light-canvas);
   --ui-ink: var(--color-app-text-primary);
+  --ui-strong: var(--color-light-text-strong);
   --ui-secondary: var(--color-app-text-secondary);
   --ui-muted: var(--color-app-text-muted);
   --ui-border: var(--color-light-border);
@@ -22,6 +23,7 @@
 [data-platform-ui][data-theme="dark"] {
   --ui-canvas: var(--color-dark-canvas);
   --ui-ink: var(--color-app-dark-text-primary);
+  --ui-strong: var(--color-dark-text-primary);
   --ui-secondary: var(--color-app-dark-text-secondary);
   --ui-muted: var(--color-app-dark-text-muted);
   --ui-border: var(--color-dark-border);