@magento/venia-ui 10.3.0 → 11.3.0-alpha.8

package/lib/components/Shimmer/shimmer.module.css

@@ -1,87 +1,64 @@
 .root {
-    composes: bg-gray-100 from global;
     composes: inline-block from global;
     composes: overflow-hidden from global;
     composes: pointer-events-none from global;
     composes: relative from global;
-}
 
-/* TODO @TW: cannot compose */
-.root::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: var(
-        --venia-global-maxWidth
-    ); /* TODO @TW: review. this should use TW theme value "maxWidth.site" */
-    height: 100%;
-    background-image: linear-gradient(
-        to right,
-        rgb(var(--venia-global-color-gray-50) / 0%) 0%,
-        rgb(var(--venia-global-color-gray-50)) 40%,
-        rgb(var(--venia-global-color-gray-50) / 0%) 80%,
-        rgb(var(--venia-global-color-gray-50) / 0%) 100%
-    );
-    /* composes: bg-no-repeat from global; */
-    background-repeat: none;
-    background-size: var(--venia-global-maxWidth) 100%;
-    -webkit-animation-name: shimmerAnimation;
-    -webkit-animation-duration: 1s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-fill-mode: forwards;
-    will-change: transform;
+    composes: before_absolute from global;
+    composes: before_top-0 from global;
+    composes: before_left-0 from global;
+    composes: before_w-maxSite from global;
+    composes: before_h-full from global;
+    composes: before_bg-shimmer from global;
+    composes: before_bg-no-repeat from global;
+    composes: before_bg-maxSite from global;
+    composes: before_will-change-transform from global;
+    composes: before_animate-shimmer from global;
 }
 
 .root_rectangle {
     composes: root;
 
-    min-height: 1rem;
+    @apply bg-gray-100;
+    min-height: theme('fontSize.base');
 }
 
 .root_button {
     composes: root from '../Button/button.module.css';
     composes: root;
 
-    composes: border-0 from global;
+    @apply bg-gray-100;
+    @apply border-0;
 }
 
 .root_checkbox {
     composes: input_shimmer from '../Checkbox/checkbox.module.css';
     composes: root;
 
-    composes: border-0 from global;
+    @apply bg-gray-100;
+    @apply border-0;
 }
 
 .root_radio {
     composes: input_shimmer from '../RadioGroup/radio.module.css';
     composes: root;
 
-    composes: border-0 from global;
+    @apply bg-gray-100;
+    @apply border-0;
 }
 
 .root_textArea {
     composes: input_shimmer from '../TextArea/textArea.module.css';
     composes: root;
 
-    min-height: 6.75rem;
-    composes: border-0 from global;
+    @apply bg-gray-100;
+    @apply border-0;
 }
 
 .root_textInput {
     composes: input_shimmer from '../TextInput/textInput.module.css';
     composes: root;
 
-    composes: border-0 from global;
-}
-
-@-webkit-keyframes shimmerAnimation {
-    0% {
-        transform: translateX(-100%);
-    }
-
-    100% {
-        transform: translateX(100%);
-    }
+    @apply bg-gray-100;
+    @apply border-0;
 }

package/lib/components/SignIn/signIn.module.css

@@ -25,19 +25,13 @@
     composes: h-full from global;
     composes: text-center from global;
     composes: w-full from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
+    composes: invisible from global;
 }
 
 .modal_active {
     composes: modal;
     composes: opacity-90 from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
+    @apply visible;
 }
 
 .buttonsContainer {

package/lib/components/SignInPage/signInPage.module.css

@@ -17,5 +17,5 @@
     composes: lg_border-solid from global;
     composes: lg_border-subtle from global;
     composes: lg_pb-md from global;
-    composes: lg_rounded-md from global;
+    composes: lg_rounded-box from global;
 }

package/lib/components/TextArea/textArea.module.css

@@ -1,7 +1,7 @@
 .input {
     composes: input from '../Field/field.module.css';
 
-    composes: h-auto from global;
+    @apply h-auto;
     composes: max-w-full from global;
     composes: min-w-full from global;
     composes: px-xs from global;
@@ -16,7 +16,7 @@
     composes: min-w-full from global;
     composes: px-[15px] from global;
     composes: py-[12px] from global;
-    composes: rounded-md from global;
+    composes: rounded-input from global;
     composes: w-full from global;
     font-size: 1rem;
 }

package/lib/components/TextInput/textInput.module.css

@@ -7,14 +7,14 @@
 .input_error {
     composes: input from '../Field/field.module.css';
 
-    composes: border-error from global;
+    @apply border-error;
 }
 
 .input_shimmer {
     composes: h-[2.5rem] from global;
     composes: m-0 from global;
     composes: max-w-full from global;
-    composes: rounded-md from global;
+    composes: rounded-input from global;
     composes: w-full from global;
     font-size: 1rem;
     padding: calc(0.375rem - 1px) calc(0.625rem - 1px);

package/lib/components/ToastContainer/toast.module.css

@@ -44,7 +44,7 @@
 
     composes: border-b-4 from global;
     composes: border-solid from global;
-    composes: border-info from global;
+    @apply border-info;
 }
 
 .infoToast > .icon {
@@ -56,7 +56,7 @@
 
     composes: border-b-4 from global;
     composes: border-solid from global;
-    composes: border-warning from global;
+    @apply border-warning;
 }
 
 .warningToast > .icon {
@@ -68,7 +68,7 @@
 
     composes: border-b-4 from global;
     composes: border-solid from global;
-    composes: border-error from global;
+    @apply border-error;
 }
 
 .errorToast > .icon {
@@ -80,7 +80,7 @@
 
     composes: border-b-4 from global;
     composes: border-solid from global;
-    composes: border-success from global;
+    @apply border-success;
 }
 
 .successToast > .icon {

package/lib/components/WishlistPage/createWishlist.module.css

@@ -18,13 +18,13 @@
 .cancelButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    composes: min-w-[9rem] from global;
+    @apply min-w-[9rem];
 }
 
 .confirmButton {
     composes: root_highPriority from '../Button/button.module.css';
 
-    composes: min-w-[9rem] from global;
+    @apply min-w-[9rem];
 }
 
 .contents {
@@ -59,6 +59,6 @@
     composes: h-[6rem] from global;
     composes: items-center from global;
     composes: justify-center from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
     composes: text-brand-dark from global;
 }

package/lib/components/WishlistPage/wishlist.module.css

@@ -5,7 +5,7 @@
     composes: gap-y-md from global;
     composes: grid from global;
     composes: p-sm from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 
     composes: md_p-md from global;
 }
@@ -20,7 +20,7 @@
     composes: md_gap-y-2xs from global;
 }
 
-@media (max-width: 799px) {
+@media screen(-md) {
     .header {
         grid-template-rows: 1fr 1fr;
     }
@@ -69,8 +69,8 @@
 .loadMore {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    composes: block from global;
-    composes: min-w-[20rem] from global;
+    @apply block;
+    @apply min-w-[20rem];
     composes: mx-auto from global;
     composes: my-md from global;
 }

package/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css

@@ -5,7 +5,7 @@
 .cancelButton {
     composes: root_lowPriority from '../Button/button.module.css';
 
-    composes: min-w-[9rem] from global;
+    @apply min-w-[9rem];
 }
 
 .confirmButton {

package/lib/components/WishlistPage/wishlistItem.module.css

@@ -48,7 +48,7 @@
     composes: root_highPriority from '../Button/button.module.css';
 
     composes: justify-self-start from global;
-    composes: min-w-full from global;
+    @apply min-w-full;
     composes: mt-1 from global;
 
     composes: xs_min-w-auto from global;

package/lib/index.module.css

@@ -1,47 +1,35 @@
 @import './tokens.module.css';
 
 :global(*) {
-    /* composes: box-border from global; */
-    box-sizing: border-box;
+    @apply box-border;
 }
 
-/* TODO @TW: cannot compose */
 :global(html) {
-    /* composes: text-[100%] from global; */
-    font-size: 100%;
-    /* composes: text-normal from global; */
-    font-weight: 400;
-    /* composes: leading-none from global; */
-    line-height: 1;
-    /* composes: antialiased from global; */
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
+    @apply text-[100%];
+    @apply font-normal;
+    @apply leading-none;
+    @apply antialiased;
 }
 
 :global(html[data-scroll-lock='true']),
 :global(html[data-scroll-lock='true'] body) {
-    height: 100%;
-    overflow: hidden;
-    position: fixed;
-    width: 100%;
+    @apply h-full;
+    @apply overflow-hidden;
+    @apply fixed;
+    @apply w-full;
 }
 
-/* TODO @TW: cannot compose */
 :global(body),
 :global(button),
 :global(input),
 :global(select),
 :global(textarea) {
-    /* composes: text-gray-900 from global; */
-    /* color: rgb(var(--venia-global-color-text)); */
-    color: rgb(23 32 38);
+    @apply text-gray-900;
 }
 
 :global(body) {
-    /* composes: m-0 from global; */
-    margin: 0;
-    /* composes: p-0 from global; */
-    padding: 0;
+    @apply m-0;
+    @apply p-0;
 }
 
 :global(h1),
@@ -50,76 +38,55 @@
 :global(h4),
 :global(h5),
 :global(h6) {
-    /* composes: font-base from global; */
-    font-size: 1rem;
-    /* composes: font-normal from global; */
-    font-weight: 400;
-    /* composes: m-0 from global; */
-    margin: 0;
+    @apply text-base;
+    @apply font-normal;
+    @apply m-0;
 }
 
 :global(h1) {
-    /* composes: text-xl from global; */
-    font-size: 1.5rem;
+    @apply text-xl;
 }
 
 :global(h2) {
-    /* composes: text-lg from global; */
-    font-size: 1.25rem;
+    @apply text-lg;
 }
 
 :global(a) {
-    /* composes: text-current from global; */
-    color: currentColor;
-    /* composes: no-underline from global; */
-    text-decoration: none;
+    @apply text-current;
+    @apply no-underline;
 }
 
 :global(p) {
-    /* composes: m-0 from global; */
-    margin: 0;
+    @apply m-0;
 }
 
 :global(dl),
 :global(ol),
 :global(ul) {
-    /* composes: list-none from global; */
-    list-style-type: none;
-    /* composes: m-0 from global; */
-    margin: 0;
-    /* composes: p-0 from global; */
-    padding: 0;
+    @apply list-none;
+    @apply m-0;
+    @apply p-0;
 }
 
 :global(dd),
 :global(dt) {
-    /* composes: m-0 from global; */
-    margin: 0;
+    @apply m-0;
 }
 
-/* TODO @TW: cannot compose */
 :global(button) {
-    /* composes: bg-transparent from global; */
-    background: none;
-    /* composes: border-0 from global; */
-    border: 0;
-    /* composes: cursor-pointer from global; */
-    cursor: pointer;
-    /* composes: text-[100%] from global; */
-    font-size: 100%;
-    /* composes: p-0 from global; */
-    padding: 0;
-    touch-action: manipulation;
-    /* composes: select-none from global; */
-    user-select: none;
-    /* composes: appearance-none from global; */
-    -webkit-appearance: none;
+    @apply bg-transparent;
+    @apply border-0;
+    @apply cursor-pointer;
+    @apply text-[100%];
+    @apply p-0;
+    @apply touch-manipulation;
+    @apply select-none;
+    @apply appearance-none;
 }
 
 :global(button:disabled) {
-    /* composes: cursor-default from global; */
-    cursor: default;
-    touch-action: none;
+    @apply cursor-default;
+    @apply touch-none;
 }
 
 :global(.braintree-sheet__content--form

package/lib/tokens.module.css

@@ -7,35 +7,35 @@
     --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
 
     /* color */
-    --venia-global-color-blue-100: 194 200 255;
-    --venia-global-color-blue-400: 71 139 255;
+    --venia-global-color-blue-100: var(--color-blue-100);
+    --venia-global-color-blue-400: var(--color-blue-400);
     /* --venia-global-color-blue-500: 51 109 255; */
     /* --venia-global-color-blue-600: 41 84 255; */
-    --venia-global-color-blue-700: 31 57 255;
+    --venia-global-color-blue-700: var(--color-blue-700);
     /* --venia-global-color-blue-800: 23 43 196; */
-    --venia-global-color-gray-50: 255 255 255;
+    --venia-global-color-gray-50: var(--color-gray-50);
     /* --venia-global-color-gray-75: 250 250 250; */
-    --venia-global-color-gray-100: 244 245 245;
+    --venia-global-color-gray-100: var(--color-gray-100);
     /* --venia-global-color-gray-200: 234 235 235; */
-    --venia-global-color-gray-300: 161 151 145;
-    --venia-global-color-gray-400: 181 184 186;
-    --venia-global-color-gray-500: 149 154 157;
-    --venia-global-color-gray-600: 118 123 127;
-    --venia-global-color-gray-700: 84 93 99;
+    --venia-global-color-gray-300: var(--color-gray-300);
+    --venia-global-color-gray-400: var(--color-gray-400);
+    --venia-global-color-gray-500: var(--color-gray-500);
+    --venia-global-color-gray-600: var(--color-gray-600);
+    --venia-global-color-gray-700: var(--color-gray-700);
     /* --venia-global-color-gray-800: 51 63 71; */
-    --venia-global-color-gray-900: 23 32 38;
+    --venia-global-color-gray-900: var(--color-gray-900);
     --venia-global-color-gray: var(--venia-global-color-gray-100);
-    --venia-global-color-gray-dark: var(--venia-global-color-gray-300);
-    --venia-global-color-gray-darker: var(--venia-global-color-gray-600);
+    --venia-global-color-gray-dark: var(--venia-global-color-gray-400);
+    --venia-global-color-gray-darker: var(--venia-global-color-gray-700);
     /* --venia-global-color-green-400: 51 171 132; */
-    --venia-global-color-green-500: 45 157 120;
+    --venia-global-color-green-500: var(--color-green-600);
     /* --venia-global-color-green-600: 38 142 108; */
     /* --venia-global-color-green-700: 18 128 92; */
-    --venia-global-color-orange: 241 99 33;
-    --venia-global-color-red-400: 236 91 98;
+    --venia-global-color-orange: var(--color-orange);
+    --venia-global-color-red-400: var(--color-red-400);
     /* --venia-global-color-red-500: 227 72 80; */
     /* --venia-global-color-red-600: 215 55 63; */
-    --venia-global-color-red-700: 201 37 45;
+    --venia-global-color-red-700: var(--color-red-700);
     /* --venia-global-color-red-800: 161 30 36; */
     --venia-global-color-teal: var(--venia-global-color-blue-400);
     /* --venia-global-color-teal-dark: var(--venia-global-color-blue-600); */
@@ -84,11 +84,11 @@
     /* --venia-global-lineHeight-500: 2; */
 
     /* dimensions */
-    --venia-global-maxWidth: 1440px;
-    --venia-global-header-minHeight: 5rem;
+    --venia-global-maxWidth: theme(maxWidth.site);
+    --venia-global-header-minHeight: theme(spacing.header);
 }
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     :global(:root) {
         --venia-global-header-minHeight: 3.5rem;
     }
@@ -97,11 +97,11 @@
 /* alias tokens */
 :global(:root) {
     /* colors */
-    --venia-brand-color-1-100: var(--venia-global-color-blue-100);
+    --venia-brand-color-1-100: var(--color-brand-100);
     /* --venia-brand-color-1-400: var(--venia-global-color-blue-400); */
     /* --venia-brand-color-1-500: var(--venia-global-color-blue-500); */
     /* --venia-brand-color-1-600: var(--venia-global-color-blue-600); */
-    --venia-brand-color-1-700: var(--venia-global-color-blue-700);
+    --venia-brand-color-1-700: var(--color-brand-700);
     /* --venia-brand-color-1-800: var(--venia-global-color-blue-800); */
 
     /* typography - heading */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "10.3.0",
+  "version": "11.3.0-alpha.8",
   "publishConfig": {
     "access": "public"
   },
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.2.3",
-    "@magento/peregrine": "~13.2.1",
+    "@magento/peregrine": "14.2.1-alpha.8",
     "@magento/pwa-buildpack": "~11.4.3",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.33.3",