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

package/src/components/image.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
 
@@ -30,14 +30,14 @@ $dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
 			height: $dimension * 1px;
 		}
 
-		@include tablet {
+		@include mixins.tablet {
 			&.image-#{$dimension}x#{$dimension}-tablet {
 				width: $dimension * 1px;
 				height: $dimension * 1px;
 			}
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			&.image-#{$dimension}x#{$dimension}-desktop {
 				width: $dimension * 1px;
 				height: $dimension * 1px;

package/src/components/index.scss

@@ -25,7 +25,6 @@
 @forward './table.scss';
 @forward './tag.scss';
 @forward './toggle.scss';
-@forward './reading-width.scss';
 @forward './scroll.scss';
 @forward './site-header.scss';
 @forward './steps.scss';

package/src/components/layout.scss

@@ -1,16 +1,16 @@
 @use 'sass:math';
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
-$quarter-widescreen: math.div($breakpoint-widescreen, 4);
-$half-widescreen: math.div($breakpoint-widescreen, 2);
-$three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
-$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(#{$layout-menu-collapsed-width-name})) !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$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;
 
 :root {
 	--window-inner-height: 100vh; // to be overwritten by JS
@@ -25,37 +25,42 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	max-inline-size: 100vw;
 
 	// --layout-gutter by default, see tokens/layout.scss
-	#{$layout-gap-custom-property-name}: $layout-gap;
-	#{$layout-gap-scalable-custom-property-name}: $layout-gap;
-	#{$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-max-width-name}: $menu-max-width;
-	#{$layout-aside-max-width-name}: $aside-max-width;
-
-	@include widescreen {
-		#{$layout-gap-scalable-custom-property-name}: $layout-widescreen-gap;
+	#{tokens.$layout-gap-custom-property-name}: tokens.$layout-gap;
+	#{tokens.$layout-gap-scalable-custom-property-name}: tokens.$layout-gap;
+	#{tokens.$layout-flyout-width-desktop-custom-property-name}: $default-flyout-width-desktop;
+	#{tokens.$layout-flyout-width-widescreen-custom-property-name}: $default-flyout-width-widescreen;
+	#{tokens.$layout-flyout-width-name}: var(
+		#{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})
+	);
+
+	@include mixins.widescreen {
+		#{tokens.$layout-gap-scalable-custom-property-name}: tokens.$layout-widescreen-gap;
 		// sets widescreen custom prop
-		#{$layout-flyout-width-name}: var(#{$layout-flyout-width-widescreen-custom-property-name});
+		#{tokens.$layout-flyout-width-name}: var(
+			#{tokens.$layout-flyout-width-widescreen-custom-property-name}
+		);
 	}
 }
 
 .layout-padding {
-	padding-inline: var(#{$layout-gap-custom-property-name}) !important;
+	padding-inline: var(#{tokens.$layout-gap-custom-property-name}) !important;
 }
 
 .layout-margin {
-	margin-inline: var(#{$layout-gap-scalable-custom-property-name}) !important;
+	margin-inline: var(#{tokens.$layout-gap-scalable-custom-property-name}) !important;
 }
 
-@include tablet {
+@include mixins.tablet {
 	.layout-padding-tablet {
-		padding-inline: var(#{$layout-gap-custom-property-name}) !important;
+		padding-inline: var(#{tokens.$layout-gap-custom-property-name}) !important;
 	}
 
 	.layout-margin-tablet {
-		margin-inline: var(#{$layout-gap-scalable-custom-property-name}) !important;
+		margin-inline: var(#{tokens.$layout-gap-scalable-custom-property-name}) !important;
 	}
 }
 
@@ -118,9 +123,9 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.layout-flyout-active .layout-body {
-		@include desktop {
+		@include mixins.desktop {
 			grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr) var(
-					#{$layout-flyout-width-name}
+					#{tokens.$layout-flyout-width-name}
 				);
 			grid-template-areas: 'header header' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer footer';
 		}
@@ -132,10 +137,10 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 		grid-template: minmax(auto, max-content) auto auto 1fr auto auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
 
-		@include tablet {
+		@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'
@@ -144,25 +149,35 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer';
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto /
-				minmax(0, 275px)
-				minmax(0, 1fr)
-				minmax(0, 275px);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
+					0,
+					2fr
+				)
+				minmax(0, 1fr);
 			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 {
-		@include tablet {
+		@include mixins.tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / var(
-					#{$layout-menu-collapsed-width-name}
+					#{tokens.$layout-menu-collapsed-width-name}
 				)
 				minmax(0, 1fr);
 			grid-template-areas:
@@ -173,26 +188,51 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer';
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto /
-				var(#{$layout-menu-collapsed-width-name})
-				#{$spacer-width}
-				minmax(0, 1fr)
-				minmax(0, 275px);
+				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);
 			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 desktop {
+		@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, 4fr) minmax(0, 1fr)
-				var(#{$layout-flyout-width-name});
+				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'
@@ -202,12 +242,27 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.layout-flyout-active.layout-menu-collapsed .layout-body {
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
-				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
-				minmax(0, 1fr)
-				minmax(0, 275px)
-				var(#{$layout-flyout-width-name});
+				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)
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero flyout'
@@ -226,7 +281,7 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 		grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
 
-		@include tablet {
+		@include mixins.tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
 				minmax(0, 2fr);
@@ -237,23 +292,32 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer';
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
-				minmax(0, 5fr);
+				minmax(0, 3fr);
 			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 {
-		@include tablet {
+		@include mixins.tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
-					#{$layout-menu-collapsed-width-name}
+					#{tokens.$layout-menu-collapsed-width-name}
 				)
 				minmax(0, 1fr);
 			grid-template-areas:
@@ -263,28 +327,57 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer';
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / var(
-					#{$layout-menu-collapsed-width-name}
+					#{tokens.$layout-menu-collapsed-width-name}
 				)
-				minmax(0, 2fr) minmax(0, 1fr);
+				minmax(0, 4fr)
+				minmax(0, 23fr) minmax(0, 10fr);
 			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 {
-		@include desktop {
+		@include mixins.desktop {
+			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,
-					4fr
+					3fr
 				)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header'
 				'hero hero flyout'
@@ -294,17 +387,34 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.layout-flyout-active.layout-menu-collapsed .layout-body {
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
-				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
+				auto auto var(--atlas-contained-height) auto / var(
+					#{tokens.$layout-menu-collapsed-width-name}
+				)
 				minmax(0, 1fr)
-				var(#{$layout-flyout-width-name});
+				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:
+				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';
+		}
 	}
 }
 
@@ -317,9 +427,9 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 		grid-template: minmax(auto, max-content) auto auto 1fr auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
 
-		@include tablet {
+		@include mixins.tablet {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 5fr)
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 2fr)
 				minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
@@ -328,9 +438,9 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer';
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 5fr)
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr)
 				minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
@@ -339,7 +449,7 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer';
 		}
 
-		@include widescreen {
+		@include mixins.widescreen {
 			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
 			grid-template-areas:
 				'header header header header'
@@ -350,13 +460,13 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.layout-flyout-active .layout-body {
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 4fr) minmax(
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(
 					0,
 					1fr
 				)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header'
 				'hero hero flyout'
@@ -364,19 +474,19 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 				'footer footer footer';
 		}
 
-		// @include widescreen {
-		// 	grid-template:
-		// 		minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 4fr) minmax(
-		// 			0,
-		// 			1fr
-		// 		)
-		// 		var(#{$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(
+					0,
+					1fr
+				)
+				var(#{tokens.$layout-flyout-width-name});
+			grid-template-areas:
+				'header header header'
+				'hero hero flyout'
+				'main aside flyout'
+				'footer footer footer';
+		}
 	}
 }
 
@@ -390,7 +500,7 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 		grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
 
 		// note that to make some extra room this layout is not constrained by the widescreen breakpoint like others
-		@include tablet {
+		@include mixins.tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
 				minmax(0, 1fr);
@@ -403,13 +513,13 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.layout-flyout-active .layout-body {
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
 					0,
 					1fr
 				)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header'
 				'hero hero flyout'
@@ -428,7 +538,7 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 
 // hide flyout when it's inactive
 
-@include desktop {
+@include mixins.desktop {
 	.layout.layout-flyout-active {
 		.layout-body-flyout {
 			display: block;
@@ -436,7 +546,7 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	.layout.layout-constrained {
 		&.layout-twin,
 		&.layout-sidecar-left,
@@ -464,7 +574,7 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 }
 
 // Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
-@include desktop {
+@include mixins.desktop {
 	.layout.layout-constrained.layout-holy-grail {
 		--atlas-contained-height: calc(
 			var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 1px

package/src/components/link-button.scss

@@ -1,17 +1,17 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 /*
  * For use on <button> elements to emulate the appearance of standard <a> tags.
 */
 
 .link-button {
-	@include transparent-effects;
+	@include mixins.transparent-effects;
 
 	display: inline-block;
 	padding: 0;
 	border: none;
-	color: $hyperlink;
+	color: tokens.$hyperlink;
 	cursor: pointer;
 
 	&:active,
@@ -22,16 +22,16 @@
 	&.is-focused,
 	&:hover,
 	&.is-hovered {
-		color: $primary-hover;
+		color: tokens.$primary-hover;
 		text-decoration: underline !important;
 	}
 
-	@include focus-visible {
-		color: $primary-hover;
+	@include mixins.focus-visible {
+		color: tokens.$primary-hover;
 		text-decoration: underline !important;
 	}
 
 	&:visited {
-		color: $visited;
+		color: tokens.$visited;
 	}
 }