Fix theme toggle inline

README.md

@@ -263,6 +263,7 @@ set variables:
 | `$skinActiveTabTextColor` / `$skinActiveTabTextColorDark` | `$skinMainSecondColor` / `#7cc0ec` | selected tab label |
 | `$skinInactiveTabTextColor` / `$skinInactiveTabTextColorDark` | `#5e6469` / `#b0b8c2` | inactive tab label |
 | `$skinTableHeaderTextColor` / `$skinTableHeaderTextColorDark` | `#5e6469` / `#dde2e8` | index-table column header text |
+| `$skinStatusTagTextColor` | `#ffffff` | status tag label; `#000000` passes WCAG AA on every fill |
 | `$skinTabPaddingY` | `8px` | tab height |
 | `$skinTabPaddingX` | `15px` | tab label horizontal padding (text → border) |
 

app/assets/stylesheets/wigu/active_admin_theme.scss

@@ -131,6 +131,8 @@ $skinInactiveTabTextColorDark: #b0b8c2!default;
 // Index-table column header text, one colour for sortable and plain headers.
 $skinTableHeaderTextColor: #5e6469!default;
 $skinTableHeaderTextColorDark: #dde2e8!default;
+// Status tag label, the same on every filled tag in both modes.
+$skinStatusTagTextColor: #ffffff!default;
 
 //DARK-MODE PALETTE---------------------------------------------------------------------------------------------------//
 // Semantic CSS custom properties for runtime light/dark switching. Light values
@@ -301,7 +303,8 @@ $theme-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
   skinInactiveTabTextColor: $skinInactiveTabTextColor,
   skinInactiveTabTextColorDark: $skinInactiveTabTextColorDark,
   skinTableHeaderTextColor: $skinTableHeaderTextColor,
-  skinTableHeaderTextColorDark: $skinTableHeaderTextColorDark
+  skinTableHeaderTextColorDark: $skinTableHeaderTextColorDark,
+  skinStatusTagTextColor: $skinStatusTagTextColor
 ) {
   @if type-of($value) != color {
     @error "$#{$name} must be a color (use `transparent`, not `none`), got `#{$value}`.";
@@ -441,8 +444,10 @@ body.active_admin {
       // $skinMenuTextColor like every other item in the bar.
       // On the li, not only the anchor: font-size 0 collapses the anchor to the
       // icon's own 16px, which then sits at the top of the item instead of on
-      // the line the rest of the bar shares.
-      > li#theme_toggle { display: flex; align-items: center; }
+      // the line the rest of the bar shares. inline-flex, not flex: ActiveAdmin
+      // lays the utility nav out as `li { display: inline }`, and a block-level
+      // item breaks the row, dropping the items after it onto new lines.
+      > li#theme_toggle { display: inline-flex; align-items: center; vertical-align: middle; }
       > li#theme_toggle > a {
         display: flex;
         align-items: center;
@@ -1413,11 +1418,10 @@ input[type='radio'] {
 @mixin status-tag-colors($c) {
   background: $c;
   border-color: mix($c, #000000, 84%); // = darken($c) — outline in the fill colour
-  // Black, not white: the five fills below are mid-tone, and white lands
-  // between 2.35 and 3.78 against them — under the 4.5 WCAG AA asks for text
-  // this small. Black gives at least 5.56 on every one of them. #1a1d21 was
-  // the first thing tried and misses by 0.02 on the error red.
-  color: #000000;
+  // The five fills below are mid-tone: white lands between 2.35 and 3.78
+  // against them, under the 4.5 WCAG AA asks for text this small. Set
+  // $skinStatusTagTextColor: #000000 for at least 5.56 on every one of them.
+  color: $skinStatusTagTextColor;
 }
 
 //CONTENT (both modes)-----------------------------------------------------------//

test/css_check.rb

@@ -26,6 +26,7 @@ module CssCheck
     # The panel header pair is documented as taking a custom property, so the
     # colour guard has to let one through.
     "panel header as a custom property" => '$skinPanelHeaderColor: var(--aa-surface);',
+    "black status tag labels" => '$skinStatusTagTextColor: #000000;',
     "repainted palette" => '$skinPageBgColor: #fafafa; $skinSurfaceColor: #ffffff;
                             $skinTextColor: #202020; $skinLinkColor: #0b5;',
   }.freeze
@@ -45,6 +46,7 @@ module CssCheck
     "$skinTextColor: none"                => '$skinTextColor: none;',
     "$skinLinkColorDark: none"            => '$skinLinkColorDark: none;',
     "$skinPanelHeaderColor as a length"   => '$skinPanelHeaderColor: 10px;',
+    "$skinStatusTagTextColor: none"       => '$skinStatusTagTextColor: none;',
   }.freeze
 
   # The variables table in the README is the public contract people configure
@@ -75,7 +77,7 @@ def self.readme_table_matches_declarations
     end
   end
 
-  DECLARED_ROWS = 52
+  DECLARED_ROWS = 53
 
   def self.load_paths
     activeadmin = Gem::Specification.find_by_name("activeadmin").gem_dir
@@ -118,6 +120,16 @@ def self.run
                   "they out-specify $skinMenuTextColor and render invisible on a light panel"
     end
 
+    # ActiveAdmin keeps the utility nav on one line with `li { display: inline }`.
+    # A block-level item (flex, block, grid) breaks that row and stacks the
+    # username, theme switch and logout on top of each other.
+    utility = compile(GOOD["defaults"]).scan(/^[^{}]*#utility_nav\s*>\s*li[^{}\s,]*\s*\{[^}]*\}/m)
+    blocky = utility.select { |rule| rule =~ /^\s*display:\s*(?:flex|block|grid)\s*;/ }
+    unless blocky.empty?
+      failures << "utility nav: #{blocky.size} item rule(s) make the li block-level and break the inline row: " \
+                  "#{blocky.map { |rule| rule[/\A[^{]*/].strip }.join(", ")}"
+    end
+
     if failures.empty?
       drift = readme_table_matches_declarations
       unless drift.empty?