@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/lib/color-picker/interface.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { PopperProps } from '../_utils/usePopper';
+export declare const ColorTypes: ["HEX", "HSB", "RGB", "HSL", "themeColor"];
+export declare type ColorType = typeof ColorTypes[number];
+export interface IColorTypesObj {
+    type: ColorType;
+    value: string;
+}
+export declare const BorderTypes: ["underline", "bordered"];
+export declare type BorderType = typeof BorderTypes[number];
+export interface IColorPickerProps extends PopperProps {
+    value: string;
+    defaultValue: string;
+    className: string;
+    style: React.CSSProperties;
+    borderType: BorderType;
+    suffixIcon: (rgbColor: string) => React.ReactNode;
+    functionalColorName: string;
+    functionalColor: string;
+    switchName: {
+        name: string;
+        internationalName?: string;
+    };
+    showSwitch: boolean;
+    showColorTransfer: boolean;
+    showPresetColor: boolean;
+    placeholder: string;
+    presetColor: string[];
+    showColorPickerBox: boolean;
+    defaultOpen: boolean;
+    onChange: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
+}
+export interface IColorPickerPanelProps {
+    alpha: number;
+    alphaNoVerifyVal: string;
+    clickedColorIndex?: number;
+    colTypeArr: Array<IColorTypesObj>;
+    correctColorValue: string;
+    currentColorType: IColorTypesObj['type'];
+    functionalColor?: string;
+    functionalColorName: string;
+    switchName: {
+        name: string;
+        internationalName?: string;
+    };
+    inputRef: any;
+    isFollow: boolean;
+    presetColor?: string[];
+    showSwitch?: boolean;
+    showColorTransfer?: boolean;
+    showPresetColor?: boolean;
+    showColorPickerBox?: boolean;
+    value: string;
+    setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
+    setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;
+    setClickedColorIndex: (clickedColorIndex: number) => void;
+    setIsFollow: (isFollow: boolean) => void;
+    setAlphaNoVerifyVal: (NoVerifyVal: string) => void;
+    setAlpha: (alpha: number) => void;
+    setCorrectColorValue: (colorValue: string) => void;
+    setInputColorValue: (colorValue: string) => void;
+    setShowPanel: (showPanel: boolean) => void;
+    onChange?: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
+}

package/lib/color-picker/interface.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorTypes = exports.BorderTypes = void 0;
+var _type = require("../_utils/type");
+var ColorTypes = (0, _type.tuple)('HEX', 'HSB', 'RGB', 'HSL', 'themeColor');
+exports.ColorTypes = ColorTypes;
+var BorderTypes = (0, _type.tuple)('underline', 'bordered');
+exports.BorderTypes = BorderTypes;

package/lib/color-picker/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.css");
+require("./index.css");

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

@@ -0,0 +1,317 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-color-picker-container {
+  position: relative;
+}
+.kd-color-picker-container .kd-color-picker-input {
+  width: var(--kd-c-color-picker-input-sizing-width, 230px);
+  height: var(--kd-c-color-picker-input-sizing-height, 28px);
+  border-bottom: 1px solid #d9d9d9;
+  font-size: var(--kd-c-color-picker-input-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-container .kd-color-picker-icon-container {
+  position: absolute;
+  top: 3px;
+  right: 6px;
+  cursor: pointer;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon {
+  width: var(--kd-c-color-picker-input-suffix-sizing-width, 20px);
+  height: var(--kd-c-color-picker-input-suffix-sizing-height, 20px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  line-height: 18px;
+  text-align: center;
+  color: #fff;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-underline {
+  margin-right: -6px;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-up .kdicon-arrow-down {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
+}
+.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-down .kdicon-arrow-down {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
+}
+.kd-color-picker-pop.topLeft.hidden,
+.kd-color-picker-pop.bottomLeft.hidden,
+.kd-color-picker-pop.topRight.hidden,
+.kd-color-picker-pop.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-color-picker-pop .kd-color-picker-panel {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: var(--kd-c-color-picker-panel-sizing-width, 304px);
+  padding: 4px 12px 16px;
+  background: #FFFFFF;
+  -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+  z-index: var(--kd-c-color-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome {
+  width: 278px !important;
+  margin-top: 12px;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child {
+  padding: 9px 0 4px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 50% !important;
+  margin-top: -1px !important;
+  margin-left: 4px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child .hue-horizontal {
+  width: 240px !important;
+  height: 12px !important;
+  border-radius: 6px !important;
+  padding: unset !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child .hue-horizontal > div > div {
+  margin-top: 1px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div {
+  width: 240px !important;
+  height: 12px !important;
+  margin: unset;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:first-child {
+  border-radius: 6px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:nth-child(2) {
+  border-radius: 6px !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:last-child {
+  margin: unset !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:last-child > div > div {
+  margin-top: 1px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:last-child {
+  display: none !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-switch {
+  margin: 12px 0 0;
+  font-size: 12px;
+  color: #666666;
+  letter-spacing: 0;
+  line-height: 16px;
+  font-weight: 400;
+}
+.kd-color-picker-pop .kd-color-picker-panel-switch span {
+  vertical-align: middle;
+  margin-right: 9px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input {
+  display: inline-block;
+  position: relative;
+  margin-top: 12px;
+  font-size: var(--kd-c-color-picker-panel-select-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-pop .kd-color-picker-panel-input-no-recommend {
+  margin-bottom: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select.bottomLeft,
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select.topLeft {
+  position: absolute;
+  width: 60px !important;
+  background: #FFFFFF;
+  right: 0;
+  left: unset !important;
+  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown {
+  overflow: hidden;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered {
+  border-radius: 2px;
+  width: var(--kd-c-color-picker-panel-select-sizing-width, 212px);
+  height: var(--kd-c-color-picker-panel-select-sizing-height, 28px);
+  min-height: 28px;
+  margin-top: -2px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered .kd-select-placeholder {
+  left: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-input .active-option {
+  background-color: #E3EBFF;
+}
+.kd-color-picker-pop .kd-color-picker-panel-transparent {
+  width: 60px;
+  height: 28px;
+  margin-left: 8px;
+  text-align: center;
+  font-size: var(--kd-c-color-picker-panel-alpha-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+  margin-top: 12px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: var(--kd-c-color-picker-panel-preset-sizing-width, 16px);
+  height: var(--kd-c-color-picker-panel-preset-sizing-height, 16px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  list-style: none;
+  cursor: pointer;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li .square {
+  display: none;
+  position: absolute;
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+  top: -3px;
+  left: -3px;
+  width: calc(var(--kd-c-color-picker-panel-preset-sizing-width, 16px) + 4px);
+  height: calc(var(--kd-c-color-picker-panel-preset-sizing-height, 16px) + 4px);
+  border: 1px solid #b2b2b0;
+  border-radius: 4px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li .square-click {
+  display: block;
+  -webkit-box-shadow: 0 0 0 1px #e5e5e5 !important;
+          box-shadow: 0 0 0 1px #e5e5e5 !important;
+}
+.kd-color-picker-pop .kd-color-picker-panel-colorDivContainer li:hover .square {
+  display: block;
+}

package/lib/color-picker/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/color-picker/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/color-picker/style/index.less

@@ -0,0 +1,253 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@import './token.less';
+
+@color-picker-prefix-cls: ~'@{kd-prefix}-color-picker';
+
+.@{color-picker-prefix-cls}-container {
+    position: relative;
+
+    .@{color-picker-prefix-cls}-input {
+        width: @color-picker-input-sizing-width;
+        height: @color-picker-input-sizing-height;
+        border-bottom: 1px solid rgba(217, 217, 217, 1);
+        font-size: @color-picker-input-font-size;
+    }
+
+    .@{color-picker-prefix-cls}-icon-container {
+        position: absolute;
+        top: 3px;
+        right: 6px;
+        cursor: pointer;
+
+        .@{color-picker-prefix-cls}-icon {
+            width: @color-picker-input-suffix-sizing-width;
+            height: @color-picker-input-suffix-sizing-height;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            border-radius: 2px;
+            line-height: 18px;
+            text-align: center;
+            color: @bg;
+
+            &-underline {
+                margin-right: -6px;
+            }
+
+            &-up {
+                .kdicon-arrow-down {
+                    transform: rotate(180deg);
+                    transition: transform @transition-duration-quickly ease-in-out;
+                }
+            }
+
+            &-down {
+                .kdicon-arrow-down {
+                    transform: rotate(0deg);
+                    transition: transform @transition-duration-quickly ease-in-out;
+                }
+            }
+        }
+    }
+
+}
+
+.@{color-picker-prefix-cls}-pop {
+
+    &.topLeft.hidden,
+    &.bottomLeft.hidden,
+    &.topRight.hidden,
+    &.bottomRight.hidden {
+        opacity: 0;
+        visibility: hidden;
+        transition: all calc(@transition-duration - 0.1s) @ease;
+    }
+
+    .@{color-picker-prefix-cls}-panel {
+        box-sizing: border-box;
+        width: @color-picker-panel-sizing-width;
+        padding: 4px 12px 16px;
+        background: #FFFFFF;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+        border-radius: 2px;
+        transform-origin: top left;
+        z-index: @color-picker-panel-z-index;
+
+        &-chrome {
+            width: 278px !important;
+            margin-top: 12px;
+            box-shadow: none !important;
+
+            &>div:last-child {
+                padding: 9px 0 4px !important;
+
+                .flexbox-fix:first-child {
+                    display: flex;
+                    flex-direction: row-reverse;
+
+                    &>div:first-child {
+                        &>div {
+                            width: 28px !important;
+                            height: 28px !important;
+                            border-radius: 50% !important;
+                            margin-top: -1px !important;
+                            margin-left: 4px !important;
+                        }
+                    }
+
+                    &>div:last-child {
+
+                        .hue-horizontal {
+                            width: 240px !important;
+                            height: 12px !important;
+                            border-radius: 6px !important;
+                            padding: unset !important;
+
+                            &>div>div {
+                                margin-top: 1px;
+                            }
+                        }
+
+                        &>div:last-child {
+                            &>div {
+                                width: 240px !important;
+                                height: 12px !important;
+                                margin: unset;
+
+                                &>div:first-child {
+                                    border-radius: 6px !important;
+                                }
+
+                                &>div:nth-child(2) {
+                                    border-radius: 6px !important;
+                                }
+
+                                &>div:last-child {
+                                    margin: unset !important;
+
+                                    &>div>div {
+                                        margin-top: 1px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                }
+
+                .flexbox-fix:last-child {
+                    display: none !important;
+                }
+            }
+
+        }
+
+        &-switch {
+            margin: 12px 0 0;
+            font-size: 12px;
+            color: #666666;
+            letter-spacing: 0;
+            line-height: 16px;
+            font-weight: 400;
+
+            span {
+                vertical-align: middle;
+                margin-right: 9px;
+            }
+        }
+
+        &-input {
+            display: inline-block;
+            position: relative;
+            margin-top: 12px;
+            font-size: @color-picker-panel-select-font-size;
+
+            &-no-recommend {
+                margin-bottom: 8px;
+            }
+
+            .@{kd-prefix}-select {
+
+                &.bottomLeft,
+                &.topLeft {
+                    position: absolute;
+                    width: 60px !important;
+                    background: #FFFFFF;
+                    right: 0;
+                    left: unset !important;
+                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+                    border-radius: 2px;
+                }
+
+                .@{kd-prefix}-select-dropdown {
+                    overflow: hidden;
+                }
+            }
+
+            .@{kd-prefix}-select-bordered {
+                border-radius: 2px;
+                width: @color-picker-panel-select-sizing-width;
+                height: @color-picker-panel-select-sizing-height;
+                min-height: 28px;
+                margin-top: -2px;
+
+                .@{kd-prefix}-select-placeholder {
+                    left: 8px;
+                }
+            }
+
+            .active-option {
+                background-color: #E3EBFF;
+            }
+        }
+
+        &-transparent {
+            width: 60px;
+            height: 28px;
+            margin-left: 8px;
+            text-align: center;
+            font-size: @color-picker-panel-alpha-font-size;
+        }
+
+        &-colorDivContainer {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            grid-column-gap: 8px;
+            grid-row-gap: 8px;
+            margin-top: 12px;
+
+            li {
+                position: relative;
+                box-sizing: border-box;
+                width: @color-picker-panel-preset-sizing-width;
+                height: @color-picker-panel-preset-sizing-height;
+                border: 1px solid rgba(0, 0, 0, 0.05);
+                border-radius: 2px;
+                list-style: none;
+                cursor: pointer;
+
+                .square {
+                    display: none;
+                    position: absolute;
+                    box-sizing: inherit;
+                    top: -3px;
+                    left: -3px;
+                    width: calc(@color-picker-panel-preset-sizing-width + 4px);
+                    height: calc(@color-picker-panel-preset-sizing-height + 4px);
+                    border: 1px solid rgba(178, 178, 176, 1);
+                    border-radius: 4px;
+
+                    &-click {
+                        display: block;
+                        box-shadow: 0 0 0 1px #e5e5e5 !important;
+                    }
+                }
+
+                &:hover {
+                    .square {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}

package/lib/color-picker/style/mixin.less

@@ -0,0 +1,5 @@
+
+// code component mixin here
+.test() {
+  display: inline;
+}

package/lib/color-picker/style/token.less

@@ -0,0 +1,22 @@
+@import '../../style/themes/token.less';
+
+@color-picker-custom-prefix: ~'--@{kd-prefix}-c-color-picker';
+
+// z-index
+@color-picker-panel-z-index: var(~'@{color-picker-custom-prefix}-panel-z-index', @z-index-popper);
+
+// font
+@color-picker-input-font-size: var(~'@{color-picker-custom-prefix}-input-font-size', @font-size-middle);
+@color-picker-panel-select-font-size: var(~'@{color-picker-custom-prefix}-panel-select-font-size', @font-size-middle);
+@color-picker-panel-alpha-font-size: var(~'@{color-picker-custom-prefix}-panel-alpha-font-size', @font-size-middle);
+
+// sizing
+@color-picker-input-sizing-width: var(~'@{color-picker-custom-prefix}-input-sizing-width', 230px);
+@color-picker-input-sizing-height: var(~'@{color-picker-custom-prefix}-input-sizing-height', 28px);
+@color-picker-input-suffix-sizing-width: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-width', 20px);
+@color-picker-input-suffix-sizing-height: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-height', 20px);
+@color-picker-panel-sizing-width: var(~'@{color-picker-custom-prefix}-panel-sizing-width', 304px);
+@color-picker-panel-select-sizing-width: var(~'@{color-picker-custom-prefix}-panel-select-sizing-width', 212px);
+@color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px);
+@color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px);
+@color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px);