fix(button): adjust button background height calculation for improved styling consistency

Author: TheOrcDev

components/ui/8bit/button.tsx

@@ -70,8 +70,8 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
               <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
-              <div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
-              <div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring" />
               {variant !== "outline" && (
                 <>
                   {/* Top shadow */}
@@ -112,8 +112,8 @@ function Button({ children, asChild, ...props }: BitButtonProps) {
               <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
               <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
-              <div className="absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
-              <div className="absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring" />
+              <div className="absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring" />
               {variant !== "outline" && (
                 <>
                   {/* Top shadow */}

public/r/button.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/8bit/button.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-2/3 w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button as ShadcnButton } from \"@/components/ui/button\";\n\nimport \"./styles/retro.css\";\n\nexport const buttonVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n    variant: {\n      default: \"bg-foreground\",\n      destructive: \"bg-foreground\",\n      outline: \"bg-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface BitButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction Button({ children, asChild, ...props }: BitButtonProps) {\n  const { variant, size, className, font } = props;\n\n  return (\n    <ShadcnButton\n      {...props}\n      className={cn(\n        \"rounded-none active:translate-y-1 transition-transform relative inline-flex items-center justify-center gap-1.5\",\n        font !== \"normal\" && \"retro\",\n        className\n      )}\n      size={size}\n      variant={variant}\n      asChild={asChild}\n    >\n      {asChild ? (\n        <span className=\"relative inline-flex items-center justify-center gap-1.5\">\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </span>\n      ) : (\n        <>\n          {children}\n\n          {variant !== \"ghost\" && variant !== \"link\" && size !== \"icon\" && (\n            <>\n              {/* Pixelated border */}\n              <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -left-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring\" />\n              <div className=\"absolute top-1.5 -right-1.5 h-[calc(100%-12px)] w-1.5 bg-foreground dark:bg-ring\" />\n              {variant !== \"outline\" && (\n                <>\n                  {/* Top shadow */}\n                  <div className=\"absolute top-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute top-1.5 left-0 w-3 h-1.5 bg-foreground/20\" />\n\n                  {/* Bottom shadow */}\n                  <div className=\"absolute bottom-0 left-0 w-full h-1.5 bg-foreground/20\" />\n                  <div className=\"absolute bottom-1.5 right-0 w-3 h-1.5 bg-foreground/20\" />\n                </>\n              )}\n            </>\n          )}\n\n          {size === \"icon\" && (\n            <>\n              <div className=\"absolute top-0 left-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-0 w-full h-[5px] md:h-1.5 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -left-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute top-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n              <div className=\"absolute bottom-1 -right-1 w-[5px] md:w-1.5 h-1/2 bg-foreground dark:bg-ring pointer-events-none\" />\n            </>\n          )}\n        </>\n      )}\n    </ShadcnButton>\n  );\n}\n\nexport { Button };\n",
       "type": "registry:component",
       "target": "components/ui/8bit/button.tsx"
     },