migrate to math.div from slash division

metmuseum · Jan 6, 2022 · fbe7842 · fbe7842
1 parent 407e523
commit fbe7842
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@metmuseum/marble",
-	"version": "0.12.33",
+	"version": "0.13.0",
 	"description": "The Design System of The Metropolitan Museum Of Art",
 	"main": "./src/index.mjs",
 	"style": "./dist/marble.css",

diff --git a/src/base/_sizes.scss b/src/base/_sizes.scss
@@ -1,4 +1,6 @@
 //TODO - this is no longer true except on the homepage
+@use "sass:math";
+
 $site-width: 1200px;
 $grid-gutter: 20px;
 
@@ -49,8 +51,8 @@ $spacing-component-vertical: $spacing-l;
 	$small-screen: 375; //iPhone width.
 	$large-screen: 1440; //Macbook width.
 
-	$base-size: $mobile-size / 16;
-	$base-size: $mobile-size / 16;
+	$base-size: math.div($mobile-size, 16);
+	$base-size: math.div($mobile-size, 16);
 	$calc: calc(#{$base-size}rem + (#{$desktop-size} - #{$mobile-size}) * ((100vw - #{$small-screen}px) / (#{$large-screen} - #{$small-screen})));
 	@return $calc;
 }

diff --git a/src/base/mixins/_typography.scss b/src/base/mixins/_typography.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../sizes";
 @import "../colors";
 
@@ -126,7 +128,7 @@ $metserif: "MetSerif", "Georgia", "Times New Roman", Times, serif;
 	font-style: normal;
 	font-weight: 600;
 	letter-spacing: 0.7px;
-	line-height: (14/18);
+	line-height: math.div(14, 18);
 	text-transform: uppercase;
 }
 

diff --git a/src/components/card/content-card/_card-image.scss b/src/components/card/content-card/_card-image.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .card-image__wrapper {
 	@include link-reset();
 	flex-basis: auto;
@@ -7,11 +9,11 @@
 
 	&.card-image__wrapper-fixed-ratio {
 		height: 0;
-		padding-bottom: (100% * 2/3);
+		padding-bottom: 100% * math.div(2, 3);
 		position: relative;
 
 		&.ratio-16-9 { /* stylelint-disable max-nesting-depth */
-			padding-bottom: (100% * 9/16);
+			padding-bottom: 100% * math.div(9, 16);
 		}
 		//TODO: Add whatever ratios we want
 	}

diff --git a/src/components/card/content-card/content-card.scss b/src/components/card/content-card/content-card.scss
@@ -1,13 +1,15 @@
 //Mode Mixins
+@use "sass:math";
+
 @mixin content-card-three-up() {
 	flex-basis: 100%;
 	max-width: none;
 	width: 100%;
 
 	@media screen and (min-width: $bp-large-card) {
-		flex-basis: (100%/3);
+		flex-basis: math.div(100%, 3);
 		flex-grow: 0;
-		width: (100%/3);
+		width: math.div(100%, 3);
 
 		.content-card__body {
 			padding: $spacing-xs $spacing-s $spacing-s;
@@ -114,7 +116,7 @@
 
 .content-card__heading {
 	font-weight: 600;
-	line-height: (29/24);
+	line-height: math.div(29, 24);
 
 	&:last-child {
 		padding-bottom: 0;

diff --git a/src/components/card/event-card/event-card.scss b/src/components/card/event-card/event-card.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $event-card-slide-up-distance: -66%;
 
 .events-by-day {
@@ -62,7 +64,7 @@ $event-card-slide-up-distance: -66%;
 .event-card__image-wrapper {
 	height: 0;
 	overflow: hidden;
-	padding-top: (2 / 3) * 100%;
+	padding-top: math.div(2, 3) * 100%;
 	position: relative;
 }
 
@@ -109,7 +111,7 @@ $event-card-slide-up-distance: -66%;
 	backdrop-filter: blur(4px);
 	background: linear-gradient(360deg,
 	$color-white 35%,
-	rgba($color-white, (2 / 3)) 100%);
+	rgba($color-white, math.div(2, 3)) 100%);
 	bottom: 0;
 	top: 0;
 
@@ -197,7 +199,7 @@ $event-card-slide-up-distance: -66%;
 
 .event-card__heading-link {
 	@include line-clamp(3);
-	line-height: (19 / 16);
+	line-height: math.div(19, 16);
 
 	&:focus,
 	&:hover {

diff --git a/src/components/featured-banner/featured-banner.scss b/src/components/featured-banner/featured-banner.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../../base/sizes";
 @import "../../base/mixins/layouts";
 
@@ -22,7 +24,7 @@
 	}
 
 	p {
-		line-height: (24/18); // match figma, y tho?
+		line-height: math.div(24, 18); // match figma, y tho?
 	}
 }
 

diff --git a/src/components/featured-module/featured-module.scss b/src/components/featured-module/featured-module.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../../base/sizes";
 @import "../../base/mixins/layouts";
 
@@ -27,7 +29,7 @@
 	}
 
 	p {
-		line-height: (24/18); // match figma, y tho?
+		line-height: math.div(24, 18); // match figma, y tho?
 		margin-left: auto;
 		margin-right: auto;
 	}

diff --git a/src/components/section-heading/section-heading.scss b/src/components/section-heading/section-heading.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../../base/sizes";
 @import "../../base/mixins/layouts";
 @import "../../base/mixins/typography";
@@ -9,7 +11,7 @@
 	font-size: $textsize-m;
 	font-style: normal;
 	font-weight: 500;
-	line-height: (24/18);
+	line-height: math.div(24, 18);
 	margin-bottom: $spacing-s;
 	margin-top: $spacing-m;
 

diff --git a/src/global/typography/tag.scss b/src/global/typography/tag.scss
@@ -1,11 +1,13 @@
+@use "sass:math";
+
 @mixin typography-tag {
 	color: currentColor;
 	font-family: $metsans;
 	font-size: $textsize-xs;
 	font-style: normal;
 	font-weight: 600;
 	letter-spacing: 0.7px;
-	line-height: (14/18);
+	line-height: math.div(14, 18);
 	text-transform: uppercase;
 }