@stasho/ds 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",
@@ -41,7 +41,6 @@
     "./slider": "./src/components/slider/slider.tsx",
     "./radio-group": "./src/components/radio-group/radio-group.tsx",
     "./ui/skeleton": "./src/components/ui/skeleton.tsx",
-    "./ui/spinner": "./src/components/ui/spinner.tsx",
     "./multi-select": "./src/components/multi-select/multi-select.tsx",
     "./pagination": "./src/components/pagination/pagination.tsx",
     "./copyable-text": "./src/components/copyable-text/copyable-text.tsx",

package/src/components/alert/alert.tsx

@@ -30,7 +30,7 @@ const VARIANT_BG_CLASS: Record<AlertVariant, string> = {
 
 const alertVariants = cva(
   [
-    "relative overflow-hidden rounded-sm border",
+    "relative overflow-hidden rounded-none border",
     "px-3 py-2",
     "transition-all duration-200",
     "motion-reduce:transition-none",
@@ -38,10 +38,10 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        warning: "border-warning-400",
-        error: "border-error-300",
-        info: "border-primary-300",
-        success: "border-success-400",
+        warning: "border-warning",
+        error: "border-error",
+        info: "border-accent",
+        success: "border-success",
       },
     },
     defaultVariants: {
@@ -51,14 +51,14 @@ const alertVariants = cva(
 );
 
 const labelVariants = cva(
-  "font-heading font-extrabold italic text-xs uppercase leading-normal pb-1",
+  "font-mono uppercase tracking-wider text-[11px] leading-normal pb-1",
   {
     variants: {
       variant: {
-        warning: "text-warning-600 dark:text-warning-300",
-        error: "text-error-600 dark:text-error-300",
-        info: "text-primary-600 dark:text-primary-300",
-        success: "text-success-600 dark:text-success-300",
+        warning: "text-warning-500 dark:text-warning",
+        error: "text-error-500 dark:text-error",
+        info: "text-accent-500 dark:text-accent",
+        success: "text-success-500 dark:text-success",
       },
     },
   },
@@ -67,10 +67,10 @@ const labelVariants = cva(
 const progressVariants = cva("absolute bottom-0 left-0 h-0.5", {
   variants: {
     variant: {
-      warning: "bg-warning-400",
-      error: "bg-error-400",
-      info: "bg-primary-400",
-      success: "bg-success-400",
+      warning: "bg-warning",
+      error: "bg-error",
+      info: "bg-accent",
+      success: "bg-success",
     },
   },
 });

package/src/components/badge/badge.tsx

@@ -5,7 +5,7 @@ import { cn } from "@ac/lib/cn";
 const badgeVariants = cva(
   [
     "inline-flex items-center justify-center gap-1.5",
-    "rounded-md font-heading font-extrabold italic uppercase",
+    "rounded-[2px] font-mono uppercase tracking-wider",
     "whitespace-nowrap select-none",
   ].join(" "),
   {
@@ -30,70 +30,56 @@ const badgeVariants = cva(
       {
         fill: "solid",
         variant: "default",
-        className: "gradient-fill-info text-neutral-950",
+        className: "bg-muted text-foreground",
       },
       {
         fill: "solid",
         variant: "success",
-        className: "gradient-fill-success text-neutral-950",
+        className: "bg-success text-neutral-950",
       },
       {
         fill: "solid",
         variant: "warning",
-        className: "gradient-fill-warning text-neutral-950",
+        className: "bg-warning text-neutral-950",
       },
       {
         fill: "solid",
         variant: "error",
-        className: "gradient-fill-error text-neutral-950",
+        className: "bg-error text-neutral-950",
       },
       {
         fill: "solid",
         variant: "info",
-        className: [
-          "bg-neutral-100 text-neutral-700",
-          "dark:bg-neutral-800 dark:text-neutral-200",
-        ].join(" "),
+        className: "bg-accent text-neutral-950",
       },
       {
         fill: "outline",
         variant: "default",
-        className: [
-          "border-primary-300 bg-primary-100 text-neutral-950",
-          "dark:bg-primary-900/20 dark:text-neutral-200",
-        ].join(" "),
+        className: "bg-transparent border-edge text-foreground/70",
       },
       {
         fill: "outline",
         variant: "success",
-        className: [
-          "border-success-400 bg-success-100 text-neutral-950",
-          "dark:bg-success-900/20 dark:text-neutral-200",
-        ].join(" "),
+        className:
+          "bg-success/15 border-success/40 text-success-500 dark:text-success",
       },
       {
         fill: "outline",
         variant: "warning",
-        className: [
-          "border-warning-400 bg-warning-100 text-neutral-950",
-          "dark:bg-warning-900/20 dark:text-neutral-200",
-        ].join(" "),
+        className:
+          "bg-warning/15 border-warning/40 text-warning-500 dark:text-warning",
       },
       {
         fill: "outline",
         variant: "error",
-        className: [
-          "border-error-400 bg-error-100 text-neutral-950",
-          "dark:bg-error-900/20 dark:text-neutral-200",
-        ].join(" "),
+        className:
+          "bg-error/15 border-error/40 text-error-500 dark:text-error",
       },
       {
         fill: "outline",
         variant: "info",
-        className: [
-          "border-neutral-400 bg-neutral-100/50 text-neutral-700",
-          "dark:border-neutral-600 dark:bg-neutral-800/50 dark:text-neutral-300",
-        ].join(" "),
+        className:
+          "bg-accent/15 border-accent/40 text-accent-500 dark:text-accent",
       },
     ],
     defaultVariants: {

package/src/components/breadcrumb/breadcrumb.tsx

@@ -27,7 +27,7 @@ const BreadcrumbList = forwardRef<
     ref={ref}
     className={cn(
       "flex flex-wrap items-center gap-1",
-      "font-heading font-extrabold italic uppercase text-xs",
+      "font-sans font-medium text-sm",
       className,
     )}
     {...rest}
@@ -67,7 +67,7 @@ const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
         className={cn(
           "text-foreground",
           "transition-colors duration-150",
-          "hover:text-primary-600 dark:hover:text-primary-400",
+          "hover:text-accent-500 dark:hover:text-accent",
           "motion-reduce:transition-none",
           className,
         )}
@@ -92,7 +92,7 @@ const BreadcrumbSeparator = forwardRef<
   <li
     ref={ref}
     aria-hidden="true"
-    className={cn("text-primary opacity-40", className)}
+    className={cn("text-foreground/25", className)}
     {...rest}
   >
     {children ?? "/"}
@@ -110,7 +110,7 @@ const BreadcrumbPage = forwardRef<
   <span
     ref={ref}
     aria-current="page"
-    className={cn("text-neutral opacity-40", className)}
+    className={cn("text-accent-500 dark:text-accent", className)}
     {...rest}
   />
 ));

package/src/components/button/button.tsx

@@ -8,63 +8,112 @@ import {
 } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@ac/lib/cn";
-import { Spinner } from "@ac/components/ui/spinner";
 
 const buttonVariants = cva(
   [
-    "inline-flex items-center justify-center",
-    "font-heading font-bold",
-    "rounded-full border-3 transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2",
-    "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
-    "disabled:pointer-events-none",
+    "inline-flex items-center font-body font-bold leading-none",
+    "rounded-none border-0 text-white",
+    "transition-[background,box-shadow,transform] duration-150 ease-out",
+    "active:translate-y-px",
+    "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    "motion-reduce:transition-none motion-reduce:active:translate-y-0",
   ].join(" "),
   {
     variants: {
       variant: {
         primary: [
-          "gradient-fill-main text-white border-transparent",
-          "disabled:opacity-50",
+          // unified brand-blue chassis (both modes)
+          "bg-[linear-gradient(180deg,var(--color-primary-400)_0%,var(--color-primary-500)_100%)]",
+          "[box-shadow:inset_0_1px_0_rgba(0,225,250,0.55),inset_0_-1px_0_rgba(0,0,0,0.35)]",
+          // hover: chassis static, bevel highlight intensifies, halo appears (color matches chassis-500)
+          "hover:[box-shadow:inset_0_1px_0_rgba(0,225,250,0.7),inset_0_-1px_0_rgba(0,0,0,0.35),0_0_40px_rgba(0,64,255,0.35)]",
+          "dark:hover:[box-shadow:inset_0_1px_0_rgba(0,225,250,0.7),inset_0_-1px_0_rgba(0,0,0,0.35),0_0_40px_rgba(0,64,255,0.75)]",
+          "disabled:bg-muted disabled:bg-none disabled:text-foreground/30",
+          "disabled:[box-shadow:inset_0_0_0_1px_rgba(20,15,40,0.06)]",
         ].join(" "),
         secondary: [
-          "gradient-fill-lime text-neutral-950 border-neutral-950",
-          "disabled:opacity-50",
-        ].join(" "),
-        outline: [
-          "border-gradient-main text-primary-700",
-          "hover:text-primary-800",
-          "active:text-primary-800",
-          "disabled:opacity-50",
-        ].join(" "),
-        text: [
-          "bg-transparent text-primary-600 dark:text-primary-300 border-transparent",
-          "hover:bg-primary-100 hover:text-primary-700",
-          "dark:hover:bg-primary-200/10 dark:hover:text-primary-200",
-          "active:bg-primary-200 active:text-primary-800",
-          "dark:active:bg-primary-700 dark:active:text-primary-100",
-          "disabled:bg-transparent disabled:text-primary-600/50",
-          "dark:disabled:text-primary-300/50",
+          // light (base): raised light chassis, dark text, hairline edge
+          "bg-[linear-gradient(180deg,var(--background)_0%,var(--surface)_100%)] text-foreground",
+          "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(0,0,0,0.12),inset_0_0_0_1px_rgba(20,15,40,0.10)]",
+          // hover: chassis static, dark/neutral halo extends chassis outward
+          "hover:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(0,0,0,0.12),inset_0_0_0_1px_rgba(20,15,40,0.10),0_0_24px_rgba(20,15,40,0.18)]",
+          "disabled:bg-muted disabled:bg-none disabled:text-foreground/30",
+          "disabled:[box-shadow:inset_0_0_0_1px_rgba(20,15,40,0.06)]",
+          // dark (overrides — current shipped behavior)
+          "dark:bg-neutral-900 dark:bg-none dark:text-white",
+          "dark:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
+          // dark hover: chassis static, white halo extends chassis outward
+          "dark:hover:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4),0_0_32px_rgba(255,255,255,0.2)]",
+          "dark:disabled:bg-neutral-900 dark:disabled:text-white/30",
+          "dark:disabled:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.03),inset_0_-1px_0_rgba(0,0,0,0.3)]",
         ].join(" "),
         destructive: [
-          "bg-error-600/20 text-error-700 dark:text-error-300 border-error-600",
-          "hover:bg-error-600/30 hover:border-error-700",
-          "active:bg-error-600/40 active:border-error-800",
-          "disabled:bg-error-600/10 disabled:text-error-700/50 disabled:border-error-600/50",
+          "bg-error text-error-foreground",
+          "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.3),inset_0_-1px_0_rgba(0,0,0,0.25),0_0_24px_rgba(255,61,0,0.5)]",
+          "hover:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.4),inset_0_-1px_0_rgba(0,0,0,0.25),0_0_40px_rgba(255,61,0,0.75)]",
+          // light (base): flat muted chassis when disabled
+          "disabled:bg-muted disabled:text-foreground/30",
+          "disabled:[box-shadow:inset_0_0_0_1px_rgba(20,15,40,0.06)]",
+          // dark (overrides — current shipped behavior)
+          "dark:disabled:bg-neutral-900 dark:disabled:text-white/30",
+          "dark:disabled:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.03),inset_0_-1px_0_rgba(0,0,0,0.3)]",
         ].join(" "),
         warning: [
-          "bg-warning-500/20 text-warning-800 dark:text-warning-200 border-warning-500",
-          "hover:bg-warning-500/30 hover:border-warning-600",
-          "active:bg-warning-500/40 active:border-warning-700",
-          "disabled:bg-warning-500/10 disabled:text-warning-800/50 disabled:border-warning-500/50",
+          "bg-warning text-warning-foreground",
+          "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_0_rgba(0,0,0,0.15),0_0_24px_rgba(255,197,61,0.5)]",
+          "hover:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.15),0_0_40px_rgba(255,197,61,0.75)]",
+          // light (base): flat muted chassis when disabled
+          "disabled:bg-muted disabled:text-foreground/30",
+          "disabled:[box-shadow:inset_0_0_0_1px_rgba(20,15,40,0.06)]",
+          // dark (overrides — current shipped behavior)
+          "dark:disabled:bg-neutral-900 dark:disabled:text-white/30",
+          "dark:disabled:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.03),inset_0_-1px_0_rgba(0,0,0,0.3)]",
+        ].join(" "),
+        success: [
+          "bg-success text-success-foreground",
+          "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.4),inset_0_-1px_0_rgba(0,0,0,0.2),0_0_24px_rgba(43,213,142,0.5)]",
+          "hover:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_0_rgba(0,0,0,0.2),0_0_40px_rgba(43,213,142,0.75)]",
+          // light (base): flat muted chassis when disabled
+          "disabled:bg-muted disabled:text-foreground/30",
+          "disabled:[box-shadow:inset_0_0_0_1px_rgba(20,15,40,0.06)]",
+          // dark (overrides — current shipped behavior)
+          "dark:disabled:bg-neutral-900 dark:disabled:text-white/30",
+          "dark:disabled:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.03),inset_0_-1px_0_rgba(0,0,0,0.3)]",
+        ].join(" "),
+        outline: [
+          // light (base): primary-blue text + border, flat chassis when disabled
+          "bg-transparent text-primary border border-[rgba(0,64,255,0.55)]",
+          "hover:border-primary",
+          "disabled:text-foreground/30 disabled:border-[rgba(20,15,40,0.15)] disabled:bg-muted",
+          // dark (overrides — current shipped behavior preserved)
+          "dark:text-accent dark:border-[rgba(0,225,250,0.4)]",
+          "dark:hover:border-accent",
+          "dark:disabled:text-white/30 dark:disabled:border-white/10 dark:disabled:bg-transparent",
+        ].join(" "),
+        ghost: [
+          // light (base): foreground text, surface hover
+          "bg-transparent text-foreground/75 font-semibold",
+          "hover:bg-surface hover:text-foreground",
+          "disabled:text-foreground/30 disabled:bg-transparent",
+          // dark (overrides — current shipped behavior)
+          "dark:text-white/75",
+          "dark:hover:bg-white/[0.04] dark:hover:text-white",
+          "dark:disabled:text-white/30 dark:disabled:bg-transparent",
         ].join(" "),
       },
       size: {
-        xs: "py-1 px-4 text-sm gap-1",
-        sm: "py-1.5 px-5 text-base gap-1.5",
-        md: "py-2 px-6 text-base gap-2",
-        lg: "py-2.5 px-8 text-lg gap-2",
+        xs: "py-[6px] px-3 text-[11px] gap-1.5",
+        sm: "py-[7px] px-3.5 text-xs gap-[7px]",
+        md: "py-[9px] px-[18px] text-[13px] gap-2",
       },
     },
+    compoundVariants: [
+      // Outline subtracts 1px from each padding axis to compensate for its 1px border.
+      { variant: "outline", size: "xs", class: "py-[5px] px-[11px]" },
+      { variant: "outline", size: "sm", class: "py-[6px] px-[13px]" },
+      { variant: "outline", size: "md", class: "py-[8px] px-[17px]" },
+    ],
     defaultVariants: {
       variant: "primary",
       size: "md",
@@ -72,12 +121,45 @@ const buttonVariants = cva(
   },
 );
 
-const iconSize = {
-  xs: "size-3.5",
-  sm: "size-4",
-  md: "size-4",
-  lg: "size-5",
-} as const;
+type Variant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+type Size = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+
+// LED dimensions per size. text-* sets the LED's currentColor.
+const ledSizeClass: Record<Size, string> = {
+  xs: "size-1",
+  sm: "size-[5px]",
+  md: "size-1.5",
+};
+
+// Icon dimensions per size (used for both iconLeft wrapper and iconRight wrapper).
+const iconSizeClass: Record<Size, string> = {
+  xs: "size-[11px]",
+  sm: "size-3",
+  md: "size-[13px]",
+};
+
+// LED color + static glow per variant.
+const ledColorClass: Record<Variant, string> = {
+  primary: "bg-accent text-accent [box-shadow:0_0_8px_currentColor]",
+  secondary: "bg-accent text-accent [box-shadow:0_0_8px_currentColor]",
+  destructive: "bg-white text-white [box-shadow:0_0_8px_currentColor]",
+  warning: "bg-warning-foreground text-warning-foreground",
+  success: "bg-success-foreground text-success-foreground",
+  outline: "bg-primary/35 text-primary dark:bg-accent/50 dark:text-accent",
+  // ghost: LED is never rendered for ghost, so this entry is a sentinel.
+  ghost: "",
+};
+
+// iconLeft glow treatment per variant — applied to the wrapper span.
+const iconGlowClass: Record<Variant, string> = {
+  primary: "text-accent [filter:drop-shadow(0_0_4px_var(--accent))]",
+  secondary: "text-accent [filter:drop-shadow(0_0_4px_var(--accent))]",
+  destructive: "text-white",
+  warning: "text-warning-foreground",
+  success: "text-success-foreground",
+  outline: "text-primary dark:text-accent [filter:drop-shadow(0_0_4px_currentColor)]",
+  ghost: "text-foreground/60 dark:text-white/60",
+};
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants> & {
@@ -103,25 +185,91 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    const sizeKey = size ?? "md";
+    const v: Variant = variant ?? "primary";
+    const s: Size = size ?? "md";
+
     const classes = cn(
-      buttonVariants({ variant, size }),
-      loading && "pointer-events-none",
+      buttonVariants({ variant: v, size: s }),
+      loading && "pointer-events-none cursor-wait",
       className,
     );
 
-    const iconClass = cn("shrink-0", iconSize[sizeKey], "[&>svg]:size-full");
+    const leadingSlot = (() => {
+      // Loading replaces everything in the leading slot (except on ghost).
+      if (loading && v !== "ghost") {
+        return (
+          <span
+            data-led-chase
+            aria-hidden="true"
+            className="inline-flex shrink-0 gap-[3px]"
+          >
+            <span
+              className={cn(
+                "inline-block rounded-full",
+                ledSizeClass[s],
+                ledColorClass[v],
+                "animate-button-chase-a",
+              )}
+            />
+            <span
+              className={cn(
+                "inline-block rounded-full",
+                ledSizeClass[s],
+                ledColorClass[v],
+                "animate-button-chase-b",
+              )}
+            />
+          </span>
+        );
+      }
+      // Resting state with iconLeft.
+      if (iconLeft) {
+        return (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "inline-flex items-center justify-center shrink-0",
+              iconSizeClass[s],
+              iconGlowClass[v],
+            )}
+          >
+            {iconLeft}
+          </span>
+        );
+      }
+      // Resting state with static LED (non-ghost variants).
+      if (v !== "ghost") {
+        return (
+          <span
+            data-led
+            aria-hidden="true"
+            className={cn(
+              "inline-block rounded-full shrink-0",
+              ledSizeClass[s],
+              ledColorClass[v],
+            )}
+          />
+        );
+      }
+      return null;
+    })();
 
     const content = (
       <>
-        {loading ? (
-          <Spinner className={cn("shrink-0", iconSize[sizeKey])} />
-        ) : iconLeft ? (
-          <span className={iconClass}>{iconLeft}</span>
-        ) : null}
-        <span>{children}</span>
+        {leadingSlot}
+        <span className="inline-flex items-center leading-none">
+          {children}
+        </span>
         {!loading && iconRight ? (
-          <span className={iconClass}>{iconRight}</span>
+          <span
+            aria-hidden="true"
+            className={cn(
+              "inline-flex items-center justify-center shrink-0",
+              iconSizeClass[s],
+            )}
+          >
+            {iconRight}
+          </span>
         ) : null}
       </>
     );

package/src/components/card/card.tsx

@@ -2,11 +2,10 @@ import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@ac/lib/cn";
 
-const cardVariants = cva("rounded-md", {
+const cardVariants = cva("rounded-lg", {
   variants: {
     variant: {
-      default: "bg-surface text-surface-foreground",
-      noise: "fx-grain-lg text-surface-foreground",
+      default: "bg-surface text-surface-foreground border border-edge",
       ghost: "bg-transparent",
     },
     padding: {

package/src/components/checkbox/checkbox.tsx

@@ -1,26 +1,34 @@
 import { forwardRef, type ComponentPropsWithoutRef } from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { Check } from "@phosphor-icons/react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@ac/lib/cn";
 
 const checkboxVariants = cva(
   [
-    "peer shrink-0 bg-surface",
-    "border-3 border-edge",
+    "peer shrink-0",
+    "bg-background dark:bg-surface",
+    "border border-edge",
     "hover:border-edge-hover",
-    "focus-visible:outline-none focus-visible:ring-3",
-    "focus-visible:ring-primary-500",
-    "disabled:opacity-50 disabled:pointer-events-none",
-    "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
-    "data-[state=checked]:text-primary-foreground",
+    "focus-visible:outline-none",
+    "focus-visible:border-accent-700 dark:focus-visible:border-accent",
+    "disabled:bg-muted dark:disabled:bg-background",
+    "disabled:border-edge/50",
+    "disabled:text-foreground/30",
+    "disabled:cursor-not-allowed",
+    "disabled:data-[state=checked]:text-foreground/30",
+    "disabled:data-[state=checked]:bg-muted dark:disabled:data-[state=checked]:bg-background",
+    "disabled:data-[state=checked]:border-edge/50",
+    "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+    "data-[state=checked]:text-neutral-950",
     "transition-colors",
   ].join(" "),
   {
     variants: {
       size: {
-        xs: "size-4 rounded",
-        sm: "size-5 rounded-md",
-        md: "size-6 rounded-md",
+        xs: "size-3.5 rounded-none",
+        sm: "size-4 rounded-none",
+        md: "size-5 rounded-none",
       },
     },
     defaultVariants: {
@@ -44,7 +52,8 @@ const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         ref={ref}
         className={cn(
           checkboxVariants({ size }),
-          error && "border-3 border-error-400 hover:border-error-500",
+          error &&
+            "border-error data-[state=checked]:border-error hover:border-error focus-visible:border-error dark:focus-visible:border-error",
           className,
         )}
         aria-invalid={error || undefined}
@@ -59,18 +68,7 @@ const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
             "transition-[clip-path] duration-200 ease-in-out motion-reduce:transition-none",
           )}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth={3}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="size-[90%]"
-          >
-            <polyline points="20 6 9 17 4 12" />
-          </svg>
+          <Check weight="bold" className="size-[80%]" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
     );