@microsoft/atlas-css 3.43.0 → 3.44.1

package/src/atomics/typography.scss

@@ -1,203 +1,203 @@
-// Font family
-
-.font-family-monospace {
-	font-family: $monospace-font-stack !important;
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: auto;
-}
-
-.font-family-quote {
-	font-family: $quote-font-stack !important;
-}
-
-// Heading sizes
-
-.font-size-h0 {
-	font-size: $font-size-0 !important;
-}
-
-.font-size-h1 {
-	font-size: $font-size-1 !important;
-}
-
-.font-size-h2 {
-	font-size: $font-size-2 !important;
-}
-
-.font-size-h3 {
-	font-size: $font-size-3 !important;
-}
-
-.font-size-h4 {
-	font-size: $font-size-4 !important;
-}
-
-.font-size-h5 {
-	font-size: $font-size-5 !important;
-}
-
-.font-size-h6 {
-	font-size: $font-size-6 !important;
-}
-
-@include tablet {
-	.font-size-h0-tablet {
-		font-size: $font-size-0 !important;
-	}
-
-	.font-size-h1-tablet {
-		font-size: $font-size-1 !important;
-	}
-
-	.font-size-h2-tablet {
-		font-size: $font-size-2 !important;
-	}
-
-	.font-size-h3-tablet {
-		font-size: $font-size-3 !important;
-	}
-
-	.font-size-h4-tablet {
-		font-size: $font-size-4 !important;
-	}
-
-	.font-size-h5-tablet {
-		font-size: $font-size-5 !important;
-	}
-
-	.font-size-h6-tablet {
-		font-size: $font-size-6 !important;
-	}
-}
-
-// Non-heading sizes
-
-.font-size-xl {
-	font-size: $font-size-5 !important;
-}
-
-.font-size-lg {
-	font-size: $font-size-6 !important;
-}
-
-.font-size-md {
-	font-size: $font-size-7 !important;
-}
-
-.font-size-sm {
-	font-size: $font-size-8 !important;
-}
-
-.font-size-xs {
-	font-size: $font-size-9 !important;
-}
-
-// Non-heading sizes
-
-@include tablet {
-	.font-size-xl-tablet {
-		font-size: $font-size-5 !important;
-	}
-
-	.font-size-lg-tablet {
-		font-size: $font-size-6 !important;
-	}
-
-	.font-size-md-tablet {
-		font-size: $font-size-7 !important;
-	}
-
-	.font-size-sm-tablet {
-		font-size: $font-size-8 !important;
-	}
-
-	.font-size-xs-tablet {
-		font-size: $font-size-9 !important;
-	}
-}
-
-// Weight
-
-.font-weight-light {
-	font-weight: $weight-light !important;
-}
-
-.font-weight-semilight {
-	font-weight: $weight-semilight !important;
-}
-
-.font-weight-normal {
-	font-weight: $weight-normal !important;
-}
-
-.font-weight-semibold {
-	font-weight: $weight-semibold !important;
-}
-
-.font-weight-bold {
-	font-weight: $weight-bold !important;
-}
-
-// Case
-
-.font-style-italic {
-	font-style: italic !important;
-}
-
-.text-decoration-underline {
-	text-decoration: underline !important;
-}
-
-.text-decoration-none {
-	text-decoration: none !important;
-}
-
-// Letter Spacing
-
-.letter-spacing-wide {
-	letter-spacing: $letter-spacing-wide !important;
-}
-
-.text-transform-uppercase {
-	text-transform: uppercase !important;
-}
-
-// Alignment
-
-.text-align-left {
-	text-align: start !important;
-}
-
-.text-align-center {
-	text-align: center !important;
-}
-
-.text-align-right {
-	text-align: end !important;
-}
-
-@include tablet {
-	.text-align-left-tablet {
-		text-align: start !important;
-	}
-
-	.text-align-center-tablet {
-		text-align: center !important;
-	}
-
-	.text-align-right-tablet {
-		text-align: end !important;
-	}
-}
-
-// Text wrapping behavior
-
-.text-wrap-pretty {
-	text-wrap: pretty !important;
-}
-
-// Line height
-
-.line-height-normal {
-	line-height: $line-height-normal;
-}
+// Font family
+
+.font-family-monospace {
+	font-family: $monospace-font-stack !important;
+	-moz-osx-font-smoothing: auto;
+	-webkit-font-smoothing: auto;
+}
+
+.font-family-quote {
+	font-family: $quote-font-stack !important;
+}
+
+// Heading sizes
+
+.font-size-h0 {
+	font-size: $font-size-0 !important;
+}
+
+.font-size-h1 {
+	font-size: $font-size-1 !important;
+}
+
+.font-size-h2 {
+	font-size: $font-size-2 !important;
+}
+
+.font-size-h3 {
+	font-size: $font-size-3 !important;
+}
+
+.font-size-h4 {
+	font-size: $font-size-4 !important;
+}
+
+.font-size-h5 {
+	font-size: $font-size-5 !important;
+}
+
+.font-size-h6 {
+	font-size: $font-size-6 !important;
+}
+
+@include tablet {
+	.font-size-h0-tablet {
+		font-size: $font-size-0 !important;
+	}
+
+	.font-size-h1-tablet {
+		font-size: $font-size-1 !important;
+	}
+
+	.font-size-h2-tablet {
+		font-size: $font-size-2 !important;
+	}
+
+	.font-size-h3-tablet {
+		font-size: $font-size-3 !important;
+	}
+
+	.font-size-h4-tablet {
+		font-size: $font-size-4 !important;
+	}
+
+	.font-size-h5-tablet {
+		font-size: $font-size-5 !important;
+	}
+
+	.font-size-h6-tablet {
+		font-size: $font-size-6 !important;
+	}
+}
+
+// Non-heading sizes
+
+.font-size-xl {
+	font-size: $font-size-5 !important;
+}
+
+.font-size-lg {
+	font-size: $font-size-6 !important;
+}
+
+.font-size-md {
+	font-size: $font-size-7 !important;
+}
+
+.font-size-sm {
+	font-size: $font-size-8 !important;
+}
+
+.font-size-xs {
+	font-size: $font-size-9 !important;
+}
+
+// Non-heading sizes
+
+@include tablet {
+	.font-size-xl-tablet {
+		font-size: $font-size-5 !important;
+	}
+
+	.font-size-lg-tablet {
+		font-size: $font-size-6 !important;
+	}
+
+	.font-size-md-tablet {
+		font-size: $font-size-7 !important;
+	}
+
+	.font-size-sm-tablet {
+		font-size: $font-size-8 !important;
+	}
+
+	.font-size-xs-tablet {
+		font-size: $font-size-9 !important;
+	}
+}
+
+// Weight
+
+.font-weight-light {
+	font-weight: $weight-light !important;
+}
+
+.font-weight-semilight {
+	font-weight: $weight-semilight !important;
+}
+
+.font-weight-normal {
+	font-weight: $weight-normal !important;
+}
+
+.font-weight-semibold {
+	font-weight: $weight-semibold !important;
+}
+
+.font-weight-bold {
+	font-weight: $weight-bold !important;
+}
+
+// Case
+
+.font-style-italic {
+	font-style: italic !important;
+}
+
+.text-decoration-underline {
+	text-decoration: underline !important;
+}
+
+.text-decoration-none {
+	text-decoration: none !important;
+}
+
+// Letter Spacing
+
+.letter-spacing-wide {
+	letter-spacing: $letter-spacing-wide !important;
+}
+
+.text-transform-uppercase {
+	text-transform: uppercase !important;
+}
+
+// Alignment
+
+.text-align-left {
+	text-align: start !important;
+}
+
+.text-align-center {
+	text-align: center !important;
+}
+
+.text-align-right {
+	text-align: end !important;
+}
+
+@include tablet {
+	.text-align-left-tablet {
+		text-align: start !important;
+	}
+
+	.text-align-center-tablet {
+		text-align: center !important;
+	}
+
+	.text-align-right-tablet {
+		text-align: end !important;
+	}
+}
+
+// Text wrapping behavior
+
+.text-wrap-pretty {
+	text-wrap: pretty !important;
+}
+
+// Line height
+
+.line-height-normal {
+	line-height: $line-height-normal;
+}

package/src/atomics/visually-hidden.scss

@@ -1,4 +1,4 @@
-.visually-hidden,
-::part(visually-hidden) {
-	@include visually-hidden();
-}
+.visually-hidden,
+::part(visually-hidden) {
+	@include visually-hidden();
+}

package/src/atomics/width.scss

@@ -1,44 +1,44 @@
-@use 'sass:list';
-
-$universal-widths: auto, 100, 150, 200, 250, 300, 350 !default;
-$mobile-incompatible-widths: 400, 450, 500, unset !default;
-$all-widths: list.join($universal-widths, $mobile-incompatible-widths);
-
-// widths
-
-.width-full {
-	width: 100% !important;
-}
-
-@each $width in $universal-widths {
-	$unit: if($width != auto, 'px', '');
-	.width-#{$width} {
-		width: #{$width}#{$unit} !important;
-	}
-}
-
-@include tablet {
-	.width-full-tablet {
-		width: 100% !important;
-	}
-
-	@each $width in $all-widths {
-		$unit: if($width != auto and $width != unset, 'px', '');
-		.width-#{$width}-tablet {
-			width: #{$width}#{$unit} !important;
-		}
-	}
-}
-
-@include desktop {
-	.width-full-desktop {
-		width: 100% !important;
-	}
-
-	@each $width in $all-widths {
-		$unit: if($width != auto and $width != unset, 'px', '');
-		.width-#{$width}-desktop {
-			width: #{$width}#{$unit} !important;
-		}
-	}
-}
+@use 'sass:list';
+
+$universal-widths: auto, 100, 150, 200, 250, 300, 350 !default;
+$mobile-incompatible-widths: 400, 450, 500, unset !default;
+$all-widths: list.join($universal-widths, $mobile-incompatible-widths);
+
+// widths
+
+.width-full {
+	width: 100% !important;
+}
+
+@each $width in $universal-widths {
+	$unit: if($width != auto, 'px', '');
+	.width-#{$width} {
+		width: #{$width}#{$unit} !important;
+	}
+}
+
+@include tablet {
+	.width-full-tablet {
+		width: 100% !important;
+	}
+
+	@each $width in $all-widths {
+		$unit: if($width != auto and $width != unset, 'px', '');
+		.width-#{$width}-tablet {
+			width: #{$width}#{$unit} !important;
+		}
+	}
+}
+
+@include desktop {
+	.width-full-desktop {
+		width: 100% !important;
+	}
+
+	@each $width in $all-widths {
+		$unit: if($width != auto and $width != unset, 'px', '');
+		.width-#{$width}-desktop {
+			width: #{$width}#{$unit} !important;
+		}
+	}
+}

package/src/components/README.md

@@ -1,69 +1,69 @@
-# Atlas CSS Components
-
-Each of the files in the `/components` folder (or subfolders) contain one Atlas component. Create new component when you have a complex layout that requires many helper classes to recreate.
-
-## Guidance
-
-There are a few things to think about when adding a new component, though none of them are strict rules.
-
-- File name should match the class of the component.
-- There should only be one top level class per file.
-- Subclasses (classes that to go inside the main class) are fine.
-- Modifier classes on the main class are also fine.
-- Seek to nest only two levels deep, three at most.
-
-## Direction
-
-When horizontal (inline) direction is important to a component, the user's text direction should be interpolated into the appropriate place(s). This guidance will be updated after Atlas moves to logical properties for direction related styles. See below for an example of how that is
-
-```scss
-.thing-with-side-border {
-	border-#{$user-left}: 1px solid magenta;
-}
-```
-
-## Class nomenclature within components
-
-The component name itself should be a noun or noun-phrase. Endeavor to choose the shortest applicable word or series of words that best describes the component. Modifiers on a particular component should contain the top level component within the class name. State based class modifiers will follow a different convention, and be prefixed with `is-`.
-
-Examples of state-targeting classes are:
-
-- `is-disabled`
-- `is-hovered`
-- `is-focused`
-
-## Sizes within class names
-
-Although we favor unabbreviated names in our design system, we've made one exception. This exception applies to both components and atomics, and it is in the use of sizes. We abbreviate size with at-least-two-letter t-shirt sizes. If it weren't for the terrible ergonomics of writing `extra-extra-large` then we'd likely have stuck to standard operating procudure here, but as George Orwell said in his final rule for clear writing, "Break any of these rules sooner than say anything outright barbarous."
-
-- extra extra small - xs
-- extra small - xs
-- small -> sm
-- large -> lg
-- extra large - xl
-- extra extra large - xl
-
-## Example
-
-```scss
-// main class
-.component {
-	[...]
-
-	&.component-sm {
-		[...]
-	}
-
-	&.component-lg {
-		[...]
-	}
-
-	.component-sub {
-		[...]
-	}
-
-	.component-sub-component {
-		[...]
-	}
-}
-```
+# Atlas CSS Components
+
+Each of the files in the `/components` folder (or subfolders) contain one Atlas component. Create new component when you have a complex layout that requires many helper classes to recreate.
+
+## Guidance
+
+There are a few things to think about when adding a new component, though none of them are strict rules.
+
+- File name should match the class of the component.
+- There should only be one top level class per file.
+- Subclasses (classes that to go inside the main class) are fine.
+- Modifier classes on the main class are also fine.
+- Seek to nest only two levels deep, three at most.
+
+## Direction
+
+When horizontal (inline) direction is important to a component, the user's text direction should be interpolated into the appropriate place(s). This guidance will be updated after Atlas moves to logical properties for direction related styles. See below for an example of how that is
+
+```scss
+.thing-with-side-border {
+	border-#{$user-left}: 1px solid magenta;
+}
+```
+
+## Class nomenclature within components
+
+The component name itself should be a noun or noun-phrase. Endeavor to choose the shortest applicable word or series of words that best describes the component. Modifiers on a particular component should contain the top level component within the class name. State based class modifiers will follow a different convention, and be prefixed with `is-`.
+
+Examples of state-targeting classes are:
+
+- `is-disabled`
+- `is-hovered`
+- `is-focused`
+
+## Sizes within class names
+
+Although we favor unabbreviated names in our design system, we've made one exception. This exception applies to both components and atomics, and it is in the use of sizes. We abbreviate size with at-least-two-letter t-shirt sizes. If it weren't for the terrible ergonomics of writing `extra-extra-large` then we'd likely have stuck to standard operating procudure here, but as George Orwell said in his final rule for clear writing, "Break any of these rules sooner than say anything outright barbarous."
+
+- extra extra small - xs
+- extra small - xs
+- small -> sm
+- large -> lg
+- extra large - xl
+- extra extra large - xl
+
+## Example
+
+```scss
+// main class
+.component {
+	[...]
+
+	&.component-sm {
+		[...]
+	}
+
+	&.component-lg {
+		[...]
+	}
+
+	.component-sub {
+		[...]
+	}
+
+	.component-sub-component {
+		[...]
+	}
+}
+```