fix(transition): fix wheel transitions

Author: vault-developer

CHANGELOG.md

@@ -1,16 +1,14 @@
 # [1.12.0](https://github.com/vault-developer/event-loop-explorer/compare/v1.11.5...v1.12.0) (2025-01-25)
 
-
 ### Features
 
-* **transition:** add color transition ([c57add7](https://github.com/vault-developer/event-loop-explorer/commit/c57add774c09140a844c35ca38d699dfd838f2fe))
+- **transition:** add color transition ([c57add7](https://github.com/vault-developer/event-loop-explorer/commit/c57add774c09140a844c35ca38d699dfd838f2fe))
 
 ## [1.11.5](https://github.com/vault-developer/event-loop-explorer/compare/v1.11.4...v1.11.5) (2025-01-25)
 
-
 ### Bug Fixes
 
-* **colors:** update wheel colors ([a6be71e](https://github.com/vault-developer/event-loop-explorer/commit/a6be71e6e512280842b5ad9683d1f1aaf6ee3d25))
+- **colors:** update wheel colors ([a6be71e](https://github.com/vault-developer/event-loop-explorer/commit/a6be71e6e512280842b5ad9683d1f1aaf6ee3d25))
 
 ## [1.11.4](https://github.com/vault-developer/event-loop-explorer/compare/v1.11.3...v1.11.4) (2025-01-19)
 

src/pages/home/sections/Callstack/Callstack.styled.ts

@@ -13,6 +13,7 @@ export const Callstack = styled.div`
 export const CallstackElement = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
+		transition: background-color ${theme.custom.colorTransition};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;

src/pages/home/sections/Console/Console.styled.ts

@@ -12,6 +12,7 @@ export const LogQueue = styled.div`
 export const Log = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
+		transition: background-color ${theme.custom.colorTransition};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;

src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts

@@ -15,7 +15,11 @@ export const SVGContainer = styled.svg(
 		path,
 		text,
 		circle {
-			transition: all ${theme.custom.colorTransition};
+			transition:
+				background-color ${theme.custom.colorTransition},
+				color ${theme.custom.colorTransition},
+				stroke ${theme.custom.colorTransition},
+				fill ${theme.custom.colorTransition};
 		}
 	`
 );

src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts

@@ -12,6 +12,7 @@ export const MicroTasksQueue = styled.div`
 export const MicroTask = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
+		transition: background-color ${theme.custom.colorTransition};
 		flex: 1;
 		display: flex;
 		justify-content: center;

src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts

@@ -12,6 +12,7 @@ export const CallbacksQueue = styled.div`
 export const Callback = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
+		transition: background-color ${theme.custom.colorTransition};
 		flex: 1;
 		display: flex;
 		justify-content: center;

src/pages/home/sections/TasksQueue/TasksQueue.styled.ts

@@ -12,6 +12,7 @@ export const TasksQueue = styled.div`
 export const Task = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
+		transition: background-color ${theme.custom.colorTransition};
 		flex: 1;
 		display: flex;
 		justify-content: center;

src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts

@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 export const WebApiItem = styled.div(
 	({ theme }) => css`
 		background: ${theme.custom.colors.onContainer.dim};
+		transition: background-color ${theme.custom.colorTransition};
 		border-radius: 5px;
 		padding: 10px;
 		position: absolute;