feat: add dark for custom button & adjust details (#7086)

docs/.vitepress/vitepress/components/demo/vp-example.vue

@@ -24,17 +24,5 @@ defineProps({
   padding: 1.5rem;
   margin: 0.5px;
   background-color: var(--bg-color);
-  &.transparent-enabled {
-    background-image: linear-gradient(
-        45deg,
-        rgb(249, 249, 250) 25%,
-        transparent 25%
-      ),
-      linear-gradient(135deg, rgb(249, 249, 250) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, rgb(249, 249, 250) 75%),
-      linear-gradient(135deg, transparent 75%, rgb(249, 249, 250) 75%);
-    background-size: 20px 20px;
-    background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px;
-  }
 }
 </style>

docs/.vitepress/vitepress/components/globals/main-color.vue

@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+import { useCssVar } from '@vueuse/core'
+import { getColorValue, useCopyColor } from '../../utils'
+
+const primary = useCssVar('--el-color-primary')
+const colorLevel = [3, 5, 7, 8, 9].map((i) => `light-${i}`)
+colorLevel.unshift('dark-2')
+
+const { copyColor } = useCopyColor()
+</script>
+
 <template>
   <el-row :gutter="12">
     <el-col :span="10" :xs="{ span: 12 }">
@@ -10,7 +21,7 @@
             :key="level"
             class="bg-blue-sub-item hover:(cursor-pointer shadow)"
             :style="{
-              width: `${100 / 5}%`,
+              width: `${100 / 6}%`,
               background: getColorValue('primary-' + level),
             }"
             @click="copyColor('primary-' + level)"
@@ -20,14 +31,3 @@
     </el-col>
   </el-row>
 </template>
-
-<script lang="ts" setup>
-import { useCssVar } from '@vueuse/core'
-import { getColorValue, useCopyColor } from '../../utils'
-
-const primary = useCssVar('--el-color-primary')
-const colorLevel = [3, 5, 7, 8, 9].map((i) => `light-${i}`)
-colorLevel.unshift('dark-2')
-
-const { copyColor } = useCopyColor()
-</script>

docs/.vitepress/vitepress/styles/common/helper.scss

@@ -0,0 +1,18 @@
+.bg-transparent {
+  color: var(--el-text-color-primary);
+  background-image: linear-gradient(45deg, #f4f4f5 25%, #f000 25%),
+    linear-gradient(135deg, #f4f4f5 25%, #0000 25%),
+    linear-gradient(45deg, #0000 75%, #f4f4f5 75%),
+    linear-gradient(135deg, #0000 75%, #f4f4f5 75%);
+  background-size: 20px 20px;
+  background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px;
+}
+
+.dark {
+  .bg-transparent {
+    background-image: linear-gradient(45deg, #292929 25%, #f000 25%),
+      linear-gradient(135deg, #292929 25%, #0000 25%),
+      linear-gradient(45deg, #0000 75%, #292929 75%),
+      linear-gradient(135deg, #0000 75%, #292929 75%);
+  }
+}

docs/.vitepress/vitepress/styles/common/index.scss

@@ -1,2 +1,3 @@
 @use './switch';
 @use './hamburger';
+@use './helper';

docs/en-US/component/color.md

@@ -53,20 +53,6 @@ Element Plus uses a specific set of palettes to specify colors to provide a cons
     line-height: 24px;
   }
 }
-
-.bg-transparent {
-  color: var(--el-text-color-primary);
-  background-image: linear-gradient(
-      45deg,
-      rgb(249, 249, 250) 25%,
-      transparent 25%
-    ),
-  linear-gradient(135deg, rgb(249, 249, 250) 25%, transparent 25%),
-  linear-gradient(45deg, transparent 75%, rgb(249, 249, 250) 75%),
-  linear-gradient(135deg, transparent 75%, rgb(249, 249, 250) 75%);
-  background-size: 20px 20px;
-  background-position: 0px 0px, 10px 0px, 10px -10px, 0px 10px;
-}
 </style>
 
 ## Main Color

docs/examples/button/custom.vue

@@ -1,6 +1,15 @@
+<script lang="ts" setup>
+import { isDark } from '~/composables/dark'
+</script>
+
 <template>
-  <el-row>
-    <el-button color="#626aef" style="color: white">Custom</el-button>
-    <el-button color="#626aef" plain>Custom</el-button>
-  </el-row>
+  <div class="flex">
+    <el-button color="#626aef" :dark="isDark">Default</el-button>
+    <el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
+
+    <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
+    <el-button color="#626aef" :dark="isDark" disabled plain
+      >Disabled Plain</el-button
+    >
+  </div>
 </template>

docs/tsconfig.json

@@ -11,9 +11,11 @@
     "noImplicitAny": false,
     "skipLibCheck": true,
     "paths": {
-      "element-plus": ["../packages/element-plus"]
+      "element-plus": ["../packages/element-plus"],
+      "~/*": ["./.vitepress/vitepress/*"]
     },
-    "types": ["../typings/components"]
+    "types": ["../typings/components"],
+    "jsx": "preserve"
   },
   "include": ["**/*", ".vitepress/**/*"],
   "exclude": ["node_modules"]

docs/vite.config.ts

@@ -19,7 +19,12 @@ import { MarkdownTransform } from './.vitepress/plugins/markdown-transform'
 
 import type { Alias } from 'vite'
 
-const alias: Alias[] = []
+const alias: Alias[] = [
+  {
+    find: '~/',
+    replacement: `${path.resolve(__dirname, './.vitepress/vitepress')}/`,
+  },
+]
 if (process.env.DOC_ENV !== 'production') {
   alias.push(
     {

packages/components/button/src/button-custom.ts

@@ -0,0 +1,87 @@
+import { computed } from 'vue'
+import { TinyColor } from '@ctrl/tinycolor'
+import { useDisabled } from '@element-plus/hooks'
+import type { ButtonProps } from './button'
+
+export function darken(color: TinyColor, amount = 20) {
+  return color.mix('#141414', amount).toString()
+}
+
+export function useButtonCustomStyle(props: ButtonProps) {
+  const _disabled = useDisabled()
+
+  // calculate hover & active color by custom color
+  // only work when custom color
+  return computed(() => {
+    let styles: Record<string, string> = {}
+
+    const buttonColor = props.color
+
+    if (buttonColor) {
+      const color = new TinyColor(buttonColor)
+      const activeBgColor = props.dark
+        ? color.tint(20).toString()
+        : darken(color, 20)
+
+      if (props.plain) {
+        styles = {
+          '--el-button-bg-color': props.dark
+            ? darken(color, 90)
+            : color.tint(90).toString(),
+          '--el-button-text-color': buttonColor,
+          '--el-button-border-color': props.dark
+            ? darken(color, 50)
+            : color.tint(50).toString(),
+          '--el-button-hover-text-color': 'var(--el-color-white)',
+          '--el-button-hover-bg-color': buttonColor,
+          '--el-button-hover-border-color': buttonColor,
+          '--el-button-active-bg-color': activeBgColor,
+          '--el-button-active-text-color': 'var(--el-color-white)',
+          '--el-button-active-border-color': activeBgColor,
+        }
+
+        if (_disabled.value) {
+          styles['--el-button-disabled-bg-color'] = props.dark
+            ? darken(color, 90)
+            : color.tint(90).toString()
+          styles['--el-button-disabled-text-color'] = props.dark
+            ? darken(color, 50)
+            : color.tint(50).toString()
+          styles['--el-button-disabled-border-color'] = props.dark
+            ? darken(color, 80)
+            : color.tint(80).toString()
+        }
+      } else {
+        const hoverBgColor = props.dark
+          ? darken(color, 30)
+          : color.tint(30).toString()
+        const textColor = color.isDark()
+          ? 'var(--el-color-white)'
+          : 'var(--el-color-black)'
+        styles = {
+          '--el-button-bg-color': buttonColor,
+          '--el-button-text-color': textColor,
+          '--el-button-border-color': buttonColor,
+          '--el-button-hover-bg-color': hoverBgColor,
+          '--el-button-hover-text-color': textColor,
+          '--el-button-hover-border-color': hoverBgColor,
+          '--el-button-active-bg-color': activeBgColor,
+          '--el-button-active-border-color': activeBgColor,
+        }
+
+        if (_disabled.value) {
+          const disabledButtonColor = props.dark
+            ? darken(color, 50)
+            : color.tint(50).toString()
+          styles['--el-button-disabled-bg-color'] = disabledButtonColor
+          styles['--el-button-disabled-text-color'] = props.dark
+            ? 'rgba(255, 255, 255, 0.5)'
+            : 'var(--el-color-white)'
+          styles['--el-button-disabled-border-color'] = disabledButtonColor
+        }
+      }
+    }
+
+    return styles
+  })
+}

packages/components/button/src/button.ts

@@ -43,6 +43,7 @@ export const buttonProps = buildProps({
   round: Boolean,
   circle: Boolean,
   color: String,
+  dark: Boolean,
   autoInsertSpace: {
     type: Boolean,
     default: undefined,

packages/components/button/src/button.vue

@@ -38,7 +38,6 @@
 
 <script lang="ts" setup>
 import { Text, computed, inject, ref, useSlots } from 'vue'
-import { TinyColor } from '@ctrl/tinycolor'
 import { ElIcon } from '@element-plus/components/icon'
 import {
   useDisabled,
@@ -49,6 +48,7 @@ import {
 } from '@element-plus/hooks'
 import { buttonGroupContextKey } from '@element-plus/tokens'
 import { buttonEmits, buttonProps } from './button'
+import { useButtonCustomStyle } from './button-custom'
 
 defineOptions({
   name: 'ElButton',
@@ -84,48 +84,7 @@ const shouldAddSpace = computed(() => {
   return false
 })
 
-// calculate hover & active color by custom color
-// only work when custom color
-const buttonStyle = computed(() => {
-  let styles: Record<string, string> = {}
-
-  const buttonColor = props.color
-
-  if (buttonColor) {
-    const color = new TinyColor(buttonColor)
-    const shadeBgColor = color.shade(20).toString()
-    if (props.plain) {
-      styles = {
-        '--el-button-bg-color': color.tint(90).toString(),
-        '--el-button-text-color': buttonColor,
-        '--el-button-hover-text-color': 'var(--el-color-white)',
-        '--el-button-hover-bg-color': buttonColor,
-        '--el-button-hover-border-color': buttonColor,
-        '--el-button-active-bg-color': shadeBgColor,
-        '--el-button-active-text-color': 'var(--el-color-white)',
-        '--el-button-active-border-color': shadeBgColor,
-      }
-    } else {
-      const tintBgColor = color.tint(30).toString()
-      styles = {
-        '--el-button-bg-color': buttonColor,
-        '--el-button-border-color': buttonColor,
-        '--el-button-hover-bg-color': tintBgColor,
-        '--el-button-hover-border-color': tintBgColor,
-        '--el-button-active-bg-color': shadeBgColor,
-        '--el-button-active-border-color': shadeBgColor,
-      }
-    }
-
-    if (_disabled.value) {
-      const disabledButtonColor = color.tint(50).toString()
-      styles['--el-button-disabled-bg-color'] = disabledButtonColor
-      styles['--el-button-disabled-border-color'] = disabledButtonColor
-    }
-  }
-
-  return styles
-})
+const buttonStyle = useButtonCustomStyle(props)
 
 const handleClick = (evt: MouseEvent) => {
   if (props.nativeType === 'reset') {

packages/theme-chalk/src/button.scss

@@ -126,6 +126,8 @@ $button-icon-span-gap: map.merge(
     pointer-events: none;
 
     &:before {
+      // mask the button
+      z-index: 1;
       pointer-events: none;
       content: '';
       position: absolute;

packages/theme-chalk/src/cascader.scss

@@ -84,7 +84,7 @@
   @include when(disabled) {
     .#{$namespace}-cascader__label {
       z-index: calc(var(--el-index-normal) + 1);
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
     }
   }
 

packages/theme-chalk/src/checkbox-button.scss

@@ -76,10 +76,7 @@
 
   &.is-disabled {
     & .#{$namespace}-checkbox-button__inner {
-      color: var(
-        --el-button-disabled-text-color,
-        map.get($button, 'disabled-text-color')
-      );
+      color: getCssVar('disabled-text-color');
       cursor: not-allowed;
       background-image: none;
       background-color: var(

packages/theme-chalk/src/checkbox.scss

@@ -144,7 +144,7 @@ $checkbox-bordered-input-width: map.merge(
       }
 
       & + span.#{$namespace}-checkbox__label {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
       }
     }

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

@@ -222,7 +222,7 @@ $disabled: () !default;
 $disabled: map.merge(
   (
     'bg-color': getCssVar('fill-color', 'light'),
-    'text-color': getCssVar('text-color-placeholder'),
+    'text-color': getCssVar('text-color', 'placeholder'),
     'border-color': getCssVar('border-color', 'light'),
   ),
   $disabled

packages/theme-chalk/src/dark/css-vars.scss

@@ -28,6 +28,10 @@ html.dark {
   @include set-component-css-var('mask-color', $mask-color);
 }
 
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
 @include dark(card) {
   @include set-component-css-var('card', $card);
 }

packages/theme-chalk/src/dark/var.scss

@@ -149,6 +149,16 @@ $mask-color: map.merge(
   $mask-color
 );
 
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5),
+  ),
+  $button
+);
+
 // card
 $card: () !default;
 $card: map.merge(

packages/theme-chalk/src/input-number.scss

@@ -59,7 +59,7 @@
     }
 
     &.is-disabled {
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
       cursor: not-allowed;
     }
   }

packages/theme-chalk/src/radio-button.scss

@@ -94,10 +94,7 @@
 
     &:disabled {
       & + .#{$namespace}-radio-button__inner {
-        color: var(
-          --el-button-disabled-text-color,
-          map.get($button, 'disabled-text-color')
-        );
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
         background-image: none;
         background-color: var(

packages/theme-chalk/src/table-column.scss

@@ -69,7 +69,7 @@
       }
 
       &.is-disabled {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
       }
     }

packages/theme-chalk/src/tabs.scss

@@ -152,7 +152,7 @@
     }
 
     @include when(disabled) {
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
       cursor: default;
     }
   }
@@ -262,7 +262,7 @@
         color: var(--el-color-primary);
       }
       &.is-disabled {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
       }
     }