@phis/ui 0.2.1 → 0.4.0

package/styles/layout-authoring-scaffold.css

@@ -39,21 +39,12 @@
 }
 
 :root {
-  --phi-debug-layer-region-background: transparent;
-  --phi-debug-layer-region-background-strong: transparent;
-  --phi-debug-layer-region-border: transparent;
-  --phi-debug-layer-region-border-strong: transparent;
-
   --phi-debug-layer-layout-background: transparent;
-  --phi-debug-layer-layout-background-strong: transparent;
   --phi-debug-layer-layout-border: transparent;
-  --phi-debug-layer-layout-border-strong: transparent;
 
   --phi-debug-layer-slot-background: transparent;
-  --phi-debug-layer-slot-background-strong: transparent;
   --phi-debug-layer-slot-background-soft: transparent;
   --phi-debug-layer-slot-border: transparent;
-  --phi-debug-layer-slot-border-strong: transparent;
 
   --phi-debug-layer-scaffold-background: transparent;
   --phi-debug-layer-scaffold-background-strong: transparent;
@@ -61,24 +52,14 @@
   --phi-debug-layer-scaffold-border-strong: transparent;
 }
 
-:where(.phi-debug-scaffold--on),
 :where([data-phi-debug-scaffold="on"]) {
-  --phi-debug-layer-region-background: rgba(255, 77, 79, 0.08);
-  --phi-debug-layer-region-background-strong: rgba(255, 77, 79, 0.16);
-  --phi-debug-layer-region-border: rgba(255, 77, 79, 0.45);
-  --phi-debug-layer-region-border-strong: rgba(255, 77, 79, 0.72);
-
   --phi-debug-layer-layout-background: var(--ant-color-success-bg);
-  --phi-debug-layer-layout-background-strong: var(--ant-color-success-bg-hover);
   --phi-debug-layer-layout-border: var(--ant-color-success);
-  --phi-debug-layer-layout-border-strong: var(--ant-color-success-text);
 
   --phi-debug-layer-slot-background: var(--ant-color-warning-bg);
-  --phi-debug-layer-slot-background-strong: var(--ant-color-warning-bg-hover);
   /* The Grid's track guides: a tint light enough that a slot's own band stays the stronger mark. */
   --phi-debug-layer-slot-background-soft: color-mix(in srgb, var(--ant-color-warning-bg) 50%, transparent);
   --phi-debug-layer-slot-border: var(--ant-color-warning);
-  --phi-debug-layer-slot-border-strong: var(--ant-color-warning-text);
 
   --phi-debug-layer-scaffold-background: rgba(114, 46, 209, 0.10);
   --phi-debug-layer-scaffold-background-strong: rgba(114, 46, 209, 0.18);
@@ -86,23 +67,13 @@
   --phi-debug-layer-scaffold-border-strong: rgba(114, 46, 209, 0.72);
 }
 
-:where(.phi-debug-scaffold--off),
 :where([data-phi-debug-scaffold="off"]) {
-  --phi-debug-layer-region-background: transparent;
-  --phi-debug-layer-region-background-strong: transparent;
-  --phi-debug-layer-region-border: transparent;
-  --phi-debug-layer-region-border-strong: transparent;
-
   --phi-debug-layer-layout-background: transparent;
-  --phi-debug-layer-layout-background-strong: transparent;
   --phi-debug-layer-layout-border: transparent;
-  --phi-debug-layer-layout-border-strong: transparent;
 
   --phi-debug-layer-slot-background: transparent;
-  --phi-debug-layer-slot-background-strong: transparent;
   --phi-debug-layer-slot-background-soft: transparent;
   --phi-debug-layer-slot-border: transparent;
-  --phi-debug-layer-slot-border-strong: transparent;
 
   --phi-debug-layer-scaffold-background: transparent;
   --phi-debug-layer-scaffold-background-strong: transparent;
@@ -163,10 +134,8 @@
     .phi-layout[data-phi-block-render-mode="preview"]
 ) {
   --phi-debug-layer-layout-background: transparent;
-  --phi-debug-layer-layout-background-strong: transparent;
   --phi-debug-layer-layout-border: var(--ant-color-success-border-hover);
   --phi-debug-layer-slot-background: transparent;
-  --phi-debug-layer-slot-background-strong: transparent;
   --phi-debug-layer-slot-background-soft: transparent;
   --phi-debug-layer-slot-border: var(--ant-color-warning-border-hover);
   outline-width: 1px;

package/styles/layout.css

@@ -12,7 +12,6 @@
 
 :where([data-layout-kind]) {
   --phi-layout-gap: var(--ant-margin);
-  --phi-layout-slot-gap: var(--phi-layout-gap);
 }
 
 :where([data-layout-kind="flex"]) {
@@ -54,8 +53,61 @@
   gap: var(--phi-layout-gap);
 }
 
-:where([data-layout-kind="masonry"]) {
-  column-gap: var(--phi-layout-gap);
+/*
+ * A Masonry's columns (components/layouts/phi-masonry-layout.tsx). The Layout box is the `phi-masonry`
+ * container and carries the column count for every width; the column box inside it picks one by the
+ * container queries below, the way a Grid's slots do, into `--phi-masonry-columns`. Each item holds the
+ * gap below its child as padding, and the column box takes the last one back, so nothing is left under
+ * the longest column.
+ *
+ * The server sends a multi-column flow. Once the browser can measure, `PhiMasonryColumns` packs the
+ * children by height and marks the box `data-phi-masonry-packed`: the flow is turned off and each item
+ * stands absolutely in its column at its top. The flow alone balances where the columns end and leaves
+ * a column empty whenever fewer would end lower.
+ */
+.phi-masonry-layout__columns {
+  --phi-masonry-columns: var(--phi-masonry-columns-compact, 1);
+  column-count: var(--phi-masonry-columns);
+  column-gap: var(--phi-masonry-gap, 0px);
+  column-fill: balance;
+  margin-block-end: calc(-1 * var(--phi-masonry-gap, 0px));
+}
+
+.phi-masonry-layout__item {
+  break-inside: avoid;
+  padding-block-end: var(--phi-masonry-gap, 0px);
+}
+
+.phi-masonry-layout__columns[data-phi-masonry-packed] {
+  column-count: auto;
+  position: relative;
+  height: var(--phi-masonry-packed-height, auto);
+}
+
+.phi-masonry-layout__columns[data-phi-masonry-packed] > .phi-masonry-layout__item {
+  --phi-masonry-column-pitch:
+    calc((100% + var(--phi-masonry-gap, 0px)) / var(--phi-masonry-packed-columns, 1));
+  position: absolute;
+  top: var(--phi-masonry-item-top, 0px);
+  inset-inline-start: calc(var(--phi-masonry-column-pitch) * var(--phi-masonry-item-column, 0));
+  width: calc(var(--phi-masonry-column-pitch) - var(--phi-masonry-gap, 0px));
+  box-sizing: border-box;
+}
+
+/*
+ * The same numbers as `PHI_MASONRY_RESPONSIVE_MIN_WIDTH` (components/layouts/phi-masonry-contract.ts),
+ * held together by `validate-container-breakpoint-contracts.ts`.
+ */
+@container phi-masonry (min-width: 377px) {
+  .phi-masonry-layout__columns {
+    --phi-masonry-columns: var(--phi-masonry-columns-medium, 1);
+  }
+}
+
+@container phi-masonry (min-width: 610px) {
+  .phi-masonry-layout__columns {
+    --phi-masonry-columns: var(--phi-masonry-columns-wide, 1);
+  }
 }
 
 :where(.phi-layout-slot) {
@@ -174,12 +226,18 @@
   height: 100%;
 }
 
-:where(.phi-slot-child--inline-intrinsic) {
-  width: fit-content;
-}
-
-:where(.phi-slot-child--block-intrinsic) {
-  height: fit-content;
+/*
+ * An Overlay body's root Layout fills its zone to the edge and has no corner of its own.
+ *
+ * A Layout's Surface takes the Site's surface step for a corner nobody stated (LAYOUTING.md, "Surface"),
+ * which is right for a box standing on a page. The root of a dialog's body is not that box: it is the
+ * zone, edge to edge between header and footer, the way a Region spans its part of the frame -- so a wash
+ * on it drew a rounded panel floating inside the dialog. The Modal or Drawer has the corner; only the
+ * root is meant, so a card or a Layout further in keeps its own. `!important` because the corner is an
+ * inline style the Surface resolver writes, and this is a position, not a style an author chose.
+ */
+:is([data-phi-modal-body-content], [data-phi-drawer-body-content]) > .phi-slot-child > .phi-layout {
+  border-radius: 0 !important;
 }
 
 :where(.phi-layout-scaffold-anchor__content[data-phi-layout-fill-slot="true"]) {
@@ -368,7 +426,7 @@
  * form grid above does -- so the markup the server sends already stands where it stays. The Grid's
  * Layout box is the `phi-grid` container and is measured inside its padding, as a form is.
  *
- * The column gap is padding, not `column-gap`: a `column-gap` falls between all 24 tracks, so a 16px
+ * The gap across is padding, not `column-gap`: a `column-gap` falls between all 24 tracks, so a 16px
  * gap made 368px the narrowest a Grid could be. Each slot insets its content by its share of the gaps,
  * `lead` 24ths of one before it and `trail` 24ths after, which puts its edges where a `column-gap` did
  * while there is room and narrows the slots when there is not. Every slot writes all nine properties;
@@ -382,6 +440,12 @@
     calc(var(--phi-grid-column-gap, 0px) * var(--phi-grid-slot-trail-compact, 0) / 24);
 }
 
+/* The edit overlay draws the columns of the width the Grid is at, one guide set per width. */
+.phi-grid-layout__guide--medium,
+.phi-grid-layout__guide--wide {
+  display: none;
+}
+
 /*
  * The same numbers as `PHI_GRID_RESPONSIVE_MIN_WIDTH` (components/layouts/phi-grid-contract.ts), held
  * together by `validate-container-breakpoint-contracts.ts` for the reason the form's are.
@@ -394,6 +458,14 @@
     padding-inline-end:
       calc(var(--phi-grid-column-gap, 0px) * var(--phi-grid-slot-trail-medium, 0) / 24);
   }
+
+  .phi-grid-layout__guide--compact {
+    display: none;
+  }
+
+  .phi-grid-layout__guide--medium {
+    display: block;
+  }
 }
 
 @container phi-grid (min-width: 610px) {
@@ -404,4 +476,155 @@
     padding-inline-end:
       calc(var(--phi-grid-column-gap, 0px) * var(--phi-grid-slot-trail-wide, 0) / 24);
   }
+
+  .phi-grid-layout__guide--medium {
+    display: none;
+  }
+
+  .phi-grid-layout__guide--wide {
+    display: block;
+  }
+}
+
+/*
+ * A Surface whose content is drawn in another mode (`tone`, LAYOUTING.md "Surface tone").
+ *
+ * The tone scope writes the other mode's variables under the box's tone class, but text inherits the
+ * 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.
+ */
+:where(.phi-tone-light, .phi-tone-dark, .phi-tone-inverse) {
+  color: var(--ant-color-text);
+}
+
+:where(.phi-tone-light) {
+  color-scheme: light;
+}
+
+:where(.phi-tone-dark) {
+  color-scheme: dark;
+}
+
+/*
+ * The Card Widget (`components/widgets/shared/card-body-client.tsx`).
+ *
+ * The whole card is its link: the heading's anchor reaches over the box, so a click anywhere follows it
+ * while the card stays one link named by its heading. The action button stands above that reach and
+ * stays a button of its own.
+ */
+:where(.phi-card__link)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+/*
+ * A highlighted card keeps its ring, which is a line rather than depth. On a layer of its own above
+ * everything in the card: the card's ground is a layer above the box's background, and its picture is
+ * another, so a shadow or an outline of the box itself is painted under one of them. It takes no clicks,
+ * and it leaves the outline free for keyboard focus.
+ */
+:where(.phi-card--highlight)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--phi-card-highlight-color);
+  pointer-events: none;
+}
+
+:where(.phi-card__link):focus-visible {
+  outline: none;
+}
+
+:where(.phi-card--link):focus-within {
+  outline: calc(var(--ant-line-width) * 2) solid var(--ant-color-primary-border);
+  outline-offset: 2px;
+}
+
+/*
+ * An empty eyebrow or meta on the canvas stands only while the card is under the pointer or being written
+ * in: a place to start writing, without an empty card reading as four empty lines.
+ */
+.phi-card-editor:not(:hover):not(:focus-within) :where(:has(> .phi-card-editor__optional)) {
+  display: none;
+}
+
+:where(.phi-card__action) {
+  position: relative;
+  z-index: 2;
+}
+
+/*
+ * 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.
+ */
+:where(.phi-card--hover-lift, .phi-card--hover-zoom) {
+  transition: translate 200ms ease, box-shadow 200ms ease;
+}
+
+/* Zoom enlarges the picture and the ground; the icon stands still over them, as a mark does. */
+:where(.phi-card--hover-zoom) :where(.phi-card__ground, .phi-card__media img) {
+  transition: scale 300ms ease;
+}
+
+@media (hover: hover) {
+  :where(.phi-card--hover-lift):hover {
+    translate: 0 -2px;
+  }
+
+  :where(.phi-card--hover-zoom):hover :where(.phi-card__ground, .phi-card__media img) {
+    scale: 1.04;
+  }
+}
+
+:where(.phi-card--hover-lift):focus-within {
+  translate: 0 -2px;
+}
+
+:where(.phi-card--hover-zoom):focus-within :where(.phi-card__ground, .phi-card__media img) {
+  scale: 1.04;
+}
+
+/*
+ * 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
+ * movement, so it is not taken back for a reader who asked for less motion -- only its easing is.
+ */
+:where(.phi-card__icon) {
+  color: var(--phi-card-icon-color);
+  background: var(--phi-card-icon-background);
+}
+
+:where(.phi-card--hover-icon) :where(.phi-card__icon) {
+  transition: color 200ms ease, background-color 200ms ease;
+}
+
+@media (hover: hover) {
+  :where(.phi-card--hover-icon):hover :where(.phi-card__icon) {
+    color: var(--phi-card-icon-background);
+    background: var(--phi-card-icon-color);
+  }
+}
+
+:where(.phi-card--hover-icon):focus-within :where(.phi-card__icon) {
+  color: var(--phi-card-icon-background);
+  background: var(--phi-card-icon-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.phi-card--hover-icon) :where(.phi-card__icon) {
+    transition: none;
+  }
+
+  .phi-card--hover-lift:is(:hover, :focus-within) {
+    translate: none;
+  }
+
+  .phi-card--hover-zoom:is(:hover, :focus-within) :is(.phi-card__ground, .phi-card__media img) {
+    scale: none;
+  }
 }

package/styles/shell.css

@@ -429,3 +429,57 @@
   --phi-region-chrome-filter: none;
   --phi-region-chrome-attachment: scroll;
 }
+
+/* ---------------------------------------------------------------------------------------------
+   Revealing `header_top` (SHELL.md "Region visibility per Page")
+
+   A band that comes and goes sticks at its offset and moves out of sight upwards, by its own height
+   plus that offset. `translate` rather than `transform`, which a Region's Effects may set inline.
+
+   `hover` is out of sight until the pointer reaches the strip along the top edge, or until something in
+   it has the focus, so it can be reached from the keyboard. It takes no room (the resolver takes its
+   height off again below it) and lies over the Header when it comes, which is why it paints the
+   Shell's ground itself instead of leaving it to a pane that is not behind it any more.
+
+   `scroll-up` keeps its track, leaves while the page is read downwards and comes back when it scrolls
+   up; the client renderer says which with `data-phi-region-revealed`. A device without hover gets that
+   rule for a `hover` band too.
+   --------------------------------------------------------------------------------------------- */
+.phi-cms-region-shell[data-phi-region-reveal] {
+  transition: translate 180ms ease;
+}
+
+.phi-cms-region-shell[data-phi-region-reveal="hover"]:not(:hover, :focus-within, [data-phi-region-revealed="true"]),
+.phi-cms-region-shell[data-phi-region-reveal="scroll-up"][data-phi-region-revealed="false"] {
+  translate: 0 calc(-100% - var(--phi-region-reveal-offset, 0px));
+  /* Leaving waits a moment, so a pointer that slips off the edge does not slam the band shut. */
+  transition-delay: 320ms;
+}
+
+.phi-cms-region-reveal-zone {
+  position: absolute;
+  inset-inline: 0;
+  top: 100%;
+  height: 8px;
+}
+
+:where([data-phi-shell-chrome-panes="true"]) .phi-cms-region-shell[data-phi-region-reveal="hover"] {
+  --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;
+}
+
+/* The bands below a `scroll-up` band and the Header pane follow it as it comes and goes. */
+[data-phi-shell-layout]:has(.phi-cms-region-shell[data-phi-region-reveal="scroll-up"])
+  :is(.phi-cms-region-shell[data-phi-region-key="header_main"], .phi-cms-region-shell[data-phi-region-key="header_bottom"], .phi-shell-chrome-pane--header) {
+  transition: top 180ms ease, inset-block-start 180ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .phi-cms-region-shell[data-phi-region-reveal],
+  [data-phi-shell-layout]:has(.phi-cms-region-shell[data-phi-region-reveal="scroll-up"])
+    :is(.phi-cms-region-shell[data-phi-region-key="header_main"], .phi-cms-region-shell[data-phi-region-key="header_bottom"], .phi-shell-chrome-pane--header) {
+    transition: none;
+  }
+}

package/theme/antd-css-var-contract.d.ts

@@ -31,6 +31,11 @@ export declare const PHI_COLOR: {
     readonly success: "var(--ant-color-success)";
     readonly warning: "var(--ant-color-warning)";
 };
+/**
+ * Every distance a Phi surface states, inside a frame (`padding`) and between two things (`gap`), on the
+ * one scale (`theme/phi-tokens.ts`, `PHI_PADDING`). Ant Design's `--ant-margin-*` family carries the
+ * same values and stays Ant Design's own.
+ */
 export declare const PHI_SPACE: {
     readonly xxs: "var(--ant-padding-xxs)";
     readonly xs: "var(--ant-padding-xs)";
@@ -41,16 +46,6 @@ export declare const PHI_SPACE: {
     readonly xl: "var(--ant-padding-xl)";
     readonly xxl: "var(--ant-padding-xxl)";
 };
-export declare const PHI_MARGIN: {
-    readonly xxs: "var(--ant-margin-xxs)";
-    readonly xs: "var(--ant-margin-xs)";
-    readonly sm: "var(--ant-margin-sm)";
-    readonly base: "var(--ant-margin)";
-    readonly md: "var(--ant-margin-md)";
-    readonly lg: "var(--ant-margin-lg)";
-    readonly xl: "var(--ant-margin-xl)";
-    readonly xxl: "var(--ant-margin-xxl)";
-};
 export declare const PHI_RADIUS: {
     readonly xxs: "var(--ant-border-radius-xs)";
     readonly xs: "var(--ant-border-radius-sm)";

package/theme/antd-css-var-contract.js

@@ -31,6 +31,11 @@ export const PHI_COLOR = {
     success: "var(--ant-color-success)",
     warning: "var(--ant-color-warning)",
 };
+/**
+ * Every distance a Phi surface states, inside a frame (`padding`) and between two things (`gap`), on the
+ * one scale (`theme/phi-tokens.ts`, `PHI_PADDING`). Ant Design's `--ant-margin-*` family carries the
+ * same values and stays Ant Design's own.
+ */
 export const PHI_SPACE = {
     xxs: "var(--ant-padding-xxs)",
     xs: "var(--ant-padding-xs)",
@@ -41,16 +46,6 @@ export const PHI_SPACE = {
     xl: "var(--ant-padding-xl)",
     xxl: "var(--ant-padding-xxl)",
 };
-export const PHI_MARGIN = {
-    xxs: "var(--ant-margin-xxs)",
-    xs: "var(--ant-margin-xs)",
-    sm: "var(--ant-margin-sm)",
-    base: "var(--ant-margin)",
-    md: "var(--ant-margin-md)",
-    lg: "var(--ant-margin-lg)",
-    xl: "var(--ant-margin-xl)",
-    xxl: "var(--ant-margin-xxl)",
-};
 export const PHI_RADIUS = {
     xxs: "var(--ant-border-radius-xs)",
     xs: "var(--ant-border-radius-sm)",

package/theme/phi-button-shadow.d.ts

@@ -23,8 +23,6 @@ export type PhiThemeButtons = {
     shadow?: Partial<Record<PhiButtonShadowKind, PhiButtonShadowStep>> | null;
 };
 export declare function isPhiButtonShadowStep(value: unknown): value is PhiButtonShadowStep;
-/** The Button component tokens a Theme's shadow steps stand for in one mode; empty when it sets none. */
-export declare function buildPhiButtonShadowComponentTokens(buttons: PhiThemeButtons | null | undefined, mode: PhiThemeMode): Record<string, string>;
 /**
  * The Theme's component overrides with its Button shadows laid in for one mode.
  *

package/theme/phi-button-shadow.js

@@ -37,7 +37,7 @@ export function isPhiButtonShadowStep(value) {
     return typeof value === "string" && PHI_BUTTON_SHADOW_STEPS.includes(value);
 }
 /** The Button component tokens a Theme's shadow steps stand for in one mode; empty when it sets none. */
-export function buildPhiButtonShadowComponentTokens(buttons, mode) {
+function buildPhiButtonShadowComponentTokens(buttons, mode) {
     const tokens = {};
     for (const kind of PHI_BUTTON_SHADOW_KINDS) {
         const step = buttons?.shadow?.[kind];

package/theme/phi-control-shape.js

@@ -1,3 +1,4 @@
+import { isPhiRecord } from "../helpers/is-record";
 export const PHI_CONTROL_SHAPES = ["square", "subtle", "rounded", "pill"];
 /**
  * The stored form of a Control shape: one of the four names per corner.
@@ -22,7 +23,7 @@ export function readPhiControlShapeCorners(value) {
     if (value === undefined || value === null) {
         return null;
     }
-    if (typeof value !== "object" || Array.isArray(value)) {
+    if (!isPhiRecord(value)) {
         throw new Error(`Control shape must name its four corners, got ${JSON.stringify(value)}.`);
     }
     const record = value;

package/theme/phi-css-vars.d.ts

@@ -1,10 +1,20 @@
 import type { CSSProperties } from "react";
 import { type PhiShellRegionTheme } from "../helpers/shell-region-style";
 export type PhiCssVars = CSSProperties & Record<`--${string}`, string>;
+/**
+ * How many pixels one `rem` is, everywhere: the document's font size, every length this package turns
+ * into `rem`, and the px2rem pass over Ant Design's structure (`PHI_ANTD_STATIC_REM_ROOT_PX` in
+ * `next/config.mjs`, which is plain JavaScript and cannot import it; a test holds the two equal).
+ *
+ * It is the browser's default and Ant Design's, and it is fixed rather than a Theme setting because the
+ * Ant Design structure is generated with it for every Site -- a Site that moved it would have its own
+ * lengths converted one way and the Controls' another. A Theme that wants everything larger moves
+ * `fontSize` and the size tokens, which scale the Controls and the Theme together.
+ */
+export declare const PHI_REM_ROOT_PX = 16;
 export type PhiShellCssVarsOptions = {
-    rootValue: number;
     shellTheme?: PhiShellRegionTheme | undefined;
     themeTokens?: Record<string, unknown>;
 };
-export declare function buildPhiCssVars(rootValue?: number, themeTokens?: Record<string, unknown>): PhiCssVars;
-export declare function buildPhiShellCssVars({ rootValue, shellTheme, themeTokens, }: PhiShellCssVarsOptions): PhiCssVars;
+export declare function buildPhiCssVars(themeTokens?: Record<string, unknown>): PhiCssVars;
+export declare function buildPhiShellCssVars({ shellTheme, themeTokens, }: PhiShellCssVarsOptions): PhiCssVars;

package/theme/phi-css-vars.js

@@ -1,19 +1,28 @@
 import { PHI_LAYOUT } from "./phi-tokens";
 import { resolvePhiShellMetric, resolvePhiShellSiderCollapsedWidth, resolvePhiShellSiderWidth, } from "../helpers/shell-region-style";
+/**
+ * How many pixels one `rem` is, everywhere: the document's font size, every length this package turns
+ * into `rem`, and the px2rem pass over Ant Design's structure (`PHI_ANTD_STATIC_REM_ROOT_PX` in
+ * `next/config.mjs`, which is plain JavaScript and cannot import it; a test holds the two equal).
+ *
+ * It is the browser's default and Ant Design's, and it is fixed rather than a Theme setting because the
+ * Ant Design structure is generated with it for every Site -- a Site that moved it would have its own
+ * lengths converted one way and the Controls' another. A Theme that wants everything larger moves
+ * `fontSize` and the size tokens, which scale the Controls and the Theme together.
+ */
+export const PHI_REM_ROOT_PX = 16;
 function resolveFinitePositiveNumber(value, fallback) {
     if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
         return fallback;
     }
     return value;
 }
-function pxToRem(value, rootValue) {
-    const effectiveRoot = resolveFinitePositiveNumber(rootValue, 16);
-    const remValue = value / effectiveRoot;
-    return `${Number(remValue.toFixed(6))}rem`;
+function pxToRem(value) {
+    return `${Number((value / PHI_REM_ROOT_PX).toFixed(6))}rem`;
 }
-function cssSizeToVar(value, rootValue) {
+function cssSizeToVar(value) {
     if (typeof value === "number" && Number.isFinite(value)) {
-        return pxToRem(value, rootValue);
+        return pxToRem(value);
     }
     if (typeof value === "string" && value.trim().length > 0) {
         return value.trim();
@@ -23,15 +32,15 @@ function cssSizeToVar(value, rootValue) {
 function resolveTokenNumber(themeTokens, key, fallback) {
     return resolveFinitePositiveNumber(themeTokens?.[key], fallback);
 }
-export function buildPhiCssVars(rootValue = 16, themeTokens) {
+export function buildPhiCssVars(themeTokens) {
     return {
-        "--phi-sidebar-width": pxToRem(resolveTokenNumber(themeTokens, "sidebarWidth", PHI_LAYOUT.sidebarWidth), rootValue),
+        "--phi-sidebar-width": pxToRem(resolveTokenNumber(themeTokens, "sidebarWidth", PHI_LAYOUT.sidebarWidth)),
     };
 }
 function resolveThemeTokenNumber(themeTokens, key, fallback) {
     return resolveFinitePositiveNumber(themeTokens?.[key], fallback);
 }
-export function buildPhiShellCssVars({ rootValue, shellTheme, themeTokens, }) {
+export function buildPhiShellCssVars({ shellTheme, themeTokens, }) {
     const resolvedThemeTokens = themeTokens ?? {};
     const shellGap = resolveThemeTokenNumber(resolvedThemeTokens, "margin", 13);
     const shellPadding = resolveThemeTokenNumber(resolvedThemeTokens, "padding", 13);
@@ -43,14 +52,14 @@ export function buildPhiShellCssVars({ rootValue, shellTheme, themeTokens, }) {
         resolvePhiShellMetric(shellTheme, "height", { family: "footer", region: "top" }) ??
         resolveThemeTokenNumber(resolvedThemeTokens, "controlHeight", 34), 34);
     return {
-        "--phi-shell-gap": pxToRem(shellGap, rootValue),
-        "--phi-shell-padding": pxToRem(shellPadding, rootValue),
-        "--phi-shell-radius": pxToRem(shellRadius, rootValue),
-        "--phi-shell-header-height": pxToRem(shellHeaderHeight, rootValue),
-        "--phi-shell-footer-height": pxToRem(shellFooterHeight, rootValue),
+        "--phi-shell-gap": pxToRem(shellGap),
+        "--phi-shell-padding": pxToRem(shellPadding),
+        "--phi-shell-radius": pxToRem(shellRadius),
+        "--phi-shell-header-height": pxToRem(shellHeaderHeight),
+        "--phi-shell-footer-height": pxToRem(shellFooterHeight),
         "--phi-shell-content-min-height": "100dvh",
-        "--phi-shell-sider-width": cssSizeToVar(resolvePhiShellSiderWidth(shellTheme), rootValue) ?? pxToRem(200, rootValue),
-        "--phi-shell-sider-collapsed-width": cssSizeToVar(resolvePhiShellSiderCollapsedWidth(shellTheme), rootValue) ?? pxToRem(40, rootValue),
+        "--phi-shell-sider-width": cssSizeToVar(resolvePhiShellSiderWidth(shellTheme)) ?? pxToRem(200),
+        "--phi-shell-sider-collapsed-width": cssSizeToVar(resolvePhiShellSiderCollapsedWidth(shellTheme)) ?? pxToRem(40),
         "--phi-shell-bg-image": "none",
         "--phi-shell-bg-size": "cover",
         "--phi-shell-bg-position": "center center",

package/theme/phi-font-catalogue.d.ts

@@ -1,7 +1,5 @@
 import { type PhiFontCatalogueEntry } from "./phi-font-catalogue-contract";
 export type { PhiFontCatalogueEntry } from "./phi-font-catalogue-contract";
-/** The families phis-ui itself declares: the floor, and what the core fonts block names. */
-export declare const PHI_FONT_CATALOGUE: readonly PhiFontCatalogueEntry[];
 export type PhiFontCatalogue = {
     entries: readonly PhiFontCatalogueEntry[];
     /**

package/theme/phi-font-catalogue.js

@@ -37,7 +37,7 @@ const lora = Lora({
     preload: false,
 });
 /** The families phis-ui itself declares: the floor, and what the core fonts block names. */
-export const PHI_FONT_CATALOGUE = [
+const PHI_FONT_CATALOGUE = [
     { family: "Fira Sans", cssVariable: "var(--phi-font-source-body)", className: firaSans.variable },
     { family: "Fira Mono", cssVariable: "var(--phi-font-source-mono)", className: firaMono.variable },
     { family: "Lora", cssVariable: "var(--phi-font-source-serif)", className: lora.variable },

package/theme/phi-font-face.d.ts

@@ -52,9 +52,6 @@ export type PhiFontFaceSource = {
         deliveryRevision?: number | null;
     };
 };
-/** The name of the re-proportioned substitute; `Lora Fallback` beside `Lora`, as next/font names it. */
-export declare function buildPhiFontFallbackFamily(family: string): string;
-export declare function resolvePhiFontFaceCategory(source: PhiFontFaceSource): PhiFontFaceCategory;
 /**
  * Both rules for one Site-owned face, or nothing where the file is not one we can name a format for.
  *

package/theme/phi-font-face.js

@@ -51,7 +51,7 @@ function fontFormat(contentType) {
     return null;
 }
 /** The name of the re-proportioned substitute; `Lora Fallback` beside `Lora`, as next/font names it. */
-export function buildPhiFontFallbackFamily(family) {
+function buildPhiFontFallbackFamily(family) {
     return `${cssSafeFamily(family)} Fallback`;
 }
 function percent(value) {
@@ -83,7 +83,7 @@ function buildFallbackFace(source, category) {
         `size-adjust:${percent(sizeAdjust)}}`,
     ].join("");
 }
-export function resolvePhiFontFaceCategory(source) {
+function resolvePhiFontFaceCategory(source) {
     return source.metrics?.category ?? source.fallbackCategory ?? "sans-serif";
 }
 /**