@microsoft/atlas-css 3.29.0 → 3.31.0

package/dist/tokens.ts

@@ -421,11 +421,25 @@ export class Convert {
     }
 }
 
-function invalidValue(typ: any, val: any, key: any = ''): never {
-    if (key) {
-        throw Error(`Invalid value for key "${key}". Expected type ${JSON.stringify(typ)} but got ${JSON.stringify(val)}`);
+function invalidValue(typ: any, val: any, key: any, parent: any = ''): never {
+    const prettyTyp = prettyTypeName(typ);
+    const parentText = parent ? ` on ${parent}` : '';
+    const keyText = key ? ` for key "${key}"` : '';
+    throw Error(`Invalid value${keyText}${parentText}. Expected ${prettyTyp} but got ${JSON.stringify(val)}`);
+}
+
+function prettyTypeName(typ: any): string {
+    if (Array.isArray(typ)) {
+        if (typ.length === 2 && typ[0] === undefined) {
+            return `an optional ${prettyTypeName(typ[1])}`;
+        } else {
+            return `one of [${typ.map(a => { return prettyTypeName(a); }).join(", ")}]`;
+        }
+    } else if (typeof typ === "object" && typ.literal !== undefined) {
+        return typ.literal;
+    } else {
+        return typeof typ;
     }
-    throw Error(`Invalid value ${JSON.stringify(val)} for type ${JSON.stringify(typ)}`, );
 }
 
 function jsonToJSProps(typ: any): any {
@@ -446,10 +460,10 @@ function jsToJSONProps(typ: any): any {
     return typ.jsToJSON;
 }
 
-function transform(val: any, typ: any, getProps: any, key: any = ''): any {
+function transform(val: any, typ: any, getProps: any, key: any = '', parent: any = ''): any {
     function transformPrimitive(typ: string, val: any): any {
         if (typeof typ === typeof val) return val;
-        return invalidValue(typ, val, key);
+        return invalidValue(typ, val, key, parent);
     }
 
     function transformUnion(typs: any[], val: any): any {
@@ -461,17 +475,17 @@ function transform(val: any, typ: any, getProps: any, key: any = ''): any {
                 return transform(val, typ, getProps);
             } catch (_) {}
         }
-        return invalidValue(typs, val);
+        return invalidValue(typs, val, key, parent);
     }
 
     function transformEnum(cases: string[], val: any): any {
         if (cases.indexOf(val) !== -1) return val;
-        return invalidValue(cases, val);
+        return invalidValue(cases.map(a => { return l(a); }), val, key, parent);
     }
 
     function transformArray(typ: any, val: any): any {
         // val must be an array with no invalid elements
-        if (!Array.isArray(val)) return invalidValue("array", val);
+        if (!Array.isArray(val)) return invalidValue(l("array"), val, key, parent);
         return val.map(el => transform(el, typ, getProps));
     }
 
@@ -481,24 +495,24 @@ function transform(val: any, typ: any, getProps: any, key: any = ''): any {
         }
         const d = new Date(val);
         if (isNaN(d.valueOf())) {
-            return invalidValue("Date", val);
+            return invalidValue(l("Date"), val, key, parent);
         }
         return d;
     }
 
     function transformObject(props: { [k: string]: any }, additional: any, val: any): any {
         if (val === null || typeof val !== "object" || Array.isArray(val)) {
-            return invalidValue("object", val);
+            return invalidValue(l(ref || "object"), val, key, parent);
         }
         const result: any = {};
         Object.getOwnPropertyNames(props).forEach(key => {
             const prop = props[key];
             const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined;
-            result[prop.key] = transform(v, prop.typ, getProps, prop.key);
+            result[prop.key] = transform(v, prop.typ, getProps, key, ref);
         });
         Object.getOwnPropertyNames(val).forEach(key => {
             if (!Object.prototype.hasOwnProperty.call(props, key)) {
-                result[key] = transform(val[key], additional, getProps, key);
+                result[key] = transform(val[key], additional, getProps, key, ref);
             }
         });
         return result;
@@ -507,10 +521,12 @@ function transform(val: any, typ: any, getProps: any, key: any = ''): any {
     if (typ === "any") return val;
     if (typ === null) {
         if (val === null) return val;
-        return invalidValue(typ, val);
+        return invalidValue(typ, val, key, parent);
     }
-    if (typ === false) return invalidValue(typ, val);
+    if (typ === false) return invalidValue(typ, val, key, parent);
+    let ref: any = undefined;
     while (typeof typ === "object" && typ.ref !== undefined) {
+        ref = typ.ref;
         typ = typeMap[typ.ref];
     }
     if (Array.isArray(typ)) return transformEnum(typ, val);
@@ -518,7 +534,7 @@ function transform(val: any, typ: any, getProps: any, key: any = ''): any {
         return typ.hasOwnProperty("unionMembers") ? transformUnion(typ.unionMembers, val)
             : typ.hasOwnProperty("arrayItems")    ? transformArray(typ.arrayItems, val)
             : typ.hasOwnProperty("props")         ? transformObject(getProps(typ), typ.additional, val)
-            : invalidValue(typ, val);
+            : invalidValue(typ, val, key, parent);
     }
     // Numbers can be parsed by Date but shouldn't be.
     if (typ === Date && typeof val !== "number") return transformDate(val);
@@ -533,6 +549,10 @@ function uncast<T>(val: T, typ: any): any {
     return transform(val, typ, jsToJSONProps);
 }
 
+function l(typ: any) {
+    return { literal: typ };
+}
+
 function a(typ: any) {
     return { arrayItems: typ };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.29.0",
+	"version": "3.31.0",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -73,19 +73,19 @@
 	"license": "MIT",
 	"devDependencies": {
 		"@microsoft/stylelint-config-atlas": "4.0.2",
-		"@parcel/transformer-sass": "^2.7.0",
-		"css-tree": "^2.2.1",
-		"eslint-plugin-security": "^1.5.0",
-		"fs-extra": "^10.1.0",
-		"parcel": "^2.7.0",
-		"lightningcss": "1.16.0",
-		"prettier": "^2.7.1",
-		"quicktype-core": "^6.0.62",
+		"@parcel/transformer-sass": "^2.8.3",
+		"css-tree": "^2.3.1",
+		"eslint-plugin-security": "^1.7.1",
+		"fs-extra": "^11.1.1",
+		"parcel": "^2.8.3",
+		"lightningcss": "1.19.0",
+		"prettier": "^2.8.7",
+		"quicktype-core": "^23.0.19",
 		"grass": "^1.0.2",
 		"sass-export": "^2.1.2",
-		"stylelint": "^14.13.0",
-		"stylelint-config-prettier": "^9.0.3",
-		"stylelint-prettier": "^2.0.0",
+		"stylelint": "^14.16.1",
+		"stylelint-config-prettier": "^9.0.5",
+		"stylelint-prettier": "^3.0.0",
 		"wireit": "^0.9.5"
 	}
 }

package/src/atomics/typography.scss

@@ -164,6 +164,10 @@
 
 // Alignment
 
+.text-align-left {
+	text-align: start !important;
+}
+
 .text-align-center {
 	text-align: center !important;
 }
@@ -173,6 +177,10 @@
 }
 
 @include tablet {
+	.text-align-left-tablet {
+		text-align: start !important;
+	}
+
 	.text-align-center-tablet {
 		text-align: center !important;
 	}
@@ -181,3 +189,9 @@
 		text-align: end !important;
 	}
 }
+
+// Line height
+
+.line-height-normal {
+	line-height: 1.3;
+}

package/src/components/banner.scss

@@ -0,0 +1,47 @@
+$banner-background: $info-background !default;
+$banner-padding: $spacer-5 !default;
+
+$banner-font-size: $font-size-7 !default;
+$banner-color: $info-dark !default;
+
+$banner-border-color: $border-white-high-contrast !default;
+$banner-border-width: $border-width !default;
+
+.banner {
+	@extend %layout-gap;
+
+	display: block;
+	position: relative;
+	outline-color: $text;
+	background-color: $banner-background;
+	color: $banner-color;
+	font-size: $banner-font-size;
+	padding-block: $banner-padding;
+	word-wrap: break-word;
+	word-break: break-word;
+	border-block: $banner-border-width solid $banner-border-color;
+
+	&.is-loading {
+		color: transparent;
+
+		> :first-child {
+			margin-inline-start: calc($banner-padding + 0.375em);
+		}
+
+		&::before {
+			@include loader;
+
+			position: absolute;
+			border-color: transparent transparent $banner-color $banner-color;
+		}
+	}
+
+	a:not(.button) {
+		color: currentColor;
+		font-weight: $weight-semibold;
+
+		.theme-high-contrast & {
+			color: $hyperlink;
+		}
+	}
+}

package/src/components/button.scss

@@ -6,6 +6,8 @@ $button-background-color: $body-background !default;
 $button-lg-font-size: $font-size-6 !default;
 $button-sm-font-size: $font-size-8 !default;
 
+$button-icon-font-size: 0.875em !default;
+
 $button-border-color: $text-subtle !default;
 $button-border-width: $control-border-width !default;
 $button-border-radius: $control-radius !default;
@@ -48,6 +50,8 @@ $button-font-weight: $weight-semibold !default;
 	}
 
 	.icon {
+		font-size: $button-icon-font-size;
+
 		&:only-child {
 			margin: 0;
 		}

package/src/components/index.scss

@@ -1,3 +1,4 @@
+@import './banner.scss';
 @import './breadcrumbs.scss';
 @import './button.scss';
 @import './buttons.scss';
@@ -9,6 +10,7 @@
 @import './link-button.scss';
 @import './markdown.scss'; // must be ordered after code-block
 @import './media.scss';
+@import './notification.scss';
 @import './icon.scss';
 @import './image.scss';
 @import './popover.scss';

package/src/components/notification.scss

@@ -0,0 +1,81 @@
+$notification-background: $secondary-background !default;
+$notification-padding: $spacer-5 !default;
+
+$notification-font-size: $font-size-7 !default;
+$notification-color: $text !default;
+
+$notification-border-color: $control-border !default;
+$notification-border-width: $border-width !default;
+$notification-border-radius: $border-radius !default;
+
+.notification {
+	display: block;
+	position: relative;
+	padding: $notification-padding;
+	border: $notification-border-width solid $notification-border-color;
+	border-radius: $notification-border-radius;
+	outline-color: $text;
+	background-color: $notification-background;
+	color: $notification-color;
+	font-size: $notification-font-size;
+	word-wrap: break-word;
+	word-break: break-word;
+
+	@each $name, $color-set in $colors {
+		$base: nth($color-set, $color-index-base);
+		$dark: nth($color-set, $color-index-dark);
+		$background: nth($color-set, $color-index-background);
+
+		&.notification-#{$name} {
+			border-color: $dark;
+			background-color: $background;
+			color: $dark;
+
+			&.is-loading::before {
+				border-color: transparent transparent $dark $dark;
+			}
+		}
+	}
+
+	&.is-loading {
+		color: transparent;
+
+		> :first-child {
+			margin-inline-start: calc($notification-padding + 0.375em);
+		}
+
+		&::before {
+			@include loader;
+
+			position: absolute;
+			inset-block-start: $notification-padding;
+			inset-inline-start: $notification-padding;
+			border-color: transparent transparent $notification-color $notification-color;
+		}
+	}
+
+	.notification-title,
+	a:not(.button) {
+		color: currentColor;
+		font-weight: $weight-semibold;
+	}
+
+	a:not(.button) {
+		.theme-high-contrast & {
+			color: $hyperlink;
+		}
+	}
+
+	.notification-title {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-block-end: $layout-1;
+
+		.icon {
+			flex-shrink: 0;
+			align-self: start;
+			margin-inline-end: 0.375em;
+		}
+	}
+}

package/src/core/bare-elements.scss

@@ -32,3 +32,7 @@ fieldset {
 	min-width: 0; // as a replaced element min-width:0 is required to enable it to work in responsive layouts
 	border: none;
 }
+
+::target-text {
+	background-color: $code-highlight-background;
+}

package/tokens/README.md

@@ -4,7 +4,7 @@ A design tokens is a definition of a design-related variable, such as one that a
 
 ## Access our design tokens
 
-Firstly, in order to access these tokens, you must have installed atlas-css in your project. [See installation steps]('https://github.com/microsoft/atlas-design'). Once this is complete, you'll need to decide whether you want to reference them in Scss or JSON.
+Firstly, in order to access these tokens, you must have installed atlas-css in your project. [See installation steps](https://github.com/microsoft/atlas-design). Once this is complete, you'll need to decide whether you want to reference them in Scss or JSON.
 
 ### Get Scss from NPM