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

package/src/components/markdown.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 /* stylelint-disable selector-max-compound-selectors */
 
 $markdown-paragraph-size: 1rem !default;
@@ -11,21 +14,21 @@ $list-top-spacing: 1rem !default;
 	*/
 
 	.markdown {
-		@include code-block;
+		@include mixins.code-block;
 	}
 }
 
 .markdown {
-	// @include responsive-font-size($markdown-paragraph-size, 0.875rem); // experiment only
+	// @include mixins.responsive-font-size($markdown-paragraph-size, 0.875rem); // experiment only
 	font-size: $markdown-paragraph-size;
-	line-height: 1.75;
+	line-height: 1.6;
 
 	// Inline code
 
 	:not(a):not(pre) > code {
 		padding: 0.1em 0.2em;
 		border-radius: 3px;
-		background-color: $inline-code;
+		background-color: tokens.$inline-code;
 		word-wrap: break-word;
 		font-smooth: auto;
 		font-size: 0.85em;
@@ -88,7 +91,7 @@ $list-top-spacing: 1rem !default;
 	}
 
 	h1 {
-		@include responsive-font-size($font-size-1);
+		@include mixins.responsive-font-size(tokens.$font-size-1);
 
 		margin-block-start: none;
 		margin-block-end: 0.75rem;
@@ -102,27 +105,27 @@ $list-top-spacing: 1rem !default;
 	}
 
 	h2 {
-		@include responsive-font-size($font-size-2);
+		@include mixins.responsive-font-size(tokens.$font-size-2);
 
 		margin-block-start: 2rem;
 	}
 
 	h3 {
-		@include responsive-font-size($font-size-3);
+		@include mixins.responsive-font-size(tokens.$font-size-3);
 
 		margin-block-start: 1.875rem;
 		margin-block-end: 1.125rem;
 	}
 
 	h4 {
-		@include responsive-font-size($font-size-4);
+		@include mixins.responsive-font-size(tokens.$font-size-4);
 
 		margin-block-start: 2.25rem;
 		margin-block-end: 0.375rem;
 	}
 
 	h5 {
-		@include responsive-font-size($font-size-5, false, 1.1rem);
+		@include mixins.responsive-font-size(tokens.$font-size-5, false, 1.1rem);
 
 		margin-block-start: 2.25rem;
 		margin-block-end: 0.375rem;
@@ -130,7 +133,7 @@ $list-top-spacing: 1rem !default;
 	}
 
 	h6 {
-		@include responsive-font-size($font-size-6, false, 1.05rem);
+		@include mixins.responsive-font-size(tokens.$font-size-6, false, 1.05rem);
 
 		margin-block-start: 2.25rem;
 		margin-block-end: 0.375rem;
@@ -148,11 +151,11 @@ $list-top-spacing: 1rem !default;
 		padding: 0 0.8em;
 		border-width: 0 0 0 3px;
 		border-style: solid;
-		border-color: $border;
+		border-color: tokens.$border;
 
 		footer {
-			color: $text-subtle;
-			font-size: $font-size-8;
+			color: tokens.$text-subtle;
+			font-size: tokens.$font-size-8;
 		}
 	}
 }

package/src/components/media.scss

@@ -1,10 +1,13 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 .media {
 	display: flex;
 	align-items: flex-start;
 
 	+ .media,
 	.media {
-		border-block-start: 1px solid $border;
+		border-block-start: 1px solid tokens.$border;
 		margin-block-start: 1rem;
 		padding-block-start: 1rem;
 	}

package/src/components/message.scss

@@ -1,19 +1,22 @@
-$message-font-size-xs: $font-size-9 !default;
-$message-font-size-sm: $font-size-8 !default;
-$message-font-size-md: $font-size-7 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$message-background-color: $body-background !default;
-$message-gap-size: $spacer-4 !default;
-$message-spacer-md: $spacer-3 !default;
-$message-spacer-lg: $spacer-5 !default;
+$message-font-size-xs: tokens.$font-size-9 !default;
+$message-font-size-sm: tokens.$font-size-8 !default;
+$message-font-size-md: tokens.$font-size-7 !default;
+
+$message-background-color: tokens.$body-background !default;
+$message-gap-size: tokens.$spacer-4 !default;
+$message-spacer-md: tokens.$spacer-3 !default;
+$message-spacer-lg: tokens.$spacer-5 !default;
 
 $message-sender-width: 85% !default;
-$message-sender-background-color: $primary-background !default;
+$message-sender-background-color: tokens.$primary-background !default;
 
-$message-border-radius: $border-radius-lg !default;
-$message-border: $border-width solid $border !default;
+$message-border-radius: tokens.$border-radius-lg !default;
+$message-border: tokens.$border-width solid tokens.$border !default;
 
-$message-content-padding: $spacer-5 !default;
+$message-content-padding: tokens.$spacer-5 !default;
 $message-content-padding-inline-sm: 1rem !default;
 $message-content-padding-block-sm: 0.75rem !default;
 $message-content-padding-block-sm-sender: 0.5rem !default;
@@ -26,7 +29,7 @@ $message-content-padding-block-sm-sender: 0.5rem !default;
 	grid-template-columns: max-content minmax(0, 1fr);
 	gap: $message-gap-size;
 	font-size: $message-font-size-md;
-	line-height: $line-height-normal;
+	line-height: tokens.$line-height-normal;
 	word-wrap: break-word;
 
 	.message-time {

package/src/components/notification.scss

@@ -1,17 +1,20 @@
-$notification-background: $secondary-background !default;
-$notification-padding: $spacer-5 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$notification-font-size: $font-size-7 !default;
-$notification-color: $text !default;
+$notification-background: tokens.$secondary-background !default;
+$notification-padding: tokens.$spacer-5 !default;
 
-$notification-border-color: $control-border !default;
-$notification-border-width: $border-width !default;
-$notification-border-radius: $border-radius !default;
+$notification-font-size: tokens.$font-size-7 !default;
+$notification-color: tokens.$text !default;
+
+$notification-border-color: tokens.$control-border !default;
+$notification-border-width: tokens.$border-width !default;
+$notification-border-radius: tokens.$border-radius !default;
 
 $notification-icon-inline-spacing: 0.375em !default;
 $notification-icon-block-spacing: 0.2em !default;
 
-$notification-dismiss-margin: $spacer-2 !default;
+$notification-dismiss-margin: tokens.$spacer-2 !default;
 
 .notification {
 	display: grid;
@@ -21,18 +24,18 @@ $notification-dismiss-margin: $spacer-2 !default;
 	grid-template-areas: 'notification-content dismiss';
 	border: $notification-border-width solid $notification-border-color;
 	border-radius: $notification-border-radius;
-	outline-color: $text;
+	outline-color: tokens.$text;
 	background-color: $notification-background;
 	color: $notification-color;
 	font-size: $notification-font-size;
-	line-height: $line-height-normal;
+	line-height: tokens.$line-height-normal;
 	word-wrap: break-word;
 	word-break: break-word;
 
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$dark: nth($color-set, $color-index-dark);
-		$background: nth($color-set, $color-index-background);
+	@each $name, $color-set in tokens.$colors {
+		$base: nth($color-set, tokens.$color-index-base);
+		$dark: nth($color-set, tokens.$color-index-dark);
+		$background: nth($color-set, tokens.$color-index-background);
 
 		&.notification-#{$name} {
 			border-color: $dark;
@@ -53,7 +56,7 @@ $notification-dismiss-margin: $spacer-2 !default;
 		}
 
 		&::before {
-			@include loader;
+			@include mixins.loader;
 
 			position: absolute;
 			inset-block-start: $notification-padding;
@@ -68,14 +71,14 @@ $notification-dismiss-margin: $spacer-2 !default;
 		.notification-title,
 		a:not(.button) {
 			color: currentColor;
-			font-weight: $weight-semibold;
+			font-weight: tokens.$weight-semibold;
 		}
 
 		a:not(.button) {
 			text-decoration: underline;
 
 			.theme-high-contrast & {
-				color: $hyperlink;
+				color: tokens.$hyperlink;
 			}
 
 			&:hover {
@@ -87,7 +90,7 @@ $notification-dismiss-margin: $spacer-2 !default;
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
-			margin-block-end: $layout-1;
+			margin-block-end: tokens.$layout-1;
 
 			.icon {
 				flex-shrink: 0;
@@ -99,7 +102,7 @@ $notification-dismiss-margin: $spacer-2 !default;
 	}
 
 	.notification-dismiss {
-		@include dismiss-square;
+		@include mixins.dismiss-square;
 
 		grid-area: dismiss;
 		margin-inline-start: $notification-dismiss-margin;

package/src/components/pagination.scss

@@ -1,31 +1,34 @@
-$font-size-lg: $font-size-6 !default;
-$font-size-sm: $font-size-8 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$pagination-color: $text !default;
-$pagination-border-color: $border !default;
+$font-size-lg: tokens.$font-size-6 !default;
+$font-size-sm: tokens.$font-size-8 !default;
+
+$pagination-color: tokens.$text !default;
+$pagination-border-color: tokens.$border !default;
 $pagination-margin: 0.25rem !default;
 
-$pagination-hover-color: $primary-hover !default;
-$pagination-hover-border-color: $primary-hover !default;
+$pagination-hover-color: tokens.$primary-hover !default;
+$pagination-hover-border-color: tokens.$primary-hover !default;
 
-$pagination-focus-color: $primary-active !default;
-$pagination-focus-border-color: $primary-active !default;
+$pagination-focus-color: tokens.$primary-active !default;
+$pagination-focus-border-color: tokens.$primary-active !default;
 
-$pagination-active-color: $primary-active !default;
-$pagination-active-border-color: $primary-active !default;
+$pagination-active-color: tokens.$primary-active !default;
+$pagination-active-border-color: tokens.$primary-active !default;
 
-$pagination-disabled-color: $secondary-dark !default;
-$pagination-disabled-background-color: $secondary !default;
-$pagination-disabled-border-color: $secondary !default;
+$pagination-disabled-color: tokens.$secondary-dark !default;
+$pagination-disabled-background-color: tokens.$secondary !default;
+$pagination-disabled-border-color: tokens.$secondary !default;
 
-$pagination-current-color: $text-invert !default;
-$pagination-current-background-color: $primary !default;
-$pagination-current-background-color-hover: $primary-hover !default;
-$pagination-current-border-color: $text-invert !default;
+$pagination-current-color: tokens.$text-invert !default;
+$pagination-current-background-color: tokens.$primary !default;
+$pagination-current-background-color-hover: tokens.$primary-hover !default;
+$pagination-current-border-color: tokens.$text-invert !default;
 
-$pagination-ellipsis-color: $secondary !default;
+$pagination-ellipsis-color: tokens.$secondary !default;
 
-$pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
+$pagination-shadow-inset: inset 0 1px 2px tokens.$box-shadow-color-light;
 
 .pagination {
 	flex-wrap: wrap;
@@ -62,14 +65,14 @@ $pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
 		}
 	}
 
-	@include forced-colors {
+	@include mixins.forced-colors {
 		&::after {
 			display: block;
 			position: absolute;
 			width: 0.375em;
 			height: 0.375em;
 			border: 1px solid LinkText;
-			border-radius: $border-radius-rounded;
+			border-radius: tokens.$border-radius-rounded;
 			background-color: LinkText;
 			content: '';
 			inset-block-start: 0.25em;
@@ -95,9 +98,9 @@ $pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
 .pagination-next,
 .pagination-link,
 .pagination-ellipsis {
-	@include control;
-	@include unselectable;
-	@include transparent-effects;
+	@include mixins.control;
+	@include mixins.unselectable;
+	@include mixins.transparent-effects;
 
 	justify-content: center;
 	font-size: 1em;
@@ -129,7 +132,7 @@ $pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
 }
 
 .pagination-center {
-	@include orientation-landscape {
+	@include mixins.orientation-landscape {
 		.pagination-previous {
 			order: 1;
 		}
@@ -145,7 +148,7 @@ $pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	.pagination-list {
 		flex-grow: 0;
 		flex-shrink: 1;

package/src/components/persona.scss

@@ -1,24 +1,27 @@
-$persona-font-size-sm: $font-size-9 !default;
-$persona-font-size-md: $font-size-8 !default;
-$persona-font-size-lg: $font-size-7 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$persona-avatar-background-color: $alternate-background-medium !default;
-$persona-avatar-font-color: $text-invert !default;
-$persona-avatar-border-radius: $border-radius-rounded;
+$persona-font-size-sm: tokens.$font-size-9 !default;
+$persona-font-size-md: tokens.$font-size-8 !default;
+$persona-font-size-lg: tokens.$font-size-7 !default;
 
-$persona-details-font-color: $text-subtle !default;
-$persona-name-font-size: $font-size-7 !default;
-$persona-name-font-color: $text !default;
-$persona-name-font-weight: $weight-semibold !default;
+$persona-avatar-background-color: tokens.$alternate-background-medium !default;
+$persona-avatar-font-color: tokens.$text-invert !default;
+$persona-avatar-border-radius: tokens.$border-radius-rounded;
 
-$persona-gap-size: $layout-1 !default;
+$persona-details-font-color: tokens.$text-subtle !default;
+$persona-name-font-size: tokens.$font-size-7 !default;
+$persona-name-font-color: tokens.$text !default;
+$persona-name-font-weight: tokens.$weight-semibold !default;
+
+$persona-gap-size: tokens.$layout-1 !default;
 
 .persona {
 	display: flex;
 	position: relative;
 	gap: $persona-gap-size;
 	font-size: $persona-font-size-md;
-	line-height: $line-height-normal;
+	line-height: tokens.$line-height-normal;
 
 	.persona-avatar {
 		flex-shrink: 0;

package/src/components/popover.scss

@@ -1,12 +1,15 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 /* stylelint-disable max-nesting-depth, selector-max-specificity  */
 
-$popover-background-color: $body-background !default;
-$popover-border: $border-width solid $border !default;
-$popover-border-radius: $border-radius !default;
-$popover-shadow: $box-shadow-heavy !default;
+$popover-background-color: tokens.$body-background !default;
+$popover-border: tokens.$border-width solid tokens.$border !default;
+$popover-border-radius: tokens.$border-radius !default;
+$popover-shadow: tokens.$box-shadow-heavy !default;
 $popover-width: 224px !default;
 
-$popover-chevron-color: $border !default;
+$popover-chevron-color: tokens.$border !default;
 
 .popover {
 	display: inline-block;
@@ -23,7 +26,7 @@ $popover-chevron-color: $border !default;
 	.popover-content {
 		position: absolute;
 		width: $popover-width;
-		padding: $spacer-5;
+		padding: tokens.$spacer-5;
 		transform: none;
 		inset-inline-start: 0;
 		border: $popover-border;
@@ -33,13 +36,13 @@ $popover-chevron-color: $border !default;
 
 		// hide popover until after position is calculated, then show
 		visibility: hidden;
-		z-index: $zindex-popover;
+		z-index: tokens.$zindex-popover;
 	}
 
 	&.popover-top {
 		.popover-content {
 			inset-block-end: 100%;
-			margin-block-end: $spacer-3;
+			margin-block-end: tokens.$spacer-3;
 		}
 	}
 
@@ -49,12 +52,12 @@ $popover-chevron-color: $border !default;
 			overflow: visible;
 
 			&::before {
-				@include chevron-up;
+				@include mixins.chevron-up;
 
 				position: absolute;
 				inset-inline-start: var(--caret-left, 50%);
 				inset-inline-end: auto;
-				inset-block-start: calc($chevron-arrow-size / -1.75);
+				inset-block-start: calc(mixins.$chevron-arrow-size / -1.75);
 				border-color: $popover-chevron-color;
 				background-color: $popover-background-color;
 				z-index: 2;
@@ -73,17 +76,17 @@ $popover-chevron-color: $border !default;
 	&.popover-caret.popover-caret-bottom {
 		.popover-content {
 			margin-block-start: 0;
-			margin-block-end: $spacer-3;
+			margin-block-end: tokens.$spacer-3;
 			overflow: visible;
 
 			&::before {
-				@include chevron-down;
+				@include mixins.chevron-down;
 
 				position: absolute;
 				inset-inline-start: var(--caret-left, 50%);
 				inset-inline-end: auto;
 				inset-block-start: auto;
-				inset-block-end: calc($chevron-arrow-size / -1.75);
+				inset-block-end: calc(mixins.$chevron-arrow-size / -1.75);
 				border-color: $popover-chevron-color;
 				background-color: $popover-background-color;
 				z-index: 2;

package/src/components/progress-bar.scss

@@ -1,11 +1,14 @@
-$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;
-$progress-bar-value-background-color-danger: $danger !default;
-$progress-bar-value-background-color-success: $success !default;
-$progress-bar-height: $spacer-2 !default;
-$progress-bar-height-sm: $spacer-1 !default;
-$progress-bar-border-radius: $border-radius-rounded !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$progress-bar-background-color: tokens.$secondary-background-glow-high-contrast !default;
+$progress-bar-value-background-color: tokens.$primary !default;
+$progress-bar-value-background-color-warning: tokens.$warning !default;
+$progress-bar-value-background-color-danger: tokens.$danger !default;
+$progress-bar-value-background-color-success: tokens.$success !default;
+$progress-bar-height: tokens.$spacer-2 !default;
+$progress-bar-height-sm: tokens.$spacer-1 !default;
+$progress-bar-border-radius: tokens.$border-radius-rounded !default;
 $progress-bar-indeterminate-animation-duration: 2s !default;
 
 .progress-bar {
@@ -98,12 +101,12 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 			background-color: transparent;
 		}
 
-		@include prefers-reduced-motion {
+		@include mixins.prefers-reduced-motion {
 			animation-duration: 0s;
 		}
 	}
 
-	@include forced-colors {
+	@include mixins.forced-colors {
 		background-color: CanvasText !important;
 
 		&::-webkit-progress-bar {

package/src/components/scroll.scss

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

package/src/components/segmented-control.scss

@@ -1,26 +1,29 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $sc-padding-sm: 0.5em 1em !default;
 $sc-padding: 0.75em 1.25em !default;
 $sc-padding-lg: 1em 1.5em !default;
 
-$sc-font-color: $primary !default;
-$sc-border: $border-width solid $border !default;
-$sc-border-radius-rounded: $border-radius-rounded;
-$sc-hover-background-color: $primary-background !default;
-$sc-hover-border: $border-width solid $border !default;
-$sc-hover-border-color: $primary-hover !default;
-$sc-active-hover-background-color: $primary-hover !default;
-$sc-active-hover-border-color: $primary-hover !default;
-$sc-active-background-color: $primary !default;
-$sc-active-border-color: $primary !default;
-$sc-active-color: $text-invert !default;
+$sc-font-color: tokens.$primary !default;
+$sc-border: tokens.$border-width solid tokens.$border !default;
+$sc-border-radius-rounded: tokens.$border-radius-rounded;
+$sc-hover-background-color: tokens.$primary-background !default;
+$sc-hover-border: tokens.$border-width solid tokens.$border !default;
+$sc-hover-border-color: tokens.$primary-hover !default;
+$sc-active-hover-background-color: tokens.$primary-hover !default;
+$sc-active-hover-border-color: tokens.$primary-hover !default;
+$sc-active-background-color: tokens.$primary !default;
+$sc-active-border-color: tokens.$primary !default;
+$sc-active-color: tokens.$text-invert !default;
 
 .segmented-controls {
 	display: grid;
 	justify-content: center;
 	width: 100%;
-	grid-gap: $spacer-3;
+	grid-gap: tokens.$spacer-3;
 	grid-template-columns: max-content auto max-content;
-	font-size: $font-size-7;
+	font-size: tokens.$font-size-7;
 	white-space: nowrap;
 
 	.segmented-control-previous,
@@ -32,13 +35,13 @@ $sc-active-color: $text-invert !default;
 		border-radius: $sc-border-radius-rounded;
 		background-color: $sc-active-background-color;
 		color: $sc-active-color;
-		font-weight: $weight-semibold;
+		font-weight: tokens.$weight-semibold;
 		cursor: pointer;
 
 		&:hover {
 			background-color: $sc-active-hover-background-color;
 
-			@include forced-colors {
+			@include mixins.forced-colors {
 				border-color: Highlight;
 				background-color: Highlight;
 				color: HighlightText;
@@ -46,9 +49,9 @@ $sc-active-color: $text-invert !default;
 			}
 		}
 
-		@include focus-visible() {
-			outline-color: $text-invert;
-			outline-offset: -$focus-outline-offset;
+		@include mixins.focus-visible() {
+			outline-color: tokens.$text-invert;
+			outline-offset: -(tokens.$focus-outline-offset);
 		}
 	}
 
@@ -72,21 +75,21 @@ $sc-active-color: $text-invert !default;
 		border-radius: $sc-border-radius-rounded;
 		background-color: transparent;
 		color: $sc-font-color;
-		font-weight: $weight-semibold;
+		font-weight: tokens.$weight-semibold;
 		cursor: pointer;
 		appearance: none;
 		vertical-align: top;
 
-		@include focus-visible() {
-			outline-color: $text-invert;
-			outline-offset: -$focus-outline-offset;
+		@include mixins.focus-visible() {
+			outline-color: tokens.$text-invert;
+			outline-offset: -(tokens.$focus-outline-offset);
 		}
 
 		&:hover {
 			background-color: $sc-hover-background-color;
-			z-index: $zindex-hover;
+			z-index: tokens.$zindex-hover;
 
-			@include forced-colors {
+			@include mixins.forced-colors {
 				background-color: Highlight !important;
 				color: HighlightText !important;
 				forced-color-adjust: none;
@@ -96,14 +99,14 @@ $sc-active-color: $text-invert !default;
 		&[aria-selected='true'] {
 			background-color: $sc-active-background-color;
 			color: $sc-active-color;
-			z-index: $zindex-active;
+			z-index: tokens.$zindex-active;
 
 			&:hover {
 				background-color: $sc-active-hover-background-color;
-				z-index: $zindex-hover;
+				z-index: tokens.$zindex-hover;
 			}
 
-			@include forced-colors {
+			@include mixins.forced-colors {
 				background-color: SelectedItem;
 				color: SelectedItemText;
 				forced-color-adjust: none;
@@ -111,7 +114,7 @@ $sc-active-color: $text-invert !default;
 		}
 	}
 
-	@include tablet {
+	@include mixins.tablet {
 		.segmented-control,
 		.segmented-previous,
 		.segmented-next {
@@ -119,7 +122,7 @@ $sc-active-color: $text-invert !default;
 		}
 	}
 
-	@include desktop {
+	@include mixins.desktop {
 		.segmented-control,
 		.segmented-previous,
 		.segmented-next {