From e01a1439c0620169a886c19ee9c66f5035f40a34 Mon Sep 17 00:00:00 2001
From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com>
Date: Thu, 29 May 2025 15:54:16 +0800
Subject: [PATCH] style(components): [colorPicker] enhance disabled styles
 (#19432)

* feat: remove mask and add disabled style

* feat: set `width` and `height` on the warp container

* feat: update style

* feat: update style

---------

Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
---
 .../color-picker/src/color-picker.vue         |  1 -
 packages/theme-chalk/src/color-picker.scss    | 34 ++++++-------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index 5ed359ab2f..9b85548acb 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -80,7 +80,6 @@
         @focus="handleFocus"
         @blur="handleBlur"
       >
-        <div v-if="colorDisabled" :class="ns.be('picker', 'mask')" />
         <div :class="ns.be('picker', 'trigger')" @click="handleTrigger">
           <span :class="[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]">
             <span
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index ea026680c3..e26fb9fa7d 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -250,6 +250,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   position: relative;
   line-height: normal;
   outline: none;
+  height: map.get($color-picker-size, 'default');
+  width: map.get($color-picker-size, 'default');
 
   &:hover:not(.is-disabled, .is-focused) {
     .#{$namespace}-color-picker__trigger {
@@ -273,22 +275,18 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   @include when(disabled) {
     .#{$namespace}-color-picker__trigger {
       cursor: not-allowed;
+      background-color: getCssVar('fill-color', 'light');
+    }
+
+    @include e(color) {
+      opacity: 0.3;
     }
   }
 
   @each $size in (large, small) {
     @include m($size) {
       height: map.get($color-picker-size, $size);
-
-      .#{$namespace}-color-picker__trigger {
-        height: map.get($color-picker-size, $size);
-        width: map.get($color-picker-size, $size);
-      }
-
-      .#{$namespace}-color-picker__mask {
-        height: map.get($color-picker-size, $size)-2px;
-        width: map.get($color-picker-size, $size)-2px;
-      }
+      width: map.get($color-picker-size, $size);
     }
   }
 
@@ -299,26 +297,14 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 
-  @include e(mask) {
-    height: map.get($color-picker-size, 'default')-2px;
-    width: map.get($color-picker-size, 'default')-2px;
-    border-radius: 4px;
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    z-index: 1;
-    cursor: not-allowed;
-    background-color: rgba(255, 255, 255, 0.7);
-  }
-
   @include e(trigger) {
     display: inline-flex;
     justify-content: center;
     align-items: center;
 
     box-sizing: border-box;
-    height: map.get($color-picker-size, 'default');
-    width: map.get($color-picker-size, 'default');
+    height: 100%;
+    width: 100%;
     padding: 4px;
     border: 1px solid getCssVar('border-color');
     border-radius: 4px;