From 771ee0fec3efd3a8a9bbb81dd663ede0fa91ef9e Mon Sep 17 00:00:00 2001
From: Aileen Villanueva <aileenvl@gmail.com>
Date: Fri, 13 Dec 2024 11:53:27 -0600
Subject: [PATCH] fix: add new reverse token color for icon and fix semantic
 for light mode

---
 packages/ui-stencil/src/styles/_colors.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss
index 51ee075..80ce45e 100644
--- a/packages/ui-stencil/src/styles/_colors.scss
+++ b/packages/ui-stencil/src/styles/_colors.scss
@@ -63,6 +63,7 @@ $semanticColors: (
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
+    reverse: $gray50,
   ),
   shadow: (
     primary: white,
@@ -71,19 +72,15 @@ $semanticColors: (
 
 $elementColors: (
   'button-text': (
-    // TODO: example of how to use the color functions with semantic colors
-    // primary: color.adjust(text-color('primary', $semanticColors), $lightness: 10%),
-    primary: icon-color('primary', $semanticColors),
+    primary: icon-color('reverse', $semanticColors),
     secondary: text-color('secondary', $semanticColors),
     inactive: $gray500,
-    // todo: value to check with Angela
   ),
   'button-background': (
     primary: background-color('accent', $semanticColors),
     secondary: background-color('secondary', $semanticColors),
     'secondary-hover': background-color('tertiary', $semanticColors),
     inactive: $gray100,
-    // todo: value to check with Angela
   ),
   'button-border': (
     secondary: border-color('primary', $semanticColors),
@@ -136,6 +133,7 @@ $semanticColorsDark: (
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
+    reverse: $gray950,
   ),
   shadow: (
     primary: black,