diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts index 2c09d2a67a..e0e117e309 100644 --- a/packages/devui-vue/devui/button/src/button-types.ts +++ b/packages/devui-vue/devui/button/src/button-types.ts @@ -1,7 +1,7 @@ import { ExtractPropTypes, PropType } from 'vue'; export type IButtonType = 'button' | 'submit' | 'reset'; -export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger'; +export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning'; export type IButtonPosition = 'left' | 'right' | 'default'; export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs'; diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss index a29c626694..eb1415eb01 100644 --- a/packages/devui-vue/devui/button/src/button.scss +++ b/packages/devui-vue/devui/button/src/button.scss @@ -57,12 +57,12 @@ $devui-btn-normal-config: ( background-color: $devui-contrast ), success: ( - color: $devui-light-text, + color: $devui-dark-text, min-width: $devui-btn-min-width, background-color: $devui-success ), warning: ( - color: $devui-light-text, + color: $devui-dark-text, min-width: $devui-btn-min-width, background-color: $devui-warning ), @@ -170,6 +170,28 @@ $devui-btn-pseudo-config: ( active: ( background-color: $devui-contrast-active ) + ), + success: ( + hover: ( + background-color: $devui-success-hover + ), + focus: ( + background-color: $devui-success-hover + ), + active: ( + background-color: $devui-success-active + ) + ), + warning: ( + hover: ( + background-color: $devui-warning-hover + ), + focus: ( + background-color: $devui-warning-hover + ), + active: ( + background-color: $devui-warning-active + ) ) ); @@ -189,7 +211,7 @@ $devui-btn-pseudo-config: ( } } } - @each $type in text, text-dark, common, stress, primary, danger { + @each $type in text, text-dark, common, stress, primary, danger, success, warning, { &.devui-btn-#{$type} { @each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) { &:#{$pseudo} { diff --git a/packages/devui-vue/devui/style/theme/_color.scss b/packages/devui-vue/devui/style/theme/_color.scss index 3245ca181f..307debe65c 100755 --- a/packages/devui-vue/devui/style/theme/_color.scss +++ b/packages/devui-vue/devui/style/theme/_color.scss @@ -26,8 +26,14 @@ $devui-block: var(--devui-block, #ffffff); // 大面 $devui-area: var(--devui-area, #f8f8f8); // 可折叠区块的背景色(展开区域颜色) $devui-danger: var(--devui-danger, #f66f6a); // 失败、错误、告警 $devui-warning: var(--devui-warning, #fac20a); // 警告、需注意类型提示 +$devui-warning-hover: var(--devui-warning, #fac20a); // 警告、需注意类型提示 +$devui-warning-active: var(--devui-warning, #fac20a); +$devui-warning-active-focus: var(--devui-warning, #fac20a); $devui-waiting: var(--devui-waiting, #9faad7); // 等待中 $devui-success: var(--devui-success, #50d4ab); // 成功、正确 +$devui-success-hover: var(--devui-warning, #50d4ab); // 成功、 +$devui-success-active: var(--devui-warning, #50d4ab); +$devui-success-active-focus: var(--devui-warning, #50d4ab); $devui-info: var(--devui-info, #5e7ce0); // 通知、一般提示、执行中 $devui-initial: var(--devui-initial, #e9edfa); // 初始化、未执行 $devui-unavailable: var(--devui-unavailable, #f5f5f6); // 不可用、禁用状态 diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md index 23204dabbe..8b8f6edba5 100644 --- a/packages/devui-vue/docs/components/button/index.md +++ b/packages/devui-vue/docs/components/button/index.md @@ -51,6 +51,23 @@ ``` ::: +### 警示按钮 +用于标识系统中的关键操作,例如购买场景。 +:::demo +```vue + +``` +::: + ### 文字按钮 用于标识系统中的关键操作,例如购买场景。 :::demo @@ -112,51 +129,44 @@ :::demo ```vue