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

package/src/components/table.scss

@@ -1,14 +1,14 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$table-cell-vertical-padding: $spacer-5 !default;
-$table-cell-horizontal-padding: $spacer-6 !default;
-$table-cell-padding-compact: $spacer-3 !default;
-$table-cell-padding-loose: $spacer-8 !default;
+$table-cell-vertical-padding: tokens.$spacer-5 !default;
+$table-cell-horizontal-padding: tokens.$spacer-6 !default;
+$table-cell-padding-compact: tokens.$spacer-3 !default;
+$table-cell-padding-loose: tokens.$spacer-8 !default;
 
-$table-caption-padding: $spacer-6 !default;
-$table-caption-size: $font-size-9 !default;
-$table-caption-spacing: $letter-spacing-medium !default;
+$table-caption-padding: tokens.$spacer-6 !default;
+$table-caption-size: tokens.$font-size-9 !default;
+$table-caption-spacing: tokens.$letter-spacing-medium !default;
 
 .table-wrapper {
 	overflow-x: auto;
@@ -18,18 +18,18 @@ $table-caption-spacing: $letter-spacing-medium !default;
 
 .table {
 	width: 100%;
-	font-size: $font-size-8;
+	font-size: tokens.$font-size-8;
 	border-collapse: collapse;
 	table-layout: auto;
 
 	&:not(.table-simple) {
-		border: 1px solid $table-border-dark;
+		border: 1px solid tokens.$table-border-dark;
 	}
 
 	caption {
 		padding: $table-caption-padding;
 		font-size: $table-caption-size;
-		font-weight: $weight-semibold;
+		font-weight: tokens.$weight-semibold;
 		letter-spacing: $table-caption-spacing;
 		text-align: end;
 		text-transform: uppercase;
@@ -40,7 +40,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
 		display: table-cell;
 		word-wrap: break-word;
 		padding: $table-cell-vertical-padding $table-cell-horizontal-padding;
-		border-block-start: 1px solid $table-border-dark;
+		border-block-start: 1px solid tokens.$table-border-dark;
 		line-height: 1.5;
 		vertical-align: top;
 	}
@@ -50,7 +50,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
 	}
 
 	&.table-stacked-mobile {
-		@include discouraged-mobile {
+		@include mixins.discouraged-mobile {
 			th,
 			td {
 				display: block;
@@ -69,7 +69,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
 			}
 
 			thead tr > th:last-child {
-				border-block-end: 1px solid $table-border-dark;
+				border-block-end: 1px solid tokens.$table-border-dark;
 			}
 		}
 	}
@@ -86,18 +86,18 @@ $table-caption-spacing: $letter-spacing-medium !default;
 	&.table-complex {
 		thead tr,
 		tfoot tr {
-			background-color: $table-header;
+			background-color: tokens.$table-header;
 		}
 
 		th,
 		td {
-			border: 1px solid $table-border-dark;
+			border: 1px solid tokens.$table-border-dark;
 		}
 	}
 
 	&.table-striped {
 		tbody tr:nth-of-type(even) {
-			background-color: $table-row;
+			background-color: tokens.$table-row;
 		}
 	}
 

package/src/components/tag.scss

@@ -1,5 +1,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 /* stylelint-disable selector-max-specificity, no-descending-specificity  */
 
@@ -8,38 +7,38 @@ $tag-padding-inline: 0.675em !default;
 
 $tag-gap-size: 0.375em !default;
 
-$tag-font-size: $font-size-8 !default;
-$tag-font-size-sm: $font-size-9 !default;
-$tag-font-size-lg: $font-size-7 !default;
-$tag-font-weight: $weight-normal !default;
+$tag-font-size: tokens.$font-size-8 !default;
+$tag-font-size-sm: tokens.$font-size-9 !default;
+$tag-font-size-lg: tokens.$font-size-7 !default;
+$tag-font-weight: tokens.$weight-normal !default;
 
 $tag-icon-font-size: 0.875em !default;
 
-$tag-border-width: $border-width !default;
-$tag-border-radius: $border-radius !default;
-$tag-border-radius-rounded: $border-radius-rounded !default;
-$tag-border-color: $control-border !default;
-
-$tag-color: $secondary-dark !default;
-$tag-color-hover: $primary-dark !default;
-$tag-background-color: $body-background !default;
-$tag-background-hover: $secondary-background-glow-high-contrast !default;
-
-$tag-color-filled: $text !default;
-$tag-background-filled: $secondary-background-glow-high-contrast !default;
-$tag-color-filled-hover: $primary-hover !default;
-$tag-background-filled-hover: $secondary-background-hover !default;
-$tag-interactive-divider-color-filled: $control-border !default;
-$tag-interactive-color-filled-hover: $secondary-invert !default;
-$tag-interactive-color-filled-close-hover: $primary-dark-hover !default;
-
-$tag-color-primary: $primary-dark !default;
-$tag-color-primary-hover: $primary-hover !default;
-$tag-background-primary: $primary-background !default;
-$tag-background-primary-hover: $primary-background-hover !default;
-$tag-border-color-primary: $primary-background-glow-high-contrast !default;
-$tag-interactive-divider-color-primary: $primary-box-shadow !default;
-$tag-interactive-color-primary-hover: $primary-dark-hover !default;
+$tag-border-width: tokens.$border-width !default;
+$tag-border-radius: tokens.$border-radius !default;
+$tag-border-radius-rounded: tokens.$border-radius-rounded !default;
+$tag-border-color: tokens.$control-border !default;
+
+$tag-color: tokens.$secondary-dark !default;
+$tag-color-hover: tokens.$primary-dark !default;
+$tag-background-color: tokens.$body-background !default;
+$tag-background-hover: tokens.$secondary-background-glow-high-contrast !default;
+
+$tag-color-filled: tokens.$text !default;
+$tag-background-filled: tokens.$secondary-background-glow-high-contrast !default;
+$tag-color-filled-hover: tokens.$primary-hover !default;
+$tag-background-filled-hover: tokens.$secondary-background-hover !default;
+$tag-interactive-divider-color-filled: tokens.$control-border !default;
+$tag-interactive-color-filled-hover: tokens.$secondary-invert !default;
+$tag-interactive-color-filled-close-hover: tokens.$primary-dark-hover !default;
+
+$tag-color-primary: tokens.$primary-dark !default;
+$tag-color-primary-hover: tokens.$primary-hover !default;
+$tag-background-primary: tokens.$primary-background !default;
+$tag-background-primary-hover: tokens.$primary-background-hover !default;
+$tag-border-color-primary: tokens.$primary-background-glow-high-contrast !default;
+$tag-interactive-divider-color-primary: tokens.$primary-box-shadow !default;
+$tag-interactive-color-primary-hover: tokens.$primary-dark-hover !default;
 
 $tag-suggestion-radius: 8px !default;
 
@@ -54,7 +53,7 @@ $tag-suggestion-radius: 8px !default;
 	color: $tag-color;
 	font-size: $tag-font-size;
 	font-weight: $tag-font-weight;
-	line-height: $line-height-normal;
+	line-height: tokens.$line-height-normal;
 	white-space: nowrap;
 	gap: $tag-gap-size;
 
@@ -95,7 +94,7 @@ $tag-suggestion-radius: 8px !default;
 		align-items: stretch;
 		padding: 0;
 		border: none;
-		color: $text;
+		color: tokens.$text;
 		gap: 0;
 
 		.tag-popover {
@@ -104,7 +103,7 @@ $tag-suggestion-radius: 8px !default;
 				border: $tag-border-width solid $tag-border-color;
 				border-radius: $tag-border-radius;
 				outline-color: currentColor;
-				outline-offset: -$focus-width;
+				outline-offset: -(tokens.$focus-width);
 				cursor: pointer;
 				overflow: hidden;
 
@@ -128,7 +127,7 @@ $tag-suggestion-radius: 8px !default;
 			border: $tag-border-width solid $tag-border-color;
 			border-radius: 0 $tag-border-radius $tag-border-radius 0;
 			outline-color: currentColor;
-			outline-offset: -$focus-width;
+			outline-offset: -(tokens.$focus-width);
 			background-color: inherit;
 			color: inherit;
 			cursor: pointer;
@@ -221,7 +220,7 @@ $tag-suggestion-radius: 8px !default;
 
 	&:hover,
 	&.is-hovered {
-		background-color: $primary-background;
-		color: $primary-dark;
+		background-color: tokens.$primary-background;
+		color: tokens.$primary-dark;
 	}
 }

package/src/components/timeline.scss

@@ -1,16 +1,15 @@
 @use 'sass:math';
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-$timeline-content-font-size: $font-size-8 !default;
-$timeline-timestamp-font-size: $font-size-9 !default;
-$timeline-timestamp-font-weight: $weight-semilight !default;
-$timeline-description-padding-top: $spacer-4 !default;
-$timeline-description-line-height: $line-height-normal;
+@use '../tokens/index.scss' as tokens;
+$timeline-content-font-size: tokens.$font-size-8 !default;
+$timeline-timestamp-font-size: tokens.$font-size-9 !default;
+$timeline-timestamp-font-weight: tokens.$weight-semilight !default;
+$timeline-description-padding-top: tokens.$spacer-4 !default;
+$timeline-description-line-height: tokens.$line-height-normal;
 
-$timeline-item-border-left: $border-width solid $border !default;
-$timeline-item-min-height: $layout-6 !default;
-$timeline-item-padding-bottom: $spacer-7 !default;
-$timeline-item-padding-left: $spacer-8 !default;
+$timeline-item-border-left: tokens.$border-width solid tokens.$border !default;
+$timeline-item-min-height: tokens.$layout-6 !default;
+$timeline-item-padding-bottom: tokens.$spacer-7 !default;
+$timeline-item-padding-left: tokens.$spacer-8 !default;
 
 $timeline-item-template-gap: 8px !default;
 $timeline-item-template-width: 100% !default;
@@ -25,7 +24,7 @@ $timeline-item-badge-transform-rtl: translate(
 );
 
 .timeline {
-	font-size: $document-font-size;
+	font-size: tokens.$document-font-size;
 	container-type: inline-size;
 
 	.timeline-item {
@@ -48,7 +47,7 @@ $timeline-item-badge-transform-rtl: translate(
 			}
 		}
 
-		@container (min-width: #{$container-query-md}) {
+		@container (min-width: #{tokens.$container-query-md}) {
 			.timeline-item-template {
 				display: grid;
 				width: $timeline-item-template-width;
@@ -62,8 +61,8 @@ $timeline-item-badge-transform-rtl: translate(
 
 		.timeline-item-template-title {
 			grid-area: title;
-			font-weight: $weight-semibold;
-			line-height: $line-height-normal;
+			font-weight: tokens.$weight-semibold;
+			line-height: tokens.$line-height-normal;
 		}
 
 		.timeline-item-template-time {
@@ -71,7 +70,7 @@ $timeline-item-badge-transform-rtl: translate(
 			align-content: baseline;
 			font-size: $timeline-timestamp-font-size;
 			font-weight: $timeline-timestamp-font-weight;
-			line-height: $line-height-normal;
+			line-height: tokens.$line-height-normal;
 		}
 
 		.timeline-item-template-description {

package/src/components/toggle.scss

@@ -1,16 +1,16 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
+$toggle-transition: tokens.$input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
 $toggle-circle-size: 0.85em !default;
 $toggle-circle-top: 0.15em !default;
 $toggle-circle-distance-from-border: 1em - $toggle-circle-size;
 
-$toggle-unselected-circle-color: $text-subtle !default;
-$toggle-unselected-border-color: $text-subtle !default;
-$toggle-unselected-background-color: $body-background !default;
-$toggle-selected-background-color: $primary !default;
-$toggle-circle-selected-background-color: $body-background !default;
+$toggle-unselected-circle-color: tokens.$text-subtle !default;
+$toggle-unselected-border-color: tokens.$text-subtle !default;
+$toggle-unselected-background-color: tokens.$body-background !default;
+$toggle-selected-background-color: tokens.$primary !default;
+$toggle-circle-selected-background-color: tokens.$body-background !default;
 
 .toggle {
 	label {
@@ -18,14 +18,14 @@ $toggle-circle-selected-background-color: $body-background !default;
 		position: relative;
 		width: 2.5em;
 		height: 1.25em;
-		transition: $input-transition-duration linear;
+		transition: tokens.$input-transition-duration linear;
 		transition-property: background-color, border-color;
 		border: 0.065em solid $toggle-unselected-border-color;
-		border-radius: $border-radius-rounded;
+		border-radius: tokens.$border-radius-rounded;
 		background-color: $toggle-unselected-background-color;
 		cursor: pointer;
 
-		@include forced-colors {
+		@include mixins.forced-colors {
 			border-color: CanvasText !important;
 			background-color: Canvas !important;
 		}
@@ -37,13 +37,13 @@ $toggle-circle-selected-background-color: $body-background !default;
 			height: $toggle-circle-size;
 			transition: $toggle-transition;
 			transition-property: inset-inline-start, border-color, background-color;
-			border-radius: $border-radius-rounded;
+			border-radius: tokens.$border-radius-rounded;
 			inset-block-start: $toggle-circle-top;
 			inset-inline-start: $toggle-circle-distance-from-border;
 			background-color: $toggle-unselected-circle-color;
 			content: '';
 
-			@include forced-colors {
+			@include mixins.forced-colors {
 				background-color: CanvasText !important;
 			}
 		}
@@ -56,7 +56,7 @@ $toggle-circle-selected-background-color: $body-background !default;
 		border-color: $toggle-selected-background-color;
 		background-color: $toggle-selected-background-color;
 
-		@include forced-colors {
+		@include mixins.forced-colors {
 			border-color: LinkText !important;
 			background-color: LinkText !important;
 		}
@@ -65,7 +65,7 @@ $toggle-circle-selected-background-color: $body-background !default;
 			background-color: $toggle-circle-selected-background-color;
 			inset-inline-start: calc(100% - ($toggle-circle-distance-from-border + $toggle-circle-size));
 
-			@include forced-colors {
+			@include mixins.forced-colors {
 				background-color: Canvas !important;
 			}
 		}
@@ -73,9 +73,9 @@ $toggle-circle-selected-background-color: $body-background !default;
 
 	/* stylelint-disable-next-line -- want to keep [type="checkbox"] as a requirement here */
 	input[type='checkbox'] {
-		@include visually-hidden();
+		@include mixins.visually-hidden();
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			+ label {
 				@extend %focus;
 			}

package/src/core/animations.scss

@@ -1,5 +1,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../mixins/index.scss' as mixins;
 
 // stylelint-disable-next-line keyframes-name-pattern
 @keyframes spinAround {
@@ -54,7 +53,7 @@
 .animation-fade {
 	animation: fade-out 0.4s ease-in forwards;
 
-	@include prefers-reduced-motion {
+	@include mixins.prefers-reduced-motion {
 		animation-duration: 0s;
 	}
 }
@@ -62,7 +61,7 @@
 .animation-slide-up {
 	animation: slide-up-fade-out 0.4s ease-in forwards;
 
-	@include prefers-reduced-motion {
+	@include mixins.prefers-reduced-motion {
 		animation-duration: 0s;
 	}
 }

package/src/core/bare-elements.scss

@@ -1,5 +1,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
 
@@ -16,19 +15,19 @@ details > * {
 }
 
 :where(a) {
-	color: $hyperlink;
+	color: tokens.$hyperlink;
 	text-decoration: none;
 	cursor: pointer;
 	word-wrap: break-word;
 }
 
 :where(a:hover) {
-	color: $primary-hover;
+	color: tokens.$primary-hover;
 	text-decoration: underline;
 }
 
 :where(a:visited) {
-	color: $visited;
+	color: tokens.$visited;
 }
 
 fieldset {
@@ -37,5 +36,5 @@ fieldset {
 }
 
 ::target-text {
-	background-color: $code-highlight-background;
+	background-color: tokens.$code-highlight-background;
 }

package/src/core/focus.scss

@@ -1,7 +1,7 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-@if ($focus-visible-use-polyfill) {
+@if (tokens.$focus-visible-use-polyfill) {
 	.js-focus-visible .has-default-focus *:focus:not(.focus-visible),
 	.js-focus-visible .default-focus *:focus:not(.focus-visible) {
 		outline: none;
@@ -9,7 +9,7 @@
 
 	.focus-visible.has-inner-focus,
 	.focus-visible.inner-focus {
-		outline-offset: -$focus-width;
+		outline-offset: -(tokens.$focus-width);
 	}
 
 	.has-default-focus,
@@ -32,7 +32,7 @@
 		&.has-inner-focus,
 		&.inner-focus {
 			outline-color: currentColor;
-			outline-offset: -$focus-width;
+			outline-offset: -(tokens.$focus-width);
 		}
 	}
 }
@@ -43,6 +43,6 @@
 	&.has-inner-focus,
 	&.inner-focus {
 		outline-color: currentColor;
-		outline-offset: -$focus-width;
+		outline-offset: -(tokens.$focus-width);
 	}
 }

package/src/core/font-stack.scss

@@ -1,31 +1,30 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 html {
-	font-size: $document-font-size;
+	font-size: tokens.$document-font-size;
 }
 
 html,
 body {
-	font-family: $normal-font-stack;
+	font-family: tokens.$normal-font-stack;
 	-webkit-font-smoothing: antialiased;
-	font-weight: $weight-normal;
+	font-weight: tokens.$weight-normal;
 	text-rendering: optimizeLegibility;
 }
 
 kbd,
 pre,
 samp {
-	font-family: $monospace-font-stack !important;
+	font-family: tokens.$monospace-font-stack !important;
 	-moz-osx-font-smoothing: auto;
 	-webkit-font-smoothing: auto;
 }
 
 code {
 	direction: ltr;
-	font-family: $monospace-font-stack;
+	font-family: tokens.$monospace-font-stack;
 }
 
 a > code {
-	font-family: $normal-font-stack;
+	font-family: tokens.$normal-font-stack;
 }

package/src/core/minireset.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
 /* stylelint-disable */
 /*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */
 html,

package/src/core/normalize.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
 /* stylelint-disable */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

package/src/core/themes.scss

@@ -1,27 +1,26 @@
 @use 'sass:map';
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 $root-theme: 'light' !default;
 $print-theme: 'light' !default;
 
 // Ensure that the root theme exists
-@if map.has-key($themes, $root-theme) != true {
-	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in $themes map.";
+@if map.has-key(tokens.$themes, $root-theme) != true {
+	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in tokens.$themes map.";
 }
 
 // Ensure that the print theme exists
-@if map.has-key($themes, $print-theme) != true {
-	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in $themes map.";
+@if map.has-key(tokens.$themes, $print-theme) != true {
+	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in tokens.$themes map.";
 }
 
-$theme-names: map.keys($themes);
+$theme-names: map.keys(tokens.$themes);
 
 // Validation: ensure that all values in the root theme are in the other themes too
-@each $root-color-name, $val in map.get($themes, $root-theme) {
+@each $root-color-name, $val in map.get(tokens.$themes, $root-theme) {
 	@each $theme-name in $theme-names {
 		@if $theme-name != $root-theme {
-			@if map.has-key(map.get($themes, $theme-name), $root-color-name) != true {
+			@if map.has-key(map.get(tokens.$themes, $theme-name), $root-color-name) != true {
 				@error '#{$root-color-name} from #{$root-theme} does not exist in theme: #{$theme-name}.';
 			}
 		}
@@ -30,10 +29,10 @@ $theme-names: map.keys($themes);
 
 // Validation: ensure all properties in non-root themes exist in root
 @each $theme-name in $theme-names {
-	$theme: map.get($themes, $theme-name);
+	$theme: map.get(tokens.$themes, $theme-name);
 
 	@if $theme-name != $root-theme {
-		$root: map.get($themes, $root-theme);
+		$root: map.get(tokens.$themes, $root-theme);
 
 		@each $color-name, $val in $theme {
 			@if map.has-key($root, $color-name) != true {
@@ -43,11 +42,11 @@ $theme-names: map.keys($themes);
 	}
 }
 
-@each $key, $value in $themes {
+@each $key, $value in tokens.$themes {
 	// Set the default theme
 	@if $key == $root-theme {
 		:root {
-			@each $colorName, $colorVal in map.get($themes, $key) {
+			@each $colorName, $colorVal in map.get(tokens.$themes, $key) {
 				// stylelint-disable-next-line custom-property-pattern
 				--theme-#{$colorName}: #{$colorVal};
 			}
@@ -56,7 +55,7 @@ $theme-names: map.keys($themes);
 
 	@if $key == $print-theme {
 		.theme-#{$key} {
-			@each $colorName, $colorVal in map.get($themes, $key) {
+			@each $colorName, $colorVal in map.get(tokens.$themes, $key) {
 				// stylelint-disable-next-line custom-property-pattern
 				--theme-#{$colorName}: #{$colorVal};
 			}
@@ -65,7 +64,7 @@ $theme-names: map.keys($themes);
 		// Set the rest of the themes, exclude them from print styling.
 		@media not print {
 			.theme-#{$key} {
-				@each $colorName, $colorVal in map-get($themes, $key) {
+				@each $colorName, $colorVal in map-get(tokens.$themes, $key) {
 					// stylelint-disable-next-line custom-property-pattern
 					--theme-#{$colorName}: #{$colorVal};
 				}
@@ -77,18 +76,18 @@ $theme-names: map.keys($themes);
 // End validation
 
 %theme-base-styles {
-	outline-color: $text;
-	background-color: $body-background;
-	color: $text;
+	outline-color: tokens.$text;
+	background-color: tokens.$body-background;
+	color: tokens.$text;
 }
 
-@each $key, $value in $themes {
+@each $key, $value in tokens.$themes {
 	.theme-#{$key} {
 		@extend %theme-base-styles;
 	}
 }
 
-@each $key, $value in $color-schemes {
+@each $key, $value in tokens.$color-schemes {
 	.theme-#{$key} {
 		color-scheme: #{$value};
 	}

package/src/mixins/center.scss

@@ -1,5 +1,3 @@
-@use '../tokens/index.scss' as *;
-
 @mixin center($width, $height: 0) {
 	position: absolute;
 

package/src/mixins/chevron.scss

@@ -1,7 +1,7 @@
-@use '../tokens/index.scss' as *;
-@use './control.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use './control.scss' as control;
 
-$chevron-color: $text !default;
+$chevron-color: tokens.$text !default;
 $chevron-arrow-size: 0.525em !default;
 $chevron-arrow-border-width: 1px !default;
 $chevron-arrow-actual-width: 0.75em !default;
@@ -22,8 +22,8 @@ $chevron-up-rotate-scale-xy-rtl: $chevron-down-rotate-rtl scaleY(-1) scaleX(-1);
 	border-inline-end: 0;
 	pointer-events: none;
 	content: ' ';
-	z-index: $zindex-active;
-	inset-inline-end: $control-padding-horizontal;
+	z-index: tokens.$zindex-active;
+	inset-inline-end: control.$control-padding-horizontal;
 }
 
 @mixin chevron-right {