@noya-app/noya-designsystem 0.1.38 → 0.1.40

package/tailwind.config.ts

@@ -74,6 +74,7 @@ const config = {
         "chip-secondary-shadow": "var(--chip-secondary-shadow)",
         "chip-error-shadow": "var(--chip-error-shadow)",
         "chip-default-shadow": "var(--chip-default-shadow)",
+        "floating-button": "var(--floating-button)",
       },
       fontFamily: {
         sans: [
@@ -95,79 +96,79 @@ const config = {
       // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
       fontSize: {
         title: [
-          "3.052rem",
+          "3.052rem", // 48.83px
           {
             lineHeight: "1.4",
             letterSpacing: "-0.05em",
           },
         ],
         subtitle: [
-          "1.563rem",
+          "1.563rem", // 25px
           {
             lineHeight: "1.75",
             letterSpacing: "-0.05em",
           },
         ],
         heading1: [
-          "1.953rem",
+          "1.953rem", // 31.25px
           {
             lineHeight: "1.6",
             letterSpacing: "-0.025em",
           },
         ],
         heading2: [
-          "1.563rem",
+          "1.563rem", // 25px
           {
             lineHeight: "1.5",
             letterSpacing: "-0.025em",
           },
         ],
         heading3: [
-          "1.25rem",
+          "1.25rem", // 20px
           {
             lineHeight: "1.4",
             letterSpacing: "-0.025em",
           },
         ],
         heading4: [
-          "1rem",
+          "1rem", // 16px
           {
             lineHeight: "1.4",
           },
         ],
         heading5: [
-          "0.85rem",
+          "0.85rem", // 13.6px
           {
             lineHeight: "1.4",
           },
         ],
         body: [
-          "1",
+          "1", // 16px (1 = 1rem)
           {
             lineHeight: "1.4",
           },
         ],
         small: [
-          "1",
+          "1", // 16px (1 = 1rem)
           {
             lineHeight: "19px",
           },
         ],
         code: [
-          "90%",
+          "90%", // 14.4px
           {
             lineHeight: "1.5",
           },
         ],
         button: [
-          "0.8rem",
+          "0.8rem", // 12.8px
           {
             lineHeight: "1.4",
             letterSpacing: "-0.2px",
           },
         ],
         label: [
-          "0.62rem",
+          "0.62rem", // 9.92px
           {
             lineHeight: "19px",
             letterSpacing: "-0.3px",
@@ -211,7 +212,8 @@ const config = {
       zIndex: {
         interactable: "var(--interactable-z-index)",
         label: "var(--label-z-index)",
-      }
+        menu: "var(--menu-z-index)",
+      },
     },
   },
   safelist: [
@@ -231,6 +233,7 @@ const config = {
     "border-gray-200",
     "gap-1.5",
     "gap-toolbar-separator",
+    "-mr-1",
   ],
 } satisfies Config;
 

package/src/hooks/useDarkMode.ts

@@ -1,14 +0,0 @@
-import { useState, useEffect } from "react"
-
-export function useDarkMode(elementRef: React.RefObject<HTMLElement>) {
-  const [isDark, setIsDark] = useState(false)
-
-  useEffect(() => {
-    if (!elementRef.current) return;
-    
-    const hasDarkTheme = elementRef.current.closest('[data-theme="dark"]') !== null
-    setIsDark(hasDarkTheme)
-  }, [elementRef])
-
-  return { isDark, elementRef }
-}

package/src/utils/tailwind.ts

@@ -1,9 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-/**
- * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
- * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
- * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
- */
-export const cn = (...classes: (string | boolean | undefined | null)[]) =>
-  twMerge(classes.filter(Boolean) as string[]);