updates on the design on the kpi cards

src/themes/dt/primitives.js

@@ -26,14 +26,30 @@ export const softPopupStyle = {
   overflow: 'hidden'
 };
 
-// Scroll container for a table. Astryx's Table renders a bare <table> with no
-// sticky-header or max-height affordance (MUI's TableContainer used to provide that),
-// so pages wrap it in this. The brand-red scrollbar can't be expressed inline
-// — ::-webkit-scrollbar-* are pseudo-elements — hence the one-time <style>.
+// ---------------------------------------------------------------------------
+// TableScroll — scroll container for a table.
+//
+// Astryx's Table renders a bare <table> with no sticky-header or max-height
+// affordance (MUI's TableContainer used to provide that), so pages wrap it in
+// this. The brand scrollbar can't be expressed inline — ::-webkit-scrollbar-*
+// are pseudo-elements — hence the one-time <style>.
+//
+// It is also where KROW's table-header TYPE treatment lands, and that is what
+// makes the one-time <style> worth its keep: ~17 pages render tables and none
+// of them should have to know what a column header looks like. The header is
+// now the console's heading face at 11px / 600 / +0.06em / uppercase — small,
+// letterspaced and quiet, so it reads as a LABEL for the data rather than
+// competing with it.
+//
+// Deliberately type only: no colour is set here, so header and body cells keep
+// whatever Astryx's Table resolves them to, and row hover stays owned by
+// Astryx's own `hasHover` prop rather than being fought over by two rules.
+//
 // `flush` drops the grey header fill and leaves a single hairline under the
 // header row — for tables that sit directly on the page with no surrounding
 // card, where a fill plus a border plus a card outline is three lines doing
 // one job.
+// ---------------------------------------------------------------------------
 export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, flush = false, children }) => (
   <>
     <style>{`
@@ -61,6 +77,19 @@ export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, flush
         background-color: ${DT.surface};
         border-bottom: 1px solid ${DT.borderSubtle};
       }
+      /* KROW's column-header treatment — type only, no colour. */
+      .dt-table-scroll thead th {
+        font-family: var(--font-family-heading);
+        font-size: 11px;
+        line-height: 16px;
+        font-weight: 600;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      /* Numeric columns opt in per page with class="dt-num"; tabular figures
+         stop a live count from reflowing the column as it ticks. */
+      .dt-table-scroll .dt-num { font-variant-numeric: tabular-nums; }
     `}</style>
     <div className={`dt-table-scroll${flush ? ' is-flush' : ''}`} style={{ maxHeight }}>
       <div style={{ minWidth }}>{children}</div>