fix: product card error and site theme settings

Author: hunterbecton

Diff for: core/lib/makeswift/components/button-link/button-link.makeswift.tsx

@@ -1,10 +1,10 @@
 import { MakeswiftComponentType } from '@makeswift/runtime';
 import { Link, Select, Style, TextInput } from '@makeswift/runtime/controls';
 
-import { ButtonLink, Props } from '@/vibes/soul/primitives/button-link';
+import { ButtonLink, ButtonLinkProps } from '@/vibes/soul/primitives/button-link';
 import { runtime } from '~/lib/makeswift/runtime';
 
-type MSButtonLinkProps = Omit<Props, 'href'> & {
+type MSButtonLinkProps = Omit<ButtonLinkProps, 'href'> & {
   link: { href?: string; target?: string };
   text: string;
 };

Diff for: core/lib/makeswift/components/product-card/product-card.makeswift.tsx

@@ -88,6 +88,5 @@ runtime.registerComponent(MakeswiftProductCard, {
         text: TextInput({ label: 'Badge text', defaultValue: 'New' }),
       },
     }),
-    showCompare: Checkbox({ label: 'Show compare', defaultValue: true }),
   },
 });

Diff for: core/vibes/soul/primitives/button-link/index.tsx

@@ -1,13 +1,13 @@
 import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { Link } from '~/components/link';
 
-export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export interface ButtonLinkProps extends ComponentPropsWithoutRef<typeof Link> {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
   size?: 'large' | 'medium' | 'small' | 'x-small';
   shape?: 'pill' | 'rounded' | 'square' | 'circle';
-  href: string;
-};
+}
 
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -20,19 +20,19 @@ export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
  *   --button-font-family: var(--font-family-body);
  *   --button-primary-background: hsl(var(--primary));
  *   --button-primary-background-hover: color-mix(in oklab, hsl(var(--primary)), white 75%);
- *   --button-primary-foreground: hsl(var(--foreground));
+ *   --button-primary-text: hsl(var(--foreground));
  *   --button-primary-border: hsl(var(--primary));
  *   --button-secondary-background: hsl(var(--foreground));
  *   --button-secondary-background-hover: hsl(var(--background));
- *   --button-secondary-foreground: hsl(var(--background));
+ *   --button-secondary-text: hsl(var(--background));
  *   --button-secondary-border: hsl(var(--foreground));
  *   --button-tertiary-background: hsl(var(--background));
  *   --button-tertiary-background-hover: hsl(var(--contrast-100));
- *   --button-tertiary-foreground: hsl(var(--foreground));
+ *   --button-tertiary-text: hsl(var(--foreground));
  *   --button-tertiary-border: hsl(var(--contrast-200));
  *   --button-ghost-background: transparent;
  *   --button-ghost-background-hover: hsl(var(--foreground) / 5%);
- *   --button-ghost-foreground: hsl(var(--foreground));
+ *   --button-ghost-text: hsl(var(--foreground));
  *   --button-ghost-border: transparent;
  * }
  * ```
@@ -41,25 +41,24 @@ export function ButtonLink({
   variant = 'primary',
   size = 'large',
   shape = 'pill',
-  href,
   className,
   children,
   ...props
-}: Props) {
+}: ButtonLinkProps) {
   return (
     <Link
       {...props}
       className={clsx(
-        'relative z-0 inline-flex h-fit select-none items-center justify-center overflow-hidden border text-center font-[family-name:var(--button-font-family)] font-semibold leading-normal after:absolute after:inset-0 after:-z-10 after:-translate-x-[105%] after:transition-[opacity,transform] after:duration-300 after:[animation-timing-function:cubic-bezier(0,0.25,0,1)] hover:after:translate-x-0 focus-visible:outline-none focus-visible:ring-2',
+        'relative z-0 inline-flex h-fit select-none items-center justify-center overflow-hidden border text-center font-[family-name:var(--button-font-family)] font-semibold leading-normal after:absolute after:inset-0 after:-z-10 after:-translate-x-[105%] after:transition-[opacity,transform] after:duration-300 after:[animation-timing-function:cubic-bezier(0,0.25,0,1)] hover:after:translate-x-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--button-focus,hsl(var(--primary)))] focus-visible:ring-offset-2',
         {
           primary:
-            'border-[var(--button-primary-border,hsl(var(--primary)))] bg-[var(--button-primary-background,hsl(var(--primary)))] text-[var(--button-primary-foreground)] after:bg-[var(--button-primary-background-hover,color-mix(in_oklab,hsl(var(--primary)),white_75%))]',
+            'border-[var(--button-primary-border,hsl(var(--primary)))] bg-[var(--button-primary-background,hsl(var(--primary)))] text-[var(--button-primary-text)] after:bg-[var(--button-primary-background-hover,color-mix(in_oklab,hsl(var(--primary)),white_75%))]',
           secondary:
-            'border-[var(--button-secondary-border,hsl(var(--foreground)))] bg-[var(--button-secondary-background,hsl(var(--foreground)))] text-[var(--button-secondary-foreground,hsl(var(--background)))] after:bg-[var(--button-secondary-background-hover,hsl(var(--background)))]',
+            'border-[var(--button-secondary-border,hsl(var(--foreground)))] bg-[var(--button-secondary-background,hsl(var(--foreground)))] text-[var(--button-secondary-text,hsl(var(--background)))] after:bg-[var(--button-secondary-background-hover,hsl(var(--background)))]',
           tertiary:
-            'border-[var(--button-tertiary-border,hsl(var(--contrast-200)))] bg-[var(--button-tertiary-background,hsl(var(--background)))] text-[var(--button-tertiary-foreground,hsl(var(--foreground)))] after:bg-[var(--button-tertiary-background-hover,hsl(var(--contrast-100)))]',
+            'border-[var(--button-tertiary-border,hsl(var(--contrast-200)))] bg-[var(--button-tertiary-background,hsl(var(--background)))] text-[var(--button-tertiary-text,hsl(var(--foreground)))] after:bg-[var(--button-tertiary-background-hover,hsl(var(--contrast-100)))]',
           ghost:
-            'border-[var(--button-ghost-border,transparent)] bg-[var(--button-ghost-background,transparent)] text-[var(--button-ghost-foreground,hsl(var(--foreground)))] after:bg-[var(--button-ghost-background-hover,hsl(var(--foreground)/5%))]',
+            'border-[var(--button-ghost-border,transparent)] bg-[var(--button-ghost-background,transparent)] text-[var(--button-ghost-text,hsl(var(--foreground)))] after:bg-[var(--button-ghost-background-hover,hsl(var(--foreground)/5%))]',
         }[variant],
         {
           'x-small': 'min-h-8 text-xs',
@@ -82,7 +81,6 @@ export function ButtonLink({
         }[shape],
         className,
       )}
-      href={href}
     >
       <span className={clsx(variant === 'secondary' && 'mix-blend-difference')}>{children}</span>
     </Link>