@ebay/skin 16.0.0 → 16.1.0

package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Lightbox Dialog' };
+export default { title: "Lightbox Dialog" };
 
 export const base = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
@@ -23,6 +23,73 @@ export const base = () => `
 </div>
 `;
 
+export const scrollingLightbox = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+
+        </div>
+    </div>
+</div>
+`;
+
 export const baseWithFooter = () => `
 <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
     <div class="lightbox-dialog__window">
@@ -98,3 +165,26 @@ export const baseWithLongHeader = () => `
     </div>
 </div>
 `;
+
+export const wide = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog lightbox-dialog--wide" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+    </div>
+</div>
+`;

package/src/less/link/stories/link.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Link' };
+export default { title: "Link" };
 
 export const base = () => `
 <a href="https://www.ebay.com/urw/ZTE-AXON-7-Mini-32GB-Ion-Gold-Unlocked-Smartphone/product-reviews/230215749?_itm=222972816761">Link</a>
@@ -18,7 +18,8 @@ export const RTL = () => `
 <div>
 `;
 
-export const fake = () => `<button class="fake-link" type="button">Button</button>`;
+export const fake = () =>
+    `<button class="fake-link" type="button">Button</button>`;
 
 export const nav = () =>
     `<a class="nav-link" href="https://www.ebay.com/?r=${Math.floor(

package/src/less/listbox/listbox.less

@@ -51,7 +51,8 @@ div.listbox__option svg.icon {
     margin-right: @spacing-100;
 }
 
-div.listbox__options[role="listbox"]:focus .listbox__option--active[role="option"] {
+div.listbox__options[role="listbox"]:focus
+    .listbox__option--active[role="option"] {
     background-color: var(--color-state-primary-hover);
 }
 

package/src/less/listbox/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox/Cascade' };
+export default { title: "Listbox/Cascade" };
 
 export const RTL = () => `
 <span class="listbox" dir="rtl">

package/src/less/listbox/stories/listbox.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox' };
+export default { title: "Listbox" };
 
 export const unselected = () => `
 <span class="listbox">

package/src/less/listbox-button/listbox-button.less

@@ -83,7 +83,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     margin-right: auto;
 }
 
-.listbox-button__options[role="listbox"]:focus .listbox-button__option--active[role="option"] {
+.listbox-button__options[role="listbox"]:focus
+    .listbox-button__option--active[role="option"] {
     background-color: var(--color-state-primary-hover);
 }
 

package/src/less/listbox-button/stories/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox Button/Base' };
+export default { title: "Listbox Button/Base" };
 
 export const collapsedUnselected = () => `
 <span class="listbox-button">

package/src/less/listbox-button/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox Button/Cascade' };
+export default { title: "Listbox Button/Cascade" };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/listbox-button/stories/dimensions.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox Button/Dimensions' };
+export default { title: "Listbox Button/Dimensions" };
 
 export const fluid = () => `
 <span class="listbox-button listbox-button--fluid">

package/src/less/listbox-button/stories/form.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Listbox Button/Form' };
+export default { title: "Listbox Button/Form" };
 
 export const enabled = () => `
 <span class="listbox-button listbox-button--form">

package/src/less/marketsans/marketsans.less

@@ -15,9 +15,12 @@
     src: url("@{marketsans-url}@{marketsans-filename-regular}.eot");
     src: url("@{marketsans-url}@{marketsans-filename-regular}.eot?#iefix")
             format("embedded-opentype"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.woff2") format("woff2"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.woff") format("woff"),
-        url("@{marketsans-url}@{marketsans-filename-regular}.ttf") format("truetype"),
+        url("@{marketsans-url}@{marketsans-filename-regular}.woff2")
+            format("woff2"),
+        url("@{marketsans-url}@{marketsans-filename-regular}.woff")
+            format("woff"),
+        url("@{marketsans-url}@{marketsans-filename-regular}.ttf")
+            format("truetype"),
         url("@{marketsans-url}@{marketsans-filename-regular}.svg#@{marketsans-filename-regular}")
             format("svg");
 }
@@ -28,10 +31,13 @@
     font-style: normal;
     font-weight: bold;
     src: url("@{marketsans-url}@{marketsans-filename-bold}.eot");
-    src: url("@{marketsans-url}@{marketsans-filename-bold}.eot?#iefix") format("embedded-opentype"),
-        url("@{marketsans-url}@{marketsans-filename-bold}.woff2") format("woff2"),
+    src: url("@{marketsans-url}@{marketsans-filename-bold}.eot?#iefix")
+            format("embedded-opentype"),
+        url("@{marketsans-url}@{marketsans-filename-bold}.woff2")
+            format("woff2"),
         url("@{marketsans-url}@{marketsans-filename-bold}.woff") format("woff"),
-        url("@{marketsans-url}@{marketsans-filename-bold}.ttf") format("truetype"),
+        url("@{marketsans-url}@{marketsans-filename-bold}.ttf")
+            format("truetype"),
         url("@{marketsans-url}@{marketsans-filename-bold}.svg#@{marketsans-filename-bold}")
             format("svg");
 }

package/src/less/menu/stories/fake-menu.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu/Fake Menu' };
+export default { title: "Menu/Fake Menu" };
 
 export const links = () => `
 <div class="fake-menu">

package/src/less/menu/stories/misc.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu' };
+export default { title: "Menu" };
 
 export const stateless = () => `
 <span class="menu">

package/src/less/menu/stories/multiSelect.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu/Multi Select' };
+export default { title: "Menu/Multi Select" };
 
 export const unselected = () => `
 <span class="menu">

package/src/less/menu-button/menu-button.less

@@ -92,7 +92,8 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-16 {
 
 .fake-menu-button__menu a.fake-menu-button__item:not([href]),
 .fake-menu-button__menu button.fake-menu-button__item[disabled],
-.menu-button__menu div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
+.menu-button__menu
+    div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
     .color-token(menu-button-menuitem-disabled-foreground-color, color-foreground-disabled);
 }
 

package/src/less/menu-button/stories/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu Button/Base' };
+export default { title: "Menu Button/Base" };
 
 export const collapsed = () => `
 <span class="menu-button">

package/src/less/menu-button/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu Button/Cascade' };
+export default { title: "Menu Button/Cascade" };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/menu-button/stories/dimensions.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu Button/Dimensions' };
+export default { title: "Menu Button/Dimensions" };
 
 export const fixedWidth = () => `
 <span class="menu-button">

package/src/less/menu-button/stories/fake-menu-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Menu Button/Fake Menu Button' };
+export default { title: "Menu Button/Fake Menu Button" };
 
 export const links = () => `
 <span class="fake-menu-button">

package/src/less/mixins/private/bubble-mixins.less

@@ -150,8 +150,5 @@
 }
 
 .pointer-right-bottom() {
-    bottom: 12px;
-    left: auto;
-    right: -4px;
-    top: auto;
+    inset: auto -4px 12px auto;
 }

package/src/less/mixins/private/dialog-mixins.less

@@ -1,18 +1,18 @@
 @import "../public/utility-mixins.less";
 
-@dialog-scrim-color-hide: rgba(17, 24, 32, 0);
-@dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
-@dialog-lightbox-max-width: 616px;
+:root {
+    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
+    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
+    --dialog-lightbox-max-width: 616px;
+    --dialog-lightbox-wide-max-width: 896px;
+}
 
 .dialog-base() {
-    background-color: @dialog-scrim-color-show;
-    bottom: 0;
-    left: 0;
+    background-color: var(--dialog-scrim-color-show);
+    inset: 0;
     -webkit-overflow-scrolling: touch;
     overflow-y: auto;
     position: fixed;
-    right: 0;
-    top: 0;
     will-change: background-color;
     z-index: 100000; // because global header has an element with 99999
 
@@ -42,8 +42,10 @@
     .dialog-window();
     .border-radius-token(lightbox-border-radius, border-radius-100);
 
-    margin-top: 15vh;
+    margin: auto;
+    max-height: 90%;
     max-width: calc(100% - 32px);
+    min-width: 208px;
 }
 
 .dialog-header-content(@top-margin: @spacing-200) {
@@ -75,7 +77,7 @@
 .dialog-body-content() {
     box-sizing: border-box;
     flex: 1 1 auto;
-    margin: @spacing-200;
+    padding: @spacing-200;
     position: relative;
 
     & > :first-child {

package/src/less/mixins/private/filter-menu-mixins.less

@@ -10,7 +10,10 @@
     width: 100%;
 
     &:hover {
-        background-color: var(--color-state-primary-hover, color-state-primary-hover);
+        background-color: var(
+            --color-state-primary-hover,
+            color-state-primary-hover
+        );
     }
 
     &:disabled,

package/src/less/mixins/private/selection-list-mixins.less

@@ -21,10 +21,8 @@
 .selection-list-item-status() {
     align-self: center;
     fill: currentColor;
-    height: 10px;
     margin: 0 auto;
     opacity: 0;
     stroke: currentColor;
     stroke-width: 0;
-    width: 14px;
 }

package/src/less/mixins/private/token-mixins.less

@@ -87,5 +87,6 @@
 }
 
 .outline-token(@width, @style, @component-token, @product-token) {
-    outline: @width @style var(~"--@{component-token}", var(~"--@{product-token}"));
+    outline: @width @style
+        var(~"--@{component-token}", var(~"--@{product-token}"));
 }

package/src/less/mixins/public/utility-mixins.less

@@ -33,13 +33,10 @@
 
     &::after {
         background: rgba(0, 0, 0, 0.05);
-        bottom: 0;
         content: "";
         display: block;
-        left: 0;
+        inset: 0;
         position: absolute;
-        right: 0;
-        top: 0;
     }
 
     > img {

package/src/less/page-grid/page-grid.less

@@ -6,7 +6,8 @@
     --page-grid-column-gaps: @_page-grid-column-gaps-small;
     --page-grid-row-gaps: @_page-grid-row-gaps-large;
     --page-grid-column-widths: calc(
-        (100% / @_page-grid-number-cols-small) - @_page-grid-column-gaps-small + 1px
+        (100% / @_page-grid-number-cols-small) - @_page-grid-column-gaps-small +
+            1px
     );
     --page-grid-max-width: @_page-grid-max-width;
     // TODO: determine if needed. This is the max width inclusive of outside margins (not currently used)
@@ -18,7 +19,8 @@
         --page-grid-number-cols: @_page-grid-number-cols-large;
         --page-grid-column-gaps: @_page-grid-column-gaps-large;
         --page-grid-column-widths: calc(
-            (100% / @_page-grid-number-cols-large) - @_page-grid-column-gaps-large + 1px
+            (100% / @_page-grid-number-cols-large) -
+                @_page-grid-column-gaps-large + 1px
         );
         --page-grid-outside-margins: @_page-grid-outside-margins-large;
     }
@@ -40,22 +42,42 @@
     padding-right: var(--page-grid-outside-margins);
     position: relative;
     width: 100%;
-
-    // handle any nested instances
-    & & {
-        max-width: 100%;
-        padding: 0;
-        width: 100%;
-    }
 }
 
 .page-grid {
     column-gap: var(--page-grid-column-gaps);
     display: grid;
-    grid-template-columns: repeat(var(--page-grid-number-cols), var(--page-grid-column-widths));
+    grid-template-columns: repeat(
+        var(--page-grid-number-cols),
+        var(--page-grid-column-widths)
+    );
     row-gap: var(--page-grid-row-gaps);
 }
 
+// handle subgrid
+// fallback for lack of subgrid support in client browser
+// @TODO remove .subgrid in next major version
+.subgrid,
+.page-grid__subgrid {
+    display: grid;
+}
+
+// subgrid supported
+@supports (grid-template-columns: subgrid) {
+    // @TODO remove .subgrid  in next major version
+    .subgrid,
+    .page-grid__subgrid {
+        grid-template-columns: subgrid;
+    }
+}
+
+// handle nested grid
+.page-grid-container .nested-grid-container {
+    max-width: 100%;
+    padding: 0;
+    width: 100%;
+}
+
 /* prettier-ignore */
 .page-grid--debug {
     --debug-grid-col-color: pink;

package/src/less/page-notice/page-notice.less

@@ -134,7 +134,7 @@ p.page-notice__cta {
     margin-top: @spacing-200;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     section.page-notice,
     div[role="region"].page-notice {
         margin: @spacing-200 0;

package/src/less/page-notice/stories/page-notice.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Page Notice' };
+export default { title: "Page Notice" };
 
 export const general = () => `
 <section class="page-notice page-notice--general" role="region" aria-label="Information">

package/src/less/page-notice/stories/test.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Page Notice/Tests' };
+export default { title: "Page Notice/Tests" };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/pagination/stories/button-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Buttons/Cascade' };
+export default { title: "Pagination/Buttons/Cascade" };
 
 export const fontSize = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation" style="font-size: 200%">

package/src/less/pagination/stories/buttons.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Buttons' };
+export default { title: "Pagination/Buttons" };
 
 export const base = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

package/src/less/pagination/stories/link-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Links/Cascade' };
+export default { title: "Pagination/Links/Cascade" };
 
 export const fontSize = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation" style="font-size: 200%">

package/src/less/pagination/stories/links.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Links' };
+export default { title: "Pagination/Links" };
 
 export const base = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

package/src/less/pagination/stories/overflow.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Overflow' };
+export default { title: "Pagination/Overflow" };
 
 export const start = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

package/src/less/panel-dialog/panel-dialog.less

@@ -87,7 +87,7 @@ button.icon-btn.panel-dialog__close {
 
     &.panel-dialog--mask-fade,
     &.panel-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-hide;
+        background-color: var(--dialog-scrim-color-hide);
     }
 
     .panel-dialog__window--slide-left {
@@ -105,7 +105,8 @@ button.icon-btn.panel-dialog__close {
 }
 
 .panel-dialog--hide .panel-dialog__window--end.panel-dialog__window--slide,
-.panel-dialog--show-init .panel-dialog__window--end.panel-dialog__window--slide {
+.panel-dialog--show-init
+    .panel-dialog__window--end.panel-dialog__window--slide {
     transform: translateX(100%);
 }
 
@@ -117,7 +118,7 @@ button.icon-btn.panel-dialog__close {
 
     &.panel-dialog--mask-fade,
     &.panel-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-show;
+        background-color: var(--dialog-scrim-color-show);
     }
 
     .panel-dialog__window--slide {
@@ -128,7 +129,7 @@ button.icon-btn.panel-dialog__close {
 // MEDIA QUERIES
 //-----------------------------
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .panel-dialog__window {
         width: 384px;
     }

package/src/less/panel-dialog/stories/panel-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Panel Dialog' };
+export default { title: "Panel Dialog" };
 
 export const panelStart = () => `
 <div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">

package/src/less/progress-bar/progress-bar.less

@@ -28,7 +28,7 @@
     width: 100%;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .progress-bar {
         margin: @spacing-200 0;
     }

package/src/less/progress-bar/stories/progress-bar.stories.js

@@ -1,13 +1,16 @@
-export default { title: 'Progress Bar' };
+export default { title: "Progress Bar" };
 
-export const empty = () => `<progress class="progress" value=1 max=100>0%</progress>`;
+export const empty = () =>
+    `<progress class="progress" value=1 max=100>0%</progress>`;
 
-empty.storyName = 'Empty';
+empty.storyName = "Empty";
 
-export const half = () => `<progress class="progress" value=50 max=100>0%</progress>`;
+export const half = () =>
+    `<progress class="progress" value=50 max=100>0%</progress>`;
 
-half.storyName = 'Half';
+half.storyName = "Half";
 
-export const full = () => `<progress class="progress" value=100 max=100>0%</progress>`;
+export const full = () =>
+    `<progress class="progress" value=100 max=100>0%</progress>`;
 
-full.storyName = 'Full';
+full.storyName = "Full";

package/src/less/progress-spinner/stories/progress-spinner.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Progress Spinner' };
+export default { title: "Progress Spinner" };
 
 export const base = () =>
     `<span class="progress-spinner" aria-label="Busy animation" role="img">