@microsoft/atlas-css 5.0.0-test.2 → 5.0.0-test.3

package/src/components/layout.scss

@@ -5,12 +5,12 @@
 $quarter-widescreen: math.div(tokens.$breakpoint-widescreen, 4);
 $half-widescreen: math.div(tokens.$breakpoint-widescreen, 2);
 $three-quarters-widescreen: math.div(tokens.$breakpoint-widescreen, 4) * 3;
-$default-flyout-width-desktop: 320px;
-$default-flyout-width-widescreen: 480px;
-$default-aside-min-width: 300px;
-$eighth-widescreen: math.div(tokens.$breakpoint-widescreen, 8); // 225px
-$five-eighths-widescreen: math.div(tokens.$breakpoint-widescreen, 8) * 5; // 1125px
-$layout-menu-collapsed-width: 96px !default;
+$default-flyout-width-desktop: 320px !default;
+$default-flyout-width-widescreen: 480px !default;
+$layout-menu-collapsed-width: 68px !default;
+$menu-max-width: 275px !default;
+$aside-max-width: 275px !default;
+$spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !default;
 
 :root {
 	--window-inner-height: 100vh; // to be overwritten by JS
@@ -33,9 +33,8 @@ $layout-menu-collapsed-width: 96px !default;
 		#{tokens.$layout-flyout-width-desktop-custom-property-name}
 	);
 	#{tokens.$layout-menu-collapsed-width-name}: $layout-menu-collapsed-width;
-	#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}: calc(
-		$quarter-widescreen - var(#{tokens.$layout-menu-collapsed-width-name})
-	);
+	#{tokens.$layout-menu-max-width-name}: $menu-max-width;
+	#{tokens.$layout-aside-max-width-name}: $aside-max-width;
 
 	@include mixins.widescreen {
 		#{tokens.$layout-gap-scalable-custom-property-name}: tokens.$layout-widescreen-gap;
@@ -139,8 +138,8 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include mixins.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, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -151,26 +150,16 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
-					0,
-					2fr
-				)
-				minmax(0, 1fr);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto /
+				minmax(0, 275px)
+				minmax(0, 1fr)
+				minmax(0, 275px);
 			grid-template-areas:
 				'header header header'
 				'hero hero hero'
 				'menu main aside'
 				'footer footer footer';
 		}
-
-		@include mixins.widescreen {
-			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
-			grid-template-areas:
-				'header header header header header'
-				'hero hero hero hero hero'
-				'. menu main aside .'
-				'footer footer footer footer footer';
-		}
 	}
 
 	&.layout-menu-collapsed .layout-body {
@@ -190,48 +179,23 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
-					#{tokens.$layout-menu-collapsed-width-name}
-				)
-				minmax(0, 4fr)
-				minmax(0, 23fr) minmax(0, 10fr);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto /
+				var(#{tokens.$layout-menu-collapsed-width-name})
+				#{$spacer-width}
+				minmax(0, 1fr)
+				minmax(0, 275px);
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero hero'
 				'menu . main aside'
 				'footer footer footer footer';
 		}
-
-		@include mixins.widescreen {
-			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
-					#{tokens.$layout-menu-collapsed-width-name}
-				)
-				minmax(0, var(#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}))
-				$half-widescreen minmax(0, #{$quarter-widescreen}) minmax(0, auto);
-			grid-template-areas:
-				'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 mixins.desktop {
 			grid-template:
-				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
-				var(#{tokens.$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header header'
-				'hero hero hero flyout'
-				'menu main aside flyout'
-				'footer footer footer footer';
-		}
-
-		@include mixins.widescreen {
-			grid-template:
-				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
+				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr)
 				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
@@ -247,21 +211,8 @@ $layout-menu-collapsed-width: 96px !default;
 				auto auto var(--atlas-contained-height) auto / var(
 					#{tokens.$layout-menu-collapsed-width-name}
 				)
-				minmax(0, 2fr) minmax(0, 1fr)
-				var(#{tokens.$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header header'
-				'hero hero hero flyout'
-				'menu main aside flyout'
-				'footer footer footer footer';
-		}
-
-		@include mixins.widescreen {
-			grid-template:
-				auto auto var(--atlas-contained-height) auto / var(
-					#{tokens.$layout-menu-collapsed-width-name}
-				)
-				minmax(0, 2fr) minmax(0, 1fr)
+				minmax(0, 1fr)
+				minmax(0, 275px)
 				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
@@ -295,22 +246,13 @@ $layout-menu-collapsed-width: 96px !default;
 		@include mixins.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'
 				'menu main'
 				'footer footer';
 		}
-
-		@include mixins.widescreen {
-			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
-			grid-template-areas:
-				'header header header header'
-				'hero hero hero hero'
-				'. menu main .'
-				'footer footer footer footer';
-		}
 	}
 
 	&.layout-menu-collapsed .layout-body {
@@ -332,28 +274,13 @@ $layout-menu-collapsed-width: 96px !default;
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
 					#{tokens.$layout-menu-collapsed-width-name}
 				)
-				minmax(0, 4fr)
-				minmax(0, 23fr) minmax(0, 10fr);
+				minmax(0, 2fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero hero'
 				'menu . main main'
 				'footer footer footer footer';
 		}
-
-		@include mixins.widescreen {
-			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
-					#{tokens.$layout-menu-collapsed-width-name}
-				)
-				minmax(0, var(#{tokens.$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 {
@@ -361,21 +288,7 @@ $layout-menu-collapsed-width: 96px !default;
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
 					0,
-					3fr
-				)
-				var(#{tokens.$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header'
-				'hero hero flyout'
-				'menu main flyout'
-				'footer footer footer';
-		}
-
-		@include mixins.widescreen {
-			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
-					0,
-					3fr
+					4fr
 				)
 				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
@@ -400,21 +313,6 @@ $layout-menu-collapsed-width: 96px !default;
 				'menu main flyout'
 				'footer footer footer';
 		}
-
-		@include mixins.widescreen {
-			grid-template:
-				auto auto var(--atlas-contained-height) auto / var(
-					#{tokens.$layout-menu-collapsed-width-name}
-				)
-				minmax(0, var(#{tokens.$layout-menu-collapsed-width-widescreen-spacer-width-name}))
-				minmax(0, 1fr)
-				var(#{tokens.$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header header'
-				'hero hero hero flyout'
-				'menu . main flyout'
-				'footer footer footer footer';
-		}
 	}
 }
 
@@ -429,7 +327,7 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include mixins.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'
@@ -440,7 +338,7 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include mixins.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'
@@ -462,21 +360,7 @@ $layout-menu-collapsed-width: 96px !default;
 	&.layout-flyout-active .layout-body {
 		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
-					0,
-					1fr
-				)
-				var(#{tokens.$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header'
-				'hero hero flyout'
-				'main aside flyout'
-				'footer footer footer';
-		}
-
-		@include mixins.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
 				)

package/src/components/markdown.scss

@@ -21,7 +21,7 @@ $list-top-spacing: 1rem !default;
 .markdown {
 	// @include mixins.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/media.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 .media {
 	display: flex;

package/src/components/message.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 $message-font-size-xs: tokens.$font-size-9 !default;
 $message-font-size-sm: tokens.$font-size-8 !default;

package/src/components/persona.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 $persona-font-size-sm: tokens.$font-size-9 !default;
 $persona-font-size-md: tokens.$font-size-8 !default;

package/src/components/reading-width.scss

@@ -0,0 +1,10 @@
+@use '../tokens/typography.scss' as typography;
+
+.reading-width {
+	max-width: typography.$optimal-reading-width;
+}
+
+.reading-width-padded {
+	width: typography.$reading-width-padded;
+	padding: typography.$reading-width-padding;
+}

package/src/components/scroll.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
-
 .scroll-horizontal {
 	overflow-x: auto;
 	overflow-y: hidden;

package/src/components/site-header.scss

@@ -72,9 +72,9 @@ $site-header-panel-featured-section-border: 1px solid tokens.$table-border-dark
 	gap: $site-header-inline-gap;
 	padding-inline: tokens.$layout-gap;
 
-	@include mixins.widescreen {
-		padding-inline: tokens.$layout-widescreen-gap;
-	}
+	// @include mixins.widescreen {
+	// 	padding-inline: tokens.$layout-widescreen-gap;
+	// }
 
 	.site-header-button {
 		@include mixins.control;

package/src/components/steps.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 $step-font-size: tokens.$font-size-7 !default;
 $steps-gap: 0.4375em !default;

package/src/components/stretched-link.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 .stretched-link {
 	&::before {

package/src/components/tag.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 /* stylelint-disable selector-max-specificity, no-descending-specificity  */
 

package/src/components/timeline.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 $timeline-content-font-size: tokens.$font-size-8 !default;
 $timeline-timestamp-font-size: tokens.$font-size-9 !default;
 $timeline-timestamp-font-weight: tokens.$weight-semilight !default;

package/src/core/animations.scss

@@ -1,4 +1,3 @@
-@use '../tokens/index.scss' as tokens;
 @use '../mixins/index.scss' as mixins;
 
 // stylelint-disable-next-line keyframes-name-pattern

package/src/core/bare-elements.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
 

package/src/core/font-stack.scss

@@ -1,5 +1,4 @@
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 html {
 	font-size: tokens.$document-font-size;

package/src/core/minireset.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
-
 /* stylelint-disable */
 /*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */
 html,

package/src/core/normalize.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
-
 /* stylelint-disable */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

package/src/core/themes.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../tokens/index.scss' as tokens;
-@use '../mixins/index.scss' as mixins;
 
 $root-theme: 'light' !default;
 $print-theme: 'light' !default;

package/src/mixins/center.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 @mixin center($width, $height: 0) {
 	position: absolute;
 

package/src/mixins/colors.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 @mixin fill-current-color {
 	fill: currentColor !important;
 

package/src/mixins/force-colors.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 @mixin forced-colors() {
 	@media (forced-colors: active) {
 		@content;

package/src/mixins/gradient.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 @mixin gradient-text($startColor, $endColor) {
 	/* stylelint-disable */
 	-webkit-background-clip: text;

package/src/mixins/line-clamp.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 %line-clamp {
 	/*stylelint-disable*/
 	display: -webkit-box;

package/src/mixins/overlay.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 %overlay {
 	position: absolute;
 	inset: 0;

package/src/mixins/transparency.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 %transparent-effects {
 	outline-color: inherit;
 	background-color: transparent;

package/src/mixins/unselectable.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 %unselectable {
 	/* stylelint-disable */
 	-webkit-touch-callout: none;

package/src/mixins/visually-hidden.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as tokens;
-
 @mixin visually-hidden() {
 	position: absolute;
 	width: 1px;

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

@@ -22,5 +22,7 @@ $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;
+$layout-menu-collapsed-spacer-desktop-width-name: '--layout-menu-collapsed-spacer-desktop-width' !default;
+$layout-menu-max-width-name: '--layout-menu-max-width' !default;
+$layout-aside-max-width-name: '--layout-aside-max-width' !default;
 //@end-sass-export-section

package/src/tokens/themes.scss

@@ -18,7 +18,7 @@ $themes: (
 		'overlay-invert': palette.$palette-white,
 		'body-background': palette.$palette-white,
 		'body-background-accent': palette.$palette-yellow-sand,
-		'body-background-medium': palette.$palette-grey-20-deprecated,
+		'body-background-medium': palette.$palette-grey-10-deprecated,
 		'alternate-background': palette.$palette-grey-120-deprecated,
 		'alternate-background-medium': palette.$palette-grey-110-deprecated,
 		'card-background': palette.$palette-white,

package/src/tokens/typography.scss

@@ -28,6 +28,10 @@ $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;
+$reading-width-padding: 24px;
+$reading-width-padded: $optimal-reading-width + ($reading-width-padding * 2);
 //@end-sass-export-section