@microsoft/atlas-css 3.42.1 → 3.44.0

package/package.json

@@ -1,91 +1,91 @@
-{
-	"name": "@microsoft/atlas-css",
-	"version": "3.42.1",
-	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"lint": "stylelint \"./src/**/*.scss\"",
-		"lint-fix": "stylelint \"./src/**/*.scss\" --fix",
-		"start": "parcel watch src/index.scss",
-		"build": "npm run build:css && npm run tokens && npm run class-names",
-		"build:css": "wireit",
-		"tokens": "wireit",
-		"class-names": "wireit",
-		"prepublishOnly": "npm run lint && npm run build"
-	},
-	"wireit": {
-		"build:css": {
-			"command": "parcel build src/index.scss --no-cache",
-			"files": [
-				"./src/**/*.scss"
-			],
-			"output": [
-				"./dist/**/*.css"
-			]
-		},
-		"tokens": {
-			"command": "node ./tokens/index.js",
-			"files": [
-				"./tokens/index.js",
-				"./src/tokens/**/*.scss"
-			],
-			"output": [
-				"./dist/tokens.json",
-				"./dist/tokens.ts"
-			]
-		},
-		"class-names": {
-			"command": "node ./class-names/index.js",
-			"files": [
-				"./class-names/index.js",
-				"./dist/index.css"
-			],
-			"dependencies": [
-				"build:css",
-				"tokens"
-			]
-		}
-	},
-	"homepage": "https://github.com/microsoft/atlas-design",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/microsoft/atlas-design"
-	},
-	"publishConfig": {
-		"registry": "https://registry.npmjs.org"
-	},
-	"files": [
-		"dist",
-		"src",
-		"tokens"
-	],
-	"keywords": [
-		"microsoft",
-		"atlas",
-		"design-system",
-		"css",
-		"scss"
-	],
-	"resolutions": {
-		"sass": "grass"
-	},
-	"author": "Microsoft Corporation",
-	"license": "MIT",
-	"devDependencies": {
-		"@microsoft/stylelint-config-atlas": "4.1.0",
-		"@parcel/transformer-sass": "^2.11.0",
-		"css-tree": "^2.3.1",
-		"eslint-plugin-security": "^1.7.1",
-		"fs-extra": "^11.1.1",
-		"parcel": "^2.11.0",
-		"lightningcss": "1.21.1",
-		"prettier": "^2.8.8",
-		"quicktype-core": "^23.0.48",
-		"grass": "^1.0.2",
-		"sass-export": "^2.1.2",
-		"stylelint": "^15.9.0",
-		"stylelint-config-prettier": "^9.0.5",
-		"stylelint-prettier": "^3.0.0",
-		"wireit": "^0.9.5"
-	}
-}
+{
+	"name": "@microsoft/atlas-css",
+	"version": "3.44.0",
+	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"lint": "stylelint \"./src/**/*.scss\"",
+		"lint-fix": "stylelint \"./src/**/*.scss\" --fix",
+		"start": "parcel watch src/index.scss",
+		"build": "npm run build:css && npm run tokens && npm run class-names",
+		"build:css": "wireit",
+		"tokens": "wireit",
+		"class-names": "wireit",
+		"prepublishOnly": "npm run lint && npm run build"
+	},
+	"wireit": {
+		"build:css": {
+			"command": "parcel build src/index.scss --no-cache",
+			"files": [
+				"./src/**/*.scss"
+			],
+			"output": [
+				"./dist/**/*.css"
+			]
+		},
+		"tokens": {
+			"command": "node ./tokens/index.js",
+			"files": [
+				"./tokens/index.js",
+				"./src/tokens/**/*.scss"
+			],
+			"output": [
+				"./dist/tokens.json",
+				"./dist/tokens.ts"
+			]
+		},
+		"class-names": {
+			"command": "node ./class-names/index.js",
+			"files": [
+				"./class-names/index.js",
+				"./dist/index.css"
+			],
+			"dependencies": [
+				"build:css",
+				"tokens"
+			]
+		}
+	},
+	"homepage": "https://github.com/microsoft/atlas-design",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/microsoft/atlas-design"
+	},
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org"
+	},
+	"files": [
+		"dist",
+		"src",
+		"tokens"
+	],
+	"keywords": [
+		"microsoft",
+		"atlas",
+		"design-system",
+		"css",
+		"scss"
+	],
+	"resolutions": {
+		"sass": "grass"
+	},
+	"author": "Microsoft Corporation",
+	"license": "MIT",
+	"devDependencies": {
+		"@microsoft/stylelint-config-atlas": "4.1.0",
+		"@parcel/transformer-sass": "^2.12.0",
+		"css-tree": "^2.3.1",
+		"eslint-plugin-security": "^1.7.1",
+		"fs-extra": "^11.1.1",
+		"parcel": "^2.12.0",
+		"lightningcss": "^1.25.1",
+		"prettier": "^2.8.8",
+		"quicktype-core": "^23.0.48",
+		"grass": "^1.0.2",
+		"sass-export": "^2.1.2",
+		"stylelint": "^15.9.0",
+		"stylelint-config-prettier": "^9.0.5",
+		"stylelint-prettier": "^3.0.0",
+		"wireit": "^0.9.5"
+	}
+}

package/src/atomics/README.md

@@ -1,56 +1,56 @@
-# Atlas Atomics
-
-Welcome to Atomics ⚛! These are small, single purpose, CSS classes that can be used to compose great things. Visit this article for a [longer definition of Atomic CSS here](https://css-tricks.com/lets-define-exactly-atomic-css/).
-
-## Categories of classes
-
-Most of our classes fall into one of several categories. Those that affect ...
-
-- display (ex. `.display-inline-flex`)
-- spacing (ex. `.margin-inline-lg`);
-- color (ex. `.color-primary`)
-- typography (ex. `.font-size-md`);
-- flex properties (ex. `.justify-content-center`)
-- and more ...
-
-## Naming patterns
-
-All of our atomic classes try to follow the same pattern.
-
-```txt
-.<css-property-name>-<value>
-// or
-.<css-property-name>-<value>-<screensize>
-```
-
-## CSS Property Values
-
-The first part of nearly every Atomic class represent the css property that it will modify. For example, `display` in the class `.display-flex` matches the property value from the corresponding css rule `display: flex;`. We hope this will provide a clear and easily intuited pattern for our Atomics and encourage everyone to learn the fundamentals of CSS.
-
-## Values
-
-While CSS properties are straightfoward (they just match the CSS), the value property is not always as easy to guess. We have a few rules that help us figure out how to write values in class names.
-
-1. When the CSS value is a string (such as `flex-end` in `justify-content: flex-end`, or `grid` in `display: grid;`) then we just use that string directly (meaning these classes become `.justify-content-flex-end` and `.display-grid`).
-2. In some cases, such as themed colors values, values are associated concepts.
-   - Such as `primary` in the class `.color-primary`. (The `primary` is blue on light theme and yellow on high contrast theme.)
-   - Such as `semibold` in the class `font-weight-semibold`.
-3. When a value refers to a pixel value is involved we will just write out the number.
-   - Some width based classes use this approach. `width-100` means `width: 100px`.
-4. When a em/rem value is involved, that value is typically represented as an at-least-two-letter-t-shirt size.
-   - Spacing and non-heading typography values follow this convention, as in `xs, sm, md, lg, xl, xxl` in `margin-top-xl`, and `font-size-md`.
-   - Within a set of values that require units such as the one above, 0 is represented by the string `none`.
-5. Within a series of values that are all unitless numbers, those numbers are used directly, as in `flex-grow: 1;` being represented by `flex-grow-1`.
-6. When a shorthand property's value is multi-part, we choose a reasonable default and omit the value completely.
-   - In the case `border: 1px solid $border` the class becomes simply `.border`.
-   - In this case further modification would still be available.
-
-## Screen sizes
-
-Screen sizes are represented by one of the following strings:
-
-- `tablet`, representing screens tablet and larger.
-- `desktop`, representing screen desktop width and larger.
-- `widescreen`, representing very wide screens to infinity.
-
-Use a mobile first approach when using Atomics, including the universally applicable class (i.e. the one that does not have a screensize at the end), and when necessary overwrite its values on larger screens.
+# Atlas Atomics
+
+Welcome to Atomics ⚛! These are small, single purpose, CSS classes that can be used to compose great things. Visit this article for a [longer definition of Atomic CSS here](https://css-tricks.com/lets-define-exactly-atomic-css/).
+
+## Categories of classes
+
+Most of our classes fall into one of several categories. Those that affect ...
+
+- display (ex. `.display-inline-flex`)
+- spacing (ex. `.margin-inline-lg`);
+- color (ex. `.color-primary`)
+- typography (ex. `.font-size-md`);
+- flex properties (ex. `.justify-content-center`)
+- and more ...
+
+## Naming patterns
+
+All of our atomic classes try to follow the same pattern.
+
+```txt
+.<css-property-name>-<value>
+// or
+.<css-property-name>-<value>-<screensize>
+```
+
+## CSS Property Values
+
+The first part of nearly every Atomic class represent the css property that it will modify. For example, `display` in the class `.display-flex` matches the property value from the corresponding css rule `display: flex;`. We hope this will provide a clear and easily intuited pattern for our Atomics and encourage everyone to learn the fundamentals of CSS.
+
+## Values
+
+While CSS properties are straightfoward (they just match the CSS), the value property is not always as easy to guess. We have a few rules that help us figure out how to write values in class names.
+
+1. When the CSS value is a string (such as `flex-end` in `justify-content: flex-end`, or `grid` in `display: grid;`) then we just use that string directly (meaning these classes become `.justify-content-flex-end` and `.display-grid`).
+2. In some cases, such as themed colors values, values are associated concepts.
+   - Such as `primary` in the class `.color-primary`. (The `primary` is blue on light theme and yellow on high contrast theme.)
+   - Such as `semibold` in the class `font-weight-semibold`.
+3. When a value refers to a pixel value is involved we will just write out the number.
+   - Some width based classes use this approach. `width-100` means `width: 100px`.
+4. When a em/rem value is involved, that value is typically represented as an at-least-two-letter-t-shirt size.
+   - Spacing and non-heading typography values follow this convention, as in `xs, sm, md, lg, xl, xxl` in `margin-top-xl`, and `font-size-md`.
+   - Within a set of values that require units such as the one above, 0 is represented by the string `none`.
+5. Within a series of values that are all unitless numbers, those numbers are used directly, as in `flex-grow: 1;` being represented by `flex-grow-1`.
+6. When a shorthand property's value is multi-part, we choose a reasonable default and omit the value completely.
+   - In the case `border: 1px solid $border` the class becomes simply `.border`.
+   - In this case further modification would still be available.
+
+## Screen sizes
+
+Screen sizes are represented by one of the following strings:
+
+- `tablet`, representing screens tablet and larger.
+- `desktop`, representing screen desktop width and larger.
+- `widescreen`, representing very wide screens to infinity.
+
+Use a mobile first approach when using Atomics, including the universally applicable class (i.e. the one that does not have a screensize at the end), and when necessary overwrite its values on larger screens.

package/src/atomics/aspect-ratio.scss

@@ -1,13 +1,13 @@
-$aspect-ratios: (
-	'1-1': '1 / 1',
-	'2-1': '2 / 1',
-	'4-3': '4 / 3',
-	'9-16': '9 / 16',
-	'16-9': '16 / 9'
-) !default;
-
-@each $name, $ratio in $aspect-ratios {
-	.aspect-ratio-#{$name} {
-		aspect-ratio: #{$ratio} !important;
-	}
-}
+$aspect-ratios: (
+	'1-1': '1 / 1',
+	'2-1': '2 / 1',
+	'4-3': '4 / 3',
+	'9-16': '9 / 16',
+	'16-9': '16 / 9'
+) !default;
+
+@each $name, $ratio in $aspect-ratios {
+	.aspect-ratio-#{$name} {
+		aspect-ratio: #{$ratio} !important;
+	}
+}

package/src/atomics/background.scss

@@ -1,11 +1,11 @@
-$background-sizes: 100, 200 !default;
-
-@each $size in $background-sizes {
-	.background-size-#{$size} {
-		background-size: #{$size}px;
-	}
-}
-
-.background-image-pattern {
-	background-image: var(--background-image-pattern);
-}
+$background-sizes: 100, 200 !default;
+
+@each $size in $background-sizes {
+	.background-size-#{$size} {
+		background-size: #{$size}px;
+	}
+}
+
+.background-image-pattern {
+	background-image: var(--background-image-pattern);
+}

package/src/atomics/border.scss

@@ -1,113 +1,113 @@
-.border {
-	border: $border-width solid $border !important;
-}
-
-.border-md {
-	border: $border-width-md solid $border !important;
-}
-
-.border-lg {
-	border: $border-width-lg solid $border !important;
-}
-
-.border-none {
-	border: none !important;
-}
-
-// Rules for each side
-
-@each $border-key, $direction in $logical-directions {
-	.border-#{$border-key} {
-		border-#{$direction}: $border-width solid $border !important;
-	}
-
-	.border-#{$border-key}-md {
-		border-#{$direction}: $border-width-md solid $border !important;
-	}
-
-	.border-#{$border-key}-lg {
-		border-#{$direction}: $border-width-lg solid $border !important;
-	}
-
-	.border-#{$border-key}-none {
-		border-#{$direction}: 0 !important;
-	}
-}
-
-@include tablet {
-	.border-tablet {
-		border: $border-width solid $border !important;
-	}
-
-	.border-md-tablet {
-		border: $border-width-md solid $border !important;
-	}
-
-	.border-lg-tablet {
-		border: $border-width-lg solid $border !important;
-	}
-
-	.border-none-tablet {
-		border: none !important;
-	}
-
-	// Rules for each side
-
-	@each $border-key, $direction in $logical-directions {
-		.border-#{$border-key}-tablet {
-			border-#{$direction}: $border-width solid $border !important;
-		}
-
-		.border-#{$border-key}-md-tablet {
-			border-#{$direction}: $border-width-md solid $border !important;
-		}
-
-		.border-#{$border-key}-lg-tablet {
-			border-#{$direction}: $border-width-lg solid $border !important;
-		}
-
-		.border-#{$border-key}-none-tablet {
-			border-#{$direction}: 0 !important;
-		}
-	}
-}
-
-// Radius
-
-.border-radius-sm {
-	border-radius: $border-radius-sm !important;
-}
-
-.border-radius {
-	border-radius: $border-radius !important;
-}
-
-.border-radius-lg {
-	border-radius: $border-radius-lg !important;
-}
-
-.border-radius-rounded {
-	border-radius: $border-radius-rounded !important;
-}
-
-// Colors
-
-@each $name, $color-set in $colors {
-	$base: nth($color-set, $color-index-base);
-
-	.border-color-#{$name} {
-		border-color: $base !important;
-	}
-}
-
-.border-color-accent {
-	border-color: $border-accent !important;
-}
-
-.border-high-contrast {
-	border: $border-width solid $border-white-high-contrast !important;
-
-	&-hover:hover {
-		border: $border-width solid $border-yellow-high-contrast !important;
-	}
-}
+.border {
+	border: $border-width solid $border !important;
+}
+
+.border-md {
+	border: $border-width-md solid $border !important;
+}
+
+.border-lg {
+	border: $border-width-lg solid $border !important;
+}
+
+.border-none {
+	border: none !important;
+}
+
+// Rules for each side
+
+@each $border-key, $direction in $logical-directions {
+	.border-#{$border-key} {
+		border-#{$direction}: $border-width solid $border !important;
+	}
+
+	.border-#{$border-key}-md {
+		border-#{$direction}: $border-width-md solid $border !important;
+	}
+
+	.border-#{$border-key}-lg {
+		border-#{$direction}: $border-width-lg solid $border !important;
+	}
+
+	.border-#{$border-key}-none {
+		border-#{$direction}: 0 !important;
+	}
+}
+
+@include tablet {
+	.border-tablet {
+		border: $border-width solid $border !important;
+	}
+
+	.border-md-tablet {
+		border: $border-width-md solid $border !important;
+	}
+
+	.border-lg-tablet {
+		border: $border-width-lg solid $border !important;
+	}
+
+	.border-none-tablet {
+		border: none !important;
+	}
+
+	// Rules for each side
+
+	@each $border-key, $direction in $logical-directions {
+		.border-#{$border-key}-tablet {
+			border-#{$direction}: $border-width solid $border !important;
+		}
+
+		.border-#{$border-key}-md-tablet {
+			border-#{$direction}: $border-width-md solid $border !important;
+		}
+
+		.border-#{$border-key}-lg-tablet {
+			border-#{$direction}: $border-width-lg solid $border !important;
+		}
+
+		.border-#{$border-key}-none-tablet {
+			border-#{$direction}: 0 !important;
+		}
+	}
+}
+
+// Radius
+
+.border-radius-sm {
+	border-radius: $border-radius-sm !important;
+}
+
+.border-radius {
+	border-radius: $border-radius !important;
+}
+
+.border-radius-lg {
+	border-radius: $border-radius-lg !important;
+}
+
+.border-radius-rounded {
+	border-radius: $border-radius-rounded !important;
+}
+
+// Colors
+
+@each $name, $color-set in $colors {
+	$base: nth($color-set, $color-index-base);
+
+	.border-color-#{$name} {
+		border-color: $base !important;
+	}
+}
+
+.border-color-accent {
+	border-color: $border-accent !important;
+}
+
+.border-high-contrast {
+	border: $border-width solid $border-white-high-contrast !important;
+
+	&-hover:hover {
+		border: $border-width solid $border-yellow-high-contrast !important;
+	}
+}