@microsoft/atlas-css 4.3.0 → 5.0.0-test.0

package/src/components/layout.scss

@@ -8,6 +8,7 @@ $default-flyout-width-widescreen: 480px;
 $default-aside-min-width: 300px;
 $eighth-widescreen: math.div($breakpoint-widescreen, 8); // 225px
 $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
+$layout-menu-collapsed-width: 96px !default;
 
 :root {
 	--window-inner-height: 100vh; // to be overwritten by JS
@@ -27,6 +28,10 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 	#{$layout-flyout-width-desktop-custom-property-name}: $default-flyout-width-desktop;
 	#{$layout-flyout-width-widescreen-custom-property-name}: $default-flyout-width-widescreen;
 	#{$layout-flyout-width-name}: var(#{$layout-flyout-width-desktop-custom-property-name});
+	#{$layout-menu-collapsed-width-name}: $layout-menu-collapsed-width;
+	#{$layout-menu-collapsed-width-widescreen-spacer-width-name}: calc(
+		$quarter-widescreen - var(#{$layout-menu-collapsed-width-name})
+	);
 
 	@include widescreen {
 		#{$layout-gap-scalable-custom-property-name}: $layout-widescreen-gap;
@@ -102,7 +107,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 
 /* It is quite hard to keep the layout rules organized / group while satisfying the no-descrending specificity lint rule. Disabling it here. */
 
-/* stylelint-disable no-descending-specificity */
+/* stylelint-disable */
 
 .layout,
 .layout.layout-single {
@@ -128,8 +133,8 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 
 		@include tablet {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
-				minmax(0, 2fr);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto /
+				minmax(0, 1fr) minmax(0, 5fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -142,7 +147,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
 					0,
-					2fr
+					4fr
 				)
 				minmax(0, 1fr);
 			grid-template-areas:
@@ -162,107 +167,97 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 		}
 	}
 
-	&.layout-flyout-active .layout-body {
-		@include desktop {
+	&.layout-menu-collapsed .layout-body {
+		@include tablet {
 			grid-template:
-				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
-				var(#{$layout-flyout-width-name});
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / var(
+					#{$layout-menu-collapsed-width-name}
+				)
+				minmax(0, 1fr);
 			grid-template-areas:
-				'header header header header'
-				'hero hero hero flyout'
-				'menu main aside flyout'
-				'footer footer footer footer';
+				'header header'
+				'hero hero'
+				'menu main'
+				'menu aside'
+				'footer footer';
 		}
 
-		@include widescreen {
+		@include desktop {
 			grid-template:
-				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
-				var(#{$layout-flyout-width-name});
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
+					#{$layout-menu-collapsed-width-name}
+				)
+				minmax(0, 4fr)
+				minmax(0, 23fr) minmax(0, 10fr);
 			grid-template-areas:
 				'header header header header'
-				'hero hero hero flyout'
-				'menu main aside flyout'
+				'hero hero hero hero'
+				'menu . main aside'
 				'footer footer footer footer';
 		}
-	}
-}
-
-// layout-menu-collapsed is a modifier that works with layouts that have a menu
-// It hides the menu and adjusts the main/aside areas accordingly
-
-.layout.layout-menu-collapsed {
-	// Styles for main and aside when menu is collapsed (only for holy-grail)
-
-	&.layout-holy-grail {
-		.layout-body-main {
-			width: 100%;
-			max-width: $half-widescreen !important;
-		}
-
-		.layout-body-aside {
-			flex-shrink: 0 !important;
-			width: 100% !important;
-			min-width: $default-aside-min-width !important;
-		}
-	}
-
-	// holy-grail layout with collapsed menu needs different grid proportions
 
-	&.layout-holy-grail .layout-body {
-		@include tablet {
+		@include widescreen {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
-				minmax(0, 7fr) minmax(0, 1fr);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
+					#{$layout-menu-collapsed-width-name}
+				)
+				minmax(0, var(#{$layout-menu-collapsed-width-widescreen-spacer-width-name}))
+				$half-widescreen minmax(0, #{$quarter-widescreen}) minmax(0, auto);
 			grid-template-areas:
-				'header header header'
-				'hero hero hero'
-				'. main .'
-				'. aside .'
-				'footer footer footer';
+				'header header header header header header'
+				'hero hero hero hero hero hero'
+				'. menu . main aside .'
+				'footer footer footer footer footer footer';
 		}
+	}
 
+	&.layout-flyout-active .layout-body {
 		@include desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 7fr)
-				minmax(0, 23fr) minmax(0, 10fr);
+				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr)
+				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header'
-				'hero hero hero'
-				'menu main aside'
-				'footer footer footer';
+				'header header header header'
+				'hero hero hero flyout'
+				'menu main aside flyout'
+				'footer footer footer footer';
 		}
 
 		@include widescreen {
-			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$eighth-widescreen} #{$five-eighths-widescreen} #{$quarter-widescreen} auto;
+			grid-template:
+				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr)
+				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header header header'
-				'hero hero hero hero hero'
-				'. menu main aside .'
-				'footer footer footer footer footer';
+				'header header header header'
+				'hero hero hero flyout'
+				'menu main aside flyout'
+				'footer footer footer footer';
 		}
 	}
 
-	// sidecar-left layout with collapsed menu - centers main content
-
-	&.layout-sidecar-left .layout-body {
-		@include tablet {
+	&.layout-flyout-active.layout-menu-collapsed .layout-body {
+		@include desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
-				minmax(0, 7fr) minmax(0, 1fr);
+				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
+				minmax(0, 4) minmax(0, 1fr)
+				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header'
-				'hero hero hero'
-				'. main .'
-				'footer footer footer';
+				'header header header header'
+				'hero hero hero flyout'
+				'menu main aside flyout'
+				'footer footer footer footer';
 		}
 
 		@include widescreen {
-			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} auto;
+			grid-template:
+				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
+				minmax(0, 4) minmax(0, 1fr)
+				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header'
-				'hero hero hero'
-				'. main .'
-				'footer footer footer';
+				'header header header header'
+				'hero hero hero flyout'
+				'menu main aside flyout'
+				'footer footer footer footer';
 		}
 	}
 }
@@ -279,7 +274,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 		@include tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
-				minmax(0, 2fr);
+				minmax(0, 4fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -290,7 +285,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 		@include desktop {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
-				minmax(0, 3fr);
+				minmax(0, 5fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -308,12 +303,55 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 		}
 	}
 
+	&.layout-menu-collapsed .layout-body {
+		@include tablet {
+			grid-template:
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
+					#{$layout-menu-collapsed-width-name}
+				)
+				minmax(0, 1fr);
+			grid-template-areas:
+				'header header'
+				'hero hero'
+				'menu main'
+				'footer footer';
+		}
+
+		@include desktop {
+			grid-template:
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
+					#{$layout-menu-collapsed-width-name}
+				)
+				minmax(0, 1)
+				minmax(0, 10fr) minmax(0, 2fr);
+			grid-template-areas:
+				'header header header header'
+				'hero hero hero hero'
+				'menu . main main'
+				'footer footer footer footer';
+		}
+
+		@include widescreen {
+			grid-template:
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
+					#{$layout-menu-collapsed-width-name}
+				)
+				minmax(0, var(#{$layout-menu-collapsed-width-widescreen-spacer-width-name}))
+				#{$three-quarters-widescreen} minmax(0, auto);
+			grid-template-areas:
+				'header header header header header'
+				'hero hero hero hero hero'
+				'. menu . main .'
+				'footer footer footer footer footer';
+		}
+	}
+
 	&.layout-flyout-active .layout-body {
 		@include desktop {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
 					0,
-					3fr
+					4fr
 				)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
@@ -327,7 +365,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
 					0,
-					3fr
+					4fr
 				)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
@@ -337,6 +375,33 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 				'footer footer footer';
 		}
 	}
+
+	&.layout-flyout-active.layout-menu-collapsed .layout-body {
+		@include desktop {
+			grid-template:
+				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
+				minmax(0, 1fr)
+				var(#{$layout-flyout-width-name});
+			grid-template-areas:
+				'header header header'
+				'hero hero flyout'
+				'menu main flyout'
+				'footer footer footer';
+		}
+
+		@include widescreen {
+			grid-template:
+				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
+				minmax(0, var(#{$layout-menu-collapsed-width-widescreen-spacer-width-name}))
+				minmax(0, 1fr)
+				var(#{$layout-flyout-width-name});
+			grid-template-areas:
+				'header header header header'
+				'hero hero hero flyout'
+				'menu . main flyout'
+				'footer footer footer footer';
+		}
+	}
 }
 
 .layout.layout-sidecar-right {
@@ -350,7 +415,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 
 		@include tablet {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 2fr)
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 5fr)
 				minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
@@ -361,7 +426,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 
 		@include desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr)
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 5fr)
 				minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
@@ -383,7 +448,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 	&.layout-flyout-active .layout-body {
 		@include desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 4fr) minmax(
 					0,
 					1fr
 				)
@@ -397,7 +462,7 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 
 		@include widescreen {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 4fr) minmax(
 					0,
 					1fr
 				)
@@ -450,8 +515,6 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 	}
 }
 
-/* stylelint-enable no-descending-specificity */
-
 @mixin constrained-layout-child {
 	position: sticky;
 	inset-block-start: 0;
@@ -516,3 +579,5 @@ $five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 		}
 	}
 }
+
+/* stylelint-enable */

package/src/components/markdown.scss

@@ -18,7 +18,7 @@ $list-top-spacing: 1rem !default;
 .markdown {
 	// @include responsive-font-size($markdown-paragraph-size, 0.875rem); // experiment only
 	font-size: $markdown-paragraph-size;
-	line-height: 1.6;
+	line-height: 1.75;
 
 	// Inline code
 

package/src/components/reading-width.scss

@@ -0,0 +1,3 @@
+.reading-width {
+	max-width: $optimal-reading-width;
+}

package/src/tokens/breakpoints.scss

@@ -7,5 +7,5 @@ $container-gap: 64px !default;
 // Breakpoints
 $breakpoint-tablet: 768px !default;
 $breakpoint-desktop: 1088px !default;
-$breakpoint-widescreen: 1800px !default;
+$breakpoint-widescreen: 2800px !default;
 //@end-sass-export-section

package/src/tokens/layout.scss

@@ -19,5 +19,6 @@ $layout-gap-scalable-custom-property-name: '--layout-gap-scalable' !default;
 $layout-flyout-width-name: '--layout-flyout-width' !default;
 $layout-flyout-width-desktop-custom-property-name: '--layout-flyout-width-desktop' !default;
 $layout-flyout-width-widescreen-custom-property-name: '--layout-flyout-width-widescreen' !default;
-
+$layout-menu-collapsed-width-name: '--layout-menu-collapsed-width' !default;
+$layout-menu-collapsed-width-widescreen-spacer-width-name: '--layout-menu-collapsed-width-widescreen' !default;
 //@end-sass-export-section

package/src/tokens/typography.scss

@@ -28,6 +28,9 @@ $letter-spacing-medium: 0.125rem;
 $letter-spacing-wide: 0.225rem;
 
 // Line height
-$line-height-normal: 1.3;
+$line-height-normal: 1.4;
+
+// Reading width
+$optimal-reading-width: 688px;
 
 //@end-sass-export-section