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

package/src/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/src/button/Button.less

@@ -90,7 +90,6 @@
       --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--secondary {
@@ -98,7 +97,6 @@
       --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);
     }
   }
 
@@ -138,10 +136,6 @@
       margin-left: 5px;
     }
 
-    .np-circle {
-      --circle-border-color: var(--Button-avatar-border-color);
-    }
-
     .np-avatar-view .np-avatar-view-content {
       color: var(--Button-color);
     }
@@ -216,3 +210,33 @@
     }
   }
 }
+
+/* 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);
+
+    .wds-Button--secondary.wds-Button--negative &,
+    .wds-Button--secondary &,
+    .wds-Button--tertiary &,
+    .wds-Button--minimal & {
+      .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
+        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+      }
+    }
+    .wds-Button--primary &,
+    .wds-Button--primary.wds-Button--negative & {
+      .np-theme-personal--dark &,
+      .np-theme-personal--forest-green & {
+        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+      }
+    }
+    .wds-Button--tertiary &,
+    .wds-Button--minimal & {
+      .np-theme-personal--bright-green & {
+        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+      }
+    }
+  }
+}

package/src/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);
 }

package/src/button/Button.vars.less

@@ -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;
 
@@ -31,32 +30,11 @@
   --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: #FFFFFF33;
 
   --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: #A8200D1F;
-}
-
-.np-theme-personal--dark {
-  .wds-Button {
-    --Button-primary-netative-avatar-border-color: #0E0F0C1F;
-  }
-}
-
-.np-theme-personal--forest-green {
-  .wds-Button {
-    --color-interactive-neutral: #9FE87033;
-    --color-interactive-neutral-hover: #CDFFAD33;
-    --color-interactive-neutral-active: #ECFFE033;
-    --color-sentiment-negative-secondary: #FFC4C233;
-    --color-sentiment-negative-secondary-hover: #FFDCDB33;
-    --color-sentiment-negative-secondary-active: #FFEBEB33;
-    --Button-primary-netative-avatar-border-color: #0E0F0C1F;
-    --Button-secondary-netative-avatar-border-color: #0E0F0C1F;
-  }
 }
 
 .np-theme-personal--bright-green {
@@ -64,6 +42,5 @@
     --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);
   }
 }

package/src/circularButton/CircularButton.css

@@ -2,32 +2,173 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
   cursor: pointer;
+  position: relative;
 }
-.np-circular-btn-primary-default .np-circular-btn-label,
-.np-circular-btn-secondary-default .np-circular-btn-label {
+.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.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-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
+  color: var(--color-interactive-primary);
+}
+.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-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.negative.secondary .tw-icon {
+  color: var(--color-sentiment-negative);
 }
-.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.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-circular-btn-disabled {
-  cursor: not-allowed;
+.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }

package/src/circularButton/CircularButton.less

@@ -1,36 +1,105 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import "./_button-label-states.less";
+
 .np-circular-btn {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
   cursor: pointer;
+  position: relative;
 
-  &-primary-default,
-  &-secondary-default {
-    .np-circular-btn-label {
-      color: var(--color-interactive-primary);
-      &:not(.disabled, :disabled):hover {
-        color: var(--color-interactive-primary-hover);
-      }
-      &:not(.disabled, :disabled):active {
-        color: var(--color-interactive-primary-active);
-      }
+  .tw-icon {
+    position: absolute;
+    top: var(--size-16);
+    pointer-events: none;
+    color: white;
+    transition: color 0.15s ease-in-out;
+    width: 100%;
+    .left(0);
+
+    @media (--screen-400-zoom) {
+      top: var(--size-12);
+    }
+
+    > svg {
+      margin: 0 auto;
     }
   }
 
-  &-primary-negative,
-  &-secondary-negative {
-    .np-circular-btn-label {
-      color: var(--color-sentiment-negative-primary);
-      &:not(.disabled, :disabled):hover {
-        color: var(--color-sentiment-negative-primary-hover);
-      }
-      &:not(.disabled, :disabled):active {
-        color: var(--color-sentiment-negative-primary-active);
+  .np-theme-personal & {
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    .tw-icon {
+      &,
+      &:hover,
+      &:active {
+        color: var(--color-interactive-control);
       }
     }
-  }
 
-  &-disabled {
-    cursor: not-allowed;
+    &.negative .tw-icon,
+    &.negative.secondary:not(.disabled, :disabled):hover .tw-icon,
+    &.negative.secondary:not(.disabled, :disabled):active .tw-icon {
+      // TODO, this will need to be removed when we update our CSS architecture
+      color: var(--color-contrast) !important;
+    }
+
+    &.negative.secondary:not(.disabled, :disabled) .tw-icon {
+      // TODO, this will need to be removed when we update our CSS architecture
+      color: var(--color-sentiment-negative) !important;
+    }
   }
 }
+
+.button-label-states(
+  np-circular-btn,
+  accent,
+  var(--color-interactive-accent),
+  var(--color-interactive-accent-hover),
+  var(--color-interactive-accent-active)
+);
+
+.button-label-states(
+  np-circular-btn,
+  positive,
+  var(--color-interactive-positive),
+  var(--color-interactive-positive-hover),
+  var(--color-interactive-positive-active)
+);
+
+.button-label-states(
+  np-circular-btn,
+  negative,
+  var(--color-interactive-negative),
+  var(--color-interactive-negative-hover),
+  var(--color-interactive-negative-active)
+);
+
+.np-theme-personal {
+  .button-label-states(
+    np-circular-btn,
+    accent,
+    var(--color-interactive-primary),
+    var(--color-interactive-primary-hover),
+    var(--color-interactive-primary-active),
+    true
+  );
+
+  .button-label-states(
+    np-circular-btn,
+    positive,
+    var(--color-interactive-primary),
+    var(--color-interactive-primary-hover),
+    var(--color-interactive-primary-active),
+    true
+  );
+
+  .button-label-states(
+    np-circular-btn,
+    negative,
+    var(--color-sentiment-negative),
+    var(--color-sentiment-negative-hover),
+    var(--color-sentiment-negative-active),
+    true
+  );
+}