@podoba/react 0.0.35 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.35",
+	"version": "0.0.36",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -28,8 +28,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.35",
-		"@podoba/tailwind": "^0.0.35",
+		"@podoba/tokens": "^0.0.36",
+		"@podoba/tailwind": "^0.0.36",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/asset-selection-surface.examples.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from 'react'
 import { AssetSelectionSurface, AssetSelectionGrid, AssetSelectionEmpty, AssetLibraryPreview } from './asset-selection-surface'
 import { Button } from './button'
+import { Subtle } from './subtle'
 import { SectionTabs } from './section-tabs'
 
 function Example({ linked = false, pending = false, error = false }) {
@@ -9,7 +10,7 @@ function Example({ linked = false, pending = false, error = false }) {
 	return <>
 		<Button onPress={() => setOpen(true)}>Open asset selection</Button>
 		<AssetSelectionSurface isOpen={open} onOpenChange={setOpen} closeLabel="Close" isPending={pending}
-			title={linked ? <>Review linked assets <span className="text-fg-subtle">and add more</span><br />to this <span className="text-fg-subtle">project.</span></> : <>Choose assets <span className="text-fg-subtle">from storage</span><br />and add them to <span className="text-fg-subtle">this project.</span></>}
+			title={linked ? <>Review linked assets <Subtle>and add more</Subtle><br />to this <Subtle>project.</Subtle></> : <>Choose assets <Subtle>from storage</Subtle><br />and add them to <Subtle>this project.</Subtle></>}
 			filters={<SectionTabs active="all" onChange={() => {}} tabs={[{key:'all',label:'All'},{key:'print',label:'Print'}]} />}
 			error={error ? 'The selected asset could not be added. Please try again.' : undefined}
 			footer={<><Button variant="secondary" isDisabled={pending} onPress={() => setOpen(false)}>Close</Button><Button isDisabled={pending} isPending={pending}>{pending ? 'Adding…' : linked ? 'Add another asset' : 'Add selected asset'}</Button></>}

package/src/components/compact-settings-dialog.tsx

@@ -17,9 +17,11 @@ export const TeamSelectionCard = uic(AriaButton, {
 })
 export const MemberSelectionInfo = uic('span', { displayName: 'MemberSelectionInfo', baseClass: 'min-w-0 flex-1' })
 export const MemberSelectionName = uic('span', { displayName: 'MemberSelectionName', baseClass: 'mb-1 block text-heading5 font-medium text-fg' })
-export const MemberSelectionEmail = uic('span', { displayName: 'MemberSelectionEmail', baseClass: 'block text-compact font-normal text-fg-subtle' })
+// #25: an email address and a team's meta line are CONTENT — `fg-muted` (5.98:1 on
+// surface, 5.53:1 on surface-card), never the ornamental `fg-subtle` (2.10 / 1.94:1).
+export const MemberSelectionEmail = uic('span', { displayName: 'MemberSelectionEmail', baseClass: 'block text-compact font-normal text-fg-muted' })
 export const TeamSelectionName = uic('span', { displayName: 'TeamSelectionName', baseClass: 'mb-1 block font-medium text-fg' })
-export const TeamSelectionMeta = uic('span', { displayName: 'TeamSelectionMeta', baseClass: 'block text-small font-normal text-fg-subtle' })
+export const TeamSelectionMeta = uic('span', { displayName: 'TeamSelectionMeta', baseClass: 'block text-small font-normal text-fg-muted' })
 
 /** Intrinsic-height form surface. The tall settings and catalog surfaces remain separate. */
 export function CompactSettingsDialog({ isOpen, onOpenChange, isPending = false, title, description, closeLabel, children }: {

package/src/components/settings-dialog-surface.tsx

@@ -88,7 +88,7 @@ export function SettingsDialogSurface({ variant, isOpen, onOpenChange, isPending
 					<header className={catalog ? 'flex shrink-0 flex-col gap-2' : basic ? headerBottomPadding ? 'shrink-0 pb-4' : 'shrink-0' : create || csv ? 'shrink-0 pb-4' : 'shrink-0 pb-10 max-md:pb-8'}>
 						<Container className={containerClass}>
 							{catalog ? <Heading id={titleId} level="1" className="m-0 mb-4 max-w-5/6 whitespace-pre-line" style={{ letterSpacing: 0 }}>{title}</Heading>
-								: <DisplayHeading id={titleId} className={`m-0 whitespace-pre-line pb-0.5 text-fg-subtle ${create ? 'mb-4 max-w-5/6' : ''}`} style={{ letterSpacing: 0, ...(basic ? { maxWidth: '18ch' } : csv && isWide ? { maxWidth: '34ch' } : {}) }}>{title}</DisplayHeading>}
+								: <DisplayHeading id={titleId} className={`m-0 whitespace-pre-line pb-0.5 text-fg-muted ${create ? 'mb-4 max-w-5/6' : ''}`} style={{ letterSpacing: 0, ...(basic ? { maxWidth: '18ch' } : csv && isWide ? { maxWidth: '34ch' } : {}) }}>{title}</DisplayHeading>}
 							{description ? <p id={descriptionId} className="mb-0 mt-3 text-small font-normal text-fg-workflow-muted" style={{ maxWidth: '48ch' }}>{description}</p> : null}
 						</Container>
 						{filters ? <div className="w-full max-w-80">{filters}</div> : null}
@@ -128,7 +128,7 @@ export function WizardFormDialog({ isOpen, onOpenChange, isPending = false, isEx
 				<Button variant="ghost" aria-label={closeLabel} isDisabled={isPending} onPress={() => onOpenChange(false)} className="absolute end-4 top-3.5 z-10 h-8 w-8 rounded-md p-0 text-fg-subtle">
 					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
 				</Button>
-				<header className="shrink-0"><Container className="max-w-384 px-5 min-[901px]:px-6"><DisplayHeading id={titleId} className="m-0 whitespace-pre-line pb-0.5 text-fg-subtle" style={{ letterSpacing: 0 }}>{title}</DisplayHeading></Container></header>
+				<header className="shrink-0"><Container className="max-w-384 px-5 min-[901px]:px-6"><DisplayHeading id={titleId} className="m-0 whitespace-pre-line pb-0.5 text-fg-muted" style={{ letterSpacing: 0 }}>{title}</DisplayHeading></Container></header>
 				<ScrollBody style={{ scrollbarGutter: 'stable' }}><Container className="max-w-384 px-5 min-[901px]:px-6"><Body className="gap-8">{children}</Body></Container></ScrollBody>
 				<footer className="shrink-0 border-t border-border bg-surface pt-5"><Container className="max-w-384 px-5 min-[901px]:px-6"><div className="flex flex-wrap justify-end gap-2">{footer}</div></Container></footer>
 			</Layout>

package/src/components/template-catalog-card.tsx

@@ -65,7 +65,8 @@ export function CatalogMetadataSummary({ title, ariaLabel, items }: {
 				const second = !item.fullWidth && column % 2 === 1
 				column = item.fullWidth ? 0 : column + 1
 				return <div key={item.label} className={`flex min-w-0 flex-col gap-1 border-b border-border py-3 ${item.fullWidth ? 'col-span-full' : ''} ${second ? 'min-[641px]:border-l min-[641px]:pl-3' : ''}`}>
-					<dt className="m-0 text-body font-normal text-fg-subtle">{item.label}</dt>
+					{/* #25: the term of a definition list is meaningful copy — AA `fg-muted`. */}
+					<dt className="m-0 text-body font-normal text-fg-muted">{item.label}</dt>
 					<dd className="m-0 text-body font-normal text-fg [overflow-wrap:anywhere]">{item.value}</dd>
 				</div>
 			})}
@@ -99,7 +100,7 @@ export function TemplateReferenceItem({ title, meta, preview, view, isDisabled,
 }) {
 	return <ReferenceButton type="button" view={view} isDisabled={isDisabled} onPress={onOpen} aria-label={title} data-template-id={templateId}>
 		<span aria-hidden="true" className={view === 'compact_list' ? 'flex size-12 items-center justify-center overflow-hidden rounded-sm bg-surface-card [&>div]:w-full' : 'flex h-full w-full items-center justify-center [&>div]:w-full'}>{preview}</span>
-		{view === 'compact_list' ? <span className="flex min-w-0 flex-col gap-1"><span className="truncate text-small font-medium text-fg">{title}</span><span className="truncate text-label font-medium text-fg-subtle">{meta}</span></span> : null}
+		{view === 'compact_list' ? <span className="flex min-w-0 flex-col gap-1"><span className="truncate text-small font-medium text-fg">{title}</span><span className="truncate text-label font-medium text-fg-muted">{meta}</span></span> : null}
 	</ReferenceButton>
 }