Match swimlane controls to title color

client/components/swimlanes/swimlanes.css

@@ -110,7 +110,10 @@
   padding: 5px;
   display: inline-block;
   margin-inline-start: 30px;
-  color: #a6a6a6;
+  /* The controls belong to the coloured header. Inherit its computed text
+     colour so a dark/hex swimlane with a white title also has white controls,
+     while a light swimlane keeps the same dark title/control contrast. */
+  color: inherit;
   vertical-align: middle;
   line-height: 1.2;
 }
@@ -123,7 +126,7 @@
   padding: 5px;
   margin-inline-start: 20px;
   font-size: calc(22px * var(--wekan-ui-font-scale, 1));
-  color: #a6a6a6;
+  color: inherit;
 }
 .swimlane .swimlane-header-wrap .swimlane-header-menu-icon {
   padding-inline-start: 5px;
@@ -142,7 +145,7 @@
 }
 /* Swimlane collapse button styling - matches list collapse button */
 .swimlane .swimlane-header-wrap .swimlane-header-menu .swimlane-collapse-indicator {
-  color: #a6a6a6;
+  color: inherit;
   display: inline-block;
   vertical-align: middle;
   padding: 5px;
@@ -159,15 +162,15 @@
 }
 .swimlane .swimlane-header-wrap .swimlane-header-menu .swimlane-collapse-indicator:hover {
   background-color: transparent;
-  color: #333;
+  color: inherit;
 }
 
 .swimlane .swimlane-header-wrap .swimlane-header-menu .js-open-swimlane-menu:hover {
-  color: #333;
+  color: inherit;
 }
 
 .swimlane .swimlane-header-wrap .swimlane-header-plus-icon:hover {
-  color: #333;
+  color: inherit;
 }
 
 .swimlane .swimlane-header-wrap .swimlane-header-handle:hover {

tests/swimlaneHeaderButtonColor.test.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const css = fs.readFileSync(
+  path.join(root, 'client/components/swimlanes/swimlanes.css'),
+  'utf8',
+);
+const jade = fs.readFileSync(
+  path.join(root, 'client/components/swimlanes/swimlaneHeader.jade'),
+  'utf8',
+);
+
+const ruleBody = selector => {
+  const start = css.indexOf(selector);
+  assert.ok(start >= 0, `${selector} rule exists`);
+  const open = css.indexOf('{', start);
+  return css.slice(open + 1, css.indexOf('}', open));
+};
+
+const controls = [
+  '.swimlane .swimlane-header-wrap .swimlane-header-menu .swimlane-collapse-indicator',
+  '.swimlane .swimlane-header-wrap .swimlane-header-menu .js-open-swimlane-menu',
+  '.swimlane .swimlane-header-wrap .swimlane-header-plus-icon',
+];
+
+for (const selector of controls) {
+  assert.match(ruleBody(selector), /color:\s*inherit;/,
+    `${selector} follows the swimlane title colour`);
+  assert.match(ruleBody(`${selector}:hover`), /color:\s*inherit;/,
+    `${selector} keeps the title colour while hovered`);
+}
+
+assert.match(jade, /a\.swimlane-collapse-indicator[^\n]*\n[\s\S]{0,160}fa-caret-/,
+  'the collapse selector belongs to the visible caret');
+assert.match(jade, /a\.js-open-swimlane-menu[^\n]*\n\s+i\.fa\.fa-bars/,
+  'the menu selector belongs to the visible hamburger');
+assert.match(jade, /a\.js-open-add-swimlane-menu\.swimlane-header-plus-icon[^\n]*\n\s+i\.fa\.fa-plus/,
+  'the add selector belongs to the visible plus');
+
+for (const selector of controls) {
+  assert.doesNotMatch(ruleBody(selector), /color:\s*#[0-9a-f]{3,8}/i,
+    `${selector} must not override light or dark swimlane title colours`);
+}
+
+console.log('swimlaneHeaderButtonColor: title-colour inheritance passed');