Merge pull request #721 from tokens-studio/fix/color-mode

mck · web-flow · commit 8aec053b146b · 2025-08-06T09:02:12.000+02:00
update packages, fix color-mode
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -92,7 +92,7 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang='en'>
-			<body className='ts-theme-dark graph-editor'>
+			<body className='graph-editor' data-theme='light'>
 				<Contexts>{children}</Contexts>
 			</body>
 		</html>
diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx
@@ -50,26 +50,23 @@ 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);
 	}, []);
 
 	const toggleTheme = () => {
 		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 (
-		<Tooltip label={isDark ? 'Light Mode' : 'Dark Mode'}>
+		<Tooltip label={isDark ? 'Dark Mode' : 'Light Mode'}>
 			<IconButton
 				emphasis='low'
 				style={{ padding: 'var(--component-spacing-sm)' }}
diff --git a/yarn.lock b/yarn.lock
@@ -6133,10 +6133,10 @@
   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==
+"@tokens-studio/tokens@^0.3.11":
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/tokens/-/tokens-0.3.11.tgz#17c4a1817e0890d273a7d94ad80cf32bf05d4cac"
+  integrity sha512-NHy3swYp6BUHl67L3Ny/Wc5umCLbxkLi5VTSnt5KsaeOc0nYB2VH3ps9AdKWsDwUqAqcD18B+tRyiZhi1lWA2w==
   dependencies:
     deepmerge-ts "^7.0.3"
 
@@ -6169,10 +6169,10 @@
     clsx "^2.1.1"
     react-tooltip "^5.28.0"
 
-"@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==
+"@tokens-studio/ui@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-3.0.4.tgz#a7e3d924cea391f0e1ea20c7663831de8608b922"
+  integrity sha512-sqGTidzVu5xMJEBVFZIyhE65hv15N8Z9vfhcL77GBj2y62aKdcbJ2qgOy7q5A690OP9Kf5SzC97bgmkN37D7GA==
   dependencies:
     "@radix-ui/react-accordion" "^1.1.2"
     "@radix-ui/react-avatar" "^1.0.2"
