@microsoft/atlas-css 3.43.0 → 3.44.0

package/src/tokens/typography.scss

@@ -1,33 +1,33 @@
-/**
- * @sass-export-section="typography"
- */
-
-$document-font-size: 16px;
-
-// Typography
-$font-size-9: 0.75rem !default; // 12px
-$font-size-8: 0.875rem !default; // 14px
-$font-size-7: 1rem !default; // 16px
-$font-size-6: 1.125rem !default; // 18px
-$font-size-5: 1.25rem !default; // 20px
-$font-size-4: 1.5rem !default; // 24px
-$font-size-3: 1.75rem !default; // 28px
-$font-size-2: 2.125rem !default; // 34px
-$font-size-1: 2.5rem !default; // 40px
-$font-size-0: 3.375rem !default; // 54px
-
-// Font Weight
-$weight-light: 100;
-$weight-semilight: 200;
-$weight-normal: 400;
-$weight-semibold: 600;
-$weight-bold: 700;
-
-// Letter spacing
-$letter-spacing-medium: 0.125rem;
-$letter-spacing-wide: 0.225rem;
-
-// Line height
-$line-height-normal: 1.3;
-
-//@end-sass-export-section
+/**
+ * @sass-export-section="typography"
+ */
+
+$document-font-size: 16px;
+
+// Typography
+$font-size-9: 0.75rem !default; // 12px
+$font-size-8: 0.875rem !default; // 14px
+$font-size-7: 1rem !default; // 16px
+$font-size-6: 1.125rem !default; // 18px
+$font-size-5: 1.25rem !default; // 20px
+$font-size-4: 1.5rem !default; // 24px
+$font-size-3: 1.75rem !default; // 28px
+$font-size-2: 2.125rem !default; // 34px
+$font-size-1: 2.5rem !default; // 40px
+$font-size-0: 3.375rem !default; // 54px
+
+// Font Weight
+$weight-light: 100;
+$weight-semilight: 200;
+$weight-normal: 400;
+$weight-semibold: 600;
+$weight-bold: 700;
+
+// Letter spacing
+$letter-spacing-medium: 0.125rem;
+$letter-spacing-wide: 0.225rem;
+
+// Line height
+$line-height-normal: 1.3;
+
+//@end-sass-export-section

package/src/tokens/z-index.scss

@@ -1,20 +1,20 @@
-/**
- * @sass-export-section="z-index"
- */
-// Element states
-$zindex-active: 1;
-$zindex-hover: 2;
-$zindex-focus: 3;
-$zindex-multi: 4;
-
-// Components
-$zindex-dropdown: 1000;
-$zindex-sticky: 1020;
-$zindex-fixed: 1030;
-$zindex-modal-backdrop: 1040;
-$zindex-modal: 1050;
-$zindex-popover: 1060;
-$zindex-tooltip: 1070;
-
-$zindex-stretched-link: 1 !default;
-//@end-sass-export-section
+/**
+ * @sass-export-section="z-index"
+ */
+// Element states
+$zindex-active: 1;
+$zindex-hover: 2;
+$zindex-focus: 3;
+$zindex-multi: 4;
+
+// Components
+$zindex-dropdown: 1000;
+$zindex-sticky: 1020;
+$zindex-fixed: 1030;
+$zindex-modal-backdrop: 1040;
+$zindex-modal: 1050;
+$zindex-popover: 1060;
+$zindex-tooltip: 1070;
+
+$zindex-stretched-link: 1 !default;
+//@end-sass-export-section

package/tokens/README.md

@@ -1,34 +1,34 @@
-# Atlas CSS Tokens
-
-A design tokens is a definition of a design-related variable, such as one that affects color, typography, or spacing. Design tokens must be shareable and fairly platform agnostic. Atlas's design tokens are written in Scss (buzzword: source of truth!), and though a [build process](https://github.com/microsoft/atlas-design/blob/main/css/tokens/index.js), translated and published into JSON so they can be more easily shared by solutions that do not use Scss.
-
-## 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.
-
-### Get Scss from NPM
-
-Reference our tokens in Scss via the following examples, where `./` is the path to your `node_modules` folder.
-
-```scss
-// Import by referencing node_modules
-@import './node_modules/@microsoft/atlas-css/src/tokens/index.scss';
-// OR if using a bundler like Parcel you may just reference the package directly
-@import '@microsoft/atlas-css/src/tokens/index.scss';
-```
-
-### Get JSON from NPM
-
-In NodeJs, referencing `node_modules` will also allow you to access the token [JSON](http://unpkg.com/browse/@microsoft/atlas-css/dist/tokens.json), which lives at `/dist/tokens.json`.
-
-You can also access the [TypeScript typings](https://unpkg.com/browse/@microsoft/atlas-css/dist/tokens.d.ts) in the same directory. Note the JSDoc comment in the example below.
-
-```js
-/**
- * Atlas Design Token Types
- * @type {import('@microsoft/atlas-css/dist/tokens').AtlasTokens}
- */
-const atlas = require('@microsoft/atlas-css/dist/tokens.json');
-// Access the tokens!
-const lightTheme = atlas.themes.tokens.$themes.light;
-```
+# Atlas CSS Tokens
+
+A design tokens is a definition of a design-related variable, such as one that affects color, typography, or spacing. Design tokens must be shareable and fairly platform agnostic. Atlas's design tokens are written in Scss (buzzword: source of truth!), and though a [build process](https://github.com/microsoft/atlas-design/blob/main/css/tokens/index.js), translated and published into JSON so they can be more easily shared by solutions that do not use Scss.
+
+## 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.
+
+### Get Scss from NPM
+
+Reference our tokens in Scss via the following examples, where `./` is the path to your `node_modules` folder.
+
+```scss
+// Import by referencing node_modules
+@import './node_modules/@microsoft/atlas-css/src/tokens/index.scss';
+// OR if using a bundler like Parcel you may just reference the package directly
+@import '@microsoft/atlas-css/src/tokens/index.scss';
+```
+
+### Get JSON from NPM
+
+In NodeJs, referencing `node_modules` will also allow you to access the token [JSON](http://unpkg.com/browse/@microsoft/atlas-css/dist/tokens.json), which lives at `/dist/tokens.json`.
+
+You can also access the [TypeScript typings](https://unpkg.com/browse/@microsoft/atlas-css/dist/tokens.d.ts) in the same directory. Note the JSDoc comment in the example below.
+
+```js
+/**
+ * Atlas Design Token Types
+ * @type {import('@microsoft/atlas-css/dist/tokens').AtlasTokens}
+ */
+const atlas = require('@microsoft/atlas-css/dist/tokens.json');
+// Access the tokens!
+const lightTheme = atlas.themes.tokens.$themes.light;
+```

package/tokens/index.js

@@ -1,246 +1,246 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { quicktype, InputData, jsonInputForTargetLanguage } = require('quicktype-core');
-const { exporter } = require('sass-export');
-
-createTokens();
-
-async function createTokens() {
-	const filePathStem = path.join(process.cwd(), './src/tokens');
-	const indexPath = path.resolve(filePathStem, 'index.scss');
-
-	const filePaths = await getInputFilesFromIndex(filePathStem, indexPath);
-	checkFileComments(filePaths);
-
-	/** @type {import('./types').SassExportOptions} */
-	const options = {
-		inputFiles: filePaths
-	};
-
-	const exportedTokens = exporter(options).getStructured();
-	const collection = getSortedOrder(collectTokens(exportedTokens));
-
-	const outfolder = './dist';
-	const outfileStem = path.join(outfolder, 'tokens');
-
-	try {
-		await fs.ensureDir(outfolder);
-		await Promise.all([
-			fs.writeJSON(`${outfileStem}.json`, collection),
-			quicktypeJSON('AtlasTokens', JSON.stringify(collection), `${outfileStem}.ts`, 'typescript')
-		]);
-		console.log(`Tokens written to "${path.join(process.cwd(), `/dist/${outfileStem}.json`)}".`);
-	} catch (err) {
-		throw new Error(`Problem writing output: ${err}`);
-	}
-}
-
-/**
- * Read the token index file's content and generate a list of import paths in its respective order
- * @param {string} filePathStem tokens directory path
- * @param {string} indexPath tokens index file path
- * @returns {Promise<string[]>}
- */
-async function getInputFilesFromIndex(filePathStem, indexPath) {
-	/** @type {string[]} */
-	const filePaths = [];
-	try {
-		const indexFile = (await fs.readFile(indexPath)).toString();
-		const lines = indexFile.split('\n').reduce((arr, line) => {
-			if (line.includes('@import')) {
-				const filePath = line.replace('@import', '').replaceAll(`'`, '').replace(';', '').trim();
-				arr.push(path.join(filePathStem, filePath));
-			}
-			return arr;
-		}, filePaths);
-		return lines;
-	} catch (err) {
-		throw err;
-	}
-}
-
-/**
- * Print a warning if a token file lacks the required sass-export-section comments.
- * @param {string[]} paths token file paths
- */
-function checkFileComments(paths) {
-	const promises = paths.map(async path => {
-		try {
-			const result = await fs.readFile(path, 'utf8');
-			if (!result.includes('@sass-export-section')) {
-				console.log(`Warning: ${path} is missing @sass-export-section annotations.`);
-			}
-		} catch (err) {
-			throw new Error(`Problem reading token files: ${err}`);
-		}
-	});
-
-	return Promise.all(promises);
-}
-
-/**
- * Sort the grouped tokens alphabetically
- * @param {import('./types').SassExportCollection} collection collection of grouped tokens to be sorted
- * @returns {import('./types').SassExportCollection}
- */
-function getSortedOrder(collection) {
-	return Object.fromEntries(Object.entries(collection).sort());
-}
-
-/**
- * Condense the raw data from sass-export into simple objects
- * @param {import('./types').SassExportTokens} tokens raw token data by group
- * @returns {import('./types').SassExportCollection}
- */
-function collectTokens(tokens) {
-	/** @type {import('./types').SassExportCollection} */
-	const collection = {};
-	for (const [parent, tokenValues] of Object.entries(tokens)) {
-		//Currently using sass-export-section annotations in the token files for grouping.
-		//Tokens without annotations will be combined in the variables array.
-		if (parent === 'variables') {
-			continue;
-		}
-
-		const collectedValues = tokenValues.reduce(
-			(
-				/** @type {import('./types').SassExportCollection} */ all,
-				/** @type {import('./types').SassExportTokenItem} */ current
-			) => {
-				const tokenName = current.name;
-
-				/** @type {string | import('./types').SassExportTokenNestedItem} */
-				const values = current.mapValue
-					? { ...getNestedTokens(current) }[tokenName]
-					: convertBoolean(current.compiledValue.replaceAll(' ,  ', ', '));
-				all[parent] = {
-					...all[parent],
-					[tokenName]: values
-				};
-				return all;
-			},
-			{}
-		);
-		collection[parent] = {
-			name: parent,
-			location: `/css/src/tokens/${parent}.scss`,
-			tokens: collectedValues[parent]
-		};
-	}
-
-	return collection;
-}
-
-/**
- * Aggregate nested values when token value is a Sass map
- * Note, this currently only targets two levels of nesting.
- * Sass-export seems to have trouble parsing maps that have more two levels.
- * @param {import('./types').SassExportTokenItem} tokenItem
- * @returns {import('./types').SassExportNestedCollection}
- */
-function getNestedTokens(tokenItem) {
-	const { name, compiledValue, mapValue } = tokenItem;
-
-	/** @type {import('./types').SassExportNestedCollection} */
-	const newCompiledValue = {};
-
-	const nested = containsMapValue(tokenItem);
-
-	if (!nested) {
-		parseCompiledValue(compiledValue, name, newCompiledValue);
-	}
-
-	if (mapValue && nested) {
-		for (const child of mapValue) {
-			parseCompiledValue(child.compiledValue, child.name, newCompiledValue);
-		}
-	}
-	return { [name]: nested ? newCompiledValue : newCompiledValue[name] };
-}
-
-/**
- * Return a boolean if the token item has nested maps
- * Note, this currently only targets two levels of nesting.
- * @param {import('./types').SassExportTokenItem} tokenItem
- * @returns {boolean}
- */
-function containsMapValue(tokenItem) {
-	if (tokenItem.mapValue) {
-		for (const values of tokenItem.mapValue) {
-			if (values.hasOwnProperty('mapValue')) {
-				return true;
-			}
-		}
-	}
-	return false;
-}
-
-/**
- * Return an object of tokens by parsing the token item's compiled value string
- * @param {string} compiledValue
- * @param {string} name
- * @param {{[name: string]: import('./types').SassExportTokenNestedItem}} collection
- * @returns {import('./types').SassExportNestedCollection}
- */
-function parseCompiledValue(compiledValue, name, collection) {
-	const parsedValue = compiledValue
-		.replace(/^\(/, '')
-		.replace(/\((?![^-]*: )/, '')
-		.replace(/\)$/, '')
-		.replaceAll(/\){2,}/g, ')')
-		.split(/\,(?![^"]*\))/);
-
-	return parsedValue.reduce((subCollection, val) => {
-		const [subKey, value] = val.replaceAll(' ', '').replaceAll('"', '').split(':');
-
-		subCollection[name] = {
-			...subCollection[name],
-			[subKey]: convertBoolean(value.replace(/^\(/, ''))
-		};
-
-		return subCollection;
-	}, collection);
-}
-
-/**
- * Convert boolean string to a boolean value
- * @param {string} str
- * @returns {boolean | string}
- */
-function convertBoolean(str) {
-	if (str === 'true') {
-		return true;
-	}
-	if (str === 'false') {
-		return false;
-	}
-	return str;
-}
-
-/**
- *
- * @param {string} typeName The name of the global type
- * @param {string} jsonString The JSON to parse
- * @param {string} outfile Where to save the file
- * @param {string} targetLanguage To which language to convert the types
- * @returns promise
- */
-async function quicktypeJSON(typeName, jsonString, outfile, targetLanguage = 'typescript') {
-	const jsonInput = jsonInputForTargetLanguage(targetLanguage);
-
-	// We could add multiple samples for the same desired
-	// type, or many sources for other types. Here we're
-	// just making one type from one piece of sample JSON.
-	await jsonInput.addSource({
-		name: typeName,
-		samples: [jsonString]
-	});
-
-	const inputData = new InputData();
-	inputData.addInput(jsonInput);
-	const result = await quicktype({
-		inputData,
-		lang: targetLanguage
-	});
-	return fs.writeFile(outfile, result.lines.join('\n'));
-}
+const fs = require('fs-extra');
+const path = require('path');
+const { quicktype, InputData, jsonInputForTargetLanguage } = require('quicktype-core');
+const { exporter } = require('sass-export');
+
+createTokens();
+
+async function createTokens() {
+	const filePathStem = path.join(process.cwd(), './src/tokens');
+	const indexPath = path.resolve(filePathStem, 'index.scss');
+
+	const filePaths = await getInputFilesFromIndex(filePathStem, indexPath);
+	checkFileComments(filePaths);
+
+	/** @type {import('./types').SassExportOptions} */
+	const options = {
+		inputFiles: filePaths
+	};
+
+	const exportedTokens = exporter(options).getStructured();
+	const collection = getSortedOrder(collectTokens(exportedTokens));
+
+	const outfolder = './dist';
+	const outfileStem = path.join(outfolder, 'tokens');
+
+	try {
+		await fs.ensureDir(outfolder);
+		await Promise.all([
+			fs.writeJSON(`${outfileStem}.json`, collection),
+			quicktypeJSON('AtlasTokens', JSON.stringify(collection), `${outfileStem}.ts`, 'typescript')
+		]);
+		console.log(`Tokens written to "${path.join(process.cwd(), `/dist/${outfileStem}.json`)}".`);
+	} catch (err) {
+		throw new Error(`Problem writing output: ${err}`);
+	}
+}
+
+/**
+ * Read the token index file's content and generate a list of import paths in its respective order
+ * @param {string} filePathStem tokens directory path
+ * @param {string} indexPath tokens index file path
+ * @returns {Promise<string[]>}
+ */
+async function getInputFilesFromIndex(filePathStem, indexPath) {
+	/** @type {string[]} */
+	const filePaths = [];
+	try {
+		const indexFile = (await fs.readFile(indexPath)).toString();
+		const lines = indexFile.split('\n').reduce((arr, line) => {
+			if (line.includes('@import')) {
+				const filePath = line.replace('@import', '').replaceAll(`'`, '').replace(';', '').trim();
+				arr.push(path.join(filePathStem, filePath));
+			}
+			return arr;
+		}, filePaths);
+		return lines;
+	} catch (err) {
+		throw err;
+	}
+}
+
+/**
+ * Print a warning if a token file lacks the required sass-export-section comments.
+ * @param {string[]} paths token file paths
+ */
+function checkFileComments(paths) {
+	const promises = paths.map(async path => {
+		try {
+			const result = await fs.readFile(path, 'utf8');
+			if (!result.includes('@sass-export-section')) {
+				console.log(`Warning: ${path} is missing @sass-export-section annotations.`);
+			}
+		} catch (err) {
+			throw new Error(`Problem reading token files: ${err}`);
+		}
+	});
+
+	return Promise.all(promises);
+}
+
+/**
+ * Sort the grouped tokens alphabetically
+ * @param {import('./types').SassExportCollection} collection collection of grouped tokens to be sorted
+ * @returns {import('./types').SassExportCollection}
+ */
+function getSortedOrder(collection) {
+	return Object.fromEntries(Object.entries(collection).sort());
+}
+
+/**
+ * Condense the raw data from sass-export into simple objects
+ * @param {import('./types').SassExportTokens} tokens raw token data by group
+ * @returns {import('./types').SassExportCollection}
+ */
+function collectTokens(tokens) {
+	/** @type {import('./types').SassExportCollection} */
+	const collection = {};
+	for (const [parent, tokenValues] of Object.entries(tokens)) {
+		//Currently using sass-export-section annotations in the token files for grouping.
+		//Tokens without annotations will be combined in the variables array.
+		if (parent === 'variables') {
+			continue;
+		}
+
+		const collectedValues = tokenValues.reduce(
+			(
+				/** @type {import('./types').SassExportCollection} */ all,
+				/** @type {import('./types').SassExportTokenItem} */ current
+			) => {
+				const tokenName = current.name;
+
+				/** @type {string | import('./types').SassExportTokenNestedItem} */
+				const values = current.mapValue
+					? { ...getNestedTokens(current) }[tokenName]
+					: convertBoolean(current.compiledValue.replaceAll(' ,  ', ', '));
+				all[parent] = {
+					...all[parent],
+					[tokenName]: values
+				};
+				return all;
+			},
+			{}
+		);
+		collection[parent] = {
+			name: parent,
+			location: `/css/src/tokens/${parent}.scss`,
+			tokens: collectedValues[parent]
+		};
+	}
+
+	return collection;
+}
+
+/**
+ * Aggregate nested values when token value is a Sass map
+ * Note, this currently only targets two levels of nesting.
+ * Sass-export seems to have trouble parsing maps that have more two levels.
+ * @param {import('./types').SassExportTokenItem} tokenItem
+ * @returns {import('./types').SassExportNestedCollection}
+ */
+function getNestedTokens(tokenItem) {
+	const { name, compiledValue, mapValue } = tokenItem;
+
+	/** @type {import('./types').SassExportNestedCollection} */
+	const newCompiledValue = {};
+
+	const nested = containsMapValue(tokenItem);
+
+	if (!nested) {
+		parseCompiledValue(compiledValue, name, newCompiledValue);
+	}
+
+	if (mapValue && nested) {
+		for (const child of mapValue) {
+			parseCompiledValue(child.compiledValue, child.name, newCompiledValue);
+		}
+	}
+	return { [name]: nested ? newCompiledValue : newCompiledValue[name] };
+}
+
+/**
+ * Return a boolean if the token item has nested maps
+ * Note, this currently only targets two levels of nesting.
+ * @param {import('./types').SassExportTokenItem} tokenItem
+ * @returns {boolean}
+ */
+function containsMapValue(tokenItem) {
+	if (tokenItem.mapValue) {
+		for (const values of tokenItem.mapValue) {
+			if (values.hasOwnProperty('mapValue')) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+/**
+ * Return an object of tokens by parsing the token item's compiled value string
+ * @param {string} compiledValue
+ * @param {string} name
+ * @param {{[name: string]: import('./types').SassExportTokenNestedItem}} collection
+ * @returns {import('./types').SassExportNestedCollection}
+ */
+function parseCompiledValue(compiledValue, name, collection) {
+	const parsedValue = compiledValue
+		.replace(/^\(/, '')
+		.replace(/\((?![^-]*: )/, '')
+		.replace(/\)$/, '')
+		.replaceAll(/\){2,}/g, ')')
+		.split(/\,(?![^"]*\))/);
+
+	return parsedValue.reduce((subCollection, val) => {
+		const [subKey, value] = val.replaceAll(' ', '').replaceAll('"', '').split(':');
+
+		subCollection[name] = {
+			...subCollection[name],
+			[subKey]: convertBoolean(value.replace(/^\(/, ''))
+		};
+
+		return subCollection;
+	}, collection);
+}
+
+/**
+ * Convert boolean string to a boolean value
+ * @param {string} str
+ * @returns {boolean | string}
+ */
+function convertBoolean(str) {
+	if (str === 'true') {
+		return true;
+	}
+	if (str === 'false') {
+		return false;
+	}
+	return str;
+}
+
+/**
+ *
+ * @param {string} typeName The name of the global type
+ * @param {string} jsonString The JSON to parse
+ * @param {string} outfile Where to save the file
+ * @param {string} targetLanguage To which language to convert the types
+ * @returns promise
+ */
+async function quicktypeJSON(typeName, jsonString, outfile, targetLanguage = 'typescript') {
+	const jsonInput = jsonInputForTargetLanguage(targetLanguage);
+
+	// We could add multiple samples for the same desired
+	// type, or many sources for other types. Here we're
+	// just making one type from one piece of sample JSON.
+	await jsonInput.addSource({
+		name: typeName,
+		samples: [jsonString]
+	});
+
+	const inputData = new InputData();
+	inputData.addInput(jsonInput);
+	const result = await quicktype({
+		inputData,
+		lang: targetLanguage
+	});
+	return fs.writeFile(outfile, result.lines.join('\n'));
+}