ep-craft 0.1.4 → 0.1.6

package/dist/locale/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 国际化（i18n）语言包
+ *
+ * 直接从 ep-craft 引入 element-plus 的语言包，无需再单独依赖 element-plus 的路径。
+ *
+ * 使用方式:
+ * ```ts
+ * // 按需引入某个语言
+ * import { zhCn, en } from 'ep-craft/locale'
+ *
+ * import { EpConfigProvider } from 'ep-craft'
+ *
+ * // <ep-config-provider :locale="zhCn"> ... </ep-config-provider>
+ * ```
+ */
+export * from 'element-plus/es/locale';
+export type { Language, TranslatePair } from 'element-plus/es/locale';

package/dist/locale/index.js

@@ -0,0 +1 @@
+export * from "element-plus/es/locale";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep-craft",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A Vue 3 component library based on element-plus with ep- prefix",
   "type": "module",
   "main": "./dist/ep-craft.js",
@@ -15,6 +15,10 @@
       "import": "./dist/resolver.js",
       "types": "./dist/resolver.d.ts"
     },
+    "./locale": {
+      "import": "./dist/locale/index.js",
+      "types": "./dist/locale/index.d.ts"
+    },
     "./dist/index.css": "./dist/index.css",
     "./style.css": "./dist/index.css",
     "./theme-chalk/*": "./theme-chalk/*",

package/theme-chalk/src/button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 
 @use 'common/var' as *;
 @use 'mixins/button' as *;
@@ -20,7 +21,8 @@ $button-icon-span-gap: map.merge(
   $text-color,
   $border-color,
   $hover-bg-color,
-  $active-bg-color
+  $active-bg-color,
+  $disabled-bg-color: getCssVar('color-white')
 ) {
   @include set-css-var-value(('button', 'text-color'), $text-color);
   @include set-css-var-value(('button', 'bg-color'), getCssVar('color-white'));
@@ -32,16 +34,67 @@ $button-icon-span-gap: map.merge(
   @include set-css-var-value(('button', 'active', 'bg-color'), $active-bg-color);
   @include set-css-var-value(('button', 'active', 'border-color'), $border-color);
   @include set-css-var-value(('button', 'disabled', 'text-color'), $text-color);
-  @include set-css-var-value(('button', 'disabled', 'bg-color'), getCssVar('color-white'));
+  @include set-css-var-value(('button', 'disabled', 'bg-color'), $disabled-bg-color);
   @include set-css-var-value(('button', 'disabled', 'border-color'), $border-color);
 
+  // 禁用态整体 40% 透明（保持实色，符合 Figma 设计）
   @include when(disabled) {
     opacity: 0.4;
   }
 }
 
+// Button 专用浅色（hover/active 背景），公共色板未覆盖，集中在此管理
+$button-plain-hover-bg: (
+  primary: #f5f8ff,
+  success: #f3fbf9,
+  warning: #fff6eb,
+  danger: #fff5f5,
+);
+$button-plain-active-bg: (
+  primary: #e5edff,
+  success: #e7f8f3,
+  warning: #ffe8cc,
+  danger: #ffc9c9,
+);
+// info plain 的 hover 浅背景，公共色板未覆盖
+$button-info-plain-hover-bg: #f7f8fa;
+
+// 各类型 plain 样式配置：text/border 色、hover 背景、active 背景、禁用背景
+$button-plain-config: (
+  primary: (
+    $color-primary,
+    $color-primary,
+    map.get($button-plain-hover-bg, primary),
+    map.get($button-plain-active-bg, primary),
+    transparent,
+  ),
+  success: (
+    $color-success,
+    $color-success,
+    map.get($button-plain-hover-bg, success),
+    map.get($button-plain-active-bg, success),
+    transparent,
+  ),
+  warning: (
+    $color-warning,
+    $color-warning,
+    map.get($button-plain-hover-bg, warning),
+    map.get($button-plain-active-bg, warning),
+    transparent,
+  ),
+  danger: (
+    $color-danger,
+    $color-danger,
+    map.get($button-plain-hover-bg, danger),
+    map.get($button-plain-active-bg, danger),
+    transparent,
+  ),
+);
+
 @include b(button) {
   @include set-component-css-var('button', $button);
+  // 默认按钮（未指定 type）样式与 primary 保持一致
+  @include button-variant(primary);
 }
 
 @include b(button) {
@@ -121,17 +174,14 @@ $button-icon-span-gap: map.merge(
   }
 
   @include when(plain) {
-    @include css-var-from-global(
-      ('button', 'hover', 'text-color'),
-      ('color', 'primary')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'bg-color'),
-      ('fill-color', 'blank')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'border-color'),
-      ('color', 'primary')
+    // 默认朴素按钮样式与 primary + plain 保持一致
+    $cfg: map.get($button-plain-config, primary);
+    @include button-reverse-variant(
+      $color-primary,
+      list.nth($cfg, 2),
+      list.nth($cfg, 3),
+      list.nth($cfg, 4),
+      list.nth($cfg, 5)
     );
   }
 
@@ -151,6 +201,14 @@ $button-icon-span-gap: map.merge(
       background-color: getCssVar('button', 'disabled', 'bg-color');
       border-color: getCssVar('button', 'disabled', 'border-color');
     }
+
+    // 非 plain 按钮禁用时删除边框
+    &:not(.is-plain) {
+      &,
+      &:hover {
+        border-color: transparent;
+      }
+    }
   }
 
   @include when(loading) {
@@ -310,35 +368,105 @@ $button-icon-span-gap: map.merge(
     }
   }
 
-  @each $type in (primary, success, warning, danger, info) {
-    @include m($type) {
-      @include button-variant($type);
+  // default 类型样式与 primary 保持一致
+  @include m(default) {
+    @include button-variant(primary);
+
+    &.is-plain {
+      $cfg: map.get($button-plain-config, primary);
+      @include button-reverse-variant(
+        getCssVar('color-primary'),
+        list.nth($cfg, 2),
+        list.nth($cfg, 3),
+        list.nth($cfg, 4),
+        list.nth($cfg, 5)
+      );
+
+      // plain 禁用态按 Figma 设计：透明背景 + 主题色 + 整体 40% 透明
+      &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          color: getCssVar('color-primary');
+          background-color: transparent;
+          border-color: list.nth($cfg, 2);
+          opacity: 0.4;
+        }
+      }
     }
   }
 
-  @include m(rePrimary) {
-    @include button-reverse-variant(
-      getCssVar('color-primary'),
-      #e5e6eb,
-      #f5f8ff,
-      #e5edff
-    );
-  }
+  @each $type in (primary, success, warning, danger) {
+    @include m($type) {
+      @include button-variant($type);
 
-  @include m(reSuccess) {
-    @include button-reverse-variant(#12b886, #12b886, #f3fbf9, #e7f8f3);
-  }
+      &.is-plain {
+        $cfg: map.get($button-plain-config, $type);
+        // primary 文字色沿用全局 CSS 变量，其余用配置色值
+        $text: list.nth($cfg, 1);
+        @if $type == primary {
+          $text: getCssVar('color-primary');
+        }
 
-  @include m(reDanger) {
-    @include button-reverse-variant(#f14646, #f14646, #fff5f5, #ffc9c9);
-  }
+        @include button-reverse-variant(
+          $text,
+          list.nth($cfg, 2),
+          list.nth($cfg, 3),
+          list.nth($cfg, 4),
+          list.nth($cfg, 5)
+        );
 
-  @include m(reWarning) {
-    @include button-reverse-variant(#f57f00, #f57f00, #fff6eb, #ffe8cc);
+        // plain 禁用态按 Figma 设计：透明背景 + 主题色 + 整体 40% 透明
+        // 覆盖 button-plain mixin 内置的浅色禁用样式
+        &.is-disabled {
+          &,
+          &:hover,
+          &:focus,
+          &:active {
+            color: $text;
+            background-color: transparent;
+            border-color: list.nth($cfg, 2);
+            opacity: 0.4;
+          }
+        }
+      }
+    }
   }
 
-  @include m(reInfo) {
-    @include button-reverse-variant(#1d1f29, #e5e6eb, #f7f8fa, #f2f3f5);
+  @include m(info) {
+    $info-text: map.get($text-color, 'primary');
+    $info-border: map.get($colors, 'info', 'light-3');
+
+    @include button-variant(info);
+    @include set-css-var-value(('button', 'text-color'), $info-text);
+    @include set-css-var-value(('button', 'hover', 'text-color'), $info-text);
+    @include set-css-var-value(('button', 'active', 'text-color'), $info-text);
+    @include set-css-var-value(('button', 'disabled', 'text-color'), rgba($info-text, 0.4));
+
+    &.is-plain {
+      // 禁用背景保持白色，其余同 button-reverse-variant 默认（含整体 40% 透明）
+      @include button-reverse-variant(
+        $info-text,
+        $info-border,
+        $button-info-plain-hover-bg,
+        $color-info
+      );
+
+      // plain + info 禁用态按 Figma 设计：白底 + 实色 + 整体 40% 透明
+      // 覆盖 button-plain mixin 内置的浅色禁用样式
+      &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          color: $info-text;
+          background-color: getCssVar('color-white');
+          border-color: $info-border;
+          opacity: 0.4;
+        }
+      }
+    }
   }
 
   @each $size in (large, small, mini) {
@@ -356,6 +484,7 @@ $button-icon-span-gap: map.merge(
         }
       }
 
+      
       & {
         @include button-size(
           map.get($button-padding-vertical, $size) - $button-border-width,