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

package/src/03-utilities/u-box-alignment.common.inline.scss

@@ -1,17 +1,77 @@
+@import 'setup';
 
-.pmc-u-align-items-center {
+.lrv-u-align-items-center {
 	align-items: center;
 }
 
-.pmc-u-justify-content-center {
+.lrv-u-justify-content-center {
 	justify-content: center;
 }
 
-.pmc-u-justify-content-space-evenly {
+.lrv-u-justify-content-space-evenly {
 	justify-content: space-evenly;
 }
 
-.pmc-u-justify-content-space-between {
+.lrv-u-justify-content-space-between {
 	justify-content: space-between;
 }
 
+.lrv-u-align-items-start {
+	align-items: flex-start;
+}
+
+.lrv-u-justify-content-start {
+	justify-content: flex-start;
+}
+
+.lrv-u-justify-content-end {
+	justify-content: flex-end;
+}
+
+.lrv-u-align-items-end {
+	align-items: flex-start;
+}
+
+.lrv-u-align-items-stretch {
+	align-items: stretch;
+}
+
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-align-items-center\@desktop {
+		align-items: center;
+	}
+
+	.lrv-u-justify-content-center\@desktop {
+		justify-content: center;
+	}
+
+	.lrv-u-justify-content-space-evenly\@desktop {
+		justify-content: space-evenly;
+	}
+
+	.lrv-u-justify-content-space-between\@desktop {
+		justify-content: space-between;
+	}
+
+	.lrv-u-align-items-start\@desktop {
+		align-items: flex-start;
+	}
+
+	.lrv-u-justify-content-start\@desktop {
+		justify-content: flex-start;
+	}
+
+	.lrv-u-justify-content-end\@desktop {
+		justify-content: flex-end;
+	}
+
+	.lrv-u-align-items-end\@desktop {
+		align-items: flex-start;
+	}
+}
+
+.lrv-u-justify-content-center\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		justify-content: center;
+	}
+}

package/src/03-utilities/u-box-shadow.common.async.scss

@@ -1,4 +1,38 @@
+@import 'setup';
 
-.pmc-u-box-shadow-medium\@tablet {
-	box-shadow: 0 -0.313rem 0.313rem rgba( 0, 0, 0, 0.15 );
-}
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: box-shadow, 0 0 2px rgba(0,0,0,0.5)
+	@if str-index( $token-str, 'box-shadow' ) {
+		.lrv-u-#{$token} {
+			box-shadow: $value;
+			box-shadow: var( --#{$token}, #{$value} );
+		}
+	}
+}
+
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: box-shadow, 0 0 2px rgba(0,0,0,0.5)
+	@if str-index( $token-str, 'box-shadow' ) {
+
+		@include pmc-breakpoint( desktop ) {
+
+			.lrv-u-#{$token}\@desktop {
+				box-shadow: $value;
+				box-shadow: var( --#{$token}, #{$value} );
+			}
+		}
+	}
+}
+
+// Legacy Utility
+
+.lrv-u-box-shadow-medium\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		box-shadow: 0 -0.313rem 0.313rem rgba( 0, 0, 0, 0.15 );
+	}
+}

package/src/03-utilities/u-color.common.async.scss

@@ -1,22 +1,27 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-color-grey-medium-light {
-	color: #{map-get( $semantic-color-list, grey-medium-light )};
-	color: var( --color-grey-medium-light );
-}
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: color-grey-lightest, #EEEEEE
+	@if str-index( $token-str, 'color' )
+		and not str-index( $token-str, 'background' )
+		and not str-index( $token-str, 'border' ) {
 
-.pmc-u-color-grey {
-	color: #{map-get( $semantic-color-list, grey )};
-	color: var( --color-grey );
+		.lrv-u-#{$token}\:hover:hover {
+			color: $value;
+			color: var( --#{$token}, #{$value} );
+		}
+	}
 }
 
-.pmc-u-color-grey-medium-dark {
-	color: #{map-get( $semantic-color-list, grey-medium-dark )};
-	color: var( --color-grey-medium-dark );
+
+// Static Utilities
+
+.lrv-u-color-currentColor {
+	color: currentColor;
 }
 
-.pmc-u-color-white\:hover:hover {
-	color: map-get( $semantic-color-list, white );
-	// background-color: var( --color-brand-red );
+.lrv-u-color-transparent {
+	color: transparent;
 }

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

@@ -0,0 +1,39 @@
+@import 'setup';
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: color-grey-lightest, #EEEEEE
+	@if str-index( $token-str, 'color' )
+		and not str-index( $token-str, 'background' )
+		and not str-index( $token-str, 'border' ) {
+
+		.lrv-u-#{$token} {
+			color: $value;
+			color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+
+//
+// Media Queries
+//
+
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: color-grey-lightest, #EEEEEE
+	@if str-index( $token-str, 'color' )
+		and not str-index( $token-str, 'background' )
+		and not str-index( $token-str, 'border' ) {
+
+		.lrv-u-#{$token}\@desktop {
+
+			@include pmc-breakpoint( desktop ) {
+				color: $value;
+				color: var( --#{$token}, #{$value} );
+			}
+		}
+	}
+}

package/src/03-utilities/u-cursor.common.async.scss

@@ -1,3 +1,3 @@
-.pmc-u-cursor-pointer {
+.lrv-u-cursor-pointer {
 	cursor: pointer;
 }

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

@@ -1,11 +1,94 @@
-.pmc-u-display-block {
+@import 'setup';
+
+.lrv-u-display-block {
 	display: block;
 }
 
-.pmc-u-display-inline {
+.lrv-u-display-contents {
+	display: contents;
+}
+
+.lrv-u-display-inline {
 	display: inline;
 }
 
-.pmc-u-display-inline-block {
+.lrv-u-display-inline-block {
 	display: inline-block;
 }
+
+.lrv-u-display-none {
+	display: none;
+}
+
+.lrv-u-display-table {
+	display: table;
+}
+
+.lrv-u-display-inline-flex {
+	display: inline-flex;
+}
+
+@include pmc-breakpoint( desktop ) {
+
+	.lrv-u-display-block\@desktop {
+		display: block;
+	}
+
+	.lrv-u-display-contents\@desktop {
+		display: contents;
+	}
+
+	.lrv-u-display-inline\@desktop {
+		display: inline;
+	}
+
+	.lrv-u-display-inline-block\@desktop {
+		display: inline-block;
+	}
+
+	.lrv-u-display-none\@desktop {
+		display: none;
+	}
+
+	.lrv-u-display-inline-flex\@desktop {
+		display: inline-flex;
+	}
+}
+
+@include pmc-breakpoint( desktop-xl ) {
+	
+	.lrv-u-display-none\@desktop-xl {
+		display: none;
+	}
+	
+	.lrv-u-display-block\@desktop-xl {
+		display: block;
+	}
+}
+
+// Legacy
+.lrv-u-display-none\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		display: none;
+	}
+}
+
+.lrv-u-display-none\:first-child\@desktop-max {
+	@include pmc-breakpoint( desktop-max ) {
+		&> *:first-child {
+			display: none;
+		}
+	}
+}
+
+.lrv-u-display-inline-block\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		display: inline-block;
+	}
+}
+
+.lrv-u-display-block\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		display: block;
+	}
+}

package/src/03-utilities/u-filter.common.async.scss

@@ -0,0 +1,5 @@
+@import 'setup';
+
+.lrv-u-filter-grayscale-100 {
+    filter: grayscale(100%);
+}

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;
+			}
+		}
+	}
+}