@microsoft/atlas-css 4.1.0 → 4.3.0

package/src/mixins/code-block.scss

@@ -1,19 +1,30 @@
-$code-font-size: $font-size-8 !default;
-$code-block-spacing: 1em !default;
-$code-header-body-line-height: 1.3571 !default;
+$code-block-pre-font-size: $font-size-8 !default;
+$code-block-pre-spacing: 1em !default;
+$code-block-pre-line-height: 1.3571 !default;
+$code-block-pre-border-color: $code-block-border !default;
+$code-block-pre-border-width: $border-width !default;
+$code-block-pre-border-radius: $border-radius !default;
+$code-block-pre-background-color: $code-block !default;
+
+$code-block-pre-padding: $spacer-4 !default;
+
+@mixin code-block($code-block-component: false) {
+	@if $code-block-component == true {
+		background-color: $code-block-pre-background-color;
+		overflow: auto;
+	}
 
-@mixin code-block {
 	pre {
 		box-sizing: border-box;
 		max-width: 100%;
 		margin: 0;
-		padding: $code-block-spacing;
-		border: 1px solid $border;
-		background-color: $code-block;
-		font-size: $code-font-size;
+		padding: $code-block-pre-padding;
+		outline-color: currentColor;
+		outline-offset: -$focus-width;
+		font-size: $code-block-pre-font-size;
 		-moz-osx-font-smoothing: auto;
 		-webkit-font-smoothing: auto;
-		line-height: 1.3571;
+		line-height: $code-block-pre-line-height;
 		white-space: pre;
 		word-spacing: normal;
 		overflow: auto;
@@ -23,19 +34,25 @@ $code-header-body-line-height: 1.3571 !default;
 		hyphens: none;
 		-webkit-overflow-scrolling: touch;
 
+		@if $code-block-component == false {
+			border: $code-block-pre-border-width solid $code-block-pre-border-color;
+			border-radius: $code-block-pre-border-radius;
+			background-color: $code-block-pre-background-color;
+		}
+
 		> code {
 			display: block;
 			position: relative;
 			padding: 0;
 			border: 0;
-			line-height: $code-header-body-line-height;
+			line-height: $code-block-pre-line-height;
 
 			mark {
 				display: inline-block;
-				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
+				min-width: calc(100% + #{$code-block-pre-spacing} + #{$code-block-pre-spacing});
 				min-height: 18.9px; // Allow for highlighting of blank lines.
-				margin: 0 $code-block-spacing * -1;
-				padding: 0 $code-block-spacing;
+				margin: 0 $code-block-pre-spacing * -1;
+				padding: 0 $code-block-pre-spacing;
 				color: $text;
 			}
 		}

package/src/tokens/colors.scss

@@ -32,6 +32,7 @@ $card-background: var(--theme-card-background);
 
 $code-header: var(--theme-code-header);
 $code-block: var(--theme-code-block);
+$code-block-border: var(--theme-code-block-border);
 $inline-code: var(--theme-inline-code);
 
 $control-border: var(--theme-control-border);

package/src/tokens/themes.scss

@@ -33,8 +33,9 @@ $themes: (
 		'background-subtle-selected': $palette-grey-30,
 		'foreground-selected': $palette-grey-260,
 		'stroke-selected': $palette-grey-90,
-		'code-header': $palette-grey-40,
-		'code-block': $palette-grey-20,
+		'code-header': $palette-grey-20,
+		'code-block': $palette-grey-10-deprecated,
+		'code-block-border': $palette-grey-70,
 		'control-border': $palette-grey-70,
 		'control-border-bottom': $palette-grey-170,
 		'inline-code': $palette-grey-40,
@@ -191,8 +192,9 @@ $themes: (
 		'background-subtle-selected': $palette-grey-240,
 		'foreground-selected': $palette-grey-40,
 		'stroke-selected': $palette-grey-40,
-		'code-header': $palette-grey-100-deprecated,
-		'code-block': $palette-grey-110-deprecated,
+		'code-header': $palette-grey-240,
+		'code-block': $palette-grey-280,
+		'code-block-border': $palette-grey-90,
 		'control-border': $palette-grey-40-deprecated,
 		'control-border-bottom': $palette-grey-30-deprecated,
 		'inline-code': $palette-grey-100-deprecated,
@@ -351,6 +353,7 @@ $themes: (
 		'stroke-selected': $palette-yellow-high-contrast-selected,
 		'code-header': $palette-black,
 		'code-block': $palette-black,
+		'code-block-border': $palette-white,
 		'control-border': $palette-white,
 		'control-border-bottom': $palette-white,
 		'inline-code': $palette-grey-110-deprecated,

package/tokens/index.js

@@ -1,4 +1,4 @@
-const fs = require('fs-extra');
+const { readFile, writeFile, mkdir } = require('fs/promises');
 const path = require('path');
 const { quicktype, InputData, jsonInputForTargetLanguage } = require('quicktype-core');
 const { exporter } = require('sass-export');
@@ -24,9 +24,9 @@ async function createTokens() {
 	const outfileStem = path.join(outfolder, 'tokens');
 
 	try {
-		await fs.ensureDir(outfolder);
+		await mkdir(outfolder, { recursive: true });
 		await Promise.all([
-			fs.writeJSON(`${outfileStem}.json`, collection),
+			writeFile(`${outfileStem}.json`, JSON.stringify(collection)),
 			quicktypeJSON('AtlasTokens', JSON.stringify(collection), `${outfileStem}.ts`, 'typescript')
 		]);
 		console.log(`Tokens written to "${path.join(process.cwd(), `/dist/${outfileStem}.json`)}".`);
@@ -45,7 +45,7 @@ async function getInputFilesFromIndex(filePathStem, indexPath) {
 	/** @type {string[]} */
 	const filePaths = [];
 	try {
-		const indexFile = (await fs.readFile(indexPath)).toString();
+		const indexFile = (await readFile(indexPath)).toString();
 		const lines = indexFile.split('\n').reduce((arr, line) => {
 			if (line.includes('@import')) {
 				const filePath = line.replace('@import', '').replaceAll(`'`, '').replace(';', '').trim();
@@ -66,7 +66,7 @@ async function getInputFilesFromIndex(filePathStem, indexPath) {
 function checkFileComments(paths) {
 	const promises = paths.map(async path => {
 		try {
-			const result = await fs.readFile(path, 'utf8');
+			const result = await readFile(path, 'utf8');
 			if (!result.includes('@sass-export-section')) {
 				console.log(`Warning: ${path} is missing @sass-export-section annotations.`);
 			}
@@ -242,5 +242,5 @@ async function quicktypeJSON(typeName, jsonString, outfile, targetLanguage = 'ty
 		inputData,
 		lang: targetLanguage
 	});
-	return fs.writeFile(outfile, result.lines.join('\n'));
+	return writeFile(outfile, result.lines.join('\n'));
 }