@phis/ui 0.4.2 → 0.4.4

package/plugins/runtime-modules/theme/widgets/brand-controls/config.js

@@ -1,16 +1,34 @@
 import { isPhiCmsAreaKey, } from "../../../../../constants/cms-areas";
 import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS } from "../../../../../constants/media-library-provider-keys";
-import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
 import { PHI_THEME_SIGNAL_CHANNELS } from "../../../../../plugins/runtime-modules/theme/controller/signals";
 import { createPhiCmsWidgetDefinition } from "../../../../../components/widgets/config/helpers";
 import { readString } from "../../../../../components/widgets/config/parser-primitives";
+import { parsePhiControlSignalConfig, } from "../../../../../components/widgets/config/control-signal-config";
 function parseBuilderBrandWidgetConfig(config) {
     const reviewArea = readString(config.reviewArea);
     return {
+        /*
+         * The routes are read like any Widget's: the preview mode reaches a panel through the route its tree
+         * wrote, so a route an author adds in the Builder works as well. The parser dropped them once and
+         * the panels listened to a hard-coded broadcast, which left the declared input decoration.
+         */
+        ...parsePhiControlSignalConfig(config, { key: "brandPreviewThemeMode" }),
         themeKey: readString(config.themeKey),
         reviewArea: isPhiCmsAreaKey(reviewArea) ? reviewArea : undefined,
     };
 }
+/** Every panel that draws in the preview's mode follows the mode switch. */
+const PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS = {
+    emits: [],
+    listens: [
+        {
+            id: "previewThemeMode",
+            channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
+            action: "change",
+            valueType: "boolean",
+        },
+    ],
+};
 export const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_DEFINITION = createPhiCmsWidgetDefinition({
     typeKey: "builder-brand-theme-controls",
     title: "Builder Brand Theme Controls",
@@ -18,6 +36,7 @@ export const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_DEFINITION = createPhiCmsWi
     category: "configuration",
     iconFamily: "theme",
     slotSizePolicy: "fill-inline",
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },
@@ -32,15 +51,13 @@ export const PHI_BUILDER_BRAND_IDENTITY_CONTROLS_WIDGET_DEFINITION = createPhiCm
     iconFamily: "theme",
     slotSizePolicy: "fill-inline",
     /*
-     * The Logo is picked from the Media library and the Brand's link from the Page catalogue, and a Page
-     * mounts only the Data Providers its tree asks for. The scan reads this declaration; a Provider a
-     * Widget reaches for from inside its client code is invisible to it. Same reason the Background
-     * panel declares its own.
+     * The Logo is picked from the Media library, and a Page mounts only the Data Providers its tree asks
+     * for. The scan reads this declaration; a Provider a Widget reaches for from inside its client code is
+     * invisible to it. Same reason the Background panel declares its own. The Brand's link needs none: its
+     * Pages come from `/api/site/page-references`, as every link picker's outside the Builder catalog do.
      */
-    requiredDataProviders: [
-        PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection,
-        PHI_AUTHORING_OPTION_PROVIDER_KEYS.pages,
-    ],
+    requiredDataProviders: [PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection],
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },
@@ -76,17 +93,7 @@ export const PHI_BUILDER_BRAND_BACKGROUND_CONTROLS_WIDGET_DEFINITION = createPhi
      * library, on a Page where the Assets Module was active the whole time.
      */
     requiredDataProviders: [PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection],
-    runtimeSignals: {
-        emits: [],
-        listens: [
-            {
-                id: "previewThemeMode",
-                channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
-                action: "change",
-                valueType: "boolean",
-            },
-        ],
-    },
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },
@@ -100,17 +107,7 @@ export const PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_DEFINITION = createPhiCmsWid
     category: "configuration",
     iconFamily: "theme",
     slotSizePolicy: "fill-inline",
-    runtimeSignals: {
-        emits: [],
-        listens: [
-            {
-                id: "previewThemeMode",
-                channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
-                action: "change",
-                valueType: "boolean",
-            },
-        ],
-    },
+    runtimeSignals: PHI_BUILDER_BRAND_PREVIEW_MODE_SIGNALS,
     fields: [
         { key: "themeKey", type: "string", label: "Theme Key" },
         { key: "reviewArea", type: "string", label: "Review Area" },

package/plugins/runtime-modules/theme/widgets/brand-controls/plugin.js

@@ -11,7 +11,7 @@ export const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_PLUGIN = {
 };
 export const PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_PLUGIN = {
     ...PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_DEFINITION,
-    render: ({ runtime }) => _jsx(PhiBuilderBrandThemePreviewWidgetClient, { runtime: runtime }),
+    render: ({ runtime, config }) => _jsx(PhiBuilderBrandThemePreviewWidgetClient, { runtime: runtime, config: config }),
     renderPreview: ({ runtime }) => _jsx(PhiBuilderBrandThemePreviewWidgetClient, { runtime: runtime }),
 };
 export const PHI_BUILDER_BRAND_STYLE_CONTROLS_WIDGET_PLUGIN = {

package/plugins/runtime-modules/theme-descriptors.js

@@ -1,4 +1,4 @@
-import { PHI_CORE_RUNTIME_MODULE_THEMES } from "./area-base-presets";
+import { PHI_CORE_RUNTIME_MODULE_THEMES } from "./core/themes";
 import { PHI_CORE_RUNTIME_MODULE_ID } from "./core/ids";
 import { readAllPhiSiteModuleServerAreaContributions } from "./site-module-contributions";
 import { PHI_THEME_RUNTIME_MODULE_BLOCKS } from "./theme/block-descriptors";

package/plugins/runtime-modules/user-management/data-providers.d.ts

@@ -77,6 +77,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_DATA_PROVIDER_DESCRIPTORS: {
             filterFields: string[];
             sorting: "single";
             pagination: "offset";
+            total: true;
         };
         actions: ({
             key: string;
@@ -149,6 +150,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_DATA_PROVIDER_DESCRIPTORS: {
             sorting: "none";
             pagination: "none";
             search?: undefined;
+            total?: undefined;
         };
         recordRead?: undefined;
         summaryFields?: undefined;

package/plugins/runtime-modules/user-management/data-providers.js

@@ -47,6 +47,7 @@ export const PHI_USER_MANAGEMENT_RUNTIME_DATA_PROVIDER_DESCRIPTORS = [
                     filterFields: ["accountType", "enabled"],
                     sorting: "single",
                     pagination: "offset",
+                    total: true,
                 },
                 actions: [
                     {

package/plugins/runtime-modules/user-management/definition.d.ts

@@ -105,6 +105,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_MODULE_DEFINITION: {
                 filterFields: string[];
                 sorting: "single";
                 pagination: "offset";
+                total: true;
             };
             actions: ({
                 key: string;
@@ -177,6 +178,7 @@ export declare const PHI_USER_MANAGEMENT_RUNTIME_MODULE_DEFINITION: {
                 sorting: "none";
                 pagination: "none";
                 search?: undefined;
+                total?: undefined;
             };
             recordRead?: undefined;
             summaryFields?: undefined;

package/server-helpers/cms-link-targets.js

@@ -21,6 +21,12 @@ export async function resolvePhiCmsTreeLinkTargets(tree, runtime) {
     for (const node of [...tree.regions, ...tree.overlays, ...tree.layoutNodes, ...tree.contentWidgets]) {
         collectPhiLinkTargetReferences(node.config, references);
     }
+    /*
+     * And the Brand's, which is the Site's and not any node's (THEME.md "Brand"): the Brand Widget leads
+     * where the Theme says, and that target resolves with the rest of the page rather than in a round
+     * trip of its own per Brand drawn -- a header and a footer would be two.
+     */
+    collectPhiLinkTargetReferences(runtime.site.theme?.brand, references);
     return resolvePhiLinkTargetReferences(references, runtime);
 }
 /**

package/styles/control-shape.css

@@ -34,7 +34,7 @@
 .ant-picker-small.ant-picker-small:not(:where(.ant-picker-underlined)),
 .ant-segmented.ant-segmented-sm.ant-segmented-sm,
 .ant-color-picker-trigger.ant-color-picker-sm.ant-color-picker-sm {
-  border-radius: var(--phi-control-radius-sm, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-sm);
 }
 
 .ant-btn-lg.ant-btn-lg,
@@ -45,7 +45,7 @@
 .ant-picker-large.ant-picker-large:not(:where(.ant-picker-underlined)),
 .ant-segmented.ant-segmented-lg.ant-segmented-lg,
 .ant-color-picker-trigger.ant-color-picker-lg.ant-color-picker-lg {
-  border-radius: var(--phi-control-radius-lg, var(--ant-border-radius-lg));
+  border-radius: var(--phi-control-radius-lg);
 }
 
 /*
@@ -56,17 +56,17 @@
  */
 .ant-segmented.ant-segmented .ant-segmented-item.ant-segmented-item,
 .ant-segmented.ant-segmented .ant-segmented-thumb.ant-segmented-thumb {
-  border-radius: var(--phi-control-radius-inner-md, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-inner-md);
 }
 
 .ant-segmented.ant-segmented-sm .ant-segmented-item.ant-segmented-item,
 .ant-segmented.ant-segmented-sm .ant-segmented-thumb.ant-segmented-thumb {
-  border-radius: var(--phi-control-radius-inner-sm, var(--ant-border-radius-xs));
+  border-radius: var(--phi-control-radius-inner-sm);
 }
 
 .ant-segmented.ant-segmented-lg .ant-segmented-item.ant-segmented-item,
 .ant-segmented.ant-segmented-lg .ant-segmented-thumb.ant-segmented-thumb {
-  border-radius: var(--phi-control-radius-inner-lg, var(--ant-border-radius));
+  border-radius: var(--phi-control-radius-inner-lg);
 }
 
 /*
@@ -90,15 +90,15 @@
  */
 .ant-color-picker-trigger.ant-color-picker-trigger .ant-color-picker-color-block.ant-color-picker-color-block {
   margin-inline-start: 2px;
-  border-radius: var(--phi-control-radius-inner-md, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-inner-md);
 }
 
 .ant-color-picker-trigger.ant-color-picker-sm .ant-color-picker-color-block.ant-color-picker-color-block {
-  border-radius: var(--phi-control-radius-inner-sm, var(--ant-border-radius-xs));
+  border-radius: var(--phi-control-radius-inner-sm);
 }
 
 .ant-color-picker-trigger.ant-color-picker-lg .ant-color-picker-color-block.ant-color-picker-color-block {
-  border-radius: var(--phi-control-radius-inner-lg, var(--ant-border-radius));
+  border-radius: var(--phi-control-radius-inner-lg);
 }
 
 /*
@@ -127,21 +127,21 @@ textarea.ant-input.ant-input:not(:where(.ant-input-sm, .ant-input-lg, .ant-input
 .ant-input-textarea-affix-wrapper.ant-input-textarea-affix-wrapper:not(:where(.ant-input-affix-wrapper-sm, .ant-input-affix-wrapper-lg, .ant-input-underlined)),
 .ant-select-multiple.ant-select-multiple:not(:where(.ant-select-sm, .ant-select-lg, .ant-select-underlined)),
 .ant-mentions.ant-mentions:not(:where(.ant-mentions-sm, .ant-mentions-lg, .ant-mentions-underlined)) {
-  border-radius: var(--phi-control-radius-grown-md, var(--ant-border-radius));
+  border-radius: var(--phi-control-radius-grown-md);
 }
 
 textarea.ant-input-sm.ant-input-sm:not(:where(.ant-input-underlined, .ant-input-affix-wrapper > textarea)),
 .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper-sm.ant-input-affix-wrapper-sm:not(:where(.ant-input-underlined)),
 .ant-select-multiple.ant-select-sm.ant-select-sm:not(:where(.ant-select-underlined)),
 .ant-mentions-sm.ant-mentions-sm:not(:where(.ant-mentions-underlined)) {
-  border-radius: var(--phi-control-radius-grown-sm, var(--ant-border-radius-sm));
+  border-radius: var(--phi-control-radius-grown-sm);
 }
 
 textarea.ant-input-lg.ant-input-lg:not(:where(.ant-input-underlined, .ant-input-affix-wrapper > textarea)),
 .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper-lg.ant-input-affix-wrapper-lg:not(:where(.ant-input-underlined)),
 .ant-select-multiple.ant-select-lg.ant-select-lg:not(:where(.ant-select-underlined)),
 .ant-mentions-lg.ant-mentions-lg:not(:where(.ant-mentions-underlined)) {
-  border-radius: var(--phi-control-radius-grown-lg, var(--ant-border-radius-lg));
+  border-radius: var(--phi-control-radius-grown-lg);
 }
 
 /*

package/styles/controls.css

@@ -313,7 +313,7 @@ h5.phi-typography, .phi-typography h5 {
  * is the Theme's surface step; everything else is the token variable the primitive read.
  */
 .phi-card-control {
-  --phi-card-control-radius: var(--phi-surface-radius, var(--ant-border-radius-lg));
+  --phi-card-control-radius: var(--phi-surface-radius);
   --phi-card-control-line: var(--ant-line-width) var(--ant-line-type) var(--ant-color-border-secondary);
   position: relative;
   box-sizing: border-box;
@@ -501,13 +501,25 @@ h5.phi-typography, .phi-typography h5 {
   top: var(--phi-table-sticky-top, var(--phi-shell-sticky-top, 0px)) !important;
 }
 
+/*
+ * A sticky header row is a table of its own, and its columns are the body's: Ant Design measures the
+ * body's columns and writes their widths into the header's `<colgroup>`. In `auto` layout those widths
+ * are only a floor, and a `content` column's header cell carries `width: 1%` -- so each header cell shrank
+ * to its title and a `fill` column took the rest, out of line with the rows under it. Fixed layout makes
+ * the `<colgroup>` the header's widths. The body keeps the configured `layout.mode`; Ant Design writes
+ * that inline on both tables, so the header's is stated over it.
+ */
+.phi-table-control.phi-table-control--sticky-header [class~="ant-table-sticky-holder"] > table {
+  table-layout: fixed !important;
+}
+
 :is([data-phi-modal-body-content], [data-phi-drawer-body-content]) {
   --phi-table-sticky-top: 0px;
 }
 
 .phi-table-control.phi-table-control--closing-block [class~="ant-table"] {
-  border-end-start-radius: var(--phi-surface-radius, var(--ant-border-radius-lg));
-  border-end-end-radius: var(--phi-surface-radius, var(--ant-border-radius-lg));
+  border-end-start-radius: var(--phi-surface-radius);
+  border-end-end-radius: var(--phi-surface-radius);
   /* `clip`, not `hidden`, so the corners are cut without making this the sticky header's scroller. */
   overflow: clip;
 }
@@ -562,6 +574,55 @@ h5.phi-typography, .phi-typography h5 {
   align-self: center;
 }
 
+/*
+ * Its arrow on the switcher's own centre. antd sets the switcher's line height to the row height and lets
+ * the arrow stand on that line's baseline, which leaves a small icon above the middle of the box. The box
+ * keeps a compact control's height, so its hover ground is the square it was.
+ */
+.phi-tree-control.phi-tree-control [class~="ant-tree-switcher"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--ant-control-height-sm);
+}
+
+/* --- Compact Select ------------------------------------------------------------------------------ */
+
+/*
+ * A compact control writes small: Input, InputNumber, DatePicker and Button take the scale's `sm` through
+ * their component tokens (theme/phi-theme.ts). Select has no such token -- it sizes its words by variables
+ * of its own and gives `-sm` the body's -- so its compact form is told here. Both variables move together:
+ * Select reckons its padding as (height - font height) / 2, so a smaller font size with the body's font
+ * height would leave the box short of `controlHeightSM` by the difference.
+ */
+[class~="ant-select"][class~="ant-select-sm"] {
+  --ant-select-font-size: var(--ant-font-size-sm);
+  --ant-select-font-height: calc(var(--ant-font-size-sm) * var(--ant-select-line-height));
+}
+
+/* The list a compact Select opens writes as the field does; Ant Design gives every Select's list the body size. */
+.phi-select-popup--sm [class~="ant-select-item"] {
+  font-size: var(--ant-font-size-sm);
+}
+
+/* --- Running text --------------------------------------------------------------------------------- */
+
+/*
+ * Markdown and HTML text breaks long words at their syllables, by the rules of the page's language
+ * (`<html lang>`), rather than leaving a ragged edge or running a word past its column. Code keeps its
+ * characters as written.
+ */
+.phi-markdown-text,
+.phi-html-widget__content {
+  hyphens: auto;
+  overflow-wrap: break-word;
+}
+
+.phi-markdown-text :is(pre, code),
+.phi-html-widget__content :is(pre, code) {
+  hyphens: manual;
+}
+
 /* --- Plain table --------------------------------------------------------------------------------- */
 
 /* Wide tables scroll inside their own box instead of widening the Page. */
@@ -570,11 +631,12 @@ h5.phi-typography, .phi-typography h5 {
   overflow-x: auto;
 }
 
+/* A table is read across, not down: its cells take the small size, as the Table Control's do. */
 .phi-plain-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--ant-font-size);
-  line-height: var(--ant-line-height);
+  font-size: var(--ant-font-size-sm);
+  line-height: var(--ant-line-height-sm);
   color: var(--ant-color-text);
 }
 

package/styles/layout.css

@@ -493,8 +493,13 @@
  * COLOUR the page already computed from them, not the variable -- so the box states its text colour again
  * and its content reads it from the variables in force there. When the content is already in that mode,
  * the class has no variables of its own and this resolves to what the page has anyway.
+ *
+ * The box only, not an Ant Design component inside it: the tone scope keys its variables to the same
+ * class, and Ant Design puts that key on every component it draws there. Stated on those too, the colour
+ * stopped inheritance at each of them -- a Quick Link's words kept the text colour while the link turned
+ * to its hover colour around them.
  */
-:where(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse) {
+:where(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse):where(:not([class^="ant-"], [class*=" ant-"])) {
   color: var(--ant-color-text);
 }
 
@@ -561,6 +566,11 @@
 /*
  * Hover effects: a card answers the pointer, and only a pointer that hovers.
  * Keyboard focus gets the same answer, so the effect never says something a keyboard reader misses.
+ *
+ * Lift raises the card and gives it the Theme's next shadow up. The resting shadow is the Surface's,
+ * written on the card itself, so the raised one has to be `!important` to stand over it; a card whose
+ * Surface has no shadow gets one when it lifts, which is what lifting means. Two pixels and the same
+ * shadow read as nothing at all; zoom at 4 % did not read either.
  */
 :where(.phi-card--hover-lift, .phi-card--hover-zoom) {
   transition: translate 200ms ease, box-shadow 200ms ease;
@@ -571,27 +581,68 @@
   transition: scale 300ms ease;
 }
 
+/*
+ * A card with a ribbon stands in the ribbon's wrapper (`PhiRibbonWrapControl`): a column that takes the
+ * slot's size and hands it to the card. A card that lifts carries its ribbon with it -- the ribbon is the
+ * card's sibling, so the wrapper moves it when the card moves.
+ */
+:where(.phi-card-ribbon) {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+:where(.phi-card-ribbon) > :where(.phi-card) {
+  flex: 1 1 auto;
+}
+
+/*
+ * A little lower than Ant Design sets it, so the ribbon stands centred on the eyebrow's line. Outside
+ * `:where`: Ant Design's own `.ant-ribbon` states `top`, and this has to outrank it.
+ */
+.phi-card-ribbon > .ant-ribbon {
+  top: calc(var(--ant-margin-xs) + 3px);
+}
+
+:where(.phi-card-ribbon--lift) > :where(.ant-ribbon) {
+  transition: translate 200ms ease;
+}
+
+@media (hover: hover) {
+  :where(.phi-card-ribbon--lift):has(> .phi-card:hover) > :where(.ant-ribbon) {
+    translate: 0 -4px;
+  }
+}
+
+:where(.phi-card-ribbon--lift):has(> .phi-card:focus-within) > :where(.ant-ribbon) {
+  translate: 0 -4px;
+}
+
 @media (hover: hover) {
   :where(.phi-card--hover-lift):hover {
-    translate: 0 -2px;
+    translate: 0 -4px;
+    box-shadow: var(--ant-box-shadow-secondary) !important;
   }
 
   :where(.phi-card--hover-zoom):hover :where(.phi-card__ground, .phi-card__media img) {
-    scale: 1.04;
+    scale: 1.08;
   }
 }
 
 :where(.phi-card--hover-lift):focus-within {
-  translate: 0 -2px;
+  translate: 0 -4px;
+  box-shadow: var(--ant-box-shadow-secondary) !important;
 }
 
 :where(.phi-card--hover-zoom):focus-within :where(.phi-card__ground, .phi-card__media img) {
-  scale: 1.04;
+  scale: 1.08;
 }
 
 /*
  * The icon paints the colours the card hands it as custom properties, so that the `icon` effect can turn
- * them round: the colour becomes the ground and the ground the colour. A change of colour, not a
+ * them round: the colour becomes the ground, and the mark takes `--phi-card-icon-hover-color` -- the
+ * stated ground where one was stated, the container's otherwise. Not simply the ground: the Theme's
+ * ground for a mark is a fill a few percent opaque, and a mark painted in it vanished. A change of colour, not a
  * movement, so it is not taken back for a reader who asked for less motion -- only its easing is.
  */
 :where(.phi-card__icon) {
@@ -605,13 +656,13 @@
 
 @media (hover: hover) {
   :where(.phi-card--hover-icon):hover :where(.phi-card__icon) {
-    color: var(--phi-card-icon-background);
+    color: var(--phi-card-icon-hover-color);
     background: var(--phi-card-icon-color);
   }
 }
 
 :where(.phi-card--hover-icon):focus-within :where(.phi-card__icon) {
-  color: var(--phi-card-icon-background);
+  color: var(--phi-card-icon-hover-color);
   background: var(--phi-card-icon-color);
 }
 
@@ -620,7 +671,8 @@
     transition: none;
   }
 
-  .phi-card--hover-lift:is(:hover, :focus-within) {
+  .phi-card--hover-lift:is(:hover, :focus-within),
+  .phi-card-ribbon--lift > .ant-ribbon {
     translate: none;
   }
 

package/styles/shell.css

@@ -294,6 +294,33 @@
   --phi-shell-chrome-filter: var(--phi-shell-chrome-filter-dark, none);
 }
 
+/* The Overlay in a tone's mode (LAYOUTING.md "Surface tone"), for a box whose Background is the Theme's
+   (`PHI_BACKGROUND_THEME_STYLE`). The tone's class publishes the Overlay of the mode it asks for, so the
+   box -- and an untoned box inside it -- reads that mode's variables; `inverse` is read against the page's
+   mode, as the tone scope reads it, and turns with the mode switch. Inside the Root Layout only: a Modal
+   or Drawer portalled to `<body>` has no Overlay published, and its box falls back to the container
+   ground of the tone's mode. The Root Layout's own values above stay what the Chrome Regions and panes
+   read; those are computed on the Root Layout and inherited, so a tone below cannot touch them. */
+:where([data-phi-root-layout="true"]) :where(.phi-tone-light),
+:where([data-phi-root-layout="true"][data-phi-theme-mode="dark"]) :where(.phi-tone-inverse) {
+  --phi-shell-chrome-image: var(--phi-shell-chrome-image-light, none);
+  --phi-shell-chrome-size: var(--phi-shell-chrome-size-light, auto);
+  --phi-shell-chrome-position: var(--phi-shell-chrome-position-light, 0 0);
+  --phi-shell-chrome-repeat: var(--phi-shell-chrome-repeat-light, repeat);
+  --phi-shell-chrome-color: var(--phi-shell-chrome-color-light, transparent);
+  --phi-shell-chrome-filter: var(--phi-shell-chrome-filter-light, none);
+}
+
+:where([data-phi-root-layout="true"]) :where(.phi-tone-dark),
+:where([data-phi-root-layout="true"]:not([data-phi-theme-mode="dark"])) :where(.phi-tone-inverse) {
+  --phi-shell-chrome-image: var(--phi-shell-chrome-image-dark, none);
+  --phi-shell-chrome-size: var(--phi-shell-chrome-size-dark, auto);
+  --phi-shell-chrome-position: var(--phi-shell-chrome-position-dark, 0 0);
+  --phi-shell-chrome-repeat: var(--phi-shell-chrome-repeat-dark, repeat);
+  --phi-shell-chrome-color: var(--phi-shell-chrome-color-dark, transparent);
+  --phi-shell-chrome-filter: var(--phi-shell-chrome-filter-dark, none);
+}
+
 /* A Chrome Region carries the marker only while it authored no ground of its own, so there is nothing
    left to fall back through here: the shared colour is the ground. It needs no light and dark pair
    either, because the pair above has already resolved the mode. This rule follows the two that set the
@@ -332,6 +359,17 @@
   z-index: 50;
 }
 
+/*
+ * The Header's panes stand above every Sider's. Both are grid items at the same level, and a Sider's
+ * pane comes later in the DOM, so at an equal `z-index` it painted over the Header's where the two meet:
+ * the Sider's ground hid the Header's and cut its Shadow at the Sider's edge. Still below every Chrome
+ * Region (100 and up).
+ */
+.phi-shell-chrome-pane--header,
+.phi-shell-chrome-pane--header-bottom {
+  z-index: 51;
+}
+
 /*
  * What the pane paints is set inline by the Shell, not here.
  *
@@ -430,6 +468,41 @@
   --phi-region-chrome-attachment: scroll;
 }
 
+/*
+ * A toned band takes no paint from its family's pane (LAYOUTING.md "Surface tone").
+ *
+ * A toned Chrome Region paints its own ground -- the tone's container ground, a stated Background, or
+ * the Overlay of its tone's mode -- and never carries the marker. The pane behind it keeps the page's
+ * mode, so where that ground lets anything through, the page-mode glass showed under the tone's. The
+ * pane cannot be cut around one band without knowing its height, so it stops painting for the whole
+ * family and the family's marker bands paint the Overlay themselves, as they do without panes. Its
+ * geometry and Shadow stay: the frame's edge is where it was, and the Header still stands over the
+ * Sider. The pane's paint is inline and reads these properties on the pane itself, so they are set
+ * there. Untoned families match nothing here.
+ */
+.shell-sider-full:has(> :is([data-phi-region-key="header_top"], [data-phi-region-key="header_main"], [data-phi-region-key="header_bottom"]):is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse)) > .phi-shell-chrome-pane--header,
+.shell-sider-embedded:has(> :is([data-phi-region-key="header_top"], [data-phi-region-key="header_main"]):is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse)) > .phi-shell-chrome-pane--header,
+.shell-sider-embedded:has(> [data-phi-region-key="header_bottom"]:is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse)) > .phi-shell-chrome-pane--header-bottom,
+[data-phi-shell-chrome-panes="true"]:has(> [data-phi-region-key="sider_left"]:is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse)) > .phi-shell-chrome-pane--sider,
+[data-phi-shell-chrome-panes="true"]:has(> [data-phi-region-key="sider_right"]:is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse)) > .phi-shell-chrome-pane--sider-right,
+[data-phi-shell-chrome-panes="true"]:has(> :is([data-phi-region-key="footer_top"], [data-phi-region-key="footer_main"], [data-phi-region-key="footer_bottom"]):is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse)) > .phi-shell-chrome-pane--footer {
+  --phi-shell-chrome-image: none;
+  --phi-shell-chrome-color: transparent;
+  --phi-shell-chrome-filter: none;
+}
+
+.shell-sider-full:has(> :is([data-phi-region-key="header_top"], [data-phi-region-key="header_main"], [data-phi-region-key="header_bottom"]):is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse))
+  > .phi-cms-region-shell[data-phi-shell-chrome="true"]:is([data-phi-region-key="header_top"], [data-phi-region-key="header_main"], [data-phi-region-key="header_bottom"]),
+.shell-sider-embedded:has(> :is([data-phi-region-key="header_top"], [data-phi-region-key="header_main"]):is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse))
+  > .phi-cms-region-shell[data-phi-shell-chrome="true"]:is([data-phi-region-key="header_top"], [data-phi-region-key="header_main"]),
+[data-phi-shell-chrome-panes="true"]:has(> :is([data-phi-region-key="footer_top"], [data-phi-region-key="footer_main"], [data-phi-region-key="footer_bottom"]):is(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse))
+  > .phi-cms-region-shell[data-phi-shell-chrome="true"]:is([data-phi-region-key="footer_top"], [data-phi-region-key="footer_main"], [data-phi-region-key="footer_bottom"]) {
+  --phi-region-chrome-image: var(--phi-shell-chrome-image, none);
+  --phi-region-chrome-color: var(--phi-shell-chrome-color, transparent);
+  --phi-region-chrome-filter: var(--phi-shell-chrome-filter, none);
+  --phi-region-chrome-attachment: fixed;
+}
+
 /* ---------------------------------------------------------------------------------------------
    Revealing `header_top` (SHELL.md "Region visibility per Page")
 

package/theme/phi-antd-token-resolver.js

@@ -1,4 +1,5 @@
 import darkAlgorithm from "antd/es/theme/themes/dark";
+import { generateColorPalettes as generateDarkColorPalettes } from "antd/es/theme/themes/dark/colors";
 import defaultAlgorithm from "antd/es/theme/themes/default";
 import seedToken from "antd/es/theme/themes/seed";
 import formatToken from "antd/es/theme/util/alias";
@@ -34,13 +35,31 @@ export function createPhiAntdThemeCssVarKey(scope, identity) {
         .replace(/^-+|-+$/g, "") || "theme";
     return `phi-${normalizedScope}-${hashPhiAntdThemeIdentity(identity)}`;
 }
+/*
+ * A link and an info colour pointed at turn lighter in the dark mode, as a primary button does.
+ *
+ * Ant Design takes both hovers from step 4 of the colour's palette in either mode. In the light palette
+ * that step is a lighter tint; the dark algorithm reorders its palette so the low steps fade into the dark
+ * ground for borders and fills, and step 4 there is the border's -- darker than the colour itself, so a
+ * link went dim on a dark ground when pointed at (#3867b5 to #274069 on #08153a). The primary hover takes
+ * step 5, which in the dark palette is the lighter one; these take it too. A hover a Theme states itself
+ * still wins: `formatToken` lays the stated tokens over this.
+ */
+function withPhiDarkHoverSteps(seed, derived) {
+    const linkBase = seed.colorLink || seed.colorInfo;
+    return {
+        ...derived,
+        ...(linkBase ? { colorLinkHover: generateDarkColorPalettes(linkBase)[5] } : {}),
+        ...(seed.colorInfo ? { colorInfoHover: generateDarkColorPalettes(seed.colorInfo)[5] } : {}),
+    };
+}
 export function resolvePhiAntdAliasTokens(mode, token) {
     const mergedSeedToken = {
         ...seedToken,
         ...token,
     };
     const derivativeToken = mode === "dark"
-        ? darkAlgorithm(mergedSeedToken)
+        ? withPhiDarkHoverSteps(mergedSeedToken, darkAlgorithm(mergedSeedToken))
         : defaultAlgorithm(mergedSeedToken);
     return formatToken({
         ...derivativeToken,

package/theme/phi-theme-tokens.d.ts

@@ -22,7 +22,7 @@ import type { PhiThemePalette } from "./phi-theme-presets";
  * Who may still speak Ant Design directly is a separate question, and `scripts/validate-control-boundaries.mjs`
  * answers it: the alias resolver, the root adapter, the two font helpers and this file.
  */
-export declare const PHI_THEME_TOKEN_KEYS: readonly ["colorBgContainer", "colorBgElevated", "colorBgMask", "colorBgSpotlight", "colorBorder", "colorBorderSecondary", "colorSplit", "colorFillAlter", "colorFill", "colorBgLayout", "colorFillQuaternary", "colorFillSecondary", "colorFillTertiary", "colorText", "colorTextBase", "colorTextHeading", "colorTextSecondary", "colorTextTertiary", "colorTextQuaternary", "colorTextDescription", "colorTextDisabled", "colorTextLabel", "colorTextPlaceholder", "colorTextLightSolid", "colorPrimary", "colorPrimaryBg", "colorPrimaryBgHover", "colorPrimaryBorder", "colorPrimaryBorderHover", "colorPrimaryHover", "colorPrimaryActive", "colorPrimaryText", "colorPrimaryTextHover", "colorPrimaryTextActive", "colorInfo", "colorInfoBg", "colorInfoBgHover", "colorInfoBorder", "colorInfoBorderHover", "colorInfoText", "colorInfoTextHover", "colorSuccess", "colorSuccessBg", "colorSuccessBgHover", "colorSuccessBorder", "colorSuccessBorderHover", "colorSuccessText", "colorWarning", "colorWarningBg", "colorWarningBgHover", "colorWarningBorder", "colorWarningBorderHover", "colorWarningText", "colorError", "colorErrorBg", "colorErrorText", "colorErrorTextHover", "colorErrorTextActive", "colorLink", "colorLinkHover", "colorLinkActive", "padding", "paddingXXS", "paddingXS", "paddingSM", "paddingMD", "paddingLG", "paddingXL", "margin", "marginXXS", "marginXS", "marginSM", "marginMD", "marginLG", "marginXL", "marginXXL", "sizeXS", "sizeSM", "sizeMD", "sizeLG", "borderRadius", "borderRadiusXS", "borderRadiusSM", "borderRadiusLG", "borderRadiusOuter", "lineWidth", "lineType", "boxShadow", "boxShadowSecondary", "boxShadowTertiary", "controlHeight", "controlHeightXS", "controlHeightSM", "controlHeightLG", "fontFamily", "fontFamilyCode", "fontSize", "fontSizeSM", "fontSizeLG", "fontSizeXL", "fontSizeHeading1", "fontSizeHeading2", "fontSizeHeading3", "fontSizeHeading4", "fontSizeHeading5", "fontWeightStrong", "lineHeight", "lineHeightLG", "lineHeightHeading1", "lineHeightHeading2", "lineHeightHeading3", "lineHeightHeading4", "lineHeightHeading5", "motionDurationMid", "motionDurationSlow", "motionEaseInOut", "motionEaseOut"];
+export declare const PHI_THEME_TOKEN_KEYS: readonly ["colorBgContainer", "colorBgElevated", "colorBgMask", "colorBgSpotlight", "colorBorder", "colorBorderSecondary", "colorSplit", "colorFillAlter", "colorFill", "colorBgLayout", "colorFillQuaternary", "colorFillSecondary", "colorFillTertiary", "colorText", "colorTextBase", "colorTextHeading", "colorTextSecondary", "colorTextTertiary", "colorTextQuaternary", "colorTextDescription", "colorTextDisabled", "colorTextLabel", "colorTextPlaceholder", "colorTextLightSolid", "colorPrimary", "colorPrimaryBg", "colorPrimaryBgHover", "colorPrimaryBorder", "colorPrimaryBorderHover", "colorPrimaryHover", "colorPrimaryActive", "colorPrimaryText", "colorPrimaryTextHover", "colorPrimaryTextActive", "colorInfo", "colorInfoBg", "colorInfoBgHover", "colorInfoBorder", "colorInfoBorderHover", "colorInfoText", "colorInfoTextHover", "colorSuccess", "colorSuccessBg", "colorSuccessBgHover", "colorSuccessBorder", "colorSuccessBorderHover", "colorSuccessText", "colorWarning", "colorWarningBg", "colorWarningBgHover", "colorWarningBorder", "colorWarningBorderHover", "colorWarningText", "colorError", "colorErrorBg", "colorErrorText", "colorErrorTextHover", "colorErrorTextActive", "colorLink", "colorLinkHover", "colorLinkActive", "padding", "paddingXXS", "paddingXS", "paddingSM", "paddingMD", "paddingLG", "paddingXL", "margin", "marginXXS", "marginXS", "marginSM", "marginMD", "marginLG", "marginXL", "marginXXL", "sizeXS", "sizeSM", "sizeMD", "sizeLG", "borderRadius", "borderRadiusXS", "borderRadiusSM", "borderRadiusLG", "borderRadiusOuter", "lineWidth", "lineType", "boxShadow", "boxShadowSecondary", "boxShadowTertiary", "controlHeight", "controlHeightXS", "controlHeightSM", "controlHeightLG", "fontFamily", "fontFamilyCode", "fontSize", "fontSizeSM", "fontSizeLG", "fontSizeXL", "fontSizeHeading1", "fontSizeHeading2", "fontSizeHeading3", "fontSizeHeading4", "fontSizeHeading5", "fontWeightStrong", "lineHeight", "lineHeightSM", "lineHeightLG", "lineHeightHeading1", "lineHeightHeading2", "lineHeightHeading3", "lineHeightHeading4", "lineHeightHeading5", "motionDurationMid", "motionDurationSlow", "motionEaseInOut", "motionEaseOut"];
 /**
  * The names this house adds to Ant Design's set.
  *