@noya-app/noya-designsystem 0.1.30 → 0.1.32

package/src/contexts/DialogContext.tsx

@@ -7,19 +7,11 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styled from "styled-components";
 import { Button } from "../components/Button";
 import { Dialog, IDialog } from "../components/Dialog";
 import { InputField } from "../components/InputField";
 import { Spacer } from "../components/Spacer";
 
-export const Row = styled.div(({ theme }) => ({
-  flex: "1",
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-}));
-
 function createDeferredPromise<T>() {
   let resolve: (value: T) => void = () => {};
   let reject: (value: any) => void = () => {};
@@ -161,14 +153,14 @@ export const DialogProvider = function DialogProvider({
           />
         </InputField.Root>
         <Spacer.Vertical size={20} />
-        <Row>
+        <div className="flex-1 flex-row items-center">
           <Spacer.Horizontal />
           <Button onClick={close}>Cancel</Button>
           <Spacer.Horizontal size={16} />
           <Button disabled={!contents?.inputValue} onClick={submit}>
             Submit
           </Button>
-        </Row>
+        </div>
       </Dialog>
     </>
   );

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";
@@ -41,13 +40,11 @@ export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/RadioGroup";
 export * from "./components/ScrollArea";
-export * from "./components/Select";
 export * from "./components/SelectMenu";
 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";
@@ -72,10 +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

@@ -0,0 +1,223 @@
+import { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./src/**/*.{ts,tsx}"],
+  corePlugins: {
+    // disables @tailwind base global styles
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      colors: {
+        "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: [
+          "__Inter_6b0edc",
+          "__Inter_Fallback_6b0edc",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Helvetica Neue",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif",
+        ],
+        mono: ["Menlo", "Monaco", "Consolas", "Courier New", "monospace"],
+      },
+      // Type scale
+      // The last one, 0.85, I just eyeballed
+      // old:  typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; // Major third
+      fontSize: {
+        title: [
+          "3.052rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.05em",
+          },
+        ],
+        subtitle: [
+          "1.563rem",
+          {
+            lineHeight: "1.75",
+            letterSpacing: "-0.05em",
+          },
+        ],
+        heading1: [
+          "1.953rem",
+          {
+            lineHeight: "1.6",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading2: [
+          "1.563rem",
+          {
+            lineHeight: "1.5",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading3: [
+          "1.25rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.025em",
+          },
+        ],
+        heading4: [
+          "1rem",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        heading5: [
+          "0.85rem",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        body: [
+          "1",
+          {
+            lineHeight: "1.4",
+          },
+        ],
+        small: [
+          "1",
+          {
+            lineHeight: "19px",
+          },
+        ],
+        code: [
+          "90%",
+          {
+            lineHeight: "1.5",
+          },
+        ],
+        button: [
+          "0.8rem",
+          {
+            lineHeight: "1.4",
+            letterSpacing: "-0.2px",
+          },
+        ],
+        label: [
+          "0.62rem",
+          {
+            lineHeight: "19px",
+            letterSpacing: "-0.3px",
+          },
+        ],
+      },
+      spacing: {
+        nano: "2px",
+        micro: "4px",
+        small: "8px",
+        medium: "16px",
+        large: "32px",
+        xlarge: "64px",
+        xxlarge: "128px",
+        "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",
+      },
+    },
+  },
+  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/tailwind.d.ts

@@ -0,0 +1,11 @@
+// Get the config from your actual config file
+import tailwindConfig from "./tailwind.config";
+
+type ExtractThemeTypes<T> = T extends { theme: { extend: infer E } }
+  ? E
+  : never;
+
+declare module "tailwindcss/types/generated/default-theme" {
+  export interface DefaultTheme
+    extends ExtractThemeTypes<typeof tailwindConfig> {}
+}

package/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@repo/typescript-config/library.json"
+  "extends": "@repo/typescript-config/library.json",
+  "compilerOptions": {
+    "types": ["tailwindcss/types"],
+  },
 }

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);
+    }
+  },
 });