@furystack/shades-common-components 13.1.0 → 13.2.0

package/src/services/theme-provider-service.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { ThemeProviderService } from './theme-provider-service.js'
 
 describe('ThemeProviderService', () => {
@@ -19,4 +19,52 @@ describe('ThemeProviderService', () => {
       expect(service.theme.name).toBe('css-variable-theme')
     })
   })
+
+  describe('setAssignedTheme with custom root', () => {
+    let customRoot: HTMLElement
+
+    beforeEach(() => {
+      customRoot = document.createElement('div')
+      document.body.appendChild(customRoot)
+    })
+
+    afterEach(() => {
+      customRoot.remove()
+      document.documentElement.style.cssText = ''
+    })
+
+    it('should apply CSS variables to the provided root element', () => {
+      service.setAssignedTheme(
+        {
+          text: { primary: '#abcdef' },
+          palette: { primary: { main: '#123456' } },
+        },
+        customRoot,
+      )
+
+      expect(customRoot.style.getPropertyValue('--shades-theme-text-primary')).toBe('#abcdef')
+      expect(customRoot.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('#123456')
+      expect(document.documentElement.style.getPropertyValue('--shades-theme-text-primary')).toBe('')
+    })
+
+    it('should still update the stored theme when a custom root is provided', () => {
+      const theme = { text: { primary: '#111' } }
+      service.setAssignedTheme(theme, customRoot)
+
+      expect(service.getAssignedTheme()).toBe(theme)
+    })
+
+    it('should emit themeChanged when a custom root is provided', () => {
+      const theme = { text: { primary: '#222' } }
+      let emittedTheme: unknown
+
+      service.subscribe('themeChanged', (t) => {
+        emittedTheme = t
+      })
+
+      service.setAssignedTheme(theme, customRoot)
+
+      expect(emittedTheme).toBe(theme)
+    })
+  })
 })

package/src/services/theme-provider-service.ts

@@ -85,8 +85,8 @@ export interface Background {
   default: Color
   /** Elevated surface background (cards, dialogs, etc.) */
   paper: Color
-  /** Optional CSS background-image for paper surfaces (e.g. a tiled texture) */
-  paperImage?: string
+  /** CSS background-image for paper surfaces (e.g. a tiled texture). Use 'none' for no image. */
+  paperImage: string
 }
 
 /**
@@ -131,8 +131,8 @@ export type BorderRadiusScale = {
 export type Shape = {
   /** Border radius scale */
   borderRadius: BorderRadiusScale
-  /** Border width for surface components (paper, card, etc.). Defaults to 0. */
-  borderWidth?: string
+  /** Border width for surface components (paper, card, etc.). Use '0px' for no border. */
+  borderWidth: string
 }
 
 /**
@@ -230,9 +230,9 @@ export type ThemeTypography = {
   /** Line height scale */
   lineHeight: LineHeightScale
   /** Letter spacing scale */
-  letterSpacing?: LetterSpacingScale
-  /** CSS text-shadow value applied globally to text */
-  textShadow?: string
+  letterSpacing: LetterSpacingScale
+  /** CSS text-shadow value applied globally to text. Use 'none' for no shadow. */
+  textShadow: string
 }
 
 /**
@@ -358,9 +358,9 @@ export interface Theme {
   /** Spacing scale */
   spacing: Spacing
   /** Z-index stacking layers */
-  zIndex?: ZIndex
+  zIndex: ZIndex
   /** Visual effect tokens (blur, backdrop) */
-  effects?: Effects
+  effects: Effects
 }
 
 /**
@@ -382,10 +382,11 @@ export class ThemeProviderService extends EventHub<{ themeChanged: DeepPartial<T
   /**
    * Assigns a new theme, updates the CSS variables and emits a themeChanged event
    * @param theme The Theme instance
+   * @param root Optional HTML element to scope CSS variables to. Defaults to `:root`.
    */
-  public setAssignedTheme(theme: DeepPartial<Theme>) {
+  public setAssignedTheme(theme: DeepPartial<Theme>, root?: HTMLElement) {
     this._assignedTheme = theme
-    useThemeCssVariables(theme)
+    useThemeCssVariables(theme, root)
     this.emit('themeChanged', theme)
   }
 }

package/src/themes/architect-theme.ts

@@ -88,6 +88,7 @@ export const architectTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/auditore-theme.ts

@@ -88,6 +88,7 @@ export const auditoreTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/black-mesa-theme.ts

@@ -88,6 +88,7 @@ export const blackMesaTheme = {
       wider: '1.25px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

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

@@ -83,6 +83,7 @@ export const defaultDarkTheme = {
       wider: '0.5px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/default-light-theme.ts

@@ -83,6 +83,7 @@ export const defaultLightTheme = {
       wider: '0.5px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/dragonborn-theme.ts

@@ -88,6 +88,7 @@ export const dragonbornTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/hawkins-theme.ts

@@ -88,6 +88,7 @@ export const hawkinsTheme = {
       wider: '1px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/jedi-theme.ts

@@ -88,6 +88,7 @@ export const jediTheme = {
       wider: '0.75px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/neon-runner-theme.ts

@@ -85,6 +85,7 @@ export const neonRunnerTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/plumber-theme.ts

@@ -86,6 +86,7 @@ export const plumberTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/replicant-theme.ts

@@ -88,6 +88,7 @@ export const replicantTheme = {
       wider: '2px',
       widest: '3px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/sandworm-theme.ts

@@ -88,6 +88,7 @@ export const sandwormTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/shadow-broker-theme.ts

@@ -86,6 +86,7 @@ export const shadowBrokerTheme = {
       wider: '1.25px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/sith-theme.ts

@@ -88,6 +88,7 @@ export const sithTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/vault-dweller-theme.ts

@@ -88,6 +88,7 @@ export const vaultDwellerTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/wild-hunt-theme.ts

@@ -88,6 +88,7 @@ export const wildHuntTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/xenomorph-theme.ts

@@ -86,6 +86,7 @@ export const xenomorphTheme = {
       wider: '1.25px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {