@noya-app/noya-designsystem 0.1.31 → 0.1.33

package/src/hooks/useDarkMode.ts

@@ -0,0 +1,14 @@
+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/index.css

@@ -0,0 +1,108 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --logo-fill: rgb(150, 152, 172);
+  --logo-highlight: rgb(150, 152, 172);
+  --background: rgb(255, 255, 255);
+  --text: rgb(38, 48, 83);
+  --text-muted: rgb(107, 113, 136);
+  --text-subtle: rgb(117, 121, 129);
+  --text-disabled: rgb(150, 152, 172);
+  --text-decorative-light: rgb(168, 185, 212);
+  --divider-subtle: rgba(30, 50, 100, 0.04);
+  --divider: rgba(30, 50, 100, 0.07);
+  --divider-strong: rgba(30, 50, 100, 0.09);
+  --primary: rgb(103, 70, 255);
+  --primary-light: rgb(147, 86, 255);
+  --primary-pastel: rgba(234, 230, 255);
+  --secondary: rgb(0, 151, 117);
+  --secondary-light: rgb(0, 160, 129);
+  --secondary-pastel: rgb(205, 238, 231);
+  --secondary-bright: #0ab557;
+  --input-background: rgb(240, 242, 246);
+  --input-background-light: rgb(243, 245, 249);
+  --code-background: rgb(250, 250, 250);
+  --code-background-dark: #435080;
+  --selected-background: rgb(242, 245, 250);
+  --breadcrumb-text: rgb(107, 113, 136);
+  --breadcrumb-text-hover: rgb(117, 121, 129);
+  --breadcrumb-icon: rgb(129, 131, 165);
+  --canvas-background: rgb(249, 249, 249);
+  --canvas-grid: rgba(0, 0, 0, 0.05);
+  --sidebar-background: rgb(255, 255, 255);
+  --sidebar-background-transparent: rgba(255, 255, 255, 0.85);
+  --popover-background: rgb(252, 252, 252);
+  --popover-divider: transparent;
+  --listview-raised-background: rgba(0, 0, 0, 0.03);
+  --listview-editing-background: #fff;
+  --slider-background: white;
+  --slider-border: #bbb;
+  --radio-group-background: white;
+  --mask: rgb(12, 193, 67);
+  --transparent-checker: rgba(255, 255, 255, 0.8);
+  --scrollbar: rgba(199, 199, 199, 0.8);
+  --placeholder-dots: rgba(0, 0, 0, 0.3);
+  --drag-outline: rgb(103, 70, 255);
+  --active-background: rgba(0, 0, 0, 0.1);
+  --thumbnail-background: #f0efff;
+  --thumbnail-shadow: #d3ceed66;
+  --inline-code-text: rgb(103, 70, 255);
+  --inline-code-background: rgb(240, 242, 246);
+  --text-link: rgb(103, 70, 255);
+  --text-link-focused: rgb(147, 86, 255);
+  --inset-top: 46px;
+  --sidebar-width: 260px;
+  --toolbar-height: 46px;
+  --toolbar-separator: 8px;
+  --inspector-h-separator: 8px;
+  --inspector-v-separator: 10px;
+  --dialog-padding: 16px;
+  --icon: rgb(129, 131, 165);
+  --icon-selected: rgb(220, 220, 220);
+  --warning: rgb(251, 211, 0);
+  --radio-group-item: rgb(139, 139, 139);
+  --dot: rgba(0,0,0,0.25);
+  --row-highlight: #3390FF10;
+  --table-row-background: var(--background)
+}
+
+[data-theme="dark"] {
+  --background: #111111;
+  --logo-fill: rgb(248, 248, 250);
+  --logo-highlight: rgb(248, 248, 250);
+  --text: rgb(248, 248, 250);
+  --text-muted: rgb(180, 179, 182);
+  --text-subtle: rgb(180, 179, 182);
+  --text-disabled: rgb(100, 99, 102);
+  --divider-subtle: rgba(255, 255, 255, 0.04);
+  --divider: rgba(255, 255, 255, 0.08);
+  --divider-strong: rgba(0, 0, 0, 1);
+  --primary: rgb(119, 66, 255);
+  --primary-light: rgb(134, 86, 255);
+  --secondary-bright: #36fe91;
+  --input-background: rgba(181, 178, 255, 0.08);
+  --input-background-light: rgba(181, 178, 255, 0.1);
+  --code-background: rgb(20, 19, 23);
+  --canvas-background: rgb(20, 19, 23);
+  --canvas-grid: rgba(0, 0, 0, 0.1);
+  --sidebar-background: rgb(34, 33, 39);
+  --sidebar-background-transparent: rgba(34, 33, 39, 0.95);
+  --popover-background: rgb(34, 33, 39);
+  --popover-divider: rgba(255, 255, 255, 0.08);
+  --listview-raised-background: rgba(181, 178, 255, 0.1);
+  --listview-editing-background: #000;
+  --slider-background: #bbb;
+  --radio-group-background: rgba(181, 178, 255, 0.08);
+  --mask: rgb(102, 187, 106);
+  --transparent-checker: rgba(255, 255, 255, 0.3);
+  --scrollbar: rgba(199, 199, 199, 0.2);
+  --placeholder-dots: rgba(255, 255, 255, 0.3);
+  --drag-outline: white;
+  --active-background: rgba(181, 178, 255, 0.08);
+  --thumbnail-background: #1f1d33;
+  --thumbnail-shadow: #1f1d3366;
+  --dot: rgba(255,255,255,0.15);
+  --table-row-background: var(--sidebar-background);
+}

package/src/index.tsx

@@ -27,7 +27,6 @@ export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
 export * from "./components/GradientPicker";
-export * from "./components/Grid";
 export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/Icons";
@@ -46,7 +45,6 @@ export * from "./components/Slider";
 export * from "./components/Sortable";
 export type { RelativeDropPosition } from "./components/Sortable";
 export * from "./components/Spacer";
-export * from "./components/Stack";
 export * from "./components/Switch";
 export * from "./components/Text";
 export * from "./components/TextArea";
@@ -71,11 +69,12 @@ export * from "./hooks/useHover";
 export * from "./hooks/usePlatform";
 export * from "./mediaQuery";
 export * from "./theme";
-export * as darkTheme from "./theme/dark";
-export * as lightTheme from "./theme/light";
+export { cn } from './utils/tailwind';
+export type { ThemeColor } from './utils/tailwind';
 export * from "./utils/createSectionedMenu";
 export * from "./utils/getGradientBackground";
 export * from "./hooks/usePreservePanelSize";
+export * from './hooks/useDarkMode';
 // Utils
 export * from "./utils/completions";
 export * from "./utils/fuzzyScorer";

package/src/theme/index.ts

@@ -1,17 +1,5 @@
-import * as lightTheme from './light';
+import tailwindConfig from "../../tailwind.config";
 
-export type Theme = typeof lightTheme;
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends Theme {}
-}
-
-export interface Colors {}
-
-type PickByValue<T, V> = Pick<
-  T,
-  // Remove any value that extends V
-  { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T]
->;
-
-export type ThemeColorName = keyof PickByValue<Theme['colors'], string>;
+// Extract the theme configuration
+// @ts-expect-error TODO: figure this out
+export type Theme = typeof tailwindConfig.theme.extend;

package/src/utils/tailwind.ts

@@ -0,0 +1,17 @@
+import { Theme } from '../theme';
+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[])
+
+// @ts-expect-error TODO: figure this out
+type ThemeExtend = NonNullable<Theme['extend']>
+export type ThemeColor = keyof ThemeExtend['colors'];
+
+export function camelCaseToKebabCase(string: string) {
+  return string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}

package/tailwind.config.ts

@@ -1,167 +1,71 @@
 import { Config } from "tailwindcss";
 
-export default {
+const config: Config = {
   content: ["./src/**/*.{ts,tsx}"],
-  // if you add the dark className anywhere in the DOM tree all descendants will use dark style variables
-  darkMode: "class",
+  corePlugins: {
+    // disables @tailwind base global styles
+    preflight: false,
+  },
   theme: {
     extend: {
-      // colors should alway have a flat structure with the exception of dark/DEFAULT variables
-      // keys should always be kebab-case, since that's the tailwind convention
       colors: {
-        "logo-fill": {
-          DEFAULT: "rgb(150, 152, 172)",
-          dark: "rgb(248, 248, 250)",
-        },
-        "logo-highlight": {
-          DEFAULT: "rgb(150, 152, 172)",
-          dark: "rgb(248, 248, 250)",
-        },
-        background: "rgb(255, 255, 255)",
-        text: {
-          DEFAULT: "rgb(38, 48, 83)",
-          dark: "rgb(248, 248, 250)",
-        },
-        "text-muted": {
-          DEFAULT: "rgb(107, 113, 136)",
-          dark: "rgb(180, 179, 182)",
-        },
-        "text-subtle": {
-          DEFAULT: "rgb(117, 121, 129)",
-          dark: "rgb(180, 179, 182)",
-        },
-        "text-disabled": {
-          DEFAULT: "rgb(150, 152, 172)",
-          dark: "rgb(100, 99, 102)",
-        },
-        "text-decorative": {
-          light: "rgb(168, 185, 212)",
-        },
-        "divider-subtle": {
-          DEFAULT: "rgba(30, 50, 100, 0.04)",
-          dark: "rgba(255, 255, 255, 0.04)",
-        },
-        divider: {
-          DEFAULT: "rgba(30, 50, 100, 0.07)",
-          dark: "rgba(255, 255, 255, 0.08)",
-        },
-        "divider-strong": {
-          DEFAULT: "rgba(30, 50, 100, 0.09)",
-          dark: "rgba(0, 0, 0, 1)",
-        },
-        primary: {
-          DEFAULT: "rgb(103, 70, 255)",
-          dark: "rgb(119, 66, 255)",
-        },
-        "primary-light": {
-          DEFAULT: "rgb(147, 86, 255)",
-          dark: "rgb(134, 86, 255)",
-        },
-        "primary-pastel": "rgba(234, 230, 255)",
-        secondary: "rgb(0, 151, 117)",
-        "secondary-light": "rgb(0, 160, 129)",
-        "secondary-pastel": "rgb(205, 238, 231)",
-        "secondary-bright": {
-          DEFAULT: "#0ab557",
-          dark: "#36fe91",
-        },
-        "input-background": {
-          DEFAULT: "rgb(240, 242, 246)",
-          dark: "rgba(181, 178, 255, 0.08)",
-        },
-        "input-background-light": {
-          DEFAULT: "rgb(243, 245, 249)",
-          dark: "rgba(181, 178, 255, 0.10)",
-        },
-        "code-background": {
-          DEFAULT: "rgb(250, 250, 250)",
-          dark: "rgb(20, 19, 23)",
-        },
-        "code-background-decorative-dark": "#435080",
-        "selected-background": "rgb(242, 245, 250)",
-        "breadcrumb-text": {
-          DEFAULT: "rgb(107, 113, 136)",
-          dark: "rgb(180, 179, 182)",
-        },
-        "breadcrumb-text-hover": "rgb(117, 121, 129)",
-        "breadcrumb-icon": "rgb(129, 131, 165)",
-        "canvas-background": {
-          DEFAULT: "rgb(249, 249, 249)",
-          dark: "rgb(20, 19, 23)",
-        },
-        "canvas-grid": {
-          DEFAULT: "rgba(0, 0, 0, 0.05)",
-          dark: "rgba(0, 0, 0, 0.1)",
-        },
-        "sidebar-background": {
-          DEFAULT: "rgb(255, 255, 255)",
-          dark: "rgb(34, 33, 39)",
-        },
-        "sidebar-background-transparent": {
-          DEFAULT: "rgba(255, 255, 255, 0.85)",
-          dark: "rgba(34, 33, 39, 0.95)",
-        },
-        "popover-background": {
-          DEFAULT: "rgb(252, 252, 252)",
-          dark: "rgb(34, 33, 39)",
-        },
-        "popover-divider": {
-          DEFAULT: "transparent",
-          dark: "rgba(255, 255, 255, 0.08)",
-        },
-        "listview-raised-background": {
-          DEFAULT: "rgba(0, 0, 0, 0.03)",
-          dark: "rgba(181, 178, 255, 0.1)",
-        },
-        "listview-editing-background": {
-          DEFAULT: "#fff",
-          dark: "#000",
-        },
-        "slider-background": {
-          DEFAULT: "white",
-          dark: "#BBB",
-        },
-        "slider-border": "#BBB",
-        "radio-group-background": {
-          DEFAULT: "white",
-          dark: "rgba(181, 178, 255, 0.08)",
-        },
-        mask: {
-          DEFAULT: "rgb(12, 193, 67)",
-          dark: "rgb(102, 187, 106)",
-        },
-        "transparent-checker": {
-          DEFAULT: "rgba(255, 255, 255, 0.8)",
-          dark: "rgba(255, 255, 255, 0.3)",
-        },
-        scrollbar: {
-          DEFAULT: "rgba(199, 199, 199, 0.8)",
-          dark: "rgba(199, 199, 199, 0.2)",
-        },
-        "placeholder-dots": {
-          DEFAULT: "rgba(0, 0, 0, 0.3)",
-          dark: "rgba(255, 255, 255, 0.3)",
-        },
-        "drag-outline": {
-          DEFAULT: "rgb(103, 70, 255)",
-          dark: "white",
-        },
-        "active-background": {
-          DEFAULT: "rgba(0, 0, 0, 0.1)",
-          dark: "rgba(181, 178, 255, 0.08)",
-        },
-        "thumbnail-background": {
-          DEFAULT: "#f0efff",
-          dark: "#1f1d33",
-        },
-        "thumbnail-shadow": {
-          DEFAULT: "#D3CEED66",
-          dark: "#1f1d3366",
-        },
-        "inline-code-text": "rgb(103, 70, 255)",
-        "inline-code-background": "rgb(240, 242, 246)",
-        "text-link": "rgb(103, 70, 255)",
-        "text-link-focused": "rgb(147, 86, 255)",
+        "logo-fill": "var(--logo-fill)",
+        "logo-highlight": "var(--logo-highlight)",
+        background: "var(--background)",
+        text: "var(--text)",
+        "text-muted": "var(--text-muted)",
+        "text-subtle": "var(--text-subtle)",
+        "text-disabled": "var(--text-disabled)",
+        "text-decorative-light": "var(--text-decorative-light)",
+        "divider-subtle": "var(--divider-subtle)",
+        divider: "var(--divider)",
+        "divider-strong": "var(--divider-strong)",
+        primary: "var(--primary)",
+        "primary-light": "var(--primary-light)",
+        "primary-pastel": "var(--primary-pastel)",
+        secondary: "var(--secondary)",
+        "secondary-light": "var(--secondary-light)",
+        "secondary-pastel": "var(--secondary-pastel)",
+        "secondary-bright": "var(--secondary-bright)",
+        "input-background": "var(--input-background)",
+        "input-background-light": "var(--input-background-light)",
+        "code-background": "var(--code-background)",
+        "code-background-dark": "var(--code-background-dark)",
+        "selected-background": "var(--selected-background)",
+        "breadcrumb-text": "var(--breadcrumb-text)",
+        "breadcrumb-text-hover": "var(--breadcrumb-text-hover)",
+        "breadcrumb-icon": "var(--breadcrumb-icon)",
+        "canvas-background": "var(--canvas-background)",
+        "canvas-grid": "var(--canvas-grid)",
+        "sidebar-background": "var(--sidebar-background)",
+        "sidebar-background-transparent":
+          "var(--sidebar-background-transparent)",
+        "popover-background": "var(--popover-background)",
+        "popover-divider": "var(--popover-divider)",
+        "listview-raised-background": "var(--listview-raised-background)",
+        "listview-editing-background": "var(--listview-editing-background)",
+        "slider-background": "var(--slider-background)",
+        "slider-border": "var(--slider-border)",
+        "radio-group-background": "var(--radio-group-background)",
+        mask: "var(--mask)",
+        "transparent-checker": "var(--transparent-checker)",
+        scrollbar: "var(--scrollbar)",
+        "placeholder-dots": "var(--placeholder-dots)",
+        "drag-outline": "var(--drag-outline)",
+        "active-background": "var(--active-background)",
+        "thumbnail-background": "var(--thumbnail-background)",
+        "thumbnail-shadow": "var(--thumbnail-shadow)",
+        "inline-code-text": "var(--inline-code-text)",
+        "inline-code-background": "var(--inline-code-background)",
+        "text-link": "var(--text-link)",
+        "text-link-focused": "var(--text-link-focused)",
+        icon: "var(--icon)",
+        "icon-selected": "var(--icon-selected)",
+        warning: "var(--warning)",
+        "radio-group-item": "var(--radio-group-item)",
+        dot: "var(--dot)",
+        "row-highlight": "var(--row-highlight)",
+        "table-row-background": "var(--table-row-background)",
       },
       fontFamily: {
         sans: [
@@ -270,14 +174,50 @@ export default {
         large: "32px",
         xlarge: "64px",
         xxlarge: "128px",
-        "inset-top": "46px",
-        "sidebar-width": "260px",
-        "toolbar-height": "8px",
-        "toolbar-separator": "8px",
-        "inspector-h-separator": "8px",
-        "inspector-v-separator": "10px",
-        "dialog-padding": "16px",
+        "inset-top": "var(--inset-top)",
+        "sidebar-width": "var(--sidebar-width)",
+        "toolbar-height": "var(--toolbar-height)",
+        "toolbar-separator": "var(--toolbar-separator)",
+        "inspector-h-separator": "var(--inspector-h-separator)",
+        "inspector-v-separator": "var(--inspector-v-separator)",
+        "dialog-padding": "var(--dialog-padding)",
+      },
+      keyframes: {
+        spin: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+        shimmer: {
+          "0%": {
+            backgroundPosition: "-200% 0",
+          },
+          "100%": {
+            backgroundPosition: "200% 0",
+          },
+        },
+      },
+      animation: {
+        spin: "spin 1s linear infinite",
+        shimmer: "shimmer 6s infinite linear",
       },
     },
   },
-} as Config;
+  safelist: [
+    "group",
+    "group-hover:flex",
+    "bg-row-highlight",
+    "left-5",
+    "right-6",
+    "m-[0_-24px_0_-20px]",
+    "p-[0_24px_0_20px]",
+    "left-0",
+    "border-divider-strong",
+    "decoration-text-decorative-light",
+    "underline",
+    "-left-2.5",
+    "-mr-2",
+    "border-gray-200"
+  ],
+};
+
+export default config

package/tsup.config.ts

@@ -1,5 +1,9 @@
+import { exec } from "child_process";
 import fixReactVirtualized from "esbuild-plugin-react-virtualized";
 import { defineConfig } from "tsup";
+import { promisify } from "util";
+
+const execAsync = promisify(exec);
 
 // "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
 export default defineConfig({
@@ -9,4 +13,16 @@ export default defineConfig({
   sourcemap: true,
   noExternal: ["react-virtualized"],
   esbuildPlugins: [fixReactVirtualized],
+  async onSuccess() {
+    // Build Tailwind CSS after successful tsup build
+    try {
+      const { stdout, stderr } = await execAsync(
+        "tailwindcss -i ./src/index.css -o ./dist/index.css --minify"
+      );
+      if (stdout) console.info(stdout);
+      if (stderr) console.error(stderr);
+    } catch (error) {
+      console.error("Error building CSS:", error);
+    }
+  },
 });