@apliteni/apliteni-ui 0.124.1 → 0.124.2

package/guidelines/colour-and-theming.md

@@ -70,3 +70,15 @@
 **Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).
 
 **Except:** A status chip carries a soft fill. Where its tone reports no verdict it takes a light tint of muted ink that leaves the panel in one direction per theme, so the neutral tones read as the same family as the coloured ones.
+
+## Mark selection in forced colours
+
+<!-- rule: selected-forced-colours -->
+
+**Rule:** In forced colours, fill a selected item with the highlight colour and its label with the highlight text colour.
+
+**Why:** The mode replaces author backgrounds. A specimen cannot switch it on, so this rule draws no pair.
+
+**Do:** Ring a focused selected item in the page text colour.
+
+**Don't:** Mark selection with an outline.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.124.1",
+  "version": "0.124.2",
   "workspaces": [
     "react"
   ],

package/src/styles/command-palette.css

@@ -340,3 +340,20 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-cmdk.is-open * { transition: none !important; }
 }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
+@media (forced-colors: active) {
+  .ui-cmdk__item.is-active { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; --ring: var(--ring-width) solid CanvasText; }
+  .ui-cmdk__item.is-active .ui-cmdk__label,
+  .ui-cmdk__item.is-active .ui-cmdk__ic,
+  .ui-cmdk__item.is-active .ui-cmdk__desc,
+  .ui-cmdk__item.is-danger.is-active .ui-cmdk__label,
+  .ui-cmdk__item.is-danger.is-active .ui-cmdk__ic { color: HighlightText; }
+  .ui-cmdk--roomy .ui-cmdk__item.is-active .ui-cmdk__ic { background: none; }
+  .ui-cmdk__item.is-active .ui-cmdk__badge { background: HighlightText; color: Highlight; }
+  /* Shortcut caps inherit the adjust, so they take the pair too: the item's ink on its fill, with an ink edge. */
+  .ui-cmdk__item.is-active .ui-cmdk__key { background: Highlight; color: HighlightText; border-color: HighlightText; }
+}

package/src/styles/layout.css

@@ -119,7 +119,7 @@
    resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1706 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1708 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -708,3 +708,41 @@
 .ui-section-head { text-align: center; max-width: var(--panel-lg); margin: 0 auto clamp(40px, 6vh, 64px); }
 .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
 .ui-section-head p { color: var(--text); font-size: calc(var(--text-lg) - 1px); line-height: 1.6; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. The pair is
+   `!important` so the shell's danger ink and every hover or focus state yield to it. */
+@media (forced-colors: active) {
+  .ui-app__rail .ui-nav__item:is(.is-active, .is-current):not(.is-disabled) { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; --ring: var(--ring-width) solid CanvasText; }
+  .ui-app__rail .ui-nav__item:is(.is-active, .is-current).is-disabled { forced-color-adjust: none; background: GrayText !important; color: Canvas !important; /* muted-ink: state — unavailable control */ }
+  .ui-app__rail .ui-nav__item.is-active:not(.is-disabled)::before { background: Highlight; }
+  .ui-app__rail .ui-nav__item.is-active.is-disabled::before { background: GrayText; }
+  /* A folded row is only an icon strip: the plate carries the fill, so the row paints none. */
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%); /* motion: still — a mark on the current group, centred and not travelling */
+    z-index: -1;
+  }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
+  /* The floating name of a selected folded row inherits the row's adjust, so it is painted in system colours. */
+  .ui-app.is-collapsed .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
+    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
+  }
+}
+@media (forced-colors: active) and (max-width: 720px) {
+  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%);
+    z-index: -1;
+  }
+  .ui-app .ui-app__rail .ui-nav__item.is-current:not(.is-active):not(.is-disabled)::before { background: Highlight; }
+  .ui-app .ui-app__rail .ui-nav__item.is-current.is-disabled:not(.is-active)::before { background: GrayText; }
+  .ui-app .ui-app__rail .ui-nav__item:is(.is-active, .is-current):is(:hover, :focus-visible) > .ui-nav__label {
+    forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText;
+  }
+}

package/src/styles/nav.css

@@ -365,3 +365,64 @@ a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface); /* cod
 a.ui-nav__crumb:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }
 .ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it.
+   The pair is `!important` because it is the reader's palette: a danger wash, a hover
+   or a focus state must never repaint it. A child of the row inherits the adjust, so
+   each child that paints its own colour is repainted here as well. */
+@media (forced-colors: active) {
+  .ui-nav__item.is-active:not(.is-disabled),
+  .ui-nav__item.is-current:not(.is-disabled),
+  .ui-nav__tab.is-active:not(.is-disabled),
+  .ui-nav--tabs.is-pill .ui-nav__tab.is-active:not(.is-disabled),
+  .ui-nav__crumb.is-current {
+    forced-color-adjust: none;
+    background: Highlight !important;
+    color: HighlightText !important;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  .ui-nav__item.is-active:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__item.is-current:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__tab.is-active:not(.is-disabled) .ui-nav__ic svg,
+  .ui-nav__crumb.is-current .ui-nav__ic svg { stroke: HighlightText; }
+  .ui-nav__item.is-active .ui-nav__caret,
+  .ui-nav__item.is-current .ui-nav__caret { border-color: currentColor; }
+  .ui-nav__item.is-active:not(.is-disabled) .ui-nav__badge,
+  .ui-nav__item.is-current:not(.is-disabled) .ui-nav__badge,
+  .ui-nav__tab.is-active:not(.is-disabled) .ui-nav__badge {
+    background: HighlightText !important;
+    color: Highlight !important;
+  }
+  /* A selected item that is unavailable must not look live, so it takes the disabled system pair. */
+  .ui-nav__item.is-active.is-disabled,
+  .ui-nav__item.is-current.is-disabled,
+  .ui-nav__tab.is-active.is-disabled {
+    forced-color-adjust: none;
+    background: GrayText !important;
+    color: Canvas !important; /* muted-ink: state — unavailable control */
+  }
+  .ui-nav__item.is-active.is-disabled .ui-nav__ic svg,
+  .ui-nav__item.is-current.is-disabled .ui-nav__ic svg,
+  .ui-nav__tab.is-active.is-disabled .ui-nav__ic svg { stroke: Canvas; }
+  .ui-nav__item.is-active.is-disabled .ui-nav__badge,
+  .ui-nav__item.is-current.is-disabled .ui-nav__badge,
+  .ui-nav__tab.is-active.is-disabled .ui-nav__badge {
+    background: Canvas !important;
+    color: GrayText !important; /* muted-ink: state — unavailable control */
+  }
+  /* A folded row is only an icon strip: the plate carries the fill, so the row paints none.
+     A current group takes the same plate as the current row it holds. */
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current) { isolation: isolate; background: none !important; }
+  .ui-nav--side.is-collapsed .ui-nav__item.is-current:not(.is-active)::before {
+    content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px;
+    transform: translateY(-50%); /* motion: still — a mark on the current group, centred and not travelling */
+    z-index: -1;
+  }
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current):not(.is-disabled)::before { background: Highlight; }
+  .ui-nav--side.is-collapsed .ui-nav__item:is(.is-active, .is-current).is-disabled::before { background: GrayText; }
+  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
+  .ui-nav--tabs.is-underline .ui-nav__tab.is-active::after { display: none; /* motion: still — the bar is not drawn while the fill marks the tab */ }
+}

package/src/styles/pagination.css

@@ -137,3 +137,22 @@ a.ui-pager__step,
 a.ui-pager__page { color: var(--text); }
 a.ui-pager__step:hover,
 a.ui-pager__page:hover { color: var(--strong); }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
+@media (forced-colors: active) {
+  .ui-pager__page.is-current:not([disabled]) {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  /* A busy pager must not look live, so its current page takes the disabled system colour. */
+  .ui-pager__page.is-current[disabled] {
+    forced-color-adjust: none;
+    background: GrayText;
+    color: Canvas; /* muted-ink: state — unavailable control */
+  }
+}

package/src/styles/segmented.css

@@ -153,11 +153,31 @@
 }
 .ui-seg--underline button.is-active::before,
 .ui-seg--underline button[aria-pressed="true"]::before { opacity: 1; transform: scaleX(1); }
-/* The mode repaints an author colour, so the bar comes back as the labels' own
-   ink. `Highlight` is kept where it is named: one mark the mode cannot flatten. */
+.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }
+
+/* Forced colours replace every author background, so a selected item takes the system
+   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
+   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
+   own ring, drawn in CanvasText so the fill is never mistaken for it. */
 @media (forced-colors: active) {
+  .ui-seg button.is-active,
+  .ui-seg button[aria-pressed="true"],
+  .ui-seg button[aria-selected="true"] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    --ring: var(--ring-width) solid CanvasText;
+  }
+  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
   .ui-seg--underline button.is-active::before,
-  .ui-seg--underline button[aria-pressed="true"]::before { background: Highlight; }
+  .ui-seg--underline button[aria-pressed="true"]::before,
+  .ui-seg--underline button[aria-selected="true"]::before { display: none; /* motion: still — the bar is not drawn while the fill marks the choice */ }
+  /* A disabled selected choice must not look live, so it takes the disabled system colour. */
+  .ui-seg button.is-active:disabled,
+  .ui-seg button[aria-pressed="true"]:disabled,
+  .ui-seg button[aria-selected="true"]:disabled {
+    background: GrayText;
+    color: Canvas; /* muted-ink: state — unavailable choice */
+  }
 }
-.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
-.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }