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

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

@@ -1,27 +1,146 @@
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-flex {
+$flex_basis: ( 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100 );
+$breakpoints: (
+	'',
+	'mobile-max',
+	'desktop',
+	'desktop-xl'
+);
+
+.lrv-u-flex {
 	display: flex;
 }
 
-.pmc-u-flex\@tablet {
+.lrv-u-flex-grow-1 {
+	flex-grow: 1;
+}
+
+.lrv-u-flex-shrink-0 {
+	flex-shrink: 0;
+}
+
+.lrv-u-flex-wrap-wrap {
+	flex-wrap: wrap;
+}
+
+.lrv-u-flex-direction-column {
+	flex-direction: column;
+}
+
+@include pmc-breakpoint( desktop ) {
+
+	.lrv-u-flex\@desktop {
+		display: flex;
+	}
+
+	.lrv-u-flex-grow-1\@desktop {
+		flex-grow: 1;
+	}
+
+	.lrv-u-flex-shrink-0\@desktop {
+		flex-shrink: 0;
+	}
+
+	.lrv-u-flex-wrap-wrap\@desktop {
+		flex-wrap: wrap;
+	}
+
+	.lrv-u-flex-direction-column\@desktop {
+		flex-direction: column;
+	}
+
+}
+
+// Legacy - should not use @tablet and @mobile-max
+
+.lrv-u-flex\@tablet {
 
 	@include pmc-breakpoint( tablet ) {
 		display: flex;
 	}
 }
 
-.pmc-u-flex-grow-1 {
-	flex-grow: 1;
+.lrv-u-flex\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		display: flex;
+	}
 }
 
-.pmc-u-flex-direction-column {
-	flex-direction: column;
+.lrv-u-flex-direction-row-reverse\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		flex-direction: row-reverse;
+	}
 }
 
-.pmc-u-flex-direction-column\@mobile-max {
+.lrv-u-flex-direction-column\@tablet {
+
+	@include pmc-breakpoint( tablet ) {
+		flex-direction: column;
+	}
+}
+
+.lrv-u-flex-direction-column\@mobile-max {
 
 	@include pmc-breakpoint( mobile-max ) {
 		flex-direction: column;
 	}
-}
+}
+
+.lrv-u-flex-direction-column\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		flex-direction: column;
+	}
+}
+
+.lrv-u-flex-direction-column\@desktop-xl-max {
+	@include pmc-breakpoint(desktop-xl-max) {
+		flex-direction: column;
+	}
+}
+
+.lrv-u-flex-wrap-wrap\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		flex-wrap: wrap;
+	}
+}
+
+.lrv-u-flex-direction-column-reverse\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		flex-direction: column-reverse;
+	}
+}
+
+.lrv-u-flex-basis-100p\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		flex-basis: 100%;
+	}
+}
+
+.lrv-u-flex-shrink-0\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		flex-shrink: 0;
+	}
+}
+
+@each $breakpoint in $breakpoints {
+
+	@each $size in $flex_basis {
+		$per : #{$size}#{'%'};
+		
+		@if '' == $breakpoint {
+			// No breakpoint
+			.lrv-u-flex-basis-#{$size}p {
+				flex-basis: $per;
+			}
+		} @else {
+			@include pmc-breakpoint( #{$breakpoint} ) {
+				.lrv-u-flex-basis-#{$size}p\@#{$breakpoint} {
+					flex-basis: $per;
+				}
+			}
+		}
+
+	} // end flex loop
+	
+} // end breakpoints loop

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

@@ -1,21 +1,46 @@
-// TODO: 
-// The pmc-u-font-family generator can be used for brands that need A-grade support for IE11,
-// and a PostCSS script can be created to include the basic generator verison according to 
-// configuraiton in larva.config.js.
-
-.wf-active {
-	--font-family-primary: var( --font-family-primary-fancy );
-	--font-family-secondary: var( --font-family-secondary-fancy );
-}
+@import 'setup';
 
-.pmc-u-font-family-primary {
-	font-family: var( --font-family-primary );
-}
+$warned-font-family: false;
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if $warned-font-family == false {
+		@warn 'Font family utilities will be will be deprecated. Please set up a-font using a style guide.';
+		$warned-font-family: true;
+	}
+
+	// example: font-family-primary-fancy, 'Graphik', sans-serif
+	// example: font-family-primary, Helvetica
+	@if str-index( $token-str, 'font-family' ) and not str-index( $token-str, '-font-family-' ) {
 
-.pmc-u-font-family-secondary {
-	font-family: var( --font-family-secondary );
+		// The webfont/'fancy' variation is added via custom property
+		// in generic/typography
+		@if not str-index( $token-str, 'fancy' ) {
+			.lrv-u-#{$token} {
+				font-family: $value;
+				font-family: var( --#{$token}, #{$value} );
+			}
+		}
+	}
 }
 
-.pmc-u-font-family-basic {
-	font-family: Helvetica, sans-serif;
+//
+// Media Queries
+//
+
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-family' ) and not str-index( $token-str, '-font-family-' ) {
+
+		@if not str-index( $token-str, 'fancy' ) {
+
+			.lrv-u-#{$token}\@desktop {
+				font-family: $value;
+				font-family: var( --#{$token}, #{$value} );
+			}
+		}
+	}
 }

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

@@ -1,7 +1,17 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/generators';
+@import 'setup';
 
-@include pmc-u-font-size(
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-size' ) and not str-index( $token-str, '-font-size-' ) {
+		.lrv-u-#{$token} {
+			font-size: $value;
+		}
+	}
+}
+
+// Generates classes .lrv-u-font-size-{int}
+@include u-font-size(
 	(
 		($font-size-8,)
 		($font-size-10,)
@@ -17,8 +27,10 @@
 		($font-size-40,)
 		($font-size-50,)
 		($font-size-86,)
+		($font-size-8,  mobile-max) 
 		($font-size-12, mobile-max)
 		($font-size-14, mobile-max)
+		($font-size-16, mobile-max)
 		($font-size-18, mobile-max)
 		($font-size-22, mobile-max)
 		($font-size-26, mobile-max)
@@ -42,5 +54,46 @@
 		($font-size-32, desktop-xl,)
 		($font-size-28, desktop-xl,)
 		($font-size-46, desktop-xl,)
-	)
-);
+	), $NAMESPACE: 'lrv-' );
+
+
+//
+// Media Queries
+//
+
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-size' ) and not str-index( $token-str, '-font-size-' ) {
+
+		@include pmc-breakpoint( desktop ) {
+			.lrv-u-#{$token}\@desktop {
+				font-size: $value;
+			}
+		}
+	}
+}
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'font-size' ) and not str-index( $token-str, '-font-size-' ) {
+
+		@include pmc-breakpoint( desktop-xl ) {
+			.lrv-u-#{$token}\@desktop-xl {
+				font-size: $value;
+			}
+		}
+	}
+}
+
+.lrv-u-font-size-13 {
+	font-size: pmc-rem(13); 
+}
+
+.lrv-u-font-size-13\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		font-size: pmc-rem(13);
+	}
+}

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

@@ -0,0 +1,9 @@
+@import 'setup';
+
+.lrv-u-font-style-italic {
+	font-style: italic;
+}
+
+.lrv-u-font-style-normal {
+	font-style: normal;
+}

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,7 +1,43 @@
-.pmc-u-height-100p {
-	height: 100%;
-}
+@import '@penskemediacorp/larva-scss/dist/tools';
 
-.pmc-u-max-height-50 {
-	max-height: 3.125rem;
+$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%,
+);
+
+@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-' );
+
+.lrv-u-max-height-50 {
+	max-height: pmc-rem(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;
+}