@penskemediacorp/larva-css 1.5.3-alpha.0 → 1.6.0

package/src/03-utilities/u-margin.common.inline.scss

@@ -1,59 +1,194 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/generators';
-
-@include pmc-u-margin(
-	(
-		// Top
-		('t', $spacer-050),
-		('t', $spacer-1),
-		('t', $spacer-2),
-
-		// Right
-		('r', $spacer-025),
-		('r', $spacer-050),
-		('r', $spacer-1),
-		('r', $spacer-2),
-
-		// Bottom
-		('b', $spacer-0),
-		('b', $spacer-2),
-		('b', $spacer-050),
-		('b', $spacer-1),
-		('b', $spacer-025),
-
-		// Left
-		('l', $spacer-025),
-		('l', $spacer-050),
-		('l', $spacer-1),
-		('l', $spacer-2),
-
-		// Left/Right
-		('lr', $spacer-025),
-		('lr', $spacer-050),
-		('lr', $spacer-1),
-
-		// Top/Bottom
-		('tb', $spacer-0),
-		('tb', $spacer-050),
-		('tb', $spacer-1),
-		('tb', $spacer-2),
-
-		// All
-		('a', $spacer-0),
-	)
+@import 'setup';
+
+$breakpoints: (
+	'',
+	'mobile-max',
+	'desktop',
+	'desktop-xl'
 );
 
-.pmc-u-margin-l-auto {
+.lrv-u-margin-r-175\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		margin-right: $spacer-175;
+	}
+}
+
+.lrv-u-margin-t-150\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		margin-top: $spacer-150;
+	}
+}
+
+.lrv-u-margin-r-2\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		margin-right: $spacer-2;
+	}
+}
+
+@mixin _u-margin( $token-name, $token-selector, $value, $breakpoint-suffix: '' ) {
+	.lrv-u-margin-r-#{$token-selector}#{$breakpoint-suffix} {
+		margin-right: $value;
+		margin-right: var(--#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-margin-l-#{$token-selector}#{$breakpoint-suffix} {
+		margin-left: $value;
+		margin-left: var(--#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-margin-b-#{$token-selector}#{$breakpoint-suffix} {
+		margin-bottom: $value;
+		margin-bottom: var(--#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-margin-t-#{$token-selector}#{$breakpoint-suffix} {
+		margin-top: $value;
+		margin-top: var(--#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-margin-tb-#{$token-selector}#{$breakpoint-suffix} {
+		margin-top: $value;
+		margin-top: var(--#{$token-name}, #{$value} );
+		margin-bottom: $value;
+		margin-bottom: var(--#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-margin-lr-#{$token-selector}#{$breakpoint-suffix} {
+		margin-left: $value;
+		margin-left: var(--#{$token-name}, #{$value} );
+		margin-right: $value;
+		margin-right: var(--#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-margin-a-#{$token-selector}#{$breakpoint-suffix} {
+		margin: $value;
+		margin: var(--#{$token-name}, #{$value} );
+	}
+}
+
+// Auto margins
+
+.lrv-u-margin-l-auto {
 	margin-left: auto;
 }
 
-.pmc-u-margin-lr-auto {
+.lrv-u-margin-r-auto {
+	margin-right: auto;
+}
+
+.lrv-u-margin-t-auto {
+	margin-top: auto;
+}
+
+.lrv-u-margin-b-auto {
+	margin-bottom: auto;
+}
+
+.lrv-u-margin-lr-auto {
 	margin-left: auto;
 	margin-right: auto;
 }
 
-.pmc-u-margin-l-auto\@tablet {
+.lrv-u-margin-tb-auto {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+@include pmc-breakpoint( desktop ) {
+
+	.lrv-u-margin-l-auto\@desktop {
+		margin-left: auto;
+	}
+
+	.lrv-u-margin-r-auto\@desktop {
+		margin-right: auto;
+	}
+
+	.lrv-u-margin-t-auto\@desktop {
+		margin-top: auto;
+	}
+
+	.lrv-u-margin-b-auto\@desktop {
+		margin-bottom: auto;
+	}
+
+	.lrv-u-margin-lr-auto\@desktop {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.lrv-u-margin-tb-auto\@desktop {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+
+}
+
+@each $breakpoint in $breakpoints {
+
+	@each $token, $value in $TOKENS-MAP {
+
+		$token-str: quote( $token );
+
+		// No negative spacing for padding
+		@if str-index( $token-str, 'spacing' ) and not str-index( $token-str, 'letter-spacing' ) {
+
+			$token-name: $token;
+			$token-selector: str-replace( $token-str, 'spacing-', '' );
+
+			@if '' == $breakpoint {
+				@include _u-margin( $token-name, $token-selector, $value );
+			} @else {
+
+				$breakpoint-suffix: '\\@#{$breakpoint}';
+
+				@include pmc-breakpoint( $breakpoint ) {
+					@include _u-margin( $token-name, $token-selector, $value, $breakpoint-suffix );
+				}
+			}
+
+		}
+	}
+}
+
+// Legacy - should not have mobile-max and tablet
+$margins_with_breakpoints: (
+
+	// Breakpoints
+	('a', $spacer-0, mobile-max),
+	('t', $spacer-050, mobile-max),
+	('t', $spacer-1, mobile-max),
+	('t', $spacer-2, mobile-max),
+	('r', $spacer-0, mobile-max),
+	('b', $spacer-1, mobile-max),
+	('b', $spacer-050, mobile-max),
+	('tb', $spacer-0, mobile-max),
+	('tb', $spacer-1, mobile-max),
+	('l', $spacer-1, tablet),
+	('r', $spacer-1, tablet),
+	('r', $spacer-0, tablet),
+	('b', $spacer-1, tablet),
+	('b', $spacer-2, tablet),
+	('t', $spacer-050, desktop-xl), 
+);
+
+@include u-margin( $margins_with_breakpoints, $NAMESPACE: 'lrv-' );
+
+// Legacy - tablet will be removed
+.lrv-u-margin-l-auto\@tablet {
 	@include pmc-breakpoint( tablet ) {
 		margin-left: auto;
 	}
-}
+}
+
+.lrv-u-margin-b-250\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		margin-bottom: $spacer-250;
+	}
+}
+
+.lrv-u-margin-t-175\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		margin-top: $spacer-175;
+	}
+}

package/src/03-utilities/u-max-width.common.inline.scss

@@ -0,0 +1,25 @@
+@import 'setup';
+
+.lrv-u-max-width-100p {
+	max-width: 100%;
+}
+
+.lrv-u-max-width-100vw {
+	max-width: 100vw;
+}
+
+.lrv-u-max-width-150 {
+	max-width: pmc-rem(150);
+}
+
+.lrv-u-max-width-250 {
+	max-width: pmc-rem(250);
+}
+
+.lrv-u-max-width-500 {
+	max-width: pmc-rem(500);
+}
+
+.lrv-u-max-width-1000 {
+	max-width: pmc-rem(1000);
+}

package/src/03-utilities/u-opacity.common.inline.scss

@@ -0,0 +1,3 @@
+.lrv-u-opacity-0 {
+	opacity: 0;
+}

package/src/03-utilities/u-order.common.inline.scss

@@ -1,8 +1,29 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-.pmc-u-order-100\@mobile-max {
+.lrv-u-order-n1 {
+	order: -1;
+}
+
+.lrv-u-order-100 {
+	order: 100;
+}
+
+@include pmc-breakpoint( desktop ) {
+
+	.lrv-u-order-n1\@desktop {
+		order: -1;
+	}
+
+	.lrv-u-order-100\@desktop {
+		order: 100;
+	}
+}
+
+
+// Legacy - should not use mobile-max
+.lrv-u-order-100\@mobile-max {
 
 	@include pmc-breakpoint( mobile-max ) {
 		order: 100;
 	}
-}
+}

package/src/03-utilities/u-overflow.common.inline.scss

@@ -1,3 +1,15 @@
-.pmc-u-overflow-auto {
+@import 'setup';
+
+.lrv-u-overflow-auto {
 	overflow: auto;
-}
+}
+
+.lrv-u-overflow-hidden {
+	overflow: hidden;
+}
+
+.lrv-u-overflow-auto\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		overflow: auto;
+	}
+}

package/src/03-utilities/u-padding.common.inline.scss

@@ -1,62 +1,167 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/generators';
-
-$paddings_without_breakpoints: (
-
-	// Top
-	('t', $spacer-050),
-	('t', $spacer-1),
-	('t', $spacer-2),
-
-	// Right
-	('r', $spacer-025),
-	('r', $spacer-050),
-	('r', $spacer-1),
-	('r', $spacer-0),
-
-	// Bottom
-	('b', $spacer-0),
-	('b', $spacer-025),
-	('b', $spacer-050),
-	('b', $spacer-1),
-	('b', $spacer-2),
-
-	// Left
-	('t', $spacer-025),
-	('l', $spacer-1),
-	('l', $spacer-2),
-
-	// Left/Right
-	('lr', $spacer-025),
-	('lr', $spacer-050),
-	('lr', $spacer-1),
-	('lr', $spacer-2),
-
-	// Top/Bottom
-	('tb', $spacer-025),
-	('tb', $spacer-050),
-	('tb', $spacer-075),
-	('tb', $spacer-1),
-	('tb', $spacer-2),
-
-	// All
-	('a', $spacer-0),
-	('a', $spacer-025),
-	('a', $spacer-050),
-	('a', $spacer-1),
-	('a', $spacer-2),
+@import 'setup';
 
+$breakpoints: (
+	'',
+	'mobile-max',
+	'desktop',
+	'desktop-xl'
 );
 
-@include pmc-u-padding( $paddings_without_breakpoints );
+.lrv-u-padding-t-150\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		padding-top: $spacer-150;
+	}
+}
 
-// Ordered by breakpoint.
+@mixin _u-padding( $token-name, $token-selector, $value, $breakpoint-suffix: '' ) {
+
+	.lrv-u-padding-r-#{$token-selector}#{$breakpoint-suffix} {
+		padding-right: $value;
+		padding-right: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-l-#{$token-selector}#{$breakpoint-suffix} {
+		padding-left: $value;
+		padding-left: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-b-#{$token-selector}#{$breakpoint-suffix} {
+		padding-bottom: $value;
+		padding-bottom: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-t-#{$token-selector}#{$breakpoint-suffix} {
+		padding-top: $value;
+		padding-top: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-tb-#{$token-selector}#{$breakpoint-suffix} {
+		padding-top: $value;
+		padding-top: var( --#{$token-name}, #{$value} );
+		padding-bottom: $value;
+		padding-bottom: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-lr-#{$token-selector}#{$breakpoint-suffix} {
+		padding-left: $value;
+		padding-left: var( --#{$token-name}, #{$value} );
+		padding-right: $value;
+		padding-right: var( --#{$token-name}, #{$value} );
+	}
+
+	.lrv-u-padding-a-#{$token-selector}#{$breakpoint-suffix} {
+		padding: $value;
+		padding: var( --#{$token-name}, #{$value} );
+	}
+}
+
+@each $breakpoint in $breakpoints {
+
+	@each $token, $value in $TOKENS-MAP {
+
+		$token-str: quote( $token );
+
+		// No negative spacing for padding
+		@if str-index( $token-str, 'spacing' ) and not str-index( $token-str, 'spacing-n' ) and not str-index( $token-str, 'letter-spacing' ) {
+
+			$token-name: $token;
+			$token-selector: str-replace( $token-str, 'spacing-', '' );
+
+			@if '' == $breakpoint {
+				@include _u-padding( $token-name, $token-selector, $value );
+			} @else {
+
+				$breakpoint-suffix: '\\@#{$breakpoint}';
+
+				@include pmc-breakpoint( $breakpoint ) {
+					@include _u-padding( $token-name, $token-selector, $value, $breakpoint-suffix );
+				}
+			}
+
+		}
+	}
+}
+
+
+// Legacy - should not have tablet and mobile-max
 $paddings_with_breakpoints: (
+	('l', $spacer-3 ),
+
 	('tb', $spacer-025, mobile-max ),
+	('tb', $spacer-1, mobile-max),
 
+	('t', $spacer-075, tablet ),
+	('b', $spacer-075, tablet ),
+	('r', $spacer-1, tablet ),
+	('r', $spacer-2, tablet ),
+	('l', $spacer-2, tablet ),
+	('b', $spacer-3, tablet ),
 	('t', $spacer-050, tablet ),
-	
-	('tb', $spacer-050, desktop ),
+	('lr', $spacer-1, tablet ),
+
+	('tb', $spacer-050, desktop-max),
 );
 
-@include pmc-u-padding( $paddings_with_breakpoints );
+@include u-padding( $paddings_with_breakpoints, $NAMESPACE: 'lrv-' );
+
+.lrv-u-padding-b-150\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		padding-bottom: $spacer-150;
+	}
+}
+
+.lrv-u-padding-b-150\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		padding-bottom: $spacer-150;
+	}
+}
+
+.lrv-u-padding-t-175\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		padding-top: $spacer-175;
+	}
+}
+
+.lrv-u-padding-tb-175\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		padding-top: $spacer-175;
+		padding-bottom: $spacer-175;
+	}
+}
+
+.lrv-u-padding-t-175\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		padding-top: $spacer-175;
+	}
+}
+
+.lrv-u-padding-t-150\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		padding-top: $spacer-150;
+	}
+}
+
+.lrv-u-padding-b-3\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-bottom: $spacer-3;
+	}
+}
+
+.lrv-u-padding-t-175\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-top: $spacer-175;
+	}
+}
+
+.lrv-u-padding-tb-250\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-top: $spacer-250;
+		padding-bottom: $spacer-250;
+	}
+}
+
+.lrv-u-padding-t-250\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		padding-top: $spacer-250;
+	}
+}

package/src/03-utilities/u-position.common.inline.scss

@@ -0,0 +1,3 @@
+.lrv-u-position-relative {
+	position: relative;
+}

package/src/03-utilities/u-text-align.common.inline.scss

@@ -1,11 +1,40 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-.pmc-u-text-align-center {
+.lrv-u-text-align-right {
+	text-align: right;
+}
+
+.lrv-u-text-align-left {
+	text-align: left;
+}
+
+.lrv-u-text-align-center {
 	text-align: center;
 }
 
-.pmc-u-text-align-center\@mobile-max {
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-text-align-right\@desktop {
+		text-align: right;
+	}
+
+	.lrv-u-text-align-left\@desktop {
+		text-align: left;
+	}
+
+	.lrv-u-text-align-center\@desktop {
+		text-align: center;
+	}
+}
+
+// Legacy
+.lrv-u-text-align-center\@mobile-max {
 	@include pmc-breakpoint( mobile-max ) {
 		text-align: center;
 	}
-}
+}
+
+.lrv-u-text-align-center\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		text-align: center;
+	}
+}

package/src/03-utilities/u-text-decoration.common.inline.scss

@@ -0,0 +1,11 @@
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+.lrv-u-text-decoration-underline {
+	text-decoration: underline;
+	text-decoration-color: currentColor;
+}
+
+.lrv-u-text-decoration-underline\:hover:hover {
+	text-decoration: underline;
+	text-decoration-color: currentColor;
+}

package/src/03-utilities/u-text-transform.common.inline.scss

@@ -1,3 +1,15 @@
-.pmc-u-text-transform-uppercase {
+.lrv-u-text-transform-uppercase {
 	text-transform: uppercase;
-}
+}
+
+.lrv-u-text-transform-initial {
+	text-transform: initial;
+}
+
+.lrv-u-text-transform-lowercase {
+	text-transform: lowercase;
+}
+
+.lrv-u-text-transform-capitalize {
+	text-transform: capitalize;
+}

package/src/03-utilities/u-transform.common.inline.scss

@@ -0,0 +1,5 @@
+@import 'setup';
+
+.lrv-u-transform-translateY-n50p {
+	transform: translateY(-50%);
+}

package/src/03-utilities/u-vertical-align.common.inline.scss

@@ -0,0 +1,7 @@
+@import 'setup';
+
+.lrv-u-vertical-align-middle\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		vertical-align: middle;
+	}
+}

package/src/03-utilities/u-whitespace.common.inline.scss

@@ -1,3 +1,3 @@
-.pmc-u-whitespace-nowrap {
+.lrv-u-whitespace-nowrap {
 	white-space: nowrap;
 }