feat: update design system tokens

src/components/CloseIcon/CloseIcon.styled.ts

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+export const CloseIcon = styled.svg(
+	({ theme: { custom } }) => css`
+		cursor: pointer;
+		fill: ${custom.com.icon.background};
+	`
+);

src/components/CloseIcon/InfoIcon.tsx → src/components/CloseIcon/CloseIcon.tsx

@@ -1,23 +1,23 @@
-import * as Styled from './InfoIcon.styled.ts';
+import * as Styled from './CloseIcon.styled.ts';
 
-function InfoClosed({
+function CloseIcon({
 	className,
 	onClick,
 }: {
 	className?: string;
 	onClick: () => void;
 }) {
 	return (
-		<Styled.Closed
+		<Styled.CloseIcon
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 24 24"
 			width="32"
 			className={className}
 			onClick={onClick}
 		>
 			<path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm3.707,12.293a1,1,0,1,1-1.414,1.414L12,13.414,9.707,15.707a1,1,0,0,1-1.414-1.414L10.586,12,8.293,9.707A1,1,0,0,1,9.707,8.293L12,10.586l2.293-2.293a1,1,0,0,1,1.414,1.414L13.414,12Z" />
-		</Styled.Closed>
+		</Styled.CloseIcon>
 	);
 }
 
-export default InfoClosed;
+export default CloseIcon;

src/components/InfoIcon/InfoIcon.styled.ts

@@ -2,15 +2,11 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 export const Info = styled.svg(
-	({ theme }) => css`
+	({ theme: { custom } }) => css`
 		position: absolute;
-		top: 4px;
-		right: 4px;
+		top: 6px;
+		right: 6px;
 		cursor: pointer;
-		fill: ${theme.custom.colors.onContainer.normal};
-
-		&:hover {
-			fill: ${theme.custom.colors.onContainer.contrast};
-		}
+		fill: ${custom.com.icon.background};
 	`
 );

src/components/Modal/Modal.styled.ts

@@ -3,13 +3,13 @@ import styled from '@emotion/styled';
 import { Box } from '@mui/material';
 
 export const StyledBox = styled(Box)(
-	({ theme }) => css`
+	({ theme: { custom } }) => css`
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		box-sizing: border-box;
-		background: ${theme.custom.colors.container};
+		background: ${custom.com.modal.background};
 		padding: 40px;
 		max-width: 400px;
 		width: 90%;

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.onContainer.contrast};
+		fill: ${theme.custom.sys.colors.onBackground};
 	`
 );

src/components/MoonIcon/MoonIcon.tsx

@@ -9,7 +9,7 @@ function MoonIcon({
 	onClick: () => void;
 }) {
 	const theme = useTheme();
-	const textColor = theme.custom.colors.onContainer.contrast;
+	const textColor = theme.custom.sys.colors.onBackground;
 
 	return (
 		<Styled.Sun

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.onContainer.contrast};
+		fill: ${theme.custom.sys.colors.onBackground};
 	`
 );

src/components/SunIcon/SunIcon.tsx

@@ -9,7 +9,7 @@ function SunIcon({
 	onClick: () => void;
 }) {
 	const theme = useTheme();
-	const textColor = theme.custom.colors.onContainer.contrast;
+	const textColor = theme.custom.sys.colors.onBackground;
 
 	return (
 		<Styled.Sun

src/emotion.d.ts

@@ -1,49 +1,15 @@
 import '@emotion/react';
+import { ReferenceTokens } from './theme/tokens.ref.ts';
+import { SystemTokens } from './theme/tokens.sys.ts';
+import { ComponentTokens } from './theme/tokens.com.ts';
 
 declare module '@emotion/react' {
 	export interface Theme {
 		custom: {
 			mode: 'light' | 'dark';
-			breakpoints: {
-				desktop: number;
-			};
-			transitions: {
-				color: string;
-			};
-			animations: {
-				zoomIn: string;
-			};
-			widths: {
-				eventLoopRadius: number;
-				eventLoopDiameter: number;
-				eventLoopWheelWidth: number;
-				eventLoopPointerBorderWidth: number;
-			};
-			colors: {
-				background: string;
-				onBackground: string;
-				container: string;
-				onContainer: {
-					dim: string;
-					normal: string;
-					contrast: string;
-				};
-				primary: {
-					dim: string;
-					normal: string;
-					contrast: string;
-				};
-				secondary: {
-					dim: string;
-					normal: string;
-					contrast: string;
-				};
-				tertiary: {
-					dim: string;
-					normal: string;
-					contrast: string;
-				};
-			};
+			ref: ReferenceTokens;
+			sys: SystemTokens;
+			com: ComponentTokens;
 		};
 	}
 }

src/pages/home/Home.styled.ts

@@ -15,7 +15,7 @@ export const sharedColumnStyles = ({ theme }: { theme: Theme }) => css`
 	flex-direction: column;
 	gap: 20px;
 
-	@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+	@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 		flex-grow: 0;
 		flex-shrink: 0;
 		overflow: hidden;
@@ -26,11 +26,12 @@ export const Layout = styled.div(
 	({ theme }) => css`
 		flex: 1;
 		display: flex;
-		padding: 20px;
+		padding: 8px;
 		flex-direction: column;
 		gap: 20px;
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
+			padding: 20px;
 			flex-direction: row;
 			overflow: hidden;
 		}
@@ -41,7 +42,7 @@ export const WideColumn = styled.div(
 	({ theme }) => css`
 		${sharedColumnStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: calc(43% - 20px);
 		}
 	`
@@ -51,19 +52,19 @@ export const NarrowColumn = styled.div(
 	({ theme }) => css`
 		${sharedColumnStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 14%;
 		}
 	`
 );
 
 export const BaseLayoutElement = styled.div(
-	({ theme }) => css`
-		border: 1px solid ${theme.custom.colors.onContainer.dim};
-		background: ${theme.custom.colors.container};
+	({ theme: { custom } }) => css`
+		border: 1px solid ${custom.sys.colors.border};
+		background: ${custom.sys.colors.container};
 		transition:
-			background-color ${theme.custom.transitions.color},
-			border-color ${theme.custom.transitions.color};
+			background-color ${custom.sys.transitions.color},
+			border-color ${custom.sys.transitions.color};
 		margin: 0;
 		padding: 10px;
 	`
@@ -80,7 +81,7 @@ export const List = styled(BaseLayoutElement)`
 
 export const sharedComponentStyles = ({ theme }: { theme: Theme }) => css`
 	min-height: 10vh;
-	@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+	@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 		min-height: unset;
 	}
 `;
@@ -91,7 +92,7 @@ export const Info = styled(InfoBase)(
 		flex-direction: column;
 		justify-content: center;
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 10%;
 		}
 	`
@@ -102,7 +103,7 @@ export const Configurator = styled(ConfiguratorBase)(
 		padding: 0;
 		min-height: 50vh;
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 75%;
 			min-height: unset;
 		}
@@ -113,7 +114,7 @@ export const WebApiQueue = styled(WebApiQueueBase)(
 	({ theme }) => css`
 		${sharedComponentStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 15%;
 		}
 	`
@@ -123,7 +124,7 @@ export const CallStack = styled(CallStackBase)(
 	({ theme }) => css`
 		${sharedComponentStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 40%;
 		}
 	`
@@ -133,7 +134,7 @@ export const Console = styled(ConsoleBase)(
 	({ theme }) => css`
 		${sharedComponentStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 60%;
 		}
 	`
@@ -145,7 +146,7 @@ export const RequestAnimationFrameQueue = styled(
 	({ theme }) => css`
 		${sharedComponentStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 15%;
 		}
 	`
@@ -155,7 +156,7 @@ export const TasksQueue = styled(TasksQueueBase)(
 	({ theme }) => css`
 		${sharedComponentStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 15%;
 		}
 	`
@@ -165,7 +166,7 @@ export const MicroTasksQueue = styled(MicroTasksQueueBase)(
 	({ theme }) => css`
 		${sharedComponentStyles({ theme })};
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 15%;
 		}
 	`
@@ -180,7 +181,7 @@ export const EventLoop = styled(EventLoopBase)(
 		position: relative;
 		min-height: 40vh;
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-basis: 45%;
 			min-height: unset;
 			overflow: hidden;

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import InfoClosed from 'components/CloseIcon/InfoIcon.tsx';
+import InfoClosed from 'components/CloseIcon/CloseIcon.tsx';
 
 export const Callstack = styled.div(
 	({ theme }) => css`
@@ -10,17 +10,18 @@ export const Callstack = styled.div(
 		justify-content: end;
 		gap: 20px;
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-direction: column-reverse;
 		}
 	`
 );
 
 export const CallstackElement = styled.div(
-	({ theme }) => css`
-		background: ${theme.custom.colors.onContainer.dim};
-		transition: background-color ${theme.custom.transitions.color};
-		animation: ${theme.custom.animations.zoomIn};
+	({ theme: { custom } }) => css`
+		background: ${custom.com.queueElement.background};
+		transition: background-color ${custom.sys.transitions.color};
+		animation: ${custom.sys.animations.zoomIn};
+		border: 1px solid ${custom.sys.colors.border};
 		border-radius: 5px;
 		padding: 10px;
 		word-wrap: break-word;
@@ -31,7 +32,7 @@ export const CallstackElement = styled.div(
 		flex: 1;
 		max-width: 33.33%;
 
-		@media (min-width: ${theme.custom.breakpoints.desktop}px) {
+		@media (min-width: ${custom.sys.breakpoints.desktop}px) {
 			max-width: unset;
 			flex-grow: 0;
 		}