@furystack/shades-common-components 10.0.35 → 11.0.0

package/src/components/button.tsx

@@ -1,218 +1,183 @@
 import type { PartialElement } from '@furystack/shades'
-import { Shade, attachProps, createComponent } from '@furystack/shades'
-import type { Palette, Theme } from '../services/theme-provider-service.js'
-import { ThemeProviderService } from '../services/theme-provider-service.js'
-import { promisifyAnimation } from '../utils/promisify-animation.js'
+import { Shade, createComponent } from '@furystack/shades'
+import type { Palette } from '../services/theme-provider-service.js'
+import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export type ButtonProps = PartialElement<HTMLButtonElement> & {
   variant?: 'contained' | 'outlined'
   color?: keyof Palette
 }
 
-const getBackground = (buttonProps: ButtonProps, theme: Theme) =>
-  buttonProps.variant === 'contained'
-    ? buttonProps.color
-      ? buttonProps.disabled
-        ? theme.palette[buttonProps.color].dark
-        : theme.palette[buttonProps.color].main
-      : buttonProps.disabled
-        ? theme.button.disabledBackground
-        : theme.text.primary
-    : 'rgba(0,0,0,0)'
-
-const getHoveredBackground = (buttonProps: ButtonProps, theme: Theme, fallback: () => string) =>
-  buttonProps.variant === 'contained'
-    ? buttonProps.color
-      ? theme.palette[buttonProps.color].dark
-      : buttonProps.disabled
-        ? theme.button.disabledBackground
-        : theme.text.secondary
-    : fallback()
-
-const getBoxShadow = (buttonProps: ButtonProps, theme: Theme) =>
-  buttonProps.variant === 'outlined'
-    ? buttonProps.color
-      ? `0px 0px 0px 1px ${
-          buttonProps.disabled ? theme.palette[buttonProps.color].dark : theme.palette[buttonProps.color].main
-        }`
-      : `0px 0px 0px 1px ${buttonProps.disabled ? theme.button.disabledBackground : theme.text.secondary}`
-    : 'none'
-
-const getHoveredBoxShadow = (buttonProps: ButtonProps, theme: Theme) =>
-  buttonProps.variant === 'outlined'
-    ? buttonProps.color
-      ? `0px 0px 0px 1px ${
-          buttonProps.disabled ? theme.button.disabledBackground : theme.palette[buttonProps.color].light
-        }`
-      : `0px 0px 0px 1px ${buttonProps.disabled ? theme.button.disabledBackground : theme.text.primary}`
-    : 'none'
-
-const getTextColor = (buttonProps: ButtonProps, theme: Theme, fallback: () => string) =>
-  buttonProps.variant !== 'contained'
-    ? buttonProps.color
-      ? buttonProps.disabled
-        ? theme.palette[buttonProps.color].dark
-        : theme.palette[buttonProps.color].main
-      : theme.text.secondary
-    : fallback()
-
-const getHoveredTextColor = (buttonProps: ButtonProps, theme: Theme, fallback: () => string) =>
-  buttonProps.variant !== 'contained'
-    ? buttonProps.color
-      ? buttonProps.disabled
-        ? theme.palette[buttonProps.color].dark
-        : theme.palette[buttonProps.color].light
-      : theme.text.primary
-    : fallback()
+// Color mappings for each palette color
+const colorMap: Record<
+  keyof Palette,
+  { main: string; mainContrast: string; light: string; dark: string; darkContrast: string }
+> = {
+  primary: {
+    main: cssVariableTheme.palette.primary.main,
+    mainContrast: cssVariableTheme.palette.primary.mainContrast,
+    light: cssVariableTheme.palette.primary.light,
+    dark: cssVariableTheme.palette.primary.dark,
+    darkContrast: cssVariableTheme.palette.primary.darkContrast,
+  },
+  secondary: {
+    main: cssVariableTheme.palette.secondary.main,
+    mainContrast: cssVariableTheme.palette.secondary.mainContrast,
+    light: cssVariableTheme.palette.secondary.light,
+    dark: cssVariableTheme.palette.secondary.dark,
+    darkContrast: cssVariableTheme.palette.secondary.darkContrast,
+  },
+  error: {
+    main: cssVariableTheme.palette.error.main,
+    mainContrast: cssVariableTheme.palette.error.mainContrast,
+    light: cssVariableTheme.palette.error.light,
+    dark: cssVariableTheme.palette.error.dark,
+    darkContrast: cssVariableTheme.palette.error.darkContrast,
+  },
+  warning: {
+    main: cssVariableTheme.palette.warning.main,
+    mainContrast: cssVariableTheme.palette.warning.mainContrast,
+    light: cssVariableTheme.palette.warning.light,
+    dark: cssVariableTheme.palette.warning.dark,
+    darkContrast: cssVariableTheme.palette.warning.darkContrast,
+  },
+  success: {
+    main: cssVariableTheme.palette.success.main,
+    mainContrast: cssVariableTheme.palette.success.mainContrast,
+    light: cssVariableTheme.palette.success.light,
+    dark: cssVariableTheme.palette.success.dark,
+    darkContrast: cssVariableTheme.palette.success.darkContrast,
+  },
+  info: {
+    main: cssVariableTheme.palette.info.main,
+    mainContrast: cssVariableTheme.palette.info.mainContrast,
+    light: cssVariableTheme.palette.info.light,
+    dark: cssVariableTheme.palette.info.dark,
+    darkContrast: cssVariableTheme.palette.info.darkContrast,
+  },
+}
+
+// Default colors when no color prop is specified
+const defaultColors = {
+  main: cssVariableTheme.text.secondary,
+  mainContrast: cssVariableTheme.background.default,
+  light: cssVariableTheme.text.primary,
+  dark: cssVariableTheme.button.disabledBackground,
+  darkContrast: cssVariableTheme.text.primary,
+}
 
 export const Button = Shade<ButtonProps>({
   shadowDomName: 'shade-button',
   elementBase: HTMLButtonElement,
   elementBaseName: 'button',
-  constructed: ({ element }) => {
-    /**
-     * @param this The Document instance
-     * @param ev The Mouse event
-     */
-    function mouseUp(this: Document, ev: MouseEvent) {
-      if (ev.target === element) {
-        void promisifyAnimation(
-          element,
-          [
-            {
-              transform: 'scale(1)',
-            },
-          ],
-          { duration: 150, fill: 'forwards', easing: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)' },
-        )
-      }
-    }
+  css: {
+    // Base styles (layout, typography)
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: '8px',
+    padding: '8px 20px',
+    border: 'none',
+    borderRadius: '6px',
+    textTransform: 'uppercase',
+    fontSize: '14px',
+    fontWeight: '500',
+    letterSpacing: '0.5px',
+    lineHeight: '1.75',
+    minWidth: '64px',
+    userSelect: 'none',
+    cursor: 'pointer',
+    boxShadow: 'none',
+    background: 'transparent',
+    transition:
+      'background 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.230, 1.000, 0.320, 1.000), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
 
-    document.addEventListener('mouseup', mouseUp)
+    // Common states
+    '&:active:not(:disabled)': {
+      transform: 'scale(0.96)',
+    },
 
-    return () => {
-      document.removeEventListener('mouseup', mouseUp)
-    }
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: '0.6',
+    },
+
+    // ==========================================
+    // FLAT VARIANT (default - no data-variant)
+    // Uses CSS custom properties set in render
+    // ==========================================
+
+    color: 'var(--btn-color-main)',
+
+    '&:not([data-variant]):hover:not(:disabled)': {
+      color: 'var(--btn-color-light)',
+      background: 'color-mix(in srgb, var(--btn-color-main) 10%, transparent)',
+    },
+
+    '&:not([data-variant]):disabled': {
+      color: 'var(--btn-color-dark)',
+    },
+
+    // ==========================================
+    // CONTAINED VARIANT
+    // ==========================================
+
+    '&[data-variant="contained"]': {
+      background: 'var(--btn-color-main)',
+      color: 'var(--btn-color-main-contrast)',
+    },
+
+    '&[data-variant="contained"]:hover:not(:disabled)': {
+      background: 'var(--btn-color-dark)',
+      color: 'var(--btn-color-dark-contrast)',
+    },
+
+    '&[data-variant="contained"]:disabled': {
+      background: 'var(--btn-color-dark)',
+      color: 'var(--btn-color-dark-contrast)',
+    },
+
+    // ==========================================
+    // OUTLINED VARIANT
+    // ==========================================
+
+    '&[data-variant="outlined"]': {
+      color: 'var(--btn-color-main)',
+      boxShadow: '0px 0px 0px 1px var(--btn-color-main)',
+      backdropFilter: 'blur(35px)',
+    },
+
+    '&[data-variant="outlined"]:hover:not(:disabled)': {
+      color: 'var(--btn-color-light)',
+      boxShadow: '0px 0px 0px 1px var(--btn-color-light)',
+      background: 'color-mix(in srgb, var(--btn-color-main) 10%, transparent)',
+    },
+
+    '&[data-variant="outlined"]:disabled': {
+      color: 'var(--btn-color-dark)',
+      boxShadow: '0px 0px 0px 1px var(--btn-color-dark)',
+    },
   },
-  render: ({ props, children, injector, element, useDisposable }) => {
-    const mouseDownHandler = props.onmousedown
-    const mouseUpHandler = props.onmouseup
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    const { theme } = themeProvider
-    const background = getBackground(props, theme)
-
-    if (props.variant === 'contained') {
-      useDisposable('themeChanged', () =>
-        themeProvider.subscribe('themeChanged', () => {
-          const el = element
-          el.style.color = getTextColor(props, themeProvider.theme, () =>
-            themeProvider.getTextColor(el.style.background || el.style.backgroundColor),
-          )
-        }),
-      )
+  render: ({ props, children, element }) => {
+    // Set data attributes for CSS styling
+    if (props.variant) {
+      element.setAttribute('data-variant', props.variant)
+    } else {
+      element.removeAttribute('data-variant')
     }
 
-    const hoveredBackground = getHoveredBackground(props, theme, () => {
-      const { r, g, b } = themeProvider.getRgbFromColorString(
-        (props.color && theme.palette[props.color].main) || theme.text.primary,
-      )
-      return `rgba(${r}, ${g}, ${b}, 0.1)`
-    })
-    const boxShadow = getBoxShadow(props, theme)
-    const hoveredBoxShadow = getHoveredBoxShadow(props, theme)
-    const getTextColorInner = () => getTextColor(props, theme, () => themeProvider.getTextColor(background))
-    const getHoveredTextColorInner = () =>
-      getHoveredTextColor(props, theme, () => themeProvider.getTextColor(background))
-
-    const tryAnimate = async (
-      keyframes: PropertyIndexedKeyframes | Keyframe[] | null,
-      options?: number | KeyframeAnimationOptions,
-    ) => {
-      const el = element
-      if (element) {
-        void promisifyAnimation(el, keyframes, options)
-      }
-    }
+    // Set CSS custom properties for the button colors
+    const colors = props.color ? colorMap[props.color] : defaultColors
+    element.style.setProperty('--btn-color-main', colors.main)
+    element.style.setProperty('--btn-color-main-contrast', colors.mainContrast)
+    element.style.setProperty('--btn-color-light', colors.light)
+    element.style.setProperty('--btn-color-dark', colors.dark)
+    element.style.setProperty('--btn-color-dark-contrast', colors.darkContrast)
 
-    attachProps(element, {
-      ...props,
-      onmousedown(this: HTMLElement, ev: MouseEvent) {
-        mouseDownHandler?.call(this, ev)
-        if (!props.disabled) {
-          void tryAnimate(
-            [
-              {
-                transform: 'scale(0.96)',
-              },
-            ],
-            { duration: 100, fill: 'forwards', easing: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)' },
-          )
-        }
-      },
-      onmouseup(this: HTMLElement, ev: MouseEvent) {
-        mouseUpHandler?.call(this, ev)
-      },
-      onmouseenter: () => {
-        if (!props.disabled) {
-          void tryAnimate(
-            [
-              {
-                background,
-                boxShadow,
-                color: getTextColorInner(),
-              },
-              {
-                background: hoveredBackground,
-                boxShadow: hoveredBoxShadow,
-                color: getHoveredTextColorInner(),
-              },
-            ],
-            { duration: 200, fill: 'forwards', easing: 'cubic-bezier(0.4, 0, 0.2, 1)' },
-          )
-        }
-      },
-      onmouseleave: () => {
-        if (!props.disabled) {
-          void tryAnimate(
-            [
-              { background: hoveredBackground, boxShadow: hoveredBoxShadow, color: getHoveredTextColorInner() },
-              { background, boxShadow, color: getTextColorInner() },
-            ],
-            {
-              duration: 200,
-              fill: 'forwards',
-              easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-            },
-          )
-        }
-      },
-      ...props,
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: props.disabled ? 'not-allowed' : 'pointer',
-        background,
-        boxShadow,
-        margin: '8px',
-        padding: '8px 20px',
-        border: 'none',
-        borderRadius: '6px',
-        textTransform: 'uppercase',
-        color: getTextColorInner(),
-        fontSize: '14px',
-        fontWeight: '500',
-        letterSpacing: '0.5px',
-        lineHeight: '1.75',
-        minWidth: '64px',
-        backdropFilter: props.variant === 'outlined' ? 'blur(35px)' : undefined,
-        userSelect: 'none',
-        opacity: props.disabled ? '0.6' : '1',
-        transition: 'opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-        WebkitTapHighlightColor: 'transparent',
-        ...props.style,
-      },
-    })
+    // Apply any custom styles from props
+    if (props.style) {
+      Object.assign(element.style, props.style)
+    }
 
     return <>{children}</>
   },