@microsoft/atlas-css 3.43.0 → 3.44.1

package/src/core/themes.scss

@@ -1,91 +1,91 @@
-@use 'sass:map';
-
-$root-theme: 'light' !default;
-$print-theme: 'light' !default;
-
-// Ensure that the root theme exists
-@if map.has-key($themes, $root-theme) != true {
-	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in $themes map.";
-}
-
-// Ensure that the print theme exists
-@if map.has-key($themes, $print-theme) != true {
-	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in $themes map.";
-}
-
-$theme-names: map.keys($themes);
-
-// Validation: ensure that all values in the root theme are in the other themes too
-@each $root-color-name, $val in map.get($themes, $root-theme) {
-	@each $theme-name in $theme-names {
-		@if $theme-name != $root-theme {
-			@if map.has-key(map.get($themes, $theme-name), $root-color-name) != true {
-				@error '#{$root-color-name} from #{$root-theme} does not exist in theme: #{$theme-name}.';
-			}
-		}
-	}
-}
-
-// Validation: ensure all properties in non-root themes exist in root
-@each $theme-name in $theme-names {
-	$theme: map.get($themes, $theme-name);
-	@if $theme-name != $root-theme {
-		$root: map.get($themes, $root-theme);
-		@each $color-name, $val in $theme {
-			@if map.has-key($root, $color-name) != true {
-				@error '#{$color-name} from #{$theme-name} does not exist in theme: #{$theme-name}.';
-			}
-		}
-	}
-}
-
-@each $key, $value in $themes {
-	// Set the default theme
-	@if $key == $root-theme {
-		:root {
-			@each $colorName, $colorVal in map.get($themes, $key) {
-				// stylelint-disable-next-line custom-property-pattern
-				--theme-#{$colorName}: #{$colorVal};
-			}
-		}
-	}
-
-	@if $key == $print-theme {
-		.theme-#{$key} {
-			@each $colorName, $colorVal in map.get($themes, $key) {
-				// stylelint-disable-next-line custom-property-pattern
-				--theme-#{$colorName}: #{$colorVal};
-			}
-		}
-	} @else {
-		// Set the rest of the themes, exclude them from print styling.
-		@media not print {
-			.theme-#{$key} {
-				@each $colorName, $colorVal in map-get($themes, $key) {
-					// stylelint-disable-next-line custom-property-pattern
-					--theme-#{$colorName}: #{$colorVal};
-				}
-			}
-		}
-	}
-}
-
-// End validation
-
-%theme-base-styles {
-	outline-color: $text;
-	background-color: $body-background;
-	color: $text;
-}
-
-@each $key, $value in $themes {
-	.theme-#{$key} {
-		@extend %theme-base-styles;
-	}
-}
-
-@each $key, $value in $color-schemes {
-	.theme-#{$key} {
-		color-scheme: #{$value};
-	}
-}
+@use 'sass:map';
+
+$root-theme: 'light' !default;
+$print-theme: 'light' !default;
+
+// Ensure that the root theme exists
+@if map.has-key($themes, $root-theme) != true {
+	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in $themes map.";
+}
+
+// Ensure that the print theme exists
+@if map.has-key($themes, $print-theme) != true {
+	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in $themes map.";
+}
+
+$theme-names: map.keys($themes);
+
+// Validation: ensure that all values in the root theme are in the other themes too
+@each $root-color-name, $val in map.get($themes, $root-theme) {
+	@each $theme-name in $theme-names {
+		@if $theme-name != $root-theme {
+			@if map.has-key(map.get($themes, $theme-name), $root-color-name) != true {
+				@error '#{$root-color-name} from #{$root-theme} does not exist in theme: #{$theme-name}.';
+			}
+		}
+	}
+}
+
+// Validation: ensure all properties in non-root themes exist in root
+@each $theme-name in $theme-names {
+	$theme: map.get($themes, $theme-name);
+	@if $theme-name != $root-theme {
+		$root: map.get($themes, $root-theme);
+		@each $color-name, $val in $theme {
+			@if map.has-key($root, $color-name) != true {
+				@error '#{$color-name} from #{$theme-name} does not exist in theme: #{$theme-name}.';
+			}
+		}
+	}
+}
+
+@each $key, $value in $themes {
+	// Set the default theme
+	@if $key == $root-theme {
+		:root {
+			@each $colorName, $colorVal in map.get($themes, $key) {
+				// stylelint-disable-next-line custom-property-pattern
+				--theme-#{$colorName}: #{$colorVal};
+			}
+		}
+	}
+
+	@if $key == $print-theme {
+		.theme-#{$key} {
+			@each $colorName, $colorVal in map.get($themes, $key) {
+				// stylelint-disable-next-line custom-property-pattern
+				--theme-#{$colorName}: #{$colorVal};
+			}
+		}
+	} @else {
+		// Set the rest of the themes, exclude them from print styling.
+		@media not print {
+			.theme-#{$key} {
+				@each $colorName, $colorVal in map-get($themes, $key) {
+					// stylelint-disable-next-line custom-property-pattern
+					--theme-#{$colorName}: #{$colorVal};
+				}
+			}
+		}
+	}
+}
+
+// End validation
+
+%theme-base-styles {
+	outline-color: $text;
+	background-color: $body-background;
+	color: $text;
+}
+
+@each $key, $value in $themes {
+	.theme-#{$key} {
+		@extend %theme-base-styles;
+	}
+}
+
+@each $key, $value in $color-schemes {
+	.theme-#{$key} {
+		color-scheme: #{$value};
+	}
+}

package/src/index.scss

@@ -1,5 +1,5 @@
-@import './tokens/index.scss';
-@import './mixins/index.scss';
-@import './core/index.scss';
-@import './components/index.scss';
-@import './atomics/index.scss';
+@import './tokens/index.scss';
+@import './mixins/index.scss';
+@import './core/index.scss';
+@import './components/index.scss';
+@import './atomics/index.scss';

package/src/mixins/center.scss

@@ -1,11 +1,11 @@
-@mixin center($width, $height: 0) {
-	position: absolute;
-
-	@if $height != 0 {
-		inset-block-start: calc(50% - (#{$height} / 2));
-		inset-inline-start: calc(50% - (#{$width} / 2));
-	} @else {
-		inset-block-start: calc(50% - (#{$width} / 2));
-		inset-inline-start: calc(50% - (#{$width} / 2));
-	}
-}
+@mixin center($width, $height: 0) {
+	position: absolute;
+
+	@if $height != 0 {
+		inset-block-start: calc(50% - (#{$height} / 2));
+		inset-inline-start: calc(50% - (#{$width} / 2));
+	} @else {
+		inset-block-start: calc(50% - (#{$width} / 2));
+		inset-inline-start: calc(50% - (#{$width} / 2));
+	}
+}

package/src/mixins/code-block.scss

@@ -1,43 +1,43 @@
-$code-font-size: $font-size-8 !default;
-$code-block-spacing: 1em !default;
-$code-header-body-line-height: 1.3571 !default;
-
-@mixin code-block {
-	pre {
-		box-sizing: border-box;
-		max-width: 100%;
-		margin: 0;
-		padding: $code-block-spacing;
-		border: 1px solid $border;
-		background-color: $code-block;
-		font-size: $code-font-size;
-		-moz-osx-font-smoothing: auto;
-		-webkit-font-smoothing: auto;
-		line-height: 1.3571;
-		white-space: pre;
-		word-spacing: normal;
-		overflow: auto;
-		word-break: normal;
-		word-wrap: normal;
-		tab-size: 4;
-		hyphens: none;
-		-webkit-overflow-scrolling: touch;
-
-		> code {
-			display: block;
-			position: relative;
-			padding: 0;
-			border: 0;
-			line-height: $code-header-body-line-height;
-
-			mark {
-				display: inline-block;
-				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
-				min-height: 18.9px; // Allow for highlighting of blank lines.
-				margin: 0 $code-block-spacing * -1;
-				padding: 0 $code-block-spacing;
-				color: $text;
-			}
-		}
-	}
-}
+$code-font-size: $font-size-8 !default;
+$code-block-spacing: 1em !default;
+$code-header-body-line-height: 1.3571 !default;
+
+@mixin code-block {
+	pre {
+		box-sizing: border-box;
+		max-width: 100%;
+		margin: 0;
+		padding: $code-block-spacing;
+		border: 1px solid $border;
+		background-color: $code-block;
+		font-size: $code-font-size;
+		-moz-osx-font-smoothing: auto;
+		-webkit-font-smoothing: auto;
+		line-height: 1.3571;
+		white-space: pre;
+		word-spacing: normal;
+		overflow: auto;
+		word-break: normal;
+		word-wrap: normal;
+		tab-size: 4;
+		hyphens: none;
+		-webkit-overflow-scrolling: touch;
+
+		> code {
+			display: block;
+			position: relative;
+			padding: 0;
+			border: 0;
+			line-height: $code-header-body-line-height;
+
+			mark {
+				display: inline-block;
+				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
+				min-height: 18.9px; // Allow for highlighting of blank lines.
+				margin: 0 $code-block-spacing * -1;
+				padding: 0 $code-block-spacing;
+				color: $text;
+			}
+		}
+	}
+}

package/src/mixins/colors.scss

@@ -1,6 +1,6 @@
-@mixin fill-current-color {
-	fill: currentColor !important;
-
-	// Ensure SVG paths can adapt to forced colors theming
-	forced-color-adjust: auto;
-}
+@mixin fill-current-color {
+	fill: currentColor !important;
+
+	// Ensure SVG paths can adapt to forced colors theming
+	forced-color-adjust: auto;
+}

package/src/mixins/control.scss

@@ -1,43 +1,43 @@
-$control-radius: $border-radius-sm !default;
-
-$control-font-size: $font-size-7 !default;
-$control-sm-font-size: $font-size-8 !default;
-$control-lg-font-size: $font-size-6 !default;
-
-$control-border-width: 1px !default;
-
-$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
-$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
-
-%control {
-	display: inline-flex;
-	position: relative;
-	align-items: center;
-	justify-content: flex-start;
-	min-height: 2.25em;
-	padding-block: $control-padding-vertical;
-	padding-inline: $control-padding-horizontal;
-	border: $control-border-width solid transparent;
-	border-radius: $control-radius;
-	font-size: $control-font-size;
-	line-height: 1.5;
-	appearance: none;
-	box-shadow: none;
-	vertical-align: top;
-
-	&[disabled] {
-		cursor: not-allowed;
-	}
-}
-
-@mixin control {
-	@extend %control;
-}
-
-@mixin control-sm {
-	font-size: $control-sm-font-size;
-}
-
-@mixin control-lg {
-	font-size: $control-lg-font-size;
-}
+$control-radius: $border-radius-sm !default;
+
+$control-font-size: $font-size-7 !default;
+$control-sm-font-size: $font-size-8 !default;
+$control-lg-font-size: $font-size-6 !default;
+
+$control-border-width: 1px !default;
+
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
+
+%control {
+	display: inline-flex;
+	position: relative;
+	align-items: center;
+	justify-content: flex-start;
+	min-height: 2.25em;
+	padding-block: $control-padding-vertical;
+	padding-inline: $control-padding-horizontal;
+	border: $control-border-width solid transparent;
+	border-radius: $control-radius;
+	font-size: $control-font-size;
+	line-height: 1.5;
+	appearance: none;
+	box-shadow: none;
+	vertical-align: top;
+
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+@mixin control {
+	@extend %control;
+}
+
+@mixin control-sm {
+	font-size: $control-sm-font-size;
+}
+
+@mixin control-lg {
+	font-size: $control-lg-font-size;
+}

package/src/mixins/dismiss.scss

@@ -1,22 +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;
-}
+%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/focus.scss

@@ -1,23 +1,23 @@
-// stylelint-disable declaration-block-no-redundant-longhand-properties
-@mixin focus() {
-	outline-color: inherit;
-	outline-offset: $focus-outline-offset;
-	outline-style: $focus-style;
-	outline-width: $focus-width;
-}
-
-%focus {
-	@include focus();
-}
-
-@mixin focus-visible {
-	@if ($focus-visible-use-polyfill) {
-		&.focus-visible {
-			@content;
-		}
-	} @else {
-		&:focus-visible {
-			@content;
-		}
-	}
-}
+// stylelint-disable declaration-block-no-redundant-longhand-properties
+@mixin focus() {
+	outline-color: inherit;
+	outline-offset: $focus-outline-offset;
+	outline-style: $focus-style;
+	outline-width: $focus-width;
+}
+
+%focus {
+	@include focus();
+}
+
+@mixin focus-visible {
+	@if ($focus-visible-use-polyfill) {
+		&.focus-visible {
+			@content;
+		}
+	} @else {
+		&:focus-visible {
+			@content;
+		}
+	}
+}

package/src/mixins/font-size.scss

@@ -1,35 +1,35 @@
-@use 'sass:math';
-
-/* stylelint-disable */
-
-$font-size-scaling-factor: 0.75 !default;
-
-// Remove the units from a value
-@function strip-units($number) {
-	@return math.div($number, ($number * 0 + 1));
-}
-@mixin responsive-font-size(
-	// font-size to stop scaling at
-	$end-rem,
-	// whether to include !important
-	$important: false,
-	// font-size to start scaling from
-	$start-rem: max($end-rem * $font-size-scaling-factor, 1rem),
-	// viewport width to stop scaling at
-	$end-width: $breakpoint-desktop,
-	// viewport width to start scaling from
-	$start-width: 480px
-) {
-	$m: math.div(
-			strip-units($end-rem) - strip-units($start-rem),
-			strip-units($end-width) - strip-units($start-width)
-		) * strip-units($document-font-size);
-
-	$y: strip-units($start-rem) * strip-units($document-font-size);
-	$x: strip-units($start-width);
-	$b: $y - $m * $x;
-	$importantValue: if($important, !important, '');
-
-	font-size: clamp(#{$start-rem}, #{$b}px + #{$m * 100}vw, #{$end-rem}) #{$importantValue};
-}
-/* stylelint-enable */
+@use 'sass:math';
+
+/* stylelint-disable */
+
+$font-size-scaling-factor: 0.75 !default;
+
+// Remove the units from a value
+@function strip-units($number) {
+	@return math.div($number, ($number * 0 + 1));
+}
+@mixin responsive-font-size(
+	// font-size to stop scaling at
+	$end-rem,
+	// whether to include !important
+	$important: false,
+	// font-size to start scaling from
+	$start-rem: max($end-rem * $font-size-scaling-factor, 1rem),
+	// viewport width to stop scaling at
+	$end-width: $breakpoint-desktop,
+	// viewport width to start scaling from
+	$start-width: 480px
+) {
+	$m: math.div(
+			strip-units($end-rem) - strip-units($start-rem),
+			strip-units($end-width) - strip-units($start-width)
+		) * strip-units($document-font-size);
+
+	$y: strip-units($start-rem) * strip-units($document-font-size);
+	$x: strip-units($start-width);
+	$b: $y - $m * $x;
+	$importantValue: if($important, !important, '');
+
+	font-size: clamp(#{$start-rem}, #{$b}px + #{$m * 100}vw, #{$end-rem}) #{$importantValue};
+}
+/* stylelint-enable */

package/src/mixins/force-colors.scss

@@ -1,5 +1,5 @@
-@mixin forced-colors() {
-	@media (forced-colors: active) {
-		@content;
-	}
-}
+@mixin forced-colors() {
+	@media (forced-colors: active) {
+		@content;
+	}
+}

package/src/mixins/gradient.scss

@@ -1,11 +1,11 @@
-@mixin gradient-text($startColor, $endColor) {
-	/* stylelint-disable */
-	-webkit-background-clip: text;
-	/* stylelint-enable */
-	background-clip: text;
-	background-color: $startColor;
-	background-image: linear-gradient(90deg, $startColor, $endColor);
-	color: transparent;
-	-webkit-text-fill-color: transparent;
-	line-height: 1.4; // required because of background clip, avoid "g" and "y" getting cut off
-}
+@mixin gradient-text($startColor, $endColor) {
+	/* stylelint-disable */
+	-webkit-background-clip: text;
+	/* stylelint-enable */
+	background-clip: text;
+	background-color: $startColor;
+	background-image: linear-gradient(90deg, $startColor, $endColor);
+	color: transparent;
+	-webkit-text-fill-color: transparent;
+	line-height: 1.4; // required because of background clip, avoid "g" and "y" getting cut off
+}

package/src/mixins/index.scss

@@ -1,17 +1,17 @@
-@import './media-queries.scss';
-@import './code-block.scss';
-@import './colors.scss';
-@import './control.scss';
-@import './center.scss';
-@import './focus.scss';
-@import './gradient.scss';
-@import './loader.scss';
-@import './line-clamp.scss';
-@import './layout-gap.scss';
-@import './font-size.scss';
-@import './force-colors.scss';
-@import './overlay.scss';
-@import './transparency.scss';
-@import './dismiss.scss';
-@import './unselectable.scss';
-@import './visually-hidden.scss';
+@import './media-queries.scss';
+@import './code-block.scss';
+@import './colors.scss';
+@import './control.scss';
+@import './center.scss';
+@import './focus.scss';
+@import './gradient.scss';
+@import './loader.scss';
+@import './line-clamp.scss';
+@import './layout-gap.scss';
+@import './font-size.scss';
+@import './force-colors.scss';
+@import './overlay.scss';
+@import './transparency.scss';
+@import './dismiss.scss';
+@import './unselectable.scss';
+@import './visually-hidden.scss';

package/src/mixins/layout-gap.scss

@@ -1,7 +1,7 @@
-%layout-gap {
-	padding-inline: $layout-gap;
-
-	@include widescreen {
-		padding-inline: $layout-widescreen-gap;
-	}
-}
+%layout-gap {
+	padding-inline: $layout-gap;
+
+	@include widescreen {
+		padding-inline: $layout-widescreen-gap;
+	}
+}