From 341d70ece657036fcad35ea6c38c1824a2b7c739 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Fri, 31 Jan 2025 18:27:40 +0100 Subject: [PATCH 01/12] feat: update design system --- src/emotion.d.ts | 45 ++--------- .../sections/EventLoop/Wheel/Wheel.styled.ts | 14 ++-- src/providers/StylesProvider.tsx | 6 +- src/test/test-utils.tsx | 2 +- src/theme/colors.ts | 62 --------------- src/theme/theme.ts | 65 +++++----------- src/theme/{palette.ts => tokens.ref.ts} | 4 +- src/theme/tokens.sys.ts | 76 +++++++++++++++++++ 8 files changed, 115 insertions(+), 159 deletions(-) delete mode 100644 src/theme/colors.ts rename src/theme/{palette.ts => tokens.ref.ts} (94%) create mode 100644 src/theme/tokens.sys.ts diff --git a/src/emotion.d.ts b/src/emotion.d.ts index f80b062..0b2f45f 100644 --- a/src/emotion.d.ts +++ b/src/emotion.d.ts @@ -1,49 +1,14 @@ import '@emotion/react'; +import { ReferenceTokens } from './theme/tokens.ref.ts'; +import { SystemTokens } from './theme/tokens.sys.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: object; }; } } diff --git a/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts index a31540b..96a23ea 100644 --- a/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts +++ b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts @@ -1,14 +1,12 @@ 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` diff --git a/src/providers/StylesProvider.tsx b/src/providers/StylesProvider.tsx index ffb6a19..5cc9978 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 { systemColorTokens } 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(systemColorTokens[mode], mode); const globalStyles = getGlobalStyles({ theme }); return ( diff --git a/src/test/test-utils.tsx b/src/test/test-utils.tsx index 0e2b145..aaee82f 100644 --- a/src/test/test-utils.tsx +++ b/src/test/test-utils.tsx @@ -2,7 +2,7 @@ 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 { colorsDark } from '../theme/tokens.sys.ts'; const theme = getTheme(colorsDark); 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/theme.ts b/src/theme/theme.ts index 2eca0b3..c56b2c8 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -1,13 +1,14 @@ -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'; -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 +19,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 +37,16 @@ export const getMuiTheme = (cs: ColorsSystem) => styleOverrides: { root: { '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: cs.colors.onContainer.normal, + borderColor: st.colors.onContainer.normal, }, - transition: 'all 0.5s ease', + transition: st.transitions.color, }, }, }, MuiButton: { styleOverrides: { root: { - transition: 'all 0.5s ease', + transition: st.transitions.color, }, }, }, @@ -53,7 +54,7 @@ export const getMuiTheme = (cs: ColorsSystem) => styleOverrides: { root: { '&.Mui-focused': { - color: cs.colors.onContainer.contrast, + color: st.colors.onContainer.contrast, }, }, }, @@ -61,39 +62,15 @@ 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: { + //todo: add all components that we need }, }, }; diff --git a/src/theme/palette.ts b/src/theme/tokens.ref.ts similarity index 94% rename from src/theme/palette.ts rename to src/theme/tokens.ref.ts index f97bc65..485a9cb 100644 --- a/src/theme/palette.ts +++ b/src/theme/tokens.ref.ts @@ -1,5 +1,5 @@ //https://coolors.co/264653-6d9f71-a65961 -export const palette = { +export const referenceTokens = { primary: { '0': '#000000', '5': '#00131B', @@ -81,3 +81,5 @@ export const palette = { '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..33f52c0 --- /dev/null +++ b/src/theme/tokens.sys.ts @@ -0,0 +1,76 @@ +import { referenceTokens } from './tokens.ref.ts'; + +const systemTokens = { + light: { + colors: { + background: referenceTokens.primary['5'], + onBackground: referenceTokens.primary['90'], + container: referenceTokens.primary['10'], + onContainer: { + dim: referenceTokens.primary['15'], + normal: referenceTokens.primary['50'], + contrast: referenceTokens.primary['90'], + }, + primary: { + dim: 'rgba(86, 121, 135, 0.3)', + normal: referenceTokens.primary['60'], + contrast: 'rgba(86, 121, 135, 1)', + }, + secondary: { + dim: 'rgba(95, 161, 101, 0.3)', + normal: referenceTokens.secondary['60'], + contrast: 'rgba(95, 161, 101, 1)', + }, + tertiary: { + dim: 'rgba(181, 92, 101, 0.3)', + normal: referenceTokens.tertiary['60'], + contrast: 'rgba(181, 92, 101, 1)', + }, + }, + }, + dark: { + colors: { + background: referenceTokens.primary['95'], + onBackground: referenceTokens.primary['20'], + container: referenceTokens.primary['90'], + onContainer: { + dim: referenceTokens.primary['80'], + normal: referenceTokens.primary['50'], + contrast: referenceTokens.primary['30'], + }, + primary: { + dim: 'rgba(86, 121, 135, 0.3)', + normal: referenceTokens.primary['50'], + contrast: 'rgb(100 170 198)', + }, + secondary: { + dim: 'rgba(95, 161, 101, 0.3)', + normal: referenceTokens.secondary['50'], + contrast: 'rgb(98 204 108)', + }, + tertiary: { + dim: 'rgba(181, 92, 101, 0.3)', + normal: referenceTokens.tertiary['50'], + contrast: 'rgb(233 126 137)', + }, + }, + }, + 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; From b6f778c869d681bc299ea040f061f5a541f81d15 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Fri, 31 Jan 2025 21:19:54 +0100 Subject: [PATCH 02/12] feat: update design system --- src/components/CloseIcon/InfoIcon.styled.ts | 6 +-- src/components/InfoIcon/InfoIcon.styled.ts | 6 +-- src/components/Modal/Modal.styled.ts | 4 +- src/components/MoonIcon/MoonIcon.styled.ts | 2 +- src/components/MoonIcon/MoonIcon.tsx | 2 +- src/components/SunIcon/SunIcon.styled.ts | 2 +- src/components/SunIcon/SunIcon.tsx | 2 +- src/emotion.d.ts | 3 +- src/pages/home/Home.styled.ts | 38 +++++++++--------- .../sections/Callstack/Callstack.styled.ts | 12 +++--- .../Configurator/Editor/Editor.styled.ts | 26 +++++++------ .../home/sections/Console/Console.styled.ts | 16 +++++--- .../sections/EventLoop/Wheel/Wheel.styled.ts | 14 ++++--- .../home/sections/EventLoop/Wheel/Wheel.tsx | 24 ++++++------ .../MicroTasksQueue/MicroTasksQueue.styled.ts | 8 ++-- .../RequestAnimationFrameQueue.styled.ts | 8 ++-- .../sections/TasksQueue/TasksQueue.styled.ts | 12 ++++-- .../sections/WebApiQueue/WebApiTask.styled.ts | 20 ++++++---- src/providers/StylesProvider.tsx | 4 +- src/providers/StylesProvider.utils.ts | 24 +++++++----- src/theme/theme.ts | 5 +-- src/theme/tokens.com.ts | 39 +++++++++++++++++++ src/theme/tokens.sys.ts | 2 + 23 files changed, 174 insertions(+), 105 deletions(-) create mode 100644 src/theme/tokens.com.ts diff --git a/src/components/CloseIcon/InfoIcon.styled.ts b/src/components/CloseIcon/InfoIcon.styled.ts index baa19a1..6c8d517 100644 --- a/src/components/CloseIcon/InfoIcon.styled.ts +++ b/src/components/CloseIcon/InfoIcon.styled.ts @@ -2,12 +2,12 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; export const Closed = styled.svg( - ({ theme }) => css` + ({ theme: { custom } }) => css` cursor: pointer; - fill: ${theme.custom.colors.onContainer.normal}; + fill: ${custom.com.icon.background.default}; &:hover { - fill: ${theme.custom.colors.onContainer.contrast}; + fill: ${custom.com.icon.background.hover}; } ` ); diff --git a/src/components/InfoIcon/InfoIcon.styled.ts b/src/components/InfoIcon/InfoIcon.styled.ts index c09f943..fc9a2db 100644 --- a/src/components/InfoIcon/InfoIcon.styled.ts +++ b/src/components/InfoIcon/InfoIcon.styled.ts @@ -2,15 +2,15 @@ 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; cursor: pointer; - fill: ${theme.custom.colors.onContainer.normal}; + fill: ${custom.com.icon.background.default}; &:hover { - fill: ${theme.custom.colors.onContainer.contrast}; + fill: ${custom.com.icon.background.hover}; } ` ); 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..474a199 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.com.text}; ` ); diff --git a/src/components/MoonIcon/MoonIcon.tsx b/src/components/MoonIcon/MoonIcon.tsx index a4d9c26..600b36e 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.com.text; return ( css` cursor: pointer; - fill: ${theme.custom.colors.onContainer.contrast}; + fill: ${theme.custom.com.text}; ` ); diff --git a/src/components/SunIcon/SunIcon.tsx b/src/components/SunIcon/SunIcon.tsx index 0abb099..e2df061 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.com.text; 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; @@ -30,7 +30,7 @@ export const Layout = styled.div( flex-direction: column; gap: 20px; - @media (min-width: ${theme.custom.breakpoints.desktop}px) { + @media (min-width: ${theme.custom.sys.breakpoints.desktop}px) { flex-direction: row; overflow: hidden; } @@ -41,7 +41,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 +51,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 +80,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 +91,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 +102,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 +113,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 +123,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 +133,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 +145,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 +155,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 +165,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 +180,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..04c590f 100644 --- a/src/pages/home/sections/Callstack/Callstack.styled.ts +++ b/src/pages/home/sections/Callstack/Callstack.styled.ts @@ -10,17 +10,17 @@ 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-radius: 5px; padding: 10px; word-wrap: break-word; @@ -31,7 +31,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..0b270bd 100644 --- a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts +++ b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts @@ -2,34 +2,38 @@ 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}; } .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.normal}; + 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..6d9988e 100644 --- a/src/pages/home/sections/Console/Console.styled.ts +++ b/src/pages/home/sections/Console/Console.styled.ts @@ -8,17 +8,21 @@ 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-radius: 5px; padding: 10px; word-wrap: break-word; @@ -28,7 +32,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/Wheel/Wheel.styled.ts b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts index 96a23ea..510765f 100644 --- a/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts +++ b/src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts @@ -9,15 +9,19 @@ export const CircleContainer = styled.div` `; 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..3599b06 100644 --- a/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx +++ b/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx @@ -17,25 +17,27 @@ const SEGMENT_OFFSET = -9; const POINTER_OFFSET = -99; function Wheel() { - const theme = useTheme(); + const { + custom: { sys, com }, + } = useTheme(); const { render, macrotask, microtask } = useWheelStore((state) => state); 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: com.text, + 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, }, }; diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts index 2f95c74..cedf56a 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts @@ -10,10 +10,10 @@ 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.queue}; + transition: background-color ${custom.sys.transitions.color}; + animation: ${custom.sys.animations.zoomIn}; 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..b68541b 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts @@ -10,10 +10,10 @@ 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}; 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..14c291d 100644 --- a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts +++ b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts @@ -10,10 +10,14 @@ 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.queue.element}; + 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/WebApiTask.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts index 613fda3..329c596 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.queue.element}; + 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.colors.onContainer.contrast}, + ${custom.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 5cc9978..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 { systemColorTokens } from '../theme/tokens.sys.ts'; +import { getSystemTokens } from '../theme/tokens.sys.ts'; import { getTheme } from '../theme/theme.ts'; export function StylesProvider({ children }: PropsWithChildren) { const { isDark } = useThemeStore(); const mode = isDark ? 'dark' : 'light'; - const theme = getTheme(systemColorTokens[mode], mode); + 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..00ed42a 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 }, + }, +}: { + 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 { @@ -62,11 +68,11 @@ export const getGlobalStyles = ({ theme }: { theme: Theme }) => css` } ::-webkit-scrollbar-thumb { - background: ${theme.custom.colors.onContainer.normal}; + background: ${sys.colors.onContainer.normal}; } :focus-visible { - outline: 2px solid ${theme.custom.colors.onContainer.normal}; + outline: 2px solid ${sys.colors.onContainer.normal}; } @keyframes zoomIn { diff --git a/src/theme/theme.ts b/src/theme/theme.ts index c56b2c8..98e3be8 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -2,6 +2,7 @@ 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 = (st: SystemTokens, mode: 'dark' | 'light') => createTheme({ @@ -69,9 +70,7 @@ export const getTheme = (sys: SystemTokens, mode: 'dark' | 'light'): Theme => { mode, ref, sys, - com: { - //todo: add all components that we need - }, + com: getComponentsTokens(sys), }, }; }; diff --git a/src/theme/tokens.com.ts b/src/theme/tokens.com.ts new file mode 100644 index 0000000..59693b7 --- /dev/null +++ b/src/theme/tokens.com.ts @@ -0,0 +1,39 @@ +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, + }, + text: st.colors.onBackground, + icon: { + background: { + default: st.colors.onContainer.normal, + hover: st.colors.onContainer.contrast, + }, + }, +}); + +export type ComponentTokens = ReturnType; diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index 33f52c0..7bfefca 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -3,6 +3,7 @@ import { referenceTokens } from './tokens.ref.ts'; const systemTokens = { light: { colors: { + border: referenceTokens.primary['15'], background: referenceTokens.primary['5'], onBackground: referenceTokens.primary['90'], container: referenceTokens.primary['10'], @@ -30,6 +31,7 @@ const systemTokens = { }, dark: { colors: { + border: referenceTokens.primary['80'], background: referenceTokens.primary['95'], onBackground: referenceTokens.primary['20'], container: referenceTokens.primary['90'], From fc6021783620d9434668fc23754d542397976647 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 10:20:12 +0100 Subject: [PATCH 03/12] feat: update design system --- src/theme/tokens.sys.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index 7bfefca..8a4ada7 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -1,7 +1,7 @@ import { referenceTokens } from './tokens.ref.ts'; const systemTokens = { - light: { + dark: { colors: { border: referenceTokens.primary['15'], background: referenceTokens.primary['5'], @@ -29,7 +29,7 @@ const systemTokens = { }, }, }, - dark: { + light: { colors: { border: referenceTokens.primary['80'], background: referenceTokens.primary['95'], From e90196c854a068a6354fc473fd76af7edef9a118 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 10:29:40 +0100 Subject: [PATCH 04/12] feat: update design system --- .../home/sections/Configurator/Editor/Editor.styled.ts | 2 +- src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts | 4 ++-- src/theme/tokens.sys.ts | 6 ------ 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts index 0b270bd..cc07c52 100644 --- a/src/pages/home/sections/Configurator/Editor/Editor.styled.ts +++ b/src/pages/home/sections/Configurator/Editor/Editor.styled.ts @@ -21,7 +21,7 @@ export const EditorWrapper = styled.div( .selected_lines { position: absolute; - background: ${sys.colors.tertiary.normal}; + background: ${sys.colors.tertiary.contrast}; transition: background-color ${sys.transitions.color}; opacity: 0.3; } diff --git a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts index 329c596..afd160e 100644 --- a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts +++ b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts @@ -27,8 +27,8 @@ export const Progress = styled.div<{ progress: number }>( ({ theme: { custom }, progress }) => css` background-color: transparent; background-image: conic-gradient( - ${custom.colors.onContainer.contrast}, - ${custom.colors.onContainer.contrast} ${progress}%, + ${custom.sys.colors.onContainer.contrast}, + ${custom.sys.colors.onContainer.contrast} ${progress}%, transparent ${progress}% ); transition: background-color ${custom.sys.transitions.color}; diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index 8a4ada7..ba6ce5b 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -14,17 +14,14 @@ const systemTokens = { }, primary: { dim: 'rgba(86, 121, 135, 0.3)', - normal: referenceTokens.primary['60'], contrast: 'rgba(86, 121, 135, 1)', }, secondary: { dim: 'rgba(95, 161, 101, 0.3)', - normal: referenceTokens.secondary['60'], contrast: 'rgba(95, 161, 101, 1)', }, tertiary: { dim: 'rgba(181, 92, 101, 0.3)', - normal: referenceTokens.tertiary['60'], contrast: 'rgba(181, 92, 101, 1)', }, }, @@ -42,17 +39,14 @@ const systemTokens = { }, primary: { dim: 'rgba(86, 121, 135, 0.3)', - normal: referenceTokens.primary['50'], contrast: 'rgb(100 170 198)', }, secondary: { dim: 'rgba(95, 161, 101, 0.3)', - normal: referenceTokens.secondary['50'], contrast: 'rgb(98 204 108)', }, tertiary: { dim: 'rgba(181, 92, 101, 0.3)', - normal: referenceTokens.tertiary['50'], contrast: 'rgb(233 126 137)', }, }, From 4800f2a16fa3c03c60d2199786547efecf238308 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 10:35:22 +0100 Subject: [PATCH 05/12] feat: update design system --- src/theme/tokens.sys.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index ba6ce5b..25f8b22 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -38,15 +38,15 @@ const systemTokens = { contrast: referenceTokens.primary['30'], }, primary: { - dim: 'rgba(86, 121, 135, 0.3)', + dim: 'rgba(100, 170, 198, 0.3)', contrast: 'rgb(100 170 198)', }, secondary: { - dim: 'rgba(95, 161, 101, 0.3)', + dim: 'rgba(98, 204, 108, 0.3)', contrast: 'rgb(98 204 108)', }, tertiary: { - dim: 'rgba(181, 92, 101, 0.3)', + dim: 'rgba(233, 126, 137, 0.3)', contrast: 'rgb(233 126 137)', }, }, From 0c536f5c5e1b44684fd5d04909ac1cd7b491cbc5 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 11:16:36 +0100 Subject: [PATCH 06/12] feat: update design system --- .../MicroTasksQueue/MicroTasksQueue.styled.ts | 2 +- .../sections/TasksQueue/TasksQueue.styled.ts | 2 +- .../sections/WebApiQueue/WebApiTask.styled.ts | 2 +- src/providers/StylesProvider.utils.ts | 4 +-- src/theme/theme.ts | 2 +- src/theme/tokens.com.ts | 2 +- src/theme/tokens.sys.ts | 25 +++++++++---------- 7 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts index cedf56a..374d004 100644 --- 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: { custom } }) => css` - background: ${custom.com.queue}; + background: ${custom.com.queueElement.background}; transition: background-color ${custom.sys.transitions.color}; animation: ${custom.sys.animations.zoomIn}; flex: 1; diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts index 14c291d..fe3bb76 100644 --- a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts +++ b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts @@ -15,7 +15,7 @@ export const Task = styled.div( custom: { com, sys }, }, }) => css` - background: ${com.queue.element}; + background: ${com.queueElement.background}; transition: background-color ${sys.transitions.color}; animation: ${sys.animations.zoomIn}; flex: 1; diff --git a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts index afd160e..842b528 100644 --- a/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts +++ b/src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts @@ -7,7 +7,7 @@ export const WebApiItem = styled.div( custom: { sys, com }, }, }) => css` - background: ${com.queue.element}; + background: ${com.queueElement.background}; transition: background-color ${sys.transitions.color}; border-radius: 5px; padding: 10px; diff --git a/src/providers/StylesProvider.utils.ts b/src/providers/StylesProvider.utils.ts index 00ed42a..c3feea8 100644 --- a/src/providers/StylesProvider.utils.ts +++ b/src/providers/StylesProvider.utils.ts @@ -68,11 +68,11 @@ export const getGlobalStyles = ({ } ::-webkit-scrollbar-thumb { - background: ${sys.colors.onContainer.normal}; + background: ${sys.colors.onContainer.contrast}; } :focus-visible { - outline: 2px solid ${sys.colors.onContainer.normal}; + outline: 2px solid ${sys.colors.onContainer.contrast}; } @keyframes zoomIn { diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 98e3be8..74f0035 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -38,7 +38,7 @@ export const getMuiTheme = (st: SystemTokens, mode: 'dark' | 'light') => styleOverrides: { root: { '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: st.colors.onContainer.normal, + borderColor: st.colors.onContainer.contrast, }, transition: st.transitions.color, }, diff --git a/src/theme/tokens.com.ts b/src/theme/tokens.com.ts index 59693b7..260f135 100644 --- a/src/theme/tokens.com.ts +++ b/src/theme/tokens.com.ts @@ -30,7 +30,7 @@ export const getComponentsTokens = (st: SystemTokens) => ({ text: st.colors.onBackground, icon: { background: { - default: st.colors.onContainer.normal, + default: st.colors.onContainer.contrast, hover: st.colors.onContainer.contrast, }, }, diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index 25f8b22..aae99a6 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -3,26 +3,25 @@ import { referenceTokens } from './tokens.ref.ts'; const systemTokens = { dark: { colors: { - border: referenceTokens.primary['15'], - background: referenceTokens.primary['5'], - onBackground: referenceTokens.primary['90'], - container: referenceTokens.primary['10'], + border: 'transparent', + background: '#1e2226', + onBackground: '#b6c2cf', + container: '#15191c', onContainer: { - dim: referenceTokens.primary['15'], - normal: referenceTokens.primary['50'], - contrast: referenceTokens.primary['90'], + dim: '#282e33', + contrast: '#b6c2cf', }, primary: { - dim: 'rgba(86, 121, 135, 0.3)', - contrast: 'rgba(86, 121, 135, 1)', + dim: 'rgba(174,71,135, 0.25)', + contrast: 'rgb(174,71,135)', // yellow 700 }, secondary: { - dim: 'rgba(95, 161, 101, 0.3)', - contrast: 'rgba(95, 161, 101, 1)', + dim: 'rgba(34,160,107, 0.25)', + contrast: 'rgb(34,160,107)', // green 700 }, tertiary: { - dim: 'rgba(181, 92, 101, 0.3)', - contrast: 'rgba(181, 92, 101, 1)', + dim: 'rgba(12,102,228, 0.25)', + contrast: 'rgb(12,102,228)', // blue 700 }, }, }, From 74f1e024727129848910f40259f932494b455c97 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 11:38:47 +0100 Subject: [PATCH 07/12] feat: update design system --- src/theme/tokens.sys.ts | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index aae99a6..a327385 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -3,38 +3,37 @@ import { referenceTokens } from './tokens.ref.ts'; const systemTokens = { dark: { colors: { - border: 'transparent', - background: '#1e2226', - onBackground: '#b6c2cf', - container: '#15191c', + border: referenceTokens.primary['15'], + background: referenceTokens.primary['5'], + onBackground: referenceTokens.primary['90'], + container: referenceTokens.primary['10'], onContainer: { - dim: '#282e33', - contrast: '#b6c2cf', + dim: referenceTokens.primary['15'], + contrast: referenceTokens.primary['90'], }, primary: { - dim: 'rgba(174,71,135, 0.25)', - contrast: 'rgb(174,71,135)', // yellow 700 + dim: 'rgba(86, 121, 135, 0.3)', + contrast: 'rgba(86, 121, 135, 1)', }, secondary: { - dim: 'rgba(34,160,107, 0.25)', - contrast: 'rgb(34,160,107)', // green 700 + dim: 'rgba(95, 161, 101, 0.3)', + contrast: 'rgba(95, 161, 101, 1)', }, tertiary: { - dim: 'rgba(12,102,228, 0.25)', - contrast: 'rgb(12,102,228)', // blue 700 + dim: 'rgba(181, 92, 101, 0.3)', + contrast: 'rgba(181, 92, 101, 1)', }, }, }, light: { colors: { - border: referenceTokens.primary['80'], - background: referenceTokens.primary['95'], - onBackground: referenceTokens.primary['20'], - container: referenceTokens.primary['90'], + border: referenceTokens.neutral['80'], + background: referenceTokens.neutral['98'], + onBackground: referenceTokens.neutral['20'], + container: referenceTokens.neutral['100'], onContainer: { - dim: referenceTokens.primary['80'], - normal: referenceTokens.primary['50'], - contrast: referenceTokens.primary['30'], + dim: referenceTokens.neutral['90'], + contrast: referenceTokens.neutral['30'], }, primary: { dim: 'rgba(100, 170, 198, 0.3)', From eea52f7e30a5658c12a9fc6639d0508236ff5f7d Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 12:04:30 +0100 Subject: [PATCH 08/12] feat: update design system --- src/theme/tokens.sys.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index a327385..2687237 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -28,24 +28,24 @@ const systemTokens = { light: { colors: { border: referenceTokens.neutral['80'], - background: referenceTokens.neutral['98'], + background: referenceTokens.neutral['95'], onBackground: referenceTokens.neutral['20'], - container: referenceTokens.neutral['100'], + container: referenceTokens.neutral['98'], onContainer: { dim: referenceTokens.neutral['90'], contrast: referenceTokens.neutral['30'], }, primary: { - dim: 'rgba(100, 170, 198, 0.3)', - contrast: 'rgb(100 170 198)', + dim: 'rgba(108,195,224, 0.4)', + contrast: 'rgb(108,195,224)', }, secondary: { - dim: 'rgba(98, 204, 108, 0.3)', - contrast: 'rgb(98 204 108)', + dim: 'rgba(75,206,151, 0.4)', + contrast: 'rgb(75,206,151)', }, tertiary: { - dim: 'rgba(233, 126, 137, 0.3)', - contrast: 'rgb(233 126 137)', + dim: 'rgba(247,151,210, 0.3)', + contrast: 'rgb(247,151,210)', }, }, }, From 4b666e2597e1f851eec22b6a0c3776bfa6bc3f79 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 17:27:04 +0100 Subject: [PATCH 09/12] feat: update design system --- src/components/CloseIcon/InfoIcon.styled.ts | 6 +-- src/components/InfoIcon/InfoIcon.styled.ts | 10 ++--- .../sections/Callstack/Callstack.styled.ts | 1 + .../home/sections/Console/Console.styled.ts | 1 + .../MicroTasksQueue/MicroTasksQueue.styled.ts | 1 + .../RequestAnimationFrameQueue.styled.ts | 1 + .../sections/TasksQueue/TasksQueue.styled.ts | 1 + src/theme/tokens.com.ts | 5 +-- src/theme/tokens.ref.ts | 42 +------------------ src/theme/tokens.sys.ts | 24 +++++------ 10 files changed, 23 insertions(+), 69 deletions(-) diff --git a/src/components/CloseIcon/InfoIcon.styled.ts b/src/components/CloseIcon/InfoIcon.styled.ts index 6c8d517..1a8f1db 100644 --- a/src/components/CloseIcon/InfoIcon.styled.ts +++ b/src/components/CloseIcon/InfoIcon.styled.ts @@ -4,10 +4,6 @@ import { css } from '@emotion/react'; export const Closed = styled.svg( ({ theme: { custom } }) => css` cursor: pointer; - fill: ${custom.com.icon.background.default}; - - &:hover { - fill: ${custom.com.icon.background.hover}; - } + fill: ${custom.com.icon.background}; ` ); diff --git a/src/components/InfoIcon/InfoIcon.styled.ts b/src/components/InfoIcon/InfoIcon.styled.ts index fc9a2db..cf13225 100644 --- a/src/components/InfoIcon/InfoIcon.styled.ts +++ b/src/components/InfoIcon/InfoIcon.styled.ts @@ -4,13 +4,9 @@ import { css } from '@emotion/react'; export const Info = styled.svg( ({ theme: { custom } }) => css` position: absolute; - top: 4px; - right: 4px; + top: 6px; + right: 6px; cursor: pointer; - fill: ${custom.com.icon.background.default}; - - &:hover { - fill: ${custom.com.icon.background.hover}; - } + fill: ${custom.com.icon.background}; ` ); diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts index 04c590f..f55ef77 100644 --- a/src/pages/home/sections/Callstack/Callstack.styled.ts +++ b/src/pages/home/sections/Callstack/Callstack.styled.ts @@ -21,6 +21,7 @@ export const CallstackElement = styled.div( 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; diff --git a/src/pages/home/sections/Console/Console.styled.ts b/src/pages/home/sections/Console/Console.styled.ts index 6d9988e..c8ee8eb 100644 --- a/src/pages/home/sections/Console/Console.styled.ts +++ b/src/pages/home/sections/Console/Console.styled.ts @@ -23,6 +23,7 @@ export const Log = styled.div( 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; diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts index 374d004..eda8050 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts @@ -14,6 +14,7 @@ export const MicroTask = styled.div( 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 b68541b..4b59548 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts @@ -14,6 +14,7 @@ export const Callback = styled.div( 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 fe3bb76..4f37b80 100644 --- a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts +++ b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts @@ -16,6 +16,7 @@ export const Task = styled.div( }, }) => css` background: ${com.queueElement.background}; + border: 1px solid ${sys.colors.border}; transition: background-color ${sys.transitions.color}; animation: ${sys.animations.zoomIn}; flex: 1; diff --git a/src/theme/tokens.com.ts b/src/theme/tokens.com.ts index 260f135..9ab2079 100644 --- a/src/theme/tokens.com.ts +++ b/src/theme/tokens.com.ts @@ -29,10 +29,7 @@ export const getComponentsTokens = (st: SystemTokens) => ({ }, text: st.colors.onBackground, icon: { - background: { - default: st.colors.onContainer.contrast, - hover: st.colors.onContainer.contrast, - }, + background: st.colors.onContainer.contrast, }, }); diff --git a/src/theme/tokens.ref.ts b/src/theme/tokens.ref.ts index 485a9cb..09a0ce5 100644 --- a/src/theme/tokens.ref.ts +++ b/src/theme/tokens.ref.ts @@ -1,6 +1,6 @@ //https://coolors.co/264653-6d9f71-a65961 export const referenceTokens = { - primary: { + brand: { '0': '#000000', '5': '#00131B', '10': '#001F29', @@ -20,46 +20,6 @@ export const referenceTokens = { '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', diff --git a/src/theme/tokens.sys.ts b/src/theme/tokens.sys.ts index 2687237..b2c33c4 100644 --- a/src/theme/tokens.sys.ts +++ b/src/theme/tokens.sys.ts @@ -3,13 +3,13 @@ import { referenceTokens } from './tokens.ref.ts'; const systemTokens = { dark: { colors: { - border: referenceTokens.primary['15'], - background: referenceTokens.primary['5'], - onBackground: referenceTokens.primary['90'], - container: referenceTokens.primary['10'], + border: referenceTokens.brand['15'], + background: referenceTokens.brand['5'], + onBackground: referenceTokens.brand['90'], + container: referenceTokens.brand['10'], onContainer: { - dim: referenceTokens.primary['15'], - contrast: referenceTokens.primary['90'], + dim: referenceTokens.brand['15'], + contrast: referenceTokens.brand['90'], }, primary: { dim: 'rgba(86, 121, 135, 0.3)', @@ -36,16 +36,16 @@ const systemTokens = { contrast: referenceTokens.neutral['30'], }, primary: { - dim: 'rgba(108,195,224, 0.4)', - contrast: 'rgb(108,195,224)', + dim: 'rgba(108, 195, 224, 0.3)', + contrast: 'rgba(108, 195, 224, 1)', }, secondary: { - dim: 'rgba(75,206,151, 0.4)', - contrast: 'rgb(75,206,151)', + dim: 'rgba(75, 206, 151, 0.3)', + contrast: 'rgba(75, 206, 151, 1)', }, tertiary: { - dim: 'rgba(247,151,210, 0.3)', - contrast: 'rgb(247,151,210)', + dim: 'rgba(247, 151, 210, 0.2)', + contrast: 'rgba(247, 151, 210, 1)', }, }, }, From d541ad01a7d1c7b97aaba63944796a2edad1f966 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 17:45:41 +0100 Subject: [PATCH 10/12] feat: update design system --- src/components/MoonIcon/MoonIcon.styled.ts | 2 +- src/components/MoonIcon/MoonIcon.tsx | 2 +- src/components/SunIcon/SunIcon.styled.ts | 2 +- src/components/SunIcon/SunIcon.tsx | 2 +- .../Configurator/Editor/Editor.styled.ts | 3 +++ .../home/sections/EventLoop/Wheel/Wheel.tsx | 17 +++++++++-------- src/theme/tokens.com.ts | 1 - 7 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/MoonIcon/MoonIcon.styled.ts b/src/components/MoonIcon/MoonIcon.styled.ts index 474a199..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.com.text}; + fill: ${theme.custom.sys.colors.onBackground}; ` ); diff --git a/src/components/MoonIcon/MoonIcon.tsx b/src/components/MoonIcon/MoonIcon.tsx index 600b36e..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.com.text; + const textColor = theme.custom.sys.colors.onBackground; return ( css` cursor: pointer; - fill: ${theme.custom.com.text}; + fill: ${theme.custom.sys.colors.onBackground}; ` ); diff --git a/src/components/SunIcon/SunIcon.tsx b/src/components/SunIcon/SunIcon.tsx index e2df061..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.com.text; + const textColor = theme.custom.sys.colors.onBackground; return ( div { + opacity: 0.7; + } } .ace_gutter { diff --git a/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx b/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx index 3599b06..3786fd6 100644 --- a/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx +++ b/src/pages/home/sections/EventLoop/Wheel/Wheel.tsx @@ -18,12 +18,13 @@ const POINTER_OFFSET = -99; function Wheel() { const { - custom: { sys, com }, + custom: { sys, com, mode }, } = useTheme(); const { render, macrotask, microtask } = useWheelStore((state) => state); + const fontWeight = mode === 'light' ? '500' : '800'; const colors = { - text: com.text, + text: sys.colors.onBackground, pointer: com.wheel.pointer, wheel: com.wheel.background, background: sys.colors.container, @@ -172,7 +173,7 @@ function Wheel() { y="-38" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -181,7 +182,7 @@ function Wheel() { y="-38" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -190,7 +191,7 @@ function Wheel() { y="44" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -199,7 +200,7 @@ function Wheel() { y="44" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > mTMicrotask @@ -208,7 +209,7 @@ function Wheel() { y="3" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > RRender @@ -217,7 +218,7 @@ function Wheel() { y="3" fill={colors.text} font-size="9px" - font-weight="bold" + font-weight={fontWeight} > TTask diff --git a/src/theme/tokens.com.ts b/src/theme/tokens.com.ts index 9ab2079..e3093d1 100644 --- a/src/theme/tokens.com.ts +++ b/src/theme/tokens.com.ts @@ -27,7 +27,6 @@ export const getComponentsTokens = (st: SystemTokens) => ({ queue: { background: st.colors.container, }, - text: st.colors.onBackground, icon: { background: st.colors.onContainer.contrast, }, From 682f4aaaab37e2381c7edda69fcb6983a868579e Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 17:55:26 +0100 Subject: [PATCH 11/12] feat: update design system --- .../{InfoIcon.styled.ts => CloseIcon.styled.ts} | 2 +- .../CloseIcon/{InfoIcon.tsx => CloseIcon.tsx} | 10 +++++----- src/pages/home/Home.styled.ts | 3 ++- src/pages/home/sections/Callstack/Callstack.styled.ts | 2 +- src/pages/home/sections/EventLoop/EventLoop.styled.ts | 2 +- .../sections/MicroTasksQueue/MicroTasksQueue.styled.ts | 2 +- .../RequestAnimationFrameQueue.styled.ts | 2 +- .../home/sections/TasksQueue/TasksQueue.styled.ts | 2 +- .../home/sections/WebApiQueue/WebApiQueue.styled.ts | 2 +- src/providers/StylesProvider.utils.ts | 10 +++++----- src/theme/tokens.com.ts | 3 +++ 11 files changed, 22 insertions(+), 18 deletions(-) rename src/components/CloseIcon/{InfoIcon.styled.ts => CloseIcon.styled.ts} (82%) rename src/components/CloseIcon/{InfoIcon.tsx => CloseIcon.tsx} (76%) diff --git a/src/components/CloseIcon/InfoIcon.styled.ts b/src/components/CloseIcon/CloseIcon.styled.ts similarity index 82% rename from src/components/CloseIcon/InfoIcon.styled.ts rename to src/components/CloseIcon/CloseIcon.styled.ts index 1a8f1db..58ee301 100644 --- a/src/components/CloseIcon/InfoIcon.styled.ts +++ b/src/components/CloseIcon/CloseIcon.styled.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; -export const Closed = styled.svg( +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/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts index bb78d40..c8830bb 100644 --- a/src/pages/home/Home.styled.ts +++ b/src/pages/home/Home.styled.ts @@ -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.sys.breakpoints.desktop}px) { + padding: 20px; flex-direction: row; overflow: hidden; } diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts index f55ef77..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` 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/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts index eda8050..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; diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts index 4b59548..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; diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts b/src/pages/home/sections/TasksQueue/TasksQueue.styled.ts index 4f37b80..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; 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/providers/StylesProvider.utils.ts b/src/providers/StylesProvider.utils.ts index c3feea8..31d8b0e 100644 --- a/src/providers/StylesProvider.utils.ts +++ b/src/providers/StylesProvider.utils.ts @@ -2,7 +2,7 @@ import { css, Theme } from '@emotion/react'; export const getGlobalStyles = ({ theme: { - custom: { sys }, + custom: { sys, com }, }, }: { theme: Theme; @@ -63,16 +63,16 @@ export const getGlobalStyles = ({ } ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 4px; + height: 4px; } ::-webkit-scrollbar-thumb { - background: ${sys.colors.onContainer.contrast}; + background: ${com.scrollbar.background}; } :focus-visible { - outline: 2px solid ${sys.colors.onContainer.contrast}; + outline: 1px solid ${sys.colors.onContainer.contrast}; } @keyframes zoomIn { diff --git a/src/theme/tokens.com.ts b/src/theme/tokens.com.ts index e3093d1..2d39c23 100644 --- a/src/theme/tokens.com.ts +++ b/src/theme/tokens.com.ts @@ -30,6 +30,9 @@ export const getComponentsTokens = (st: SystemTokens) => ({ icon: { background: st.colors.onContainer.contrast, }, + scrollbar: { + background: st.colors.primary.contrast, + }, }); export type ComponentTokens = ReturnType; From ba83fd67eca5e8c5faca32464f6cab06861da0f0 Mon Sep 17 00:00:00 2001 From: Albert Trott Date: Sat, 1 Feb 2025 18:00:28 +0100 Subject: [PATCH 12/12] feat: update design system --- src/test/test-utils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/test-utils.tsx b/src/test/test-utils.tsx index aaee82f..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/tokens.sys.ts'; +import { getSystemTokens } from '../theme/tokens.sys.ts'; -const theme = getTheme(colorsDark); +const theme = getTheme(getSystemTokens('dark'), 'dark'); const AllTheProviders = ({ children }: PropsWithChildren) => { return {children};