@transferwise/components 0.0.0-experimental-6fa7ff3 → 0.0.0-experimental-f341b41

package/build/main.css

@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -726,7 +726,6 @@ div.critical-comms .critical-comms-body {
   --Button-size-small-padding: 5px var(--size-12);
   --Button-size-medium-padding: var(--size-8) var(--size-12);
   --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
   --Button-secondary-background: var(--color-interactive-neutral);
@@ -745,31 +744,15 @@ div.critical-comms .critical-comms-body {
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
   --Button-primary-negative-color: var(--color-contrast);
-  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
   --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
   --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
   --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
   --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
   --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }
 /* Button Styles */
 .wds-Button {
@@ -787,16 +770,12 @@ div.critical-comms .critical-comms-body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: #00a2dd;
   background-color: var(--Button-background);
   border: none;
-  border-radius: 9999px;
   border-radius: var(--Button-border-radius);
   color: var(--Button-color);
   cursor: pointer;
-  padding: 8px 12px;
   padding: var(--Button-padding);
-  transition: color, background-color 150ms ease-in-out;
   transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 }
 .wds-Button:focus {
@@ -804,13 +783,11 @@ div.critical-comms .critical-comms-body {
   text-decoration: none;
 }
 .wds-Button:hover {
-  background-color: #008fc9;
   background-color: var(--Button-background-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .wds-Button:active {
-  background-color: #0081ba;
   background-color: var(--Button-background-active);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -825,7 +802,6 @@ div.critical-comms .critical-comms-body {
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
 .wds-Button:disabled:active {
-  background-color: #00a2dd;
   background-color: var(--Button-background);
 }
 .wds-Button--secondary {
@@ -863,14 +839,12 @@ div.critical-comms .critical-comms-body {
   --Button-background-hover: var(--Button-primary-negative-background-hover);
   --Button-background-active: var(--Button-primary-negative-background-active);
   --Button-color: var(--Button-primary-negative-color);
-  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }
 .wds-Button--negative.wds-Button--secondary {
   --Button-background: var(--Button-secondary-negative-background);
   --Button-background-hover: var(--Button-secondary-negative-background-hover);
   --Button-background-active: var(--Button-secondary-negative-background-active);
   --Button-color: var(--Button-secondary-negative-color);
-  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
 }
 .wds-Button--small {
   --Button-padding: var(--Button-size-small-padding);
@@ -903,9 +877,6 @@ div.critical-comms .critical-comms-body {
   margin-right: 0;
   margin-left: 5px;
 }
-.wds-Button-avatars .np-circle {
-  --circle-border-color: var(--Button-avatar-border-color);
-}
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
   color: var(--Button-color);
 }
@@ -963,6 +934,27 @@ div.critical-comms .critical-comms-body {
 [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
   transform: rotate(180deg);
 }
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+}
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -1442,34 +1434,175 @@ div.critical-comms .critical-comms-body {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
   cursor: pointer;
+  position: relative;
+}
+.np-circular-btn .tw-icon {
+  position: absolute;
+  top: 16px;
+  top: var(--size-16);
+  pointer-events: none;
+  color: white;
+  transition: color 0.15s ease-in-out;
+  width: 100%;
+  left: 0;
+}
+[dir="rtl"] .np-circular-btn .tw-icon {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 320px) {
+  .np-circular-btn .tw-icon {
+    top: 12px;
+    top: var(--size-12);
+  }
+}
+.np-circular-btn .tw-icon > svg {
+  margin: 0 auto;
+}
+.np-theme-personal .np-circular-btn {
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.np-theme-personal .np-circular-btn .tw-icon,
+.np-theme-personal .np-circular-btn .tw-icon:hover,
+.np-theme-personal .np-circular-btn .tw-icon:active {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
+  color: var(--color-contrast) !important;
+}
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
+  color: var(--color-sentiment-negative) !important;
+}
+.np-circular-btn.accent .np-circular-btn__label {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #008fc9;
+  color: var(--color-interactive-accent-hover);
+}
+.np-circular-btn.accent:active .np-circular-btn__label,
+.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+  color: #0081ba;
+  color: var(--color-interactive-accent-active);
 }
-.np-circular-btn-primary-default .np-circular-btn-label,
-.np-circular-btn-secondary-default .np-circular-btn-label {
+.np-circular-btn.accent.secondary .tw-icon {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-circular-btn.positive .np-circular-btn__label {
+  color: #2ead4b;
+  color: var(--color-interactive-positive);
+}
+.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #069939;
+  color: var(--color-interactive-positive-hover);
+}
+.np-circular-btn.positive:active .np-circular-btn__label,
+.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
+  color: #008b2b;
+  color: var(--color-interactive-positive-active);
+}
+.np-circular-btn.positive.secondary .tw-icon {
+  color: #2ead4b;
+  color: var(--color-interactive-positive);
+}
+.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-circular-btn.negative .np-circular-btn__label {
+  color: #e74848;
+  color: var(--color-interactive-negative);
+}
+.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #d03238;
+  color: var(--color-interactive-negative-hover);
+}
+.np-circular-btn.negative:active .np-circular-btn__label,
+.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
+  color: #bf1e2c;
+  color: var(--color-interactive-negative-active);
+}
+.np-circular-btn.negative.secondary .tw-icon {
+  color: #e74848;
+  color: var(--color-interactive-negative);
+}
+.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
   color: var(--color-interactive-primary);
 }
-.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
-.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
   color: var(--color-interactive-primary-hover);
 }
-.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
-.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
+.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
   color: var(--color-interactive-primary-active);
 }
-.np-circular-btn-primary-negative .np-circular-btn-label,
-.np-circular-btn-secondary-negative .np-circular-btn-label {
-  color: var(--color-sentiment-negative-primary);
+.np-theme-personal .np-circular-btn.accent.secondary .tw-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
 }
-.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
-.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
-  color: var(--color-sentiment-negative-primary-hover);
+.np-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }
-.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
-.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
-  color: var(--color-sentiment-negative-primary-active);
+.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
+  color: var(--color-interactive-primary);
 }
-.np-circular-btn-disabled {
-  cursor: not-allowed;
+.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: var(--color-interactive-primary-hover);
+}
+.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
+  color: var(--color-interactive-primary-active);
+}
+.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
+  color: var(--color-sentiment-negative);
+}
+.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: var(--color-sentiment-negative-hover);
+}
+.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
+  color: var(--color-sentiment-negative-active);
+}
+.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
+  color: var(--color-sentiment-negative);
+}
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }
 .np-circle {
   border-radius: 9999px;

package/build/styles/button/Button.css

@@ -1,4 +1,4 @@
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
   --Button-size-small-padding: 5px var(--size-12);
   --Button-size-medium-padding: var(--size-8) var(--size-12);
   --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
   --Button-secondary-background: var(--color-interactive-neutral);
@@ -27,31 +26,15 @@
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
   --Button-primary-negative-color: var(--color-contrast);
-  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
   --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
   --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
   --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
   --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
   --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }
 /* Button Styles */
 .wds-Button {
@@ -69,16 +52,12 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: #00a2dd;
   background-color: var(--Button-background);
   border: none;
-  border-radius: 9999px;
   border-radius: var(--Button-border-radius);
   color: var(--Button-color);
   cursor: pointer;
-  padding: 8px 12px;
   padding: var(--Button-padding);
-  transition: color, background-color 150ms ease-in-out;
   transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 }
 .wds-Button:focus {
@@ -86,13 +65,11 @@
   text-decoration: none;
 }
 .wds-Button:hover {
-  background-color: #008fc9;
   background-color: var(--Button-background-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .wds-Button:active {
-  background-color: #0081ba;
   background-color: var(--Button-background-active);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -107,7 +84,6 @@
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
 .wds-Button:disabled:active {
-  background-color: #00a2dd;
   background-color: var(--Button-background);
 }
 .wds-Button--secondary {
@@ -145,14 +121,12 @@
   --Button-background-hover: var(--Button-primary-negative-background-hover);
   --Button-background-active: var(--Button-primary-negative-background-active);
   --Button-color: var(--Button-primary-negative-color);
-  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }
 .wds-Button--negative.wds-Button--secondary {
   --Button-background: var(--Button-secondary-negative-background);
   --Button-background-hover: var(--Button-secondary-negative-background-hover);
   --Button-background-active: var(--Button-secondary-negative-background-active);
   --Button-color: var(--Button-secondary-negative-color);
-  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
 }
 .wds-Button--small {
   --Button-padding: var(--Button-size-small-padding);
@@ -185,9 +159,6 @@
   margin-right: 0;
   margin-left: 5px;
 }
-.wds-Button-avatars .np-circle {
-  --circle-border-color: var(--Button-avatar-border-color);
-}
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
   color: var(--Button-color);
 }
@@ -245,3 +216,24 @@
 [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
   transform: rotate(180deg);
 }
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+}
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}

package/build/styles/button/Button.vars.css

@@ -1,4 +1,4 @@
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
   --Button-size-small-padding: 5px var(--size-12);
   --Button-size-medium-padding: var(--size-8) var(--size-12);
   --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
   --Button-secondary-background: var(--color-interactive-neutral);
@@ -27,29 +26,13 @@
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
   --Button-primary-negative-color: var(--color-contrast);
-  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
   --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
   --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
   --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
   --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
   --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }