feat: add some styles and fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.9.0",
+  "version": "0.9.1-beta.5",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/Button/Button.stories.tsx

@@ -11,7 +11,10 @@ const meta: Meta<ButtonProps> = {
   decorators: [
     MatrixDecorator<ButtonProps>({
       first: { key: "size", values: ["md", "lg"] },
-      second: { key: "variant", values: ["primary", "secondary"] },
+      second: {
+        key: "variant",
+        values: ["primary", "secondary", "transparent"],
+      },
     }),
   ],
   component: Button,

src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ export interface ButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;
   className?: string;
-  variant?: "primary" | "secondary" | "wallet";
+  variant?: "primary" | "secondary" | "wallet" | "transparent";
   size?: "md" | "lg";
   rounded?: "full" | "default";
   iconLeft?: React.ReactNode;
@@ -72,6 +72,8 @@ export const Button: React.FC<ButtonProps> = ({
                 lg: "ink:pr-1",
               })
           ),
+          transparent:
+            "ink:bg-transparent ink:text-text-default ink:hover:bg-background-light-transparent ink:disabled:bg-transparent ink:disabled:text-muted",
         }),
         className
       )}

src/components/Card/Content/CardInfo.tsx

@@ -20,7 +20,7 @@ export const CardInfo = ({
     <Card variant="secondary" className={className}>
       <div
         className={classNames(
-          "ink:flex ink:flex-col ink:justify-start ink:gap-3 ink:box-border",
+          "ink:flex ink:flex-col ink:justify-start ink:gap-3 ink:box-border ink:flex-1",
           className
         )}
       >

src/components/Card/Content/Link.tsx

@@ -30,7 +30,7 @@ export const Link = ({
       description={description}
     >
       {linkIcon && (
-        <div className="ink:absolute ink:top-3 ink:right-3 ink:text-(--ink-card-default-color)">
+        <div className="ink:absolute ink:top-3 ink:right-3 ink:text-(--ink-card-muted-color)">
           {linkIcon}
         </div>
       )}

src/components/Tag/Tag.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { classNames } from "../../util/classes";
 
 const tagVariants = cva(
-  "ink:inline-flex ink:font-default ink:items-center ink:gap-1 ink:flex-shrink-0 ink:rounded-full ink:text-body-3-bold ink:font-bold ink:leading-[18px]",
+  "ink:inline-flex ink:font-default ink:items-center ink:gap-1 ink:flex-shrink-0 ink:rounded-full ink:text-body-3-bold ink:font-bold ink:box-border",
   {
     variants: {
       variant: {
@@ -13,7 +13,7 @@ const tagVariants = cva(
         filter:
           "ink:text-text-muted ink:hover:text-text-default ink:duration-200 ink:cursor-pointer ink:h-5 ink:px-1.5",
         featured:
-          "ink:bg-background-container ink:text-text-on-secondary ink:text-caption-2-bold ink:h-2 ink:px-1",
+          "ink:bg-background-container ink:text-text-on-secondary ink:text-caption-2-bold ink:h-3 ink:px-1 ink:rounded-xs",
         event:
           "ink:bg-button-secondary ink:backdrop-blur-lg ink:text-text-on-primary ink:text-caption-3-bold ink:h-5 ink:px-2",
       },

src/layout/InkLayout/InkLayout.tsx

@@ -41,12 +41,12 @@ const InkLayoutContent = ({
           className
         )}
       >
-        <div className="ink:w-full ink:grid ink:grid-cols-[1fr_auto_1fr] ink:justify-between ink:items-center ink:gap-3 ink:px-3 ink:sm:px-5 ink:pt-4 ink:box-border ink:sticky ink:top-0 ink:z-10">
+        <div className="ink:w-full ink:grid ink:grid-cols-[1fr_auto_1fr] ink:justify-between ink:items-center ink:gap-3 ink:px-3 ink:sm:px-5 ink:py-2 ink:box-border ink:sticky ink:top-0 ink:z-20 ink:backdrop-blur-lg ink:lg:backdrop-blur-none">
           <div className="ink:flex ink:gap-1 ink:justify-start ink:items-center">
             <div className="ink:hidden ink:lg:block ink:size-5">{mainIcon}</div>
             {mobileNavigation && (
               <Button
-                variant="wallet"
+                variant="transparent"
                 size="md"
                 rounded="full"
                 className="ink:lg:hidden"
@@ -104,9 +104,9 @@ const InkLayoutContent = ({
         <div
           style={
             {
-              /** 40px components height + 32px top spacing + 32px spacing between header and content */
+              /** 40px components height + 16px top spacing + 16px spacing between header and content */
               "--ink-mobile-nav-height":
-                "calc(var(--ink-spacing-5) + var(--ink-spacing-4) + var(--ink-spacing-4))",
+                "calc(var(--ink-spacing-5) + var(--ink-spacing-2) + var(--ink-spacing-2))",
             } as React.CSSProperties
           }
           className={classNames(

src/layout/InkLayout/InkLayoutSideNav.tsx

@@ -13,8 +13,8 @@ export const InkLayoutSideNav: React.FC<InkLayoutSideNavProps> = ({
   return (
     <nav className="ink:h-full ink:flex ink:flex-col ink:font-default ink:text-text-default ink:text-body-3-bold ink:pb-4 ink:gap-4 ink:box-border">
       <div className="ink:flex-1 ink:flex ink:flex-col">
-        {links.map((link) => {
-          return <InkNavLink {...link} key={link.href} />;
+        {links.map((link, i) => {
+          return <InkNavLink {...link} key={link.href} active={i === 0} />;
         })}
       </div>
       <div className="ink:flex-1 ink:flex ink:flex-col ink:justify-end">

src/layout/InkLayout/InkNavLink.tsx

@@ -5,10 +5,11 @@ import { Slot, Slottable } from "../../components/Slot";
 export interface InkLayoutLink extends React.ComponentPropsWithoutRef<"a"> {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLElement>;
-  href: string;
+  href?: string;
   icon?: React.ReactNode;
   target?: StringWithAutocomplete<"_blank" | "_self">;
   asChild?: boolean;
+  active?: boolean;
 }
 
 export interface InkNavLinkProps extends InkLayoutLink {}
@@ -20,6 +21,7 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
   className = "",
   asChild,
   onClick,
+  active,
   ...props
 }) => {
   const Component = asChild ? Slot : "a";
@@ -28,7 +30,10 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
     <Component
       href={href}
       className={classNames(
-        "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:transition-colors ink:transition-default-animation ink:hover:bg-background-container ink:box-border",
+        "ink:flex ink:items-center ink:gap-1 ink:px-1.5 ink:py-1 ink:text-inherit ink:no-underline ink:rounded-md ink:box-border ink:hover:text-text-default",
+        active
+          ? "ink:bg-background-container ink:text-text-default"
+          : "ink:text-text-muted",
         className
       )}
       draggable={false}
@@ -38,7 +43,7 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
       <Slottable child={children}>
         {(child) => (
           <>
-            {icon && <div className="ink:size-3">{icon}</div>}
+            {icon && <div className="ink:size-3 ink:p-0.5">{icon}</div>}
             {child}
           </>
         )}