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

package/src/components/form/input.scss

@@ -1,27 +1,30 @@
-$input-color: $text !default;
-$input-background-color: $body-background !default;
-$input-border-color: $control-border !default;
-$input-border-bottom-color: $control-border-bottom !default;
-$input-placeholder-color: $text-subtle !default;
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
 
-$input-hover-color: $text !default;
-$input-hover-border-color: $default-hover !default;
-$input-focus-border-color: $primary !default;
+$input-color: tokens.$text !default;
+$input-background-color: tokens.$body-background !default;
+$input-border-color: tokens.$control-border !default;
+$input-border-bottom-color: tokens.$control-border-bottom !default;
+$input-placeholder-color: tokens.$text-subtle !default;
 
-$input-disabled-color: $text-subtle !default;
-$input-disabled-background-color: $body-background-medium !default;
-$input-disabled-border-color: $table-border-dark !default;
+$input-hover-color: tokens.$text !default;
+$input-hover-border-color: tokens.$default-hover !default;
+$input-focus-border-color: tokens.$primary !default;
 
-$input-danger-border-color: $danger !default;
-$input-success-border-color: $success !default;
+$input-disabled-color: tokens.$text-subtle !default;
+$input-disabled-background-color: tokens.$body-background-medium !default;
+$input-disabled-border-color: tokens.$table-border-dark !default;
+
+$input-danger-border-color: tokens.$danger !default;
+$input-success-border-color: tokens.$success !default;
 
 $input-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 
 $input-icon-size: 2.25em !default;
-$input-icon-color: $text-subtle !default;
+$input-icon-color: tokens.$text-subtle !default;
 
 .input {
-	@include control;
+	@include mixins.control;
 
 	width: 100%;
 	max-width: 100%;
@@ -45,7 +48,7 @@ $input-icon-color: $text-subtle !default;
 		color: $input-disabled-color;
 	}
 
-	@include focus-visible {
+	@include mixins.focus-visible {
 		@extend %focus;
 
 		border-block-end-color: $input-focus-border-color;
@@ -56,17 +59,17 @@ $input-icon-color: $text-subtle !default;
 	}
 
 	&.input-sm {
-		@include control-sm;
+		@include mixins.control-sm;
 	}
 
 	&.input-lg {
-		@include control-lg;
+		@include mixins.control-lg;
 	}
 
 	&.input-danger {
 		border-color: $input-danger-border-color;
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			border-color: $input-border-color;
 			border-block-end-color: $input-danger-border-color;
 			box-shadow: $input-focus-box-shadow-size $input-danger-border-color;
@@ -76,7 +79,7 @@ $input-icon-color: $text-subtle !default;
 	&.input-success {
 		border-color: $input-success-border-color;
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			border-color: $input-border-color;
 			border-block-end-color: $input-success-border-color;
 			box-shadow: $input-focus-box-shadow-size $input-success-border-color;
@@ -100,7 +103,7 @@ $input-icon-color: $text-subtle !default;
 				background: none;
 				color: transparent;
 				inset-inline-end: 0;
-				z-index: $zindex-dropdown;
+				z-index: tokens.$zindex-dropdown;
 			}
 		}
 	}
@@ -110,11 +113,11 @@ $input-icon-color: $text-subtle !default;
 		padding-inline-start: $input-icon-size;
 
 		&.input-icon-right {
-			padding-inline-start: $control-padding-horizontal;
+			padding-inline-start: mixins.$control-padding-horizontal;
 		}
 
 		+ .icon {
-			@include fill-current-color();
+			@include mixins.fill-current-color();
 
 			position: absolute;
 			inset-block-start: 0;
@@ -123,7 +126,7 @@ $input-icon-color: $text-subtle !default;
 			height: 100%;
 			color: $input-icon-color;
 			pointer-events: none;
-			z-index: $zindex-multi;
+			z-index: tokens.$zindex-multi;
 		}
 
 		&.input-sm {

package/src/components/form/label.scss

@@ -1,6 +1,9 @@
-$label-color: $text !default;
-$label-font-size: $font-size-7 !default;
-$label-font-weight: $weight-semibold !default;
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
+
+$label-color: tokens.$text !default;
+$label-font-size: tokens.$font-size-7 !default;
+$label-font-weight: tokens.$weight-semibold !default;
 
 @mixin label {
 	display: block;

package/src/components/form/radio.scss

@@ -1,13 +1,16 @@
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
+
 $radio-circle-size: 1.25em !default;
 $radio-dot-size: 0.625em !default;
 $radio-shadow-radius: 0.15em !default;
-$radio-border-color: $control-border !default;
-$radio-border-width: $control-border-width !default;
-$radio-dot-checked-color: $primary !default;
-$radio-dot-color: $text-subtle !default;
-$radio-dot-hover-unchecked-color: $control-border !default;
-$radio-timing-function: $input-timing-function !default;
-$radio-duration: $input-transition-duration !default;
+$radio-border-color: tokens.$control-border !default;
+$radio-border-width: mixins.$control-border-width !default;
+$radio-dot-checked-color: tokens.$primary !default;
+$radio-dot-color: tokens.$text-subtle !default;
+$radio-dot-hover-unchecked-color: tokens.$control-border !default;
+$radio-timing-function: tokens.$input-timing-function !default;
+$radio-duration: tokens.$input-transition-duration !default;
 $radio-animation: boop !default;
 $radio-spacing: 0.5em !default;
 
@@ -17,14 +20,14 @@ $radio-spacing: 0.5em !default;
 	width: $radio-dot-size;
 	height: $radio-dot-size;
 	margin: auto;
-	border-radius: $border-radius-rounded;
+	border-radius: tokens.$border-radius-rounded;
 	content: '';
 	overflow: hidden;
 }
 
 @mixin radio-dot-checked {
 	background: $radio-dot-checked-color;
-	box-shadow: inset 0 0 0 $radio-shadow-radius $body-background;
+	box-shadow: inset 0 0 0 $radio-shadow-radius tokens.$body-background;
 }
 
 .radio {
@@ -40,13 +43,13 @@ $radio-spacing: 0.5em !default;
 		width: $radio-circle-size;
 		height: $radio-circle-size;
 		border: $radio-border-width solid $radio-border-color;
-		border-radius: $border-radius-rounded;
-		background-color: $body-background;
+		border-radius: tokens.$border-radius-rounded;
+		background-color: tokens.$body-background;
 		color: $radio-dot-color;
 		cursor: pointer;
 		appearance: none;
 
-		@include forced-colors {
+		@include mixins.forced-colors {
 			border-color: CanvasText !important;
 			background-color: unset !important;
 
@@ -67,7 +70,7 @@ $radio-spacing: 0.5em !default;
 			@extend %focus;
 		}
 
-		@include focus-visible {
+		@include mixins.focus-visible {
 			@extend %focus;
 		}
 	}
@@ -80,7 +83,7 @@ $radio-spacing: 0.5em !default;
 		animation: $radio-animation $radio-duration $radio-timing-function 1;
 		border-color: $radio-dot-checked-color;
 
-		@include forced-colors {
+		@include mixins.forced-colors {
 			border-color: CanvasText !important;
 			background-color: unset !important;
 			box-shadow: none !important;
@@ -95,9 +98,9 @@ $radio-spacing: 0.5em !default;
 	&:hover {
 		.radio-dot:not(:checked):not([disabled]) {
 			background: $radio-dot-hover-unchecked-color;
-			box-shadow: inset 0 0 0 $radio-shadow-radius $body-background;
+			box-shadow: inset 0 0 0 $radio-shadow-radius tokens.$body-background;
 
-			@include forced-colors {
+			@include mixins.forced-colors {
 				background-color: unset !important;
 				box-shadow: none !important;
 

package/src/components/form/select.scss

@@ -1,30 +1,33 @@
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
+
 /* stylelint-disable selector-no-qualifying-type */
 
-$select-color: $text !default;
-$select-background-color: $body-background !default;
-$select-border-color: $control-border !default;
-$select-border-bottom-color: $control-border-bottom !default;
-$select-placeholder-color: $text-subtle !default;
+$select-color: tokens.$text !default;
+$select-background-color: tokens.$body-background !default;
+$select-border-color: tokens.$control-border !default;
+$select-border-bottom-color: tokens.$control-border-bottom !default;
+$select-placeholder-color: tokens.$text-subtle !default;
 
-$select-hover-color: $text !default;
-$select-hover-border-color: $default-hover !default;
-$select-focus-border-color: $primary !default;
+$select-hover-color: tokens.$text !default;
+$select-hover-border-color: tokens.$default-hover !default;
+$select-focus-border-color: tokens.$primary !default;
 
-$select-disabled-color: $text-subtle !default;
-$select-disabled-background-color: $body-background-medium !default;
-$select-disabled-border-color: $table-border-dark !default;
+$select-disabled-color: tokens.$text-subtle !default;
+$select-disabled-background-color: tokens.$body-background-medium !default;
+$select-disabled-border-color: tokens.$table-border-dark !default;
 
-$select-danger-border-color: $danger !default;
-$select-success-border-color: $success !default;
+$select-danger-border-color: tokens.$danger !default;
+$select-success-border-color: tokens.$success !default;
 
 $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 
 .select {
 	position: relative;
-	font-size: $control-font-size;
+	font-size: mixins.$control-font-size;
 
 	select {
-		@include control;
+		@include mixins.control;
 
 		width: 100%;
 		max-width: 100%;
@@ -40,7 +43,7 @@ $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 			overflow-y: auto;
 
 			option {
-				padding: $control-padding-vertical $control-padding-horizontal;
+				padding: mixins.$control-padding-vertical mixins.$control-padding-horizontal;
 			}
 		}
 
@@ -55,7 +58,7 @@ $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 			color: $select-disabled-color;
 		}
 
-		@include focus-visible {
+		@include mixins.focus-visible {
 			@extend %focus;
 
 			border-block-end-color: $select-focus-border-color;
@@ -68,15 +71,17 @@ $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 
 	&:not(.select-multiple) {
 		select {
-			padding-inline-end: calc($control-padding-horizontal + $chevron-arrow-actual-width);
+			padding-inline-end: calc(
+				mixins.$control-padding-horizontal + mixins.$chevron-arrow-actual-width
+			);
 		}
 
 		&::after {
-			@include chevron-down;
+			@include mixins.chevron-down;
 
 			display: block;
 			position: absolute;
-			inset-block-start: calc(50% - $chevron-arrow-actual-width / 2);
+			inset-block-start: calc(50% - mixins.$chevron-arrow-actual-width / 2);
 		}
 
 		&.select-disabled::after {
@@ -85,17 +90,17 @@ $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 	}
 
 	&.select-sm {
-		font-size: $control-sm-font-size;
+		font-size: mixins.$control-sm-font-size;
 	}
 
 	&.select-lg {
-		font-size: $control-lg-font-size;
+		font-size: mixins.$control-lg-font-size;
 	}
 
 	&.select-danger select {
 		border-color: $select-danger-border-color;
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			border-color: $select-border-color;
 			border-block-end-color: $select-danger-border-color;
 			box-shadow: $select-focus-box-shadow-size $select-danger-border-color;
@@ -105,7 +110,7 @@ $select-focus-box-shadow-size: 0 0.0625rem 0 0 !default;
 	&.select-success select {
 		border-color: $select-success-border-color;
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			border-color: $select-border-color;
 			border-block-end-color: $select-success-border-color;
 			box-shadow: $select-focus-box-shadow-size $select-success-border-color;

package/src/components/form/textarea.scss

@@ -1,26 +1,29 @@
-$textarea-color: $text !default;
-$textarea-background-color: $body-background !default;
-$textarea-border-color: $control-border !default;
-$textarea-border-bottom-color: $control-border-bottom !default;
-$textarea-placeholder-color: $text-subtle !default;
+@use '../../tokens/index.scss' as tokens;
+@use '../../mixins/index.scss' as mixins;
 
-$textarea-hover-color: $text !default;
-$textarea-hover-border-color: $default-hover !default;
-$textarea-focus-border-color: $primary !default;
+$textarea-color: tokens.$text !default;
+$textarea-background-color: tokens.$body-background !default;
+$textarea-border-color: tokens.$control-border !default;
+$textarea-border-bottom-color: tokens.$control-border-bottom !default;
+$textarea-placeholder-color: tokens.$text-subtle !default;
 
-$textarea-disabled-color: $text-subtle !default;
-$textarea-disabled-background-color: $body-background-medium !default;
-$textarea-disabled-border-color: $table-border-dark !default;
+$textarea-hover-color: tokens.$text !default;
+$textarea-hover-border-color: tokens.$default-hover !default;
+$textarea-focus-border-color: tokens.$primary !default;
 
-$textarea-danger-border-color: $danger !default;
-$textarea-success-border-color: $success !default;
+$textarea-disabled-color: tokens.$text-subtle !default;
+$textarea-disabled-background-color: tokens.$body-background-medium !default;
+$textarea-disabled-border-color: tokens.$table-border-dark !default;
+
+$textarea-danger-border-color: tokens.$danger !default;
+$textarea-success-border-color: tokens.$success !default;
 
 $textarea-focus-box-shadow-size: 0 0.125rem 0 0 !default;
 
-$textarea-margin-spacing: $layout-1 !default;
+$textarea-margin-spacing: tokens.$layout-1 !default;
 
 .textarea {
-	@include control;
+	@include mixins.control;
 
 	display: block;
 	width: 100%;
@@ -56,7 +59,7 @@ $textarea-margin-spacing: $layout-1 !default;
 		color: $textarea-disabled-color;
 	}
 
-	@include focus-visible {
+	@include mixins.focus-visible {
 		@extend %focus;
 
 		border-block-end-color: $textarea-focus-border-color;
@@ -73,7 +76,7 @@ $textarea-margin-spacing: $layout-1 !default;
 	&.textarea-danger {
 		border-color: $textarea-danger-border-color;
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			border-color: $textarea-border-color;
 			border-block-end-color: $textarea-danger-border-color;
 			box-shadow: $textarea-focus-box-shadow-size $textarea-danger-border-color;
@@ -83,7 +86,7 @@ $textarea-margin-spacing: $layout-1 !default;
 	&.textarea-success {
 		border-color: $textarea-success-border-color;
 
-		@include focus-visible() {
+		@include mixins.focus-visible() {
 			border-color: $textarea-border-color;
 			border-block-end-color: $textarea-success-border-color;
 			box-shadow: $textarea-focus-box-shadow-size $textarea-success-border-color;
@@ -97,18 +100,18 @@ $textarea-divider-radius: 0.5rem !default;
 .textarea-form {
 	display: grid;
 	gap: $textarea-form-gap;
-	padding-block: $control-padding-vertical;
-	padding-inline: $control-padding-horizontal;
+	padding-block: mixins.$control-padding-vertical;
+	padding-inline: mixins.$control-padding-horizontal;
 	transition: box-shadow 300ms linear;
-	border-width: $control-border-width;
+	border-width: mixins.$control-border-width;
 	border-style: solid;
-	border-radius: $border-radius;
+	border-radius: tokens.$border-radius;
 	border-color: $textarea-border-color;
 	background-color: $textarea-background-color;
-	font-size: $control-font-size;
+	font-size: mixins.$control-font-size;
 	border-block-end-color: $textarea-border-bottom-color;
 
-	@include prefers-reduced-motion {
+	@include mixins.prefers-reduced-motion {
 		animation-duration: 0s;
 	}
 
@@ -137,7 +140,7 @@ $textarea-divider-radius: 0.5rem !default;
 
 	.textarea-form-footer-divider {
 		height: 70%;
-		border: 1px solid $control-border;
+		border: 1px solid tokens.$control-border;
 		border-radius: $textarea-divider-radius;
 	}
 

package/src/components/gradient-card.scss

@@ -1,14 +1,18 @@
-$gradient-card-padding: $layout-2 !default;
-$gradient-card-border-radius: $border-radius-lg !default; //6px
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$gradient-card-padding: tokens.$layout-2 !default;
+$gradient-card-border-radius: tokens.$border-radius-lg !default; //6px
 
 .gradient-card {
-	border: $border-width-md solid transparent;
+	border: tokens.$border-width-md solid transparent;
 	border-radius: $gradient-card-border-radius;
-	background: linear-gradient(90deg, $gradient-vivid-start, $gradient-vivid-end) border-box;
+	background: linear-gradient(90deg, tokens.$gradient-vivid-start, tokens.$gradient-vivid-end)
+		border-box;
 
 	.gradient-card-content {
 		padding: $gradient-card-padding;
 		border-radius: inherit;
-		background-color: $body-background;
+		background-color: tokens.$body-background;
 	}
 }

package/src/components/gradient.scss

@@ -1,6 +1,9 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $border-gradient-colors: (
-	'body': $body-background,
-	'body-accent': $body-background-accent
+	'body': tokens.$body-background,
+	'body-accent': tokens.$body-background-accent
 ) !default;
 
 @each $name, $var in $border-gradient-colors {
@@ -45,12 +48,12 @@ $border-gradient-direction: (
 			inset-inline: 0;
 		}
 
-		@include forced-colors {
+		@include mixins.forced-colors {
 			display: none !important;
 		}
 	}
 
-	@include tablet {
+	@include mixins.tablet {
 		.gradient-border-to-#{$direction}-tablet:before {
 			border-image: linear-gradient(
 				to #{$direction},
@@ -73,11 +76,11 @@ $border-gradient-direction: (
 	}
 }
 
-@each $name, $gradient in $gradients {
-	$colorStart: nth($gradient, $gradient-color-start-index);
-	$colorEnd: nth($gradient, $gradient-color-end-index);
+@each $name, $gradient in tokens.$gradients {
+	$colorStart: nth($gradient, tokens.$gradient-color-start-index);
+	$colorEnd: nth($gradient, tokens.$gradient-color-end-index);
 
 	.gradient-text-#{$name} {
-		@include gradient-text($colorStart, $colorEnd);
+		@include mixins.gradient-text($colorStart, $colorEnd);
 	}
 }

package/src/components/hero.scss

@@ -1,7 +1,10 @@
-$hero-padding-xs: $layout-4 !default;
-$hero-padding-sm: $layout-5 !default;
-$hero-padding-default: $layout-6 !default;
-$hero-padding-lg: $layout-7 !default;
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
+$hero-padding-xs: tokens.$layout-4 !default;
+$hero-padding-sm: tokens.$layout-5 !default;
+$hero-padding-default: tokens.$layout-6 !default;
+$hero-padding-lg: tokens.$layout-7 !default;
 
 $hero-min-height-xs: 200px !default;
 $hero-min-height-sm: 300px !default;
@@ -11,10 +14,10 @@ $hero-detail-max-width: 500px !default;
 $hero-content-half-width: 50% !default;
 $hero-content-fluid-width: 45% !default;
 $hero-details-content-fluid-width: 35% !default;
-$hero-content-width: $reading-max-width !default;
+$hero-content-width: tokens.$reading-max-width !default;
 
-$hero-image-width: calc((100% - 2 * $layout-gap) * 0.55) !default;
-$hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !default;
+$hero-image-width: calc((100% - 2 * tokens.$layout-gap) * 0.55) !default;
+$hero-image-width-widescreen: calc((100% - 2 * tokens.$layout-widescreen-gap) * 0.55) !default;
 
 .hero {
 	@extend %layout-gap;
@@ -26,10 +29,10 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 	justify-content: space-between;
 
 	.hero-content {
-		z-index: $zindex-active;
+		z-index: tokens.$zindex-active;
 		padding-block: $hero-padding-sm;
 
-		@include desktop {
+		@include mixins.desktop {
 			width: $hero-content-fluid-width;
 			min-height: $hero-min-height-default;
 			padding-block: $hero-padding-default;
@@ -45,13 +48,13 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 		display: flex;
 		padding-block: $hero-padding-xs;
 
-		@include tablet {
+		@include mixins.tablet {
 			justify-content: flex-end;
 			padding-block: $hero-padding-sm;
 			padding-inline-start: $hero-padding-xs;
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			min-height: $hero-min-height-default;
 			padding-block: $hero-padding-default;
 			padding-inline: $hero-padding-sm;
@@ -60,14 +63,14 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 		.hero-details-card {
 			align-self: flex-start;
 			backdrop-filter: blur(20px);
-			background-color: #{$body-background};
+			background-color: #{tokens.$body-background};
 
-			@include desktop {
+			@include mixins.desktop {
 				max-width: $hero-detail-max-width;
 				background: linear-gradient(
 					116deg,
-					#{$body-background} 23.94%,
-					#{$border-white-high-contrast} 200%
+					#{tokens.$body-background} 23.94%,
+					#{tokens.$border-white-high-contrast} 200%
 				);
 				margin-inline-start: $hero-padding-xs;
 			}
@@ -76,14 +79,14 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 
 	&:not(.hero-image) {
 		.hero-content {
-			@include desktop {
+			@include mixins.desktop {
 				width: 100%;
 				max-width: $hero-content-width;
 			}
 		}
 	}
 
-	@include desktop {
+	@include mixins.desktop {
 		&.hero-xs {
 			.hero-content {
 				min-height: $hero-min-height-xs;
@@ -108,20 +111,20 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 
 	.hero-card {
 		position: relative;
-		padding: $spacer-5;
+		padding: tokens.$spacer-5;
 		border: none;
 		background-color: transparent;
 		z-index: 1;
 
-		@include tablet {
-			padding: $spacer-10;
+		@include mixins.tablet {
+			padding: tokens.$spacer-10;
 		}
 
-		@include desktop {
-			border-inline: 1px solid $border;
-			border-block-end: 1px solid $border;
-			border-end-start-radius: $border-radius-lg;
-			border-end-end-radius: $border-radius-lg;
+		@include mixins.desktop {
+			border-inline: 1px solid tokens.$border;
+			border-block-end: 1px solid tokens.$border;
+			border-end-start-radius: tokens.$border-radius-lg;
+			border-end-end-radius: tokens.$border-radius-lg;
 		}
 	}
 
@@ -150,15 +153,15 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
 		background-repeat: no-repeat;
 		background-size: cover;
 		content: ' ';
-		inset-inline-end: $layout-gap;
+		inset-inline-end: tokens.$layout-gap;
 
-		@include desktop {
+		@include mixins.desktop {
 			display: block;
 		}
 
-		@include widescreen {
+		@include mixins.widescreen {
 			width: $hero-image-width-widescreen;
-			inset-inline-end: $layout-widescreen-gap;
+			inset-inline-end: tokens.$layout-widescreen-gap;
 		}
 
 		@media (forced-colors: active) {

package/src/components/icon.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $features-icon: true !default;
 $icon-dimensions: 1em !default;
 

package/src/components/image.scss

@@ -1,3 +1,6 @@
+@use '../tokens/index.scss' as tokens;
+@use '../mixins/index.scss' as mixins;
+
 $dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
 
 .image {
@@ -27,14 +30,14 @@ $dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
 			height: $dimension * 1px;
 		}
 
-		@include tablet {
+		@include mixins.tablet {
 			&.image-#{$dimension}x#{$dimension}-tablet {
 				width: $dimension * 1px;
 				height: $dimension * 1px;
 			}
 		}
 
-		@include desktop {
+		@include mixins.desktop {
 			&.image-#{$dimension}x#{$dimension}-desktop {
 				width: $dimension * 1px;
 				height: $dimension * 1px;