@penskemediacorp/larva-scss 1.0.2-alpha.0 → 1.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Penske Media Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,11 +1,105 @@
-# `@penskemediacorp/larva-scss`
+# Larva SCSS
 
-> TODO: description
+**Note:** As of 8.7.0-alpha, the recommended approach for class generation is NOT to use these generators, but to directly iterate over a map of tokens add rulesets within that loop.
+
+This repository holds core SCSS tools and tokens for Larva.  These include:
+
+- Breakpoint mixin
+- Variables (e.g. spacing, color, z-index, and transition values)
+- Generators (i.e. mixins that generate classes according to a list of tokens) **NOT RECOMMENDED FOR UTILITIES**
+
+This repository provides **Sass files only**. The consuming project is responsible for building the assets.
 
 ## Usage
 
+Import a SCSS file for tools or tokens to use them in your project.
+
+### Available Tools
+
+#### Breakpoint Mixin
+
+The breakpoint mixin includes breakpoints for the following:
+
+* mobile-max = (max-width: 767px)
+* tablet = (min-width: 768px)
+* desktop = (min-width: 1000px)
+* desktop-xl = (min-width: 1260px)
+
+```language:scss
+// assets/src/patterns/07-utilities/u-display.scss
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+.u-display-none\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		display: none;
+	}
+}
+```
+
+### Rem Mixin
+
+```language:scss
+// assets/src/patterns/07-utilities/u-width.scss
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+.u-max-width-600 {
+	max-width: pmc-rem(600);
+}
+```
+
+### Tokens
+
+Refer to the directory lib/tokens in this package to see what tokens (a.k.a. Sass variables) are available to use.
+
+You can import the file in a Larva project and use the tokens like this:
+
+```language:scss
+// assets/src/patterns/06-algorithms/a-specific-grid.scss
+@import '@penskemediacorp/larva-scss/dist/tokens';
+
+.a-specific-grid {
+	display: grid;
+	grid-template-columns: repeat( 1fr, 3 );
+	grid-gap: $spacer-150;
+}
+
+.a-specific-grid__top-bar {
+	margin-top: $spacer-2;
+	grid-column: 1 / -1;
+}
 ```
-const larvaScss = require('@penskemediacorp/larva-scss');
 
-// TODO: DEMONSTRATE API
+### Generators
+
+For example, if you need to add grids that are not available in larva-css, you can use the grid algorithm generator. In a new file, `assets/src/patterns/06-algorithms/a-grid.scss`, add the following:
+
+```language:scss
+// assets/src/patterns/06-algorithms/a-grid.scss
+@import '@penskemediacorp/larva-scss/dist/generators';
+
+$grids: (
+	(
+		columns: 6,
+		spans: ( 2, 3, ),
+		breakpoint: tablet,
+	),
+);
+
+@include a-grid( $grids );
+```
+
+Utility generators are used the same way, but added inside the utilities directory, instead, and indicate a simple, property: value declaration. To add additional colors to a consuming project, for example, add the following:
+
+```language:scss
+// assets/src/patterns/07-utilities/u-background.scss
+
+@import '@penskemediacorp/larva-scss/dist/generators';
+@import '@penskemediacorp/larva-scss/dist/tokens';
+
+$color_list: (
+	blue: $color-blue-30,
+	blue-light: $color-blue-80,
+);
+
+@include token-utility-generator( $color_list );
 ```

package/__tests__/a-crop-generator.test.scss

@@ -0,0 +1,30 @@
+@import "true";
+@import "../lib/tools/tools";
+
+@include test-module('@mixin _a-crop-generator') {
+
+	$aspect-ratios: (
+		'16x9': (16, 9),
+		'4x3': (4, 3)
+	);
+
+	@include test('generates non-namespaced crops') {
+
+		@include assert {
+
+			@include output {
+				@include _a-crop-generator( $aspect-ratios, '' );
+			}
+
+			@include contains {
+				.a-crop-16x9 {
+					padding-bottom: calc( ( 9 / 16 ) * 100% );
+				}
+
+				.a-crop-4x3 img {
+					object-fit: cover;
+				}
+			}
+		}
+	}
+}

package/__tests__/a-grid-generator.test.scss

@@ -0,0 +1,71 @@
+@import "true";
+@import "../lib/tools/tools";
+
+@include test-module('@mixin _a-grid-generator') {
+
+	@include test('generates non-namepsaced grids') {
+		@include assert {
+
+			@include output {
+				$grids: (
+					(
+						columns: 2,
+						spans: ( 2, ),
+					),
+					(
+						columns: 3,
+						breakpoint: tablet,
+						spans: ( 2, ),
+					),
+				);
+
+				@include _a-grid-generator( $grids, '' );
+			}
+
+			@include expect {
+				.a-cols2 {
+					--cols: 2;
+				}
+
+				.a-cols2 > * {
+					flex-basis: 50%;
+				}
+
+				@supports (display: grid) {
+					.a-span2 {
+						grid-column: span 2;
+					}
+				}
+
+				.a-cols2 > .a-span2 {
+					flex-basis: 100%;
+				}
+
+				@media( min-width: 48rem ) {
+					.a-cols3\@tablet {
+						--cols: 3;
+					}
+
+					.a-cols3\@tablet > * {
+						flex-basis: 33.33333%;
+					}
+				}
+
+				@media( min-width: 48rem ) {
+
+					.a-span2\@tablet {
+						@supports ( display: grid ) {
+							grid-column: span 2;
+						}
+					}
+
+					.a-cols3\@tablet > .a-span2\@tablet {
+						flex-basis: 66.66667%;
+					}
+				}
+			}
+
+		}
+	}
+
+}

package/__tests__/basic-utility-generator.test.scss

@@ -0,0 +1,31 @@
+@import "true";
+@import "../lib/tools/tools";
+
+@include test-module('@mixin basic-utility-generator') {
+	$map: (
+		opacity-1: 1,
+	);
+
+	@include test('generates non-namespaced utility') {
+		@include assert {
+
+			@include output {
+
+				@include basic-utility-generator(
+					'opacity',
+					(
+						opacity-1,
+					),
+					$map,
+				);
+			}
+
+			@include expect {
+				.u-opacity-1 {
+					opacity: 1;
+				}
+			}
+		}
+	}
+
+}

package/__tests__/fixture/_settings.scss

@@ -0,0 +1 @@
+// Nothing here.

package/__tests__/functions.test.scss

@@ -0,0 +1,38 @@
+@import "true";
+@import "../lib/tools/tools";
+
+// Functions
+@include test-module('Functions') {
+
+	// Private _strip-unit function.
+	@include test('@function _strip-unit') {
+		@include assert-equal( _strip-unit(16px), 16 );
+	}
+
+	// pmc-rem function.
+	@include test('@function pmc-rem') {
+		@include assert-equal( pmc-rem(16), '1rem' );
+	}
+
+	// pmc-rem function.
+	@include test('@function pmc-inline-svg') {
+
+		$arrow: '<svg width="10" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M25.663 90.25l-6.75 6.429c-.226.214-.45.321-.788.321-.337 0-.563-.107-.788-.321-.45-.429-.45-1.072 0-1.5L23.3 89.5l-5.963-5.679c-.45-.428-.45-1.071 0-1.5a1.125 1.125 0 0 1 1.576 0l6.75 6.429c.45.429.45 1.071 0 1.5z" id="a"/></defs><use fill="#FFF" transform="matrix(-1 0 0 1 26.5 -81.5)" xlink:href="#a"/></svg>';
+
+		@include assert {
+			
+			@include output {
+				.a-icon-right-arrow {
+					--icon: url( #{pmc-inline-svg( $arrow )} );
+				}
+			}
+	
+			@include expect {
+				.a-icon-right-arrow {
+					--icon: url( "data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2710%27%20height%3D%2716%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%3Cdefs%3E%3Cpath%20d%3D%27M25.663%2090.25l-6.75%206.429c-.226.214-.45.321-.788.321-.337%200-.563-.107-.788-.321-.45-.429-.45-1.072%200-1.5L23.3%2089.5l-5.963-5.679c-.45-.428-.45-1.071%200-1.5a1.125%201.125%200%200%201%201.576%200l6.75%206.429c.45.429.45%201.071%200%201.5z%27%20id%3D%27a%27%2F%3E%3C%2Fdefs%3E%3Cuse%20fill%3D%27%23FFF%27%20transform%3D%27matrix%28-1%200%200%201%2026.5%20-81.5%29%27%20xlink%3Ahref%3D%27%23a%27%2F%3E%3C%2Fsvg%3E" );
+				}
+			}
+		}
+	}
+
+}

package/__tests__/larva-scss.test.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const path = require('path');
+const sassTrue = require('sass-true');
+const glob = require('glob');
+
+describe('@penskemediacorp/larva-scss', () => {
+	// Find all of the Sass files that end in `*.test.scss` in any directory in this project.
+	const sassTestFiles = glob.sync( path.resolve( __dirname, './**/*.test.scss' ) );
+
+	// Run True on every file found with the describe and it methods provided.
+	sassTestFiles.forEach( file =>
+		sassTrue.runSass( { file }, { describe, it } )
+	);
+});

package/__tests__/mixins.test.scss

@@ -0,0 +1,25 @@
+@import "true";
+@import "../lib/tools/tools";
+
+// Module Group
+@include test-module('Mixins') {
+
+	// pmc-breakpoint mixin.
+	@include test('@mixin pmc-breakpoint') {
+
+		@include assert {
+
+			@include output {
+				@include pmc-breakpoint( desktop ) {
+					font-size: 1rem;
+				}
+			}
+
+			@include contains {
+				@media( min-width: $screen-desktop ) {
+					font-size: 1rem;
+				}
+			}
+		}
+	}
+}

package/__tests__/spacing-class-generator.test.scss

@@ -0,0 +1,48 @@
+@import "true";
+@import "../lib/tools/tools";
+
+@include test-module('@mixin _spacing-class-generator') {
+
+	$spacer-050: 0.5rem;
+	$spacer-1: 1rem;
+
+	$margins: (
+		('tb', $spacer-050),
+		('a', $spacer-1, desktop)
+	);
+
+	$paddings: (
+		('a', $spacer-1),
+	);
+
+	@include test('generates non-namespaced classes') {
+		@include assert {
+
+			@include output {
+				$spacer-050: 0.5rem;
+				$spacer-1: 1rem;
+
+				@include _spacing-class-generator( 'margin', $margins, '' );
+				@include _spacing-class-generator( 'padding', $paddings, '' );
+			}
+
+			@include expect {
+				.u-margin-tb-050 {
+					margin-top: 0.5rem;
+					margin-bottom: 0.5rem;
+				}
+
+				@media (min-width: 62.5rem) {
+					.u-margin-a-1\@desktop {
+						margin: 1rem;
+					}
+				}
+
+				.u-padding-a-1 {
+					padding: 1rem;
+				}
+			}
+		}
+	}
+
+}

package/__tests__/text-utility-generators.test.scss

@@ -0,0 +1,103 @@
+@import "true";
+@import "../lib/tools/tools";
+
+@include test-module('@mixin _text-utility-generator') {
+
+	@include test('generates non-namespaced classes') {
+
+		@include assert {
+
+			@include output {
+
+				$font-size-1: 1rem;
+				$font-size-2: 2rem;
+
+				$font-weights: (
+					bold: 600,
+				);
+
+				$line-heights: (
+					sm: 1,
+					md: 2,
+					lg: 3,
+				);
+
+				$font-family-balto: Balto, sans-serif;
+
+				$font-families: (
+					balto: ($font-family-balto, 'web',),
+					helvetica: (Helvetica, 'system',),
+				);
+
+
+				@include _text-class-generator(
+					'font-size',
+					(
+						( $font-size-1, ),
+						( $font-size-2, desktop, )
+					),
+					'',
+				);
+
+				@include _text-class-generator(
+					'line-height',
+					(
+						sm,
+					),
+					'',
+					$line-heights,
+				);
+
+				@include _text-class-generator(
+					'font-weight',
+					(
+						bold,
+					),
+					'',
+					$font-weights,
+				);
+
+				@include _text-class-generator(
+					'font-family',
+					(
+						balto,
+						helvetica
+					),
+					'',
+					$font-families,
+				);
+			}
+
+			@include expect {
+				.u-font-size-16 {
+					font-size: 1rem;
+				}
+
+				@media( min-width: 62.5rem ) {
+					.u-font-size-32\@desktop {
+						font-size: 2rem;
+					}
+				}
+
+				.u-line-height-sm {
+					line-height: 1;
+				}
+
+				.u-font-weight-bold {
+					font-weight: 600;
+				}
+
+				.wf-active .u-font-family-balto {
+					font-family: Balto, sans-serif;
+				}
+
+				.u-font-family-helvetica {
+					font-family: Helvetica;
+				}
+			}
+
+		}
+	}
+
+}
+

package/__tests__/token-utility-generator.test.scss

@@ -0,0 +1,33 @@
+@import "true";
+@import "../lib/tools/tools";
+
+@include test-module('@mixin token-utility-generator') {
+	$map: (
+		background-color-brand-primary: #FF00AA,
+		text-color-grey-light: #CCCCCC,
+	);
+
+	@include test('generates background color') {
+		@include assert {
+
+			@include output {
+
+				@include token-utility-generator(
+					'background-color',
+					(
+						background-color-brand-primary,
+					),
+					$map,
+				);
+			}
+
+			@include expect {
+				.u-background-color-brand-primary {
+					background-color: #FF00AA;
+					background-color: var( --background-color-brand-primary, #FF00AA );
+				}
+			}
+		}
+	}
+
+}

package/dist/_generators.scss

@@ -0,0 +1,41 @@
+@import '../lib/tools/tools';
+
+// -----------
+// Algorithms
+// -----------
+
+@mixin a-grid( $grids, $NAMESPACE: '' ) {
+	@include _a-grid-generator( $grids, $NAMESPACE );
+};
+
+@mixin a-crop( $aspect-ratios, $NAMESPACE: '' ) {
+	@include _a-crop-generator( $aspect-ratios, $NAMESPACE );
+}
+
+// -----------
+// Utilities
+// -----------
+
+@mixin u-padding( $paddings, $NAMESPACE: '' ) {
+	@include _spacing-class-generator( 'padding', $paddings, $NAMESPACE );
+}
+
+@mixin u-margin( $margins, $NAMESPACE: '' ) {
+	@include _spacing-class-generator( 'margin', $margins, $NAMESPACE );
+}
+
+@mixin u-font-family( $tokens, $available_tokens, $NAMESPACE: '' ) {
+	@include _text-class-generator('font-family', $tokens, $NAMESPACE, $available_tokens );
+}
+
+@mixin u-line-height( $tokens, $available_tokens, $NAMESPACE: '' ) {
+	@include _text-class-generator('line-height', $tokens, $NAMESPACE, $available_tokens );
+}
+
+@mixin u-font-size( $tokens, $NAMESPACE: '' ) {
+	@include _text-class-generator( 'font-size', $tokens, $NAMESPACE );
+}
+
+@mixin u-font-weight( $tokens, $available_tokens, $NAMESPACE: '' ) {
+	@include _text-class-generator('font-weight', $tokens, $NAMESPACE, $available_tokens );
+}

package/dist/_tokens.scss

@@ -0,0 +1,6 @@
+@import '../lib/tokens/colors';
+@import '../lib/tokens/typography';
+@import '../lib/tokens/sizing';
+@import '../lib/tokens/z-index';
+@import '../lib/tokens/shadows';
+@import '../lib/tokens/transition';

package/dist/_tools.scss

@@ -0,0 +1 @@
+@import './generators';

package/lib/_setup.scss

@@ -0,0 +1,15 @@
+// @import './tools/tools';
+// @import './tokens/sizing.scss';
+// @import './tokens/colors.scss';
+
+// @mixin pmc-unstyle-list {
+// 	list-style-type: none;
+// 	padding-left: 0;
+// 	margin-top: 0;
+// 	margin-bottom: 0;
+// }
+
+// @mixin pmc-unstyle-link {
+// 	color: currentColor;
+// 	text-decoration: none;
+// }

package/{src/settings/colors.scss → lib/tokens/_colors.scss}

@@ -27,22 +27,19 @@ $color-geyser-85: #D3DDE2;
 
 // Greys
 $color-grey-100:#FFFFFF; // white
-$color-grey-98: #FAFAFA; // grey-lightest
+$color-grey-98: #F7F7F7; // grey-lightest
 $color-grey-90: #E6E6E6; // grey-light
 $color-grey-80: #CCCCCC; // grey-medium-light
-$color-grey-70: #6A6A6A; // grey-medium
 $color-grey-50: #8C8C8C;
+$color-grey-70: #6A6A6A; // grey-medium
 $color-grey-35: #595959; // grey-medium-dark
 $color-grey-20: #323232; // grey-dark
 $color-grey-10: #191919; // grey-darkest
-$color-grey-0:  #000000; // white
-
+$color-grey-0:  #000000; // black 
 
 // Semantic Color Names
 $color-white:     $color-grey-100;
 $color-black:     $color-grey-0;
-$color-brand-red: $color-red-31;
-$color-exclusive: $color-yellow-50;
 
 // Social Colors
 $color-facebook:  #4670D2;

package/{src/settings/shadows.scss → lib/tokens/_shadows.scss}

@@ -1,11 +1,6 @@
-// Shadows
-//
-// Style Guide: Settings.Shadows
-
-// stylelint-disable unit-blacklist
+// stylelint-disable unit-disallowed-list
 $shadow-light:   0 2px 4px 0 rgba(0,0,0,0.08); // Used on sticky menu.
 $shadow-medium:  0 -2px 9px 0 rgba(0,0,0,0.1);
 $shadow-dark:    0 14px 8px -8px rgba(0,0,0,0.18); // Button.
 $shadow-inset:   inset 0 3px 6px 0 rgba(0,0,0,0.5); // Input inset.
-$shadow-green: inset 0 5px 0 0 map-get( $semantic-color-list, green ), 0 2px 4px 0 rgba(0,0,0,0.15);
-// stylelint-enable unit-blacklist
+// stylelint-enable unit-disallowed-list

package/lib/tokens/_sizing.scss

@@ -0,0 +1,32 @@
+// Sizing
+//
+// Sizing Tokens. These are to be filled in as needed.
+//
+// Markup: sizing.html
+//
+// Style guide: Settings.Sizing
+
+$spacer-0:   0;
+$spacer-012: 0.125rem;
+$spacer-025: 0.25rem;
+$spacer-050: 0.5rem;
+$spacer-075: 0.75rem;
+$spacer-1:   1rem;
+$spacer-125: 1.25rem;
+$spacer-150: 1.5rem;
+$spacer-175: 1.75rem;
+$spacer-1875: 1.875rem;
+$spacer-2:   2rem;
+$spacer-250: 2.5rem;
+$spacer-3:   3rem;
+$spacer-350: 3.5rem;
+$spacer-4:   4rem;
+$spacer-5:   5rem;
+
+$screen-desktop-xxl:    87.5rem; // 1400
+$screen-desktop-xl:     78.75rem; // 1260
+$screen-desktop-xl-max: 78.7499rem; // 1260
+$screen-desktop:        62.5rem; // 1000
+$screen-desktop-max:    62.499rem; // 999
+$screen-tablet:         48rem; // 768
+$screen-mobile-max:     47.999rem;

package/{src/settings/transition.scss → lib/tokens/_transition.scss}

@@ -6,7 +6,7 @@ $ease-out-cubic:   cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
 $ease-in-out-sine: cubic-bezier( 0.445, 0.050, 0.550, 0.950 );
 $ease-out-expo:    cubic-bezier(0.19, 1, 0.22, 1);
 
-$transition-fade:            $transition-duration-300 $ease-in-out-quad;
-$transition-transform:       $transition-duration-300 $ease-out-cubic;
-$transition-button:          $transition-duration-300 $ease-out-cubic;
-$transition-thumbnail-hover: $transition-duration-300 $ease-out-expo;
+$transition-fade:      $transition-duration-300 $ease-in-out-quad;
+$transition-transform: $transition-duration-300 $ease-out-cubic;
+$transition-button:    $transition-duration-300 $ease-out-cubic;
+$transition-hover:     $transition-duration-300 $ease-out-expo;

package/lib/tools/_tools.scss

@@ -0,0 +1,17 @@
+// Functions
+@import './functions/helpers';
+@import './functions/pmc-rem';
+@import './functions/pmc-inline-svg';
+
+// Mixins
+@import './mixins/pmc-breakpoint';
+@import './mixins/pmc-font-family';
+
+// Generators
+@import './generators/a-grid-generator';
+@import './generators/a-crop-generator';
+@import './generators/spacing-utility-generator';
+@import './generators/text-utility-generator';
+@import './generators/token-utility-generator';
+@import './generators/basic-utility-generator';
+

package/lib/tools/functions/_pmc-inline-svg.scss

@@ -0,0 +1,49 @@
+@function str-replace($string, $search, $replace: '') {
+	$index: str-index($string, $search);
+
+	@if $index {
+		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+	}
+
+	@return $string;
+}
+
+@function url-encode($string) {
+	$map: (
+		'%': '%25',
+		'<': '%3C',
+		'>': '%3E',
+		' ': '%20',
+		'!': '%21',
+		'*': '%2A',
+		'"': '%27',
+		'(': '%28',
+		')': '%29',
+		';': '%3B',
+		':': '%3A',
+		'@': '%40',
+		'&': '%26',
+		'=': '%3D',
+		'+': '%2B',
+		'$': '%24',
+		',': '%2C',
+		'/': '%2F',
+		'?': '%3F',
+		'#': '%23',
+		'[': '%5B',
+		']': '%5D'
+		);
+	$new: $string;
+
+	@each $search, $replace in $map {
+		$new: str-replace($new, $search, $replace);
+	}
+
+	@return $new;
+}
+
+@function pmc-inline-svg($string) {
+	$url: url-encode($string);
+
+	@return '"data:image/svg+xml;charset=US-ASCII,#{$url}"';
+}

package/lib/tools/generators/README.md

@@ -0,0 +1,12 @@
+# Generators
+
+Generators are Sass mixins that generate utility classes and algorithms based on a given map of values.
+
+The types of generators are as follows:
+* Generators for specific patterns (e.g. `a-crop`, `a-grid`, `u-padding`)
+* Flexible generator for single purpose utility classes (e.g. project-utility-generator)
+* Token-based generators that output custom properties that are expected to be available via larva-tokens 
+
+## Public API
+
+Generators are designed to be wrapped in developer-friendly mixins for use in consuming projects. See the [Larva Wiki](https://github.com/penske-media-corp/pmc-larva/wiki) to learn which generators are available for public use.

package/{src/tools/generators/_crop-class-generator.scss → lib/tools/generators/_a-crop-generator.scss}

@@ -1,13 +1,13 @@
-@mixin _crop-class-generator( $aspect-ratios ) {
+@mixin _a-crop-generator( $aspect-ratios, $NAMESPACE ) {
 
 	@if type-of($aspect-ratios) != 'map' {
 		@error "`#{$aspect-ratios}` is not a valid value for $aspect-ratios. It must be map.";
 	}
 
 	@each $name, $sizes in $aspect-ratios {
-		.pmc-a-crop-#{$name} {
+		.#{$NAMESPACE}a-crop-#{$name} {
 			position: relative;
-			padding-bottom: calc( ( #{nth($sizes, 1)} / #{nth($sizes, 2)} ) * 100% );
+			padding-bottom: calc( ( #{nth($sizes, 2)} / #{nth($sizes, 1)} ) * 100% );
 
 			img {
 				position: absolute;

package/{src/tools/generators/_grid-class-generator.scss → lib/tools/generators/_a-grid-generator.scss}

@@ -9,15 +9,15 @@
 
 }
 
-@mixin _grid-selector( $columns, $breakpoint: false ) {
+@mixin _grid-selector( $columns, $breakpoint: false, $NAMESPACE: ''  ) {
 	@if $breakpoint {
 		@include pmc-breakpoint( $breakpoint ) {
-			.pmc-a-cols#{$columns}\@#{$breakpoint} {
+			.#{$NAMESPACE}a-cols#{$columns}\@#{$breakpoint} {
 				@include _grid( $columns );
 			}
 		}
 	} @else {
-		.pmc-a-cols#{$columns} {
+		.#{$NAMESPACE}a-cols#{$columns} {
 			@include _grid( $columns );
 		}
 	}
@@ -33,34 +33,34 @@
 	flex-basis: ( $span / $columns * 100% );
 }
 
-@mixin _grid-span-selector( $columns, $span: 1, $breakpoint: false ) {
+@mixin _grid-span-selector( $columns, $span: 1, $breakpoint: false, $NAMESPACE: '' ) {
 
 	@if $breakpoint {
 		@include pmc-breakpoint( $breakpoint ) {
 
-			.pmc-a-span#{$span}\@#{$breakpoint} {
+			.#{$NAMESPACE}a-span#{$span}\@#{$breakpoint} {
 				@include _grid-column( $columns, $span );
 			}
 
 			// Higher specificity to account for nested grids.
-			.pmc-a-cols#{$columns}\@#{$breakpoint} > .pmc-a-span#{$span}\@#{$breakpoint} {
+			.#{$NAMESPACE}a-cols#{$columns}\@#{$breakpoint} > .#{$NAMESPACE}a-span#{$span}\@#{$breakpoint} {
 				@include _grid-column-fallback( $columns, $span );
 			}
 
 		}
 	} @else {
-		.pmc-a-span#{$span} {
+		.#{$NAMESPACE}a-span#{$span} {
 			@include _grid-column( $columns, $span );
 		}
 
-		.pmc-a-cols#{$columns} > .pmc-a-span#{$span} {
+		.#{$NAMESPACE}a-cols#{$columns} > .#{$NAMESPACE}a-span#{$span} {
 			@include _grid-column-fallback( $columns, $span );
 		}
 	}
 
 }
 
-@mixin _grid-class-generator( $tokens ) {
+@mixin _a-grid-generator( $tokens, $NAMESPACE ) {
 
 	@if type-of($tokens) != 'list' {
 		@error "`#{$tokens}` is not a valid value for $tokens. It must be a list of maps.";
@@ -72,7 +72,7 @@
 		$spans: map-get( $grid, spans );
 
 		// Outputs pmc-colsX selector to be used in conjunction with .pmc-grid.
-		@include _grid-selector( $columns, $breakpoint );
+		@include _grid-selector( $columns, $breakpoint, $NAMESPACE );
 
 		@if $spans {
 
@@ -82,7 +82,8 @@
 				@include _grid-span-selector(
 					$columns,
 					$span,
-					map-get( $grid, breakpoint )
+					map-get( $grid, breakpoint ),
+					$NAMESPACE
 				);
 			}
 		}

package/lib/tools/generators/_basic-utility-generator.scss

@@ -0,0 +1,20 @@
+@mixin basic-utility-generator( $property, $tokens, $map: (), $NAMESPACE: '' ) {
+
+	@if type-of($tokens) != 'list' {
+		@error "`#{$tokens}` is not a valid value for $values. It must be a list.";
+	}
+
+	@each $token in $tokens {
+		$property_name: $property;
+
+		@if map-get($map, $token) {
+			$value: map-get($map, $token);
+
+			.#{$NAMESPACE}u-#{$token} {
+				#{$property}: $value;
+			}
+		} @else {
+			@error "`#{$map}` does not contain #{$token}.";
+		}
+	}
+}

package/{src/tools/generators/_spacing-class-generator.scss → lib/tools/generators/_spacing-utility-generator.scss}

@@ -8,7 +8,7 @@
 
 @import "../mixins/pmc-breakpoint";
 
-@mixin _spacing-class-generator( $property, $tokens ) {
+@mixin _spacing-class-generator( $property, $tokens, $NAMESPACE ) {
 	@if $property != 'margin' and $property != 'padding' {
 		@error "`#{$property}` is not a valid value for $property. It must be either 'margin' or 'padding'.";
 	}
@@ -30,13 +30,13 @@
 		@if (length($token) == 3) {
 			$bp: nth($token, 3);
 
-			.pmc-u-#{$property}-#{$sides}-#{$value}\@#{$bp} {
+			.#{$NAMESPACE}u-#{$property}-#{$sides}-#{$value}\@#{$bp} {
 				@include pmc-breakpoint($bp) {
 					@include _size-logic($sides, $property, nth($token, 2));
 				}
 			}
 		} @else {
-			.pmc-u-#{$property}-#{$sides}-#{$value} {
+			.#{$NAMESPACE}u-#{$property}-#{$sides}-#{$value} {
 				@include _size-logic($sides, $property, nth($token, 2));
 			}
 		}

package/{src/tools/generators/_text-class-generator.scss → lib/tools/generators/_text-utility-generator.scss}

@@ -9,7 +9,8 @@
 @import '../functions/pmc-rem';
 @import '../mixins/pmc-breakpoint';
 
-@mixin _text-class-generator( $property, $tokens, $available_tokens: () ) {
+@mixin _text-class-generator( $property, $tokens, $NAMESPACE, $available_tokens: () ) {
+
 	@if $property != 'font-size' and $property != 'line-height' and $property != 'font-family' and $property != 'font-weight' {
 		@error "`#{$property}` is not a valid value for $property. It must be either 'font-size', 'line-height', 'font-family', 'font-weight'.";
 	}
@@ -37,15 +38,15 @@
 
 			@if (length($token) == 2) {
 				$at: \@;
-				$selector: ".pmc-u-#{$property}-#{_strip-unit($value) * 16}#{$at}#{$breakpoint}";
+				$selector: ".#{$NAMESPACE}u-#{$property}-#{_strip-unit($value) * 16}#{$at}#{$breakpoint}";
 			} @else {
-				$selector: ".pmc-u-#{$property}-#{_strip-unit($value) * 16}";
+				$selector: ".#{$NAMESPACE}u-#{$property}-#{_strip-unit($value) * 16}";
 			}
 
 		}
 
 		@if ($property == 'line-height' or $property == 'font-weight') {
-			$selector: ".pmc-u-#{$property}-#{$token}";
+			$selector: ".#{$NAMESPACE}u-#{$property}-#{$token}";
 			$value: map-get($available_tokens, $token);
 		}
 
@@ -54,7 +55,7 @@
 			$token: map-get($available_tokens, $token);
 			$value: nth($token, 1);
 			$type: nth($token, 2);
-			$selector: ".pmc-u-#{$property}-#{$token_name}";
+			$selector: ".#{$NAMESPACE}u-#{$property}-#{$token_name}";
 
 			@if ($type == 'web') {
 				$selector: ".wf-active #{$selector}";

package/lib/tools/generators/_token-utility-generator.scss

@@ -0,0 +1,21 @@
+@mixin token-utility-generator( $property, $tokens, $map: (), $NAMESPACE: '' ) {
+
+	@if type-of($tokens) != 'list' {
+		@error "`#{$tokens}` is not a valid value for $values. It must be a list.";
+	}
+
+	@each $token in $tokens {
+		$property_name: $property;
+
+		@if map-get($map, $token) {
+			$value: map-get($map, $token);
+
+			.#{$NAMESPACE}u-#{$token} {
+				#{$property}: $value;
+				#{$property}: var( --#{$token}, #{$value} );
+			}
+		} @else {
+			@error "`#{$map}` does not contain #{$token}.";
+		}
+	}
+}

package/lib/tools/mixins/_pmc-breakpoint.scss

@@ -0,0 +1,17 @@
+@import '../../tokens/sizing';
+
+@mixin pmc-breakpoint($point) {
+	@if $point == desktop-xl {
+		@media (min-width: $screen-desktop-xl) { @content; }
+	} @else if $point == desktop-xl-max {
+		@media (max-width: $screen-desktop-xl-max) { @content; }
+	} @else if $point == desktop-max {
+		@media (max-width: $screen-desktop-max) { @content; }
+	} @else if $point == desktop {
+		@media (min-width: $screen-desktop) { @content; }
+	} @else if $point == tablet {
+		@media (min-width: $screen-tablet) { @content; }
+	} @else if $point == mobile-max {
+		@media (max-width: $screen-mobile-max) { @content; }
+	}
+}

package/lib/tools/mixins/_pmc-font-family.scss

@@ -0,0 +1,14 @@
+
+// Required to be used with larva tokens, custom property
+// font loading pattern, and webfontLoader.
+
+@mixin pmc-font-family( $font-family, $map: $TOKENS-MAP ) {
+
+	$webfont-family: $font-family + '-fancy';
+
+	font-family: map-get( $map, $font-family );
+
+	.wf-active & {
+		font-family: map-get( $map, $webfont-family );
+	}
+}

package/package.json

@@ -1,18 +1,11 @@
 {
   "name": "@penskemediacorp/larva-scss",
-  "version": "1.0.2-alpha.0",
-  "description": "> TODO: description",
+  "version": "1.1.2",
+  "description": "Larva SCSS authoring tools.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
   "license": "ISC",
   "main": "lib/larva-scss.js",
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
-  },
-  "files": [
-    "src"
-  ],
   "publishConfig": {
     "access": "public"
   },
@@ -21,16 +14,14 @@
     "url": "git+https://github.com/penske-media-corp/pmc-larva.git"
   },
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
+    "test": "../../node_modules/.bin/jest"
   },
   "bugs": {
     "url": "https://github.com/penske-media-corp/pmc-larva/issues"
   },
   "devDependencies": {
-    "sass-true": "^5.0.0"
-  },
-  "dependencies": {
-    "node-sass": "^4.12.0"
+    "sass-true": "^5.0.0",
+    "stylelint": "^13.6.1"
   },
-  "gitHead": "cf2b38a01e0a2c7c8404274af021f2fd909a7604"
+  "gitHead": "226d634b90913073b4b5734415acd3594570c79d"
 }

package/lib/larva-scss.js

@@ -1,7 +0,0 @@
-'use strict';
-
-module.exports = larvaScss;
-
-function larvaScss() {
-    // TODO
-}

package/src/settings/sizing.scss

@@ -1,23 +0,0 @@
-// Sizing
-//
-// Deadline Sizing Tokens. These are to be filled in as needed.
-//
-// Markup: sizing.html
-//
-// Style guide: Settings.Sizing
-
-$spacer-0:   0;
-$spacer-012: 0.125rem;
-$spacer-025: 0.25rem;
-$spacer-050: 0.5rem;
-$spacer-075: 0.75rem;
-$spacer-1:   1rem;
-$spacer-125: 1.25rem;
-$spacer-150: 1.5rem;
-$spacer-1875: 1.875rem;
-$spacer-2:   2rem;
-$spacer-250: 2.5rem;
-$spacer-3:   3rem;
-$spacer-4:   4rem;
-
-$border-radius-button: 0.313rem;

package/src/setup.scss

@@ -1,14 +0,0 @@
-@import './settings/sizing.scss';
-@import './settings/colors.scss';
-
-@mixin pmc-unstyle-list {
-	list-style-type: none;
-	padding-left: 0;
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-@mixin pmc-unstyle-link {
-	color: currentColor;
-	text-decoration: none;
-}

package/src/tools/generators/README.md

@@ -1,21 +0,0 @@
-# Utility Class Generators
-
-Generators output classes according to a list or map of tokens that are provided by a consuming project. Each generator is prefixed and underscore, and is called by a `pmc-*` wrapper mixin that outputs the actual classes. The `pmc-*` mixin is called in the theme, in a file that corresponds 1 to 1 with the name and location of the mixin's file in this repository.
-
-## To add a new generator:
-
-Generators should be added very sparingly and should be "brand agnostic" i.e. generators are meant to serve all brands and should not contain any values or CSS specific to a single design. 
-
-That being said, if a new generator is deemed appropriate, the following steps are generally how you would go about it:
-
-1. Create a file in 01-tools/mixins/generators following the naming conventions established in the existing file names.
-2. Import that file in 01-tools/tools.scss.
-3. Add a test to 01-tools/tools.spec.scss.
-4. Add a new file reflecting the wrapper mixin for the generator e.g. `u-#{$property}.scss`.
-5. Create a wrapper mixin to be called in a consuming theme e.g. `@mixin pmc-u-#{$property}`.
-
-## To use a generator in a theme:
-
-1. Add a corresponding `u-*.scss` file in the theme's assets/patterns/07-utilities directory.
-2. Import the generator's wrapper mixin using the alias provided by the theme's pmc.config.js. Likely @import '~@pmc/utilities/u-#{$property}.scss`.
-3. Call the generator with values defined by the theme.

package/src/tools/generators/_color-class-generator.scss

@@ -1,27 +0,0 @@
-@mixin _color-class-generator( $property, $colors, $color_list: () ) {
-	@if $property != 'color' and $property != 'background-color' {
-		@error "`#{$property}` is not a valid value for $property. It must be either 'background', 'color', or 'background-color'.";
-	}
-
-	@if type-of($colors) != 'list' {
-		@error "`#{$colors}` is not a valid value for $colors. It must be a list.";
-	}
-
-	@each $name in $colors {
-		$property_name: $property;
-
-		@if $property == 'background-color' {
-			$property_name: 'background'
-		}
-
-		@if map-get($color_list, $name) {
-			$color: map-get($color_list, $name);
-
-			.pmc-u-#{$property_name}-#{$name} {
-				#{$property}: $color;
-			}
-		} @else {
-			@error "`#{$color_list}` does not contain #{$name}.";
-		}
-	}
-}

package/src/tools/mixins/pmc-breakpoint.scss

@@ -1,18 +0,0 @@
-$pmc-screen-desktop-xxl: 87.5rem; // 1400
-$pmc-screen-desktop-xl:  78.75rem; // 1260
-$pmc-screen-desktop:     62.5rem;
-$pmc-screen-tablet:      48rem;
-$pmc-screen-mobile:      48rem; // 768
-$pmc-screen-mobile-max:  47.999rem;
-
-@mixin pmc-breakpoint($point) {
-	@if $point == desktop-xl {
-		@media (min-width: $pmc-screen-desktop-xl) { @content; }
-	} @else if $point == desktop {
-		@media (min-width: $pmc-screen-desktop) { @content; }
-	} @else if $point == tablet {
-		@media (min-width: $pmc-screen-tablet) { @content; }
-	} @else if $point == mobile-max {
-		@media (max-width: $pmc-screen-mobile-max) { @content; }
-	}
-}

package/src/tools/mixins/pmc-unstyle-link.scss

@@ -1,4 +0,0 @@
-@mixin pmc-unstyle-link {
-	color: currentColor;
-	text-decoration: none;
-}

package/src/tools/mixins/pmc-unstyle-list.scss

@@ -1,6 +0,0 @@
-@mixin pmc-unstyle-list {
-	list-style-type: none;
-	padding-left: 0;
-	margin-top: 0;
-	margin-bottom: 0;
-}

package/src/tools/tools.scss

@@ -1,15 +0,0 @@
-// Functions
-@import './functions/helpers';
-@import './functions/pmc-rem';
-
-// Mixins
-@import './mixins/pmc-breakpoint';
-@import './mixins/pmc-unstyle-list';
-@import './mixins/pmc-unstyle-link';
-
-// Generators
-@import './generators/crop-class-generator';
-@import './generators/spacing-class-generator';
-@import './generators/text-class-generator';
-@import './generators/grid-class-generator';
-@import './generators/color-class-generator';