@stasho/ds 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",

package/src/components/button/button.tsx

@@ -106,6 +106,7 @@ const buttonVariants = cva(
         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",
+        lg: "py-[13px] px-6 text-[15px] gap-2.5",
       },
     },
     compoundVariants: [
@@ -113,6 +114,7 @@ const buttonVariants = cva(
       { 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]" },
+      { variant: "outline", size: "lg", class: "py-[12px] px-[23px]" },
     ],
     defaultVariants: {
       variant: "primary",
@@ -129,6 +131,7 @@ const ledSizeClass: Record<Size, string> = {
   xs: "size-1",
   sm: "size-[5px]",
   md: "size-1.5",
+  lg: "size-2",
 };
 
 // Icon dimensions per size (used for both iconLeft wrapper and iconRight wrapper).
@@ -136,6 +139,7 @@ const iconSizeClass: Record<Size, string> = {
   xs: "size-[11px]",
   sm: "size-3",
   md: "size-[13px]",
+  lg: "size-4",
 };
 
 // LED color + static glow per variant.

package/src/components/switch/switch.tsx

@@ -8,21 +8,22 @@ const switchVariants = cva(
     "peer inline-flex shrink-0 cursor-pointer",
     "items-center rounded-[2px]",
     "border border-edge bg-muted dark:bg-neutral-900",
-    "shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
+    "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.7),inset_0_-1px_0_rgba(0,0,0,0.10)]",
+    "dark:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
     "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
-    "disabled:bg-muted dark:disabled:bg-background",
-    "disabled:border-edge/50 disabled:shadow-none",
+    "disabled:bg-edge dark:disabled:bg-background",
+    "disabled:border-edge-hover dark:disabled:border-edge/50 disabled:[box-shadow:none]",
     "disabled:cursor-not-allowed",
-    "disabled:data-[state=checked]:border-edge/50",
+    "disabled:data-[state=checked]:border-edge-hover dark:disabled:data-[state=checked]:border-edge/50",
     "data-[state=checked]:border-accent/30",
     "transition-colors",
   ].join(" "),
   {
     variants: {
       size: {
-        xs: "h-4 w-7",
-        sm: "h-5 w-9",
-        md: "h-6 w-11",
+        xs: "h-[18px] w-8",
+        sm: "h-[22px] w-10",
+        md: "h-[26px] w-[47px]",
       },
     },
     defaultVariants: {
@@ -45,9 +46,9 @@ const thumbVariants = cva(
   {
     variants: {
       size: {
-        xs: "size-3 data-[state=checked]:translate-x-[12px]",
-        sm: "size-4 data-[state=checked]:translate-x-[16px]",
-        md: "size-5 data-[state=checked]:translate-x-[20px]",
+        xs: "size-3 data-[state=checked]:translate-x-[16px]",
+        sm: "size-4 data-[state=checked]:translate-x-[20px]",
+        md: "size-5 data-[state=checked]:translate-x-[23px]",
       },
     },
     defaultVariants: {

package/src/styles/tokens.css

@@ -178,10 +178,10 @@
 
   --muted: var(--color-base-800);
   --muted-foreground: oklch(0.62 0.012 273);
-  --surface: var(--color-base-900);
+  --surface: oklch(0.18 0.005 273);
   --surface-foreground: #f3f3f3;
-  --edge: rgba(255, 255, 255, 0.08);
-  --edge-hover: rgba(255, 255, 255, 0.14);
+  --edge: rgba(255, 255, 255, 0.16);
+  --edge-hover: rgba(255, 255, 255, 0.24);
   --popover-bg: var(--surface);
   --popover-border: var(--edge);