From 83c67875331da09067726883b6ef7b5116ae6c56 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 17 Oct 2022 14:01:45 -0300
Subject: [PATCH 1/6] merge develop

---
 .../fuselage/src/components/Avatar/Avatar.styles.scss    | 2 +-
 .../fuselage/src/components/Message/Messages.styles.scss | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Avatar/Avatar.styles.scss b/packages/fuselage/src/components/Avatar/Avatar.styles.scss
index dff9d0171c..e75ae1a094 100644
--- a/packages/fuselage/src/components/Avatar/Avatar.styles.scss
+++ b/packages/fuselage/src/components/Avatar/Avatar.styles.scss
@@ -57,7 +57,7 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
     flex-direction: row-reverse;
     justify-content: center;
 
-    color: #{$avatar-stack-background-color};
+    background-color: #{$avatar-stack-background-color};
 
     & > .rcx-avatar {
       margin: auto lengths.margin(-2);
diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index 1596181c00..c0c10036e7 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -23,7 +23,7 @@
 
 $message-background-color: functions.theme(
   'message-background-color',
-  colors.font(white)
+  colors.surface(light)
 );
 
 $message-background-color-focus: functions.theme(
@@ -46,6 +46,11 @@ $message-background-color-highlight: functions.theme(
   colors.status-background(warning)
 );
 
+.rcx-message-container,
+.messages-list {
+  background-color: $message-background-color;
+}
+
 .rcx-message {
   @include mixins.container();
   position: relative;
@@ -111,6 +116,8 @@ $message-background-color-highlight: functions.theme(
 
     min-width: 1px;
 
+    background-color: $message-background-color;
+
     &__wrapper {
       @include typography.use-with-truncated-text();
       display: flex;

From 4d50ce87f08373b7e57973adf57fd371ff47ef50 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 17 Oct 2022 14:16:36 -0300
Subject: [PATCH 2/6] change surface to background

---
 packages/fuselage/src/components/Message/Messages.styles.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index c0c10036e7..23c3773c24 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -23,12 +23,12 @@
 
 $message-background-color: functions.theme(
   'message-background-color',
-  colors.surface(light)
+  colors.background(light)
 );
 
 $message-background-color-focus: functions.theme(
   'message-background-color-focus',
-  colors.surface(tint)
+  colors.background(tint)
 );
 
 $message-background-color-selected: functions.theme(

From 8792d5067b912dbee453f0bf16ad4c92d0e49fa2 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 17 Oct 2022 14:26:56 -0300
Subject: [PATCH 3/6] revert

---
 packages/fuselage/src/components/Message/Messages.styles.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index 23c3773c24..c0c10036e7 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -23,12 +23,12 @@
 
 $message-background-color: functions.theme(
   'message-background-color',
-  colors.background(light)
+  colors.surface(light)
 );
 
 $message-background-color-focus: functions.theme(
   'message-background-color-focus',
-  colors.background(tint)
+  colors.surface(tint)
 );
 
 $message-background-color-selected: functions.theme(

From 4e0cee48d48d9f120ee8ed86c6012aa773b11203 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 19 Oct 2022 09:19:53 -0300
Subject: [PATCH 4/6] fix tokens

---
 .../src/components/Accordion/Accordion.styles.scss         | 6 +++---
 packages/fuselage/src/components/Badge/Badge.styles.scss   | 4 ++--
 packages/fuselage/src/components/Chip/Chip.styles.scss     | 2 ++
 .../fuselage/src/components/Message/Messages.styles.scss   | 7 +++++++
 packages/fuselage/src/components/Modal/Modal.styles.scss   | 2 +-
 packages/fuselage/src/components/Option/Option.styles.scss | 2 +-
 .../fuselage/src/components/Sidebar/Sidebar.styles.scss    | 2 +-
 packages/fuselage/src/components/Table/Table.styles.scss   | 4 ++--
 packages/fuselage/src/components/Tabs/Tabs.styles.scss     | 4 ++--
 packages/fuselage/src/styles/colors.scss                   | 1 +
 10 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/fuselage/src/components/Accordion/Accordion.styles.scss b/packages/fuselage/src/components/Accordion/Accordion.styles.scss
index ad81deb11e..8a8ffff901 100644
--- a/packages/fuselage/src/components/Accordion/Accordion.styles.scss
+++ b/packages/fuselage/src/components/Accordion/Accordion.styles.scss
@@ -35,12 +35,12 @@
 
     &.hover,
     &:hover {
-      background-color: colors.neutral(100);
+      background-color: colors.surface(tint);
     }
 
     &.focus,
     &:focus {
-      border-color: colors.primary(500);
+      border-color: colors.stroke(highlight);
       @include use-focus-shadow($outer-color: colors.primary(100));
     }
   }
@@ -49,7 +49,7 @@
     cursor: not-allowed;
 
     color: colors.font(disabled);
-    background-color: colors.neutral(100);
+    background-color: colors.surface(disabled);
   }
 }
 
diff --git a/packages/fuselage/src/components/Badge/Badge.styles.scss b/packages/fuselage/src/components/Badge/Badge.styles.scss
index 6bb120a2f6..d8293e1d7c 100644
--- a/packages/fuselage/src/components/Badge/Badge.styles.scss
+++ b/packages/fuselage/src/components/Badge/Badge.styles.scss
@@ -8,7 +8,7 @@ $badge-colors-secondary-color: theme(
 );
 $badge-colors-secondary-background-color: theme(
   'badge-colors-secondary-background-color',
-  colors.primary(100)
+  colors.surface(tint)
 );
 
 $badge-colors-primary-color: theme(
@@ -53,7 +53,7 @@ $badge-colors-disabled-color: theme(
 );
 $badge-colors-disabled-background-color: theme(
   'badge-colors-disabled-background-color',
-  colors.neutral(400)
+  colors.surface(neutral)
 );
 
 .rcx-badge {
diff --git a/packages/fuselage/src/components/Chip/Chip.styles.scss b/packages/fuselage/src/components/Chip/Chip.styles.scss
index a63554b914..1b358a63a8 100644
--- a/packages/fuselage/src/components/Chip/Chip.styles.scss
+++ b/packages/fuselage/src/components/Chip/Chip.styles.scss
@@ -4,6 +4,8 @@
 @use '../../styles/functions';
 @use '../../styles/primitives/button.scss';
 
+// to do: replace button with stroke
+
 $chip-background-color: functions.theme(
   'chip-background-color',
   colors.button(secondary-default)
diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index 23c3773c24..afd498f6c5 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -51,6 +51,13 @@ $message-background-color-highlight: functions.theme(
   background-color: $message-background-color;
 }
 
+.rcx-message-container {
+  &:hover,
+  &:focus {
+    background-color: $message-background-color-focus;
+  }
+}
+
 .rcx-message {
   @include mixins.container();
   position: relative;
diff --git a/packages/fuselage/src/components/Modal/Modal.styles.scss b/packages/fuselage/src/components/Modal/Modal.styles.scss
index 8370d7a838..b0327824b9 100644
--- a/packages/fuselage/src/components/Modal/Modal.styles.scss
+++ b/packages/fuselage/src/components/Modal/Modal.styles.scss
@@ -64,7 +64,7 @@ $modal-margin: theme('modal-margin', auto);
   }
 
   &__tagline {
-    color: colors.neutral(600);
+    color: colors.font(annotation);
 
     @include typography.use-font-scale(c2);
   }
diff --git a/packages/fuselage/src/components/Option/Option.styles.scss b/packages/fuselage/src/components/Option/Option.styles.scss
index 9b9b127c1b..a68e3334b4 100644
--- a/packages/fuselage/src/components/Option/Option.styles.scss
+++ b/packages/fuselage/src/components/Option/Option.styles.scss
@@ -102,7 +102,7 @@ $variants: (
 
   &:hover,
   &--focus {
-    background: colors.neutral(100);
+    background: colors.surface(tint);
   }
 
   &--selected {
diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
index 8d9ad34a23..f26de9db7b 100644
--- a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
+++ b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
@@ -31,7 +31,7 @@ $sidebar-item-color-hover: theme(
 );
 $sidebar-item-color-focus: theme(
   'sidebar-item-color-focus',
-  colors.neutral(900)
+  colors.surface(dark)
 );
 $sidebar-item-background-color-selected: theme(
   'sidebar-item-background-color-selected',
diff --git a/packages/fuselage/src/components/Table/Table.styles.scss b/packages/fuselage/src/components/Table/Table.styles.scss
index 27aabb1d6b..b4ac12b968 100644
--- a/packages/fuselage/src/components/Table/Table.styles.scss
+++ b/packages/fuselage/src/components/Table/Table.styles.scss
@@ -43,7 +43,7 @@
 
   &--striped {
     .rcx-table__row:nth-child(even) {
-      background-color: colors.neutral(100);
+      background-color: colors.surface(tint);
     }
   }
 
@@ -63,7 +63,7 @@
     background-color: colors.surface(light);
 
     &--selected {
-      background-color: colors.primary(100);
+      background-color: colors.surface(tinr);
 
       &.rcx-table__row--action {
         &:hover,
diff --git a/packages/fuselage/src/components/Tabs/Tabs.styles.scss b/packages/fuselage/src/components/Tabs/Tabs.styles.scss
index 9e4b9869bf..5e7e75fb19 100644
--- a/packages/fuselage/src/components/Tabs/Tabs.styles.scss
+++ b/packages/fuselage/src/components/Tabs/Tabs.styles.scss
@@ -45,11 +45,11 @@ $tabs-focus-shadow-color: theme(
 $tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500));
 $tabs-disabled-selected-color: theme(
   'tabs-disabled-selected-color',
-  colors.primary(200)
+  colors.status-background(info)
 );
 $tabs-disabled-selected-border-color: theme(
   'tabs-disabled-selected-border-color',
-  colors.primary(200)
+  colors.status-background(info)
 );
 
 .rcx-tabs__scroll-box {
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
index 37b5858e54..57bef06b84 100644
--- a/packages/fuselage/src/styles/colors.scss
+++ b/packages/fuselage/src/styles/colors.scss
@@ -291,6 +291,7 @@ $-neutral-alpha-level: (
   8: neutral(800, 0.08),
   10: neutral(800, 0.1),
   12: neutral(800, 0.12),
+  50: neutral(800, 0.5),
 );
 
 @function surface-neutral-alpha($level) {

From b6290bfaa7972603789e9e4ab7ade8b06dca957f Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 19 Oct 2022 14:29:11 -0300
Subject: [PATCH 5/6] fix IconButton tokens

---
 .../src/styles/variables/buttons.scss         | 91 ++++++++++---------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/packages/fuselage/src/styles/variables/buttons.scss b/packages/fuselage/src/styles/variables/buttons.scss
index 42552690a3..c030deac8a 100644
--- a/packages/fuselage/src/styles/variables/buttons.scss
+++ b/packages/fuselage/src/styles/variables/buttons.scss
@@ -1,4 +1,5 @@
 @use '../colors.scss';
+@use 'sass:map';
 @use '~@rocket.chat/fuselage-tokens/dist/button.scss';
 @use '~@rocket.chat/fuselage-tokens/dist/stroke.scss';
 @import './button-colors.scss';
@@ -157,79 +158,79 @@ $secondary-success: (
 $icon: (
   background-color: -color('icon', 'background-color', transparent),
   border-color: -color('icon', 'border-color', transparent),
-  color: -color('icon', 'color', colors.neutral(800)),
-  hover-background-color: -color('icon', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon', 'active-background-color', colors.neutral(500)),
-  active-border-color: -color('icon', 'active-border-color', colors.neutral(500)),
-  focus-background-color: -color('icon', 'focus-background-color', colors.neutral(400)),
-  focus-border-color: -color('icon', 'focus-border-color', colors.neutral(500)),
-  focus-shadow-color: -color('icon', 'focus-shadow-color', colors.neutral(100)),
+  color: -color('icon', 'color', map.get($secondary, color)),
+  hover-background-color: -color('icon', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon', 'active-background-color', map.get($secondary, active-background-color)),
+  active-border-color: -color('icon', 'active-border-color', map.get($secondary, active-border-color)),
+  focus-background-color: -color('icon', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon', 'disabled-color', colors.neutral(600)),
+  disabled-color: -color('icon', 'disabled-color', map.get($secondary, disabled-background-color)),
 );
 
 $icon-info: (
   background-color: -color('icon-info', 'background-color', transparent),
   border-color: -color('icon-info', 'border-color', transparent),
-  color: -color('icon-info', 'color', colors.info(600)),
-  hover-background-color: -color('icon-info', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-info', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-info', 'active-background-color', colors.info(400)),
-  active-border-color: -color('icon-info', 'active-border-color', colors.info(400)),
-  focus-background-color: -color('icon-info', 'focus-background-color', colors.info(300)),
-  focus-border-color: -color('icon-info', 'focus-border-color', colors.info(400)),
-  focus-shadow-color: -color('icon-info', 'focus-shadow-color', colors.info(100)),
+  color: -color('icon-info', 'color', map.get($primary, background-color)),
+  hover-background-color: -color('icon-info', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-info', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-info', 'active-background-color', map.get($primary, active-background-color)),
+  active-border-color: -color('icon-info', 'active-border-color', map.get($primary, active-background-color)),
+  focus-background-color: -color('icon-info', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-info', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-info', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-info', 'disabled-color', colors.info(200)),
+  disabled-color: -color('icon-info', 'disabled-color', map.get($primary, disabled-background-color)),
 );
 
 $icon-success: (
   background-color: -color('icon-success', 'background-color', transparent),
   border-color: -color('icon-success', 'border-color', transparent),
-  color: -color('icon-success', 'color', colors.success(800)),
-  hover-background-color: -color('icon-success', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-success', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-success', 'active-background-color', colors.success(400)),
-  active-border-color: -color('icon-success', 'active-border-color', colors.success(400)),
-  focus-background-color: -color('icon-success', 'focus-background-color', colors.success(300)),
-  focus-border-color: -color('icon-success', 'focus-border-color', colors.success(400)),
-  focus-shadow-color: -color('icon-success', 'focus-shadow-color', colors.success(100)),
+  color: -color('icon-success', 'color', map.get($success, background-color)),
+  hover-background-color: -color('icon-success', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-success', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-success', 'active-background-color', map.get($success, active-background-color)),
+  active-border-color: -color('icon-success', 'active-border-color', map.get($success, active-border-color)),
+  focus-background-color: -color('icon-success', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-success', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-success', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-success', 'disabled-color', colors.success(200)),
+  disabled-color: -color('icon-success', 'disabled-color', map.get($success, disabled-background-color)),
 );
 
 $icon-warning: (
   background-color: -color('icon-warning', 'background-color', transparent),
   border-color: -color('icon-warning', 'border-color', transparent),
-  color: -color('icon-warning', 'color', colors.warning(900)),
-  hover-background-color: -color('icon-warning', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-warning', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-warning', 'active-background-color', colors.warning(400)),
-  active-border-color: -color('icon-warning', 'active-border-color', colors.warning(400)),
-  focus-background-color: -color('icon-warning', 'focus-background-color', colors.warning(300)),
-  focus-border-color: -color('icon-warning', 'focus-border-color', colors.warning(400)),
-  focus-shadow-color: -color('icon-warning', 'focus-shadow-color', colors.warning(100)),
+  color: -color('icon-warning', 'color', map.get($warning, background-color)),
+  hover-background-color: -color('icon-warning', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-warning', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-warning', 'active-background-color', map.get($warning, active-background-color)),
+  active-border-color: -color('icon-warning', 'active-border-color', map.get($warning, active-border-color)),
+  focus-background-color: -color('icon-warning', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-warning', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-warning', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-warning', 'disabled-color', colors.warning(200)),
+  disabled-color: -color('icon-warning', 'disabled-color', map.get($warning, disabled-background-color)),
 );
 
 $icon-danger: (
   background-color: -color('icon-danger', 'background-color', transparent),
   border-color: -color('icon-danger', 'border-color', transparent),
-  color: -color('icon-danger', 'color', colors.danger(500)),
-  hover-background-color: -color('icon-danger', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-danger', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-danger', 'active-background-color', colors.danger(400)),
-  active-border-color: -color('icon-danger', 'active-border-color', colors.danger(400)),
-  focus-background-color: -color('icon-danger', 'focus-background-color', colors.danger(300)),
-  focus-border-color: -color('icon-danger', 'focus-border-color', colors.danger(400)),
-  focus-shadow-color: -color('icon-danger', 'focus-shadow-color', colors.danger(100)),
+  color: -color('icon-danger', 'color', map.get($danger, background-color)),
+  hover-background-color: -color('icon-danger', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-danger', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-danger', 'active-background-color', map.get($danger, active-background-color)),
+  active-border-color: -color('icon-danger', 'active-border-color', map.get($danger, active-border-color)),
+  focus-background-color: -color('icon-danger', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-danger', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-danger', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-danger', 'disabled-color', colors.danger(200)),
+  disabled-color: -color('icon-danger', 'disabled-color', map.get($danger, disabled-background-color)),
 );

From 097d5fa2ce5395882c4302825e6830852d4c92d8 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 19 Oct 2022 15:36:26 -0300
Subject: [PATCH 6/6] fix IconButton active state

---
 .../src/styles/variables/buttons.scss         | 91 ++++++++++---------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/packages/fuselage/src/styles/variables/buttons.scss b/packages/fuselage/src/styles/variables/buttons.scss
index 42552690a3..9b12ff446a 100644
--- a/packages/fuselage/src/styles/variables/buttons.scss
+++ b/packages/fuselage/src/styles/variables/buttons.scss
@@ -1,4 +1,5 @@
 @use '../colors.scss';
+@use 'sass:map';
 @use '~@rocket.chat/fuselage-tokens/dist/button.scss';
 @use '~@rocket.chat/fuselage-tokens/dist/stroke.scss';
 @import './button-colors.scss';
@@ -157,79 +158,79 @@ $secondary-success: (
 $icon: (
   background-color: -color('icon', 'background-color', transparent),
   border-color: -color('icon', 'border-color', transparent),
-  color: -color('icon', 'color', colors.neutral(800)),
-  hover-background-color: -color('icon', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon', 'active-background-color', colors.neutral(500)),
-  active-border-color: -color('icon', 'active-border-color', colors.neutral(500)),
-  focus-background-color: -color('icon', 'focus-background-color', colors.neutral(400)),
-  focus-border-color: -color('icon', 'focus-border-color', colors.neutral(500)),
-  focus-shadow-color: -color('icon', 'focus-shadow-color', colors.neutral(100)),
+  color: -color('icon', 'color', map.get($secondary, color)),
+  hover-background-color: -color('icon', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon', 'active-background-color', map.get($secondary, active-background-color)),
+  active-border-color: -color('icon', 'active-border-color', map.get($secondary, active-border-color)),
+  focus-background-color: -color('icon', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon', 'disabled-color', colors.neutral(600)),
+  disabled-color: -color('icon', 'disabled-color', map.get($secondary, disabled-background-color)),
 );
 
 $icon-info: (
   background-color: -color('icon-info', 'background-color', transparent),
   border-color: -color('icon-info', 'border-color', transparent),
-  color: -color('icon-info', 'color', colors.info(600)),
-  hover-background-color: -color('icon-info', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-info', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-info', 'active-background-color', colors.info(400)),
-  active-border-color: -color('icon-info', 'active-border-color', colors.info(400)),
-  focus-background-color: -color('icon-info', 'focus-background-color', colors.info(300)),
-  focus-border-color: -color('icon-info', 'focus-border-color', colors.info(400)),
-  focus-shadow-color: -color('icon-info', 'focus-shadow-color', colors.info(100)),
+  color: -color('icon-info', 'color', map.get($primary, background-color)),
+  hover-background-color: -color('icon-info', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-info', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-info', 'active-background-color', map.get($secondary, active-background-color)),
+  active-border-color: -color('icon-info', 'active-border-color', map.get($secondary, active-background-color)),
+  focus-background-color: -color('icon-info', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-info', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-info', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-info', 'disabled-color', colors.info(200)),
+  disabled-color: -color('icon-info', 'disabled-color', map.get($primary, disabled-background-color)),
 );
 
 $icon-success: (
   background-color: -color('icon-success', 'background-color', transparent),
   border-color: -color('icon-success', 'border-color', transparent),
-  color: -color('icon-success', 'color', colors.success(800)),
-  hover-background-color: -color('icon-success', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-success', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-success', 'active-background-color', colors.success(400)),
-  active-border-color: -color('icon-success', 'active-border-color', colors.success(400)),
-  focus-background-color: -color('icon-success', 'focus-background-color', colors.success(300)),
-  focus-border-color: -color('icon-success', 'focus-border-color', colors.success(400)),
-  focus-shadow-color: -color('icon-success', 'focus-shadow-color', colors.success(100)),
+  color: -color('icon-success', 'color', map.get($success, background-color)),
+  hover-background-color: -color('icon-success', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-success', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-success', 'active-background-color', map.get($secondary, active-background-color)),
+  active-border-color: -color('icon-success', 'active-border-color', map.get($secondary, active-border-color)),
+  focus-background-color: -color('icon-success', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-success', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-success', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-success', 'disabled-color', colors.success(200)),
+  disabled-color: -color('icon-success', 'disabled-color', map.get($success, disabled-background-color)),
 );
 
 $icon-warning: (
   background-color: -color('icon-warning', 'background-color', transparent),
   border-color: -color('icon-warning', 'border-color', transparent),
-  color: -color('icon-warning', 'color', colors.warning(900)),
-  hover-background-color: -color('icon-warning', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-warning', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-warning', 'active-background-color', colors.warning(400)),
-  active-border-color: -color('icon-warning', 'active-border-color', colors.warning(400)),
-  focus-background-color: -color('icon-warning', 'focus-background-color', colors.warning(300)),
-  focus-border-color: -color('icon-warning', 'focus-border-color', colors.warning(400)),
-  focus-shadow-color: -color('icon-warning', 'focus-shadow-color', colors.warning(100)),
+  color: -color('icon-warning', 'color', map.get($warning, background-color)),
+  hover-background-color: -color('icon-warning', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-warning', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-warning', 'active-background-color', map.get($secondary, active-background-color)),
+  active-border-color: -color('icon-warning', 'active-border-color', map.get($secondary, active-border-color)),
+  focus-background-color: -color('icon-warning', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-warning', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-warning', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-warning', 'disabled-color', colors.warning(200)),
+  disabled-color: -color('icon-warning', 'disabled-color', map.get($warning, disabled-background-color)),
 );
 
 $icon-danger: (
   background-color: -color('icon-danger', 'background-color', transparent),
   border-color: -color('icon-danger', 'border-color', transparent),
-  color: -color('icon-danger', 'color', colors.danger(500)),
-  hover-background-color: -color('icon-danger', 'hover-background-color', colors.neutral(400)),
-  hover-border-color: -color('icon-danger', 'hover-border-color', colors.neutral(400)),
-  active-background-color: -color('icon-danger', 'active-background-color', colors.danger(400)),
-  active-border-color: -color('icon-danger', 'active-border-color', colors.danger(400)),
-  focus-background-color: -color('icon-danger', 'focus-background-color', colors.danger(300)),
-  focus-border-color: -color('icon-danger', 'focus-border-color', colors.danger(400)),
-  focus-shadow-color: -color('icon-danger', 'focus-shadow-color', colors.danger(100)),
+  color: -color('icon-danger', 'color', map.get($danger, background-color)),
+  hover-background-color: -color('icon-danger', 'hover-background-color', map.get($secondary, hover-background-color)),
+  hover-border-color: -color('icon-danger', 'hover-border-color', map.get($secondary, hover-border-color)),
+  active-background-color: -color('icon-danger', 'active-background-color', map.get($secondary, active-background-color)),
+  active-border-color: -color('icon-danger', 'active-border-color', map.get($secondary, active-border-color)),
+  focus-background-color: -color('icon-danger', 'focus-background-color', map.get($secondary, focus-background-color)),
+  focus-border-color: -color('icon-danger', 'focus-border-color', map.get($secondary, focus-border-color)),
+  focus-shadow-color: -color('icon-danger', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
-  disabled-color: -color('icon-danger', 'disabled-color', colors.danger(200)),
+  disabled-color: -color('icon-danger', 'disabled-color', map.get($danger, disabled-background-color)),
 );