feat(transition): add color transition

Author: vault-developer

CHANGELOG.md

@@ -1,9 +1,8 @@
 ## [1.11.4](https://github.com/vault-developer/event-loop-explorer/compare/v1.11.3...v1.11.4) (2025-01-19)
 
-
 ### Bug Fixes
 
-* fix selected lines ([ed63143](https://github.com/vault-developer/event-loop-explorer/commit/ed63143be5a6f25670e2c04805f940cea9c78bbb))
+- fix selected lines ([ed63143](https://github.com/vault-developer/event-loop-explorer/commit/ed63143be5a6f25670e2c04805f940cea9c78bbb))
 
 ## [1.11.3](https://github.com/vault-developer/event-loop-explorer/compare/v1.11.2...v1.11.3) (2025-01-14)
 

src/emotion.d.ts

@@ -7,6 +7,7 @@ declare module '@emotion/react' {
 			breakpoints: {
 				desktop: number;
 			};
+			colorTransition: string;
 			widths: {
 				eventLoopRadius: number;
 				eventLoopDiameter: number;

src/pages/home/Home.styled.ts

@@ -61,6 +61,9 @@ export const BaseLayoutElement = styled.div(
 	({ theme }) => css`
 		border: 1px solid ${theme.custom.colors.onContainer.dim};
 		background: ${theme.custom.colors.container};
+		transition:
+			background-color ${theme.custom.colorTransition},
+			border-color ${theme.custom.colorTransition};
 		margin: 0;
 		padding: 10px;
 	`

src/pages/home/sections/Configurator/Editor/Editor.styled.ts

@@ -7,24 +7,29 @@ export const EditorWrapper = styled.div(
 
 		.ace_layer.ace_gutter-layer {
 			background: ${theme.custom.colors.container};
+			transition: all ${theme.custom.colorTransition};
 		}
 
 		.ace_gutter {
 			background: ${theme.custom.colors.onContainer.dim};
+			transition: all ${theme.custom.colorTransition};
 		}
 
 		.selected_lines {
 			position: absolute;
 			background: ${theme.custom.colors.tertiary.normal};
+			transition: all ${theme.custom.colorTransition};
 			opacity: 0.3;
 		}
 
 		.ace_gutter-active-line {
 			background: ${theme.custom.colors.onContainer.dim};
+			transition: all ${theme.custom.colorTransition};
 		}
 
 		.ace_content {
 			background: ${theme.custom.colors.container};
+			transition: all ${theme.custom.colorTransition};
 		}
 	`
 );

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

@@ -10,71 +10,12 @@ export const CircleContainer = styled.div(
 	`
 );
 
-export const CircleInner = styled.div(
+export const SVGContainer = styled.svg(
 	({ theme }) => css`
-		position: absolute;
-		top: ${theme.custom.widths.eventLoopWheelWidth}px;
-		left: ${theme.custom.widths.eventLoopWheelWidth}px;
-		right: ${theme.custom.widths.eventLoopWheelWidth}px;
-		bottom: ${theme.custom.widths.eventLoopWheelWidth}px;
-		background: ${theme.custom.colors.container};
-		border-radius: 50%;
-	`
-);
-
-export const CircleOuter = styled.div(
-	({ theme }) => css`
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: ${theme.custom.colors.onContainer.dim};
-		border-radius: 50%;
+		path,
+		text,
+		circle {
+			transition: all ${theme.custom.colorTransition};
+		}
 	`
 );
-
-export const Sector = styled.div<{
-	background: string;
-	degree: number;
-	enabled: boolean;
-}>(({ theme, background, degree, enabled }) => {
-	const saturation = {
-		light: 2,
-		dark: 1.3,
-	}[theme.custom.mode];
-	const brightness = {
-		light: {
-			enabled: 1.4,
-			disabled: 1,
-		},
-		dark: {
-			enabled: 1,
-			disabled: 0.8,
-		},
-	}[theme.custom.mode];
-	return css`
-		height: ${theme.custom.widths.eventLoopRadius}px;
-		width: ${theme.custom.widths.eventLoopDiameter}px;
-		overflow: hidden;
-		position: absolute;
-		transform-origin: 50% 100%;
-		transform: rotate(${degree}deg);
-
-		&:before {
-			height: inherit;
-			width: inherit;
-			position: absolute;
-			content: '';
-			border-radius: ${theme.custom.widths.eventLoopRadius}px
-				${theme.custom.widths.eventLoopRadius}px 0 0;
-			background-color: ${background};
-			filter: saturate(${saturation})
-				brightness(${enabled ? brightness.enabled : brightness.disabled});
-			opacity: ${enabled ? 1 : 0.3};
-			transform-origin: 50% 100%;
-			transform: rotate(160deg);
-			left: 0;
-		}
-	`;
-});

src/pages/home/sections/EventLoop/Wheel/Wheel.tsx

@@ -65,7 +65,7 @@ function Wheel() {
 
 	return (
 		<Styled.CircleContainer>
-			<svg
+			<Styled.SVGContainer
 				id={WHEEL_ID}
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="-100 -100 200 200"
@@ -219,7 +219,7 @@ function Wheel() {
 				>
 					T<title>Task</title>
 				</text>
-			</svg>
+			</Styled.SVGContainer>
 		</Styled.CircleContainer>
 	);
 }

src/providers/StylesProvider.utils.ts

@@ -5,6 +5,7 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 		font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 		color: ${theme.custom.colors.onBackground};
 		background-color: ${theme.custom.colors.background};
+		transition: all ${theme.custom.colorTransition};
 		height: 100%;
 	}
 
@@ -26,6 +27,7 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 
 	a {
 		color: ${theme.custom.colors.onBackground};
+		transition: all ${theme.custom.colorTransition};
 	}
 
 	body {

src/theme/theme.ts

@@ -20,13 +20,15 @@ export const getMuiTheme = (cs: ColorsSystem) =>
 						fontSize: '14',
 						color: cs.colors.onContainer.contrast,
 						backgroundColor: cs.colors.onContainer.dim,
+						transition: 'all 1s ease',
 					},
 				},
 			},
 			MuiMenu: {
 				styleOverrides: {
 					list: {
 						backgroundColor: cs.colors.onContainer.dim,
+						transition: 'all 1s ease',
 					},
 				},
 			},
@@ -36,6 +38,14 @@ export const getMuiTheme = (cs: ColorsSystem) =>
 						'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
 							borderColor: cs.colors.onContainer.normal,
 						},
+						transition: 'all 1s ease',
+					},
+				},
+			},
+			MuiButton: {
+				styleOverrides: {
+					root: {
+						transition: 'all 1s ease',
 					},
 				},
 			},
@@ -60,6 +70,7 @@ export const getTheme = (cs: ColorsSystem): Theme => {
 			breakpoints: {
 				desktop: 768,
 			},
+			colorTransition: '1s ease',
 			widths: {
 				eventLoopRadius: 150,
 				eventLoopDiameter: 300,