@lucca-front/scss 20.3.0-rc.5 → 20.3.0

package/src/commons/utils/index.scss

@@ -11,693 +11,695 @@
 
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
-%animatedAll {
-	animation-duration: var(--commons-animations-duration, var(--commons-animations-durations-standard));
-	animation-timing-function: var(--commons-animations-function);
+@layer utils {
+	%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;
-	}
+			@include keyframe.scaleIn;
+		}
 
-	&ScaleInRight,
-	&ScaleOutRight {
-		animation-name: scaleInRight;
+		&ScaleInRight,
+		&ScaleOutRight {
+			animation-name: scaleInRight;
 
-		@include keyframe.scaleInRight;
-	}
+			@include keyframe.scaleInRight;
+		}
 
-	&ScaleInBottom,
-	&ScaleOutBottom {
-		animation-name: scaleInBottom;
+		&ScaleInBottom,
+		&ScaleOutBottom {
+			animation-name: scaleInBottom;
 
-		@include keyframe.scaleInBottom;
-	}
+			@include keyframe.scaleInBottom;
+		}
 
-	&ScaleInLeft,
-	&ScaleOutLeft {
-		animation-name: scaleInLeft;
+		&ScaleInLeft,
+		&ScaleOutLeft {
+			animation-name: scaleInLeft;
 
-		@include keyframe.scaleInLeft;
-	}
+			@include keyframe.scaleInLeft;
+		}
 
-	&SlideIn,
-	&SlideInTop,
-	&SlideOut,
-	&SlideOutTop {
-		animation-name: slideIn;
+		&SlideIn,
+		&SlideInTop,
+		&SlideOut,
+		&SlideOutTop {
+			animation-name: slideIn;
 
-		@include keyframe.slideIn;
-	}
+			@include keyframe.slideIn;
+		}
 
-	&SlideInRight,
-	&SlideOutRight {
-		animation-name: slideInRight;
+		&SlideInRight,
+		&SlideOutRight {
+			animation-name: slideInRight;
 
-		@include keyframe.slideInRight;
-	}
+			@include keyframe.slideInRight;
+		}
 
-	&SlideInBottom,
-	&SlideOutBottom {
-		animation-name: slideInBottom;
+		&SlideInBottom,
+		&SlideOutBottom {
+			animation-name: slideInBottom;
 
-		@include keyframe.slideInBottom;
-	}
+			@include keyframe.slideInBottom;
+		}
 
-	&SlideInLeft,
-	&SlideOutLeft {
-		animation-name: slideInLeft;
+		&SlideInLeft,
+		&SlideOutLeft {
+			animation-name: slideInLeft;
 
-		@include keyframe.slideInLeft;
-	}
+			@include keyframe.slideInLeft;
+		}
 
-	&Shake {
-		animation-name: shake;
+		&Shake {
+			animation-name: shake;
 
-		@include keyframe.shake;
-	}
+			@include keyframe.shake;
+		}
 
-	&Pulse {
-		animation-name: pulse;
-		animation-direction: alternate;
-		animation-iteration-count: var(--commons-animations-iteration-count);
+		&Pulse {
+			animation-name: pulse;
+			animation-direction: alternate;
+			animation-iteration-count: var(--commons-animations-iteration-count);
 
-		@include keyframe.pulse;
-	}
+			@include keyframe.pulse;
+		}
 
-	&FadeOut,
-	&SlideOut,
-	&SlideOutTop,
-	&SlideOutRight,
-	&SlideOutBottom,
-	&SlideOutLeft,
-	&ScaleOut,
-	&ScaleOutTop,
-	&ScaleOutRight,
-	&ScaleOutBottom,
-	&ScaleOutLeft {
-		animation-direction: reverse;
+		&FadeOut,
+		&SlideOut,
+		&SlideOutTop,
+		&SlideOutRight,
+		&SlideOutBottom,
+		&SlideOutLeft,
+		&ScaleOut,
+		&ScaleOutTop,
+		&ScaleOutRight,
+		&ScaleOutBottom,
+		&ScaleOutLeft {
+			animation-direction: reverse;
+		}
 	}
-}
-
-%mask {
-	@include a11y.mask('!important');
-}
-
-%clearfix {
-	@include reset.clearfix('!important');
-}
 
-%clearBoth {
-	@include reset.clear('both', '!important');
-}
-
-%clearInlineStart {
-	@include reset.clear('both', '!important');
-}
-
-%clearInlineEnd {
-	@include reset.clear('inline-end', '!important');
-}
-
-%listReset {
-	@include reset.list('!important');
-}
-
-%descriptionListReset {
-	@include reset.list($list: 'dl', $suffix: '!important');
-}
-
-%summaryReset {
-	@include reset.summary('!important');
-}
-
-%buttonReset {
-	@include reset.button('!important');
-}
-
-%ellipsis {
-	@include text.ellipsis('!important');
-}
-
-%h1 {
-	font: var(--pr-t-font-heading-1);
-	color: var(--pr-t-color-text-heading);
-
-	&.mod-XXXL {
-		// Deprecated
-		@include title.XXXL;
+	%mask {
+		@include a11y.mask('!important');
 	}
-}
-
-%h2 {
-	font: var(--pr-t-font-heading-2);
-	color: var(--pr-t-color-text-heading);
-}
-
-%h3 {
-	font: var(--pr-t-font-heading-3);
-	color: var(--pr-t-color-text-heading);
-}
-
-%h4 {
-	font: var(--pr-t-font-heading-4);
-	color: var(--pr-t-color-text-heading);
-}
-
-%h5 {
-	@include title.h5;
-}
-
-%h6 {
-	@include title.h6;
-}
-
-%bodyM {
-	font: var(--pr-t-font-body-M);
-}
-
-%bodyS {
-	font: var(--pr-t-font-body-S);
-}
-
-%bodyXS {
-	font: var(--pr-t-font-body-XS);
-}
-
-%textLeft {
-	text-align: start !important;
-}
-
-%textRight {
-	text-align: end !important;
-}
-
-%textCenter {
-	text-align: center !important;
-}
-
-%textLight {
-	color: var(--palettes-neutral-600) !important;
-}
-
-%textPlaceholder {
-	color: var(--palettes-neutral-400) !important;
-}
-
-%textDefault {
-	color: var(--palettes-neutral-700) !important;
-}
-
-%fontWeightRegular {
-	font-weight: var(--pr-t-font-fontWeight-regular) !important;
-}
-
-%fontWeightSemiBold {
-	font-weight: var(--pr-t-font-fontWeight-semibold) !important;
-}
 
-%noSpinButtons {
-	&::-webkit-outer-spin-button,
-	&::-webkit-inner-spin-button {
-		appearance: none !important;
+	%clearfix {
+		@include reset.clearfix('!important');
 	}
 
-	&[type='number'] {
-		appearance: textfield !important;
+	%clearBoth {
+		@include reset.clear('both', '!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;
+	%clearInlineStart {
+		@include reset.clear('both', '!important');
 	}
-}
-
 
-
-[data-content-before] {
-	&::before {
-		content: attr(data-content-before);
+	%clearInlineEnd {
+		@include reset.clear('inline-end', '!important');
 	}
-}
 
-[data-content-after] {
-	&::after {
-		content: attr(data-content-after);
+	%listReset {
+		@include reset.list('!important');
 	}
-}
-
-[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;
-}
+	%descriptionListReset {
+		@include reset.list($list: 'dl', $suffix: '!important');
+	}
 
-.pr-u-descriptionListReset {
-	@extend %descriptionListReset;
-}
+	%summaryReset {
+		@include reset.summary('!important');
+	}
 
-.pr-u-summaryReset {
-	@extend %summaryReset;
-}
+	%buttonReset {
+		@include reset.button('!important');
+	}
 
-.pr-u-buttonReset {
-	@extend %buttonReset;
-}
+	%ellipsis {
+		@include text.ellipsis('!important');
+	}
 
-.pr-u-ellipsis {
-	@extend %ellipsis;
-}
+	%h1 {
+		font: var(--pr-t-font-heading-1);
+		color: var(--pr-t-color-text-heading);
 
-.pr-u-h1 {
-	@extend %h1;
-}
+		&.mod-XXXL {
+			// Deprecated
+			@include title.XXXL;
+		}
+	}
 
-.pr-u-h2 {
-	@extend %h2;
-}
+	%h2 {
+		font: var(--pr-t-font-heading-2);
+		color: var(--pr-t-color-text-heading);
+	}
 
-.pr-u-h3 {
-	@extend %h3;
-}
+	%h3 {
+		font: var(--pr-t-font-heading-3);
+		color: var(--pr-t-color-text-heading);
+	}
 
-.pr-u-h4 {
-	@extend %h4;
-}
+	%h4 {
+		font: var(--pr-t-font-heading-4);
+		color: var(--pr-t-color-text-heading);
+	}
 
-.pr-u-h5 {
-	// Deprecated
-	@extend %h5;
-}
+	%h5 {
+		@include title.h5;
+	}
 
-.pr-u-h6 {
-	// Deprecated
-	@extend %h6;
-}
+	%h6 {
+		@include title.h6;
+	}
 
-.pr-u-bodyM {
-	@extend %bodyM;
-}
+	%bodyM {
+		font: var(--pr-t-font-body-M);
+	}
 
-.pr-u-bodyS {
-	@extend %bodyS;
-}
+	%bodyS {
+		font: var(--pr-t-font-body-S);
+	}
 
-.pr-u-bodyXS {
-	@extend %bodyXS;
-}
+	%bodyXS {
+		font: var(--pr-t-font-body-XS);
+	}
 
-// textLeft is deprecated
-.pr-u-textLeft {
-	@extend %textLeft;
-}
+	%textLeft {
+		text-align: start !important;
+	}
 
-// textRight is deprecated
-.pr-u-textRight {
-	@extend %textRight;
-}
+	%textRight {
+		text-align: end !important;
+	}
 
-// textCenter is deprecated
-.pr-u-textCenter {
-	@extend %textCenter;
-}
+	%textCenter {
+		text-align: center !important;
+	}
 
-.pr-u-textLight {
-	@extend %textLight;
-}
+	%textLight {
+		color: var(--palettes-neutral-600) !important;
+	}
 
-.pr-u-textPlaceholder {
-	@extend %textPlaceholder;
-}
+	%textPlaceholder {
+		color: var(--palettes-neutral-400) !important;
+	}
 
-.pr-u-textDefault {
-	@extend %textDefault;
-}
+	%textDefault {
+		color: var(--palettes-neutral-700) !important;
+	}
 
-.pr-u-fontWeightRegular {
-	@extend %fontWeightRegular;
-}
+	%fontWeightRegular {
+		font-weight: var(--pr-t-font-fontWeight-regular) !important;
+	}
 
-.pr-u-fontWeightSemiBold {
-	@extend %fontWeightSemiBold;
-}
+	%fontWeightSemiBold {
+		font-weight: var(--pr-t-font-fontWeight-semibold) !important;
+	}
 
-.pr-u-noSpinButtons {
-	@extend %noSpinButtons;
-}
+	%noSpinButtons {
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			appearance: none !important;
+		}
 
-.pr-u-fontFamily {
-	@extend %fontFamily;
-}
+		&[type='number'] {
+			appearance: textfield !important;
+		}
+	}
 
-.pr-u-fontFamilyCursive {
-	@extend %fontFamilyCursive;
-}
+	%fontFamily {
+		font-family: var(--pr-t-font-family) !important;
+	}
 
-.pr-u-fontFamilyBrand {
-	@extend %fontFamilyBrand;
-}
+	%fontFamilyCursive {
+		font-family: var(--pr-t-font-family-cursive) !important;
+	}
 
-.pr-u-focusVisible {
-	@extend %focusVisible;
-}
+	%fontFamilyBrand {
+		font-family: var(--pr-t-font-family-brand) !important;
+	}
 
-@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);
-}
+	%focusVisible {
+		&:focus-visible {
+			@include a11y.focusVisible;
+		}
+	}
 
-@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-before] {
+		&::before {
+			content: attr(data-content-before);
 		}
 	}
-}
 
-%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;
-				}
-			}
+	[data-content-after] {
+		&::after {
+			content: attr(data-content-after);
 		}
 	}
-}
 
-@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'] {
+	[class*='pr-u-animated'] {
 		@extend %animatedAll;
 	}
 
-	.u-animated {
+	.pr-u-animated {
 		@extend %animated;
 	}
 
-	.u-mask {
+	.pr-u-mask {
 		@extend %mask;
 	}
 
-	.u-clearfix {
+	.pr-u-clearfix {
 		@extend %clearfix;
 	}
 
 	// clear is deprecated
-	.u-clearBoth,
-	.u-clear {
+	.pr-u-clearBoth,
+	.pr-u-clear {
 		@extend %clearBoth;
 	}
 
 	// clearLeft is deprecated
-	.u-clearInlineStart,
-	.u-clearLeft {
+	.pr-u-clearInlineStart,
+	.pr-u-clearLeft {
 		@extend %clearInlineStart;
 	}
 
 	// clearRight is deprecated
-	.u-clearInlineEnd,
-	.u-clearRight {
+	.pr-u-clearInlineEnd,
+	.pr-u-clearRight {
 		@extend %clearInlineEnd;
 	}
 
-	.u-listReset {
+	.pr-u-listReset {
 		@extend %listReset;
 	}
 
-	.u-descriptionListReset {
+	.pr-u-descriptionListReset {
 		@extend %descriptionListReset;
 	}
 
-	.u-summaryReset {
+	.pr-u-summaryReset {
 		@extend %summaryReset;
 	}
 
-	.u-buttonReset {
+	.pr-u-buttonReset {
 		@extend %buttonReset;
 	}
 
-	.u-ellipsis {
+	.pr-u-ellipsis {
 		@extend %ellipsis;
 	}
 
-	.u-h1 {
+	.pr-u-h1 {
 		@extend %h1;
 	}
 
-	.u-h2 {
+	.pr-u-h2 {
 		@extend %h2;
 	}
 
-	.u-h3 {
+	.pr-u-h3 {
 		@extend %h3;
 	}
 
-	.u-h4 {
+	.pr-u-h4 {
 		@extend %h4;
 	}
 
-	.u-h5 {
+	.pr-u-h5 {
 		// Deprecated
 		@extend %h5;
 	}
 
-	.u-h6 {
+	.pr-u-h6 {
 		// Deprecated
 		@extend %h6;
 	}
 
-	.u-bodyM {
+	.pr-u-bodyM {
 		@extend %bodyM;
 	}
 
-	.u-bodyS {
+	.pr-u-bodyS {
 		@extend %bodyS;
 	}
 
-	.u-bodyXS {
+	.pr-u-bodyXS {
 		@extend %bodyXS;
 	}
 
 	// textLeft is deprecated
-	.u-textLeft {
+	.pr-u-textLeft {
 		@extend %textLeft;
 	}
 
 	// textRight is deprecated
-	.u-textRight {
+	.pr-u-textRight {
 		@extend %textRight;
 	}
 
 	// textCenter is deprecated
-	.u-textCenter {
+	.pr-u-textCenter {
 		@extend %textCenter;
 	}
 
-	.u-textLight {
+	.pr-u-textLight {
 		@extend %textLight;
 	}
 
-	.u-textPlaceholder {
+	.pr-u-textPlaceholder {
 		@extend %textPlaceholder;
 	}
 
-	.u-textDefault {
+	.pr-u-textDefault {
 		@extend %textDefault;
 	}
 
-	.u-fontWeightRegular {
+	.pr-u-fontWeightRegular {
 		@extend %fontWeightRegular;
 	}
 
-	.u-fontWeightSemiBold {
+	.pr-u-fontWeightSemiBold {
 		@extend %fontWeightSemiBold;
 	}
 
-	.u-noSpinButtons {
+	.pr-u-noSpinButtons {
 		@extend %noSpinButtons;
 	}
 
-	.u-fontFamily {
+	.pr-u-fontFamily {
 		@extend %fontFamily;
 	}
 
-	.u-fontFamilyCursive {
+	.pr-u-fontFamilyCursive {
 		@extend %fontFamilyCursive;
 	}
 
-	.u-fontFamilyBrand {
+	.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' {
-			.u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
+			.pr-u-onlyPrintDisplay#{transform.capitalize(transform.camelize($display))} {
 				@extend %displayNone;
 			}
 		}
 	}
 
+	%inset0 {
+		inset: 0 !important;
+	}
+
 	@each $direction in core.$boxDirection {
 		@if $direction == '' {
 			// insetReset is deprecated
-			.u-inset0,
-			.u-insetReset {
+			.pr-u-inset0,
+			.pr-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 {
+			.pr-u-#{$direction}0,
+			.pr-u-#{$direction}Reset {
 				#{$direction}: 0 !important;
 			}
 		} @else {
 			@each $boxModel in core.$boxModel {
 				@if $boxModel != 'border' {
-					.u-#{$boxModel}#{transform.capitalize($direction)}0 {
+					.pr-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;
+						}
+					}
+				}
+			}
+		}
+	}
 }