You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@juneau.apache.org by ja...@apache.org on 2026/09/07 20:21:13 UTC
(juneau) branch master updated: Datatable IRS parity: white column headers (table-header-bg → white), lighter disabled paging glyphs (#a3a3a3 composite of IRS #666@0.6), and search border #ced4da.
This is an automated email from the ASF dual-hosted git repository.
jamesbognar pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/juneau.git
The following commit(s) were added to refs/heads/master by this push:
new b3ffb273e0 Datatable IRS parity: white column headers (table-header-bg → white), lighter disabled paging glyphs (#a3a3a3 composite of IRS #666@0.6), and search border #ced4da.
b3ffb273e0 is described below
commit b3ffb273e026466bcd3e10b35a1af9175a3d29de
Author: James Bognar <ja...@apache.org>
AuthorDate: Mon Sep 7 16:21:07 2026 -0400
Datatable IRS parity: white column headers (table-header-bg → white), lighter disabled paging glyphs (#a3a3a3 composite of IRS #666@0.6), and search border #ced4da.
---
.../rest/server/console/ConsoleChromeMixin.java | 15 ++++--
.../org/apache/juneau/views/juneau-views.css | 62 ++++++++++------------
.../rest/server/views/PagingPill_Wiring_Test.java | 15 +++---
.../rest/server/views/ViewsMixin_Serving_Test.java | 2 +-
4 files changed, 46 insertions(+), 48 deletions(-)
diff --git a/juneau-rest/juneau-rest-server-console-ui/src/main/java/org/apache/juneau/rest/server/console/ConsoleChromeMixin.java b/juneau-rest/juneau-rest-server-console-ui/src/main/java/org/apache/juneau/rest/server/console/ConsoleChromeMixin.java
index 7fce9113f6..fe356ebbe2 100644
--- a/juneau-rest/juneau-rest-server-console-ui/src/main/java/org/apache/juneau/rest/server/console/ConsoleChromeMixin.java
+++ b/juneau-rest/juneau-rest-server-console-ui/src/main/java/org/apache/juneau/rest/server/console/ConsoleChromeMixin.java
@@ -190,11 +190,13 @@ public class ConsoleChromeMixin {
* {@code --jc-header-bg} (and, transitively, {@code --jc-nav-bg}) derives from {@code --jc-chrome-bg}, not
* {@code --jc-surface}: the header/nav strip is chrome, not page content, so it must recolor with every
* consumer theme that overrides {@code --jc-chrome-bg} (e.g. {@link Theme#LIGHT_BROWN}, {@link Theme#RED},
- * {@link Theme#GRAY}) exactly as {@code --jc-hover-bg} and {@code --jc-table-header-bg} already do, rather
- * than staying pinned to {@code --jc-white} regardless of the active theme's chrome color. An earlier revision
- * derived {@code --jc-header-bg} from {@code --jc-surface} (→ {@code --jc-white}), which left the header
+ * {@link Theme#GRAY}) exactly as {@code --jc-hover-bg} already does, rather than staying pinned to
+ * {@code --jc-white} regardless of the active theme's chrome color. An earlier revision derived
+ * {@code --jc-header-bg} from {@code --jc-surface} (→ {@code --jc-white}), which left the header
* and nav strip white under every themed chrome — a latent bug a themed-header/nav test now guards
- * against.
+ * against. {@code --jc-table-header-bg} is the opposite: it keys off {@code --jc-white} so DataTable /
+ * views-table column headers stay white (IRS {@code table.dataTable thead th} has no background), not the
+ * page-chrome grey.
*/
static final String OPEN_ROLE_ALIASES = String.join("",
"--jc-surface:var(--jc-white);",
@@ -207,7 +209,10 @@ public class ConsoleChromeMixin {
"--jc-on-btn-primary:var(--jc-on-accent);",
"--jc-table-stripe-bg:var(--jc-card-bg);",
"--jc-hover-bg:var(--jc-chrome-bg);",
- "--jc-table-header-bg:var(--jc-chrome-bg);",
+ // DataTable / views-table headers are white (IRS `table.dataTable thead th` carries no background;
+ // the white card shows through). Do not key this off --jc-chrome-bg — that page-chrome grey tints
+ // every column header and is the wrong IRS surface (detail-table thead #f6f4f4 is a different widget).
+ "--jc-table-header-bg:var(--jc-white);",
"--jc-control-border:var(--jc-border-2);",
"--jc-header-icon-text:var(--jc-header-icon-color);",
"--jc-btn-primary-bg:var(--jc-btn-primary);",
diff --git a/juneau-rest/juneau-rest-server-views/src/main/resources/org/apache/juneau/views/juneau-views.css b/juneau-rest/juneau-rest-server-views/src/main/resources/org/apache/juneau/views/juneau-views.css
index 20a2128dc7..c3a10c97ad 100644
--- a/juneau-rest/juneau-rest-server-views/src/main/resources/org/apache/juneau/views/juneau-views.css
+++ b/juneau-rest/juneau-rest-server-views/src/main/resources/org/apache/juneau/views/juneau-views.css
@@ -161,32 +161,29 @@
--jc-chrome-glyph-size: 16px;
--jc-chrome-glyph-size-small: 12px;
/*
- * Chrome-wide disabled-state grey (WORK-J0518 DF-2): a solid, legible grey rather than a dimming opacity,
- * for a disabled control whose glyph or text must still read clearly (the paging-pill nav buttons are the
- * first consumer). Declared here rather than paging-pill-scoped so a later disabled affordance can spend the
- * same token instead of inventing its own; matches the existing --jc-tone-warning / --jc-detail-action-
- * primary-bg-disabled grey already used elsewhere in this file for the same "disabled but visible" register.
+ * Chrome-wide disabled-state grey (WORK-J0518 DF-2, corrected to IRS opacity compositing): IRS's own
+ * `.ribbon-button` idle colour is `#666` and `.ribbon-button:disabled` / `.ribbon-button.disabled` applies
+ * `opacity: 0.6` over a white face (pages/style.css) - i.e. the visible disabled glyph is the composite
+ * of #666 at 0.6 onto #fff, which is #a3a3a3. Kept as a solid token so a consumer that cannot use opacity
+ * (or that paints a disabled glyph without dimming the whole control) can spend the same value; the paging
+ * pill itself prefers the IRS opacity rule below rather than this solid.
*/
- --jc-chrome-disabled-color: #8a8a8a;
+ --jc-chrome-disabled-color: #a3a3a3;
/*
- * Chrome-wide disabled-state BACKGROUND grey (IRS visual-parity follow-up to DF-2 above): a visibly
- * greyed-out button body, not merely a greyed-out glyph on an otherwise-normal white button - the
- * paging-pill nav buttons are again the first consumer. A distinct step from --jc-chrome-disabled-color
- * (that one is a foreground/glyph colour; this one is the button's own fill) rather than one token doing
- * both jobs, matching this scale's own "one named step per role" discipline. Light enough that the grey
- * glyph (--jc-chrome-disabled-color) still reads clearly on top of it.
+ * Chrome-wide disabled-state BACKGROUND: IRS keeps the ribbon/paging button face white when disabled
+ * (only opacity dims the control) - pages/style.css `.ribbon-button { background-color: #fff }` is not
+ * overridden by the `:disabled` rule. Previously a grey fill (#e9e9e9) made disabled paging chevrons read
+ * heavier than IRS; white matches the source.
*/
- --jc-chrome-disabled-bg: #e9e9e9;
+ --jc-chrome-disabled-bg: #ffffff;
/*
- * Chrome-wide control border/text grey (WORK-J0518 DF-3): the toolbar search input previously painted
- * `border: 1px solid` with no colour (currentColor) and inherited whatever text colour surrounded it - IRS
- * parity wants a neutral grey control border and grey input text at passing contrast (WCAG AA, ~8:1 on
- * white). Named "control", not "search-input": a text control's border/text grey is a chrome-wide role like
- * --jc-chrome-control-height above, not a single-widget colour - not --jc-detail-action-* (that pair is the
- * detail action BUTTON's own self-declared palette per this file's header note on not shadowing a name it
- * does not own) and not --jc-popover-border (that one is the floating-surface family).
+ * Chrome-wide control border/text grey (WORK-J0518 DF-3, IRS visual-parity follow-up): IRS's own main
+ * toolbar search pins `border-color: rgb(206, 212, 218)` (= #ced4da) on `.dt-container .dt-search input`
+ * (pages/style.css), matching the ribbon control border. The previous #cccccc default read darker/heavier
+ * than that IRS search field. Named "control", not "search-input": a text control's border/text grey is a
+ * chrome-wide role like --jc-chrome-control-height above, not a single-widget colour.
*/
- --jc-chrome-control-border: #cccccc;
+ --jc-chrome-control-border: #ced4da;
--jc-chrome-control-text: #4f4f4f;
/*
* Detail action button palette (D8, option (c)): DEFAULT tokens declared here, not console-ui chrome.css
@@ -603,7 +600,8 @@ table.dataTable thead .sorting_desc_disabled:after {
.juneau-view-ribbon-btn svg { width: var(--jc-chrome-glyph-size); height: var(--jc-chrome-glyph-size); fill: currentColor; }
-.juneau-view-ribbon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+/* IRS `.ribbon-button:disabled` / `.ribbon-button.disabled` uses opacity: 0.6 (pages/style.css). */
+.juneau-view-ribbon-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* Neutral shape for an ACTIVE toggle (`option`/`optionGroup` member button's aria-pressed="true") - a thicker
* border only (no palette color here); console-ui's chrome.css layers the themed background/color accent over
@@ -913,19 +911,13 @@ table.dataTable thead .sorting_desc_disabled:after {
}
/*
- * Disabled First/Prev/Next/Last read a solid neutral grey rather than a dimming opacity (WORK-J0518 DF-2): at
- * 12px an opacity-faded glyph reads as barely-there rather than "disabled but legible", which is the same
- * readability miss IRS does not have. --jc-chrome-disabled-color is declared chrome-wide (with the rest of the
- * scale tokens above), not paging-pill-scoped, so a later disabled affordance elsewhere can spend the same grey
- * rather than each widget inventing its own. `color` (not a background) because the glyph paints via the
- * svg rule's own `fill: currentColor` below - setting the button's text colour re-colours the icon for free.
- *
- * A light grey FILL is layered on top (IRS visual-parity follow-up): a disabled nav button reading only via a
- * greyed-out glyph, with the same white button background as every enabled sibling, does not read as
- * "disabled" until the pointer is already over it and the cursor changes - IRS's own disabled paging arrows
- * paint a visibly greyed-out button, not just a greyed-out glyph. --jc-chrome-disabled-bg is a NEW chrome-wide
- * token (declared beside --jc-chrome-disabled-color above), not paging-pill-scoped, for the same reason that
- * one is chrome-wide.
+ * Disabled First/Prev/Next/Last (WORK-J0518 DF-2, IRS-corrected): IRS's own `.ribbon-button:disabled`
+ * applies `opacity: 0.6` on idle colour `#666` over a white face (pages/style.css) - the visible glyph is
+ * the composite #a3a3a3. This rule spends the solid chrome-wide tokens rather than opacity so a 12px
+ * glyph stays crisply anti-aliased (an opacity fade on a tiny SVG can look muddy), while matching the
+ * IRS composite exactly: --jc-chrome-disabled-color is #a3a3a3 and --jc-chrome-disabled-bg is #ffffff
+ * (IRS does not grey the button fill - only the glyph dims). `color` (not a fill on the svg) because the
+ * glyph paints via `fill: currentColor` below.
*/
.juneau-view-pagingpill-btn:disabled { color: var(--jc-chrome-disabled-color); background-color: var(--jc-chrome-disabled-bg); cursor: not-allowed; }
.juneau-view-pagingpill-btn svg { width: var(--jc-chrome-glyph-size-small); height: var(--jc-chrome-glyph-size-small); fill: currentColor; }
diff --git a/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/PagingPill_Wiring_Test.java b/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/PagingPill_Wiring_Test.java
index 6814466609..8a6973d97c 100644
--- a/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/PagingPill_Wiring_Test.java
+++ b/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/PagingPill_Wiring_Test.java
@@ -175,12 +175,12 @@ class PagingPill_Wiring_Test extends TestBase {
}
/**
- * Regression (WORK-J0518 DF-2, extended by an IRS visual-parity follow-up): disabled First/Prev/Next/Last
- * read a solid neutral grey, not a dimming opacity - an opacity fade on a 12px glyph reads as barely-there
- * rather than "disabled but legible". The follow-up adds a grey BACKGROUND fill too (a new chrome-wide
- * {@code --jc-chrome-disabled-bg} token, declared beside {@code --jc-chrome-disabled-color}): IRS's own
- * disabled paging arrows paint a visibly greyed-out button, not merely a greyed-out glyph on an otherwise
- * white one.
+ * Regression (WORK-J0518 DF-2, IRS-corrected): disabled First/Prev/Next/Last spend the solid chrome-wide
+ * {@code --jc-chrome-disabled-color} / {@code --jc-chrome-disabled-bg} tokens. IRS's own
+ * {@code .ribbon-button:disabled} uses {@code opacity: 0.6} on idle {@code #666} over white
+ * ({@code pages/style.css}); the tokens are the composite of that rule ({@code #a3a3a3} glyph,
+ * {@code #ffffff} face) so a 12px SVG stays crisply anti-aliased rather than opacity-muddy, while
+ * matching the IRS look. Solid colour, not opacity, on this selector.
*/
@Test void c02_viewsCss_hasPagingPillShapeAndDisabledGrey() throws Exception {
var body = cWithMixin.get(ViewsMixin.VIEWS_CSS_PATH).run().assertStatus(200).getContent().asString();
@@ -188,7 +188,8 @@ class PagingPill_Wiring_Test extends TestBase {
assertTrue(body.contains(".juneau-view-pagingpill-btn {"), body);
assertTrue(body.contains(".juneau-view-pagingpill-btn:disabled { color: var(--jc-chrome-disabled-color)"), body);
assertTrue(body.contains("background-color: var(--jc-chrome-disabled-bg)"), body);
- assertTrue(body.contains("--jc-chrome-disabled-bg:"), body);
+ assertTrue(body.contains("--jc-chrome-disabled-bg: #ffffff;"), body);
+ assertTrue(body.contains("--jc-chrome-disabled-color: #a3a3a3;"), body);
assertFalse(body.contains(".juneau-view-pagingpill-btn:disabled { opacity:"), body);
assertTrue(body.contains("font-family: inherit"), body);
}
diff --git a/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/ViewsMixin_Serving_Test.java b/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/ViewsMixin_Serving_Test.java
index ebb14d5f70..e215674bb6 100644
--- a/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/ViewsMixin_Serving_Test.java
+++ b/juneau-rest/juneau-rest-server-views/src/test/java/org/apache/juneau/rest/server/views/ViewsMixin_Serving_Test.java
@@ -1119,7 +1119,7 @@ class ViewsMixin_Serving_Test extends TestBase {
*/
@Test void p01_viewsCss_toolbarSearchInputHasGreyBorderAndText() throws Exception {
var body = cWithMixin.get(ViewsMixin.VIEWS_CSS_PATH).run().assertStatus(200).getContent().asString();
- assertTrue(body.contains("--jc-chrome-control-border: #cccccc;"), body);
+ assertTrue(body.contains("--jc-chrome-control-border: #ced4da;"), body);
assertTrue(body.contains("--jc-chrome-control-text: #4f4f4f;"), body);
assertTrue(body.contains(".juneau-view-toolbar-right .dataTables_filter input,\n"
+ ".juneau-view-toolbar-right .dt-search input {"), body);