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

package/build/css/utilities.common.inline.scss

@@ -1,473 +0,0 @@
-.pmc-u-border-a-1 {
-  border: 1px solid; }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-border-a-1\@mobile-max {
-    border: 1px solid; } }
-
-.pmc-u-align-items-center {
-  align-items: center; }
-
-.pmc-u-justify-content-center {
-  justify-content: center; }
-
-.pmc-u-justify-content-space-evenly {
-  justify-content: space-evenly; }
-
-.pmc-u-justify-content-space-between {
-  justify-content: space-between; }
-
-.pmc-u-display-block {
-  display: block; }
-
-.pmc-u-display-inline {
-  display: inline; }
-
-.pmc-u-display-inline-block {
-  display: inline-block; }
-
-.pmc-u-display-none {
-  display: none; }
-
-.pmc-u-flex {
-  display: flex; }
-
-@media (min-width: 48rem) {
-  .pmc-u-flex\@tablet {
-    display: flex; } }
-
-.pmc-u-flex-grow-1 {
-  flex-grow: 1; }
-
-.pmc-u-flex-direction-column {
-  flex-direction: column; }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-flex-direction-column\@mobile-max {
-    flex-direction: column; } }
-
-.wf-active {
-  --font-family-primary: var( --font-family-primary-fancy );
-  --font-family-secondary: var( --font-family-secondary-fancy ); }
-
-.pmc-u-font-family-primary {
-  font-family: var(--font-family-primary); }
-
-.pmc-u-font-family-secondary {
-  font-family: var(--font-family-secondary); }
-
-.pmc-u-font-family-basic {
-  font-family: Helvetica, sans-serif;
-  font-family: var(--font-family-basic); }
-
-.pmc-u-font-size-8 {
-  font-size: 0.5rem; }
-
-.pmc-u-font-size-10 {
-  font-size: 0.625rem; }
-
-.pmc-u-font-size-12 {
-  font-size: 0.75rem; }
-
-.pmc-u-font-size-14 {
-  font-size: 0.875rem; }
-
-.pmc-u-font-size-16 {
-  font-size: 1rem; }
-
-.pmc-u-font-size-18 {
-  font-size: 1.125rem; }
-
-.pmc-u-font-size-20 {
-  font-size: 1.25rem; }
-
-.pmc-u-font-size-24 {
-  font-size: 1.5rem; }
-
-.pmc-u-font-size-28 {
-  font-size: 1.75rem; }
-
-.pmc-u-font-size-32 {
-  font-size: 2rem; }
-
-.pmc-u-font-size-36 {
-  font-size: 2.25rem; }
-
-.pmc-u-font-size-40 {
-  font-size: 2.5rem; }
-
-.pmc-u-font-size-50 {
-  font-size: 3.125rem; }
-
-.pmc-u-font-size-86 {
-  font-size: 5.375rem; }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-font-size-12\@mobile-max {
-    font-size: 0.75rem; } }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-font-size-14\@mobile-max {
-    font-size: 0.875rem; } }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-font-size-18\@mobile-max {
-    font-size: 1.125rem; } }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-font-size-22\@mobile-max {
-    font-size: 1.375rem; } }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-font-size-26\@mobile-max {
-    font-size: 1.625rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-font-size-18\@tablet {
-    font-size: 1.125rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-font-size-14\@tablet {
-    font-size: 0.875rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-font-size-26\@tablet {
-    font-size: 1.625rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-font-size-28\@tablet {
-    font-size: 1.75rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-font-size-38\@tablet {
-    font-size: 2.375rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-font-size-46\@tablet {
-    font-size: 2.875rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-14\@desktop {
-    font-size: 0.875rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-18\@desktop {
-    font-size: 1.125rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-20\@desktop {
-    font-size: 1.25rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-24\@desktop {
-    font-size: 1.5rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-26\@desktop {
-    font-size: 1.625rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-32\@desktop {
-    font-size: 2rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-36\@desktop {
-    font-size: 2.25rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-font-size-50\@desktop {
-    font-size: 3.125rem; } }
-
-@media (min-width: 78.75rem) {
-  .pmc-u-font-size-28\@desktop-xl {
-    font-size: 1.75rem; } }
-
-@media (min-width: 78.75rem) {
-  .pmc-u-font-size-56\@desktop-xl {
-    font-size: 3.5rem; } }
-
-@media (min-width: 78.75rem) {
-  .pmc-u-font-size-18\@desktop-xl {
-    font-size: 1.125rem; } }
-
-@media (min-width: 78.75rem) {
-  .pmc-u-font-size-32\@desktop-xl {
-    font-size: 2rem; } }
-
-@media (min-width: 78.75rem) {
-  .pmc-u-font-size-28\@desktop-xl {
-    font-size: 1.75rem; } }
-
-@media (min-width: 78.75rem) {
-  .pmc-u-font-size-46\@desktop-xl {
-    font-size: 2.875rem; } }
-
-.pmc-u-font-weight-light {
-  font-weight: 300; }
-
-.pmc-u-font-weight-normal {
-  font-weight: 400; }
-
-.pmc-u-font-weight-bold {
-  font-weight: 700; }
-
-.pmc-u-height-100p {
-  height: 100%; }
-
-.pmc-u-max-height-50 {
-  max-height: 3.125rem; }
-
-.pmc-u-height-16 {
-  height: 1rem; }
-
-.pmc-u-line-height-small {
-  line-height: 1.1; }
-
-.pmc-u-line-height-normal {
-  line-height: 1.35; }
-
-.pmc-u-line-height-copy {
-  line-height: 1.5; }
-
-.pmc-u-line-height-large {
-  line-height: 1.85; }
-
-.pmc-u-margin-t-050 {
-  margin-top: 0.5rem; }
-
-.pmc-u-margin-t-1 {
-  margin-top: 1rem; }
-
-.pmc-u-margin-t-2 {
-  margin-top: 2rem; }
-
-.pmc-u-margin-r-025 {
-  margin-right: 0.25rem; }
-
-.pmc-u-margin-r-050 {
-  margin-right: 0.5rem; }
-
-.pmc-u-margin-r-1 {
-  margin-right: 1rem; }
-
-.pmc-u-margin-r-2 {
-  margin-right: 2rem; }
-
-.pmc-u-margin-b-00 {
-  margin-bottom: 0; }
-
-.pmc-u-margin-b-2 {
-  margin-bottom: 2rem; }
-
-.pmc-u-margin-b-050 {
-  margin-bottom: 0.5rem; }
-
-.pmc-u-margin-b-1 {
-  margin-bottom: 1rem; }
-
-.pmc-u-margin-b-025 {
-  margin-bottom: 0.25rem; }
-
-.pmc-u-margin-l-025 {
-  margin-left: 0.25rem; }
-
-.pmc-u-margin-l-050 {
-  margin-left: 0.5rem; }
-
-.pmc-u-margin-l-1 {
-  margin-left: 1rem; }
-
-.pmc-u-margin-l-2 {
-  margin-left: 2rem; }
-
-.pmc-u-margin-lr-025 {
-  margin-right: 0.25rem;
-  margin-left: 0.25rem; }
-
-.pmc-u-margin-lr-050 {
-  margin-right: 0.5rem;
-  margin-left: 0.5rem; }
-
-.pmc-u-margin-lr-1 {
-  margin-right: 1rem;
-  margin-left: 1rem; }
-
-.pmc-u-margin-tb-00 {
-  margin-top: 0;
-  margin-bottom: 0; }
-
-.pmc-u-margin-tb-050 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem; }
-
-.pmc-u-margin-tb-1 {
-  margin-top: 1rem;
-  margin-bottom: 1rem; }
-
-.pmc-u-margin-tb-2 {
-  margin-top: 2rem;
-  margin-bottom: 2rem; }
-
-.pmc-u-margin-a-00 {
-  margin: 0; }
-
-.pmc-u-margin-l-auto {
-  margin-left: auto; }
-
-.pmc-u-margin-lr-auto {
-  margin-left: auto;
-  margin-right: auto; }
-
-@media (min-width: 48rem) {
-  .pmc-u-margin-l-auto\@tablet {
-    margin-left: auto; } }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-order-100\@mobile-max {
-    order: 100; } }
-
-.pmc-u-overflow-auto {
-  overflow: auto; }
-
-.pmc-u-padding-t-050 {
-  padding-top: 0.5rem; }
-
-.pmc-u-padding-t-1 {
-  padding-top: 1rem; }
-
-.pmc-u-padding-t-2 {
-  padding-top: 2rem; }
-
-.pmc-u-padding-r-025 {
-  padding-right: 0.25rem; }
-
-.pmc-u-padding-r-050 {
-  padding-right: 0.5rem; }
-
-.pmc-u-padding-r-1 {
-  padding-right: 1rem; }
-
-.pmc-u-padding-r-00 {
-  padding-right: 0; }
-
-.pmc-u-padding-b-00 {
-  padding-bottom: 0; }
-
-.pmc-u-padding-b-025 {
-  padding-bottom: 0.25rem; }
-
-.pmc-u-padding-b-050 {
-  padding-bottom: 0.5rem; }
-
-.pmc-u-padding-b-1 {
-  padding-bottom: 1rem; }
-
-.pmc-u-padding-b-2 {
-  padding-bottom: 2rem; }
-
-.pmc-u-padding-t-025 {
-  padding-top: 0.25rem; }
-
-.pmc-u-padding-l-1 {
-  padding-left: 1rem; }
-
-.pmc-u-padding-l-2 {
-  padding-left: 2rem; }
-
-.pmc-u-padding-lr-025 {
-  padding-right: 0.25rem;
-  padding-left: 0.25rem; }
-
-.pmc-u-padding-lr-050 {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem; }
-
-.pmc-u-padding-lr-1 {
-  padding-right: 1rem;
-  padding-left: 1rem; }
-
-.pmc-u-padding-lr-2 {
-  padding-right: 2rem;
-  padding-left: 2rem; }
-
-.pmc-u-padding-tb-025 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem; }
-
-.pmc-u-padding-tb-050 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem; }
-
-.pmc-u-padding-tb-075 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem; }
-
-.pmc-u-padding-tb-1 {
-  padding-top: 1rem;
-  padding-bottom: 1rem; }
-
-.pmc-u-padding-tb-2 {
-  padding-top: 2rem;
-  padding-bottom: 2rem; }
-
-.pmc-u-padding-a-00 {
-  padding: 0; }
-
-.pmc-u-padding-a-025 {
-  padding: 0.25rem; }
-
-.pmc-u-padding-a-050 {
-  padding: 0.5rem; }
-
-.pmc-u-padding-a-1 {
-  padding: 1rem; }
-
-.pmc-u-padding-a-2 {
-  padding: 2rem; }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-padding-tb-025\@mobile-max {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-padding-t-050\@tablet {
-    padding-top: 0.5rem; } }
-
-@media (min-width: 62.5rem) {
-  .pmc-u-padding-tb-050\@desktop {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem; } }
-
-.pmc-u-text-align-center {
-  text-align: center; }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-text-align-center\@mobile-max {
-    text-align: center; } }
-
-@media (min-width: 48rem) {
-  .pmc-u-text-align-center\@tablet {
-    text-align: center; } }
-
-.pmc-u-text-transform-uppercase {
-  text-transform: uppercase; }
-
-.pmc-u-whitespace-nowrap {
-  white-space: nowrap; }
-
-.pmc-u-width-16 {
-  width: 1rem; }
-
-.pmc-u-width-100p {
-  width: 100%; }
-
-.pmc-u-max-width-100p {
-  max-width: 100%; }
-
-@media (max-width: 47.999rem) {
-  .pmc-u-width-100p\@mobile-max {
-    width: 100%; } }
-
-.pmc-u-max-width-150 {
-  max-width: 9.375rem; }

package/holding/a-truncate-children/README.md

@@ -1,3 +0,0 @@
-# Truncate Children
-
-The truncate children algorithm truncates direct child elements with an ellipsis when its parent element has an explicit height and width set.

package/holding/a-truncate-children/a-truncate-children.browser-test.js

@@ -1,104 +0,0 @@
-function describe( testString, tests ) {
-	console.group( testString );
-	tests();
-	console.groupEnd();
-}
-
-function it( testString, test ) {
-	let testResult = test();
-	let color = ( false === testResult.result ) ? 'red' : 'green';
-
-	console.log( `%c ${testString} ${testResult.message}`, `color:${color}` );
-}
-
-function assertEquals( value1, value2 ) {
-	let message = '';
-	let expression = value1 % value2 < 1;
-
-	if ( false === expression ) {
-		message = '\n \t Fail: ' + (value1 % value2).toFixed(1);
-	}
-
-	return {
-		result: expression,
-		message: message
-	};
-}
-
-function tests() {
-
-	describe( 'a-space-children-vertical', () => {
-
-		const parents = document.querySelectorAll( '.a-space-children-vertical' );
-
-		if ( parents.length > 0 ) {
-
-			parents.forEach( parent => {
-				const children = parent.children;
-				const parentBox = parent.getBoundingClientRect();
-
-				console.log( 'Node:', parent );
-
-it( 'does not apply a space above the first item', () => {
-	let kid = children[0];
-
-	return assertEquals( parentBox.top, kid.getBoundingClientRect().top );
-});
-
-it( 'spaces children', () => {
-	let kid1Box = children[0].getBoundingClientRect();
-	let kid2Box = children[1].getBoundingClientRect();
-	let parentStyles = window.getComputedStyle( parent );
-	let spaceInPixels = parseInt( parentStyles.getPropertyValue( '--a-space-children-spacer' ) ) * 16;
-	
-	return assertEquals( kid1Box.bottom, ( kid2Box.top - spaceInPixels ) );
-});
-
-it( 'does not apply a space below the last item', () => {
-	let kid = children[ children.length - 1 ];
-
-	return assertEquals( parentBox.bottom, kid.getBoundingClientRect().bottom );
-});
-		
-			});
-		}
-
-	});
-
-	describe( 'a-space-children-horizontal', () => {
-
-		const parents = document.querySelectorAll( '.a-space-children-horizontal' );
-
-		if ( parents.length > 0 ) {
-
-			parents.forEach( parent => {
-				const children = parent.children;
-				const parentBox = parent.getBoundingClientRect();
-
-				console.log( 'Node:', parent );
-
-				it( 'does not apply a space left of the first item', () => {
-					let kid = children[0];
-
-					return assertEquals( parentBox.left, kid.getBoundingClientRect().left );
-				});
-
-				it( 'spaces children', () => {
-					let kid1 = children[0].getBoundingClientRect();
-					let kid2 = children[1].getBoundingClientRect();
-					
-					const spaceInPixels = parseInt( window.getComputedStyle( parent ).getPropertyValue( '--a-space-children-spacer' ) ) * 16; 
-
-					return assertEquals( kid1.right, ( parseInt(kid2.left) - spaceInPixels ) );
-				});
-
-			});
-
-		}
-	});
-	
-}
-
-window.addEventListener( 'load', function() {
-	tests();
-});

package/holding/a-truncate-children/a-truncate-children.css

@@ -1,4 +0,0 @@
-.a-truncate-children > * {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; }

package/holding/a-truncate-children/a-truncate-children.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>Document</title>
-	<link rel="stylesheet" href="a-truncate-children.css">
-</head>
-<body>
-	<div class="a-truncate-children">
-		<p>This text will be truncated when it's parent has a width. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eveniet ad dicta voluptas minus, voluptatem veniam tempore nemo iste cum dolorem modi deserunt. Porro voluptates inventore qui odit, tempora nam.</p>
-	</div>
-</body>
-</html>

package/holding/a-truncate-children/a-truncate-children.scss

@@ -1,5 +0,0 @@
-.a-truncate-children > * {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

package/src/01-generic/config.common.inline.scss

@@ -1,18 +0,0 @@
-@import '@penskemediacorp/larva-scss/dist/tokens';
-
-:root {
-	--font-family-primary: #{map-get( $semantic-font-families, 'helvetica' )};
-	--font-family-primary-fancy: #{map-get( $semantic-font-families, 'balto' )};
-	--font-family-secondary: #{map-get( $semantic-font-families, 'georgia' )};
-	--font-family-secondary-fancy: #{map-get( $semantic-font-families, 'eksell' )};
-	
-	--font-family-basic: #{map-get( $semantic-font-families, 'helvetica' )};
-
-	--site-max-width: #{$screen-desktop-xl};
-
-	--color-brand-primary: #{map-get( $semantic-color-list, brand-primary )};
-	--color-grey-lightest: #{map-get( $semantic-color-list, grey-lightest )};
-	--color-grey-light: #{map-get( $semantic-color-list, grey-light )};
-	--color-grey: #{map-get( $semantic-color-list, grey )};
-	--color-grey-medium-dark: #{map-get( $semantic-color-list, grey-medium-dark )};
-}

package/src/02-algorithms/a-glue/index.js

@@ -1 +0,0 @@
-import './a-glue.scss';

package/src/02-algorithms/a-icon/a-icon.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>Document</title>
-	<link rel="stylesheet" href="../../build/css/common.async.css">
-	<link rel="stylesheet" href="../../build/css/common.inline.css">
-	<script src="../../test-setup.js"></script>
-	<script src="./a-icon.browser-test.js"></script>
-</head>
-<body>
-	<p><span class="a-icon-before a-icon-arrow-right">Hello</span></p>
-	<p><span class="a-icon-before a-icon-arrow-left">Hello</span></p>
-	<p><span class="a-icon-before a-icon-forward-slash">Hi</span></p>
-	<p><span class="a-icon-after a-icon-arrow-down">Hi</span></p>
-	<div style="height:20px;width:30px" class="a-icon a-icon-envelope"></div>
-</body>
-</html>

package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.async.scss

@@ -1,5 +0,0 @@
-.pmc-a-unstyle-link,
-.pmc-a-unstyle-link:hover {
-	color: currentColor;
-	text-decoration: none; 
-}

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

@@ -1,28 +0,0 @@
-@import '@penskemediacorp/larva-scss/dist/generators';
-@import '@penskemediacorp/larva-scss/dist/tokens';
-
-$color_list: (
-	white: white,
-);
-
-@include pmc-u-background( (
-	white,
-	black,
-), $semantic-color-list );
-
-
-.pmc-u-background-brand-primary,
-.pmc-u-background-brand-primary\:hover:hover {
-	background-color: map-get( $semantic-color-list, brand-primary );
-	background-color: var( --color-brand-primary );
-}
-
-.pmc-u-background-grey-lightest {
-	background-color: map-get( $semantic-color-list, grey-lightest );
-	background-color: var( --color-grey-lightest );
-}
-
-.pmc-u-background-grey-light {
-	background-color: map-get( $semantic-color-list, grey-light );
-	background-color: var( --color-grey-light );
-}