@noya-app/noya-designsystem 0.1.49 → 0.1.50

package/src/index.css

@@ -3,125 +3,125 @@
 @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-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;
-  --input-background: rgb(240, 242, 246);
-  --list-view-hover-background: rgb(244, 246, 250);
-  --list-view-thumbnail-background: var(--input-background);
-  --slider-thumb-background: white;
-  --slider-border: #9698ac;
-  --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;
-  --input-height: 27px;
-  --icon: rgb(129, 131, 165);
-  --icon-selected: rgb(220, 220, 220);
-  --warning: rgb(251, 211, 0);
-  --segmented-control-item: rgb(139, 139, 139);
-  --dot: rgba(0, 0, 0, 0.25);
-  --row-highlight: #3390ff10;
-  --table-row-background: var(--background);
-  --interactable-z-index: 2;
-  --label-z-index: 3;
-  --menu-z-index: 5000;
-  --chip-primary-bg: rgba(238, 229, 255, 0.2);
-  --chip-secondary-bg: rgba(205, 238, 231, 0.2);
-  --chip-error-bg: rgba(255, 219, 219, 0.2);
-  --chip-default-bg: rgba(0, 0, 0, 0.1);
-  --chip-primary-shadow: rgb(238, 229, 255);
-  --chip-secondary-shadow: rgb(205, 238, 231);
-  --chip-error-shadow: rgb(255, 219, 219);
-  --chip-default-shadow: rgb(0, 0, 0);
-  --floating-button: rgb(248, 248, 250);
-  --block-border: rgb(184, 201, 218);
-  --block-highlight: rgb(255, 165, 0);
+  --n-logo-fill: rgb(150, 152, 172);
+  --n-logo-highlight: rgb(150, 152, 172);
+  --n-background: rgb(255, 255, 255);
+  --n-text: rgb(38, 48, 83);
+  --n-text-muted: rgb(107, 113, 136);
+  --n-text-subtle: rgb(117, 121, 129);
+  --n-text-disabled: rgb(150, 152, 172);
+  --n-text-decorative-light: rgb(168, 185, 212);
+  --n-divider-subtle: rgba(30, 50, 100, 0.04);
+  --n-divider: rgba(30, 50, 100, 0.07);
+  --n-divider-strong: rgba(30, 50, 100, 0.09);
+  --n-primary: rgb(103, 70, 255);
+  --n-primary-light: rgb(147, 86, 255);
+  --n-primary-pastel: rgba(234, 230, 255);
+  --n-secondary: rgb(0, 151, 117);
+  --n-secondary-light: rgb(0, 160, 129);
+  --n-secondary-pastel: rgb(205, 238, 231);
+  --n-secondary-bright: #0ab557;
+  --n-input-background-light: rgb(243, 245, 249);
+  --n-code-background: rgb(250, 250, 250);
+  --n-code-background-dark: #435080;
+  --n-selected-background: rgb(242, 245, 250);
+  --n-breadcrumb-text: rgb(107, 113, 136);
+  --n-breadcrumb-text-hover: rgb(117, 121, 129);
+  --n-breadcrumb-icon: rgb(129, 131, 165);
+  --n-canvas-background: rgb(249, 249, 249);
+  --n-canvas-grid: rgba(0, 0, 0, 0.05);
+  --n-sidebar-background: rgb(255, 255, 255);
+  --n-sidebar-background-transparent: rgba(255, 255, 255, 0.85);
+  --n-popover-background: rgb(252, 252, 252);
+  --n-popover-divider: transparent;
+  --n-listview-raised-background: rgba(0, 0, 0, 0.03);
+  --n-listview-editing-background: #fff;
+  --n-input-background: rgb(240, 242, 246);
+  --n-list-view-hover-background: rgb(244, 246, 250);
+  --n-list-view-thumbnail-background: var(--n-input-background);
+  --n-slider-thumb-background: white;
+  --n-slider-border: #9698ac;
+  --n-mask: rgb(12, 193, 67);
+  --n-transparent-checker: rgba(255, 255, 255, 0.8);
+  --n-scrollbar: rgba(199, 199, 199, 0.8);
+  --n-placeholder-dots: rgba(0, 0, 0, 0.3);
+  --n-drag-outline: rgb(103, 70, 255);
+  --n-active-background: rgba(0, 0, 0, 0.1);
+  --n-thumbnail-background: #f0efff;
+  --n-thumbnail-shadow: #d3ceed66;
+  --n-inline-code-text: rgb(103, 70, 255);
+  --n-inline-code-background: rgb(240, 242, 246);
+  --n-text-link: rgb(103, 70, 255);
+  --n-text-link-focused: rgb(147, 86, 255);
+  --n-inset-top: 46px;
+  --n-sidebar-width: 260px;
+  --n-toolbar-height: 46px;
+  --n-toolbar-separator: 8px;
+  --n-inspector-h-separator: 8px;
+  --n-inspector-v-separator: 10px;
+  --n-dialog-padding: 16px;
+  --n-input-height: 27px;
+  --n-icon: rgb(129, 131, 165);
+  --n-icon-selected: rgb(220, 220, 220);
+  --n-warning: rgb(251, 211, 0);
+  --n-segmented-control-item: rgb(139, 139, 139);
+  --n-dot: rgba(0, 0, 0, 0.25);
+  --n-row-highlight: #3390ff10;
+  --n-table-row-background: var(--n-background);
+  --n-interactable-z-index: 2;
+  --n-label-z-index: 3;
+  --n-menu-z-index: 5000;
+  --n-chip-primary-bg: rgba(238, 229, 255, 0.2);
+  --n-chip-secondary-bg: rgba(205, 238, 231, 0.2);
+  --n-chip-error-bg: rgba(255, 219, 219, 0.2);
+  --n-chip-default-bg: rgba(0, 0, 0, 0.1);
+  --n-chip-primary-shadow: rgb(238, 229, 255);
+  --n-chip-secondary-shadow: rgb(205, 238, 231);
+  --n-chip-error-shadow: rgb(255, 219, 219);
+  --n-chip-default-shadow: rgb(0, 0, 0);
+  --n-floating-button: rgb(248, 248, 250);
+  --n-block-border: rgb(184, 201, 218);
+  --n-block-highlight: rgb(255, 165, 0);
 }
 
 [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(115, 114, 126);
-  --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;
-  --list-view-hover-background: var(--input-background-light);
-  --list-view-thumbnail-background: var(--input-background);
-  --slider-thumb-background: var(--input-background-light);
-  --slider-border: var(--divider);
-  --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);
-  --floating-button: #333333;
+  --n-background: #111111;
+  --n-logo-fill: rgb(248, 248, 250);
+  --n-logo-highlight: rgb(248, 248, 250);
+  --n-text: rgb(248, 248, 250);
+  --n-text-muted: rgb(180, 179, 182);
+  --n-text-subtle: rgb(180, 179, 182);
+  --n-text-disabled: rgb(115, 114, 126);
+  --n-divider-subtle: rgba(255, 255, 255, 0.04);
+  --n-divider: rgba(255, 255, 255, 0.08);
+  --n-divider-strong: rgba(0, 0, 0, 1);
+  --n-primary: rgb(119, 66, 255);
+  --n-primary-light: rgb(134, 86, 255);
+  --n-secondary-bright: #36fe91;
+  --n-input-background: rgba(181, 178, 255, 0.08);
+  --n-input-background-light: rgba(181, 178, 255, 0.1);
+  --n-code-background: rgb(20, 19, 23);
+  --n-canvas-background: rgb(20, 19, 23);
+  --n-canvas-grid: rgba(0, 0, 0, 0.1);
+  --n-sidebar-background: rgb(34, 33, 39);
+  --n-sidebar-background-transparent: rgba(34, 33, 39, 0.95);
+  --n-popover-background: rgb(34, 33, 39);
+  --n-popover-divider: rgba(255, 255, 255, 0.08);
+  --n-listview-raised-background: rgba(181, 178, 255, 0.1);
+  --n-listview-editing-background: #000;
+  --n-list-view-hover-background: var(--n-input-background-light);
+  --n-list-view-thumbnail-background: var(--n-input-background);
+  --n-slider-thumb-background: var(--n-input-background-light);
+  --n-slider-border: var(--n-divider);
+  --n-mask: rgb(102, 187, 106);
+  --n-transparent-checker: rgba(255, 255, 255, 0.3);
+  --n-scrollbar: rgba(199, 199, 199, 0.2);
+  --n-placeholder-dots: rgba(255, 255, 255, 0.3);
+  --n-drag-outline: white;
+  --n-active-background: rgba(181, 178, 255, 0.08);
+  --n-thumbnail-background: #1f1d33;
+  --n-thumbnail-shadow: #1f1d3366;
+  --n-dot: rgba(255, 255, 255, 0.15);
+  --n-table-row-background: var(--n-sidebar-background);
+  --n-floating-button: #333333;
 }

package/src/index.tsx

@@ -1,8 +1,10 @@
 // Components
 export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
+export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
+export * from "./components/Banner";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
@@ -11,6 +13,7 @@ export * from "./components/Collection";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
 export * from "./components/CommandPalette";
+export * from "./components/connected-users-menu/ConnectedUsersMenuLayout";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
@@ -19,6 +22,7 @@ export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
+export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
@@ -44,10 +48,12 @@ export * from "./components/ListView";
 export * from "./components/MediaThumbnail";
 export * from "./components/Message";
 export * from "./components/NoyaLogo";
+export * from "./components/pipeline/PipelineResultLayout";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
+export * from "./components/Section";
 export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
@@ -85,6 +91,7 @@ export * from "./utils/getGradientBackground";
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
 export * from "./utils/fuzzyScorer";
+export * from "./utils/moveTreeItem";
 export * from "./utils/selection";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";

package/src/utils/classNames.ts

@@ -1,18 +1,43 @@
 import tailwindConfig from "../../tailwind.config";
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
-type Category = "text" | "flex";
+type Category = "text" | "color" | "font" | "flex";
 type Options = {
   categories?: Category[];
 };
 
+const colorKeys = Object.keys(tailwindConfig.theme.extend.colors).map(
+  (key) => `text-${key}`
+);
+const colorKeysSet = new Set(colorKeys);
 const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
   (key) => `text-${key}`
 );
 const textKeysSet = new Set(textKeys);
+const fontKeys = [
+  "thin",
+  "extralight",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extra-bold",
+  "black",
+].map((key) => `font-${key}`);
+const fontKeysSet = new Set(fontKeys);
+const flexKeysSet = new Set([
+  "flex-auto",
+  "flex-none",
+  "flex-[0_0_auto]",
+  "flex-1",
+]);
+
 const keyMap: Record<Category, Set<string>> = {
   text: textKeysSet,
-  flex: new Set(["flex-auto", "flex-none", "flex-[0_0_auto]", "flex-1"]),
+  flex: flexKeysSet,
+  color: colorKeysSet,
+  font: fontKeysSet,
 };
 
 export function cx(...args: ClassNameItem[]): string {

package/src/utils/moveTreeItem.ts

@@ -0,0 +1,99 @@
+import { isDeepEqual } from "@noya-app/noya-utils";
+import {
+  defaultAcceptsDrop,
+  RelativeDropPosition,
+} from "../components/Sortable";
+
+type MoveOptions = {
+  indexPaths: number[][];
+  to: number[];
+};
+
+export type MoveTreeItemOptions<T> = {
+  root: T;
+  move: (root: T, options: MoveOptions) => T;
+  position: RelativeDropPosition;
+  sourceIndexPath: number[];
+  targetIndexPath: number[];
+};
+
+export function moveTreeItem<T>({
+  root,
+  move,
+  position,
+  sourceIndexPath,
+  targetIndexPath,
+}: MoveTreeItemOptions<T>): T {
+  switch (position) {
+    case "above": {
+      return move(root, {
+        indexPaths: [sourceIndexPath],
+        to: targetIndexPath,
+      });
+    }
+    case "below": {
+      return move(root, {
+        indexPaths: [sourceIndexPath],
+        to: [...targetIndexPath.slice(0, -1), targetIndexPath.at(-1)! + 1],
+      });
+    }
+    case "inside": {
+      return move(root, {
+        indexPaths: [sourceIndexPath],
+        to: [...targetIndexPath, 1000],
+      });
+    }
+  }
+}
+
+export type AcceptsDropOptions = {
+  sourceIndexPath: number[];
+  targetIndexPath: number[];
+  position: RelativeDropPosition;
+
+  /**
+   * Whether to allow dropping the source item within the same parent as the target item.
+   */
+  allowSiblings: boolean;
+
+  /**
+   * Whether to allow dropping the source item within itself or one of its descendants.
+   */
+  allowRecursion: boolean;
+};
+
+export function acceptsDrop({
+  sourceIndexPath,
+  targetIndexPath,
+  position,
+  allowSiblings,
+  allowRecursion,
+}: AcceptsDropOptions): boolean {
+  if (!allowRecursion) {
+    const targetIsDescendantOfSource = isDeepEqual(
+      sourceIndexPath,
+      targetIndexPath.slice(0, sourceIndexPath.length)
+    );
+
+    if (targetIsDescendantOfSource) return false;
+  }
+
+  const areSiblings = isDeepEqual(
+    sourceIndexPath.slice(0, -1),
+    targetIndexPath.slice(0, -1)
+  );
+
+  if (areSiblings && position !== "inside") {
+    if (!allowSiblings) {
+      return false;
+    }
+
+    return defaultAcceptsDrop(
+      sourceIndexPath.at(-1)!,
+      targetIndexPath.at(-1)!,
+      position
+    );
+  }
+
+  return true;
+}

package/tailwind.config.ts

@@ -10,76 +10,76 @@ const config = {
   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)",
-        "list-view-hover-background": "var(--list-view-hover-background)",
+        "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(--list-view-thumbnail-background)",
-        "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)",
+          "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(--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-thumb-background": "var(--slider-thumb-background)",
-        "slider-border": "var(--slider-border)",
-        "segmented-control-item": "var(--segmented-control-item)",
-        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)",
-        dot: "var(--dot)",
-        "row-highlight": "var(--row-highlight)",
-        "table-row-background": "var(--table-row-background)",
-        "chip-primary-bg": "var(--chip-primary-bg)",
-        "chip-secondary-bg": "var(--chip-secondary-bg)",
-        "chip-error-bg": "var(--chip-error-bg)",
-        "chip-default-bg": "var(--chip-default-bg)",
-        "chip-primary-shadow": "var(--chip-primary-shadow)",
-        "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)",
-        "block-border": "var(--block-border)",
-        "block-highlight": "var(--block-highlight)",
+          "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: [
@@ -188,14 +188,14 @@ const config = {
         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)",
-        "input-height": "var(--input-height)",
+        "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: {
@@ -216,9 +216,9 @@ const config = {
         shimmer: "shimmer 6s infinite linear",
       },
       zIndex: {
-        interactable: "var(--interactable-z-index)",
-        label: "var(--label-z-index)",
-        menu: "var(--menu-z-index)",
+        interactable: "var(--n-interactable-z-index)",
+        label: "var(--n-label-z-index)",
+        menu: "var(--n-menu-z-index)",
       },
     },
   },