From 0a4052d023a61ba284556639f5f4332d487cc19a Mon Sep 17 00:00:00 2001 From: dtinth-ampere-devbox Date: Tue, 3 Feb 2026 01:57:54 +0700 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20hardco?= =?UTF-8?q?ded=20colors=20with=20contextual=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaced hardcoded global color tokens (gray-000, gray-100, gray-600, white, gainsboro) with Cunningham contextual tokens to enable proper dark mode support. Components updated: - LeftPanel: background colors - DropButton: popover background - DropdownMenu: menu item background - DocEditor: editor container background - DocEditor styles: BlockNote CSS variables, inline code, links - TableContent: panel and heading backgrounds This allows the UI to automatically adapt between light and dark themes. Signed-off-by: dtinth-ampere-devbox Signed-off-by: dtinth on MBP M1 --- src/frontend/apps/impress/src/components/DropButton.tsx | 2 +- .../impress/src/components/dropdown-menu/DropdownMenu.tsx | 2 +- .../src/features/docs/doc-editor/components/DocEditor.tsx | 2 +- .../docs/doc-table-content/components/Heading.tsx | 6 +++++- .../docs/doc-table-content/components/TableContent.tsx | 2 +- .../features/docs/doc-tree/components/DocSubPageItem.tsx | 2 +- .../src/features/left-panel/components/LeftPanel.tsx | 8 ++++++-- 7 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx index 8c2ee0ba..ba9a2712 100644 --- a/src/frontend/apps/impress/src/components/DropButton.tsx +++ b/src/frontend/apps/impress/src/components/DropButton.tsx @@ -14,7 +14,7 @@ import { useFocusStore } from '@/stores'; import { BoxProps } from './Box'; const StyledPopover = styled(Popover)` - background-color: white; + background-color: var(--c--contextuals--background--surface--primary); border-radius: var(--c--globals--spacings--st); box-shadow: 0 0 6px 0 rgba(0, 0, 145, 0.1); border: 1px solid var(--c--contextuals--border--surface--primary); diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx index 629e6e43..05cba790 100644 --- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx +++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx @@ -193,7 +193,7 @@ export const DropdownMenu = ({ key={option.label} $align="center" $justify="space-between" - $background={colorsTokens['gray-000']} + $background="var(--c--contextuals--background--surface--primary)" $color={colorsTokens['brand-600']} $padding={{ vertical: 'xs', horizontal: 'base' }} $width="100%" diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx index 0f72bfbd..7ad43e04 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx @@ -59,7 +59,7 @@ export const DocEditorContainer = ({ { border: 1px solid ${colorsTokens['brand-100']}; overflow: hidden; border-radius: ${spacingsTokens['3xs']}; - background: ${colorsTokens['gray-000']}; + background: var(--c--contextuals--background--surface--primary); ${isOpen && css` display: flex; diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx index cedf7059..9d9856ff 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx @@ -135,7 +135,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps) => { aria-disabled={isDisabled} onKeyDown={handleKeyDown} $css={css` - background-color: var(--c--globals--colors--gray-000); + background-color: var(--c--contextuals--background--surface--primary); .light-doc-item-actions { display: ${menuOpen || !isDesktop ? 'flex' : 'none'}; right: var(--c--globals--spacings--0); diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx index caca04d3..4ff92237 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx @@ -44,7 +44,9 @@ export const LeftPanel = () => { height: calc(100vh - ${HEADER_HEIGHT}px); width: 100%; overflow: hidden; - background-color: var(--c--globals--colors--gray-000); + background-color: var( + --c--contextuals--background--surface--primary + ); `} className="--docs--left-panel-desktop" as="nav" @@ -73,7 +75,9 @@ export const LeftPanel = () => { border-right: 1px solid var(--c--globals--colors--gray-200); position: fixed; transform: translateX(${isPanelOpenState ? '0' : '-100dvw'}); - background-color: var(--c--globals--colors--gray-000); + background-color: var( + --c--contextuals--background--surface--primary + ); overflow-y: auto; overflow-x: hidden; `}