frontend/src/index.test.ts

@@ -8,12 +8,15 @@ const indexCss = readFileSync (
     resolve (process.cwd (), 'src/index.css'),
     'utf8')
 const compactIndexCss = indexCss.replace (/\s+/g, ' ')
+const mobileActiveRule = '.top-nav-mobile-active {'
+    + ' background: var(--top-nav-mobile-active-bg); }'
 const mobileSubmenuRule = '.top-nav-mobile-menu .top-nav-submenu {'
     + ' background: var(--top-nav-mobile-active-bg); }'
 
 
-describe ('TopNav mobile submenu colours', () => {
+describe ('TopNav mobile menu colours', () => {
-  it ('uses the mobile active background for an expanded submenu', () => {
+  it ('uses one background variable for active rows and expanded submenus', () => {
+    expect (compactIndexCss).toContain (mobileActiveRule)
     expect (compactIndexCss).toContain (mobileSubmenuRule)
   })
 })

frontend/src/lib/settings.test.ts

@@ -89,8 +89,12 @@ describe ('settings', () => {
   })
 
   it ('derives TopNav colours without mixing mobile active backgrounds', () => {
-    expect (buildThemeTokens ('light', { }).topNavMobileActiveBackground).toBe (
+    const tokens = buildThemeTokens ('light', { })
+
+    expect (tokens.topNavMobileActiveBackground).toBe (
 	LIGHT_THEME_TOKENS.topNavRootBackgroundDesktop)
+    expect (tokens.topNavMobileActiveBackground).not.toBe (
+	tokens.topNavRootBackgroundMobile)
     expect (buildThemeTokens ('dark', { }).topNavMobileActiveBackground).toBe (
 	DARK_THEME_TOKENS.topNavActiveBackground)
   })