update button stylings

src/views/components/common/Button/Button.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
-import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
 import type IconComponent from '~icons/material-symbols';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
 import Text from '../Text/Text';
 
 interface Props {
@@ -40,21 +40,17 @@ export function Button({
             style={
                 {
                     ...style,
-                    '--color': colorHex,
-                    '--bg-color-8': `rgba(${colorRgb} / 0.08)`,
-                    '--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
-                    '--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
+                    color: colorHex,
+                    backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
                 } as React.CSSProperties
             }
             className={clsx(
                 'btn',
                 {
-                    'disabled:(cursor-not-allowed opacity-50)': disabled,
-                    'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow':
+                    'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
-                    'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid':
-                        variant === 'outline',
-                    'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single"
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single"
                     'px-2 py-1.25': isIconOnly && variant !== 'outline',
                     'px-1.75 py-1.25': isIconOnly && variant === 'outline',
                     'px-3.75': variant === 'outline' && !isIconOnly,
@@ -65,7 +61,7 @@ export function Button({
             disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {icon && <Icon className='size-6' />}
+            {icon && <Icon className='h-6 w-6' />}
             {!isIconOnly && (
                 <Text variant='h4' className='translate-y-0.08'>
                     {children}