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

package/lib/components/CartPage/cartPage.module.css

@@ -1,12 +1,16 @@
 .root {
-    padding: 2.5rem 3rem;
-    max-width: 1080px;
-    margin: 0 auto;
+    composes: max-w-screen-lg from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-sm from global;
+
+    composes: lg_px-lg from global;
+    composes: lg_py-md from global;
 }
 
 .body {
-    display: grid;
-    gap: 2rem;
+    composes: grid from global;
+    composes: gap-md from global;
     grid-template-columns: 1fr 18rem;
     /* The summary grid item spans the entire right column. */
     grid-template-areas:
@@ -15,15 +19,16 @@
 }
 
 .heading_container {
-    display: grid;
-    margin-bottom: 1rem;
-    row-gap: 1rem;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: mb-xs from global;
 }
 
 .heading {
-    line-height: 1.25em;
+    composes: leading-tight from global;
 }
 
+/* TODO @TW: cannot compose */
 .stockStatusMessageContainer:empty {
     display: none;
 }
@@ -37,30 +42,21 @@
 }
 
 .summary_container {
+    composes: h-full from global;
     grid-area: summary;
-    height: 100%;
 }
 
 .summary_contents {
-    position: sticky;
+    composes: sticky from global;
     /*
      * TODO: Use CSS Properties (variables) or something instead of hardcoding this.
      *  - 3.5rem = min-height of nav header. See the "toolbar" class in header.css.
      *  - 2rem = padding-top of the cart page.
      */
-    top: 5.5rem;
+    composes: top-[5.5rem] from global; /* TODO @TW: review */
 }
 
-/*
- * Mobile-specific styles.
- */
-
-@media (max-width: 960px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
-
+@media (max-width: 959px) {
     .body {
         /* Only one column in mobile view. */
         grid-template-columns: 100%;

package/lib/components/CategoryList/categoryList.module.css

@@ -1,21 +1,22 @@
 /* Deprecated in PWA-12.1.0*/
 
 .root {
-    padding: 1rem;
+    composes: p-xs from global;
 }
 
 .header {
-    margin-bottom: 2rem;
-    text-align: center;
+    composes: mb-md from global;
+    composes: text-center from global;
 }
 
 .title {
-    text-transform: uppercase;
+    composes: uppercase from global;
 }
 
 .content {
-    display: grid;
-    grid-gap: 3rem 1rem;
+    composes: gap-x-lg from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: justify-center from global;
     grid-template-columns: repeat(auto-fit, 6rem);
-    justify-content: center;
 }

package/lib/components/CategoryList/categoryTile.module.css

@@ -1,23 +1,26 @@
 /* Deprecated in PWA-12.1.0*/
 
 .root {
-    display: block;
-    line-height: 1rem;
-    text-align: center;
-    width: 6rem;
+    composes: block from global;
+    composes: leading-none from global;
+    composes: text-center from global;
+    composes: w-[6rem] from global;
 }
 
 .imageContainer {
-    margin: 0 0.5rem 1rem 0.5rem;
+    composes: mb-4 from global;
+    composes: ml-2 from global;
+    composes: mr-2 from global;
+    composes: mt-0 from global;
 }
 
 .image {
-    border-radius: 50%;
+    composes: block from global;
+    composes: h-[5rem] from global;
+    composes: object-cover from global;
+    composes: object-center from global;
+    composes: rounded-full from global;
     box-shadow: 0 0 0 1px rgb(var(--venia-global-color-border));
-    display: block;
-    height: 5rem;
-    object-fit: cover;
-    object-position: center;
 }
 
 .image_empty {
@@ -25,5 +28,5 @@
 }
 
 .name {
-    display: block;
+    composes: block from global;
 }

package/lib/components/CategoryTree/categoryLeaf.module.css

@@ -1,24 +1,27 @@
 .root {
-    align-items: center;
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    display: flex;
-    margin: 0 1.25rem;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: mx-5 from global;
+    composes: my-0 from global;
 }
 
 .target {
-    align-items: center;
-    display: flex;
-    flex: auto;
-    height: 3.5rem;
-    justify-content: flex-start;
-    margin: 0 -1.25rem;
-    padding: 0 1.5rem;
-    width: 100%;
+    composes: flex from global;
+    composes: flex-auto from global;
+    composes: justify-start from global;
+    composes: h-[3.5rem] from global;
+    composes: items-center from global;
+    composes: -mx-5 from global;
+    composes: px-sm from global;
+    composes: w-full from global;
 }
 
 .text {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    composes: inline-block from global;
+    composes: overflow-hidden from global;
+    composes: overflow-ellipsis from global;
+    composes: whitespace-nowrap from global;
 }

package/lib/components/CategoryTree/categoryTree.module.css

@@ -11,6 +11,6 @@
 }
 
 .inactive {
-    position: fixed;
-    visibility: hidden;
+    composes: fixed from global;
+    composes: invisible from global;
 }

package/lib/components/Checkbox/checkbox.module.css

@@ -1,36 +1,38 @@
 .root {
     --stroke: var(--venia-global-color-gray-600);
-    align-items: center;
-    color: rgb(var(--venia-global-color-gray-900));
-    display: grid;
-    gap: calc(0.875rem - 5px);
-    grid-auto-flow: column;
+
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
     grid-template-areas: 'input label';
     grid-template-columns: min-content 1fr;
-    justify-items: center;
-    line-height: 1.5rem;
-}
-
-.input_base {
-    border-radius: 4px;
-    height: 1.5rem;
-    width: 1.5rem;
 }
 
 .input {
-    composes: input_base;
-    -webkit-appearance: none;
-    background: none;
-    border: 2px solid transparent;
-    cursor: pointer;
+    composes: appearance-none from global;
+    composes: bg-transparent from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: cursor-pointer from global;
+    composes: h-[1.5rem] from global;
+    composes: rounded from global;
+    composes: w-[1.5rem] from global;
     grid-area: input;
+
+    /* TODO @TW: review, replaces input:disabled. Check if working. */
+    composes: disabled_cursor-not-allowed from global;
 }
 
 .icon {
+    composes: h-[1.5rem] from global;
+    composes: pointer-events-none from global;
+    composes: w-[1.5rem] from global;
     grid-area: input;
-    height: 1.5rem;
-    pointer-events: none;
-    width: 1.5rem;
 }
 
 .icon svg {
@@ -38,18 +40,14 @@
 }
 
 .label {
-    cursor: pointer;
-    font-size: var(--venia-typography-body-M-fontSize);
+    composes: cursor-pointer from global;
+    composes: justify-self-start from global;
+    composes: text-colorDefault from global;
     grid-area: label;
-    justify-self: start;
-}
-
-.input:disabled {
-    background: rgb(var(--venia-global-color-gray-100));
-    cursor: default;
 }
 
 /* When the input is disabled, update the cursor on the sibling label element. */
+/* TODO @TW: cannot compose */
 .input:disabled ~ .label {
     cursor: default;
 }
@@ -58,12 +56,17 @@
     --stroke: var(--venia-brand-color-1-700);
 }
 
+/* TODO @TW: cannot compose, needs "checked" variant enabled. Cannot combine variants. */
 .input:active:enabled,
 .input:focus:enabled {
+    /* composes: active_shadow-radioActive from global; */
+    /* composes: focus_shadow-radioFocus from global; */
     box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
     outline: none;
 }
 
 .input_shimmer {
-    composes: input_base;
+    composes: h-[1.5rem] from global;
+    composes: rounded from global;
+    composes: w-[1.5rem] from global;
 }

package/lib/components/Checkout/Receipt/receipt.module.css

@@ -1,40 +1,45 @@
 .root {
-    background-color: white;
-    display: grid;
-    grid-template-rows: 1fr auto;
-    height: 100vh;
-    left: 0;
-    padding-top: 3.5rem;
-    position: absolute;
-    right: 0;
-    bottom: 0;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: grid from global;
+    composes: grid-rows-autoLast from global;
+    composes: h-screen from global;
+    composes: left-0 from global;
+    composes: pt-lg from global;
+    composes: right-0 from global;
 }
 
 .body {
-    padding: 1.5rem 1rem 1rem;
+    composes: pb-xs from global;
+    composes: pt-sm from global;
+    composes: px-xs from global;
 }
 
 .footer {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin: 0 1.5rem;
-    padding: 1rem 0;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: mx-sm from global;
+    composes: my-0 from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
 }
 
 .textBlock {
-    margin: 1.5rem 0 1.5rem;
-    line-height: 1.875rem;
-    font-size: 0.875rem;
+    composes: leading-relaxed from global;
+    composes: mx-0 from global;
+    composes: my-sm from global;
+    composes: text-sm from global;
 }
 
 .orderId {
-    color: #22a1a8;
-    text-decoration: underline;
+    composes: text-brand-base from global;
+    composes: underline from global;
 }
 
 .header {
-    font-size: 1.25rem;
-    font-weight: 300;
-    line-height: 1.25rem;
+    composes: font-light from global;
+    composes: leading-tight from global;
+    composes: text-lg from global;
 }

package/lib/components/Checkout/addressForm.module.css

@@ -15,21 +15,21 @@
 
 /* fields */
 .textInput {
-    background: white;
-    border: 1px solid rgb(var(--venia-global-color-text-alt));
-    border-radius: 2px;
-    color: rgb(var(--venia-global-color-text));
-    display: inline-flex;
-    flex: 0 0 100%;
-    font-size: 0.9375rem;
-    height: 2.25rem;
-    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
-    width: 100%;
-}
-
-.textInput:focus {
-    border-color: rgb(var(--venia-global-color-text));
-    outline: 0 none;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-input from global;
+    composes: flex-textInput from global;
+    composes: h-[2.25rem] from global;
+    composes: inline-flex from global;
+    composes: rounded-sm from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+    composes: w-full from global;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */
+
+    composes: focus_border-strong from global;
+    composes: focus_outline-none from global;
 }
 
 .city,
@@ -38,16 +38,16 @@
 .postcode,
 .region_code,
 .telephone {
-    grid-column-end: span 1;
+    composes: col-end-span1 from global;
 }
 
 .email,
 .street0 {
-    grid-column-end: span 2;
+    composes: col-end-span2 from global;
 }
 
 .validationMessage {
-    grid-column-end: span 2;
-    line-height: normal;
-    color: red;
+    composes: col-end-span2 from global;
+    composes: leading-normal from global;
+    composes: text-error from global;
 }

package/lib/components/Checkout/braintreeDropin.module.css

@@ -2,5 +2,5 @@
 }
 
 .error {
-    color: var(--venia-global-color-error);
+    composes: text-error from global;
 }

package/lib/components/Checkout/checkoutButton.module.css

@@ -1,5 +1,6 @@
 .icon {
     composes: root from '../Icon/icon.module.css';
+
     --stroke: white;
-    margin-top: -2px;
+    composes: -mt-0.5 from global;
 }

package/lib/components/Checkout/flow.module.css

@@ -1,47 +1,51 @@
 .root {
-    position: relative;
+    composes: relative from global;
 }
 
 .heading {
-    background-color: white;
-    font-size: 0.875rem;
-    font-weight: 600;
-    grid-column-end: span 2;
-    line-height: 1rem;
-    padding: 1.5rem 0 1.25rem;
-    text-align: center;
-    text-transform: uppercase;
-    top: 0;
-    z-index: 1;
+    composes: bg-white from global;
+    composes: col-end-span2 from global;
+    composes: font-semibold from global;
+    composes: leading-none from global;
+    composes: pb-xs from global;
+    composes: pt-sm from global;
+    composes: px-0 from global;
+    composes: text-center from global;
+    composes: text-sm from global;
+    composes: top-0 from global;
+    composes: uppercase from global;
+    composes: z-foreground from global;
 }
 
 .body {
-    align-content: start;
+    composes: bg-white from global;
+    composes: content-start from global;
+    composes: grid from global;
+    composes: gap-2xs from global;
+    composes: h-[7rem] from global;
+    composes: left-0 from global;
+    composes: overflow-auto from global;
+    composes: pb-2xs from global;
+    composes: px-sm from global;
+    composes: pt-0 from global;
+    composes: absolute from global;
+    composes: right-0 from global;
     animation-duration: 224ms;
     animation-iteration-count: 1;
     animation-name: enter;
-    background-color: white;
-    bottom: 7rem;
     box-shadow: 0 -1px rgb(var(--venia-global-color-border));
-    display: grid;
-    grid-gap: 0.5rem;
-    left: 0;
-    max-height: calc(100vh - 8.5rem);
-    overflow: auto;
-    padding: 0 1.5rem 0.5rem;
-    position: absolute;
-    right: 0;
+    max-height: calc(100vh - 8.5rem); /* TODO @TW: review */
 }
 
 .footer {
-    align-items: center;
-    background-color: white;
-    display: grid;
-    height: 7rem;
-    row-gap: 0.25rem;
-    justify-items: center;
-    align-content: center;
-    position: relative;
+    composes: bg-white from global;
+    composes: content-center from global;
+    composes: gap-y-1 from global;
+    composes: grid from global;
+    composes: h-[7rem] from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: relative from global;
 }
 
 @keyframes enter {

package/lib/components/Checkout/form.module.css

@@ -3,8 +3,9 @@
 
 .body {
     composes: body from './flow.module.css';
-    grid-gap: 0;
-    padding: 0;
+
+    composes: gap-0 from global;
+    composes: p-0 from global;
 }
 
 .footer {
@@ -12,26 +13,29 @@
 }
 
 .informationPrompt {
-    color: rgb(var(--venia-global-color-error));
-    text-transform: capitalize;
+    composes: capitalize from global;
+    composes: text-error from global;
 }
 
 .disabledPrompt {
     composes: informationPrompt;
-    color: rgb(var(--venia-global-color-gray-dark));
+
+    composes: text-subtle from global;
 }
 
 .paymentDisplayPrimary {
-    text-transform: capitalize;
+    composes: capitalize from global;
 }
 
 .paymentDisplaySecondary {
     /* The ::first-letter pseudo element below only works on block elements */
-    display: block;
-    text-transform: lowercase;
+    composes: block from global;
+    composes: lowercase from global;
 }
+
+/* TODO @TW: cannot compose */
 .paymentDisplaySecondary::first-letter {
-    text-transform: uppercase;
+    composes: uppercase from global;
 }
 
 @keyframes enter {

package/lib/components/Checkout/label.module.css

@@ -1,8 +1,8 @@
 .root {
-    align-items: center;
-    color: rgb(var(--venia-global-color-text-alt));
-    display: inline-flex;
-    font-size: 0.8125rem;
-    line-height: 1rem;
-    padding: 0.125rem;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: p-0.5 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
 }