active_admin_theme 3.0.0 → 3.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c393033738086398f691d3a9e754ece92f10ab6c647dd0357da38fc5167e4368
-  data.tar.gz: 6733dc12d9ceca058b15072be3826989334e106be7db5fd273017871e258ec41
+  metadata.gz: 9acbb41d69f18ef3ba70a6b4da01ab1a85328e033f7479db96196205908b769a
+  data.tar.gz: 6bb46419bd8a22379b18f25911e0a6265f362cee313b5b0ec6ea8c1e6c66e900
 SHA512:
-  metadata.gz: 2c9c40332a46b50fd79f0d1959a2cb25c4ff23ac12be1dce88b721cfcafcbc798b9971f6cb17a4ee088985a08fdac8e1cba55275579bee8ed892eb50e23a051c
-  data.tar.gz: e1973bc1eb334a1f14cb4dd46094b1c802f0074243ac89ff30aaea894b84a744a5cce42b517feb63cc083b429517fd851ac41dc391a686a9d60cb732ff170e18
+  metadata.gz: 4111c99001eeb83c4e40ae480e30f4e04e40b91385308dc1fba03e55a9f1c2eec848543de51c0cfe716a0780a3c5d9cfa70aa9c379b85f18b24298755b252276
+  data.tar.gz: 2637d37a333a34362e022f2e97090384150fc2d38de4131c3b6b322e999f375ab82dd0fdeb9a671f84b2870c77c6e18fb2e683fc75db8b59fa7bf4c804818359

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.1"
 }
 ```
 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` / `$skinTextColorDark` | 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,8 +129,20 @@ $skinActiveTabTextColorDark: #7cc0ec!default;
 $skinInactiveTabTextColor: #5e6469!default;
 $skinInactiveTabTextColorDark: #b0b8c2!default;
 // Index-table column header text, one colour for sortable and plain headers.
-$skinTableHeaderTextColor: #5e6469!default;
-$skinTableHeaderTextColorDark: #dde2e8!default;
+$skinTableHeaderTextColor: $skinTextColor!default;
+$skinTableHeaderTextColorDark: $skinTextColorDark!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
@@ -221,9 +233,18 @@ html[data-theme="dark"]  { @include aa-dark-palette; }
   html[data-theme="dark"] { @content; }
 }
 
-// Иконки переключателя тем. Инлайном, потому что гем не возит картинок, и
-// маской, а не цветным SVG: маска красится currentColor и сама идёт за
-// $skinMenuTextColor. Половинка круга — auto, солнце — light, месяц — dark.
+// Sort markers. Three shapes rather than one at two opacities: ActiveAdmin's
+// sprite draws a double arrow for sortable-but-unsorted, and reusing the
+// descending triangle for it leaves the two states indistinguishable on a
+// freshly loaded index. Masked, like the theme switch icons, so they take
+// currentColor and follow the heading into dark mode.
+$sort-icon-none: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 0 9 5H0z'/%3E%3Cpath d='M4.5 12 0 7h9z'/%3E%3C/svg%3E")!default;
+$sort-icon-asc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 2 9 8H0z'/%3E%3C/svg%3E")!default;
+$sort-icon-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 10 0 4h9z'/%3E%3C/svg%3E")!default;
+
+// Theme switch icons. Inline, because the gem ships no image files, and as a
+// mask rather than a coloured SVG: a mask takes currentColor and so follows
+// $skinMenuTextColor on its own. Half circle = auto, sun = light, moon = dark.
 $theme-icon-auto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M8 2.6a5.4 5.4 0 0 1 0 10.8z'/%3E%3C/svg%3E")!default;
 $theme-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3.1'/%3E%3Cpath d='M8 .9v1.8M8 13.3v1.8M.9 8h1.8M13.3 8h1.8M2.9 2.9l1.3 1.3M11.8 11.8l1.3 1.3M13.1 2.9l-1.3 1.3M4.2 11.8l-1.3 1.3'/%3E%3C/svg%3E")!default;
 $theme-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.4 9.6A5.9 5.9 0 0 1 6.4 2.6a5.9 5.9 0 1 0 7 7z'/%3E%3C/svg%3E")!default;
@@ -301,7 +322,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}`.";
@@ -319,11 +346,11 @@ $theme-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
     @error "$#{$name} must be a color or a CSS custom property (e.g. var(--aa-page-bg)), got `#{$value}`.";
   }
 }
-// Радиус внутреннего угла ячейки — на 1px меньше внешнего, чтобы не торчал
-// из-под рамки таблицы. Вычитать px напрямую нельзя: $skinBorderRadius задаёт
-// проект, и 0.25rem роняет всю компиляцию с «Incompatible units». calc()
-// откладывает вычитание до браузера, а безразмерный 0 обрабатываем отдельно —
-// calc(0 - 1px) невалиден.
+// A cell's inner corner is 1px tighter than the outer one, so it does not
+// show from under the table border. Subtracting px directly will not do: the
+// radius is a project's to set, and 0.25rem fails the whole compile with
+// "Incompatible units". calc() defers the subtraction to the browser, and a
+// unitless 0 is handled separately because calc(0 - 1px) is invalid.
 @function inner-radius($radius) {
   @if unitless($radius) { @return 0; }
   @return calc(#{$radius} - 1px);
@@ -441,8 +468,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 +903,55 @@ 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.
+    // The sprite goes from every anchor in a sortable heading, because
+    // ActiveAdmin sets it on every one — an application link in there would
+    // otherwise keep the low-res PNG and the 13px indent it needs.
+    th.sortable a {
+      padding-left: 0;
+      background-image: none;
+    }
+    // The marker, though, only on ActiveAdmin's own heading link, which always
+    // carries the order parameter: an application's link is its own business.
+    th.sortable > a[href*="order="] {
+
+      &:after {
+        content: "";
+        display: inline-block;
+        width: 9px;
+        height: 12px;
+        margin-left: 6px;
+        vertical-align: middle;
+        background-color: currentColor;
+        -webkit-mask: #{$sort-icon-none} center / contain no-repeat;
+        mask: #{$sort-icon-none} center / contain no-repeat;
+        // 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 {
+      -webkit-mask-image: $sort-icon-asc;
+      mask-image: $sort-icon-asc;
+      opacity: 1;
+    }
+    th.sorted-desc > a[href*="order="]:after {
+      -webkit-mask-image: $sort-icon-desc;
+      mask-image: $sort-icon-desc;
+      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 +1491,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 +1525,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.1"
 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.1
 platform: ruby
 authors:
 - Igor Fedoronchuk