@furystack/shades-common-components 12.6.0 → 13.0.0

package/src/components/typography.tsx

@@ -1,4 +1,4 @@
-import type { PartialElement } from '@furystack/shades'
+import type { ChildrenList, PartialElement, RenderOptions } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteMainColors } from '../services/palette-css-vars.js'
@@ -176,130 +176,141 @@ const colorToVar = (color: TypographyColor): string => {
   return paletteMainColors[color].main
 }
 
-const variantToTag = (variant: TypographyVariant): string => {
-  if (variant.startsWith('h')) return variant
+type TypographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
+
+const variantToTag = (variant: TypographyVariant): TypographyTag => {
+  if (variant.startsWith('h')) return variant as TypographyTag
   if (variant === 'subtitle1' || variant === 'subtitle2') return 'h6'
   if (variant === 'body1' || variant === 'body2') return 'p'
   return 'span'
 }
 
-/**
- * Typography component for consistent text styling.
- * Maps variants to semantic HTML tags and uses theme typography tokens.
- */
-export const Typography = Shade<TypographyProps>({
-  shadowDomName: 'shade-typography',
-  css: {
-    display: 'block',
-    margin: '0',
-    padding: '0',
-    fontFamily: cssVariableTheme.typography.fontFamily,
-    color: 'var(--typo-color)',
-
-    // Variant-specific typography styles
-    ...buildVariantCssRules(),
+const typographyCss = {
+  display: 'block',
+  margin: '0',
+  padding: '0',
+  fontFamily: cssVariableTheme.typography.fontFamily,
+  color: 'var(--typo-color)',
+  textShadow: cssVariableTheme.typography.textShadow || 'none',
 
-    // Gutter bottom
-    '&[data-gutter-bottom]': {
-      marginBottom: '0.35em',
-    },
+  ...buildVariantCssRules(),
 
-    // Alignment
-    '&[data-align="left"]': { textAlign: 'left' },
-    '&[data-align="center"]': { textAlign: 'center' },
-    '&[data-align="right"]': { textAlign: 'right' },
-    '&[data-align="justify"]': { textAlign: 'justify' },
+  '&[data-gutter-bottom]': {
+    marginBottom: '0.35em',
+  },
 
-    // Inner tag resets
-    '& .typo-inner': {
-      margin: '0',
-      padding: '0',
-      font: 'inherit',
-      color: 'inherit',
-      letterSpacing: 'inherit',
-      textTransform: 'inherit',
-    },
+  '&[data-align="left"]': { textAlign: 'left' },
+  '&[data-align="center"]': { textAlign: 'center' },
+  '&[data-align="right"]': { textAlign: 'right' },
+  '&[data-align="justify"]': { textAlign: 'justify' },
 
-    // Ellipsis: single line
-    '&[data-ellipsis="true"] .typo-inner': {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    },
+  '&[data-ellipsis="true"]': {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
 
-    // Ellipsis: multi-line (webkit-box-orient applied inline in render)
-    '&[data-ellipsis="multiline"] .typo-inner': {
-      overflow: 'hidden',
-      display: '-webkit-box',
-    },
+  '&[data-ellipsis="multiline"]': {
+    overflow: 'hidden',
+    display: '-webkit-box',
+  },
 
-    // Copy button
-    '& .typo-copy-btn': {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: 'transparent',
-      border: 'none',
-      color: cssVariableTheme.text.secondary,
-      cursor: 'pointer',
-      padding: `0 ${cssVariableTheme.spacing.xs}`,
-      fontSize: '0.85em',
-      lineHeight: '1',
-      verticalAlign: 'middle',
-      borderRadius: cssVariableTheme.shape.borderRadius.sm,
-      transition: buildTransition(
-        ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
-        ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
-      ),
-    },
-    '& .typo-copy-btn:hover': {
-      color: cssVariableTheme.text.primary,
-      background: cssVariableTheme.action.hoverBackground,
-    },
+  '& .typo-copy-btn': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'transparent',
+    border: 'none',
+    color: cssVariableTheme.text.secondary,
+    cursor: 'pointer',
+    padding: `0 ${cssVariableTheme.spacing.xs}`,
+    fontSize: '0.85em',
+    lineHeight: '1',
+    verticalAlign: 'middle',
+    borderRadius: cssVariableTheme.shape.borderRadius.sm,
+    transition: buildTransition(
+      ['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+      ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default],
+    ),
   },
-  render: ({ props, children, useHostProps, useRef }) => {
-    const { variant = 'body1', color = 'textPrimary', ellipsis, copyable, gutterBottom, align, style } = props
+  '& .typo-copy-btn:hover': {
+    color: cssVariableTheme.text.primary,
+    background: cssVariableTheme.action.hoverBackground,
+  },
+}
 
-    const hostStyle: Record<string, string> = {
-      '--typo-color': colorToVar(color),
-    }
-    if (style) {
-      Object.assign(hostStyle, style)
-    }
-    useHostProps({
-      'data-gutter-bottom': gutterBottom ? '' : undefined,
-      'data-align': align || undefined,
-      'data-ellipsis': ellipsis === true ? 'true' : typeof ellipsis === 'number' ? 'multiline' : undefined,
-      'data-variant': variant,
-      style: hostStyle,
-    })
+const typographyRender = ({ props, children, useHostProps }: RenderOptions<TypographyProps>): JSX.Element | null => {
+  const { variant = 'body1', color = 'textPrimary', ellipsis, copyable, gutterBottom, align, style } = props
+
+  const hostStyle: Record<string, string> = {
+    '--typo-color': colorToVar(color),
+  }
+  if (typeof ellipsis === 'number') {
+    hostStyle.webkitLineClamp = String(ellipsis)
+    hostStyle.webkitBoxOrient = 'vertical'
+  }
+  if (style) {
+    Object.assign(hostStyle, style)
+  }
+  useHostProps({
+    'data-gutter-bottom': gutterBottom ? '' : undefined,
+    'data-align': align || undefined,
+    'data-ellipsis': ellipsis === true ? 'true' : typeof ellipsis === 'number' ? 'multiline' : undefined,
+    'data-variant': variant,
+    style: hostStyle,
+  })
 
-    const tag = variantToTag(variant)
+  if (!copyable) {
+    return <>{children}</>
+  }
 
-    const innerRef = useRef<HTMLElement>('inner')
-    const handleCopy = () => {
-      const text = innerRef.current?.textContent ?? ''
-      navigator.clipboard.writeText(text).catch(() => {
-        // Fallback: do nothing on copy failure
-      })
-    }
+  const handleCopy = (e: Event) => {
+    const btn = e.currentTarget as HTMLElement
+    const host = btn.parentElement
+    if (!host) return
+    const clone = host.cloneNode(true) as HTMLElement
+    clone.querySelectorAll('.typo-copy-btn').forEach((el) => el.remove())
+    navigator.clipboard.writeText(clone.textContent ?? '').catch(() => {})
+  }
 
-    const innerProps: Record<string, unknown> = { className: 'typo-inner', ref: innerRef }
-    if (typeof ellipsis === 'number') {
-      innerProps.style = { webkitLineClamp: String(ellipsis), webkitBoxOrient: 'vertical' }
-    }
+  return (
+    <>
+      {children}
+      <button type="button" className="typo-copy-btn" onclick={handleCopy} title="Copy to clipboard">
+        <Icon icon={clipboard} size={14} />
+      </button>
+    </>
+  )
+}
 
-    const inner = children ? createComponent(tag, innerProps, ...children) : createComponent(tag, innerProps)
+const tagConfigs: Array<[TypographyTag, new () => HTMLElement]> = [
+  ['h1', HTMLHeadingElement],
+  ['h2', HTMLHeadingElement],
+  ['h3', HTMLHeadingElement],
+  ['h4', HTMLHeadingElement],
+  ['h5', HTMLHeadingElement],
+  ['h6', HTMLHeadingElement],
+  ['p', HTMLParagraphElement],
+  ['span', HTMLSpanElement],
+]
 
-    return (
-      <>
-        {inner}
-        {copyable ? (
-          <button type="button" className="typo-copy-btn" onclick={handleCopy} title="Copy to clipboard">
-            <Icon icon={clipboard} size={14} />
-          </button>
-        ) : null}
-      </>
-    )
-  },
-})
+const shadesByTag = {} as Record<TypographyTag, (props: TypographyProps, children?: ChildrenList) => JSX.Element>
+
+for (const [tag, elementBase] of tagConfigs) {
+  shadesByTag[tag] = Shade<TypographyProps>({
+    shadowDomName: `shade-typography-${tag}`,
+    elementBase,
+    elementBaseName: tag,
+    css: typographyCss,
+    render: typographyRender,
+  })
+}
+
+/**
+ * Typography component for consistent text styling.
+ * Maps variants to semantic HTML tags and uses theme typography tokens.
+ */
+export const Typography = (props: TypographyProps, children?: ChildrenList): JSX.Element => {
+  const tag = variantToTag(props.variant ?? 'body1')
+  return shadesByTag[tag](props, children)
+}

package/src/components/wizard/index.tsx

@@ -44,6 +44,7 @@ export interface WizardProps {
 export const Wizard = Shade<WizardProps>({
   shadowDomName: 'shades-wizard',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     '& .wizard-container': {
       display: 'flex',
       alignItems: 'center',

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

@@ -3,6 +3,7 @@ import {
   buildTransition,
   cssVariableTheme,
   getCssVariable,
+  removeCssVariable,
   setCssVariable,
   useThemeCssVariables,
 } from './css-variable-theme.js'
@@ -66,6 +67,7 @@ describe('css-variable-theme', () => {
       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)')
+      expect(cssVariableTheme.typography.textShadow).toBe('var(--shades-theme-typography-text-shadow, none)')
     })
 
     it('should have transition properties with CSS variable references', () => {
@@ -122,6 +124,37 @@ describe('css-variable-theme', () => {
     })
   })
 
+  describe('removeCssVariable', () => {
+    let testElement: HTMLElement
+
+    beforeEach(() => {
+      testElement = document.createElement('div')
+      document.body.appendChild(testElement)
+    })
+
+    afterEach(() => {
+      testElement.remove()
+    })
+
+    it('should remove a CSS variable from element', () => {
+      testElement.style.setProperty('--test-color', 'red')
+      expect(testElement.style.getPropertyValue('--test-color')).toBe('red')
+
+      removeCssVariable('--test-color', testElement)
+      expect(testElement.style.getPropertyValue('--test-color')).toBe('')
+    })
+
+    it('should handle var() wrapper in key name', () => {
+      testElement.style.setProperty('--test-padding', '10px')
+      removeCssVariable('var(--test-padding)', testElement)
+      expect(testElement.style.getPropertyValue('--test-padding')).toBe('')
+    })
+
+    it('should not throw when removing a non-existent variable', () => {
+      expect(() => removeCssVariable('--non-existent', testElement)).not.toThrow()
+    })
+  })
+
   describe('getCssVariable', () => {
     let testElement: HTMLElement
 
@@ -263,6 +296,81 @@ describe('css-variable-theme', () => {
       expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#bbb')
     })
 
+    it('should remove stale CSS variables not present in the new theme', () => {
+      useThemeCssVariables({
+        text: {
+          primary: '#fff',
+          secondary: '#ccc',
+          disabled: '#999',
+        },
+        background: {
+          default: '#000',
+          paper: '#111',
+          paperImage: 'url(texture.png)',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#fff')
+      expect(root.style.getPropertyValue('--shades-theme-text-secondary')).toBe('#ccc')
+      expect(root.style.getPropertyValue('--shades-theme-background-paper-image')).toBe('url(texture.png)')
+
+      useThemeCssVariables({
+        text: {
+          primary: '#eee',
+        },
+        background: {
+          default: '#000',
+          paper: '#222',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('#eee')
+      expect(root.style.getPropertyValue('--shades-theme-text-secondary')).toBe('')
+      expect(root.style.getPropertyValue('--shades-theme-text-disabled')).toBe('')
+      expect(root.style.getPropertyValue('--shades-theme-background-default')).toBe('#000')
+      expect(root.style.getPropertyValue('--shades-theme-background-paper')).toBe('#222')
+      expect(root.style.getPropertyValue('--shades-theme-background-paper-image')).toBe('')
+    })
+
+    it('should remove all nested CSS variables when a whole section is omitted', () => {
+      useThemeCssVariables({
+        palette: {
+          primary: {
+            light: '#aaa',
+            lightContrast: '#000',
+            main: '#bbb',
+            mainContrast: '#000',
+            dark: '#ccc',
+            darkContrast: '#fff',
+          },
+        },
+        spacing: {
+          xs: '4px',
+          sm: '8px',
+          md: '16px',
+          lg: '24px',
+          xl: '32px',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('#bbb')
+      expect(root.style.getPropertyValue('--shades-theme-spacing-md')).toBe('16px')
+
+      useThemeCssVariables({
+        spacing: {
+          xs: '2px',
+          sm: '4px',
+          md: '8px',
+          lg: '16px',
+          xl: '24px',
+        },
+      })
+
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('')
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-light')).toBe('')
+      expect(root.style.getPropertyValue('--shades-theme-spacing-md')).toBe('8px')
+    })
+
     it('should set action CSS variables from theme', () => {
       useThemeCssVariables({
         action: {

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

@@ -17,6 +17,7 @@ export const cssVariableTheme = {
   background: {
     default: 'var(--shades-theme-background-default)',
     paper: 'var(--shades-theme-background-paper)',
+    paperImage: 'var(--shades-theme-background-paper-image, none)',
   },
   palette: {
     primary: {
@@ -86,6 +87,7 @@ export const cssVariableTheme = {
       lg: 'var(--shades-theme-shape-border-radius-lg)',
       full: 'var(--shades-theme-shape-border-radius-full)',
     },
+    borderWidth: 'var(--shades-theme-shape-border-width, 0px)',
   },
   shadows: {
     none: 'var(--shades-theme-shadows-none)',
@@ -125,6 +127,7 @@ export const cssVariableTheme = {
       wider: 'var(--shades-theme-typography-letter-spacing-wider)',
       widest: 'var(--shades-theme-typography-letter-spacing-widest)',
     },
+    textShadow: 'var(--shades-theme-typography-text-shadow, none)',
   },
   transitions: {
     duration: {
@@ -173,12 +176,29 @@ export const cssVariableTheme = {
 export const buildTransition = (...specs: Array<[property: string, duration: string, easing: string]>): string =>
   specs.map(([prop, dur, ease]) => `${prop} ${dur} ${ease}`).join(', ')
 
+const extractVarName = (key: string): string => key.replace(/^var\(/, '').replace(/[,)].*/, '')
+
 export const setCssVariable = (key: string, value: string, root: HTMLElement) => {
-  root.style.setProperty(key.replace('var(', '').replace(')', ''), value)
+  root.style.setProperty(extractVarName(key), value)
+}
+
+export const removeCssVariable = (key: string, root: HTMLElement) => {
+  root.style.removeProperty(extractVarName(key))
 }
 
 export const getCssVariable = (key: string, root: HTMLElement = document.querySelector(':root') as HTMLElement) => {
-  return getComputedStyle(root).getPropertyValue(key.replace('var(', '').replace(')', ''))
+  return getComputedStyle(root).getPropertyValue(extractVarName(key))
+}
+
+const removeValue = <T extends object>(target: T, root: HTMLElement) => {
+  const keys = Object.keys(target) as Array<keyof T>
+  keys.forEach((key) => {
+    if (typeof target[key] === 'object') {
+      removeValue(target[key] as object, root)
+    } else {
+      removeCssVariable(target[key] as string, root)
+    }
+  })
 }
 
 const assignValue = <T extends object>(
@@ -189,11 +209,14 @@ 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)
+    if (typeof target[key] === 'object') {
+      if (source[key] === undefined) {
+        removeValue(target[key] as object, root)
+      } else {
+        assignValue(target[key] as object, source[key] as object, root, assignFn)
+      }
+    } else if (source[key] === undefined) {
+      removeCssVariable(target[key] as string, root)
     } else {
       assignFn(target[key] as string, source[key] as string, root)
     }

package/src/services/get-rgb-from-color-string.spec.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest'
+import { getRgbFromColorString } from './get-rgb-from-color-string.js'
+
+describe('getRgbFromColorString', () => {
+  describe('hex colors', () => {
+    it('should parse 6-digit hex color', () => {
+      const result = getRgbFromColorString('#ff8040')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(128)
+      expect(result.b).toBe(64)
+    })
+
+    it('should parse 6-digit hex color with lowercase', () => {
+      const result = getRgbFromColorString('#3f51b5')
+      expect(result.r).toBe(63)
+      expect(result.g).toBe(81)
+      expect(result.b).toBe(181)
+    })
+
+    it('should parse 6-digit hex color with uppercase', () => {
+      const result = getRgbFromColorString('#FF0000')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(0)
+      expect(result.b).toBe(0)
+    })
+
+    it('should parse 3-digit hex color', () => {
+      const result = getRgbFromColorString('#f80')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(136)
+      expect(result.b).toBe(0)
+    })
+
+    it('should parse 3-digit hex white', () => {
+      const result = getRgbFromColorString('#fff')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(255)
+      expect(result.b).toBe(255)
+    })
+
+    it('should parse 3-digit hex black', () => {
+      const result = getRgbFromColorString('#000')
+      expect(result.r).toBe(0)
+      expect(result.g).toBe(0)
+      expect(result.b).toBe(0)
+    })
+
+    it('should throw error for invalid hex length', () => {
+      expect(() => getRgbFromColorString('#12345')).toThrow()
+    })
+  })
+
+  describe('rgb / rgba', () => {
+    it('should parse rgb color', () => {
+      const result = getRgbFromColorString('rgb(255, 0, 0)')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(0)
+      expect(result.b).toBe(0)
+      expect(result.a).toBe(1)
+    })
+
+    it('should parse rgb color without spaces', () => {
+      const result = getRgbFromColorString('rgb(10,20,30)')
+      expect(result.r).toBe(10)
+      expect(result.g).toBe(20)
+      expect(result.b).toBe(30)
+      expect(result.a).toBe(1)
+    })
+
+    it('should parse rgba color', () => {
+      const result = getRgbFromColorString('rgba(255,128,64,0.5)')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(128)
+      expect(result.b).toBe(64)
+      expect(result.a).toBe(0.5)
+    })
+
+    it('should parse rgba color with spaces', () => {
+      const result = getRgbFromColorString('rgba(100, 150, 200, 1)')
+      expect(result.r).toBe(100)
+      expect(result.g).toBe(150)
+      expect(result.b).toBe(200)
+      expect(result.a).toBe(1)
+    })
+  })
+
+  describe('named colors', () => {
+    it('should parse "red"', () => {
+      const result = getRgbFromColorString('red')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(0)
+      expect(result.b).toBe(0)
+    })
+
+    it('should parse "black"', () => {
+      const result = getRgbFromColorString('black')
+      expect(result.r).toBe(0)
+      expect(result.g).toBe(0)
+      expect(result.b).toBe(0)
+    })
+
+    it('should parse "white"', () => {
+      const result = getRgbFromColorString('white')
+      expect(result.r).toBe(255)
+      expect(result.g).toBe(255)
+      expect(result.b).toBe(255)
+    })
+
+    it('should parse named colors case-insensitively', () => {
+      const result = getRgbFromColorString('DodgerBlue')
+      expect(result.r).toBe(30)
+      expect(result.g).toBe(144)
+      expect(result.b).toBe(255)
+    })
+  })
+
+  describe('unsupported formats', () => {
+    it('should throw error for unsupported color format', () => {
+      expect(() => getRgbFromColorString('not-a-color')).toThrow("Color format 'not-a-color' is not supported.")
+    })
+  })
+})