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

package/src/components/accordion.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $accordion-font-size-sm: $font-size-9 !default;
 $accordion-font-size-md: $font-size-8 !default;
 $accordion-font-size-lg: $font-size-7 !default;

package/src/components/badge.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $badge-icon-padding-block: 0.5em !default;
 $badge-padding-block: 0.25em !default;
 $badge-padding-inline: 0.5em !default;

package/src/components/banner.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $banner-background: $info-background !default;
 $banner-padding: $spacer-5 !default;
 

package/src/components/breadcrumbs.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $breadcrumb-font-size: $font-size-8 !default;
 $breadcrumb-spacing-horizontal: 0.25em !default;
 $breadcrumb-spacing-vertical: 0.375em !default;

package/src/components/button-reset.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 .button-reset {
 	@include transparent-effects;
 

package/src/components/button.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
 
 $button-color: $text !default;
 $button-background-color: $body-background !default;

package/src/components/buttons.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable selector-max-specificity, max-nesting-depth */
 
 .buttons {
@@ -45,13 +48,13 @@
 	&.buttons-addons {
 		.button {
 			&:not(:first-child) {
-				border-bottom-#{$user-left}-radius: 0;
-				border-top-#{$user-left}-radius: 0;
+				border-end-start-radius: 0;
+				border-start-start-radius: 0;
 			}
 
 			&:not(:last-child) {
-				border-bottom-#{$user-right}-radius: 0;
-				border-top-#{$user-right}-radius: 0;
+				border-end-end-radius: 0;
+				border-start-end-radius: 0;
 				margin-inline-end: -1px;
 			}
 

package/src/components/card.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $card-color: $text !default;
 $card-shadow: $box-shadow-light;
 $card-padding: $spacer-5;

package/src/components/code-block.scss

@@ -1,3 +1,7 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+@use './button.scss' as *;
+
 $code-block-font-size: $font-size-8 !default;
 $code-block-border-color: $code-block-border !default;
 $code-block-border-width: $border-width !default;

package/src/components/form/checkbox.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 /* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
 
 $checkbox-border-radius: $border-radius !default;

package/src/components/form/form.scss

@@ -1,3 +1,7 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+@use './label.scss' as *;
+
 /* stylelint-disable max-nesting-depth, selector-max-specificity  */
 
 $field-line-height: 1.5 !default;

package/src/components/form/help.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 $help-color: $text !default;
 $help-danger-color: $danger !default;
 $help-success-color: $success !default;

package/src/components/form/index.scss

@@ -1,8 +1,8 @@
-@import './label.scss';
-@import './help.scss';
-@import './checkbox.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './select.scss';
-@import './radio.scss';
-@import './form.scss';
+@forward './label.scss';
+@forward './help.scss';
+@forward './checkbox.scss';
+@forward './input.scss';
+@forward './textarea.scss';
+@forward './select.scss';
+@forward './radio.scss';
+@forward './form.scss';

package/src/components/form/input.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 $input-color: $text !default;
 $input-background-color: $body-background !default;
 $input-border-color: $control-border !default;

package/src/components/form/label.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 $label-color: $text !default;
 $label-font-size: $font-size-7 !default;
 $label-font-weight: $weight-semibold !default;

package/src/components/form/radio.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 $radio-circle-size: 1.25em !default;
 $radio-dot-size: 0.625em !default;
 $radio-shadow-radius: 0.15em !default;

package/src/components/form/select.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 /* stylelint-disable selector-no-qualifying-type */
 
 $select-color: $text !default;

package/src/components/form/textarea.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/index.scss' as *;
+@use '../../mixins/index.scss' as *;
+
 $textarea-color: $text !default;
 $textarea-background-color: $body-background !default;
 $textarea-border-color: $control-border !default;

package/src/components/gradient-card.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $gradient-card-padding: $layout-2 !default;
 $gradient-card-border-radius: $border-radius-lg !default; //6px
 

package/src/components/gradient.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $border-gradient-colors: (
 	'body': $body-background,
 	'body-accent': $body-background-accent

package/src/components/hero.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $hero-padding-xs: $layout-4 !default;
 $hero-padding-sm: $layout-5 !default;
 $hero-padding-default: $layout-6 !default;

package/src/components/icon.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $features-icon: true !default;
 $icon-dimensions: 1em !default;
 

package/src/components/image.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
 
 .image {

package/src/components/index.scss

@@ -1,35 +1,35 @@
-@import './accordion.scss';
-@import './badge.scss';
-@import './banner.scss';
-@import './breadcrumbs.scss';
-@import './button.scss';
-@import './buttons.scss';
-@import './card.scss';
-@import './button-reset.scss';
-@import './form/index.scss';
-@import './hero.scss';
-@import './gradient.scss';
-@import './gradient-card.scss';
-@import './link-button.scss';
-@import './code-block.scss';
-@import './markdown.scss'; // must be ordered after code-block
-@import './media.scss';
-@import './message.scss';
-@import './notification.scss';
-@import './icon.scss';
-@import './image.scss';
-@import './persona.scss';
-@import './popover.scss';
-@import './pagination.scss';
-@import './progress-bar.scss';
-@import './reading-width.scss';
-@import './table.scss';
-@import './tag.scss';
-@import './toggle.scss';
-@import './scroll.scss';
-@import './site-header.scss';
-@import './steps.scss';
-@import './stretched-link.scss';
-@import './segmented-control.scss';
-@import './timeline.scss';
-@import './layout.scss';
+@forward './accordion.scss';
+@forward './badge.scss';
+@forward './banner.scss';
+@forward './breadcrumbs.scss';
+@forward './button.scss';
+@forward './buttons.scss';
+@forward './card.scss';
+@forward './button-reset.scss';
+@forward './form/index.scss';
+@forward './hero.scss';
+@forward './gradient.scss';
+@forward './gradient-card.scss';
+@forward './link-button.scss';
+@forward './code-block.scss';
+@forward './markdown.scss'; // must be ordered after code-block
+@forward './media.scss';
+@forward './message.scss';
+@forward './notification.scss';
+@forward './icon.scss';
+@forward './image.scss';
+@forward './persona.scss';
+@forward './popover.scss';
+@forward './pagination.scss';
+@forward './progress-bar.scss';
+@forward './table.scss';
+@forward './tag.scss';
+@forward './toggle.scss';
+@forward './reading-width.scss';
+@forward './scroll.scss';
+@forward './site-header.scss';
+@forward './steps.scss';
+@forward './stretched-link.scss';
+@forward './segmented-control.scss';
+@forward './timeline.scss';
+@forward './layout.scss';

package/src/components/layout.scss

@@ -1,14 +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-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;
+$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;
 
 :root {
 	--window-inner-height: 100vh; // to be overwritten by JS
@@ -29,9 +31,8 @@ $layout-menu-collapsed-width: 96px !default;
 	#{$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})
-	);
+	#{$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;
@@ -134,7 +135,7 @@ $layout-menu-collapsed-width: 96px !default;
 		@include tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto /
-				minmax(0, 1fr) minmax(0, 5fr);
+				minmax(0, 1fr) minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -145,26 +146,16 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include desktop {
 			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
-					0,
-					4fr
-				)
-				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 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 {
@@ -184,31 +175,17 @@ $layout-menu-collapsed-width: 96px !default;
 
 		@include desktop {
 			grid-template:
-				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);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto /
+				var(#{$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 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}))
-				$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 {
@@ -222,36 +199,14 @@ $layout-menu-collapsed-width: 96px !default;
 				'menu main aside flyout'
 				'footer footer footer footer';
 		}
-
-		@include widescreen {
-			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'
-				'hero hero hero flyout'
-				'menu main aside flyout'
-				'footer 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, 4) minmax(0, 1fr)
-				var(#{$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header header'
-				'hero hero hero flyout'
-				'menu main aside flyout'
-				'footer footer footer footer';
-		}
-
-		@include widescreen {
-			grid-template:
-				auto auto var(--atlas-contained-height) auto / var(#{$layout-menu-collapsed-width-name})
-				minmax(0, 4) minmax(0, 1fr)
+				minmax(0, 1fr)
+				minmax(0, 275px)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
@@ -274,7 +229,7 @@ $layout-menu-collapsed-width: 96px !default;
 		@include tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
-				minmax(0, 4fr);
+				minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -292,15 +247,6 @@ $layout-menu-collapsed-width: 96px !default;
 				'menu main'
 				'footer footer';
 		}
-
-		@include 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 {
@@ -322,28 +268,13 @@ $layout-menu-collapsed-width: 96px !default;
 				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);
+				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 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 {
@@ -360,20 +291,6 @@ $layout-menu-collapsed-width: 96px !default;
 				'menu main flyout'
 				'footer footer footer';
 		}
-
-		@include widescreen {
-			grid-template:
-				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(
-					0,
-					4fr
-				)
-				var(#{$layout-flyout-width-name});
-			grid-template-areas:
-				'header header header'
-				'hero hero flyout'
-				'menu main flyout'
-				'footer footer footer';
-		}
 	}
 
 	&.layout-flyout-active.layout-menu-collapsed .layout-body {
@@ -388,19 +305,6 @@ $layout-menu-collapsed-width: 96px !default;
 				'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';
-		}
 	}
 }
 
@@ -460,19 +364,19 @@ $layout-menu-collapsed-width: 96px !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 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';
+		// }
 	}
 }
 

package/src/components/link-button.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /*
  * For use on <button> elements to emulate the appearance of standard <a> tags.
 */

package/src/components/markdown.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable selector-max-compound-selectors */
 
 $markdown-paragraph-size: 1rem !default;

package/src/components/media.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 .media {
 	display: flex;
 	align-items: flex-start;

package/src/components/message.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $message-font-size-xs: $font-size-9 !default;
 $message-font-size-sm: $font-size-8 !default;
 $message-font-size-md: $font-size-7 !default;

package/src/components/notification.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $notification-background: $secondary-background !default;
 $notification-padding: $spacer-5 !default;
 

package/src/components/pagination.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $font-size-lg: $font-size-6 !default;
 $font-size-sm: $font-size-8 !default;
 

package/src/components/persona.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $persona-font-size-sm: $font-size-9 !default;
 $persona-font-size-md: $font-size-8 !default;
 $persona-font-size-lg: $font-size-7 !default;

package/src/components/popover.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable max-nesting-depth, selector-max-specificity  */
 
 $popover-background-color: $body-background !default;

package/src/components/progress-bar.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $progress-bar-background-color: $secondary-background-glow-high-contrast !default;
 $progress-bar-value-background-color: $primary !default;
 $progress-bar-value-background-color-warning: $warning !default;

package/src/components/reading-width.scss

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

package/src/components/scroll.scss

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