@sdata/web-vue 2.1.0 → 2.2.1

package/es/collapse/index.d.ts

@@ -35,14 +35,9 @@ declare const Collapse: {
     }>> & Readonly<{
         onChange?: ((_activeKey: (string | number)[], _ev: Event) => any) | undefined;
         "onUpdate:activeKey"?: ((_activeKey: (string | number)[]) => any) | undefined;
-    }>, {
-        prefixCls: string;
-        cls: import("vue").ComputedRef<(string | {
-            [x: string]: boolean;
-        })[]>;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        'update:activeKey': (_activeKey: (string | number)[]) => true;
-        change: (_activeKey: (string | number)[], _ev: Event) => true;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (_activeKey: (string | number)[], _ev: Event) => any;
+        "update:activeKey": (_activeKey: (string | number)[]) => any;
     }, import("vue").PublicProps, {
         bordered: boolean;
         activeKey: (string | number)[];
@@ -90,12 +85,7 @@ declare const Collapse: {
     }>> & Readonly<{
         onChange?: ((_activeKey: (string | number)[], _ev: Event) => any) | undefined;
         "onUpdate:activeKey"?: ((_activeKey: (string | number)[]) => any) | undefined;
-    }>, {
-        prefixCls: string;
-        cls: import("vue").ComputedRef<(string | {
-            [x: string]: boolean;
-        })[]>;
-    }, {}, {}, {}, {
+    }>, {}, {}, {}, {}, {
         bordered: boolean;
         activeKey: (string | number)[];
         showExpandIcon: boolean;
@@ -139,14 +129,9 @@ declare const Collapse: {
 }>> & Readonly<{
     onChange?: ((_activeKey: (string | number)[], _ev: Event) => any) | undefined;
     "onUpdate:activeKey"?: ((_activeKey: (string | number)[]) => any) | undefined;
-}>, {
-    prefixCls: string;
-    cls: import("vue").ComputedRef<(string | {
-        [x: string]: boolean;
-    })[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:activeKey': (_activeKey: (string | number)[]) => true;
-    change: (_activeKey: (string | number)[], _ev: Event) => true;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_activeKey: (string | number)[], _ev: Event) => any;
+    "update:activeKey": (_activeKey: (string | number)[]) => any;
 }, string, {
     bordered: boolean;
     activeKey: (string | number)[];
@@ -155,7 +140,11 @@ declare const Collapse: {
     defaultActiveKey: (string | number)[];
     accordion: boolean;
     expandIconPosition: "left" | "right";
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+}) & {
     Item: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         header: StringConstructor;
         disabled: {
@@ -189,73 +178,26 @@ declare const Collapse: {
         showExpandIcon: boolean;
         destroyOnHide: boolean;
     }, {}, {
-        IconHover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-            prefix: {
-                type: StringConstructor;
-            };
-            size: {
-                type: import("vue").PropType<import("..").Size>;
-                default: string;
-            };
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>, {
-            prefixCls: string;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-            prefix: {
-                type: StringConstructor;
-            };
-            size: {
-                type: import("vue").PropType<import("..").Size>;
-                default: string;
-            };
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & Readonly<{}>, {
-            size: "medium" | "large" | "small" | "mini";
-            disabled: boolean;
-        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-        IconCaretRight: {
+        IconHover: {
             new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                size: {
-                    type: (StringConstructor | NumberConstructor)[];
-                };
-                strokeWidth: {
-                    type: NumberConstructor;
-                    default: number;
-                };
-                strokeLinecap: {
+                prefix: {
                     type: StringConstructor;
-                    default: string;
-                    validator: (value: any) => boolean;
                 };
-                strokeLinejoin: {
-                    type: StringConstructor;
+                size: {
+                    type: import("vue").PropType<import("..").Size>;
                     default: string;
-                    validator: (value: any) => boolean;
                 };
-                rotate: NumberConstructor;
-                spin: BooleanConstructor;
+                disabled: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>> & Readonly<{
-                onClick?: ((ev: MouseEvent) => any) | undefined;
-            }>, {
-                cls: import("vue").ComputedRef<(string | {
-                    [x: string]: boolean;
-                })[]>;
-                innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
-                onClick: (ev: MouseEvent) => void;
-            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                click: (ev: MouseEvent) => true;
+                onClick?: ((_e: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                click: (_e: MouseEvent) => any;
             }, import("vue").PublicProps, {
-                spin: boolean;
-                strokeWidth: number;
-                strokeLinecap: string;
-                strokeLinejoin: string;
+                size: "small" | "mini" | "medium" | "large";
+                disabled: boolean;
             }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                 P: {};
                 B: {};
@@ -264,201 +206,98 @@ declare const Collapse: {
                 M: {};
                 Defaults: {};
             }, Readonly<import("vue").ExtractPropTypes<{
-                size: {
-                    type: (StringConstructor | NumberConstructor)[];
-                };
-                strokeWidth: {
-                    type: NumberConstructor;
-                    default: number;
-                };
-                strokeLinecap: {
+                prefix: {
                     type: StringConstructor;
-                    default: string;
-                    validator: (value: any) => boolean;
                 };
-                strokeLinejoin: {
-                    type: StringConstructor;
+                size: {
+                    type: import("vue").PropType<import("..").Size>;
                     default: string;
-                    validator: (value: any) => boolean;
                 };
-                rotate: NumberConstructor;
-                spin: BooleanConstructor;
+                disabled: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
             }>> & Readonly<{
-                onClick?: ((ev: MouseEvent) => any) | undefined;
-            }>, {
-                cls: import("vue").ComputedRef<(string | {
-                    [x: string]: boolean;
-                })[]>;
-                innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
-                onClick: (ev: MouseEvent) => void;
-            }, {}, {}, {}, {
-                spin: boolean;
-                strokeWidth: number;
-                strokeLinecap: string;
-                strokeLinejoin: string;
+                onClick?: ((_e: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, {
+                size: "small" | "mini" | "medium" | "large";
+                disabled: boolean;
             }>;
             __isFragment?: never;
             __isTeleport?: never;
             __isSuspense?: never;
         } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            size: {
-                type: (StringConstructor | NumberConstructor)[];
-            };
-            strokeWidth: {
-                type: NumberConstructor;
-                default: number;
-            };
-            strokeLinecap: {
+            prefix: {
                 type: StringConstructor;
-                default: string;
-                validator: (value: any) => boolean;
             };
-            strokeLinejoin: {
-                type: StringConstructor;
+            size: {
+                type: import("vue").PropType<import("..").Size>;
                 default: string;
-                validator: (value: any) => boolean;
             };
-            rotate: NumberConstructor;
-            spin: BooleanConstructor;
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         }>> & Readonly<{
-            onClick?: ((ev: MouseEvent) => any) | undefined;
-        }>, {
-            cls: import("vue").ComputedRef<(string | {
-                [x: string]: boolean;
-            })[]>;
-            innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
-            onClick: (ev: MouseEvent) => void;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: (ev: MouseEvent) => true;
+            onClick?: ((_e: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            click: (_e: MouseEvent) => any;
         }, string, {
-            spin: boolean;
-            strokeWidth: number;
-            strokeLinecap: string;
-            strokeLinejoin: string;
-        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+            size: "small" | "mini" | "medium" | "large";
+            disabled: boolean;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        });
+        IconCaretRight: {
+            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../icon/icon-caret-right/icon-caret-right.vue").Props> & Readonly<{
+                onClick?: ((_ev: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                click: (_ev: MouseEvent) => any;
+            }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("../icon/icon-caret-right/icon-caret-right.vue").Props> & Readonly<{
+                onClick?: ((_ev: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import("vue").ComponentOptionsBase<Readonly<import("../icon/icon-caret-right/icon-caret-right.vue").Props> & Readonly<{
+            onClick?: ((_ev: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            click: (_ev: MouseEvent) => any;
+        }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
             install: (app: App, options?: import("../_utils/types").SDIconOptions) => void;
         };
         IconCaretLeft: {
-            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                size: {
-                    type: (StringConstructor | NumberConstructor)[];
-                };
-                strokeWidth: {
-                    type: NumberConstructor;
-                    default: number;
-                };
-                strokeLinecap: {
-                    type: StringConstructor;
-                    default: string;
-                    validator: (value: any) => boolean;
-                };
-                strokeLinejoin: {
-                    type: StringConstructor;
-                    default: string;
-                    validator: (value: any) => boolean;
-                };
-                rotate: NumberConstructor;
-                spin: BooleanConstructor;
-            }>> & Readonly<{
-                onClick?: ((ev: MouseEvent) => any) | undefined;
-            }>, {
-                cls: import("vue").ComputedRef<(string | {
-                    [x: string]: boolean;
-                })[]>;
-                innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
-                onClick: (ev: MouseEvent) => void;
-            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                click: (ev: MouseEvent) => true;
-            }, import("vue").PublicProps, {
-                spin: boolean;
-                strokeWidth: number;
-                strokeLinecap: string;
-                strokeLinejoin: string;
-            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../icon/icon-caret-left/icon-caret-left.vue").Props> & Readonly<{
+                onClick?: ((_ev: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+                click: (_ev: MouseEvent) => any;
+            }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                 P: {};
                 B: {};
                 D: {};
                 C: {};
                 M: {};
                 Defaults: {};
-            }, Readonly<import("vue").ExtractPropTypes<{
-                size: {
-                    type: (StringConstructor | NumberConstructor)[];
-                };
-                strokeWidth: {
-                    type: NumberConstructor;
-                    default: number;
-                };
-                strokeLinecap: {
-                    type: StringConstructor;
-                    default: string;
-                    validator: (value: any) => boolean;
-                };
-                strokeLinejoin: {
-                    type: StringConstructor;
-                    default: string;
-                    validator: (value: any) => boolean;
-                };
-                rotate: NumberConstructor;
-                spin: BooleanConstructor;
-            }>> & Readonly<{
-                onClick?: ((ev: MouseEvent) => any) | undefined;
-            }>, {
-                cls: import("vue").ComputedRef<(string | {
-                    [x: string]: boolean;
-                })[]>;
-                innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
-                onClick: (ev: MouseEvent) => void;
-            }, {}, {}, {}, {
-                spin: boolean;
-                strokeWidth: number;
-                strokeLinecap: string;
-                strokeLinejoin: string;
-            }>;
+            }, Readonly<import("../icon/icon-caret-left/icon-caret-left.vue").Props> & Readonly<{
+                onClick?: ((_ev: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, {}>;
             __isFragment?: never;
             __isTeleport?: never;
             __isSuspense?: never;
-        } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            size: {
-                type: (StringConstructor | NumberConstructor)[];
-            };
-            strokeWidth: {
-                type: NumberConstructor;
-                default: number;
-            };
-            strokeLinecap: {
-                type: StringConstructor;
-                default: string;
-                validator: (value: any) => boolean;
-            };
-            strokeLinejoin: {
-                type: StringConstructor;
-                default: string;
-                validator: (value: any) => boolean;
-            };
-            rotate: NumberConstructor;
-            spin: BooleanConstructor;
-        }>> & Readonly<{
-            onClick?: ((ev: MouseEvent) => any) | undefined;
-        }>, {
-            cls: import("vue").ComputedRef<(string | {
-                [x: string]: boolean;
-            })[]>;
-            innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
-            onClick: (ev: MouseEvent) => void;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: (ev: MouseEvent) => true;
-        }, string, {
-            spin: boolean;
-            strokeWidth: number;
-            strokeLinecap: string;
-            strokeLinejoin: string;
-        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+        } & import("vue").ComponentOptionsBase<Readonly<import("../icon/icon-caret-left/icon-caret-left.vue").Props> & Readonly<{
+            onClick?: ((_ev: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            click: (_ev: MouseEvent) => any;
+        }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
             install: (app: App, options?: import("../_utils/types").SDIconOptions) => void;
         };
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/color-picker/color-picker.d.ts

@@ -165,7 +165,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }) => any) | undefined;
     "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
 }>, {
-    size: "medium" | "large" | "small" | "mini";
+    size: "small" | "mini" | "medium" | "large";
     disabled: boolean;
     defaultValue: string;
     clearable: boolean;

package/es/color-picker/index.d.ts

@@ -99,7 +99,7 @@ declare const ColorPicker: {
         }) => true;
         'recent-colors-change': (_value: string[]) => true;
     }, import("vue").PublicProps, {
-        size: "medium" | "large" | "small" | "mini";
+        size: "small" | "mini" | "medium" | "large";
         disabled: boolean;
         defaultValue: string;
         clearable: boolean;
@@ -206,7 +206,7 @@ declare const ColorPicker: {
         }) => any) | undefined;
         "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
-        size: "medium" | "large" | "small" | "mini";
+        size: "small" | "mini" | "medium" | "large";
         disabled: boolean;
         defaultValue: string;
         clearable: boolean;
@@ -325,7 +325,7 @@ declare const ColorPicker: {
     }) => true;
     'recent-colors-change': (_value: string[]) => true;
 }, string, {
-    size: "medium" | "large" | "small" | "mini";
+    size: "small" | "mini" | "medium" | "large";
     disabled: boolean;
     defaultValue: string;
     clearable: boolean;

package/es/color-picker/panel.d.ts

@@ -73,8 +73,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         color: ColorObject;
     }) => void>;
 }>> & Readonly<{}>, {
-    disabled: boolean;
     value: string;
+    disabled: boolean;
     format: ColorFormat;
     enableAlpha: boolean;
     colorModes: ColorModes;

package/es/color-picker/style/index.css

@@ -40,7 +40,7 @@
   display: none;
 }
 .sd-color-picker:hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
   cursor: pointer;
 }
 .sd-color-picker-size-medium {
@@ -133,8 +133,8 @@
   width: 18px;
   height: 18px;
   padding: 2px;
-  background: var(--color-bg-white);
-  border: 1px solid var(--color-border-2);
+  background: var(--sd-color-bg-white);
+  border: 1px solid var(--sd-color-border-2);
   border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
   transform: translateX(-50%);
@@ -142,7 +142,7 @@
   touch-action: none;
 }
 .sd-color-picker-panel .sd-color-picker-gradient-thumb-active {
-  border-color: var(--color-primary-6);
+  border-color: var(--sd-color-primary-6);
   box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.16);
 }
 .sd-color-picker-panel .sd-color-picker-gradient-thumb-inner {
@@ -158,7 +158,7 @@
   margin-top: 8px;
 }
 .sd-color-picker-panel .sd-color-picker-gradient-label {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
 }
 .sd-color-picker-panel .sd-color-picker-gradient-degree {
@@ -188,7 +188,7 @@
   width: 16px;
   height: 16px;
   background-color: transparent;
-  border: 2px solid var(--color-bg-white);
+  border: 2px solid var(--sd-color-bg-white);
   border-radius: 50%;
   transform: translate(-50%, -50%);
 }
@@ -237,7 +237,7 @@
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors {
   padding: 12px;
-  border-top: 1px solid var(--color-fill-3);
+  border-top: 1px solid var(--sd-color-fill-3);
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-section:not(:first-child) {
   margin-top: 12px;
@@ -249,13 +249,13 @@
   justify-content: space-between;
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-text {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 400;
   font-size: 12px;
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-action {
   padding: 0;
-  color: var(--color-primary-6);
+  color: var(--sd-color-primary-6);
   font-size: 12px;
   background: transparent;
   border: 0;
@@ -263,7 +263,7 @@
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-empty {
   margin: 12px 0;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-size: 12px;
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-wrapper {
@@ -312,8 +312,8 @@
   box-sizing: border-box;
   width: 16px;
   height: 16px;
-  background-color: var(--color-bg-white);
-  border: 1px solid var(--color-border-2);
+  background-color: var(--sd-color-bg-white);
+  border: 1px solid var(--sd-color-border-2);
   border-radius: 50%;
   transform: translateX(-50%);
 }
@@ -321,7 +321,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  background: var(--color-bg-white);
+  background: var(--sd-color-bg-white);
   border-radius: 50%;
   content: "";
 }

package/es/color-picker/style/index.scss

@@ -44,7 +44,7 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
   }
 
   &:hover {
-    background-color: var(--color-fill-3);
+    background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
     cursor: pointer;
   }
 
@@ -130,8 +130,8 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
     width: 18px;
     height: 18px;
     padding: 2px;
-    background: var(--color-bg-white);
-    border: 1px solid var(--color-border-2);
+    background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-white'));
+    border: 1px solid var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
     border-radius: global.$border-radius-circle;
     box-shadow: 0 1px 3px rgb(0 0 0 / 14%);
     transform: translateX(-50%);
@@ -140,7 +140,7 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
   }
 
   .#{$color-picker-prefix-cls}-gradient-thumb-active {
-    border-color: var(--color-primary-6);
+    border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-6'));
     box-shadow: 0 0 0 2px rgb(22 93 255 / 16%);
   }
 
@@ -159,7 +159,7 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
   }
 
   .#{$color-picker-prefix-cls}-gradient-label {
-    color: var(--color-text-2);
+    color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
     font-size: global.$font-size-body-1;
   }
 
@@ -194,7 +194,8 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
       width: $color-palette-handle-size;
       height: $color-palette-handle-size;
       background-color: transparent;
-      border: $color-palette-handle-border-size solid var(--color-bg-white);
+      border: $color-palette-handle-border-size solid
+        var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-white'));
       border-radius: global.$border-radius-circle;
       transform: translate(-50%, -50%);
     }
@@ -253,7 +254,7 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
 
   .#{$color-picker-prefix-cls}-panel-colors {
     padding: $color-panel-padding;
-    border-top: 1px solid var(--color-fill-3);
+    border-top: 1px solid var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
 
     .#{$color-picker-prefix-cls}-colors-section:not(:first-child) {
       margin-top: global.$spacing-6;
@@ -267,14 +268,14 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
     }
 
     .#{$color-picker-prefix-cls}-colors-text {
-      color: var(--color-text-1);
+      color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
       font-weight: global.$font-weight-400;
       font-size: $color-panel-section-title-font-size;
     }
 
     .#{$color-picker-prefix-cls}-colors-action {
       padding: 0;
-      color: var(--color-primary-6);
+      color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-6'));
       font-size: global.$font-size-body-1;
       background: transparent;
       border: 0;
@@ -283,7 +284,7 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
 
     .#{$color-picker-prefix-cls}-colors-empty {
       margin: global.$spacing-6 0;
-      color: var(--color-text-3);
+      color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
       font-size: $color-panel-empty-font-size;
     }
 
@@ -350,8 +351,8 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
       box-sizing: border-box;
       width: $color-control-bar-handle-size;
       height: $color-control-bar-handle-size;
-      background-color: var(--color-bg-white);
-      border: 1px solid var(--color-border-2);
+      background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-white'));
+      border: 1px solid var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
       border-radius: global.$border-radius-circle;
       transform: translateX(-50%);
 
@@ -359,7 +360,7 @@ $token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variable
         display: block;
         width: 100%;
         height: 100%;
-        background: var(--color-bg-white);
+        background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-white'));
         border-radius: global.$border-radius-circle;
         content: '';
       }