@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/src/pub-class.scss

@@ -0,0 +1,127 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+// 定义外间距数组
+$margin-space-values: (
+  xs: 4,
+  s: 8,
+  m: 12,
+  l: 16,
+  xl: 20,
+  xxl: 24,
+);
+// 定义内间距数组
+$padding-space-values: (
+  xs: 5,
+  s: 10,
+  m: 15,
+  l: 20,
+  xl: 25,
+  xxl: 30,
+);
+
+:root {
+  @each $key, $value in $margin-space-values {
+    --#{$namespace}-margin-space-#{$key}: #{$value}px;
+  }
+  @each $key, $value in $padding-space-values {
+    --#{$namespace}-padding-space-#{$key}: #{$value}px;
+  }
+}
+
+@mixin generate-margin($property, $value) {
+  @include b(mb) {
+    &-#{$property} {
+      margin-bottom: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+  @include b(ml) {
+    &-#{$property} {
+      margin-left: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+  @include b(mr) {
+    &-#{$property} {
+      margin-right: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+  @include b(mt) {
+    &-#{$property} {
+      margin-top: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+  @include b(mv) {
+    &-#{$property} {
+      margin-top: var(--#{$namespace}-margin-space-#{$value});
+      margin-bottom: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+  @include b(mh) {
+    &-#{$property} {
+      margin-left: var(--#{$namespace}-margin-space-#{$value});
+      margin-bottom: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+  @include b(margin) {
+    &-#{$property} {
+      margin: var(--#{$namespace}-margin-space-#{$value});
+    }
+  }
+}
+@mixin generate-padding($property, $value) {
+  @include b(pb) {
+    &-#{$property} {
+      padding-bottom: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+  @include b(pl) {
+    &-#{$property} {
+      padding-left: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+  @include b(pr) {
+    &-#{$property} {
+      padding-right: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+  @include b(pt) {
+    &-#{$property} {
+      padding-top: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+  @include b(pv) {
+    &-#{$property} {
+      padding-top: var(--#{$namespace}-padding-space-#{$value});
+      padding-bottom: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+  @include b(ph) {
+    &-#{$property} {
+      padding-left: var(--#{$namespace}-padding-space-#{$value});
+      padding-right: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+  @include b(pd) {
+    &-#{$property} {
+      padding: var(--#{$namespace}-padding-space-#{$value});
+    }
+  }
+}
+
+@each $key, $value in $margin-space-values {
+  @include generate-margin($key, $key);
+}
+@each $key, $value in $padding-space-values {
+  @include generate-padding($key, $key);
+}
+
+@include b(al) {
+  text-align: left;
+}
+@include b(ac) {
+  text-align: center;
+}
+@include b(ar) {
+  text-align: right;
+}

package/theme-chalk/src/reset.scss

@@ -0,0 +1,155 @@
+@charset "UTF-8";
+
+html:root {
+  color-scheme: light;
+  --zjhc-border-radius-base: 6px;
+  --zjhc-border-radius-small: 3px;
+  --zjhc-border-radius-middle: 8px;
+
+  --zjhc-light-backgound-color: #f7f8fb;
+  --el-primary-opactiy01: rgba(9, 65, 148, 0.1);
+  --el-primary-opactiy05: rgba(9, 65, 148, 0.5);
+  --el-primary-opactiy005: rgba(9, 65, 148, 0.05);
+  --el-primary-opactiy007: rgba(9, 65, 148, 0.07);
+  --el-selected-bg-color: #e7f2fc;
+  --el-table-check-bg: var(--el-selected-bg-color);
+  --el-color-white: #ffffff;
+  --el-color-black: #000000;
+  --el-color-primary-rgb: 9, 65, 148;
+  --el-color-success-rgb: 30, 188, 175;
+  --el-color-warning-rgb: 255, 194, 62;
+  --el-color-danger-rgb: 250, 94, 69;
+  --el-color-error-rgb: 250, 94, 69;
+  --el-color-info-rgb: 144, 147, 153;
+  --el-font-size-base: var(--font-size-s);
+  --el-font-size-large: var(--font-size-m);
+  --el-font-size-extra-large: var(--font-size-xxxl);
+  --el-font-size-medium: var(--font-size-l);
+  --el-font-size-small: var(--font-size-s);
+  --el-font-size-extra-small: var(--font-size-xs);
+  --el-font-size-title: var(--font-size-base);
+  --el-tag-height: var(--font-size-xxxl);
+  --el-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+    sans-serif;
+  --el-font-weight-primary: 500;
+  --el-font-line-height-primary: 24px;
+  --el-index-normal: 1;
+  --el-index-top: 1000;
+  --el-index-popper: 2000;
+  --el-border-radius-base: var(--zjhc-border-radius-small);
+  --el-border-radius-small: var(--zjhc-border-radius-small);
+  --el-border-radius-round: 20px;
+  --el-border-radius-circle: 100%;
+  --el-transition-duration: 0.3s;
+  --el-transition-duration-fast: 0.2s;
+  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+  --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+  --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),
+    opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+  --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
+  --el-transition-border: border-color var(--el-transition-duration-fast)
+    var(--el-transition-function-ease-in-out-bezier);
+  --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast)
+    var(--el-transition-function-ease-in-out-bezier);
+  --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+  --el-color-primary: #094194;
+  --el-color-primary-secondary: #00b0f0;
+  --el-color-primary-light-3: #0064c1;
+  --el-color-primary-light-5: #809ec9;
+  --el-color-primary-light-7: #b7d8f5;
+  --el-color-primary-light-8: #cfe5f9;
+  --el-color-primary-light-9: #e5f2f9;
+  --el-color-primary-dark-2: #0c65b2;
+  --el-color-success: #1ebcaf;
+  --el-color-success-light-3: #12ada0;
+  --el-color-success-light-5: #8fded7;
+  --el-color-success-light-7: #bcebe7;
+  --el-color-success-light-8: #d2f2ef;
+  --el-color-success-light-9: #e9f8f7;
+  --el-color-success-dark-2: #18968c;
+  --el-color-warning: #ffc23e;
+  --el-color-warning-light-3: #f4b733;
+  --el-color-warning-light-5: #ffe19f;
+  --el-color-warning-light-7: #ffedc5;
+  --el-color-warning-light-8: #fff3d8;
+  --el-color-warning-light-9: #fff9ec;
+  --el-color-warning-dark-2: #cc9b32;
+  --el-color-danger: #fa5e45;
+  --el-color-danger-light-3: #ed523a;
+  --el-color-danger-light-5: #fdafa2;
+  --el-color-danger-light-7: #fecfc7;
+  --el-color-danger-light-8: #fedfda;
+  --el-color-danger-light-9: #ffefec;
+  --el-color-danger-dark-2: #c84b37;
+  --el-color-error: #fa5e45;
+  --el-color-error-light-3: #ed523a;
+  --el-color-error-light-5: #fdafa2;
+  --el-color-error-light-7: #fecfc7;
+  --el-color-error-light-8: #fedfda;
+  --el-color-error-light-9: #ffefec;
+  --el-color-error-dark-2: #c84b37;
+  --el-color-info: #999999;
+  --el-color-info-light-3: #b2b3b8;
+  --el-color-info-light-5: #c8c9cc;
+  --el-color-info-light-7: #dedfe0;
+  --el-color-info-light-8: #e9e9eb;
+  --el-color-info-light-9: #f4f4f5;
+  --el-color-info-dark-2: #73767a;
+  --el-bg-color: #ffffff;
+  --el-bg-color-page: #fafbfc;
+  --el-bg-color-overlay: #ffffff;
+  --el-text-color-primary: #333333;
+  --el-text-color-regular: #666666;
+  --el-text-color-secondary: #999999;
+  --el-text-color-placeholder: #a8abb2;
+  --el-text-color-disabled: #c0c4cc;
+  --el-border-color: #dcdfe6;
+  --el-border-color-light: #e4e7ed;
+  --el-border-color-lighter: #ebeef5;
+  --el-border-color-extra-light: #f2f6fc;
+  --el-border-color-dark: #d4d7de;
+  --el-border-color-darker: #cdd0d6;
+  --el-fill-color: #f0f2f5;
+  --el-fill-color-light: #f5f7fa;
+  --el-fill-color-lighter: #fafafa;
+  --el-fill-color-extra-light: #fafcff;
+  --el-fill-color-dark: #ebedf0;
+  --el-fill-color-darker: #e6e8eb;
+  --el-fill-color-blank: #ffffff;
+  --el-fill-color-base: #cce6f4;
+
+  --el-box-shadow: 10px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12),
+    0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+  --el-disabled-bg-color: var(--el-fill-color-light);
+  --el-disabled-text-color: var(--el-text-color-secondary);
+  --el-disabled-border-color: var(--el-border-color-light);
+  --el-overlay-color: rgba(0, 0, 0, 0.8);
+  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
+  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+  --el-mask-color: rgba(255, 255, 255, 0.9);
+  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+  --el-border-width: 1px;
+  --el-border-style: solid;
+  --el-border-color-hover: var(--el-text-color-disabled);
+  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+  --el-svg-monochrome-grey: var(--el-border-color);
+  --el-dialog-border-radius: var(--zjhc-border-radius-middle);
+  --el-dialog-header-divider-color: #eee;
+  --el-message-close-size: 22px;
+  --el-dialog-header-button-bg-color:#f5f5f5;
+  --el-dialog-header-button-bg-hover-color:#eeeeee;
+  --el-table-label-bg-color: #f1f2f7;
+  --el-table-value-bg-color: #f7f8fb;
+  --el-table-sub-label-bg-color: #fef9e5;
+  --el-table-sub-value-bg-color: #fefbef;
+  --el-table-selected-bg: var(--el-selected-bg-color);
+  --el-table-header-bg-color: #f1f2f7;
+  --el-form-required-bg-color: #fef7de;
+  --el-pagination-button-hover-color: #f1f2f7;
+  --el-select-font-size: var(--el-font-size-base);
+}

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

@@ -0,0 +1,10 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+
+// background-color: var();
+// e:__   b:-   m:--
+
+@include b(search) {
+    
+}

package/theme-chalk/src/searchlayout.scss

@@ -0,0 +1,114 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+// background-color: var();
+@include b(search) {
+  @include e(layout) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 16px;
+  }
+
+  @include e(panel) {
+    padding: 15px 20px 0;
+    margin-bottom: 16px;
+    background-color: var(--el-fill-color-blank);
+    border-radius: 5px;
+    border: 1px solid var(--el-border-color);
+    width: 100%;
+
+    // 该容器下的el-button会统一有一个margin-bottom
+    & {
+      .el-col > .el-button {
+        margin-bottom: 15px;
+      }
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__wrapper {
+        width: var(--el-input-width);
+      }
+    }
+    & {
+      @include meb(false, toggle, collapse) {
+        margin-bottom: 15px;
+        height: var(--el-button--height) !important;
+      }
+    }
+  }
+
+  @include e(content) {
+    background-color: var(--el-fill-color-blank);
+    border-radius: 5px;
+    border: 1px solid var(--el-border-color);
+    display: flex;
+    overflow: hidden;
+    flex: 1;
+  }
+
+  @include e(sidebar) {
+    width: getCssVar('search', 'sidebar', 'width');
+    // border-right: 1px solid var(--el-border-color);
+    padding: 15px 0 15px 20px;
+  }
+
+  @include e(toolbar) {
+    margin-bottom: 12px;
+    padding: 0 20px;
+    & {
+      .el-dropdown + .el-button,
+      .el-dropdown + .el-dropdown,
+      .el-button + .el-dropdown {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  @include e(main) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 15px 0;
+    & {
+      @include meb(false, layout, advance) {
+        padding: 0 20px;
+      }
+    }
+  }
+
+  @include e(grid) {
+    padding: 0 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  @include e(pagination) {
+    margin-top: 16px;
+    padding: 0 20px;
+  }
+  @include e(dropdown-active) {
+    background-color: var(--el-primary-opactiy01);
+    &.el-dropdown-menu__item {
+      color: var(--el-color-primary);
+    }
+    &.el-dropdown-menu__item:not(.is-disabled):focus,
+    &.el-dropdown-menu__item:not(.is-disabled):hover {
+      background-color: var(--el-primary-opactiy01) !important;
+      color: var(--el-color-primary) !important;
+    }
+  }
+  @include e(row-active) {
+    & {
+      td.el-table__cell {
+        background: var(--el-table-check-bg) !important;
+      }
+    }
+    &.hover-row > td.el-table__cell {
+      background: var(--el-table-check-bg) !important;
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+@use 'mixins/mixins' as *;
+
+@include b(sticky) {
+  @include e(toolbar) {
+    padding: 10px 15px;
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: 30;
+    display: flex;
+    align-items: flex-start;
+    background: #fff;
+  }
+
+  @include e(main) {
+    flex: 1;
+    position: relative;
+  }
+
+  @include e(wrap) {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    max-height: 0;
+    padding-right: 44px;
+    > .el-button {
+      //   margin-right: var(--zjhc-margin-space-m);
+      //   margin-bottom: 10px;
+      + .el-button {
+        margin-left: 0;
+      }
+    }
+    > * {
+      margin-right: var(--zjhc-margin-space-m);
+      margin-bottom: 10px;
+    }
+
+    // @supports (gap: 10px) {
+    //   gap: 10px 12px;
+
+    //   & {
+    //     > .el-button {
+    //       margin-right: 0;
+    //       margin-bottom: 0;
+    //     }
+    //   }
+    // }
+  }
+
+  @include e(toggle) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 5;
+    width: 32px;
+    padding: 8px 0;
+    min-width: 0 !important;
+  }
+}

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

@@ -0,0 +1,36 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(table) {
+  @include e(toolbar) {
+    // 在表格按钮栏的按钮组
+    & {
+      @include meb(false, group, button) {
+        line-height: 1;
+        overflow: hidden;
+      }
+    }
+  }
+}
+@include b(button) {
+  @include e(group) {
+    @include m(popper) {
+      min-width: 80px;
+    }
+    & {
+      .el-dropdown + .el-button,
+      .el-dropdown + .el-dropdown,
+      .el-button + .el-dropdown {
+        margin-left: 12px;
+      }
+      .el-button.el-button--text {
+        padding: 0;
+      }
+      .el-button--text + .el-button--text,
+      .el-dropdown + .el-button--text,
+      .el-button--text + .el-dropdown {
+        margin-left: 20px;
+      }
+    }
+  }
+}

package/theme-chalk/src/var.scss

@@ -0,0 +1,32 @@
+@use 'common/var' as *;
+@use 'mixins/var' as *;
+
+// 公共变量
+:root {
+    @include set-css-var-value('color-white', $color-white);
+    @include set-css-var-value('color-black', $color-black);
+}
+
+// 亮色模式
+:root {
+    color-scheme: light;
+
+    // --zjhc-color-#{$type}
+    // --zjhc-color-#{$type}-light-{$i}
+    @each $type in $types {
+        @include set-css-color-type($colors, $type);
+    }
+
+    // --zjhc-text-color-#{$type}
+    @include set-component-css-var('text-color', $text-color);
+    // --zjhc-border-color-#{$type}
+    @include set-component-css-var('border-color', $border-color);
+    // Fill --zjhc-fill-color-#{$type}
+    @include set-component-css-var('fill-color', $fill-color);
+    // Background --zjhc-bg-color-#{$type}
+    @include set-component-css-var('bg-color', $bg-color);
+    @include set-css-var-value(('search', 'sidebar', 'width'), 200px);
+    @include set-css-var-value(('group', 'header', 'title', 'color'), $color-black);
+    @include set-css-var-value(('group', 'header', 'title', 'size'), 14px);
+    @include set-css-var-value(('page', 'container', 'bg-color'), $color-white);
+}

package/theme-chalk/src/zjhc/alert.scss

@@ -0,0 +1,16 @@
+.el-alert {
+  --el-alert-padding: 8px 20px;
+  --el-alert-icon-size: var(--font-size-xxl);
+  --el-alert-close-font-size: var(--font-size-xxl);
+  --el-alert-description-font-size: var(--font-size-base);
+  --el-alert-close-customed-font-size: var(--font-size-base);
+  --el-alert-title-font-size: var(--font-size-base);
+  --el-alert-title-with-description-font-size: var(--font-size-l);
+}
+.el-alert--info.is-light {
+  background-color: #eaf5ff;
+  color: var(--el-color-primary);
+}
+.el-alert--info.is-dark {
+  background-color: var(--el-color-primary);
+}

package/theme-chalk/src/zjhc/anchor.scss

@@ -0,0 +1,10 @@
+.el-anchor {
+    --el-anchor-line-height: 20px;
+    --el-anchor-font-size:var(--el-font-size-base);
+}
+.el-anchor.el-anchor--vertical .el-anchor__marker{
+    width: 3px;
+}
+.el-anchor__marker{
+     border-radius: 0;
+}

package/theme-chalk/src/zjhc/autocomplete.scss

@@ -0,0 +1,11 @@
+.el-autocomplete-suggestion {
+  padding: 6px 0;
+}
+.el-autocomplete-suggestion li {
+  padding: 0 10px;
+  line-height: var(--el-input-height);
+}
+
+.el-autocomplete__popper.el-popper {
+  box-shadow: none;
+}

package/theme-chalk/src/zjhc/backtop.scss

@@ -0,0 +1,8 @@
+.el-backtop {
+  box-shadow: none;
+  border: 1px solid var(--el-border-color);
+  --el-backtop-hover-bg-color: var(--el-color-primary);
+}
+.el-backtop:hover {
+  --el-backtop-text-color: #fff;
+}

package/theme-chalk/src/zjhc/breadcrumb.scss

@@ -0,0 +1,3 @@
+.el-breadcrumb{
+    font-size: var(--el-font-size-base);
+}

package/theme-chalk/src/zjhc/button.scss

@@ -0,0 +1,82 @@
+@each $i in (primary, success, warning, danger, error, info) {
+  .el-button--#{$i}.is-plain {
+    --el-button-bg-color: white;
+    --el-button-hover-bg-color: var(--el-color-#{$i}-light-9);
+    --el-button-border-color: var(--el-color-#{$i});
+    --el-button-hover-text-color: var(--el-color-#{$i});
+    --el-button-active-text-color: var(--el-color-#{$i});
+    --el-button-active-bg-color: var(--el-color-#{$i}-light-9);
+  }
+}
+.el-button.el-button--large {
+  --el-button-size: var(--el-button-height-large);
+  height: var(--el-button-size);
+  font-size: var(--el-font-size-large);
+}
+.el-button {
+  padding: 8px 15px;
+  // min-width: 68px;
+  height: var(--el-button--height);
+  font-size: var(--el-font-size-base);
+  &.is-circle {
+    width: var(--el-button--height);
+    min-width: var(--el-button--height);
+  }
+  &:has(.el-icon) {
+    padding: 6px 5.5px;
+  }
+  .el-icon {
+    font-size: 16px;
+  }
+}
+.el-button.is-link {
+  padding: 2px;
+  height: auto;
+  min-width: auto;
+}
+.el-button.is-link + .el-button.is-link {
+  margin-left: 16px;
+}
+.el-button--info {
+  --el-button-bg-info: #edf6ff;
+  --el-button-hover-bg-info: #e2f1ff;
+  --el-button-text-color: var(--el-text-color-primary);
+  --el-button-hover-text-color: var(--el-text-color-primary);
+  --el-button-bg-color: var(--el-button-bg-info);
+  --el-button-border-color: var(--el-button-bg-info);
+  --el-button-hover-border-color: var(--el-button-hover-bg-info);
+  --el-button-hover-bg-color: var(--el-button-hover-bg-info);
+  --el-button-active-bg-color: var(--el-button-hover-bg-info);
+  --el-button-active-border-color: var(--el-button-hover-bg-info);
+  &.is-plain.el-button {
+    --el-button-border-color: #cdd0d6;
+    --el-button-hover-text-color: var(--el-text-color-primary);
+    --el-button-active-border-color: #cdd0d6;
+    --el-button-hover-bg-info: #f6f7fb;
+    --el-button-hover-bg-color: #f6f7fb;
+    --el-button-hover-border-color: #cdd0d6;
+  }
+}
+.el-button.el-button--text {
+  padding-top: 0;
+  padding-bottom: 0;
+  min-width: auto;
+  height: auto;
+}
+.el-button--text:hover {
+  color: var(--el-color-primary);
+  text-decoration: underline;
+}
+.el-button--text + .el-button--text {
+  margin-left: 12px;
+}
+.el-button:focus-visible {
+  outline: none;
+}
+
+.el-button--text.is-disabled {
+  color: var(--el-color-primary-light-5);
+}
+.el-button--text.is-disabled:hover {
+  color: var(--el-color-primary-light-5);
+}

package/theme-chalk/src/zjhc/calendar.scss

@@ -0,0 +1,5 @@
+.el-calendar{
+    --el-calendar-selected-bg-color:var(--el-table-check-bg);
+    font-size: var(--el-font-size-base);
+    color: var(--el-text-color-primary);
+}

package/theme-chalk/src/zjhc/card.scss

@@ -0,0 +1,5 @@
+.el-card {
+  --el-card-border-radius: 4px;
+  --el-card-padding: var(--zjhc-padding-space-m);
+  font-size: var(--el-font-size-base);
+}