fix(picker): use proper colors for express quiet variant

adobe · Jun 29, 2022 · b54f299 · b54f299
1 parent a26c212
commit b54f299
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/components/picker/index.css b/components/picker/index.css
@@ -157,6 +157,8 @@ governing permissions and limitations under the License.
   --spectrum-picker-texticon-border-radius: 0;
   --spectrum-picker-textonly-padding-left: 0;
   --spectrum-picker-textonly-padding-right: 0;
+  --spectrum-picker-quiet-background-color-key-focus: transparent;
+  --spectrum-picker-quiet-border-color-key-focus: var(--spectrum-global-color-blue-400);
 }
 
 .spectrum-Picker--quiet {
@@ -256,7 +258,7 @@ governing permissions and limitations under the License.
   &.is-focused {
     background-color: var(--spectrum-picker-m-texticon-background-color-key-focus);
     border-color: var(--spectrum-picker-m-texticon-border-color-key-focus);
-    box-shadow: 0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-m-texticon-border-color-key-focus);
+    box-shadow: 0 0 0 var(--spectrum-picker-texticon-border-size-increase-focus) var(--spectrum-picker-quiet-border-color-key-focus);
     color: var(--spectrum-picker-m-texticon-text-color-key-focus);
 
     &.is-placeholder {
@@ -336,15 +338,18 @@ governing permissions and limitations under the License.
 
   &:focus-ring,
   &.is-focused {
-    background-color: var(--spectrum-picker-m-quiet-texticon-background-color-key-focus);
-    box-shadow: 0 2px 0 0 var(--spectrum-picker-m-texticon-border-color-key-focus);
+    background-color: var(--spectrum-picker-quiet-background-color-key-focus);
+    box-shadow: 0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus);
 
     &.is-placeholder {
       color: var(--spectrum-picker-m-quiet-texticon-placeholder-text-color-key-focus);
     }
     .spectrum-Picker-menuIcon {
       color: var(--spectrum-picker-m-texticon-icon-color-key-focus)
     }
+    &::after {
+      box-shadow: none;
+    }
   }
 
   &:active,
@@ -354,8 +359,8 @@ governing permissions and limitations under the License.
 
     &:focus-ring,
     &.is-focused {
-      background-color: var(--spectrum-picker-m-quiet-texticon-background-color-key-focus);
-      box-shadow: 0 2px 0 0 var(--spectrum-picker-m-texticon-border-color-key-focus);
+      background-color: var(--spectrum-picker-quiet-background-color-key-focus);
+      box-shadow: 0 2px 0 0 var(--spectrum-picker-quiet-border-color-key-focus);
     }
   }