@magento/venia-ui 9.3.0-alpha.1 → 9.4.0-alpha.1

package/lib/components/LegacyMiniCart/emptyMiniCartBody.module.css

@@ -1,16 +1,16 @@
 .root {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 1rem;
-    text-align: center;
+    composes: items-center from global;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: justify-center from global;
+    composes: p-xs from global;
+    composes: text-center from global;
 }
 
 .emptyTitle {
-    font-size: 1.5rem;
-    line-height: 1.25;
-    margin-bottom: 1.5rem;
+    composes: leading-tight from global;
+    composes: mb-sm from global;
+    composes: text-xl from global;
 }
 
 .continue {

package/lib/components/LegacyMiniCart/footer.module.css

@@ -1,15 +1,19 @@
 .root {
-    background-color: white;
-    padding: 0;
+    composes: bg-white from global;
+    composes: p-0 from global;
 }
 
 .root_open {
     composes: root;
-    position: relative;
-    z-index: 3;
+
+    composes: relative from global;
+    composes: z-foreground from global;
 }
 
 .placeholderButton {
-    text-align: center;
-    margin: 1.5rem 0 1rem 0;
+    composes: mt-sm from global;
+    composes: mr-0 from global;
+    composes: mb-xs from global;
+    composes: ml-0 from global;
+    composes: text-center from global;
 }

package/lib/components/LegacyMiniCart/header.module.css

@@ -1,26 +1,27 @@
 .root {
-    align-content: center;
-    align-items: center;
-    background-color: rgb(var(--venia-global-color-gray));
-    box-shadow: 0 1px rgb(var(--venia-global-color-border));
-    display: grid;
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
+    composes: auto-cols-auto from global;
+    composes: bg-subtle from global;
+    composes: content-center from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-end from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+    composes: relative from global;
+    composes: shadow-thin from global;
+    composes: z-foreground from global;
     grid-auto-rows: 3rem;
-    grid-template-columns: 1fr;
     height: var(--legacy-minicart-header-height);
-    justify-content: end;
-    padding: 0 1rem;
-    position: relative;
-    z-index: 1;
 }
 
 .title {
-    align-items: center;
-    display: inline-flex;
-    font-size: 1rem;
-    font-weight: 400;
-    margin-right: auto;
-    padding: 0;
-    text-transform: uppercase;
+    composes: font-normal from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: mr-auto from global;
+    composes: p-0 from global;
+    composes: text-colorDefault from global;
+    composes: uppercase from global;
 }

package/lib/components/LegacyMiniCart/kebab.module.css

@@ -1,46 +1,37 @@
 .root {
-    display: inline-block;
-    grid-row-start: 1;
-    grid-row-end: 4;
-    grid-column-start: 3;
-    grid-column-end: 4;
-    margin-top: 2px;
-    position: relative;
+    composes: col-end-4 from global;
+    composes: col-start-3 from global;
+    composes: inline-block from global;
+    composes: mt-1 from global;
+    composes: relative from global;
+    composes: row-end-4 from global;
+    composes: row-start-1 from global;
 }
 
 .dropdown {
-    align-items: center;
+    composes: absolute from global;
+    composes: bg-body from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: right-5 from global;
+    composes: top-0 from global;
+    composes: z-dropdown from global;
     box-shadow: 0 0 1px rgb(0, 0, 0, 0.2);
-    display: grid;
-    position: absolute;
-    right: 20px;
-    top: 0;
     transition: 256ms ease-out;
     transform: scale(0);
     transform-origin: 100% 0;
-    z-index: 3;
 }
 
 .dropdown_active {
     composes: dropdown;
-    position: absolute;
+
+    composes: absolute from global;
     transform: scale(1);
     transition: 250ms var(--venia-global-anim-bounce);
 }
 
-.dropdown li {
-    display: block;
-    width: 100%;
-    background-color: #fff;
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-}
-
-.dropdown li:hover {
-    background-color: #eee;
-}
-
 .kebab {
-    outline: 0;
-    border: none;
-    background-color: #fff;
+    composes: bg-white from global;
+    composes: border-0 from global;
+    composes: outline-none from global;
 }

package/lib/components/LegacyMiniCart/mask.module.css

@@ -1,4 +1,5 @@
 .root_active {
     composes: root_active from '../Mask/mask.module.css';
-    opacity: 0.25;
+
+    composes: opacity-25 from global;
 }

package/lib/components/LegacyMiniCart/miniCart.js

@@ -10,6 +10,9 @@ import Mask from './mask';
 import defaultClasses from './miniCart.module.css';
 import { useStyle } from '../../classify';
 
+/**
+ * @deprecated - use component/MiniCart instead
+ */
 const LegacyMiniCart = props => {
     const {
         cartItems,

package/lib/components/LegacyMiniCart/miniCart.module.css

@@ -1,35 +1,42 @@
 .root {
-    --base-z-index: 4;
     --legacy-minicart-header-height: 3.5rem;
-    align-content: start;
-    background-color: white;
-    bottom: 0;
+
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: content-start from global;
+    composes: fixed from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: max-w-modal from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-menu from global;
     box-shadow: -1px 0 rgb(var(--venia-global-color-border));
-    display: grid;
     grid-template-rows: min-content 1fr;
-    height: 100%;
-    opacity: 0;
-    overflow: hidden;
-    position: fixed;
-    right: 0;
-    top: 0;
     transform: translate3d(100%, 0, 0);
     transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
     transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
-    width: 100%;
-    max-width: 360px;
-    z-index: var(--base-z-index);
 }
 
 /* state: open */
 
 .root_open {
     composes: root;
-    opacity: 1;
+
+    composes: opacity-100 from global;
     transform: translate3d(0, 0, 0);
     transition-duration: 224ms;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 }

package/lib/components/LegacyMiniCart/product.module.css

@@ -1,8 +1,9 @@
 .root {
-    position: relative;
-    align-content: start;
-    display: grid;
-    grid-gap: 0 1rem;
+    composes: relative from global;
+    composes: content-start from global;
+    composes: grid from global;
+    composes: gap-x-0 from global;
+    composes: gap-y-xs from global;
     grid-template-areas:
         'image name'
         'image options'
@@ -16,52 +17,55 @@
 }
 
 .image {
-    background-color: rgb(var(--venia-global-color-gray));
-    border: solid 1px rgb(var(--venia-global-color-border));
-    border-radius: 2px;
-    height: 100px;
-    object-fit: contain;
-    object-position: center;
+    composes: bg-subtle from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: h-[100px] from global;
+    composes: object-contain from global;
+    composes: object-center from global;
+    composes: rounded-sm from global;
 }
 
 .name {
-    font-size: 0.875rem;
-    font-weight: 600;
+    composes: font-semibold from global;
+    composes: pt-0.5 from global;
+    composes: text-sm from global;
     grid-area: name;
-    padding-top: 0.125rem;
 }
 
 .quantityRow {
-    align-items: center;
+    composes: items-center from global;
 }
 
 .quantity {
-    align-items: flex-end;
-    display: flex;
+    composes: flex from global;
+    composes: items-end from global;
+    composes: self-end from global;
+    composes: text-sm from global;
     grid-column: 2 / span 1;
-    font-size: 13px;
-    align-self: end;
 }
 
 .quantityOperator {
-    align-items: center;
-    color: rgb(var(--venia-global-color-text-alt));
-    display: inline-flex;
-    margin: 0 0.375rem;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: mx-1.5 from global;
+    composes: my-0 from global;
+    composes: text-subtle from global;
 }
 
 .price {
-    align-items: center;
-    display: inline-flex;
+    composes: items-center from global;
+    composes: inline-flex from global;
 }
 
 .mask {
-    position: absolute;
-    left: -24px;
-    right: -24px;
-    top: -7px;
-    bottom: -7px;
-    background-color: rgb(var(--venia-global-color-gray));
-    opacity: 0.5;
-    z-index: 2;
+    composes: absolute from global;
+    composes: bg-subtle from global;
+    composes: bottom-[-7px] from global;
+    composes: left-[-24px] from global;
+    composes: opacity-50 from global;
+    composes: right-[-24px] from global;
+    composes: top-[-7px] from global;
+    composes: z-mask from global;
 }

package/lib/components/LegacyMiniCart/productList.module.css

@@ -1,6 +1,8 @@
 .root {
-    display: grid;
-    grid-gap: 1rem;
-    margin: 0 1.5rem;
-    padding: 1.5rem 0;
+    composes: grid from global;
+    composes: gap-xs from global;
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: px-0 from global;
+    composes: py-sm from global;
 }

package/lib/components/LegacyMiniCart/productOptions.module.css

@@ -1,18 +1,18 @@
 .options {
-    font-size: 13px;
+    composes: leading-normal from global;
+    composes: max-h-[54px] from global;
+    composes: mt-1 from global;
+    composes: overflow-y-auto from global;
+    composes: text-sm from global;
     grid-area: options;
-    line-height: 1.5;
-    margin-top: 0.25rem;
-    max-height: 54px;
-    overflow-y: auto;
 }
 
 .optionLabel {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
 }
 
 .optionValue {
-    margin-left: 0.25rem;
+    composes: ml-1 from global;
 }

package/lib/components/LegacyMiniCart/section.js

@@ -37,6 +37,7 @@ const Section = props => {
     return (
         <li className={classes.menuItem} {...restProps}>
             <button
+                className={classes.button}
                 onMouseDown={onClick}
                 data-cy="LegacyMiniCart-Section-button"
             >
@@ -49,6 +50,7 @@ const Section = props => {
 
 Section.propTypes = {
     classes: shape({
+        button: string,
         icon: string,
         icon_filled: string,
         menuItem: string,

package/lib/components/LegacyMiniCart/section.module.css

@@ -1,30 +1,42 @@
-.menuItem button {
-    width: 100%;
-    padding: 0.6rem;
-    padding-right: 1.6rem;
-    padding-bottom: 0.72rem;
-    display: flex;
-    white-space: pre;
-    box-sizing: border-box;
-    text-align: left;
-    align-items: center;
-    justify-items: start;
-    column-gap: 0.625rem;
+.menuItem {
+    composes: bg-white from global;
+    composes: block from global;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: w-full from global;
+
+    composes: hover_bg-gray-300 from global;
+}
+
+.button {
+    composes: flex from global;
+    composes: gap-x-2.5 from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: p-2xs from global;
+    composes: pb-3 from global;
+    composes: pr-sm from global;
+    composes: text-left from global;
+    composes: w-full from global;
+    composes: whitespace-pre from global;
 }
 
 .text {
-    padding-top: 1px;
-    padding-left: 0.4rem;
-    font-size: 11px;
-    pointer-events: none;
+    composes: pl-2xs from global;
+    composes: pointer-events-none from global;
+    composes: pt-px from global;
+    composes: text-2xs from global;
 }
 
 .icon {
     composes: root from '../Icon/icon.module.css';
+
     --stroke: rgb(var(--venia-global-color-teal));
 }
 
 .icon_filled {
     composes: icon;
+
     --fill: rgb(var(--venia-global-color-teal));
 }

package/lib/components/LegacyMiniCart/totalsSummary.module.css

@@ -1,22 +1,23 @@
 .root {
     box-shadow: 0 -1px rgb(var(--venia-global-color-border));
-    line-height: 2rem;
-    margin: 0 1.5rem;
-    padding-top: 1.5rem;
+    composes: leading-8 from global;
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: pt-sm from global;
 }
 
 .subtotalLabel {
-    color: rgb(var(--venia-global-color-text-alt));
+    composes: text-subtle from global;
 }
 
 .subtotalValue {
-    font-weight: 600;
-    margin-left: 0.5rem;
+    composes: font-semibold from global;
+    composes: ml-2xs from global;
 }
 
 .totals {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    composes: items-center from global;
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-center from global;
 }

package/lib/components/LinkButton/linkButton.module.css

@@ -1,13 +1,12 @@
 .root {
     composes: root from '../clickable.module.css';
-    color: rgb(var(--venia-brand-color-1-700));
-    font-size: var(--venia-global-fontSize-200);
-    font-weight: var(--venia-global-fontWeight-semibold);
-    text-decoration: underline;
-    line-height: 1.25rem;
-    max-width: 100%;
-}
 
-.root:hover {
-    color: rgb(var(--venia-global-color-gray-900));
+    composes: font-semibold from global;
+    composes: leading-tight from global;
+    composes: max-w-full from global;
+    composes: text-colorDefault from global;
+    composes: text-brand-dark from global;
+    composes: underline from global;
+
+    composes: hover_text-colorDefault from global;
 }

package/lib/components/LoadingIndicator/indicator.module.css

@@ -1,30 +1,32 @@
 .root {
-    align-content: center;
-    align-items: center;
-    display: grid;
-    gap: 3rem;
+    composes: content-center from global;
+    composes: gap-lg from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-items-center from global;
     height: calc(100% - 6rem);
-    justify-content: center;
-    justify-items: center;
-    margin: 3rem 0;
-    width: 100%;
+    composes: mx-0 from global;
+    composes: my-lg from global;
+    composes: w-full from global;
 }
 
 .global {
     composes: root;
-    position: fixed;
-    top: 0;
-    left: 0;
-    margin: 0;
-    height: 100%;
-    width: 100%;
+
+    composes: fixed from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: m-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
 }
 
 .message {
-    color: rgb(var(--venia-global-color-text-alt));
-    font-size: 1rem;
-    letter-spacing: 0.25rem;
-    text-transform: uppercase;
+    composes: text-colorDefault from global;
+    composes: text-subtle from global;
+    composes: uppercase from global;
+    letter-spacing: 0.25em;
 }
 
 .indicator {

package/lib/components/LoadingIndicator/spinner.module.css

@@ -5,14 +5,5 @@
 
 .icon {
     composes: icon from '../Icon/icon.module.css';
-    animation: spin 1920ms linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+    composes: animation-spin from global;
 }

package/lib/components/Main/main.module.css

@@ -1,8 +1,8 @@
 .root {
-    background-color: rgb(var(--venia-global-color-background));
-    color: rgb(var(--venia-global-color-text));
-    position: relative;
-    z-index: 1;
+    composes: bg-white from global;
+    composes: relative from global;
+    composes: text-colorDefault from global;
+    composes: z-foreground from global;
 }
 
 .root_masked {
@@ -10,8 +10,9 @@
 }
 
 .page {
-    margin: 0 auto;
-    max-width: var(--venia-global-maxWidth);
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
     min-height: 40rem;
 }
 

package/lib/components/Mask/mask.module.css

@@ -1,26 +1,31 @@
 .root {
-    background-color: black;
-    cursor: pointer;
-    display: block;
-    height: 100%;
-    left: 0;
-    opacity: 0;
-    position: fixed;
-    top: 0;
+    composes: appearance-none from global;
+    composes: bg-black from global;
+    composes: block from global;
+    composes: cursor-pointer from global;
+    composes: fixed from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: opacity-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-mask from global;
     transition-duration: 192ms;
     transition-property: opacity, visibility;
     transition-timing-function: linear;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
-    width: 100%;
-    z-index: 2;
-    -webkit-appearance: none;
 }
 
-/* state: active */
-
 .root_active {
     composes: root;
-    opacity: 0.5;
+
+    composes: opacity-50 from global;
     transition-duration: 224ms;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 }

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap

@@ -48,7 +48,7 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
       </span>
     </a>
     <div
-      className="submenu"
+      className="submenu_inactive"
     >
       <div
         className="submenuItems"