active_admin_theme 3.0.0 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c393033738086398f691d3a9e754ece92f10ab6c647dd0357da38fc5167e4368
-  data.tar.gz: 6733dc12d9ceca058b15072be3826989334e106be7db5fd273017871e258ec41
+  metadata.gz: d1993fdd8d2c135f02b1dfe4cd689c4422c3ff1b8b3b17d5b1365c8d5001a188
+  data.tar.gz: 4e5fc48944ad78ad1684b7631537c59efc2c1b8973d10b867c7c6ca330c3e935
 SHA512:
-  metadata.gz: 2c9c40332a46b50fd79f0d1959a2cb25c4ff23ac12be1dce88b721cfcafcbc798b9971f6cb17a4ee088985a08fdac8e1cba55275579bee8ed892eb50e23a051c
-  data.tar.gz: e1973bc1eb334a1f14cb4dd46094b1c802f0074243ac89ff30aaea894b84a744a5cce42b517feb63cc083b429517fd851ac41dc391a686a9d60cb732ff170e18
+  metadata.gz: 9cdc504b3d55ec896fbfb0db1667b07d411be5b90b4ec6531731728d0152f4bda13ae645b3afd3f95c8429c820c9bc49bc3dc12cfafe40913e89cebe6b1c0e4d
+  data.tar.gz: 4f9c30bb187b18ed8f7d9d180b7d50ed03e3150b3ecdcdd3470d6318609118e5189781a952975ed261f68b18ed587dcb985380c78e8162b6af83cfe65bbd6b66

data/README.md

@@ -35,7 +35,7 @@ Or add manually to `package.json`:
 
 ```
 "dependencies": {
-  "@activeadmin-plugins/active_admin_theme": "^3.0.0"
+  "@activeadmin-plugins/active_admin_theme": "^3.1.0"
 }
 ```
 and execute:
@@ -176,8 +176,19 @@ applies it in the others.
 
 ### Upgrading
 
-Two things changed shape in this release and are worth knowing if you already
-set variables:
+#### 3.1.0
+
+* Status tag fills are darker, so the label can be white and still clear 4.5:1 —
+  it was black on mid-tone fills before. Each fill is a variable now
+  (`$skinStatusTagOkColor` and the four beside it), and
+  `$skinStatusTagTextColor: #000000;` restores the old label with the fills
+  you choose.
+* Index-table column headings take `$skinTextColor` rather than a muted grey,
+  so a heading reads as strongly as the column under it.
+
+#### 3.0.0
+
+Three things changed shape and are worth knowing if you already set variables:
 
 * Dropdown panels — the title-bar menu, the batch-actions menu and the
   table-tools menus — now follow the surface palette (`$skinSurfaceColor` and
@@ -262,7 +273,13 @@ set variables:
 | `$skinTabInactiveColor` / `$skinTabInactiveColorDark` | `#f7f9fb` / `#161a1e` | inactive tab fill |
 | `$skinActiveTabTextColor` / `$skinActiveTabTextColorDark` | `$skinMainSecondColor` / `#7cc0ec` | selected tab label |
 | `$skinInactiveTabTextColor` / `$skinInactiveTabTextColorDark` | `#5e6469` / `#b0b8c2` | inactive tab label |
-| `$skinTableHeaderTextColor` / `$skinTableHeaderTextColorDark` | `#5e6469` / `#dde2e8` | index-table column header text |
+| `$skinTableHeaderTextColor` / `$skinTableHeaderTextColorDark` | `$skinTextColor` / `#dde2e8` | index-table column header text; the body text colour, so headings read as strongly as the rows |
+| `$skinStatusTagTextColor` | `#ffffff` | label inside a filled status tag; `empty` / `unknown` / `none` have no fill and keep `$skinTextMutedColor` |
+| `$skinStatusTagNeutralColor` | `#707681` | unclassified tags: `No`, protocol tags |
+| `$skinStatusTagOkColor` | `#5e7e63` | `ok` `published` `complete` `completed` `green` `yes` |
+| `$skinStatusTagNoticeColor` | `#3874d2` | `notice` `blue` |
+| `$skinStatusTagWarnColor` | `#9e6c15` | `warn` `warning` `orange` |
+| `$skinStatusTagErrorColor` | `#ce483b` | `error` `errored` `red` |
 | `$skinTabPaddingY` | `8px` | tab height |
 | `$skinTabPaddingX` | `15px` | tab label horizontal padding (text → border) |
 

data/app/assets/stylesheets/wigu/active_admin_theme.scss

@@ -129,9 +129,21 @@ $skinActiveTabTextColorDark: #7cc0ec!default;
 $skinInactiveTabTextColor: #5e6469!default;
 $skinInactiveTabTextColorDark: #b0b8c2!default;
 // Index-table column header text, one colour for sortable and plain headers.
-$skinTableHeaderTextColor: #5e6469!default;
+$skinTableHeaderTextColor: $skinTextColor!default;
 $skinTableHeaderTextColorDark: #dde2e8!default;
 
+// Status tags. The label is the same on every filled tag in both modes. The
+// fills below are dark enough to carry a white one: every one of the five is
+// at least 4.53 against it. The mid-tone fills this palette replaces ran from
+// 2.35 to 3.78, under the 4.5 WCAG AA asks of text this small, which is why
+// they moved rather than the label.
+$skinStatusTagTextColor: #ffffff!default;
+$skinStatusTagNeutralColor: #707681!default;  // "No", protocol tags, anything unclassified
+$skinStatusTagOkColor: #5e7e63!default;       // ok / published / complete / green / yes
+$skinStatusTagNoticeColor: #3874d2!default;   // notice / blue
+$skinStatusTagWarnColor: #9e6c15!default;     // warn / warning / orange
+$skinStatusTagErrorColor: #ce483b!default;    // error / errored / red
+
 //DARK-MODE PALETTE---------------------------------------------------------------------------------------------------//
 // Semantic CSS custom properties for runtime light/dark switching. Light values
 // (= the existing look) live on :root; the dark values are applied either by the
@@ -301,7 +313,13 @@ $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,
+  skinStatusTagNeutralColor: $skinStatusTagNeutralColor,
+  skinStatusTagOkColor: $skinStatusTagOkColor,
+  skinStatusTagNoticeColor: $skinStatusTagNoticeColor,
+  skinStatusTagWarnColor: $skinStatusTagWarnColor,
+  skinStatusTagErrorColor: $skinStatusTagErrorColor
 ) {
   @if type-of($value) != color {
     @error "$#{$name} must be a color (use `transparent`, not `none`), got `#{$value}`.";
@@ -441,8 +459,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;
@@ -874,6 +894,53 @@ body.active_admin {
         font-weight: bold!important;
       }
     }
+    // ActiveAdmin puts the sort arrow inside the heading link, on the left, as a
+    // background image cleared with `padding-left: 13px`. That indents the label
+    // of every sortable column by 13px while the data below starts at the cell's
+    // own padding, so a heading never lines up with its column. The link is also
+    // `display: block`, so moving the image to the right edge would park the
+    // arrow at the far side of the column instead of beside the text.
+    //
+    // Drawn as a pseudo-element instead: it follows the label immediately, the
+    // link keeps its full width so the whole cell stays clickable, and the
+    // marker takes currentColor — the stock sprite is a fixed grey PNG that
+    // cannot follow the text into dark mode.
+    // `a[href*="order="]`, not every anchor in the header: an application can
+    // put its own link in there — yeti-web adds a persistent-sort toggle — and
+    // it would otherwise get a sort marker of its own. ActiveAdmin's heading
+    // link always carries the order parameter.
+    th.sortable > a[href*="order="] {
+      padding-left: 0;
+      background-image: none;
+
+      &:after {
+        content: "";
+        display: inline-block;
+        margin-left: 6px;
+        vertical-align: middle;
+        // The unused side has no width rather than a transparent one, so the
+        // box is exactly as tall as the triangle in it. Keeping all four sides
+        // and nudging with a margin instead puts the two states at different
+        // heights, because `vertical-align: middle` centres the box and the
+        // visible half then sits off-centre within it.
+        border: 4px solid transparent;
+        border-bottom-width: 0;
+        border-top-color: currentColor;
+        // 0.6, not lower: the marker is the only thing separating a sortable
+        // heading from a plain one, so WCAG 1.4.11 asks 3:1 of it. Against the
+        // header fill it gives 3.40 light and 4.22 dark; at 0.4 it was 2.13
+        // and 2.73.
+        opacity: 0.6;
+      }
+    }
+    th.sorted-asc > a[href*="order="]:after {
+      border-top-width: 0;
+      border-bottom-width: 4px;
+      border-top-color: transparent;
+      border-bottom-color: currentColor;
+      opacity: 1;
+    }
+    th.sorted-desc > a[href*="order="]:after { opacity: 1; }
     // Right edge = a single 1px line on the last-column cells (header th, body
     // td, footer cells) coloured like the table border, since the table itself
     // no longer draws a right border.
@@ -1413,11 +1480,9 @@ 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 fills are dark enough to carry this label: every one of the five is at
+  // least 4.53 against white. Lighten one and the label needs to go with it.
+  color: $skinStatusTagTextColor;
 }
 
 //CONTENT (both modes)-----------------------------------------------------------//
@@ -1449,11 +1514,11 @@ input[type='radio'] {
       border-radius: 2px;
       border: 1px solid;
 
-      @include status-tag-colors(#8a909a); // neutral default (e.g. "No", protocol tags)
-      &.ok, &.published, &.complete, &.completed, &.green, &.yes { @include status-tag-colors(#8daa92); }
-      &.notice, &.blue { @include status-tag-colors(#6090db); }
-      &.warn, &.warning, &.orange { @include status-tag-colors(#e29b20); }
-      &.error, &.errored, &.red { @include status-tag-colors(#d45f53); }
+      @include status-tag-colors($skinStatusTagNeutralColor);
+      &.ok, &.published, &.complete, &.completed, &.green, &.yes { @include status-tag-colors($skinStatusTagOkColor); }
+      &.notice, &.blue { @include status-tag-colors($skinStatusTagNoticeColor); }
+      &.warn, &.warning, &.orange { @include status-tag-colors($skinStatusTagWarnColor); }
+      &.error, &.errored, &.red { @include status-tag-colors($skinStatusTagErrorColor); }
       &.empty, &.unknown, &.none {
         background: none;
         border: 0; // placeholder/empty tags stay unobtrusive (no outline)

data/lib/active_admin_theme/version.rb

@@ -1,3 +1,3 @@
 module ActiveAdminTheme
-  VERSION = "3.0.0"
+  VERSION = "3.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: active_admin_theme
 version: !ruby/object:Gem::Version
-  version: 3.0.0
+  version: 3.1.0
 platform: ruby
 authors:
 - Igor Fedoronchuk