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

package/src/components/index.scss

@@ -1,35 +1,34 @@
-@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 './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,13 +1,15 @@
 @use 'sass:math';
+@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-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
+$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 {
@@ -23,38 +25,42 @@ $layout-menu-collapsed-width: 96px !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-collapsed-width-widescreen-spacer-width-name}: calc(
-		$quarter-widescreen - var(#{$layout-menu-collapsed-width-name})
+	#{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 widescreen {
-		#{$layout-gap-scalable-custom-property-name}: $layout-widescreen-gap;
+	@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;
 	}
 }
 
@@ -117,9 +123,9 @@ $layout-menu-collapsed-width: 96px !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';
 		}
@@ -131,10 +137,10 @@ $layout-menu-collapsed-width: 96px !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, 5fr);
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
+				minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -143,11 +149,11 @@ $layout-menu-collapsed-width: 96px !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,
-					4fr
+					2fr
 				)
 				minmax(0, 1fr);
 			grid-template-areas:
@@ -157,7 +163,7 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer';
 		}
 
-		@include widescreen {
+		@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'
@@ -168,10 +174,10 @@ $layout-menu-collapsed-width: 96px !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:
@@ -182,10 +188,10 @@ $layout-menu-collapsed-width: 96px !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, 4fr)
 				minmax(0, 23fr) minmax(0, 10fr);
@@ -196,12 +202,12 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer footer';
 		}
 
-		@include widescreen {
+		@include mixins.widescreen {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
-					#{$layout-menu-collapsed-width-name}
+					#{tokens.$layout-menu-collapsed-width-name}
 				)
-				minmax(0, var(#{$layout-menu-collapsed-width-widescreen-spacer-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'
@@ -212,10 +218,10 @@ $layout-menu-collapsed-width: 96px !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});
+				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'
@@ -223,10 +229,10 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer footer';
 		}
 
-		@include widescreen {
+		@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'
@@ -236,11 +242,13 @@ $layout-menu-collapsed-width: 96px !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, 4) minmax(0, 1fr)
-				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'
@@ -248,11 +256,13 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer footer';
 		}
 
-		@include widescreen {
+		@include mixins.widescreen {
 			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});
+				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'
@@ -271,10 +281,10 @@ $layout-menu-collapsed-width: 96px !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, 4fr);
+				minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -282,10 +292,10 @@ $layout-menu-collapsed-width: 96px !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'
@@ -293,7 +303,7 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer';
 		}
 
-		@include widescreen {
+		@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'
@@ -304,10 +314,10 @@ $layout-menu-collapsed-width: 96px !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:
@@ -317,13 +327,13 @@ $layout-menu-collapsed-width: 96px !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, 1)
-				minmax(0, 10fr) minmax(0, 2fr);
+				minmax(0, 4fr)
+				minmax(0, 23fr) minmax(0, 10fr);
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero hero'
@@ -331,12 +341,12 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer footer';
 		}
 
-		@include widescreen {
+		@include mixins.widescreen {
 			grid-template:
 				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, auto) var(
-					#{$layout-menu-collapsed-width-name}
+					#{tokens.$layout-menu-collapsed-width-name}
 				)
-				minmax(0, var(#{$layout-menu-collapsed-width-widescreen-spacer-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'
@@ -347,13 +357,13 @@ $layout-menu-collapsed-width: 96px !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
+					3fr
 				)
-				var(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header'
 				'hero hero flyout'
@@ -361,13 +371,13 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer';
 		}
 
-		@include widescreen {
+		@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'
@@ -377,11 +387,13 @@ $layout-menu-collapsed-width: 96px !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'
@@ -389,12 +401,14 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer';
 		}
 
-		@include widescreen {
+		@include mixins.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}))
+				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(#{$layout-flyout-width-name});
+				var(#{tokens.$layout-flyout-width-name});
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero flyout'
@@ -413,9 +427,9 @@ $layout-menu-collapsed-width: 96px !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'
@@ -424,9 +438,9 @@ $layout-menu-collapsed-width: 96px !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'
@@ -435,7 +449,7 @@ $layout-menu-collapsed-width: 96px !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'
@@ -446,13 +460,13 @@ $layout-menu-collapsed-width: 96px !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'
@@ -460,13 +474,13 @@ $layout-menu-collapsed-width: 96px !default;
 				'footer footer footer';
 		}
 
-		@include widescreen {
+		@include mixins.widescreen {
 			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'
@@ -486,7 +500,7 @@ $layout-menu-collapsed-width: 96px !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);
@@ -499,13 +513,13 @@ $layout-menu-collapsed-width: 96px !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'
@@ -524,7 +538,7 @@ $layout-menu-collapsed-width: 96px !default;
 
 // hide flyout when it's inactive
 
-@include desktop {
+@include mixins.desktop {
 	.layout.layout-flyout-active {
 		.layout-body-flyout {
 			display: block;
@@ -532,7 +546,7 @@ $layout-menu-collapsed-width: 96px !default;
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	.layout.layout-constrained {
 		&.layout-twin,
 		&.layout-sidecar-left,
@@ -560,7 +574,7 @@ $layout-menu-collapsed-width: 96px !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,14 +1,17 @@
+@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,
@@ -19,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;
 	}
 }