@king-design/intact 2.0.0-beta.0 → 2.0.1

package/README.md

@@ -1,18 +1,18 @@
 <div align="center">
 
-<a href="https://ksc-fe.github.io/kpc/" rel="nofollow">
-    <img src="/site/src/imgs/logo.png" alt="LOGO" width="150">
+<a href="https://design.ksyun.com" rel="nofollow">
+    <img src="/site/src/imgs/header_logo_x2.png" alt="LOGO" />
 </a>
 
 <p></p>
 
 [![Build Status](https://github.com/ksc-fe/kpc/workflows/Node.js%20CI/badge.svg?branch=master)](https://github.com/ksc-fe/kpc/actions?query=workflow%3A%22Node.js+CI%22)
 [![Codecov](https://codecov.io/gh/ksc-fe/kpc/branch/master/graphs/badge.svg)](https://codecov.io/gh/ksc-fe/kpc/branch/master)
-[![gzip size: js](http://img.badgesize.io/https://cdn.jsdelivr.net/npm/kpc/dist/kpc.min.js?compression=gzip&label=gzip%20size:%20js)](https://cdn.jsdelivr.net/npm/kpc/dist/)
-[![gzip size: css](http://img.badgesize.io/https://cdn.jsdelivr.net/npm/kpc/dist/kpc.css?compression=gzip&label=gzip%20size:%20css)](https://cdn.jsdelivr.net/npm/kpc/dist/)
+[![npm](https://img.shields.io/npm/v/@king-design/vue.svg)](https://www.npmjs.com/package/@king-design/vue)
 
-[![npm](https://img.shields.io/npm/dm/kpc.svg)](https://www.npmjs.com/package/kpc)
-[![npm](https://img.shields.io/npm/v/kpc.svg)](https://www.npmjs.com/package/kpc)
+[![npm](https://img.shields.io/npm/dm/@king-design/react.svg?label=react%20download)](https://www.npmjs.com/package/@king-design/react)
+[![npm](https://img.shields.io/npm/dm/@king-design/vue.svg?label=vue3%20download)](https://www.npmjs.com/package/@king-design/vue)
+[![npm](https://img.shields.io/npm/dm/@king-design/vue-legacy.svg?label=vue2%20download)](https://www.npmjs.com/package/@king-design/vue-legacy)
 
 </div>
 
@@ -20,11 +20,11 @@ English | [简体中文](./README-zh_CN.md)
 
 ## Features 
 
-* Support multiple frameworks: [Intact][1] / [Vue][2] / [React][3] / [Angular][4].
-* Complete custom theme system.
-* 360° locate popup layer.
+* Support multiple frameworks: [Intact][1] / [Vue][2] / [React][3].
+* Support TypeScript.
+* Change theme on runtime. 
 * Declarative form validation.
-* Excellent [documents](https://ksc-fe.github.io/kpc/) and design
+* Excellent [documents](https://design.ksyun.com) and design
 * 90% coverage unit tests.
 
 ## Browsers Support
@@ -38,7 +38,11 @@ English | [简体中文](./README-zh_CN.md)
 ### Installation
 
 ```shell
-npm install kpc-vue --save
+# Vue3
+npm install @king-design/vue --save
+
+# Vue2
+npm install @king-desing/vue-legacy --save
 ```
 
 ### Usage 
@@ -48,7 +52,7 @@ npm install kpc-vue --save
     <Button>Hello</Button>
 </template>
 <script>
-import {Button} from 'kpc-vue';
+import {Button} from '@king-design/vue';
 
 export default {
     components: {
@@ -63,114 +67,16 @@ export default {
 ### Installation 
 
 ```shell
-npm install kpc-react --save
+npm install @king-design/react--save
 ```
 
 ### Usage 
 
 ```jsx
-import React from 'react';
-import {Button} from 'kpc-react';
-
-class App extends React.Component {
-    render() {
-        return <Button>Hello</Button>
-    }
-}
-```
-
-## Intact
-
-### Installation 
-
-```shell
-npm install kpc --save
-```
-
-### Usage 
-
-```js
-import {Button} from 'kpc';
-
-<Button>Hello</Button>
-```
-
-## Angular
-
-Read [more][5]
+import {Button} from '@king-design/react';
 
-### Installation 
-
-```shell
-npm install kpc-angular -S
-```
-
-### Configure `webpack.config.js`
-
-You need use `@angular-builders/custom-webapck` to configure webpack, if your project initialized by Angular CLI.
-
-```js
-const path = require('path');
-
-module.exports = function(config) {
-  config.module.rules.find(rule => {
-    if (rule.test.toString() === '/\\.css$/') {
-      rule.exclude.push(path.resolve(__dirname, 'node_modules/kpc-angular'));
-      return true;
-    }
-  });
-
-  return config;
-};
-```
-
-### Usage 
-
-`src/app/app.module.ts`
-
-```ts
-import { KpcBrowserModule, KpcModule } from 'kpc-angular';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    KpcBrowserModule,
-    AppRoutingModule,
-    KpcModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule { }
-```
-
-```ts
-import { Component, ViewEncapsulation } from '@angular/core';
-import { MessageComponent } from 'kpc-angular';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <k-button type="primary" (click)="onClick()">Hello World</k-button>
-  `,
-  style: `
-    .k-button {
-      margin: 10px;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-})
-export class AppComponent {
-  onClick() {
-    MessageComponent.success('Welcome to kpc world!');
-  }
+function App() {
+    return <Button>Hello</Button>
 }
 ```
 
@@ -187,10 +93,6 @@ Welcome to join us by QQ. Group Number: 529739732
 
 * [KPC Document](https://design.ksyun.com)
 * [Intact MVVM Framework][1]
-* [Vdt Template Engine](http://javey.github.io/vdt.js/)
-* [Intact-Vue Compatibility Layer](https://github.com/Javey/intact-vue)
-* [Intact-React Compatibility Layer](https://github.com/ksc-fe/intact-react)
-* [Intact-Angular Compatibility Layer](https://github.com/ksc-fe/intact-angular)
 
 ## Develop 
 

package/components/affix/demos/basic.md

@@ -3,7 +3,8 @@ title: 基础用法
 order: 0
 ---
 
-通过`top`可以指定元素固定在顶部的位置，通过`bottom`可以指定元素固定在底部的位置，都不指定时，默认固定在最顶部
+通过`top`可以指定元素固定在顶部的位置，通过`bottom`可以指定元素固定在底部的位置，都不指定时，
+默认固定在最顶部，即`top = 0`
 
 > 可以通过缩放浏览器查看效果
 

package/components/affix/demos/custom.md

@@ -6,17 +6,17 @@ order: 1
 通过`shouldFix`可以自定义元素固定的规则，此时设置的`top` `bottom`属性，仅仅用来设置固定的位置，并不用于固定
 规则的判断，当`shouldFix`返回`true`时，元素就会固定，否则不固定。本例中：只要滚动超过`100px`就会固定
 
-通过`exclude`可以在内部判断元素应该固定时，排除某些情况，让它不固定。本例中：当当前示例容器超出视野（viewport）
+通过`exclude`可以在判断元素应该固定时，排除某些情况，让它不固定。本例中：当前示例容器超出视野（viewport）
 之外时，不启用固定
 
 ```vdt
 import {Affix, Button} from 'kpc';
 
 <div ref="node">
-    <Affix top={150} shouldFix={this._shouldFix}>
+    <Affix top={150} shouldFix={this.shouldFix}>
         <Button type="primary">fix at 150px from the top when scroll top 100px</Button>
     </Affix>
-    <Affix bottom={this.get('bottom')} exclude={this._exclude}>
+    <Affix bottom={this.get('bottom')} exclude={this.exclude}>
         <Button type="primary">fix at the bottom only when this demo is in viewport</Button>
     </Affix>
 </div>
@@ -44,14 +44,14 @@ export default class extends Component<Props> {
     }
 
     @bind
-    _shouldFix() {
+    shouldFix() {
         // when scroll top greater than or equal to 100
         // fix it at 150px from top
         return window.pageYOffset >= 100;
     }
 
     @bind
-    _exclude() {
+    exclude() {
         // when this demo is not in the viewport
         // don't fix it
         const {top} = (this.refs.node as HTMLElement).getBoundingClientRect();

package/components/affix/index.md

@@ -9,8 +9,8 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| top | 指定元素固定距离顶部的位置 | `Number` | `undefined` |
-| bottom | 指定元素固定距离底部的位置 | `Number` | `undefined` |
+| top | 指定元素固定距离顶部的位置 | `number` | `undefined` |
+| bottom | 指定元素固定距离底部的位置 | `number` | `undefined` |
 | shouldFix | 自定义元素固定规则 | `Function` | `undefined` |
 | exclude | 排除某些固定的情况 | `Function` | `undefined` |
 

package/components/affix/styles.ts

@@ -7,7 +7,7 @@ const defaults = {
     zIndex: 9
 };
 
-let affix: any;
+let affix: typeof defaults;
 setDefault(() => {
     affix = deepDefaults(theme, {affix: defaults}).affix;
 });

package/components/badge/demos/text.md

@@ -3,7 +3,7 @@ title: 展示文字
 order: 0
 ---
 
-通过`text`属性，展示文案。如果`text`为`Number`类型，还可以指定`max`来规定最大展示数字，
+通过`text`属性，展示文案。如果`text`为`number`类型，还可以指定`max`来规定最大展示数字，
 超过该数字，后面添加加号`+`
 
 ```vdt

package/components/badge/index.md

@@ -9,6 +9,6 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| text | 要展示的文案，不指定该属性，则展示红点 | `String` | `Number` | `undefined` |
-| max | 如果`text`属性`Number`类型，可以通过该属性指定最大数字 | `Number` | `undefined` |
-| disabled | 禁用徽标展示 | `Boolean` | `false` |
+| text | 要展示的文案，不指定该属性，则展示红点 | `string` | `number` | `undefined` |
+| max | 如果`text`属性`number`类型，可以通过该属性指定最大数字 | `number` | `undefined` |
+| disabled | 禁用徽标展示 | `boolean` | `false` |

package/components/badge/styles.ts

@@ -14,7 +14,7 @@ const defaults = {
     textColor: '#fff',
 };
 
-let badge: any;
+let badge: typeof defaults;
 setDefault(() => {
     badge = deepDefaults(theme, {badge: defaults}).badge;
 });

package/components/breadcrumb/demos/basic.md

@@ -3,7 +3,7 @@ title: 基础用法
 order: 0
 ---
 
-通过添加`to`属性，来展示超链接
+通过添加`to`属性，来设置超链接
 
 > `to`属性支持`vue-router`或者`react-router` `push`方法参数用法
 

package/components/breadcrumb/index.md

@@ -11,14 +11,13 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| separator | 指定分隔符 | `String` | `undefined` |
+| separator | 指定分隔符 | `string` | `undefined` |
 
 ## BreadcrumbItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| to | 指定超链接地址 | `String` | `undefined` |
-| separator | 指定分隔符，会覆盖`Breadcrumb`中的定义 | `String` | `">"` |
+| to | 指定超链接地址 | `string` | `object` | `undefined` |
 
 # 扩展点
 
@@ -26,10 +25,4 @@ sidebar: doc
 
 | 名称 | 说明 |
 | --- | --- |
-| separator | 扩展分隔符 |
-
-## BreadcrumbItem
-
-| 名称 | 说明 |
-| --- | --- |
-| separator | 扩展分隔符，优先级高于`Breadcrumb`中的定义 |
+| separator | 指定分隔符 |

package/components/breadcrumb/item.ts

@@ -1,15 +1,14 @@
 import {Component, TypeDefs, VNode} from 'intact';
 import {bind} from '../utils';
 import template from './item.vdt';
-import {isExternalLink} from '../utils';
-import {useRouter} from '../../hooks/useRouter';
+import {useRouter, navigate} from '../../hooks/useRouter';
 
 export interface BreadcrumbItemProps {
-    to?: string,
+    to?: string | object,
 }
 
 const typeDefs: Required<TypeDefs<BreadcrumbItemProps>> = {
-    to: String,
+    to: [String, Object],
 };
 
 export class BreadcrumbItem extends Component<BreadcrumbItemProps> {
@@ -20,15 +19,6 @@ export class BreadcrumbItem extends Component<BreadcrumbItemProps> {
 
     @bind
     private onClick(): void  {
-        const to = this.get('to');
-
-        if (to) {
-            const router = this.router.value;
-            if (router && !isExternalLink(to)) {
-                router.push(to!);
-            } else {
-                window.location.href = to!;
-            }
-        }
+        navigate(this.router.value, this.get('to'));
     }
 }

package/components/breadcrumb/styles.ts

@@ -12,7 +12,7 @@ const defaults = {
     activeColor: `#262626`,
 };
 
-let breadcrumb: any;
+let breadcrumb: typeof defaults;
 setDefault(() => {
     breadcrumb = deepDefaults(theme, {breadcrumb: defaults}).breadcrumb;
 });
@@ -20,8 +20,9 @@ setDefault(() => {
 export default function makeStyles() {
     return css`
         font-size: ${breadcrumb.fontSize};
+        display: flex;
+        align-items: center;
         .k-breadcrumb-item {
-            display: inline-block;
             &:last-of-type .k-breadcrumb-link {
                 font-weight: ${breadcrumb.activeFontWeight};
                 color: ${breadcrumb.activeColor};
@@ -31,9 +32,12 @@ export default function makeStyles() {
         .k-breadcrumb-link a {
             color: ${breadcrumb.color};
         }
-        a.k-breadcrumb-link:hover,
-        .k-breadcrumb-link a:hover {
-            color: ${breadcrumb.hoverColor};
+        a.k-breadcrumb-link,
+        .k-breadcrumb-link a {
+            cursor: pointer;
+            &:hover {
+                color: ${breadcrumb.hoverColor};
+            }
         }
         .k-breadcrumb-separator {
             margin: 0 ${breadcrumb.gap};

package/components/button/demos/group.md

@@ -36,14 +36,14 @@ import {Button, ButtonGroup} from 'kpc';
         <Button type="primary">重启</Button>
     </ButtonGroup>
     <br /><br />
-    <p>radio按钮组</p>
+    <p>单选按钮组</p>
     <ButtonGroup checkType="radio" v-model="city">
         <Button value="beijing">北京</Button>
         <Button value="shanghai" ref="__radioShanghai">上海</Button>
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
-    <p>checkbox按钮组</p>
+    <p>多选按钮组</p>
     <ButtonGroup checkType="checkbox" v-model="cities">
         <Button value="beijing" size="small">北京</Button>
         <Button value="shanghai" size="small" ref="__checkboxShanghai">上海</Button>

package/components/button/demos/icon.md

@@ -13,6 +13,7 @@ import {Button, Icon} from 'kpc';
 <div>
     <Button icon><Icon class="ion-ios-search" /></Button>
     <Button icon circle><Icon class="ion-ios-search" /></Button>
+    <Button icon circle type="none"><Icon class="ion-ios-search" /></Button>
     <Button type="danger" size="large" icon circle><Icon class="ion-ios-search" size="large" /></Button>
     <Button type="primary"><Icon class="ion-ios-search" size="small" />搜索</Button>
     <Button circle type='primary'><Icon class="ion-ios-search" size="small" />搜索</Button>

package/components/button/demos/loading.md

@@ -5,7 +5,7 @@ order: 2
 
 添加`loading`属性，可以将按钮设为加载状态，此时按钮不可点。
 
-> 请给图标元素添加`k-icon`类名，或者使用`Icon`组件，用于定位图标元素，
+> 请给图标元素添加`icon`类名，或者使用`Icon`组件，用于定位图标元素，
 > 以便按钮变为`loading`状态时能够将它替换为loading图标
 
 ```vdt

package/components/button/demos/tagName.md

@@ -4,7 +4,6 @@ order: 5
 ---
 
 `Button`默认渲染成`button`元素，通过`tagName`，我们可以渲染成任意元素或组件。
-此时，我们可以通过`tagProps`属性，给指定的`tagName`传递与`Button`属性名相冲突的属性。
 
 > 当给`Button`指定`href`属性时，则它会强制渲染成`a`标签
 

package/components/button/index.md

@@ -11,27 +11,27 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"default"` |
+| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"`| `"default"` |
 | size | 按钮尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
-| icon | 是否为图标按钮（宽高相等）| `Boolean` | `false` |
-| circle | 是否为圆角按钮 | `Boolean` | `false` |
-| loading | 是否为正在加载中的按钮 | `Boolean` | `false` |
-| disabled | 是否禁用状态 | `Boolean` | `false` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| htmlType | 按钮`<button>`元素的`type` | `String` | `"button"` |
-| tagName | 按钮渲染后的实际html元素，例如我们可以传入`"a"`来渲染成超链接 | `String` | `button` |
-| tagProps | 当指定`tagName`时，该属性将传给`tagName`指定的元素 | `Object` | `undefind` |
-| value | 对于`radio`类型的按钮组，我们可以给每个按钮指定一个选中时的值 | `*` | `undefined` |
-| name | 对于`radio`类型的按钮组，我们给`radio`指定`name`属性 | `String` | `undefined` |
-| ghost | 展示透明背景的按钮 | `Boolean` | `false` |
+| icon | 是否为图标按钮（宽高相等）| `boolean` | `false` |
+| circle | 是否为圆角按钮 | `boolean` | `false` |
+| loading | 是否为正在加载中的按钮 | `boolean` | `false` |
+| disabled | 是否禁用状态 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| htmlType | 按钮`<button>`元素的`type` | `string` | `"button"` |
+| tagName | 按钮渲染后的实际html元素，例如我们可以传入`"a"`来渲染成超链接 | `string` | `button` |
+| value | 对于`radio/checkbox`类型的按钮组，我们可以给每个按钮指定一个选中时的值 | `*` | `undefined` |
+| name | 对于`radio/checkbox`类型的按钮组，我们给`input`指定`name`属性 | `string` | `undefined` |
+| ghost | 展示透明背景的按钮 | `boolean` | `false` |
 
 ## ButtonGroup
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| vertical | 是否垂直排列按钮组 | `Boolean` | `false` |
+| vertical | 是否垂直排列按钮组 | `boolean` | `false` |
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` &#124; `"checkbox"` &#124; `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
+| fluid | 是否宽度100% | `boolean` | `false` |
 
 # 方法
 

package/components/button/index.vdt

@@ -2,6 +2,8 @@ import {getRestProps} from '../utils';
 import {Icon} from '../icon';
 import {makeButtonStyles} from './styles';
 import {DynamicButton} from './dynamicButton';
+import {Wave} from '../wave';
+import {button as theme} from './styles';
 
 let {
     type, className, size, icon, circle, ref, key, tabindex,
@@ -61,28 +63,35 @@ const loadingIcon = (
 const buttonGroup = this.buttonGroup;
 const checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
 const isCheckType = checkType !== 'none';
+const typeStyles = theme[type];
+const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
 
-<DynamicButton 
-    class={classNameObj}
-    tagName={tagName}
-    {...getRestProps(this)}
-    ref={this.elementRef}
-    tabindex={disabled || loading ? '-1' : tabindex}
-    ev-click={this.onClick}
-    ev-mouseup={this.onMouseUp}
-    htmlType={htmlType}
-    name={isCheckType ? null : name}
+<Wave disabled={loading || disabled || type === 'none' || type === 'link'}
+    inset="-2px"
+    color={waveColor}
 >
-    {loading ? 
-        iconSide === 'right' ?
-            [children, loadingIcon] :
-            [loadingIcon, children] :
-        children 
-    }
-    <input type={checkType} v-if={isCheckType}
-        class="k-button-input"
-        name={name} 
-        checked={checked}
-        tabindex="-1"
-    />
-</DynamicButton>
+    <DynamicButton 
+        class={classNameObj}
+        tagName={tagName}
+        {...getRestProps(this)}
+        ref={this.elementRef}
+        tabindex={disabled || loading ? '-1' : tabindex}
+        ev-click={this.onClick}
+        ev-mouseup={this.onMouseUp}
+        htmlType={htmlType}
+        name={isCheckType ? null : name}
+    >
+        {loading ? 
+            iconSide === 'right' ?
+                [children, loadingIcon] :
+                [loadingIcon, children] :
+            children 
+        }
+        <input type={checkType} v-if={isCheckType}
+            class="k-button-input"
+            name={name} 
+            checked={checked}
+            tabindex="-1"
+        />
+    </DynamicButton>
+</Wave>

package/components/button/styles.ts

@@ -1,6 +1,6 @@
 import {css, cx} from '@emotion/css';
 import { ButtonProps, Button } from './index';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft, darken}  from '../../styles/utils';
 import '../../styles/global';
 
@@ -11,17 +11,17 @@ type Types = ValueOf<typeof types>
 type Sizes = ValueOf<typeof sizes>
 
 type TypeStyles = {
-    color: ThemeValue<string>
-    bgColor: ThemeValue<string>
-    borderColor: ThemeValue<string>
-    hoverBorderColor: ThemeValue<string>
-    ghostColor: ThemeValue<string>
+    color: string
+    bgColor: string
+    borderColor: string
+    hoverBorderColor: string
+    ghostColor: string
 }
 
 type SizeStyles = {
-    fontSize: ThemeValue<string>
-    height: ThemeValue<string>
-    padding: ThemeValue<string>
+    fontSize: string
+    height: string
+    padding: string
 }
 
 export const types = ['primary', 'warning', 'danger', 'active', 'success'] as const;
@@ -103,6 +103,7 @@ const btnSizeStyles = sizes.reduce((memo, size) => {
 
 const defaults = deepDefaults(
     {
+        get transition() { return theme.transition.middle },
         active: btnActiveStyles,
         secondary: {
             get color() { return theme.color.primary },
@@ -113,6 +114,11 @@ const defaults = deepDefaults(
         link: {
             get color() { return theme.color.link },
             get hoverColor() { return theme.color.linkHover },
+            get hoverBgColor() { return theme.color.hoverBg },
+        },
+
+        none: {
+            get hoverBgColor() { return theme.color.bg },
         },
 
         // ButtonGroup
@@ -136,7 +142,7 @@ const defaults = deepDefaults(
     btnSizeStyles,
 );
 
-let button: any;
+let button: typeof defaults;
 setDefault(() => {
     button = deepDefaults(theme, {button: defaults}).button;
 });
@@ -163,7 +169,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             border: 1px solid ${button.borderColor};
             font-size: ${button.fontSize};
             white-space: nowrap;
-            transition: all ${theme.transition};
+            transition: all ${button.transition};
             line-height: ${button.lineHeight};
             &:hover,
             &:focus {
@@ -221,6 +227,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 color: ${link.color};
                 &:hover {
                     color: ${link.hoverColor};
+                    background: ${link.hoverBgColor};
                 }
             }
 
@@ -236,14 +243,17 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
 
             &.k-none,
             &.k-link {
+                background: transparent;
                 &, &:hover {
                     border: none;
-                    background: transparent;
                 }
                 &.k-active {
                     color: ${theme.color.primary};
                 }
             }
+            &.k-none:hover {
+                background: ${button.none.hoverBgColor};
+            }
 
             ${sizes.map(size => {
                 const styles = button[size];