feat(theme): integrate Midnight theme

[yashwant-intelligaia]

📝 Description

Midnight Theme — Component Status

Package: packages/open-ui-kit
Figma source: Outshift Spark Component Library

Components — Midnight done & working

All 63 components render correctly under Midnight. The kit is fully tokenized — an audit across every component directory found no hard-coded colors outside of button's two linear-gradient(#fff 0 0) mask declarations, which are a padding-box/border-box masking trick and never paint a visible color. So components pick up Midnight from the theme foundation whether or not they needed a fix of their own.

S.No.	Component	Midnight Theme Support
1	Accordion	✅
2	ActionsDialog	✅
3	ActivityTimeline	✅
4	AnchorLinkMenu	✅
5	Avatar	✅
6	Backdrop	✅
7	Badge	✅
8	Banner	✅
9	Breadcrumbs	✅
10	Button	✅
11	Card	✅
12	Checkbox	✅
13	CodeBlock	✅
14	CopyButton	✅
15	DateTime	✅
16	Dialog	✅
17	Divider	✅
18	Elevation	✅
19	EmptyState	✅
20	Filters	✅
21	FloatingButton	✅
22	Footer	✅
23	Gradients	✅
24	Header	✅
25	Icon	✅
26	IndicatorBadge	✅
27	InputField	✅
28	KeyValuePairs	✅
29	Link	✅
30	List	✅
31	LoadingErrorState	✅
32	LoadingStates	✅
33	Menu	✅
34	Message	✅
35	Navigation	✅
36	NestedMenu	✅
37	OverflowTooltip	✅
38	Pagination	✅
39	PathDisplay	✅
40	Picker	✅
41	Popover	✅
42	Radio	✅
43	ScrollArea	✅
44	SearchInput	✅
45	Select	✅
46	SeverityBadge	✅
47	SeverityBadgeLabel	✅
48	SeverityBar	✅
49	SideDrawer	✅
50	Skeleton	✅
51	Slider	✅
52	Spinner	✅
53	Stepper	✅
54	Table	✅
55	Tabs	✅
56	Tags	✅
57	Toast	✅
58	Toggle	✅
59	Tooltip	✅
60	Typography	✅
61	Upload	✅
62	ViewSwitcher	✅
63	Widget	✅

Required a Midnight-specific fix

The subset above that needed actual work — everything else inherited Midnight with no change:

Accordion · ActivityTimeline · Banner · Button · Checkbox · CodeBlock · Dialog · FloatingButton · Footer · Header · Message · Navigation · Popover · Typography

Five components carry no color tokens at all and are theme-agnostic by construction: Elevation, LoadingErrorState, OverflowTooltip, PathDisplay, SeverityBar. LoadingErrorState composes Spinner and Typography and delegates all color to them.

---

Structural changes

Of the components that required a fix, these changed API or internals. The rest (Banner, Checkbox, Header, Message, Navigation, Popover) were token-only corrections with no API impact.

Accordion — Added a showBorder prop so the top border can be toggled independently of size. Default behaviour unchanged.
ActivityTimeline — Turns off the nested Accordion's border and divider (the timeline draws its own). Also gained a gradient variant.
Avatar — Resting and hover fills move off the brandBackgroundPrimary ramp onto interactivePrimaryWeakDefault / interactivePrimaryWeakHover; Light and Dark are pixel-identical after the swap, so only Midnight changes.
Button — Added gradient and gradientOutlined variants, plus a new gradient token layer.
CodeBlock — Syntax colors now come from the theme instead of hard-coded Prism literals, so the block is legible in Midnight. New prism-grammar.ts adds two missing grammar tokens.
Dialog — Description text needed a && selector to outrank a MUI-injected style. Fixes Light and IoC; no visual change in Midnight.
FloatingButton — Background is now chosen per variant instead of being hard-wired, so primary and secondary differ by fill, not just outline.
Footer — AGNTCY brand mark re-exported from Figma and its color tokenized.
Header — Outshift brand mark now paints its spark in four fixed brand colors with the wordmark tokenized to brandLogoSecondary, replacing a single currentColor silhouette. Its notification badge also drops a hand-rolled Box for the real Badge.
Navigation — selected and open split into separate treatments: selected takes the primary text ramp and full rounding, open keeps the secondary ramp and is distinguished by its border alone. Its Dashboard icon was rebuilt around a shared DashboardMark with a three-tone tones prop, so selected, unselected and disabled stop rendering identically. Re-tokenizes Light and Dark as well as Midnight.
Typography — Added a gradient text variant with new exports.

---

Supporting (non-component) changes

Theme foundation — midnight-theme.tsx, midnight-vars.ts, palette additions, theme-provider registration, Storybook theme switcher.
excellent / interactive disabled token opacity (fdba59688) — 9 Midnight tokens were mapped to solid Electric Blue instead of low-opacity variants. This is a token-level fix with no component file change, but it is what corrected the Banner excellent variant (previously solid bright cyan) and disabled states rendering fully opaque.
Storybook Docs CSS — .storybook/css/preview.css bare-element rules were repainting inline story previews, so the Docs tab was showing Storybook's own chrome colors on top of real components (Midnight breadcrumbs rendered blue instead of #e8e9ea). Each selector now carries a :not(.sb-unstyled *) guard. This affected verification of every component in the kit, not just one.

---

Audited — no change required

Recorded so they are not "fixed" into a regression later.

KeyValuePairs — no component change was needed. Every color resolves through theme.palette.vars with no hard-coded values, so it picks up Midnight from the theme foundation automatically.
Breadcrumbs — link text, separator chevron, and collapsed trigger already use interactiveSecondaryDefaultDefault; verified via computed style.
interactiveSecondaryDefaultDefault family — matches the Figma Agntcy Light / Agntcy Dark / Agntcy Midnight columns across resting, hover, active, and disabled.

---

Open questions for design

1. Midnight disabled state is brighter than resting. interactiveSecondaryDefaultDisabled is Grey/0 (#ffffff) vs resting Grey/50 (#e8e9ea), so disabled links read as more prominent. The code mirrors Figma faithfully — this is a design-side call.
2. IoC diverges from Figma on the interactiveSecondary family (#2B82F6 vs Figma's #e8eefb). Either align it or add a comment recording why, as ioc-vars.ts:93 does for its own deviation.
3. Header dropdown hover still uses baseBackgroundHover (#0f1623), now darker than the resting background after the resting token was corrected — hover used to be lighter. If unintended, switch to controlBackgroundHover.

---

Verification

Suite	Result
header.test.tsx	19 passed
footer.test.tsx	9 passed
floating-button	12 passed
dialog.test.tsx	7 passed
code-block.test.tsx	updated for themed prismStyle(theme)
popover.test.tsx	updated for baseBackgroundWeak
tsc --noEmit	clean

Tests run with Node 22 (~/.nvm/versions/node/v22.23.1); the repo's default Node v20.9.0 is too old for the Vitest/Rolldown toolchain. This package's suite is Jest — npx jest --config=jest.config.js.

Detailed rationale per token change lives in DESIGN-TOKEN-CHANGES.md.

🔗 Related Issue

Closes #

🧪 Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🎨 Style/design update
• 🔧 Build/CI update
• ♻️ Refactoring (no functional changes)
• 🧪 Tests only

🧪 Testing

• Focused tests pass (yarn test --testPathPattern=)
• Lint and typecheck pass (yarn lint && yarn typecheck)
• Storybook builds successfully (yarn storybook:build)
• Manual testing completed
• Cross-browser testing (if applicable)

Test Instructions:

♿ Accessibility

• Follows WCAG 2.1 AA guidelines
• Keyboard navigation tested
• Screen reader tested
• Color contrast verified
• Focus indicators present
• ARIA attributes added where needed

📱 Responsive Design

• Mobile responsive
• Tablet responsive
• Desktop responsive
• All breakpoints tested

📚 Documentation

• Storybook story added/updated
• Component props documented
• Usage examples provided
• README updated (if needed)
• TypeScript types exported

🔄 Breaking Changes

• This PR introduces breaking changes
• Migration guide provided (if breaking changes)
• Version bump required

📋 Checklist

• Code follows the project's style guidelines
• Self-review of code completed
• Code is commented where necessary
• No console.log statements left in code
• Build passes locally
• Tests added for new functionality
• Existing tests still pass
• No TypeScript errors
• No accessibility violations
• Full unscoped yarn test was not run locally
• PR title follows conventional commit format

📸 Screenshots

Before

After

🔍 Additional Notes

---

For Maintainers:

• Ready for review
• Requires design review
• Requires accessibility review
• Ready to merge