@penskemediacorp/larva-tokens 0.3.10-develop.8 → 0.4.1

package/build/rollingstone.raw.json

@@ -228,14 +228,14 @@
       "category": "hr-color",
       "type": "color",
       "value": "rgb(247, 247, 247)",
-      "originalValue": "{!GREY_96}",
+      "originalValue": "#F7F7F7",
       "name": "BORDER_COLOR_GREY_LIGHTEST"
     },
     "BORDER_COLOR_BRAND_SECONDARY_LIGHT": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(165, 133, 83)",
+      "originalValue": "#A58553",
       "name": "BORDER_COLOR_BRAND_SECONDARY_LIGHT"
     },
     "BORDER_COLOR_GREY_LIGHT": {
@@ -248,29 +248,29 @@
     "BORDER_COLOR_GREY_DARK": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(106, 106, 106)",
-      "originalValue": "{!GREY_35}",
+      "value": "rgb(123, 124, 132)",
+      "originalValue": "#7B7C84",
       "name": "BORDER_COLOR_GREY_DARK"
     },
     "BORDER_COLOR_BRAND_SECONDARY_DARK": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "#7A592D",
       "name": "BORDER_COLOR_BRAND_SECONDARY_DARK"
     },
     "BORDER_COLOR_BRAND_SECONDARY": {
-      "value": "rgb(0, 0, 0)",
-      "type": "color",
       "category": "hr-color",
+      "type": "color",
+      "value": "rgb(0, 0, 0)",
       "originalValue": "{!BLACK}",
       "name": "BORDER_COLOR_BRAND_SECONDARY"
     },
     "BORDER_COLOR_GREY": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(140, 140, 140)",
-      "originalValue": "{!GREY_50}",
+      "value": "rgb(169, 169, 173)",
+      "originalValue": "#A9A9AD",
       "name": "BORDER_COLOR_GREY"
     },
     "BORDER_COLOR_BRAND_PRIMARY_LIGHT": {
@@ -290,15 +290,15 @@
     "BORDER_COLOR_BRAND_PRIMARY_DARK": {
       "category": "hr-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(146, 7, 0)",
+      "originalValue": "#920700",
       "name": "BORDER_COLOR_BRAND_PRIMARY_DARK"
     },
     "BORDER_COLOR_BRAND_PRIMARY": {
       "value": "rgb(228, 0, 0)",
       "type": "color",
       "category": "hr-color",
-      "originalValue": "{!RED_45}",
+      "originalValue": "rgb(228, 0, 0)",
       "name": "BORDER_COLOR_BRAND_PRIMARY"
     },
     "BACKGROUND_COLOR_GREY_LIGHT": {
@@ -312,35 +312,35 @@
       "category": "background-color",
       "type": "color",
       "value": "rgb(247, 247, 247)",
-      "originalValue": "{!GREY_96}",
+      "originalValue": "#F7F7F7",
       "name": "BACKGROUND_COLOR_GREY_LIGHTEST"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY_DARK": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "#7A592D",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY_DARK"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(165, 133, 83)",
+      "originalValue": "#A58553",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT"
     },
     "BACKGROUND_COLOR_GREY_DARK": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(106, 106, 106)",
-      "originalValue": "{!GREY_35}",
+      "value": "rgb(123, 124, 132)",
+      "originalValue": "#7B7C84",
       "name": "BACKGROUND_COLOR_GREY_DARK"
     },
     "BACKGROUND_COLOR_GREY": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(140, 140, 140)",
-      "originalValue": "{!GREY_50}",
+      "value": "rgb(169, 169, 173)",
+      "originalValue": "#A9A9AD",
       "name": "BACKGROUND_COLOR_GREY"
     },
     "BACKGROUND_COLOR_BODY": {
@@ -352,10 +352,10 @@
       "name": "BACKGROUND_COLOR_BODY"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY": {
-      "value": "rgb(211, 37, 49)",
+      "value": "rgb(244, 243, 241)",
       "type": "color",
       "category": "background-color",
-      "originalValue": "{!RED_49}",
+      "originalValue": "#F4F3F1",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY"
     },
     "BACKGROUND_COLOR_BLACK": {
@@ -375,8 +375,8 @@
     "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(146, 7, 0)",
+      "originalValue": "#920700",
       "name": "BACKGROUND_COLOR_BRAND_PRIMARY_DARK"
     },
     "BACKGROUND_COLOR_WHITE": {
@@ -390,21 +390,21 @@
       "value": "rgb(211, 37, 49)",
       "type": "color",
       "category": "background-color",
-      "originalValue": "{!RED_49}",
+      "originalValue": "rgb(211, 37, 49)",
       "name": "BACKGROUND_COLOR_BRAND_PRIMARY"
     },
     "BACKGROUND_COLOR_GREY_DARKEST": {
       "category": "background-color",
       "type": "color",
-      "value": "rgb(50, 50, 50)",
-      "originalValue": "{!GREY_20}",
+      "value": "rgb(48, 48, 48)",
+      "originalValue": "#303030",
       "name": "BACKGROUND_COLOR_GREY_DARKEST"
     },
     "COLOR_BRAND_SECONDARY": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "#7A592D",
       "name": "COLOR_BRAND_SECONDARY"
     },
     "COLOR_BLACK": {
@@ -424,8 +424,8 @@
     "COLOR_BRAND_PRIMARY_DARK": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(236, 28, 36)",
-      "originalValue": "{!PMC_RED}",
+      "value": "rgb(146, 7, 0)",
+      "originalValue": "#920700",
       "name": "COLOR_BRAND_PRIMARY_DARK"
     },
     "COLOR_WHITE": {
@@ -436,10 +436,10 @@
       "name": "COLOR_WHITE"
     },
     "COLOR_BRAND_PRIMARY": {
-      "value": "rgb(228, 0, 0)",
+      "value": "rgb(211, 37, 49)",
       "type": "color",
       "category": "text-color",
-      "originalValue": "{!RED_45}",
+      "originalValue": "#D32531",
       "name": "COLOR_BRAND_PRIMARY"
     },
     "COLOR_GREY_LIGHT": {
@@ -452,73 +452,73 @@
     "COLOR_BRAND_SECONDARY_DARK": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(122, 89, 45)",
+      "originalValue": "#7A592D",
       "name": "COLOR_BRAND_SECONDARY_DARK"
     },
     "COLOR_BRAND_SECONDARY_LIGHT": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(0, 0, 0)",
-      "originalValue": "{!BLACK}",
+      "value": "rgb(165, 133, 83)",
+      "originalValue": "#A58553",
       "name": "COLOR_BRAND_SECONDARY_LIGHT"
     },
     "COLOR_GREY_DARK": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(106, 106, 106)",
-      "originalValue": "{!GREY_35}",
+      "value": "rgb(123, 124, 132)",
+      "originalValue": "#7B7C84",
       "name": "COLOR_GREY_DARK"
     },
     "COLOR_GREY": {
       "category": "text-color",
       "type": "color",
-      "value": "rgb(140, 140, 140)",
-      "originalValue": "{!GREY_50}",
+      "value": "rgb(169, 169, 173)",
+      "originalValue": "#A9A9AD",
       "name": "COLOR_GREY"
     },
     "FONT_FAMILY_PRIMARY_FANCY": {
+      "value": "'Graphik', sans-serif",
+      "type": "font-family",
       "category": "font-family",
-      "value": "Courier, serif",
-      "type": "font",
-      "comment": "The webfont, loaded async",
-      "originalValue": "Courier, serif",
+      "originalValue": "'Graphik', sans-serif",
       "name": "FONT_FAMILY_PRIMARY_FANCY"
     },
     "FONT_FAMILY_PRIMARY": {
-      "value": "'Graphik', sans-serif",
+      "value": "Helvetica, sans-serif",
       "type": "font-family",
       "category": "font-family",
-      "originalValue": "{!GRAPHIK}",
+      "comment": "Fallback for primary-fancy.",
+      "originalValue": "Helvetica, sans-serif",
       "name": "FONT_FAMILY_PRIMARY"
     },
     "FONT_FAMILY_SECONDARY_FANCY": {
+      "value": "'Graphik', sans-serif",
+      "type": "font-family",
       "category": "font-family",
-      "value": "Papyrus, serif",
-      "type": "font",
-      "comment": "The webfont, loaded async",
-      "originalValue": "Papyrus, serif",
+      "originalValue": "'Graphik', sans-serif",
       "name": "FONT_FAMILY_SECONDARY_FANCY"
     },
     "FONT_FAMILY_SECONDARY": {
-      "value": "'Publico', serif",
+      "value": "'Helvetica', serif",
       "type": "font-family",
       "category": "font-family",
-      "originalValue": "{!PUBLICO}",
+      "comment": "Fallback for secondary-fancy.",
+      "originalValue": "'Helvetica', serif",
       "name": "FONT_FAMILY_SECONDARY"
     },
     "FONT_FAMILY_BODY": {
       "value": "'Graphik', sans-serif",
       "type": "font-family",
       "category": "font-family",
-      "originalValue": "{!GRAPHIK}",
+      "originalValue": "'Graphik', sans-serif",
       "name": "FONT_FAMILY_BODY"
     },
     "FONT_FAMILY_BASIC": {
       "value": "'Graphik', sans-serif",
       "type": "font-family",
       "category": "font-family",
-      "originalValue": "{!GRAPHIK}",
+      "originalValue": "'Graphik', sans-serif",
       "name": "FONT_FAMILY_BASIC"
     },
     "FONT_WEIGHT_LIGHT": {
@@ -634,12 +634,192 @@
       "originalValue": "2rem",
       "name": "SPACING_2"
     },
+    "PRIMARY_XL_FONT_SIZE_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "34px",
+      "originalValue": "34px",
+      "name": "PRIMARY_XL_FONT_SIZE_DESKTOP"
+    },
+    "PRIMARY_M_LINE_HEIGHT_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "25px",
+      "originalValue": "25px",
+      "name": "PRIMARY_M_LINE_HEIGHT_DESKTOP"
+    },
+    "PRIMARY_L_FONT_SIZE_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "34px",
+      "originalValue": "34px",
+      "name": "PRIMARY_L_FONT_SIZE_MOBILE"
+    },
+    "PRIMARY_XL_LINE_HEIGHT_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "38px",
+      "originalValue": "38px",
+      "name": "PRIMARY_XL_LINE_HEIGHT_DESKTOP"
+    },
+    "PRIMARY_S_FONT_SIZE_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "18px",
+      "originalValue": "18px",
+      "name": "PRIMARY_S_FONT_SIZE_DESKTOP"
+    },
+    "PRIMARY_S_LINE_HEIGHT_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "20px",
+      "originalValue": "20px",
+      "name": "PRIMARY_S_LINE_HEIGHT_DESKTOP"
+    },
+    "SECONDARY_M_LINE_HEIGHT_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "21px",
+      "originalValue": "21px",
+      "name": "SECONDARY_M_LINE_HEIGHT_MOBILE"
+    },
+    "SECONDARY_M_FONT_SIZE_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "17px",
+      "originalValue": "17px",
+      "name": "SECONDARY_M_FONT_SIZE_MOBILE"
+    },
     "BACKGROUND_COLOR_BRAND_ACCENT": {
       "value": "rgb(240, 241, 242)",
       "type": "color",
       "category": "background-color",
-      "originalValue": "{!WHITE_95}",
+      "originalValue": "rgb(240, 241, 242)",
       "name": "BACKGROUND_COLOR_BRAND_ACCENT"
+    },
+    "SECONDARY_M_FONT_SIZE_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "17px",
+      "originalValue": "17px",
+      "name": "SECONDARY_M_FONT_SIZE_DESKTOP"
+    },
+    "SECONDARY_M_LINE_HEIGHT_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "21px",
+      "originalValue": "21px",
+      "name": "SECONDARY_M_LINE_HEIGHT_DESKTOP"
+    },
+    "PRIMARY_S_LINE_HEIGHT_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "20px",
+      "originalValue": "20px",
+      "name": "PRIMARY_S_LINE_HEIGHT_MOBILE"
+    },
+    "PRIMARY_S_FONT_SIZE_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "18px",
+      "originalValue": "18px",
+      "name": "PRIMARY_S_FONT_SIZE_MOBILE"
+    },
+    "PRIMARY_XL_LINE_HEIGHT_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "38px",
+      "originalValue": "38px",
+      "name": "PRIMARY_XL_LINE_HEIGHT_MOBILE"
+    },
+    "PRIMARY_L_FONT_SIZE_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "29px",
+      "originalValue": "29px",
+      "name": "PRIMARY_L_FONT_SIZE_DESKTOP"
+    },
+    "PRIMARY_M_LINE_HEIGHT_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "20px",
+      "originalValue": "20px",
+      "name": "PRIMARY_M_LINE_HEIGHT_MOBILE"
+    },
+    "PRIMARY_XL_FONT_SIZE_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "34px",
+      "originalValue": "34px",
+      "name": "PRIMARY_XL_FONT_SIZE_MOBILE"
+    },
+    "PRIMARY_L_LINE_HEIGHT_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "32px",
+      "originalValue": "32px",
+      "name": "PRIMARY_L_LINE_HEIGHT_DESKTOP"
+    },
+    "PRIMARY_M_FONT_SIZE_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "17px",
+      "originalValue": "17px",
+      "name": "PRIMARY_M_FONT_SIZE_MOBILE"
+    },
+    "PRIMARY_M_FONT_SIZE_DESKTOP": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "font-size",
+      "type": "number",
+      "value": "23px",
+      "originalValue": "23px",
+      "name": "PRIMARY_M_FONT_SIZE_DESKTOP"
+    },
+    "PRIMARY_L_LINE_HEIGHT_MOBILE": {
+      "selector": "lrv-a-font",
+      "status": "alpha",
+      "category": "line-height",
+      "type": "number",
+      "value": "38px",
+      "originalValue": "38px",
+      "name": "PRIMARY_L_LINE_HEIGHT_MOBILE"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-tokens",
-  "version": "0.3.10-develop.8+3c5de6b4",
+  "version": "0.4.1",
   "description": "Design tokens",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -31,5 +31,5 @@
     "gulp": "^4.0.2",
     "plugin-error": "^1.0.1"
   },
-  "gitHead": "3c5de6b43fde7604aa7d69703bd119996baace1e"
+  "gitHead": "09f8fcbff1f1bcb95ec4e32c41918020510a2e0c"
 }

package/style-guides/robbreport.html

@@ -1511,16 +1511,16 @@
           <code>font-family-body</code>
         </th>
         <td>
-          <code>Roboto, san-serif</code>
+          <code>Georgia, serif</code>
         </td>
         
         <td>
-          <div style="font-family: Roboto, san-serif;">
+          <div style="font-family: Georgia, serif;">
             The quick brown fox jumps over the lazy dog.
           </div>
         </td>
       
-        <td>Webfont for body</td>
+        <td></td>
       </tr>
     
       <tr>
@@ -1540,6 +1540,23 @@
         <td></td>
       </tr>
     
+      <tr>
+        <th scope="row">
+          <code>font-family-body-fancy</code>
+        </th>
+        <td>
+          <code>Roboto, san-serif</code>
+        </td>
+        
+        <td>
+          <div style="font-family: Roboto, san-serif;">
+            The quick brown fox jumps over the lazy dog.
+          </div>
+        </td>
+      
+        <td>Webfont for body</td>
+      </tr>
+    
       <tr>
         <th scope="row">
           <code>font-family-accent-fancy</code>