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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "5.0.0-test.1",
+	"version": "5.0.0-test.3",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -76,7 +76,7 @@
 	"author": "Microsoft Corporation",
 	"license": "MIT",
 	"devDependencies": {
-		"@microsoft/stylelint-config-atlas": "4.1.0",
+		"@microsoft/stylelint-config-atlas": "5.0.0",
 		"@parcel/transformer-sass": "2.16.3",
 		"css-tree": "^2.3.1",
 		"eslint-plugin-security": "^1.7.1",

package/src/atomics/aspect-ratio.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
 $aspect-ratios: (
 	'1-1': '1 / 1',
 	'2-1': '2 / 1',

package/src/atomics/background.scss

@@ -1,6 +1,3 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
 $background-sizes: 100, 200 !default;
 
 @each $size in $background-sizes {

package/src/atomics/border.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;
 
 .border {
-	border: $border-width solid $border !important;
+	border: tokens.$border-width solid tokens.$border !important;
 }
 
 .border-md {
-	border: $border-width-md solid $border !important;
+	border: tokens.$border-width-md solid tokens.$border !important;
 }
 
 .border-lg {
-	border: $border-width-lg solid $border !important;
+	border: tokens.$border-width-lg solid tokens.$border !important;
 }
 
 .border-none {
@@ -19,17 +19,17 @@
 
 // Rules for each side
 
-@each $border-key, $direction in $logical-directions {
+@each $border-key, $direction in tokens.$logical-directions {
 	.border-#{$border-key} {
-		border-#{$direction}: $border-width solid $border !important;
+		border-#{$direction}: tokens.$border-width solid tokens.$border !important;
 	}
 
 	.border-#{$border-key}-md {
-		border-#{$direction}: $border-width-md solid $border !important;
+		border-#{$direction}: tokens.$border-width-md solid tokens.$border !important;
 	}
 
 	.border-#{$border-key}-lg {
-		border-#{$direction}: $border-width-lg solid $border !important;
+		border-#{$direction}: tokens.$border-width-lg solid tokens.$border !important;
 	}
 
 	.border-#{$border-key}-none {
@@ -37,17 +37,17 @@
 	}
 }
 
-@include tablet {
+@include mixins.tablet {
 	.border-tablet {
-		border: $border-width solid $border !important;
+		border: tokens.$border-width solid tokens.$border !important;
 	}
 
 	.border-md-tablet {
-		border: $border-width-md solid $border !important;
+		border: tokens.$border-width-md solid tokens.$border !important;
 	}
 
 	.border-lg-tablet {
-		border: $border-width-lg solid $border !important;
+		border: tokens.$border-width-lg solid tokens.$border !important;
 	}
 
 	.border-none-tablet {
@@ -56,17 +56,17 @@
 
 	// Rules for each side
 
-	@each $border-key, $direction in $logical-directions {
+	@each $border-key, $direction in tokens.$logical-directions {
 		.border-#{$border-key}-tablet {
-			border-#{$direction}: $border-width solid $border !important;
+			border-#{$direction}: tokens.$border-width solid tokens.$border !important;
 		}
 
 		.border-#{$border-key}-md-tablet {
-			border-#{$direction}: $border-width-md solid $border !important;
+			border-#{$direction}: tokens.$border-width-md solid tokens.$border !important;
 		}
 
 		.border-#{$border-key}-lg-tablet {
-			border-#{$direction}: $border-width-lg solid $border !important;
+			border-#{$direction}: tokens.$border-width-lg solid tokens.$border !important;
 		}
 
 		.border-#{$border-key}-none-tablet {
@@ -78,19 +78,19 @@
 // Radius
 
 .border-radius-sm {
-	border-radius: $border-radius-sm !important;
+	border-radius: tokens.$border-radius-sm !important;
 }
 
 .border-radius {
-	border-radius: $border-radius !important;
+	border-radius: tokens.$border-radius !important;
 }
 
 .border-radius-lg {
-	border-radius: $border-radius-lg !important;
+	border-radius: tokens.$border-radius-lg !important;
 }
 
 .border-radius-rounded {
-	border-radius: $border-radius-rounded !important;
+	border-radius: tokens.$border-radius-rounded !important;
 }
 
 .border-radius-none {
@@ -99,8 +99,8 @@
 
 // Colors
 
-@each $name, $color-set in $colors {
-	$base: nth($color-set, $color-index-base);
+@each $name, $color-set in tokens.$colors {
+	$base: nth($color-set, tokens.$color-index-base);
 
 	.border-color-#{$name} {
 		border-color: $base !important;
@@ -108,13 +108,13 @@
 }
 
 .border-color-accent {
-	border-color: $border-accent !important;
+	border-color: tokens.$border-accent !important;
 }
 
 .border-high-contrast {
-	border: $border-width solid $border-white-high-contrast !important;
+	border: tokens.$border-width solid tokens.$border-white-high-contrast !important;
 
 	&-hover:hover {
-		border: $border-width solid $border-yellow-high-contrast !important;
+		border: tokens.$border-width solid tokens.$border-yellow-high-contrast !important;
 	}
 }

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,5 @@
 @use 'sass:map';
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../mixins/index.scss' as mixins;
 
 $flex-atomics: (
 	'justify-content': (
@@ -65,7 +64,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,6 +1,3 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
 .height-full {
 	height: 100% !important;
 }

package/src/atomics/image.scss

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

package/src/atomics/line-clamp.scss

@@ -1,18 +1,17 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@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,6 +1,3 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
-
 .list-style-none {
 	list-style: none !important;
 

package/src/atomics/overflow.scss

@@ -1,5 +1,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../mixins/index.scss' as mixins;
 
 .overflow-hidden {
 	overflow: hidden !important;
@@ -9,7 +8,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,21 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 .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,4 @@
-@use '../tokens/index.scss' as *;
-@use '../mixins/index.scss' as *;
+@use '../mixins/index.scss' as mixins;
 
 $auto-spacing-properties: (
 	('margin-inline', 'margin-inline'),
@@ -25,7 +24,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 +35,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 +46,7 @@ $separator: '-';
 	$classicProp: nth($property, 1);
 	$logicalProp: nth($property, 2);
 
-	@include widescreen {
+	@include mixins.widescreen {
 		.#{$classicProp}#{$separator}auto#{$separator}widescreen {
 			#{$logicalProp}: auto !important;
 		}