@penskemediacorp/larva 0.4.4 → 0.5.0

package/build/tokens/wwd-dd.raw.json

@@ -0,0 +1,90 @@
+{
+  "aliases": {},
+  "props": {
+    "BORDER_COLOR_GREY_LIGHTEST": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(240, 240, 240)",
+      "originalValue": "rgb(240,240,240)",
+      "name": "BORDER_COLOR_GREY_LIGHTEST"
+    },
+    "FONT_FAMILY_PRIMARY_FANCY": {
+      "category": "font-family",
+      "value": "forma-djr-deck, sans-serif",
+      "type": "font",
+      "comment": "The webfont, loaded async",
+      "originalValue": "forma-djr-deck, sans-serif",
+      "name": "FONT_FAMILY_PRIMARY_FANCY"
+    },
+    "FONT_FAMILY_BASIC": {
+      "category": "font-family",
+      "value": "'Frank Ruhl Libre', serif",
+      "type": "font-family",
+      "originalValue": "'Frank Ruhl Libre', serif",
+      "name": "FONT_FAMILY_BASIC"
+    },
+    "BACKGROUND_COLOR_GREY_LIGHTEST": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(240, 240, 240)",
+      "originalValue": "rgb(240,240,240)",
+      "name": "BACKGROUND_COLOR_GREY_LIGHTEST"
+    },
+    "FONT_FAMILY_SECONDARY": {
+      "category": "font-family",
+      "value": "serif",
+      "type": "font",
+      "comment": "Fallback for secondary-fancy",
+      "originalValue": "serif",
+      "name": "FONT_FAMILY_SECONDARY"
+    },
+    "FONT_FAMILY_BODY": {
+      "category": "font-family",
+      "value": "'Frank Ruhl Libre', serif",
+      "type": "font",
+      "originalValue": "'Frank Ruhl Libre', serif",
+      "name": "FONT_FAMILY_BODY"
+    },
+    "FONT_FAMILY_SECONDARY_FANCY": {
+      "category": "font-family",
+      "value": "'Frank Ruhl Libre', serif",
+      "type": "font",
+      "comment": "The webfont, loaded async",
+      "originalValue": "'Frank Ruhl Libre', serif",
+      "name": "FONT_FAMILY_SECONDARY_FANCY"
+    },
+    "COLOR_GREY_LIGHTEST": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(240, 240, 240)",
+      "originalValue": "rgb(240,240,240)",
+      "name": "COLOR_GREY_LIGHTEST"
+    },
+    "FONT_FAMILY_ACCENT": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "value": "'Times New Roman', serif",
+      "type": "font-family",
+      "category": "font-family",
+      "originalValue": "'Times New Roman', serif",
+      "name": "FONT_FAMILY_ACCENT"
+    },
+    "FONT_FAMILY_PRIMARY": {
+      "category": "font-family",
+      "value": "sans-serif",
+      "type": "font",
+      "comment": "Fallback for primary-fancy",
+      "originalValue": "sans-serif",
+      "name": "FONT_FAMILY_PRIMARY"
+    },
+    "FONT_FAMILY_ACCENT_FANCY": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "value": "'Publico Banner', Times New Roman, sans-serif",
+      "type": "font-family",
+      "category": "font-family",
+      "originalValue": "'Publico Banner', Times New Roman, sans-serif",
+      "name": "FONT_FAMILY_ACCENT_FANCY"
+    }
+  }
+}

package/lib/server.js

@@ -39,6 +39,14 @@ const markdownFilter = new TwingFilter( 'markdown', ( string ) => {
 	}
 });
 
+// Support `{{ item|markup }}` syntax for outputting escaped content within loops.
+const markupFilter = new TwingFilter(
+	'markup',
+	( string ) => Promise.resolve( string ),
+	{},
+	{ is_safe: ['html'] }
+);
+
 const kebabify = ( name ) => {
 	let kebabCase = [];
 
@@ -67,6 +75,7 @@ if( fs.existsSync( patternConfig.projectPatternsDir ) ) {
 let twing = new TwingEnvironment( loader, { debug: true } );
 
 twing.addFilter( markdownFilter );
+twing.addFilter( markupFilter );
 
 // Add custom function support for doing wp action: {{ wp_action( ... ) }}
 twing.addFunction(new TwingFunction('wp_action',() => {
@@ -272,4 +281,4 @@ app.get( '/:source?/:type?', function (req, res) {
 	twing.render( 'index.html', req.params ).then( output => res.end( output ) );
 });
 
-module.exports = app;
+module.exports = app;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "> TODO: description",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/larva#readme",
@@ -43,16 +43,16 @@
   "dependencies": {
     "@babel/core": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
-    "@penskemediacorp/backstopjs-config": "^0.4.0",
-    "@penskemediacorp/eslint-config": "^0.4.0",
-    "@penskemediacorp/larva-css": "^0.4.4",
-    "@penskemediacorp/larva-js": "^0.4.0",
-    "@penskemediacorp/larva-patterns": "^0.4.4",
-    "@penskemediacorp/larva-scss": "^0.4.0",
-    "@penskemediacorp/larva-svg": "^0.4.0",
-    "@penskemediacorp/larva-tokens": "^0.4.2",
-    "@penskemediacorp/stylelint-config": "^0.4.0",
-    "@penskemediacorp/twig-to-php-parser": "^0.4.0",
+    "@penskemediacorp/backstopjs-config": "^0.5.0",
+    "@penskemediacorp/eslint-config": "^0.5.0",
+    "@penskemediacorp/larva-css": "^0.5.0",
+    "@penskemediacorp/larva-js": "^0.5.0",
+    "@penskemediacorp/larva-patterns": "^0.5.0",
+    "@penskemediacorp/larva-scss": "^0.5.0",
+    "@penskemediacorp/larva-svg": "^0.5.0",
+    "@penskemediacorp/larva-tokens": "^0.5.0",
+    "@penskemediacorp/stylelint-config": "^0.5.0",
+    "@penskemediacorp/twig-to-php-parser": "^0.5.0",
     "axios": "^0.21.1",
     "babel-loader": "^8.1.0",
     "chalk": "^4.1.0",
@@ -88,5 +88,5 @@
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
   },
-  "gitHead": "44d5a318ff9c543b006b568ae0f84d521d629793"
+  "gitHead": "ae579c2215c1e32f409cc2901eb5c95b60904bb7"
 }

package/build/tokens/build/bbpro.custom-properties.css

@@ -1,96 +0,0 @@
-
-:root {
-  --border-color-grey-lightest: rgb(237, 235, 235);
-  --border-color-brand-secondary-light: rgb(0, 0, 0);
-  --border-color-grey-light: rgb(204, 204, 204);
-  --border-color-grey-dark: rgb(76, 81, 103);
-  --border-color-brand-secondary-dark: rgb(0, 0, 0);
-  --border-color-brand-secondary: rgb(203, 0, 27);
-  --border-color-grey: rgb(130, 137, 161);
-  --border-color-brand-primary-light: rgb(236, 28, 36);
-  --border-color-white: rgb(255, 255, 255);
-  --border-color-brand-primary-dark: rgb(236, 28, 36);
-  --border-color-brand-primary: rgb(203, 0, 27);
-  --background-color-grey-light: rgb(204, 204, 204);
-  --background-color-grey-lightest: rgb(237, 235, 235);
-  --background-color-brand-secondary-dark: rgb(0, 0, 0);
-  --background-color-brand-secondary-light: rgb(0, 0, 0);
-  --background-color-grey-dark: rgb(76, 81, 103);
-  --background-color-grey: rgb(130, 137, 161);
-  /* The background color of the main body of the site. */
-  --background-color-body: rgb(255, 255, 255);
-  --background-color-brand-secondary: rgb(203, 0, 27);
-  --background-color-black: rgb(16, 17, 25);
-  --background-color-brand-primary-light: rgb(236, 28, 36);
-  --background-color-brand-primary-dark: rgb(236, 28, 36);
-  --background-color-white: rgb(255, 255, 255);
-  --background-color-brand-primary: rgb(203, 0, 27);
-  --background-color-grey-darkest: rgb(43, 46, 60);
-  --color-brand-secondary: rgb(203, 0, 27);
-  --color-black: rgb(16, 17, 25);
-  --color-brand-primary-light: rgb(236, 28, 36);
-  --color-brand-primary-dark: rgb(236, 28, 36);
-  --color-white: rgb(255, 255, 255);
-  --color-brand-primary: rgb(203, 0, 27);
-  --color-grey-light: rgb(230, 230, 230);
-  --color-brand-secondary-dark: rgb(0, 0, 0);
-  --color-brand-secondary-light: rgb(0, 0, 0);
-  --color-grey-dark: rgb(76, 81, 103);
-  --color-grey: rgb(130, 137, 161);
-  /* The webfont for font-family-primary. */
-  --font-family-primary-fancy: 'Fletcha S', Georgia, sans-serif;
-  /* The fallback font for font-family-primary. */
-  --font-family-primary: 'Georgia', serif;
-  /* The webfont for font-family-secondary. */
-  --font-family-secondary-fancy: 'neue-haas-grotesk-display', Arial, serif;
-  /* Fallback from font-family-secondary */
-  --font-family-secondary: Arial, serif;
-  --font-family-body: 'Georgia', Helvetica, sans-serif;
-  --font-family-basic: Helvetica, sans-serif;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-bold: 700;
-  --line-height-small: 1.1;
-  --line-height-normal: 1.35;
-  --line-height-copy: 1.5;
-  --line-height-large: 1.85;
-  /* Used for margins and padding only. */
-  --spacing-00: 0;
-  /* Used for margins and padding only. */
-  --spacing-025: 0.25rem;
-  /* Used for margins and padding only. */
-  --spacing-050: 0.5rem;
-  /* Used for margins and padding only. */
-  --spacing-075: 0.75rem;
-  /* Used for margins and padding only. */
-  --spacing-1: 1rem;
-  /* Used for margins and padding only. */
-  --spacing-125: 1.25rem;
-  /* Used for margins and padding only. */
-  --spacing-150: 1.5rem;
-  /* Used for margins and padding only. */
-  --spacing-2: 2rem;
-  --background-color-brand-accent-red: rgb(251, 103, 107);
-  --color-grey-ligh: rgb(213, 213, 213);
-  --color-brand-accent-green: rgb(0, 221, 161);
-  --border-color-brand-accent-red: rgb(251, 103, 107);
-  --border-color-brand-accent-blue: rgb(118, 186, 223);
-  --background-color-brand-accent-blue: rgb(118, 186, 223);
-  --color-grey-darkest: rgb(43, 46, 60);
-  --border-color-grey-ligh: rgb(213, 213, 213);
-  --background-color-brand-accent: rgb(207, 213, 230);
-  --border-color-black: rgb(16, 17, 25);
-  --color-brand-accent-red: rgb(251, 103, 107);
-  --background-color-grey-ligh: rgb(213, 213, 213);
-  --border-color-brand-accent: rgb(207, 213, 230);
-  --background-color-brand-accent-green: rgb(0, 221, 161);
-  --color-grey-lightest: rgb(237, 235, 235);
-  --border-color-brand-accent-green: rgb(0, 221, 161);
-  /* The fallback for the accent font */
-  --font-family-accent: Arial, serif;
-  --color-brand-accent-blue: rgb(118, 186, 223);
-  --color-brand-accent: rgb(207, 213, 230);
-  --border-color-grey-darkest: rgb(43, 46, 60);
-  /* The accent webfont, loaded async */
-  --font-family-accent-fancy: 'acumin-pro-condensed', Arial, sans-serif;
-}

package/build/tokens/build/bbpro.json

@@ -1,80 +0,0 @@
-{
-  "BORDER_COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
-  "BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
-  "BORDER_COLOR_GREY_LIGHT": "rgb(204, 204, 204)",
-  "BORDER_COLOR_GREY_DARK": "rgb(76, 81, 103)",
-  "BORDER_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
-  "BORDER_COLOR_BRAND_SECONDARY": "rgb(203, 0, 27)",
-  "BORDER_COLOR_GREY": "rgb(130, 137, 161)",
-  "BORDER_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
-  "BORDER_COLOR_WHITE": "rgb(255, 255, 255)",
-  "BORDER_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
-  "BORDER_COLOR_BRAND_PRIMARY": "rgb(203, 0, 27)",
-  "BACKGROUND_COLOR_GREY_LIGHT": "rgb(204, 204, 204)",
-  "BACKGROUND_COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
-  "BACKGROUND_COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
-  "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
-  "BACKGROUND_COLOR_GREY_DARK": "rgb(76, 81, 103)",
-  "BACKGROUND_COLOR_GREY": "rgb(130, 137, 161)",
-  "BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
-  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(203, 0, 27)",
-  "BACKGROUND_COLOR_BLACK": "rgb(16, 17, 25)",
-  "BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
-  "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
-  "BACKGROUND_COLOR_WHITE": "rgb(255, 255, 255)",
-  "BACKGROUND_COLOR_BRAND_PRIMARY": "rgb(203, 0, 27)",
-  "BACKGROUND_COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
-  "COLOR_BRAND_SECONDARY": "rgb(203, 0, 27)",
-  "COLOR_BLACK": "rgb(16, 17, 25)",
-  "COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
-  "COLOR_BRAND_PRIMARY_DARK": "rgb(236, 28, 36)",
-  "COLOR_WHITE": "rgb(255, 255, 255)",
-  "COLOR_BRAND_PRIMARY": "rgb(203, 0, 27)",
-  "COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
-  "COLOR_BRAND_SECONDARY_DARK": "rgb(0, 0, 0)",
-  "COLOR_BRAND_SECONDARY_LIGHT": "rgb(0, 0, 0)",
-  "COLOR_GREY_DARK": "rgb(76, 81, 103)",
-  "COLOR_GREY": "rgb(130, 137, 161)",
-  "FONT_FAMILY_PRIMARY_FANCY": "'Fletcha S', Georgia, sans-serif",
-  "FONT_FAMILY_PRIMARY": "'Georgia', serif",
-  "FONT_FAMILY_SECONDARY_FANCY": "'neue-haas-grotesk-display', Arial, serif",
-  "FONT_FAMILY_SECONDARY": "Arial, serif",
-  "FONT_FAMILY_BODY": "'Georgia', Helvetica, sans-serif",
-  "FONT_FAMILY_BASIC": "Helvetica, sans-serif",
-  "FONT_WEIGHT_LIGHT": "300",
-  "FONT_WEIGHT_NORMAL": "400",
-  "FONT_WEIGHT_BOLD": "700",
-  "LINE_HEIGHT_SMALL": "1.1",
-  "LINE_HEIGHT_NORMAL": "1.35",
-  "LINE_HEIGHT_COPY": "1.5",
-  "LINE_HEIGHT_LARGE": "1.85",
-  "SPACING_00": "0",
-  "SPACING_025": "0.25rem",
-  "SPACING_050": "0.5rem",
-  "SPACING_075": "0.75rem",
-  "SPACING_1": "1rem",
-  "SPACING_125": "1.25rem",
-  "SPACING_150": "1.5rem",
-  "SPACING_2": "2rem",
-  "BACKGROUND_COLOR_BRAND_ACCENT_RED": "rgb(251, 103, 107)",
-  "COLOR_GREY_LIGH": "rgb(213, 213, 213)",
-  "COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
-  "BORDER_COLOR_BRAND_ACCENT_RED": "rgb(251, 103, 107)",
-  "BORDER_COLOR_BRAND_ACCENT_BLUE": "rgb(118, 186, 223)",
-  "BACKGROUND_COLOR_BRAND_ACCENT_BLUE": "rgb(118, 186, 223)",
-  "COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
-  "BORDER_COLOR_GREY_LIGH": "rgb(213, 213, 213)",
-  "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(207, 213, 230)",
-  "BORDER_COLOR_BLACK": "rgb(16, 17, 25)",
-  "COLOR_BRAND_ACCENT_RED": "rgb(251, 103, 107)",
-  "BACKGROUND_COLOR_GREY_LIGH": "rgb(213, 213, 213)",
-  "BORDER_COLOR_BRAND_ACCENT": "rgb(207, 213, 230)",
-  "BACKGROUND_COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
-  "COLOR_GREY_LIGHTEST": "rgb(237, 235, 235)",
-  "BORDER_COLOR_BRAND_ACCENT_GREEN": "rgb(0, 221, 161)",
-  "FONT_FAMILY_ACCENT": "Arial, serif",
-  "COLOR_BRAND_ACCENT_BLUE": "rgb(118, 186, 223)",
-  "COLOR_BRAND_ACCENT": "rgb(207, 213, 230)",
-  "BORDER_COLOR_GREY_DARKEST": "rgb(43, 46, 60)",
-  "FONT_FAMILY_ACCENT_FANCY": "'acumin-pro-condensed', Arial, sans-serif"
-}

package/build/tokens/build/bbpro.map.scss

@@ -1,96 +0,0 @@
-
-$bbpro-map: (
-  'border-color-grey-lightest': (rgb(237, 235, 235)),
-  'border-color-brand-secondary-light': (rgb(0, 0, 0)),
-  'border-color-grey-light': (rgb(204, 204, 204)),
-  'border-color-grey-dark': (rgb(76, 81, 103)),
-  'border-color-brand-secondary-dark': (rgb(0, 0, 0)),
-  'border-color-brand-secondary': (rgb(203, 0, 27)),
-  'border-color-grey': (rgb(130, 137, 161)),
-  'border-color-brand-primary-light': (rgb(236, 28, 36)),
-  'border-color-white': (rgb(255, 255, 255)),
-  'border-color-brand-primary-dark': (rgb(236, 28, 36)),
-  'border-color-brand-primary': (rgb(203, 0, 27)),
-  'background-color-grey-light': (rgb(204, 204, 204)),
-  'background-color-grey-lightest': (rgb(237, 235, 235)),
-  'background-color-brand-secondary-dark': (rgb(0, 0, 0)),
-  'background-color-brand-secondary-light': (rgb(0, 0, 0)),
-  'background-color-grey-dark': (rgb(76, 81, 103)),
-  'background-color-grey': (rgb(130, 137, 161)),
-  /* The background color of the main body of the site. */
-  'background-color-body': (rgb(255, 255, 255)),
-  'background-color-brand-secondary': (rgb(203, 0, 27)),
-  'background-color-black': (rgb(16, 17, 25)),
-  'background-color-brand-primary-light': (rgb(236, 28, 36)),
-  'background-color-brand-primary-dark': (rgb(236, 28, 36)),
-  'background-color-white': (rgb(255, 255, 255)),
-  'background-color-brand-primary': (rgb(203, 0, 27)),
-  'background-color-grey-darkest': (rgb(43, 46, 60)),
-  'color-brand-secondary': (rgb(203, 0, 27)),
-  'color-black': (rgb(16, 17, 25)),
-  'color-brand-primary-light': (rgb(236, 28, 36)),
-  'color-brand-primary-dark': (rgb(236, 28, 36)),
-  'color-white': (rgb(255, 255, 255)),
-  'color-brand-primary': (rgb(203, 0, 27)),
-  'color-grey-light': (rgb(230, 230, 230)),
-  'color-brand-secondary-dark': (rgb(0, 0, 0)),
-  'color-brand-secondary-light': (rgb(0, 0, 0)),
-  'color-grey-dark': (rgb(76, 81, 103)),
-  'color-grey': (rgb(130, 137, 161)),
-  /* The webfont for font-family-primary. */
-  'font-family-primary-fancy': ('Fletcha S', Georgia, sans-serif),
-  /* The fallback font for font-family-primary. */
-  'font-family-primary': ('Georgia', serif),
-  /* The webfont for font-family-secondary. */
-  'font-family-secondary-fancy': ('neue-haas-grotesk-display', Arial, serif),
-  /* Fallback from font-family-secondary */
-  'font-family-secondary': (Arial, serif),
-  'font-family-body': ('Georgia', Helvetica, sans-serif),
-  'font-family-basic': (Helvetica, sans-serif),
-  'font-weight-light': (300),
-  'font-weight-normal': (400),
-  'font-weight-bold': (700),
-  'line-height-small': (1.1),
-  'line-height-normal': (1.35),
-  'line-height-copy': (1.5),
-  'line-height-large': (1.85),
-  /* Used for margins and padding only. */
-  'spacing-00': (0),
-  /* Used for margins and padding only. */
-  'spacing-025': (0.25rem),
-  /* Used for margins and padding only. */
-  'spacing-050': (0.5rem),
-  /* Used for margins and padding only. */
-  'spacing-075': (0.75rem),
-  /* Used for margins and padding only. */
-  'spacing-1': (1rem),
-  /* Used for margins and padding only. */
-  'spacing-125': (1.25rem),
-  /* Used for margins and padding only. */
-  'spacing-150': (1.5rem),
-  /* Used for margins and padding only. */
-  'spacing-2': (2rem),
-  'background-color-brand-accent-red': (rgb(251, 103, 107)),
-  'color-grey-ligh': (rgb(213, 213, 213)),
-  'color-brand-accent-green': (rgb(0, 221, 161)),
-  'border-color-brand-accent-red': (rgb(251, 103, 107)),
-  'border-color-brand-accent-blue': (rgb(118, 186, 223)),
-  'background-color-brand-accent-blue': (rgb(118, 186, 223)),
-  'color-grey-darkest': (rgb(43, 46, 60)),
-  'border-color-grey-ligh': (rgb(213, 213, 213)),
-  'background-color-brand-accent': (rgb(207, 213, 230)),
-  'border-color-black': (rgb(16, 17, 25)),
-  'color-brand-accent-red': (rgb(251, 103, 107)),
-  'background-color-grey-ligh': (rgb(213, 213, 213)),
-  'border-color-brand-accent': (rgb(207, 213, 230)),
-  'background-color-brand-accent-green': (rgb(0, 221, 161)),
-  'color-grey-lightest': (rgb(237, 235, 235)),
-  'border-color-brand-accent-green': (rgb(0, 221, 161)),
-  /* The fallback for the accent font */
-  'font-family-accent': (Arial, serif),
-  'color-brand-accent-blue': (rgb(118, 186, 223)),
-  'color-brand-accent': (rgb(207, 213, 230)),
-  'border-color-grey-darkest': (rgb(43, 46, 60)),
-  /* The accent webfont, loaded async */
-  'font-family-accent-fancy': ('acumin-pro-condensed', Arial, sans-serif),
-);