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

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

@@ -0,0 +1,15 @@
+@import 'setup';
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	// example: background-color-grey-lightest, #EEEEEE
+	@if str-index( $token-str, 'background-color' ) {
+
+		.lrv-u-#{$token}\:hover:hover {
+			background-color: $value;
+			background-color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+

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

@@ -0,0 +1,37 @@
+@import 'setup';
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'background-color' ) {
+
+		.lrv-u-#{$token} {
+			background-color: $value;
+			background-color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+
+//
+// Static Utilities
+//
+
+.lrv-u-background-color-transparent {
+	background-color: transparent;
+}
+
+// Media Queries
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'background-color' ) {
+
+		.lrv-u-#{$token}\@desktop {
+			@include pmc-breakpoint( desktop ) {
+				background-color: $value;
+				background-color: var( --#{$token}, #{$value} );
+			}
+		}
+	}
+}

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

@@ -1,11 +1,39 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-border-color-grey-light {
-	border-color: #{map-get( $semantic-color-list, grey-medium-light )};
-	border-color: var( --color-grey-light );
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'border-color' ) {
+		.lrv-u-#{$token} {
+			border-color: $value;
+			border-color: var( --#{$token}, #{$value} );
+		}
+
+		.lrv-u-#{$token}\:hover:hover {
+			border-color: $value;
+			border-color: var( --#{$token}, #{$value} );
+		}
+	}
+}
+
+.lrv-u-border-color-currentColor {
+	border-color: currentColor;
 }
 
-.pmc-u-border-color-white {
-	border-color: #{map-get( $semantic-color-list, white )};
-}
+//
+// Media Queries
+//
+
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
+
+	@if str-index( $token-str, 'border-color' ) {
+
+		.lrv-u-#{$token}\@desktop {
+			@include pmc-breakpoint( desktop ) {
+				border-color: $value;
+				border-color: var( --#{$token}, #{$value} );
+			}
+		}
+	}
+}

package/src/03-utilities/u-border-radius.common.async.scss

@@ -1,3 +1,27 @@
-.pmc-u-border-radius-50p {
+.lrv-u-border-radius-50p {
 	border-radius: 50%;
-}
+}
+
+.lrv-u-border-radius-100 {
+	border-radius: 100px;
+}
+
+.lrv-u-border-radius-5 {
+	border-radius: 5px;
+}
+
+.lrv-u-border-radius-br-5 {
+	border-bottom-right-radius: 5px;
+}
+
+.lrv-u-border-radius-bl-5 {
+	border-bottom-left-radius: 5px;
+}
+
+.lrv-u-border-radius-tr-5 {
+	border-top-right-radius: 5px;
+}
+
+.lrv-u-border-radius-tl-5 {
+	border-top-left-radius: 5px;
+}

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

@@ -1,11 +1,222 @@
 @import '@penskemediacorp/larva-scss/dist/tools';
 
-.pmc-u-border-a-1 {
-	border: 1px solid;
+// TODO: Border widths should be generated from tokens,
+// similar to spacing.
+
+.lrv-u-border-b-1 {
+	border-bottom-width: 1px;
+}
+
+.lrv-u-border-t-1 {
+	border-top-width: 1px;
+}
+
+.lrv-u-border-l-1 {
+	border-left-width: pmc-rem(1);
+}
+
+.lrv-u-border-r-1 {
+	border-right-width: pmc-rem(1);
+}
+
+.lrv-u-border-t-2 {
+	border-top-width: 2px;
+}
+
+.lrv-u-border-t-3 {
+	border-top-width: 3px;
+}
+
+.lrv-u-border-b-3 {
+	border-bottom-width: 3px;
+}
+
+.lrv-u-border-t-5 {
+	border-top-width: pmc-rem(5);
+}
+
+.lrv-u-border-a-1 {
+	border-width: 1px;
+}
+
+.lrv-u-border-a-2 {
+	border-width: pmc-rem(2);
+}
+
+.lrv-u-border-a-3 {
+	border-width: 3px;
+}
+
+.lrv-u-border-a-0 {
+	border-width: 0;
+}
+
+.lrv-u-border-a-5 {
+	border-width: pmc-rem(5);
+}
+
+.lrv-u-border-t-6 {
+	border-top-width: pmc-rem(6);
 }
 
-.pmc-u-border-a-1\@mobile-max {
+.lrv-u-border-b-6 {
+	border-bottom-width: pmc-rem(6);
+}
+
+.lrv-u-border-r-6 {
+	border-right-width: pmc-rem(6);
+}
+
+.lrv-u-border-r-2 {
+	border-right-width: pmc-rem(2);
+}
+
+.lrv-u-border-b-2 {
+	border-bottom-width: pmc-rem(2);
+}
+
+.lrv-u-border-l-2 {
+	border-left-width: pmc-rem(2);
+}
+
+.lrv-u-border-l-00\@mobile-max {
+	@include pmc-breakpoint(mobile-max) {
+		border-left-width: 0;
+	}
+}
+
+.lrv-u-border-a-1\@mobile-max {
 	@include pmc-breakpoint( mobile-max ) {
-		border: 1px solid;
+		border-width: 1px;
+	}
+}
+
+@include pmc-breakpoint( mobile-max ) {
+	.lrv-u-border-a-1\@mobile-max {
+		border-width: 1px;
+	}
+
+	.lrv-u-border-l-00\@mobile-max {
+		border-left-width: 0px;
+	}
+
+	.lrv-u-border-r-00\@mobile-max {
+		border-right-width: 0px;
+	}
+
+	.lrv-u-border-t-1\@mobile-max {
+		border-top-width: 1px;
+	}
+
+	.lrv-u-border-b-00\@mobile-max {
+		border-bottom-width: 0px;
+	}
+
+	.lrv-u-border-b-1\@mobile-max {
+		border-bottom-width: 1px;
+	}
+}
+
+.lrv-u-border-t-1\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		border-top-width: 1px;
+	}
+}
+
+.lrv-u-border-t-0\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-top-width: 0px;
+	}
+}
+
+@include pmc-breakpoint( desktop ) {
+	.lrv-u-border-a-0\@desktop {
+		border-width: 0;
+	}
+
+	.lrv-u-border-t-3\@desktop {
+		border-top-width: 3px;
+	}
+
+	.lrv-u-border-b-3\@desktop {
+		border-bottom-width: 3px;
+	}
+}
+
+.lrv-u-border-l-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-left-width: 1px;
+	}
+}
+
+.lrv-u-border-r-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-right-width: 1px;
+	}
+}
+
+.lrv-u-border-r-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		border-right-width: 1px;
+	}
+}
+
+.lrv-u-border-b-1\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		border-bottom-width: 1px;
+	}
+}
+
+.lrv-u-border-l-1\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-left-width: 1px;
+	}
+}
+
+.lrv-u-border-r-1\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-right-width: 1px;
+	}
+}
+
+.lrv-u-border-t-1\@desktop-xl-max {
+    @include pmc-breakpoint( desktop-xl-max ) {
+        border-top-width: pmc-rem(1);
+    }
+}
+
+.lrv-u-border-t-050\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		border-top-width: pmc-rem(1);
+	}
+}
+
+.lrv-u-border-b-2\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		border-bottom-width: pmc-rem(2);
+	}
+ }
+
+.lrv-u-border-t-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		border-top-width: pmc-rem(1);
+	}
+}
+
+.lrv-u-border-t-0\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-top-width: pmc-rem(0);
+	}
+}
+
+.lrv-u-border-t-1\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+		border-top-width: pmc-rem(1);
+	}
+}
+
+.lrv-u-border-b-1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		border-bottom-width: pmc-rem(1);
 	}
 }

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,7 +1,38 @@
-@import '@penskemediacorp/larva-scss/dist/tools';
+@import 'setup';
 
-.pmc-u-box-shadow-medium\@tablet {
+@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,29 +1,27 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
+@import 'setup';
 
-.pmc-u-color-grey-light {
-	color: #{map-get( $semantic-color-list, grey-medium-light )};
-	color: var( --color-grey-light );
-}
+@each $token, $value in $TOKENS-MAP {
+	$token-str: quote( $token );
 
-.pmc-u-color-grey-light\:hover:hover {
-	color: #{map-get( $semantic-color-list, grey-medium-light )};
-	color: var( --color-grey-light );
-}
+	// 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 );
-}
 
-.pmc-u-color-white {
-	color: map-get( $semantic-color-list, white );
-}
+// Static Utilities
 
-.pmc-u-color-white\:hover:hover {
-	color: map-get( $semantic-color-list, white );
+.lrv-u-color-currentColor {
+	color: currentColor;
 }
+
+.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,15 +1,98 @@
-.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;
 }
 
-.pmc-u-display-none {
+.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-table\@desktop {
+		display: table;
+	}
+
+	.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%);
+}