♻️(frontend) replace hardcoded colors with contextual tokens

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 <dtinth@spacet.me>
Signed-off-by: dtinth on MBP M1 <dtinth@spacet.me>

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);

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%"

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -59,7 +59,7 @@ export const DocEditorContainer = ({
           <Box $css="flex:1;" $position="relative" $width="100%">
             <Box
               $padding={{ top: 'md', bottom: '2rem' }}
-              $background="white"
+              $background="var(--c--contextuals--background--surface--primary)"
               className={clsx('--docs--editor-container', {
                 '--docs--doc-readonly': readOnly,
                 '--docs--doc-deleted': isDeletedDoc,

src/frontend/apps/impress/src/features/docs/doc-table-content/components/Heading.tsx

@@ -58,7 +58,11 @@ export const Heading = ({
         });
       }}
       $radius="var(--c--globals--spacings--st)"
-      $background={isActive ? `${colorsTokens['gray-100']}` : 'none'}
+      $background={
+        isActive
+          ? 'var(--c--contextuals--background--semantic--neutral--secondary)'
+          : 'none'
+      }
       $css={css`
         text-align: left;
         &:focus-visible {

src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx

@@ -72,7 +72,7 @@ export const TableContent = () => {
           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;

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -135,7 +135,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       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);

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