@4alldigital/foundation-ui--core 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,5 +32,5 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "ef072d94fbdf9e14583d82a818d137a96642fad1"
+  "gitHead": "991b789a0fa6a5b5e000ccc41c90b7af7ecfd06c"
 }

package/src/components/Button/Button.tsx

@@ -29,7 +29,7 @@ const buttonVariants = cva(
         
         // Outline is handled as compound variant
         outline:
-          'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30 border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500',
+          'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-primary/10 border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500',
       },
       size: {
         sm: 'h-8 px-3 py-1 text-xs',

package/src/components/ButtonDeprecated/Button.tsx

@@ -87,7 +87,7 @@ const Button = ({
       { 'text-white border-primary bg-primary hover:bg-primary-darker': variant === BTN_VARIANTS.PRIMARY },
       { 'text-white border-secondary bg-secondary hover:bg-secondary-darker': variant === BTN_VARIANTS.SECONDARY },
       { 'text-black border-tertiary bg-tertiary hover:bg-tertiary-darker': variant === BTN_VARIANTS.TERTIARY },
-      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30': outline },
+      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-primary/10': outline },
       { 'border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500': outline },
       {
         'px-0 text-body-text dark:text-body-text-dark border-transparent bg-transparent hover:bg-transparent shadow-none group-hover:invert':

package/src/components/Card/types/CardBasic/CardBasic.tsx

@@ -53,7 +53,7 @@ const CardBasic = ({
         </div>
       )}
       {titleOverlay && title && (
-        <div className="absolute inset-0 w-full h-full z-10 flex items-center justify-center bg-black bg-opacity-30">
+        <div className="absolute inset-0 w-full h-full z-10 flex items-center justify-center bg-black/30">
           <Heading tag={HEADING_TAGS.H4} singleLine flush className='text-white'>
             {title}
           </Heading>

package/src/components/Card/types/CardMedia/CardMedia.tsx

@@ -42,7 +42,7 @@ const CardMedia = ({
             className={cx('absolute inset-0 object-cover group-hover:scale-110', animateClasses)}
           />
           {accessRestriced && (
-            <div className="absolute top-0 left-0 right-0 bottom-0 bg-body-bg bg-opacity-50 flex items-center justify-center">
+            <div className="absolute top-0 left-0 right-0 bottom-0 bg-body-bg/50 flex items-center justify-center">
               <Copy bold transform={COPY_TRANSFORM.UPPERCASE}>
                 {T.UI.PURCHASE_TO_ACCESS}
               </Copy>

package/src/components/Cart/Cart.tsx

@@ -82,7 +82,7 @@ const Cart = ({ testID, isCheckout }: Props) => {
                           className="w-full p-0"
                           onClick={() => context?.handleItemClick?.(item.uuid)}>
                           <div className="flex gap-2 w-full">
-                            <div className="relative max-w-32 flex flex-1 overflow-hidden rounded h-20">
+                            <div className="relative max-w-32 flex flex-1 overflow-hidden rounded h-12">
                               <Image
                                 src={item.image}
                                 alt="item image"

package/src/components/FullScreenVideoModal/FullScreenVideoModal.tsx

@@ -24,7 +24,7 @@ const FullScreenVideoModal = ({
       isOpen={modalIsOpen}
       onRequestClose={onCloseCallback}
       className="absolute bg-none top-1/2 left-1/2 right-auto bottom-auto mr-[-50%] transform translate-x-[-50%] translate-y-[-50%] w-full h-full p-0"
-      overlayClassName="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-100 z-50"
+      overlayClassName="fixed top-0 left-0 right-0 bottom-0 bg-black z-50"
       ariaHideApp={ariaHideApp} // Only use in development, adjust for production use
       data-testid={testID || 'FullScreenVideoModal'}>
       <div className="h-full relative">

package/src/components/Screen/Screen.tsx

@@ -21,7 +21,7 @@ const Screen = ({
       {showHeader && (
         <Header
           className={cx({
-            'absolute top-0 left-0 right-0 bg-opacity-0 dark:bg-opacity-0 md:bg-opacity-20 md:dark:bg-opacity-20 z-50':
+            'absolute top-0 left-0 right-0 bg-header-bg/0 dark:bg-header-bg-dark/0 md:bg-header-bg/20 md:dark:bg-header-bg-dark/20 z-50':
               fixedHeader,
           })}
         />

package/src/components/SubscriptionManager/SubscriptionManager.tsx

@@ -355,7 +355,7 @@ const SubscriptionManager = ({
         )}
       </div>
       {isLoading && (
-        <div className="absolute top-0 left-0 w-full h-full bg-body-bg bg-opacity-50 flex items-center justify-center">
+        <div className="absolute top-0 left-0 w-full h-full bg-body-bg/50 flex items-center justify-center">
           <Loader />
         </div>
       )}

package/src/features/Search/views/SearchBox/SearchBox.tsx

@@ -17,7 +17,7 @@ function SearchBox({
   return (
     <div className={cx('m-0 md:px-48', className)}>
       <form onSubmit={e => onSubmit(e)} className="flex items-center">
-        <div className="flex-1 bg-body-bg dark:bg-body-bg-dark bg-opacity-80 rounded">
+        <div className="flex-1 bg-body-bg/80 dark:bg-body-bg-dark/80 rounded">
           <TextInput
             name="SearchBoxInput"
             type={InputType.TEXT}