@king-design/intact 2.1.1 → 3.0.0-beta.1

package/components/upload/demos/manually.md

@@ -6,20 +6,19 @@ order: 4
 手动上传需要通过指定`autoUpload`为`false`来关闭自动上传，然后调用组件的`submit`方法来手动上传
 
 ```vdt
-import {Upload} from 'kpc';
-import {Button} from 'kpc';
+import {Upload, Button} from 'kpc';
 
-<Upload 
-    ref="instance"
-    multiple 
-    action="//fakestoreapi.com/products"
-    autoUpload={false}
->
-    <Button type="primary">选择文件</Button>
-    <b:tip>
-        <Button ev-click={this.upload}>开始上传</Button>
-    </b:tip>
-</Upload>
+<div>
+    <Upload 
+        ref="instance"
+        multiple 
+        action="//fakestoreapi.com/products"
+        autoUpload={false}
+    >
+        <Button type="primary">选择文件</Button>
+    </Upload>
+    <Button ev-click={this.upload}>开始上传</Button>
+</div>
 ```
 
 ```styl

package/components/upload/index.spec.ts

@@ -69,7 +69,7 @@ describe('Upload', () => {
             remove.click();
             await wait();
             let dialog = getElement('.k-dialog')!;
-            const [, cancel] = dialog.querySelectorAll('.k-dialog-footer .k-btn');
+            const cancel = dialog.querySelector('.k-dialog-footer .k-dialog-cancel');
             (cancel as HTMLDivElement).click();
             await wait(500);
             expect(element.innerHTML).to.matchSnapshot();
@@ -77,7 +77,7 @@ describe('Upload', () => {
             remove.click();
             await wait();
             dialog = getElement('.k-dialog')!;
-            const [ok] = dialog.querySelectorAll('.k-dialog-footer .k-btn');
+            const ok = dialog.querySelector('.k-dialog-footer .k-dialog-ok');
             (ok as HTMLDivElement).click();
             await wait(500);
             expect(element.innerHTML).to.matchSnapshot();
@@ -132,7 +132,7 @@ describe('Upload', () => {
             await wait(1000);
             expect(element.innerHTML.replace(/blob:[^"]*/g, '')).to.matchSnapshot();
 
-            const view = element.querySelector('.k-upload-overlap') as HTMLElement;
+            const view = element.querySelector('.k-upload-zoom') as HTMLElement;
             view.click();
             await wait();
             const dialog = getElement('.k-dialog')!;
@@ -157,7 +157,7 @@ describe('Upload', () => {
         this.timeout(0);
         const [instance, element] = mount(ManuallyDemo);
 
-        const upload = instance.$lastInput!.children as Upload;
+        const upload = instance.refs.instance as Upload;
         upload.on('success', async () => {
             await wait(500);
             expect(element.innerHTML).to.matchSnapshot();

package/components/upload/index.vdt

@@ -38,22 +38,26 @@ const handle = (
         <b:content>
             <b:children v-if={children}>{children}</b:children>
             <template v-else-if={type !== 'gallery'}>
-                <Button type="primary" v-if={type === 'select'}>{_$('点击上传')}</Button>
+                <Button v-if={type === 'select'}>
+                    <Icon class="k-icon-upload" />
+                    {_$('点击上传')}
+                </Button>
                 <div class="k-upload-area" v-else>
-                    <Icon class="ion-upload" />
-                    <div>{_$('将文件拖到此处，或点击上传')}</div>
+                    <Icon class="k-icon-add-big" />
+                    <div innerHTML={_$('将文件拖到此处，或<a>点击上传</a>')}></div>
                 </div>
             </template>
-            <template v-else>
-                <Icon class="k-upload-picture-card k-upload-add ion-ios-plus-empty" />
-            </template>
+            <div v-else class="k-upload-picture-card k-upload-add">
+                <Icon class="k-icon-add-big" size="large" />
+                <div>{_$('上传图片')}</div>
+            </div>
         </b:content>
     </div>
 );
 
 const {removeFile} = this.files;
-const closeBtn = (value, index, icon) => (
-    <Icon class={{"k-upload-close": true, [icon]: true}}
+const closeBtn = (value, index) => (
+    <Icon class="k-upload-close k-icon-delete"
         ev-click={() => removeFile(value, index)}
         hoverable
     />
@@ -94,13 +98,14 @@ const {show, close, image, isShow} = this.showImage;
                             class="k-upload-progress"
                         />
                     </div>
-                    <div class="k-upload-overlap k-upload-icons" v-else 
-                        ev-click={linkEvent($value, show)}
-                    >
-                        <Icon class="k-upload-zoom ion-ios-eye-outline" />
+                    <div class="k-upload-overlap k-upload-icons" v-else>
+                        <Icon class="k-upload-zoom ion-ios-eye-outline" size="large"
+                            hoverable
+                            ev-click={() => show($value)}
+                        />
+                        {closeBtn($value, $key)}
                     </div>
                 </Transition>
-                {closeBtn($value, $key, 'ion-ios-close')}
             </div>
             <div key="handle" class="c-middle" v-if={!limit || files.length < limit}>
                 {handle}
@@ -120,28 +125,29 @@ const {show, close, image, isShow} = this.showImage;
                 }}
                 key={$value.uid}
             >
-                <div class="k-upload-name c-ellipsis">
-                    <Icon class="k-upload-file-icon ion-document" />
-                    <span class="k-upload-file-name">{$value.name}</span>
-                    {closeBtn($value, $key, 'ion-ios-close-empty')}
-                    <Icon class="k-upload-status-icon ion-ios-checkmark-outline" 
-                        v-if={$value.status === UploadFileStatus.Done}
-                    />
-                    <Icon class="k-upload-status-icon ion-ios-close-outline"
-                        v-else-if={$value.status === UploadFileStatus.Error}
-                    />
+                <div class="k-upload-file-main">
+                    <div class="k-upload-name c-ellipsis">
+                        <Icon class="k-upload-file-icon ion-document" />
+                        <span class="k-upload-file-name">{$value.name}</span>
+                        <Icon class="k-upload-status-icon ion-ios-checkmark-outline" 
+                            v-if={$value.status === UploadFileStatus.Done}
+                        />
+                        <Icon class="k-upload-status-icon ion-ios-close-outline"
+                            v-else-if={$value.status === UploadFileStatus.Error}
+                        />
+                    </div>
+                    <Transition {...expandAnimationCallbacks}>
+                        <Progress percent={$value.percent}
+                            size="mini"
+                            class="k-upload-progress"
+                            v-if={
+                                $value.status === UploadFileStatus.Ready || 
+                                $value.status === UploadFileStatus.Uploading
+                            }
+                        />
+                    </Transition>
                 </div>
-                <Transition {...expandAnimationCallbacks}>
-                    <Progress percent={$value.percent}
-                        size="mini"
-                        class="k-upload-progress"
-                        v-if={
-                            $value.status === UploadFileStatus.Ready || 
-                            $value.status === UploadFileStatus.Uploading
-                        }
-
-                    />
-                </Transition>
+                {closeBtn($value, $key)}
             </div>
         </TransitionGroup>
     </div>

package/components/upload/styles.ts

@@ -6,11 +6,10 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.middle },
     fontSize: '12px',
+    get color() { return theme.color.lightBlack },
     tip: {
-        gap: '16px',
-        get color() { return theme.color.lightBlack }
+        gap: '8px',
     },
-    closeFontSize: '24px',
 
     // files list
     filesGap: '16px',
@@ -24,22 +23,27 @@ const defaults = {
         status: {
             // width: '16px',
             get color() { return theme.color.success },
-            gap: '8px',
             get errorColor() { return theme.color.danger },
+            offsetRight: '2px',
+        },
+        delete: {
+            width: '20px',
+            top: '7px',
+            right: '2px',
         },
         get errorColor() { return theme.color.danger },
     },
 
     // drag
     drag: {
-        get color() { return theme.color.lightBlack },
         get border() { return `1px dashed ${theme.color.border}` },
         get borderRadius() { return theme.borderRadius },
         get hoverBorderColor() { return theme.color.primary },
-        padding: `20px 0 40px 0`,
+        get bgColor() { return theme.color.bg },
+        padding: `42px 0`,
         icon: {
-            fontSize: '80px',
-            get color() { return theme.color.placeholder },
+            fontSize: '40px',
+            gap: '16px',
         },
         get overBorderColor() { return theme.color.primary },
     },
@@ -54,23 +58,17 @@ const defaults = {
         padding: '8px',
         bgColor: '#fff',
         get errorBorderColor() { return theme.color.danger },
-        close: {
-            top: '-8px',
-            right: '-8px',
-            fontSize: '18px',
-        },
         add: {
             get border() { return `1px dashed ${theme.color.border}` },
-            fontSize: '44px',
             get hoverBorderColor() { return theme.color.primary },
         }
     },
 
     // overlap
     overlap: {
-        bgColor: 'rgba(0, 0, 0, .35)',
+        bgColor: 'rgba(21, 27, 30, .5)',
         color: '#fff',
-        zoomFontSize: '24px',
+        iconGap: '16px',
     }
 };
 
@@ -83,14 +81,20 @@ export function makeStyles() {
     return css`
         font-size: ${upload.fontSize};
         position: relative;
-        .k-upload-handle,
-        .k-upload-tip {
+
+        // keep vertical align middle
+        .k-icon-upload {
+            position: relative;
+            top: -1px;
+        }
+        .k-upload-handle {
             display: inline-block;
             vertical-align: middle;
+            color: ${upload.color};
         }
         .k-upload-tip {
-            margin-left: ${upload.tip.gap};
-            color: ${upload.tip.color};
+            margin-top: ${upload.tip.gap};
+            color: ${upload.color};
         }
 
         // filelist
@@ -99,15 +103,24 @@ export function makeStyles() {
         }
         .k-upload-file {
             margin: ${upload.file.margin};
-            padding: ${upload.file.padding};
-            border-radius: ${upload.file.borderRadius};
+            padding-right: ${upload.file.delete.width};
+            position: relative;
             &:hover {
-                background: ${upload.file.bgColor};
                 .k-upload-close {
                     display: inline-flex;
+                    position: absolute;
+                    right: ${upload.file.delete.right};
+                    top: ${upload.file.delete.top};
                 } 
+                .k-upload-file-main { 
+                    background: ${upload.file.bgColor};
+                }
             }
         }
+        .k-upload-file-main {
+            padding: ${upload.file.padding};
+            border-radius: ${upload.file.borderRadius};
+        }
         .k-upload-name {
             display: flex;
             align-items: center;
@@ -121,13 +134,10 @@ export function makeStyles() {
         }
         .k-upload-status-icon {
             color: ${upload.file.status.color};
-            margin-left: ${upload.file.status.gap};
+            margin-right: ${upload.file.status.offsetRight};
         }
         .k-upload-close {
             display: none;
-            .k-icon {
-                font-size: ${upload.closeFontSize};
-            }
         }
         .k-upload-file.k-error {
             color: ${upload.file.errorColor};
@@ -144,13 +154,13 @@ export function makeStyles() {
         // drag
         &.k-drag {
             .k-upload-handle {
-                color: ${upload.drag.color};
                 display: block;
                 border: ${upload.drag.border};
                 border-radius: ${upload.drag.borderRadius};
                 cursor: pointer;
                 text-align: center;
                 transition: border-color ${upload.transition};
+                background: ${upload.drag.bgColor};
                 &:hover {
                     border-color: ${upload.drag.hoverBorderColor};
                 }
@@ -158,9 +168,9 @@ export function makeStyles() {
             .k-upload-area {
                 padding: ${upload.drag.padding};
                 .k-icon {
+                    display: inline-block;
                     font-size: ${upload.drag.icon.fontSize};
-                    color: ${upload.drag.icon.color};
-                    line-height: 1;
+                    margin-bottom: ${upload.drag.icon.gap};
                 }
             }
             &.k-dragover {
@@ -182,10 +192,12 @@ export function makeStyles() {
             &.k-error {
                 border-color: ${upload.gallery.errorBorderColor};
             }
+            .k-upload-close {
+                display: inline-flex;
+            }
             &:hover {
-                .k-upload-close {
-                    opacity: 1;
-                    pointer-events: all;
+                .k-upload-icons {
+                    opacity: 1; 
                 }
             }
             .k-upload-img {
@@ -193,57 +205,46 @@ export function makeStyles() {
                 width: 100%;
                 height: 100%;
             }
-            .k-upload-close {
-                position: absolute;
-                top: ${upload.gallery.close.top};
-                right: ${upload.gallery.close.right};
-                display: inline-block;
-                opacity: 0;
-                transition: opacity ${upload.transition};
-                pointer-events: none;
-                .k-icon {
-                    font-size: ${upload.gallery.close.fontSize};
-                }
-            }
             .k-upload-icons {
                 opacity: 0;
                 transition: opacity ${upload.transition};
             }
-            &:hover {
-                .k-upload-icons {
-                    opacity: 1; 
-                }
-            }
         }
 
         .k-upload-picture-card {
-            display: inline-block;
+            display: inline-flex;
             width: ${upload.gallery.width};
             height: ${upload.gallery.height};
             border-radius: ${upload.gallery.borderRadius};
             border: ${upload.gallery.border};
-            text-align: center;
-            cursor: pointer;
             margin: ${upload.gallery.margin};
             background: ${upload.gallery.bgColor};
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
         }
         .k-upload-add {
             border: ${upload.gallery.add.border};
-            font-size: ${upload.gallery.add.fontSize};
-            line-height: calc(${upload.gallery.height} - 2px);
+            cursor: pointer;
             &:hover {
                 border-color: ${upload.gallery.add.hoverBorderColor};
             }
         }
-
         .k-upload-overlap {
             position: absolute;
             width: 100%;
             height: 100%;
             left: 0;
             top: 0;
-            color: ${upload.overlap.color};
             background: ${upload.overlap.bgColor};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: ${upload.overlap.iconGap};
+            color: ${upload.overlap.color};
+            .k-icon:not(:hover) {
+                color: inherit;
+            }
             .k-upload-progress {
                 position: absolute;
                 width: 100%;
@@ -252,13 +253,6 @@ export function makeStyles() {
                 transform: translateY(-50%);
             }
         }
-        .k-upload-zoom {
-            display: inline-block;
-            position: relative;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: ${upload.overlap.zoomFontSize};
-        }
     `;
 }
 

package/components/utils.ts

@@ -181,19 +181,22 @@ export function findChildren(children: Children, callback: MapCallback<boolean>)
     if (isInvalid(children)) return found;
 
     let index = -1;
-    const loop = (children: ValidVNode | NormalizedChildren[] | Children[]) => {
+    const loop = (children: ValidVNode | NormalizedChildren[] | Children[]): boolean => {
         if (Array.isArray(children)) {
             for (let i = 0; i < children.length; i++) {
                 const vNode = children[i];
                 if (isInvalid(vNode)) continue;
                 if (loop(vNode)) {
                     found = vNode as ValidVNode;
-                    break;
+                    return true;
                 }
             }
-        } else {
-            return callback(children, ++index);
+        } else if (callback(children, ++index)) {
+            found = children as ValidVNode;
+            return true;
         }
+
+        return false;
     }
 
     loop(children);
@@ -357,3 +360,21 @@ export function nextFrame(fn: () => void) {
         requestAnimationFrame(fn);
     });
 }
+
+export function selectValue(elem: HTMLInputElement | HTMLTextAreaElement) {
+    if (elem.select) {
+        elem.select();
+    } else if (elem.setSelectionRange) {
+        // mobile safari
+        elem.focus();
+        elem.setSelectionRange(0, elem.value.length);
+    }
+}
+
+export function swap(list: any[], from: number, to: number) {
+    const newList = list.slice(0);
+    const item = newList.splice(from, 1)[0];
+    newList.splice(to, 0, item);
+
+    return newList;
+}

package/es/components/button/index.d.ts

@@ -14,7 +14,7 @@ interface ButtonHTMLAttributes {
     download?: string;
 }
 export interface ButtonProps extends ButtonHTMLAttributes {
-    type?: Colors | 'none' | 'secondary' | 'link';
+    type?: Colors | 'none' | 'secondary' | 'link' | 'flat';
     size?: Sizes;
     icon?: boolean;
     circle?: boolean;

package/es/components/button/index.js

@@ -7,7 +7,7 @@ import { bind } from '../utils';
 import { BUTTON_GROUP } from './constants';
 export * from './group';
 var typeDefs = {
-  type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+  type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link', 'flat'],
   size: ['large', 'default', 'small', 'mini'],
   icon: Boolean,
   circle: Boolean,

package/es/components/button/styles.js

@@ -7,7 +7,7 @@ export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
   get color() {
-    return theme.color.text;
+    return theme.color.lightBlack;
   },
 
   bgColor: '#fff',
@@ -235,10 +235,10 @@ export function makeButtonStyles(_ref) {
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
-  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
+  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.k-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
   }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {

package/es/components/card/styles.js

@@ -5,7 +5,15 @@ import '../../styles/global';
 var defaults = {
   border: '1px solid #e5e5e5',
   padding: '16px',
-  boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
+
+  get boxShadow() {
+    return theme.boxShadow;
+  },
+
+  get borderRadius() {
+    return theme.largeBorderRadius;
+  },
+
   headerHeight: '48px',
   headerFontSize: '14px',
   bgColor: '#fff'
@@ -17,5 +25,5 @@ setDefault(function () {
   }).card;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("border-radius:", theme.borderRadius, ";background:", card.bgColor, ";.k-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.k-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.k-card-extra{float:right;height:100%;display:flex;align-items:center;}.k-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.k-shadow{box-shadow:", card.boxShadow, ";}&.k-none{box-shadow:none;}&.k-border{border:", card.border, ";.k-card-header{border-bottom:", card.border, ";}.k-card-body{padding-top:", card.padding, ";}}&.k-no-header{.k-card-body{padding-top:", card.padding, ";}}&.k-card-grid{.k-card-body{display:flex;padding:0;}&.k-border{.k-card-column:not(:last-of-type){border-right:", card.border, ";}}}.k-card-column{display:flex;align-items:center;padding:", card.padding, ";&.k-fluid{flex:1;}&.k-center{justify-content:center;}}");
+  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.k-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.k-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.k-card-extra{float:right;height:100%;display:flex;align-items:center;}.k-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.k-shadow{box-shadow:", card.boxShadow, ";}&.k-none{box-shadow:none;}&.k-border{border:", card.border, ";.k-card-header{border-bottom:", card.border, ";}.k-card-body{padding-top:", card.padding, ";}}&.k-no-header{.k-card-body{padding-top:", card.padding, ";}}&.k-card-grid{.k-card-body{display:flex;padding:0;}&.k-border{.k-card-column:not(:last-of-type){border-right:", card.border, ";}}}.k-card-column{display:flex;align-items:center;padding:", card.padding, ";&.k-fluid{flex:1;}&.k-center{justify-content:center;}}");
 }

package/es/components/checkbox/styles.js

@@ -1,12 +1,12 @@
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  width: '14px',
+  width: '16px',
 
   get borderColor() {
-    return theme.color.darkBorder;
+    return theme.color.border;
   },
 
   get borderRadius() {
@@ -17,6 +17,10 @@ var defaults = {
     return theme.transition.small;
   },
 
+  get hoverBorder() {
+    return "1px solid " + theme.color.primary;
+  },
+
   bgColor: '#fff',
   // text
   text: {
@@ -36,8 +40,8 @@ var defaults = {
   inner: {
     width: '5px',
     height: '10px',
-    top: '-1px',
-    left: '4px',
+    top: '0px',
+    left: '5px',
     border: '1px solid #fff'
   },
   // disabled
@@ -54,14 +58,21 @@ var defaults = {
       return theme.color.disabledBg;
     },
 
-    get innerColor() {
-      return theme.color.disabledBorder;
-    }
+    innerColor: '#fff',
+    checked: {
+      get borderColor() {
+        return palette(theme.color.primary, -3);
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -3);
+      }
 
+    }
   },
   // indeterminate
   indeterminate: {
-    innerLeft: '3px'
+    innerLeft: '4px'
   }
 };
 var checkbox;
@@ -71,5 +82,5 @@ setDefault(function () {
   }).checkbox;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}&:hover{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

package/es/components/collapse/styles.js

@@ -14,6 +14,11 @@ var defaults = {
   titleMarginRight: '8px',
   borderPadding: '0 24px',
   collBorder: '1px solid #eee',
+
+  get borderRadius() {
+    return theme.largeBorderRadius;
+  },
+
   item: {
     borderBottom: '1px solid #e5e5e5',
     titleHeight: '40px',
@@ -27,7 +32,7 @@ setDefault(function () {
   }).collapse;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", theme.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
 export function makeItemStyles() {
   var collapseItem = collapse.item;