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

package/lib/components/AddToCartDialog/addToCartDialog.module.css

@@ -1,55 +1,57 @@
 .root {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 1fr;
+    composes: grid from global;
+    composes: gap-xs from global;
+    composes: grid-cols-auto from global;
+
+    composes: lg_grid-cols-2 from global;
 }
 
 .image {
-    height: 100%;
-    object-fit: contain;
-    width: 100%;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: w-full from global;
 }
 
 .detailsContainer {
-    align-content: start;
-    display: grid;
-    row-gap: 1rem;
+    composes: content-start from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
 }
 
 .name {
-    font-family: var(--venia-global-fontFamily-serif);
-    font-size: var(--venia-typography-body-XXXL-fontSize);
-    font-weight: var(--venia-global-fontWeight-bold);
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: text-xl from global;
 }
 
 .price {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
+/* TODO @TW: cannot compose */
 .price:empty {
+    /* composes: bg-subtle from global; */
     background-color: rgb(var(--venia-global-color-gray));
     min-height: 1rem;
     width: 4rem;
 }
 
 .optionTitle {
-    border-top: 1px solid rgb(var(--venia-global-color-border));
-    font-weight: var(--venia-global-fontWeight-semibold);
-    padding: 1rem 0;
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
 }
 
 .dialogHeaderText {
     composes: headerText from '../Dialog/dialog.module.css';
-    overflow: visible;
-}
 
-.titleContainer {
-    line-height: 1;
-    width: fit-content;
+    composes: overflow-visible from global;
 }
 
-@media (max-width: 960px) {
-    .root {
-        grid-template-columns: auto;
-    }
+.titleContainer {
+    composes: leading-none from global;
+    composes: w-fit from global;
 }

package/lib/components/AddressBookPage/addEditDialog.module.css

@@ -1,21 +1,17 @@
 .root {
-    display: grid;
-    gap: 0.5rem 1.5rem;
-    grid-template-columns: 1fr;
-}
+    composes: gap-x-2xs from global;
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
 
-/*
- *  Desktop-specific styles.
- */
-@media (min-width: 961px) {
-    .root {
-        grid-template-columns: 1fr 1fr;
-    }
+    composes: lg_grid-cols-2 from global;
+}
 
-    .fullWidthField {
-        grid-column-end: span 2;
-    }
+.fullWidthField {
+    composes: lg_col-end-span2 from global;
+}
 
+@media (min-width: 960px) {
     .lastname,
     .country,
     .default_address_check {

package/lib/components/AddressBookPage/addressBookPage.module.css

@@ -1,56 +1,45 @@
 .root {
-    padding: 2.5rem 3rem;
-    max-width: var(--venia-global-maxWidth);
-    margin: 0 auto;
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-sm from global;
+    composes: py-md from global;
+
+    composes: lg_px-lg from global;
 }
 
 .heading {
-    font-family: var(--venia-global-fontFamily-serif);
-    font-weight: var(--venia-global-fontWeight-bold);
-    line-height: 1.25em;
-    margin-bottom: 2rem;
-    text-align: center;
-    text-transform: capitalize;
+    composes: capitalize from global;
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: leading-tight from global;
+    composes: mb-md from global;
+    composes: text-center from global;
 }
 
 .content {
-    display: grid;
-    gap: 1rem;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
     grid-auto-rows: minmax(6rem, max-content);
-    grid-template-columns: 1fr 1fr 1fr;
-}
-
-.addButton {
-    border: 2px dashed rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    transition: border-color 384ms var(--venia-global-anim-standard);
-    color: rgb(var(--venia-brand-color-1-700));
-}
 
-.addButton:focus {
-    outline: none;
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
-}
+    composes: sm_grid-cols-2 from global;
 
-.addButton:hover {
-    border-color: rgb(var(--venia-brand-color-1-600));
+    composes: lg_grid-cols-3 from global;
 }
 
-@media (max-width: 1024px) {
-    .root {
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
+.addButton {
+    composes: border-2 from global;
+    composes: border-dashed from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: rounded-md from global;
+    composes: text-brand-dark from global;
+    composes: text-sm from global;
+    transition: border-color 384ms var(--venia-global-anim-standard);
 
-    .content {
-        grid-template-columns: 1fr 1fr;
-    }
-}
+    composes: focus_outline-none from global;
+    composes: focus_shadow-buttonFocus from global;
 
-@media (max-width: 640px) {
-    .content {
-        grid-template-columns: 1fr;
-    }
+    composes: hover_border-brand-dark from global;
 }

package/lib/components/AddressBookPage/addressCard.module.css

@@ -1,78 +1,99 @@
 .root {
-    align-content: flex-start;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    display: grid;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: content-start from global;
+    composes: grid from global;
+    composes: p-xs from global;
+    composes: relative from global;
+    composes: rounded-md from global;
     grid-template-columns: 1fr max-content;
-    padding: 1.25rem 2rem;
-    position: relative;
+
+    composes: sm_px-md from global;
+    composes: sm_px-5 from global;
 }
 
 .root_updated {
     composes: root;
+
     animation: flash var(--venia-global-anim-bounce) 640ms 2;
 }
 
 .confirmDeleteContainer {
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.9);
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    height: 100%;
-    justify-items: center;
-    left: 0;
-    padding: 1.25rem 2rem;
-    position: absolute;
-    top: 0;
-    width: 100%;
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: h-full from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: left-0 from global;
+    composes: p-xs from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+
+    composes: sm_px-md from global;
+    composes: sm_py-5 from global;
+}
+
+@media (min-width: 640px) {
+    .confirmDeleteContainer {
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    }
 }
 
 .confirmDeleteButton {
     composes: root_normalPriorityNegative from '../Button/button.module.css';
 
-    background-color: white;
-    order: 1;
+    composes: bg-white from global;
+    composes: order-first from global;
+    composes: sm_order-1 from global;
 }
+
 .cancelDeleteButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    background-color: white;
+    composes: bg-white from global;
 }
 
 .contentContainer {
-    display: grid;
-    row-gap: 0.5rem;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
 }
 
 .actionContainer {
-    align-content: start;
-    display: grid;
-    justify-items: start;
-    row-gap: 0.5rem;
+    composes: content-start from global;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
+    composes: justify-items-start from global;
 }
 
 .defaultBadge {
-    width: max-content;
-    padding: 0.375rem 1.5rem;
-    margin-bottom: 0.25rem;
-    border: 1px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 600;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: mb-2xs from global;
+    composes: px-sm from global;
+    composes: py-1.5 from global;
+    composes: rounded-md from global;
+    composes: text-xs from global;
+    composes: w-max from global;
 }
 
 .name {
-    font-weight: 600;
+    composes: font-semibold from global;
 }
 
 .telephone {
-    margin-top: 0.5rem;
+    composes: mt-2xs from global;
 }
 
 .linkButton {
     composes: root from '../LinkButton/linkButton.module.css';
-    text-decoration: none;
+
+    composes: no-underline from global;
 }
 
 .editButton {
@@ -83,29 +104,10 @@
     composes: linkButton;
 }
 
-@media (max-width: 640px) {
-    .root {
-        padding: 1rem;
-    }
-
-    .confirmDeleteContainer {
-        padding: 1rem;
-        grid-template-columns: 1fr;
-    }
-
-    .confirmDeleteButton {
-        order: 0;
-    }
-}
-
-@media (max-width: 384px) {
-    .actionLabel {
-        display: none;
-    }
+.actionLabel {
+    composes: hidden from global;
 
-    .linkButton {
-        padding: 0 0.25rem 0.25rem;
-    }
+    composes: xs_inline from global;
 }
 
 @keyframes flash {

package/lib/components/AuthBar/authBar.module.css

@@ -1,20 +1,21 @@
 .root {
-    align-items: stretch;
-    background-color: white;
+    composes: bg-white from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: h-[4rem] from global;
+    composes: items-stretch from global;
     box-shadow: 0 -1px rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 0.75rem;
-    grid-auto-flow: column;
-    height: 4rem;
 }
 
 .contents {
-    align-items: center;
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
-    justify-items: start;
-    padding: 0 1rem;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
 }
 
 .signIn {

package/lib/components/AuthModal/authModal.module.css

@@ -1,13 +1,15 @@
 .root {
-    display: block;
+    composes: block from global;
 }
 
 .createAccountActions {
     composes: actions from '../CreateAccount/createAccount.module.css';
-    grid-auto-flow: row;
+
+    composes: grid-flow-row from global;
 }
 
 .createAccountSubmitButton {
     composes: root_highPriority from '../Button/button.module.css';
-    grid-column-start: auto;
+
+    composes: col-start-auto from global;
 }

package/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -1,27 +1,20 @@
 .root {
-    --whitespace-start: 1rem;
-    --whitespace-end: 10px;
-
-    composes: h-auto from global;
-    padding-left: var(--whitespace-start);
-    padding-top: var(--whitespace-start);
-    padding-bottom: var(--whitespace-end); /* Allow space for focus ring */
-    margin-bottom: calc(
-        -1 * var(--whitespace-end)
-    ); /* Prevent focus ring space affecting the rest of the UI */
-    font-size: 0.875rem;
-
     /* Permanent height to prevent pop-in. */
-    height: calc(0.875rem + var(--whitespace-start) + var(--whitespace-end));
-
+    composes: h-[2.5rem] from global;
+    composes: mt-xs from global;
+    composes: ml-xs from global;
     /* Show ellipses when overflowing. */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    composes: overflow-hidden from global;
+    composes: overflow-ellipsis from global;
+    composes: pt-[0.625rem] from global;
+    composes: pb-[1rem] from global;
+    composes: text-sm from global;
+    composes: whitespace-nowrap from global;
+    composes: -mb-[1rem] from global;
 }
 
 .text {
-    padding: 0.25rem;
+    composes: p-1 from global;
 }
 
 .divider {
@@ -30,7 +23,7 @@
 
 .link {
     composes: text;
-    text-decoration: underline;
+    composes: underline from global;
 }
 
 .currentCategory {

package/lib/components/Button/button.module.css

@@ -1,94 +1,130 @@
 .root {
-    composes: root from '../clickable.module.css';
-    --stroke: var(--venia-brand-color-1-700);
-    background: none;
-    border-color: rgb(var(--stroke));
-    border-radius: 10rem;
-    border-style: solid;
-    border-width: 2px;
-    color: rgb(var(--stroke));
-    font-size: var(--venia-global-fontSize-100);
-    font-weight: var(--venia-global-fontWeight-bold);
-    line-height: 1.25rem;
-    max-width: 100%;
-    min-width: 10rem;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: cursor-pointer from global;
+    composes: font-bold from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: leading-tight from global;
+    composes: max-w-full from global;
+    composes: min-w-[10rem] from global;
+    composes: outline-none from global;
+    composes: pointer-events-auto from global;
+    composes: px-sm from global;
+    composes: rounded-full from global;
+    composes: text-center from global;
+    composes: text-sm from global;
+    composes: uppercase from global;
+    padding-top: calc(0.5rem + 1px); /* TODO @TW: review */
+    padding-bottom: calc(0.5rem - 1px); /* TODO @TW: review */
     min-height: 2.5rem;
-    outline: none;
-    padding: calc(0.5rem + 1px) 1.5rem calc(0.5rem - 1px);
-    text-transform: uppercase;
     transition-duration: 256ms;
     transition-property: background-color, border-color, color;
     transition-timing-function: var(--venia-global-anim-standard);
-}
 
-.root:hover {
-    --stroke: var(--venia-brand-color-1-800);
-}
+    composes: disabled_bg-gray-400 from global;
+    composes: disabled_border-gray-400 from global;
+    composes: disabled_opacity-50 from global;
+    composes: disabled_pointer-events-none from global;
+    composes: disabled_text-white from global;
 
-.root:focus {
-    box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
+    composes: focus_shadow-inputFocus from global;
 }
 
 .root:active {
     transition-duration: 128ms;
-    --stroke: var(--venia-brand-color-1-800);
 }
 
 /**
  * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
  * being clicked it will be visually disabled.
  */
-.root:disabled,
 .root:hover:disabled {
+    /* TODO @TW: cannot compose. This may not be possible with two variants. */
     pointer-events: none;
-    --stroke: var(--venia-global-color-gray-400);
-}
-
-.content {
-    align-items: center;
-    display: inline-grid;
-    gap: 0.35rem;
-    grid-auto-flow: column;
-    justify-content: center;
-    justify-items: center;
 }
 
-/* derived classes */
 .root_lowPriority {
     composes: root;
-    --stroke: var(--venia-global-color-gray-700);
-}
-.root_lowPriority:hover {
-    --stroke: var(--venia-global-color-gray-900);
-}
-.root_lowPriorityNegative {
-    composes: root_lowPriority;
-    --stroke: var(--venia-global-color-red-700);
-}
-.root_lowPriorityNegative:hover {
-    --stroke: var(--venia-global-color-red-800);
+
+    composes: bg-transparent from global;
+    composes: border-gray-700 from global;
+    composes: text-gray-700 from global;
+
+    composes: active_border-gray-800 from global;
+    composes: active_text-gray-800 from global;
+
+    composes: hover_border-gray-800 from global;
+    composes: hover_text-gray-800 from global;
 }
 
 .root_normalPriority {
     composes: root;
-}
-.root_normalPriorityNegative {
-    composes: root_normalPriority;
-    --stroke: var(--venia-global-color-red-700);
-}
-.root_normalPriorityNegative:hover {
-    --stroke: var(--venia-global-color-red-800);
+
+    composes: bg-transparent from global;
+    composes: border-brand-dark from global;
+    composes: text-brand-dark from global;
+
+    composes: active_border-brand-darkest from global;
+    composes: active_text-brand-darkest from global;
+
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-brand-darkest from global;
 }
 
 .root_highPriority {
     composes: root;
-    background-color: rgb(var(--stroke));
-    color: rgb(var(--venia-global-color-gray-50));
+
+    composes: bg-brand-dark from global;
+    composes: border-brand-dark from global;
+    composes: text-white from global;
+
+    composes: active_bg-brand-darkest from global;
+    composes: active_border-brand-darkest from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-brand-darkest from global;
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-white from global;
 }
+
+.root_lowPriorityNegative,
+.root_normalPriorityNegative {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-red-600 from global;
+    composes: text-red-600 from global;
+
+    composes: active_border-red-700 from global;
+    composes: active_text-red-700 from global;
+
+    composes: hover_border-red-700 from global;
+    composes: hover_text-red-700 from global;
+}
+
 .root_highPriorityNegative {
-    composes: root_highPriority;
-    --stroke: var(--venia-global-color-red-700);
+    composes: root;
+
+    composes: bg-red-600 from global;
+    composes: border-red-600 from global;
+    composes: text-white from global;
+
+    composes: active_bg-red-700 from global;
+    composes: active_border-red-700 from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-red-700 from global;
+    composes: hover_border-red-700 from global;
+    composes: hover_text-white from global;
 }
-.root_highPriorityNegative:hover {
-    --stroke: var(--venia-global-color-red-800);
+
+.content {
+    composes: gap-1.5 from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-items-center from global;
 }