@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/transfer/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -117,7 +126,7 @@
   margin-right: 6px;
 }
 .kd-transfer-disabled .kd-transfer-list {
-  background: #f5f5f5;
+  background: var(--kd-c-transfer-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
 .kd-transfer-list {
   display: -webkit-box;
@@ -129,14 +138,14 @@
           flex-direction: column;
   width: 250px;
   min-height: 300px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-transfer-list-with-pagination {
   width: 250px;
   height: auto;
 }
 .kd-transfer-list-header {
-  height: 36px;
+  height: var(--kd-c-transfer-header-sizing-height, 36px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -152,10 +161,10 @@
           justify-content: space-between;
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  font-size: 12px;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #d9d9d9;
-  padding: 0 14px;
+  font-size: var(--kd-c-transfer-font-size, 12px);
+  background-color: var(--kd-c-transfer-header-color-background, #f5f5f5);
+  border-bottom: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  padding: 0 var(--kd-c-transfer-spacing-horizontal, 14px);
 }
 .kd-transfer-list-header-left {
   display: -webkit-box;
@@ -182,20 +191,20 @@
           align-items: center;
 }
 .kd-transfer-list-search {
-  height: 32px;
+  height: var(--kd-c-transfer-search-sizing-height, 32px);
   position: relative;
 }
 .kd-transfer-list-search-prefix i {
-  color: #5582f3;
+  color: var(--kd-c-transfer-search-icon-color-text-prefix, #999);
 }
 .kd-transfer-list-search-suffix {
   cursor: pointer;
 }
 .kd-transfer-list-search-suffix i {
-  color: #bbb;
+  color: var(--kd-c-transfer-search-icon-color-text-suffix, #bbb);
 }
 .kd-transfer-list-search-suffix i:hover {
-  color: #999;
+  color: var(--kd-c-transfer-search-icon-color-text-suffix-hover, #999);
 }
 .kd-transfer-list-body {
   display: -webkit-box;
@@ -209,7 +218,7 @@
       -ms-flex-direction: column;
           flex-direction: column;
   overflow: hidden;
-  font-size: 12px;
+  font-size: var(--kd-c-transfer-font-size, 12px);
 }
 .kd-transfer-list-body-search-wrapper {
   position: relative;
@@ -220,7 +229,7 @@
   margin: 8px 0;
 }
 .kd-transfer-list-content {
-  height: 320px;
+  height: var(--kd-c-transfer-list-item-content-sizing-height, 320px);
   -webkit-box-flex: 1;
       -ms-flex: auto;
           flex: auto;
@@ -231,7 +240,7 @@
   padding-bottom: 8px;
 }
 .kd-transfer-list-content-item {
-  height: 32px;
+  height: var(--kd-c-transfer-list-item-sizing-height, 32px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -241,20 +250,20 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  padding: 0 14px;
+  padding: 0 var(--kd-c-transfer-spacing-horizontal, 14px);
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
 }
 .kd-transfer-list-content-item-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-transfer-list-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-transfer-list-content-item:hover:not(.kd-transfer-list-content-item-disabled) {
-  background: #f5f5f5;
+  background: var(--kd-c-transfer-list-item-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-transfer-list-content-item-checked {
-  color: #5582f3;
+  color: var(--kd-c-transfer-list-item-color-text-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-transfer-list-content-item-text {
   -webkit-box-flex: 1;
@@ -268,13 +277,13 @@
   cursor: pointer;
 }
 .kd-transfer-list-content-item-remove i {
-  color: #bbb;
+  color: var(--kd-c-transfer-search-icon-color-text-suffix, #bbb);
 }
 .kd-transfer-list-content-item-remove i:hover {
-  color: #999;
+  color: var(--kd-c-transfer-search-icon-color-text-suffix-hover, #999);
 }
 .kd-transfer-list-pagination {
-  height: 36px;
+  height: var(--kd-c-transfer-pagination-sizing-height, 36px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -284,11 +293,11 @@
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
-  padding: 0 14px;
-  border-top: 1px solid #d9d9d9;
+  padding: 0 var(--kd-c-transfer-spacing-horizontal, 14px);
+  border-top: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-transfer-list-footer {
-  border-top: 1px solid #d9d9d9;
+  border-top: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-transfer-list-body-not-found {
   -webkit-box-flex: 1;
@@ -338,7 +347,11 @@
   padding: 0 10px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  min-width: 40px;
 }
 .kd-transfer-operation .kd-btn + .kd-btn {
   margin-top: 20px;
 }
+.kd-transfer-operation .kd-btn .kd-btn-iconWrapper-left {
+  float: none;
+}

package/lib/transfer/style/index.less

@@ -178,9 +178,13 @@
       height: 28px;
       padding: 0 10px;
       box-sizing: border-box;
+      min-width:40px;
       & + .@{kd-prefix}-btn {
         margin-top: 20px;
       }
+      .@{kd-prefix}-btn-iconWrapper-left {
+        float: none;
+      }
     }
   }
 }

package/lib/transfer/style/mixins.less

@@ -1,3 +1,5 @@
+@import './token.less';
+
 .transfer-horizontal-padding(@size) {
   padding: 0 @size;
 }

package/lib/transfer/style/token.less

@@ -0,0 +1,29 @@
+@import '../../style/themes/token.less';
+
+@transfer-custom-prefix: ~'--@{kd-prefix}-c-transfer';
+
+// color
+@transfer-disabled-bg: var(~'@{transfer-custom-prefix}-color-background-disabled', @color-background-contain-disabled);
+@transfer-border-color: var(~'@{transfer-custom-prefix}-color-border', @color-border-strong);
+@transfer-list-item-hover-bg: var(~'@{transfer-custom-prefix}-list-item-color-background-hover', @color-hover);
+@transfer-header-bg: var(~'@{transfer-custom-prefix}-header-color-background', #f5f5f5);
+
+// font
+@transfer-font-size-base: var(~'@{transfer-custom-prefix}-font-size', 12px);
+
+// sizing
+@transfer-list-item-height: var(~'@{transfer-custom-prefix}-list-item-sizing-height', 32px);
+@transfer-list-content-height: var(~'@{transfer-custom-prefix}-list-item-content-sizing-height', 320px);
+@transfer-header-height: var(~'@{transfer-custom-prefix}-header-sizing-height', 36px);
+@transfer-search-height: var(~'@{transfer-custom-prefix}-search-sizing-height', 32px);
+@transfer-pagination-height: var(~'@{transfer-custom-prefix}-pagination-sizing-height', 36px);
+
+// spacing
+@transfer-padding-base: var(~'@{transfer-custom-prefix}-spacing-horizontal', 14px);
+
+// text
+@transfer-list-item-checked: var(~'@{transfer-custom-prefix}-list-item-color-text-checked', @color-theme);
+@transfer-list-item-disabled: var(~'@{transfer-custom-prefix}-list-item-color-text-disabled', @color-disabled);
+@transfer-search-prefix-icon-color: var(~'@{transfer-custom-prefix}-search-icon-color-text-prefix', #999);
+@transfer-search-suffix-icon-color: var(~'@{transfer-custom-prefix}-search-icon-color-text-suffix', #bbb);
+@transfer-search-suffix-icon-color-hover: var(~'@{transfer-custom-prefix}-search-icon-color-text-suffix-hover', #999);

package/lib/tree/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-tree {
   position: relative;
   overflow: auto;
@@ -102,7 +111,8 @@
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  font-size: 14px;
+  font-size: var(--kd-c-tree-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
 }
 .kd-tree-root {
   min-width: 100%;
@@ -130,7 +140,7 @@
   pointer-events: none;
 }
 .kd-tree-node-item {
-  height: 28px;
+  height: var(--kd-c-tree-node-sizing-height, 32px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -139,11 +149,11 @@
           align-items: center;
 }
 .kd-tree-node-item-hover {
-  -webkit-transition: background-color 0.3s, color 0.3s;
-  transition: background-color 0.3s, color 0.3s;
+  -webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-tree-node-item-hover:hover {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
   cursor: pointer;
 }
 .kd-tree-node-indent {
@@ -157,7 +167,7 @@
   border-right: 10px;
   border-color: white;
   border-style: solid;
-  height: 28px;
+  height: var(--kd-c-tree-node-sizing-height, 32px);
   cursor: default;
   opacity: 0;
 }
@@ -167,8 +177,8 @@
 }
 .kd-tree-node-icon {
   cursor: pointer;
-  height: 22px;
-  width: 22px;
+  height: var(--kd-c-tree-expand-icon-sizing-height, 22px);
+  width: var(--kd-c-tree-expand-icon-sizing-width, 22px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -178,10 +188,12 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  font-size: var(--kd-c-tree-node-icon-font-size, 16px);
+  color: var(--kd-c-tree-node-icon-color-text, #666666);
 }
 .kd-tree-node-icon-hidden {
-  height: 22px;
-  width: 22px;
+  height: var(--kd-c-tree-node-icon-sizing-height, 20px);
+  width: var(--kd-c-tree-node-icon-sizing-width, 20px);
   -ms-flex-negative: 0;
       flex-shrink: 0;
   opacity: 0;
@@ -190,48 +202,36 @@
 .kd-tree-node-animation-expand {
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-tree-node-animation-collapse {
   -webkit-transform: rotate(0deg);
           transform: rotate(0deg);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-tree-node-disabled {
   cursor: not-allowed !important;
-  border-color: #ccc;
+  border-color: var(--kd-c-tree-node-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
 }
 .kd-tree-node-title-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-tree-node-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-tree-node-title {
   white-space: nowrap;
   margin-left: 6px;
 }
 .kd-tree-node-selected {
-  background-color: #5582f3 !important;
-  color: #fff;
-}
-.kd-tree-node-selected .kd-checkbox-default-checked {
-  background-color: #fff;
-}
-.kd-tree-node-selected .kd-checkbox-default-inner {
-  color: #5582f3;
-}
-.kd-tree-node-selected .kd-checkbox-default-indeterminate {
-  background-color: #fff;
-}
-.kd-tree-node-selected .kd-checkbox-default-indeterminate::before {
-  background-color: #5582f3;
+  background-color: var(--kd-c-tree-node-color-backgroung-checked, #E3EBFF) !important;
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme-6, #5582f3));
 }
 .kd-tree-node-selected .kd-tree-node-title {
-  color: #fff;
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme-6, #5582f3));
 }
 .kd-tree-node-draggabled {
   display: -webkit-box;
@@ -254,8 +254,8 @@
   border-top: 1px solid #fc8555;
 }
 .kd-tree-node-leaf-icon {
-  height: 22px;
-  width: 22px;
+  height: var(--kd-c-tree-node-icon-sizing-height, 20px);
+  width: var(--kd-c-tree-node-icon-sizing-width, 20px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

package/lib/tree/style/index.less

@@ -10,6 +10,7 @@
   display: flex;
   flex-grow: 1;
   font-size: @tree-font-size;
+  color: @tree-color-text;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -37,7 +38,7 @@
     align-items: center;
   }
   &-item-hover {
-    transition: background-color @transition-duration, color @transition-duration;
+    transition: background-color @tree-transition-duration, color @tree-transition-duration;
   }
   &-item-hover:hover {
     background-color: @tree-node-hover-bg-color;
@@ -68,6 +69,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: @tree-node-icon-size;
+    color: @tree-node-icon-color-text;
   }
   &-icon-hidden {
     height: @tree-node-icon-height;
@@ -78,11 +81,11 @@
   }
   &-animation-expand {
     transform: rotate(90deg);
-    transition: transform @transition-duration;
+    transition: transform @tree-transition-duration;
   }
   &-animation-collapse {
     transform: rotate(0deg);
-    transition: transform @transition-duration;
+    transition: transform @tree-transition-duration;
   }
   &-disabled {
     cursor: not-allowed !important;
@@ -97,25 +100,10 @@
   }
   &-selected {
     background-color: @tree-node-checked-bg-color !important;
-    color: #fff;
-
-    .@{kd-prefix}-checkbox {
-      &-default-checked {
-        background-color: #fff;
-      }
-      &-default-inner {
-        color: @theme-color;
-      }
-      &-default-indeterminate {
-        background-color: #fff;
-        &::before {
-          background-color: @theme-color;
-        }
-      }
-    }
+    color: @tree-node-checked-text-color;
 
     .@{tree-node-prefix-cls}-title {
-      color: #fff;
+      color: @tree-node-checked-text-color;
     }
   }
 

package/lib/tree/style/mixin.less

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

package/lib/tree/style/token.less

@@ -0,0 +1,27 @@
+@import '../../style/themes/token.less';
+
+@tree-prefix: '--@{kd-prefix}-c-tree';
+
+// color
+@tree-color-text: var(~'@{tree-prefix}-color-text', @color-text-primary);
+@tree-node-disabled-color: var(~'@{tree-prefix}-node-color-disabled', @color-disabled);
+@tree-node-disabled-border-color: var(~'@{tree-prefix}-node-color-border-disabled', @color-border-disabled);
+@tree-color-theme: var(~'@{tree-prefix}-color-theme', @color-theme);
+@tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', #E3EBFF);
+@tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme-6);
+@tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
+@tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
+
+// sizing
+@tree-node-height: var(~'@{tree-prefix}-node-sizing-height', 32px);
+@tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);
+@tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 22px);
+@tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 20px);
+@tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 20px);
+
+// font
+@tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);
+@tree-node-icon-size: var(~'@{tree-prefix}-node-icon-font-size', 16px);
+
+// motion
+@tree-transition-duration: var(~'@{tree-prefix}-motion-duration', @duration-promptly);

package/lib/typography/style/index.css

@@ -92,26 +92,35 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-typography {
-  color: #212121;
+  color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
   overflow-wrap: break-word;
   line-height: 2;
-  max-width: 830px;
+  max-width: var(--kd-c-typography-sizing-width-max, 830px);
 }
 .kd-typography.kd-typography-second {
-  color: #666;
+  color: var(--kd-c-typography-color-text-secondary, var(--kd-g-color-text-secondary, #666));
 }
 .kd-typography.kd-typography-success {
-  color: #1ba854;
+  color: var(--kd-c-typography-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-typography.kd-typography-warning {
-  color: #ff991c;
+  color: var(--kd-c-typography-color-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-typography.kd-typography-danger {
-  color: #fb2323;
+  color: var(--kd-c-typography-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-typography.kd-typography-disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-typography-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -119,86 +128,70 @@
           user-select: none;
 }
 .kd-typography.kd-typography-assist {
-  color: #999;
+  color: var(--kd-c-typography-color-text-third, var(--kd-g-color-text-third, #999));
 }
 .kd-typography + h1.kd-typography,
 .kd-typography + h2.kd-typography,
 .kd-typography + h3.kd-typography,
 .kd-typography + h4.kd-typography,
 .kd-typography + h5.kd-typography {
-  margin-top: 1.2em;
+  margin-top: var(--kd-c-typography-title-spacing-margin-top, 1.2em);
 }
 article.kd-typography > div.kd-typography {
-  margin-bottom: 24px;
+  margin-bottom: var(--kd-c-typography-paragraph-spacing-margin-bottom, 24px);
 }
 article.kd-typography > div.kd-typography:first-child {
-  margin-bottom: 80px;
+  margin-bottom: var(--kd-c-typography-spacing-margin-bottom, 80px);
 }
 article.kd-typography > div.kd-typography + div.kd-typography h2 {
-  margin-top: 80px;
+  margin-top: var(--kd-c-typography-spacing-margin-bottom, 80px);
 }
 article.kd-typography h1 {
   margin-top: 0;
-  margin-bottom: 12px;
-  color: #212121;
-  font-weight: 600;
-  font-size: 40px;
+  margin-bottom: var(--kd-c-typography-spacing-margin-bottom-1, 12px);
+  color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-weight: var(--kd-c-typography-title-font-weight, 600);
+  font-size: var(--kd-c-typography-font-size-1, 40px);
   line-height: 1.5;
 }
 article.kd-typography h2 {
   margin-top: 0;
-  margin-bottom: 24px;
-  color: #276ff5;
-  font-weight: 600;
-  font-size: 28px;
+  margin-bottom: var(--kd-c-typography-spacing-margin-bottom-2, 24px);
+  color: var(--kd-c-typography-title-color-text, #276ff5);
+  font-weight: var(--kd-c-typography-title-font-weight, 600);
+  font-size: var(--kd-c-typography-font-size-2, 28px);
   line-height: 1.5;
 }
 article.kd-typography h3 {
   margin-top: 0;
-  margin-bottom: 12px;
-  color: #212121;
-  font-weight: 600;
-  font-size: 18px;
+  margin-bottom: var(--kd-c-typography-spacing-margin-bottom-3, 12px);
+  color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-weight: var(--kd-c-typography-title-font-weight, 600);
+  font-size: var(--kd-c-typography-font-size-3, 18px);
   line-height: 1.5;
 }
 h1.kd-typography,
 .kd-typography h1 {
-  margin-bottom: 0.5em;
-  color: #212121;
-  font-weight: 600;
-  font-size: 40px;
+  margin-bottom: var(--kd-c-typography-title-spacing-margin-bottom, 0.5em);
+  color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-weight: var(--kd-c-typography-title-font-weight, 600);
+  font-size: var(--kd-c-typography-font-size-1, 40px);
   line-height: 1.5;
 }
 h2.kd-typography,
 .kd-typography h2 {
-  margin-bottom: 0.5em;
-  color: #276ff5;
-  font-weight: 600;
-  font-size: 28px;
+  margin-bottom: var(--kd-c-typography-title-spacing-margin-bottom, 0.5em);
+  color: var(--kd-c-typography-title-color-text, #276ff5);
+  font-weight: var(--kd-c-typography-title-font-weight, 600);
+  font-size: var(--kd-c-typography-font-size-2, 28px);
   line-height: 1.5;
 }
 h3.kd-typography,
 .kd-typography h3 {
-  margin-bottom: 0.5em;
-  color: #212121;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 1.5;
-}
-h4.kd-typography,
-.kd-typography h4 {
-  margin-bottom: 0.5em;
-  color: #212121;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 1.4;
-}
-h5.kd-typography,
-.kd-typography h5 {
-  margin-bottom: 0.5em;
-  color: #212121;
-  font-weight: 600;
-  font-size: 16px;
+  margin-bottom: var(--kd-c-typography-title-spacing-margin-bottom, 0.5em);
+  color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  font-weight: var(--kd-c-typography-title-font-weight, 600);
+  font-size: var(--kd-c-typography-font-size-3, 18px);
   line-height: 1.5;
 }
 .kd-typography code {
@@ -223,7 +216,7 @@ h5.kd-typography,
 }
 .kd-typography ul,
 .kd-typography ol {
-  margin: 0 0 24px 0;
+  margin: 0 0 var(--kd-c-typography-spacing-margin-bottom-2, 24px) 0;
   padding: 0;
 }
 .kd-typography ul li,