chore: remove-base-styles

Author: tractorss

src/lib/accordion/accordion-item.tsx

@@ -25,9 +25,8 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
     <div className="mt-2 mb-2">
       <button
         className={clsx(
-          "button",
           "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsStroke border",
-          "hover-medium-blue hover-short-transition",
+          "hover-medium-blue hover-short-transition hover:cursor-pointer",
           "rounded-[3px] pt-[11.5px] pr-8 pb-[11.5px] pl-8",
           "flex w-full items-center justify-between",
         )}
@@ -36,11 +35,11 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
         {title}
         {expanded ? (
           <Minus
-            className={clsx("svg fill-klerosUIComponentsPrimaryText h-4 w-4")}
+            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
           />
         ) : (
           <Plus
-            className={clsx("svg fill-klerosUIComponentsPrimaryText h-4 w-4")}
+            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
           />
         )}
       </button>

src/lib/accordion/custom.tsx

@@ -13,7 +13,7 @@ interface AccordionProps {
 const CustomAccordion: React.FC<AccordionProps> = ({ items, ...props }) => {
   const [expanded, setExpanded] = useState(-1);
   return (
-    <div className="border-box flex w-[1000px] flex-col" {...props}>
+    <div className="box-border flex w-[1000px] flex-col" {...props}>
       {items.map((item, index) => (
         <AccordionItem
           key={index}

src/lib/accordion/index.tsx

@@ -19,7 +19,7 @@ const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => (
     {item.icon ?? (item.Icon && <item.Icon />)}
     <p
       className={clsx(
-        "p w-fit",
+        "w-fit",
         "text-klerosUIComponentsPrimaryText text-center font-semibold",
       )}
     >
@@ -35,7 +35,7 @@ const Accordion: React.FC<AccordionProps> = ({
 }) => {
   const [expanded, setExpanded] = useState(defaultExpanded ?? -1);
   return (
-    <div className="border-box flex w-[1000px] flex-col" {...props}>
+    <div className="box-border flex w-[1000px] flex-col" {...props}>
       {items.map((item, index) => (
         <AccordionItem
           key={index}

src/styles/global.css

@@ -67,103 +67,26 @@
 
     --klerosUIComponentsTransitionSpeed: 0.25s;
   }
-}
 
-@layer components {
   /* Typography styles */
-  .h1 {
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 33px;
-    margin: 0;
+  h1 {
     color: var(--klerosUIComponentsPrimaryText);
   }
 
-  .h2 {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 22px;
-    margin: 0;
+  h2 {
     color: var(--klerosUIComponentsPrimaryText);
   }
 
-  .p {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 22px;
-    margin: 0;
-    overflow-wrap: break-word;
+  p {
     color: var(--klerosUIComponentsPrimaryText);
   }
 
-  .small {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 19px;
-    margin: 0;
-    overflow-wrap: break-word;
+  small {
     color: var(--klerosUIComponentsSecondaryText);
   }
+}
 
-  /* Element styles */
-  .hr {
-    opacity: 1;
-  }
-
-  .svg {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .img {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .button {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0;
-    border: none;
-    overflow: visible;
-    text-transform: none;
-    -webkit-appearance: button;
-
-    &:hover:enabled {
-      cursor: pointer;
-    }
-  }
-
-  .input {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0;
-    border: none;
-    overflow: visible;
-  }
-
-  .optgroup {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0;
-    border: none;
-  }
-
-  .select {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0;
-    border: none;
-    text-transform: none;
-  }
-
-  .textarea {
-    font-family: inherit;
-    font-size: 100%;
-    margin: 0;
-    border: none;
-  }
-
+@layer components {
   /* Animations */
   @keyframes fadeIn {
     0% {
@@ -180,13 +103,6 @@
   .fade-in {
     animation: fadeIn 0.3s ease-in-out;
   }
-  /* Box sizing */
-  .border-box,
-  .border-box *,
-  .border-box *:before,
-  .border-box *:after {
-    box-sizing: border-box;
-  }
 
   /* Transitions */
   .hover-short-transition {