@difizen/libro-lab 0.2.20 → 0.2.21

package/src/kernel-and-terminal-panel/kernel-and-terminal-panel-view.tsx

@@ -6,11 +6,13 @@ import {
   CommandRegistry,
   inject,
   singleton,
+  ThemeService,
   useInject,
   view,
   ViewInstance,
   ViewManager,
 } from '@difizen/mana-app';
+import { ConfigProvider, theme } from 'antd';
 import { useEffect, useState } from 'react';
 
 import { KernelAndTerminal } from '../common/index.js';
@@ -29,6 +31,7 @@ import './index.less';
 const PanelRender: React.FC = () => {
   const instance = useInject<KernelAndTerminalPanelView>(ViewInstance);
   const openedTabView = instance.getAllOpenedTabView();
+  const themeService = useInject<ThemeService>(ThemeService);
 
   const {
     libroKernelManager,
@@ -131,46 +134,55 @@ const PanelRender: React.FC = () => {
   }, [terminalManager.runningModels]);
 
   return (
-    <div className="kernel-and-terminal-panel">
-      <LibroCollapse
-        type={LibroPanelCollapseItemType.PAGE}
-        items={openedTabView.children.map((item) => {
-          return {
-            id: item.id + '',
-            name: item.title.label as string,
-          };
-        })}
-        tabView={openedTabView}
-        shutdownAll={async () => {
-          // dispose会影响原始数组，这里使用解构赋值copy一份数组。
-          for (const item of [...openedTabView.children]) {
-            if (item.title.closable) {
-              item.dispose();
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
+    >
+      <div className="kernel-and-terminal-panel">
+        <LibroCollapse
+          type={LibroPanelCollapseItemType.PAGE}
+          items={openedTabView.children.map((item) => {
+            return {
+              id: item.id + '',
+              name: item.title.label as string,
+            };
+          })}
+          tabView={openedTabView}
+          shutdownAll={async () => {
+            // dispose会影响原始数组，这里使用解构赋值copy一份数组。
+            for (const item of [...openedTabView.children]) {
+              if (item.title.closable) {
+                item.dispose();
+              }
             }
+          }}
+        />
+        <LibroCollapse
+          type={LibroPanelCollapseItemType.KERNEL}
+          items={kernelItems}
+          shutdownAll={async () => {
+            await libroKernelManager.shutdownAll();
+            await libroSessionManager.refreshRunning();
+          }}
+        />
+        <LibroCollapse
+          type={LibroPanelCollapseItemType.TERMINAL}
+          items={terminalItems}
+          shutdownAll={async () => await terminalManager.shutdownAll()}
+        />
+        <LibroCollapse
+          type={LibroPanelCollapseItemType.LSP}
+          items={lspItems}
+          shutdownAll={async () =>
+            await libroLanguageClientManager.closeAllLanguageClient()
           }
-        }}
-      />
-      <LibroCollapse
-        type={LibroPanelCollapseItemType.KERNEL}
-        items={kernelItems}
-        shutdownAll={async () => {
-          await libroKernelManager.shutdownAll();
-          await libroSessionManager.refreshRunning();
-        }}
-      />
-      <LibroCollapse
-        type={LibroPanelCollapseItemType.TERMINAL}
-        items={terminalItems}
-        shutdownAll={async () => await terminalManager.shutdownAll()}
-      />
-      <LibroCollapse
-        type={LibroPanelCollapseItemType.LSP}
-        items={lspItems}
-        shutdownAll={async () =>
-          await libroLanguageClientManager.closeAllLanguageClient()
-        }
-      />
-    </div>
+        />
+      </div>
+    </ConfigProvider>
   );
 };
 

package/src/kernel-and-terminal-panel/kernel-color-registry.ts

@@ -0,0 +1,84 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color, ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class KernelPanelColorContribution implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    // common
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.lab.kernel.panel.collapse.header.label',
+        defaults: { dark: '#F8F8FB', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+      {
+        id: 'libro.lab.kernel.panel.collapse.item.text',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 10, 26, 0.65) },
+        description: '',
+      },
+      {
+        id: 'libro.lab.server.info.title.text',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 10, 26, 0.89) },
+        description: '',
+      },
+      {
+        id: 'libro.lab.server.info.text',
+        defaults: {
+          dark: '#e3e4e6',
+          light: Color.rgba(0, 10, 26, 0.78),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.h3.text',
+        defaults: {
+          dark: '#EDEEEF',
+          light: Color.rgba(0, 10, 26, 0.89),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.text',
+        defaults: {
+          dark: '#D6D8DA',
+          light: Color.rgba(0, 10, 26, 0.68),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.text',
+        defaults: {
+          dark: '#D6D8DA',
+          light: Color.rgba(0, 10, 26, 0.68),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.background',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.08),
+          light: '#000a1a05',
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.service.info.background',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.08),
+          light: Color.rgba(0, 10, 26, 0.02),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.hover.background',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.16),
+          light: Color.rgba(0, 10, 26, 0.04),
+        },
+        description: 'welcome',
+      },
+    );
+  }
+}

package/src/kernel-and-terminal-panel/module.ts

@@ -3,11 +3,13 @@ import { createViewPreference, ManaModule } from '@difizen/mana-app';
 import { LibroLabLayoutSlots } from '../layout/protocol.js';
 
 import { KernelAndTerminalPanelView } from './kernel-and-terminal-panel-view.js';
+import { KernelPanelColorContribution } from './kernel-color-registry.js';
 import { PanelCommandContribution } from './panel-command.js';
 
 export const LibroKernelAndTerminalPanelModule = ManaModule.create().register(
   PanelCommandContribution,
   KernelAndTerminalPanelView,
+  KernelPanelColorContribution,
   createViewPreference({
     view: KernelAndTerminalPanelView,
     slot: LibroLabLayoutSlots.navigator,

package/src/lab-color-registry.ts

@@ -0,0 +1,119 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color, ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class LabColorContribution implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    // common
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.lab.welcome.background.color',
+        defaults: { dark: '#1f2022', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.lab.welcome.h1.color',
+        defaults: {
+          dark: '#edeeef',
+          light: '#000A1A',
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.server.info.title.text',
+        defaults: { dark: '#BDC0C4', light: Color.rgba(0, 10, 26, 0.89) },
+        description: '',
+      },
+      {
+        id: 'libro.lab.server.info.text',
+        defaults: {
+          dark: '#e3e4e6',
+          light: Color.rgba(0, 10, 26, 0.78),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.h3.text',
+        defaults: {
+          dark: '#EDEEEF',
+          light: Color.rgba(0, 10, 26, 0.89),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.text',
+        defaults: {
+          dark: '#D6D8DA',
+          light: Color.rgba(0, 10, 26, 0.68),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.text',
+        defaults: {
+          dark: '#D6D8DA',
+          light: Color.rgba(0, 10, 26, 0.68),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.background',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.08),
+          light: '#000a1a05',
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.service.info.background',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.08),
+          light: Color.rgba(0, 10, 26, 0.02),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.welcome.entry.point.hover.background',
+        defaults: {
+          dark: Color.rgba(255, 255, 255, 0.16),
+          light: Color.rgba(0, 10, 26, 0.04),
+        },
+        description: 'welcome',
+      },
+      {
+        id: 'libro.lab.footer.text',
+        defaults: {
+          dark: '#E3E4E6',
+          light: '#000a1aad',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.lab.footer.background',
+        defaults: {
+          dark: '#161b21',
+          light: '#fcfcfc',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.lab.content.tab.nav',
+        defaults: {
+          dark: '#252526',
+          light: '#f8f8fb',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.lab.content.tab.active.background',
+        defaults: {
+          dark: '#161b21',
+          light: '#ffffff',
+        },
+        description: '',
+      },
+    );
+  }
+}

package/src/layout/footer/index.less

@@ -17,7 +17,7 @@
   align-items: center;
   font-weight: 400;
   font-size: 12px;
-  color: rgba(0, 10, 26, 68%);
+  color: var(--mana-libro-lab-footer-text);
 }
 
 .libro-lab-status-footer {

package/src/layout/index.less

@@ -20,7 +20,7 @@
   &-footer {
     height: 28px;
     min-height: 28px;
-    background-image: linear-gradient(270deg, #fafafa 0%, #fff 100%);
+    background: var(--mana-libro-lab-footer-background);
     box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 12%);
   }
 
@@ -33,13 +33,19 @@
       flex: unset !important;
     }
 
+    .mana-header-middle {
+      display: flex;
+      align-items: center;
+    }
+
     .mana-menubar {
-      height: 100%;
+      // height: 100%;
+      position: relative;
       padding: unset;
     }
 
     .mana-menubar-item-text {
-      color: rgba(0, 10, 26, 89%);
+      // color: rgba(0, 10, 26, 89%);
       font-weight: 400;
     }
   }

package/src/module.tsx

@@ -18,6 +18,7 @@ import { ImageViewerModule } from './image-viewer/index.js';
 // import { KernelManagerView } from './kernel-manager/index.js';
 import { LibroKernelAndTerminalPanelModule } from './kernel-and-terminal-panel/module.js';
 import { LibroLabApp } from './lab-app.js';
+import { LabColorContribution } from './lab-color-registry.js';
 import { ContentBottomTabView } from './layout/content-bottom-tab-view.js';
 import {
   LibroLabLayoutModule,
@@ -38,6 +39,7 @@ export const LibroLabModule = ManaModule.create()
     GithubLinkView,
     LabConfigAppContribution,
     LibroLabSideTabView,
+    LabColorContribution,
     createViewPreference({
       view: GithubLinkView,
       slot: HeaderArea.right,

package/src/toc/libro-toc-panel-view.tsx

@@ -5,13 +5,14 @@ import {
   inject,
   prop,
   singleton,
+  ThemeService,
   useInject,
   view,
   ViewInstance,
   ViewManager,
   ViewRender,
 } from '@difizen/mana-app';
-import { Empty } from 'antd';
+import { ConfigProvider, Empty, theme } from 'antd';
 
 import { TocIcon } from '../common/index.js';
 import { LayoutService } from '../layout/layout-service.js';
@@ -21,18 +22,28 @@ import './index.less';
 
 const TocViewRender: React.FC = () => {
   const tocPanelView = useInject<TocPanelView>(ViewInstance);
+  const themeService = useInject<ThemeService>(ThemeService);
   return (
-    <div className="libro-lab-toc-panel">
-      {tocPanelView.libroTocView ? (
-        <ViewRender view={tocPanelView.libroTocView}></ViewRender>
-      ) : (
-        <Empty
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-          description="该文件格式暂不支持大纲"
-          className="libro-lab-toc-empty"
-        />
-      )}
-    </div>
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
+    >
+      <div className="libro-lab-toc-panel">
+        {tocPanelView.libroTocView ? (
+          <ViewRender view={tocPanelView.libroTocView}></ViewRender>
+        ) : (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description="该文件格式暂不支持大纲"
+            className="libro-lab-toc-empty"
+          />
+        )}
+      </div>
+    </ConfigProvider>
   );
 };
 

package/src/welcome/index.less

@@ -1,7 +1,7 @@
 .libro-lab-welcome-page {
   padding: 32px 54px;
   height: 100%;
-  background: white;
+  background: var(--mana-libro-lab-welcome-background-color);
   overflow: auto;
 
   .libro-lab-welcome-page-title {
@@ -9,7 +9,7 @@
     font-family: PingFangSC;
     font-weight: 600;
     font-size: 40px;
-    color: #000a1a;
+    color: var(--mana-libro-lab-welcome-h1-color);
     letter-spacing: 0;
     line-height: 56px;
   }
@@ -29,12 +29,12 @@
   margin-bottom: 24px;
   height: 100px;
   width: 100px;
-  background-color: rgba(0, 10, 26, 2%);
+  background-color: var(--mana-libro-lab-welcome-entry-point-background);
   border-radius: 8px;
   cursor: pointer;
 
   &:hover {
-    background-color: rgba(0, 10, 26, 4%);
+    background-color: var(--mana-libro-lab-welcome-entry-point-hover-background);
   }
 }
 
@@ -42,20 +42,20 @@
   margin-top: 6px;
   line-height: 20px;
   font-size: 14px;
-  color: rgba(0, 10, 26, 68%);
+  color: var(--mana-libro-lab-welcome-entry-point-text);
 }
 
 .libro-lab-entry-point-title {
   font-weight: 500;
   font-size: 18px;
   margin-bottom: 12px;
-  color: rgba(0, 10, 26, 89%);
+  color: var(--mana-libro-lab-welcome-h3-color);
 }
 
 .libro-lab-entry-point-item-title {
   font-weight: 500;
   font-size: 16px;
-  color: rgba(0, 10, 26, 89%);
+  color: var(--mana-libro-lab-welcome-h3-color);
   margin-bottom: 16px;
 }
 
@@ -103,7 +103,7 @@
 
 .libro-lab-welcome-page-server-info {
   width: 400px;
-  background-color: rgba(0, 10, 26, 2%);
+  background: var(--mana-libro-lab-welcome-service-info-background);
   border-radius: 8px;
   margin-bottom: 24px;
   padding: 16px 24px;
@@ -112,9 +112,9 @@
 .libro-lab-welcome-page-server-info-title {
   font-weight: 500;
   font-size: 16px;
-  color: rgba(0, 10, 26, 89%);
+  color: var(--mana-libro-lab-server-info-title-text);
 }
 
 .libro-lab-welcome-page-server-info-item {
-  color: rgba(0, 10, 26, 78%);
+  color: var(--mana-libro-lab-server-info-text);
 }