@microsoft/atlas-css 1.2.0 → 1.3.0

package/package.json

@@ -1,57 +1,57 @@
-{
-	"name": "@microsoft/atlas-css",
-	"version": "1.2.0",
-	"main": "dist/index.css",
-	"source": "src/index.scss",
-	"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 --no-autoinstall",
-		"build": "npm run build:css && npm run tokens",
-		"build:css": "parcel build src/index.scss --no-cache --no-autoinstall",
-		"tokens": "node ./tokens/index.js",
-		"prepublishOnly": "npm run lint && npm run build"
-	},
-	"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"
-	],
-	"author": "Microsoft Corporation",
-	"license": "MIT",
-	"dependencies": {
-		"minireset.css": "^0.0.7",
-		"normalize.css": "^8.0.1"
-	},
-	"devDependencies": {
-		"parcel": "2.0.0-beta.3.1",
-		"@parcel/transformer-sass": "2.0.0-beta.3.1",
-		"@microsoft/stylelint-config-atlas": "3.0.0",
-		"prettier": "^2.2.1",
-		"sass": "^1.32.8",
-		"stylelint": "^13.11.0",
-		"stylelint-config-prettier": "^8.0.2",
-		"eslint-plugin-security": "^1.4.0",
-		"stylelint-prettier": "^1.1.2",
-		"fs-extra": "^9.1.0",
-		"quicktype-core": "^6.0.70",
-		"sass-export": "^2.1.0"
-	}
-}
+{
+	"name": "@microsoft/atlas-css",
+	"version": "1.3.0",
+	"main": "dist/index.css",
+	"source": "src/index.scss",
+	"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 --no-autoinstall",
+		"build": "npm run build:css && npm run tokens",
+		"build:css": "parcel build src/index.scss --no-cache --no-autoinstall",
+		"tokens": "node ./tokens/index.js",
+		"prepublishOnly": "npm run lint && npm run build"
+	},
+	"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"
+	],
+	"author": "Microsoft Corporation",
+	"license": "MIT",
+	"dependencies": {
+		"minireset.css": "^0.0.7",
+		"normalize.css": "^8.0.1"
+	},
+	"devDependencies": {
+		"parcel": "2.0.0-beta.3.1",
+		"@parcel/transformer-sass": "2.0.0-beta.3.1",
+		"@microsoft/stylelint-config-atlas": "3.0.0",
+		"prettier": "^2.2.1",
+		"sass": "^1.32.8",
+		"stylelint": "^13.11.0",
+		"stylelint-config-prettier": "^8.0.2",
+		"eslint-plugin-security": "^1.4.0",
+		"stylelint-prettier": "^1.1.2",
+		"fs-extra": "^9.1.0",
+		"quicktype-core": "^6.0.70",
+		"sass-export": "^2.1.0"
+	}
+}

package/src/atomics/README.md

@@ -1,54 +1,54 @@
-# 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-l`);
-- color (ex. `.color-primary`)
-- typography (ex. `.font-size-m`);
-- 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 property values are straightfoward (they just match the CSS property), 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 number value with a particular unit is involved, that value is typically represented as a t-shirt size.
-   - Spacing and non-heading typography values follow this convention, as in `xs, s, m, l, xl, xxl` in `margin-top-xl`, and `font-size-m`.
-   - Within a set of values that require units such as the one above, 0 is represented by the string `none`.
-4. 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`.
-5. 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 inifinity.
-
-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-l`);
+- color (ex. `.color-primary`)
+- typography (ex. `.font-size-m`);
+- 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 property values are straightfoward (they just match the CSS property), 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 number value with a particular unit is involved, that value is typically represented as a t-shirt size.
+   - Spacing and non-heading typography values follow this convention, as in `xs, s, m, l, xl, xxl` in `margin-top-xl`, and `font-size-m`.
+   - Within a set of values that require units such as the one above, 0 is represented by the string `none`.
+4. 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`.
+5. 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 inifinity.
+
+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/border.scss

@@ -1,56 +1,56 @@
-.border {
-	border: $border-width solid $border !important;
-}
-
-.border-none {
-	border: none !important;
-}
-
-// Rules for each side
-@each $border-key, $direction in $directions {
-	.border-#{$border-key} {
-		border-#{$direction}: $border-width solid $border !important;
-	}
-
-	.border-#{$border-key}-none {
-		border-#{$direction}: 0 !important;
-	}
-}
-
-@include tablet {
-	.border-tablet {
-		border: $border-width solid $border !important;
-	}
-
-	.border-none-tablet {
-		border: none !important;
-	}
-
-	// Rules for each side
-	@each $border-key, $direction in $directions {
-		.border-#{$border-key}-tablet {
-			border-#{$direction}: $border-width solid $border !important;
-		}
-
-		.border-#{$border-key}-none-tablet {
-			border-#{$direction}: 0 !important;
-		}
-	}
-}
-
-// Modifiers
-.border-high-contrast {
-	border: $border-width solid $border-white-high-contrast !important;
-
-	&-hover:hover {
-		border: $border-width solid $border-yellow-high-contrast !important;
-	}
-}
-
-.border-radius {
-	border-radius: $border-radius !important;
-}
-
-.border-radius-l {
-	border-radius: $border-radius-large !important;
-}
+.border {
+	border: $border-width solid $border !important;
+}
+
+.border-none {
+	border: none !important;
+}
+
+// Rules for each side
+@each $border-key, $direction in $directions {
+	.border-#{$border-key} {
+		border-#{$direction}: $border-width solid $border !important;
+	}
+
+	.border-#{$border-key}-none {
+		border-#{$direction}: 0 !important;
+	}
+}
+
+@include tablet {
+	.border-tablet {
+		border: $border-width solid $border !important;
+	}
+
+	.border-none-tablet {
+		border: none !important;
+	}
+
+	// Rules for each side
+	@each $border-key, $direction in $directions {
+		.border-#{$border-key}-tablet {
+			border-#{$direction}: $border-width solid $border !important;
+		}
+
+		.border-#{$border-key}-none-tablet {
+			border-#{$direction}: 0 !important;
+		}
+	}
+}
+
+// Modifiers
+.border-high-contrast {
+	border: $border-width solid $border-white-high-contrast !important;
+
+	&-hover:hover {
+		border: $border-width solid $border-yellow-high-contrast !important;
+	}
+}
+
+.border-radius {
+	border-radius: $border-radius !important;
+}
+
+.border-radius-l {
+	border-radius: $border-radius-large !important;
+}

package/src/atomics/colors.scss

@@ -1,166 +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;
-	}
-}
-
-// 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;
-}
+// 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;
+}