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

package/src/components/pagination.scss

@@ -1,34 +1,34 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$font-size-lg: $font-size-6 !default;
-$font-size-sm: $font-size-8 !default;
+$font-size-lg: tokens.$font-size-6 !default;
+$font-size-sm: tokens.$font-size-8 !default;
 
-$pagination-color: $text !default;
-$pagination-border-color: $border !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;
@@ -65,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;
@@ -98,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;
@@ -132,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;
 		}
@@ -148,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,27 +1,26 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
-$persona-font-size-sm: $font-size-9 !default;
-$persona-font-size-md: $font-size-8 !default;
-$persona-font-size-lg: $font-size-7 !default;
+$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-avatar-background-color: $alternate-background-medium !default;
-$persona-avatar-font-color: $text-invert !default;
-$persona-avatar-border-radius: $border-radius-rounded;
+$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-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-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: $layout-1 !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,15 +1,15 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@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;
@@ -26,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;
@@ -36,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;
 		}
 	}
 
@@ -52,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;
@@ -76,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,14 +1,14 @@
-@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;
-$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 {
@@ -101,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/reading-width.scss

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

package/src/components/scroll.scss

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

package/src/components/segmented-control.scss

@@ -1,29 +1,29 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@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,
@@ -35,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;
@@ -49,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);
 		}
 	}
 
@@ -75,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;
@@ -99,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;
@@ -114,7 +114,7 @@ $sc-active-color: $text-invert !default;
 		}
 	}
 
-	@include tablet {
+	@include mixins.tablet {
 		.segmented-control,
 		.segmented-previous,
 		.segmented-next {
@@ -122,7 +122,7 @@ $sc-active-color: $text-invert !default;
 		}
 	}
 
-	@include desktop {
+	@include mixins.desktop {
 		.segmented-control,
 		.segmented-previous,
 		.segmented-next {

package/src/components/site-header.scss

@@ -1,16 +1,16 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-@use './button.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+@use './button.scss' as button;
 
 $site-header-height: 3.375em !default;
-$site-header-inline-gap: $spacer-3 !default;
-$site-header-border: 1px solid $border !default;
+$site-header-inline-gap: tokens.$spacer-3 !default;
+$site-header-border: 1px solid tokens.$border !default;
 
-$site-header-font-size: $font-size-7 !default;
+$site-header-font-size: tokens.$font-size-7 !default;
 $site-header-brand-font-size: 1.25em !default;
 $site-header-brand-font-size-sm: 1.15em !default;
 
-$site-header-control-color: $text !default;
+$site-header-control-color: tokens.$text !default;
 
 $site-header-button-font-size: 0.875em !default;
 $site-header-button-icon-font-size: 0.875em !default;
@@ -23,14 +23,14 @@ $site-header-hover-underline-border: $site-header-hover-underline-border-width s
 $site-header-logo-width: 1.625em !default;
 $site-header-divider-height: 1.5em !default;
 
-$site-header-panel-background-color: $body-background-medium !default;
+$site-header-panel-background-color: tokens.$body-background-medium !default;
 $site-header-panel-min-height: 350px !default;
-$site-header-panel-block-padding: $layout-4 !default;
-$site-header-panel-gap: $layout-2 !default;
-$site-header-panel-content-gap: $spacer-3 !default;
-$site-header-panel-shadow: $box-shadow-medium !default;
-$site-header-panel-border: 1px solid $border-white-high-contrast !default;
-$site-header-panel-featured-section-border: 1px solid $table-border-dark !default;
+$site-header-panel-block-padding: tokens.$layout-4 !default;
+$site-header-panel-gap: tokens.$layout-2 !default;
+$site-header-panel-content-gap: tokens.$spacer-3 !default;
+$site-header-panel-shadow: tokens.$box-shadow-medium !default;
+$site-header-panel-border: 1px solid tokens.$border-white-high-contrast !default;
+$site-header-panel-featured-section-border: 1px solid tokens.$table-border-dark !default;
 
 %site-header-hover-underline {
 	> :not(.icon):not(.image) {
@@ -48,12 +48,12 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 }
 
 %site-header-control {
-	outline-offset: -$focus-width;
+	outline-offset: -(tokens.$focus-width);
 	color: $site-header-control-color;
 	text-decoration: none;
 	white-space: nowrap;
 	cursor: pointer;
-	padding-block: $button-padding-vertical;
+	padding-block: button.$button-padding-vertical;
 	padding-inline: $site-header-inline-gap;
 
 	&:hover,
@@ -70,15 +70,15 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 	font-size: $site-header-font-size;
 	border-block-end: $site-header-border;
 	gap: $site-header-inline-gap;
-	padding-inline: $layout-gap;
+	padding-inline: tokens.$layout-gap;
 
-	// @include widescreen {
-	// 	padding-inline: $layout-widescreen-gap;
+	// @include mixins.widescreen {
+	// 	padding-inline: tokens.$layout-widescreen-gap;
 	// }
 
 	.site-header-button {
-		@include control;
-		@include unselectable;
+		@include mixins.control;
+		@include mixins.unselectable;
 
 		@extend %site-header-control;
 
@@ -88,7 +88,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 		border-radius: 0;
 		background-color: transparent;
 		font-size: $site-header-button-font-size;
-		font-weight: $weight-normal;
+		font-weight: tokens.$weight-normal;
 		text-align: center;
 
 		&[aria-expanded='true'] {
@@ -143,7 +143,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 	.site-header-divider {
 		display: inline-block;
 		height: $site-header-divider-height;
-		border-inline-start: 2px solid $text-subtle;
+		border-inline-start: 2px solid tokens.$text-subtle;
 		margin-inline-start: $site-header-inline-gap;
 	}
 
@@ -152,7 +152,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 
 		display: inline-block;
 		font-size: $site-header-brand-font-size-sm;
-		font-weight: $weight-semibold;
+		font-weight: tokens.$weight-semibold;
 
 		&:active,
 		&.is-active,
@@ -164,7 +164,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 			text-decoration: none;
 		}
 
-		@include tablet {
+		@include mixins.tablet {
 			font-size: $site-header-brand-font-size;
 		}
 	}
@@ -186,25 +186,25 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 		background-color: $site-header-panel-background-color;
 		text-wrap: wrap;
 		box-shadow: $site-header-panel-shadow;
-		z-index: $zindex-popover;
+		z-index: tokens.$zindex-popover;
 		inset-inline-start: 0;
 		inset-block-start: calc($site-header-height - 1px);
 		border-block-start: $site-header-panel-border;
 		border-block-end: $site-header-panel-border;
 		padding-block: $site-header-panel-block-padding;
-		padding-inline: $layout-gap;
+		padding-inline: tokens.$layout-gap;
 
-		@include tablet {
+		@include mixins.tablet {
 			grid-template-columns: auto 33.333%;
 			grid-template-areas: 'panel-content panel-featured-section';
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			grid-template-columns: auto 25%;
 		}
 
-		@include widescreen {
-			padding-inline: $layout-widescreen-gap;
+		@include mixins.widescreen {
+			padding-inline: tokens.$layout-widescreen-gap;
 		}
 
 		.site-header-panel-featured-content {
@@ -215,7 +215,7 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 			gap: $site-header-panel-gap;
 			flex-direction: column;
 
-			@include tablet {
+			@include mixins.tablet {
 				border-inline-start: $site-header-panel-featured-section-border;
 				border-block-start: 0;
 				padding-block-start: 0;
@@ -233,13 +233,13 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 			display: grid;
 			grid-gap: $site-header-panel-content-gap;
 
-			@include tablet {
+			@include mixins.tablet {
 				grid-auto-flow: column;
 				grid-template-columns: repeat(2, 1fr);
 				grid-template-rows: repeat(11, auto);
 			}
 
-			@include desktop {
+			@include mixins.desktop {
 				grid-template-columns: repeat(3, 1fr);
 				grid-template-rows: repeat(7, auto);
 			}
@@ -249,13 +249,13 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 			display: grid;
 			grid-gap: $site-header-panel-content-gap;
 
-			@include tablet {
+			@include mixins.tablet {
 				grid-auto-flow: column;
 				grid-template-columns: repeat(2, 1fr);
 				grid-template-rows: repeat(5, auto);
 			}
 
-			@include desktop {
+			@include mixins.desktop {
 				grid-template-columns: repeat(3, 1fr);
 				grid-template-rows: repeat(3, auto);
 			}

package/src/components/steps.scss

@@ -1,7 +1,6 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
-$step-font-size: $font-size-7 !default;
+$step-font-size: tokens.$font-size-7 !default;
 $steps-gap: 0.4375em !default;
 $steps-size: 0.5em !default;
 
@@ -14,12 +13,12 @@ $steps-size: 0.5em !default;
 	.step {
 		height: $steps-size;
 		aspect-ratio: 1 / 1;
-		border-radius: $border-radius-rounded;
-		background-color: $secondary;
+		border-radius: tokens.$border-radius-rounded;
+		background-color: tokens.$secondary;
 
 		&.step-selected {
 			aspect-ratio: 2 / 1;
-			background-color: $primary;
+			background-color: tokens.$primary;
 		}
 	}
 }

package/src/components/stretched-link.scss

@@ -1,11 +1,10 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 .stretched-link {
 	&::before {
 		position: absolute;
 		content: '';
-		z-index: $zindex-stretched-link;
+		z-index: tokens.$zindex-stretched-link;
 		inset: 0;
 	}
 }