feat(ds): update design system (#33)

vault-developer · web-flow · commit e746d3d983db · 2025-01-12T09:37:20.000+01:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import Home from './pages/home/Home.tsx';
-import { StylesProvider } from './styles/styles.provider.tsx';
+import { StylesProvider } from 'providers/StylesProvider.tsx';
 
 function App() {
 	return (
diff --git a/src/components/CloseIcon/InfoIcon.styled.ts b/src/components/CloseIcon/InfoIcon.styled.ts
@@ -4,10 +4,10 @@ import { css } from '@emotion/react';
 export const Closed = styled.svg(
 	({ theme }) => css`
 		cursor: pointer;
-		fill: ${theme.custom.colors.onContainerNormal};
+		fill: ${theme.custom.colors.onContainer.normal};
 
 		&:hover {
-			fill: ${theme.custom.colors.text};
+			fill: ${theme.custom.colors.onContainer.contrast};
 		}
 	`
 );
diff --git a/src/components/InfoIcon/InfoIcon.styled.ts b/src/components/InfoIcon/InfoIcon.styled.ts
@@ -7,10 +7,10 @@ export const Info = styled.svg(
 		top: 4px;
 		right: 4px;
 		cursor: pointer;
-		fill: ${theme.custom.colors.onContainerNormal};
+		fill: ${theme.custom.colors.onContainer.normal};
 
 		&:hover {
-			fill: ${theme.custom.colors.text};
+			fill: ${theme.custom.colors.onContainer.contrast};
 		}
 	`
 );
diff --git a/src/components/MoonIcon/MoonIcon.styled.ts b/src/components/MoonIcon/MoonIcon.styled.ts
@@ -4,6 +4,6 @@ import { css } from '@emotion/react';
 export const Sun = styled.svg(
 	({ theme }) => css`
 		cursor: pointer;
-		fill: ${theme.custom.colors.text};
+		fill: ${theme.custom.colors.onContainer.contrast};
 	`
 );
diff --git a/src/components/MoonIcon/MoonIcon.tsx b/src/components/MoonIcon/MoonIcon.tsx
@@ -9,7 +9,7 @@ function MoonIcon({
 	onClick: () => void;
 }) {
 	const theme = useTheme();
-	const textColor = theme.custom.colors.text;
+	const textColor = theme.custom.colors.onContainer.contrast;
 
 	return (
 		<Styled.Sun
diff --git a/src/components/SunIcon/SunIcon.styled.ts b/src/components/SunIcon/SunIcon.styled.ts
@@ -4,6 +4,6 @@ import { css } from '@emotion/react';
 export const Sun = styled.svg(
 	({ theme }) => css`
 		cursor: pointer;
-		fill: ${theme.custom.colors.text};
+		fill: ${theme.custom.colors.onContainer.contrast};
 	`
 );
diff --git a/src/components/SunIcon/SunIcon.tsx b/src/components/SunIcon/SunIcon.tsx
@@ -9,7 +9,7 @@ function SunIcon({
 	onClick: () => void;
 }) {
 	const theme = useTheme();
-	const textColor = theme.custom.colors.text;
+	const textColor = theme.custom.colors.onContainer.contrast;
 
 	return (
 		<Styled.Sun
diff --git a/src/emotion.d.ts b/src/emotion.d.ts
@@ -3,6 +3,7 @@ import '@emotion/react';
 declare module '@emotion/react' {
 	export interface Theme {
 		custom: {
+			mode: 'light' | 'dark';
 			breakpoints: {
 				desktop: number;
 			};
@@ -14,26 +15,16 @@ declare module '@emotion/react' {
 			};
 			colors: {
 				background: string;
+				onBackground: string;
 				container: string;
-				onContainerNormal: string;
-				onContainerContrast: string;
-				text: string;
-
-				wheel: {
-					background: string;
-					microtask: {
-						disabled: string;
-						enabled: string;
-					};
-					macrotask: {
-						disabled: string;
-						enabled: string;
-					};
-					render: {
-						disabled: string;
-						enabled: string;
-					};
+				onContainer: {
+					dim: string;
+					normal: string;
+					contrast: string;
 				};
+				primary: string;
+				secondary: string;
+				tertiary: string;
 			};
 		};
 	}
diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts
@@ -59,7 +59,7 @@ export const NarrowColumn = styled.div(
 
 export const BaseLayoutElement = styled.div(
 	({ theme }) => css`
-		border: 1px solid ${theme.custom.colors.wheel.background};
+		border: 1px solid ${theme.custom.colors.onContainer.dim};
 		background: ${theme.custom.colors.container};
 		margin: 0;
 		padding: 10px;
diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts
@@ -12,7 +12,7 @@ export const Callstack = styled.div`
 
 export const CallstackElement = styled.div(
 	({ theme }) => css`
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.dim};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
diff --git a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts
@@ -10,16 +10,17 @@ export const EditorWrapper = styled.div(
 		}
 
 		.ace_gutter {
-			background: ${theme.custom.colors.wheel.background};
+			background: ${theme.custom.colors.onContainer.dim};
 		}
 
 		.selected_lines {
 			position: absolute;
-			background: ${theme.custom.colors.wheel.macrotask.disabled};
+			background: ${theme.custom.colors.tertiary};
+			opacity: 0.3;
 		}
 
 		.ace_gutter-active-line {
-			background: ${theme.custom.colors.wheel.background};
+			background: ${theme.custom.colors.onContainer.dim};
 		}
 
 		.ace_content {
diff --git a/src/pages/home/sections/Console/Console.styled.ts b/src/pages/home/sections/Console/Console.styled.ts
@@ -11,7 +11,7 @@ export const LogQueue = styled.div`
 
 export const Log = styled.div(
 	({ theme }) => css`
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.dim};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts
@@ -11,7 +11,7 @@ export const MicroTasksQueue = styled.div`
 
 export const MicroTask = styled.div(
 	({ theme }) => css`
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.dim};
 		flex: 1;
 		display: flex;
 		justify-content: center;
diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts
@@ -11,7 +11,7 @@ export const CallbacksQueue = styled.div`
 
 export const Callback = styled.div(
 	({ theme }) => css`
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.dim};
 		flex: 1;
 		display: flex;
 		justify-content: center;
diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts
@@ -11,7 +11,7 @@ export const TasksQueue = styled.div`
 
 export const Task = styled.div(
 	({ theme }) => css`
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.dim};
 		flex: 1;
 		display: flex;
 		justify-content: center;
diff --git a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 
 export const WebApiItem = styled.div(
 	({ theme }) => css`
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.dim};
 		border-radius: 5px;
 		padding: 10px;
 		position: absolute;
@@ -22,8 +22,8 @@ export const Progress = styled.div<{ progress: number }>(
 	({ theme, progress }) => css`
 		background-color: transparent;
 		background-image: conic-gradient(
-			${theme.custom.colors.onContainerContrast},
-			${theme.custom.colors.onContainerContrast} ${progress}%,
+			${theme.custom.colors.onContainer.contrast},
+			${theme.custom.colors.onContainer.contrast} ${progress}%,
 			transparent ${progress}%
 		);
 		border-radius: 5px;
diff --git a/src/pages/home/sections/Wheel/Pointer/Pointer.styled.ts b/src/pages/home/sections/Wheel/Pointer/Pointer.styled.ts
@@ -30,7 +30,7 @@ export const SectorWithInnerBorder = styled.div(
 		border-image: linear-gradient(
 			to right,
 			transparent 50%,
-			${colors.text} 50%
+			${colors.onContainer.contrast} 50%
 		);
 		box-sizing: border-box;
 
@@ -46,7 +46,8 @@ export const SectorWithInnerBorder = styled.div(
 				0 0;
 			transform-origin: 50% 100%;
 			transform: rotate(160deg);
-			border-left: ${eventLoopPointerBorderWidth}px solid ${colors.text};
+			border-left: ${eventLoopPointerBorderWidth}px solid
+				${colors.onContainer.contrast};
 			box-sizing: border-box;
 			left: 0;
 		}
@@ -66,7 +67,11 @@ export const SectorWithOuterBorder = styled.div(
 		transform-origin: 50% 100%;
 		transform: rotate(280deg);
 		border-bottom: ${widths.eventLoopPointerBorderWidth}px solid transparent;
-		border-image: linear-gradient(to right, transparent 50%, ${colors.text} 50%)
+		border-image: linear-gradient(
+				to right,
+				transparent 50%,
+				${colors.onContainer.contrast} 50%
+			)
 			1;
 		box-sizing: border-box;
 
@@ -77,10 +82,11 @@ export const SectorWithOuterBorder = styled.div(
 			content: '';
 			border-radius: ${widths.eventLoopRadius}px ${widths.eventLoopRadius}px 0 0;
 			border-bottom: ${widths.eventLoopPointerBorderWidth}px solid
-				${colors.text};
+				${colors.onContainer.contrast};
 			transform-origin: 50% 100%;
 			transform: rotate(160deg);
-			border-left: ${widths.eventLoopPointerBorderWidth}px solid ${colors.text};
+			border-left: ${widths.eventLoopPointerBorderWidth}px solid
+				${colors.onContainer.contrast};
 			box-sizing: border-box;
 			left: 0;
 		}
diff --git a/src/pages/home/sections/Wheel/Wheel.styled.ts b/src/pages/home/sections/Wheel/Wheel.styled.ts
@@ -30,13 +30,31 @@ export const CircleOuter = styled.div(
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background: ${theme.custom.colors.wheel.background};
+		background: ${theme.custom.colors.onContainer.dim};
 		border-radius: 50%;
 	`
 );
 
-export const Sector = styled.div<{ background: string; degree: number }>(
-	({ theme, background, degree }) => css`
+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;
@@ -52,12 +70,15 @@ export const Sector = styled.div<{ background: string; degree: number }>(
 			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;
 		}
-	`
-);
+	`;
+});
 
 export const CloseIcon = styled(InfoClosed)`
 	position: absolute;
diff --git a/src/pages/home/sections/Wheel/Wheel.tsx b/src/pages/home/sections/Wheel/Wheel.tsx
@@ -18,6 +18,13 @@ function Wheel({ className }: { className?: string }) {
 	const theme = useTheme();
 	const [isOpened, toggle] = useBoolean(false);
 
+	const { primary, secondary, tertiary } = theme.custom.colors;
+	const colors = {
+		microtask: primary,
+		macrotask: secondary,
+		render: tertiary,
+	};
+
 	return (
 		<BaseLayoutElement className={className}>
 			<p id={EVENT_LOOP_ID}>Event Loop</p>
@@ -26,12 +33,13 @@ function Wheel({ className }: { className?: string }) {
 				<Styled.CircleContainer>
 					<Styled.CircleOuter />
 					{events.map(({ degree, type }) => {
-						const enabled = stops[type] ? 'enabled' : 'disabled';
-						const background = theme.custom.colors.wheel[type][enabled];
+						const enabled = stops[type];
+						const background = colors[type];
 						return (
 							<Styled.Sector
 								id={`sector-${type}-new`}
 								key={degree}
+								enabled={enabled}
 								background={background}
 								degree={360 - degree + 10}
 							/>
diff --git a/src/providers/StylesProvider.tsx b/src/providers/StylesProvider.tsx
@@ -1,12 +1,14 @@
 import { Global, ThemeProvider } from '@emotion/react';
 import { PropsWithChildren } from 'react';
 import { useThemeStore } from 'store/store.ts';
-import { darkTheme, lightTheme } from './styles.theme.ts';
-import { getGlobalStyles } from './styles.utils.ts';
+import { getGlobalStyles } from './StylesProvider.utils.ts';
+import { colorsDark, colorsLight } from '../theme/colors.ts';
+import { getTheme } from '../theme/theme.ts';
 
 export function StylesProvider({ children }: PropsWithChildren) {
 	const { isDark } = useThemeStore();
-	const theme = isDark ? darkTheme : lightTheme;
+	const palette = isDark ? colorsDark : colorsLight;
+	const theme = getTheme(palette);
 	const globalStyles = getGlobalStyles({ theme });
 
 	return (
diff --git a/src/providers/StylesProvider.utils.ts b/src/providers/StylesProvider.utils.ts
@@ -3,7 +3,7 @@ import { css, Theme } from '@emotion/react';
 export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 	html {
 		font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-		color: ${theme.custom.colors.text};
+		color: ${theme.custom.colors.onBackground};
 		background-color: ${theme.custom.colors.background};
 		height: 100%;
 	}
@@ -25,7 +25,7 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 	}
 
 	a {
-		color: ${theme.custom.colors.text};
+		color: ${theme.custom.colors.onBackground};
 	}
 
 	body {
@@ -56,10 +56,10 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css`
 	}
 
 	::-webkit-scrollbar-thumb {
-		background: ${theme.custom.colors.onContainerNormal};
+		background: ${theme.custom.colors.onContainer.normal};
 	}
 
 	:focus-visible {
-		outline: 2px solid ${theme.custom.colors.onContainerNormal};
+		outline: 2px solid ${theme.custom.colors.onContainer.normal};
 	}
 `;
diff --git a/src/styles/styles.theme.ts b/src/styles/styles.theme.ts
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
diff --git a/src/theme/theme.ts b/src/theme/theme.ts

Original file line number	Diff line number	Diff line change
`@@ -4,10 +4,10 @@ import { css } from '@emotion/react';`
`4`	`4`	`export const Closed = styled.svg(`
`5`	`5`	({ theme }) => css`
`6`	`6`	`cursor: pointer;`
`7`		`- fill: ${theme.custom.colors.onContainerNormal};`
	`7`	`+ fill: ${theme.custom.colors.onContainer.normal};`
`8`	`8`
`9`	`9`	`&:hover {`
`10`		`- fill: ${theme.custom.colors.text};`
	`10`	`+ fill: ${theme.custom.colors.onContainer.contrast};`
`11`	`11`	`}`
`12`	`12`	`
`13`	`13`	`);`
Original file line number	Diff line number	Diff line change
`@@ -7,10 +7,10 @@ export const Info = styled.svg(`
`7`	`7`	`top: 4px;`
`8`	`8`	`right: 4px;`
`9`	`9`	`cursor: pointer;`
`10`		`- fill: ${theme.custom.colors.onContainerNormal};`
	`10`	`+ fill: ${theme.custom.colors.onContainer.normal};`
`11`	`11`
`12`	`12`	`&:hover {`
`13`		`- fill: ${theme.custom.colors.text};`
	`13`	`+ fill: ${theme.custom.colors.onContainer.contrast};`
`14`	`14`	`}`
`15`	`15`	`
`16`	`16`	`);`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@ import { css } from '@emotion/react';`
`4`	`4`	`export const Sun = styled.svg(`
`5`	`5`	({ theme }) => css`
`6`	`6`	`cursor: pointer;`
`7`		`- fill: ${theme.custom.colors.text};`
	`7`	`+ fill: ${theme.custom.colors.onContainer.contrast};`
`8`	`8`	`
`9`	`9`	`);`