@microsoft/atlas-css 3.33.0 → 3.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.33.0",
+	"version": "3.34.1",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -73,17 +73,17 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@microsoft/stylelint-config-atlas": "4.1.0",
-		"@parcel/transformer-sass": "^2.8.3",
+		"@parcel/transformer-sass": "^2.9.3",
 		"css-tree": "^2.3.1",
 		"eslint-plugin-security": "^1.7.1",
 		"fs-extra": "^11.1.1",
-		"parcel": "^2.8.3",
-		"lightningcss": "1.19.0",
-		"prettier": "^2.8.7",
-		"quicktype-core": "^23.0.19",
+		"parcel": "^2.9.3",
+		"lightningcss": "1.21.1",
+		"prettier": "^2.8.8",
+		"quicktype-core": "^23.0.48",
 		"grass": "^1.0.2",
 		"sass-export": "^2.1.2",
-		"stylelint": "^14.16.1",
+		"stylelint": "^15.9.0",
 		"stylelint-config-prettier": "^9.0.5",
 		"stylelint-prettier": "^3.0.0",
 		"wireit": "^0.9.5"

package/src/atomics/colors.scss

@@ -9,12 +9,20 @@
 	$invert: nth($color-set, $color-index-invert);
 
 	.color-#{$name} {
-		color: $base !important;
+		@if $name == 'warning' {
+			color: $active !important;
+		} @else {
+			color: $base !important;
+		}
 	}
 
 	a.color-#{$name} {
 		&:hover {
-			color: $hover !important;
+			@if $name == 'warning' {
+				color: $active !important;
+			} @else {
+				color: $hover !important;
+			}
 		}
 
 		@include focus-visible {

package/src/components/banner.scss

@@ -7,20 +7,24 @@ $banner-color: $info-dark !default;
 $banner-border-color: $border-white-high-contrast !default;
 $banner-border-width: $border-width !default;
 
+$banner-dismiss-margin: $spacer-2 !default;
+
 .banner {
 	@extend %layout-gap;
 
-	display: block;
+	display: grid;
 	position: relative;
+	grid-template: auto / 1fr auto;
+	grid-template-areas: 'banner-content dismiss';
 	outline-color: $text;
 	background-color: $banner-background;
 	color: $banner-color;
 	font-size: $banner-font-size;
+	line-height: $line-height-normal;
 	padding-block: $banner-padding;
 	word-wrap: break-word;
 	word-break: break-word;
 	border-block: $banner-border-width solid $banner-border-color;
-	line-height: $line-height-normal;
 
 	&.is-loading {
 		color: transparent;
@@ -33,16 +37,33 @@ $banner-border-width: $border-width !default;
 			@include loader;
 
 			position: absolute;
+			inset-block-start: $banner-padding;
+			inset-inline-start: $layout-gap;
 			border-color: transparent transparent $banner-color $banner-color;
+
+			@include widescreen {
+				inset-inline-start: $layout-widescreen-gap;
+			}
 		}
 	}
 
-	a:not(.button) {
-		color: currentColor;
-		font-weight: $weight-semibold;
+	.banner-content {
+		grid-area: banner-content;
 
-		.theme-high-contrast & {
-			color: $hyperlink;
+		a:not(.button) {
+			color: currentColor;
+			font-weight: $weight-semibold;
+
+			.theme-high-contrast & {
+				color: $hyperlink;
+			}
 		}
 	}
+
+	.banner-dismiss {
+		@include dismiss-square;
+
+		grid-area: dismiss;
+		margin-inline-start: $banner-dismiss-margin;
+	}
 }

package/src/components/notification.scss

@@ -11,19 +11,23 @@ $notification-border-radius: $border-radius !default;
 $notification-icon-inline-spacing: 0.375em !default;
 $notification-icon-block-spacing: 0.2em !default;
 
+$notification-dismiss-margin: $spacer-2 !default;
+
 .notification {
-	display: block;
+	display: grid;
 	position: relative;
 	padding: $notification-padding;
+	grid-template: auto / 1fr auto;
+	grid-template-areas: 'notification-content dismiss';
 	border: $notification-border-width solid $notification-border-color;
 	border-radius: $notification-border-radius;
 	outline-color: $text;
 	background-color: $notification-background;
 	color: $notification-color;
 	font-size: $notification-font-size;
+	line-height: $line-height-normal;
 	word-wrap: break-word;
 	word-break: break-word;
-	line-height: $line-height-normal;
 
 	@each $name, $color-set in $colors {
 		$base: nth($color-set, $color-index-base);
@@ -58,29 +62,40 @@ $notification-icon-block-spacing: 0.2em !default;
 		}
 	}
 
-	.notification-title,
-	a:not(.button) {
-		color: currentColor;
-		font-weight: $weight-semibold;
-	}
+	.notification-content {
+		grid-area: notification-content;
 
-	a:not(.button) {
-		.theme-high-contrast & {
-			color: $hyperlink;
+		.notification-title,
+		a:not(.button) {
+			color: currentColor;
+			font-weight: $weight-semibold;
 		}
-	}
 
-	.notification-title {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		margin-block-end: $layout-1;
-
-		.icon {
-			flex-shrink: 0;
-			align-self: start;
-			margin-inline-end: $notification-icon-inline-spacing;
-			margin-block-start: $notification-icon-block-spacing;
+		a:not(.button) {
+			.theme-high-contrast & {
+				color: $hyperlink;
+			}
 		}
+
+		.notification-title {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			margin-block-end: $layout-1;
+
+			.icon {
+				flex-shrink: 0;
+				align-self: start;
+				margin-inline-end: $notification-icon-inline-spacing;
+				margin-block-start: $notification-icon-block-spacing;
+			}
+		}
+	}
+
+	.notification-dismiss {
+		@include dismiss-square;
+
+		grid-area: dismiss;
+		margin-inline-start: $notification-dismiss-margin;
 	}
 }

package/src/core/animations.scss

@@ -24,3 +24,32 @@
 		transform: scale(1);
 	}
 }
+
+@keyframes slide-up-fade-out {
+	100% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes fade-out {
+	100% {
+		opacity: 0;
+	}
+}
+
+.animation-fade {
+	animation: fade-out 0.4s ease-in forwards;
+
+	@include prefers-reduced-motion {
+		animation-duration: 0s;
+	}
+}
+
+.animation-slide-up {
+	animation: slide-up-fade-out 0.4s ease-in forwards;
+
+	@include prefers-reduced-motion {
+		animation-duration: 0s;
+	}
+}

package/src/mixins/dismiss.scss

@@ -0,0 +1,22 @@
+%dismiss {
+	@include transparent-effects;
+
+	display: inline-block;
+	color: currentColor;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+@mixin dismiss {
+	@extend %dismiss;
+}
+
+@mixin dismiss-square {
+	@extend %dismiss;
+
+	width: 1em;
+	height: 1em;
+	padding: 0;
+	border: 0;
+	border-radius: $border-radius-rounded;
+}

package/src/mixins/index.scss

@@ -12,5 +12,6 @@
 @import './force-colors.scss';
 @import './overlay.scss';
 @import './transparency.scss';
+@import './dismiss.scss';
 @import './unselectable.scss';
 @import './visually-hidden.scss';

package/src/mixins/media-queries.scss

@@ -1,22 +1,22 @@
 // Orientation
 
 @mixin orientation-portrait {
-	@media screen and (max-aspect-ratio: 1/1),
-		screen and (min-resolution: 120dpi) and (max-aspect-ratio: 1/1) {
+	@media screen and (aspect-ratio <= 1/1),
+		screen and (resolution >= 120dpi) and (aspect-ratio <= 1/1) {
 		@content;
 	}
 }
 
 @mixin orientation-landscape {
-	@media screen and (min-aspect-ratio: 1/1),
-		screen and (min-resolution: 120dpi) and (min-aspect-ratio: 1/1) {
+	@media screen and (aspect-ratio >= 1/1),
+		screen and (resolution >= 120dpi) and (aspect-ratio >= 1/1) {
 		@content;
 	}
 }
 
 @mixin orientation-square {
-	@media screen and (aspect-ratio: 1/1),
-		screen and (min-resolution: 120dpi) and (aspect-ratio: 1/1) {
+	@media screen and (aspect-ratio <= 1/1),
+		screen and (resolution >= 120dpi) and (aspect-ratio <= 1/1) {
 		@content;
 	}
 }
@@ -43,7 +43,7 @@
 
 // Please avoid using this mixin if possible. It doesn't follow the mobile-first approach to writing CSS.
 @mixin discouraged-mobile {
-	@media screen and (max-width: $breakpoint-tablet - 1px) {
+	@media screen and (max-width: ($breakpoint-tablet - 1px)) {
 		@content;
 	}
 }
@@ -53,3 +53,9 @@
 		@content;
 	}
 }
+
+@mixin prefers-reduced-motion {
+	@media (prefers-reduced-motion: reduce) {
+		@content;
+	}
+}