@microsoft/atlas-css 3.8.2 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.8.2",
+	"version": "3.9.0",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

package/src/atomics/README.md

@@ -35,11 +35,13 @@ While CSS properties are straightfoward (they just match the CSS), the value pro
 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 an at-least-two-letter-t-shirt size.
+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`.
-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.
+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.
 

package/src/atomics/index.scss

@@ -11,3 +11,4 @@
 @import './line-clamp.scss';
 @import './image.scss';
 @import './list.scss';
+@import './width.scss';

package/src/atomics/width.scss

@@ -0,0 +1,44 @@
+@use 'sass:list';
+
+$universal-widths: auto, 100, 150, 200, 250, 300, 350 !default;
+$mobile-incompatible-widths: 400, 450, 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/checkbox.scss

@@ -0,0 +1,114 @@
+/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
+
+$checkbox-border-radius: $radius-sm !default;
+$checkbox-border-width: 0.0625em !default;
+$checkbox-unchecked-border-color: $text !default;
+$checkbox-color: $primary !default;
+$checkbox-check-color: $primary-invert !default;
+$checkbox-check-hover-color: $text-subtle !default;
+$checkbox-size: 1.25em !default;
+$checkbox-check-height: 0.75em !default;
+$checkbox-check-top: 0.125em !default;
+$checkbox-check-width: 0.3125em !default;
+$checkbox-check-thickness: 0.0625em !default;
+$checkbox-timing-function: $input-timing-function !default;
+$checkbox-duration: $input-transition-duration !default;
+$checkbox-spacing: $spacer-3 !default;
+
+@mixin checkmark {
+	display: block;
+	position: absolute;
+	inset-block-start: $checkbox-check-top;
+	width: $checkbox-check-width;
+	height: $checkbox-check-height;
+	transform: rotate(45deg);
+	border: solid $checkbox-check-hover-color;
+	border-width: 0 $checkbox-check-thickness $checkbox-check-thickness 0;
+	content: '';
+}
+
+.checkbox {
+	display: flex;
+	position: relative;
+	align-items: center;
+	line-height: 1.25;
+	cursor: pointer;
+
+	.checkbox-check {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		width: $checkbox-size;
+		height: $checkbox-size;
+		transition-duration: $checkbox-duration;
+		transition-property: background, border, border-color;
+		transition-timing-function: $checkbox-timing-function;
+		border: $checkbox-border-width solid $checkbox-unchecked-border-color;
+		border-radius: $checkbox-border-radius;
+
+		&:not(:last-child) {
+			margin-inline-end: 0.5rem;
+		}
+
+		&::before {
+			content: '\0020';
+		}
+	}
+
+	&:hover .checkbox-check::before {
+		@include checkmark;
+	}
+
+	&.checkbox-sm {
+		font-size: $font-size-8;
+	}
+
+	input[type='checkbox'] {
+		@include visually-hidden();
+
+		&:focus-visible + .checkbox-check {
+			@extend %focus;
+		}
+
+		&:checked + .checkbox-check {
+			border-color: $checkbox-color;
+			background-color: $checkbox-color;
+
+			&::before {
+				@include checkmark;
+
+				border-color: $checkbox-check-color;
+			}
+		}
+
+		&[disabled] + .checkbox-check {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+	}
+
+	&.checkbox-muted {
+		input[type='checkbox'] {
+			&:checked + .checkbox-check {
+				border-color: $text-subtle;
+				background-color: $text-subtle;
+
+				&::before {
+					border-color: $text-invert;
+				}
+			}
+		}
+	}
+
+	.checkbox-check.is-checked {
+		border-color: $checkbox-color;
+		background-color: $checkbox-color;
+
+		&::before {
+			@include checkmark;
+
+			border-color: $checkbox-check-color;
+		}
+	}
+}

package/src/components/index.scss

@@ -2,6 +2,7 @@
 @import './button.scss';
 @import './buttons.scss';
 @import './button-reset.scss';
+@import './checkbox.scss';
 @import './link-button.scss';
 @import './markdown.scss'; // must be ordered after code-block
 @import './icon.scss';

package/src/core/bare-elements.scss

@@ -1,5 +1,6 @@
 // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
 
+details,
 details > * {
-	box-sizing: border-box;
+	box-sizing: border-box !important;
 }

package/src/mixins/index.scss

@@ -7,3 +7,4 @@
 @import './font-size.scss';
 @import './transparency.scss';
 @import './unselectable.scss';
+@import './visually-hidden.scss';

package/src/mixins/visually-hidden.scss

@@ -0,0 +1,12 @@
+@mixin visually-hidden() {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	word-wrap: normal;
+}