fix(fuselage): Palette classes (#873)

RocketChat · Oct 19, 2022 · 6a3f3ff · 6a3f3ff
1 parent e03f7cc
commit 6a3f3ff
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 55 deletions.
diff --git 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/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/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
@@ -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
@@ -46,6 +46,18 @@ $message-background-color-highlight: functions.theme(
   colors.status-background(warning)
 );
 
+.rcx-message-container,
+.messages-list {
+  background-color: $message-background-color;
+}
+
+.rcx-message-container {
+  &:hover,
+  &:focus {
+    background-color: $message-background-color-focus;
+  }
+}
+
 .rcx-message {
   @include mixins.container();
   position: relative;
@@ -111,6 +123,8 @@ $message-background-color-highlight: functions.theme(
 
     min-width: 1px;
 
+    background-color: $message-background-color;
+
     &__wrapper {
       @include typography.use-with-truncated-text();
       display: flex;

diff --git 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/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/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
@@ -292,6 +292,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) {

diff --git 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 '[email protected]/fuselage-tokens/dist/button.scss';
 @use '[email protected]/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)),
 );