diff --git a/src/components/CloseIcon/CloseIcon.styled.ts b/src/components/CloseIcon/CloseIcon.styled.ts new file mode 100644 index 0000000..58ee301 --- /dev/null +++ b/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}; + ` +); diff --git a/src/components/CloseIcon/InfoIcon.tsx b/src/components/CloseIcon/CloseIcon.tsx similarity index 76% rename from src/components/CloseIcon/InfoIcon.tsx rename to src/components/CloseIcon/CloseIcon.tsx index db85f51..60a0171 100644 --- a/src/components/CloseIcon/InfoIcon.tsx +++ b/src/components/CloseIcon/CloseIcon.tsx @@ -1,6 +1,6 @@ -import * as Styled from './InfoIcon.styled.ts'; +import * as Styled from './CloseIcon.styled.ts'; -function InfoClosed({ +function CloseIcon({ className, onClick, }: { @@ -8,7 +8,7 @@ function InfoClosed({ onClick: () => void; }) { return ( - - + ); } -export default InfoClosed; +export default CloseIcon; diff --git a/src/components/CloseIcon/InfoIcon.styled.ts b/src/components/CloseIcon/InfoIcon.styled.ts deleted file mode 100644 index baa19a1..0000000 --- a/src/components/CloseIcon/InfoIcon.styled.ts +++ /dev/null @@ -1,13 +0,0 @@ -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; - -export const Closed = styled.svg( - ({ theme }) => css` - cursor: pointer; - fill: ${theme.custom.colors.onContainer.normal}; - - &:hover { - fill: ${theme.custom.colors.onContainer.contrast}; - } - ` -); diff --git a/src/components/InfoIcon/InfoIcon.styled.ts b/src/components/InfoIcon/InfoIcon.styled.ts index c09f943..cf13225 100644 --- a/src/components/InfoIcon/InfoIcon.styled.ts +++ b/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}; ` ); diff --git a/src/components/Modal/Modal.styled.ts b/src/components/Modal/Modal.styled.ts index 3517bb3..1f34ec3 100644 --- a/src/components/Modal/Modal.styled.ts +++ b/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%; diff --git a/src/components/MoonIcon/MoonIcon.styled.ts b/src/components/MoonIcon/MoonIcon.styled.ts index 28221d9..07e0f50 100644 --- 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.onContainer.contrast}; + fill: ${theme.custom.sys.colors.onBackground}; ` ); diff --git a/src/components/MoonIcon/MoonIcon.tsx b/src/components/MoonIcon/MoonIcon.tsx index a4d9c26..42ec0f6 100644 --- 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.onContainer.contrast; + const textColor = theme.custom.sys.colors.onBackground; return ( css` cursor: pointer; - fill: ${theme.custom.colors.onContainer.contrast}; + fill: ${theme.custom.sys.colors.onBackground}; ` ); diff --git a/src/components/SunIcon/SunIcon.tsx b/src/components/SunIcon/SunIcon.tsx index 0abb099..5d95e78 100644 --- 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.onContainer.contrast; + const textColor = theme.custom.sys.colors.onBackground; return ( 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; diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts index e5367b0..3abb68d 100644 --- a/src/pages/home/sections/Callstack/Callstack.styled.ts +++ b/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; } diff --git a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts index 1ea7bfe..b4c1a3a 100644 --- a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts +++ b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts @@ -2,34 +2,41 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; export const EditorWrapper = styled.div( - ({ theme }) => css` + ({ + theme: { + custom: { sys }, + }, + }) => css` flex: 1; .ace_layer.ace_gutter-layer { - background: ${theme.custom.colors.container}; - transition: background-color ${theme.custom.transitions.color}; + background: ${sys.colors.container}; + transition: background-color ${sys.transitions.color}; + > div { + opacity: 0.7; + } } .ace_gutter { - background: ${theme.custom.colors.onContainer.dim}; - transition: background-color ${theme.custom.transitions.color}; + background: ${sys.colors.onContainer.dim}; + transition: background-color ${sys.transitions.color}; } .selected_lines { position: absolute; - background: ${theme.custom.colors.tertiary.normal}; - transition: background-color ${theme.custom.transitions.color}; + background: ${sys.colors.tertiary.contrast}; + transition: background-color ${sys.transitions.color}; opacity: 0.3; } .ace_gutter-active-line { - background: ${theme.custom.colors.onContainer.dim}; - transition: background-color ${theme.custom.transitions.color}; + background: ${sys.colors.onContainer.dim}; + transition: background-color ${sys.transitions.color}; } .ace_content { - background: ${theme.custom.colors.container}; - transition: background-color ${theme.custom.transitions.color}; + background: ${sys.colors.container}; + transition: background-color ${sys.transitions.color}; } ` ); diff --git a/src/pages/home/sections/Console/Console.styled.ts b/src/pages/home/sections/Console/Console.styled.ts index 63b456f..c8ee8eb 100644 --- a/src/pages/home/sections/Console/Console.styled.ts +++ b/src/pages/home/sections/Console/Console.styled.ts @@ -8,17 +8,22 @@ export const LogQueue = styled.div( justify-content: start; gap: 20px; - @media (min-width: ${theme.custom.breakpoints.desktop}px) { + @media (min-width: ${theme.custom.sys.breakpoints.desktop}px) { flex-direction: column; } ` ); export const Log = styled.div( - ({ theme }) => css` - background: ${theme.custom.colors.onContainer.dim}; - transition: background-color ${theme.custom.transitions.color}; - animation: ${theme.custom.animations.zoomIn}; + ({ + theme: { + custom: { sys, com }, + }, + }) => css` + background: ${com.queueElement.background}; + transition: background-color ${sys.transitions.color}; + animation: ${sys.animations.zoomIn}; + border: 1px solid ${sys.colors.border}; border-radius: 5px; padding: 10px; word-wrap: break-word; @@ -28,7 +33,7 @@ export const Log = styled.div( flex: 1; max-width: 33.33%; - @media (min-width: ${theme.custom.breakpoints.desktop}px) { + @media (min-width: ${sys.breakpoints.desktop}px) { max-width: unset; flex-grow: 0; } diff --git a/src/pages/home/sections/EventLoop/EventLoop.styled.ts b/src/pages/home/sections/EventLoop/EventLoop.styled.ts index b7e91d8..f9db1b5 100644 --- a/src/pages/home/sections/EventLoop/EventLoop.styled.ts +++ b/src/pages/home/sections/EventLoop/EventLoop.styled.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import InfoClosed from 'components/CloseIcon/InfoIcon.tsx'; +import InfoClosed from 'components/CloseIcon/CloseIcon.tsx'; export const CloseIcon = styled(InfoClosed)` position: absolute; diff --git a/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts index a31540b..510765f 100644 --- a/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts +++ b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts @@ -1,25 +1,27 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; -export const CircleContainer = styled.div( - ({ theme }) => css` - position: relative; - width: ${theme.custom.widths.eventLoopDiameter}px; - height: ${theme.custom.widths.eventLoopDiameter}px; - overflow: hidden; - ` -); +export const CircleContainer = styled.div` + position: relative; + width: 300px; + height: 300px; + overflow: hidden; +`; export const SVGContainer = styled.svg( - ({ theme }) => css` + ({ + theme: { + custom: { sys }, + }, + }) => css` path, text, circle { transition: - background-color ${theme.custom.transitions.color}, - color ${theme.custom.transitions.color}, - stroke ${theme.custom.transitions.color}, - fill ${theme.custom.transitions.color}; + background-color ${sys.transitions.color}, + color ${sys.transitions.color}, + stroke ${sys.transitions.color}, + fill ${sys.transitions.color}; } ` ); diff --git a/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx b/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx index 905d803..3786fd6 100644 --- a/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx +++ b/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx @@ -17,25 +17,28 @@ const SEGMENT_OFFSET = -9; const POINTER_OFFSET = -99; function Wheel() { - const theme = useTheme(); + const { + custom: { sys, com, mode }, + } = useTheme(); const { render, macrotask, microtask } = useWheelStore((state) => state); + const fontWeight = mode === 'light' ? '500' : '800'; const colors = { - text: theme.custom.colors.onContainer.contrast, - pointer: theme.custom.colors.onContainer.contrast, - wheel: theme.custom.colors.onContainer.dim, - background: theme.custom.colors.container, + text: sys.colors.onBackground, + pointer: com.wheel.pointer, + wheel: com.wheel.background, + background: sys.colors.container, microtask: { - disabled: theme.custom.colors.primary.dim, - enabled: theme.custom.colors.primary.contrast, + disabled: com.wheel.microtask.dim, + enabled: com.wheel.microtask.contrast, }, macrotask: { - disabled: theme.custom.colors.secondary.dim, - enabled: theme.custom.colors.secondary.contrast, + disabled: com.wheel.macrotask.dim, + enabled: com.wheel.macrotask.contrast, }, render: { - disabled: theme.custom.colors.tertiary.dim, - enabled: theme.custom.colors.tertiary.contrast, + disabled: com.wheel.render.dim, + enabled: com.wheel.render.contrast, }, }; @@ -170,7 +173,7 @@ function Wheel() { y="-38" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -179,7 +182,7 @@ function Wheel() { y="-38" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -188,7 +191,7 @@ function Wheel() { y="44" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -197,7 +200,7 @@ function Wheel() { y="44" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -206,7 +209,7 @@ function Wheel() { y="3" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > RRender @@ -215,7 +218,7 @@ function Wheel() { y="3" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > TTask diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts index 2f95c74..d44b2f1 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.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 MicroTasksQueue = styled.div` flex: 1; @@ -10,10 +10,11 @@ export const MicroTasksQueue = styled.div` `; export const MicroTask = 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}; 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 index 15caac9..1d39031 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { css } from '@mui/material'; -import InfoClosed from 'components/CloseIcon/InfoIcon.tsx'; +import InfoClosed from 'components/CloseIcon/CloseIcon.tsx'; export const CallbacksQueue = styled.div` flex: 1; @@ -10,10 +10,11 @@ export const CallbacksQueue = styled.div` `; export const Callback = 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}; 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 index d094b4c..571e1a6 100644 --- a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts +++ b/src/pages/home/sections/TasksQueue/TasksQueue.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 TasksQueue = styled.div` flex: 1; @@ -10,10 +10,15 @@ export const TasksQueue = styled.div` `; export const Task = styled.div( - ({ theme }) => css` - background: ${theme.custom.colors.onContainer.dim}; - transition: background-color ${theme.custom.transitions.color}; - animation: ${theme.custom.animations.zoomIn}; + ({ + theme: { + custom: { com, sys }, + }, + }) => css` + background: ${com.queueElement.background}; + border: 1px solid ${sys.colors.border}; + transition: background-color ${sys.transitions.color}; + animation: ${sys.animations.zoomIn}; flex: 1; display: flex; justify-content: center; diff --git a/src/pages/home/sections/WebApiQueue/WebApiQueue.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiQueue.styled.ts index 2278b22..07dc175 100644 --- a/src/pages/home/sections/WebApiQueue/WebApiQueue.styled.ts +++ b/src/pages/home/sections/WebApiQueue/WebApiQueue.styled.ts @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import InfoClosed from 'components/CloseIcon/InfoIcon.tsx'; +import InfoClosed from 'components/CloseIcon/CloseIcon.tsx'; export const WebApiQueue = styled.div` flex: 1; diff --git a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts index 613fda3..842b528 100644 --- a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts +++ b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts @@ -2,9 +2,13 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; export const WebApiItem = styled.div( - ({ theme }) => css` - background: ${theme.custom.colors.onContainer.dim}; - transition: background-color ${theme.custom.transitions.color}; + ({ + theme: { + custom: { sys, com }, + }, + }) => css` + background: ${com.queueElement.background}; + transition: background-color ${sys.transitions.color}; border-radius: 5px; padding: 10px; position: absolute; @@ -20,15 +24,15 @@ export const WebApiItem = styled.div( ); export const Progress = styled.div<{ progress: number }>( - ({ theme, progress }) => css` + ({ theme: { custom }, progress }) => css` background-color: transparent; background-image: conic-gradient( - ${theme.custom.colors.onContainer.contrast}, - ${theme.custom.colors.onContainer.contrast} ${progress}%, + ${custom.sys.colors.onContainer.contrast}, + ${custom.sys.colors.onContainer.contrast} ${progress}%, transparent ${progress}% ); - transition: background-color ${theme.custom.transitions.color}; - animation: ${theme.custom.animations.zoomIn}; + transition: background-color ${custom.sys.transitions.color}; + animation: ${custom.sys.animations.zoomIn}; border-radius: 5px; position: relative; padding: 10px; diff --git a/src/providers/StylesProvider.tsx b/src/providers/StylesProvider.tsx index ffb6a19..4a75838 100644 --- a/src/providers/StylesProvider.tsx +++ b/src/providers/StylesProvider.tsx @@ -2,13 +2,13 @@ import { Global, ThemeProvider } from '@emotion/react'; import { PropsWithChildren } from 'react'; import { useThemeStore } from 'store/store.ts'; import { getGlobalStyles } from './StylesProvider.utils.ts'; -import { colorsDark, colorsLight } from '../theme/colors.ts'; +import { getSystemTokens } from '../theme/tokens.sys.ts'; import { getTheme } from '../theme/theme.ts'; export function StylesProvider({ children }: PropsWithChildren) { const { isDark } = useThemeStore(); - const palette = isDark ? colorsDark : colorsLight; - const theme = getTheme(palette); + const mode = isDark ? 'dark' : 'light'; + const theme = getTheme(getSystemTokens(mode), mode); const globalStyles = getGlobalStyles({ theme }); return ( diff --git a/src/providers/StylesProvider.utils.ts b/src/providers/StylesProvider.utils.ts index f615289..31d8b0e 100644 --- a/src/providers/StylesProvider.utils.ts +++ b/src/providers/StylesProvider.utils.ts @@ -1,16 +1,22 @@ import { css, Theme } from '@emotion/react'; -export const getGlobalStyles = ({ theme }: { theme: Theme }) => css` +export const getGlobalStyles = ({ + theme: { + custom: { sys, com }, + }, +}: { + theme: Theme; +}) => css` html { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - color: ${theme.custom.colors.onBackground}; - background-color: ${theme.custom.colors.background}; + color: ${sys.colors.onBackground}; + background-color: ${sys.colors.background}; height: 100%; } body { - background-color: ${theme.custom.colors.background}; - transition: background-color ${theme.custom.transitions.color}; + background-color: ${sys.colors.background}; + transition: background-color ${sys.transitions.color}; } div, @@ -30,8 +36,8 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css` } a { - color: ${theme.custom.colors.onBackground}; - transition: all ${theme.custom.transitions.color}; + color: ${sys.colors.onBackground}; + transition: all ${sys.transitions.color}; } body { @@ -57,16 +63,16 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css` } ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 4px; + height: 4px; } ::-webkit-scrollbar-thumb { - background: ${theme.custom.colors.onContainer.normal}; + background: ${com.scrollbar.background}; } :focus-visible { - outline: 2px solid ${theme.custom.colors.onContainer.normal}; + outline: 1px solid ${sys.colors.onContainer.contrast}; } @keyframes zoomIn { diff --git a/src/test/test-utils.tsx b/src/test/test-utils.tsx index 0e2b145..42fdcde 100644 --- a/src/test/test-utils.tsx +++ b/src/test/test-utils.tsx @@ -2,9 +2,9 @@ import { render, RenderOptions } from '@testing-library/react'; import { ThemeProvider } from '@emotion/react'; import { PropsWithChildren, ReactNode } from 'react'; import { getTheme } from '../theme/theme.ts'; -import { colorsDark } from '../theme/colors.ts'; +import { getSystemTokens } from '../theme/tokens.sys.ts'; -const theme = getTheme(colorsDark); +const theme = getTheme(getSystemTokens('dark'), 'dark'); const AllTheProviders = ({ children }: PropsWithChildren) => { return {children}; diff --git a/src/theme/colors.ts b/src/theme/colors.ts deleted file mode 100644 index 7941f9a..0000000 --- a/src/theme/colors.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { PaletteMode } from '@mui/material'; -import { palette } from './palette.ts'; - -export type ColorsSystem = typeof colorsLight | typeof colorsDark; - -export const colorsDark = { - mode: 'dark' as PaletteMode, - colors: { - background: palette.primary['5'], - onBackground: palette.primary['90'], - container: palette.primary['10'], - onContainer: { - dim: palette.primary['15'], - normal: palette.primary['50'], - contrast: palette.primary['90'], - }, - primary: { - dim: 'rgba(86, 121, 135, 0.3)', - normal: palette.primary['60'], - contrast: 'rgba(86, 121, 135, 1)', - }, - secondary: { - dim: 'rgba(95, 161, 101, 0.3)', - normal: palette.secondary['60'], - contrast: 'rgba(95, 161, 101, 1)', - }, - tertiary: { - dim: 'rgba(181, 92, 101, 0.3)', - normal: palette.tertiary['60'], - contrast: 'rgba(181, 92, 101, 1)', - }, - }, -}; - -export const colorsLight = { - mode: 'light' as PaletteMode, - colors: { - background: palette.primary['95'], - onBackground: palette.primary['20'], - container: palette.primary['90'], - onContainer: { - dim: palette.primary['80'], - normal: palette.primary['50'], - contrast: palette.primary['30'], - }, - primary: { - dim: 'rgba(86, 121, 135, 0.3)', - normal: palette.primary['50'], - contrast: 'rgb(100 170 198)', - }, - secondary: { - dim: 'rgba(95, 161, 101, 0.3)', - normal: palette.secondary['50'], - contrast: 'rgb(98 204 108)', - }, - tertiary: { - dim: 'rgba(181, 92, 101, 0.3)', - normal: palette.tertiary['50'], - contrast: 'rgb(233 126 137)', - }, - }, -}; diff --git a/src/theme/palette.ts b/src/theme/palette.ts deleted file mode 100644 index f97bc65..0000000 --- a/src/theme/palette.ts +++ /dev/null @@ -1,83 +0,0 @@ -//https://coolors.co/264653-6d9f71-a65961 -export const palette = { - primary: { - '0': '#000000', - '5': '#00131B', - '10': '#001F29', - '15': '#042936', - '20': '#123441', - '25': '#1F3F4C', - '30': '#2B4B58', - '35': '#375764', - '40': '#436370', - '50': '#5C7C8A', - '60': '#7595A4', - '70': '#90B0BF', - '80': '#ABCBDB', - '90': '#C6E8F8', - '95': '#DFF4FF', - '98': '#F3FAFF', - '99': '#FAFCFF', - '100': '#FFFFFF', - }, - secondary: { - '0': '#000000', - '5': '#001504', - '10': '#002108', - '15': '#002D0E', - '20': '#053915', - '25': '#14441F', - '30': '#21502A', - '35': '#2D5C35', - '40': '#396940', - '50': '#518257', - '60': '#6A9C6F', - '70': '#84B787', - '80': '#9FD3A1', - '90': '#BAF0BC', - '95': '#C8FEC9', - '98': '#EBFFE7', - '99': '#F6FFF1', - '100': '#FFFFFF', - }, - tertiary: { - '0': '#000000', - '5': '#2C0008', - '10': '#3C0611', - '15': '#4A101A', - '20': '#581B24', - '25': '#66262F', - '30': '#74313A', - '35': '#823D45', - '40': '#914850', - '50': '#AF6068', - '60': '#CD7981', - '70': '#EB929A', - '80': '#FFB2B8', - '90': '#FFDADB', - '95': '#FFECED', - '98': '#FFF8F7', - '99': '#FFFBFF', - '100': '#FFFFFF', - }, - neutral: { - '0': '#000000', - '5': '#101112', - '10': '#1B1C1C', - '15': '#252626', - '20': '#303031', - '25': '#3B3B3C', - '30': '#464747', - '35': '#525253', - '40': '#5E5E5F', - '50': '#777777', - '60': '#919091', - '70': '#ACABAB', - '80': '#C7C6C6', - '90': '#E4E2E2', - '95': '#F2F0F0', - '98': '#FBF9F9', - '99': '#FEFCFC', - '100': '#FFFFFF', - }, -}; diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 2eca0b3..74f0035 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -1,13 +1,15 @@ -import { ColorsSystem } from './colors.ts'; +import { SystemTokens } from './tokens.sys.ts'; import { createTheme } from '@mui/material'; import { Theme } from '@emotion/react'; +import { referenceTokens as ref } from './tokens.ref.ts'; +import { getComponentsTokens } from './tokens.com.ts'; -export const getMuiTheme = (cs: ColorsSystem) => +export const getMuiTheme = (st: SystemTokens, mode: 'dark' | 'light') => createTheme({ palette: { - mode: cs.mode, + mode, primary: { - main: cs.colors.onContainer.contrast, + main: st.colors.onContainer.contrast, }, }, typography: { @@ -18,17 +20,17 @@ export const getMuiTheme = (cs: ColorsSystem) => styleOverrides: { tooltip: { fontSize: '14', - color: cs.colors.onContainer.contrast, - backgroundColor: cs.colors.onContainer.dim, - transition: 'all 0.5s ease', + color: st.colors.onContainer.contrast, + backgroundColor: st.colors.onContainer.dim, + transition: st.transitions.color, }, }, }, MuiMenu: { styleOverrides: { list: { - backgroundColor: cs.colors.onContainer.dim, - transition: 'all 0.5s ease', + backgroundColor: st.colors.onContainer.dim, + transition: st.transitions.color, }, }, }, @@ -36,16 +38,16 @@ export const getMuiTheme = (cs: ColorsSystem) => styleOverrides: { root: { '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: cs.colors.onContainer.normal, + borderColor: st.colors.onContainer.contrast, }, - transition: 'all 0.5s ease', + transition: st.transitions.color, }, }, }, MuiButton: { styleOverrides: { root: { - transition: 'all 0.5s ease', + transition: st.transitions.color, }, }, }, @@ -53,7 +55,7 @@ export const getMuiTheme = (cs: ColorsSystem) => styleOverrides: { root: { '&.Mui-focused': { - color: cs.colors.onContainer.contrast, + color: st.colors.onContainer.contrast, }, }, }, @@ -61,40 +63,14 @@ export const getMuiTheme = (cs: ColorsSystem) => }, }); -export const getTheme = (cs: ColorsSystem): Theme => { - const { colors } = cs; +export const getTheme = (sys: SystemTokens, mode: 'dark' | 'light'): Theme => { return { - ...getMuiTheme(cs), + ...getMuiTheme(sys, mode), custom: { - mode: cs.mode, - breakpoints: { - desktop: 768, - }, - transitions: { - color: '0.5s ease', - }, - animations: { - zoomIn: 'zoomIn 225ms cubic-bezier(0.4, 0, 0.2, 1)', - }, - widths: { - eventLoopRadius: 150, - eventLoopDiameter: 300, - eventLoopWheelWidth: 50, - eventLoopPointerBorderWidth: 4, - }, - colors: { - background: colors.background, - onBackground: colors.onBackground, - container: colors.container, - onContainer: { - dim: colors.onContainer.dim, - normal: colors.onContainer.normal, - contrast: colors.onContainer.contrast, - }, - primary: colors.primary, - secondary: colors.secondary, - tertiary: colors.tertiary, - }, + mode, + ref, + sys, + com: getComponentsTokens(sys), }, }; }; diff --git a/src/theme/tokens.com.ts b/src/theme/tokens.com.ts new file mode 100644 index 0000000..2d39c23 --- /dev/null +++ b/src/theme/tokens.com.ts @@ -0,0 +1,38 @@ +import { SystemTokens } from './tokens.sys.ts'; + +export const getComponentsTokens = (st: SystemTokens) => ({ + wheel: { + background: st.colors.onContainer.dim, + pointer: st.colors.onContainer.contrast, + render: { + dim: st.colors.tertiary.dim, + contrast: st.colors.tertiary.contrast, + }, + macrotask: { + dim: st.colors.secondary.dim, + contrast: st.colors.secondary.contrast, + }, + microtask: { + dim: st.colors.primary.dim, + contrast: st.colors.primary.contrast, + }, + }, + modal: { + background: st.colors.container, + }, + queueElement: { + background: st.colors.onContainer.dim, + borderActive: st.colors.onContainer.contrast, + }, + queue: { + background: st.colors.container, + }, + icon: { + background: st.colors.onContainer.contrast, + }, + scrollbar: { + background: st.colors.primary.contrast, + }, +}); + +export type ComponentTokens = ReturnType; diff --git a/src/theme/tokens.ref.ts b/src/theme/tokens.ref.ts new file mode 100644 index 0000000..09a0ce5 --- /dev/null +++ b/src/theme/tokens.ref.ts @@ -0,0 +1,45 @@ +//https://coolors.co/264653-6d9f71-a65961 +export const referenceTokens = { + brand: { + '0': '#000000', + '5': '#00131B', + '10': '#001F29', + '15': '#042936', + '20': '#123441', + '25': '#1F3F4C', + '30': '#2B4B58', + '35': '#375764', + '40': '#436370', + '50': '#5C7C8A', + '60': '#7595A4', + '70': '#90B0BF', + '80': '#ABCBDB', + '90': '#C6E8F8', + '95': '#DFF4FF', + '98': '#F3FAFF', + '99': '#FAFCFF', + '100': '#FFFFFF', + }, + neutral: { + '0': '#000000', + '5': '#101112', + '10': '#1B1C1C', + '15': '#252626', + '20': '#303031', + '25': '#3B3B3C', + '30': '#464747', + '35': '#525253', + '40': '#5E5E5F', + '50': '#777777', + '60': '#919091', + '70': '#ACABAB', + '80': '#C7C6C6', + '90': '#E4E2E2', + '95': '#F2F0F0', + '98': '#FBF9F9', + '99': '#FEFCFC', + '100': '#FFFFFF', + }, +}; + +export type ReferenceTokens = typeof referenceTokens; diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts new file mode 100644 index 0000000..b2c33c4 --- /dev/null +++ b/src/theme/tokens.sys.ts @@ -0,0 +1,70 @@ +import { referenceTokens } from './tokens.ref.ts'; + +const systemTokens = { + dark: { + colors: { + border: referenceTokens.brand['15'], + background: referenceTokens.brand['5'], + onBackground: referenceTokens.brand['90'], + container: referenceTokens.brand['10'], + onContainer: { + dim: referenceTokens.brand['15'], + contrast: referenceTokens.brand['90'], + }, + primary: { + dim: 'rgba(86, 121, 135, 0.3)', + contrast: 'rgba(86, 121, 135, 1)', + }, + secondary: { + dim: 'rgba(95, 161, 101, 0.3)', + contrast: 'rgba(95, 161, 101, 1)', + }, + tertiary: { + dim: 'rgba(181, 92, 101, 0.3)', + contrast: 'rgba(181, 92, 101, 1)', + }, + }, + }, + light: { + colors: { + border: referenceTokens.neutral['80'], + background: referenceTokens.neutral['95'], + onBackground: referenceTokens.neutral['20'], + container: referenceTokens.neutral['98'], + onContainer: { + dim: referenceTokens.neutral['90'], + contrast: referenceTokens.neutral['30'], + }, + primary: { + dim: 'rgba(108, 195, 224, 0.3)', + contrast: 'rgba(108, 195, 224, 1)', + }, + secondary: { + dim: 'rgba(75, 206, 151, 0.3)', + contrast: 'rgba(75, 206, 151, 1)', + }, + tertiary: { + dim: 'rgba(247, 151, 210, 0.2)', + contrast: 'rgba(247, 151, 210, 1)', + }, + }, + }, + shared: { + breakpoints: { + desktop: 768, + }, + transitions: { + color: '0.5s ease', + }, + animations: { + zoomIn: 'zoomIn 225ms cubic-bezier(0.4, 0, 0.2, 1)', + }, + }, +}; + +export const getSystemTokens = (mode: 'light' | 'dark') => ({ + ...systemTokens.shared, + ...systemTokens[mode], +}); + +export type SystemTokens = ReturnType;