@microsoft/atlas-css 3.47.0 → 3.48.0-test.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.47.0",
+	"version": "3.48.0-test.0",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

package/src/atomics/overflow.scss

@@ -15,3 +15,11 @@
 		overflow-x: hidden !important;
 	}
 }
+
+.scrollbar-gutter-stable {
+	scrollbar-gutter: stable !important;
+}
+
+.scrollbar-gutter-stable-both-edges {
+	scrollbar-gutter: stable both-edges !important;
+}

package/src/components/index.scss

@@ -21,6 +21,7 @@
 @import './pagination.scss';
 @import './progress-bar.scss';
 @import './table.scss';
+@import './tag.scss';
 @import './toggle.scss';
 @import './scroll.scss';
 @import './site-header.scss';

package/src/components/layout.scss

@@ -4,6 +4,15 @@ $quarter-widescreen: math.div($breakpoint-widescreen, 4);
 $half-widescreen: math.div($breakpoint-widescreen, 2);
 $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 
+.site-header {
+	background-color: darkslateblue !important;
+	color: white !important;
+}
+
+.site-header-panel {
+	background-color: darkslateblue !important;
+}
+
 .layout {
 	display: flex;
 	flex-direction: column;
@@ -72,7 +81,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 .layout,
 .layout.layout-single {
 	.layout-body {
-		grid-template: auto auto auto 1fr auto auto / 1fr;
+		grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
 	}
 }
@@ -83,7 +92,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto auto / 1fr 2fr;
+			grid-template: auto auto 1fr auto auto / minmax(0, 1fr) minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -93,7 +102,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / 1fr 2fr 1fr;
+			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header header'
 				'hero hero hero'
@@ -118,11 +127,11 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 	}
 
 	.layout-body {
-		grid-template: auto auto auto 1fr auto / 1fr;
+		grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto / 1fr 2fr;
+			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -131,7 +140,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / 1fr 3fr;
+			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 3fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -156,11 +165,11 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 	}
 
 	.layout-body {
-		grid-template: auto auto auto 1fr auto / 1fr;
+		grid-template: auto auto auto 1fr auto / minmax(0, 1fr);
 		grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto / 2fr 1fr;
+			grid-template: auto auto 1fr auto / minmax(0, 2fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -169,7 +178,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / 3fr 1fr;
+			grid-template: auto auto 1fr auto / minmax(0, 3fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'

package/src/components/popover.scss

@@ -39,4 +39,11 @@ $popover-width: 224px !default;
 			inset-inline-start: -25%;
 		}
 	}
+
+	&.popover-top {
+		.popover-content {
+			inset-block-end: 100%;
+			margin-block-end: $spacer-3;
+		}
+	}
 }

package/src/components/progress-bar.scss

@@ -24,7 +24,10 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 		background-color: $progress-bar-background-color;
 	}
 
-	&::-webkit-progress-value,
+	&::-webkit-progress-value {
+		background-color: $progress-bar-value-background-color;
+	}
+
 	&::-moz-progress-bar {
 		background-color: $progress-bar-value-background-color;
 	}
@@ -38,21 +41,30 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 	// Colors
 
 	&.progress-bar-success {
-		&::-webkit-progress-value,
+		&::-webkit-progress-value {
+			background-color: $progress-bar-value-background-color-success;
+		}
+
 		&::-moz-progress-bar {
 			background-color: $progress-bar-value-background-color-success;
 		}
 	}
 
 	&.progress-bar-danger {
-		&::-webkit-progress-value,
+		&::-webkit-progress-value {
+			background-color: $progress-bar-value-background-color-danger;
+		}
+
 		&::-moz-progress-bar {
 			background-color: $progress-bar-value-background-color-danger;
 		}
 	}
 
 	&.progress-bar-warning {
-		&::-webkit-progress-value,
+		&::-webkit-progress-value {
+			background-color: $progress-bar-value-background-color-warning;
+		}
+
 		&::-moz-progress-bar {
 			background-color: $progress-bar-value-background-color-warning;
 		}
@@ -78,7 +90,10 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 			animation-direction: reverse;
 		}
 
-		&::-webkit-progress-bar,
+		&::-webkit-progress-bar {
+			background-color: transparent;
+		}
+
 		&::-moz-progress-bar {
 			background-color: transparent;
 		}
@@ -95,7 +110,10 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 			background-color: CanvasText !important;
 		}
 
-		&::-webkit-progress-value,
+		&::-webkit-progress-value {
+			background-color: Highlight !important;
+		}
+
 		&::-moz-progress-bar {
 			background-color: Highlight !important;
 		}

package/src/components/tag.scss

@@ -0,0 +1,205 @@
+/* stylelint-disable selector-max-specificity, no-descending-specificity  */
+
+$tag-padding-block: 0.375em !default;
+$tag-padding-inline: 0.675em !default;
+
+$tag-gap-size: 0.375em !default;
+
+$tag-font-size: $font-size-8 !default;
+$tag-font-size-sm: $font-size-9 !default;
+$tag-font-size-lg: $font-size-7 !default;
+$tag-font-weight: $weight-normal !default;
+
+$tag-icon-font-size: 0.875em !default;
+
+$tag-border-width: $border-width !default;
+$tag-border-radius: $border-radius !default;
+$tag-border-radius-rounded: $border-radius-rounded !default;
+$tag-border-color: $secondary !default;
+
+$tag-color: $secondary-dark !default;
+$tag-color-hover: $primary-dark !default;
+$tag-background-color: $body-background !default;
+$tag-background-hover: $secondary-background-glow-high-contrast !default;
+
+$tag-color-filled: $text !default;
+$tag-background-filled: $secondary-background-glow-high-contrast !default;
+$tag-color-filled-hover: $primary-hover !default;
+$tag-background-filled-hover: $secondary !default;
+$tag-interactive-divider-color-filled: $secondary-box-shadow !default;
+$tag-interactive-color-filled-hover: $secondary-invert !default;
+
+$tag-color-primary: $primary-dark !default;
+$tag-color-primary-hover: $primary-hover !default;
+$tag-background-primary: $primary-background !default;
+$tag-background-primary-hover: $primary-hover !default;
+$tag-border-color-primary: $primary-background-glow-high-contrast !default;
+$tag-interactive-divider-color-primary: $primary-box-shadow !default;
+$tag-interactive-color-primary-hover: $primary-invert !default;
+
+.tag {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: $tag-padding-block $tag-padding-inline;
+	border: $tag-border-width solid $tag-border-color;
+	border-radius: $tag-border-radius;
+	background-color: $tag-background-color;
+	color: $tag-color;
+	font-size: $tag-font-size;
+	font-weight: $tag-font-weight;
+	line-height: $line-height-normal;
+	white-space: nowrap;
+	gap: $tag-gap-size;
+
+	&:where(button) {
+		cursor: pointer;
+	}
+
+	.tag-close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&:hover,
+	&.is-hovered {
+		.tag-close {
+			color: $tag-color-hover;
+		}
+	}
+
+	.icon {
+		font-size: $tag-icon-font-size;
+	}
+
+	// Sizes
+
+	&.tag-sm {
+		font-size: $tag-font-size-sm;
+	}
+
+	&.tag-lg {
+		font-size: $tag-font-size-lg;
+	}
+
+	// Interactive tag
+
+	&.tag-interactive {
+		align-items: stretch;
+		padding: 0;
+		border: none;
+		color: $text;
+		gap: 0;
+
+		.tag-popover {
+			.tag-summary {
+				padding: $tag-padding-block $tag-padding-inline;
+				border: $tag-border-width solid $tag-border-color;
+				border-radius: $tag-border-radius;
+				outline-color: currentColor;
+				outline-offset: -$focus-width;
+				cursor: pointer;
+				overflow: hidden;
+
+				/* stylelint-disable-next-line max-nesting-depth, rule-empty-line-before */
+				&:hover,
+				&.is-hovered {
+					background-color: $tag-background-hover;
+				}
+			}
+
+			&:not(:only-child) .tag-summary {
+				border-start-end-radius: 0;
+				border-end-end-radius: 0;
+				border-inline-end: 0;
+			}
+		}
+
+		.tag-close {
+			padding: $tag-padding-block $tag-padding-inline;
+			border: 0;
+			border: $tag-border-width solid $tag-border-color;
+			border-radius: 0 $tag-border-radius $tag-border-radius 0;
+			outline-color: currentColor;
+			outline-offset: -$focus-width;
+			background-color: inherit;
+			color: inherit;
+			cursor: pointer;
+
+			&:hover,
+			&.is-hovered {
+				background-color: $tag-background-hover;
+				color: $tag-color-hover;
+			}
+		}
+	}
+}
+
+// Colors
+
+.tag.tag-primary {
+	border-color: $tag-border-color-primary;
+	background-color: $tag-background-primary;
+	color: $tag-color-primary;
+
+	&:hover,
+	&.is-hovered {
+		.tag-close {
+			color: $tag-color-primary-hover;
+		}
+	}
+
+	&.tag-interactive {
+		.tag-popover .tag-summary,
+		.tag-close {
+			border-color: $tag-border-color-primary;
+			background-color: $tag-background-primary;
+			color: $tag-color-primary;
+
+			&:hover,
+			&.is-hovered {
+				border-color: $tag-background-primary-hover;
+				background-color: $tag-background-primary-hover;
+				color: $tag-interactive-color-primary-hover;
+			}
+		}
+
+		.tag-close {
+			border-inline-start-color: $tag-interactive-divider-color-primary;
+		}
+	}
+}
+
+.tag.tag-filled {
+	border-color: $tag-background-filled;
+	background-color: $tag-background-filled;
+	color: $tag-color-filled;
+
+	&:hover,
+	&.is-hovered {
+		.tag-close {
+			color: $tag-color-filled-hover;
+		}
+	}
+
+	&.tag-interactive {
+		.tag-popover .tag-summary,
+		.tag-close {
+			border-color: $tag-background-filled;
+			background-color: $tag-background-filled;
+			color: $tag-color-filled;
+
+			&:hover,
+			&.is-hovered {
+				border-color: $tag-background-filled-hover;
+				background-color: $tag-background-filled-hover;
+				color: $tag-interactive-color-filled-hover;
+			}
+		}
+
+		.tag-close {
+			border-inline-start-color: $tag-interactive-divider-color-filled;
+		}
+	}
+}