@penskemediacorp/larva-css 1.8.0-alpha.0 → 1.8.0

package/src/03-utilities/u-font-weight.common.inline.scss

@@ -1,12 +1,50 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/generators';
-
-// Generates classes .pmc-u-font-weight-#.
-@include pmc-u-font-weight(
-	(
-		light,
-		normal,
-		bold
-	),
-	$semantic-font-weights
-);
+@import 'setup';
+
+$warned-font-weight: false;
+
+@each $token, $value in $TOKENS-MAP {
+
+	@if $warned-font-weight == false {
+		@warn 'Font weight utilities will be will be deprecated. Please set up a-font using a style guide.';
+		$warned-font-weight: true;
+	}
+
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-weight' ) and not str-index( $token-str, '-font-weight-' ) {
+		.lrv-u-#{$token} {
+			font-weight: $value;
+		}
+	}
+}
+
+
+//
+// Media Queries
+//
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-weight' ) and not str-index( $token-str, '-font-weight-' ) {
+
+		@include pmc-breakpoint( desktop ) {
+			.lrv-u-#{$token}\@desktop {
+				font-weight: $value;
+			}
+		}
+	}
+}
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-weight' ) and not str-index( $token-str, '-font-weight-' ) {
+
+		@include pmc-breakpoint( desktop-xl ) {
+			.lrv-u-#{$token}\@desktop-xl {
+				font-weight: $value;
+			}
+		}
+	}
+}

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

@@ -1,13 +1,43 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-.pmc-u-height-100p {
-	height: 100%;
-}
+$heights_map: (
+	'height-auto': auto,
+	'height-16': pmc-rem(16),
+	'height-20': pmc-rem(20),
+	'height-24': pmc-rem(24),
+	'height-30': pmc-rem(30),
+	'height-40': pmc-rem(40),
+	'height-50': pmc-rem(50),
+	'height-100': pmc-rem(100),
+	'height-150': pmc-rem(150),
+	'height-200': pmc-rem(200),
+	'height-300': pmc-rem(300),
+	'height-20p': 20%,
+	'height-30p': 30%,
+	'height-50p': 50%,
+	'height-75p': 75%,
+	'height-100p': 100%,
+);
 
-.pmc-u-max-height-50 {
-	max-height: pmc-rem(50);
-}
+@include basic-utility-generator( 'height', (
+	height-auto,
+	height-16,
+	height-20,
+	height-24,
+	height-30,
+	height-40,
+	height-50,
+	height-100,
+	height-150,
+	height-200,
+	height-300,
+	height-20p,
+	height-30p,
+	height-50p,
+	height-75p,
+	height-100p,
+), $heights_map, $NAMESPACE: 'lrv-' );
 
-.pmc-u-height-16 {
-	height: pmc-rem(16);
+.lrv-u-max-height-50 {
+	max-height: pmc-rem(50);
 }

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

@@ -0,0 +1,7 @@
+@import 'setup';
+
+@include pmc-breakpoint(desktop) {
+	.lrv-u-left-50p\@desktop {
+		left: 50%;
+	}
+}	

package/src/03-utilities/u-letter-spacing.common.inline.scss

@@ -0,0 +1,11 @@
+@import 'setup';
+
+.lrv-u-letter-spacing-015 {
+	letter-spacing: pmc-rem(2.4);
+}
+
+.lrv-u-letter-spacing-012\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		letter-spacing: pmc-rem(1.95);
+	}
+}

package/src/03-utilities/u-line-height.common.inline.scss

@@ -1,13 +1,49 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/generators';
-
-// TODO: refactor to custom property version, if we need to change the line height values.
-@include pmc-u-line-height(
-	(
-		small,
-		normal,
-		copy,
-		large,
-	),
-	$semantic-line-heights
-);
+@import 'setup';
+
+$warned-line-height: false;
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if $warned-line-height == false {
+		@warn 'Line height utilities will be will be deprecated. Please set up a-font using a style guide.';
+		$warned-line-height: true;
+	}
+
+	@if str-index( $token-str, 'line-height' ) and not str-index( $token-str, '-line-height-' ) {
+		.lrv-u-#{$token} {
+			line-height: $value;
+		}
+	}
+}
+
+//
+// Media Queries
+//
+
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'line-height' ) and not str-index( $token-str, '-line-height-' ) {
+
+		@include pmc-breakpoint( desktop ) {
+			.lrv-u-#{$token}\@desktop {
+				line-height: $value;
+			}
+		}
+	}
+}
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'line-height' ) and not str-index( $token-str, '-line-height-' ) {
+
+		@include pmc-breakpoint( desktop-xl ) {
+			.lrv-u-#{$token}\@desktop-xl {
+				line-height: $value;
+			}
+		}
+	}
+}

package/src/03-utilities/u-list-style.common.async.scss

@@ -0,0 +1,3 @@
+.lrv-u-list-style-type-disclosure-closed {
+	list-style-type: disclosure-closed;
+}

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,35 @@
 @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;
+	}
+}
+
+.lrv-u-order-n1\@mobile-max {
+
+	@include pmc-breakpoint( mobile-max ) {
+		order: -1;
+	}
+}
+
+// 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;
+	}
+}