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

package/src/larva-ui/prism.scss

@@ -0,0 +1,127 @@
+/* stylelint-disable */
+/* PrismJS 1.17.1
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+markup-templating+php+json+php-extras+scss+twig */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+	 color: #ccc;
+	 background: none;
+	 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	 font-size: 1em;
+	 text-align: left;
+	 white-space: pre;
+	 word-spacing: normal;
+	 word-break: normal;
+	 word-wrap: normal;
+	 line-height: 1.5;
+
+	 -moz-tab-size: 4;
+	 -o-tab-size: 4;
+	 tab-size: 4;
+
+	 -webkit-hyphens: none;
+	 -moz-hyphens: none;
+	 -ms-hyphens: none;
+	 hyphens: none;
+
+ }
+
+ /* Code blocks */
+ pre[class*="language-"] {
+	 padding: 1em;
+	 margin: .5em 0;
+	 overflow: auto;
+ }
+
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+	 background: #2d2d2d;
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+	 padding: .1em;
+	 border-radius: .3em;
+	 white-space: normal;
+ }
+
+ .token.comment,
+ .token.block-comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+	 color: #999;
+ }
+
+ .token.punctuation {
+	 color: #ccc;
+ }
+
+ .token.tag,
+ .token.attr-name,
+ .token.namespace,
+ .token.deleted {
+	 color: #e2777a;
+ }
+
+ .token.function-name {
+	 color: #6196cc;
+ }
+
+ .token.boolean,
+ .token.number,
+ .token.function {
+	 color: #f08d49;
+ }
+
+ .token.property,
+ .token.class-name,
+ .token.constant,
+ .token.symbol {
+	 color: #f8c555;
+ }
+
+ .token.selector,
+ .token.important,
+ .token.atrule,
+ .token.keyword,
+ .token.builtin {
+	 color: #cc99cd;
+ }
+
+ .token.string,
+ .token.char,
+ .token.attr-value,
+ .token.regex,
+ .token.variable {
+	 color: #7ec699;
+ }
+
+ .token.operator,
+ .token.entity,
+ .token.url {
+	 color: #67cdcc;
+ }
+
+ .token.important,
+ .token.bold {
+	 font-weight: bold;
+ }
+ .token.italic {
+	 font-style: italic;
+ }
+
+ .token.entity {
+	 cursor: help;
+ }
+
+ .token.inserted {
+	 color: green;
+ }
+
+ // stylelint-enable

package/src/setup.scss

@@ -0,0 +1,7 @@
+@import '../../larva-scss/dist/generators';
+@import '../../larva-scss/dist/tokens';
+@import '../../larva-tokens/build/default.map.scss';
+
+$TOKENS-MAP: $default-map;
+
+$ICONS_BUILD_PATH: '../icons';

package/stylelint.config.js

@@ -1,17 +1,16 @@
 const path = require( 'path' );
-const fs = require( 'fs' );
 
 const rules = {
-	'extends': path.resolve( __dirname, '../stylelint-config/index.js' ),
-	'plugins': path.resolve( __dirname, '../stylelint-css-algorithms/index.js' ),
-	'rules': {
+	extends: path.resolve( __dirname, '../stylelint-config/index.js' ),
+	plugins: path.resolve( __dirname, '../stylelint-css-algorithms/index.js' ),
+	rules: {
 		'plugin/css-algorithms': {
 			'pmc-a-space-children': [
 				'margin-top',
 				'margin-left',
 				'display',
 				'--a-space-children-spacer',
-				'flex-wrap'
+				'flex-wrap',
 			],
 			'a-glue': [
 				'top',
@@ -23,7 +22,7 @@ const rules = {
 				'--a-glue-bottom',
 				'--a-glue-top',
 				'--a-glue-right',
-				'--a-glue-left'
+				'--a-glue-left',
 			],
 			'pmc-a-hover-dropup': [
 				'min-width',
@@ -37,10 +36,10 @@ const rules = {
 				'cursor',
 				'--a-icon-transform',
 				'z-index',
-				'max-height'
-			]
-		}
-	}
+				'max-height',
+			],
+		},
+	},
 };
 
-module.exports = rules;
+module.exports = rules;

package/build/css/algorithms.common.async.scss

@@ -1,36 +0,0 @@
-@media (min-width: 48rem) {
-  .pmc-a-hover-dropup\@tablet {
-    position: relative;
-    min-width: 14rem; }
-  .pmc-a-hover-dropup-trigger\@tablet {
-    cursor: pointer; }
-  .pmc-a-hover-dropup-target\@tablet {
-    width: 100%;
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 2;
-    bottom: 100%;
-    left: 0;
-    overflow-y: scroll;
-    max-height: 8.438rem; }
-  .pmc-a-hover-dropup\@tablet:hover .pmc-a-hover-dropup-target\@tablet,
-  .pmc-a-hover-dropup\@tablet:focus .pmc-a-hover-dropup-target\@tablet {
-    visibility: visible;
-    opacity: 1; }
-  .pmc-a-hover-dropup\@tablet:hover .a-icon-arrow-down::after,
-  .pmc-a-hover-dropup\@tablet:focus .a-icon-arrow-down {
-    --a-icon-transform: rotate(180deg); } }
-
-@media (min-width: 48rem) {
-  .a-icon-after-remove\@tablet::after {
-    display: none; } }
-
-.a-icon-invert {
-  --a-icon-filter: invert(1); }
-
-.pmc-a-unstyle-link,
-.pmc-a-unstyle-link:hover {
-  color: currentColor;
-  text-decoration: none; }

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

@@ -1,274 +0,0 @@
-.pmc-a-crop-1x1 {
-  position: relative;
-  padding-bottom: calc( ( 1 / 1 ) * 100%); }
-  .pmc-a-crop-1x1 img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-
-.pmc-a-crop-2x1 {
-  position: relative;
-  padding-bottom: calc( ( 2 / 2 ) * 100%); }
-  .pmc-a-crop-2x1 img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-
-.pmc-a-crop-2x3 {
-  position: relative;
-  padding-bottom: calc( ( 2 / 3 ) * 100%); }
-  .pmc-a-crop-2x3 img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-
-.pmc-a-crop-4x3 {
-  position: relative;
-  padding-bottom: calc( ( 3 / 4 ) * 100%); }
-  .pmc-a-crop-4x3 img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-
-.pmc-a-crop-16x9 {
-  position: relative;
-  padding-bottom: calc( ( 9 / 16 ) * 100%); }
-  .pmc-a-crop-16x9 img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-
-.pmc-a-crop-3x4 {
-  position: relative;
-  padding-bottom: calc( ( 4 / 3 ) * 100%); }
-  .pmc-a-crop-3x4 img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; }
-
-.pmc-a-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: start; }
-  @supports (display: grid) {
-    .pmc-a-grid {
-      --cols: 1;
-      display: grid;
-      grid-gap: 1.25rem;
-      grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
-
-.pmc-a-grid-item {
-  flex: none;
-  padding: 0.625rem; }
-  @supports (display: grid) {
-    .pmc-a-grid-item {
-      padding: 0; } }
-
-.pmc-a-cols2 {
-  --cols: 2; }
-  .pmc-a-cols2 > * {
-    flex-basis: 50%; }
-
-.pmc-a-cols3 {
-  --cols: 3; }
-  .pmc-a-cols3 > * {
-    flex-basis: 33.33333%; }
-
-@media (min-width: 48rem) {
-  .pmc-a-cols3\@tablet {
-    --cols: 3; }
-    .pmc-a-cols3\@tablet > * {
-      flex-basis: 33.33333%; } }
-
-@media (min-width: 48rem) {
-  @supports (display: grid) {
-    .pmc-a-span2\@tablet {
-      grid-column: span 2; } }
-  .pmc-a-cols3\@tablet > .pmc-a-span2\@tablet {
-    flex-basis: 66.66667%; } }
-
-@media (min-width: 48rem) {
-  .pmc-a-cols4\@tablet {
-    --cols: 4; }
-    .pmc-a-cols4\@tablet > * {
-      flex-basis: 25%; } }
-
-@media (min-width: 48rem) {
-  @supports (display: grid) {
-    .pmc-a-span2\@tablet {
-      grid-column: span 2; } }
-  .pmc-a-cols4\@tablet > .pmc-a-span2\@tablet {
-    flex-basis: 50%; } }
-
-@media (min-width: 48rem) {
-  @supports (display: grid) {
-    .pmc-a-span3\@tablet {
-      grid-column: span 3; } }
-  .pmc-a-cols4\@tablet > .pmc-a-span3\@tablet {
-    flex-basis: 75%; } }
-
-.pmc-a-glue-parent {
-  position: relative; }
-
-.pmc-a-glue {
-  top: 0;
-  left: 0;
-  position: absolute;
-  z-index: 2;
-  top: var(--a-glue-top, initial);
-  bottom: var(--a-glue-bottom, initial);
-  right: var(--a-glue-right, initial);
-  left: var(--a-glue-left, initial); }
-
-.pmc-a-glue--l-0 {
-  --a-glue-left: 0; }
-
-.pmc-a-glue--r-0 {
-  --a-glue-right: 0; }
-
-.pmc-a-glue--t-0 {
-  --a-glue-top: 0; }
-
-.pmc-a-glue--b-0 {
-  --a-glue-bottom: 0; }
-
-.a-icon {
-  content: var(--a-icon-content, "");
-  filter: var(--a-icon-filter, none);
-  background-image: var(--a-icon-url, "");
-  background-repeat: no-repeat;
-  background-size: contain;
-  height: var(--a-icon-height, 1rem);
-  width: var(--a-icon-width, 1rem);
-  transform: var(--a-icon-transform, none); }
-
-.a-icon-before {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap; }
-  .a-icon-before::before {
-    content: var(--a-icon-content, "");
-    filter: var(--a-icon-filter, none);
-    background-image: var(--a-icon-url, "");
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: var(--a-icon-height, 1rem);
-    width: var(--a-icon-width, 1rem);
-    transform: var(--a-icon-transform, none);
-    margin-right: 0.5rem; }
-
-.a-icon-after {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap; }
-  .a-icon-after::after {
-    content: var(--a-icon-content, "");
-    filter: var(--a-icon-filter, none);
-    background-image: var(--a-icon-url, "");
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: var(--a-icon-height, 1rem);
-    width: var(--a-icon-width, 1rem);
-    transform: var(--a-icon-transform, none);
-    margin-left: 0.5rem; }
-
-.a-icon-after\:margin-l-auto::after {
-  margin-left: auto; }
-
-.a-icon-arrow-left,
-.a-icon-arrow-right,
-.a-icon-arrow-down,
-.a-icon-arrow-up {
-  --a-icon-url: url( /svgs/stack/svg/sprite.stack.svg#arrow );
-  --a-icon-height: 0.75rem; }
-
-.a-icon-arrow-right {
-  --a-icon-transform: rotate(-90deg); }
-
-.a-icon-arrow-left {
-  --a-icon-transform: rotate(90deg); }
-
-.a-icon-envelope {
-  --a-icon-url: url( /svgs/stack/svg/sprite.stack.svg#envelope ); }
-
-.a-icon-forward-slash::before,
-.a-icon-bullet::before {
-  height: initial;
-  width: initial;
-  background: initial;
-  font-size: inherit;
-  color: currentColor;
-  margin: 0;
-  padding-right: 0.5rem; }
-
-.a-icon-forward-slash::after,
-.a-icon-bullet::after {
-  height: initial;
-  width: initial;
-  background: initial;
-  font-size: inherit;
-  color: currentColor;
-  margin: 0;
-  padding-left: 0.25rem; }
-
-.a-icon-forward-slash {
-  --a-icon-content: '/'; }
-
-.a-icon-bullet {
-  --a-icon-content: '\02022'; }
-
-:root {
-  --a-space-children-spacer: 0; }
-
-.pmc-a-space-children-horizontal > * + * {
-  margin-left: 0.5rem;
-  margin-left: calc( var( --a-space-children-spacer ) * 1rem); }
-
-@media (min-width: 48rem) {
-  .pmc-a-space-children-horizontal\@tablet > * + * {
-    margin-left: 0.5rem;
-    margin-left: calc( var( --a-space-children-spacer ) * 1rem); } }
-
-.pmc-a-space-children-vertical > * + * {
-  margin-top: 0.5rem;
-  margin-top: calc( var( --a-space-children-spacer ) * 1rem); }
-
-@media (max-width: 47.999rem) {
-  .pmc-a-space-children-vertical\@mobile-max > * + * {
-    margin-top: 0.5rem;
-    margin-top: calc( var( --a-space-children-spacer ) * 1rem); } }
-
-.pmc-a-space-children--050 {
-  --a-space-children-spacer: 0.5; }
-
-.pmc-a-space-children--1 {
-  --a-space-children-spacer: 1; }
-
-.pmc-a-space-children--2 {
-  --a-space-children-spacer: 2; }
-
-.pmc-a-unstyle-button {
-  border: 0;
-  background-color: transparent;
-  display: block;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  text-align: inherit; }
-
-.pmc-a-unstyle-list {
-  list-style-type: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0; }
-
-.pmc-a-wrapper {
-  max-width: var(--site-max-width);
-  margin-left: auto;
-  margin-right: auto; }

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

@@ -1,66 +0,0 @@
-:root {
-  --font-family-primary: Helvetica, system;
-  --font-family-primary-fancy: Balto, Helvetica, sans-serif, web, Helvetica;
-  --font-family-secondary: Georgia, system;
-  --font-family-secondary-fancy: Eksell, Georgia, serif, web, Georgia;
-  --font-family-basic: Helvetica, system;
-  --site-max-width: 78.75rem;
-  --color-brand-primary: #920200;
-  --color-grey-lightest: #FAFAFA;
-  --color-grey-light: #E6E6E6;
-  --color-grey: #8C8C8C;
-  --color-grey-medium-dark: #595959; }
-
-* {
-  box-sizing: border-box; }
-
-img {
-  max-width: 100%;
-  height: auto; }
-
-figure {
-  margin: 0; }
-
-[hidden] {
-  display: none;
-  width: 0;
-  height: 0; }
-
-#icon-sprite {
-  display: none; }
-
-svg {
-  fill: currentColor; }
-
-
-body {
-  font-family: Helvetica, sans-serif;
-  margin: 0;
-  line-height: 1.35; }
-
-strong {
-  font-weight: 700; }
-
-a {
-  color: #920200;
-  color: var(--color-brand-primary, #920200);
-  text-decoration: none; }
-  a:hover {
-    color: #920200;
-    color: var(--color-brand-primary, #920200); }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-weight: 700; }
-
-ol,
-ul {
-  margin-top: 0; }

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

@@ -1,9 +0,0 @@
-@media (max-width: 47.999rem) {
-  .pmc-js-MobileHeightToggle .pmc-js-MobileHeightToggle-target {
-    height: 0;
-    visibility: hidden; }
-  .pmc-js-MobileHeightToggle.is-expanded .pmc-js-MobileHeightToggle-target {
-    height: auto;
-    visibility: visible; }
-  .pmc-js-MobileHeightToggle.is-expanded .a-icon-arrow-down.a-icon-after::after {
-    --a-icon-transform: rotate(180deg); } }

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

@@ -1,57 +0,0 @@
-.pmc-u-background-white {
-  background-color: #FFFFFF; }
-
-.pmc-u-background-black {
-  background-color: #000000; }
-
-.pmc-u-background-brand-primary,
-.pmc-u-background-brand-primary\:hover:hover {
-  background-color: #920200;
-  background-color: var(--color-brand-primary); }
-
-.pmc-u-background-grey-lightest {
-  background-color: #FAFAFA;
-  background-color: var(--color-grey-lightest); }
-
-.pmc-u-background-grey-light {
-  background-color: #E6E6E6;
-  background-color: var(--color-grey-light); }
-
-.pmc-u-border-color-grey-light {
-  border-color: #CCCCCC;
-  border-color: var(--color-grey-light); }
-
-.pmc-u-border-color-white {
-  border-color: #FFFFFF; }
-
-.pmc-u-border-radius-50p {
-  border-radius: 50%; }
-
-@media (min-width: 48rem) {
-  .pmc-u-box-shadow-medium\@tablet {
-    box-shadow: 0 -0.313rem 0.313rem rgba(0, 0, 0, 0.15); } }
-
-.pmc-u-color-grey-light {
-  color: #CCCCCC;
-  color: var(--color-grey-light); }
-
-.pmc-u-color-grey-light\:hover:hover {
-  color: #CCCCCC;
-  color: var(--color-grey-light); }
-
-.pmc-u-color-grey {
-  color: #8C8C8C;
-  color: var(--color-grey); }
-
-.pmc-u-color-grey-medium-dark {
-  color: #595959;
-  color: var(--color-grey-medium-dark); }
-
-.pmc-u-color-white {
-  color: #FFFFFF; }
-
-.pmc-u-color-white\:hover:hover {
-  color: #FFFFFF; }
-
-.pmc-u-cursor-pointer {
-  cursor: pointer; }