PMM-14995 Update existing PMM branding assets and styles

.cursor/rules/link-percona-ui.mdc

@@ -0,0 +1,79 @@
+---
+description: Link/unlink the local @percona/percona-ui package into the pmm app for live development. Use when the user wants to develop percona-ui changes against pmm locally.
+alwaysApply: false
+---
+
+# Link `@percona/percona-ui` for local development
+
+Sibling repos required:
+
+```
+pmm-dev/
+├── percona-ui/        # source of @percona/percona-ui (pnpm + rollup)
+└── pmm/ui/apps/pmm/   # consumer (yarn 1 + vite)
+```
+
+`percona-ui` ships `dist/` (rollup). Watch rebuilds dist → vite HMR picks up symlinked node_module.
+
+## Link
+
+```bash
+# 1. percona-ui — install, build, register link, start watch
+cd percona-ui
+pnpm install
+pnpm build
+yarn link
+pnpm build:watch        # leave running
+
+# 2. pmm app — consume link
+cd pmm/ui/apps/pmm
+yarn link "@percona/percona-ui"
+```
+
+Then in `pmm/ui/apps/pmm/vite.config.ts` uncomment:
+
+```ts
+optimizeDeps: {
+  exclude: ['@percona/percona-ui'],
+  force: true,
+},
+```
+
+Start pmm:
+
+```bash
+cd pmm/ui/apps/pmm
+yarn dev
+```
+
+## Unlink
+
+```bash
+# 1. pmm app
+cd pmm/ui/apps/pmm
+yarn unlink "@percona/percona-ui"
+yarn install --check-files
+
+# 2. percona-ui
+cd percona-ui
+yarn unlink
+```
+
+Re-comment the `exclude: ['@percona/percona-ui']` line in `vite.config.ts`.
+
+## Verify
+
+```bash
+# inside pmm/ui/apps/pmm
+ls -la node_modules/@percona/percona-ui
+# linked   → symlink to ../../../../../../percona-ui
+# unlinked → real directory from registry
+```
+
+## Notes
+
+- `yarn link` (not `pnpm link`) — package-manager agnostic global symlink; pmm is yarn 1.
+- Run `yarn link "@percona/percona-ui"` from the **app** dir (`apps/pmm`), not the workspace root.
+- React/MUI duplication avoided: `percona-ui` declares them as `peerDependencies`; vite `dedupe` enforces single copies.
+- Stale dist = stale UI. Keep the `pnpm build:watch` terminal visible to catch build errors.
+- Hard refresh / restart vite with `--force` if HMR misses a change.

ui/apps/pmm/package.json

@@ -25,7 +25,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.13",
+    "@percona/percona-ui": "1.0.16",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",

ui/apps/pmm/src/components/ha-badge/HighAvailabilityBadge.styles.ts

@@ -6,37 +6,19 @@ export const getStyles = (theme: Theme) => ({
     borderColor: theme.palette.text.primary,
   },
   degraded: {
-    color: theme.palette.warning.light,
-    borderColor: theme.palette.warning.light,
+    color: theme.palette.warning.main,
+    borderColor: theme.palette.warning.main,
   },
   critical: {
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.error.dark
-        : theme.palette.error.contrastText,
-    borderColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.error.surface
-        : theme.palette.error.dark,
-    backgroundColor:
-      theme.palette.mode === 'light'
-      ? theme.palette.error.surface
-      : theme.palette.error.dark,
+    color: theme.palette.error.contrastText,
+    borderColor: theme.palette.error.surface,
+    backgroundColor: theme.palette.error.surface,
     transition: 'none',
   },
   down: {
-    color:
-      theme.palette.mode === 'light'
-        ? theme.palette.error.dark
-        : theme.palette.error.contrastText,
-    borderColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.error.surface
-        : theme.palette.error.dark,
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.error.surface
-        : theme.palette.error.dark,
+    color: theme.palette.error.contrastText,
+    borderColor: theme.palette.error.surface,
+    backgroundColor: theme.palette.error.surface,
     transition: 'none',
   },
 });

ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.styles.ts

@@ -6,10 +6,10 @@ export const getStyles = ({ palette: { background, warning, error, info } }: The
     height: 20,
 
     '.background': {
-      fill: background.default,
+      fill: background.paper,
     },
     '.status-at-risk': {
-      fill: warning.light,
+      fill: warning.main,
     },
     '.status-down': {
       fill: error.light,

ui/apps/pmm/src/components/icon/Icon.constants.ts

@@ -14,12 +14,13 @@ export const DYNAMIC_ICON_IMPORT_MAP = {
   home: () => import('icons/home.svg?react'),
   intelligence: () => import('icons/percona-intelligence.svg?react'),
   inventory: () => import('icons/inventory.svg?react'),
-  mongo: () => import('icons/mongo.svg?react'),
-  mysql: () => import('icons/mysql.svg?react'),
+  'percona-mo': () => import('icons/percona-mo.svg?react'),
+  'percona-my': () => import('icons/percona-my.svg?react'),
   node: () => import('icons/home.svg?react'),
   overview: () => import('icons/overview.svg?react'),
-  postgresql: () => import('icons/postgresql.svg?react'),
+  'percona-po': () => import('icons/percona-po.svg?react'),
   'pmm-titled': () => import('icons/pmm-titled.svg?react'),
+  'pmm-titled-outlined': () => import('icons/pmm-titled-outlined.svg?react'),
   'pmm-rounded': () => import('icons/pmm-rounded.svg?react'),
   proxysql: () => import('icons/proxysql.svg?react'),
   qan: () => import('icons/qan.svg?react'),
@@ -33,7 +34,7 @@ export const DYNAMIC_ICON_IMPORT_MAP = {
   check: () => import('icons/check.svg?react'),
   'knowledge-base': () => import('icons/knowledge-base.svg?react'),
   search: () => import('icons/search.svg?react'),
-  valkey: () => import('icons/valkey.svg?react'),
+  'percona-va': () => import('icons/percona-va.svg?react'),
   'my-organization': () => import('icons/my-organization.svg?react'),
   memory: () => import('icons/memory.svg?react'),
   network: () => import('icons/network.svg?react'),
@@ -62,6 +63,7 @@ export const VIEWBOX_MAP: Partial<
   percona: '0 0 180 155',
   'knowledge-base': '0 0 28 28',
   'pmm-rounded': '0 0 160 160',
-  'pmm-titled': '0 0 363 128',
+  'pmm-titled': '0 0 141 48',
+  'pmm-titled-outlined': '0 0 252 113',
   'real-time-database-off': '0 0 192 192',
 };

ui/apps/pmm/src/components/sidebar/drawer/Drawer.styles.ts

@@ -20,7 +20,7 @@ export const closedMixin = (theme: Theme): CSSObject => ({
 });
 
 export const logoMixin = (theme: Theme): CSSObject => ({
-  transition: theme.transitions.create('left', {
+  transition: theme.transitions.create(['left', 'top', 'height', 'color'], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),

ui/apps/pmm/src/components/sidebar/nav-heading/NavigationHeading.tsx

@@ -19,22 +19,27 @@ const NavigationHeading: FC<NavigationHeadingProps> = memo(
         },
         sidebarOpen
           ? {
-              p: 2,
+              pt: 1.5,
+              pr: 0.875,
+              pb: 0.5,
+              pl: 1.75,
             }
           : {
+              pt: 1.5,
               px: 1,
-              py: 2,
+              pb: 0.5,
             },
       ]}
     >
       <Stack
         sx={[
           {
             width: '150px',
-            height: '40px',
+            height: '48px',
 
             '.shown-on-hover': {
               position: 'absolute',
+              top: 16,
               left: -999,
             },
           },
@@ -56,9 +61,11 @@ const NavigationHeading: FC<NavigationHeadingProps> = memo(
           name="pmm-titled"
           className="hidden-on-hover"
           sx={(theme) => ({
-            left: sidebarOpen ? 16 : 8,
-            height: '40px',
+            left: sidebarOpen ? 14 : 8,
+            top: sidebarOpen ? 12 : 16,
+            height: sidebarOpen ? '48px' : '40px',
             width: 'auto',
+            color: sidebarOpen ? undefined : 'transparent',
             position: 'absolute',
             ...logoMixin(theme),
           })}

ui/apps/pmm/src/components/sidebar/nav-item/NavItem.styles.ts

@@ -79,7 +79,7 @@ export const getStyles = (
       whiteSpace: 'nowrap',
       overflow: 'hidden',
 
-      color: active ? 'inherit' : theme.palette.warning.contrastText,
+      color: active ? 'inherit' : theme.palette.text.disabled,
     },
   },
   textOnly: {

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.utils.ts

@@ -1,36 +1,29 @@
 import vscDarkPlus from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
 import { Theme } from '@mui/material/styles';
-import { primitives } from '@percona/percona-ui';
+import { semanticTokensLight, semanticTokensDark } from '@percona/percona-ui';
 import { CodeLanguage } from 'types/util.types';
 
 export const getSyntaxHighlighterStyle = (
   theme: Theme,
   language: CodeLanguage,
   showCopyButton = false
 ) => {
-  const isLight = theme.palette.mode === 'light';
+  const accents =
+    theme.palette.mode === 'light'
+      ? semanticTokensLight.text
+      : semanticTokensDark.text;
 
   const tokens = {
     fontFamily: 'Roboto Mono, monospace',
     background: 'transparent',
     base:
-      language === 'text'
-        ? theme.palette.text.primary
-        : isLight
-          ? primitives.brand.sky[600]
-          : primitives.brand.sky[200],
-    attrValue: isLight
-      ? primitives.brand.aqua[700]
-      : primitives.brand.aqua[300],
-    string: isLight ? primitives.brand.aqua[700] : primitives.brand.aqua[300],
+      language === 'text' ? theme.palette.text.primary : accents.accent1,
+    attrValue: accents.accent3,
+    string: accents.accent3,
     number: theme.palette.text.primary,
-    property: isLight
-      ? primitives.brand.lavender[600]
-      : primitives.brand.sky[200],
-    function: isLight
-      ? primitives.brand.lavender[600]
-      : primitives.brand.lavender[200],
-    operator: isLight ? primitives.brand.aqua[700] : primitives.brand.aqua[300],
+    property: accents.accent2,
+    function: accents.accent2,
+    operator: accents.accent3,
     punctuation: theme.palette.text.secondary,
   };
 

ui/apps/pmm/src/contexts/navigation/navigation.constants.ts

@@ -34,7 +34,7 @@ export const NAV_HOME_PAGE: NavItem = {
 export const NAV_MYSQL: NavItem = {
   id: 'mysql',
   text: 'MySQL',
-  icon: 'mysql',
+  icon: 'percona-my',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mysql-instance-overview/mysql-instances-overview`,
   children: [
     {
@@ -120,7 +120,7 @@ export const NAV_MYSQL: NavItem = {
 //
 export const NAV_MONGO: NavItem = {
   id: 'mongo',
-  icon: 'mongo',
+  icon: 'percona-mo',
   text: 'MongoDB',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/mongodb-instance-overview/mongodb-instances-overview`,
   children: [
@@ -183,7 +183,7 @@ export const NAV_MONGO: NavItem = {
 export const NAV_POSTGRESQL: NavItem = {
   id: 'postgre',
   text: 'PostgreSQL',
-  icon: 'postgresql',
+  icon: 'percona-po',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/postgresql-instance-overview/postgresql-instances-overview`,
   children: [
     {
@@ -309,7 +309,7 @@ export const NAV_PROXYSQL: NavItem = {
 export const NAV_VALKEY: NavItem = {
   id: 'valkey',
   text: 'Valkey',
-  icon: 'valkey',
+  icon: 'percona-va',
   url: `${PMM_NEW_NAV_GRAFANA_PATH}/d/valkey-overview/valkey-redis-overview`,
   children: [
     {