@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/alert/style/index.less

@@ -1,9 +1,8 @@
 @import '../../style/themes/index';
 @import './mixin.less';
+@import './token.less';
+
 @alert-prefix-cls: ~'@{kd-prefix}-alert';
-@icon-side-length: 16px;
-@font-size: 12px;
-@line-height: 18px;
 
 @success: success;
 @warning: warning;
@@ -11,18 +10,20 @@
 @info: info;
 
 .alert-bg-type-set() {
-  @success: @success-alert-bg-color;
-  @warning: @warning-alert-bg-color;
-  @error: @error-alert-bg-color;
-  @info: @info-alert-bg-color;
-};
+  @success: @alert-success-bg-color;
+  @warning: @alert-warning-bg-color;
+  @error: @alert-error-bg-color;
+  @info: @alert-info-bg-color;
+}
 
 .alert-font-type-set() {
-  @success: @success-color;
-  @warning: @warning-color;
-  @error: @error-color;
-  @info: @link-color;
-};
+  @success: @alert-success-font-color;
+  @warning: @alert-warning-font-color;
+  @error: @alert-error-font-color;
+  @info: @alert-info-font-color;
+}
+
+@alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);
 
 .icon-center {
   i {
@@ -32,20 +33,18 @@
 
 .@{alert-prefix-cls} {
   &-container {
+    z-index: @z-index-apex;
     display: none;
-    margin: 8px 0;
-    min-height: 50px;
     width: 100%;
-    // flex-grow: 1;
+    padding: @alert-padding-top @alert-padding-horizontal @alert-padding-bottom;
     align-items: center;
-    z-index: @zIndex-apex;
-     transition: display 3s;
+    transition: display 3s;
   }
   &-banner-container {
     display: flex;
     flex-direction: column;
     position: fixed;
-    z-index: @zIndex-apex;
+    z-index: @z-index-apex;
     width: 100%;
   }
   each(.alert-bg-type-set(), {
@@ -56,47 +55,47 @@
   });
   &-icon {
     display: flex;
-    margin: 0 8px 0 32px;
-    .square(@icon-side-length);
     cursor: default;
     .icon-center();
+    margin-right: @alert-message-icon-margin-right;
+    font-size: @alert-message-icon-font-size;
   }
   &-message {
-    margin-right: 51px;
-    font-size: @font-size;
-    line-height: @line-height;
+    font-size: @alert-message-font-size;
+    line-height: 18px;
     display: flex;
     flex-grow: 1;
     cursor: default;
   }
-  &-without-icon-message {
-    margin-left: 56px;
-  }
   &-leave {
-    transition: min-height @transition-duration @alert-transition-fn, opacity @transition-duration @alert-transition-fn, margin @transition-duration @alert-transition-fn, height @transition-duration @alert-transition-fn, line-height @transition-duration @alert-transition-fn;
+    transition: min-height @duration-promptly @alert-transition-fn, opacity @duration-promptly @alert-transition-fn,
+      margin @duration-promptly @alert-transition-fn, height @duration-promptly @alert-transition-fn,
+      line-height @duration-promptly @alert-transition-fn;
     display: flex;
     min-height: 0;
     margin: 0 !important;
     overflow: hidden;
     opacity: 0;
-    
-    .@{alert-prefix-cls}-icon, .@{alert-prefix-cls}-message, .@{alert-prefix-cls}-close-icon {
+
+    .@{alert-prefix-cls}-icon,
+    .@{alert-prefix-cls}-message,
+    .@{alert-prefix-cls}-close-icon {
       height: 0;
       line-height: 0;
     }
   }
   &-close-icon {
     display: flex;
-    .square(@icon-side-length);
-    color: @secondary-text-color;
+    margin-left: @alert-close-icon-margin-left;
+    color: @alert-close-icon-color;
+    font-size: @alert-close-icon-font-size;
     justify-self: flex-end;
-    margin-right: 15px;
     cursor: pointer;
     &:hover {
-      color: @theme-color-hover;
+      color: @alert-close-icon-color-hover;
     }
     &:active {
-      color: @theme-color-click;
+      color: @color-theme-click;
     }
     .icon-center();
   }
@@ -105,7 +104,7 @@
   }
   &-banner {
     position: fixed;
-    animation: moveIn @transition-duration @alert-transition-fn both;
+    animation: moveIn @duration-promptly @alert-transition-fn both;
   }
 }
 @keyframes moveIn {
@@ -115,4 +114,4 @@
   to {
     transform: translateY(0);
   }
-}
+}

package/lib/alert/style/token.less

@@ -0,0 +1,29 @@
+@import '../../style/themes/token.less';
+
+@alert-custom-prefix: ~'--@{kd-prefix}-c-alert';
+
+// color
+@alert-success-bg-color: var(~'@{alert-custom-prefix}-color-background-success', @color-background-success); // 反馈浮层成功提示的背景色
+@alert-warning-bg-color: var(~'@{alert-custom-prefix}-color-background-warning', @color-background-warning); // 反馈浮层警告提示的背景色 
+@alert-error-bg-color: var(~'@{alert-custom-prefix}-color-background-error', @color-background-error); // 反馈浮层错误提示的背景色
+@alert-info-bg-color: var(~'@{alert-custom-prefix}-color-background-info', @color-background-ongoing); // 反馈浮层一般提示的背景色
+
+@alert-success-font-color: var(~'@{alert-custom-prefix}-color-text-success', @color-success); // 反馈浮层成功提示的文字色
+@alert-warning-font-color: var(~'@{alert-custom-prefix}-color-text-warning', @color-warning); // 反馈浮层警告提示的文字色 
+@alert-error-font-color: var(~'@{alert-custom-prefix}-color-text-error', @color-error); // 反馈浮层错误提示的文字色
+@alert-info-font-color: var(~'@{alert-custom-prefix}-color-text-info', @color-ongoing); // 反馈浮层一般提示的文字色
+
+@alert-close-icon-color: var(~'@{alert-custom-prefix}-close-icon-color-text', @color-text-secondary); 
+@alert-close-icon-color-hover: var(~'@{alert-custom-prefix}-close-icon-color-text-hover', @color-theme-hover); 
+
+// font
+@alert-message-font-size: var(~'@{alert-custom-prefix}-message-font-size', @font-size-small);
+@alert-message-icon-font-size: var(~'@{alert-custom-prefix}-message-icon-font-size', @font-size-middle);
+@alert-close-icon-font-size: var(~'@{alert-custom-prefix}-close-icon-font-size', @font-size-middle);
+
+// spacing
+@alert-padding-top: var(~'@{alert-custom-prefix}-sizing-padding-top', 8px);
+@alert-padding-bottom: var(~'@{alert-custom-prefix}-sizing-padding-bottom', 12px);
+@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 12px);
+@alert-message-icon-margin-right: var(~'@{alert-custom-prefix}-message-icon-sizing-margin-right', 8px);
+@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);

package/lib/anchor/style/index.css

@@ -92,16 +92,25 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-anchor {
   position: relative;
-  padding-left: 8px;
+  padding-left: var(--kd-c-anchor-spacing-horizontal, 7px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .kd-anchor-wrapper {
   overflow: auto;
-  font-size: 12px;
-  width: 120px;
+  font-size: var(--kd-c-anchor-font-size, var(--kd-g-font-size-small, 12px));
+  width: var(--kd-c-anchor-sizing-width, 120px);
 }
 .kd-anchor-menu {
   display: -webkit-box;
@@ -116,15 +125,16 @@
 }
 .kd-anchor-menu-wrapper {
   overflow: auto;
-  font-size: 12px;
+  font-size: var(--kd-c-anchor-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-anchor-menu-left-arrows {
   margin-right: 10px;
-  font-size: 16px;
+  font-size: var(--kd-c-anchor-icon-font-size, 16px);
   color: #666;
+  cursor: pointer;
 }
 .kd-anchor-menu-left-arrows:hover:not(.kd-anchor-menu-left-arrows-disabled) {
-  color: #5582f3;
+  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-anchor-menu-left-arrows-disabled {
   color: #b2b2b2;
@@ -132,11 +142,12 @@
 }
 .kd-anchor-menu-right-arrows {
   margin-left: 10px;
-  font-size: 16px;
+  font-size: var(--kd-c-anchor-icon-font-size, 16px);
   color: #666;
+  cursor: pointer;
 }
 .kd-anchor-menu-right-arrows:hover:not(.kd-anchor-menu-right-arrows-disabled) {
-  color: #5582f3;
+  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-anchor-menu-right-arrows-disabled {
   color: #b2b2b2;
@@ -154,8 +165,8 @@
   display: inline-block;
   white-space: nowrap;
   position: absolute;
-  -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
-  transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
+  -webkit-transition: all var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.42, 0, 1, 1);
+  transition: all var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.42, 0, 1, 1);
   left: 0;
   top: 0;
 }
@@ -178,27 +189,28 @@
   content: '';
   height: 0;
   width: 40px;
-  border-bottom: 1px dashed #ccc;
+  border-bottom: var(--kd-c-anchor-ink-line-spacing-width, 1px) dashed var(--kd-c-anchor-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
   margin: 4px;
 }
 .kd-anchor-advanced-arrows {
-  color: #666;
-  font-size: 16px;
+  color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
+  font-size: var(--kd-c-anchor-icon-font-size, 16px);
+  cursor: pointer;
 }
 .kd-anchor-advanced-arrows:hover {
-  color: #5582f3;
+  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-anchor-advanced {
-  padding-top: 8px;
-  padding-bottom: 7px;
+  padding-top: var(--kd-c-anchor-advanced-spacing-padding-top, 8px);
+  padding-bottom: var(--kd-c-anchor-advanced-spacing-padding-bottom, 7px);
   position: relative;
   -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
           box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
-  background: #fff;
+  background: var(--kd-c-anchor-color-background, var(--kd-g-color-background, #fff));
   z-index: 1050;
 }
 .kd-anchor-advanced .kd-anchor-wrapper {
-  width: 160px;
+  width: var(--kd-c-anchor-advanced-sizing-width, 160px);
 }
 .kd-anchor-advanced-lock {
   display: -webkit-box;
@@ -208,25 +220,26 @@
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 0 8px 8px 0;
-  font-size: 16px;
-  color: #666;
+  font-size: var(--kd-c-anchor-advanced-lock-font-size, 16px);
+  color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
+  cursor: pointer;
 }
 .kd-anchor-advanced .kd-anchor {
-  max-width: 160px;
+  max-width: var(--kd-c-anchor-advanced-sizing-width, 160px);
 }
 .kd-anchor-ink {
   position: absolute;
-  left: 8px;
+  left: var(--kd-c-anchor-spacing-horizontal, 7px);
   top: 0;
   height: 100%;
 }
 .kd-anchor-ink::before {
   position: relative;
   display: block;
-  width: 1px;
+  width: var(--kd-c-anchor-ink-line-spacing-width, 1px);
   height: 100%;
   margin: 0 auto;
-  background-color: #d9d9d9;
+  background-color: var(--kd-c-anchor-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   content: '';
 }
 .kd-anchor-ink-line {
@@ -234,7 +247,7 @@
   display: none;
   width: 0;
   height: 16px;
-  border-right: 1px solid #5582f3;
+  border-right: var(--kd-c-anchor-ink-line-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transition: top 0.3s ease-in-out;
   transition: top 0.3s ease-in-out;
 }
@@ -242,37 +255,38 @@
   display: inline-block;
 }
 .kd-anchor-link {
-  padding: 7px 8px 7px 8px;
+  padding: var(--kd-c-anchor-spacing-padding, 7px 8px);
 }
 .kd-anchor-link-title {
   text-decoration: none;
-  color: #212121;
-  margin-bottom: 7px;
+  color: var(--kd-c-anchor-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  margin-bottom: var(--kd-c-anchor-spacing-vertical, 7px);
   display: block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   line-height: 1.5;
+  cursor: pointer;
 }
 .kd-anchor-link-title:only-child {
   margin-bottom: 0;
 }
 .kd-anchor-link-title-secondary {
-  color: #666;
+  color: var(--kd-c-anchor-color-text-secondary, var(--kd-g-color-text-secondary, #666));
   padding-left: 4px;
 }
 .kd-anchor-link-title:hover {
-  color: #5582f3;
+  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-anchor-link-active > .kd-anchor-link-title {
-  color: #5582f3;
+  color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-anchor-lock {
-  font-size: 16px;
+  font-size: var(--kd-c-anchor-icon-font-size, 16px);
 }
 .kd-anchor.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);
+  -webkit-transition: all calc(var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }

package/lib/anchor/style/index.less

@@ -2,8 +2,6 @@
 @import './mixin.less';
 @anchor-prefix-cls: ~'@{kd-prefix}-anchor';
 
-@anchor-border-width: 1px;
-
 .@{anchor-prefix-cls} {
   position: relative;
   padding-left: @anchor-link-left;
@@ -11,7 +9,7 @@
 
   &-wrapper {
     overflow: auto;
-    font-size: @small-font-size;
+    font-size: @anchor-font-size;
     width: @anchor-width;
   }
 
@@ -23,15 +21,16 @@
 
     &-wrapper {
       overflow: auto;
-      font-size: @small-font-size;
+      font-size: @anchor-font-size;
     }
 
     &-left-arrows {
       margin-right: 10px;
       font-size: @anchor-icon-font-size;
       color: #666;
+      cursor: pointer;
       &:hover:not(&-disabled) {
-        color: @theme-color;
+        color: @anchor-color-theme;
       }
       .disabled;
     }
@@ -40,8 +39,9 @@
       margin-left: 10px;
       font-size: @anchor-icon-font-size;
       color: #666;
+      cursor: pointer;
       &:hover:not(&-disabled) {
-        color: @theme-color;
+        color: @anchor-color-theme;
       }
       .disabled;
     }
@@ -58,7 +58,7 @@
       display: inline-block;
       white-space: nowrap;
       position: absolute;
-      transition: all @transition-duration @tab-transition-fn;
+      transition: all @anchor-transition-duration cubic-bezier(0.42, 0, 1, 1);
       left: 0;
       top: 0;
     }
@@ -83,7 +83,7 @@
       content: '';
       height: 0;
       width: 40px;
-      border-bottom: 1px dashed @disabled-border-color;
+      border-bottom: @anchor-ink-line-width dashed @anchor-disabled-border-color;
       margin: 4px;
     }
   }
@@ -91,8 +91,9 @@
   &-advanced-arrows {
     color: @anchor-advanced-arrows-color;
     font-size: @anchor-icon-font-size;
+    cursor: pointer;
     &:hover {
-      color: @theme-color;
+      color: @anchor-color-theme;
     }
   }
 
@@ -114,6 +115,7 @@
       padding: 0 8px 8px 0;
       font-size: @anchor-advanced-lock-size;
       color: @anchor-advanced-arrows-color;
+      cursor: pointer;
     }
 
     .@{anchor-prefix-cls} {
@@ -129,7 +131,7 @@
     &::before {
       position: relative;
       display: block;
-      width: @anchor-border-width;
+      width: @anchor-ink-line-width;
       height: 100%;
       margin: 0 auto;
       background-color: @anchor-border-color;
@@ -141,7 +143,7 @@
       display: none;
       width: 0;
       height: 16px;
-      border-right: 1px solid @theme-color;
+      border-right: @anchor-ink-line-width solid @anchor-color-theme;
       transition: top 0.3s ease-in-out;
       &.visible {
         display: inline-block;
@@ -154,28 +156,29 @@
 
     &-title {
       text-decoration: none;
-      color: @primary-text-color;
+      color: @anchor-primary-text-color;
       margin-bottom: @anchor-link-top;
       display: block;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       line-height: 1.5;
+      cursor: pointer;
       &:only-child {
         margin-bottom: 0;
       }
       &-secondary {
-        color: @secondary-text-color;
+        color: @anchor-secondary-text-color;
         padding-left: 4px;
       }
     }
 
     &-title:hover {
-      color: @theme-color;
+      color: @anchor-color-theme;
     }
 
     &-active > &-title {
-      color: @theme-color;
+      color: @anchor-color-theme;
     }
   }
 
@@ -186,6 +189,6 @@
   &.hidden {
     opacity: 0;
     visibility: hidden;
-    transition: all calc(@transition-duration - 0.1s) @ease;
+    transition: all calc(@anchor-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
   }
 }

package/lib/anchor/style/mixin.less

@@ -1,3 +1,4 @@
+@import './token.less';
 
 .disabled() {
   &-disabled {

package/lib/anchor/style/token.less

@@ -0,0 +1,33 @@
+@import '../../style/themes/token.less';
+
+@anchor-prefix: '--@{kd-prefix}-c-anchor';
+
+// color
+@anchor-bg: var(~'@{anchor-prefix}-color-background', @color-background);
+@anchor-border-color: var(~'@{anchor-prefix}-color-border', @color-border-strong);
+@anchor-advanced-arrows-color: var(~'@{anchor-prefix}-advanced-arrows-color-text', #666);
+@anchor-color-theme: var(~'@{anchor-prefix}-color-theme', @color-theme);
+@anchor-disabled-border-color: var(~'@{anchor-prefix}-color-border-disabled', @color-border-disabled);
+@anchor-primary-text-color: var(~'@{anchor-prefix}-color-text-primary', @color-text-primary);
+@anchor-secondary-text-color: var(~'@{anchor-prefix}-color-text-secondary', @color-text-secondary);
+
+// sizing
+@anchor-width: var(~'@{anchor-prefix}-sizing-width', 120px);
+@anchor-advanced-width: var(~'@{anchor-prefix}-advanced-sizing-width', 160px);
+
+// spacing
+@anchor-link-top: var(~'@{anchor-prefix}-spacing-vertical', 7px);
+@anchor-link-left: var(~'@{anchor-prefix}-spacing-horizontal', 7px);
+@anchor-link-padding: var(~'@{anchor-prefix}-spacing-padding', 7px 8px);
+@anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
+@anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
+@anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
+
+
+// font
+@anchor-advanced-lock-size: var(~'@{anchor-prefix}-advanced-lock-font-size', 16px);
+@anchor-font-size: var(~'@{anchor-prefix}-font-size', @font-size-small);
+@anchor-icon-font-size: var(~'@{anchor-prefix}-icon-font-size', 16px);
+
+// motion
+@anchor-transition-duration: var(~'@{anchor-prefix}-duration-duration', @duration-promptly);

package/lib/avatar/style/index.css

@@ -99,10 +99,10 @@
   white-space: nowrap;
   text-align: center;
   vertical-align: middle;
-  background: #ccc;
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
+  background: var(--kd-c-avatar-color-background, #B2B2B2);
+  width: var(--kd-c-avatar-size-base, 40px);
+  height: var(--kd-c-avatar-size-base, 40px);
+  line-height: var(--kd-c-avatar-size-base, 40px);
   border-radius: 50%;
 }
 .kd-avatar-image {
@@ -121,15 +121,15 @@
           transform-origin: 0 center;
 }
 .kd-avatar.kd-avatar-icon {
-  font-size: 22px;
+  font-size: var(--kd-c-avatar-font-size-base, 22px);
 }
 .kd-avatar.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-lg {
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
+  width: var(--kd-c-avatar-size-large, 60px);
+  height: var(--kd-c-avatar-size-large, 60px);
+  line-height: var(--kd-c-avatar-size-large, 60px);
   border-radius: 50%;
 }
 .kd-avatar-lg-string {
@@ -139,15 +139,15 @@
           transform-origin: 0 center;
 }
 .kd-avatar-lg.kd-avatar-icon {
-  font-size: 36px;
+  font-size: var(--kd-c-avatar-font-size-large, 36px);
 }
 .kd-avatar-lg.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-sm {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+  width: var(--kd-c-avatar-size-small, 32px);
+  height: var(--kd-c-avatar-size-small, 32px);
+  line-height: var(--kd-c-avatar-size-small, 32px);
   border-radius: 50%;
 }
 .kd-avatar-sm-string {
@@ -157,15 +157,15 @@
           transform-origin: 0 center;
 }
 .kd-avatar-sm.kd-avatar-icon {
-  font-size: 18px;
+  font-size: var(--kd-c-avatar-font-size-small, 18px);
 }
 .kd-avatar-sm.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-xs {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
+  width: var(--kd-c-avatar-size-x-small, 24px);
+  height: var(--kd-c-avatar-size-x-small, 24px);
+  line-height: var(--kd-c-avatar-size-x-small, 24px);
   border-radius: 50%;
 }
 .kd-avatar-xs-string {
@@ -175,13 +175,13 @@
           transform-origin: 0 center;
 }
 .kd-avatar-xs.kd-avatar-icon {
-  font-size: 14px;
+  font-size: var(--kd-c-avatar-font-size-x-small, 14px);
 }
 .kd-avatar-xs.kd-avatar-icon > .kdicon {
   vertical-align: unset !important;
 }
 .kd-avatar-square {
-  border-radius: 2px;
+  border-radius: var(--kd-c-avatar-border-radius, 2px);
 }
 .kd-avatar > img {
   display: block;