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

package/src/components/site-header.scss

@@ -1,12 +1,16 @@
+@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;
@@ -19,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) {
@@ -44,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,
@@ -66,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;
 
@@ -84,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'] {
@@ -139,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;
 	}
 
@@ -148,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,
@@ -160,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;
 		}
 	}
@@ -182,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 {
@@ -211,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;
@@ -229,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);
 			}
@@ -245,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,4 +1,7 @@
-$step-font-size: $font-size-7 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$step-font-size: tokens.$font-size-7 !default;
 $steps-gap: 0.4375em !default;
 $steps-size: 0.5em !default;
 
@@ -11,12 +14,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,8 +1,11 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 .stretched-link {
 	&::before {
 		position: absolute;
 		content: '';
-		z-index: $zindex-stretched-link;
+		z-index: tokens.$zindex-stretched-link;
 		inset: 0;
 	}
 }

package/src/components/table.scss

@@ -1,11 +1,14 @@
-$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;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$table-caption-padding: $spacer-6 !default;
-$table-caption-size: $font-size-9 !default;
-$table-caption-spacing: $letter-spacing-medium !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: 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;
@@ -15,20 +18,20 @@ $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: $user-right;
+		text-align: end;
 		text-transform: uppercase;
 	}
 
@@ -37,17 +40,17 @@ $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;
 	}
 
 	th:not([align]) {
-		text-align: $user-left;
+		text-align: start;
 	}
 
 	&.table-stacked-mobile {
-		@include discouraged-mobile {
+		@include mixins.discouraged-mobile {
 			th,
 			td {
 				display: block;
@@ -66,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;
 			}
 		}
 	}
@@ -83,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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 /* stylelint-disable selector-max-specificity, no-descending-specificity  */
 
 $tag-padding-block: 0.375em !default;
@@ -5,38 +8,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;
 
@@ -51,7 +54,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;
 
@@ -92,7 +95,7 @@ $tag-suggestion-radius: 8px !default;
 		align-items: stretch;
 		padding: 0;
 		border: none;
-		color: $text;
+		color: tokens.$text;
 		gap: 0;
 
 		.tag-popover {
@@ -101,7 +104,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;
 
@@ -125,7 +128,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;
@@ -218,7 +221,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,14 +1,16 @@
 @use 'sass:math';
-$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;
+@use '../mixins/index.scss' as mixins;
+$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;
@@ -23,7 +25,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 {
@@ -46,7 +48,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;
@@ -60,8 +62,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 {
@@ -69,7 +71,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,13 +1,16 @@
-$toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$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 {
@@ -15,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;
 		}
@@ -34,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;
 			}
 		}
@@ -53,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;
 		}
@@ -62,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;
 			}
 		}
@@ -70,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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 // stylelint-disable-next-line keyframes-name-pattern
 @keyframes spinAround {
 	// make it stop
@@ -51,7 +54,7 @@
 .animation-fade {
 	animation: fade-out 0.4s ease-in forwards;
 
-	@include prefers-reduced-motion {
+	@include mixins.prefers-reduced-motion {
 		animation-duration: 0s;
 	}
 }
@@ -59,7 +62,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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
 
 details,
@@ -13,19 +16,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 {
@@ -34,5 +37,5 @@ fieldset {
 }
 
 ::target-text {
-	background-color: $code-highlight-background;
+	background-color: tokens.$code-highlight-background;
 }