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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +183 -45
  3. package/__tests__/fixtures/expected.js +29 -0
  4. package/__tests__/lib/generators.test.js +11 -0
  5. package/build/css/algorithms.common.async.css +4 -36
  6. package/build/css/algorithms.common.inline.css +21 -322
  7. package/build/css/generic.common.inline.css +4 -68
  8. package/build/css/js.common.async.css +3 -0
  9. package/build/css/js.common.inline.css +6 -9
  10. package/build/css/utilities.common.async.css +8 -81
  11. package/build/css/utilities.common.inline.css +29 -497
  12. package/gulpfile.js +110 -82
  13. package/lib/generators.js +93 -0
  14. package/package.json +14 -6
  15. package/src/01-generic/elements.common.inline.scss +33 -1
  16. package/src/01-generic/forms.common.inline.scss +7 -2
  17. package/src/01-generic/side-skins.common.inline.scss +10 -0
  18. package/src/01-generic/typography.common.inline.scss +23 -15
  19. package/src/02-algorithms/a-buy-now/a-buy-now.common.inline.scss +112 -0
  20. package/src/02-algorithms/a-carousel-grid/a-carousel-grid.common.inline.scss +66 -0
  21. package/src/02-algorithms/a-children-border/a-children-border.common.inline.scss +43 -0
  22. package/src/02-algorithms/a-children-link-color/a-children-link-color.common.inline.scss +15 -0
  23. package/src/02-algorithms/a-children-link-decoration/a-children-link-decoration.common.inline.scss +13 -0
  24. package/src/02-algorithms/a-counter/a-counter.common.inline.scss +26 -0
  25. package/src/02-algorithms/a-crop/README.md +17 -13
  26. package/src/02-algorithms/a-crop/a-crop.common.inline.scss +96 -12
  27. package/src/02-algorithms/a-crop/a-crop.html +2 -2
  28. package/src/02-algorithms/a-floated/a-floated.common.inline.scss +12 -6
  29. package/src/02-algorithms/a-font/a-font.common.inline.scss +3 -0
  30. package/src/02-algorithms/a-glue/a-glue.common.inline.scss +63 -6
  31. package/src/02-algorithms/a-glue/a-glue.html +2 -2
  32. package/src/02-algorithms/a-grid/README.md +141 -14
  33. package/src/02-algorithms/a-grid/a-grid.common.inline.scss +49 -5
  34. package/src/02-algorithms/a-grid/a-grid.html +4 -4
  35. package/src/02-algorithms/a-hidden/a-hidden.common.inline.scss +43 -0
  36. package/src/02-algorithms/a-hover-dropup/a-hover-dropup.common.async.scss +7 -7
  37. package/src/02-algorithms/a-hover-dropup/a-hover-dropup.html +3 -3
  38. package/src/02-algorithms/a-hover-effect/a-hover-effect.common.async.scss +25 -0
  39. package/src/02-algorithms/a-hover-effect/a-hover-effect.html +16 -0
  40. package/src/02-algorithms/a-icon/a-icon.common.async.scss +28 -3
  41. package/src/02-algorithms/a-icon/a-icon.common.inline.scss +51 -73
  42. package/src/02-algorithms/a-screen-reader-only/a-screen-reader-only.common.inline.scss +12 -6
  43. package/src/02-algorithms/a-scrollable-grid/a-scrollable-grid.common.inline.scss +52 -0
  44. package/src/02-algorithms/a-show-on-hover/a-show-on-hover.common.inline.scss +16 -0
  45. package/src/02-algorithms/a-space-children/a-space-children.common.inline.scss +88 -17
  46. package/src/02-algorithms/a-truncate-ellipsis/a-truncate-ellipsis.common.async.scss +71 -0
  47. package/src/02-algorithms/a-unstyle-button/a-unstyle-button.common.inline.scss +2 -2
  48. package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.inline.scss +7 -0
  49. package/src/02-algorithms/a-unstyle-list/a-unstyle-list.common.inline.scss +1 -1
  50. package/src/02-algorithms/a-wrapper/a-wrapper.common.inline.scss +14 -2
  51. package/src/03-utilities/u-background-color.common.async.scss +15 -0
  52. package/src/03-utilities/u-background-color.common.inline.scss +37 -0
  53. package/src/03-utilities/u-border-color.common.async.scss +33 -14
  54. package/src/03-utilities/u-border-radius.common.async.scss +23 -3
  55. package/src/03-utilities/u-border.common.inline.scss +200 -16
  56. package/src/03-utilities/u-box-alignment.common.inline.scss +64 -4
  57. package/src/03-utilities/u-box-shadow.common.async.scss +34 -3
  58. package/src/03-utilities/u-color.common.async.scss +17 -33
  59. package/src/03-utilities/u-color.common.inline.scss +39 -0
  60. package/src/03-utilities/u-cursor.common.async.scss +1 -1
  61. package/src/03-utilities/u-display.common.inline.scss +87 -4
  62. package/src/03-utilities/u-filter.common.async.scss +5 -0
  63. package/src/03-utilities/u-flex.common.inline.scss +151 -9
  64. package/src/03-utilities/u-font-family.common.inline.scss +41 -17
  65. package/src/03-utilities/u-font-size.common.inline.scss +58 -5
  66. package/src/03-utilities/u-font-style.common.inline.scss +9 -0
  67. package/src/03-utilities/u-font-weight.common.inline.scss +50 -12
  68. package/src/03-utilities/u-height.common.inline.scss +38 -8
  69. package/src/03-utilities/u-left.common.inline.scss +7 -0
  70. package/src/03-utilities/u-letter-spacing.common.inline.scss +11 -0
  71. package/src/03-utilities/u-line-height.common.inline.scss +49 -13
  72. package/src/03-utilities/u-list-style.common.async.scss +3 -0
  73. package/src/03-utilities/u-margin.common.inline.scss +182 -47
  74. package/src/03-utilities/u-max-width.common.inline.scss +25 -0
  75. package/src/03-utilities/u-opacity.common.inline.scss +3 -0
  76. package/src/03-utilities/u-order.common.inline.scss +29 -2
  77. package/src/03-utilities/u-overflow.common.inline.scss +14 -2
  78. package/src/03-utilities/u-padding.common.inline.scss +156 -52
  79. package/src/03-utilities/u-position.common.inline.scss +11 -0
  80. package/src/03-utilities/u-text-align.common.inline.scss +27 -4
  81. package/src/03-utilities/u-text-decoration.common.inline.scss +11 -0
  82. package/src/03-utilities/u-text-transform.common.inline.scss +14 -2
  83. package/src/03-utilities/u-top.common.inline.scss +7 -0
  84. package/src/03-utilities/u-transform.common.inline.scss +12 -0
  85. package/src/03-utilities/u-vertical-align.common.inline.scss +7 -0
  86. package/src/03-utilities/u-whitespace.common.inline.scss +1 -1
  87. package/src/03-utilities/u-width.common.inline.scss +198 -12
  88. package/src/04-js/README.md +5 -0
  89. package/src/04-js/js-Collapsible.common.inline.scss +15 -0
  90. package/src/04-js/js-ExpandableSearch.common.async.scss +33 -0
  91. package/src/04-js/js-Flickity.common.async.scss +91 -0
  92. package/src/04-js/js-Header.common.inline.scss +6 -0
  93. package/src/04-js/js-MegaMenu.common.inline.scss +50 -0
  94. package/src/04-js/js-MobileHeightToggle.common.inline.scss +7 -5
  95. package/src/04-js/js-PopOver.common.async.scss +13 -0
  96. package/src/04-js/js-Tooltip.common.inline.scss +17 -0
  97. package/src/04-js/js-VideoShowcase.common.inline.scss +33 -0
  98. package/src/04-js/partials/expandable-search.scss +202 -0
  99. package/src/04-js/partials/flickity.scss +149 -0
  100. package/src/_generated/_a-font.scss +1027 -0
  101. package/src/larva-ui/prism.scss +127 -0
  102. package/src/setup.scss +7 -0
  103. package/stylelint.config.js +10 -11
  104. package/.DS_Store +0 -0
  105. package/src/.DS_Store +0 -0
  106. package/src/01-generic/config.common.inline.scss +0 -18
  107. package/src/02-algorithms/.DS_Store +0 -0
  108. package/src/02-algorithms/a-glue/.DS_Store +0 -0
  109. package/src/02-algorithms/a-icon/a-icon.html +0 -20
  110. package/src/02-algorithms/a-unstyle-link/a-unstyle-link.common.async.scss +0 -5
  111. package/src/03-utilities/u-background.common.async.scss +0 -32
package/build/css/utilities.common.async.css CHANGED
@@ -1,81 +1,8 @@
1
- .pmc-u-background-white {
2
- background-color: #FFFFFF; }
3
-
4
- .pmc-u-background-black {
5
- background-color: #000000; }
6
-
7
- .pmc-u-background-brand-primary,
8
- .pmc-u-background-brand-primary\:hover:hover {
9
- background-color: #920200;
10
- background-color: var(--color-brand-primary); }
11
-
12
- .pmc-u-background-grey-lightest {
13
- background-color: #FAFAFA;
14
- background-color: var(--color-grey-lightest); }
15
-
16
- .pmc-u-background-grey-light {
17
- background-color: #E6E6E6;
18
- background-color: var(--color-grey-light); }
19
-
20
- .pmc-u-background-transparent {
21
- background-color: transparent; }
22
-
23
- .pmc-u-border-color-grey-light {
24
- border-color: #CCCCCC;
25
- border-color: var(--color-grey-light); }
26
-
27
- .pmc-u-border-color-grey {
28
- border-color: #8C8C8C;
29
- border-color: var(--color-grey); }
30
-
31
- .pmc-u-border-color-white {
32
- border-color: #FFFFFF; }
33
-
34
- .pmc-u-border-color-currentColor {
35
- border-color: currentColor; }
36
-
37
- .pmc-u-border-radius-50p {
38
- border-radius: 50%; }
39
-
40
- .pmc-u-border-radius-5 {
41
- border-radius: 5px; }
42
-
43
- @media (min-width: 48rem) {
44
- .pmc-u-box-shadow-medium\@tablet {
45
- box-shadow: 0 -0.313rem 0.313rem rgba(0, 0, 0, 0.15); } }
46
-
47
- .pmc-u-color-grey-light {
48
- color: #CCCCCC;
49
- color: var(--color-grey-light); }
50
-
51
- .pmc-u-color-grey {
52
- color: #8C8C8C;
53
- color: var(--color-grey); }
54
-
55
- .pmc-u-color-grey-medium-dark {
56
- color: #595959;
57
- color: var(--color-grey-medium-dark); }
58
-
59
- .pmc-u-color-white {
60
- color: #FFFFFF; }
61
-
62
- .pmc-u-color-brand-primary {
63
- color: #920200;
64
- color: var(--color-brand-primary); }
65
-
66
- .pmc-u-color-currentColor {
67
- color: currentColor; }
68
-
69
- .pmc-u-color-white\:hover:hover {
70
- color: #FFFFFF; }
71
-
72
- .pmc-u-color-grey-light\:hover:hover {
73
- color: #E6E6E6;
74
- color: var(--color-grey-light); }
75
-
76
- .pmc-u-color-grey-dark\:hover:hover {
77
- color: #323232;
78
- color: var(--color-grey-dark); }
79
-
80
- .pmc-u-cursor-pointer {
81
- cursor: pointer; }
1
+ .lrv-u-background-color-grey-light\:hover:hover{background-color:#ccc;background-color:var(--background-color-grey-light, rgb(204, 204, 204))}.lrv-u-background-color-grey-lightest\:hover:hover{background-color:#f7f7f7;background-color:var(--background-color-grey-lightest, rgb(247, 247, 247))}.lrv-u-background-color-brand-secondary-dark\:hover:hover{background-color:#000;background-color:var(--background-color-brand-secondary-dark, rgb(0, 0, 0))}.lrv-u-background-color-brand-secondary-light\:hover:hover{background-color:#000;background-color:var(--background-color-brand-secondary-light, rgb(0, 0, 0))}.lrv-u-background-color-grey-dark\:hover:hover{background-color:#6a6a6a;background-color:var(--background-color-grey-dark, rgb(106, 106, 106))}.lrv-u-background-color-grey\:hover:hover{background-color:#8c8c8c;background-color:var(--background-color-grey, rgb(140, 140, 140))}.lrv-u-background-color-body\:hover:hover{background-color:#fff;background-color:var(--background-color-body, rgb(255, 255, 255))}.lrv-u-background-color-brand-secondary\:hover:hover{background-color:#000;background-color:var(--background-color-brand-secondary, rgb(0, 0, 0))}.lrv-u-background-color-black\:hover:hover{background-color:#000;background-color:var(--background-color-black, rgb(0, 0, 0))}.lrv-u-background-color-brand-primary-light\:hover:hover{background-color:#ec1c24;background-color:var(--background-color-brand-primary-light, rgb(236, 28, 36))}.lrv-u-background-color-brand-primary-dark\:hover:hover{background-color:#ec1c24;background-color:var(--background-color-brand-primary-dark, rgb(236, 28, 36))}.lrv-u-background-color-white\:hover:hover{background-color:#fff;background-color:var(--background-color-white, rgb(255, 255, 255))}.lrv-u-background-color-brand-primary\:hover:hover{background-color:#ec1c24;background-color:var(--background-color-brand-primary, rgb(236, 28, 36))}.lrv-u-background-color-grey-darkest\:hover:hover{background-color:#323232;background-color:var(--background-color-grey-darkest, rgb(50, 50, 50))}
2
+ .lrv-u-border-color-grey-lightest{border-color:#f7f7f7;border-color:var(--border-color-grey-lightest, rgb(247, 247, 247))}.lrv-u-border-color-grey-lightest\:hover:hover{border-color:#f7f7f7;border-color:var(--border-color-grey-lightest, rgb(247, 247, 247))}.lrv-u-border-color-brand-secondary-light{border-color:#000;border-color:var(--border-color-brand-secondary-light, rgb(0, 0, 0))}.lrv-u-border-color-brand-secondary-light\:hover:hover{border-color:#000;border-color:var(--border-color-brand-secondary-light, rgb(0, 0, 0))}.lrv-u-border-color-grey-light{border-color:#ccc;border-color:var(--border-color-grey-light, rgb(204, 204, 204))}.lrv-u-border-color-grey-light\:hover:hover{border-color:#ccc;border-color:var(--border-color-grey-light, rgb(204, 204, 204))}.lrv-u-border-color-grey-dark{border-color:#6a6a6a;border-color:var(--border-color-grey-dark, rgb(106, 106, 106))}.lrv-u-border-color-grey-dark\:hover:hover{border-color:#6a6a6a;border-color:var(--border-color-grey-dark, rgb(106, 106, 106))}.lrv-u-border-color-brand-secondary-dark{border-color:#000;border-color:var(--border-color-brand-secondary-dark, rgb(0, 0, 0))}.lrv-u-border-color-brand-secondary-dark\:hover:hover{border-color:#000;border-color:var(--border-color-brand-secondary-dark, rgb(0, 0, 0))}.lrv-u-border-color-brand-secondary{border-color:#000;border-color:var(--border-color-brand-secondary, rgb(0, 0, 0))}.lrv-u-border-color-brand-secondary\:hover:hover{border-color:#000;border-color:var(--border-color-brand-secondary, rgb(0, 0, 0))}.lrv-u-border-color-grey{border-color:#8c8c8c;border-color:var(--border-color-grey, rgb(140, 140, 140))}.lrv-u-border-color-grey\:hover:hover{border-color:#8c8c8c;border-color:var(--border-color-grey, rgb(140, 140, 140))}.lrv-u-border-color-brand-primary-light{border-color:#ec1c24;border-color:var(--border-color-brand-primary-light, rgb(236, 28, 36))}.lrv-u-border-color-brand-primary-light\:hover:hover{border-color:#ec1c24;border-color:var(--border-color-brand-primary-light, rgb(236, 28, 36))}.lrv-u-border-color-white{border-color:#fff;border-color:var(--border-color-white, rgb(255, 255, 255))}.lrv-u-border-color-white\:hover:hover{border-color:#fff;border-color:var(--border-color-white, rgb(255, 255, 255))}.lrv-u-border-color-brand-primary-dark{border-color:#ec1c24;border-color:var(--border-color-brand-primary-dark, rgb(236, 28, 36))}.lrv-u-border-color-brand-primary-dark\:hover:hover{border-color:#ec1c24;border-color:var(--border-color-brand-primary-dark, rgb(236, 28, 36))}.lrv-u-border-color-brand-primary{border-color:#ec1c24;border-color:var(--border-color-brand-primary, rgb(236, 28, 36))}.lrv-u-border-color-brand-primary\:hover:hover{border-color:#ec1c24;border-color:var(--border-color-brand-primary, rgb(236, 28, 36))}.lrv-u-border-color-currentColor{border-color:currentColor}@media(min-width: 62.5rem){.lrv-u-border-color-grey-lightest\@desktop{border-color:#f7f7f7;border-color:var(--border-color-grey-lightest, rgb(247, 247, 247))}}@media(min-width: 62.5rem){.lrv-u-border-color-brand-secondary-light\@desktop{border-color:#000;border-color:var(--border-color-brand-secondary-light, rgb(0, 0, 0))}}@media(min-width: 62.5rem){.lrv-u-border-color-grey-light\@desktop{border-color:#ccc;border-color:var(--border-color-grey-light, rgb(204, 204, 204))}}@media(min-width: 62.5rem){.lrv-u-border-color-grey-dark\@desktop{border-color:#6a6a6a;border-color:var(--border-color-grey-dark, rgb(106, 106, 106))}}@media(min-width: 62.5rem){.lrv-u-border-color-brand-secondary-dark\@desktop{border-color:#000;border-color:var(--border-color-brand-secondary-dark, rgb(0, 0, 0))}}@media(min-width: 62.5rem){.lrv-u-border-color-brand-secondary\@desktop{border-color:#000;border-color:var(--border-color-brand-secondary, rgb(0, 0, 0))}}@media(min-width: 62.5rem){.lrv-u-border-color-grey\@desktop{border-color:#8c8c8c;border-color:var(--border-color-grey, rgb(140, 140, 140))}}@media(min-width: 62.5rem){.lrv-u-border-color-brand-primary-light\@desktop{border-color:#ec1c24;border-color:var(--border-color-brand-primary-light, rgb(236, 28, 36))}}@media(min-width: 62.5rem){.lrv-u-border-color-white\@desktop{border-color:#fff;border-color:var(--border-color-white, rgb(255, 255, 255))}}@media(min-width: 62.5rem){.lrv-u-border-color-brand-primary-dark\@desktop{border-color:#ec1c24;border-color:var(--border-color-brand-primary-dark, rgb(236, 28, 36))}}@media(min-width: 62.5rem){.lrv-u-border-color-brand-primary\@desktop{border-color:#ec1c24;border-color:var(--border-color-brand-primary, rgb(236, 28, 36))}}
3
+ .lrv-u-border-radius-50p{border-radius:50%}.lrv-u-border-radius-100{border-radius:100px}.lrv-u-border-radius-5{border-radius:5px}.lrv-u-border-radius-br-5{border-bottom-right-radius:5px}.lrv-u-border-radius-bl-5{border-bottom-left-radius:5px}.lrv-u-border-radius-tr-5{border-top-right-radius:5px}.lrv-u-border-radius-tl-5{border-top-left-radius:5px}
4
+ @media(min-width: 48rem){.lrv-u-box-shadow-medium\@tablet{box-shadow:0 -0.313rem .313rem rgba(0,0,0,.15)}}
5
+ .lrv-u-color-brand-secondary\:hover:hover{color:#000;color:var(--color-brand-secondary, rgb(0, 0, 0))}.lrv-u-color-black\:hover:hover{color:#000;color:var(--color-black, rgb(0, 0, 0))}.lrv-u-color-brand-primary-light\:hover:hover{color:#ec1c24;color:var(--color-brand-primary-light, rgb(236, 28, 36))}.lrv-u-color-brand-primary-dark\:hover:hover{color:#ec1c24;color:var(--color-brand-primary-dark, rgb(236, 28, 36))}.lrv-u-color-white\:hover:hover{color:#fff;color:var(--color-white, rgb(255, 255, 255))}.lrv-u-color-brand-primary\:hover:hover{color:#ec1c24;color:var(--color-brand-primary, rgb(236, 28, 36))}.lrv-u-color-grey-light\:hover:hover{color:#e6e6e6;color:var(--color-grey-light, rgb(230, 230, 230))}.lrv-u-color-brand-secondary-dark\:hover:hover{color:#000;color:var(--color-brand-secondary-dark, rgb(0, 0, 0))}.lrv-u-color-brand-secondary-light\:hover:hover{color:#000;color:var(--color-brand-secondary-light, rgb(0, 0, 0))}.lrv-u-color-grey-dark\:hover:hover{color:#6a6a6a;color:var(--color-grey-dark, rgb(106, 106, 106))}.lrv-u-color-grey\:hover:hover{color:#8c8c8c;color:var(--color-grey, rgb(140, 140, 140))}.lrv-u-color-currentColor{color:currentColor}.lrv-u-color-transparent{color:rgba(0,0,0,0)}
6
+ .lrv-u-cursor-pointer{cursor:pointer}
7
+ .lrv-u-filter-grayscale-100{filter:grayscale(100%)}
8
+ .lrv-u-list-style-type-disclosure-closed{list-style-type:disclosure-closed}