fix: Button ghost background var (#310)

Author: ggazzo

packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png

@@ -27,6 +27,7 @@
     "build": "run-s clean build:prod build:dev",
     "eslint": "eslint src",
     "stylelint": "stylelint 'src/**/*.scss'",
+    "fix": "stylelint --fix 'src/**/*.scss'",
     "lint": "run-s eslint stylelint",
     "lint-staged": "lint-staged",
     "test": "jest",

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png

@@ -132,14 +132,12 @@
   }
 
   &--ghost {
-    border-color: transparent;
-    background-color: transparent;
+    border-color: $button-colors-ghost-background-color;
+    background-color: $button-colors-ghost-border-color;
   }
 
   &--ghost-danger {
     color: colors.danger(500);
-    border-color: transparent;
-    background-color: transparent;
 
     &.disabled,
     &:disabled {
@@ -149,8 +147,6 @@
 
   &--ghost-success {
     color: colors.success(500);
-    border-color: transparent;
-    background-color: transparent;
 
     &.disabled,
     &:disabled {

packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png

@@ -26,6 +26,6 @@ TopBar.Avatar = Avatar;
 TopBar.Actions = Actions;
 TopBar.Action = (props) => <ActionButton small ghost {...props}/>;
 TopBar.Divider = () => <Divider mbs='neg-x2' mbe={0} />;
-TopBar.Title = (props) => <Box rcx-sidebar-top-bar__title fontScale='p2' color='neutral-900' withTruncatedText {...props} />;
+TopBar.Title = (props) => <Box rcx-sidebar-top-bar__title withTruncatedText {...props} />;
 
 export default TopBar;

packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png

@@ -49,6 +49,12 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
       padding-block: lengths.padding(16);
       padding-inline: lengths.padding(16);
     }
+
+    &__title {
+      @include typography.use-font-scale(p2);
+
+      color: colors.neutral(900);
+    }
   }
 
   &-item {
@@ -184,6 +190,7 @@ $sidebar-item-color-selected: theme('sidebar-item-color-selected', colors.foregr
 
   &-title {
     @include typography.use-font-scale(c2);
+    @include typography.use-with-truncated-text();
     padding-block: lengths.padding(12);
     padding-inline: lengths.padding(16);
 

packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png

@@ -1,5 +1,8 @@
 @use '../colors.scss';
 
+$button-colors-ghost-background-color: theme('button-colors-ghost-background-color', transparent);
+$button-colors-ghost-border-color: theme('button-colors-ghost-border-color', transparent);
+
 $button-colors-primary-background-color: theme('button-colors-primary-background-color', colors.primary(500));
 $button-colors-primary-border-color: theme('button-colors-primary-border-color', colors.primary(500));
 $button-colors-primary-color: theme('button-colors-primary-color', colors.foreground(alternative));