From 9971c9ed97f78600df99ea6b875ac08096642d83 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Wed, 7 Dec 2022 09:06:18 +0800
Subject: [PATCH] style(theme-chalk): [color-picker] Fix focus-visible outline
 (#10911)

* style(theme-chalk): [color-picker] Fix focus-visible ouline

* style(theme-chalk): update
---
 packages/theme-chalk/src/color-picker.scss | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index 731664e880..912693171e 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -244,6 +244,20 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   display: inline-block;
   position: relative;
   line-height: normal;
+  outline: none;
+
+  &:hover:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      border: 1px solid getCssVar('border-color-hover');
+    }
+  }
+
+  &:focus-visible:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      outline: 2px solid getCssVar('color-primary');
+      outline-offset: 1px;
+    }
+  }
 
   @include when(disabled) {
     .#{$namespace}-color-picker__trigger {
@@ -275,8 +289,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include e(mask) {
-    height: 38px;
-    width: 38px;
+    height: map.get($color-picker-size, 'default')-2px;
+    width: map.get($color-picker-size, 'default')-2px;
     border-radius: 4px;
     position: absolute;
     top: 1px;