feat: update pretty much all components according to new designs

src/components/Button/Button.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<ButtonProps> = {
   title: "Components/Button",
   decorators: [
     MatrixDecorator<ButtonProps>({
-      first: { key: "size", values: ["sm", "md", "lg"] },
+      first: { key: "size", values: ["md", "lg"] },
       second: { key: "variant", values: ["primary", "secondary"] },
     }),
   ],
@@ -77,7 +77,6 @@ export const WalletVariant: Story = {
   decorators: [
     (Story, { args }) => (
       <div className="ink:flex ink:flex-col ink:items-center ink:justify-center ink:gap-2">
-        <Story args={{ ...args, size: "sm" }} />
         <Story args={{ ...args, size: "md" }} />
         <Story args={{ ...args, size: "lg" }} />
       </div>

src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ export interface ButtonProps
   asChild?: boolean;
   className?: string;
   variant?: "primary" | "secondary" | "wallet";
-  size?: "sm" | "md" | "lg";
+  size?: "md" | "lg";
   rounded?: "full" | "default";
   iconLeft?: React.ReactNode;
   iconRight?: React.ReactNode;
@@ -19,7 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
   className,
   children,
   variant = "primary",
-  size = "sm",
+  size = "md",
   rounded = "default",
   iconLeft,
   iconRight,
@@ -32,8 +32,7 @@ export const Button: React.FC<ButtonProps> = ({
       classNames(
         "ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
         variantClassNames(size, {
-          sm: "ink:size-4",
-          md: "ink:size-5",
+          md: "ink:size-4",
           lg: "ink:size-6",
         })
       )
@@ -44,14 +43,12 @@ export const Button: React.FC<ButtonProps> = ({
         "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border ink:backdrop-blur-xl",
         "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
         variantClassNames(size, {
-          sm: "ink:px-2 ink:py-1.5 ink:text-body-2-bold ink:h-5",
-          md: "ink:px-3 ink:py-2 ink:text-body-2-bold ink:h-6",
-          lg: "ink:px-4 ink:py-3 ink:text-h4 ink:h-8",
+          md: "ink:px-2 ink:py-1.5 ink:text-body-3-bold ink:h-5",
+          lg: "ink:px-4 ink:py-3 ink:text-h5 ink:h-8",
         }),
         variantClassNames(rounded, {
           full: `ink:rounded-full ${variantClassNames(size, {
-            sm: "ink:p-1 ink:size-5",
-            md: "ink:p-1.5 ink:size-6",
+            md: "ink:p-1 ink:size-5",
             lg: "ink:p-2 ink:size-8",
           })}`,
           default: "",
@@ -66,13 +63,11 @@ export const Button: React.FC<ButtonProps> = ({
             "ink:border-background-container ink:border",
             iconLeft &&
               variantClassNames(size, {
-                sm: "ink:pl-0.5",
                 md: "ink:pl-0.5",
                 lg: "ink:pl-1",
               }),
             iconRight &&
               variantClassNames(size, {
-                sm: "ink:pr-0.5",
                 md: "ink:pr-0.5",
                 lg: "ink:pr-1",
               })

src/components/FieldLabel/FieldLabel.tsx

@@ -15,13 +15,13 @@ export const FieldLabel: React.FC<FieldLabelProps> = ({
     <Field className="ink:flex ink:flex-col ink:font-default ink:group">
       <div className="ink:flex ink:items-center ink:gap-1">
         {children}
-        <Label className="ink:cursor-pointer ink:h-3 ink:flex ink:items-center ink:justify-center ink:text-body-2 ink:text-text-default">
+        <Label className="ink:cursor-pointer ink:h-3 ink:flex ink:items-center ink:justify-center ink:text-body-2-bold ink:text-text-default">
           {label}
         </Label>
       </div>
 
       {description && (
-        <Description className="ink:text-caption-2-regular ink:text-text-default">
+        <Description className="ink:text-body-3-regular ink:text-text-default">
           {description}
         </Description>
       )}

src/components/Input/Input.tsx

@@ -16,15 +16,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <label
         className={classNames(
           "ink:w-full ink:flex ink:items-center ink:justify-center ink:gap-1 ink:box-border ink:group",
-          "ink:p-2 ink:h-6",
-          "ink:font-default ink:rounded-xs ink:bg-background-container ink:text-body-2-regular ink:text-text-default",
+          "ink:p-2 ink:h-5",
+          "ink:font-default ink:rounded-xs ink:bg-background-container ink:text-body-3-regular ink:text-text-default",
           "ink:border-1 ink:border-transparent ink:focus-within:border-text-on-secondary ink:transition-colors ink:transition-default-animation",
           className
         )}
       >
         {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
         <input
-          className="ink:w-full ink:outline-none ink:box-border ink:-my-1 ink:placeholder:font-default ink:placeholder:text-body-2-regular ink:placeholder:text-text-muted"
+          className="ink:w-full ink:outline-none ink:box-border ink:-my-1 ink:placeholder:font-default ink:placeholder:text-body-3-regular ink:placeholder:text-text-muted"
           ref={ref}
           {...props}
         />

src/components/ListItem/ListItem.tsx

@@ -28,8 +28,8 @@ export const ListItem: React.FC<ListItemProps> = ({
       disabled={disabled}
       className={classNames(
         "ink:group ink:font-default ink:text-body-2-bold ink:cursor-pointer ink:box-border ink:no-underline",
-        "ink:bg-background-light-invisible ink:px-1.5 ink:py-2 ink:rounded-md ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-container ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-container/80 ink:data-active:bg-background-container/80",
-        "ink:w-full ink:flex ink:items-center ink:justify-start ink:gap-1.5 ink:h-6",
+        "ink:bg-background-light-invisible ink:px-1.5 ink:py-2 ink:rounded-md ink:text-body-3-bold ink:text-text-default ink:hover:bg-background-container ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-container/80 ink:data-active:bg-background-container/80",
+        "ink:w-full ink:flex ink:items-center ink:justify-start ink:gap-1.5 ink:h-5",
         variantClassNames(variant, {
           default: "",
           secondary:

src/components/Listbox/ListboxButton.tsx

@@ -14,7 +14,7 @@ export const ListboxButton = forwardRef<HTMLButtonElement, ListboxButtonProps>(
       <HeadlessListboxButton
         className={classNames(
           className,
-          "ink:focus-visible:outline-none ink:data-active:border-text-on-secondary"
+          "ink:focus-visible:outline-none ink:data-active:border-text-on-secondary ink:rounded-full ink:text-body-3-bold ink:text-text-muted ink:hover:text-text-default"
         )}
         ref={ref}
         as={ListItem}

src/components/Listbox/ListboxOptions.tsx

@@ -16,7 +16,7 @@ export const ListboxOptions = ({
       className={classNames("ink:absolute ink:z-10 ink:box-border", className)}
       anchor="bottom end"
     >
-      <Panel className="ink:max-h-[300px]">{children}</Panel>
+      <Panel className="ink:max-h-[300px] ink:gap-px">{children}</Panel>
     </HeadlessListboxOptions>
   );
 };

src/components/SegmentedControl/SegmentedControl.tsx

@@ -63,7 +63,7 @@ export const SegmentedControl = <TOptionValue extends string>({
     <div className="ink:relative ink:font-default ink:h-fit">
       <div
         className={classNames(
-          "ink:grid ink:h-6 ink:grid-flow-col ink:text-body-2-bold ink:rounded-md ink:p-0.5 ink:box-border ink:backdrop-blur-xl",
+          "ink:grid ink:h-5 ink:grid-flow-col ink:text-body-3-bold ink:rounded-md ink:p-0.5 ink:box-border ink:backdrop-blur-xl",
           variantClassNames(displayOn, {
             light: "ink:bg-background-container",
             dark: "ink:bg-background-light",
@@ -85,7 +85,7 @@ export const SegmentedControl = <TOptionValue extends string>({
                       default: "ink:text-text-default",
                       primary: "ink:text-text-on-primary",
                     })
-                  : "ink:text-text-on-secondary",
+                  : "ink:text-text-muted ink:hover:text-text-default",
                 variableTabWidth ? "ink:px-3" : "ink:px-4"
               )}
               ref={(el) => {

src/components/Tag/Tag.stories.tsx

@@ -1,9 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Tag, type TagProps } from "./Tag";
-import { useState } from "react";
 import { InkIcon } from "../..";
+import { MatrixDecorator } from "../../decorators/MatrixDecorator";
 
 const meta: Meta<TagProps> = {
+  decorators: [
+    MatrixDecorator<TagProps>({
+      first: {
+        key: "variant",
+        values: ["fill", "outline", "filter", "featured"],
+      },
+      second: { key: "selected", values: [false, true] },
+    }),
+  ],
   title: "Components/Tag",
   component: Tag,
   tags: ["autodocs"],
@@ -15,60 +24,12 @@ const meta: Meta<TagProps> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Fill: Story = {
-  args: {
-    variant: "fill",
-    children: "Fill Tag",
-  },
+export const Default: Story = {
+  args: {},
 };
 
-export const Outline: Story = {
+export const WithIcon: Story = {
   args: {
-    variant: "outline",
-    children: "Outline Tag",
-  },
-};
-
-export const Filter: Story = {
-  render: () => {
-    const [selected, setSelected] = useState(false);
-    return (
-      <Tag
-        variant="filter"
-        selected={selected}
-        onClick={() => setSelected((prev) => !prev)}
-      >
-        Tag
-      </Tag>
-    );
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => {
-    const [selected, setSelected] = useState(false);
-    return (
-      <div className="ink:flex ink:flex-col ink:gap-4">
-        <div className="ink:flex ink:items-center ink:gap-4">
-          <Tag variant="fill" icon={<InkIcon.InkLogo />}>
-            Tag
-          </Tag>
-          <Tag variant="outline" icon={<InkIcon.Settings />}>
-            Tag
-          </Tag>
-        </div>
-        <div className="ink:flex ink:items-center ink:gap-4">
-          <Tag variant="fill">Fill</Tag>
-          <Tag variant="outline">Outline</Tag>
-          <Tag
-            variant="filter"
-            selected={selected}
-            onClick={() => setSelected((prev) => !prev)}
-          >
-            Selectable Tag
-          </Tag>
-        </div>
-      </div>
-    );
+    icon: <InkIcon.InkLogo />,
   },
 };

src/components/Tag/Tag.tsx

@@ -3,23 +3,25 @@ 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:px-1.5",
+  "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]",
   {
     variants: {
       variant: {
-        fill: "ink:bg-background-container ink:text-text-muted",
+        fill: "ink:bg-background-container ink:text-text-muted ink:h-4 ink:px-1.5",
         outline:
-          "ink:text-text-muted ink:border-background-container ink:border-[1.5px]",
+          "ink:text-text-muted ink:border-background-container ink:border-[1.5px] ink:h-4 ink:px-1.5",
         filter:
-          "ink:text-text-muted ink:hover:text-text-default ink:duration-200 ink:cursor-pointer",
+          "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",
       },
       selected: {
         true: "",
         false: "",
       },
       hasIcon: {
-        true: "ink:py-1",
-        false: "ink:py-1.5",
+        true: "",
+        false: "",
       },
     },
     compoundVariants: [
@@ -52,7 +54,16 @@ export const Tag = React.forwardRef<HTMLDivElement, TagProps>(
         )}
         {...props}
       >
-        {icon && <div className="ink:size-3">{icon}</div>}
+        {icon && (
+          <div
+            className={classNames(
+              "ink:flex ink:items-center ink:justify-center",
+              variant === "featured" ? "ink:size-1.5" : "ink:size-2"
+            )}
+          >
+            {icon}
+          </div>
+        )}
         {children}
       </div>
     );

src/layout/InkLayout/InkLayout.tsx

@@ -19,7 +19,7 @@ export interface InkLayoutProps extends PropsWithChildren {
 
 export const InkLayout: React.FC<InkLayoutProps> = ({
   className,
-  mainIcon = <InkIcon.Logo.Placeholder className="ink:size-6" />,
+  mainIcon = <InkIcon.Logo.Placeholder className="ink:size-5" />,
   headerContent,
   sideNavigation,
   topNavigation,
@@ -38,7 +38,7 @@ export const InkLayout: React.FC<InkLayoutProps> = ({
         )}
       >
         <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:flex ink:items-center ink:justify-start ink:size-6 ink:gap-2">
+          <div className="ink:flex ink:items-center ink:justify-start ink:size-5 ink:gap-2">
             {mainIcon}
           </div>
           <div className="ink:flex ink:flex-1 ink:justify-center ink:items-center">