@lucca-front/scss 20.3.0-rc.3 → 20.3.0-rc.4

package/src/commons/utils/index.scss

@@ -11,695 +11,693 @@
 
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
-@layer utils {
-	%animatedAll {
-		animation-duration: var(--commons-animations-duration, var(--commons-animations-durations-standard));
-		animation-timing-function: var(--commons-animations-function);
+%animatedAll {
+	animation-duration: var(--commons-animations-duration, var(--commons-animations-durations-standard));
+	animation-timing-function: var(--commons-animations-function);
 
-		&.mod-animation-duration-fast {
-			--commons-animations-duration: var(--commons-animations-durations-fast);
-		}
+	&.mod-animation-duration-fast {
+		--commons-animations-duration: var(--commons-animations-durations-fast);
+	}
 
-		&.mod-animation-duration-slow {
-			--commons-animations-duration: var(--commons-animations-durations-slow);
-		}
+	&.mod-animation-duration-slow {
+		--commons-animations-duration: var(--commons-animations-durations-slow);
 	}
+}
 
-	%animated {
-		&FadeIn,
-		&FadeOut {
-			animation-name: fadeIn;
+%animated {
+	&FadeIn,
+	&FadeOut {
+		animation-name: fadeIn;
 
-			@include keyframe.fadeIn;
-		}
+		@include keyframe.fadeIn;
+	}
 
-		&ScaleIn,
-		&ScaleOut {
-			animation-name: scaleIn;
+	&ScaleIn,
+	&ScaleOut {
+		animation-name: scaleIn;
 
-			@include keyframe.scaleIn;
-		}
+		@include keyframe.scaleIn;
+	}
 
-		&ScaleInTop,
-		&ScaleOutTop {
-			animation-name: scaleInTop;
+	&ScaleInTop,
+	&ScaleOutTop {
+		animation-name: scaleInTop;
 
-			@include keyframe.scaleIn;
-		}
-
-		&ScaleInRight,
-		&ScaleOutRight {
-			animation-name: scaleInRight;
+		@include keyframe.scaleIn;
+	}
 
-			@include keyframe.scaleInRight;
-		}
+	&ScaleInRight,
+	&ScaleOutRight {
+		animation-name: scaleInRight;
 
-		&ScaleInBottom,
-		&ScaleOutBottom {
-			animation-name: scaleInBottom;
+		@include keyframe.scaleInRight;
+	}
 
-			@include keyframe.scaleInBottom;
-		}
+	&ScaleInBottom,
+	&ScaleOutBottom {
+		animation-name: scaleInBottom;
 
-		&ScaleInLeft,
-		&ScaleOutLeft {
-			animation-name: scaleInLeft;
+		@include keyframe.scaleInBottom;
+	}
 
-			@include keyframe.scaleInLeft;
-		}
+	&ScaleInLeft,
+	&ScaleOutLeft {
+		animation-name: scaleInLeft;
 
-		&SlideIn,
-		&SlideInTop,
-		&SlideOut,
-		&SlideOutTop {
-			animation-name: slideIn;
+		@include keyframe.scaleInLeft;
+	}
 
-			@include keyframe.slideIn;
-		}
+	&SlideIn,
+	&SlideInTop,
+	&SlideOut,
+	&SlideOutTop {
+		animation-name: slideIn;
 
-		&SlideInRight,
-		&SlideOutRight {
-			animation-name: slideInRight;
+		@include keyframe.slideIn;
+	}
 
-			@include keyframe.slideInRight;
-		}
+	&SlideInRight,
+	&SlideOutRight {
+		animation-name: slideInRight;
 
-		&SlideInBottom,
-		&SlideOutBottom {
-			animation-name: slideInBottom;
+		@include keyframe.slideInRight;
+	}
 
-			@include keyframe.slideInBottom;
-		}
+	&SlideInBottom,
+	&SlideOutBottom {
+		animation-name: slideInBottom;
 
-		&SlideInLeft,
-		&SlideOutLeft {
-			animation-name: slideInLeft;
+		@include keyframe.slideInBottom;
+	}
 
-			@include keyframe.slideInLeft;
-		}
+	&SlideInLeft,
+	&SlideOutLeft {
+		animation-name: slideInLeft;
 
-		&Shake {
-			animation-name: shake;
+		@include keyframe.slideInLeft;
+	}
 
-			@include keyframe.shake;
-		}
+	&Shake {
+		animation-name: shake;
 
-		&Pulse {
-			animation-name: pulse;
-			animation-direction: alternate;
-			animation-iteration-count: var(--commons-animations-iteration-count);
+		@include keyframe.shake;
+	}
 
-			@include keyframe.pulse;
-		}
+	&Pulse {
+		animation-name: pulse;
+		animation-direction: alternate;
+		animation-iteration-count: var(--commons-animations-iteration-count);
 
-		&FadeOut,
-		&SlideOut,
-		&SlideOutTop,
-		&SlideOutRight,
-		&SlideOutBottom,
-		&SlideOutLeft,
-		&ScaleOut,
-		&ScaleOutTop,
-		&ScaleOutRight,
-		&ScaleOutBottom,
-		&ScaleOutLeft {
-			animation-direction: reverse;
-		}
+		@include keyframe.pulse;
 	}
 
-	%mask {
-		@include a11y.mask('!important');
+	&FadeOut,
+	&SlideOut,
+	&SlideOutTop,
+	&SlideOutRight,
+	&SlideOutBottom,
+	&SlideOutLeft,
+	&ScaleOut,
+	&ScaleOutTop,
+	&ScaleOutRight,
+	&ScaleOutBottom,
+	&ScaleOutLeft {
+		animation-direction: reverse;
 	}
+}
 
-	%clearfix {
-		@include reset.clearfix('!important');
-	}
+%mask {
+	@include a11y.mask('!important');
+}
 
-	%clearBoth {
-		@include reset.clear('both', '!important');
-	}
+%clearfix {
+	@include reset.clearfix('!important');
+}
 
-	%clearInlineStart {
-		@include reset.clear('both', '!important');
-	}
+%clearBoth {
+	@include reset.clear('both', '!important');
+}
 
-	%clearInlineEnd {
-		@include reset.clear('inline-end', '!important');
-	}
+%clearInlineStart {
+	@include reset.clear('both', '!important');
+}
 
-	%listReset {
-		@include reset.list('!important');
-	}
+%clearInlineEnd {
+	@include reset.clear('inline-end', '!important');
+}
 
-	%descriptionListReset {
-		@include reset.list($list: 'dl', $suffix: '!important');
-	}
+%listReset {
+	@include reset.list('!important');
+}
 
-	%summaryReset {
-		@include reset.summary('!important');
-	}
+%descriptionListReset {
+	@include reset.list($list: 'dl', $suffix: '!important');
+}
 
-	%buttonReset {
-		@include reset.button('!important');
-	}
+%summaryReset {
+	@include reset.summary('!important');
+}
 
-	%ellipsis {
-		@include text.ellipsis('!important');
-	}
+%buttonReset {
+	@include reset.button('!important');
+}
 
-	%h1 {
-		font: var(--pr-t-font-heading-1);
-		color: var(--pr-t-color-text-heading);
+%ellipsis {
+	@include text.ellipsis('!important');
+}
 
-		&.mod-XXXL {
-			// Deprecated
-			@include title.XXXL;
-		}
-	}
+%h1 {
+	font: var(--pr-t-font-heading-1);
+	color: var(--pr-t-color-text-heading);
 
-	%h2 {
-		font: var(--pr-t-font-heading-2);
-		color: var(--pr-t-color-text-heading);
+	&.mod-XXXL {
+		// Deprecated
+		@include title.XXXL;
 	}
+}
 
-	%h3 {
-		font: var(--pr-t-font-heading-3);
-		color: var(--pr-t-color-text-heading);
-	}
+%h2 {
+	font: var(--pr-t-font-heading-2);
+	color: var(--pr-t-color-text-heading);
+}
 
-	%h4 {
-		font: var(--pr-t-font-heading-4);
-		color: var(--pr-t-color-text-heading);
-	}
+%h3 {
+	font: var(--pr-t-font-heading-3);
+	color: var(--pr-t-color-text-heading);
+}
 
-	%h5 {
-		@include title.h5;
-	}
+%h4 {
+	font: var(--pr-t-font-heading-4);
+	color: var(--pr-t-color-text-heading);
+}
 
-	%h6 {
-		@include title.h6;
-	}
+%h5 {
+	@include title.h5;
+}
 
-	%bodyM {
-		font: var(--pr-t-font-body-M);
-	}
+%h6 {
+	@include title.h6;
+}
 
-	%bodyS {
-		font: var(--pr-t-font-body-S);
-	}
+%bodyM {
+	font: var(--pr-t-font-body-M);
+}
 
-	%bodyXS {
-		font: var(--pr-t-font-body-XS);
-	}
+%bodyS {
+	font: var(--pr-t-font-body-S);
+}
 
-	%textLeft {
-		text-align: start !important;
-	}
+%bodyXS {
+	font: var(--pr-t-font-body-XS);
+}
 
-	%textRight {
-		text-align: end !important;
-	}
+%textLeft {
+	text-align: start !important;
+}
 
-	%textCenter {
-		text-align: center !important;
-	}
+%textRight {
+	text-align: end !important;
+}
 
-	%textLight {
-		color: var(--palettes-neutral-600) !important;
-	}
+%textCenter {
+	text-align: center !important;
+}
 
-	%textPlaceholder {
-		color: var(--palettes-neutral-400) !important;
-	}
+%textLight {
+	color: var(--palettes-neutral-600) !important;
+}
 
-	%textDefault {
-		color: var(--palettes-neutral-700) !important;
-	}
+%textPlaceholder {
+	color: var(--palettes-neutral-400) !important;
+}
 
-	%fontWeightRegular {
-		font-weight: 400 !important;
-	}
+%textDefault {
+	color: var(--palettes-neutral-700) !important;
+}
 
-	%fontWeightSemiBold {
-		font-weight: 600 !important;
-	}
+%fontWeightRegular {
+	font-weight: 400 !important;
+}
 
-	%noSpinButtons {
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			appearance: none !important;
-		}
+%fontWeightSemiBold {
+	font-weight: 600 !important;
+}
 
-		&[type='number'] {
-			appearance: textfield !important;
-		}
+%noSpinButtons {
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		appearance: none !important;
 	}
 
-	%fontFamily {
-		font-family: var(--pr-t-font-family) !important;
+	&[type='number'] {
+		appearance: textfield !important;
 	}
+}
 
-	%fontFamilyCursive {
-		font-family: var(--pr-t-font-family-cursive) !important;
+%fontFamily {
+	font-family: var(--pr-t-font-family) !important;
+}
+
+%fontFamilyCursive {
+	font-family: var(--pr-t-font-family-cursive) !important;
+}
+
+%fontFamilyBrand {
+	font-family: var(--pr-t-font-family-brand) !important;
+}
+
+%focusVisible {
+	&:focus-visible {
+		@include a11y.focusVisible;
 	}
+}
 
-	%fontFamilyBrand {
-		font-family: var(--pr-t-font-family-brand) !important;
+
+
+[data-content-before] {
+	&::before {
+		content: attr(data-content-before);
 	}
+}
 
-	%focusVisible {
-		&:focus-visible {
-			@include a11y.focusVisible;
-		}
+[data-content-after] {
+	&::after {
+		content: attr(data-content-after);
 	}
+}
+
+[class*='pr-u-animated'] {
+	@extend %animatedAll;
+}
+
+.pr-u-animated {
+	@extend %animated;
+}
+
+.pr-u-mask {
+	@extend %mask;
+}
+
+.pr-u-clearfix {
+	@extend %clearfix;
+}
+
+// clear is deprecated
+.pr-u-clearBoth,
+.pr-u-clear {
+	@extend %clearBoth;
+}
+
+// clearLeft is deprecated
+.pr-u-clearInlineStart,
+.pr-u-clearLeft {
+	@extend %clearInlineStart;
+}
+
+// clearRight is deprecated
+.pr-u-clearInlineEnd,
+.pr-u-clearRight {
+	@extend %clearInlineEnd;
+}
+
+.pr-u-listReset {
+	@extend %listReset;
+}
+
+.pr-u-descriptionListReset {
+	@extend %descriptionListReset;
+}
+
+.pr-u-summaryReset {
+	@extend %summaryReset;
+}
 
+.pr-u-buttonReset {
+	@extend %buttonReset;
+}
 
+.pr-u-ellipsis {
+	@extend %ellipsis;
+}
 
-	[data-content-before] {
-		&::before {
-			content: attr(data-content-before);
+.pr-u-h1 {
+	@extend %h1;
+}
+
+.pr-u-h2 {
+	@extend %h2;
+}
+
+.pr-u-h3 {
+	@extend %h3;
+}
+
+.pr-u-h4 {
+	@extend %h4;
+}
+
+.pr-u-h5 {
+	// Deprecated
+	@extend %h5;
+}
+
+.pr-u-h6 {
+	// Deprecated
+	@extend %h6;
+}
+
+.pr-u-bodyM {
+	@extend %bodyM;
+}
+
+.pr-u-bodyS {
+	@extend %bodyS;
+}
+
+.pr-u-bodyXS {
+	@extend %bodyXS;
+}
+
+// textLeft is deprecated
+.pr-u-textLeft {
+	@extend %textLeft;
+}
+
+// textRight is deprecated
+.pr-u-textRight {
+	@extend %textRight;
+}
+
+// textCenter is deprecated
+.pr-u-textCenter {
+	@extend %textCenter;
+}
+
+.pr-u-textLight {
+	@extend %textLight;
+}
+
+.pr-u-textPlaceholder {
+	@extend %textPlaceholder;
+}
+
+.pr-u-textDefault {
+	@extend %textDefault;
+}
+
+.pr-u-fontWeightRegular {
+	@extend %fontWeightRegular;
+}
+
+.pr-u-fontWeightSemiBold {
+	@extend %fontWeightSemiBold;
+}
+
+.pr-u-noSpinButtons {
+	@extend %noSpinButtons;
+}
+
+.pr-u-fontFamily {
+	@extend %fontFamily;
+}
+
+.pr-u-fontFamilyCursive {
+	@extend %fontFamilyCursive;
+}
+
+.pr-u-fontFamilyBrand {
+	@extend %fontFamilyBrand;
+}
+
+.pr-u-focusVisible {
+	@extend %focusVisible;
+}
+
+@include core.classes('float', core.$float);
+@include core.classes('vertical-align', core.$verticalAlign);
+@include core.classes('white-space', core.$whiteSpace);
+@include core.classes('display', core.$displays);
+@include core.classes('flex-direction', core.$direction);
+@include core.classes('flex-wrap', core.$wrap);
+@include core.classes('justify-content', core.$justify);
+@include core.classes('align-items', core.$align);
+@include core.classes('flex-grow', core.$flex);
+@include core.classes('flex-shrink', core.$flex);
+@include core.classes('flex-basis', core.$basis);
+@include core.classes('order', core.$order);
+@include core.classes('align-self', core.$align);
+@include core.classes('position', core.$position);
+
+@include core.classes('width', core.$contents);
+@include core.classes('height', core.$contents);
+@include core.classes('min-width', '0');
+@include core.classes('min-height', '0');
+
+@include core.classes('inline-size', core.$contents);
+@include core.classes('block-size', core.$contents);
+@include core.classes('min-inline-size', '0');
+@include core.classes('min-block-size', '0');
+@include core.classes('max-inline-size', core.$contents);
+
+@include core.classes('visibility', core.$visibility);
+@include core.classes('font-weight', core.$fontWeight);
+@include core.classes('font-style', core.$fontStyle);
+@include core.classes('pointer-events', core.$pointerEvents);
+@include core.classes('cursor', core.$cursor);
+@include core.classes('text-align', core.$textAlign);
+@include core.classes('text-decoration', core.$decoration);
+@include core.classes('overflow', core.$overflow);
+
+@media (prefers-reduced-motion: no-preference) {
+	@include core.classes('scroll-behavior', core.$scrollBehavior);
+}
+
+@media only print {
+	@include core.classes('display', core.$displays, $prefix: 'onlyPrint');
+}
+
+%displayNone {
+	display: none;
+}
+
+@each $display in core.$displays {
+	@if $display != 'none' {
+		.pr-u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
+			@extend %displayNone;
 		}
 	}
+}
 
-	[data-content-after] {
-		&::after {
-			content: attr(data-content-after);
+%inset0 {
+	inset: 0 !important;
+}
+
+@each $direction in core.$boxDirection {
+	@if $direction == '' {
+		// insetReset is deprecated
+		.pr-u-inset0,
+		.pr-u-insetReset {
+			@extend %inset0;
+		}
+	} @else if $direction == 'top' or $direction == 'bottom' or $direction == 'left' or $direction == 'right' {
+		// Reset is deprecated
+		.pr-u-#{$direction}0,
+		.pr-u-#{$direction}Reset {
+			#{$direction}: 0 !important;
+		}
+	} @else {
+		@each $boxModel in core.$boxModel {
+			@if $boxModel != 'border' {
+				.pr-u-#{$boxModel}#{transform.capitalize($direction)}0 {
+					#{$boxModel}-#{$direction}: 0 !important;
+				}
+			}
 		}
 	}
+}
 
-	[class*='pr-u-animated'] {
+@include core.spacings;
+@include core.sizes;
+@include core.borderRadius;
+@include core.palettes;
+@include core.borderRadiusTokens;
+
+// Deprecated .u- utilities
+// Delete when all utilities are prefixed in .pr-u-
+@if config.$deprecatedUtilityPrefix {
+	[class*='u-animated'] {
 		@extend %animatedAll;
 	}
 
-	.pr-u-animated {
+	.u-animated {
 		@extend %animated;
 	}
 
-	.pr-u-mask {
+	.u-mask {
 		@extend %mask;
 	}
 
-	.pr-u-clearfix {
+	.u-clearfix {
 		@extend %clearfix;
 	}
 
 	// clear is deprecated
-	.pr-u-clearBoth,
-	.pr-u-clear {
+	.u-clearBoth,
+	.u-clear {
 		@extend %clearBoth;
 	}
 
 	// clearLeft is deprecated
-	.pr-u-clearInlineStart,
-	.pr-u-clearLeft {
+	.u-clearInlineStart,
+	.u-clearLeft {
 		@extend %clearInlineStart;
 	}
 
 	// clearRight is deprecated
-	.pr-u-clearInlineEnd,
-	.pr-u-clearRight {
+	.u-clearInlineEnd,
+	.u-clearRight {
 		@extend %clearInlineEnd;
 	}
 
-	.pr-u-listReset {
+	.u-listReset {
 		@extend %listReset;
 	}
 
-	.pr-u-descriptionListReset {
+	.u-descriptionListReset {
 		@extend %descriptionListReset;
 	}
 
-	.pr-u-summaryReset {
+	.u-summaryReset {
 		@extend %summaryReset;
 	}
 
-	.pr-u-buttonReset {
+	.u-buttonReset {
 		@extend %buttonReset;
 	}
 
-	.pr-u-ellipsis {
+	.u-ellipsis {
 		@extend %ellipsis;
 	}
 
-	.pr-u-h1 {
+	.u-h1 {
 		@extend %h1;
 	}
 
-	.pr-u-h2 {
+	.u-h2 {
 		@extend %h2;
 	}
 
-	.pr-u-h3 {
+	.u-h3 {
 		@extend %h3;
 	}
 
-	.pr-u-h4 {
+	.u-h4 {
 		@extend %h4;
 	}
 
-	.pr-u-h5 {
+	.u-h5 {
 		// Deprecated
 		@extend %h5;
 	}
 
-	.pr-u-h6 {
+	.u-h6 {
 		// Deprecated
 		@extend %h6;
 	}
 
-	.pr-u-bodyM {
+	.u-bodyM {
 		@extend %bodyM;
 	}
 
-	.pr-u-bodyS {
+	.u-bodyS {
 		@extend %bodyS;
 	}
 
-	.pr-u-bodyXS {
+	.u-bodyXS {
 		@extend %bodyXS;
 	}
 
 	// textLeft is deprecated
-	.pr-u-textLeft {
+	.u-textLeft {
 		@extend %textLeft;
 	}
 
 	// textRight is deprecated
-	.pr-u-textRight {
+	.u-textRight {
 		@extend %textRight;
 	}
 
 	// textCenter is deprecated
-	.pr-u-textCenter {
+	.u-textCenter {
 		@extend %textCenter;
 	}
 
-	.pr-u-textLight {
+	.u-textLight {
 		@extend %textLight;
 	}
 
-	.pr-u-textPlaceholder {
+	.u-textPlaceholder {
 		@extend %textPlaceholder;
 	}
 
-	.pr-u-textDefault {
+	.u-textDefault {
 		@extend %textDefault;
 	}
 
-	.pr-u-fontWeightRegular {
+	.u-fontWeightRegular {
 		@extend %fontWeightRegular;
 	}
 
-	.pr-u-fontWeightSemiBold {
+	.u-fontWeightSemiBold {
 		@extend %fontWeightSemiBold;
 	}
 
-	.pr-u-noSpinButtons {
+	.u-noSpinButtons {
 		@extend %noSpinButtons;
 	}
 
-	.pr-u-fontFamily {
+	.u-fontFamily {
 		@extend %fontFamily;
 	}
 
-	.pr-u-fontFamilyCursive {
+	.u-fontFamilyCursive {
 		@extend %fontFamilyCursive;
 	}
 
-	.pr-u-fontFamilyBrand {
+	.u-fontFamilyBrand {
 		@extend %fontFamilyBrand;
 	}
 
-	.pr-u-focusVisible {
-		@extend %focusVisible;
-	}
-
-	@include core.classes('float', core.$float);
-	@include core.classes('vertical-align', core.$verticalAlign);
-	@include core.classes('white-space', core.$whiteSpace);
-	@include core.classes('display', core.$displays);
-	@include core.classes('flex-direction', core.$direction);
-	@include core.classes('flex-wrap', core.$wrap);
-	@include core.classes('justify-content', core.$justify);
-	@include core.classes('align-items', core.$align);
-	@include core.classes('flex-grow', core.$flex);
-	@include core.classes('flex-shrink', core.$flex);
-	@include core.classes('flex-basis', core.$basis);
-	@include core.classes('order', core.$order);
-	@include core.classes('align-self', core.$align);
-	@include core.classes('position', core.$position);
-
-	@include core.classes('width', core.$contents);
-	@include core.classes('height', core.$contents);
-	@include core.classes('min-width', '0');
-	@include core.classes('min-height', '0');
-
-	@include core.classes('inline-size', core.$contents);
-	@include core.classes('block-size', core.$contents);
-	@include core.classes('min-inline-size', '0');
-	@include core.classes('min-block-size', '0');
-	@include core.classes('max-inline-size', core.$contents);
-
-	@include core.classes('visibility', core.$visibility);
-	@include core.classes('font-weight', core.$fontWeight);
-	@include core.classes('font-style', core.$fontStyle);
-	@include core.classes('pointer-events', core.$pointerEvents);
-	@include core.classes('cursor', core.$cursor);
-	@include core.classes('text-align', core.$textAlign);
-	@include core.classes('text-decoration', core.$decoration);
-	@include core.classes('overflow', core.$overflow);
-
-	@media (prefers-reduced-motion: no-preference) {
-		@include core.classes('scroll-behavior', core.$scrollBehavior);
-	}
-
-	@media only print {
-		@include core.classes('display', core.$displays, $prefix: 'onlyPrint');
-	}
-
-	%displayNone {
-		display: none;
-	}
 
 	@each $display in core.$displays {
 		@if $display != 'none' {
-			.pr-u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
+			.u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
 				@extend %displayNone;
 			}
 		}
 	}
 
-	%inset0 {
-		inset: 0 !important;
-	}
-
 	@each $direction in core.$boxDirection {
 		@if $direction == '' {
 			// insetReset is deprecated
-			.pr-u-inset0,
-			.pr-u-insetReset {
+			.u-inset0,
+			.u-insetReset {
 				@extend %inset0;
 			}
 		} @else if $direction == 'top' or $direction == 'bottom' or $direction == 'left' or $direction == 'right' {
 			// Reset is deprecated
-			.pr-u-#{$direction}0,
-			.pr-u-#{$direction}Reset {
+			.u-#{$direction}0,
+			.u-#{$direction}Reset {
 				#{$direction}: 0 !important;
 			}
 		} @else {
 			@each $boxModel in core.$boxModel {
 				@if $boxModel != 'border' {
-					.pr-u-#{$boxModel}#{transform.capitalize($direction)}0 {
+					.u-#{$boxModel}#{transform.capitalize($direction)}0 {
 						#{$boxModel}-#{$direction}: 0 !important;
 					}
 				}
 			}
 		}
 	}
-
-	@include core.spacings;
-	@include core.sizes;
-	@include core.borderRadius;
-	@include core.palettes;
-	@include core.borderRadiusTokens;
-
-	// Deprecated .u- utilities
-	// Delete when all utilities are prefixed in .pr-u-
-	@if config.$deprecatedUtilityPrefix {
-		[class*='u-animated'] {
-			@extend %animatedAll;
-		}
-
-		.u-animated {
-			@extend %animated;
-		}
-
-		.u-mask {
-			@extend %mask;
-		}
-
-		.u-clearfix {
-			@extend %clearfix;
-		}
-
-		// clear is deprecated
-		.u-clearBoth,
-		.u-clear {
-			@extend %clearBoth;
-		}
-
-		// clearLeft is deprecated
-		.u-clearInlineStart,
-		.u-clearLeft {
-			@extend %clearInlineStart;
-		}
-
-		// clearRight is deprecated
-		.u-clearInlineEnd,
-		.u-clearRight {
-			@extend %clearInlineEnd;
-		}
-
-		.u-listReset {
-			@extend %listReset;
-		}
-
-		.u-descriptionListReset {
-			@extend %descriptionListReset;
-		}
-
-		.u-summaryReset {
-			@extend %summaryReset;
-		}
-
-		.u-buttonReset {
-			@extend %buttonReset;
-		}
-
-		.u-ellipsis {
-			@extend %ellipsis;
-		}
-
-		.u-h1 {
-			@extend %h1;
-		}
-
-		.u-h2 {
-			@extend %h2;
-		}
-
-		.u-h3 {
-			@extend %h3;
-		}
-
-		.u-h4 {
-			@extend %h4;
-		}
-
-		.u-h5 {
-			// Deprecated
-			@extend %h5;
-		}
-
-		.u-h6 {
-			// Deprecated
-			@extend %h6;
-		}
-
-		.u-bodyM {
-			@extend %bodyM;
-		}
-
-		.u-bodyS {
-			@extend %bodyS;
-		}
-
-		.u-bodyXS {
-			@extend %bodyXS;
-		}
-
-		// textLeft is deprecated
-		.u-textLeft {
-			@extend %textLeft;
-		}
-
-		// textRight is deprecated
-		.u-textRight {
-			@extend %textRight;
-		}
-
-		// textCenter is deprecated
-		.u-textCenter {
-			@extend %textCenter;
-		}
-
-		.u-textLight {
-			@extend %textLight;
-		}
-
-		.u-textPlaceholder {
-			@extend %textPlaceholder;
-		}
-
-		.u-textDefault {
-			@extend %textDefault;
-		}
-
-		.u-fontWeightRegular {
-			@extend %fontWeightRegular;
-		}
-
-		.u-fontWeightSemiBold {
-			@extend %fontWeightSemiBold;
-		}
-
-		.u-noSpinButtons {
-			@extend %noSpinButtons;
-		}
-
-		.u-fontFamily {
-			@extend %fontFamily;
-		}
-
-		.u-fontFamilyCursive {
-			@extend %fontFamilyCursive;
-		}
-
-		.u-fontFamilyBrand {
-			@extend %fontFamilyBrand;
-		}
-
-
-		@each $display in core.$displays {
-			@if $display != 'none' {
-				.u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
-					@extend %displayNone;
-				}
-			}
-		}
-
-		@each $direction in core.$boxDirection {
-			@if $direction == '' {
-				// insetReset is deprecated
-				.u-inset0,
-				.u-insetReset {
-					@extend %inset0;
-				}
-			} @else if $direction == 'top' or $direction == 'bottom' or $direction == 'left' or $direction == 'right' {
-				// Reset is deprecated
-				.u-#{$direction}0,
-				.u-#{$direction}Reset {
-					#{$direction}: 0 !important;
-				}
-			} @else {
-				@each $boxModel in core.$boxModel {
-					@if $boxModel != 'border' {
-						.u-#{$boxModel}#{transform.capitalize($direction)}0 {
-							#{$boxModel}-#{$direction}: 0 !important;
-						}
-					}
-				}
-			}
-		}
-	}
 }