PMM-14995 Update existing PMM branding assets and styles

[pmcf-percona]

PMM-14995

FB: SUBMODULES-4325

1. Brand mark (purple)

Old orange/gradient PMM mark is replaced everywhere it shipped as a static asset:

• dashboards/pmm-app/src/img/pmm-logo.svg
• dashboards/pmm-app/src/shared/assets/pmm-logo.svg
• ui/apps/pmm-compat/src/img/pmm-logo.svg
• dashboards/pmm-app/src/shared/assets/logo.png — removed (orphan PNG of the same mark)
  Inline icons updated:
• ui/apps/pmm/src/icons/pmm-titled.svg — new horizontal lockup (viewBox 0 0 141 48)
• ui/apps/pmm/src/icons/pmm-titled-outlined.svg — new outlined variant for hero/empty-state usage (viewBox 0 0 252 113)
• Icon.constants.ts — registers pmm-titled-outlined, updates pmm-titled viewBox

2. DB engine icons → Percona family

Renamed and re-drawn so all DB engine icons live under one consistent percona-* namespace and avoid conflicts with trademarks and name-image associations:

Before	After
mongo	percona-mo
mysql	percona-my
postgresql	percona-po
valkey	percona-va

• Old SVGs deleted, new SVGs added under ui/apps/pmm/src/icons/
• Icon.constants.ts — keys renamed in DYNAMIC_ICON_IMPORT_MAP
• contexts/navigation/navigation.constants.ts — sidebar entries point to the new icon names

3. Semantic color tokens

Requires merging percona/percona-ui#12.

Replaces raw hex values and raw primitives.brand.* reads with the new semantic tokens exported by @percona/percona-ui:

• components/syntax-highlighter/SyntaxHighlighter.utils.ts — uses semanticTokensLight/Dark.text.accent1/2/3 instead of primitives.brand.{sky,lavender,aqua}
• pages/help-center/HelpCenter.constants.ts + HelpCenterCard.tsx + HelpCenterCard.types.ts — replaces inline borderColor: '#XXXXXX' with a typed borderColorKey resolved against SemanticTokens['charts']. All four cards currently map to chart2 (intentional — single accent across the help section).
• components/ha-badge/HighAvailabilityBadge.styles.ts — uses palette.warning.main, palette.error.surface, palette.error.contrastText (also drops the now-redundant light/dark branching)
• components/ha-icon/HighAvailabilityIcon.styles.ts — background.paper and warning.main
• components/sidebar/nav-item/NavItem.styles.ts — text.disabled instead of warning.contrastText for inactive items
• pages/updates/.../UpdateProgress.tsx — drops hard-coded #008C71 / #606C86 in favour of MUI color="success" / color="primary"

4. Hero / empty state polish

• New assets/mountains.jpg background, replacing welcome.svg and welcome-4x.jpg (both removed)
• pages/updates/Updates.tsx and pages/help-center/welcome-card/WelcomeCard.tsx now share the same hero pattern: 240px image with the outlined PMM lockup centered on top (112px tall)

5. Sidebar logo polish

components/sidebar/drawer/Drawer.styles.ts + components/sidebar/nav-heading/NavigationHeading.tsx:

• Logo size grows from 40 → 48px when the drawer is expanded
• Position offsets retuned so the new mark sits on the 4px grid in both states
• Logo color fades to transparent while collapsed, so the drawer-open transition stays smooth
• Drawer transition now animates left, top, height, color (was left only)

6. Dev tooling

• New .cursor/rules/link-percona-ui.mdc — documents the context of yarn link workflow for developing @percona/percona-ui against PMM locally

Screenshots:

---

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 41.51%. Comparing base (b4e5544) to head (2dd1db0).

Additional details and impacted files

@@            Coverage Diff             @@
##               v3    #5292      +/-   ##
==========================================
+ Coverage   41.49%   41.51%   +0.01%     
==========================================
  Files         410      540     +130     
  Lines       41992    44339    +2347     
  Branches        0      584     +584     
==========================================
+ Hits        17424    18406     +982     
- Misses      22814    24115    +1301     
- Partials     1754     1818      +64     

Flag	Coverage Δ
admin	34.89% <ø> (ø)
agent	46.74% <ø> (+0.11%)	⬆️
managed	40.61% <ø> (ø)
unittests	41.32% <ø> (?)
vmproxy	72.09% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pmcf-percona]

@matejkubinec we still need to do this that is done at the Grafana level:

• Favicon update — still pending; lives in our Grafana fork (not in this repo)
• Login page logo update — still pending; same reason as the favicon (Grafana-side asset).

For both we can use this:

[matejkubinec]

@matejkubinec we still need to do this that is done at the Grafana level:

• Favicon update — still pending; lives in our Grafana fork (not in this repo)
• Login page logo update — still pending; same reason as the favicon (Grafana-side asset).

For both we can use this:

I'll handle the change on the Grafana side, will include it into FB.