@microsoft/atlas-css 1.1.0 → 1.2.0

package/src/atomics/colors.scss

@@ -1,148 +1,166 @@
-// 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);
-
-	.color-#{$name} {
-		color: $base !important;
-	}
-
-	a.color-#{$name} {
-		&:hover,
-		&.focus-visible {
-			color: $hover !important;
-		}
-
-		&:active {
-			color: $active !important;
-		}
-	}
-
-	.color-#{$name}-invert {
-		color: $invert !important;
-	}
-
-	.background-color-#{$name} {
-		outline-color: $invert;
-		background-color: $base !important;
-	}
-
-	.background-color-#{$name}-invert {
-		outline-color: $base;
-		background-color: $invert !important;
-	}
-
-	.background-color-#{$name}-light {
-		outline-color: $dark;
-		background-color: $background !important;
-	}
-
-	.background-color-#{$name}-dark {
-		outline-color: $background;
-		background-color: $dark !important;
-	}
-}
-
-@include tablet {
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$invert: nth($color-set, $color-index-invert);
-
-		.background-color-#{$name}-tablet {
-			outline-color: $invert;
-			background-color: $base !important;
-		}
-	}
-}
-
-// Text color
-
-.color-text {
-	color: $text !important;
-}
-
-.color-text-subtle {
-	color: $text-subtle !important;
-}
-
-.color-text-overlay-invert {
-	color: $overlay-invert;
-}
-
-.color-current-color {
-	color: currentColor !important;
-}
-
-.fill-current-color {
-	fill: currentColor !important;
-}
-
-.outline-color-text {
-	outline-color: $text !important;
-}
-
-.stroke-current-color {
-	stroke: currentColor !important;
-}
-
-// Background color
-
-.background-color-body {
-	outline-color: $text !important;
-	background-color: $body-background !important;
-}
-
-.background-color-body-medium {
-	outline-color: $text !important;
-	background-color: $body-background-medium !important;
-}
-
-.background-color-alternate {
-	outline-color: $text-invert !important;
-	background-color: $alternate-background !important;
-}
-
-.background-color-alternate-medium {
-	outline-color: $text-invert !important;
-	background-color: $alternate-background-medium !important;
-}
-
-.background-color-overlay {
-	outline-color: $overlay-invert;
-	background-color: $overlay !important;
-}
-
-.background-color-alternating-grey {
-	border-top: 1px solid $border-white-high-contrast;
-	outline-color: $text !important;
-
-	&:nth-of-type(even) {
-		outline-color: $text;
-		background-color: $body-background;
-	}
-
-	&:nth-of-type(odd) {
-		outline-color: $text;
-		background-color: $body-background-medium;
-	}
-}
-
-.background-color-alternating-grey-reversed {
-	border-top: 1px solid $border-white-high-contrast;
-	outline-color: $text !important;
-
-	&:nth-of-type(even) {
-		outline-color: $text;
-		background-color: $body-background-medium;
-	}
-
-	&:nth-of-type(odd) {
-		outline-color: $text;
-		background-color: $body-background;
-	}
-}
+// 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);
+
+	.color-#{$name} {
+		color: $base !important;
+	}
+
+	a.color-#{$name} {
+		&:hover,
+		&.focus-visible {
+			color: $hover !important;
+		}
+
+		&:active {
+			color: $active !important;
+		}
+	}
+
+	.color-#{$name}-invert {
+		color: $invert !important;
+	}
+
+	.background-color-#{$name} {
+		outline-color: $invert;
+		background-color: $base !important;
+	}
+
+	.background-color-#{$name}-invert {
+		outline-color: $base;
+		background-color: $invert !important;
+	}
+
+	.background-color-#{$name}-light {
+		outline-color: $dark;
+		background-color: $background !important;
+	}
+
+	.background-color-#{$name}-dark {
+		outline-color: $background;
+		background-color: $dark !important;
+	}
+}
+
+@include tablet {
+	@each $name, $color-set in $colors {
+		$base: nth($color-set, $color-index-base);
+		$invert: nth($color-set, $color-index-invert);
+
+		.background-color-#{$name}-tablet {
+			outline-color: $invert;
+			background-color: $base !important;
+		}
+	}
+}
+
+// Text color
+
+.color-text {
+	color: $text !important;
+}
+
+.color-text-subtle {
+	color: $text-subtle !important;
+}
+
+.color-text-overlay-invert {
+	color: $overlay-invert;
+}
+
+.color-current-color {
+	color: currentColor !important;
+}
+
+.fill-current-color {
+	fill: currentColor !important;
+}
+
+.outline-color-text {
+	outline-color: $text !important;
+}
+
+.stroke-current-color {
+	stroke: currentColor !important;
+}
+
+// Background color
+
+.background-color-body {
+	outline-color: $text !important;
+	background-color: $body-background !important;
+}
+
+.background-color-body-medium {
+	outline-color: $text !important;
+	background-color: $body-background-medium !important;
+}
+
+.background-color-alternate {
+	outline-color: $text-invert !important;
+	background-color: $alternate-background !important;
+}
+
+.background-color-alternate-medium {
+	outline-color: $text-invert !important;
+	background-color: $alternate-background-medium !important;
+}
+
+.background-color-overlay {
+	outline-color: $overlay-invert;
+	background-color: $overlay !important;
+}
+
+.background-color-alternating-grey {
+	border-top: 1px solid $border-white-high-contrast;
+	outline-color: $text !important;
+
+	&:nth-of-type(even) {
+		outline-color: $text;
+		background-color: $body-background;
+	}
+
+	&:nth-of-type(odd) {
+		outline-color: $text;
+		background-color: $body-background-medium;
+	}
+}
+
+.background-color-alternating-grey-reversed {
+	border-top: 1px solid $border-white-high-contrast;
+	outline-color: $text !important;
+
+	&:nth-of-type(even) {
+		outline-color: $text;
+		background-color: $body-background-medium;
+	}
+
+	&:nth-of-type(odd) {
+		outline-color: $text;
+		background-color: $body-background;
+	}
+}
+
+// Static colors - do not change with theme
+
+.color-white-static {
+	color: $white-static !important;
+}
+
+.color-black-static {
+	color: $black-static !important;
+}
+
+.background-color-white-static {
+	background-color: $white-static !important;
+}
+
+.background-color-black-static {
+	background-color: $black-static !important;
+}

package/src/atomics/display.scss

@@ -1,33 +1,33 @@
-@each $item in $displays {
-	.display-#{$item} {
-		display: #{$item} !important;
-	}
-}
-
-@include tablet {
-	@each $item in $displays {
-		.display-#{$item}-tablet {
-			display: #{$item} !important;
-		}
-	}
-}
-
-@include desktop {
-	@each $item in $displays {
-		.display-#{$item}-desktop {
-			display: #{$item} !important;
-		}
-	}
-}
-
-@include widescreen {
-	@each $item in $displays {
-		.display-#{$item}-widescreen {
-			display: #{$item} !important;
-		}
-	}
-}
-
-[hidden] {
-	display: none !important;
-}
+@each $item in $displays {
+	.display-#{$item} {
+		display: #{$item} !important;
+	}
+}
+
+@include tablet {
+	@each $item in $displays {
+		.display-#{$item}-tablet {
+			display: #{$item} !important;
+		}
+	}
+}
+
+@include desktop {
+	@each $item in $displays {
+		.display-#{$item}-desktop {
+			display: #{$item} !important;
+		}
+	}
+}
+
+@include widescreen {
+	@each $item in $displays {
+		.display-#{$item}-widescreen {
+			display: #{$item} !important;
+		}
+	}
+}
+
+[hidden] {
+	display: none !important;
+}

package/src/atomics/flex.scss

@@ -1,69 +1,69 @@
-@use 'sass:map';
-
-$flex-atomics: (
-	'justify-content': (
-		flex-start,
-		flex-end,
-		center,
-		space-around,
-		space-between,
-		space-evenly
-	),
-	'align-items': (
-		flex-start,
-		flex-end,
-		center,
-		baseline,
-		stretch
-	),
-	'align-content': (
-		flex-start,
-		flex-end,
-		center,
-		space-around,
-		space-between,
-		stretch
-	),
-	'align-self': (
-		flex-start,
-		flex-end,
-		center,
-		baseline,
-		stretch
-	),
-	'flex-direction': (
-		column,
-		column-reverse,
-		row-reverse
-	),
-	'flex-wrap': (
-		wrap,
-		wrap-reverse
-	),
-	'flex-shrink': (
-		0,
-		1
-	),
-	'flex-grow': (
-		0,
-		1
-	)
-) !default;
-
-@each $key in map.keys($flex-atomics) {
-	@each $value in map.get($flex-atomics, $key) {
-		.#{$key}-#{$value} {
-			#{$key}: $value !important;
-		}
-	}
-}
-
-@include tablet {
-	@each $key in map.keys($flex-atomics) {
-		@each $value in map.get($flex-atomics, $key) {
-			.#{$key}-#{$value}-tablet {
-				#{$key}: $value !important;
-			}
-		}
-	}
-}
+@use 'sass:map';
+
+$flex-atomics: (
+	'justify-content': (
+		flex-start,
+		flex-end,
+		center,
+		space-around,
+		space-between,
+		space-evenly
+	),
+	'align-items': (
+		flex-start,
+		flex-end,
+		center,
+		baseline,
+		stretch
+	),
+	'align-content': (
+		flex-start,
+		flex-end,
+		center,
+		space-around,
+		space-between,
+		stretch
+	),
+	'align-self': (
+		flex-start,
+		flex-end,
+		center,
+		baseline,
+		stretch
+	),
+	'flex-direction': (
+		column,
+		column-reverse,
+		row-reverse
+	),
+	'flex-wrap': (
+		wrap,
+		wrap-reverse
+	),
+	'flex-shrink': (
+		0,
+		1
+	),
+	'flex-grow': (
+		0,
+		1
+	)
+) !default;
+
+@each $key in map.keys($flex-atomics) {
+	@each $value in map.get($flex-atomics, $key) {
+		.#{$key}-#{$value} {
+			#{$key}: $value !important;
+		}
+	}
+}
+
+@include tablet {
+	@each $key in map.keys($flex-atomics) {
+		@each $value in map.get($flex-atomics, $key) {
+			.#{$key}-#{$value}-tablet {
+				#{$key}: $value !important;
+			}
+		}
+	}
+}