@olenbetong/appframe-ds 1.3.7 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @olenbetong/appframe-ds
 
+## 1.4.0
+
+### Minor Changes
+
+- 8ec7b62: One open and close motion for centred dialogs: Designsystemet's `Dialog` (the filter builder and every other centred one) and anything with the new `ob-dialog-motion` class now fade and rise in over 180 ms and play the same motion in reverse over 140 ms when closed, using transitions with `@starting-style` and `allow-discrete` instead of Designsystemet's open-only keyframes. Reduced motion keeps the fade and drops the movement. The filter builder now closes on a backdrop click, and the page content slides back when a docked `AppMenuDrawer` closes instead of jumping.
+
+## 1.3.8
+
+### Patch Changes
+
+- 2c36a7c: The `Page.Block`, `Container` and `PageContainer` widths are resized for the 2026 site's 14px root font size (87.5%), and stay in rem so they follow the browser's font size: `text` 41rem, `md` 55rem, `lg` 73rem, `xl` 110rem - 574, 770, 1022 and 1540px, the MUI-era widths the apps were laid out for. At 16px-based rem they had come out an eighth narrower, and `xl` (80rem) at 1120px against MUI's 1536px. `Page.Block width="2xl"` (90rem) would now be narrower than `xl`, so it is deprecated and renders the same as `xl`.
+- 2d14c97: `AfLookup`, `AfLookupEdit` and the lookup grid follow dark mode: the dialog, list, borders and the hover and keyboard-active rows use Designsystemet colour tokens instead of hard-coded light colours, so item text is no longer white on white. On desktop the rows get 4px of vertical padding, so the items no longer sit flush against each other.
+
 ## 1.3.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,9 +63,9 @@
     "@atlaskit/pragmatic-drag-and-drop": "4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.8.0",
-    "@olenbetong/appframe-core": "2.15.1",
-    "@olenbetong/appframe-data": "1.8.2",
-    "@olenbetong/appframe-react": "2.2.7",
+    "@olenbetong/appframe-core": "^2.15.2",
+    "@olenbetong/appframe-data": "^1.8.2",
+    "@olenbetong/appframe-react": "^2.2.7",
     "clsx": "^2.1.1",
     "dockview-react": "8.3.1",
     "localforage": "^1.10.0",

package/src/AfLookup/Lookup.css

@@ -28,7 +28,8 @@
 	padding: 1rem;
 	overflow: hidden;
 
-	background-color: whitesmoke;
+	background-color: var(--ds-color-neutral-background-tinted);
+	color: var(--ds-color-neutral-text-default);
 
 	transition:
 		display 0.2s allow-discrete,

package/src/AfLookup/LookupCombobox.css

@@ -15,13 +15,12 @@
 .ObCombobox-listWrap {
 	overflow: hidden;
 	min-height: 0;
-	border: 1px solid rgb(0 0 0 / 0.12);
+	border: 1px solid var(--ds-color-neutral-border-subtle);
 	border-radius: 0.25rem;
-	background-color: white;
+	background-color: var(--ds-color-neutral-background-default);
 }
 
 .ObCombobox-list {
-	border: 1px solid rgb(0 0 0 / 0.06);
 	height: 100%;
 	overflow-y: hidden;
 	overscroll-behavior: contain;
@@ -31,23 +30,18 @@
 }
 
 .ObCombobox-input {
-	background-color: white;
+	background-color: var(--ds-color-neutral-background-default);
 }
 
 .ObCombobox-listItem {
-	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
 	cursor: pointer;
 
 	&.active {
-		background-color: var(--active-color);
+		background-color: var(--ds-color-neutral-surface-active);
 	}
 
 	&:hover {
-		background-color: rgb(0 0 0 / 0.06);
-	}
-
-	&.active:hover {
-		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
+		background-color: var(--ds-color-neutral-surface-hover);
 	}
 }
 
@@ -55,7 +49,7 @@
 	position: relative;
 	height: 4px;
 	overflow: hidden;
-	background-color: rgb(0 0 0 / 0.08);
+	background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .ObCombobox-progress-bar {

package/src/AfLookup/LookupCombobox.tsx

@@ -76,7 +76,7 @@ function LookupComboboxRow<T extends Record<string, unknown>>({
 			item={item}
 			style={{
 				...style,
-				padding: isDesktop ? "0 8px" : "8px",
+				padding: isDesktop ? "4px 8px" : "8px",
 			}}
 			id={itemId}
 		/>

package/src/AfLookup/LookupGrid.css

@@ -2,15 +2,15 @@
 	height: 100%;
 	overflow: hidden;
 	overscroll-behavior: contain;
-	border: 1px solid rgb(0 0 0 / 0.06);
+	border: 1px solid var(--ds-color-neutral-border-subtle);
 }
 
 .ObLookupGrid-header {
 	display: grid;
 	height: 40px;
 	align-items: center;
-	border-bottom: 1px solid rgb(0 0 0 / 0.12);
-	background-color: rgb(0 0 0 / 0.03);
+	border-bottom: 1px solid var(--ds-color-neutral-border-default);
+	background-color: var(--ds-color-neutral-background-tinted);
 	font-weight: 600;
 }
 
@@ -22,22 +22,17 @@
 }
 
 .ObLookupGrid-row {
-	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
 	display: grid;
 	align-items: center;
 	cursor: pointer;
-	border-bottom: 1px solid rgb(0 0 0 / 0.06);
+	border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
 
 	&.active {
-		background-color: var(--active-color);
+		background-color: var(--ds-color-neutral-surface-active);
 	}
 
 	&:hover {
-		background-color: rgb(0 0 0 / 0.06);
-	}
-
-	&.active:hover {
-		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
+		background-color: var(--ds-color-neutral-surface-hover);
 	}
 }
 
@@ -51,7 +46,7 @@
 	white-space: nowrap;
 
 	&.active {
-		outline: 2px solid oklch(from var(--brand-secondary, #666) calc(l - 0.2) c h);
+		outline: 2px solid var(--ds-color-neutral-border-strong);
 		outline-offset: -2px;
 	}
 }

package/src/container/Container.tsx

@@ -14,13 +14,14 @@ const maxWidthToBlockWidth: Record<ContainerMaxWidth, PageBlockWidth> = {
 
 export type ContainerProps = Omit<PageBlockProps, "width"> & {
 	/**
-	 * Predefined max-width, using the same scale as MUI `Container`. Content is
-	 * horizontally centered.
+	 * Predefined max-width, with the MUI `Container` names on the `Page.Block` scale. Content is
+	 * horizontally centered. Pixel widths are at the 2026 site's 14px root font size; the
+	 * rem values follow the browser's font size setting.
 	 *
-	 * - `xs`/`sm`: 36rem (576px) — recommended line-length for running text
-	 * - `md`: 48rem (768px)
-	 * - `lg`: 64rem (1024px)
-	 * - `xl`: 80rem (1280px)
+	 * - `xs`/`sm`: 41rem (574px) — recommended line-length for running text
+	 * - `md`: 55rem (770px)
+	 * - `lg`: 73rem (1022px)
+	 * - `xl`: 110rem (1540px)
 	 * - `false`: no max-width
 	 *
 	 * @default "lg"

package/src/filter/FilterBuilder.tsx

@@ -402,7 +402,7 @@ export function FilterBuilder({
 	return (
 		<Dialog
 			open={open}
-			closedby="closerequest"
+			closedby="any"
 			closeButton={false}
 			data-size={size}
 			className="ObFilterBuilder-dialog"

package/src/layout/AppMenuDrawer.css

@@ -18,7 +18,8 @@
 		background-color: var(--ds-color-neutral-background-default, #fff);
 		color: var(--ds-color-neutral-text-default, #1e2b3c);
 		transform: translateX(-100%);
-		transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+		/* Same timing as the content offset in Page.css, so the two edges move together. */
+		transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;

package/src/layout/DialogMotion.css

@@ -0,0 +1,77 @@
+/*
+ * One open and close motion for every centred modal: Designsystemet's Dialog (the filter builder,
+ * the site search, the report launcher and any app's own dialogs) and anything else that opts in
+ * with the `ob-dialog-motion` class (the chrome's app menu, which is a plain <dialog>).
+ *
+ * Designsystemet animates the opening with keyframes only, 300 ms, and nothing on close. This
+ * replaces that with transitions, so the close plays the same motion in reverse:
+ *   - @starting-style gives the first frame after showModal() something to transition from;
+ *   - `display` and `overlay` transition with `allow-discrete`, which keeps the dialog in the top
+ *     layer until the fade out has finished after close().
+ * Browsers without `overlay` (Firefox, Safari at the time of writing) still animate the opening
+ * and close without the fade; nothing breaks.
+ *
+ * A dialog only fades out when it is closed with close() and stays mounted. One that React
+ * removes on close disappears at once.
+ *
+ * Reduced motion keeps a short fade and drops the movement.
+ */
+
+:root {
+	--ob-dialog-enter-duration: 180ms;
+	--ob-dialog-exit-duration: 140ms;
+	--ob-dialog-offset: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--ob-dialog-offset: 0;
+	}
+}
+
+.ds-dialog:is(:not([data-placement]), [data-placement="center"]),
+.ob-dialog-motion {
+	opacity: 0;
+	translate: 0 var(--ob-dialog-offset);
+	transition-property: opacity, translate, overlay, display;
+	transition-duration: var(--ob-dialog-exit-duration);
+	transition-timing-function: ease-in;
+	transition-behavior: allow-discrete;
+
+	&[open] {
+		opacity: 1;
+		translate: 0 0;
+		/* Designsystemet's keyframes would play on top of the transition. */
+		animation: none;
+		transition-duration: var(--ob-dialog-enter-duration);
+		transition-timing-function: ease-out;
+	}
+
+	&::backdrop {
+		opacity: 0;
+		animation: none;
+		transition-property: opacity, overlay, display;
+		transition-duration: var(--ob-dialog-exit-duration);
+		transition-timing-function: ease-in;
+		transition-behavior: allow-discrete;
+	}
+
+	&[open]::backdrop {
+		opacity: 1;
+		transition-duration: var(--ob-dialog-enter-duration);
+		transition-timing-function: ease-out;
+	}
+}
+
+@starting-style {
+	.ds-dialog:is(:not([data-placement]), [data-placement="center"])[open],
+	.ob-dialog-motion[open] {
+		opacity: 0;
+		translate: 0 var(--ob-dialog-offset);
+	}
+
+	.ds-dialog:is(:not([data-placement]), [data-placement="center"])[open]::backdrop,
+	.ob-dialog-motion[open]::backdrop {
+		opacity: 0;
+	}
+}

package/src/layout/PageContainer.css

@@ -23,21 +23,21 @@
 		height: 100%;
 	}
 
-	/* The content width on the MUI Container scale; the gutters come on top. */
+	/* The content width on the Page.Block scale (rem for a 14px root); the gutters come on top. */
 	.ObPageContainer-inner.ObPageContainer-text {
-		max-width: calc(36rem + 2 * var(--ob-page-container-gutter));
+		max-width: calc(41rem + 2 * var(--ob-page-container-gutter));
 	}
 
 	.ObPageContainer-inner.ObPageContainer-md {
-		max-width: calc(48rem + 2 * var(--ob-page-container-gutter));
+		max-width: calc(55rem + 2 * var(--ob-page-container-gutter));
 	}
 
 	.ObPageContainer-inner.ObPageContainer-lg {
-		max-width: calc(64rem + 2 * var(--ob-page-container-gutter));
+		max-width: calc(73rem + 2 * var(--ob-page-container-gutter));
 	}
 
 	.ObPageContainer-inner.ObPageContainer-xl {
-		max-width: calc(80rem + 2 * var(--ob-page-container-gutter));
+		max-width: calc(110rem + 2 * var(--ob-page-container-gutter));
 	}
 }
 

package/src/layout/PageContainer.tsx

@@ -8,8 +8,8 @@ export type PageContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
 export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
 	fullHeight?: boolean;
 	/**
-	 * Predefined max-width of the content, on the MUI `Container` scale (`xs`/`sm` 36rem,
-	 * `md` 48rem, `lg` 64rem, `xl` 80rem, plus the gutters). The content stays against the
+	 * Predefined max-width of the content, on the `Page.Block` scale (`xs`/`sm` 41rem,
+	 * `md` 55rem, `lg` 73rem, `xl` 110rem, plus the gutters). The content stays against the
 	 * leading edge, as the MUI-era `PageContainer` did; `Page.Block`/`Container` centre it.
 	 * @default max-width: 100%
 	 */

package/src/layout/index.tsx

@@ -1,4 +1,5 @@
 import "./index.css";
+import "./DialogMotion.css";
 
 import { useEffect, useState } from "react";
 import type React from "react";

package/src/page/Page.css

@@ -16,6 +16,11 @@
 		   rather than the viewport. That is what keeps it clear of a site toolbar rendered
 		   above the app, without needing to know the toolbar's height. */
 		position: relative;
+		/* On the base rule, not the drawer-open one below: the content has to slide back when the
+		   drawer closes too, and a transition declared only where the padding is set stops
+		   applying the moment that rule stops matching. Same timing as the drawer itself
+		   (AppMenuDrawer.css), so the content edge follows the drawer edge. */
+		transition: padding-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	.ObPage-document {
@@ -35,7 +40,6 @@
 	/* Offset content when a docked Page.Header drawer is open (desktop) */
 	.ObPage-root:has(.ObPageHeader-drawer.ObPageHeader-drawerDocked.ObPageHeader-drawerOpen) {
 		padding-left: var(--ob-page-drawer-width, 20rem);
-		transition: padding-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
 	}
 }
 

package/src/page/PageBlock.css

@@ -4,24 +4,24 @@
 	margin-inline: auto;
 }
 
+/* The widths are in rem for a 14px root (the 2026 site's 87.5%), so they follow the browser's
+   font size: text 574px, md 770px, lg 1022px, xl 1540px at the default setting. */
 .ObPageBlock-text {
-	max-width: calc(36rem + 2 * var(--ob-page-gutter, 0rem));
+	max-width: calc(41rem + 2 * var(--ob-page-gutter, 0rem));
 }
 
 .ObPageBlock-md {
-	max-width: 48rem;
+	max-width: 55rem;
 }
 
 .ObPageBlock-lg {
-	max-width: 64rem;
-}
-
-.ObPageBlock-xl {
-	max-width: 80rem;
+	max-width: 73rem;
 }
 
+/* 2xl is a deprecated alias: at 90rem it had become narrower than xl. */
+.ObPageBlock-xl,
 .ObPageBlock-2xl {
-	max-width: 90rem;
+	max-width: 110rem;
 }
 
 /* Against the leading edge instead of centred in the space left over. */

package/src/page/PageBlock.tsx

@@ -44,13 +44,14 @@ export type PageBlockProps = React.HTMLAttributes<HTMLElement> & {
 	 */
 	overflow?: "auto" | "hidden";
 	/**
-	 * Predefined max-width. Content is horizontally centered.
+	 * Predefined max-width. Content is horizontally centered. Pixel widths are at the 2026
+	 * site's 14px root font size; the rem values follow the browser's font size setting.
 	 *
-	 * - `text`: 36rem (576px) — recommended line-length for running text
-	 * - `md`: 48rem (768px)
-	 * - `lg`: 64rem (1024px)
-	 * - `xl`: 80rem (1280px)
-	 * - `2xl`: 90rem (1440px)
+	 * - `text`: 41rem (574px) — recommended line-length for running text
+	 * - `md`: 55rem (770px)
+	 * - `lg`: 73rem (1022px)
+	 * - `xl`: 110rem (1540px)
+	 * - `2xl`: deprecated, the same as `xl`
 	 *
 	 * @default max-width: 100%
 	 */