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

package/src/atomics/typography.scss

@@ -1,145 +1,148 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 // Font family
 
 .font-family-monospace {
-	font-family: $monospace-font-stack !important;
+	font-family: tokens.$monospace-font-stack !important;
 	-moz-osx-font-smoothing: auto;
 	-webkit-font-smoothing: auto;
 }
 
 .font-family-quote {
-	font-family: $quote-font-stack !important;
+	font-family: tokens.$quote-font-stack !important;
 }
 
 // Heading sizes
 
 .font-size-h0 {
-	font-size: $font-size-0 !important;
+	font-size: tokens.$font-size-0 !important;
 }
 
 .font-size-h1 {
-	font-size: $font-size-1 !important;
+	font-size: tokens.$font-size-1 !important;
 }
 
 .font-size-h2 {
-	font-size: $font-size-2 !important;
+	font-size: tokens.$font-size-2 !important;
 }
 
 .font-size-h3 {
-	font-size: $font-size-3 !important;
+	font-size: tokens.$font-size-3 !important;
 }
 
 .font-size-h4 {
-	font-size: $font-size-4 !important;
+	font-size: tokens.$font-size-4 !important;
 }
 
 .font-size-h5 {
-	font-size: $font-size-5 !important;
+	font-size: tokens.$font-size-5 !important;
 }
 
 .font-size-h6 {
-	font-size: $font-size-6 !important;
+	font-size: tokens.$font-size-6 !important;
 }
 
-@include tablet {
+@include mixins.tablet {
 	.font-size-h0-tablet {
-		font-size: $font-size-0 !important;
+		font-size: tokens.$font-size-0 !important;
 	}
 
 	.font-size-h1-tablet {
-		font-size: $font-size-1 !important;
+		font-size: tokens.$font-size-1 !important;
 	}
 
 	.font-size-h2-tablet {
-		font-size: $font-size-2 !important;
+		font-size: tokens.$font-size-2 !important;
 	}
 
 	.font-size-h3-tablet {
-		font-size: $font-size-3 !important;
+		font-size: tokens.$font-size-3 !important;
 	}
 
 	.font-size-h4-tablet {
-		font-size: $font-size-4 !important;
+		font-size: tokens.$font-size-4 !important;
 	}
 
 	.font-size-h5-tablet {
-		font-size: $font-size-5 !important;
+		font-size: tokens.$font-size-5 !important;
 	}
 
 	.font-size-h6-tablet {
-		font-size: $font-size-6 !important;
+		font-size: tokens.$font-size-6 !important;
 	}
 }
 
 // Non-heading sizes
 
 .font-size-xxl {
-	font-size: $font-size-4 !important;
+	font-size: tokens.$font-size-4 !important;
 }
 
 .font-size-xl {
-	font-size: $font-size-5 !important;
+	font-size: tokens.$font-size-5 !important;
 }
 
 .font-size-lg {
-	font-size: $font-size-6 !important;
+	font-size: tokens.$font-size-6 !important;
 }
 
 .font-size-md {
-	font-size: $font-size-7 !important;
+	font-size: tokens.$font-size-7 !important;
 }
 
 .font-size-sm {
-	font-size: $font-size-8 !important;
+	font-size: tokens.$font-size-8 !important;
 }
 
 .font-size-xs {
-	font-size: $font-size-9 !important;
+	font-size: tokens.$font-size-9 !important;
 }
 
 // Non-heading sizes
 
-@include tablet {
+@include mixins.tablet {
 	.font-size-xl-tablet {
-		font-size: $font-size-5 !important;
+		font-size: tokens.$font-size-5 !important;
 	}
 
 	.font-size-lg-tablet {
-		font-size: $font-size-6 !important;
+		font-size: tokens.$font-size-6 !important;
 	}
 
 	.font-size-md-tablet {
-		font-size: $font-size-7 !important;
+		font-size: tokens.$font-size-7 !important;
 	}
 
 	.font-size-sm-tablet {
-		font-size: $font-size-8 !important;
+		font-size: tokens.$font-size-8 !important;
 	}
 
 	.font-size-xs-tablet {
-		font-size: $font-size-9 !important;
+		font-size: tokens.$font-size-9 !important;
 	}
 }
 
 // Weight
 
 .font-weight-light {
-	font-weight: $weight-light !important;
+	font-weight: tokens.$weight-light !important;
 }
 
 .font-weight-semilight {
-	font-weight: $weight-semilight !important;
+	font-weight: tokens.$weight-semilight !important;
 }
 
 .font-weight-normal {
-	font-weight: $weight-normal !important;
+	font-weight: tokens.$weight-normal !important;
 }
 
 .font-weight-semibold {
-	font-weight: $weight-semibold !important;
+	font-weight: tokens.$weight-semibold !important;
 }
 
 .font-weight-bold {
-	font-weight: $weight-bold !important;
+	font-weight: tokens.$weight-bold !important;
 }
 
 // Case
@@ -159,7 +162,7 @@
 // Letter Spacing
 
 .letter-spacing-wide {
-	letter-spacing: $letter-spacing-wide !important;
+	letter-spacing: tokens.$letter-spacing-wide !important;
 }
 
 .text-transform-uppercase {
@@ -180,7 +183,7 @@
 	text-align: end !important;
 }
 
-@include tablet {
+@include mixins.tablet {
 	.text-align-left-tablet {
 		text-align: start !important;
 	}
@@ -207,7 +210,7 @@
 // Line height
 
 .line-height-normal {
-	line-height: $line-height-normal !important;
+	line-height: tokens.$line-height-normal !important;
 }
 
 // White space

package/src/atomics/visually-hidden.scss

@@ -1,4 +1,7 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 .visually-hidden,
 ::part(visually-hidden) {
-	@include visually-hidden();
+	@include mixins.visually-hidden();
 }

package/src/atomics/width.scss

@@ -1,4 +1,6 @@
 @use 'sass:list';
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $universal-widths: auto, fit-content, 100, 150, 200, 250, 300, 350 !default;
 $mobile-incompatible-widths: 400, 450, 500, unset !default;
@@ -17,7 +19,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	.width-full-tablet {
 		width: 100% !important;
 	}
@@ -30,7 +32,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
 	}
 }
 
-@include desktop {
+@include mixins.desktop {
 	.width-full-desktop {
 		width: 100% !important;
 	}

package/src/components/accordion.scss

@@ -1,11 +1,14 @@
-$accordion-font-size-sm: $font-size-9 !default;
-$accordion-font-size-md: $font-size-8 !default;
-$accordion-font-size-lg: $font-size-7 !default;
-$accordion-font-size-xl: $font-size-6 !default;
-$accordion-font-size-xxl: $font-size-5 !default;
-
-$accordion-gap: $layout-2 !default;
-$accordion-spacing: $spacer-4 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$accordion-font-size-sm: tokens.$font-size-9 !default;
+$accordion-font-size-md: tokens.$font-size-8 !default;
+$accordion-font-size-lg: tokens.$font-size-7 !default;
+$accordion-font-size-xl: tokens.$font-size-6 !default;
+$accordion-font-size-xxl: tokens.$font-size-5 !default;
+
+$accordion-gap: tokens.$layout-2 !default;
+$accordion-spacing: tokens.$spacer-4 !default;
 $accordion-transition: transform 0.15s !default;
 
 // Spacing and font-size
@@ -59,48 +62,49 @@ $accordion-transition: transform 0.15s !default;
 
 	&:not(.accordion-icon-end) {
 		summary::before {
-			@include chevron-right;
+			@include mixins.chevron-right;
 
 			transition: $accordion-transition;
 		}
 
 		&:dir(rtl) summary::before {
-			@include chevron-right-rtl;
+			@include mixins.chevron-right-rtl;
 		}
 	}
 
 	&.accordion-icon-end {
 		summary::after {
-			@include chevron-down;
+			@include mixins.chevron-down;
 
 			transition: $accordion-transition;
 		}
 
 		&:dir(rtl) summary::after {
-			@include chevron-down-rtl;
+			@include mixins.chevron-down-rtl;
 		}
 	}
 
 	&[open] {
 		&:not(.accordion-icon-end) {
 			summary::before {
-				transform: $chevron-down-rotate translate(calc($chevron-arrow-size / 2), 0);
+				transform: mixins.$chevron-down-rotate translate(calc(mixins.$chevron-arrow-size / 2), 0);
 			}
 
 			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
 			&:dir(rtl) summary::before {
-				transform: $chevron-down-rotate-rtl translate(calc($chevron-arrow-size / 2 * -1), 0);
+				transform: mixins.$chevron-down-rotate-rtl
+					translate(calc(mixins.$chevron-arrow-size / 2 * -1), 0);
 			}
 		}
 
 		&.accordion-icon-end {
 			summary::after {
-				transform: $chevron-up-rotate-scale-xy;
+				transform: mixins.$chevron-up-rotate-scale-xy;
 			}
 
 			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
 			&:dir(rtl) summary::after {
-				transform: $chevron-up-rotate-scale-xy-rtl;
+				transform: mixins.$chevron-up-rotate-scale-xy-rtl;
 			}
 		}
 	}

package/src/components/badge.scss

@@ -1,38 +1,41 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $badge-icon-padding-block: 0.5em !default;
 $badge-padding-block: 0.25em !default;
 $badge-padding-inline: 0.5em !default;
 
 $badge-gap-size: 0.375em !default;
 
-$badge-font-size: $font-size-8 !default;
-$badge-font-size-sm: $font-size-9 !default;
-$badge-font-size-lg: $font-size-7 !default;
-$badge-font-size-xl: $font-size-6 !default;
-$badge-font-weight: $weight-semibold !default;
+$badge-font-size: tokens.$font-size-8 !default;
+$badge-font-size-sm: tokens.$font-size-9 !default;
+$badge-font-size-lg: tokens.$font-size-7 !default;
+$badge-font-size-xl: tokens.$font-size-6 !default;
+$badge-font-weight: tokens.$weight-semibold !default;
 
 $badge-icon-size: 1.3em !default;
 
-$badge-border-width: $border-width !default;
-$badge-border-radius: $border-radius-rounded !default;
+$badge-border-width: tokens.$border-width !default;
+$badge-border-radius: tokens.$border-radius-rounded !default;
 
 .badge {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	padding: $badge-padding-block $badge-padding-inline;
-	border: $badge-border-width solid $border-white-high-contrast;
+	border: $badge-border-width solid tokens.$border-white-high-contrast;
 	border-radius: $badge-border-radius;
 	font-size: $badge-font-size;
 	font-weight: $badge-font-weight;
-	line-height: $line-height-normal;
+	line-height: tokens.$line-height-normal;
 	white-space: nowrap;
 	gap: $badge-gap-size;
 
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$invert: nth($color-set, $color-index-invert);
-		$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);
+		$invert: nth($color-set, tokens.$color-index-invert);
+		$dark: nth($color-set, tokens.$color-index-dark);
+		$background: nth($color-set, tokens.$color-index-background);
 
 		@if $name == 'secondary' {
 			border-color: $dark;
@@ -53,11 +56,11 @@ $badge-border-radius: $border-radius-rounded !default;
 	}
 
 	&.badge-filled {
-		@each $name, $color-set in $colors {
-			$base: nth($color-set, $color-index-base);
-			$invert: nth($color-set, $color-index-invert);
-			$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);
+			$invert: nth($color-set, tokens.$color-index-invert);
+			$dark: nth($color-set, tokens.$color-index-dark);
+			$background: nth($color-set, tokens.$color-index-background);
 
 			@if $name == 'secondary' {
 				border-color: $base;

package/src/components/banner.scss

@@ -1,13 +1,16 @@
-$banner-background: $info-background !default;
-$banner-padding: $spacer-5 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$banner-font-size: $font-size-7 !default;
-$banner-color: $info-dark !default;
+$banner-background: tokens.$info-background !default;
+$banner-padding: tokens.$spacer-5 !default;
 
-$banner-border-color: $border-white-high-contrast !default;
-$banner-border-width: $border-width !default;
+$banner-font-size: tokens.$font-size-7 !default;
+$banner-color: tokens.$info-dark !default;
 
-$banner-dismiss-margin: $spacer-2 !default;
+$banner-border-color: tokens.$border-white-high-contrast !default;
+$banner-border-width: tokens.$border-width !default;
+
+$banner-dismiss-margin: tokens.$spacer-2 !default;
 
 .banner {
 	@extend %layout-gap;
@@ -16,11 +19,11 @@ $banner-dismiss-margin: $spacer-2 !default;
 	position: relative;
 	grid-template: auto / 1fr auto;
 	grid-template-areas: 'banner-content dismiss';
-	outline-color: $text;
+	outline-color: tokens.$text;
 	background-color: $banner-background;
 	color: $banner-color;
 	font-size: $banner-font-size;
-	line-height: $line-height-normal;
+	line-height: tokens.$line-height-normal;
 	padding-block: $banner-padding;
 	word-wrap: break-word;
 	word-break: break-word;
@@ -34,15 +37,15 @@ $banner-dismiss-margin: $spacer-2 !default;
 		}
 
 		&::before {
-			@include loader;
+			@include mixins.loader;
 
 			position: absolute;
 			inset-block-start: $banner-padding;
-			inset-inline-start: $layout-gap;
+			inset-inline-start: tokens.$layout-gap;
 			border-color: transparent transparent $banner-color $banner-color;
 
-			@include widescreen {
-				inset-inline-start: $layout-widescreen-gap;
+			@include mixins.widescreen {
+				inset-inline-start: tokens.$layout-widescreen-gap;
 			}
 		}
 	}
@@ -52,11 +55,11 @@ $banner-dismiss-margin: $spacer-2 !default;
 
 		a:not(.button) {
 			color: currentColor;
-			font-weight: $weight-semibold;
+			font-weight: tokens.$weight-semibold;
 			text-decoration: underline;
 
 			.theme-high-contrast & {
-				color: $hyperlink;
+				color: tokens.$hyperlink;
 			}
 
 			&:hover {
@@ -66,7 +69,7 @@ $banner-dismiss-margin: $spacer-2 !default;
 	}
 
 	.banner-dismiss {
-		@include dismiss-square;
+		@include mixins.dismiss-square;
 
 		grid-area: dismiss;
 		margin-inline-start: $banner-dismiss-margin;

package/src/components/breadcrumbs.scss

@@ -1,11 +1,14 @@
-$breadcrumb-font-size: $font-size-8 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$breadcrumb-font-size: tokens.$font-size-8 !default;
 $breadcrumb-spacing-horizontal: 0.25em !default;
 $breadcrumb-spacing-vertical: 0.375em !default;
 $breadcrumb-separator: '\00200B/' !default;
 
 %breadcrumbs-slash {
 	display: inline-block;
-	color: $text-subtle;
+	color: tokens.$text-subtle;
 	content: $breadcrumb-separator;
 }
 

package/src/components/button-reset.scss

@@ -1,5 +1,8 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 .button-reset {
-	@include transparent-effects;
+	@include mixins.transparent-effects;
 
 	display: inline-block;
 	padding: 0;