feat(button): update hover and active background colors

Esri · Feb 21, 2025 · 394529c · 394529c
1 parent 9a458ab
commit 394529c
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 106 deletions.
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
@@ -303,31 +303,6 @@
     }
   }
 }
-// outline
-:host([appearance="outline-fill"]),
-:host([appearance="outline"]) {
-  a,
-  button {
-    box-shadow: inset 0 0 0 1px
-      var(--calcite-button-shadow-color, var(--calcite-internal-button-shadow-color, transparent));
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px
-        var(
-          --calcite-button-shadow-color,
-          var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
-        );
-    }
-    &:focus,
-    &:active {
-      box-shadow: inset 0 0 0 2px
-        var(
-          --calcite-button-shadow-color,
-          var(--calcite-internal-button-shadow-color, var(--calcite-color-foreground-3))
-        );
-    }
-  }
-}
 
 :host([appearance="outline-fill"]) {
   button,
@@ -348,7 +323,6 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-text-color: theme("colors.brand");
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -374,7 +348,6 @@
   button,
   a {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-text-color: theme("colors.danger");
 
     &:hover {
@@ -402,7 +375,6 @@
   a {
     --calcite-internal-button-border-color: theme("borderColor.color.1");
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
 
     &:hover {
       --calcite-internal-button-shadow-color: var(--calcite-color-foreground-3);
@@ -432,7 +404,6 @@
   button,
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-foreground-1);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
 
     &:hover {
@@ -470,7 +441,6 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-brand);
     --calcite-internal-button-text-color: theme("colors.brand");
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-brand-hover);
@@ -497,7 +467,6 @@
   a {
     --calcite-internal-button-border-color: var(--calcite-color-status-danger);
     --calcite-internal-button-text-color: theme("colors.danger");
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
 
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);
@@ -523,7 +492,6 @@
   button,
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
     --calcite-internal-button-border-color: theme("borderColor.color.1");
 
     &:hover {
@@ -543,7 +511,6 @@
   button,
   a {
     --calcite-internal-button-text-color: var(--calcite-color-text-1);
-    --calcite-internal-button-background-color: var(--calcite-color-transparent);
     --calcite-internal-button-border-color: var(--calcite-color-inverse);
     &:hover {
       --calcite-internal-button-border-color: var(--calcite-color-inverse-hover);