@furystack/shades-common-components 12.7.0 → 13.0.1

package/src/components/grid.tsx

@@ -31,6 +31,7 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
     shadowDomName: 'shade-grid',
     css: {
       display: 'block',
+      fontFamily: cssVariableTheme.typography.fontFamily,
       width: '100%',
       height: '100%',
       overflow: 'auto',
@@ -41,7 +42,8 @@ export const Grid: <T, Column extends string>(props: GridProps<T, Column>, child
       },
       '& th': {
         padding: '1em 1.2em',
-        backgroundColor: cssVariableTheme.background.paper,
+        background: cssVariableTheme.background.paper,
+        backgroundImage: cssVariableTheme.background.paperImage,
         color: cssVariableTheme.text.secondary,
         borderRadius: cssVariableTheme.shape.borderRadius.xs,
         top: '0',

package/src/components/icons/icon.tsx

@@ -1,5 +1,6 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { paletteMainColors } from '../../services/palette-css-vars.js'
 import type { Palette } from '../../services/theme-provider-service.js'
 import type { IconDefinition } from './icon-types.js'
@@ -39,6 +40,7 @@ export const Icon = Shade<IconProps>({
   shadowDomName: 'shade-icon',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     justifyContent: 'center',
     verticalAlign: 'middle',

package/src/components/image.tsx

@@ -358,6 +358,7 @@ export const Image = Shade<ImageProps>({
   shadowDomName: 'shade-image',
   css: {
     display: 'inline-block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     overflow: 'hidden',
     borderRadius: cssVariableTheme.shape.borderRadius.sm,

package/src/components/inputs/autocomplete.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { TextInputProps } from './input.js'
 import { Input } from './input.js'
 
@@ -12,6 +13,7 @@ export const Autocomplete = Shade<{
   onchange?: (value: string) => void
 }>({
   shadowDomName: 'shade-autocomplete',
+  css: { fontFamily: cssVariableTheme.typography.fontFamily },
   render: ({ props, useState, useDisposable, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
 

package/src/components/inputs/checkbox.tsx

@@ -52,6 +52,7 @@ export const Checkbox = Shade<CheckboxProps>({
   shadowDomName: 'shade-checkbox',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& label': {
@@ -127,7 +128,7 @@ export const Checkbox = Shade<CheckboxProps>({
       top: '8px',
       width: '10px',
       height: '2px',
-      backgroundColor: cssVariableTheme.background.paper,
+      background: cssVariableTheme.background.paper,
       border: 'none',
       transform: 'none',
       pointerEvents: 'none',

package/src/components/inputs/input-number.tsx

@@ -127,6 +127,7 @@ export const InputNumber = Shade<InputNumberProps>({
   shadowDomName: 'shade-input-number',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1.25em',
 
     '& label': {

package/src/components/inputs/input.tsx

@@ -111,6 +111,7 @@ export const Input = Shade<TextInputProps>({
   shadowDomName: 'shade-input',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1.25em',
 
     // Base label styles

package/src/components/inputs/radio-group.tsx

@@ -42,6 +42,7 @@ export const RadioGroup: (props: RadioGroupProps, children: ChildrenList) => JSX
   shadowDomName: 'shade-radio-group',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
 
     '& .radio-group-label': {
       display: 'block',

package/src/components/inputs/radio.tsx

@@ -44,6 +44,7 @@ export const Radio = Shade<RadioProps>({
   shadowDomName: 'shade-radio',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& label': {

package/src/components/inputs/select.spec.tsx

@@ -847,9 +847,7 @@ describe('Select', () => {
         trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
         await flushUpdates()
 
-        // Focus handler sets data-focused on the inner container div (selectRootRef), not the host
-        const innerContainer = select.querySelector('div') as HTMLElement
-        expect(innerContainer.hasAttribute('data-focused')).toBe(true)
+        expect(select.hasAttribute('data-focused')).toBe(true)
       })
     })
 
@@ -858,12 +856,11 @@ describe('Select', () => {
         const trigger = select.querySelector('.select-trigger') as HTMLElement
         trigger.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
         await flushUpdates()
-        const innerContainer = select.querySelector('div') as HTMLElement
-        expect(innerContainer.hasAttribute('data-focused')).toBe(true)
+        expect(select.hasAttribute('data-focused')).toBe(true)
 
         trigger.dispatchEvent(new FocusEvent('blur', { bubbles: true }))
         await flushUpdates()
-        expect(innerContainer.hasAttribute('data-focused')).toBe(false)
+        expect(select.hasAttribute('data-focused')).toBe(false)
       })
     })
   })

package/src/components/inputs/select.tsx

@@ -80,6 +80,7 @@ export const Select = Shade<SelectProps>({
   shadowDomName: 'shade-select',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     marginBottom: '1.25em',
 
@@ -383,6 +384,8 @@ export const Select = Shade<SelectProps>({
     }
 
     const [state, setState] = useState<SelectState>('selectState', initialState)
+    const [isFocused, setIsFocused] = useState('isFocused', false)
+    const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('dropdownDirection', 'down')
 
     const validationResult = props.getValidationResult?.({ state })
 
@@ -392,7 +395,7 @@ export const Select = Shade<SelectProps>({
       'data-disabled': props.disabled ? '' : undefined,
       'data-multiple': isMultiple ? '' : undefined,
       'data-open': state.isOpen && !props.disabled ? '' : undefined,
-      'data-focused': state.isOpen && !props.disabled ? '' : undefined,
+      'data-focused': (state.isOpen || isFocused) && !props.disabled ? '' : undefined,
       'data-invalid': validationResult?.isValid === false ? '' : undefined,
       style: {
         '--select-primary-color': primaryColor,
@@ -564,16 +567,14 @@ export const Select = Shade<SelectProps>({
           }
         }
 
-        if (dropdownRef.current) {
-          const rect = selectRootRef.current?.getBoundingClientRect() ?? new DOMRect()
+        const rect = selectRootRef.current?.getBoundingClientRect()
+        const dropdownHeight = dropdownRef.current?.scrollHeight ?? 0
+        if (rect && dropdownHeight) {
           const spaceBelow = window.innerHeight - rect.bottom
-          const dropdownHeight = dropdownRef.current.scrollHeight
           const spaceAbove = rect.top
-
-          if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-            dropdownRef.current.setAttribute('data-direction', 'up')
-          } else {
-            dropdownRef.current.removeAttribute('data-direction')
+          const newDirection = spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'up' : 'down'
+          if (newDirection !== dropdownDirection) {
+            setDropdownDirection(newDirection)
           }
         }
       })
@@ -721,14 +722,10 @@ export const Select = Shade<SelectProps>({
             }}
             onkeydown={handleKeyDown}
             onfocus={() => {
-              if (!props.disabled) {
-                selectRootRef.current?.setAttribute('data-focused', '')
-              }
+              if (!props.disabled) setIsFocused(true)
             }}
             onblur={() => {
-              if (!state.isOpen) {
-                selectRootRef.current?.removeAttribute('data-focused')
-              }
+              setIsFocused(false)
             }}
           >
             {renderSelectedValues()}
@@ -750,6 +747,7 @@ export const Select = Shade<SelectProps>({
               className="dropdown"
               role="listbox"
               aria-multiselectable={isMultiple ? 'true' : undefined}
+              data-direction={dropdownDirection === 'up' ? 'up' : undefined}
             >
               {props.showSearch ? (
                 <li role="presentation">

package/src/components/inputs/slider.tsx

@@ -179,41 +179,11 @@ const syncVisuals = (
   }
 }
 
-/**
- * Sets all ARIA attributes on thumb elements after render.
- */
-const syncAriaAttributes = (
-  thumb0: HTMLElement | null,
-  thumb1: HTMLElement | null,
-  value: number | [number, number],
-  min: number,
-  max: number,
-  vertical: boolean,
-  disabled: boolean,
-): void => {
-  const thumbs = [thumb0, thumb1].filter(Boolean) as HTMLElement[]
-  thumbs.forEach((thumb, i) => {
-    thumb.setAttribute('role', 'slider')
-    thumb.setAttribute('aria-valuemin', String(min))
-    thumb.setAttribute('aria-valuemax', String(max))
-    thumb.setAttribute('aria-orientation', vertical ? 'vertical' : 'horizontal')
-    if (disabled) {
-      thumb.setAttribute('aria-disabled', 'true')
-    } else {
-      thumb.removeAttribute('aria-disabled')
-    }
-    if (isRangeValue(value)) {
-      thumb.setAttribute('aria-valuenow', String(value[i]))
-    } else {
-      thumb.setAttribute('aria-valuenow', String(value))
-    }
-  })
-}
-
 export const Slider = Shade<SliderProps>({
   shadowDomName: 'shade-slider',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     width: '100%',
     padding: '10px',
@@ -614,10 +584,7 @@ export const Slider = Shade<SliderProps>({
       ...(hasLabels ? { 'data-has-labels': '' } : {}),
     })
 
-    // Set ARIA attributes on thumbs after render
-    queueMicrotask(() => {
-      syncAriaAttributes(thumb0Ref.current, thumb1Ref.current, value, min, max, vertical, disabled)
-    })
+    const orientation = vertical ? 'vertical' : 'horizontal'
 
     // Calculate positions
     const renderMarks = (activeCheck: (markValue: number) => boolean) =>
@@ -661,6 +628,12 @@ export const Slider = Shade<SliderProps>({
             data-index="0"
             tabIndex={disabled ? -1 : 0}
             style={thumbStartStyle}
+            role="slider"
+            aria-valuemin={String(min)}
+            aria-valuemax={String(max)}
+            aria-valuenow={String(value[0])}
+            aria-orientation={orientation}
+            aria-disabled={disabled ? 'true' : undefined}
           />
           <div
             ref={thumb1Ref}
@@ -668,6 +641,12 @@ export const Slider = Shade<SliderProps>({
             data-index="1"
             tabIndex={disabled ? -1 : 0}
             style={thumbEndStyle}
+            role="slider"
+            aria-valuemin={String(min)}
+            aria-valuemax={String(max)}
+            aria-valuenow={String(value[1])}
+            aria-orientation={orientation}
+            aria-disabled={disabled ? 'true' : undefined}
           />
           {renderMarks((v) => v >= value[0] && v <= value[1])}
         </div>
@@ -687,7 +666,19 @@ export const Slider = Shade<SliderProps>({
       <div ref={sliderRootRef} className="slider-root">
         <div className="slider-rail" />
         <div ref={trackRef} className="slider-track" style={trackStyle} />
-        <div ref={thumb0Ref} className="slider-thumb" data-index="0" tabIndex={disabled ? -1 : 0} style={thumbStyle} />
+        <div
+          ref={thumb0Ref}
+          className="slider-thumb"
+          data-index="0"
+          tabIndex={disabled ? -1 : 0}
+          style={thumbStyle}
+          role="slider"
+          aria-valuemin={String(min)}
+          aria-valuemax={String(max)}
+          aria-valuenow={String(value)}
+          aria-orientation={orientation}
+          aria-disabled={disabled ? 'true' : undefined}
+        />
         {renderMarks((v) => v <= value)}
         {props.name ? <input type="hidden" name={props.name} value={String(value)} /> : null}
       </div>

package/src/components/inputs/switch.tsx

@@ -52,6 +52,7 @@ export const Switch = Shade<SwitchProps>({
   shadowDomName: 'shade-switch',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
 
     '& label': {
@@ -94,7 +95,7 @@ export const Switch = Shade<SwitchProps>({
       width: '18px',
       height: '18px',
       borderRadius: '50%',
-      backgroundColor: cssVariableTheme.background.paper,
+      background: cssVariableTheme.background.paper,
       transition: buildTransition(
         ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
         ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],

package/src/components/inputs/text-area.tsx

@@ -13,6 +13,7 @@ export const TextArea = Shade<TextAreaProps>({
   shadowDomName: 'shade-text-area',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1em',
     '& label': {
       display: 'flex',

package/src/components/linear-progress.tsx

@@ -36,6 +36,7 @@ export const LinearProgress = Shade<LinearProgressProps>({
   shadowDomName: 'shade-linear-progress',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     overflow: 'hidden',
     position: 'relative',

package/src/components/list/list-item.tsx

@@ -17,6 +17,7 @@ export const ListItem: <T>(props: ListItemProps<T>, children: ChildrenList) => J
   shadowDomName: 'shade-list-item',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     alignItems: 'center',
     cursor: 'default',
     userSelect: 'none',

package/src/components/list/list.tsx

@@ -1,6 +1,7 @@
 import type { ChildrenList, PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
 import { ClickAwayService } from '../../services/click-away-service.js'
+import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { ListService } from '../../services/list-service.js'
 import { Pagination } from '../pagination.js'
 import { ListItem } from './list-item.js'
@@ -36,6 +37,7 @@ export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Eleme
   shadowDomName: 'shade-list',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     overflow: 'auto',
     '& .shade-list-pagination': {

package/src/components/loader.tsx

@@ -28,6 +28,7 @@ export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
   css: {
     display: 'inline-block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     transformOrigin: 'center',
     opacity: '0',
   },

package/src/components/markdown/markdown-display.spec.tsx

@@ -43,7 +43,7 @@ describe('MarkdownDisplay', () => {
 
       await flushUpdates()
 
-      const typography = document.querySelector('shade-markdown-display shade-typography')
+      const typography = document.querySelector('shade-markdown-display [is^="shade-typography"]')
       expect(typography).not.toBeNull()
       expect(typography?.getAttribute('data-variant')).toBe('h1')
       expect(typography?.textContent).toContain('Hello World')
@@ -62,7 +62,7 @@ describe('MarkdownDisplay', () => {
 
       await flushUpdates()
 
-      const typography = document.querySelector('shade-markdown-display shade-typography[data-variant="body1"]')
+      const typography = document.querySelector('shade-markdown-display [is^="shade-typography"][data-variant="body1"]')
       expect(typography).not.toBeNull()
       expect(typography?.textContent).toContain('Just a paragraph.')
     })

package/src/components/markdown/markdown-display.tsx

@@ -122,7 +122,7 @@ export const MarkdownDisplay = Shade<MarkdownDisplayProps>({
 
     '& .md-code-block': {
       fontFamily: 'monospace',
-      backgroundColor: cssVariableTheme.background.default,
+      background: cssVariableTheme.background.default,
       border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
       borderRadius: cssVariableTheme.shape.borderRadius.md,
       padding: cssVariableTheme.spacing.md,

package/src/components/markdown/markdown-editor.spec.tsx

@@ -133,7 +133,7 @@ describe('MarkdownEditor', () => {
       expect(textarea.value).toBe(mdContent)
 
       const heading = document.querySelector(
-        'shade-markdown-editor shade-markdown-display shade-typography[data-variant="h1"]',
+        'shade-markdown-editor shade-markdown-display [is^="shade-typography"][data-variant="h1"]',
       )
       expect(heading).not.toBeNull()
       expect(heading?.textContent).toContain('Test Content')

package/src/components/markdown/markdown-editor.tsx

@@ -35,6 +35,7 @@ export const MarkdownEditor = Shade<MarkdownEditorProps>({
   shadowDomName: 'shade-markdown-editor',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     flexDirection: 'column',
     minHeight: '0',
 

package/src/components/markdown/markdown-input.tsx

@@ -44,6 +44,7 @@ export const MarkdownInput = Shade<MarkdownInputProps>({
   shadowDomName: 'shade-markdown-input',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     marginBottom: '1em',
 
     '& label': {

package/src/components/modal.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export type ModalProps = {
   backdropStyle?: Partial<CSSStyleDeclaration>
@@ -11,6 +12,7 @@ export type ModalProps = {
 export const Modal = Shade<ModalProps>({
   shadowDomName: 'shade-modal',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .shade-backdrop': {
       width: '100%',
       height: '100%',

package/src/components/noty-list.spec.tsx

@@ -2,7 +2,7 @@ import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
 import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defaultDarkTheme } from '../services/default-dark-theme.js'
+import { defaultDarkTheme } from '../themes/default-dark-theme.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'

package/src/components/noty-list.tsx

@@ -1,11 +1,12 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
+import { getTextColor } from '../services/get-text-color.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
-import { Icon } from './icons/icon.js'
 import { close } from './icons/icon-definitions.js'
+import { Icon } from './icons/icon.js'
 
 export const getDefaultNotyTimeouts = (type: NotyModel['type']) => {
   switch (type) {
@@ -96,7 +97,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     const themeProvider = injector.getInstance(ThemeProviderService)
     const colors = themeProvider.theme.palette[props.model.type]
-    const textColor = themeProvider.getTextColor(colors.main)
+    const textColor = getTextColor(colors.main)
 
     const removeSelf = async () => {
       const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
@@ -145,6 +146,7 @@ export const NotyList = Shade({
   shadowDomName: 'shade-noty-list',
   css: {
     position: 'fixed',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     bottom: cssVariableTheme.spacing.md,
     right: cssVariableTheme.spacing.md,
     display: 'flex',

package/src/components/page-container/index.tsx

@@ -44,7 +44,7 @@ export type PageContainerProps = {
  * ```tsx
  * // Full width container
  * <PageContainer gap="16px">
- *   <h2>Dashboard</h2>
+ *   <Typography variant="h4">Dashboard</Typography>
  *   <GridOfCards />
  * </PageContainer>
  * ```
@@ -55,6 +55,7 @@ export const PageContainer = Shade<PageContainerProps>({
   elementBaseName: 'div',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     flexDirection: 'column',
     boxSizing: 'border-box',
     color: cssVariableTheme.text.primary,

package/src/components/page-container/page-header.spec.tsx

@@ -48,7 +48,7 @@ describe('PageHeader component', () => {
       })
     })
 
-    it('should render the title as h2', async () => {
+    it('should render the title as Typography with h4 variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -60,7 +60,8 @@ describe('PageHeader component', () => {
 
         await flushUpdates()
         const title = document.querySelector('[data-testid="page-header-title"]')
-        expect(title?.tagName.toLowerCase()).toBe('h2')
+        expect(title?.getAttribute('is')).toBe('shade-typography-h4')
+        expect(title?.getAttribute('data-variant')).toBe('h4')
       })
     })
   })
@@ -151,7 +152,7 @@ describe('PageHeader component', () => {
       })
     })
 
-    it('should render description as p element', async () => {
+    it('should render description as Typography with body1 variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -163,7 +164,8 @@ describe('PageHeader component', () => {
 
         await flushUpdates()
         const description = document.querySelector('[data-testid="page-header-description"]')
-        expect(description?.tagName.toLowerCase()).toBe('p')
+        expect(description?.getAttribute('is')).toBe('shade-typography-p')
+        expect(description?.getAttribute('data-variant')).toBe('body1')
       })
     })
   })

package/src/components/page-container/page-header.tsx

@@ -1,6 +1,7 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import { Paper } from '../paper.js'
+import { Typography } from '../typography.js'
 
 /**
  * Props for the PageHeader component.
@@ -58,6 +59,7 @@ export const PageHeader = Shade<PageHeaderProps>({
   shadowDomName: 'shade-page-header',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'sticky',
     top: '0',
     zIndex: `calc(${cssVariableTheme.zIndex.drawer} - 1)`,
@@ -76,23 +78,12 @@ export const PageHeader = Shade<PageHeaderProps>({
 
     '& .page-header-title': {
       margin: '0',
-      fontSize: cssVariableTheme.typography.fontSize.xl,
-      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
-      lineHeight: cssVariableTheme.typography.lineHeight.tight,
-      color: cssVariableTheme.text.primary,
     },
 
     '& .page-header-icon': {
       marginRight: cssVariableTheme.spacing.sm,
     },
 
-    '& .page-header-description': {
-      margin: `${cssVariableTheme.spacing.sm} 0 0 0`,
-      fontSize: cssVariableTheme.typography.fontSize.md,
-      lineHeight: cssVariableTheme.typography.lineHeight.normal,
-      color: cssVariableTheme.text.secondary,
-    },
-
     '& .page-header-actions': {
       display: 'flex',
       alignItems: 'center',
@@ -106,14 +97,31 @@ export const PageHeader = Shade<PageHeaderProps>({
     return (
       <Paper elevation={2} className="page-header-container">
         <div className="page-header-content">
-          <h2 className="page-header-title" data-testid="page-header-title">
+          <Typography
+            variant="h4"
+            className="page-header-title"
+            data-testid="page-header-title"
+            style={{
+              margin: '0',
+              display: 'flex',
+              alignItems: 'center',
+              gap: cssVariableTheme.spacing.sm,
+              lineHeight: '100%',
+            }}
+          >
             {icon && <span className="page-header-icon">{icon}</span>}
             {title}
-          </h2>
+          </Typography>
           {description && (
-            <p className="page-header-description" data-testid="page-header-description">
+            <Typography
+              variant="body1"
+              color="textSecondary"
+              className="page-header-description"
+              data-testid="page-header-description"
+              style={{ margin: '0', marginTop: cssVariableTheme.spacing.md }}
+            >
               {description}
-            </p>
+            </Typography>
           )}
         </div>
         {actions && (

package/src/components/page-layout/index.tsx

@@ -89,6 +89,7 @@ export const PageLayout = Shade<PageLayoutProps>({
   shadowDomName: 'shade-page-layout',
   css: {
     display: 'block',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'fixed',
     top: '0',
     left: '0',
@@ -131,6 +132,7 @@ export const PageLayout = Shade<PageLayoutProps>({
       zIndex: cssVariableTheme.zIndex.drawer,
       overflow: 'hidden',
       background: cssVariableTheme.background.paper,
+      backgroundImage: cssVariableTheme.background.paperImage,
       transition: `transform ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
     },
     '& .page-layout-drawer-left': {