@microsoft/atlas-css 4.3.1 → 5.0.0-test.1

package/src/components/persona.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $persona-font-size-sm: $font-size-9 !default;
 $persona-font-size-md: $font-size-8 !default;
 $persona-font-size-lg: $font-size-7 !default;

package/src/components/popover.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable max-nesting-depth, selector-max-specificity  */
 
 $popover-background-color: $body-background !default;

package/src/components/progress-bar.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $progress-bar-background-color: $secondary-background-glow-high-contrast !default;
 $progress-bar-value-background-color: $primary !default;
 $progress-bar-value-background-color-warning: $warning !default;

package/src/components/reading-width.scss

@@ -0,0 +1,10 @@
+@use '../tokens/index.scss' as *;
+
+.reading-width {
+	max-width: $optimal-reading-width;
+}
+
+.reading-width-padded {
+	width: $reading-width-padded;
+	padding: $reading-width-padding;
+}

package/src/components/scroll.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 .scroll-horizontal {
 	overflow-x: auto;
 	overflow-y: hidden;

package/src/components/segmented-control.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $sc-padding-sm: 0.5em 1em !default;
 $sc-padding: 0.75em 1.25em !default;
 $sc-padding-lg: 1em 1.5em !default;

package/src/components/site-header.scss

@@ -1,3 +1,7 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+@use './button.scss' as *;
+
 $site-header-height: 3.375em !default;
 $site-header-inline-gap: $spacer-3 !default;
 $site-header-border: 1px solid $border !default;
@@ -68,9 +72,9 @@ $site-header-panel-featured-section-border: 1px solid $table-border-dark !defaul
 	gap: $site-header-inline-gap;
 	padding-inline: $layout-gap;
 
-	@include widescreen {
-		padding-inline: $layout-widescreen-gap;
-	}
+	// @include widescreen {
+	// 	padding-inline: $layout-widescreen-gap;
+	// }
 
 	.site-header-button {
 		@include control;

package/src/components/steps.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $step-font-size: $font-size-7 !default;
 $steps-gap: 0.4375em !default;
 $steps-size: 0.5em !default;

package/src/components/stretched-link.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 .stretched-link {
 	&::before {
 		position: absolute;

package/src/components/table.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $table-cell-vertical-padding: $spacer-5 !default;
 $table-cell-horizontal-padding: $spacer-6 !default;
 $table-cell-padding-compact: $spacer-3 !default;
@@ -28,7 +31,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
 		font-size: $table-caption-size;
 		font-weight: $weight-semibold;
 		letter-spacing: $table-caption-spacing;
-		text-align: $user-right;
+		text-align: end;
 		text-transform: uppercase;
 	}
 
@@ -43,7 +46,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
 	}
 
 	th:not([align]) {
-		text-align: $user-left;
+		text-align: start;
 	}
 
 	&.table-stacked-mobile {

package/src/components/tag.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable selector-max-specificity, no-descending-specificity  */
 
 $tag-padding-block: 0.375em !default;

package/src/components/timeline.scss

@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
 $timeline-content-font-size: $font-size-8 !default;
 $timeline-timestamp-font-size: $font-size-9 !default;
 $timeline-timestamp-font-weight: $weight-semilight !default;

package/src/components/toggle.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 $toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
 $toggle-circle-size: 0.85em !default;
 $toggle-circle-top: 0.15em !default;

package/src/core/animations.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 // stylelint-disable-next-line keyframes-name-pattern
 @keyframes spinAround {
 	// make it stop

package/src/core/bare-elements.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 // https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
 
 details,

package/src/core/focus.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 @if ($focus-visible-use-polyfill) {
 	.js-focus-visible .has-default-focus *:focus:not(.focus-visible),
 	.js-focus-visible .default-focus *:focus:not(.focus-visible) {

package/src/core/font-stack.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 html {
 	font-size: $document-font-size;
 }

package/src/core/index.scss

@@ -1,7 +1,7 @@
-@import './normalize.scss';
-@import './minireset.scss';
-@import './themes.scss';
-@import './font-stack.scss';
-@import './animations.scss';
-@import './focus.scss';
-@import './bare-elements.scss';
+@forward './normalize.scss';
+@forward './minireset.scss';
+@forward './themes.scss';
+@forward './font-stack.scss';
+@forward './animations.scss';
+@forward './focus.scss';
+@forward './bare-elements.scss';

package/src/core/minireset.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable */
 /*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */
 html,

package/src/core/normalize.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
+
 /* stylelint-disable */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

package/src/core/themes.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use '../tokens/index.scss' as *;
+@use '../mixins/index.scss' as *;
 
 $root-theme: 'light' !default;
 $print-theme: 'light' !default;

package/src/index.scss

@@ -1,5 +1,5 @@
-@import './tokens/index.scss';
-@import './mixins/index.scss';
-@import './core/index.scss';
-@import './components/index.scss';
-@import './atomics/index.scss';
+@forward './tokens/index.scss';
+@forward './mixins/index.scss';
+@forward './core/index.scss';
+@forward './components/index.scss';
+@forward './atomics/index.scss';

package/src/mixins/center.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 @mixin center($width, $height: 0) {
 	position: absolute;
 

package/src/mixins/chevron.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use './control.scss' as *;
+
 $chevron-color: $text !default;
 $chevron-arrow-size: 0.525em !default;
 $chevron-arrow-border-width: 1px !default;

package/src/mixins/code-block.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 $code-block-pre-font-size: $font-size-8 !default;
 $code-block-pre-spacing: 1em !default;
 $code-block-pre-line-height: 1.3571 !default;

package/src/mixins/colors.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 @mixin fill-current-color {
 	fill: currentColor !important;
 

package/src/mixins/control.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 $control-radius: $border-radius !default;
 
 $control-font-size: $font-size-7 !default;

package/src/mixins/dismiss.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use './transparency.scss' as *;
+
 %dismiss {
 	@include transparent-effects;
 

package/src/mixins/focus.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 // stylelint-disable declaration-block-no-redundant-longhand-properties
 @mixin focus() {
 	outline-color: inherit;

package/src/mixins/font-size.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '../tokens/index.scss' as *;
 
 /* stylelint-disable */
 

package/src/mixins/force-colors.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 @mixin forced-colors() {
 	@media (forced-colors: active) {
 		@content;

package/src/mixins/gradient.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 @mixin gradient-text($startColor, $endColor) {
 	/* stylelint-disable */
 	-webkit-background-clip: text;

package/src/mixins/index.scss

@@ -1,18 +1,18 @@
-@import './media-queries.scss';
-@import './code-block.scss';
-@import './colors.scss';
-@import './control.scss';
-@import './center.scss';
-@import './chevron.scss';
-@import './focus.scss';
-@import './gradient.scss';
-@import './loader.scss';
-@import './line-clamp.scss';
-@import './layout-gap.scss';
-@import './font-size.scss';
-@import './force-colors.scss';
-@import './overlay.scss';
-@import './transparency.scss';
-@import './dismiss.scss';
-@import './unselectable.scss';
-@import './visually-hidden.scss';
+@forward './media-queries.scss';
+@forward './code-block.scss';
+@forward './colors.scss';
+@forward './control.scss';
+@forward './center.scss';
+@forward './chevron.scss';
+@forward './focus.scss';
+@forward './gradient.scss';
+@forward './loader.scss';
+@forward './line-clamp.scss';
+@forward './layout-gap.scss';
+@forward './font-size.scss';
+@forward './force-colors.scss';
+@forward './overlay.scss';
+@forward './transparency.scss';
+@forward './dismiss.scss';
+@forward './unselectable.scss';
+@forward './visually-hidden.scss';

package/src/mixins/layout-gap.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as *;
+@use './media-queries.scss' as *;
+
 %layout-gap {
 	padding-inline: $layout-gap;
 

package/src/mixins/line-clamp.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 %line-clamp {
 	/*stylelint-disable*/
 	display: -webkit-box;

package/src/mixins/loader.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 %loader {
 	display: block;
 	position: relative;

package/src/mixins/media-queries.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 // Orientation
 
 @mixin orientation-portrait {

package/src/mixins/overlay.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 %overlay {
 	position: absolute;
 	inset: 0;

package/src/mixins/transparency.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 %transparent-effects {
 	outline-color: inherit;
 	background-color: transparent;

package/src/mixins/unselectable.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 %unselectable {
 	/* stylelint-disable */
 	-webkit-touch-callout: none;

package/src/mixins/visually-hidden.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as *;
+
 @mixin visually-hidden() {
 	position: absolute;
 	width: 1px;

package/src/tokens/breakpoints.scss

@@ -7,5 +7,5 @@ $container-gap: 64px !default;
 // Breakpoints
 $breakpoint-tablet: 768px !default;
 $breakpoint-desktop: 1088px !default;
-$breakpoint-widescreen: 1800px !default;
+$breakpoint-widescreen: 2800px !default;
 //@end-sass-export-section

package/src/tokens/colors.scss

@@ -1,3 +1,5 @@
+@use './palette.scss' as *;
+
 /**
  * @sass-export-section="colors"
  */

package/src/tokens/direction.scss

@@ -2,20 +2,6 @@
  * @sass-export-section="direction"
  */
 // Direction
-$user-text-direction: ltr !default;
-
-$user-left: if($user-text-direction == rtl, right, left);
-$user-right: if($user-text-direction == rtl, left, right);
-
-$user-translate-x-direction: if($user-text-direction == rtl, -1, 1);
-
-$directions: (
-	'top': 'top',
-	'right': $user-right,
-	'bottom': 'bottom',
-	'left': $user-left
-);
-
 $logical-directions: (
 	'top': 'block-start',
 	'right': 'inline-end',

package/src/tokens/index.scss

@@ -1,18 +1,18 @@
-@import './palette.scss';
-@import './animation.scss';
-@import './border.scss';
-@import './breakpoints.scss';
-@import './display.scss';
-@import './containers.scss';
-@import './colors.scss';
-@import './direction.scss';
-@import './focus.scss';
-@import './font-stack.scss';
-@import './layout.scss';
-@import './position.scss';
-@import './schemes.scss';
-@import './shadow.scss';
-@import './spacing.scss';
-@import './themes.scss';
-@import './typography.scss';
-@import './z-index.scss';
+@forward './palette.scss';
+@forward './animation.scss';
+@forward './border.scss';
+@forward './breakpoints.scss';
+@forward './display.scss';
+@forward './containers.scss';
+@forward './colors.scss';
+@forward './direction.scss';
+@forward './focus.scss';
+@forward './font-stack.scss';
+@forward './layout.scss';
+@forward './position.scss';
+@forward './schemes.scss';
+@forward './shadow.scss';
+@forward './spacing.scss';
+@forward './themes.scss';
+@forward './typography.scss';
+@forward './z-index.scss';

package/src/tokens/layout.scss

@@ -1,3 +1,5 @@
+@use './breakpoints.scss' as *;
+
 /**
  * @sass-export-section="layout"
  */
@@ -20,5 +22,7 @@ $layout-flyout-width-name: '--layout-flyout-width' !default;
 $layout-flyout-width-desktop-custom-property-name: '--layout-flyout-width-desktop' !default;
 $layout-flyout-width-widescreen-custom-property-name: '--layout-flyout-width-widescreen' !default;
 $layout-menu-collapsed-width-name: '--layout-menu-collapsed-width' !default;
-$layout-menu-collapsed-width-widescreen-spacer-width-name: '--layout-menu-collapsed-width-widescreen' !default;
+$layout-menu-collapsed-spacer-desktop-width-name: '--layout-menu-collapsed-spacer-desktop-width' !default;
+$layout-menu-max-width-name: '--layout-menu-max-width' !default;
+$layout-aside-max-width-name: '--layout-aside-max-width' !default;
 //@end-sass-export-section

package/src/tokens/shadow.scss

@@ -1,3 +1,5 @@
+@use './colors.scss' as *;
+
 /**
  * @sass-export-section="shadow"
  */

package/src/tokens/themes.scss

@@ -1,3 +1,6 @@
+@use './palette.scss' as *;
+@use './colors.scss' as *;
+
 /**
  * @sass-export-section="themes"
  */
@@ -15,7 +18,7 @@ $themes: (
 		'overlay-invert': $palette-white,
 		'body-background': $palette-white,
 		'body-background-accent': $palette-yellow-sand,
-		'body-background-medium': $palette-grey-20-deprecated,
+		'body-background-medium': $palette-grey-10-deprecated,
 		'alternate-background': $palette-grey-120-deprecated,
 		'alternate-background-medium': $palette-grey-110-deprecated,
 		'card-background': $palette-white,

package/src/tokens/typography.scss

@@ -28,6 +28,10 @@ $letter-spacing-medium: 0.125rem;
 $letter-spacing-wide: 0.225rem;
 
 // Line height
-$line-height-normal: 1.3;
+$line-height-normal: 1.4;
 
+// Reading width
+$optimal-reading-width: 688px;
+$reading-width-padding: 24px;
+$reading-width-padded: $optimal-reading-width + ($reading-width-padding * 2);
 //@end-sass-export-section

package/tokens/index.js

@@ -1,5 +1,6 @@
-const { readFile, writeFile, mkdir } = require('fs/promises');
+const { readFile, writeFile, mkdir, rm } = require('fs/promises');
 const path = require('path');
+const os = require('os');
 const { quicktype, InputData, jsonInputForTargetLanguage } = require('quicktype-core');
 const { exporter } = require('sass-export');
 
@@ -12,14 +13,34 @@ async function createTokens() {
 	const filePaths = await getInputFilesFromIndex(filePathStem, indexPath);
 	checkFileComments(filePaths);
 
+	// sass-export concatenates files via stdin and cannot resolve @use paths.
+	// Create temp copies with @use lines stripped for sass-export processing.
+	const tempDir = path.join(os.tmpdir(), 'atlas-tokens-' + Date.now());
+	await mkdir(tempDir, { recursive: true });
+	const tempFilePaths = await Promise.all(
+		filePaths.map(async fp => {
+			const content = await readFile(fp, 'utf8');
+			const stripped = content
+				.split('\n')
+				.filter(line => !line.trim().startsWith('@use '))
+				.join('\n');
+			const tempPath = path.join(tempDir, path.basename(fp));
+			await writeFile(tempPath, stripped);
+			return tempPath;
+		})
+	);
+
 	/** @type {import('./types').SassExportOptions} */
 	const options = {
-		inputFiles: filePaths
+		inputFiles: tempFilePaths
 	};
 
 	const exportedTokens = exporter(options).getStructured();
 	const collection = getSortedOrder(collectTokens(exportedTokens));
 
+	// Clean up temp files
+	await rm(tempDir, { recursive: true, force: true });
+
 	const outfolder = './dist';
 	const outfileStem = path.join(outfolder, 'tokens');
 
@@ -47,8 +68,13 @@ async function getInputFilesFromIndex(filePathStem, indexPath) {
 	try {
 		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();
+			if (line.includes('@import') || line.includes('@forward')) {
+				const filePath = line
+					.replace('@import', '')
+					.replace('@forward', '')
+					.replaceAll(`'`, '')
+					.replace(';', '')
+					.trim();
 				arr.push(path.join(filePathStem, filePath));
 			}
 			return arr;