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

package/src/atomics/colors.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;
 
 // Framework colors
 
-@each $name, $color-set in $colors {
-	$base: nth($color-set, $color-index-base);
-	$background: nth($color-set, $color-index-background);
-	$dark: nth($color-set, $color-index-dark);
-	$hover: nth($color-set, $color-index-hover);
-	$active: nth($color-set, $color-index-active);
-	$invert: nth($color-set, $color-index-invert);
+@each $name, $color-set in tokens.$colors {
+	$base: nth($color-set, tokens.$color-index-base);
+	$background: nth($color-set, tokens.$color-index-background);
+	$dark: nth($color-set, tokens.$color-index-dark);
+	$hover: nth($color-set, tokens.$color-index-hover);
+	$active: nth($color-set, tokens.$color-index-active);
+	$invert: nth($color-set, tokens.$color-index-invert);
 
 	.color-#{$name} {
 		@if $name == 'warning' {
@@ -28,7 +28,7 @@
 			}
 		}
 
-		@include focus-visible {
+		@include mixins.focus-visible {
 			color: $hover !important;
 		}
 
@@ -62,10 +62,10 @@
 	}
 }
 
-@include tablet {
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$invert: nth($color-set, $color-index-invert);
+@include mixins.tablet {
+	@each $name, $color-set in tokens.$colors {
+		$base: nth($color-set, tokens.$color-index-base);
+		$invert: nth($color-set, tokens.$color-index-invert);
 
 		.background-color-#{$name}-tablet {
 			outline-color: $invert;
@@ -77,19 +77,19 @@
 // Text color
 
 .color-text {
-	color: $text !important;
+	color: tokens.$text !important;
 }
 
 .color-text-invert {
-	color: $text-invert !important;
+	color: tokens.$text-invert !important;
 }
 
 .color-text-subtle {
-	color: $text-subtle !important;
+	color: tokens.$text-subtle !important;
 }
 
 .color-text-overlay-invert {
-	color: $overlay-invert;
+	color: tokens.$overlay-invert;
 }
 
 .color-current-color {
@@ -97,15 +97,15 @@
 }
 
 .color-hyperlink {
-	color: $hyperlink !important;
+	color: tokens.$hyperlink !important;
 }
 
 .fill-current-color {
-	@include fill-current-color();
+	@include mixins.fill-current-color();
 }
 
 .outline-color-text {
-	outline-color: $text !important;
+	outline-color: tokens.$text !important;
 }
 
 .stroke-current-color {
@@ -115,70 +115,70 @@
 // Background color
 
 .background-color-body {
-	outline-color: $text !important;
-	background-color: $body-background !important;
+	outline-color: tokens.$text !important;
+	background-color: tokens.$body-background !important;
 }
 
 .background-color-body-medium {
-	outline-color: $text !important;
-	background-color: $body-background-medium !important;
+	outline-color: tokens.$text !important;
+	background-color: tokens.$body-background-medium !important;
 }
 
 .background-color-alternate {
-	outline-color: $text-invert !important;
-	background-color: $alternate-background !important;
+	outline-color: tokens.$text-invert !important;
+	background-color: tokens.$alternate-background !important;
 }
 
 .background-color-alternate-medium {
-	outline-color: $text-invert !important;
-	background-color: $alternate-background-medium !important;
+	outline-color: tokens.$text-invert !important;
+	background-color: tokens.$alternate-background-medium !important;
 }
 
 .background-color-overlay {
-	outline-color: $overlay-invert;
-	background-color: $overlay !important;
+	outline-color: tokens.$overlay-invert;
+	background-color: tokens.$overlay !important;
 }
 
 .background-color-alternating-grey {
-	border-block-start: 1px solid $border-white-high-contrast;
-	outline-color: $text !important;
+	border-block-start: 1px solid tokens.$border-white-high-contrast;
+	outline-color: tokens.$text !important;
 
 	&:nth-of-type(even) {
-		outline-color: $text;
-		background-color: $body-background;
+		outline-color: tokens.$text;
+		background-color: tokens.$body-background;
 	}
 
 	&:nth-of-type(odd) {
-		outline-color: $text;
-		background-color: $body-background-medium;
+		outline-color: tokens.$text;
+		background-color: tokens.$body-background-medium;
 	}
 }
 
 .background-color-alternating-grey-reversed {
-	border-block-start: 1px solid $border-white-high-contrast;
-	outline-color: $text !important;
+	border-block-start: 1px solid tokens.$border-white-high-contrast;
+	outline-color: tokens.$text !important;
 
 	&:nth-of-type(even) {
-		outline-color: $text;
-		background-color: $body-background-medium;
+		outline-color: tokens.$text;
+		background-color: tokens.$body-background-medium;
 	}
 
 	&:nth-of-type(odd) {
-		outline-color: $text;
-		background-color: $body-background;
+		outline-color: tokens.$text;
+		background-color: tokens.$body-background;
 	}
 }
 
 .background-color-body-accent {
-	outline-color: $text !important;
-	background-color: $body-background-accent !important;
+	outline-color: tokens.$text !important;
+	background-color: tokens.$body-background-accent !important;
 }
 
 .background-color-body-accent-onhover {
 	&:hover,
 	&:focus-within {
-		outline-color: $text !important;
-		background-color: $body-background-accent !important;
+		outline-color: tokens.$text !important;
+		background-color: tokens.$body-background-accent !important;
 	}
 }
 
@@ -189,19 +189,19 @@
 // Static colors - do not change with theme
 
 .color-white-static {
-	color: $white-static !important;
+	color: tokens.$white-static !important;
 }
 
 .color-black-static {
-	color: $black-static !important;
+	color: tokens.$black-static !important;
 }
 
 .background-color-white-static {
-	outline-color: $black-static !important;
-	background-color: $white-static !important;
+	outline-color: tokens.$black-static !important;
+	background-color: tokens.$white-static !important;
 }
 
 .background-color-black-static {
-	outline-color: $white-static !important;
-	background-color: $black-static !important;
+	outline-color: tokens.$white-static !important;
+	background-color: tokens.$black-static !important;
 }

package/src/atomics/display.scss

@@ -1,30 +1,30 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-@each $item in $displays {
+@each $item in tokens.$displays {
 	.display-#{$item} {
 		display: #{$item} !important;
 	}
 }
 
-@include tablet {
-	@each $item in $displays {
+@include mixins.tablet {
+	@each $item in tokens.$displays {
 		.display-#{$item}-tablet {
 			display: #{$item} !important;
 		}
 	}
 }
 
-@include desktop {
-	@each $item in $displays {
+@include mixins.desktop {
+	@each $item in tokens.$displays {
 		.display-#{$item}-desktop {
 			display: #{$item} !important;
 		}
 	}
 }
 
-@include widescreen {
-	@each $item in $displays {
+@include mixins.widescreen {
+	@each $item in tokens.$displays {
 		.display-#{$item}-widescreen {
 			display: #{$item} !important;
 		}

package/src/atomics/flex.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $flex-atomics: (
 	'justify-content': (
@@ -65,7 +65,7 @@ $flex-atomics: (
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	@each $key in map.keys($flex-atomics) {
 		@each $value in map.get($flex-atomics, $key) {
 			.#{$key}-#{$value}-tablet {

package/src/atomics/gap.scss

@@ -1,18 +1,18 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $separator: '-' !default;
 
 $gap-sizes: (
-	('xxs', $layout-1),
-	('xs', $layout-2),
-	('sm', $layout-3),
-	('md', $layout-4),
-	('lg', $layout-5),
-	// ('xl', $layout-6),
-	// ('xxl', $layout-7),
-	// ('xxxl', $layout-8),
-	('none', $layout-0)
+	('xxs', tokens.$layout-1),
+	('xs', tokens.$layout-2),
+	('sm', tokens.$layout-3),
+	('md', tokens.$layout-4),
+	('lg', tokens.$layout-5),
+	// ('xl', tokens.$layout-6),
+	// ('xxl', tokens.$layout-7),
+	// ('xxxl', tokens.$layout-8),
+	('none', tokens.$layout-0)
 );
 
 @function sizeValue($key, $value) {
@@ -29,7 +29,7 @@ $gap-sizes: (
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	@each $size in $gap-sizes {
 		$sizeKey: nth($size, 1);
 		$sizeValue: nth($size, 2);
@@ -40,7 +40,7 @@ $gap-sizes: (
 	}
 }
 
-@include desktop {
+@include mixins.desktop {
 	@each $size in $gap-sizes {
 		$sizeKey: nth($size, 1);
 		$sizeValue: nth($size, 2);
@@ -51,7 +51,7 @@ $gap-sizes: (
 	}
 }
 
-@include widescreen {
+@include mixins.widescreen {
 	@each $size in $gap-sizes {
 		$sizeKey: nth($size, 1);
 		$sizeValue: nth($size, 2);

package/src/atomics/height.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 .height-full {
 	height: 100% !important;

package/src/atomics/image.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 .object-fit-contain {
 	object-fit: contain !important;

package/src/atomics/line-clamp.scss

@@ -1,18 +1,18 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 .line-clamp-1 {
-	@include line-clamp(1, true);
+	@include mixins.line-clamp(1, true);
 }
 
 .line-clamp-2 {
-	@include line-clamp(2, true);
+	@include mixins.line-clamp(2, true);
 }
 
 .line-clamp-3 {
-	@include line-clamp(3, true);
+	@include mixins.line-clamp(3, true);
 }
 
 .line-clamp-4 {
-	@include line-clamp(4, true);
+	@include mixins.line-clamp(4, true);
 }

package/src/atomics/list.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 .list-style-none {
 	list-style: none !important;

package/src/atomics/overflow.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 .overflow-hidden {
 	overflow: hidden !important;
@@ -9,7 +9,7 @@
 	overflow-x: hidden !important;
 }
 
-@include tablet {
+@include mixins.tablet {
 	.overflow-hidden-tablet {
 		overflow: hidden !important;
 	}

package/src/atomics/position.scss

@@ -1,21 +1,21 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-@each $item in $positions {
+@each $item in tokens.$positions {
 	.position-#{$item} {
 		position: #{$item} !important;
 	}
 }
 
-@include tablet {
-	@each $item in $positions {
+@include mixins.tablet {
+	@each $item in tokens.$positions {
 		.position-#{$item}-tablet {
 			position: #{$item} !important;
 		}
 	}
 }
 
-@each $side, $direction in $logical-directions {
+@each $side, $direction in tokens.$logical-directions {
 	.#{$side}-0 {
 		inset-#{$direction}: 0 !important;
 	}

package/src/atomics/shadow.scss

@@ -1,22 +1,22 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 .box-shadow-none {
 	box-shadow: none !important;
 }
 
 .box-shadow-light {
-	box-shadow: $box-shadow-light !important;
+	box-shadow: tokens.$box-shadow-light !important;
 }
 
 .box-shadow-medium {
-	box-shadow: $box-shadow-medium !important;
+	box-shadow: tokens.$box-shadow-medium !important;
 }
 
 .box-shadow-heavy {
-	box-shadow: $box-shadow-heavy !important;
+	box-shadow: tokens.$box-shadow-heavy !important;
 }
 
 .box-shadow-extra-heavy {
-	box-shadow: $box-shadow-extra-heavy !important;
+	box-shadow: tokens.$box-shadow-extra-heavy !important;
 }

package/src/atomics/spacing-auto.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $auto-spacing-properties: (
 	('margin-inline', 'margin-inline'),
@@ -25,7 +25,7 @@ $separator: '-';
 	$classicProp: nth($property, 1);
 	$logicalProp: nth($property, 2);
 
-	@include tablet {
+	@include mixins.tablet {
 		.#{$classicProp}#{$separator}auto#{$separator}tablet {
 			#{$logicalProp}: auto !important;
 		}
@@ -36,7 +36,7 @@ $separator: '-';
 	$classicProp: nth($property, 1);
 	$logicalProp: nth($property, 2);
 
-	@include desktop {
+	@include mixins.desktop {
 		.#{$classicProp}#{$separator}auto#{$separator}desktop {
 			#{$logicalProp}: auto !important;
 		}
@@ -47,7 +47,7 @@ $separator: '-';
 	$classicProp: nth($property, 1);
 	$logicalProp: nth($property, 2);
 
-	@include widescreen {
+	@include mixins.widescreen {
 		.#{$classicProp}#{$separator}auto#{$separator}widescreen {
 			#{$logicalProp}: auto !important;
 		}

package/src/atomics/spacing.scss

@@ -1,5 +1,5 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $separator: '-' !default;
 $logical-spacing-properties: (
@@ -20,15 +20,15 @@ $logical-spacing-properties: (
 ) !default;
 
 $layout-sizes: (
-	('xxs', $layout-1),
-	('xs', $layout-2),
-	('sm', $layout-3),
-	('md', $layout-4),
-	('lg', $layout-5),
-	('xl', $layout-6),
-	('xxl', $layout-7),
-	('xxxl', $layout-8),
-	('none', $layout-0)
+	('xxs', tokens.$layout-1),
+	('xs', tokens.$layout-2),
+	('sm', tokens.$layout-3),
+	('md', tokens.$layout-4),
+	('lg', tokens.$layout-5),
+	('xl', tokens.$layout-6),
+	('xxl', tokens.$layout-7),
+	('xxxl', tokens.$layout-8),
+	('none', tokens.$layout-0)
 );
 
 @function sizeValue($key, $value) {
@@ -52,7 +52,7 @@ $layout-sizes: (
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	@each $property in $logical-spacing-properties {
 		$classicProp: nth($property, 1);
 		$logicalProp: nth($property, 2);
@@ -68,7 +68,7 @@ $layout-sizes: (
 	}
 }
 
-@include desktop {
+@include mixins.desktop {
 	@each $property in $logical-spacing-properties {
 		$classicProp: nth($property, 1);
 		$logicalProp: nth($property, 2);
@@ -84,7 +84,7 @@ $layout-sizes: (
 	}
 }
 
-@include widescreen {
+@include mixins.widescreen {
 	@each $property in $logical-spacing-properties {
 		$classicProp: nth($property, 1);
 		$logicalProp: nth($property, 2);