move to the new DS

.changeset/funny-bulldogs-retire.md

@@ -0,0 +1,7 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": patch
+"@tokens-studio/graph-editor": patch
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Fixed centering of EmptyStateEditor

.changeset/nine-seahorses-count.md

@@ -0,0 +1,7 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": patch
+"@tokens-studio/graph-editor": patch
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Improved settings panel UI.

packages/graph-editor/.storybook/preview.module.css

@@ -0,0 +1,29 @@
+.themeBlock {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 50%;
+  bottom: 0;
+  overflow: auto;
+  background: var(--colors-bgCanvas);
+  display: flex;
+}
+
+.themeBlock.fill {
+  left: 0;
+  width: 100%;
+}
+
+.themeBlock.left {
+  border-right: 1px solid #202020;
+  right: 50%;
+  left: 0;
+}
+
+.inner {
+  padding: 1rem;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}

packages/graph-editor/.storybook/preview.tsx

@@ -56,7 +56,7 @@ const StyledThemeBlock = styled('div', {
   width: '50%',
   bottom: 0,
   overflow: 'auto',
-  background: '$bgCanvas',
+  background: 'var(--color-neutral-canvas-minimal-bg)',
   display: 'flex',
   variants: {
     fill: {

packages/graph-editor/examples/barebones/index.css

@@ -4,5 +4,5 @@ body {
 
 #graph-editor {
     height: 100vh;
-    background: var(--colors-bgCanvas)
+    background: var(--color-neutral-canvas-minimal-bg)
 }

packages/graph-editor/examples/defaults/index.css

@@ -4,5 +4,5 @@ body {
 
 #graph-editor {
     height: 100vh;
-    background: var(--colors-bgCanvas)
+    background: var(--color-neutral-canvas-minimal-bg)
 }

packages/graph-editor/package.json

@@ -15,20 +15,22 @@
       "types": "./dist/*",
       "style": "./dist/*"
     },
+    "./index.css": "./dist/index.css",
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "dist/**/*.css"
   ],
   "scripts": {
     "start": "vite dev",
     "build": "node ./scripts/extractVersion.mjs && tspc  -p tsconfig.prod.json && npm run build:css",
-    "build:css": "postcss src/index.scss --base src  --dir dist --ext css",
+    "build:css": "postcss \"src/**/*.css\" --base src  --dir dist --ext css ",
     "build:storybook": "storybook build",
-    "dev": "tspc -p tsconfig.prod.json --watch || npm run build:css --watch",
+    "dev": "concurrently \"tspc -p tsconfig.prod.json --watch\" \"npm run build:css -- --watch\"",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{tsx,ts,js,md,json}\" --write",
@@ -55,9 +57,9 @@
     "@stitches/react": "1.2.8",
     "@tokens-studio/graph-engine": "*",
     "@tokens-studio/icons": "^0.1.4",
-    "@tokens-studio/tokens": "^0.0.24",
+    "@tokens-studio/tokens": "0.3.2",
     "@tokens-studio/types": "^0.2.3",
-    "@tokens-studio/ui": "^0.6.9",
+    "@tokens-studio/ui": "^1.0.1",
     "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",
     "classnames": "^2.3.2",
@@ -115,6 +117,7 @@
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.0",
     "cssnano": "^7.0.6",
     "cypress": "^13.9.0",
     "cypress-react-selector": "^3.0.0",
@@ -123,6 +126,7 @@
     "postcss-cli": "^11.0.0",
     "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
+    "postcss-modules": "^6.0.0",
     "postcss-nested": "^6.2.0",
     "postcss-preset-env": "^10.0.5",
     "postcss-scss": "^4.0.9",

packages/graph-editor/src/components/DndList.module.css

@@ -0,0 +1,11 @@
+.trigger {
+  cursor: pointer;
+}
+
+.item {
+  display: block;
+}
+
+.container {
+  display: block;
+}

packages/graph-editor/src/components/DndList.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@tokens-studio/ui';
 import {
   SortableContainer,
   SortableContainerProps,
@@ -7,40 +6,45 @@ import {
   SortableHandle,
 } from 'react-sortable-hoc';
 import React from 'react';
-import type * as Stitches from '@stitches/react';
+import styles from './DndList.module.css';
 
-interface ISortableHandleElement {
-  children: React.ReactNode;
-  css?: Stitches.CSS;
+interface ISortableHandleElement extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
 }
 
-interface ISortableItem extends SortableElementProps {
-  children: React.ReactNode;
-  css?: Stitches.CSS;
+interface ISortableItem
+  extends SortableElementProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
 }
 
-interface ISortableContainer extends SortableContainerProps {
-  children: React.ReactNode;
-  css?: Stitches.CSS;
+interface ISortableContainer
+  extends SortableContainerProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
 }
 
 export const DndTrigger: React.ComponentClass<ISortableHandleElement, unknown> =
   SortableHandle(
-    ({ children, css }: { children: React.ReactNode; css: Stitches.CSS }) => (
-      <Box css={{ cursor: 'pointer', ...css }}>{children}</Box>
+    ({ children, className }: React.HTMLAttributes<HTMLDivElement>) => (
+      <div className={`${styles.trigger} ${className || ''}`}>{children}</div>
     ),
   );
 
 export const DndItem: React.ComponentClass<ISortableItem, unknown> =
   SortableElement(
-    ({ children, css }: { children: React.ReactNode; css: Stitches.CSS }) => (
-      <Box css={css}>{children}</Box>
+    ({ children, className }: React.HTMLAttributes<HTMLDivElement>) => (
+      <div className={`${styles.item} ${className || ''}`}>{children}</div>
     ),
   );
 
 export const DndList: React.ComponentClass<ISortableContainer, unknown> =
   SortableContainer(
-    ({ children, css }: { children: React.ReactNode; css: Stitches.CSS }) => {
-      return <Box css={css}>{children}</Box>;
+    ({ children, className }: React.HTMLAttributes<HTMLDivElement>) => {
+      return (
+        <div className={`${styles.container} ${className || ''}`}>
+          {children}
+        </div>
+      );
     },
   );

packages/graph-editor/src/components/ErrorBoundaryContent.tsx

@@ -24,22 +24,26 @@ export const ErrorBoundaryContent: React.FunctionComponent = () => {
 
   return (
     <Stack
-      css={{ width: '100%', height: '100%', padding: '$4' }}
+      style={{
+        width: '100%',
+        height: '100%',
+        padding: 'var(--component-spacing-lg)',
+      }}
       align="center"
       justify="center"
     >
       <Stack direction="column" gap={4} align="center" justify="center">
-        <Text css={{ fontSize: '$large', textAlign: 'center' }}>
+        <Text style={{ font: 'var(--font-body-xl)', textAlign: 'center' }}>
           Uh-oh, something went wrong!
         </Text>
         {graphRef ? (
-          <Text css={{ textAlign: 'center' }}>
+          <Text style={{ textAlign: 'center' }}>
             It looks like an error occurred. You can download your current
             progress and contact support.
           </Text>
         ) : (
           <>
-            <Text css={{ textAlign: 'center' }}>
+            <Text style={{ textAlign: 'center' }}>
               It looks like an error occurred. Try reloading the page.
             </Text>
             <Button

packages/graph-editor/src/components/NodeHoverCard.module.css

@@ -0,0 +1,87 @@
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.hoverCardContent {
+  border-radius: var(--component-radii-md);
+  border: 1px solid var(--color-neutral-stroke-subtle);
+  padding: var(--component-spacing-lg);
+  width: 300px;
+  background-color: var(--color-neutral-canvas-minimal-bg);
+  box-shadow: var(--shadows-contextMenu);
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.hoverCardContent[data-state="open"][data-side="top"] {
+  animation-name: slideDownAndFade;
+}
+
+.hoverCardContent[data-state="open"][data-side="right"] {
+  animation-name: slideLeftAndFade;
+}
+
+.hoverCardContent[data-state="open"][data-side="bottom"] {
+  animation-name: slideUpAndFade;
+}
+
+.hoverCardContent[data-state="open"][data-side="left"] {
+  animation-name: slideRightAndFade;
+}
+
+.styledLink {
+  color: var(--color-accent-surface-base-idle-fg-default);
+  text-decoration: none;
+  font-weight: var(--fontWeights-sansMedium);
+}
+
+.heading {
+  font-size: var(--fontSizes-small);
+  font-weight: var(--fontWeights-sansMedium);
+  color: var(--color-neutral-canvas-default-fg-default);
+}
+
+.description {
+  line-height: 150%;
+}