Remove ugly borders on filled elements

Author: Rikthepixel

Diff for: src/components/controls/Button.tsx

@@ -7,11 +7,11 @@ import { RequiredKeys } from "@/types/utility";
 import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
 import fadeAnim from "@/animations/fade";
 
-export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-2xl border-2", {
+export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-2xl", {
   variants: {
     color: {
-      white: "bg-neutral-200 hover:bg-neutral-50 border-neutral-400 text-neutral-900",
-      primary: "bg-cr-primary hover:bg-cr-primary-light border-cr-primary-light hover:border-cr-primary text-cr-primary-contrast"
+      white: "bg-neutral-200 hover:bg-neutral-50 text-neutral-900",
+      primary: "bg-cr-primary hover:bg-cr-primary-light bord text-cr-primary-contrast"
     }
 }
 });

Diff for: src/components/layout/Footer.tsx

@@ -5,7 +5,7 @@ import Logo from "@/assets/images/brand/logo-200x200.webp";
 const Footer = () => {
   return (
     <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-cr-primary-contrast">
-      <footer className="flex flex-col w-full gap-4 p-8 border-2 border-b-0 max-w-7xl rounded-t-2xl bg-cr-primary image-dots from-cr-primary-light border-cr-primary-light">
+      <footer className="flex flex-col w-full gap-4 p-8 max-w-7xl rounded-t-2xl bg-cr-primary image-dots from-cr-primary-light">
         <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
           <div className="flex items-center gap-2">
             <img

Diff for: src/components/layout/Header.tsx

@@ -23,7 +23,7 @@ const Header = () => {
   });
 
   return (
-    <header className="relative flex items-center w-full gap-4 p-4 transition-all border-b-2 md:px-8 md:gap-12 border-cr-primary-light/10">
+    <header className="relative flex items-center w-full gap-4 p-4 transition-all md:px-8 md:gap-12 border-cr-primary-light/10">
       <Link color="primary" className="flex items-center justify-center text-2xl font-bold transition-all lg:text-4xl" href="/">
         <img
           className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12"

Diff for: src/components/pages/blog/ArticleBrief.tsx

@@ -74,7 +74,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
               <LinkButton
                 href={makeTagUrl(name)}
                 color="primary"
-                className="px-2 py-1 text-xs font-semibold border"
+                className="px-2 py-1 text-xs font-semibold"
                 prefetch={false}
               >
                 {name}

Diff for: src/pages/index.tsx

@@ -78,7 +78,7 @@ const FrontPage: Page = ({ pathname }) => {
             />
           </div>
         </section>
-        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-2xl xl:flex-row text-cr-primary-contrast image-dots from-cr-primary-light border-cr-primary-light bg-cr-primary">
+        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center rounded-2xl xl:flex-row text-cr-primary-contrast image-dots from-cr-primary-light bg-cr-primary">
           <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
             <span className="text-2xl">
               Introducing...