feat(@clayui/css): Use calc instead of Sass arithmetic for scaling …

…font sizes
liferay · Mar 25, 2022 · 1e1b734 · 1e1b734
1 parent 9728edb
commit 1e1b734
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 30 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -532,7 +532,7 @@ $display3-weight: 300 !default;
 $display4-size: 3.5rem !default;
 $display4-weight: 300 !default;
 
-$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-size: calc(#{$font-size-base} * 1.25) !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -541,7 +541,7 @@ $text-muted: $gray-500 !default;
 
 $blockquote-small-color: $gray-600 !default;
 $blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-font-size: calc(#{$font-size-base} * 1.25) !default;
 
 $hr-border-color: rgba($black, 0.1) !default;
 $hr-border-width: $border-width !default;

diff --git a/packages/clay-css/src/scss/components/_custom-forms.scss b/packages/clay-css/src/scss/components/_custom-forms.scss
@@ -171,14 +171,16 @@ label.custom-control-label {
 					$custom-forms-transition
 				);
 
-				top: add(
+				top: calc(
 					(
-							$font-size-base *
-								$line-height-base -
-								$custom-control-indicator-size
-						) *
-						0.5,
-					$custom-control-indicator-border-width * 2
+							(
+									#{$font-size-base} *
+										#{$line-height-base} -
+										#{$custom-control-indicator-size}
+								) *
+								0.5
+						) +
+						(#{$custom-control-indicator-border-width} * 2)
 				);
 				width: $custom-switch-indicator-size;
 			}

diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss
@@ -215,7 +215,7 @@ $dropdown-item-base: map-deep-merge(
 			),
 		),
 		c-kbd-inline: (
-			line-height: $dropdown-font-size * $line-height-base,
+			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
 			padding-left: 1rem,

diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
@@ -380,8 +380,8 @@ $font-scale: map-merge(
 );
 
 $font-size-base: 1rem !default;
-$font-size-lg: $font-size-base * 1.25 !default;
-$font-size-sm: $font-size-base * 0.875 !default;
+$font-size-lg: 1.25rem !default;
+$font-size-sm: 0.875rem !default;
 
 $font-size-base-mobile: $font-size-base !default;
 $font-size-lg-mobile: $font-size-lg !default;
@@ -399,7 +399,7 @@ $line-height-base: 1.5 !default;
 
 // h1, .h1
 
-$h1-font-size: $font-size-base * 2.5 !default;
+$h1-font-size: calc(#{$font-size-base} * 2.5) !default;
 $h1-font-size-mobile: null !default;
 
 $h1: () !default;
@@ -417,7 +417,7 @@ $h1: map-deep-merge(
 
 // h2, .h2
 
-$h2-font-size: $font-size-base * 2 !default;
+$h2-font-size: calc(#{$font-size-base} * 2) !default;
 $h2-font-size-mobile: null !default;
 
 $h2: () !default;
@@ -435,7 +435,7 @@ $h2: map-deep-merge(
 
 // h3, .h3
 
-$h3-font-size: $font-size-base * 1.75 !default;
+$h3-font-size: calc(#{$font-size-base} * 1.75) !default;
 $h3-font-size-mobile: null !default;
 
 $h3: () !default;
@@ -453,7 +453,7 @@ $h3: map-deep-merge(
 
 // h4, .h4
 
-$h4-font-size: $font-size-base * 1.5 !default;
+$h4-font-size: calc(#{$font-size-base} * 1.5) !default;
 $h4-font-size-mobile: null !default;
 
 $h4: () !default;
@@ -471,7 +471,7 @@ $h4: map-deep-merge(
 
 // h5, .h5
 
-$h5-font-size: $font-size-base * 1.25 !default;
+$h5-font-size: calc(#{$font-size-base} * 1.25) !default;
 $h5-font-size-mobile: null !default;
 
 $h5: () !default;
@@ -655,7 +655,7 @@ $display-4: map-deep-merge(
 	$display-4
 );
 
-$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-size: calc(#{$font-size-base} * 1.25) !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -664,7 +664,7 @@ $text-muted: $gray-600 !default;
 
 $blockquote-small-color: $gray-600 !default;
 $blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-font-size: calc(#{$font-size-base} * 1.25) !default;
 
 $hr-border-color: rgba($black, 0.1) !default;
 $hr-border-width: $border-width !default;

diff --git a/packages/clay-css/src/scss/variables/_navbar.scss b/packages/clay-css/src/scss/variables/_navbar.scss
@@ -20,10 +20,15 @@ $navbar-text-truncate-max-width: 12.5rem !default; // 200px
 $navbar-brand-font-size: $font-size-lg !default;
 
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-
-$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
+// This is a string so we don't get nested calcs in `$navbar-brand-height` and `$navbar-brand-padding-y`
+
+$nav-link-height: '#{$font-size-base} * #{$line-height-base} + #{$nav-link-padding-y} * 2' !default;
+$navbar-brand-height: calc(
+	#{$navbar-brand-font-size} * #{$line-height-base}
+) !default;
+$navbar-brand-padding-y: calc(
+	(#{$nav-link-height} - #{$navbar-brand-height}) * 0.5
+) !default;
 
 // Navbar Toggler
 

diff --git a/packages/clay-css/src/scss/variables/_navs.scss b/packages/clay-css/src/scss/variables/_navs.scss
@@ -59,10 +59,12 @@ $nav-btn-margin-x: 0.25rem !default; // 4px
 
 /// @deprecated after v3.4.0 use the Sass map `$nav-btn` instead
 
-$nav-btn-margin-y: (
-		($line-height-base * $font-size-base) + ($nav-link-padding-y * 2) -
-			$nav-item-monospaced-size
-	) * 0.5 !default;
+$nav-btn-margin-y: calc(
+	(
+			(#{$line-height-base} * #{$font-size-base}) +
+				(#{$nav-link-padding-y} * 2) - #{$nav-item-monospaced-size}
+		) * 0.5
+) !default;
 
 /// @deprecated after v3.4.0 use the Sass map `$nav-btn` instead
 

diff --git a/packages/clay-css/src/scss/variables/_progress-bars.scss b/packages/clay-css/src/scss/variables/_progress-bars.scss
@@ -1,7 +1,7 @@
 $progress-bg: $gray-200 !default;
 $progress-border-radius: $border-radius !default;
 $progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default;
-$progress-font-size: $font-size-base * 0.75 !default;
+$progress-font-size: calc(#{$font-size-base} * 0.75) !default;
 $progress-height: 1rem !default;
 $progress-min-width: 6.25rem !default;
 
@@ -15,7 +15,7 @@ $progress-bar-transition: width 0.6s ease !default;
 
 $progress-border-radius-lg: $border-radius !default;
 $progress-font-size-lg: $font-size-lg !default;
-$progress-height-lg: $progress-height * 2 !default;
+$progress-height-lg: calc(#{$progress-height} * 2) !default;
 
 // Progress Group
 

diff --git a/packages/clay-css/src/scss/variables/_utilities.scss b/packages/clay-css/src/scss/variables/_utilities.scss
@@ -23,7 +23,7 @@ $autofit-padded-no-gutters-sm: map-merge(
 // Close
 
 $close-color: $black !default;
-$close-font-size: $font-size-base * 1.5 !default;
+$close-font-size: calc(#{$font-size-base} * 1.5) !default;
 $close-font-weight: $font-weight-bold !default;
 $close-text-shadow: 0 1px 0 $white !default;