Merge pull request #198 from metmuseum/DIGCOLL-5661-style-updates

Decreased size of various headings, typography, and components
New clamp calculation for the width of the productive component

dist/marble.js.LICENSE.txt

@@ -39,14 +39,12 @@
  */
 
 /*!
- * weakmap-polyfill v2.0.4 - ECMAScript6 WeakMap polyfill
+ * weakmap-polyfill v2.0.1 - ECMAScript6 WeakMap polyfill
  * https://github.com/polygonplanet/weakmap-polyfill
- * Copyright (c) 2015-2021 polygonplanet <polygon.planet.aqua@gmail.com>
+ * Copyright (c) 2015-2020 Polygon Planet <polygon.planet.aqua@gmail.com>
  * @license MIT
  */
 
-/*! @vimeo/player v2.17.1 | (c) 2022 Vimeo | MIT License | https://github.com/vimeo/player.js */
-
 /*! Native Promise Only
     v0.8.1 (c) Kyle Simpson
     MIT License: http://getify.mit-license.org

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@metmuseum/marble",
-	"version": "1.1.3",
+	"version": "1.2.1",
 	"description": "The Design System of The Metropolitan Museum Of Art",
 	"main": "./src/index.mjs",
 	"style": "./dist/marble.css",

src/base/_sizes.scss

@@ -23,9 +23,9 @@ $bp-extra-large: $bp-1440;
 $bp-audio-player: 600px;
 
 //padding and margins
-//This is used super sparingly and won't be a part of most designs.
-$spacing-micro: calc(8px + 0.25vw);
 
+//"hard-sh" pixel based with some leeway for viewport widths
+$spacing-micro: calc(8px + 0.25vw);
 $spacing-xxs: calc(16px + 0.5vw);
 $spacing-xs: calc(24px + 0.75vw);
 $spacing-s: calc(32px + 1vw);
@@ -34,12 +34,23 @@ $spacing-l: calc(64px + 2vw);
 $spacing-xl: calc(98px + 6vw);
 $spacing-xxl: calc(144px + 9vw);
 
-//I know, i know, this is clunky. We need a negative margin for the Jumplink Banner,
-//TODO: find a better way to do this.
-$spacing-negative-micro: calc(-1 * (8px + 0.25vw));
+//"soft" purely based on viewport vidth
+$spacing-unclamped: 7.5vw; //DS - value for the former $spacing-component-margin
+
+//when the above calculation can't be used, this is a close substitute
+$max-width-unclamped: 85vw;
+
+//absolute, hard max width for productive component
+$max-component-size: 1600px;
 
-//This is as an outside margin to help align components with those that use width: 85vw which is an emerging standard.
-$spacing-component-margin: 7.5vw;
+//Account for scrollbar width on windows
+$width--scrollbar-agnostic: calc(#{$max-width-unclamped} - (100vw - 100%));
+
+//Clamped width. $max-width-unclamped up to a max of $max-component-size
+$productive-width-max: min(#{$width--scrollbar-agnostic}, #{$max-component-size});
+
+//Half of the difference between 100vw and $productive-width-max
+$spacing-component-margin: calc((100% - #{$productive-width-max})/2);
 
 //Default vertical spacing for components.
 $spacing-component-vertical: $spacing-l;
@@ -51,7 +62,6 @@ $spacing-component-vertical: $spacing-l;
 	$small-screen: 375; //iPhone width.
 	$large-screen: 1440; //Macbook width.
 
-	$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;
@@ -62,8 +72,8 @@ $textsize-xxs: fontsize-calculator(12, 14);
 $textsize-xs: fontsize-calculator(14, 16);
 $textsize-s: fontsize-calculator(18, 20); //Body Text
 $textsize-m: fontsize-calculator(20, 24); //H4
-$textsize-l: fontsize-calculator(24, 32); //H3
-$textsize-xl: fontsize-calculator(32, 42); //H2
+$textsize-l: fontsize-calculator(24, 30); //H3
+$textsize-xl: fontsize-calculator(32, 38); //H2
 $textsize-xxl: fontsize-calculator(48, 54); //H1
 
 //The smaller value of the fluid type functions.

src/base/mixins/_layouts.scss

@@ -1,12 +1,6 @@
 @import "../sizes";
 @import "../colors";
 
-//DS - cross-platform 85vw that accounts for scrollbars
-$productive-width-max: calc(85vw - (100vw - 100%));
-
-//TODO: DEPRECATED - Remove in V1. Please use the correctly named $productive-width-max in the future.
-$expressive-width-max: $productive-width-max;
-
 @mixin vimeo-iframe-16x9 {
 	box-sizing: border-box;
 	height: 56.25vw;

src/base/mixins/_mixins.scss

@@ -18,7 +18,7 @@
 	$gutter: $spacing-xxs,
 	$slideMaxWidth: 85vw,
 	$width: auto,
-	$leftRightOffset: $spacing-component-margin
+	$leftRightOffset: calc((100vw - min(#{$max-width-unclamped}, #{$max-component-size}))/2)
 ) {
 
 	border-left: $gutter transparent solid;

src/components/alert/alert.scss

@@ -12,7 +12,7 @@
 	padding: $spacing-micro;
 	position: fixed;
 	top: $spacing-s;
-	width: 100vw - ($spacing-component-margin * 2);
+	width: $max-width-unclamped;
 
 	&.show {
 		display: flex;

src/components/card/content-card/content-card.scss

@@ -14,11 +14,6 @@
 		.content-card__body {
 			padding: $spacing-xs $spacing-s $spacing-s;
 		}
-
-		.content-card__heading {
-			@include typography-h4;
-			font-weight: 600;
-		}
 	}
 }
 
@@ -115,9 +110,6 @@
 }
 
 .content-card__heading {
-	font-weight: 600;
-	line-height: math.div(29, 24);
-
 	&:last-child {
 		padding-bottom: 0;
 	}

src/components/featured-card/featured-card.scss

@@ -3,13 +3,13 @@
 
 .featured-card {
 	align-items: flex-end;
+	aspect-ratio: 16 / 9;
 	display: flex;
 	margin-bottom: $spacing-s;
-	min-height: 56.25vw;
 	position: relative;
 	z-index: 1;
 	@media (min-aspect-ratio: 16/10) {
-		min-height: 85vh;
+		aspect-ratio: 5 / 4;
 	}
 
 	&.productive-component {
@@ -19,7 +19,7 @@
 
 .featured-card__content {
 	color: $color-white;
-	padding: $spacing-component-margin;
+	padding: $spacing-m;
 	@media (orientation: landscape) {
 		max-width: 66%;
 	}

src/components/jumplink-banner/jumplink-banner.scss

@@ -2,11 +2,8 @@
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	min-height: 56.25vw;
+	min-height: 70vh;
 	position: relative;
-	@media (min-aspect-ratio: 16/10) {
-		min-height: 85vh;
-	}
 
 	&.productive-component {
 		@include productive-component;
@@ -51,7 +48,7 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: center;
-	margin: 0 $spacing-negative-micro;
+	margin: 0 calc(-1 * #{$spacing-micro});
 
 	.align--left & {
 		@media (orientation: landscape) {
@@ -95,10 +92,15 @@
 }
 
 .jumplink-banner__description {
-	@include typography-h3;
+	@include typography-h4;
+	font-weight: 500;
 	margin-bottom: $spacing-xs;
 	padding-bottom: 0;
 
+	@media (orientation: landscape) {
+		max-width: 65vw;
+	}
+
 	/* stylelint-disable max-nesting-depth */
 	a {
 		text-decoration: underline;

src/components/notification-banner/notification-banner.scss

@@ -7,7 +7,7 @@ $minimum-header-width: 350px;
 	color: inherit;
 	display: flex;
 	flex-direction: column;
-	padding: $spacing-s $spacing-component-margin;
+	padding: $spacing-xxs $spacing-component-margin;
 
 	@media screen and (min-width: $bp-large-card) {
 		flex-direction: row;
@@ -22,6 +22,7 @@ $minimum-header-width: 350px;
 
 
 .notification-banner__header {
+	@include typography-h3;
 	padding-bottom: $spacing-xs;
 
 	@media screen and (min-width: $bp-large-card) {
@@ -37,19 +38,21 @@ $minimum-header-width: 350px;
 .notification-banner__body {
 	@media screen and (min-width: $bp-large-card) {
 		flex-basis: 60%;
-		flex-grow: 0;
+		flex-grow: 1;
 		flex-shrink: 1;
 	}
 }
 
 .notification-banner__subtext {
-	@include typography-h3;
-	font-size: $textsize-m;
+	font-size: $textsize-s;
+	font-weight: 500;
+	line-height: 1.3;
 }
 
 .notification-banner__link {
 	display: inline-block;
-	margin-top: $spacing-xxs;
+	font-size: $textsize-xs;
+	margin-top: $spacing-micro;
 
 	&:empty {
 		display: none;

src/components/section-heading/section-heading.scss

@@ -8,10 +8,6 @@
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
-	font-size: $textsize-m;
-	font-style: normal;
-	font-weight: 500;
-	line-height: math.div(24, 18);
 	margin-bottom: $spacing-s;
 	margin-top: $spacing-m;
 
@@ -20,13 +16,7 @@
 	}
 
 	@media (orientation: portrait) {
-		max-width: 85vw;
-	}
-
-	@media (orientation: landscape) {
-		* {
-			max-width: 60vw;
-		}
+		max-width: $max-component-size;
 	}
 }
 

webpack.config.js

@@ -72,7 +72,7 @@ const commonConfig = {
 				minimizerOptions: {
 					preset: [
 						"default",
-						{ discardComments: { removeAll: true }, discardDuplicates: true },
+						{ discardComments: { removeAll: true }, discardDuplicates: true, calc: false },
 					],
 				},
 			}),