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

package/src/atomics/colors.scss

@@ -1,12 +1,15 @@
+@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' {
@@ -25,7 +28,7 @@
 			}
 		}
 
-		@include focus-visible {
+		@include mixins.focus-visible {
 			color: $hover !important;
 		}
 
@@ -59,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;
@@ -74,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 {
@@ -94,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 {
@@ -112,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;
 	}
 }
 
@@ -186,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,27 +1,30 @@
-@each $item in $displays {
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+@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,4 +1,6 @@
 @use 'sass:map';
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $flex-atomics: (
 	'justify-content': (
@@ -63,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,15 +1,18 @@
+@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) {
@@ -26,7 +29,7 @@ $gap-sizes: (
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	@each $size in $gap-sizes {
 		$sizeKey: nth($size, 1);
 		$sizeValue: nth($size, 2);
@@ -37,7 +40,7 @@ $gap-sizes: (
 	}
 }
 
-@include desktop {
+@include mixins.desktop {
 	@each $size in $gap-sizes {
 		$sizeKey: nth($size, 1);
 		$sizeValue: nth($size, 2);
@@ -48,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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 .height-full {
 	height: 100% !important;
 }

package/src/atomics/image.scss

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

package/src/atomics/index.scss

@@ -1,19 +1,19 @@
-@import './aspect-ratio.scss';
-@import './typography.scss';
-@import './border.scss';
-@import './background.scss';
-@import './colors.scss';
-@import './display.scss';
-@import './gap.scss';
-@import './height.scss';
-@import './overflow.scss';
-@import './shadow.scss';
-@import './spacing-auto.scss';
-@import './spacing.scss';
-@import './flex.scss';
-@import './position.scss';
-@import './line-clamp.scss';
-@import './image.scss';
-@import './list.scss';
-@import './width.scss';
-@import './visually-hidden.scss';
+@forward './aspect-ratio.scss';
+@forward './typography.scss';
+@forward './border.scss';
+@forward './background.scss';
+@forward './colors.scss';
+@forward './display.scss';
+@forward './gap.scss';
+@forward './height.scss';
+@forward './overflow.scss';
+@forward './shadow.scss';
+@forward './spacing-auto.scss' hide $separator;
+@forward './spacing.scss' hide $separator, sizeValue;
+@forward './flex.scss';
+@forward './position.scss';
+@forward './line-clamp.scss';
+@forward './image.scss';
+@forward './list.scss';
+@forward './width.scss';
+@forward './visually-hidden.scss';

package/src/atomics/line-clamp.scss

@@ -1,15 +1,18 @@
+@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,3 +1,6 @@
+@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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 .overflow-hidden {
 	overflow: hidden !important;
 }
@@ -6,7 +9,7 @@
 	overflow-x: hidden !important;
 }
 
-@include tablet {
+@include mixins.tablet {
 	.overflow-hidden-tablet {
 		overflow: hidden !important;
 	}

package/src/atomics/position.scss

@@ -1,18 +1,21 @@
-@each $item in $positions {
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+@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,19 +1,22 @@
+@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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $auto-spacing-properties: (
 	('margin-inline', 'margin-inline'),
 	('margin-left', 'margin-inline-start'),
@@ -22,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;
 		}
@@ -33,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;
 		}
@@ -44,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,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $separator: '-' !default;
 $logical-spacing-properties: (
 	('margin', 'margin'),
@@ -17,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) {
@@ -49,7 +52,7 @@ $layout-sizes: (
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	@each $property in $logical-spacing-properties {
 		$classicProp: nth($property, 1);
 		$logicalProp: nth($property, 2);
@@ -65,7 +68,7 @@ $layout-sizes: (
 	}
 }
 
-@include desktop {
+@include mixins.desktop {
 	@each $property in $logical-spacing-properties {
 		$classicProp: nth($property, 1);
 		$logicalProp: nth($property, 2);
@@ -81,7 +84,7 @@ $layout-sizes: (
 	}
 }
 
-@include widescreen {
+@include mixins.widescreen {
 	@each $property in $logical-spacing-properties {
 		$classicProp: nth($property, 1);
 		$logicalProp: nth($property, 2);