feat: version 0.7.3

package.json

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

src/components/Card/Card.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<CardProps> = {
             Button
           </Button>
         }
-        variant="default"
       />
     ),
     image: (
@@ -109,6 +108,13 @@ export const ImageWithMainAndSecondaryLabels: Story = {
   },
 };
 
+/** This variant has a color independent of the theme. */
+export const PurpleLightVariant: Story = {
+  args: {
+    variant: "light-purple",
+  },
+};
+
 /** For a Tagline card, use `CardContent.Tagline` and no image. */
 export const WithTagline: Story = {
   args: {
@@ -142,7 +148,7 @@ export const Link: Story = {
     children: (
       <a href="#something" target="_self" className="ink:no-underline">
         <CardContent.Link
-          icon={<InkIcon.InkLogo />}
+          icon={<InkIcon.Logo.Ink />}
           title="Join the Ink Revolution!"
           description="Did you know that Ink's design system is like a chameleon for your UI? Just like these color-changing lizards adapt to their environment, Ink components seamlessly blend into any design while maintaining their unique personality. Just fabulous, adaptable UI!"
         />

src/components/Card/Card.tsx

@@ -13,7 +13,7 @@ export interface CardProps extends VariantProps<typeof cardVariants> {
 
 const cardVariants = cva(
   `
-ink:rounded-md lg:ink:rounded-lg
+ink:rounded-xl
 ink:grid ink:grid-cols-1
 ink:p-2 ink:pb-3 ink:sm:p-3 ink:gap-3
 ink:relative 
@@ -69,6 +69,18 @@ export const Card: React.FC<CardProps> = ({
         }),
         className
       )}
+      style={
+        {
+          "--ink-card-default-color":
+            variant === "light-purple"
+              ? "var(--ink-background-light)"
+              : "var(--ink-text-default)",
+          "--ink-card-muted-color":
+            variant === "light-purple"
+              ? "var(--ink-background-light)"
+              : "var(--ink-text-muted)",
+        } as React.CSSProperties
+      }
     >
       <Slottable child={children}>
         {(child) => (

src/components/Card/Content/CallToAction.tsx

@@ -5,27 +5,17 @@ interface CallToActionProps {
   title: React.ReactNode;
   description: React.ReactNode;
   button: React.ReactNode;
-  variant: "default" | "light";
   className?: string;
 }
 
 export const CallToAction: React.FC<CallToActionProps> = ({
   title,
   description,
   button,
-  variant,
   className,
 }) => {
   return (
-    <div
-      className={classNames(
-        "ink:flex ink:flex-col ink:gap-3",
-        variant === "light"
-          ? "ink:text-background-light"
-          : "ink:text-text-default",
-        className
-      )}
-    >
+    <div className={classNames("ink:flex ink:flex-col ink:gap-3", className)}>
       <TitleAndDescription title={title} description={description} />
       <div className="ink:flex ink:gap-2 ink:box-border">{button}</div>
     </div>

src/components/Card/Content/Image.tsx

@@ -17,7 +17,7 @@ export const Image: React.FC<ImageProps> = ({
   return (
     <div
       className={classNames(
-        "ink:rounded-sm ink:overflow-hidden ink:box-border ink:relative",
+        "ink:rounded-lg ink:overflow-hidden ink:box-border ink:relative",
         className
       )}
     >

src/components/Card/Content/LargeLink.tsx

@@ -27,7 +27,7 @@ export const LargeLink = ({
       href={href}
       target={target}
       className={classNames(
-        "ink:p-3 ink:bg-button-secondary ink:text-text-default ink:text-h5 ink:rounded-lg ink:box-border",
+        "ink:p-3 ink:bg-button-secondary ink:text-(--ink-card-default-color) ink:text-h5 ink:rounded-lg ink:box-border",
         "ink:flex ink:justify-between ink:items-center ink:gap-0.5",
         "ink:min-w-[200px]",
         href && "ink:cursor-pointer ink:hover:bg-button-secondary-hover",

src/components/Card/Content/Link.tsx

@@ -19,12 +19,20 @@ export const Link = ({
   return (
     <Tiny
       className={className}
-      icon={icon ? <div className="ink:size-6">{icon}</div> : undefined}
+      icon={
+        icon ? (
+          <div className="ink:size-6 ink:text-(--ink-card-muted-color)">
+            {icon}
+          </div>
+        ) : undefined
+      }
       title={title}
       description={description}
     >
       {linkIcon && (
-        <div className="ink:absolute ink:top-3 ink:right-3">{linkIcon}</div>
+        <div className="ink:absolute ink:top-3 ink:right-3 ink:text-(--ink-card-default-color)">
+          {linkIcon}
+        </div>
       )}
     </Tiny>
   );

src/components/Card/Content/Tagline.tsx

@@ -14,7 +14,7 @@ export const Tagline: React.FC<TaglineProps> = ({
   return (
     <div
       className={classNames(
-        "ink:flex ink:flex-col ink:gap-4 sm:gap-8 ink:text-text-default ink:px-0 ink:py-6 ink:sm:px-16 ink:sm:py-12 ink:justify-between",
+        "ink:flex ink:flex-col ink:gap-4 sm:gap-8 ink:text-(--ink-card-default-color) ink:px-0 ink:py-6 ink:sm:px-16 ink:sm:py-12 ink:justify-between",
         className
       )}
     >

src/components/Card/Content/TitleAndDescription.tsx

@@ -15,7 +15,7 @@ export const TitleAndDescription = ({
     <div className="ink:flex ink:flex-col ink:gap-2">
       <h3
         className={classNames(
-          "ink:text-body-1-bold ink:text-text-default ink:box-border ink:m-0 ink:-my-px",
+          "ink:text-body-1-bold ink:text-(--ink-card-default-color) ink:box-border ink:m-0 ink:-my-px",
           variantClassNames(size, {
             default: "ink:text-h3",
             small: "ink:text-body-1-regular",
@@ -27,7 +27,7 @@ export const TitleAndDescription = ({
       {description && (
         <p
           className={classNames(
-            "ink:text-body-3-regular ink:text-text-muted ink:box-border ink:m-0",
+            "ink:text-body-3-regular ink:text-(--ink-card-muted-color) ink:box-border ink:m-0",
             variantClassNames(size, {
               default: "ink:text-body-1-regular",
               small: "ink:text-body-3-regular",

src/layout/InkLayout/InkLayout.tsx

@@ -102,9 +102,9 @@ export const InkLayout: React.FC<InkLayoutProps> = ({
         <div
           style={
             {
-              /** 48px components height + 32px top spacing + 32px spacing between header and content */
+              /** 40px components height + 32px top spacing + 32px spacing between header and content */
               "--ink-mobile-nav-height":
-                "calc(var(--ink-spacing-6) + var(--ink-spacing-4) + var(--ink-spacing-4))",
+                "calc(var(--ink-spacing-5) + var(--ink-spacing-4) + var(--ink-spacing-4))",
             } as React.CSSProperties
           }
           className={classNames(

src/layout/InkLayout/InkLayoutSideNav.tsx

@@ -9,7 +9,7 @@ export const InkLayoutSideNav: React.FC<InkLayoutSideNavProps> = ({
   links,
 }) => {
   return (
-    <nav className="ink:h-full ink:flex ink:flex-col ink:gap-1 ink:font-default ink:text-text-default">
+    <nav className="ink:h-full ink:flex ink:flex-col ink:font-default ink:text-text-default ink:text-body-3-bold">
       {links.map((link) => {
         return <InkNavLink {...link} key={link.href} />;
       })}

src/styles/theme/colors.base.css

@@ -91,6 +91,8 @@
 
   /* Radius */
   --ink-base-radius-full: 9999px;
+  --ink-base-radius-xxl: 64px;
+  --ink-base-radius-xl: 48px;
   --ink-base-radius-lg: 24px;
   --ink-base-radius-md: 16px;
   --ink-base-radius-sm: 12px;

src/styles/theme/colors.dark.css

@@ -1,9 +1,9 @@
 :root,
 :root.ink\:dark-theme {
   /* Background */
-  --ink-background-dark: rgb(22, 15, 31);
-  --ink-background-light: rgb(33, 26, 41);
-  --ink-background-container: rgba(255, 255, 255, 0.06);
+  --ink-background-dark: rgba(18, 17, 24);
+  --ink-background-light: rgb(45, 45, 52);
+  --ink-background-container: rgba(187, 180, 255, 0.05);
 
   /* Button */
   --ink-button-primary: rgb(113, 50, 245);
@@ -26,9 +26,9 @@
 @media (prefers-color-scheme: dark) {
   :root {
     /* Background */
-    --ink-background-dark: rgb(22, 15, 31);
-    --ink-background-light: rgb(33, 26, 41);
-    --ink-background-container: rgba(255, 255, 255, 0.06);
+    --ink-background-dark: rgba(18, 17, 24);
+    --ink-background-light: rgb(45, 45, 52);
+    --ink-background-container: rgba(187, 180, 255, 0.05);
 
     /* Button */
     --ink-button-primary: rgb(113, 50, 245);

src/styles/theme/colors.light.css

@@ -1,7 +1,7 @@
 :root,
 :root.ink\:light-theme {
   /* Background */
-  --ink-background-dark: rgb(240, 239, 255);
+  --ink-background-dark: rgba(244, 243, 249);
   --ink-background-light: rgb(255, 255, 255);
   --ink-background-shadow: rgba(22, 15, 31, 1);
 

src/styles/theme/colors.neo.css

@@ -23,6 +23,8 @@
   --ink-status-error: rgba(248, 97, 97);
 
   --ink-base-radius-full: 0px;
+  --ink-base-radius-xxl: 0px;
+  --ink-base-radius-xl: 0px;
   --ink-base-radius-lg: 0px;
   --ink-base-radius-md: 0px;
   --ink-base-radius-sm: 0px;

src/tailwind.css

@@ -73,6 +73,8 @@
   /* Radius */
   --radius-*: initial;
   --radius-full: var(--ink-base-radius-full);
+  --radius-xxl: var(--ink-base-radius-xxl);
+  --radius-xl: var(--ink-base-radius-xl);
   --radius-lg: var(--ink-base-radius-lg);
   --radius-md: var(--ink-base-radius-md);
   --radius-sm: var(--ink-base-radius-sm);