Fix: deprecated client sass, blueprint sass, bump mudder (#2101)

* Fix deprecated sass, silence blueprint sass deprecation warnings

* add patch-package to hush those damn blueprintjs sass errors

* Hell, kill that error about , whatever it was about

* Remove @imports to Blueprint .scss files

* undo mudder bump

Co-authored-by: Ian Reynolds <idreyn@gmail.com>

client/components/Editor/styles/figure.scss

@@ -36,7 +36,7 @@ figure {
 
 	@for $i from 1 through 100 {
 		&[data-size='#{$i}'] {
-			width: percentage($i/100);
+			width: percentage($i * 0.01);
 		}
 	}
 

client/components/LengthIndicator/lengthIndicator.scss

@@ -1,4 +1,4 @@
-@import '~@blueprintjs/core/src/common/_variables.scss';
+@import 'styles/colors.scss';
 
 .length-indicator-component {
 	font-size: 16px;

client/components/Timeline/timeline.scss

@@ -18,12 +18,12 @@ $controls-margin: 5px;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				margin-left: #{$small-bubble-diameter-diff / 2};
-				margin-right: #{$small-bubble-diameter-diff / 2};
+				margin-left: #{$small-bubble-diameter-diff * 0.5};
+				margin-right: #{$small-bubble-diameter-diff * 0.5};
 				margin-top: 0;
 				width: $small-bubble-diameter;
 				height: $small-bubble-diameter;
-				border-radius: #{$small-bubble-diameter / 2};
+				border-radius: #{$small-bubble-diameter * 0.5};
 				.bp3-icon {
 					color: inherit;
 				}
@@ -34,12 +34,12 @@ $controls-margin: 5px;
 				padding-bottom: $descender-height;
 				flex-grow: 1;
 				width: 2px;
-				margin-left: #{$large-bubble-diameter / 2 - 1};
+				margin-left: #{$large-bubble-diameter * 0.5 - 1};
 				background: #ddd;
 			}
 		}
 		.right {
-			padding-top: calc(#{$small-bubble-diameter / 2} - 1em);
+			padding-top: calc(#{$small-bubble-diameter * 0.5} - 1em);
 			margin-left: 10px;
 			padding-bottom: $label-padding-bottom;
 			.title {
@@ -67,7 +67,7 @@ $controls-margin: 5px;
 			margin: 0;
 			width: $large-bubble-diameter;
 			height: $large-bubble-diameter;
-			border-radius: #{$large-bubble-diameter / 2};
+			border-radius: #{$large-bubble-diameter * 0.5};
 		}
 	}
 

client/containers/DashboardOverview/overviewStyles.scss

@@ -1,4 +1,4 @@
-@import '~@blueprintjs/core/lib/scss/variables';
+@import 'styles/colors.scss';
 
 $mobile-viewport-cutoff: 750px;
 

client/containers/DashboardSubmissionWorkflow/shared.scss

@@ -1,4 +1,4 @@
-@import '~@blueprintjs/core/src/common/_colors.scss';
+@import 'styles/colors.scss';
 
 $warning: $orange3;
 $border-color: #ddd;

client/containers/Landing/landing.scss

@@ -92,7 +92,7 @@ $leftColumnWidth: 20%;
 		.container {
 			@for $i from 1 through 12 {
 				> div:nth-child(#{$i}) {
-					-ms-grid-row: ceil($i / 2);
+					-ms-grid-row: ceil($i * 0.5);
 				}
 			}
 			display: -ms-grid;
@@ -221,7 +221,7 @@ $leftColumnWidth: 20%;
 			align-items: top;
 			background-repeat: repeat-y;
 			background-size: 2px 12px;
-			background-position-x: ($leftColumnWidth + ($columnGap / 2));
+			background-position-x: ($leftColumnWidth + ($columnGap * 0.5));
 			padding-top: 2em;
 			padding-bottom: 2em;
 			&.restricted-width {

client/containers/Pub/PubHeader/pubHeader.scss

@@ -59,7 +59,7 @@ $mobile-bottom-buttons-spacing: 10px;
 
 	.details-button {
 		position: absolute;
-		top: $top-bar-total-height / 2;
+		top: $top-bar-total-height * 0.5;
 		transform: translateY(-50%);
 		right: 0;
 		.icon-container {

client/containers/Pub/pub.scss

@@ -1,4 +1,6 @@
 /* The fraction of the screen used for the pub margin -- converted to CSS units below */
+@use 'sass:math';
+
 $pub-margin-fraction: 0.04;
 /* Below this width, comments will be forced to a minimized view */
 $compact-cutoff-width: 750px;
@@ -21,7 +23,7 @@ $pub-margin: #{$pub-margin-fraction * 100}vw;
 /* Used to determine when `minmax($pub-margin, auto) = $pub-margin`, which indicates that we should
    treat the .breakout calculation differently.
    Calculated as: 2 * $pub-margin-fraction * x + $compact-cutoff-width = x */
-$breakout-simplify-cutoff: $compact-cutoff-width / (1 - 2 * $pub-margin-fraction);
+$breakout-simplify-cutoff: math.div($compact-cutoff-width, 1 - 2 * $pub-margin-fraction);
 
 @mixin pub-compact-view {
 	@media only screen and (max-width: $compact-cutoff-width) {

client/styles/base.scss

@@ -5,7 +5,6 @@
 @import '~@blueprintjs/icons/lib/css/blueprint-icons.css';
 
 @import './grid.scss';
-
 @import url('https://use.typekit.net/kmi0tdo.css');
 @import './variables.scss';
 @import './typography.scss';

client/styles/colors.scss

@@ -0,0 +1,31 @@
+// === A NOTE ABOUT BLUEPRINT COLORS ===
+//
+// TL;DR: Sometimes we'd like to @import or @use Blueprint's built-in colors like $red3 or $green1,
+// but a tooling incompatibility makes that tricky for now. Instead, you should just copy them into
+// this file.
+//
+// THE GORY DETAILS:
+// We bring Blueprint into PubPub with an @import to `core/lib/css/blueprint.css` -- a pre-compiled
+// CSS file rather than a SCSS file -- as Blueprint recommends:
+// https://blueprintjs.com/docs/versions/3/#core/colors.usage
+// However, Blueprint _also_ suggests @importing its SCSS source files if you need to import its
+// custom color variables, which we sometimes do as a vague nod towards visually consistent UI.
+//
+// The combination of the modern dart-sass and the older Blueprint 3.x causes problems here, because
+// the Blueprint SCSS files we wish to import use the now-deprecated division operator (/) instead
+// of math.div(). This causes dart-sass to print many angry warnings during the build, like this:
+//
+// "Deprecation Warning: Using / for division outside calc() is deprecated..."
+//
+// This is horrible line noise which buries real problems, but it also suggests that eventually
+// we'll be locked out of newer versions of dart-sass.  If we upgrade to Blueprint >=4, we'll get
+// a fixed version from here:
+// https://github.com/palantir/blueprint/pull/5216
+// But for now we simply can't @import `~@blueprintjs/core/**/*.scss`. So if you want to use
+// constants from those files, your best bet is to copy them here.
+
+$red2: #c23030;
+$red3: #db3737;
+$orange3: #d9822b;
+$gold4: #f2b824;
+$green2: #0d8050;