fix: Button ghost background var (#310)

RocketChat · Oct 25, 2020 · 872f325 · 872f325
1 parent fa6b31d
commit 872f325
Show file tree

Hide file tree

Showing 12 changed files with 14 additions and 7 deletions.
diff --git a/....loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png b/....loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Sidebar_TopBar_Default.png
diff --git a/.../.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png b/.../.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png
diff --git a/...selage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png b/...selage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_TopBar_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Sidebar_TopBar_Default.png
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -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",

diff --git a/packages/fuselage/src/components/Button/styles.scss b/packages/fuselage/src/components/Button/styles.scss
@@ -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 {

diff --git a/packages/fuselage/src/components/Sidebar/TopBar.js b/packages/fuselage/src/components/Sidebar/TopBar.js
@@ -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;
diff --git a/packages/fuselage/src/components/Sidebar/styles.scss b/packages/fuselage/src/components/Sidebar/styles.scss
@@ -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);
 

diff --git a/packages/fuselage/src/styles/variables/button-colors.scss b/packages/fuselage/src/styles/variables/button-colors.scss
@@ -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));