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

package/src/mixins/code-block.scss

@@ -1,14 +1,14 @@
-@use '../tokens/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
-$code-block-pre-font-size: $font-size-8 !default;
+$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 {
@@ -22,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;
@@ -55,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,5 +1,3 @@
-@use '../tokens/index.scss' as *;
-
 @mixin fill-current-color {
 	fill: currentColor !important;
 

package/src/mixins/control.scss

@@ -1,10 +1,10 @@
-@use '../tokens/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
-$control-radius: $border-radius !default;
+$control-radius: tokens.$border-radius !default;
 
-$control-font-size: $font-size-7 !default;
-$control-sm-font-size: $font-size-8 !default;
-$control-lg-font-size: $font-size-6 !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,8 +1,8 @@
-@use '../tokens/index.scss' as *;
-@use './transparency.scss' as *;
+@use '../tokens/index.scss' as tokens;
+@use './transparency.scss' as transparency;
 
 %dismiss {
-	@include transparent-effects;
+	@include transparency.transparent-effects;
 
 	display: inline-block;
 	color: currentColor;
@@ -21,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,11 +1,11 @@
-@use '../tokens/index.scss' as *;
+@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 {
@@ -13,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,5 +1,5 @@
 @use 'sass:math';
-@use '../tokens/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 /* stylelint-disable */
 
@@ -17,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,5 +1,3 @@
-@use '../tokens/index.scss' as *;
-
 @mixin forced-colors() {
 	@media (forced-colors: active) {
 		@content;

package/src/mixins/gradient.scss

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

package/src/mixins/layout-gap.scss

@@ -1,10 +1,10 @@
-@use '../tokens/index.scss' as *;
-@use './media-queries.scss' as *;
+@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,5 +1,3 @@
-@use '../tokens/index.scss' as *;
-
 %line-clamp {
 	/*stylelint-disable*/
 	display: -webkit-box;

package/src/mixins/loader.scss

@@ -1,4 +1,4 @@
-@use '../tokens/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 %loader {
 	display: block;
@@ -6,8 +6,8 @@
 	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,4 +1,4 @@
-@use '../tokens/index.scss' as *;
+@use '../tokens/index.scss' as tokens;
 
 // Orientation
 
@@ -26,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,5 +1,3 @@
-@use '../tokens/index.scss' as *;
-
 %overlay {
 	position: absolute;
 	inset: 0;

package/src/mixins/transparency.scss

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

package/src/mixins/unselectable.scss

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

package/src/mixins/visually-hidden.scss

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

package/src/tokens/colors.scss

@@ -1,4 +1,4 @@
-@use './palette.scss' as *;
+@use './palette.scss' as palette;
 
 /**
  * @sass-export-section="colors"
@@ -26,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/layout.scss

@@ -1,4 +1,4 @@
-@use './breakpoints.scss' as *;
+@use './breakpoints.scss' as breakpoints;
 
 /**
  * @sass-export-section="layout"
@@ -9,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,13 +1,14 @@
-@use './colors.scss' as *;
+@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