@phis/ui 0.1.0

package/styles/shell.css

@@ -0,0 +1,421 @@
+.shell-sider-full {
+  container-name: phi-render-viewport;
+  container-type: inline-size;
+  display: grid;
+  gap: 0;
+  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "sider header_top header_top"
+    "sider header_main header_main"
+    "sider header_bottom header_bottom"
+    "sider hero hero"
+    "sider content sider_right"
+    "sider footer_top footer_top"
+    "sider footer_main footer_main"
+    "sider footer_bottom footer_bottom";
+  min-width: 0;
+  min-height: var(--phi-shell-content-min-height, 100dvh);
+  height: auto;
+}
+
+.shell-sider-embedded {
+  container-name: phi-render-viewport;
+  container-type: inline-size;
+}
+
+@container phi-render-viewport (width < 768px) {
+  :where([data-phi-viewport-flags="2"], [data-phi-viewport-flags="4"], [data-phi-viewport-flags="6"]) {
+    display: none !important;
+  }
+}
+
+@container phi-render-viewport (768px <= width < 1200px) {
+  :where([data-phi-viewport-flags="1"], [data-phi-viewport-flags="4"], [data-phi-viewport-flags="5"]) {
+    display: none !important;
+  }
+}
+
+@container phi-render-viewport (width >= 1200px) {
+  :where([data-phi-viewport-flags="1"], [data-phi-viewport-flags="2"], [data-phi-viewport-flags="3"]) {
+    display: none !important;
+  }
+}
+
+.shell-sider-full .sider_left {
+  grid-area: sider;
+  position: sticky;
+  top: 0;
+  height: var(--phi-shell-content-min-height, 100dvh);
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  align-self: start;
+}
+
+.shell-sider-full .phi-shell-region.header_top {
+  grid-area: header_top;
+}
+
+.shell-sider-full .phi-shell-region.header_main {
+  grid-area: header_main;
+}
+
+.shell-sider-full .phi-shell-region.header_bottom {
+  grid-area: header_bottom;
+}
+
+.shell-sider-full .phi-shell-region.hero {
+  grid-area: hero;
+  /* Travels under the sticky Header pane exactly as Content does, so it is capped the same way. */
+  isolation: isolate;
+}
+
+.shell-sider-full .phi-shell-region,
+.shell-sider-embedded .phi-shell-region {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.shell-sider-full .phi-shell-region > *,
+.shell-sider-embedded .phi-shell-region > * {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.shell-sider-full .phi-shell-content-main {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  /*
+   * The Page stacks inside itself, never against the frame.
+   *
+   * A Chrome pane sits at 50, above Content at 0 and below every Chrome Region at 100. That only holds
+   * while nothing inside Content climbs past it, and things do: a Builder canvas renders Regions of its
+   * own, carrying the very z-indexes the real chrome uses -- a 210 was measured scrolling over the pane.
+   * Isolating the Page keeps every such value inside it, so the frame stays above the Page whatever the
+   * Page contains, without the pane bidding higher and higher.
+   */
+  isolation: isolate;
+}
+
+.shell-sider-full .phi-shell-content-main > * {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.shell-sider-full .sider_right {
+  grid-area: sider_right;
+  min-width: 0;
+  min-height: 0;
+  align-self: start;
+}
+
+.shell-sider-full .phi-shell-region.footer_top {
+  grid-area: footer_top;
+}
+
+.shell-sider-full .phi-shell-region.footer_main {
+  grid-area: footer_main;
+}
+
+.shell-sider-full .phi-shell-region.footer_bottom {
+  grid-area: footer_bottom;
+}
+
+.shell-sider-full [data-phi-sider-collapsed="true"] .ant-menu-inline-collapsed,
+.shell-sider-embedded [data-phi-sider-collapsed="true"] .ant-menu-inline-collapsed {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+}
+
+.shell-sider-embedded {
+  display: grid;
+  gap: 0;
+  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "header_top header_top header_top"
+    "header_main header_main header_main"
+    "sider header_bottom header_bottom"
+    "sider hero hero"
+    "sider content sider_right"
+    "footer_top footer_top footer_top"
+    "footer_main footer_main footer_main"
+    "footer_bottom footer_bottom footer_bottom";
+  min-width: 0;
+  min-height: var(--phi-shell-content-min-height, 100dvh);
+}
+
+.shell-sider-embedded--no-sider {
+  grid-template-columns: 0px minmax(0, 1fr) auto;
+  grid-template-areas:
+    "header_top header_top header_top"
+    "header_main header_main header_main"
+    "sider header_bottom header_bottom"
+    "sider hero hero"
+    "sider content sider_right"
+    "footer_top footer_top footer_top"
+    "footer_main footer_main footer_main"
+    "footer_bottom footer_bottom footer_bottom";
+}
+
+.shell-sider-embedded .phi-shell-region.header_top {
+  grid-area: header_top;
+}
+
+.shell-sider-embedded .phi-shell-region.header_main {
+  grid-area: header_main;
+}
+
+.shell-sider-embedded .phi-shell-region.header_bottom {
+  grid-area: header_bottom;
+}
+
+.shell-sider-embedded .phi-shell-region.hero {
+  grid-area: hero;
+  isolation: isolate;
+}
+
+.shell-sider-embedded .sider_left {
+  grid-area: sider;
+  position: sticky;
+  top: 0;
+  height: 100%;
+  max-height: var(--phi-shell-content-min-height, 100dvh);
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  align-self: start;
+}
+
+.shell-sider-embedded .content,
+.shell-sider-embedded .phi-shell-content-main {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  /* Isolated for the reason given on the full-height topology above. */
+  isolation: isolate;
+}
+
+.shell-sider-embedded .phi-shell-content-main > * {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.shell-sider-embedded .sider_right {
+  grid-area: sider_right;
+  min-width: 0;
+  min-height: 0;
+  align-self: start;
+}
+
+.shell-sider-embedded--no-sider .content,
+.shell-sider-embedded--no-sider .phi-shell-content-main {
+  width: 100%;
+}
+
+.shell-sider-embedded .phi-shell-region.footer_top {
+  grid-area: footer_top;
+}
+
+.shell-sider-embedded .phi-shell-region.footer_main {
+  grid-area: footer_main;
+}
+
+.shell-sider-embedded .phi-shell-region.footer_bottom {
+  grid-area: footer_bottom;
+}
+/* The Region ground, painted here rather than inline: the value may be a colour or a gradient, and the
+   shorthand is the only form that carries both. Inline the Region emits longhands alone -- an authored
+   Background, an Effect, the Shell Chrome Overlay -- so every one of them overrides the part of this
+   declaration it names, and React never has to drop a longhand from an element whose shorthand is set. */
+:where(.phi-cms-region-shell) {
+  background: var(--phi-region-background);
+}
+
+/* Server-rendered regions switch published light/dark shell values with the root theme state.
+   The ground falls back to transparent, never to a container token: a Region paints only what the
+   Shell record or the Region itself authored, so the Theme Root Background stays visible beneath it. */
+:where(.phi-cms-region-shell) {
+  --phi-region-background: var(--phi-region-background-light, transparent);
+  --phi-region-color: var(--phi-region-color-light, var(--ant-color-text));
+}
+
+:where([data-phi-theme-mode="dark"]) :where(.phi-cms-region-shell) {
+  --phi-region-background: var(--phi-region-background-dark, transparent);
+  --phi-region-color: var(--phi-region-color-dark, var(--ant-color-text));
+}
+
+/* The Shell Chrome Overlay (SHELL.md "Root Background and Shell Backdrop Layers").
+   The site-owned ground the Header, Sider and Footer Regions share, published per mode on the Root
+   Layout element and switched here the way every other Region value switches. A mode with no overlay
+   publishes nothing and lands on the neutral value, which paints nothing at all. */
+:where([data-phi-root-layout="true"]) {
+  --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"][data-phi-theme-mode="dark"]) {
+  --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
+   Region ground on purpose -- none of them carries specificity, so the later one has to be the one that
+   matches. */
+:where(.phi-cms-region-shell[data-phi-shell-chrome="true"]) {
+  --phi-region-background: var(--phi-region-chrome-color, transparent);
+}
+
+/* ---------------------------------------------------------------------------------------------
+   Shell Chrome Panes (SHELL.md "Root Background and Shell Backdrop Layers")
+
+   One continuous pane per Chrome family, above the scrolling Page and below the Region content, in
+   place of Regions frosting one by one.
+
+   `backdrop-filter` belongs to its element: it frosts only the slice of backdrop behind that element
+   and clamps at that element's own edges. Three stacked 55px bands under a 24px radius therefore
+   average three different results out of one picture, and the steps land on the seams -- measured at 8
+   and 23 points across a gradient in the Root Background. The fixed attachment carries a colour, a
+   gradient or a Pattern across a seam, because every Region shows its own window onto one
+   viewport-sized painting; there is no equivalent for the filter. So the frosting moves to one element
+   that spans the whole family, and the seam has nowhere left to appear.
+
+   The geometry is the grid's, not a measurement. Named areas publish `<name>-start` and `<name>-end`
+   lines, so a pane spans from the first band to the last without anyone knowing a height. A Region
+   that is absent, unmounted or hidden by a container query collapses its track to zero and the pane
+   follows; a collapsed Sider narrows its column and the pane narrows with it.
+   --------------------------------------------------------------------------------------------- */
+.phi-shell-chrome-pane {
+  /* Never a target: the pane sits over the Page and under the Region content, and both stay clickable. */
+  pointer-events: none;
+  /*
+   * Below every Chrome Region (100 and up) and above Content and Hero (0). The Regions above it are
+   * transparent where they authored nothing, so what shows through them is this.
+   */
+  z-index: 50;
+}
+
+/*
+ * What the pane paints is set inline by the Shell, not here.
+ *
+ * A `backdrop-filter` written in this file does not reach the browser: the rule arrives with its
+ * background-color intact and the filter declaration missing entirely, so the pane painted a tint and
+ * frosted nothing. The Regions have always emitted their overlay longhands inline and always frosted,
+ * which is the difference. Geometry stays in CSS, because only the grid knows it.
+ */
+
+/* The full-height Sider topology: the Sider owns column one over every row, so the three Header bands
+   are a clean rectangle and one pane covers them. The Footer likewise. */
+.shell-sider-full .phi-shell-chrome-pane--header {
+  grid-row: header_top-start / header_bottom-end;
+  grid-column: header_top-start / header_top-end;
+}
+
+/* The Sider pane sticks the way the Sider itself does, or it would scroll out from under it. */
+.shell-sider-full .phi-shell-chrome-pane--sider {
+  grid-area: sider;
+  position: sticky;
+  top: 0;
+  height: var(--phi-shell-content-min-height, 100dvh);
+  align-self: start;
+}
+
+.shell-sider-full .phi-shell-chrome-pane--footer {
+  grid-row: footer_top-start / footer_bottom-end;
+  grid-column: footer_top-start / footer_top-end;
+}
+
+/*
+ * The right Sider is one Region in one area, so its pane is that area.
+ *
+ * It fills the area rather than following the Region, which sits at the start of it and is only as tall
+ * as its content. There is no way for a grid item to be the height of a sibling, and of the two wrong
+ * answers a frame that runs the height of the row reads as a frame, while one that stops halfway reads
+ * as a floating panel.
+ */
+.shell-sider-full .phi-shell-chrome-pane--sider-right {
+  grid-area: sider_right;
+}
+
+/*
+ * The embedded topology: `header_top` and `header_main` run the full width, `header_bottom` does not,
+ * because the Sider starts beside it. A grid item covers a rectangle and nothing else, so one pane over
+ * all three would reach across the Sider and frost it twice. Two panes instead, and the seam between
+ * them falls exactly on the row where the Sider begins, which is a structural edge either way.
+ */
+.shell-sider-embedded .phi-shell-chrome-pane--header {
+  grid-row: header_top-start / header_main-end;
+  grid-column: header_top-start / header_top-end;
+}
+
+.shell-sider-embedded .phi-shell-chrome-pane--header-bottom {
+  grid-area: header_bottom;
+}
+
+.shell-sider-embedded .phi-shell-chrome-pane--sider {
+  grid-area: sider;
+  position: sticky;
+  top: 0;
+  height: 100%;
+  max-height: var(--phi-shell-content-min-height, 100dvh);
+  align-self: start;
+}
+
+.shell-sider-embedded .phi-shell-chrome-pane--footer {
+  grid-row: footer_top-start / footer_bottom-end;
+  grid-column: footer_top-start / footer_top-end;
+}
+
+.shell-sider-embedded .phi-shell-chrome-pane--sider-right {
+  grid-area: sider_right;
+}
+
+/* What a Chrome Region paints of the shared ground, which is the overlay itself while it is the Region
+   doing the painting. The Regions read these rather than the overlay properties directly, so that the
+   answer can be changed for a whole Shell at once -- an inline longhand cannot be overridden by a later
+   rule, but the value inside it can. */
+:where([data-phi-root-layout="true"]) {
+  --phi-region-chrome-image: var(--phi-shell-chrome-image, none);
+  --phi-region-chrome-size: var(--phi-shell-chrome-size, auto);
+  --phi-region-chrome-position: var(--phi-shell-chrome-position, 0 0);
+  --phi-region-chrome-repeat: var(--phi-shell-chrome-repeat, repeat);
+  --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;
+}
+
+/* Where panes cover the families, the Regions under them paint none of it: one frosting for the frame,
+   not one per band. An authored ground still wins, because it never carried the marker to begin with. */
+:where([data-phi-shell-chrome-panes="true"]) {
+  --phi-region-chrome-image: none;
+  --phi-region-chrome-color: transparent;
+  --phi-region-chrome-filter: none;
+  --phi-region-chrome-attachment: scroll;
+}

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

@@ -0,0 +1,88 @@
+/**
+ * Serializable references for Server Component styles and persisted default
+ * config. These point at Ant Design's SSR-extracted CSS variables; they do not
+ * define a second Phi token source. Client Components should use
+ * `usePhiConfig().token` when they need the resolved value in JavaScript.
+ */
+export declare const PHI_COLOR: {
+    readonly primary: "var(--ant-color-primary)";
+    readonly primaryHover: "var(--ant-color-primary-hover)";
+    readonly primaryActive: "var(--ant-color-primary-active)";
+    readonly link: "var(--ant-color-link)";
+    readonly linkHover: "var(--ant-color-link-hover)";
+    readonly text: "var(--ant-color-text)";
+    readonly textSecondary: "var(--ant-color-text-secondary)";
+    readonly textTertiary: "var(--ant-color-text-tertiary)";
+    readonly textHeading: "var(--ant-color-text-heading)";
+    readonly textLightSolid: "var(--ant-color-text-light-solid)";
+    readonly bgContainer: "var(--ant-color-bg-container)";
+    readonly bgLayout: "var(--ant-color-bg-layout)";
+    readonly bgElevated: "var(--ant-color-bg-elevated)";
+    readonly bgSpotlight: "var(--ant-color-bg-spotlight)";
+    readonly fill: "var(--ant-color-fill)";
+    readonly fillSecondary: "var(--ant-color-fill-secondary)";
+    readonly fillTertiary: "var(--ant-color-fill-tertiary)";
+    readonly fillQuaternary: "var(--ant-color-fill-quaternary)";
+    readonly border: "var(--ant-color-border)";
+    readonly borderSecondary: "var(--ant-color-border-secondary)";
+    readonly linkActive: "var(--ant-color-link-active)";
+    readonly split: "var(--ant-color-split)";
+    readonly error: "var(--ant-color-error)";
+};
+export declare const PHI_SPACE: {
+    readonly xxs: "var(--ant-padding-xxs)";
+    readonly xs: "var(--ant-padding-xs)";
+    readonly sm: "var(--ant-padding-sm)";
+    readonly base: "var(--ant-padding)";
+    readonly md: "var(--ant-padding-md)";
+    readonly lg: "var(--ant-padding-lg)";
+    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)";
+    readonly sm: "var(--ant-border-radius)";
+    readonly base: "var(--ant-border-radius-lg)";
+    readonly md: "var(--ant-border-radius-lg)";
+    readonly lg: "var(--ant-border-radius-lg)";
+    readonly xl: "var(--ant-border-radius-outer)";
+    readonly xxl: "var(--ant-border-radius-outer)";
+};
+export declare const PHI_CONTROL: {
+    readonly sm: "var(--ant-control-height-sm)";
+    readonly md: "var(--ant-control-height)";
+    readonly lg: "var(--ant-control-height-lg)";
+};
+export declare const PHI_SHADOW: {
+    readonly primary: "var(--ant-box-shadow)";
+    readonly secondary: "var(--ant-box-shadow-secondary)";
+    readonly tertiary: "var(--ant-box-shadow-tertiary)";
+};
+export declare const PHI_MOTION: {
+    readonly durationMid: "var(--ant-motion-duration-mid)";
+};
+export declare const PHI_FONT_SIZE: {
+    readonly base: "var(--ant-font-size)";
+    readonly sm: "var(--ant-font-size-sm)";
+    readonly lg: "var(--ant-font-size-lg)";
+    readonly xl: "var(--ant-font-size-xl)";
+    readonly heading2: "var(--ant-font-size-heading-2)";
+    readonly heading4: "var(--ant-font-size-heading-4)";
+    readonly heading3: "var(--ant-font-size-heading-3)";
+};
+export declare const PHI_LINE_HEIGHT: {
+    readonly base: 1.5;
+    readonly lg: 1.6;
+    readonly heading2: 1.25;
+};

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

@@ -0,0 +1,88 @@
+/**
+ * Serializable references for Server Component styles and persisted default
+ * config. These point at Ant Design's SSR-extracted CSS variables; they do not
+ * define a second Phi token source. Client Components should use
+ * `usePhiConfig().token` when they need the resolved value in JavaScript.
+ */
+export const PHI_COLOR = {
+    primary: "var(--ant-color-primary)",
+    primaryHover: "var(--ant-color-primary-hover)",
+    primaryActive: "var(--ant-color-primary-active)",
+    link: "var(--ant-color-link)",
+    linkHover: "var(--ant-color-link-hover)",
+    text: "var(--ant-color-text)",
+    textSecondary: "var(--ant-color-text-secondary)",
+    textTertiary: "var(--ant-color-text-tertiary)",
+    textHeading: "var(--ant-color-text-heading)",
+    textLightSolid: "var(--ant-color-text-light-solid)",
+    bgContainer: "var(--ant-color-bg-container)",
+    bgLayout: "var(--ant-color-bg-layout)",
+    bgElevated: "var(--ant-color-bg-elevated)",
+    bgSpotlight: "var(--ant-color-bg-spotlight)",
+    fill: "var(--ant-color-fill)",
+    fillSecondary: "var(--ant-color-fill-secondary)",
+    fillTertiary: "var(--ant-color-fill-tertiary)",
+    fillQuaternary: "var(--ant-color-fill-quaternary)",
+    border: "var(--ant-color-border)",
+    borderSecondary: "var(--ant-color-border-secondary)",
+    linkActive: "var(--ant-color-link-active)",
+    split: "var(--ant-color-split)",
+    error: "var(--ant-color-error)",
+};
+export const PHI_SPACE = {
+    xxs: "var(--ant-padding-xxs)",
+    xs: "var(--ant-padding-xs)",
+    sm: "var(--ant-padding-sm)",
+    base: "var(--ant-padding)",
+    md: "var(--ant-padding-md)",
+    lg: "var(--ant-padding-lg)",
+    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)",
+    sm: "var(--ant-border-radius)",
+    base: "var(--ant-border-radius-lg)",
+    md: "var(--ant-border-radius-lg)",
+    lg: "var(--ant-border-radius-lg)",
+    xl: "var(--ant-border-radius-outer)",
+    xxl: "var(--ant-border-radius-outer)",
+};
+export const PHI_CONTROL = {
+    sm: "var(--ant-control-height-sm)",
+    md: "var(--ant-control-height)",
+    lg: "var(--ant-control-height-lg)",
+};
+export const PHI_SHADOW = {
+    primary: "var(--ant-box-shadow)",
+    secondary: "var(--ant-box-shadow-secondary)",
+    tertiary: "var(--ant-box-shadow-tertiary)",
+};
+export const PHI_MOTION = {
+    durationMid: "var(--ant-motion-duration-mid)",
+};
+export const PHI_FONT_SIZE = {
+    base: "var(--ant-font-size)",
+    sm: "var(--ant-font-size-sm)",
+    lg: "var(--ant-font-size-lg)",
+    xl: "var(--ant-font-size-xl)",
+    heading2: "var(--ant-font-size-heading-2)",
+    heading4: "var(--ant-font-size-heading-4)",
+    heading3: "var(--ant-font-size-heading-3)",
+};
+export const PHI_LINE_HEIGHT = {
+    base: 1.5,
+    lg: 1.6,
+    heading2: 1.25,
+};

package/theme/phi-antd-token-resolver.d.ts

@@ -0,0 +1,4 @@
+import type { AliasToken } from "antd/es/theme/interface";
+import type { PhiThemeMode } from "./phi-theme-presets";
+export declare function createPhiAntdThemeCssVarKey(scope: string, identity: unknown): string;
+export declare function resolvePhiAntdAliasTokens(mode: PhiThemeMode, token: Record<string, unknown>): AliasToken & Record<string, unknown>;

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

@@ -0,0 +1,49 @@
+import darkAlgorithm from "antd/es/theme/themes/dark";
+import defaultAlgorithm from "antd/es/theme/themes/default";
+import seedToken from "antd/es/theme/themes/seed";
+import formatToken from "antd/es/theme/util/alias";
+function normalizePhiAntdThemeIdentity(value) {
+    if (Array.isArray(value)) {
+        return value.map(normalizePhiAntdThemeIdentity);
+    }
+    if (value && typeof value === "object") {
+        return Object.fromEntries(Object.entries(value)
+            .filter(([, entry]) => entry !== undefined && typeof entry !== "function" && typeof entry !== "symbol")
+            .sort(([left], [right]) => (left < right ? -1 : left > right ? 1 : 0))
+            .map(([key, entry]) => [key, normalizePhiAntdThemeIdentity(entry)]));
+    }
+    if (typeof value === "bigint") {
+        return value.toString();
+    }
+    return value;
+}
+function hashPhiAntdThemeIdentity(value) {
+    const serialized = JSON.stringify(normalizePhiAntdThemeIdentity(value));
+    let hash = 0x811c9dc5;
+    for (let index = 0; index < serialized.length; index += 1) {
+        hash ^= serialized.charCodeAt(index);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0).toString(36);
+}
+export function createPhiAntdThemeCssVarKey(scope, identity) {
+    const normalizedScope = scope
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "theme";
+    return `phi-${normalizedScope}-${hashPhiAntdThemeIdentity(identity)}`;
+}
+export function resolvePhiAntdAliasTokens(mode, token) {
+    const mergedSeedToken = {
+        ...seedToken,
+        ...token,
+    };
+    const derivativeToken = mode === "dark"
+        ? darkAlgorithm(mergedSeedToken)
+        : defaultAlgorithm(mergedSeedToken);
+    return formatToken({
+        ...derivativeToken,
+        override: token,
+    });
+}

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

@@ -0,0 +1,33 @@
+import type { PhiThemeMode } from "./phi-theme-presets";
+/**
+ * The shadow under each kind of Button, as a step rather than as CSS.
+ *
+ * Ant Design draws it with a component token per kind -- `defaultShadow`, `primaryShadow`,
+ * `dangerShadow` -- tinted from three different places: a fill, the primary outline, a fade of the error
+ * background that is also the ground of every error Alert and Tag. None of them is only the shadow, so a
+ * Theme that wants another one sets the component token.
+ *
+ * A component token has one value for both modes, and a shadow does not: the dark that reads as an edge
+ * on a light ground disappears into a dark one. So a Theme stores the step, and the step becomes CSS
+ * where the mode is known -- the root theme and the Theme workspace preview. A kind the Theme leaves
+ * unset keeps Ant Design's tinted line.
+ *
+ * The steps are Button shadows of their own rather than the Shadow presets a Card takes: those spread
+ * wide enough to lift a panel, and under something as small as a Button they read as a blur, not an edge.
+ */
+export declare const PHI_BUTTON_SHADOW_KINDS: readonly ["default", "primary", "danger"];
+export type PhiButtonShadowKind = (typeof PHI_BUTTON_SHADOW_KINDS)[number];
+export declare const PHI_BUTTON_SHADOW_STEPS: readonly ["none", "soft", "strong"];
+export type PhiButtonShadowStep = (typeof PHI_BUTTON_SHADOW_STEPS)[number];
+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.
+ *
+ * Under the Site's own `components.Button`, so a token somebody set there by hand still wins.
+ */
+export declare function applyPhiButtonShadowComponentTokens(components: Record<string, Record<string, unknown>> | null | undefined, buttons: PhiThemeButtons | null | undefined, mode: PhiThemeMode): Record<string, Record<string, unknown>> | undefined;