update to the latest DS version

.changeset/tired-carrots-grin.md

@@ -0,0 +1,10 @@
+---
+"@tokens-studio/graph-engine-nodes-design-tokens": patch
+"@tokens-studio/graph-engine-nodes-preview": patch
+"@tokens-studio/graph-editor": patch
+"@tokens-studio/graph-engine-nodes-figma": patch
+"@tokens-studio/graph-engine-nodes-fs": patch
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Update to the latest DS version

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

@@ -16,7 +16,7 @@
 }
 
 .themeBlock.left {
-  border-right: 1px solid var(--color-neutral-stroke-subtle);
+  border-right: 1px solid var(--stroke-subtle);
   right: 50%;
   left: 0;
 }

packages/graph-editor/package.json

@@ -58,9 +58,9 @@
     "@tokens-studio/graph-engine": "*",
     "@tokens-studio/graph-engine-migration": "*",
     "@tokens-studio/icons": "^0.1.4",
-    "@tokens-studio/tokens": "^0.3.7",
+    "@tokens-studio/tokens": "^0.3.9",
     "@tokens-studio/types": "^0.5.1",
-    "@tokens-studio/ui": "^1.0.13",
+    "@tokens-studio/ui": "^3.0.1",
     "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",
     "clsx": "^2.1.1",

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

@@ -44,11 +44,11 @@
 
 .hoverCardContent {
   border-radius: var(--component-radii-md);
-  border: 1px solid var(--color-neutral-stroke-subtle);
+  border: var(--component-border-width-sm) solid var(--stroke-subtle);
   padding: var(--component-spacing-lg);
   width: 300px;
   background-color: var(--color-neutral-canvas-minimal-bg);
-  box-shadow: var(--shadows-contextMenu);
+  box-shadow: var(--elevation-medium);
   animation-duration: 200ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;

packages/graph-editor/src/components/colorPicker/InputPopover.module.css

@@ -44,7 +44,7 @@
 
 .popoverContent {
   border-radius: var(--component-radii-md);
-  border: 1px solid var(--color-neutral-stroke-subtle);
+  border: 1px solid var(--stroke-subtle);
   padding: 0;
   z-index: 10000;
   width: 300px;

packages/graph-editor/src/components/colorPicker/index.module.css

@@ -1,14 +1,14 @@
 .colorPickerTrigger {
   cursor: pointer;
   border-radius: var(--component-radii-sm);
-  border: 1px solid var(--color-neutral-stroke-subtle);
+  border: var(--component-border-width-md) solid var(--stroke-subtle);
   width: var(--size-150);
   height: var(--size-150);
   flex-shrink: 0;
   padding: 0;
 
   &:hover {
-    outline: 1px solid var(--color-neutral-stroke-default);
+    outline: var(--component-border-width-md) solid var(--stroke-default);
   }
 }
 

packages/graph-editor/src/components/commandPalette/index.module.css

@@ -5,7 +5,7 @@
   align-items: center;
   gap: 1px;
   padding: var(--component-spacing-md);
-  border-bottom: 1px solid var(--color-neutral-stroke-subtle);
+  border-bottom: 1px solid var(--stroke-subtle);
 }
 
 .emptyState {

packages/graph-editor/src/components/controls/color.module.css

@@ -4,10 +4,10 @@
   border-radius: var(--component-radii-sm);
   width: 26px;
   height: 26px;
-  outline: 1px solid var(--color-neutral-stroke-default);
+  outline: 1px solid var(--stroke-default);
   flex-shrink: 0;
 }
 
 .colorButton:hover {
-  outline: 1px solid var(--color-neutral-stroke-default);
+  outline: 1px solid var(--stroke-default);
 }

packages/graph-editor/src/components/controls/variadicColor.module.css

@@ -4,10 +4,10 @@
   border-radius: var(--component-radii-sm);
   width: 16px;
   height: 16px;
-  outline: 1px solid var(--color-neutral-stroke-subtle);
+  outline: 1px solid var(--stroke-subtle);
   flex-shrink: 0;
 }
 
 .colorButton:hover {
-  outline: 1px solid var(--color-neutral-stroke-default);
+  outline: 1px solid var(--stroke-default);
 }

packages/graph-editor/src/components/curveEditor/override.css

@@ -1,9 +1,9 @@
 .MafsView {
 
 
-    --mafs-fg: var(--color-accent-stroke-default);
+    --mafs-fg: var(--color-accent-base);
     --mafs-bg: var(--color-neutral-canvas-subtle-bg);
     --mafs-origin-color: var(--color-neutral-canvas-minimal-fg-default);
-    --mafs-line-color: var(--color-neutral-stroke-default);
-    --grid-line-subdivision-color: var(--color-neutral-stroke-subtle);
+    --mafs-line-color: var(--stroke-default);
+    --grid-line-subdivision-color: var(--stroke-subtle);
 }

packages/graph-editor/src/components/debugger/index.css

@@ -3,7 +3,7 @@
 }
 
 .timeline-editor-time-unit {
-    border-right: 1px solid var(--color-neutral-stroke-subtle);
+    border-right: 1px solid var(--stroke-subtle);
 }
 
 .timeline-editor-action {

packages/graph-editor/src/components/flow/handles.module.css

@@ -57,7 +57,7 @@
   height: var(--handle-core-size);
   border: var(--handle-border-width) solid var(--handle-color);
   border-radius: var(--component-radii-pill);
-  box-shadow: var(--shadows-small);
+  box-shadow: var(--elevation-small);
   display: grid;
   place-items: center;
 

packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx

@@ -27,7 +27,7 @@ export const PassthroughNode = (args) => {
         borderRadius: 'var(--component-radii-md)',
         padding: 'var(--component-spacing-sm)',
         border: '2px solid var(--colors-nodeBorder)',
-        boxShadow: 'var(--shadows-contextMenu)',
+        boxShadow: 'var(--elevation-medium)',
       }}
     >
       {node && (

packages/graph-editor/src/components/flow/wrapper/base.module.css

@@ -11,10 +11,10 @@
 
 .nodeWrapper {
   position: relative;
-  box-shadow: var(--shadows-contextMenu);
+  border: var(--component-border-width-lg) solid var(--stroke-subtle);
+  box-shadow: var(--elevation-medium);
   border-radius: var(--component-radii-md);
   background: var(--color-neutral-canvas-default-bg);
-  border: 2px solid var(--color-neutral-stroke-subtle);
   flex: 1;
   display: flex;
 }

packages/graph-editor/src/components/menubar/menubar.css

@@ -2,7 +2,6 @@
     color: var(--color-neutral-canvas-default-fg-default);
     border: none;
     font-size: var(--fontSizes-small);
-    box-shadow: var(--shadows-focus);
 }
 
 
@@ -12,7 +11,7 @@
     background-color: var(--color-neutral-canvas-minimal-bg);
     color: var(--color-neutral-canvas-default-fg-default);
     border-radius: 0;
-    border-bottom: 1px solid var(--color-neutral-stroke-subtle);
+    border-bottom: 1px solid var(--stroke-subtle);
     box-shadow: none;
 
 }
@@ -62,5 +61,5 @@
 }
 
 .rc-menu-item-divider{
-    background-color: var(--color-neutral-stroke-subtle);
+    background-color: var(--stroke-subtle);
 }

packages/graph-editor/src/components/panels/logs/index.tsx

@@ -64,7 +64,7 @@ export function LogsPanel() {
             <div
               key={index}
               style={{
-                border: '1px solid var(--color-neutral-stroke-subtle)',
+                border: '1px solid var(--stroke-subtle)',
                 padding: 'var(--component-spacing-sm)',
               }}
             >

packages/graph-editor/src/components/slider/index.module.css

@@ -1,5 +1,5 @@
 .track {
-  background-color: var(--color-neutral-stroke-default);
+  background-color: var(--stroke-default);
   position: relative;
   flex-grow: 1;
   border-radius: 9999px;

packages/graph-editor/src/components/toolbar/buttons/settings.tsx

@@ -1,17 +1,16 @@
-import { IconButton, Tooltip } from '@tokens-studio/ui';
+import { IconButton } from '@tokens-studio/ui';
 import { useLayoutButton } from '../../../hooks/useLayoutButton.js';
 import React from 'react';
 import Settings from '@tokens-studio/icons/Settings.js';
 
 export const SettingsToolbarButton = () => {
   const onClick = useLayoutButton();
   return (
-    <Tooltip label="Settings" side="bottom">
-      <IconButton
-        emphasis="low"
-        onClick={() => onClick('settings')}
-        icon={<Settings />}
-      />
-    </Tooltip>
+    <IconButton
+      emphasis="low"
+      onClick={() => onClick('settings')}
+      icon={<Settings />}
+      data-tooltip-content="Settings"
+    />
   );
 };

packages/graph-editor/src/components/toolbar/dropdowns/help.tsx

@@ -1,14 +1,16 @@
-import { DropdownMenu, IconButton, Tooltip } from '@tokens-studio/ui';
+import { DropdownMenu, IconButton } from '@tokens-studio/ui';
 import ChatBubbleQuestion from '@tokens-studio/icons/ChatBubbleQuestion.js';
 import React from 'react';
 
 export const HelpDropdown = () => (
   <DropdownMenu>
-    <Tooltip label="Help" side="bottom">
-      <DropdownMenu.Trigger asChild>
-        <IconButton emphasis="low" icon={<ChatBubbleQuestion />} />
-      </DropdownMenu.Trigger>
-    </Tooltip>
+    <DropdownMenu.Trigger asChild>
+      <IconButton
+        emphasis="low"
+        icon={<ChatBubbleQuestion />}
+        data-tooltip-content="Help"
+      />
+    </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
       <DropdownMenu.Content style={{ minWidth: '200px' }}>
         <a

packages/graph-editor/src/components/toolbar/toolbar.cy.tsx

@@ -1,20 +1,21 @@
 import { GraphToolbar } from './index.js';
 import { Provider } from 'react-redux';
 import { ReactFlowProvider } from 'reactflow';
-import { Tooltip } from '@tokens-studio/ui';
+import { TooltipContainer } from '@tokens-studio/ui';
 import { store } from '@/redux/store.js';
 import React from 'react';
 
 describe('<PlayControls />', () => {
   it('renders', () => {
     cy.mount(
-      <Tooltip.Provider>
+      <>
         <Provider store={store}>
           <ReactFlowProvider>
             <GraphToolbar />
           </ReactFlowProvider>
         </Provider>
-      </Tooltip.Provider>,
+        <TooltipContainer id="default-tooltip-id" />
+      </>,
     );
   });
 });

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

@@ -4,10 +4,9 @@
   gap: var(--component-spacing-xs);
   width: auto;
   min-width: max-content;
+  border: var(--component-border-width-sm) solid var(--stroke-subtle);
   border-radius: var(--component-radii-lg);
-  background-color: var(--color-neutral-canvas-default-bg);
-  color: var(--color-neutral-canvas-subtle-fg-default);
-  box-shadow: 0 2px 10px var(--color-neutral-800);
+  box-shadow: var(--elevation-medium);
   pointer-events: auto;
 }
 
@@ -24,6 +23,6 @@
 
 .separator {
   width: 1px;
-  background-color: var(--color-neutral-stroke-subtle);
+  background-color: var(--stroke-subtle);
   margin: 0 var(--component-spacing-2xs);
 }

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

@@ -6,7 +6,16 @@ import styles from './toolbar.module.css';
 
 export const GraphToolbar = () => {
   const toolbarButtons = useSelector(ToolBarButtonsSelector);
-  return <Toolbar.Root className={styles.root}>{toolbarButtons}</Toolbar.Root>;
+  return (
+    <Toolbar.Root
+      className={styles.root}
+      data-container="canvas"
+      data-appearance="neutral"
+      data-emphasis="default"
+    >
+      {toolbarButtons}
+    </Toolbar.Root>
+  );
 };
 
 export const ToolbarSeparator = ({ className = '', ...props }) => (

packages/graph-editor/src/css/cmdk.css

@@ -23,8 +23,8 @@
 [cmdk-root] {
     background-color: var(--color-neutral-canvas-default-bg);
     border-radius: var(--component-radii-md);
-    box-shadow: var(--shadows-contextMenu);
-    border: 1px solid var(--color-neutral-stroke-subtle);
+    box-shadow: var(--elevation-high);
+    border: var(--component-border-width-sm) solid var(--stroke-subtle);
     font-size: var(--fontSizes-small);
     color: var(--color-neutral-canvas-default-fg-default);
     width: 100%;
@@ -68,7 +68,7 @@
     width: 1px;
     border: 0;
     margin-right: 8px;
-    background: var(--color-neutral-stroke-default);
+    background: var(--stroke-default);
 }
 
 [cmdk-framer-right] {

packages/graph-editor/src/css/contexify.css

@@ -1,16 +1,13 @@
 @import url('react-contexify/ReactContexify.css');
 .contexify {
     --contexify-menu-bgColor: var(--color-neutral-canvas-default-bg);
-    --contexify-separator-color: var(--color-neutral-stroke-subtle);
+    --contexify-separator-color: var(--stroke-subtle);
     --contexify-item-color: var(--color-neutral-canvas-default-fg-default);
     --contexify-activeItem-color: var(--color-neutral-surface-ghost-idle-fg-default);
     --contexify-activeItem-bgColor: var(--color-neutral-surface-ghost-idle-bg);
     --contexify-rightSlot-color: var(--color-neutral-canvas-default-fg-subtle);
     --contexify-activeRightSlot-color: var(--color-neutral-surface-ghost-idle-fg-subtle);
     --contexify-arrow-color: var(--color-neutral-canvas-default-fg-subtle);
     --contexify-activeArrow-color: var(--color-neutral-canvas-default-fg-default);
-    --shadow-color: 0deg 0% 0%;
-    --contexify-menu-shadow: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
-    1.3px 2.6px 3.3px -1.2px hsl(var(--shadow-color) / 0.14),
-    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.14);;
+    --contexify-menu-shadow: var(--elevation-medium);
 }

packages/graph-editor/src/css/rc-dock.css

@@ -6,7 +6,7 @@
 }
 
 .dock-top .dock-bar {
-    border-bottom-color: var(--color-neutral-stroke-subtle);
+    border-bottom-color: var(--stroke-subtle);
     padding-left: 0px;
 
 }
@@ -61,7 +61,7 @@
 }
 
 .dock-panel.dock-style-main .dock-bar {
-    border-bottom-color: var(--color-neutral-stroke-subtle);
+    border-bottom-color: var(--stroke-subtle);
 }
 
 .drag-initiator {

packages/graph-editor/src/css/reactflow.css

@@ -21,11 +21,11 @@
 }
 .react-flow__node.selectable.selected,
 .react-flow__node.selectable:focus {
-    --nodeBorderColor: var(--color-accent-stroke-subtle);
+    --nodeBorderColor: var(--stroke-default);
     --nodeBgColor: var(--colors-nodeBg);
     --nodeTextColor: var(--color-neutral-canvas-default-fg-default);
-    outline: 2px solid var(--color-neutral-canvas-default-fg-default);
-    outline-offset: 5px;
+    outline: 2px solid var(--color-accent-base);
+    outline-offset: 8px;
     border-radius: var(--radii-medium, 8px);
 }
 

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

@@ -813,7 +813,7 @@ export const EditorApp = React.forwardRef<
             >
               {showGridValue && (
                 <Background
-                  color="var(--color-neutral-stroke-subtle)"
+                  color="var(--stroke-subtle)"
                   gap={16}
                   size={2}
                   variant={BackgroundVariant.Dots}