@northking-element/ui 1.0.0 → 1.0.1

package/theme-chalk/src/block.scss

@@ -9,10 +9,11 @@
   box-sizing: border-box;
   color: getCssVar('text-color-primary');
   background-color: getCssVar('bg-color');
-  border-radius: 2px;
+  border-radius: getCssVar('border-radius-small');
 
   @include when(bordered) {
-    border: 1px solid getCssVar('border-color-light');
+    border: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-light');
   }
 
   @include when(fill) {
@@ -32,9 +33,10 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: 12px;
-    padding: 16px;
-    border-bottom: 1px solid getCssVar('border-color-extra-light');
+    gap: getCssVar('spacing-md');
+    padding: getCssVar('spacing-lg');
+    border-bottom: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-extra-light');
   }
 
   @include e(title) {
@@ -42,9 +44,9 @@
     min-width: 0;
     margin: 0;
     overflow: hidden;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.4;
+    font-size: getCssVar('font-size-medium');
+    font-weight: getCssVar('font-weight-bold');
+    line-height: getCssVar('font-line-height-primary');
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -54,11 +56,11 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: 8px;
+    gap: getCssVar('spacing-sm');
     margin-left: auto;
   }
 
   @include e(body) {
-    padding: 16px;
+    padding: getCssVar('spacing-lg');
   }
 }

package/theme-chalk/src/button.scss

@@ -67,6 +67,9 @@ $button-icon-span-gap: map.merge(
   > span {
     display: inline-flex;
     align-items: center;
+    // 行框按西文字体基线计算，中文回退字形会偏上
+    position: relative;
+    top: 1px;
   }
 
   & + & {

package/theme-chalk/src/common/var.scss

@@ -208,6 +208,21 @@ $font-size: map.merge(
   $font-size
 );
 
+// Spacing
+// --el-spacing-#{$type}
+$spacing: () !default;
+$spacing: map.merge(
+  (
+    'xs': 4px,
+    'sm': 8px,
+    'md': 12px,
+    'lg': 16px,
+    'xl': 20px,
+    'xxl': 24px,
+  ),
+  $spacing
+);
+
 // zIndex
 $z-index: () !default;
 $z-index: map.merge(

package/theme-chalk/src/detail-page.scss

@@ -13,8 +13,9 @@
     flex-direction: column;
     min-height: 0;
     overflow: hidden;
-    border: 1px solid getCssVar('border-color-light');
-    border-radius: 2px;
+    border: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-light');
+    border-radius: getCssVar('border-radius-small');
     background-color: getCssVar('bg-color');
   }
 
@@ -23,23 +24,24 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: 12px;
-    padding: 16px;
-    border-bottom: 1px solid getCssVar('border-color-extra-light');
+    gap: getCssVar('spacing-md');
+    padding: getCssVar('spacing-lg');
+    border-bottom: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-extra-light');
   }
 
   @include e(back) {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    gap: 4px;
+    gap: getCssVar('spacing-xs');
     margin: 0;
-    padding: 4px 2px;
+    padding: getCssVar('spacing-xs');
     border: 0;
-    border-radius: 2px;
+    border-radius: getCssVar('border-radius-small');
     background: transparent;
     font: inherit;
-    font-size: 13px;
+    font-size: getCssVar('font-size-small');
     line-height: 1;
     color: getCssVar('text-color-regular');
     cursor: pointer;
@@ -57,7 +59,7 @@
   @include e(mark) {
     flex-shrink: 0;
     width: 2px;
-    height: 16px;
+    height: getCssVar('font-size-medium');
     background-color: getCssVar('color-primary');
   }
 
@@ -69,19 +71,19 @@
   @include e(title) {
     margin: 0;
     overflow: hidden;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.4;
+    font-size: getCssVar('font-size-medium');
+    font-weight: getCssVar('font-weight-bold');
+    line-height: getCssVar('font-line-height-primary');
     letter-spacing: 0.04em;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   @include e(subtitle) {
-    margin: 2px 0 0;
+    margin: getCssVar('spacing-xs') 0 0;
     overflow: hidden;
-    font-size: 12px;
-    line-height: 1.4;
+    font-size: getCssVar('font-size-extra-small');
+    line-height: getCssVar('font-line-height-primary');
     color: getCssVar('text-color-secondary');
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -92,7 +94,7 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: 8px;
+    gap: getCssVar('spacing-sm');
     margin-left: auto;
   }
 
@@ -100,6 +102,6 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: 16px;
+    padding: getCssVar('spacing-lg');
   }
 }

package/theme-chalk/src/page-toolbar.scss

@@ -2,5 +2,29 @@
 
 @include b(page-toolbar) {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: getCssVar('spacing-md');
+  min-width: 0;
 
-}
+  @include e(title) {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: getCssVar('font-size-medium');
+    font-weight: getCssVar('font-weight-bold');
+    line-height: getCssVar('font-line-height-primary');
+    color: getCssVar('text-color-primary');
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @include e(actions) {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: getCssVar('spacing-sm');
+    margin-left: auto;
+  }
+}

package/theme-chalk/src/pro-dialog.scss

@@ -34,7 +34,7 @@
     }
 
     &.is-with-fullscreen:not(.show-close) {
-      padding-right: calc(#{getCssVar('dialog-padding-primary')} + 32px);
+      padding-right: calc(#{getCssVar('dialog-padding-primary')} + #{getCssVar('component-size')});
     }
   }
 
@@ -53,8 +53,8 @@
     background: transparent;
     outline: none;
     cursor: pointer;
-    font-size: var(#{getCssVarName('message-close-size')}, 16px);
-    color: getCssVar('color', 'info');
+    font-size: var(#{getCssVarName('message-close-size')}, #{getCssVar('font-size-medium')});
+    color: getCssVar('color-info');
     transition: color 160ms ease;
 
     @media (prefers-reduced-motion: reduce) {
@@ -67,7 +67,7 @@
 
     &:hover,
     &:focus-visible {
-      color: getCssVar('color', 'primary');
+      color: getCssVar('color-primary');
     }
 
     @include when(alone) {

package/theme-chalk/src/pro-drawer.scss

@@ -21,7 +21,7 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    margin-left: 12px;
+    margin-left: getCssVar('spacing-md');
     padding: 0;
     border: none;
     background: transparent;

package/theme-chalk/src/pro-table.scss

@@ -1,6 +1,4 @@
 @use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'mixins/config';
 
 @include b(pro-table) {
   display: flex;
@@ -15,17 +13,19 @@
     flex-direction: column;
     min-height: 0;
     overflow: hidden;
-    border: 1px solid getCssVar('border-color-light');
-    border-radius: 2px;
+    border: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-light');
+    border-radius: getCssVar('border-radius-small');
     background-color: getCssVar('bg-color');
   }
 
   @include e(filter) {
     flex-shrink: 0;
     margin: 0;
-    padding: 16px;
+    padding: getCssVar('spacing-lg');
     border: 0;
-    border-bottom: 1px solid getCssVar('border-color-lighter');
+    border-bottom: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-lighter');
     border-radius: 0;
     background-color: getCssVar('bg-color');
   }
@@ -36,73 +36,15 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 16px;
-    border-bottom: 1px solid getCssVar('border-color-extra-light');
+    padding: getCssVar('spacing-lg');
+    border-bottom: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-extra-light');
   }
 
   @include e(grid) {
     flex: 1 1 auto;
     min-height: 0;
-    --el-table-border-color: #{getCssVar('border-color-extra-light')};
-    --el-table-header-bg-color: #{getCssVar('fill-color-light')};
-    --el-table-header-text-color: #{getCssVar('text-color-secondary')};
-    --el-table-row-hover-bg-color: #{'color-mix(in srgb, var(--el-color-primary) 7%, var(--el-bg-color))'};
-    --el-table-bg-color: transparent;
-    --el-table-tr-bg-color: transparent;
-
-    font-variant-numeric: tabular-nums;
-    font-feature-settings: 'tnum' 1;
-
-    .#{config.$namespace}-table__header th.#{config.$namespace}-table__cell {
-      height: 40px;
-      padding: 0;
-      font-size: 12px;
-      font-weight: 600;
-      letter-spacing: 0.08em;
-      border-bottom: 1px solid getCssVar('border-color');
-    }
-
-    .#{config.$namespace}-table__cell .cell {
-      padding-right: 16px;
-      padding-left: 16px;
-    }
-
-    th.#{config.$namespace}-table-column--selection,
-    td.#{config.$namespace}-table-column--selection {
-      letter-spacing: 0;
-    }
-
-    .#{config.$namespace}-table__body td.#{config.$namespace}-table__cell {
-      height: 48px;
-      border-bottom-color: getCssVar('border-color-extra-light');
-      transition: background-color 160ms ease, box-shadow 160ms ease;
-
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-
-    .#{config.$namespace}-table__body tr.is-selected > td.#{config.$namespace}-table__cell:first-child {
-      box-shadow: inset 3px 0 0 getCssVar('color-primary');
-    }
-
-    .#{config.$namespace}-table__body tr.is-selected > td.#{config.$namespace}-table__cell {
-      background-color: #{'color-mix(in srgb, var(--el-color-primary) 8%, var(--el-bg-color))'};
-    }
-
-    .#{config.$namespace}-table__inner-wrapper::before {
-      display: none;
-    }
-
-    .#{config.$namespace}-table__empty-block {
-      min-height: 160px;
-    }
-
-    .#{config.$namespace}-table__empty-text {
-      width: 100%;
-      line-height: normal;
-    }
+    #{getCssVarName('table-header-bg-color')}: getCssVar('fill-color', 'light');
   }
 
   @include e(footer) {
@@ -111,9 +53,10 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 12px 16px;
-    padding: 16px;
-    border-top: 1px solid getCssVar('border-color-lighter');
+    gap: getCssVar('spacing-md') getCssVar('spacing-lg');
+    padding: getCssVar('spacing-lg');
+    border-top: getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color-lighter');
     background-color: getCssVar('bg-color');
 
     @media only screen and (max-width: 767px) {
@@ -123,18 +66,16 @@
 
   @include e(folio) {
     display: flex;
-    gap: 12px;
+    gap: getCssVar('spacing-md');
     margin: 0;
-    font-size: 12px;
+    font-size: getCssVar('font-size-extra-small');
     font-variant-numeric: tabular-nums;
     font-feature-settings: 'tnum' 1;
     letter-spacing: 0.02em;
     color: getCssVar('text-color-secondary');
-
   }
 
   @include e(picked) {
     color: getCssVar('color-primary');
   }
-
 }

package/theme-chalk/src/search-form.scss

@@ -1,11 +1,11 @@
 @use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
 @use 'mixins/config';
 
 @include b(search-form) {
   margin-bottom: 0;
-  padding: 16px 20px;
-  border: 1px solid getCssVar('border-color');
+  padding: getCssVar('spacing-lg') getCssVar('spacing-xl');
+  border: getCssVar('border-width') getCssVar('border-style')
+    getCssVar('border-color');
   border-radius: getCssVar('border-radius-base');
   background-color: getCssVar('bg-color');
 
@@ -15,8 +15,8 @@
     display: grid;
     grid-template-columns: repeat(var(--search-cols), minmax(0, 1fr));
     align-items: center;
-    column-gap: 24px;
-    row-gap: 12px;
+    column-gap: getCssVar('spacing-xxl');
+    row-gap: getCssVar('spacing-md');
 
     &:not(.is-expanded) {
       .#{config.$namespace}-form-item:nth-child(n + 4) {
@@ -34,7 +34,6 @@
     grid-column: var(--search-cols);
     align-items: center;
     justify-self: end;
-    gap: 8px;
     margin: 0;
   }
 

package/theme-chalk/src/section-title.scss

@@ -3,9 +3,9 @@
 @include b(section-title) {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: getCssVar('spacing-sm');
   min-width: 0;
-  margin: 20px 0 12px;
+  margin: getCssVar('spacing-xl') 0 getCssVar('spacing-md');
   color: getCssVar('text-color-primary');
 
   &:first-child {
@@ -15,7 +15,7 @@
   @include e(mark) {
     flex-shrink: 0;
     width: 2px;
-    height: 14px;
+    height: getCssVar('font-size-base');
     background-color: getCssVar('color-primary');
   }
 
@@ -24,9 +24,9 @@
     min-width: 0;
     margin: 0;
     overflow: hidden;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 22px;
+    font-size: getCssVar('font-size-base');
+    font-weight: getCssVar('font-weight-bold');
+    line-height: getCssVar('font-line-height-primary');
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -36,7 +36,7 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: center;
-    gap: 8px;
+    gap: getCssVar('spacing-sm');
     margin-left: auto;
   }
 }

package/theme-chalk/src/tree-panel.scss

@@ -14,22 +14,22 @@
     flex-direction: column;
     min-height: 0;
     overflow: hidden;
-    border: 1px solid getCssVar('border-color-light');
-    border-radius: 2px;
+    border: getCssVar('border-width') getCssVar('border-style') getCssVar('border-color-light');
+    border-radius: getCssVar('border-radius-small');
     background-color: getCssVar('bg-color');
   }
 
   @include e(head) {
     flex-shrink: 0;
     margin: 0;
-    padding: 14px 16px 10px;
+    padding: getCssVar('spacing-lg') getCssVar('spacing-lg') getCssVar('spacing-md');
   }
 
   @include e(title) {
     margin: 0;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1.4;
+    font-size: getCssVar('font-size-base');
+    font-weight: getCssVar('font-weight-bold');
+    line-height: getCssVar('font-line-height-primary');
     letter-spacing: 0.04em;
     color: getCssVar('text-color-primary');
   }
@@ -38,14 +38,14 @@
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    gap: 8px;
-    padding: 0 16px 12px;
-    border-bottom: 1px solid getCssVar('border-color-extra-light');
+    gap: getCssVar('spacing-sm');
+    padding: 0 getCssVar('spacing-lg') getCssVar('spacing-md');
+    border-bottom: getCssVar('border-width') getCssVar('border-style') getCssVar('border-color-extra-light');
   }
 
   @include e(create) {
     flex-shrink: 0;
-    width: 32px;
+    width: getCssVar('component-size');
     padding: 0;
   }
 
@@ -54,23 +54,22 @@
     min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
-    padding: 8px 0 12px;
+    padding: getCssVar('spacing-sm') 0 getCssVar('spacing-md');
     background-color: transparent;
-    --el-tree-node-hover-bg-color: #{'color-mix(in srgb, var(--el-color-primary) 7%, var(--el-bg-color))'};
+    #{getCssVarName('tree-node-hover-bg-color')}: #{'color-mix(in srgb, var(--el-color-primary) 7%, var(--el-bg-color))'};
 
     .#{config.$namespace}-tree-node__content {
-      height: 36px;
+      height: getCssVar('component-size');
       border-radius: 0;
 
-      > .#{config.$namespace}-tree-panel__node {
+      >.#{config.$namespace}-tree-panel__node {
         flex: 1;
         min-width: 0;
       }
     }
 
-    .#{config.$namespace}-tree-node.is-current > .#{config.$namespace}-tree-node__content {
+    .#{config.$namespace}-tree-node.is-current>.#{config.$namespace}-tree-node__content {
       background-color: #{'color-mix(in srgb, var(--el-color-primary) 8%, var(--el-bg-color))'};
-      box-shadow: inset 3px 0 0 getCssVar('color-primary');
     }
   }
 
@@ -79,14 +78,14 @@
     flex: 1;
     align-items: center;
     min-width: 0;
-    padding-right: 8px;
+    padding-right: getCssVar('spacing-sm');
   }
 
   @include e(label) {
     flex: 1;
     min-width: 0;
     overflow: hidden;
-    font-size: 14px;
+    font-size: getCssVar('font-size-base');
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -95,20 +94,26 @@
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    gap: 2px;
-    margin-left: 8px;
+    margin-left: getCssVar('spacing-sm');
     opacity: 0;
 
-    .#{config.$namespace}-button {
-      width: 22px;
-      height: 22px;
+    .#{config.$namespace}-button.is-link {
+      width: getCssVar('component-size-small');
+      height: getCssVar('component-size-small');
       margin-left: 0;
       padding: 0;
+      color: getCssVar('color-primary');
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: getCssVar('color-primary');
+      }
     }
   }
 
   .#{config.$namespace}-tree-node__content:hover,
-  .#{config.$namespace}-tree-node.is-current > .#{config.$namespace}-tree-node__content {
+  .#{config.$namespace}-tree-node.is-current>.#{config.$namespace}-tree-node__content {
     .#{config.$namespace}-tree-panel__actions {
       opacity: 1;
     }
@@ -118,21 +123,21 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding: 28px 16px;
+    padding: getCssVar('spacing-xxl') getCssVar('spacing-lg');
   }
 
   @include e(empty-rule) {
     display: block;
-    width: 28px;
+    width: getCssVar('spacing-xxl');
     height: 2px;
-    margin-bottom: 12px;
+    margin-bottom: getCssVar('spacing-md');
     background-color: getCssVar('color-primary');
   }
 
   @include e(empty-title) {
     margin: 0;
-    font-size: 14px;
-    font-weight: 600;
+    font-size: getCssVar('font-size-base');
+    font-weight: getCssVar('font-weight-bold');
     color: getCssVar('text-color-primary');
   }
-}
+}

package/theme-chalk/src/var.scss

@@ -22,8 +22,12 @@
   @include set-component-css-var('font-family', $font-family);
 
   @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-weight-bold', 600);
   @include set-css-var-value('font-line-height-primary', 24px);
 
+  // --el-spacing-#{$type}
+  @include set-component-css-var('spacing', $spacing);
+
   // z-index --el-index-#{$type}
   @include set-component-css-var('index', $z-index);