diff --git a/.changeset/tired-carrots-grin.md b/.changeset/tired-carrots-grin.md new file mode 100644 index 00000000..72c96a88 --- /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 diff --git a/packages/graph-editor/.storybook/preview.module.css b/packages/graph-editor/.storybook/preview.module.css index a44284be..6416e4f0 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 af40a1b2..394555a6 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.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", diff --git a/packages/graph-editor/src/components/NodeHoverCard.module.css b/packages/graph-editor/src/components/NodeHoverCard.module.css index 8b94191e..d0137118 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: 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; diff --git a/packages/graph-editor/src/components/colorPicker/InputPopover.module.css b/packages/graph-editor/src/components/colorPicker/InputPopover.module.css index 1f12ccc7..a04abcd3 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 a3d9415b..610ea8c1 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 04fd59a3..01a6ecaf 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 dc805ce6..7fc89823 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 a9e0c10d..220086e4 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 2744c35f..04c93a53 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 c71ff034..c5d10b75 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/handles.module.css b/packages/graph-editor/src/components/flow/handles.module.css index 986be426..144eac3f 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 e456a650..56f87f5d 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 6c44eb7a..bcac0168 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(--color-neutral-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 3d356318..93f26dda 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); } @@ -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); } \ 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 af42dc76..de4c0bf5 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 ff753647..260ea594 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 8bd24bad..f0bdd814 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,11 @@ 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" + /> ); }; diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx index 7496cb9c..079f4960 100644 --- a/packages/graph-editor/src/components/toolbar/dropdowns/help.tsx +++ b/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 = () => ( - - - } /> - - + + } + data-tooltip-content="Help" + /> + ', () => { 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 de6778ef..f135c512 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; } @@ -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); } diff --git a/packages/graph-editor/src/components/toolbar/toolbar.tsx b/packages/graph-editor/src/components/toolbar/toolbar.tsx index fce1acc4..2c48c23d 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 }) => ( diff --git a/packages/graph-editor/src/css/cmdk.css b/packages/graph-editor/src/css/cmdk.css index 9b2e1d00..1f9624d9 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(--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] { diff --git a/packages/graph-editor/src/css/contexify.css b/packages/graph-editor/src/css/contexify.css index f1416c8f..485e09dc 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); @@ -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 diff --git a/packages/graph-editor/src/css/rc-dock.css b/packages/graph-editor/src/css/rc-dock.css index 36e00579..d170df4b 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 880b1585..ed348780 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 0f7b738e..e0d2f66a 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 de810e19..7eb624c5 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 1e1a2c03..63ce647b 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 8567fe47..cda0ca4d 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 d3f36f19..876d846f 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.1", "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 bd0ced53..48b4ec5c 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 26c1c7c8..1435cd0e 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 006c7711..ce8b5028 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.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/packages/ui/src/app/dashboard/clientPage.module.css b/packages/ui/src/app/dashboard/clientPage.module.css index ceb716d0..32aa9c08 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 34487400..208578d4 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 61183db0..1a89393a 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 13b940c2..6f5e689c 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 5e522303..059749bc 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.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" + "@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.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"