From 0811568983e25bed9c7780bb99eec715b3891c39 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 20 Apr 2020 01:37:11 -0300 Subject: [PATCH] Remove text-styles module --- .../src/components/Button/styles.scss | 4 +- .../fuselage/src/components/Grid/styles.scss | 14 ++- packages/fuselage/src/index.scss | 1 - .../src/styles/mixins/breakpoints.scss | 4 +- packages/fuselage/src/styles/typography.scss | 34 ++++- .../fuselage/src/styles/variables/all.scss | 1 - .../src/styles/variables/breakpoints.scss | 32 ++--- .../src/styles/variables/text-styles.scss | 119 ------------------ 8 files changed, 63 insertions(+), 146 deletions(-) delete mode 100644 packages/fuselage/src/styles/variables/text-styles.scss diff --git a/packages/fuselage/src/components/Button/styles.scss b/packages/fuselage/src/components/Button/styles.scss index 0fe7ed532d..b683747204 100644 --- a/packages/fuselage/src/components/Button/styles.scss +++ b/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), ); } diff --git a/packages/fuselage/src/components/Grid/styles.scss b/packages/fuselage/src/components/Grid/styles.scss index fa17e35afb..1acebfa073 100644 --- a/packages/fuselage/src/components/Grid/styles.scss +++ b/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; diff --git a/packages/fuselage/src/index.scss b/packages/fuselage/src/index.scss index a23ba230d1..a38e5ebfd7 100644 --- a/packages/fuselage/src/index.scss +++ b/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'; diff --git a/packages/fuselage/src/styles/mixins/breakpoints.scss b/packages/fuselage/src/styles/mixins/breakpoints.scss index 4c74406816..2863c067d5 100644 --- a/packages/fuselage/src/styles/mixins/breakpoints.scss +++ b/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; diff --git a/packages/fuselage/src/styles/typography.scss b/packages/fuselage/src/styles/typography.scss index 37e905609c..6fe10a8e09 100644 --- a/packages/fuselage/src/styles/typography.scss +++ b/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; diff --git a/packages/fuselage/src/styles/variables/all.scss b/packages/fuselage/src/styles/variables/all.scss index ce59cea9c1..1145da375b 100644 --- a/packages/fuselage/src/styles/variables/all.scss +++ b/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'; diff --git a/packages/fuselage/src/styles/variables/breakpoints.scss b/packages/fuselage/src/styles/variables/breakpoints.scss index 4481b26f79..9c03c7f553 100644 --- a/packages/fuselage/src/styles/variables/breakpoints.scss +++ b/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); diff --git a/packages/fuselage/src/styles/variables/text-styles.scss b/packages/fuselage/src/styles/variables/text-styles.scss deleted file mode 100644 index 2d506c1ce3..0000000000 --- a/packages/fuselage/src/styles/variables/text-styles.scss +++ /dev/null @@ -1,119 +0,0 @@ -$text-styles-h1-font-family: theme('text-styles-h1-font-family', map-get(map-get($typography, h1), font-family)); -$text-styles-h1-font-size: theme('text-styles-h1-font-size', to-rem(map-get(map-get($typography, h1), font-size))); -$text-styles-h1-font-weight: theme('text-styles-h1-font-weight', map-get(map-get($typography, h1), font-weight)); -$text-styles-h1-letter-spacing: theme('text-styles-h1-letter-spacing', to-rem(map-get(map-get($typography, h1), letter-spacing))); -$text-styles-h1-line-height: theme('text-styles-h1-line-height', to-rem(map-get(map-get($typography, h1), line-height))); - -$text-styles-s1-font-family: theme('text-styles-s1-font-family', map-get(map-get($typography, s1), font-family)); -$text-styles-s1-font-size: theme('text-styles-s1-font-size', to-rem(map-get(map-get($typography, s1), font-size))); -$text-styles-s1-font-weight: theme('text-styles-s1-font-weight', map-get(map-get($typography, s1), font-weight)); -$text-styles-s1-letter-spacing: theme('text-styles-s1-letter-spacing', to-rem(map-get(map-get($typography, s1), letter-spacing))); -$text-styles-s1-line-height: theme('text-styles-s1-line-height', to-rem(map-get(map-get($typography, s1), line-height))); - -$text-styles-s2-font-family: theme('text-styles-s2-font-family', map-get(map-get($typography, s2), font-family)); -$text-styles-s2-font-size: theme('text-styles-s2-font-size', to-rem(map-get(map-get($typography, s2), font-size))); -$text-styles-s2-font-weight: theme('text-styles-s2-font-weight', map-get(map-get($typography, s2), font-weight)); -$text-styles-s2-letter-spacing: theme('text-styles-s2-letter-spacing', to-rem(map-get(map-get($typography, s2), letter-spacing))); -$text-styles-s2-line-height: theme('text-styles-s2-line-height', to-rem(map-get(map-get($typography, s2), line-height))); - -$text-styles-p1-font-family: theme('text-styles-p1-font-family', map-get(map-get($typography, p1), font-family)); -$text-styles-p1-font-size: theme('text-styles-p1-font-size', to-rem(map-get(map-get($typography, p1), font-size))); -$text-styles-p1-font-weight: theme('text-styles-p1-font-weight', map-get(map-get($typography, p1), font-weight)); -$text-styles-p1-letter-spacing: theme('text-styles-p1-letter-spacing', to-rem(map-get(map-get($typography, p1), letter-spacing))); -$text-styles-p1-line-height: theme('text-styles-p1-line-height', to-rem(map-get(map-get($typography, p1), line-height))); - -$text-styles-p2-font-family: theme('text-styles-p2-font-family', map-get(map-get($typography, p2), font-family)); -$text-styles-p2-font-size: theme('text-styles-p2-font-size', to-rem(map-get(map-get($typography, p2), font-size))); -$text-styles-p2-font-weight: theme('text-styles-p2-font-weight', map-get(map-get($typography, p2), font-weight)); -$text-styles-p2-letter-spacing: theme('text-styles-p2-letter-spacing', to-rem(map-get(map-get($typography, p2), letter-spacing))); -$text-styles-p2-line-height: theme('text-styles-p2-line-height', to-rem(map-get(map-get($typography, p2), line-height))); - -$text-styles-c1-font-family: theme('text-styles-c1-font-family', map-get(map-get($typography, c1), font-family)); -$text-styles-c1-font-size: theme('text-styles-c1-font-size', to-rem(map-get(map-get($typography, c1), font-size))); -$text-styles-c1-font-weight: theme('text-styles-c1-font-weight', map-get(map-get($typography, c1), font-weight)); -$text-styles-c1-letter-spacing: theme('text-styles-c1-letter-spacing', to-rem(map-get(map-get($typography, c1), letter-spacing))); -$text-styles-c1-line-height: theme('text-styles-c1-line-height', to-rem(map-get(map-get($typography, c1), line-height))); - -$text-styles-c2-font-family: theme('text-styles-c2-font-family', map-get(map-get($typography, c2), font-family)); -$text-styles-c2-font-size: theme('text-styles-c2-font-size', to-rem(map-get(map-get($typography, c2), font-size))); -$text-styles-c2-font-weight: theme('text-styles-c2-font-weight', map-get(map-get($typography, c2), font-weight)); -$text-styles-c2-letter-spacing: theme('text-styles-c2-letter-spacing', to-rem(map-get(map-get($typography, c2), letter-spacing))); -$text-styles-c2-line-height: theme('text-styles-c2-line-height', to-rem(map-get(map-get($typography, c2), line-height))); - -$text-styles-micro-font-family: theme('text-styles-micro-font-family', map-get(map-get($typography, micro), font-family)); -$text-styles-micro-font-size: theme('text-styles-micro-font-size', to-rem(map-get(map-get($typography, micro), font-size))); -$text-styles-micro-font-weight: theme('text-styles-micro-font-weight', map-get(map-get($typography, micro), font-weight)); -$text-styles-micro-letter-spacing: theme('text-styles-micro-letter-spacing', to-rem(map-get(map-get($typography, micro), letter-spacing))); -$text-styles-micro-line-height: theme('text-styles-micro-line-height', to-rem(map-get(map-get($typography, micro), line-height))); - -$text-styles-mono-font-family: theme('text-styles-mono-font-family', monospace); -$text-styles-mono-font-size: theme('text-styles-mono-font-size', inherit); -$text-styles-mono-font-weight: theme('text-styles-mono-font-weight', 400); -$text-styles-mono-letter-spacing: theme('text-styles-mono-letter-spacing', to-rem(0)); -$text-styles-mono-line-height: theme('text-styles-mono-line-height', inherit); - -$text-styles: ( - h1: ( - font-family: $text-styles-h1-font-family, - font-size: $text-styles-h1-font-size, - font-weight: $text-styles-h1-font-weight, - letter-spacing: $text-styles-h1-letter-spacing, - line-height: $text-styles-h1-line-height, - ), - s1: ( - font-family: $text-styles-s1-font-family, - font-size: $text-styles-s1-font-size, - font-weight: $text-styles-s1-font-weight, - letter-spacing: $text-styles-s1-letter-spacing, - line-height: $text-styles-s1-line-height, - ), - s2: ( - font-family: $text-styles-s2-font-family, - font-size: $text-styles-s2-font-size, - font-weight: $text-styles-s2-font-weight, - letter-spacing: $text-styles-s2-letter-spacing, - line-height: $text-styles-s2-line-height, - ), - p1: ( - font-family: $text-styles-p1-font-family, - font-size: $text-styles-p1-font-size, - font-weight: $text-styles-p1-font-weight, - letter-spacing: $text-styles-p1-letter-spacing, - line-height: $text-styles-p1-line-height, - ), - p2: ( - font-family: $text-styles-p2-font-family, - font-size: $text-styles-p2-font-size, - font-weight: $text-styles-p2-font-weight, - letter-spacing: $text-styles-p2-letter-spacing, - line-height: $text-styles-p2-line-height, - ), - c1: ( - font-family: $text-styles-c1-font-family, - font-size: $text-styles-c1-font-size, - font-weight: $text-styles-c1-font-weight, - letter-spacing: $text-styles-c1-letter-spacing, - line-height: $text-styles-c1-line-height, - ), - c2: ( - font-family: $text-styles-c2-font-family, - font-size: $text-styles-c2-font-size, - font-weight: $text-styles-c2-font-weight, - letter-spacing: $text-styles-c2-letter-spacing, - line-height: $text-styles-c2-line-height, - ), - micro: ( - font-family: $text-styles-micro-font-family, - font-size: $text-styles-micro-font-size, - font-weight: $text-styles-micro-font-weight, - letter-spacing: $text-styles-micro-letter-spacing, - line-height: $text-styles-micro-line-height, - ), - mono: ( - font-family: $text-styles-mono-font-family, - font-size: $text-styles-mono-font-size, - font-weight: $text-styles-mono-font-weight, - letter-spacing: $text-styles-mono-letter-spacing, - line-height: $text-styles-mono-line-height, - ), -);