@penskemediacorp/larva-scss 1.10.0-alpha.0 → 1.10.0

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,16 +1,18 @@
 # Larva SCSS
 
+**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
-- Tokens (e.g. spacing, color, z-index, and transition values)
-- Generators (i.e. mixins that generate classes according to a list of tokens)
+- 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. 
+Import a SCSS file for tools or tokens to use them in your project.
 
 ### Available Tools
 
@@ -83,7 +85,7 @@ $grids: (
 	),
 );
 
-@include pmc-a-grid( $grids );
+@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:
@@ -99,5 +101,5 @@ $color_list: (
 	blue-light: $color-blue-80,
 );
 
-@include pmc-u-background( $color_list );
+@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__/{tools/mixins.test.scss → mixins.test.scss}

@@ -1,5 +1,5 @@
 @import "true";
-@import "../../lib/tools/tools";
+@import "../lib/tools/tools";
 
 // Module Group
 @include test-module('Mixins') {

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

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

package/dist/_tokens.scss

@@ -2,5 +2,5 @@
 @import '../lib/tokens/typography';
 @import '../lib/tokens/sizing';
 @import '../lib/tokens/z-index';
-// @import '../lib/tokens/shadows';
+@import '../lib/tokens/shadows';
 @import '../lib/tokens/transition';

package/dist/_tools.scss

@@ -1,2 +1 @@
-// Mixins & Functions
-@import '../lib/tools/tools';
+@import './generators';

package/lib/tokens/_colors.scss

@@ -27,7 +27,7 @@ $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-50: #8C8C8C;
@@ -35,7 +35,7 @@ $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;
@@ -52,29 +52,3 @@ $color-whatsapp:  #23c100;
 $color-email:     $color-grey-20;
 $color-print:     $color-grey-20;
 $color-comment:   $color-grey-20;
-
-$semantic-color-list: (
-	white:              $color-grey-100,
-	black:              $color-grey-0,
-	red:                $color-red-49,
-	orange:             $color-orange-50,
-	yellow:             $color-yellow-50,
-	brand-primary:      $color-red-31,
-	blue:               $color-blue-50,
-	blue-medium-light:  $color-blue-65,
-	blue-light:         $color-blue-96,
-	blue-lightest:      $color-blue-92,
-	exclusive:          $color-yellow-50,
-	grey:               $color-grey-50,
-	grey-lightest:      $color-grey-98,
-	grey-light:         $color-grey-90,
-	grey-medium-light:  $color-grey-80,
-	grey-medium:        $color-grey-70,
-	grey-medium-dark:   $color-grey-35,
-	grey-dark:          $color-grey-20,
-	grey-darkest:       $color-grey-10,
-	green:              $color-green-28,
-	green-light:        $color-green-93,
-	geyser:             $color-geyser-85,
-	twitter:            $color-twitter,
-);

package/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

@@ -1,6 +1,6 @@
 // Sizing
 //
-// Deadline Sizing Tokens. These are to be filled in as needed.
+// Sizing Tokens. These are to be filled in as needed.
 //
 // Markup: sizing.html
 //
@@ -14,14 +14,19 @@ $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:     62.5rem; // 1000
-$screen-tablet:      48rem; // 768
-$screen-mobile-max:  47.999rem;
+$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/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

@@ -1,13 +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/crop-class-generator';
-@import './generators/spacing-class-generator';
-@import './generators/text-class-generator';
-@import './generators/grid-class-generator';
-@import './generators/color-class-generator';
+@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';
+