Remove text-styles module

packages/fuselage/src/components/Button/styles.scss

@@ -59,7 +59,7 @@
   @include with-rectangular-size(
     $height: lengths.size(40),
     $padding-x: lengths.padding(16),
-    $line-height: $text-styles-p1-line-height,
+    $line-height: typography.line-height(p1),
   );
 
   @extend %button--secondary;
@@ -70,7 +70,7 @@
     @include with-rectangular-size(
       $height: lengths.size(32),
       $padding-x: lengths.padding(12),
-      $line-height: $text-styles-c1-line-height,
+      $line-height: typography.line-height(c1),
     );
   }
 

packages/fuselage/src/components/Grid/styles.scss

@@ -1,4 +1,6 @@
-$breakpoint-names: map-keys($breakpoints);
+@use '~@rocket.chat/fuselage-tokens/breakpoints.scss';
+
+$breakpoint-names: map-keys(breakpoints.$breakpoints);
 
 @mixin when-item-is-on-breakpoint($breakpoint-name) {
   @include on-breakpoint($breakpoint-name) {
@@ -20,8 +22,8 @@ $breakpoint-names: map-keys($breakpoints);
 
   @each $breakpoint-name in $breakpoint-names {
     @include when-item-is-on-breakpoint($breakpoint-name) {
-      margin-block: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / -2);
-      margin-inline: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / -2);
+      margin-block: calc(#{ to-rem(map-get(map-get(breakpoints.$breakpoints, $breakpoint-name), gutter-width)) } / -2);
+      margin-inline: calc(#{ to-rem(map-get(map-get(breakpoints.$breakpoints, $breakpoint-name), gutter-width)) } / -2);
     }
   }
 }
@@ -31,10 +33,10 @@ $breakpoint-names: map-keys($breakpoints);
 
   @each $breakpoint-name in $breakpoint-names {
     @include when-item-is-on-breakpoint($breakpoint-name) {
-      padding-block: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / 2);
-      padding-inline: calc(#{ to-rem(map-get(map-get($breakpoints, $breakpoint-name), gutter-width)) } / 2);
+      padding-block: calc(#{ to-rem(map-get(map-get(breakpoints.$breakpoints, $breakpoint-name), gutter-width)) } / 2);
+      padding-inline: calc(#{ to-rem(map-get(map-get(breakpoints.$breakpoints, $breakpoint-name), gutter-width)) } / 2);
 
-      $total-columns: map-get(map-get($breakpoints, $breakpoint-name), columns);
+      $total-columns: map-get(map-get(breakpoints.$breakpoints, $breakpoint-name), columns);
       @for $columns from 1 through $total-columns {
         &--#{$breakpoint-name}-#{$columns} {
           flex-grow: 0;

packages/fuselage/src/index.scss

@@ -1,4 +1,3 @@
-@import '~@rocket.chat/fuselage-tokens/all.scss';
 @import './styles/functions.scss';
 @import './styles/variables/all.scss';
 @import './styles/mixins/all.scss';

packages/fuselage/src/styles/mixins/breakpoints.scss

@@ -1,5 +1,7 @@
+@use '~@rocket.chat/fuselage-tokens/breakpoints.scss';
+
 @mixin on-breakpoint($breakpoint-name) {
-  $min-viewport-width: map-get(map-get($breakpoints, $breakpoint-name), min-viewport-width);
+  $min-viewport-width: map-get(map-get(breakpoints.$breakpoints, $breakpoint-name), min-viewport-width);
 
   @if not $min-viewport-width {
     @content;

packages/fuselage/src/styles/typography.scss

@@ -29,7 +29,7 @@ $font-scales: map-keys($-font-scales);
 
 @mixin use-font-scale($name) {
   @if not map-has-key($-font-scales, $name) {
-    @error 'invalid font family name';
+    @error 'invalid font scale name';
   }
 
   $-font-scale: map-get($-font-scales, $name);
@@ -40,6 +40,38 @@ $font-scales: map-keys($-font-scales);
   line-height: functions.to-rem(map-get($-font-scale, line-height));
 }
 
+@function letter-spacing($name) {
+  @if not map-has-key($-font-scales, $name) {
+    @error 'invalid font scale name';
+  }
+
+  @return functions.to-rem(map-get(map-get($-font-scales, $name), letter-spacing));
+}
+
+@function font-size($name) {
+  @if not map-has-key($-font-scales, $name) {
+    @error 'invalid font scale name';
+  }
+
+  @return functions.to-rem(map-get(map-get($-font-scales, $name), font-size));
+}
+
+@function font-weight($name) {
+  @if not map-has-key($-font-scales, $name) {
+    @error 'invalid font scale name';
+  }
+
+  @return map-get(map-get($-font-scales, $name), font-weight);
+}
+
+@function line-height($name) {
+  @if not map-has-key($-font-scales, $name) {
+    @error 'invalid font scale name';
+  }
+
+  @return functions.to-rem(map-get(map-get($-font-scales, $name), line-height));
+}
+
 @mixin use-text-ellipsis {
   overflow: hidden;
 

packages/fuselage/src/styles/variables/all.scss

@@ -1,4 +1,3 @@
 @import './breakpoints.scss';
 @import './button-colors.scss';
 @import './input-colors.scss';
-@import './text-styles.scss';

packages/fuselage/src/styles/variables/breakpoints.scss

@@ -1,19 +1,21 @@
-$breakpoints-xs-min-viewport-width: map-get(map-get($breakpoints, xs), min-viewport-width);
-$breakpoints-xs-columns: map-get(map-get($breakpoints, xs), columns);
-$breakpoints-xs-gutter-width: map-get(map-get($breakpoints, xs), gutter-width);
+@use '~@rocket.chat/fuselage-tokens/breakpoints.scss';
 
-$breakpoints-sm-min-viewport-width: map-get(map-get($breakpoints, sm), min-viewport-width);
-$breakpoints-sm-columns: map-get(map-get($breakpoints, sm), columns);
-$breakpoints-sm-gutter-width: map-get(map-get($breakpoints, sm), gutter-width);
+$breakpoints-xs-min-viewport-width: map-get(map-get(breakpoints.$breakpoints, xs), min-viewport-width);
+$breakpoints-xs-columns: map-get(map-get(breakpoints.$breakpoints, xs), columns);
+$breakpoints-xs-gutter-width: map-get(map-get(breakpoints.$breakpoints, xs), gutter-width);
 
-$breakpoints-md-min-viewport-width: map-get(map-get($breakpoints, md), min-viewport-width);
-$breakpoints-md-columns: map-get(map-get($breakpoints, md), columns);
-$breakpoints-md-gutter-width: map-get(map-get($breakpoints, md), gutter-width);
+$breakpoints-sm-min-viewport-width: map-get(map-get(breakpoints.$breakpoints, sm), min-viewport-width);
+$breakpoints-sm-columns: map-get(map-get(breakpoints.$breakpoints, sm), columns);
+$breakpoints-sm-gutter-width: map-get(map-get(breakpoints.$breakpoints, sm), gutter-width);
 
-$breakpoints-lg-min-viewport-width: map-get(map-get($breakpoints, lg), min-viewport-width);
-$breakpoints-lg-columns: map-get(map-get($breakpoints, lg), columns);
-$breakpoints-lg-gutter-width: map-get(map-get($breakpoints, lg), gutter-width);
+$breakpoints-md-min-viewport-width: map-get(map-get(breakpoints.$breakpoints, md), min-viewport-width);
+$breakpoints-md-columns: map-get(map-get(breakpoints.$breakpoints, md), columns);
+$breakpoints-md-gutter-width: map-get(map-get(breakpoints.$breakpoints, md), gutter-width);
 
-$breakpoints-xl-min-viewport-width: map-get(map-get($breakpoints, xl), min-viewport-width);
-$breakpoints-xl-columns: map-get(map-get($breakpoints, xl), columns);
-$breakpoints-xl-gutter-width: map-get(map-get($breakpoints, xl), gutter-width);
+$breakpoints-lg-min-viewport-width: map-get(map-get(breakpoints.$breakpoints, lg), min-viewport-width);
+$breakpoints-lg-columns: map-get(map-get(breakpoints.$breakpoints, lg), columns);
+$breakpoints-lg-gutter-width: map-get(map-get(breakpoints.$breakpoints, lg), gutter-width);
+
+$breakpoints-xl-min-viewport-width: map-get(map-get(breakpoints.$breakpoints, xl), min-viewport-width);
+$breakpoints-xl-columns: map-get(map-get(breakpoints.$breakpoints, xl), columns);
+$breakpoints-xl-gutter-width: map-get(map-get(breakpoints.$breakpoints, xl), gutter-width);