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

package/src/components/image.scss

@@ -1,5 +1,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../mixins/index.scss' as mixins;
 
 $dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
 
@@ -30,14 +29,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/layout.scss

@@ -1,16 +1,16 @@
 @use 'sass:math';
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$quarter-widescreen: math.div($breakpoint-widescreen, 4);
-$half-widescreen: math.div($breakpoint-widescreen, 2);
-$three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
+$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;
 $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;
+$spacer-width: calc(275px - var(#{tokens.$layout-menu-collapsed-width-name})) !default;
 
 :root {
 	--window-inner-height: 100vh; // to be overwritten by JS
@@ -25,37 +25,41 @@ $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-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;
 		// 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 +122,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,7 +136,7 @@ $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);
@@ -144,7 +148,7 @@ $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)
@@ -159,10 +163,10 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.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,10 +177,10 @@ $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})
+				var(#{tokens.$layout-menu-collapsed-width-name})
 				#{$spacer-width}
 				minmax(0, 1fr)
 				minmax(0, 275px);
@@ -189,10 +193,10 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.layout-flyout-active .layout-body {
-		@include desktop {
+		@include mixins.desktop {
 			grid-template:
 				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero flyout'
@@ -202,12 +206,14 @@ $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)
 				minmax(0, 275px)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero flyout'
@@ -226,7 +232,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,7 +243,7 @@ $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);
@@ -250,10 +256,10 @@ $spacer-width: calc(275px - var(#{$layout-menu-collapsed-width-name})) !default;
 	}
 
 	&.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,10 +269,10 @@ $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);
 			grid-template-areas:
@@ -278,13 +284,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,
 					4fr
 				)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header'
 				'hero hero flyout'
@@ -294,11 +300,13 @@ $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'
@@ -317,7 +325,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' 'main' 'aside' 'footer';
 
-		@include tablet {
+		@include mixins.tablet {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 5fr)
 				minmax(0, 1fr);
@@ -328,7 +336,7 @@ $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(0, 1fr);
@@ -339,7 +347,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,33 +358,19 @@ $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(
 					0,
 					1fr
 				)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$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';
-		// }
 	}
 }
 
@@ -390,7 +384,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 +397,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 +422,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 +430,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 +458,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;
 	}
 }

package/src/components/markdown.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;
 
 /* stylelint-disable selector-max-compound-selectors */
 
@@ -14,12 +14,12 @@ $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;
 
@@ -28,7 +28,7 @@ $list-top-spacing: 1rem !default;
 	: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;
@@ -91,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;
@@ -105,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;
@@ -133,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;
@@ -151,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,5 +1,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 .media {
 	display: flex;
@@ -7,7 +6,7 @@
 
 	+ .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,22 +1,21 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
-$message-font-size-xs: $font-size-9 !default;
-$message-font-size-sm: $font-size-8 !default;
-$message-font-size-md: $font-size-7 !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: $body-background !default;
-$message-gap-size: $spacer-4 !default;
-$message-spacer-md: $spacer-3 !default;
-$message-spacer-lg: $spacer-5 !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;
@@ -29,7 +28,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,20 +1,20 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$notification-background: $secondary-background !default;
-$notification-padding: $spacer-5 !default;
+$notification-background: tokens.$secondary-background !default;
+$notification-padding: tokens.$spacer-5 !default;
 
-$notification-font-size: $font-size-7 !default;
-$notification-color: $text !default;
+$notification-font-size: tokens.$font-size-7 !default;
+$notification-color: tokens.$text !default;
 
-$notification-border-color: $control-border !default;
-$notification-border-width: $border-width !default;
-$notification-border-radius: $border-radius !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;
@@ -24,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;
@@ -56,7 +56,7 @@ $notification-dismiss-margin: $spacer-2 !default;
 		}
 
 		&::before {
-			@include loader;
+			@include mixins.loader;
 
 			position: absolute;
 			inset-block-start: $notification-padding;
@@ -71,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 {
@@ -90,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;
@@ -102,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;