i

src/panels/PanelTile.jsx

@@ -8,6 +8,10 @@ import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import { injectMuiTheme } from './injectMuiTheme';
 import {
   GRID_COLUMNS,
+  PANEL_TILE_GRADIENT_DARK,
+  PANEL_TILE_GRADIENT_DARK_TINTED,
+  PANEL_TILE_GRADIENT_LIGHT,
+  PANEL_TILE_GRADIENT_TINTED,
   TILE_ACTION_PADDING,
   panelTilePaperSx,
   tileActionIconSx,
@@ -16,7 +20,8 @@ import {
 
 /**
  * Read-only content panel with a title and an optional corner action (icon
- * button with busy spinner). It is a styled MUI Paper; children fill the body.
+ * button with busy spinner). It is a styled MUI Paper with a modern minimal
+ * diagonal gradient surface; children fill the body.
  *
  * @component PanelTile
  * @import dashgui/panels
@@ -154,4 +159,10 @@ export function PanelTileGrid({ children, sx, icon, text, label, badge, ...rest
   );
 }
 
-export { GRID_COLUMNS };
+export {
+  GRID_COLUMNS,
+  PANEL_TILE_GRADIENT_LIGHT,
+  PANEL_TILE_GRADIENT_TINTED,
+  PANEL_TILE_GRADIENT_DARK,
+  PANEL_TILE_GRADIENT_DARK_TINTED,
+};

src/panels/index.js

@@ -2,4 +2,11 @@ export { PanelTile, PanelTileGrid, GRID_COLUMNS } from './PanelTile';
 export { TabbedPanelTileGrid } from './TabbedPanelTileGrid';
 export { EditablePanelTile } from './EditablePanelTile';
 export { injectMuiTheme } from './injectMuiTheme';
-export { PENDING_EDIT_BORDER } from './panelTileLayout';
+export {
+  PENDING_EDIT_BORDER,
+  PANEL_TILE_BORDER_RADIUS,
+  PANEL_TILE_GRADIENT_LIGHT,
+  PANEL_TILE_GRADIENT_TINTED,
+  PANEL_TILE_GRADIENT_DARK,
+  PANEL_TILE_GRADIENT_DARK_TINTED,
+} from './panelTileLayout';

src/panels/panelTileLayout.js

@@ -31,6 +31,15 @@ export const tileActionIconSx = {
 
 export const PANEL_TILE_BORDER_RADIUS = 4;
 
+export const PANEL_TILE_GRADIENT_LIGHT =
+  'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)';
+export const PANEL_TILE_GRADIENT_TINTED =
+  'linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.04) 100%)';
+export const PANEL_TILE_GRADIENT_DARK =
+  'linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
+export const PANEL_TILE_GRADIENT_DARK_TINTED =
+  'linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
+
 function tileRingBoxShadow(ringColor, elevationShadow) {
   const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
   return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
@@ -52,6 +61,14 @@ export function panelTilePaperSx({
       ? EDITING_TILE_BORDER
       : null;
 
+  const isDark = theme?.palette?.mode === 'dark';
+  const defaultGradient = isDark
+    ? PANEL_TILE_GRADIENT_DARK
+    : PANEL_TILE_GRADIENT_LIGHT;
+  const coloredGradient = isDark
+    ? PANEL_TILE_GRADIENT_DARK_TINTED
+    : PANEL_TILE_GRADIENT_TINTED;
+
   return {
     gridColumn: responsiveColumnSpan(wide),
     position: 'relative',
@@ -61,7 +78,14 @@ export function panelTilePaperSx({
     flexDirection: 'column',
     border: 'none',
     borderRadius: PANEL_TILE_BORDER_RADIUS,
-    ...(color ? { bgcolor: color } : {}),
+    ...(color
+      ? {
+          bgcolor: color,
+          backgroundImage: coloredGradient,
+        }
+      : {
+          backgroundImage: defaultGradient,
+        }),
     ...(ringColor
       ? {
           boxShadow: tileRingBoxShadow(ringColor, elevationShadow),