@furystack/shades-common-components 10.0.35 → 12.0.0

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

@@ -0,0 +1,372 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  buildTransition,
+  cssVariableTheme,
+  getCssVariable,
+  setCssVariable,
+  useThemeCssVariables,
+} from './css-variable-theme.js'
+
+describe('css-variable-theme', () => {
+  describe('cssVariableTheme', () => {
+    it('should have a name property', () => {
+      expect(cssVariableTheme.name).toBe('css-variable-theme')
+    })
+
+    it('should have text properties with CSS variable references', () => {
+      expect(cssVariableTheme.text.primary).toBe('var(--shades-theme-text-primary)')
+      expect(cssVariableTheme.text.secondary).toBe('var(--shades-theme-text-secondary)')
+      expect(cssVariableTheme.text.disabled).toBe('var(--shades-theme-text-disabled)')
+    })
+
+    it('should have background properties with CSS variable references', () => {
+      expect(cssVariableTheme.background.default).toBe('var(--shades-theme-background-default)')
+      expect(cssVariableTheme.background.paper).toBe('var(--shades-theme-background-paper)')
+    })
+
+    it('should have palette with color variants', () => {
+      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', () => {
+    let testElement: HTMLElement
+
+    beforeEach(() => {
+      testElement = document.createElement('div')
+      document.body.appendChild(testElement)
+    })
+
+    afterEach(() => {
+      testElement.remove()
+    })
+
+    it('should set CSS variable on element', () => {
+      setCssVariable('--test-color', 'red', testElement)
+      expect(testElement.style.getPropertyValue('--test-color')).toBe('red')
+    })
+
+    it('should handle var() wrapper in key name', () => {
+      setCssVariable('var(--test-padding)', '10px', testElement)
+      expect(testElement.style.getPropertyValue('--test-padding')).toBe('10px')
+    })
+
+    it('should set multiple CSS variables on same element', () => {
+      setCssVariable('--color-a', 'blue', testElement)
+      setCssVariable('--color-b', 'green', testElement)
+      expect(testElement.style.getPropertyValue('--color-a')).toBe('blue')
+      expect(testElement.style.getPropertyValue('--color-b')).toBe('green')
+    })
+
+    it('should override existing CSS variable', () => {
+      setCssVariable('--test-value', 'first', testElement)
+      setCssVariable('--test-value', 'second', testElement)
+      expect(testElement.style.getPropertyValue('--test-value')).toBe('second')
+    })
+  })
+
+  describe('getCssVariable', () => {
+    let testElement: HTMLElement
+
+    beforeEach(() => {
+      testElement = document.createElement('div')
+      document.body.appendChild(testElement)
+    })
+
+    afterEach(() => {
+      testElement.remove()
+    })
+
+    it('should get CSS variable from element', () => {
+      testElement.style.setProperty('--test-color', 'red')
+      const result = getCssVariable('--test-color', testElement)
+      expect(result).toBe('red')
+    })
+
+    it('should handle var() wrapper in key name', () => {
+      testElement.style.setProperty('--test-padding', '20px')
+      const result = getCssVariable('var(--test-padding)', testElement)
+      expect(result).toBe('20px')
+    })
+
+    it('should return empty string for non-existent variable', () => {
+      const result = getCssVariable('--non-existent', testElement)
+      expect(result).toBe('')
+    })
+  })
+
+  describe('useThemeCssVariables', () => {
+    let root: HTMLElement
+
+    beforeEach(() => {
+      root = document.documentElement
+    })
+
+    afterEach(() => {
+      root.style.cssText = ''
+    })
+
+    it('should set text color CSS variables from theme', () => {
+      useThemeCssVariables({
+        text: {
+          primary: '#ffffff',
+          secondary: '#cccccc',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#ffffff')
+      expect(root.style.getPropertyValue('--shades-theme-text-secondary')).toBe('#cccccc')
+    })
+
+    it('should set background CSS variables from theme', () => {
+      useThemeCssVariables({
+        background: {
+          default: '#000000',
+          paper: '#111111',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-background-default')).toBe('#000000')
+      expect(root.style.getPropertyValue('--shades-theme-background-paper')).toBe('#111111')
+    })
+
+    it('should set button CSS variables from theme', () => {
+      useThemeCssVariables({
+        button: {
+          active: '#ff0000',
+          hover: '#00ff00',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-button-active')).toBe('#ff0000')
+      expect(root.style.getPropertyValue('--shades-theme-button-hover')).toBe('#00ff00')
+    })
+
+    it('should set deeply nested palette CSS variables from theme', () => {
+      useThemeCssVariables({
+        palette: {
+          primary: {
+            main: '#1976d2',
+            light: '#42a5f5',
+            dark: '#1565c0',
+          },
+          error: {
+            main: '#d32f2f',
+          },
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('#1976d2')
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-light')).toBe('#42a5f5')
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-dark')).toBe('#1565c0')
+      expect(root.style.getPropertyValue('--shades-theme-palette-error-main')).toBe('#d32f2f')
+    })
+
+    it('should set divider CSS variable from theme', () => {
+      useThemeCssVariables({
+        divider: 'rgba(255, 255, 255, 0.12)',
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-divider')).toBe('rgba(255, 255, 255, 0.12)')
+    })
+
+    it('should handle partial theme with mixed nesting levels', () => {
+      useThemeCssVariables({
+        text: {
+          primary: '#fff',
+        },
+        divider: '#333',
+        palette: {
+          success: {
+            main: '#2e7d32',
+          },
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#fff')
+      expect(root.style.getPropertyValue('--shades-theme-divider')).toBe('#333')
+      expect(root.style.getPropertyValue('--shades-theme-palette-success-main')).toBe('#2e7d32')
+    })
+
+    it('should allow overriding previously set CSS variables', () => {
+      useThemeCssVariables({
+        text: {
+          primary: '#aaa',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#aaa')
+
+      useThemeCssVariables({
+        text: {
+          primary: '#bbb',
+        },
+      })
+
+      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)',
@@ -21,37 +21,154 @@ export const cssVariableTheme: Theme = {
   palette: {
     primary: {
       light: 'var(--shades-theme-palette-primary-light)',
+      lightContrast: 'var(--shades-theme-palette-primary-light-contrast)',
       main: 'var(--shades-theme-palette-primary-main)',
+      mainContrast: 'var(--shades-theme-palette-primary-main-contrast)',
       dark: 'var(--shades-theme-palette-primary-dark)',
+      darkContrast: 'var(--shades-theme-palette-primary-dark-contrast)',
     },
     secondary: {
       light: 'var(--shades-theme-palette-secondary-light)',
+      lightContrast: 'var(--shades-theme-palette-secondary-light-contrast)',
       main: 'var(--shades-theme-palette-secondary-main)',
+      mainContrast: 'var(--shades-theme-palette-secondary-main-contrast)',
       dark: 'var(--shades-theme-palette-secondary-dark)',
+      darkContrast: 'var(--shades-theme-palette-secondary-dark-contrast)',
     },
     error: {
       light: 'var(--shades-theme-palette-error-light)',
+      lightContrast: 'var(--shades-theme-palette-error-light-contrast)',
       main: 'var(--shades-theme-palette-error-main)',
+      mainContrast: 'var(--shades-theme-palette-error-main-contrast)',
       dark: 'var(--shades-theme-palette-error-dark)',
+      darkContrast: 'var(--shades-theme-palette-error-dark-contrast)',
     },
     warning: {
       light: 'var(--shades-theme-palette-warning-light)',
+      lightContrast: 'var(--shades-theme-palette-warning-light-contrast)',
       main: 'var(--shades-theme-palette-warning-main)',
+      mainContrast: 'var(--shades-theme-palette-warning-main-contrast)',
       dark: 'var(--shades-theme-palette-warning-dark)',
+      darkContrast: 'var(--shades-theme-palette-warning-dark-contrast)',
     },
     info: {
       light: 'var(--shades-theme-palette-info-light)',
+      lightContrast: 'var(--shades-theme-palette-info-light-contrast)',
       main: 'var(--shades-theme-palette-info-main)',
+      mainContrast: 'var(--shades-theme-palette-info-main-contrast)',
       dark: 'var(--shades-theme-palette-info-dark)',
+      darkContrast: 'var(--shades-theme-palette-info-dark-contrast)',
     },
     success: {
       light: 'var(--shades-theme-palette-success-light)',
+      lightContrast: 'var(--shades-theme-palette-success-light-contrast)',
       main: 'var(--shades-theme-palette-success-main)',
+      mainContrast: 'var(--shades-theme-palette-success-main-contrast)',
       dark: 'var(--shades-theme-palette-success-dark)',
+      darkContrast: 'var(--shades-theme-palette-success-dark-contrast)',
     },
   },
   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)
@@ -69,9 +186,11 @@ const assignValue = <T extends object>(
 ) => {
   const keys = Object.keys(target) as Array<keyof T>
   keys.forEach((key) => {
+    if (source[key] === undefined) {
+      return
+    }
     if (typeof source[key] === 'object' && typeof target[key] === 'object') {
       assignValue(target[key] as object, source[key] as object, root)
-      return
     } else {
       assignFn(target[key] as string, source[key] as string, root)
     }
@@ -80,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