Add module for colors

RocketChat · Apr 19, 2020 · ca3746f · ca3746f
1 parent f96985f
commit ca3746f
Show file tree

Hide file tree

Showing 20 changed files with 255 additions and 233 deletions.
diff --git a/packages/fuselage/src/components/Accordion/styles.scss b/packages/fuselage/src/components/Accordion/styles.scss
@@ -1,9 +1,10 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-accordion {
   display: flex;
   flex-flow: column nowrap;
-  border-block-end-color: $colors-n300;
+  border-block-end-color: colors.neutral(300);
 
   border-block-end-width: lengths.border-width(2);
 }
@@ -27,28 +28,28 @@
   color: #{ $text-colors-default };
 
   border-width: lengths.border-width(2);
-  border-color: #{ $colors-n300 } transparent transparent;
+  border-color: colors.neutral(300) transparent transparent;
 
   &[tabindex] {
     @include clickable;
 
     &.hover,
     &:hover {
-      background-color: #{ $colors-n100 };
+      background-color: colors.neutral(100);
     }
 
     &.focus,
     &:focus {
-      border-color: #{ $colors-b500 };
-      @include use-focus-shadow($outer-color: $colors-b100);
+      border-color: colors.primary(500);
+      @include use-focus-shadow($outer-color: colors.primary(100));
     }
   }
 
   &--disabled {
     cursor: not-allowed;
 
     color: #{ $text-colors-disabled };
-    background-color: #{ $colors-n100 };
+    background-color: colors.neutral(100);
   }
 }
 

diff --git a/packages/fuselage/src/components/Avatar/styles.scss b/packages/fuselage/src/components/Avatar/styles.scss
@@ -1,6 +1,7 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
-$avatar-stack-background-color: theme('avatar-background-color', $colors-white);
+$avatar-stack-background-color: theme('avatar-background-color', colors.paper());
 
 .rcx-avatar {
   display: inline-flex;

diff --git a/packages/fuselage/src/components/Button/styles.scss b/packages/fuselage/src/components/Button/styles.scss
@@ -1,3 +1,4 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 %button-secondary-color { // TODO: primitive atomic component
@@ -85,11 +86,11 @@
   }
 
   &--danger {
-    color: $colors-r500;
+    color: colors.danger(500);
 
     &.disabled,
     &:disabled {
-      color: $colors-r100;
+      color: colors.danger(100);
     }
   }
 
@@ -107,13 +108,13 @@
   }
 
   &--ghost-danger {
-    color: $colors-r500;
+    color: colors.danger(500);
     border-color: transparent;
     background-color: transparent;
 
     &.disabled,
     &:disabled {
-      color: $colors-r100;
+      color: colors.danger(100);
     }
   }
 }
diff --git a/packages/fuselage/src/components/Callout/styles.scss b/packages/fuselage/src/components/Callout/styles.scss
@@ -1,3 +1,4 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-callout {
@@ -10,19 +11,19 @@
   border-radius: lengths.border-radius(2);
 
   &--type-info {
-    background-color: #{ $colors-b200 };
+    background-color: colors.info(200);
   }
 
   &--type-success {
-    background-color: #{ $colors-g200 };
+    background-color: colors.success(200);
   }
 
   &--type-warning {
-    background-color: #{ $colors-y200 };
+    background-color: colors.warning(200);
   }
 
   &--type-danger {
-    background-color: #{ $colors-r200 };
+    background-color: colors.danger(200);
   }
 }
 

diff --git a/packages/fuselage/src/components/Divider/styles.scss b/packages/fuselage/src/components/Divider/styles.scss
@@ -1,7 +1,8 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-divider {
   margin-block: lengths.margin(8);
 
-  border: lengths.border-width(1) solid #{ $colors-n300 };
+  border: lengths.border-width(1) solid colors.neutral(300);
 }
diff --git a/packages/fuselage/src/components/Modal/styles.scss b/packages/fuselage/src/components/Modal/styles.scss
@@ -1,5 +1,5 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
-@use 'sass:color';
 
 .rcx-modal {
   position: static;
@@ -23,7 +23,7 @@
     position: fixed;
     inset: lengths.inset(0);
 
-    background-color: color.change($colors-n500, $alpha: 0.5);
+    background-color: colors.neutral(500, $alpha: 0.5);
   }
 
   @include on-breakpoint(sm) {

diff --git a/packages/fuselage/src/components/Options/styles.scss b/packages/fuselage/src/components/Options/styles.scss
@@ -1,3 +1,4 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-option {
@@ -13,7 +14,7 @@
 
   &:hover,
   &--focus {
-    background: $colors-n400;
+    background: colors.neutral(400);
   }
 
   &--selected {

diff --git a/packages/fuselage/src/components/Table/styles.scss b/packages/fuselage/src/components/Table/styles.scss
@@ -1,3 +1,4 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-table {
@@ -29,7 +30,7 @@
       display: flex;
 
       content: '';
-      border-block-end: lengths.border-width(2) solid $colors-n300;
+      border-block-end: lengths.border-width(2) solid colors.neutral(300);
     }
   }
 
@@ -47,7 +48,7 @@
     &--action:hover,
     &--action:focus {
       @include clickable();
-      background-color: $colors-n200;
+      background-color: colors.neutral(200);
     }
   }
 

diff --git a/packages/fuselage/src/components/Throbber/styles.scss b/packages/fuselage/src/components/Throbber/styles.scss
@@ -1,3 +1,4 @@
+@use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 
 .rcx-throbber {
@@ -12,10 +13,10 @@
 
     border-radius: lengths.border-radius(full);
 
-    background-color: $colors-b500;
+    background-color: colors.primary(500);
 
     &--disabled {
-      background-color: $colors-n500;
+      background-color: colors.neutral(500);
     }
 
     &--inherit-color {

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

diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
@@ -0,0 +1,80 @@
+@use 'sass:color';
+@use '~@rocket.chat/fuselage-tokens/colors.scss' as token-colors;
+
+@function _check-grade($grade) {
+  @if $grade % 100 != 0 or $grade / 100 <= 0 or $grade / 100 > 9 {
+    @error 'invalid color grade';
+  }
+
+  @return $grade;
+}
+
+@function _get-color($prefix, $grade, $alpha) {
+  @if $grade % 100 != 0 or $grade / 100 <= 0 or $grade / 100 > 9 {
+    @error 'invalid color grade';
+  }
+
+  $base-color: map-get(token-colors.$colors, #{ $prefix }#{ $grade });
+
+  @if $alpha != null {
+    @return color.change($base-color, $alpha: $alpha);
+  }
+
+  @return $base-color;
+}
+
+@function _get-varname($prefix, $grade, $alpha) {
+  @if $grade % 100 != 0 or $grade / 100 <= 0 or $grade / 100 > 9 {
+    @error 'invalid color grade';
+  }
+
+  @if $alpha != null {
+    @return --rcx-color-#{ $prefix }-#{ $grade }-#{ $alpha * 100 };
+  }
+
+  @return --rcx-color-#{ $prefix }-#{ $grade };
+}
+
+@function neutral($grade, $alpha: null) {
+  @return var(_get-varname(neutral, $grade, $alpha), _get-color(n, $grade, $alpha));
+}
+
+@function primary($grade, $alpha: null) {
+  @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));
+}
+
+@function success($grade, $alpha: null) {
+  @return var(_get-varname(success, $grade, $alpha), _get-color(g, $grade, $alpha));
+}
+
+@function warning($grade, $alpha: null) {
+  @return var(_get-varname(warning, $grade, $alpha), _get-color(y, $grade, $alpha));
+}
+
+@function danger($grade, $alpha: null) {
+  @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));
+  }
+
+  @return var(--rcx-color-paper, white);
+}
diff --git a/packages/fuselage/src/styles/primitives/rich-text.scss b/packages/fuselage/src/styles/primitives/rich-text.scss
@@ -1,3 +1,4 @@
+@use '../colors.scss';
 @use '../lengths.scss';
 
 %rich-text--inline {
@@ -31,17 +32,17 @@
     &:link {
       text-decoration: none;
 
-      color: $colors-b500;
+      color: colors.link(500);
     }
 
     &:visited,
     &.is-visited {
-      color: $colors-p500;
+      color: colors.visited-link(500);
     }
 
     &:active,
     &.is-active {
-      color: $colors-r500;
+      color: colors.active-link(500);
     }
 
     &:hover,
@@ -73,7 +74,7 @@
       lengths.padding(8);
 
     border-radius: lengths.border-radius(2);
-    background-color: $colors-n300;
+    background-color: colors.neutral(300);
 
     font: inherit;
 

diff --git a/packages/fuselage/src/styles/primitives/tile.scss b/packages/fuselage/src/styles/primitives/tile.scss
@@ -1,20 +1,21 @@
+@use '../colors.scss';
 @use '../lengths.scss';
 
 %tile-0 {
   border-radius: lengths.border-radius(2);
-  background-color: #{ $colors-white };
+  background-color: colors.paper();
   @include use-no-shadow;
 }
 
 %tile-1 {
   border-radius: lengths.border-radius(2);
-  background-color: #{ $colors-white };
+  background-color: colors.paper();
   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-white };
+  background-color: colors.paper();
   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
@@ -1,5 +1,4 @@
 @import './breakpoints.scss';
-@import './colors.scss';
 @import './button-colors.scss';
 @import './input-colors.scss';
 @import './text-colors.scss';