From 6d98d1cc71f7db54a2ae6fbdc5594e7709354978 Mon Sep 17 00:00:00 2001 From: Marco Christian Krenn Date: Wed, 6 Aug 2025 08:55:07 +0200 Subject: [PATCH] update packages, fix color-mode --- 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 ++-- packages/ui/src/app/layout.tsx | 2 +- packages/ui/src/components/rail.tsx | 11 ++++------- yarn.lock | 16 ++++++++-------- 9 files changed, 21 insertions(+), 24 deletions(-) diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json index 394555a6..5f3144db 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.9", + "@tokens-studio/tokens": "^0.3.11", "@tokens-studio/types": "^0.5.1", - "@tokens-studio/ui": "^3.0.1", + "@tokens-studio/ui": "^3.0.4", "@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 876d846f..49b40a24 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.1", + "@tokens-studio/ui": "^3.0.4", "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 8babc8d1..ce7f1309 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.1", + "@tokens-studio/ui": "^3.0.4", "dot-prop": "^8.0.2" }, "peerDependencies": { diff --git a/packages/nodes-fs/package.json b/packages/nodes-fs/package.json index fb877f3e..1b633d58 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.1", + "@tokens-studio/ui": "^3.0.4", "mobx-react-lite": "^4.0.5" }, "peerDependencies": { diff --git a/packages/nodes-previews/package.json b/packages/nodes-previews/package.json index 8e28f447..62149299 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.1", + "@tokens-studio/ui": "^3.0.4", "colorjs.io": "^0.5.2", "react": "^18.2.0" }, diff --git a/packages/ui/package.json b/packages/ui/package.json index ce8b5028..d8ef25eb 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.9", - "@tokens-studio/ui": "^3.0.1", + "@tokens-studio/tokens": "^0.3.11", + "@tokens-studio/ui": "^3.0.4", "@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/layout.tsx b/packages/ui/src/app/layout.tsx index 208578d4..ee1e363f 100644 --- a/packages/ui/src/app/layout.tsx +++ b/packages/ui/src/app/layout.tsx @@ -92,7 +92,7 @@ export default function RootLayout({ }) { return ( - + {children} diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx index 1a89393a..a8be7ef7 100644 --- a/packages/ui/src/components/rail.tsx +++ b/packages/ui/src/components/rail.tsx @@ -50,11 +50,11 @@ const RailItem = ({ icon, label, link }: RailItem) => { }; const ThemeToggle = () => { - const [isDark, setIsDark] = useState(false); + const [isDark, setIsDark] = useState(true); useEffect(() => { // Check initial theme on mount - const isDarkMode = document.body.classList.contains('ts-theme-dark'); + const isDarkMode = document.body.getAttribute('data-theme') === 'dark'; setIsDark(isDarkMode); }, []); @@ -62,14 +62,11 @@ const ThemeToggle = () => { const newIsDark = !isDark; setIsDark(newIsDark); - document.body.classList.remove( - newIsDark ? 'ts-theme-light' : 'ts-theme-dark' - ); - document.body.classList.add(newIsDark ? 'ts-theme-dark' : 'ts-theme-light'); + document.body.setAttribute('data-theme', newIsDark ? 'dark' : 'light'); }; return ( - +