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

package/src/components/button.scss

@@ -1,38 +1,40 @@
 @use 'sass:map';
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
 
-$button-color: $text !default;
-$button-background-color: $body-background !default;
+$button-color: tokens.$text !default;
+$button-background-color: tokens.$body-background !default;
 
-$button-lg-font-size: $font-size-6 !default;
-$button-sm-font-size: $font-size-8 !default;
+$button-lg-font-size: tokens.$font-size-6 !default;
+$button-sm-font-size: tokens.$font-size-8 !default;
 
 $button-icon-font-size: 0.875em !default;
 
-$button-border-color: $control-border !default;
-$button-border-width: $control-border-width !default;
-$button-border-radius: $control-radius !default;
+$button-border-color: tokens.$control-border !default;
+$button-border-width: mixins.$control-border-width !default;
+$button-border-radius: mixins.$control-radius !default;
 
 $button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
 $button-padding-horizontal: 0.75em !default;
 
-$button-hover-color: $text !default;
-$button-hover-border-color: $default-hover !default;
-$button-hover-background-color: $default-hover-invert !default;
+$button-hover-color: tokens.$text !default;
+$button-hover-border-color: tokens.$default-hover !default;
+$button-hover-background-color: tokens.$default-hover-invert !default;
 
-$button-disabled-background-color: $body-background-medium !default;
+$button-disabled-background-color: tokens.$body-background-medium !default;
 $button-disabled-shadow: none !default;
 $button-disabled-opacity: 0.5 !default;
 
-$button-selected-background-color: $selected-background !default;
-$button-selected-border-color: $selected-stroke !default;
-$button-selected-color: $selected-foreground !default;
+$button-selected-background-color: tokens.$selected-background !default;
+$button-selected-border-color: tokens.$selected-stroke !default;
+$button-selected-color: tokens.$selected-foreground !default;
 
 $button-icon-spacing: 0.375em !default;
-$button-font-weight: $weight-semibold !default;
+$button-font-weight: tokens.$weight-semibold !default;
 
 .button {
-	@include control;
-	@include unselectable;
+	@include mixins.control;
+	@include mixins.unselectable;
 
 	justify-content: center;
 	padding-block: $button-padding-vertical;
@@ -114,23 +116,23 @@ $button-font-weight: $weight-semibold !default;
 		pointer-events: none;
 
 		&::after {
-			@include loader;
-			@include center(1em);
+			@include mixins.loader;
+			@include mixins.center(1em);
 
 			position: absolute !important;
-			border-block-end-color: $text;
-			border-inline-start-color: $text;
+			border-block-end-color: tokens.$text;
+			border-inline-start-color: tokens.$text;
 		}
 	}
 
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$dark: nth($color-set, $color-index-dark);
-		$background: nth($color-set, $color-index-background);
-		$background-selected: nth($color-set, $color-index-background-selected);
-		$selected: nth($color-set, $color-index-selected);
-		$foreground-selected: nth($color-set, $color-index-foreground-selected);
-		$border-selected: nth($color-set, $color-index-stroke-selected);
+	@each $name, $color-set in tokens.$colors {
+		$base: nth($color-set, tokens.$color-index-base);
+		$dark: nth($color-set, tokens.$color-index-dark);
+		$background: nth($color-set, tokens.$color-index-background);
+		$background-selected: nth($color-set, tokens.$color-index-background-selected);
+		$selected: nth($color-set, tokens.$color-index-selected);
+		$foreground-selected: nth($color-set, tokens.$color-index-foreground-selected);
+		$border-selected: nth($color-set, tokens.$color-index-stroke-selected);
 
 		&.button-#{$name} {
 			@if $name == 'warning' {
@@ -165,7 +167,7 @@ $button-font-weight: $weight-semibold !default;
 }
 
 $button-clear-hover-background-color: transparentize(#8e8e8e, 0.95) !default;
-$button-clear-selected-background-color: $selected-background-subtle !default;
+$button-clear-selected-background-color: tokens.$selected-background-subtle !default;
 
 .button.button-clear {
 	border-color: transparent;
@@ -194,13 +196,13 @@ $button-clear-selected-background-color: $selected-background-subtle !default;
 		color: $button-selected-color;
 	}
 
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$dark: nth($color-set, $color-index-dark);
-		$background: nth($color-set, $color-index-background);
-		$background-selected: nth($color-set, $color-index-background-selected);
-		$selected: nth($color-set, $color-index-selected);
-		$foreground-selected: nth($color-set, $color-index-foreground-selected);
+	@each $name, $color-set in tokens.$colors {
+		$base: nth($color-set, tokens.$color-index-base);
+		$dark: nth($color-set, tokens.$color-index-dark);
+		$background: nth($color-set, tokens.$color-index-background);
+		$background-selected: nth($color-set, tokens.$color-index-background-selected);
+		$selected: nth($color-set, tokens.$color-index-selected);
+		$foreground-selected: nth($color-set, tokens.$color-index-foreground-selected);
 
 		&.button-#{$name} {
 			color: $base;
@@ -230,10 +232,10 @@ $button-clear-selected-background-color: $selected-background-subtle !default;
 	}
 }
 
-$button-filled-background-color: $alternate-background-medium !default;
-$button-filled-background-color-hover: $alternate-background !default;
-$button-filled-text-color: $text-invert !default;
-$button-filled-background-color-selected: $secondary-selected !default;
+$button-filled-background-color: tokens.$alternate-background-medium !default;
+$button-filled-background-color-hover: tokens.$alternate-background !default;
+$button-filled-text-color: tokens.$text-invert !default;
+$button-filled-background-color-selected: tokens.$secondary-selected !default;
 
 .button.button-filled {
 	border-color: $button-filled-background-color;
@@ -252,19 +254,19 @@ $button-filled-background-color-selected: $secondary-selected !default;
 	}
 
 	&.is-loading::after {
-		@include loader;
+		@include mixins.loader;
 
 		border-color: transparent transparent $button-filled-text-color $button-filled-text-color !important;
 	}
 
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$hover: nth($color-set, $color-index-hover);
-		$active: nth($color-set, $color-index-active);
-		$invert: nth($color-set, $color-index-invert);
-		$background: nth($color-set, $color-index-background);
-		$selected: nth($color-set, $color-index-selected);
-		$selected-invert: nth($color-set, $color-index-foreground-selected-invert);
+	@each $name, $color-set in tokens.$colors {
+		$base: nth($color-set, tokens.$color-index-base);
+		$hover: nth($color-set, tokens.$color-index-hover);
+		$active: nth($color-set, tokens.$color-index-active);
+		$invert: nth($color-set, tokens.$color-index-invert);
+		$background: nth($color-set, tokens.$color-index-background);
+		$selected: nth($color-set, tokens.$color-index-selected);
+		$selected-invert: nth($color-set, tokens.$color-index-foreground-selected-invert);
 
 		&.button-#{$name} {
 			border-color: $base;
@@ -285,13 +287,13 @@ $button-filled-background-color-selected: $secondary-selected !default;
 			}
 
 			&.is-selected.is-loading::after {
-				@include loader;
+				@include mixins.loader;
 
 				border-color: transparent transparent $selected-invert $selected-invert !important;
 			}
 
 			&.is-loading::after {
-				@include loader;
+				@include mixins.loader;
 
 				border-color: transparent transparent $invert $invert !important;
 			}

package/src/components/buttons.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 /* stylelint-disable selector-max-specificity, max-nesting-depth */
 
 .buttons {
@@ -28,7 +31,7 @@
 		&.is-fullwidth-mobile {
 			margin-inline-end: 0;
 
-			@include tablet {
+			@include mixins.tablet {
 				margin-inline-end: 0.5rem;
 			}
 		}
@@ -45,13 +48,13 @@
 	&.buttons-addons {
 		.button {
 			&:not(:first-child) {
-				border-bottom-#{$user-left}-radius: 0;
-				border-top-#{$user-left}-radius: 0;
+				border-end-start-radius: 0;
+				border-start-start-radius: 0;
 			}
 
 			&:not(:last-child) {
-				border-bottom-#{$user-right}-radius: 0;
-				border-top-#{$user-right}-radius: 0;
+				border-end-end-radius: 0;
+				border-start-end-radius: 0;
 				margin-inline-end: -1px;
 			}
 
@@ -61,25 +64,25 @@
 
 			&:hover,
 			&.is-hovered {
-				z-index: $zindex-hover;
+				z-index: tokens.$zindex-hover;
 			}
 
 			&.is-focused,
 			&:active,
 			&.is-active,
 			&.is-selected {
-				z-index: $zindex-focus;
+				z-index: tokens.$zindex-focus;
 
 				&:hover {
-					z-index: $zindex-multi;
+					z-index: tokens.$zindex-multi;
 				}
 			}
 
-			@include focus-visible {
-				z-index: $zindex-focus;
+			@include mixins.focus-visible {
+				z-index: tokens.$zindex-focus;
 
 				&:hover {
-					z-index: $zindex-multi;
+					z-index: tokens.$zindex-multi;
 				}
 			}
 

package/src/components/card.scss

@@ -1,9 +1,12 @@
-$card-color: $text !default;
-$card-shadow: $box-shadow-light;
-$card-padding: $spacer-5;
-$card-border-radius: $border-radius-sm;
-$card-row-gap: $spacer-3 !default;
-$card-column-gap: $spacer-5 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$card-color: tokens.$text !default;
+$card-shadow: tokens.$box-shadow-light;
+$card-padding: tokens.$spacer-5;
+$card-border-radius: tokens.$border-radius-sm;
+$card-row-gap: tokens.$spacer-3 !default;
+$card-column-gap: tokens.$spacer-5 !default;
 
 .card {
 	display: flex;
@@ -12,10 +15,10 @@ $card-column-gap: $spacer-5 !default;
 	justify-content: flex-start;
 	max-width: 100%;
 	padding: $card-padding 0 0;
-	border: 1px solid $border-white-high-contrast;
+	border: 1px solid tokens.$border-white-high-contrast;
 	border-radius: $card-border-radius;
-	outline-color: $text;
-	background-color: $card-background;
+	outline-color: tokens.$text;
+	background-color: tokens.$card-background;
 	color: $card-color;
 	box-shadow: $card-shadow;
 
@@ -33,7 +36,7 @@ $card-column-gap: $spacer-5 !default;
 		display: grid;
 		flex-grow: 1;
 		padding: $card-padding;
-		grid-template: auto / 1fr $spacer-10;
+		grid-template: auto / 1fr tokens.$spacer-10;
 		gap: $card-row-gap $card-column-gap;
 		grid-template-areas:
 			'supertitle supertitle'
@@ -43,15 +46,15 @@ $card-column-gap: $spacer-5 !default;
 		/* stylelint-disable no-descending-specificity */
 
 		.card-title {
-			margin-block-end: $spacer-5;
+			margin-block-end: tokens.$spacer-5;
 		}
 	}
 
 	.card-template-icon {
 		margin-block-start: auto;
 		grid-area: icon;
-		width: $spacer-10;
-		height: $spacer-10;
+		width: tokens.$spacer-10;
+		height: tokens.$spacer-10;
 	}
 
 	.card-template-detail {
@@ -59,7 +62,7 @@ $card-column-gap: $spacer-5 !default;
 		flex-direction: column;
 		align-self: stretch;
 		justify-content: flex-end;
-		font-size: $font-size-9;
+		font-size: tokens.$font-size-9;
 		line-height: 1.25;
 		grid-area: detail;
 	}
@@ -75,7 +78,7 @@ $card-column-gap: $spacer-5 !default;
 
 			img,
 			svg {
-				@include overlay;
+				@include mixins.overlay;
 
 				display: block;
 				width: 100%;
@@ -98,10 +101,10 @@ $card-column-gap: $spacer-5 !default;
 	// optional prescriptive inner elements
 
 	.card-supertitle {
-		@include line-clamp(1);
+		@include mixins.line-clamp(1);
 
-		font-size: $font-size-9;
-		letter-spacing: $letter-spacing-wide;
+		font-size: tokens.$font-size-9;
+		letter-spacing: tokens.$letter-spacing-wide;
 		line-height: 1;
 		text-transform: uppercase;
 		grid-area: supertitle;
@@ -110,15 +113,15 @@ $card-column-gap: $spacer-5 !default;
 	// includes some resets for <a> and <button>
 
 	.card-title {
-		@include line-clamp(3);
+		@include mixins.line-clamp(3);
 
 		flex-grow: 1;
 		margin: 0;
 		padding: 0;
 		border: none;
-		color: $primary;
-		font-size: $font-size-7;
-		font-weight: $weight-semibold;
+		color: tokens.$primary;
+		font-size: tokens.$font-size-7;
+		font-weight: tokens.$weight-semibold;
 		line-height: 1.25;
 		text-align: start;
 		text-decoration: none;
@@ -134,7 +137,7 @@ $card-column-gap: $spacer-5 !default;
 		}
 
 		&:visited {
-			color: $visited;
+			color: tokens.$visited;
 		}
 	}
 
@@ -156,11 +159,11 @@ $card-column-gap: $spacer-5 !default;
 	}
 
 	.card-content-description {
-		@include line-clamp(4);
+		@include mixins.line-clamp(4);
 
 		max-height: inherit;
 		padding-block-end: 0;
-		font-size: $font-size-8;
+		font-size: tokens.$font-size-8;
 		line-height: 1.25;
 	}
 
@@ -168,7 +171,7 @@ $card-column-gap: $spacer-5 !default;
 		display: flex;
 		flex-wrap: nowrap;
 		justify-content: space-between;
-		border-block-start: 1px solid $border;
+		border-block-start: 1px solid tokens.$border;
 		margin-inline: $card-padding;
 
 		// Artificial alignment of card item, intended for use on when there's only a single .card-footer-items
@@ -232,14 +235,14 @@ $card-column-gap: $spacer-5 !default;
 		}
 	}
 
-	@include tablet {
+	@include mixins.tablet {
 		&.card-horizontal {
 			flex-flow: row wrap;
 
 			.card-content {
 				padding-inline-start: 0;
 				max-width: calc(100% - 7rem);
-				padding-inline-end: $spacer-10 + $spacer-5;
+				padding-inline-end: tokens.$spacer-10 + tokens.$spacer-5;
 			}
 
 			.card-footer {

package/src/components/code-block.scss

@@ -1,17 +1,21 @@
-$code-block-font-size: $font-size-8 !default;
-$code-block-border-color: $code-block-border !default;
-$code-block-border-width: $border-width !default;
-$code-block-border-radius: $border-radius !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+@use './button.scss' as button;
+
+$code-block-font-size: tokens.$font-size-8 !default;
+$code-block-border-color: tokens.$code-block-border !default;
+$code-block-border-width: tokens.$border-width !default;
+$code-block-border-radius: tokens.$border-radius !default;
 
 $code-block-header-min-height: 2rem !default;
-$code-block-header-color: $text !default;
-$code-block-header-background-color: $code-header !default;
-$code-block-header-font-weight: $weight-semibold !default;
-$code-block-header-gap: $spacer-2 !default;
-$code-block-header-padding-vertical: $spacer-1 !default;
-$code-block-header-padding-horizontal: $spacer-4 $spacer-3 !default;
+$code-block-header-color: tokens.$text !default;
+$code-block-header-background-color: tokens.$code-header !default;
+$code-block-header-font-weight: tokens.$weight-semibold !default;
+$code-block-header-gap: tokens.$spacer-2 !default;
+$code-block-header-padding-vertical: tokens.$spacer-1 !default;
+$code-block-header-padding-horizontal: tokens.$spacer-4 tokens.$spacer-3 !default;
 
-$code-block-control-padding: calc(0.125em - #{$button-border-width}) !default;
+$code-block-control-padding: calc(0.125em - #{button.$button-border-width}) !default;
 
 .code-block {
 	position: relative;
@@ -33,7 +37,7 @@ $code-block-control-padding: calc(0.125em - #{$button-border-width}) !default;
 		padding-block: $code-block-header-padding-vertical;
 		padding-inline: $code-block-header-padding-horizontal;
 
-		@include tablet {
+		@include mixins.tablet {
 			flex-wrap: nowrap;
 		}
 
@@ -49,14 +53,14 @@ $code-block-control-padding: calc(0.125em - #{$button-border-width}) !default;
 			.button {
 				min-height: auto;
 				outline-color: currentColor;
-				outline-offset: -$focus-width;
-				font-size: $button-sm-font-size;
+				outline-offset: -(tokens.$focus-width);
+				font-size: button.$button-sm-font-size;
 				padding-block: $code-block-control-padding;
 			}
 		}
 	}
 
 	.code-block-body {
-		@include code-block(true);
+		@include mixins.code-block(true);
 	}
 }

package/src/components/form/checkbox.scss

@@ -1,20 +1,23 @@
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
+
 /* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
 
-$checkbox-border-radius: $border-radius !default;
+$checkbox-border-radius: tokens.$border-radius !default;
 $checkbox-border-width: 0.0625em !default;
-$checkbox-unchecked-border-color: $control-border !default;
-$checkbox-invalid-border-color: $danger !default;
-$checkbox-color: $primary !default;
-$checkbox-check-color: $primary-invert !default;
-$checkbox-check-hover-color: $text-subtle !default;
+$checkbox-unchecked-border-color: tokens.$control-border !default;
+$checkbox-invalid-border-color: tokens.$danger !default;
+$checkbox-color: tokens.$primary !default;
+$checkbox-check-color: tokens.$primary-invert !default;
+$checkbox-check-hover-color: tokens.$text-subtle !default;
 $checkbox-size: 1.25em !default;
 $checkbox-check-height: 0.75em !default;
 $checkbox-check-top: 0.125em !default;
 $checkbox-check-width: 0.3125em !default;
 $checkbox-check-thickness: 0.125em !default;
-$checkbox-timing-function: $input-timing-function !default;
-$checkbox-duration: $input-transition-duration !default;
-$checkbox-spacing: $spacer-3 !default;
+$checkbox-timing-function: tokens.$input-timing-function !default;
+$checkbox-duration: tokens.$input-transition-duration !default;
+$checkbox-spacing: tokens.$spacer-3 !default;
 
 @mixin checkmark {
 	display: block;
@@ -63,15 +66,15 @@ $checkbox-spacing: $spacer-3 !default;
 	}
 
 	&.checkbox-sm {
-		@include control-sm;
+		@include mixins.control-sm;
 	}
 
 	&.checkbox-lg {
-		@include control-lg;
+		@include mixins.control-lg;
 	}
 
 	input[type='checkbox'] {
-		@include visually-hidden();
+		@include mixins.visually-hidden();
 
 		&:checked + .checkbox-check {
 			border-color: $checkbox-color;
@@ -96,7 +99,7 @@ $checkbox-spacing: $spacer-3 !default;
 			}
 		}
 
-		@include focus-visible {
+		@include mixins.focus-visible {
 			+ .checkbox-check {
 				@extend %focus;
 			}
@@ -106,11 +109,11 @@ $checkbox-spacing: $spacer-3 !default;
 	&.checkbox-muted {
 		input[type='checkbox'] {
 			&:checked + .checkbox-check {
-				border-color: $text-subtle;
-				background-color: $text-subtle;
+				border-color: tokens.$text-subtle;
+				background-color: tokens.$text-subtle;
 
 				&::before {
-					border-color: $text-invert;
+					border-color: tokens.$text-invert;
 				}
 			}
 		}

package/src/components/form/form.scss

@@ -1,22 +1,26 @@
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
+@use './label.scss' as label;
+
 /* stylelint-disable max-nesting-depth, selector-max-specificity  */
 
 $field-line-height: 1.5 !default;
-$field-error-color: $danger !default;
+$field-error-color: tokens.$danger !default;
 
 .field {
 	&:not(:last-child) {
-		margin-block-end: $spacer-4;
+		margin-block-end: tokens.$spacer-4;
 	}
 
 	.field-description {
-		margin-block-end: $spacer-3;
-		font-size: $font-size-8;
+		margin-block-end: tokens.$spacer-3;
+		font-size: tokens.$font-size-8;
 	}
 
 	.field-label {
-		@include label;
+		@include label.label;
 
-		margin-block-end: $spacer-3;
+		margin-block-end: tokens.$spacer-3;
 
 		&.field-label-inline {
 			display: inline-flex;
@@ -24,16 +28,16 @@ $field-error-color: $danger !default;
 			align-self: flex-end;
 		}
 
-		@include tablet {
+		@include mixins.tablet {
 			flex: 1 0 0;
 		}
 
 		&.field-label-sm {
-			font-size: $font-size-8;
+			font-size: tokens.$font-size-8;
 		}
 
 		&.field-label-lg {
-			font-size: $font-size-6;
+			font-size: tokens.$font-size-6;
 		}
 	}
 
@@ -43,7 +47,7 @@ $field-error-color: $danger !default;
 		}
 
 		&:not(:first-child) {
-			margin-block-start: $spacer-3;
+			margin-block-start: tokens.$spacer-3;
 
 			&.field-body-inline {
 				display: inline-flex;
@@ -54,14 +58,14 @@ $field-error-color: $danger !default;
 
 	.field-error {
 		color: $field-error-color;
-		font-size: $font-size-8;
+		font-size: tokens.$font-size-8;
 		line-height: $field-line-height;
 	}
 }
 
 .required-indicator::after,
 ::part(required-indicator)::after {
-	color: $danger;
+	color: tokens.$danger;
 	content: '*';
 	vertical-align: top;
 }

package/src/components/form/help.scss

@@ -1,7 +1,10 @@
-$help-color: $text !default;
-$help-danger-color: $danger !default;
-$help-success-color: $success !default;
-$help-font-size: $font-size-8 !default;
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
+
+$help-color: tokens.$text !default;
+$help-danger-color: tokens.$danger !default;
+$help-success-color: tokens.$success !default;
+$help-font-size: tokens.$font-size-8 !default;
 
 .help {
 	display: block;

package/src/components/form/index.scss

@@ -1,8 +1,8 @@
-@import './label.scss';
-@import './help.scss';
-@import './checkbox.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './select.scss';
-@import './radio.scss';
-@import './form.scss';
+@forward './label.scss';
+@forward './help.scss';
+@forward './checkbox.scss';
+@forward './input.scss';
+@forward './textarea.scss';
+@forward './select.scss';
+@forward './radio.scss';
+@forward './form.scss';