From 99e15069719236609f6b738d303c2a6e6f32b7d8 Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 30 Jul 2025 08:46:58 +0200 Subject: [PATCH 1/6] update to the latest DS version --- .../.storybook/preview.module.css | 2 +- packages/graph-editor/package.json | 4 +- .../src/components/NodeHoverCard.module.css | 2 +- .../colorPicker/InputPopover.module.css | 2 +- .../components/colorPicker/index.module.css | 4 +- .../commandPalette/index.module.css | 2 +- .../src/components/controls/color.module.css | 4 +- .../controls/variadicColor.module.css | 4 +- .../src/components/curveEditor/override.css | 6 +- .../src/components/debugger/index.css | 2 +- .../components/flow/wrapper/base.module.css | 2 +- .../src/components/menubar/menubar.css | 4 +- .../src/components/panels/logs/index.tsx | 2 +- .../src/components/slider/index.module.css | 2 +- .../components/toolbar/buttons/settings.tsx | 16 +-- .../src/components/toolbar/dropdowns/help.tsx | 15 ++- .../src/components/toolbar/toolbar.cy.tsx | 7 +- .../src/components/toolbar/toolbar.module.css | 2 +- packages/graph-editor/src/css/cmdk.css | 4 +- packages/graph-editor/src/css/contexify.css | 2 +- packages/graph-editor/src/css/rc-dock.css | 4 +- packages/graph-editor/src/css/reactflow.css | 6 +- packages/graph-editor/src/editor/graph.tsx | 2 +- packages/graph-editor/src/editor/index.tsx | 28 ++-- .../src/editor/layoutController.tsx | 25 ++-- packages/graph-editor/src/hooks/useToast.tsx | 127 +++++++++--------- packages/graph-editor/src/index.css | 6 +- packages/nodes-design-tokens/package.json | 2 +- .../src/ui/controls/preview/color.tsx | 2 +- packages/nodes-figma/package.json | 2 +- packages/nodes-fs/package.json | 2 +- packages/nodes-previews/package.json | 2 +- .../src/token/dimension/panel.tsx | 7 +- .../src/token/palette/panel.tsx | 11 +- .../nodes-previews/src/token/table/panel.tsx | 4 +- .../src/token/typography/panel.tsx | 4 +- packages/ui/package.json | 4 +- .../src/app/dashboard/clientPage.module.css | 2 +- packages/ui/src/app/layout.tsx | 6 +- packages/ui/src/components/rail.tsx | 2 +- .../ui/src/components/share/index.module.css | 2 +- yarn.lock | 59 ++------ 42 files changed, 186 insertions(+), 211 deletions(-) diff --git a/packages/graph-editor/.storybook/preview.module.css b/packages/graph-editor/.storybook/preview.module.css index a44284be8..6416e4f02 100644 --- a/packages/graph-editor/.storybook/preview.module.css +++ b/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; } diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json index af40a1b2e..7691288a4 100644 --- a/packages/graph-editor/package.json +++ b/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.8", "@tokens-studio/types": "^0.5.1", - "@tokens-studio/ui": "^1.0.13", + "@tokens-studio/ui": "^3.0.0", "@xzdarcy/react-timeline-editor": "^0.1.9", "array-move": "^4.0.0", "clsx": "^2.1.1", diff --git a/packages/graph-editor/src/components/NodeHoverCard.module.css b/packages/graph-editor/src/components/NodeHoverCard.module.css index 8b94191ec..31f25d522 100644 --- a/packages/graph-editor/src/components/NodeHoverCard.module.css +++ b/packages/graph-editor/src/components/NodeHoverCard.module.css @@ -44,7 +44,7 @@ .hoverCardContent { border-radius: var(--component-radii-md); - border: 1px solid var(--color-neutral-stroke-subtle); + border: var(--component-border-width-md) solid var(--stroke-subtle); padding: var(--component-spacing-lg); width: 300px; background-color: var(--color-neutral-canvas-minimal-bg); diff --git a/packages/graph-editor/src/components/colorPicker/InputPopover.module.css b/packages/graph-editor/src/components/colorPicker/InputPopover.module.css index 1f12ccc7d..a04abcd3f 100644 --- a/packages/graph-editor/src/components/colorPicker/InputPopover.module.css +++ b/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; diff --git a/packages/graph-editor/src/components/colorPicker/index.module.css b/packages/graph-editor/src/components/colorPicker/index.module.css index a3d9415b1..610ea8c19 100644 --- a/packages/graph-editor/src/components/colorPicker/index.module.css +++ b/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); } } diff --git a/packages/graph-editor/src/components/commandPalette/index.module.css b/packages/graph-editor/src/components/commandPalette/index.module.css index 04fd59a3e..01a6ecaf3 100644 --- a/packages/graph-editor/src/components/commandPalette/index.module.css +++ b/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 { diff --git a/packages/graph-editor/src/components/controls/color.module.css b/packages/graph-editor/src/components/controls/color.module.css index dc805ce6e..7fc898230 100644 --- a/packages/graph-editor/src/components/controls/color.module.css +++ b/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); } \ No newline at end of file diff --git a/packages/graph-editor/src/components/controls/variadicColor.module.css b/packages/graph-editor/src/components/controls/variadicColor.module.css index a9e0c10da..220086e40 100644 --- a/packages/graph-editor/src/components/controls/variadicColor.module.css +++ b/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); } \ No newline at end of file diff --git a/packages/graph-editor/src/components/curveEditor/override.css b/packages/graph-editor/src/components/curveEditor/override.css index 2744c35f1..04c93a536 100644 --- a/packages/graph-editor/src/components/curveEditor/override.css +++ b/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); } \ No newline at end of file diff --git a/packages/graph-editor/src/components/debugger/index.css b/packages/graph-editor/src/components/debugger/index.css index c71ff0343..c5d10b751 100644 --- a/packages/graph-editor/src/components/debugger/index.css +++ b/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 { diff --git a/packages/graph-editor/src/components/flow/wrapper/base.module.css b/packages/graph-editor/src/components/flow/wrapper/base.module.css index 6c44eb7a1..427f720e3 100644 --- a/packages/graph-editor/src/components/flow/wrapper/base.module.css +++ b/packages/graph-editor/src/components/flow/wrapper/base.module.css @@ -14,7 +14,7 @@ box-shadow: var(--shadows-contextMenu); border-radius: var(--component-radii-md); background: var(--color-neutral-canvas-default-bg); - border: 2px solid var(--color-neutral-stroke-subtle); + border: 2px solid var(--stroke-subtle); flex: 1; display: flex; } diff --git a/packages/graph-editor/src/components/menubar/menubar.css b/packages/graph-editor/src/components/menubar/menubar.css index 3d3563182..9e9c4eee9 100644 --- a/packages/graph-editor/src/components/menubar/menubar.css +++ b/packages/graph-editor/src/components/menubar/menubar.css @@ -12,7 +12,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 +62,5 @@ } .rc-menu-item-divider{ - background-color: var(--color-neutral-stroke-subtle); + background-color: var(--stroke-subtle); } \ No newline at end of file diff --git a/packages/graph-editor/src/components/panels/logs/index.tsx b/packages/graph-editor/src/components/panels/logs/index.tsx index af42dc762..de4c0bf5d 100644 --- a/packages/graph-editor/src/components/panels/logs/index.tsx +++ b/packages/graph-editor/src/components/panels/logs/index.tsx @@ -64,7 +64,7 @@ export function LogsPanel() {
diff --git a/packages/graph-editor/src/components/slider/index.module.css b/packages/graph-editor/src/components/slider/index.module.css index ff753647c..260ea594b 100644 --- a/packages/graph-editor/src/components/slider/index.module.css +++ b/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; diff --git a/packages/graph-editor/src/components/toolbar/buttons/settings.tsx b/packages/graph-editor/src/components/toolbar/buttons/settings.tsx index 8bd24bad0..707b3daae 100644 --- a/packages/graph-editor/src/components/toolbar/buttons/settings.tsx +++ b/packages/graph-editor/src/components/toolbar/buttons/settings.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,12 +6,12 @@ import Settings from '@tokens-studio/icons/Settings.js'; export const SettingsToolbarButton = () => { const onClick = useLayoutButton(); return ( - - onClick('settings')} - icon={} - /> - + onClick('settings')} + icon={} + data-tooltip-content="Settings" + data-tooltip-id="default-tooltip-id" + /> ); }; diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx index 7496cb9c4..9f6b054d7 100644 --- a/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx +++ b/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx @@ -1,14 +1,17 @@ -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 = () => ( - - - } /> - - + + } + data-tooltip-content="Help" + data-tooltip-id="default-tooltip-id" + /> + ', () => { it('renders', () => { cy.mount( - + <> - , + + , ); }); }); diff --git a/packages/graph-editor/src/components/toolbar/toolbar.module.css b/packages/graph-editor/src/components/toolbar/toolbar.module.css index de6778efd..db6ab24e0 100644 --- a/packages/graph-editor/src/components/toolbar/toolbar.module.css +++ b/packages/graph-editor/src/components/toolbar/toolbar.module.css @@ -24,6 +24,6 @@ .separator { width: 1px; - background-color: var(--color-neutral-stroke-subtle); + background-color: var(--stroke-subtle); margin: 0 var(--component-spacing-2xs); } diff --git a/packages/graph-editor/src/css/cmdk.css b/packages/graph-editor/src/css/cmdk.css index 9b2e1d002..61b7bad4b 100644 --- a/packages/graph-editor/src/css/cmdk.css +++ b/packages/graph-editor/src/css/cmdk.css @@ -24,7 +24,7 @@ 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); + border: 1px 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] { diff --git a/packages/graph-editor/src/css/contexify.css b/packages/graph-editor/src/css/contexify.css index f1416c8f4..4f8d26a54 100644 --- a/packages/graph-editor/src/css/contexify.css +++ b/packages/graph-editor/src/css/contexify.css @@ -1,7 +1,7 @@ @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); diff --git a/packages/graph-editor/src/css/rc-dock.css b/packages/graph-editor/src/css/rc-dock.css index 36e00579d..d170df4bb 100644 --- a/packages/graph-editor/src/css/rc-dock.css +++ b/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 { diff --git a/packages/graph-editor/src/css/reactflow.css b/packages/graph-editor/src/css/reactflow.css index 880b15850..ed348780d 100644 --- a/packages/graph-editor/src/css/reactflow.css +++ b/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); } diff --git a/packages/graph-editor/src/editor/graph.tsx b/packages/graph-editor/src/editor/graph.tsx index 0f7b738e2..e0d2f66ad 100644 --- a/packages/graph-editor/src/editor/graph.tsx +++ b/packages/graph-editor/src/editor/graph.tsx @@ -813,7 +813,7 @@ export const EditorApp = React.forwardRef< > {showGridValue && ( ( // Note that the provider exists around the layout controller so that the layout controller can register itself during mount return ( - - - - - + + + ); }, ); diff --git a/packages/graph-editor/src/editor/layoutController.tsx b/packages/graph-editor/src/editor/layoutController.tsx index de810e195..7eb624c51 100644 --- a/packages/graph-editor/src/editor/layoutController.tsx +++ b/packages/graph-editor/src/editor/layoutController.tsx @@ -15,11 +15,12 @@ import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js'; import { ExternalLoaderProvider } from '@/context/ExternalLoaderContext.js'; import { FindDialog } from '@/components/dialogs/findDialog.js'; import { GraphEditor } from './graphEditor.js'; -import { IconButton, Stack, Tooltip } from '@tokens-studio/ui'; +import { IconButton, Stack, TooltipContainer } from '@tokens-studio/ui'; import { Inputsheet } from '@/components/panels/inputs/index.js'; import { MAIN_GRAPH_ID } from '@/constants.js'; import { MenuBar, defaultMenuDataFactory } from '@/components/menubar/index.js'; import { OutputSheet } from '@/components/panels/output/index.js'; +import { Toaster } from '@tokens-studio/ui/Toast.js'; import { dockerSelector } from '@/redux/selectors/refs.js'; import { useDispatch } from '@/hooks/useDispatch.js'; import { useRegisterRef } from '@/hooks/useRegisterRef.js'; @@ -346,17 +347,17 @@ export const LayoutController = React.forwardRef< style={{ height: '100%' }} > {props.showMenu && } - - - - + + + + ); diff --git a/packages/graph-editor/src/hooks/useToast.tsx b/packages/graph-editor/src/hooks/useToast.tsx index 1e1a2c035..63ce647be 100644 --- a/packages/graph-editor/src/hooks/useToast.tsx +++ b/packages/graph-editor/src/hooks/useToast.tsx @@ -1,92 +1,93 @@ -import { Toast } from '@tokens-studio/ui'; -import React, { createContext, useCallback, useEffect, useRef } from 'react'; +import { type ReactElement, useCallback, useEffect } from 'react'; +import { toast } from '@tokens-studio/ui/Toast.js'; -export interface IToast { +interface IToast { title: string; - description: string; + description: string | ReactElement; + appearance?: ToastAppearance; } -export interface IToastProviderContext { - enqueueToast: (toast: IToast) => void; +interface ErrorWithMessage { + message: string; } -export const ToastProviderContext = createContext({ - enqueueToast: () => { - /**/ - }, -}); - -export interface IToastProviderProps { - children: React.ReactNode; +interface ErrorWithErrors { + errors: ErrorWithMessage[]; } -export const ToastProvider = (props: IToastProviderProps) => { - const { children } = props; - const [toasts, setToasts] = React.useState([] as JSX.Element[]); - const ref = useRef({ - toasts: [] as JSX.Element[], - }); - - const enqueueToast = useCallback(({ title, description }) => { - const id = Date.now(); - const onChange = () => { - ref.current.toasts = ref.current.toasts.filter( - (x) => x.key != String(id), - ); - setToasts(ref.current.toasts); - }; - - setTimeout(() => { - onChange(); - }, 8000); - - const ele = ( - - - {title} - {description} - - - ); +interface ErrorWithBody { + body: { + message: string; + }; +} - setToasts([...ref.current.toasts, ele]); - // @ts-ignore - ref.current.toasts.push(ele); - }, []); +type ErrorType = + | string + | Error + | ErrorWithErrors + | ErrorWithBody + | null + | undefined; - return ( - - - {children} - {toasts} - - - - ); -}; +export enum ToastAppearance { + Error = 'error', + Success = 'success', + Message = 'message', +} export const useToast = () => { - const context = React.useContext(ToastProviderContext); - return context.enqueueToast; + const makeToast = useCallback((props: IToast) => { + switch (props.appearance) { + case ToastAppearance.Error: + toast.error(props.title, { + description: props.description, + }); + break; + case ToastAppearance.Success: + toast.success(props.title, { + description: props.description, + }); + break; + default: + toast.message(props.title, { + description: props.description, + }); + break; + } + }, []); + return makeToast; }; -export const useErrorToast = (error) => { +export const useErrorToast = (error: ErrorType) => { const makeToast = useToast(); useEffect(() => { if (error) { - if ((error as Error).message) { + if (typeof error === 'string') { + makeToast({ + title: 'Error', + description: error, + appearance: ToastAppearance.Error, + }); + } else if (error instanceof Error) { makeToast({ title: 'Error', description: error.message, + appearance: ToastAppearance.Error, }); - } else if (error.errors) { - // @ts-ignore - error.errors.forEach((element) => { + } else if ('errors' in error && error.errors) { + error.errors.forEach((element: ErrorWithMessage) => { makeToast({ title: 'Error', description: element.message, + appearance: ToastAppearance.Error, }); }); + } else if ('body' in error && error.body && error.body.message) { + makeToast({ + title: 'Error', + description: error.body.message, + appearance: ToastAppearance.Error, + }); } } }, [error, makeToast]); diff --git a/packages/graph-editor/src/index.css b/packages/graph-editor/src/index.css index 8567fe475..cda0ca4d5 100644 --- a/packages/graph-editor/src/index.css +++ b/packages/graph-editor/src/index.css @@ -13,7 +13,7 @@ .graph-editor { --colors-pageBg: var(--color-neutral-canvas-default-bg); --colors-nodeBg: var(--color-neutral-canvas-default-bg); - --colors-nodeBorder: var(--color-neutral-stroke-subtle); + --colors-nodeBorder: var(--color-subtle); --colors-graphBg: var(--color-neutral-canvas-minimal-bg); --colors-panelBg: var(--color-neutral-canvas-default-bg); } @@ -35,13 +35,13 @@ } .dock-panel.dock-style-main .dock-bar { - border-bottom-color: var(--color-neutral-stroke-subtle); + border-bottom-color: var(--stroke-subtle); } .dock-content-holder { scrollbar-color: var(--color-neutral-canvas-subtle-bg) transparent; scrollbar-width: thin; - border-bottom: var(--component-border-width-md) solid var(--color-neutral-stroke-subtle); + border-bottom: var(--component-border-width-md) solid var(--stroke-subtle); } .dock-top .dock-ink-bar { diff --git a/packages/nodes-design-tokens/package.json b/packages/nodes-design-tokens/package.json index d3f36f193..936803292 100644 --- a/packages/nodes-design-tokens/package.json +++ b/packages/nodes-design-tokens/package.json @@ -38,7 +38,7 @@ "dependencies": { "@adobe/leonardo-contrast-colors": "^1.0.0", "@tokens-studio/types": "^0.5.1", - "@tokens-studio/ui": "^1.0.13", + "@tokens-studio/ui": "^3.0.0", "colorjs.io": "^0.5.2", "dot-prop": "^8.0.2", "lodash.orderby": "^4.6.0", diff --git a/packages/nodes-design-tokens/src/ui/controls/preview/color.tsx b/packages/nodes-design-tokens/src/ui/controls/preview/color.tsx index bd0ced533..48b4ec5c7 100644 --- a/packages/nodes-design-tokens/src/ui/controls/preview/color.tsx +++ b/packages/nodes-design-tokens/src/ui/controls/preview/color.tsx @@ -10,7 +10,7 @@ export const PreviewColor = ({ value }) => {
{token.value}
{dimensionTokens.map(token => (
= ({ name, value }) => (
@@ -102,7 +102,12 @@ export const PalettePreview = observer( const tokenSet = (inputs.tokenSet?.value as TokenSet) || {}; return ( -
+
{Object.entries(tokenSet).map(([name, tokens]) => ( ))} diff --git a/packages/nodes-previews/src/token/table/panel.tsx b/packages/nodes-previews/src/token/table/panel.tsx index 26c1c7c82..1435cd0e3 100644 --- a/packages/nodes-previews/src/token/table/panel.tsx +++ b/packages/nodes-previews/src/token/table/panel.tsx @@ -21,7 +21,7 @@ export const TokenTablePreview = observer( @@ -34,7 +34,7 @@ export const TokenTablePreview = observer( {tokens.map(token => ( { const FontFamilyPreview = ({ fontFamily, weights }) => (
diff --git a/packages/ui/package.json b/packages/ui/package.json index 006c77111..803b98d12 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -46,8 +46,8 @@ "@tokens-studio/graph-engine-nodes-image": "*", "@tokens-studio/graph-engine-nodes-preview": "*", "@tokens-studio/icons": "^0.1.4", - "@tokens-studio/tokens": "^0.3.7", - "@tokens-studio/ui": "^2.1.1", + "@tokens-studio/tokens": "^0.3.8", + "@tokens-studio/ui": "^3.0.0", "@ts-rest/core": "^3.51.0", "@ts-rest/open-api": "^3.51.0", "@ts-rest/react-query": "^3.51.0", diff --git a/packages/ui/src/app/dashboard/clientPage.module.css b/packages/ui/src/app/dashboard/clientPage.module.css index ceb716d05..32aa9c08b 100644 --- a/packages/ui/src/app/dashboard/clientPage.module.css +++ b/packages/ui/src/app/dashboard/clientPage.module.css @@ -1,7 +1,7 @@ .graphContainer { flex: 1; border-radius: var(--component-radii-md); - border-color: var(--color-neutral-stroke-subtle); + border-color: var(--stroke-subtle); padding: var(--component-spacing-lg); } diff --git a/packages/ui/src/app/layout.tsx b/packages/ui/src/app/layout.tsx index 34487400d..208578d4a 100644 --- a/packages/ui/src/app/layout.tsx +++ b/packages/ui/src/app/layout.tsx @@ -1,10 +1,10 @@ import '@/styles/styles.css'; import '@tokens-studio/graph-editor/index.css'; -import '@tokens-studio/tokens/css/ts-theme-dark.css'; -import '@tokens-studio/tokens/css/ts-theme-light.css'; +import '@tokens-studio/tokens/css/dark.css'; +import '@tokens-studio/tokens/css/light.css'; -import '@tokens-studio/tokens/css/base.css'; +import '@tokens-studio/ui/css/base.css'; import '@tokens-studio/ui/css/normalize.css'; import '@tokens-studio/ui/css/utils.css'; diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx index 61183db08..1a89393a2 100644 --- a/packages/ui/src/components/rail.tsx +++ b/packages/ui/src/components/rail.tsx @@ -103,7 +103,7 @@ export const Rail = () => { direction='column' style={{ background: 'var(--color-neutral-canvas-minimal-bg)', - borderRight: '1px solid var(--color-neutral-stroke-default)', + borderRight: '1px solid var(--stroke-default)', color: 'var(--color-neutral-canvas-minimal-fg-default)', height: '100%', padding: diff --git a/packages/ui/src/components/share/index.module.css b/packages/ui/src/components/share/index.module.css index 13b940c22..6f5e689cf 100644 --- a/packages/ui/src/components/share/index.module.css +++ b/packages/ui/src/components/share/index.module.css @@ -1,6 +1,6 @@ .popoverContent { border-radius: var(--component-radii-md); - border: 1px solid var(--color-neutral-stroke-subtle); + border: 1px solid var(--stroke-subtle); padding: 0; width: 300px; background-color: var(--color-neutral-canvas-default-bg); diff --git a/yarn.lock b/yarn.lock index 5e5223034..f51537dd6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4398,24 +4398,6 @@ "@radix-ui/react-separator" "1.1.0" "@radix-ui/react-toggle-group" "1.1.0" -"@radix-ui/react-tooltip@^1.0.4": - version "1.1.1" - resolved "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.1.tgz" - integrity sha512-LLE8nzNE4MzPMw3O2zlVlkLFid3y9hMUs7uCbSHyKSo+tCN4yMCf+ZCCcfrYgsOC0TiHBPQ1mtpJ2liY3ZT3SQ== - dependencies: - "@radix-ui/primitive" "1.1.0" - "@radix-ui/react-compose-refs" "1.1.0" - "@radix-ui/react-context" "1.1.0" - "@radix-ui/react-dismissable-layer" "1.1.0" - "@radix-ui/react-id" "1.1.0" - "@radix-ui/react-popper" "1.2.0" - "@radix-ui/react-portal" "1.1.1" - "@radix-ui/react-presence" "1.1.0" - "@radix-ui/react-primitive" "2.0.0" - "@radix-ui/react-slot" "1.1.0" - "@radix-ui/react-use-controllable-state" "1.1.0" - "@radix-ui/react-visually-hidden" "1.1.0" - "@radix-ui/react-use-callback-ref@1.0.0": version "1.0.0" resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz" @@ -6144,13 +6126,20 @@ expr-eval-fork "^2.0.2" is-mergeable-object "^1.1.1" -"@tokens-studio/tokens@*", "@tokens-studio/tokens@^0.3.7": +"@tokens-studio/tokens@*": version "0.3.7" resolved "https://registry.npmjs.org/@tokens-studio/tokens/-/tokens-0.3.7.tgz" integrity sha512-rzsaD40DBfOaHF2oOa8vb8iB7hlVS1WIg9JAl/VfoWSbkBSMv1nmo1FqFiH3hdJY0tiiQoXCygPrmRS7GQSlnQ== dependencies: deepmerge-ts "^7.0.3" +"@tokens-studio/tokens@^0.3.8": + version "0.3.8" + resolved "https://registry.yarnpkg.com/@tokens-studio/tokens/-/tokens-0.3.8.tgz#7c484a12550464e0aef25fa804b8f154d2d1480f" + integrity sha512-d7qMuH+cHTqWgQaGo6a4wCHW8pK/7gtzXpYuUslH29DTkTfPjGfyPXERQLKvL1j41Z40q1CkfzzesKwl50wQhw== + dependencies: + deepmerge-ts "^7.0.3" + "@tokens-studio/types@^0.5.1": version "0.5.2" resolved "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.2.tgz" @@ -6180,34 +6169,10 @@ clsx "^2.1.1" react-tooltip "^5.28.0" -"@tokens-studio/ui@^1.0.13": - version "1.1.1" - resolved "https://registry.npmjs.org/@tokens-studio/ui/-/ui-1.1.1.tgz" - integrity sha512-l+gnEwzSnfb8nZcjZrRh8xi1QHVXMGnGdq7CHNkWdhk36N4D3iGoFUVjTrINS2Pta9Y25V5GSrtRbKaOGUWRzg== - dependencies: - "@radix-ui/react-accordion" "^1.1.2" - "@radix-ui/react-avatar" "^1.0.2" - "@radix-ui/react-checkbox" "^1.0.4" - "@radix-ui/react-context-menu" "^2.1.1" - "@radix-ui/react-dialog" "^1.1.6" - "@radix-ui/react-dropdown-menu" "^2.0.2" - "@radix-ui/react-icons" "^1.3.0" - "@radix-ui/react-label" "^2.0.0" - "@radix-ui/react-radio-group" "^1.1.3" - "@radix-ui/react-scroll-area" "^1.0.4" - "@radix-ui/react-select" "^2.1.6" - "@radix-ui/react-separator" "^1.0.2" - "@radix-ui/react-switch" "^1.0.3" - "@radix-ui/react-tabs" "^1.0.3" - "@radix-ui/react-toast" "^1.1.3" - "@radix-ui/react-toggle-group" "^1.0.2" - "@radix-ui/react-tooltip" "^1.0.4" - clsx "^2.1.1" - -"@tokens-studio/ui@^2.1.1": - version "2.1.1" - resolved "https://registry.npmjs.org/@tokens-studio/ui/-/ui-2.1.1.tgz" - integrity sha512-JMRlJYpZ17hnY1t/TVhpRt8A7mKbWvnNzPJJUyVWRwiJRmGd20eng//NL2AF0tr3jYmpYxcEniGCklfCbjEpMw== +"@tokens-studio/ui@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-3.0.0.tgz#6a049894bfbead0a3916c6d1ad8104e067f992e2" + integrity sha512-BFX+Ra6wFwznV7rx5ZBgrKGN8BxuxKkhTDT++wt7JLSZBgi9RVKYC/HH3+Gy5qIXZqH8JxrLbnqB46t60cyZ4w== dependencies: "@radix-ui/react-accordion" "^1.1.2" "@radix-ui/react-avatar" "^1.0.2" From 82e2e96c1dec03f4030fab60a433088a34d752ae Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 30 Jul 2025 08:47:55 +0200 Subject: [PATCH 2/6] changeset --- .changeset/tired-carrots-grin.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .changeset/tired-carrots-grin.md diff --git a/.changeset/tired-carrots-grin.md b/.changeset/tired-carrots-grin.md new file mode 100644 index 000000000..72c96a881 --- /dev/null +++ b/.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 From 52ac519f5725093fada6c008c77665922ec8bb64 Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 30 Jul 2025 09:54:05 +0200 Subject: [PATCH 3/6] update packages --- packages/graph-editor/package.json | 4 ++-- packages/nodes-design-tokens/package.json | 2 +- packages/nodes-figma/package.json | 2 +- packages/nodes-fs/package.json | 2 +- packages/nodes-previews/package.json | 2 +- packages/ui/package.json | 4 ++-- yarn.lock | 16 ++++++++-------- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json index 7691288a4..394555a6e 100644 --- a/packages/graph-editor/package.json +++ b/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.8", + "@tokens-studio/tokens": "^0.3.9", "@tokens-studio/types": "^0.5.1", - "@tokens-studio/ui": "^3.0.0", + "@tokens-studio/ui": "^3.0.1", "@xzdarcy/react-timeline-editor": "^0.1.9", "array-move": "^4.0.0", "clsx": "^2.1.1", diff --git a/packages/nodes-design-tokens/package.json b/packages/nodes-design-tokens/package.json index 936803292..876d846fe 100644 --- a/packages/nodes-design-tokens/package.json +++ b/packages/nodes-design-tokens/package.json @@ -38,7 +38,7 @@ "dependencies": { "@adobe/leonardo-contrast-colors": "^1.0.0", "@tokens-studio/types": "^0.5.1", - "@tokens-studio/ui": "^3.0.0", + "@tokens-studio/ui": "^3.0.1", "colorjs.io": "^0.5.2", "dot-prop": "^8.0.2", "lodash.orderby": "^4.6.0", diff --git a/packages/nodes-figma/package.json b/packages/nodes-figma/package.json index 5784ba3c6..8babc8d1c 100644 --- a/packages/nodes-figma/package.json +++ b/packages/nodes-figma/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@tokens-studio/types": "^0.5.1", - "@tokens-studio/ui": "^3.0.0", + "@tokens-studio/ui": "^3.0.1", "dot-prop": "^8.0.2" }, "peerDependencies": { diff --git a/packages/nodes-fs/package.json b/packages/nodes-fs/package.json index 6ce4cbeaa..fb877f3e3 100644 --- a/packages/nodes-fs/package.json +++ b/packages/nodes-fs/package.json @@ -31,7 +31,7 @@ "test": "vitest run" }, "dependencies": { - "@tokens-studio/ui": "^3.0.0", + "@tokens-studio/ui": "^3.0.1", "mobx-react-lite": "^4.0.5" }, "peerDependencies": { diff --git a/packages/nodes-previews/package.json b/packages/nodes-previews/package.json index a851fa8ad..8e28f4475 100644 --- a/packages/nodes-previews/package.json +++ b/packages/nodes-previews/package.json @@ -38,7 +38,7 @@ "@tokens-studio/graph-engine": "*", "@tokens-studio/graph-engine-nodes-design-tokens": "*", "@tokens-studio/icons": "^0.1.4", - "@tokens-studio/ui": "^3.0.0", + "@tokens-studio/ui": "^3.0.1", "colorjs.io": "^0.5.2", "react": "^18.2.0" }, diff --git a/packages/ui/package.json b/packages/ui/package.json index 803b98d12..ce8b5028e 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -46,8 +46,8 @@ "@tokens-studio/graph-engine-nodes-image": "*", "@tokens-studio/graph-engine-nodes-preview": "*", "@tokens-studio/icons": "^0.1.4", - "@tokens-studio/tokens": "^0.3.8", - "@tokens-studio/ui": "^3.0.0", + "@tokens-studio/tokens": "^0.3.9", + "@tokens-studio/ui": "^3.0.1", "@ts-rest/core": "^3.51.0", "@ts-rest/open-api": "^3.51.0", "@ts-rest/react-query": "^3.51.0", diff --git a/yarn.lock b/yarn.lock index f51537dd6..059749bc2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6133,10 +6133,10 @@ dependencies: deepmerge-ts "^7.0.3" -"@tokens-studio/tokens@^0.3.8": - version "0.3.8" - resolved "https://registry.yarnpkg.com/@tokens-studio/tokens/-/tokens-0.3.8.tgz#7c484a12550464e0aef25fa804b8f154d2d1480f" - integrity sha512-d7qMuH+cHTqWgQaGo6a4wCHW8pK/7gtzXpYuUslH29DTkTfPjGfyPXERQLKvL1j41Z40q1CkfzzesKwl50wQhw== +"@tokens-studio/tokens@^0.3.9": + version "0.3.9" + resolved "https://registry.yarnpkg.com/@tokens-studio/tokens/-/tokens-0.3.9.tgz#8feb32d2d2b881fb019dd96e7bc29e9397d9004a" + integrity sha512-yk2dBvrR1o35CQhHeGdtS2TdLImHRTf9rBWm2qYssG059P9eHfriKLCgASjuB+w8kp8jHohqZZZeZeMn3DpilQ== dependencies: deepmerge-ts "^7.0.3" @@ -6169,10 +6169,10 @@ clsx "^2.1.1" react-tooltip "^5.28.0" -"@tokens-studio/ui@^3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-3.0.0.tgz#6a049894bfbead0a3916c6d1ad8104e067f992e2" - integrity sha512-BFX+Ra6wFwznV7rx5ZBgrKGN8BxuxKkhTDT++wt7JLSZBgi9RVKYC/HH3+Gy5qIXZqH8JxrLbnqB46t60cyZ4w== +"@tokens-studio/ui@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-3.0.1.tgz#fe1daf4b4e3ab927575c851912aa3a36d6d93819" + integrity sha512-vY6SiCK258D36Pj6Oz7uAh4NulYFeU0aQWSNl6KIXkdeDcryr2oNE558gZNIut+8+sjVHc0DuSSwzulvsdynGA== dependencies: "@radix-ui/react-accordion" "^1.1.2" "@radix-ui/react-avatar" "^1.0.2" From 5f580f6786d8e5c7cf14cb456aa34e6fb8f4ad24 Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 30 Jul 2025 11:36:41 +0200 Subject: [PATCH 4/6] Remove redundant tooltip ID from toolbar components Deleted the unnecessary 'data-tooltip-id' attribute from SettingsToolbarButton and HelpDropdown components to clean up props and prevent potential tooltip conflicts. --- .../graph-editor/src/components/toolbar/buttons/settings.tsx | 1 - packages/graph-editor/src/components/toolbar/dropdowns/help.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/graph-editor/src/components/toolbar/buttons/settings.tsx b/packages/graph-editor/src/components/toolbar/buttons/settings.tsx index 707b3daae..f0bdd814e 100644 --- a/packages/graph-editor/src/components/toolbar/buttons/settings.tsx +++ b/packages/graph-editor/src/components/toolbar/buttons/settings.tsx @@ -11,7 +11,6 @@ export const SettingsToolbarButton = () => { onClick={() => onClick('settings')} icon={} data-tooltip-content="Settings" - data-tooltip-id="default-tooltip-id" /> ); }; diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx index 9f6b054d7..079f49604 100644 --- a/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx +++ b/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx @@ -9,7 +9,6 @@ export const HelpDropdown = () => ( emphasis="low" icon={} data-tooltip-content="Help" - data-tooltip-id="default-tooltip-id" /> From 2a676c036ab970a864ae8fc94c1588ba3aa71cfd Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 30 Jul 2025 11:47:11 +0200 Subject: [PATCH 5/6] fix shadows --- .../graph-editor/src/components/NodeHoverCard.module.css | 4 ++-- packages/graph-editor/src/components/flow/handles.module.css | 2 +- .../src/components/flow/nodes/passthroughNode.tsx | 2 +- .../graph-editor/src/components/flow/wrapper/base.module.css | 4 ++-- packages/graph-editor/src/components/menubar/menubar.css | 1 - packages/graph-editor/src/css/cmdk.css | 4 ++-- packages/graph-editor/src/css/contexify.css | 5 +---- 7 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/graph-editor/src/components/NodeHoverCard.module.css b/packages/graph-editor/src/components/NodeHoverCard.module.css index 31f25d522..d0137118c 100644 --- a/packages/graph-editor/src/components/NodeHoverCard.module.css +++ b/packages/graph-editor/src/components/NodeHoverCard.module.css @@ -44,11 +44,11 @@ .hoverCardContent { border-radius: var(--component-radii-md); - border: var(--component-border-width-md) solid var(--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; diff --git a/packages/graph-editor/src/components/flow/handles.module.css b/packages/graph-editor/src/components/flow/handles.module.css index 986be4260..144eac3f1 100644 --- a/packages/graph-editor/src/components/flow/handles.module.css +++ b/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; diff --git a/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx b/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx index e456a6501..56f87f5db 100644 --- a/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx +++ b/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 && ( diff --git a/packages/graph-editor/src/components/flow/wrapper/base.module.css b/packages/graph-editor/src/components/flow/wrapper/base.module.css index 427f720e3..bcac0168f 100644 --- a/packages/graph-editor/src/components/flow/wrapper/base.module.css +++ b/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(--stroke-subtle); flex: 1; display: flex; } diff --git a/packages/graph-editor/src/components/menubar/menubar.css b/packages/graph-editor/src/components/menubar/menubar.css index 9e9c4eee9..93f26dda0 100644 --- a/packages/graph-editor/src/components/menubar/menubar.css +++ b/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); } diff --git a/packages/graph-editor/src/css/cmdk.css b/packages/graph-editor/src/css/cmdk.css index 61b7bad4b..1f9624d90 100644 --- a/packages/graph-editor/src/css/cmdk.css +++ b/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(--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%; diff --git a/packages/graph-editor/src/css/contexify.css b/packages/graph-editor/src/css/contexify.css index 4f8d26a54..485e09dc1 100644 --- a/packages/graph-editor/src/css/contexify.css +++ b/packages/graph-editor/src/css/contexify.css @@ -9,8 +9,5 @@ --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); } \ No newline at end of file From 10cadccb919bcac34817f0c53e86be60eeed4d74 Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 30 Jul 2025 16:01:04 +0200 Subject: [PATCH 6/6] update toolbar to container data attribute --- .../src/components/toolbar/toolbar.module.css | 5 ++--- .../graph-editor/src/components/toolbar/toolbar.tsx | 11 ++++++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/graph-editor/src/components/toolbar/toolbar.module.css b/packages/graph-editor/src/components/toolbar/toolbar.module.css index db6ab24e0..f135c5124 100644 --- a/packages/graph-editor/src/components/toolbar/toolbar.module.css +++ b/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; } diff --git a/packages/graph-editor/src/components/toolbar/toolbar.tsx b/packages/graph-editor/src/components/toolbar/toolbar.tsx index fce1acc44..2c48c23d0 100644 --- a/packages/graph-editor/src/components/toolbar/toolbar.tsx +++ b/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 {toolbarButtons}; + return ( + + {toolbarButtons} + + ); }; export const ToolbarSeparator = ({ className = '', ...props }) => (