feat: update design system tokens (#39)

Author: vault-developer

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.tsxsrc/components/CloseIcon/InfoIcon.tsx renamed to 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/CloseIcon/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/InfoIcon/InfoIcon.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/Modal/Modal.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.styled.ts

@@ -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/MoonIcon/MoonIcon.tsx

@@ -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.styled.ts

@@ -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/components/SunIcon/SunIcon.tsx

@@ -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;
 		};
 	}
 }