@aplus-frontend/ui 7.0.0 → 7.1.0

package/es/src/design-token/interface.d.ts

@@ -1,5 +1,5 @@
 import { ActionToken } from '../ap-action/style';
-import { Recordable } from '../type';
+import { Recordable, RecursivePartial } from '../type';
 import { CSSInterpolation, CSSObject } from '@emotion/serialize';
 import { CheckCardToken } from '../check-card/style';
 import { ApFormToken } from '../ap-form/style/token';
@@ -12,6 +12,8 @@ import { AgGridToken } from '../ag-grid/style';
 import { BatchInputGroupToken } from '../business/batch-input-group/style';
 import { ApRadioGroupToken } from '../business/ap-radio-group/style';
 import { ApGridToken } from '../ap-grid/style';
+import { TokenUtil } from '../utils/cssinjs/TokenUtil';
+/** 基础token */
 export type BaseToken = {
     /**
      * 基础边框色
@@ -101,6 +103,14 @@ export type BaseToken = {
      * 背景禁用色
      */
     colorBgDisabled: string;
+    /**
+     * 布局背景色
+     */
+    colorBgLayout: string;
+    /**
+     * 控件背景色（一般同主系，但是更浅，适用块选中效果）
+     */
+    colorBgControl: string;
     fontSizeXL: number;
     fontSizeLG: number;
     fontSize: number;
@@ -127,30 +137,40 @@ export type BaseToken = {
      */
     lineClamp: number;
 };
+/** 组件token */
+export type ComponentsToken = {
+    ApAction: ActionToken;
+    CheckCard: CheckCardToken;
+    ApForm: ApFormToken;
+    ApList: ApListToken;
+    Scrollbar: ScrollbarToken;
+    Mask: MaskToken;
+    Splitter: SplitterToken;
+    ProCard: ProCardToken;
+    StatisticsCard: ProCardToken;
+    AgGrid: AgGridToken;
+    BatchInputGroup: BatchInputGroupToken;
+    ApRadioGroup: ApRadioGroupToken;
+    ApGrid: ApGridToken;
+};
+/** 全量token */
 export type FullToken = BaseToken & {
-    components: {
-        ApAction: ActionToken;
-        CheckCard: CheckCardToken;
-        ApForm: ApFormToken;
-        ApList: ApListToken;
-        Scrollbar: ScrollbarToken;
-        Mask: MaskToken;
-        Splitter: SplitterToken;
-        ProCard: ProCardToken;
-        StatisticsCard: ProCardToken;
-        AgGrid: AgGridToken;
-        BatchInputGroup: BatchInputGroupToken;
-        ApRadioGroup: ApRadioGroupToken;
-        ApGrid: ApGridToken;
-    };
+    components: ComponentsToken;
 };
+/** 上下文token（基础token+部分组件token） */
+export type ContextToken = BaseToken & RecursivePartial<{
+    components: ComponentsToken;
+}>;
 export type TokenWithComponentCls<Token> = Token & {
     componentCls: string;
     namespace: string;
 };
+export type TokenWithUtil<Token> = TokenWithComponentCls<Token> & {
+    calc: (cssVar: any) => InstanceType<typeof TokenUtil>;
+};
 export type CssVarToken<Token = Recordable> = {
     [key in keyof Token]: Token[key] | string;
 };
-export type GenStyleFunc<Token = object> = (token: TokenWithComponentCls<Token & BaseToken>) => CSSInterpolation;
-export type StyleMixin<Token = object> = (token: TokenWithComponentCls<Token & BaseToken>) => CSSObject;
-export type GenStyleCallback<Token> = (token: TokenWithComponentCls<Token>, rawToken: TokenWithComponentCls<Token>) => CSSInterpolation[];
+export type GenStyleFunc<Token = object> = (token: TokenWithUtil<Token & BaseToken>) => CSSInterpolation;
+export type StyleMixin<Token = object> = (token: TokenWithUtil<Token & BaseToken>) => CSSObject;
+export type GenStyleCallback<Token> = (calc: TokenWithUtil<Token>, rawToken: TokenWithComponentCls<Token>) => CSSInterpolation[];

package/es/src/index.mjs

@@ -1,5 +1,5 @@
 import { APConfigProvider as T } from "./config-provider/index.mjs";
-import { ApForm as b } from "./ap-form/index.mjs";
+import { ApForm as S } from "./ap-form/index.mjs";
 import { ApField as G, ApFieldRead as C } from "./ap-field/index.mjs";
 import { adminToken as h, aplusToken as E } from "./design-token/index.mjs";
 import { ApActionItem as L } from "./ap-action/index.mjs";
@@ -31,12 +31,12 @@ import { DEFAULT_NAMESPACE as W, DEFAULT_UIMODE as q, configProviderContextKey a
 import { keysOf as X, provideGlobalConfig as Y, useGlobalConfig as Z } from "./config-provider/hooks/use-global-config.mjs";
 import { buildLocaleContext as ee, buildTranslator as oe, localeContextKey as re, translate as te, useLocale as pe } from "./config-provider/hooks/use-locale.mjs";
 import { defaultNamespace as me, namespaceContextKey as fe, useGetDerivedNamespace as le, useNamespace as de } from "./config-provider/hooks/use-namespace.mjs";
-import { ConfigProvider as Ae, globalConfigCached as ue } from "./config-provider/config-provider.mjs";
+import { ConfigProvider as ue, globalConfigCached as Ae } from "./config-provider/config-provider.mjs";
 import { ApFormItemText as ie } from "./ap-form/items/text/index.mjs";
 import { default as ce } from "./ap-form/items/text-area/index.vue.mjs";
 import { default as Ie } from "./ap-form/items/number/index.vue.mjs";
 import { default as ge } from "./ap-form/items/date/index.vue.mjs";
-import { default as Se } from "./ap-form/items/date-range/index.vue.mjs";
+import { default as be } from "./ap-form/items/date-range/index.vue.mjs";
 import { default as Ce } from "./ap-form/items/radio/index.vue.mjs";
 import { default as he } from "./ap-form/items/select/index.vue.mjs";
 import { default as Pe } from "./ap-form/items/switch/index.vue.mjs";
@@ -57,12 +57,12 @@ import { default as ro } from "./ap-form/provider/index.vue.mjs";
 import { ApFieldText as po } from "./ap-field/text/index.mjs";
 import { default as mo } from "./ap-field/checkbox/index.vue.mjs";
 import { default as lo } from "./ap-field/date/index.vue.mjs";
-import { default as Ao } from "./ap-field/number/index.vue.mjs";
+import { default as uo } from "./ap-field/number/index.vue.mjs";
 import { default as so } from "./ap-field/radio/index.vue.mjs";
 import { default as no } from "./ap-field/switch/index.vue.mjs";
 import { default as Fo } from "./ap-field/text-area/index.vue.mjs";
 import { default as To } from "./ap-field/date-range/index.vue.mjs";
-import { default as bo } from "./ap-field/select/index.vue.mjs";
+import { default as So } from "./ap-field/select/index.vue.mjs";
 import { default as Go } from "./ap-field/text/password.vue.mjs";
 import { default as Do } from "./ap-field/slider/index.vue.mjs";
 import { default as Eo } from "./ap-field/segmented/index.vue.mjs";
@@ -84,12 +84,12 @@ import { default as tr } from "./ap-button/ap-button.vue.mjs";
 import { default as ar } from "./ap-button/ap-action-button.vue.mjs";
 import { default as fr } from "./ap-button/ap-confirm-button.vue.mjs";
 import { ApTransformDataHelper as dr } from "./utils/ap-trans-data/index.mjs";
-import { default as Ar } from "./business/ap-table-modal/index.mjs";
+import { default as ur } from "./business/ap-table-modal/index.mjs";
 import { useTableModal as sr } from "./business/ap-table-modal/hooks/use-table-modal.mjs";
 import { useTableSelectModal as nr } from "./business/ap-table-modal/hooks/use-table-select-modal.mjs";
 import { ApAttachment as Fr } from "./business/ap-attachment/index.mjs";
 import { ApBatchAction as Tr } from "./business/ap-batch-action/index.mjs";
-import { ApBatchActionGroup as br } from "./business/ap-batch-action-group/index.mjs";
+import { ApBatchActionGroup as Sr } from "./business/ap-batch-action-group/index.mjs";
 import { ApButtonGroup as Gr } from "./business/ap-button-group/index.mjs";
 import { ApCard as Dr } from "./business/ap-card/index.mjs";
 import { ApExpandAlert as Er } from "./business/ap-expand-alert/index.mjs";
@@ -110,53 +110,54 @@ import { useTableRefresh as tt } from "./business/hooks/useTableRefresh.mjs";
 import { usePageListApGrid as at } from "./business/hooks/usePageListApGrid.mjs";
 import { useGridRefresh as ft } from "./business/hooks/useGridRefresh.mjs";
 import { usePageListAgGrid as dt } from "./business/hooks/usePageListAgGrid.mjs";
-import { computedRecords as At, flattenColumns as ut, formatDataIndex as st, formatNumber as it } from "./business/ap-summary/utils.mjs";
+import { computedRecords as ut, flattenColumns as At, formatDataIndex as st, formatNumber as it } from "./business/ap-summary/utils.mjs";
 import { ApSummary as ct } from "./business/ap-summary/index.mjs";
 import { ApNeedNameKeyDefault as It } from "./business/ap-appendix/interface.mjs";
 import { ApAppendix as gt } from "./business/ap-appendix/index.mjs";
-import { default as St } from "./business/ap-upload-file/ap-upload-single/ap-upload-single.vue.mjs";
+import { default as bt } from "./business/ap-upload-file/ap-upload-single/ap-upload-single.vue.mjs";
 import { default as Ct } from "./business/batch-input-group/index.vue.mjs";
 import { default as ht } from "./business/batch-input-group/form-item.vue.mjs";
 import { ApSizeInput as Pt } from "./business/ap-size-input/index.mjs";
-import { ApProductInfo as Rt } from "./business/ap-product-info/index.mjs";
-import { ApCopy as yt } from "./business/ap-copy/index.mjs";
-import { ApView as wt } from "./business/ap-view/index.mjs";
-import { ApRadioGroup as Bt } from "./business/ap-radio-group/index.mjs";
-import { ApKeepAliveProps as kt, forceStopTags as Ot } from "./business/ap-keep-alive/interface.mjs";
-import { ApKeepAlive as Vt } from "./business/ap-keep-alive/index.mjs";
-import { LruCacher as zt } from "./business/ap-keep-alive/cacher/lru-cacher.mjs";
-import { useApKeepAliveInject as Ht } from "./business/ap-keep-alive/hook.mjs";
-import { matches as qt } from "./business/ap-keep-alive/utils.mjs";
-import { ApDraggableGrid as Qt } from "./business/ap-draggable-grid/index.mjs";
-import { ApValueSelectCard as Yt } from "./business/ap-value-select-card/index.mjs";
-import { useAgGridModal as $t } from "./business/ag-grid-modal/hooks/use-ag-grid-modal.mjs";
-import { useAgGridSelectModal as op } from "./business/ag-grid-modal/hooks/use-ag-grid-select-modal.mjs";
-import { ApSelectedItems as tp } from "./business/ag-grid-modal/selected-items/index.mjs";
-import { useTablePaging as ap } from "./ap-table/hooks/use-table-paging.mjs";
-import { default as fp } from "./editable-table/index.vue.mjs";
-import { default as dp } from "./editable-table/form-item.vue.mjs";
-import { default as Ap } from "./ap-descriptions/ap-descriptions.vue.mjs";
-import { ensureRangeValue as sp } from "./scroll-bar/utils/index.mjs";
-import { default as np } from "./scroll-bar/index.vue.mjs";
-import { default as Fp } from "./scroll-bar/internal.vue.mjs";
-import { default as Tp } from "./scroll-view/index.vue.mjs";
-import { default as bp } from "./portal/index.vue.mjs";
-import { default as Gp } from "./full-screen/index.vue.mjs";
-import { default as Dp } from "./resize-observer/index.vue.mjs";
-import { ROW_SELECTION_FIELD as Ep } from "./ap-grid/constants.mjs";
-import { toTreeArray as Lp } from "./ap-grid/utils/to-tree-array.mjs";
-import { default as Np } from "./ap-grid/index.vue.mjs";
-import { default as vp } from "./ap-grid/editable/index.vue.mjs";
-import { default as Mp } from "./ap-grid/editable/form-item.vue.mjs";
-import { default as Kp } from "./text/index.vue.mjs";
-import { default as Op } from "./text/group.vue.mjs";
-import { default as Vp } from "./mask/index.vue.mjs";
-import { default as zp } from "./ag-grid/index.vue.mjs";
-import { default as Hp } from "./ag-grid/editable/index.vue.mjs";
-import { default as qp } from "./ag-grid/editable/form-item.vue.mjs";
+import { default as Rt } from "./business/ap-size-input/form-item.vue.mjs";
+import { ApProductInfo as yt } from "./business/ap-product-info/index.mjs";
+import { ApCopy as wt } from "./business/ap-copy/index.mjs";
+import { ApView as Bt } from "./business/ap-view/index.mjs";
+import { ApRadioGroup as kt } from "./business/ap-radio-group/index.mjs";
+import { ApKeepAliveProps as Ut, forceStopTags as Vt } from "./business/ap-keep-alive/interface.mjs";
+import { ApKeepAlive as zt } from "./business/ap-keep-alive/index.mjs";
+import { LruCacher as Ht } from "./business/ap-keep-alive/cacher/lru-cacher.mjs";
+import { useApKeepAliveInject as qt } from "./business/ap-keep-alive/hook.mjs";
+import { matches as Qt } from "./business/ap-keep-alive/utils.mjs";
+import { ApDraggableGrid as Yt } from "./business/ap-draggable-grid/index.mjs";
+import { ApValueSelectCard as $t } from "./business/ap-value-select-card/index.mjs";
+import { useAgGridModal as op } from "./business/ag-grid-modal/hooks/use-ag-grid-modal.mjs";
+import { useAgGridSelectModal as tp } from "./business/ag-grid-modal/hooks/use-ag-grid-select-modal.mjs";
+import { ApSelectedItems as ap } from "./business/ag-grid-modal/selected-items/index.mjs";
+import { useTablePaging as fp } from "./ap-table/hooks/use-table-paging.mjs";
+import { default as dp } from "./editable-table/index.vue.mjs";
+import { default as up } from "./editable-table/form-item.vue.mjs";
+import { default as sp } from "./ap-descriptions/ap-descriptions.vue.mjs";
+import { ensureRangeValue as np } from "./scroll-bar/utils/index.mjs";
+import { default as Fp } from "./scroll-bar/index.vue.mjs";
+import { default as Tp } from "./scroll-bar/internal.vue.mjs";
+import { default as Sp } from "./scroll-view/index.vue.mjs";
+import { default as Gp } from "./portal/index.vue.mjs";
+import { default as Dp } from "./full-screen/index.vue.mjs";
+import { default as Ep } from "./resize-observer/index.vue.mjs";
+import { ROW_SELECTION_FIELD as Lp } from "./ap-grid/constants.mjs";
+import { toTreeArray as Np } from "./ap-grid/utils/to-tree-array.mjs";
+import { default as vp } from "./ap-grid/index.vue.mjs";
+import { default as Mp } from "./ap-grid/editable/index.vue.mjs";
+import { default as Kp } from "./ap-grid/editable/form-item.vue.mjs";
+import { default as Op } from "./text/index.vue.mjs";
+import { default as Vp } from "./text/group.vue.mjs";
+import { default as zp } from "./mask/index.vue.mjs";
+import { default as Hp } from "./ag-grid/index.vue.mjs";
+import { default as qp } from "./ag-grid/editable/index.vue.mjs";
+import { default as Qp } from "./ag-grid/editable/form-item.vue.mjs";
 export {
   T as APConfigProvider,
-  zp as AgGrid,
+  Hp as AgGrid,
   ar as ApActionButton,
   Oo as ApActionGroup,
   L as ApActionItem,
@@ -166,16 +167,16 @@ export {
   gt as ApAppendix,
   Fr as ApAttachment,
   Tr as ApBatchAction,
-  br as ApBatchActionGroup,
+  Sr as ApBatchActionGroup,
   tr as ApButton,
   Gr as ApButtonGroup,
   Dr as ApCard,
   fr as ApConfirmButton,
-  yt as ApCopy,
-  Ap as ApDescriptions,
+  wt as ApCopy,
+  sp as ApDescriptions,
   Qo as ApDownLoadNeedNameKeyDefault,
   Yo as ApDownload,
-  Qt as ApDraggableGrid,
+  Yt as ApDraggableGrid,
   M as ApDrawer,
   Er as ApExpandAlert,
   Nr as ApExportGroup,
@@ -184,19 +185,19 @@ export {
   mo as ApFieldCheckbox,
   lo as ApFieldDate,
   To as ApFieldDateRange,
-  Ao as ApFieldNumber,
+  uo as ApFieldNumber,
   Go as ApFieldPassword,
   so as ApFieldRadio,
   Lo as ApFieldRate,
   C as ApFieldRead,
   Eo as ApFieldSegmented,
-  bo as ApFieldSelect,
+  So as ApFieldSelect,
   Do as ApFieldSlider,
   no as ApFieldSwitch,
   po as ApFieldText,
   Fo as ApFieldTextArea,
   No as ApFieldTreeSelect,
-  b as ApForm,
+  S as ApForm,
   Ze as ApFormControlRender,
   We as ApFormDependency,
   Xe as ApFormDrawerForm,
@@ -204,12 +205,13 @@ export {
   ht as ApFormItemBatchInput,
   Re as ApFormItemCheckbox,
   ge as ApFormItemDate,
-  Se as ApFormItemDateRange,
+  be as ApFormItemDateRange,
   ke as ApFormItemGroup,
   Ie as ApFormItemNumber,
   Ce as ApFormItemRadio,
   eo as ApFormItemRender,
   he as ApFormItemSelect,
+  Rt as ApFormItemSizeInput,
   Pe as ApFormItemSwitch,
   ie as ApFormItemText,
   ce as ApFormItemTextArea,
@@ -220,11 +222,11 @@ export {
   ro as ApFormProvider,
   _e as ApFormSearchForm,
   Je as ApFormSet,
-  Np as ApGrid,
+  vp as ApGrid,
   Kr as ApImage,
   Or as ApInputRadio,
-  Vt as ApKeepAlive,
-  kt as ApKeepAliveProps,
+  zt as ApKeepAlive,
+  Ut as ApKeepAliveProps,
   Vr as ApLabel,
   _r as ApLabelGroup,
   Wr as ApLadder,
@@ -232,77 +234,77 @@ export {
   v as ApModal,
   It as ApNeedNameKeyDefault,
   K as ApProCard,
-  Rt as ApProductInfo,
-  Bt as ApRadioGroup,
+  yt as ApProductInfo,
+  kt as ApRadioGroup,
   Jr as ApSelectLayout,
-  tp as ApSelectedItems,
+  ap as ApSelectedItems,
   Pt as ApSizeInput,
   k as ApStatisticCard,
   Xr as ApStatus,
   Yr as ApStatusGroup,
   ct as ApSummary,
   U as ApTable,
-  Ar as ApTableModal,
+  ur as ApTableModal,
   Vo as ApTag,
   zo as ApTagGroup,
-  Kp as ApText,
-  Op as ApTextGroup,
+  Op as ApText,
+  Vp as ApTextGroup,
   $r as ApTitle,
   dr as ApTransformDataHelper,
   qo as ApUpload,
-  St as ApUploadSingle,
-  Yt as ApValueSelectCard,
-  wt as ApView,
+  bt as ApUploadSingle,
+  $t as ApValueSelectCard,
+  Bt as ApView,
   Ct as BatchInputGroup,
   N as CheckCard,
   $o as CheckCardGroup,
-  Ae as ConfigProvider,
+  ue as ConfigProvider,
   W as DEFAULT_NAMESPACE,
   q as DEFAULT_UIMODE,
-  Hp as EditableAgGrid,
-  qp as EditableAgGridFormItem,
-  vp as EditableGrid,
-  Mp as EditableGridFormItem,
-  fp as EditableTable,
-  dp as EditableTableFormItem,
-  Gp as FullScreen,
-  Fp as InternalScrollBar,
-  zt as LruCacher,
-  Vp as Mask,
+  qp as EditableAgGrid,
+  Qp as EditableAgGridFormItem,
+  Mp as EditableGrid,
+  Kp as EditableGridFormItem,
+  dp as EditableTable,
+  up as EditableTableFormItem,
+  Dp as FullScreen,
+  Tp as InternalScrollBar,
+  Ht as LruCacher,
+  zp as Mask,
   Ho as NeedNameKeyDefault,
-  bp as Portal,
-  Ep as ROW_SELECTION_FIELD,
-  Dp as ResizeObserver,
-  np as ScrollBar,
-  Tp as ScrollView,
+  Gp as Portal,
+  Lp as ROW_SELECTION_FIELD,
+  Ep as ResizeObserver,
+  Fp as ScrollBar,
+  Sp as ScrollView,
   _ as Splitter,
   h as adminToken,
   E as aplusToken,
   ee as buildLocaleContext,
   oe as buildTranslator,
-  At as computedRecords,
+  ut as computedRecords,
   J as configProviderContextKey,
   j as configProviderProps,
   Mr as convertExportField,
   me as defaultNamespace,
-  sp as ensureRangeValue,
-  ut as flattenColumns,
-  Ot as forceStopTags,
+  np as ensureRangeValue,
+  At as flattenColumns,
+  Vt as forceStopTags,
   st as formatDataIndex,
   it as formatNumber,
-  ue as globalConfigCached,
+  Ae as globalConfigCached,
   vr as handleExportDownload,
-  qt as isNameMatches,
+  Qt as isNameMatches,
   X as keysOf,
   re as localeContextKey,
   jr as locales,
   fe as namespaceContextKey,
   Y as provideGlobalConfig,
-  Lp as toTreeArray,
+  Np as toTreeArray,
   te as translate,
-  $t as useAgGridModal,
-  op as useAgGridSelectModal,
-  Ht as useApKeepAliveInject,
+  op as useAgGridModal,
+  tp as useAgGridSelectModal,
+  qt as useApKeepAliveInject,
   le as useGetDerivedNamespace,
   Z as useGlobalConfig,
   ft as useGridRefresh,
@@ -312,7 +314,7 @@ export {
   at as usePageListApGrid,
   ot as usePageListApTable,
   sr as useTableModal,
-  ap as useTablePaging,
+  fp as useTablePaging,
   tt as useTableRefresh,
   nr as useTableSelectModal
 };

package/es/src/scroll-bar/style/index.mjs

@@ -1,8 +1,8 @@
-import { genComponentStyleHook as a } from "../../utils/cssinjs/index.mjs";
-const e = (r) => {
-  const { componentCls: t, scrollBarTrackWidth: l, scrollBarBarWidth: o } = r;
+import { genComponentStyleHook as t } from "../../utils/cssinjs/index.mjs";
+const c = (r) => {
+  const { componentCls: a, scrollBarTrackWidth: l, scrollBarBarWidth: o } = r;
   return {
-    [t]: {
+    [a]: {
       position: "relative",
       "&--horizontal": {
         width: "100%",
@@ -12,7 +12,7 @@ const e = (r) => {
         width: l,
         height: "100%"
       },
-      [`${t}__track`]: {
+      [`${a}__track`]: {
         position: "absolute",
         width: "100%",
         height: "100%",
@@ -29,7 +29,7 @@ const e = (r) => {
           backgroundColor: "transparent"
         }
       },
-      [`${t}__bar`]: {
+      [`${a}__bar`]: {
         position: "absolute",
         borderRadius: o,
         backgroundColor: r.scrollBarBarColor,
@@ -40,18 +40,18 @@ const e = (r) => {
         },
         "&--horizontal": {
           height: o,
-          top: `calc(${l} / 2 - ${o} / 2)`
+          top: r.calc(l).div(2).sub(r.calc(o).div(2)).equal()
         },
         "&--vertical": {
           width: o,
-          left: `calc(${l} / 2 - ${o} / 2)`
+          left: r.calc(l).div(2).sub(r.calc(o).div(2)).equal()
         }
       }
     }
   };
-}, n = a(
+}, e = t(
   "Scrollbar",
-  (r) => [e(r)],
+  (r) => [c(r)],
   {
     scrollBarBarColor: "#c7c8cc",
     scrollBarTrackColor: "#F2F2F2",
@@ -61,6 +61,6 @@ const e = (r) => {
   }
 );
 export {
-  n as default,
-  e as genScrollbarStyle
+  e as default,
+  c as genScrollbarStyle
 };

package/es/src/splitter/style/index.mjs

@@ -19,7 +19,7 @@ const t = () => ({
       boxSizing: "border-box",
       margin: 0,
       padding: 0,
-      color: r.textColor2,
+      color: r.textColor1,
       fontSize: r.fontSize,
       lineHeight: r.lineHeight,
       listStyle: "none",
@@ -79,7 +79,7 @@ const t = () => ({
           background: "rgba(0,0,0,0.04)",
           fontSize: r.fontSizeSM,
           borderRadius: "2px",
-          color: r.textColor2,
+          color: r.textColor1,
           cursor: "pointer",
           opacity: 0,
           display: "flex",
@@ -140,11 +140,11 @@ const t = () => ({
             height: "24px",
             "&-start": {
               left: "auto",
-              right: `calc(${r.splitterTriggerSize} / 2)`,
+              right: r.calc(r.splitterTriggerSize).div(2).equal(),
               transform: "translateY(-50%)"
             },
             "&-end": {
-              left: `calc(${r.splitterTriggerSize} / 2)`,
+              left: r.calc(r.splitterTriggerSize).div(2).equal(),
               right: "auto",
               transform: "translateY(-50%)"
             }
@@ -182,11 +182,11 @@ const t = () => ({
             width: "24px",
             "&-start": {
               top: "auto",
-              bottom: `calc(${r.splitterTriggerSize} / 2)`,
+              bottom: r.calc(r.splitterTriggerSize).div(2).equal(),
               transform: "translateX(-50%)"
             },
             "&-end": {
-              top: `calc(${r.splitterTriggerSize} / 2)`,
+              top: r.calc(r.splitterTriggerSize).div(2).equal(),
               bottom: "auto",
               transform: "translateX(-50%)"
             }

package/es/src/style/index.mjs

@@ -2,7 +2,7 @@ const o = (r) => ({
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
-  color: r.textColor2,
+  color: r.textColor1,
   fontSize: r.fontSize,
   fontFamily: "inherit",
   lineHeight: r.lineHeight,

package/es/src/text/style/index.mjs

@@ -45,7 +45,7 @@ const l = {
         }
       },
       "span.ant-typography": {
-        color: n.textColor2
+        color: n.textColor1
       },
       "span.ant-typography.ant-typography-secondary": {
         color: e

package/es/src/utils/cssinjs/TokenUtil.d.ts

@@ -0,0 +1,11 @@
+export declare class TokenUtil {
+    private result;
+    private lowPriority?;
+    constructor(cssVar: string);
+    add(cssVar: string | number | TokenUtil): this;
+    sub(cssVar: string | number | TokenUtil): this;
+    mul(cssVar: string | number | TokenUtil): this;
+    div(cssVar: string | number | TokenUtil): this;
+    getResult(): string;
+    equal(): string;
+}

package/es/src/utils/cssinjs/TokenUtil.mjs

@@ -0,0 +1,26 @@
+class s {
+  constructor(t) {
+    this.result = "", this.result = t;
+  }
+  add(t) {
+    return t instanceof s ? this.result = `${this.result} + ${t.getResult()}` : this.result = `${this.result} + ${t}`, this.lowPriority = !0, this;
+  }
+  sub(t) {
+    return console.log("cssVar", t), t instanceof s ? this.result = `${this.result} - ${t.getResult()}` : this.result = `${this.result} - ${t}`, this.lowPriority = !0, this;
+  }
+  mul(t) {
+    return this.lowPriority && (this.result = `(${this.result})`), t instanceof s ? this.result = `${this.result} * ${t.getResult()}` : this.result = `${this.result} * ${t}`, this.lowPriority = !1, this;
+  }
+  div(t) {
+    return this.lowPriority && (this.result = `(${this.result})`), t instanceof s ? this.result = `${this.result} / ${t.getResult()}` : this.result = `${this.result} / ${t}`, this.lowPriority = !1, this;
+  }
+  getResult() {
+    return this.lowPriority ? `(${this.result})` : this.result;
+  }
+  equal() {
+    return typeof this.lowPriority < "u" ? `calc(${this.result})` : this.result;
+  }
+}
+export {
+  s as TokenUtil
+};

package/es/src/utils/cssinjs/index.d.ts

@@ -1,4 +1,4 @@
 import { BaseToken, GenStyleCallback } from '../../design-token/interface';
 import { GeneraterOption } from './utils';
 import { ComputedRef } from 'vue';
-export declare function genComponentStyleHook<ComponentToken>(componentName: string, cb: GenStyleCallback<BaseToken & ComponentToken>, componentToken?: Partial<ComponentToken>, option?: GeneraterOption): (prefixCls: string) => ComputedRef<string>;
+export declare function genComponentStyleHook<ComponentToken>(componentName: string, cb: GenStyleCallback<BaseToken & ComponentToken>, componentToken?: Partial<ComponentToken> | ((token: BaseToken & Partial<ComponentToken>) => Partial<ComponentToken>), option?: GeneraterOption): (prefixCls: string) => ComputedRef<string>;