style: set theme token

config/config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from '@umijs/max';
 import keepAlive from './keep-alive';
 import proxy from './proxy';
 import routes from './routes';
-import theme from './theme';
 import { getBranchInfo } from './utils';
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
@@ -80,11 +79,11 @@ export default defineConfig({
   presets: ['umi-presets-pro'],
   clickToComponent: {},
   antd: {
-    style: 'less',
-    configProvider: {
-      componentSize: 'large',
-      theme
-    }
+    style: 'less'
+    // configProvider: {
+    //   componentSize: 'large',
+    //   theme
+    // }
   },
   hash: true,
   access: {},

config/theme.ts

@@ -4,10 +4,10 @@ export default {
   hashed: false,
   components: {
     Input: {
-      inputFontSize: 12
+      inputFontSize: 14
     },
     Table: {
-      cellFontSize: 12,
+      cellFontSize: 14,
       rowSelectedHoverBg: 'rgb(249 249 249)',
       rowHoverBg: 'rgb(249 249 249)',
       rowSelectedBg: 'transparent'
@@ -57,7 +57,7 @@ export default {
     colorSuccess: '#54cc98',
     borderRadius: 4,
     borderRadiusSM: 2,
-    fontSize: 12,
+    fontSize: 14,
     motion: true
   }
 };

src/assets/styles/common.less

@@ -228,6 +228,10 @@
   font-weight: var(--font-weight-medium);
 }
 
+.font-500 {
+  font-weight: var(--font-weight-500);
+}
+
 .font-700 {
   font-weight: var(--font-weight-bold);
 }

src/components/highlight-code/styles/index.less

@@ -1,6 +1,6 @@
 .high-light-wrapper {
   text-align: left;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-code);
 
   .hljs {
     font-weight: var(--font-weight-normal);

src/components/logs-viewer/styles/index.less

@@ -96,7 +96,7 @@
       }
 
       color: var(--color-logs-text);
-      font-size: var(--font-size-small);
+      font-size: var(--font-size-base);
       line-height: 22px;
       white-space: pre-wrap;
       background-color: var(--color-logs-bg);

src/components/seal-table/components/header-prefix.tsx

@@ -38,7 +38,7 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
     return (
       <div
         className="header-row-prefix-wrapper flex-center"
-        style={{ paddingLeft: 14 }}
+        style={{ paddingLeft: 16 }}
       >
         <span style={{ marginRight: 5 }}>
           {_.isBoolean(expandable) ? (

src/components/seal-table/styles/header.less

@@ -11,7 +11,7 @@
   }
 
   &-cell {
-    font-weight: 600;
+    font-weight: var(--font-weight-medium);
   }
 
   &-left {

src/config/theme.ts

@@ -0,0 +1,70 @@
+export default {
+  'root-entry-name': 'variable',
+  cssVar: true,
+  hashed: false,
+  components: {
+    Input: {
+      inputFontSize: 14,
+      inputFontSizeLG: 14
+    },
+    Table: {
+      cellFontSize: 14,
+      rowSelectedHoverBg: 'rgba(230, 230, 230, 0.88)',
+      rowSelectedBg: 'rgb(244, 245, 244)'
+    },
+    Button: {
+      contentFontSizeLG: 14
+    },
+    Tabs: {
+      titleFontSizeLG: 14
+    },
+    Menu: {
+      iconSize: 16,
+      iconMarginInlineEnd: 12,
+      itemBorderRadius: 4,
+      itemSelectedColor: '#007BFF',
+      itemHeight: 44,
+      groupTitleColor: 'rgba(0,0,0,1)',
+      itemHoverColor: 'rgba(0,0,0,1)',
+      itemColor: 'rgba(0,0,0,1)',
+      itemHoverBg: 'rgba(0,0,0,0.04)',
+      itemActiveBg: 'rgba(0,0,0,0.04)'
+    },
+    Progress: {
+      lineBorderRadius: 2
+    },
+    Select: {
+      optionSelectedBg: 'rgba(230, 230, 230, 88%)',
+      fontSizeLG: 14
+    },
+    Message: {
+      contentPadding: '12px 16px'
+    },
+    Tooltip: {
+      colorBgSpotlight: '#3e3e3e'
+    },
+    Cascader: {
+      dropdownHeight: 240
+    },
+    Slider: {
+      handleSize: 8,
+      handleSizeHover: 8,
+      trackBg: 'rgba(0,0,0,0.15)',
+      handleColor: 'rgba(0,0,0,0.2)',
+      trackHoverBg: 'rgba(0,0,0,0.25)',
+      handleActiveColor: 'rgba(0,0,0,0.3)',
+      dotActiveBorderColor: 'rgba(0,0,0,0.25)',
+      handleActiveOutlineColor: 'rgba(0,0,0,0.25)',
+      dotBorderColor: 'rgba(0,0,0,0.25)'
+    }
+  },
+  token: {
+    colorText: 'rgba(0,0,0,1)',
+    colorPrimary: '#007BFF',
+    colorSuccess: '#54cc98',
+    borderRadius: 4,
+    borderRadiusSM: 2,
+    fontSize: 14,
+    motion: true
+  }
+};

src/global.less

@@ -22,7 +22,6 @@ html {
   --color-editor-dark: #282c34;
   --color-editor-light: #fafafa;
   --color-scrollbar-track: var(--ant-color-fill-tertiary);
-  // --color-fill-1: #fff;
   --ant-color-text: #000;
   --color-bg-1: #f4f5f4;
   --color-scroll-bg: #d9d9d9;
@@ -43,7 +42,8 @@ html {
   --border-radius-2px: 2px;
   --color-white-1: rgba(255, 255, 255, 100%);
   --color-fill-sider: #f4f5f4;
-  --font-weight-normal: 500;
+  --font-weight-500: 500;
+  --font-weight-normal: 400;
   --font-weight-medium: 600;
   --font-weight-bold: 700;
   --color-white-primary: rgba(255, 255, 255, 100%);
@@ -61,7 +61,8 @@ html {
   --color-text-2: rgba(0, 0, 0, 65%);
   --color-bg-light-1: #e6f6ff;
   --font-size-small: 13px;
-  --font-size-base: 12px;
+  --font-size-code: 12px;
+  --font-size-base: 14px;
   --font-size-large: 16px;
   --font-size-middle: 14px;
   --table-td-radius: 4px;
@@ -87,32 +88,16 @@ html {
   --ant-input-hover-border-color: #2997ff;
   --box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%);
   --ant-border-radius-lg: 4px;
-  --ant-menu-item-color: var(--color-text-1);
   --color-selected-bg: rgba(230, 230, 230, 88%);
-  // --box-shadow-base: none;
+  --ant-color-border: #d9d9d9;
+  --ant-line-type: solid;
+  --ant-line-width: 1px;
 
   .css-var-rf {
     --ant-font-size: var(--font-size-base);
   }
 
-  .css-var-rg,
-  .css-var-ri,
-  .css-var-rh {
-    --ant-font-size: var(--font-size-base);
-
-    &.ant-menu-css-var {
-      --ant-menu-item-border-radius: 4px;
-      --ant-menu-item-selected-color: var(--ant-color-primary);
-      --ant-menu-item-color: var(--color-text-1);
-    }
-  }
-
-  .css-var-rj.ant-menu-css-var {
-    --ant-menu-item-color: var(--color-text-1);
-  }
-
   .css-var-r0 {
-    // --ant-control-height: 36px;
     --ant-font-size-sm: var(--font-size-base);
     --ant-font-size-lg: var(--font-size-base);
     --ant-font-size-xl: 20px;
@@ -152,22 +137,10 @@ html {
     }
   }
 
-  .css-var-r11.ant-menu-css-var {
-    --ant-menu-item-color: var(--color-text-1);
-  }
-
-  .css-var-rk.ant-menu-css-var {
-    --ant-menu-item-color: var(--color-text-1);
-  }
-
   .css-var-rf.ant-menu-css-var,
   .css-var-ri.ant-menu-css-var,
   .css-var-rh.ant-menu-css-var {
-    --ant-menu-item-height: 46px;
-    --ant-menu-item-border-radius: 4px;
-    --ant-menu-item-selected-color: var(--ant-color-primary);
-    --ant-menu-item-color: var(--color-text-1);
-    --ant-menu-item-active-bg: rgba(0, 0, 0, 4%);
+    --ant-menu-item-color: var(--ant-color-text);
   }
 
   .css-var-r0.ant-input-css-var {
@@ -176,16 +149,10 @@ html {
     --ant-input-input-font-size-sm: var(--font-size-base);
     --ant-input-padding-inline-lg: 14px;
   }
-
-  .css-var-r0.ant-select-css-var {
-    --ant-select-option-active-bg: var(--color-fill-1);
-    --ant-select-option-font-size: var(--font-size-base);
-    --ant-select-option-selected-bg: var(--color-selected-bg);
-  }
 }
 
 body * {
-  font-weight: var(--font-weight-normal);
+  // font-weight: var(--font-weight-normal);
 }
 
 body {
@@ -254,7 +221,6 @@ body {
     }
 
     tr > td {
-      // background-color: var(--color-fill-1);
       border-bottom: none;
       height: 68px;
 
@@ -429,7 +395,6 @@ body {
   .ant-pro-layout-container {
     overflow-x: auto;
     min-height: 100vh;
-    // background-color: var(--color-fill-2);
   }
 
   .ant-pro-sider {
@@ -439,8 +404,7 @@ body {
 
     .ant-menu {
       .ant-menu-item {
-        border-radius: var(--border-radius-small);
-        color: var(--color-text-1) !important;
+        color: var(--ant-color-text) !important;
 
         &:active {
           background-color: var(--ant-menu-item-selected-bg);
@@ -451,18 +415,8 @@ body {
         color: var(--ant-color-text);
       }
 
-      .ant-menu-item:hover {
-        color: var(--ant-color-text);
-      }
-
-      .ant-menu-item.ant-menu-item-selected:hover {
-        color: var(--ant-color-primary) !important;
-        background-color: var(--ant-menu-item-selected-bg);
-      }
-
       .ant-menu-item.ant-menu-item-selected {
         color: var(--ant-color-primary) !important;
-        background-color: var(--ant-menu-item-selected-bg);
       }
     }
   }
@@ -474,7 +428,7 @@ body {
     .ant-menu-item-only-child {
       height: 40px;
       line-height: 40px;
-      color: var(--color-text-1);
+      color: var(--ant-color-text);
 
       .anticon {
         font-size: var(--font-size-middle);
@@ -505,7 +459,7 @@ body {
 
 .ant-menu {
   .ant-menu-submenu-title {
-    color: var(--color-text-1) !important;
+    color: var(--ant-color-text) !important;
   }
 }
 
@@ -513,7 +467,7 @@ body {
   .user-avatar.ant-menu-submenu {
     .ant-menu-submenu-title {
       padding-left: 10px;
-      color: var(--color-text-1) !important;
+      color: var(--ant-color-text) !important;
     }
   }
 
@@ -522,7 +476,7 @@ body {
       display: flex;
       justify-content: center;
       align-items: center;
-      color: var(--color-text-1) !important;
+      color: var(--ant-color-text) !important;
       padding-inline: unset !important;
       width: 100%;
       margin-inline: 0 !important;
@@ -549,7 +503,7 @@ body {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    color: var(--color-text-1) !important;
+    color: var(--ant-color-text) !important;
   }
 }
 

src/layouts/index.tsx

@@ -7,6 +7,7 @@ import ShortCuts, {
 } from '@/components/short-cuts';
 import VersionInfo, { modalConfig } from '@/components/version-info';
 import routeCachekey from '@/config/route-cachekey';
+import theme from '@/config/theme';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { logout } from '@/pages/login/apis';
@@ -26,7 +27,7 @@ import {
   useNavigate,
   type IRoute
 } from '@umijs/max';
-import { Button, Modal } from 'antd';
+import { Button, ConfigProvider, Modal } from 'antd';
 import 'driver.js/dist/driver.css';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
@@ -399,7 +400,7 @@ export default (props: any) => {
   };
 
   return (
-    <div>
+    <ConfigProvider componentSize="large" theme={theme}>
       <div className="background"></div>
       <ProLayout
         route={route}
@@ -449,6 +450,6 @@ export default (props: any) => {
           )}
         </Exception>
       </ProLayout>
-    </div>
+    </ConfigProvider>
   );
 };

src/pages/dashboard/components/active-table.tsx

@@ -73,7 +73,12 @@ const ActiveTable = () => {
         <PageTools
           style={{ margin: '26px 0px' }}
           left={
-            <span style={{ padding: '9px 0' }}>
+            <span
+              style={{
+                padding: '9px 0',
+                fontWeight: 'var(--font-weight-bold)'
+              }}
+            >
               {intl.formatMessage({ id: 'dashboard.activeModels' })}
             </span>
           }

src/pages/dashboard/components/over-view.less

@@ -23,4 +23,8 @@
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
+
+  .label {
+    font-weight: var(--font-weight-medium);
+  }
 }

src/pages/dashboard/components/over-view.tsx

@@ -20,8 +20,8 @@ const renderCardItem = (data: {
       className={styles['card-body']}
     >
       <div className={styles.content}>
-        <div className="label">{label}</div>
-        <div className="value">{value}</div>
+        <div className="label font-500">{label}</div>
+        <div className="value font-500">{value}</div>
       </div>
     </Card>
   );

src/pages/dashboard/components/system-load.tsx

@@ -65,7 +65,9 @@ const SystemLoad = () => {
         <PageTools
           style={{ margin: '26px 0px' }}
           left={
-            <span>{intl.formatMessage({ id: 'dashboard.systemload' })}</span>
+            <span className="font-700">
+              {intl.formatMessage({ id: 'dashboard.systemload' })}
+            </span>
           }
         />
         <Row style={{ width: '100%' }} gutter={[0, 20]}>

src/pages/dashboard/components/usage-inner/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { FC, memo, useCallback, useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../../config/dashboard-context';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
@@ -31,7 +31,7 @@ const getCurrentMonthDays = () => {
   return dates;
 };
 
-const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
+const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
 
   const [topUserData, setTopUserData] = useState<{
@@ -191,7 +191,11 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
     <>
       <PageTools
         style={{ margin: '26px 0px' }}
-        left={<span>{intl.formatMessage({ id: 'dashboard.usage' })}</span>}
+        left={
+          <span className="font-700">
+            {intl.formatMessage({ id: 'dashboard.usage' })}
+          </span>
+        }
       />
       <Row style={{ width: '100%' }} gutter={[0, 20]}>
         <Col

src/pages/llmodels/components/deploy-modal.tsx

@@ -167,15 +167,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     <Drawer
       title={
         <div className="flex-between flex-center">
-          <span
-            style={{
-              color: 'var(--ant-color-text)',
-              fontWeight: 'var(--font-weight-medium)',
-              fontSize: 'var(--font-size-middle)'
-            }}
-          >
-            {title}
-          </span>
+          <span>{title}</span>
           <Button type="text" size="small" onClick={handleCancel}>
             <CloseOutlined></CloseOutlined>
           </Button>

src/pages/llmodels/components/table-list.tsx

@@ -585,7 +585,9 @@ const Models: React.FC<ModelsProps> = ({
               { api: `${window.location.origin}/v1` }
             )}
           >
-            {intl.formatMessage({ id: 'models.form.replicas' })}
+            <span style={{ fontWeight: 'var(--font-weight-medium)' }}>
+              {intl.formatMessage({ id: 'models.form.replicas' })}
+            </span>
             <QuestionCircleOutlined className="m-l-5" />
           </Tooltip>
         ),

src/pages/llmodels/components/view-logs-modal.tsx

@@ -107,7 +107,7 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
       <div className="viewer-wrapper" ref={contentRef}>
         <LogsViewer
           ref={logsViewerRef}
-          diffHeight={93}
+          diffHeight={78}
           url={url}
           tail={tail}
           enableScorllLoad={enableScorllLoad}

src/pages/llmodels/style/catalog-item.less

@@ -43,7 +43,7 @@
 
   .title {
     font-size: var(--font-size-middle);
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-500);
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -56,8 +56,8 @@
   }
 
   .desc {
-    font-size: var(--font-size-base);
-    color: var(--ant-color-text-secondary);
+    font-size: var(--font-size-small);
+    color: var(--ant-color-text-tertiary);
     width: 100%;
     overflow: hidden;
     margin-bottom: 12px;
@@ -74,6 +74,7 @@
 
   .update-time {
     color: var(--ant-color-text-tertiary);
+    font-size: var(--font-size-small);
     display: flex;
     align-items: center;
     gap: 16px;

src/pages/llmodels/style/data-form.less

@@ -7,7 +7,8 @@
       padding-inline: 5px !important;
       padding-block: 5px !important;
       border-radius: var(--border-radius-base) !important;
-      font-size: var(--font-size-middle) !important;
+      font-size: var(--font-size-large) !important;
+      font-weight: var(--font-weight-bold) !important;
 
       &:hover {
         background-color: var(--color-fill-sider) !important;

src/pages/llmodels/style/hf-model-item.less

@@ -18,11 +18,12 @@
 
   .title {
     font-size: var(--font-size-base);
-    font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-500);
   }
 
   .info {
     color: var(--ant-color-text-tertiary);
+    font-size: var(--font-size-small);
 
     .info-item {
       display: flex;

src/pages/playground/components/dynamic-params.tsx

@@ -3,7 +3,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
-import {
+import React, {
   forwardRef,
   memo,
   useCallback,
@@ -139,7 +139,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
         <div>
           {
             <>
-              <h3 className="m-b-20 m-l-10 font-size-14 line-24">
+              <h3 className="m-b-20 m-l-10 font-size-14 line-24 font-600">
                 {parametersTitle || (
                   <span>
                     {intl.formatMessage({ id: 'playground.parameters' })}