@olenbetong/appframe-ds 1.3.7 → 1.3.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @olenbetong/appframe-ds
 
+## 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.3.8",
   "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/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/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%
 	 */