@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/searchable-input-styles.ts

@@ -0,0 +1,81 @@
+import type { CSSObject } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+
+/**
+ * Shared CSS styles for searchable input components (CommandPalette, Suggest).
+ * These components share the same input container, term icon, post controls,
+ * and close button patterns.
+ */
+export const searchableInputStyles: CSSObject = {
+  flexGrow: '1',
+
+  '& .input-container': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 1.25em',
+    borderRadius: cssVariableTheme.shape.borderRadius.lg,
+    position: 'relative',
+    background: cssVariableTheme.action.hoverBackground,
+    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    boxShadow: cssVariableTheme.shadows.sm,
+    transition: `all ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.default}`,
+  },
+
+  '&[data-opened] .input-container': {
+    background: cssVariableTheme.background.default,
+    border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+    boxShadow: cssVariableTheme.shadows.md,
+  },
+
+  '& .term-icon': {
+    cursor: 'pointer',
+    color: cssVariableTheme.text.secondary,
+    fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+    fontSize: '0.95em',
+    transition: `color ${cssVariableTheme.transitions.duration.normal} ease`,
+    padding: '0.5em 0.75em 0.5em 0',
+    userSelect: 'none',
+  },
+
+  '& .term-icon:hover': {
+    color: cssVariableTheme.text.primary,
+  },
+
+  '& .post-controls': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '0px',
+    overflow: 'hidden',
+  },
+
+  '&[data-opened] .post-controls': {
+    width: '50px',
+  },
+
+  '& .close-suggestions': {
+    width: '24px',
+    height: '24px',
+    opacity: '0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    borderRadius: cssVariableTheme.shape.borderRadius.sm,
+    transition: `all ${cssVariableTheme.transitions.duration.normal} ease`,
+    fontSize: cssVariableTheme.typography.fontSize.md,
+    color: cssVariableTheme.text.secondary,
+    background: 'transparent',
+    transform: 'scale(1)',
+  },
+
+  '&[data-opened] .close-suggestions': {
+    opacity: '1',
+  },
+
+  '& .close-suggestions:hover': {
+    background: cssVariableTheme.action.hoverBackground,
+    transform: 'scale(1.1)',
+  },
+}

package/src/components/skeleton.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+import { sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Skeleton } from './skeleton.js'
 
@@ -47,173 +47,181 @@ describe('Skeleton', () => {
   })
 
   it('should render with shadow DOM', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const skeleton = document.querySelector('shade-skeleton')
-    expect(skeleton).not.toBeNull()
+      const skeleton = document.querySelector('shade-skeleton')
+      expect(skeleton).not.toBeNull()
+    })
   })
 
   it('should have initial opacity of 0', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-    expect(skeleton).not.toBeNull()
+      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
+      expect(skeleton).not.toBeNull()
 
-    const computedStyle = window.getComputedStyle(skeleton)
-    expect(computedStyle.opacity).toBe('0')
+      const computedStyle = window.getComputedStyle(skeleton)
+      expect(computedStyle.opacity).toBe('0')
+    })
   })
 
   it('should use default delay of 1500ms', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const fadeInCall = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
-    )
+      const fadeInCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
+      )
 
-    expect(fadeInCall).toBeDefined()
-    expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(1500)
+      expect(fadeInCall).toBeDefined()
+      expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(1500)
+    })
   })
 
   it('should use custom delay when provided', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton delay={500} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton delay={500} />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const fadeInCall = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
-    )
+      const fadeInCall = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
+      )
 
-    expect(fadeInCall).toBeDefined()
-    expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(500)
+      expect(fadeInCall).toBeDefined()
+      expect((fadeInCall?.options as KeyframeAnimationOptions)?.delay).toBe(500)
+    })
   })
 
   it('should have correct css styles applied', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton />,
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-    expect(skeleton).not.toBeNull()
+      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
+      expect(skeleton).not.toBeNull()
 
-    const computedStyle = window.getComputedStyle(skeleton)
-    expect(computedStyle.display).toBe('inline-block')
+      const computedStyle = window.getComputedStyle(skeleton)
+      expect(computedStyle.display).toBe('inline-block')
+    })
   })
 
   it('should start fade-in animation with correct parameters', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton delay={100} />,
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton delay={100} />,
+      })
+
+      await sleepAsync(50)
+
+      const fadeInCall = animateCalls.find(
+        (call) =>
+          Array.isArray(call.keyframes) &&
+          call.keyframes.length === 2 &&
+          (call.keyframes[0] as Keyframe).opacity === 0 &&
+          (call.keyframes[1] as Keyframe).opacity === 1,
+      )
+
+      expect(fadeInCall).toBeDefined()
+
+      const options = fadeInCall?.options as KeyframeAnimationOptions
+      expect(options.fill).toBe('forwards')
+      expect(options.duration).toBe(300)
+      expect(options.easing).toBe('ease-out')
+      expect(options.delay).toBe(100)
     })
-
-    await sleepAsync(50)
-
-    const fadeInCall = animateCalls.find(
-      (call) =>
-        Array.isArray(call.keyframes) &&
-        call.keyframes.length === 2 &&
-        (call.keyframes[0] as Keyframe).opacity === 0 &&
-        (call.keyframes[1] as Keyframe).opacity === 1,
-    )
-
-    expect(fadeInCall).toBeDefined()
-
-    const options = fadeInCall?.options as KeyframeAnimationOptions
-    expect(options.fill).toBe('forwards')
-    expect(options.duration).toBe(300)
-    expect(options.easing).toBe('ease-out')
-    expect(options.delay).toBe(100)
   })
 
   it('should start background animation after fade-in completes', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton delay={0} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton delay={0} />,
+      })
 
-    await sleepAsync(100)
+      await sleepAsync(100)
 
-    const backgroundAnimation = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
-    )
+      const backgroundAnimation = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
+      )
 
-    expect(backgroundAnimation).toBeDefined()
+      expect(backgroundAnimation).toBeDefined()
 
-    const options = backgroundAnimation?.options as KeyframeAnimationOptions
-    expect(options.duration).toBe(10000)
-    expect(options.iterations).toBe(Infinity)
+      const options = backgroundAnimation?.options as KeyframeAnimationOptions
+      expect(options.duration).toBe(10000)
+      expect(options.iterations).toBe(Infinity)
+    })
   })
 
   it('should have gradient background animation keyframes', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
 
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: <Skeleton delay={0} />,
-    })
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Skeleton delay={0} />,
+      })
 
-    await sleepAsync(100)
+      await sleepAsync(100)
 
-    const backgroundAnimation = animateCalls.find(
-      (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
-    )
+      const backgroundAnimation = animateCalls.find(
+        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
+      )
 
-    expect(backgroundAnimation).toBeDefined()
+      expect(backgroundAnimation).toBeDefined()
 
-    const keyframes = backgroundAnimation?.keyframes as Keyframe[]
-    expect(keyframes).toHaveLength(3)
-    expect(keyframes[0].backgroundPosition).toBe('0% 50%')
-    expect(keyframes[1].backgroundPosition).toBe('100% 50%')
-    expect(keyframes[2].backgroundPosition).toBe('0% 50%')
+      const keyframes = backgroundAnimation?.keyframes as Keyframe[]
+      expect(keyframes).toHaveLength(3)
+      expect(keyframes[0].backgroundPosition).toBe('0% 50%')
+      expect(keyframes[1].backgroundPosition).toBe('100% 50%')
+      expect(keyframes[2].backgroundPosition).toBe('0% 50%')
+    })
   })
 })

package/src/components/skeleton.tsx

@@ -1,4 +1,5 @@
-import { Shade } from '@furystack/shades'
+import { Shade, createComponent } from '@furystack/shades'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { promisifyAnimation } from '../utils/promisify-animation.js'
 
 export type SkeletonProps = {
@@ -13,23 +14,26 @@ export const Skeleton = Shade<SkeletonProps>({
   css: {
     opacity: '0',
     display: 'inline-block',
-    background: 'linear-gradient(-45deg, rgba(128,128,128,0.1), rgba(128,128,128,0.3), rgba(128,128,128,0.1))',
+    background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
     backgroundSize: '400% 400%',
     width: '100%',
     height: '100%',
     minHeight: '1em',
   },
-  render: ({ element, props }) => {
+  render: ({ props, useRef }) => {
+    const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props
     setTimeout(() => {
-      void promisifyAnimation(element, [{ opacity: 0 }, { opacity: 1 }], {
+      const el = wrapperRef.current
+      if (!el) return
+      void promisifyAnimation(el, [{ opacity: 0 }, { opacity: 1 }], {
         fill: 'forwards',
         duration: 300,
         easing: 'ease-out',
         delay,
       }).then(() => {
         void promisifyAnimation(
-          element,
+          el,
           [{ backgroundPosition: '0% 50%' }, { backgroundPosition: '100% 50%' }, { backgroundPosition: '0% 50%' }],
           {
             duration: 10000,
@@ -39,6 +43,19 @@ export const Skeleton = Shade<SkeletonProps>({
       })
     })
 
-    return null
+    return (
+      <div
+        ref={wrapperRef}
+        style={{
+          opacity: '0',
+          display: 'inline-block',
+          background: 'inherit',
+          backgroundSize: 'inherit',
+          width: '100%',
+          height: '100%',
+          minHeight: '1em',
+        }}
+      />
+    )
   },
 })

package/src/components/styles.spec.ts

@@ -1,69 +1,68 @@
 import { describe, expect, it } from 'vitest'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 import { colors, styles } from './styles.js'
 
 describe('styles', () => {
   describe('colors', () => {
     describe('primary', () => {
-      it('should have light color', () => {
-        expect(colors.primary.light).toBe('#82e9de')
+      it('should reference theme palette primary light', () => {
+        expect(colors.primary.light).toBe(cssVariableTheme.palette.primary.light)
       })
 
-      it('should have main color', () => {
-        expect(colors.primary.main).toBe('#4db6ac')
+      it('should reference theme palette primary main', () => {
+        expect(colors.primary.main).toBe(cssVariableTheme.palette.primary.main)
       })
 
-      it('should have dark color', () => {
-        expect(colors.primary.dark).toBe('#00867d')
+      it('should reference theme palette primary dark', () => {
+        expect(colors.primary.dark).toBe(cssVariableTheme.palette.primary.dark)
       })
 
-      it('should have contrastText color', () => {
-        expect(colors.primary.contrastText).toBe('#000')
+      it('should reference theme palette primary mainContrast', () => {
+        expect(colors.primary.contrastText).toBe(cssVariableTheme.palette.primary.mainContrast)
       })
     })
 
     describe('secondary', () => {
-      it('should have light color', () => {
-        expect(colors.secondary.light).toBe('#62727b')
+      it('should reference theme palette secondary light', () => {
+        expect(colors.secondary.light).toBe(cssVariableTheme.palette.secondary.light)
       })
 
-      it('should have main color', () => {
-        expect(colors.secondary.main).toBe('#37474f')
+      it('should reference theme palette secondary main', () => {
+        expect(colors.secondary.main).toBe(cssVariableTheme.palette.secondary.main)
       })
 
-      it('should have dark color', () => {
-        expect(colors.secondary.dark).toBe('#102027')
+      it('should reference theme palette secondary dark', () => {
+        expect(colors.secondary.dark).toBe(cssVariableTheme.palette.secondary.dark)
       })
 
-      it('should have contrastText color', () => {
-        expect(colors.secondary.contrastText).toBe('#fff')
+      it('should reference theme palette secondary mainContrast', () => {
+        expect(colors.secondary.contrastText).toBe(cssVariableTheme.palette.secondary.mainContrast)
       })
     })
 
     describe('error', () => {
-      it('should have main color', () => {
-        expect(colors.error.main).toBe('red')
+      it('should reference theme palette error main', () => {
+        expect(colors.error.main).toBe(cssVariableTheme.palette.error.main)
       })
     })
   })
 
   describe('styles', () => {
     describe('glassBox', () => {
-      it('should have backdropFilter', () => {
-        expect(styles.glassBox.backdropFilter).toBe('blur(4px)')
+      it('should have backdropFilter using theme blur token', () => {
+        expect(styles.glassBox.backdropFilter).toBe(`blur(${cssVariableTheme.effects.blurSm})`)
       })
 
-      it('should have borderRadius', () => {
-        expect(styles.glassBox.borderRadius).toBe('5px')
+      it('should have borderRadius using theme token', () => {
+        expect(styles.glassBox.borderRadius).toBe(cssVariableTheme.shape.borderRadius.sm)
       })
 
-      it('should have border', () => {
-        expect(styles.glassBox.border).toBe('1px solid rgba(128,128,128,.3)')
+      it('should have border using theme subtleBorder', () => {
+        expect(styles.glassBox.border).toBe(`1px solid ${cssVariableTheme.action.subtleBorder}`)
       })
 
-      it('should have boxShadow', () => {
-        expect(styles.glassBox.boxShadow).toBe(
-          'rgba(0, 0, 0, 0.3) 2px 2px 2px, 1px 1px 3px -2px rgba(255,255,255,0.3) inset',
-        )
+      it('should have boxShadow using theme shadow', () => {
+        expect(styles.glassBox.boxShadow).toBe(cssVariableTheme.shadows.md)
       })
     })
   })

package/src/components/styles.tsx

@@ -1,3 +1,5 @@
+import { cssVariableTheme } from '../services/css-variable-theme.js'
+
 declare global {
   interface CSSStyleDeclaration {
     backdropFilter: string
@@ -5,27 +7,27 @@ declare global {
 }
 
 const glassBox: Partial<CSSStyleDeclaration> = {
-  backdropFilter: 'blur(4px)',
-  borderRadius: '5px',
-  border: '1px solid rgba(128,128,128,.3)',
-  boxShadow: 'rgba(0, 0, 0, 0.3) 2px 2px 2px, 1px 1px 3px -2px rgba(255,255,255,0.3) inset',
+  backdropFilter: `blur(${cssVariableTheme.effects.blurSm})`,
+  borderRadius: cssVariableTheme.shape.borderRadius.sm,
+  border: `1px solid ${cssVariableTheme.action.subtleBorder}`,
+  boxShadow: cssVariableTheme.shadows.md,
 }
 
 export const colors = {
   primary: {
-    light: '#82e9de',
-    main: '#4db6ac',
-    dark: '#00867d',
-    contrastText: '#000',
+    light: cssVariableTheme.palette.primary.light,
+    main: cssVariableTheme.palette.primary.main,
+    dark: cssVariableTheme.palette.primary.dark,
+    contrastText: cssVariableTheme.palette.primary.mainContrast,
   },
   secondary: {
-    light: '#62727b',
-    main: '#37474f',
-    dark: '#102027',
-    contrastText: '#fff',
+    light: cssVariableTheme.palette.secondary.light,
+    main: cssVariableTheme.palette.secondary.main,
+    dark: cssVariableTheme.palette.secondary.dark,
+    contrastText: cssVariableTheme.palette.secondary.mainContrast,
   },
   error: {
-    main: 'red',
+    main: cssVariableTheme.palette.error.main,
   },
 }