@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/wizard/index.spec.tsx

@@ -1,7 +1,7 @@
-import type { ChildrenList } from '@furystack/shades'
 import { Injector } from '@furystack/inject'
+import type { ChildrenList } from '@furystack/shades'
 import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { WizardStepProps } from './index.js'
 import { Wizard } from './index.js'
@@ -103,122 +103,131 @@ describe('Wizard', () => {
         btn?.click()
         await sleepAsync(50)
       },
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
   describe('rendering', () => {
     it('should render the wizard container', async () => {
-      const { wizard } = await renderWizard([Step1])
-      expect(wizard).toBeTruthy()
-      expect(wizard.tagName.toLowerCase()).toBe('shades-wizard')
+      await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {
+        expect(wizard).toBeTruthy()
+        expect(wizard.tagName.toLowerCase()).toBe('shades-wizard')
+      })
     })
 
     it('should render the first step initially', async () => {
-      const { getStepName } = await renderWizard([Step1, Step2])
-      expect(getStepName()).toBe('step1')
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName }) => {
+        expect(getStepName()).toBe('step1')
+      })
     })
 
     it('should pass correct props to the first step', async () => {
-      const { getStepInfo } = await renderWizard([Step1, Step2, Step3])
-      expect(getStepInfo()).toBe('Page 1 of 3')
+      await usingAsync(await renderWizard([Step1, Step2, Step3]), async ({ getStepInfo }) => {
+        expect(getStepInfo()).toBe('Page 1 of 3')
+      })
     })
   })
 
   describe('navigation', () => {
     it('should navigate to next step when onNext is called', async () => {
-      const { getStepName, clickNext } = await renderWizard([Step1, Step2])
-
-      expect(getStepName()).toBe('step1')
-      await clickNext()
-      expect(getStepName()).toBe('step2')
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName, clickNext }) => {
+        expect(getStepName()).toBe('step1')
+        await clickNext()
+        expect(getStepName()).toBe('step2')
+      })
     })
 
     it('should navigate to previous step when onPrev is called', async () => {
-      const { getStepName, clickNext, clickPrev } = await renderWizard([Step1, Step2])
-
-      await clickNext()
-      expect(getStepName()).toBe('step2')
-      await clickPrev()
-      expect(getStepName()).toBe('step1')
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName, clickNext, clickPrev }) => {
+        await clickNext()
+        expect(getStepName()).toBe('step2')
+        await clickPrev()
+        expect(getStepName()).toBe('step1')
+      })
     })
 
     it('should not navigate before first step', async () => {
-      const { getStepName, clickPrev } = await renderWizard([Step1, Step2])
-
-      expect(getStepName()).toBe('step1')
-      await clickPrev()
-      expect(getStepName()).toBe('step1')
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepName, clickPrev }) => {
+        expect(getStepName()).toBe('step1')
+        await clickPrev()
+        expect(getStepName()).toBe('step1')
+      })
     })
 
     it('should update step info when navigating', async () => {
-      const { getStepInfo, clickNext } = await renderWizard([Step1, Step2])
-
-      expect(getStepInfo()).toBe('Page 1 of 2')
-      await clickNext()
-      expect(getStepInfo()).toBe('Page 2 of 2')
+      await usingAsync(await renderWizard([Step1, Step2]), async ({ getStepInfo, clickNext }) => {
+        expect(getStepInfo()).toBe('Page 1 of 2')
+        await clickNext()
+        expect(getStepInfo()).toBe('Page 2 of 2')
+      })
     })
 
     it('should navigate through multiple steps', async () => {
-      const { getStepName, getStepInfo, clickNext, clickPrev } = await renderWizard([Step1, Step2, Step3])
-
-      expect(getStepName()).toBe('step1')
-      expect(getStepInfo()).toBe('Page 1 of 3')
-
-      await clickNext()
-      expect(getStepName()).toBe('step2')
-      expect(getStepInfo()).toBe('Page 2 of 3')
-
-      await clickNext()
-      expect(getStepName()).toBe('step3')
-      expect(getStepInfo()).toBe('Page 3 of 3')
-
-      await clickPrev()
-      expect(getStepName()).toBe('step2')
-      expect(getStepInfo()).toBe('Page 2 of 3')
+      await usingAsync(
+        await renderWizard([Step1, Step2, Step3]),
+        async ({ getStepName, getStepInfo, clickNext, clickPrev }) => {
+          expect(getStepName()).toBe('step1')
+          expect(getStepInfo()).toBe('Page 1 of 3')
+
+          await clickNext()
+          expect(getStepName()).toBe('step2')
+          expect(getStepInfo()).toBe('Page 2 of 3')
+
+          await clickNext()
+          expect(getStepName()).toBe('step3')
+          expect(getStepInfo()).toBe('Page 3 of 3')
+
+          await clickPrev()
+          expect(getStepName()).toBe('step2')
+          expect(getStepInfo()).toBe('Page 2 of 3')
+        },
+      )
     })
   })
 
   describe('onFinish', () => {
     it('should call onFinish when clicking next on the last step', async () => {
       const onFinish = vi.fn()
-      const { clickNext } = await renderWizard([Step1], onFinish)
-
-      expect(onFinish).not.toHaveBeenCalled()
-      await clickNext()
-      expect(onFinish).toHaveBeenCalledOnce()
+      await usingAsync(await renderWizard([Step1], onFinish), async ({ clickNext }) => {
+        expect(onFinish).not.toHaveBeenCalled()
+        await clickNext()
+        expect(onFinish).toHaveBeenCalledOnce()
+      })
     })
 
     it('should call onFinish after navigating to the last step', async () => {
       const onFinish = vi.fn()
-      const { clickNext } = await renderWizard([Step1, Step2], onFinish)
-
-      await clickNext()
-      expect(onFinish).not.toHaveBeenCalled()
+      await usingAsync(await renderWizard([Step1, Step2], onFinish), async ({ clickNext }) => {
+        await clickNext()
+        expect(onFinish).not.toHaveBeenCalled()
 
-      await clickNext()
-      expect(onFinish).toHaveBeenCalledOnce()
+        await clickNext()
+        expect(onFinish).toHaveBeenCalledOnce()
+      })
     })
 
     it('should work without onFinish callback', async () => {
-      const { getStepName, clickNext } = await renderWizard([Step1])
-
-      expect(getStepName()).toBe('step1')
-      await clickNext()
-      expect(getStepName()).toBe('step1')
+      await usingAsync(await renderWizard([Step1]), async ({ getStepName, clickNext }) => {
+        expect(getStepName()).toBe('step1')
+        await clickNext()
+        expect(getStepName()).toBe('step1')
+      })
     })
   })
 
   describe('Paper container', () => {
     it('should render step inside a Paper component', async () => {
-      const { wizard } = await renderWizard([Step1])
-      const paper = wizard.querySelector('div[is="shade-paper"]')
-      expect(paper).toBeTruthy()
+      await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {
+        const paper = wizard.querySelector('div[is="shade-paper"]')
+        expect(paper).toBeTruthy()
+      })
     })
 
     it('should have elevation 3 on the Paper', async () => {
-      const { wizard } = await renderWizard([Step1])
-      const paper = wizard.querySelector('div[is="shade-paper"]')
-      expect(paper?.getAttribute('data-elevation')).toBe('3')
+      await usingAsync(await renderWizard([Step1]), async ({ wizard }) => {
+        const paper = wizard.querySelector('div[is="shade-paper"]')
+        expect(paper?.getAttribute('data-elevation')).toBe('3')
+      })
     })
   })
 })

package/src/services/click-away-service.ts

@@ -1,16 +1,22 @@
-export class ClickAwayService<T extends HTMLElement> {
+export class ClickAwayService {
   public [Symbol.dispose]() {
     window.removeEventListener('click', this.clickOutsideListener, true)
   }
 
+  private getElement(): HTMLElement | null {
+    if (this.element instanceof HTMLElement) return this.element
+    return this.element.current
+  }
+
   public clickOutsideListener = ((ev: MouseEvent) => {
-    if (ev.target && !this.element.contains(ev.target as HTMLElement)) {
+    const el = this.getElement()
+    if (ev.target && el && !el.contains(ev.target as HTMLElement)) {
       this.onClickAway()
     }
   }).bind(this)
 
   constructor(
-    private readonly element: T,
+    private readonly element: HTMLElement | { readonly current: HTMLElement | null },
     private readonly onClickAway: () => void,
   ) {
     window.addEventListener('click', this.clickOutsideListener, true)

package/src/services/css-variable-theme.spec.ts

@@ -1,5 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { cssVariableTheme, getCssVariable, setCssVariable, useThemeCssVariables } from './css-variable-theme.js'
+import {
+  buildTransition,
+  cssVariableTheme,
+  getCssVariable,
+  setCssVariable,
+  useThemeCssVariables,
+} from './css-variable-theme.js'
 
 describe('css-variable-theme', () => {
   describe('cssVariableTheme', () => {
@@ -22,6 +28,59 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.palette.primary.main).toBe('var(--shades-theme-palette-primary-main)')
       expect(cssVariableTheme.palette.error.main).toBe('var(--shades-theme-palette-error-main)')
     })
+
+    it('should have action properties with CSS variable references', () => {
+      expect(cssVariableTheme.action.hoverBackground).toBe('var(--shades-theme-action-hover-background)')
+      expect(cssVariableTheme.action.selectedBackground).toBe('var(--shades-theme-action-selected-background)')
+      expect(cssVariableTheme.action.activeBackground).toBe('var(--shades-theme-action-active-background)')
+      expect(cssVariableTheme.action.focusRing).toBe('var(--shades-theme-action-focus-ring)')
+      expect(cssVariableTheme.action.disabledOpacity).toBe('var(--shades-theme-action-disabled-opacity)')
+      expect(cssVariableTheme.action.backdrop).toBe('var(--shades-theme-action-backdrop)')
+      expect(cssVariableTheme.action.subtleBorder).toBe('var(--shades-theme-action-subtle-border)')
+    })
+
+    it('should have shape properties with CSS variable references', () => {
+      expect(cssVariableTheme.shape.borderRadius.xs).toBe('var(--shades-theme-shape-border-radius-xs)')
+      expect(cssVariableTheme.shape.borderRadius.sm).toBe('var(--shades-theme-shape-border-radius-sm)')
+      expect(cssVariableTheme.shape.borderRadius.md).toBe('var(--shades-theme-shape-border-radius-md)')
+      expect(cssVariableTheme.shape.borderRadius.lg).toBe('var(--shades-theme-shape-border-radius-lg)')
+      expect(cssVariableTheme.shape.borderRadius.full).toBe('var(--shades-theme-shape-border-radius-full)')
+    })
+
+    it('should have shadow properties with CSS variable references', () => {
+      expect(cssVariableTheme.shadows.none).toBe('var(--shades-theme-shadows-none)')
+      expect(cssVariableTheme.shadows.sm).toBe('var(--shades-theme-shadows-sm)')
+      expect(cssVariableTheme.shadows.md).toBe('var(--shades-theme-shadows-md)')
+      expect(cssVariableTheme.shadows.lg).toBe('var(--shades-theme-shadows-lg)')
+      expect(cssVariableTheme.shadows.xl).toBe('var(--shades-theme-shadows-xl)')
+    })
+
+    it('should have typography properties with CSS variable references', () => {
+      expect(cssVariableTheme.typography.fontFamily).toBe('var(--shades-theme-typography-font-family)')
+      expect(cssVariableTheme.typography.fontSize.xs).toBe('var(--shades-theme-typography-font-size-xs)')
+      expect(cssVariableTheme.typography.fontSize.md).toBe('var(--shades-theme-typography-font-size-md)')
+      expect(cssVariableTheme.typography.fontWeight.normal).toBe('var(--shades-theme-typography-font-weight-normal)')
+      expect(cssVariableTheme.typography.fontWeight.bold).toBe('var(--shades-theme-typography-font-weight-bold)')
+      expect(cssVariableTheme.typography.lineHeight.tight).toBe('var(--shades-theme-typography-line-height-tight)')
+      expect(cssVariableTheme.typography.lineHeight.normal).toBe('var(--shades-theme-typography-line-height-normal)')
+    })
+
+    it('should have transition properties with CSS variable references', () => {
+      expect(cssVariableTheme.transitions.duration.fast).toBe('var(--shades-theme-transitions-duration-fast)')
+      expect(cssVariableTheme.transitions.duration.normal).toBe('var(--shades-theme-transitions-duration-normal)')
+      expect(cssVariableTheme.transitions.duration.slow).toBe('var(--shades-theme-transitions-duration-slow)')
+      expect(cssVariableTheme.transitions.easing.default).toBe('var(--shades-theme-transitions-easing-default)')
+      expect(cssVariableTheme.transitions.easing.easeOut).toBe('var(--shades-theme-transitions-easing-ease-out)')
+      expect(cssVariableTheme.transitions.easing.easeInOut).toBe('var(--shades-theme-transitions-easing-ease-in-out)')
+    })
+
+    it('should have spacing properties with CSS variable references', () => {
+      expect(cssVariableTheme.spacing.xs).toBe('var(--shades-theme-spacing-xs)')
+      expect(cssVariableTheme.spacing.sm).toBe('var(--shades-theme-spacing-sm)')
+      expect(cssVariableTheme.spacing.md).toBe('var(--shades-theme-spacing-md)')
+      expect(cssVariableTheme.spacing.lg).toBe('var(--shades-theme-spacing-lg)')
+      expect(cssVariableTheme.spacing.xl).toBe('var(--shades-theme-spacing-xl)')
+    })
   })
 
   describe('setCssVariable', () => {
@@ -200,5 +259,114 @@ describe('css-variable-theme', () => {
 
       expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#bbb')
     })
+
+    it('should set action CSS variables from theme', () => {
+      useThemeCssVariables({
+        action: {
+          hoverBackground: 'rgba(255, 255, 255, 0.08)',
+          focusRing: '0 0 0 3px rgba(255, 255, 255, 0.15)',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-action-hover-background')).toBe('rgba(255, 255, 255, 0.08)')
+      expect(root.style.getPropertyValue('--shades-theme-action-focus-ring')).toBe(
+        '0 0 0 3px rgba(255, 255, 255, 0.15)',
+      )
+    })
+
+    it('should set shape CSS variables from theme', () => {
+      useThemeCssVariables({
+        shape: {
+          borderRadius: {
+            md: '8px',
+            full: '50%',
+          },
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-shape-border-radius-md')).toBe('8px')
+      expect(root.style.getPropertyValue('--shades-theme-shape-border-radius-full')).toBe('50%')
+    })
+
+    it('should set typography CSS variables from theme', () => {
+      useThemeCssVariables({
+        typography: {
+          fontFamily: 'monospace',
+          fontSize: {
+            md: '14px',
+          },
+          fontWeight: {
+            bold: '700',
+          },
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-typography-font-family')).toBe('monospace')
+      expect(root.style.getPropertyValue('--shades-theme-typography-font-size-md')).toBe('14px')
+      expect(root.style.getPropertyValue('--shades-theme-typography-font-weight-bold')).toBe('700')
+    })
+
+    it('should set transition CSS variables from theme', () => {
+      useThemeCssVariables({
+        transitions: {
+          duration: {
+            fast: '0.15s',
+          },
+          easing: {
+            default: 'ease',
+          },
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-transitions-duration-fast')).toBe('0.15s')
+      expect(root.style.getPropertyValue('--shades-theme-transitions-easing-default')).toBe('ease')
+    })
+
+    it('should set spacing CSS variables from theme', () => {
+      useThemeCssVariables({
+        spacing: {
+          xs: '4px',
+          md: '16px',
+          xl: '32px',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-spacing-xs')).toBe('4px')
+      expect(root.style.getPropertyValue('--shades-theme-spacing-md')).toBe('16px')
+      expect(root.style.getPropertyValue('--shades-theme-spacing-xl')).toBe('32px')
+    })
+  })
+
+  describe('buildTransition', () => {
+    it('should build a single transition string', () => {
+      expect(buildTransition(['background', '0.2s', 'ease'])).toBe('background 0.2s ease')
+    })
+
+    it('should join multiple transitions with commas', () => {
+      expect(buildTransition(['background', '0.2s', 'ease'], ['opacity', '0.15s', 'ease-out'])).toBe(
+        'background 0.2s ease, opacity 0.15s ease-out',
+      )
+    })
+
+    it('should handle three or more transitions', () => {
+      const result = buildTransition(
+        ['background', '0.2s', 'ease'],
+        ['color', '0.3s', 'linear'],
+        ['transform', '0.1s', 'ease-in-out'],
+      )
+      expect(result).toBe('background 0.2s ease, color 0.3s linear, transform 0.1s ease-in-out')
+    })
+
+    it('should work with CSS variable references', () => {
+      expect(
+        buildTransition([
+          'background',
+          cssVariableTheme.transitions.duration.normal,
+          cssVariableTheme.transitions.easing.default,
+        ]),
+      ).toBe(
+        'background var(--shades-theme-transitions-duration-normal) var(--shades-theme-transitions-easing-default)',
+      )
+    })
   })
 })

package/src/services/css-variable-theme.ts

@@ -1,6 +1,6 @@
 import type { DeepPartial } from '@furystack/utils'
 import type { Theme } from './theme-provider-service.js'
-export const cssVariableTheme: Theme = {
+export const cssVariableTheme = {
   name: 'css-variable-theme',
   text: {
     primary: 'var(--shades-theme-text-primary)',
@@ -69,7 +69,106 @@ export const cssVariableTheme: Theme = {
     },
   },
   divider: 'var(--shades-theme-divider)',
-}
+  action: {
+    hoverBackground: 'var(--shades-theme-action-hover-background)',
+    selectedBackground: 'var(--shades-theme-action-selected-background)',
+    activeBackground: 'var(--shades-theme-action-active-background)',
+    focusRing: 'var(--shades-theme-action-focus-ring)',
+    disabledOpacity: 'var(--shades-theme-action-disabled-opacity)',
+    backdrop: 'var(--shades-theme-action-backdrop)',
+    subtleBorder: 'var(--shades-theme-action-subtle-border)',
+  },
+  shape: {
+    borderRadius: {
+      xs: 'var(--shades-theme-shape-border-radius-xs)',
+      sm: 'var(--shades-theme-shape-border-radius-sm)',
+      md: 'var(--shades-theme-shape-border-radius-md)',
+      lg: 'var(--shades-theme-shape-border-radius-lg)',
+      full: 'var(--shades-theme-shape-border-radius-full)',
+    },
+  },
+  shadows: {
+    none: 'var(--shades-theme-shadows-none)',
+    sm: 'var(--shades-theme-shadows-sm)',
+    md: 'var(--shades-theme-shadows-md)',
+    lg: 'var(--shades-theme-shadows-lg)',
+    xl: 'var(--shades-theme-shadows-xl)',
+  },
+  typography: {
+    fontFamily: 'var(--shades-theme-typography-font-family)',
+    fontSize: {
+      xs: 'var(--shades-theme-typography-font-size-xs)',
+      sm: 'var(--shades-theme-typography-font-size-sm)',
+      md: 'var(--shades-theme-typography-font-size-md)',
+      lg: 'var(--shades-theme-typography-font-size-lg)',
+      xl: 'var(--shades-theme-typography-font-size-xl)',
+    },
+    fontWeight: {
+      normal: 'var(--shades-theme-typography-font-weight-normal)',
+      medium: 'var(--shades-theme-typography-font-weight-medium)',
+      semibold: 'var(--shades-theme-typography-font-weight-semibold)',
+      bold: 'var(--shades-theme-typography-font-weight-bold)',
+    },
+    lineHeight: {
+      tight: 'var(--shades-theme-typography-line-height-tight)',
+      normal: 'var(--shades-theme-typography-line-height-normal)',
+      relaxed: 'var(--shades-theme-typography-line-height-relaxed)',
+    },
+    letterSpacing: {
+      tight: 'var(--shades-theme-typography-letter-spacing-tight)',
+      dense: 'var(--shades-theme-typography-letter-spacing-dense)',
+      normal: 'var(--shades-theme-typography-letter-spacing-normal)',
+      wide: 'var(--shades-theme-typography-letter-spacing-wide)',
+      wider: 'var(--shades-theme-typography-letter-spacing-wider)',
+      widest: 'var(--shades-theme-typography-letter-spacing-widest)',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: 'var(--shades-theme-transitions-duration-fast)',
+      normal: 'var(--shades-theme-transitions-duration-normal)',
+      slow: 'var(--shades-theme-transitions-duration-slow)',
+    },
+    easing: {
+      default: 'var(--shades-theme-transitions-easing-default)',
+      easeOut: 'var(--shades-theme-transitions-easing-ease-out)',
+      easeInOut: 'var(--shades-theme-transitions-easing-ease-in-out)',
+    },
+  },
+  spacing: {
+    xs: 'var(--shades-theme-spacing-xs)',
+    sm: 'var(--shades-theme-spacing-sm)',
+    md: 'var(--shades-theme-spacing-md)',
+    lg: 'var(--shades-theme-spacing-lg)',
+    xl: 'var(--shades-theme-spacing-xl)',
+  },
+  zIndex: {
+    drawer: 'var(--shades-theme-z-index-drawer)',
+    appBar: 'var(--shades-theme-z-index-app-bar)',
+    modal: 'var(--shades-theme-z-index-modal)',
+    tooltip: 'var(--shades-theme-z-index-tooltip)',
+    dropdown: 'var(--shades-theme-z-index-dropdown)',
+  },
+  effects: {
+    blurSm: 'var(--shades-theme-effects-blur-sm)',
+    blurMd: 'var(--shades-theme-effects-blur-md)',
+    blurLg: 'var(--shades-theme-effects-blur-lg)',
+    blurXl: 'var(--shades-theme-effects-blur-xl)',
+  },
+} satisfies Theme
+
+/**
+ * Builds a CSS transition string from property-duration-easing triplets.
+ * @param specs - Array of [property, duration, easing] tuples
+ * @returns A CSS transition string
+ * @example
+ * buildTransition(
+ *   ['background', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
+ *   ['opacity', cssVariableTheme.transitions.duration.fast, 'ease-out'],
+ * )
+ */
+export const buildTransition = (...specs: Array<[property: string, duration: string, easing: string]>): string =>
+  specs.map(([prop, dur, ease]) => `${prop} ${dur} ${ease}`).join(', ')
 
 export const setCssVariable = (key: string, value: string, root: HTMLElement) => {
   root.style.setProperty(key.replace('var(', '').replace(')', ''), value)
@@ -100,4 +199,10 @@ const assignValue = <T extends object>(
 export const useThemeCssVariables = (theme: DeepPartial<Theme>) => {
   const root = document.querySelector(':root') as HTMLElement
   assignValue(cssVariableTheme, theme, root)
+
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) {
+    setCssVariable(cssVariableTheme.transitions.duration.fast, '0s', root)
+    setCssVariable(cssVariableTheme.transitions.duration.normal, '0s', root)
+    setCssVariable(cssVariableTheme.transitions.duration.slow, '0s', root)
+  }
 }

package/src/services/default-dark-theme.ts

@@ -1,7 +1,7 @@
 import { defaultPalette } from './default-palette.js'
 import type { Theme } from './theme-provider-service.js'
 
-export const defaultDarkTheme: Theme = {
+export const defaultDarkTheme = {
   name: 'default-dark-theme',
   text: {
     primary: '#fff',
@@ -20,5 +20,91 @@ export const defaultDarkTheme: Theme = {
     paper: '#424242',
   },
   palette: defaultPalette,
-  divider: 'rgba(0, 0, 0, 0.12)',
-}
+  divider: 'rgba(255, 255, 255, 0.12)',
+  action: {
+    hoverBackground: 'rgba(255, 255, 255, 0.08)',
+    selectedBackground: 'rgba(255, 255, 255, 0.15)',
+    activeBackground: 'rgba(255, 255, 255, 0.2)',
+    focusRing: '0 0 0 3px rgba(255, 255, 255, 0.15)',
+    disabledOpacity: '0.6',
+    backdrop: 'rgba(0, 0, 0, 0.65)',
+    subtleBorder: 'rgba(255, 255, 255, 0.2)',
+  },
+  shape: {
+    borderRadius: {
+      xs: '2px',
+      sm: '4px',
+      md: '8px',
+      lg: '12px',
+      full: '50%',
+    },
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15)',
+    md: '0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2)',
+    xl: '0 12px 32px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.25)',
+  },
+  typography: {
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+    fontSize: {
+      xs: '11px',
+      sm: '13px',
+      md: '14px',
+      lg: '16px',
+      xl: '24px',
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: '1.3',
+      normal: '1.5',
+      relaxed: '1.75',
+    },
+    letterSpacing: {
+      tight: '-0.5px',
+      dense: '-0.25px',
+      normal: '0px',
+      wide: '0.15px',
+      wider: '0.5px',
+      widest: '1.5px',
+    },
+  },
+  transitions: {
+    duration: {
+      fast: '0.15s',
+      normal: '0.2s',
+      slow: '0.3s',
+    },
+    easing: {
+      default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easeOut: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+      easeInOut: 'ease-in-out',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+  zIndex: {
+    drawer: '1000',
+    appBar: '1100',
+    modal: '1200',
+    tooltip: '1300',
+    dropdown: '1400',
+  },
+  effects: {
+    blurSm: '4px',
+    blurMd: '8px',
+    blurLg: '15px',
+    blurXl: '20px',
+  },
+} satisfies Theme