Rearrange foreground/text colors

RocketChat · Apr 19, 2020 · ea480fd · ea480fd
1 parent bbdbe41
commit ea480fd
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 81 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png
diff --git a/packages/fuselage/src/components/Avatar/styles.scss b/packages/fuselage/src/components/Avatar/styles.scss
@@ -1,7 +1,7 @@
 @use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
-$avatar-stack-background-color: theme('avatar-background-color', colors.paper());
+$avatar-stack-background-color: theme('avatar-background-color', colors.surface());
 
 .rcx-avatar {
   display: inline-flex;

diff --git a/packages/fuselage/src/components/Box/PlainText.stories.mdx b/packages/fuselage/src/components/Box/PlainText.stories.mdx
@@ -35,7 +35,6 @@ import { Box } from '../..';
       <Box textStyle='p1' textColor='default'>Default</Box>
       <Box textStyle='p1' textColor='info'>Info</Box>
       <Box textStyle='p1' textColor='hint'>Hint</Box>
-      <Box textStyle='p1' textColor='disabled-label'>Disabled label</Box>
       <Box textStyle='p1' textColor='disabled'>Disabled</Box>
       <Box textStyle='p1' textColor='alternative'>Alternative</Box>
       <Box textStyle='p1' textColor='primary'>Primary</Box>

diff --git a/packages/fuselage/src/components/Box/index.js b/packages/fuselage/src/components/Box/index.js
@@ -41,7 +41,7 @@ Box.propTypes = {
   richText: PropTypes.oneOf(['inline', 'block']),
   style: PropTypes.object,
   textColor: PropTypes.oneOf([
-    'default', 'info', 'hint', 'disabled-label', 'disabled', 'alternative',
+    'default', 'info', 'hint', 'disabled', 'alternative',
     'primary', 'success', 'danger', 'warning',
   ]),
   textStyle: PropTypes.oneOf([

diff --git a/packages/fuselage/src/components/Tabs/styles.scss b/packages/fuselage/src/components/Tabs/styles.scss
@@ -1,4 +1,17 @@
 @use '../../styles/lengths.scss';
+@use '../../styles/colors.scss';
+
+$tabs-background-color: theme('tabs-background-color', transparent);
+$tabs-border-color: theme('tabs-border-color', transparent);
+$tabs-color: theme('tabs-color', colors.neutral(600));
+$tabs-delimiter-color: theme('tabs-color', colors.neutral(400));
+$tabs-selected-color: theme('tabs-selected-color', colors.primary(500));
+$tabs-selected-border-color: theme('tabs-selected-border-color', colors.primary(500));
+$tabs-hover-color: theme('tabs-hover-border-color', colors.neutral(700));
+$tabs-active-color: theme('tabs-active-color', colors.neutral(800));
+$tabs-focus-border-color: theme('tabs-focus-border-color', colors.primary(500));
+$tabs-focus-shadow-color: theme('tabs-focus-shadow-color', colors.primary(100));
+$tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500));
 
 // TODO: Indication that there are more tab__items left to scroll (some sort of shadow maybe)
 .rcx-tabs {

diff --git a/packages/fuselage/src/components/Tag/styles.scss b/packages/fuselage/src/components/Tag/styles.scss
@@ -1,5 +1,21 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
+$tag-colors-secondary-color: theme('tag-colors-secondary-color', colors.foreground(primary));
+$tag-colors-secondary-background-color: theme('tag-colors-secondary-background-color', colors.primary(100));
+
+$tag-colors-primary-color: theme('tag-colors-primary-color', colors.foreground(alternative));
+$tag-colors-primary-background-color: theme('tag-colors-primary-background-color', colors.primary(500));
+
+$tag-colors-danger-color: theme('tag-colors-danger-color', colors.foreground(alternative));
+$tag-colors-danger-background-color: theme('tag-colors-danger-background-color', colors.danger(500));
+
+$tag-colors-ghost-color: theme('tag-colors-ghost-color', colors.foreground(alternative));
+$tag-colors-ghost-background-color: theme('tag-colors-ghost-background-color', colors.neutral(700));
+
+$tag-colors-disabled-color: theme('tag-colors-disabled-color', colors.foreground(hint));
+$tag-colors-disabled-background-color: theme('tag-colors-disabled-background-color', colors.neutral(400));
+
 .rcx-tag {
   display: inline-block;
 

diff --git a/packages/fuselage/src/components/Tooltip/styles.scss b/packages/fuselage/src/components/Tooltip/styles.scss
@@ -2,7 +2,7 @@
 @use '../../styles/lengths.scss';
 
 $tooltip-background-color: theme('tooltip-background-color', colors.neutral(900));
-$tooltip-text-color: theme('tooltip-text-color', colors.paper());
+$tooltip-text-color: theme('tooltip-text-color', colors.surface());
 
 @mixin triangle-direction($direction) {
   &::after {

diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
@@ -43,18 +43,6 @@
   @return var(_get-varname(primary, $grade, $alpha), _get-color(b, $grade, $alpha));
 }
 
-@function link($grade, $alpha: null) {
-  @return var(_get-varname(link, $grade, $alpha), _get-color(b, $grade, $alpha));
-}
-
-@function visited-link($grade, $alpha: null) {
-  @return var(_get-varname(visited-link, $grade, $alpha), _get-color(p, $grade, $alpha));
-}
-
-@function active-link($grade, $alpha: null) {
-  @return var(_get-varname(active-link, $grade, $alpha), _get-color(r, $grade, $alpha));
-}
-
 @function info($grade, $alpha: null) {
   @return var(_get-varname(info, $grade, $alpha), _get-color(b, $grade, $alpha));
 }
@@ -71,10 +59,47 @@
   @return var(_get-varname(danger, $grade, $alpha), _get-color(r, $grade, $alpha));
 }
 
-@function paper($alpha: null) {
-  @if $alpha != null {
-    @return var(--rcx-color-paper-#{ $alpha * 100 }, rgba(255, 255, 255, $alpha));
+@function surface() {
+  @return var(--rcx-color-surface, white);
+}
+
+@function foreground($type) {
+  @if $type == 'default' {
+    @return var(--rcx-color-foreground-default, map-get(token-colors.$colors, n800));
+  }
+  @else if $type == 'info' {
+    @return var(--rcx-color-foreground-info, map-get(token-colors.$colors, n700));
+  }
+  @else if $type == 'hint' {
+    @return var(--rcx-color-foreground-hint, map-get(token-colors.$colors, n600));
+  }
+  @else if $type == 'disabled' {
+    @return var(--rcx-color-foreground-disabled, map-get(token-colors.$colors, n400));
+  }
+  @else if $type == 'alternative' {
+    @return var(--rcx-color-foreground-alternative, white);
+  }
+  @else if $type == 'primary' {
+    @return var(--rcx-color-foreground-primary, map-get(token-colors.$colors, b500));
+  }
+  @else if $type == 'success' {
+    @return var(--rcx-color-foreground-success, map-get(token-colors.$colors, g500));
+  }
+  @else if $type == 'danger' {
+    @return var(--rcx-color-foreground-danger, map-get(token-colors.$colors, r500));
+  }
+  @else if $type == 'warning' {
+    @return var(--rcx-color-foreground-warning, map-get(token-colors.$colors, y700));
+  }
+  @else if $type == 'link' {
+    @return var(--rcx-color-foreground-link, map-get(token-colors.$colors, b500));
+  }
+  @else if $type == 'visited-link' {
+    @return var(--rcx-color-foreground-visited-link, map-get(token-colors.$colors, p500));
+  }
+  @else if $type == 'active-link' {
+    @return var(--rcx-color-foreground-active-link, map-get(token-colors.$colors, r500));
   }
 
-  @return var(--rcx-color-paper, white);
+  @error 'invalid foreground type';
 }
diff --git a/packages/fuselage/src/styles/primitives/rich-text.scss b/packages/fuselage/src/styles/primitives/rich-text.scss
@@ -32,17 +32,17 @@
     &:link {
       text-decoration: none;
 
-      color: colors.link(500);
+      color: colors.foreground(link);
     }
 
     &:visited,
     &.is-visited {
-      color: colors.visited-link(500);
+      color: colors.foreground(visited-link);
     }
 
     &:active,
     &.is-active {
-      color: colors.active-link(500);
+      color: colors.foreground(active-link);
     }
 
     &:hover,

diff --git a/packages/fuselage/src/styles/primitives/tile.scss b/packages/fuselage/src/styles/primitives/tile.scss
@@ -3,19 +3,19 @@
 
 %tile-0 {
   border-radius: lengths.border-radius(2);
-  background-color: colors.paper();
+  background-color: colors.surface();
   @include use-no-shadow;
 }
 
 %tile-1 {
   border-radius: lengths.border-radius(2);
-  background-color: colors.paper();
+  background-color: colors.surface();
   box-shadow: 0 0 to-rem(12) 0 rgba(47, 52, 61, 0.1);
 }
 
 %tile-2 {
   border-radius: lengths.border-radius(2);
-  background-color: colors.paper();
+  background-color: colors.surface();
   box-shadow:
     0 0 to-rem(2) 0 rgba(47, 52, 61, 0.08),
     0 0 to-rem(12) 0 rgba(47, 52, 61, 0.12);

diff --git a/packages/fuselage/src/styles/variables/all.scss b/packages/fuselage/src/styles/variables/all.scss
@@ -3,5 +3,3 @@
 @import './input-colors.scss';
 @import './text-colors.scss';
 @import './text-styles.scss';
-@import './tabs-colors.scss';
-@import './tag-colors.scss';
diff --git a/packages/fuselage/src/styles/variables/button-colors.scss b/packages/fuselage/src/styles/variables/button-colors.scss
@@ -2,7 +2,7 @@
 
 $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.paper());
+$button-colors-primary-color: theme('button-colors-primary-color', colors.foreground(alternative));
 $button-colors-primary-hover-background-color: theme('button-colors-primary-hover-background-color', colors.primary(600));
 $button-colors-primary-hover-border-color: theme('button-colors-primary-hover-border-color', colors.primary(600));
 $button-colors-primary-active-background-color: theme('button-colors-primary-active-background-color', colors.primary(700));
@@ -12,7 +12,7 @@ $button-colors-primary-focus-border-color: theme('button-colors-primary-focus-bo
 $button-colors-primary-focus-shadow-color: theme('button-colors-primary-focus-shadow-color', colors.primary(100));
 $button-colors-primary-disabled-background-color: theme('button-colors-primary-disabled-background-color', colors.primary(200));
 $button-colors-primary-disabled-border-color: theme('button-colors-primary-disabled-border-color', colors.primary(200));
-$button-colors-primary-disabled-color: theme('button-colors-primary-disabled-color', colors.paper());
+$button-colors-primary-disabled-color: theme('button-colors-primary-disabled-color', colors.foreground(alternative));
 
 $button-colors-secondary-background-color: theme('button-colors-secondary-background-color', colors.neutral(300));
 $button-colors-secondary-border-color: theme('button-colors-secondary-border-color', colors.neutral(300));
@@ -30,7 +30,7 @@ $button-colors-secondary-disabled-color: theme('button-colors-secondary-disabled
 
 $button-colors-danger-background-color: theme('button-colors-danger-background-color', colors.danger(500));
 $button-colors-danger-border-color: theme('button-colors-danger-border-color', colors.danger(500));
-$button-colors-danger-color: theme('button-colors-danger-color', colors.paper());
+$button-colors-danger-color: theme('button-colors-danger-color', colors.foreground(alternative));
 $button-colors-danger-hover-background-color: theme('button-colors-danger-hover-background-color', colors.danger(600));
 $button-colors-danger-hover-border-color: theme('button-colors-danger-hover-border-color', colors.danger(600));
 $button-colors-danger-active-background-color: theme('button-colors-danger-active-background-color', colors.danger(700));
@@ -40,25 +40,25 @@ $button-colors-danger-focus-border-color: theme('button-colors-danger-focus-bord
 $button-colors-danger-focus-shadow-color: theme('button-colors-danger-focus-shadow-color', colors.danger(100));
 $button-colors-danger-disabled-background-color: theme('button-colors-danger-disabled-background-color', colors.danger(200));
 $button-colors-danger-disabled-border-color: theme('button-colors-danger-disabled-border-color', colors.danger(200));
-$button-colors-danger-disabled-color: theme('button-colors-danger-disabled-color', colors.paper());
+$button-colors-danger-disabled-color: theme('button-colors-danger-disabled-color', colors.foreground(alternative));
 
-$button-colors-empty-background-color: theme('button-colors-empty-background-color', colors.paper());
+$button-colors-empty-background-color: theme('button-colors-empty-background-color', colors.surface());
 $button-colors-empty-border-color: theme('button-colors-empty-border-color', colors.neutral(400));
-$button-colors-empty-color: theme('button-colors-empty-color', colors.paper());
-$button-colors-empty-hover-background-color: theme('button-colors-empty-hover-background-color', colors.paper());
+$button-colors-empty-color: theme('button-colors-empty-color', colors.foreground(alternative));
+$button-colors-empty-hover-background-color: theme('button-colors-empty-hover-background-color', colors.surface());
 $button-colors-empty-hover-border-color: theme('button-colors-empty-hover-border-color', colors.neutral(500));
-$button-colors-empty-active-background-color: theme('button-colors-empty-active-background-color', colors.paper());
+$button-colors-empty-active-background-color: theme('button-colors-empty-active-background-color', colors.surface());
 $button-colors-empty-active-border-color: theme('button-colors-empty-active-border-color', colors.neutral(600));
-$button-colors-empty-focus-background-color: theme('button-colors-empty-focus-background-color', colors.paper());
+$button-colors-empty-focus-background-color: theme('button-colors-empty-focus-background-color', colors.surface());
 $button-colors-empty-focus-border-color: theme('button-colors-empty-focus-border-color', colors.primary(500));
 $button-colors-empty-focus-shadow-color: theme('button-colors-empty-focus-shadow-color', colors.primary(100));
 $button-colors-empty-disabled-background-color: theme('button-colors-empty-disabled-background-color', colors.neutral(200));
 $button-colors-empty-disabled-border-color: theme('button-colors-empty-disabled-border-color', colors.neutral(200));
-$button-colors-empty-disabled-color: theme('button-colors-empty-disabled-color', colors.paper());
+$button-colors-empty-disabled-color: theme('button-colors-empty-disabled-color', colors.foreground(alternative));
 
 $button-colors-off-background-color: theme('button-colors-off-background-color', colors.neutral(400));
 $button-colors-off-border-color: theme('button-colors-off-border-color', colors.neutral(400));
-$button-colors-off-color: theme('button-colors-off-color', colors.paper());
+$button-colors-off-color: theme('button-colors-off-color', colors.foreground(alternative));
 $button-colors-off-hover-background-color: theme('button-colors-off-hover-background-color', colors.neutral(500));
 $button-colors-off-hover-border-color: theme('button-colors-off-hover-border-color', colors.neutral(500));
 $button-colors-off-active-background-color: theme('button-colors-off-active-background-color', colors.neutral(600));

diff --git a/packages/fuselage/src/styles/variables/input-colors.scss b/packages/fuselage/src/styles/variables/input-colors.scss
@@ -1,6 +1,6 @@
 @use '../colors.scss';
 
-$input-colors-background-color: theme('input-colors-background-color', colors.paper());
+$input-colors-background-color: theme('input-colors-background-color', colors.surface());
 $input-colors-border-color: theme('input-colors-border-color', colors.neutral(500));
 $input-colors-color: theme('input-colors-color', colors.neutral(800));
 $input-colors-placeholder-color: theme('input-colors-placeholder-color', colors.neutral(600));
@@ -15,7 +15,7 @@ $input-colors-disabled-background-color: theme('input-colors-disabled-background
 $input-colors-disabled-border-color: theme('input-colors-disabled-border-color', colors.neutral(500));
 $input-colors-disabled-color: theme('input-colors-disabled-color', colors.neutral(800));
 
-$input-colors-invalid-background-color: theme('input-colors-invalid-background-color', colors.paper());
+$input-colors-invalid-background-color: theme('input-colors-invalid-background-color', colors.surface());
 $input-colors-invalid-border-color: theme('input-colors-invalid-border-color', colors.danger(500));
 $input-colors-invalid-color: theme('input-colors-invalid-color', colors.danger(500));
 $input-colors-invalid-placeholder-color: theme('input-colors-invalid-placeholder-color', colors.neutral(600));

diff --git a/packages/fuselage/src/styles/variables/tabs-colors.scss b/packages/fuselage/src/styles/variables/tabs-colors.scss
diff --git a/packages/fuselage/src/styles/variables/tag-colors.scss b/packages/fuselage/src/styles/variables/tag-colors.scss
diff --git a/packages/fuselage/src/styles/variables/text-colors.scss b/packages/fuselage/src/styles/variables/text-colors.scss
@@ -1,21 +1,19 @@
 @use '../colors.scss';
 
-$text-colors-default: theme('text-colors-default', colors.neutral(800));
-$text-colors-info: theme('text-colors-info', colors.neutral(700));
-$text-colors-hint: theme('text-colors-hint', colors.neutral(600));
-$text-colors-disabled-label: theme('text-colors-disabled-label', colors.neutral(500));
-$text-colors-disabled: theme('text-colors-disabled', colors.neutral(400));
-$text-colors-alternative: theme('text-colors-alternative', colors.paper());
-$text-colors-primary: theme('text-colors-primary', colors.primary(500));
-$text-colors-success: theme('text-colors-success', colors.success(500));
-$text-colors-danger: theme('text-colors-danger', colors.danger(500));
-$text-colors-warning: theme('text-colors-warning', colors.warning(700));
+$text-colors-default: theme('text-colors-default', colors.foreground(default));
+$text-colors-info: theme('text-colors-info', colors.foreground(info));
+$text-colors-hint: theme('text-colors-hint', colors.foreground(hint));
+$text-colors-disabled: theme('text-colors-disabled', colors.foreground(disabled));
+$text-colors-alternative: theme('text-colors-alternative', colors.foreground(alternative));
+$text-colors-primary: theme('text-colors-primary', colors.foreground(primary));
+$text-colors-success: theme('text-colors-success', colors.foreground(success));
+$text-colors-danger: theme('text-colors-danger', colors.foreground(danger));
+$text-colors-warning: theme('text-colors-warning', colors.foreground(warning));
 
 $text-colors: (
   default: $text-colors-default,
   info: $text-colors-info,
   hint: $text-colors-hint,
-  disabled-label: $text-colors-disabled-label,
   disabled: $text-colors-disabled,
   alternative: $text-colors-alternative,
   primary: $text-colors-primary,