@microsoft/atlas-css 5.0.0-test.0 → 5.0.0-test.2

package/src/core/focus.scss

@@ -1,4 +1,7 @@
-@if ($focus-visible-use-polyfill) {
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+@if (tokens.$focus-visible-use-polyfill) {
 	.js-focus-visible .has-default-focus *:focus:not(.focus-visible),
 	.js-focus-visible .default-focus *:focus:not(.focus-visible) {
 		outline: none;
@@ -6,7 +9,7 @@
 
 	.focus-visible.has-inner-focus,
 	.focus-visible.inner-focus {
-		outline-offset: -$focus-width;
+		outline-offset: -(tokens.$focus-width);
 	}
 
 	.has-default-focus,
@@ -29,7 +32,7 @@
 		&.has-inner-focus,
 		&.inner-focus {
 			outline-color: currentColor;
-			outline-offset: -$focus-width;
+			outline-offset: -(tokens.$focus-width);
 		}
 	}
 }
@@ -40,6 +43,6 @@
 	&.has-inner-focus,
 	&.inner-focus {
 		outline-color: currentColor;
-		outline-offset: -$focus-width;
+		outline-offset: -(tokens.$focus-width);
 	}
 }

package/src/core/font-stack.scss

@@ -1,28 +1,31 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 html {
-	font-size: $document-font-size;
+	font-size: tokens.$document-font-size;
 }
 
 html,
 body {
-	font-family: $normal-font-stack;
+	font-family: tokens.$normal-font-stack;
 	-webkit-font-smoothing: antialiased;
-	font-weight: $weight-normal;
+	font-weight: tokens.$weight-normal;
 	text-rendering: optimizeLegibility;
 }
 
 kbd,
 pre,
 samp {
-	font-family: $monospace-font-stack !important;
+	font-family: tokens.$monospace-font-stack !important;
 	-moz-osx-font-smoothing: auto;
 	-webkit-font-smoothing: auto;
 }
 
 code {
 	direction: ltr;
-	font-family: $monospace-font-stack;
+	font-family: tokens.$monospace-font-stack;
 }
 
 a > code {
-	font-family: $normal-font-stack;
+	font-family: tokens.$normal-font-stack;
 }

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 tokens;
+@use '../mixins/index.scss' as mixins;
+
 /* 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 tokens;
+@use '../mixins/index.scss' as mixins;
+
 /* stylelint-disable */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

package/src/core/themes.scss

@@ -1,25 +1,27 @@
 @use 'sass:map';
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
 $root-theme: 'light' !default;
 $print-theme: 'light' !default;
 
 // Ensure that the root theme exists
-@if map.has-key($themes, $root-theme) != true {
-	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in $themes map.";
+@if map.has-key(tokens.$themes, $root-theme) != true {
+	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in tokens.$themes map.";
 }
 
 // Ensure that the print theme exists
-@if map.has-key($themes, $print-theme) != true {
-	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in $themes map.";
+@if map.has-key(tokens.$themes, $print-theme) != true {
+	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in tokens.$themes map.";
 }
 
-$theme-names: map.keys($themes);
+$theme-names: map.keys(tokens.$themes);
 
 // Validation: ensure that all values in the root theme are in the other themes too
-@each $root-color-name, $val in map.get($themes, $root-theme) {
+@each $root-color-name, $val in map.get(tokens.$themes, $root-theme) {
 	@each $theme-name in $theme-names {
 		@if $theme-name != $root-theme {
-			@if map.has-key(map.get($themes, $theme-name), $root-color-name) != true {
+			@if map.has-key(map.get(tokens.$themes, $theme-name), $root-color-name) != true {
 				@error '#{$root-color-name} from #{$root-theme} does not exist in theme: #{$theme-name}.';
 			}
 		}
@@ -28,10 +30,10 @@ $theme-names: map.keys($themes);
 
 // Validation: ensure all properties in non-root themes exist in root
 @each $theme-name in $theme-names {
-	$theme: map.get($themes, $theme-name);
+	$theme: map.get(tokens.$themes, $theme-name);
 
 	@if $theme-name != $root-theme {
-		$root: map.get($themes, $root-theme);
+		$root: map.get(tokens.$themes, $root-theme);
 
 		@each $color-name, $val in $theme {
 			@if map.has-key($root, $color-name) != true {
@@ -41,11 +43,11 @@ $theme-names: map.keys($themes);
 	}
 }
 
-@each $key, $value in $themes {
+@each $key, $value in tokens.$themes {
 	// Set the default theme
 	@if $key == $root-theme {
 		:root {
-			@each $colorName, $colorVal in map.get($themes, $key) {
+			@each $colorName, $colorVal in map.get(tokens.$themes, $key) {
 				// stylelint-disable-next-line custom-property-pattern
 				--theme-#{$colorName}: #{$colorVal};
 			}
@@ -54,7 +56,7 @@ $theme-names: map.keys($themes);
 
 	@if $key == $print-theme {
 		.theme-#{$key} {
-			@each $colorName, $colorVal in map.get($themes, $key) {
+			@each $colorName, $colorVal in map.get(tokens.$themes, $key) {
 				// stylelint-disable-next-line custom-property-pattern
 				--theme-#{$colorName}: #{$colorVal};
 			}
@@ -63,7 +65,7 @@ $theme-names: map.keys($themes);
 		// Set the rest of the themes, exclude them from print styling.
 		@media not print {
 			.theme-#{$key} {
-				@each $colorName, $colorVal in map-get($themes, $key) {
+				@each $colorName, $colorVal in map-get(tokens.$themes, $key) {
 					// stylelint-disable-next-line custom-property-pattern
 					--theme-#{$colorName}: #{$colorVal};
 				}
@@ -75,18 +77,18 @@ $theme-names: map.keys($themes);
 // End validation
 
 %theme-base-styles {
-	outline-color: $text;
-	background-color: $body-background;
-	color: $text;
+	outline-color: tokens.$text;
+	background-color: tokens.$body-background;
+	color: tokens.$text;
 }
 
-@each $key, $value in $themes {
+@each $key, $value in tokens.$themes {
 	.theme-#{$key} {
 		@extend %theme-base-styles;
 	}
 }
 
-@each $key, $value in $color-schemes {
+@each $key, $value in tokens.$color-schemes {
 	.theme-#{$key} {
 		color-scheme: #{$value};
 	}

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 tokens;
+
 @mixin center($width, $height: 0) {
 	position: absolute;
 

package/src/mixins/chevron.scss

@@ -1,4 +1,7 @@
-$chevron-color: $text !default;
+@use '../tokens/index.scss' as tokens;
+@use './control.scss' as control;
+
+$chevron-color: tokens.$text !default;
 $chevron-arrow-size: 0.525em !default;
 $chevron-arrow-border-width: 1px !default;
 $chevron-arrow-actual-width: 0.75em !default;
@@ -19,8 +22,8 @@ $chevron-up-rotate-scale-xy-rtl: $chevron-down-rotate-rtl scaleY(-1) scaleX(-1);
 	border-inline-end: 0;
 	pointer-events: none;
 	content: ' ';
-	z-index: $zindex-active;
-	inset-inline-end: $control-padding-horizontal;
+	z-index: tokens.$zindex-active;
+	inset-inline-end: control.$control-padding-horizontal;
 }
 
 @mixin chevron-right {

package/src/mixins/code-block.scss

@@ -1,12 +1,14 @@
-$code-block-pre-font-size: $font-size-8 !default;
+@use '../tokens/index.scss' as tokens;
+
+$code-block-pre-font-size: tokens.$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-border-color: tokens.$code-block-border !default;
+$code-block-pre-border-width: tokens.$border-width !default;
+$code-block-pre-border-radius: tokens.$border-radius !default;
+$code-block-pre-background-color: tokens.$code-block !default;
 
-$code-block-pre-padding: $spacer-4 !default;
+$code-block-pre-padding: tokens.$spacer-4 !default;
 
 @mixin code-block($code-block-component: false) {
 	@if $code-block-component == true {
@@ -20,7 +22,7 @@ $code-block-pre-padding: $spacer-4 !default;
 		margin: 0;
 		padding: $code-block-pre-padding;
 		outline-color: currentColor;
-		outline-offset: -$focus-width;
+		outline-offset: -(tokens.$focus-width);
 		font-size: $code-block-pre-font-size;
 		-moz-osx-font-smoothing: auto;
 		-webkit-font-smoothing: auto;
@@ -53,7 +55,7 @@ $code-block-pre-padding: $spacer-4 !default;
 				min-height: 18.9px; // Allow for highlighting of blank lines.
 				margin: 0 $code-block-pre-spacing * -1;
 				padding: 0 $code-block-pre-spacing;
-				color: $text;
+				color: tokens.$text;
 			}
 		}
 	}

package/src/mixins/colors.scss

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

package/src/mixins/control.scss

@@ -1,8 +1,10 @@
-$control-radius: $border-radius !default;
+@use '../tokens/index.scss' as tokens;
 
-$control-font-size: $font-size-7 !default;
-$control-sm-font-size: $font-size-8 !default;
-$control-lg-font-size: $font-size-6 !default;
+$control-radius: tokens.$border-radius !default;
+
+$control-font-size: tokens.$font-size-7 !default;
+$control-sm-font-size: tokens.$font-size-8 !default;
+$control-lg-font-size: tokens.$font-size-6 !default;
 
 $control-border-width: 1px !default;
 

package/src/mixins/dismiss.scss

@@ -1,5 +1,8 @@
+@use '../tokens/index.scss' as tokens;
+@use './transparency.scss' as transparency;
+
 %dismiss {
-	@include transparent-effects;
+	@include transparency.transparent-effects;
 
 	display: inline-block;
 	color: currentColor;
@@ -18,5 +21,5 @@
 	height: 1em;
 	padding: 0;
 	border: 0;
-	border-radius: $border-radius-rounded;
+	border-radius: tokens.$border-radius-rounded;
 }

package/src/mixins/focus.scss

@@ -1,9 +1,11 @@
+@use '../tokens/index.scss' as tokens;
+
 // stylelint-disable declaration-block-no-redundant-longhand-properties
 @mixin focus() {
 	outline-color: inherit;
-	outline-offset: $focus-outline-offset;
-	outline-style: $focus-style;
-	outline-width: $focus-width;
+	outline-offset: tokens.$focus-outline-offset;
+	outline-style: tokens.$focus-style;
+	outline-width: tokens.$focus-width;
 }
 
 %focus {
@@ -11,7 +13,7 @@
 }
 
 @mixin focus-visible {
-	@if ($focus-visible-use-polyfill) {
+	@if (tokens.$focus-visible-use-polyfill) {
 		&.focus-visible {
 			@content;
 		}

package/src/mixins/font-size.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '../tokens/index.scss' as tokens;
 
 /* stylelint-disable */
 
@@ -16,16 +17,16 @@ $font-size-scaling-factor: 0.75 !default;
 	// font-size to start scaling from
 	$start-rem: max($end-rem * $font-size-scaling-factor, 1rem),
 	// viewport width to stop scaling at
-	$end-width: $breakpoint-desktop,
+	$end-width: tokens.$breakpoint-desktop,
 	// viewport width to start scaling from
 	$start-width: 480px
 ) {
 	$m: math.div(
 			strip-units($end-rem) - strip-units($start-rem),
 			strip-units($end-width) - strip-units($start-width)
-		) * strip-units($document-font-size);
+		) * strip-units(tokens.$document-font-size);
 
-	$y: strip-units($start-rem) * strip-units($document-font-size);
+	$y: strip-units($start-rem) * strip-units(tokens.$document-font-size);
 	$x: strip-units($start-width);
 	$b: $y - $m * $x;
 	$importantValue: if($important, !important, '');

package/src/mixins/force-colors.scss

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

package/src/mixins/gradient.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as tokens;
+
 @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,7 +1,10 @@
+@use '../tokens/index.scss' as tokens;
+@use './media-queries.scss' as media-queries;
+
 %layout-gap {
-	padding-inline: $layout-gap;
+	padding-inline: tokens.$layout-gap;
 
-	@include widescreen {
-		padding-inline: $layout-widescreen-gap;
+	@include media-queries.widescreen {
+		padding-inline: tokens.$layout-widescreen-gap;
 	}
 }

package/src/mixins/line-clamp.scss

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

package/src/mixins/loader.scss

@@ -1,11 +1,13 @@
+@use '../tokens/index.scss' as tokens;
+
 %loader {
 	display: block;
 	position: relative;
 	width: 1em;
 	height: 1em;
 	animation: spinAround 500ms infinite linear;
-	border: 2px solid $border;
-	border-radius: $border-radius-rounded;
+	border: 2px solid tokens.$border;
+	border-radius: tokens.$border-radius-rounded;
 	border-block-start-color: transparent;
 	border-inline-end-color: transparent;
 	content: '';

package/src/mixins/media-queries.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as tokens;
+
 // Orientation
 
 @mixin orientation-portrait {
@@ -24,26 +26,26 @@
 // Mobile-first screen size media queries
 
 @mixin tablet {
-	@media screen and (min-width: $breakpoint-tablet), print {
+	@media screen and (min-width: tokens.$breakpoint-tablet), print {
 		@content;
 	}
 }
 
 @mixin desktop {
-	@media screen and (min-width: $breakpoint-desktop) {
+	@media screen and (min-width: tokens.$breakpoint-desktop) {
 		@content;
 	}
 }
 
 @mixin widescreen {
-	@media screen and (min-width: $breakpoint-widescreen) {
+	@media screen and (min-width: tokens.$breakpoint-widescreen) {
 		@content;
 	}
 }
 
 // Please avoid using this mixin if possible. It doesn't follow the mobile-first approach to writing CSS.
 @mixin discouraged-mobile {
-	@media screen and (max-width: ($breakpoint-tablet - 1px)) {
+	@media screen and (max-width: (tokens.$breakpoint-tablet - 1px)) {
 		@content;
 	}
 }

package/src/mixins/overlay.scss

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

package/src/mixins/transparency.scss

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

package/src/mixins/unselectable.scss

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

package/src/mixins/visually-hidden.scss

@@ -1,3 +1,5 @@
+@use '../tokens/index.scss' as tokens;
+
 @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: 2800px !default;
+$breakpoint-widescreen: 1800px !default;
 //@end-sass-export-section

package/src/tokens/colors.scss

@@ -1,3 +1,5 @@
+@use './palette.scss' as palette;
+
 /**
  * @sass-export-section="colors"
  */
@@ -24,7 +26,7 @@ $alternate-background-medium: var(--theme-alternate-background-medium);
 
 $overlay: var(--theme-overlay);
 $overlay-invert: var(--theme-overlay-invert);
-$overlay-static: $palette-black-opacity-50;
+$overlay-static: palette.$palette-black-opacity-50;
 $border: var(--theme-border);
 $border-accent: var(--theme-border-accent);
 

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 breakpoints;
+
 /**
  * @sass-export-section="layout"
  */
@@ -7,7 +9,7 @@ $large-column-gap: 1.5rem !default;
 $reading-max-width: 50rem !default;
 
 $layout-gap: 24px !default;
-$layout-widescreen-width: $breakpoint-widescreen - $layout-gap * 2 !default;
+$layout-widescreen-width: breakpoints.$breakpoint-widescreen - $layout-gap * 2 !default;
 $layout-widescreen-gap: max(
 	$layout-gap,
 	calc(50% - #{$layout-widescreen-width} / 2)

package/src/tokens/shadow.scss

@@ -1,11 +1,14 @@
+@use './colors.scss' as colors;
+
 /**
  * @sass-export-section="shadow"
  */
-$box-shadow-light: 0 1.6px 3.6px 0 $box-shadow-color-medium, 0 0.3px 0.9px 0 $box-shadow-color-light !default;
-$box-shadow-medium: 0 3.2px 7.2px 0 $box-shadow-color-medium,
-	0 0.6px 1.8px 0 $box-shadow-color-light !default;
-$box-shadow-heavy: 0 6.4px 14.4px 0 $box-shadow-color-medium,
-	0 1.2px 3.6px 0 $box-shadow-color-light !default;
-$box-shadow-extra-heavy: 0 25.6px 57.6px 0 $box-shadow-color-extra-heavy,
-	0 4.8px 14.4px 0 $box-shadow-color-heavy !default;
+$box-shadow-light: 0 1.6px 3.6px 0 colors.$box-shadow-color-medium,
+	0 0.3px 0.9px 0 colors.$box-shadow-color-light !default;
+$box-shadow-medium: 0 3.2px 7.2px 0 colors.$box-shadow-color-medium,
+	0 0.6px 1.8px 0 colors.$box-shadow-color-light !default;
+$box-shadow-heavy: 0 6.4px 14.4px 0 colors.$box-shadow-color-medium,
+	0 1.2px 3.6px 0 colors.$box-shadow-color-light !default;
+$box-shadow-extra-heavy: 0 25.6px 57.6px 0 colors.$box-shadow-color-extra-heavy,
+	0 4.8px 14.4px 0 colors.$box-shadow-color-heavy !default;
 //@end-sass-export-section