@noya-app/noya-designsystem 0.1.50 → 0.1.52

package/tailwind.config.ts

@@ -1,246 +1,9 @@
+import noyaConfig from "@noya-app/noya-tailwind-config";
 import containerQueries from "@tailwindcss/container-queries";
 import type { Config } from "tailwindcss";
 
 const config = {
-  content: ["./src/**/*.{ts,tsx}"],
-  corePlugins: {
-    // disables @tailwind base global styles
-    preflight: false,
-  },
-  theme: {
-    extend: {
-      colors: {
-        "logo-fill": "var(--n-logo-fill)",
-        "logo-highlight": "var(--n-logo-highlight)",
-        background: "var(--n-background)",
-        text: "var(--n-text)",
-        "text-muted": "var(--n-text-muted)",
-        "text-subtle": "var(--n-text-subtle)",
-        "text-disabled": "var(--n-text-disabled)",
-        "text-decorative-light": "var(--n-text-decorative-light)",
-        "divider-subtle": "var(--n-divider-subtle)",
-        divider: "var(--n-divider)",
-        "divider-strong": "var(--n-divider-strong)",
-        primary: "var(--n-primary)",
-        "primary-light": "var(--n-primary-light)",
-        "primary-pastel": "var(--n-primary-pastel)",
-        secondary: "var(--n-secondary)",
-        "secondary-light": "var(--n-secondary-light)",
-        "secondary-pastel": "var(--n-secondary-pastel)",
-        "secondary-bright": "var(--n-secondary-bright)",
-        "input-background": "var(--n-input-background)",
-        "input-background-light": "var(--n-input-background-light)",
-        "list-view-hover-background": "var(--n-list-view-hover-background)",
-        "list-view-thumbnail-background":
-          "var(--n-list-view-thumbnail-background)",
-        "code-background": "var(--n-code-background)",
-        "code-background-dark": "var(--n-code-background-dark)",
-        "selected-background": "var(--n-selected-background)",
-        "breadcrumb-text": "var(--n-breadcrumb-text)",
-        "breadcrumb-text-hover": "var(--n-breadcrumb-text-hover)",
-        "breadcrumb-icon": "var(--n-breadcrumb-icon)",
-        "canvas-background": "var(--n-canvas-background)",
-        "canvas-grid": "var(--n-canvas-grid)",
-        "sidebar-background": "var(--n-sidebar-background)",
-        "sidebar-background-transparent":
-          "var(--n-sidebar-background-transparent)",
-        "popover-background": "var(--n-popover-background)",
-        "popover-divider": "var(--n-popover-divider)",
-        "listview-raised-background": "var(--n-listview-raised-background)",
-        "listview-editing-background": "var(--n-listview-editing-background)",
-        "slider-thumb-background": "var(--n-slider-thumb-background)",
-        "slider-border": "var(--n-slider-border)",
-        "segmented-control-item": "var(--n-segmented-control-item)",
-        mask: "var(--n-mask)",
-        "transparent-checker": "var(--n-transparent-checker)",
-        scrollbar: "var(--n-scrollbar)",
-        "placeholder-dots": "var(--n-placeholder-dots)",
-        "drag-outline": "var(--n-drag-outline)",
-        "active-background": "var(--n-active-background)",
-        "thumbnail-background": "var(--n-thumbnail-background)",
-        "thumbnail-shadow": "var(--n-thumbnail-shadow)",
-        "inline-code-text": "var(--n-inline-code-text)",
-        "inline-code-background": "var(--n-inline-code-background)",
-        "text-link": "var(--n-text-link)",
-        "text-link-focused": "var(--n-text-link-focused)",
-        icon: "var(--n-icon)",
-        "icon-selected": "var(--n-icon-selected)",
-        warning: "var(--n-warning)",
-        dot: "var(--n-dot)",
-        "row-highlight": "var(--n-row-highlight)",
-        "table-row-background": "var(--n-table-row-background)",
-        "chip-primary-bg": "var(--n-chip-primary-bg)",
-        "chip-secondary-bg": "var(--n-chip-secondary-bg)",
-        "chip-error-bg": "var(--n-chip-error-bg)",
-        "chip-default-bg": "var(--n-chip-default-bg)",
-        "chip-primary-shadow": "var(--n-chip-primary-shadow)",
-        "chip-secondary-shadow": "var(--n-chip-secondary-shadow)",
-        "chip-error-shadow": "var(--n-chip-error-shadow)",
-        "chip-default-shadow": "var(--n-chip-default-shadow)",
-        "floating-button": "var(--n-floating-button)",
-        "block-border": "var(--n-block-border)",
-        "block-highlight": "var(--n-block-highlight)",
-      },
-      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", // 48.83px
-          {
-            lineHeight: "1.4",
-            letterSpacing: "-0.05em",
-          },
-        ],
-        subtitle: [
-          "1.563rem", // 25px
-          {
-            lineHeight: "1.75",
-            letterSpacing: "-0.05em",
-          },
-        ],
-        heading1: [
-          "1.953rem", // 31.25px
-          {
-            lineHeight: "1.6",
-            letterSpacing: "-0.025em",
-          },
-        ],
-        heading2: [
-          "1.563rem", // 25px
-          {
-            lineHeight: "1.5",
-            letterSpacing: "-0.025em",
-          },
-        ],
-        heading3: [
-          "1.25rem", // 20px
-          {
-            lineHeight: "1.4",
-            letterSpacing: "-0.025em",
-          },
-        ],
-        heading4: [
-          "1rem", // 16px
-          {
-            lineHeight: "1.4",
-          },
-        ],
-        heading5: [
-          "0.85rem", // 13.6px
-          {
-            lineHeight: "1.4",
-          },
-        ],
-        body: [
-          "1", // 16px (1 = 1rem)
-          {
-            lineHeight: "1.4",
-          },
-        ],
-        small: [
-          "1", // 16px (1 = 1rem)
-          {
-            lineHeight: "19px",
-          },
-        ],
-        code: [
-          "90%", // 14.4px
-          {
-            lineHeight: "1.5",
-          },
-        ],
-        button: [
-          "0.8rem", // 12.8px
-          {
-            lineHeight: "1.4",
-            letterSpacing: "-0.2px",
-          },
-        ],
-        label: [
-          "0.62rem", // 9.92px
-          {
-            lineHeight: "19px",
-            letterSpacing: "-0.3px",
-          },
-        ],
-      },
-      spacing: {
-        nano: "2px",
-        micro: "4px",
-        small: "8px",
-        medium: "16px",
-        large: "32px",
-        xlarge: "64px",
-        xxlarge: "128px",
-        "inset-top": "var(--n-inset-top)",
-        "sidebar-width": "var(--n-sidebar-width)",
-        "toolbar-height": "var(--n-toolbar-height)",
-        "toolbar-separator": "var(--n-toolbar-separator)",
-        "inspector-h-separator": "var(--n-inspector-h-separator)",
-        "inspector-v-separator": "var(--n-inspector-v-separator)",
-        "dialog-padding": "var(--n-dialog-padding)",
-        "input-height": "var(--n-input-height)",
-      },
-      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",
-      },
-      zIndex: {
-        interactable: "var(--n-interactable-z-index)",
-        label: "var(--n-label-z-index)",
-        menu: "var(--n-menu-z-index)",
-      },
-    },
-  },
-  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",
-    "gap-1.5",
-    "gap-toolbar-separator",
-    "-mr-1",
-  ],
+  ...noyaConfig,
   plugins: [containerQueries],
 } satisfies Config;
 

package/tailwind.d.ts

@@ -1,5 +1,5 @@
 // Get the config from your actual config file
-import tailwindConfig from "./tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ExtractThemeTypes<T> = T extends { theme: { extend: infer E } }
   ? E

package/tsup.config.ts

@@ -1,5 +1,4 @@
 import { exec } from "child_process";
-import fixReactVirtualized from "esbuild-plugin-react-virtualized";
 import { defineConfig } from "tsup";
 import { promisify } from "util";
 
@@ -11,13 +10,11 @@ export default defineConfig({
   format: ["cjs", "esm"],
   dts: true,
   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"
+        "tailwindcss -i ./src/index.css -o ./dist/index.css --minify --postcss"
       );
       if (stdout) console.info(stdout);
       if (stderr) console.error(stderr);