@luxfi/core 5.2.11 → 5.2.12

package/style/cart-animation.css

@@ -1,29 +1,29 @@
-@keyframes wiggle-larger {
-    0% { transform: rotate(0deg); }
-    18% { transform: rotate(10deg) scale(0.9); }
-    32% { transform: rotate(0deg) scale(1.05);; }
-    50% { transform: rotate(-10deg) scale(1.05); }
-    68% { transform: rotate(0deg) scale(1.1); }
-    84% { transform: rotate(10deg) scale(1); }
-  100% { transform: rotate(0deg) scale(1);}
-}
-
-@keyframes wiggle-smaller {
-    0% { transform: rotate(0deg); }
-    18% { transform: rotate(10deg) scale(1.05); }
-    32% { transform: rotate(0deg) scale(0.9);; }
-    50% { transform: rotate(-10deg) scale(0.9); }
-    68% { transform: rotate(0deg) scale(0.85); }
-    84% { transform: rotate(10deg) scale(1); }
-  100% { transform: rotate(0deg) scale(1);}
-}
-
-.wiggle-larger-animation,
-.item-added-to-cart-animation {
-  animation: wiggle-larger 350ms; 
-}
-
-.wiggle-smaller-animation,
-.item-removed-from-cart-animation  {
-  animation: wiggle-smaller 300ms; 
-}
+@keyframes wiggle-larger {
+    0% { transform: rotate(0deg); }
+    18% { transform: rotate(10deg) scale(0.9); }
+    32% { transform: rotate(0deg) scale(1.05);; }
+    50% { transform: rotate(-10deg) scale(1.05); }
+    68% { transform: rotate(0deg) scale(1.1); }
+    84% { transform: rotate(10deg) scale(1); }
+  100% { transform: rotate(0deg) scale(1);}
+}
+
+@keyframes wiggle-smaller {
+    0% { transform: rotate(0deg); }
+    18% { transform: rotate(10deg) scale(1.05); }
+    32% { transform: rotate(0deg) scale(0.9);; }
+    50% { transform: rotate(-10deg) scale(0.9); }
+    68% { transform: rotate(0deg) scale(0.85); }
+    84% { transform: rotate(10deg) scale(1); }
+  100% { transform: rotate(0deg) scale(1);}
+}
+
+.wiggle-larger-animation,
+.item-added-to-cart-animation {
+  animation: wiggle-larger 350ms; 
+}
+
+.wiggle-smaller-animation,
+.item-removed-from-cart-animation  {
+  animation: wiggle-smaller 300ms; 
+}

package/style/checkout-animation.css

@@ -1,23 +1,23 @@
-@keyframes checkout-widget-fade-in {
-    0% { transform: scale(0.5); opacity: 0; }
-  100% { transform: scale(1); opacity: 1;}
-}
-
-.checkout-widget-appears {
-  animation-name: checkout-widget-fade-in;
-  animation-duration: 200ms; 
-}
-
-.checkout-widget-disappears {
-  animation-name: checkout-widget-fade-in;
-  animation-duration: 200ms; 
-  animation-direction: reverse;
-  animation-fill-mode: forwards;
-}
-
-.checkout-widget-appears-after-buy-drawer-closes {
-  animation-fill-mode: backwards;
-    /* Drawer is hardcoded to open in 0.5s.  We can start slightly sooner. */
-  animation-delay: 400ms;  
-}
-
+@keyframes checkout-widget-fade-in {
+    0% { transform: scale(0.5); opacity: 0; }
+  100% { transform: scale(1); opacity: 1;}
+}
+
+.checkout-widget-appears {
+  animation-name: checkout-widget-fade-in;
+  animation-duration: 200ms; 
+}
+
+.checkout-widget-disappears {
+  animation-name: checkout-widget-fade-in;
+  animation-duration: 200ms; 
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+}
+
+.checkout-widget-appears-after-buy-drawer-closes {
+  animation-fill-mode: backwards;
+    /* Drawer is hardcoded to open in 0.5s.  We can start slightly sooner. */
+  animation-delay: 400ms;  
+}
+

package/style/drawer-handle-overrides.css

@@ -1,160 +1,160 @@
-[vaul-drawer] {
-  touch-action: none;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[vaul-drawer][vaul-drawer-direction='bottom'] {
-  transform: translate3d(0, 100%, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='top'] {
-  transform: translate3d(0, -100%, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='left'] {
-  transform: translate3d(-100%, 0, 0);
-}
-
-[vaul-drawer][vaul-drawer-direction='right'] {
-  transform: translate3d(100%, 0, 0);
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
-  overflow-y: hidden !important;
-}
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
-  overflow-y: hidden !important;
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
-  overflow-x: hidden !important;
-}
-
-.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
-  overflow-x: hidden !important;
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
-  transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
-  transform: translate3d(0, var(--snap-point-height, 0), 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
-  transform: translate3d(var(--snap-point-height, 0), 0, 0);
-}
-
-[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
-  transform: translate3d(var(--snap-point-height, 0), 0, 0);
-}
-
-[vaul-overlay] {
-  opacity: 0;
-  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-[vaul-overlay][vaul-drawer-visible='true'] {
-  opacity: 1;
-}
-
-[vaul-drawer]::after {
-  content: '';
-  position: absolute;
-  background: inherit;
-  background-color: inherit;
-}
-
-[vaul-drawer][vaul-drawer-direction='top']::after {
-  top: initial;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  height: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='bottom']::after {
-  top: 100%;
-  bottom: initial;
-  left: 0;
-  right: 0;
-  height: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='left']::after {
-  left: initial;
-  right: 100%;
-  top: 0;
-  bottom: 0;
-  width: 200%;
-}
-
-[vaul-drawer][vaul-drawer-direction='right']::after {
-  left: 100%;
-  right: initial;
-  top: 0;
-  bottom: 0;
-  width: 200%;
-}
-
-[vaul-handle] {
-  /* opacity: 0.8; */
-  touch-action: pan-y;
-  cursor: grab;
-}
-
-
-
-/* [vaul-handle]:hover, */
-[vaul-handle]:active {
-  opacity: 1;
-}
-
-[vaul-handle]:active {
-  cursor: grabbing;
-}
-
-[vaul-handle]:focus-visible {
-  outline: none;
-}
-
-[vaul-handle-hitarea] {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: max(100%, 2.75rem); /* 44px */
-  height: max(100%, 2.75rem); /* 44px */
-  touch-action: inherit;
-}
-
-[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
-  opacity: 0;
-}
-
-[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
-  opacity: 1;
-}
-
-/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
-@keyframes fake-animation {
-  from {
-  }
-  to {
-  }
-}
-
-@media (pointer: fine) {
-  [vaul-handle-hitarea] {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@media (hover: hover) and (pointer: fine) {
-  [vaul-drawer] {
-    user-select: none;
-  }
-}
-
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
+  overflow-y: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-overlay][vaul-drawer-visible='true'] {
+  opacity: 1;
+}
+
+[vaul-drawer]::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-handle] {
+  /* opacity: 0.8; */
+  touch-action: pan-y;
+  cursor: grab;
+}
+
+
+
+/* [vaul-handle]:hover, */
+[vaul-handle]:active {
+  opacity: 1;
+}
+
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+
+[vaul-handle]:focus-visible {
+  outline: none;
+}
+
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
+  opacity: 0;
+}
+
+[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
+  opacity: 1;
+}
+
+/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+

package/style/lux-colors.css

@@ -1,85 +1,85 @@
-@tailwind base;
-/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
-
-@layer base {
-
-  :root, .hanzo-ui-light-theme {
-    --hz-ui-fg-0: hsl(0 0% 0%);
-    --hz-ui-fg-body: hsl(0 0% 10%);
-    --hz-ui-fg-1: hsl(0 0% 20%);
-    --hz-ui-fg-2: hsl(0 0% 35%);
-    --hz-ui-fg-3: hsl(0 0% 50%);
-    --hz-ui-fg-4: hsl(0 0% 70%);
-    --hz-ui-fg-5: hsl(0 0% 90%);
-
-    --hz-ui-bg-0: hsl(0 0% 100%);
-    --hz-ui-bg-1: hsl(0 0% 90%);
-    --hz-ui-bg-2: hsl(0 0% 75%);
-    --hz-ui-bg-3: hsl(0 0% 55%);
-
-    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
-
-    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
-    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 0%, 0.85);
-
-    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
-
-    --hz-ui-secondary-0: hsl(262, 7%, 82%);
-    --hz-ui-secondary-1: hsl(258, 7%, 72%);
-    --hz-ui-secondary-2: hsl(254, 7%, 62%);
-    --hz-ui-secondary-3: hsl(250, 5%, 53%);
-
-    --hz-ui-primary: var(--hz-ui-bg-inverted);
-    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
-    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
-
-    --hz-ui-secondary: var(--hz-ui-secondary-0);
-    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
-    --hz-ui-secondary-fg: var(--hz-ui-bg-0);
-
-    --hz-ui-nav: var(--hz-ui-fg-4);
-    --hz-ui-nav-current: var(--hz-ui-fg-0);
-    --hz-ui-nav-hover: var(--hz-ui-fg-0);
-
-    --hz-ui-destructive: hsl(0 62.8% 45%);
-    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
-    --hz-ui-destructive-fg: hsl(0 0% 100%);
-
-    --hz-ui-ring: var(--hz-ui-fg-1);
-
-    --hz-ui-radius: 0.5rem;
-  }
- 
-  .hanzo-ui-dark-theme {
-
-    --hz-ui-fg-0: hsl(0 0% 100%);
-    --hz-ui-fg-body: hsl(0, 0%, 97%);
-    --hz-ui-fg-1: hsl(0 0% 85%);
-    --hz-ui-fg-2: hsl(0 0% 70%);
-    --hz-ui-fg-3: hsl(0 0% 55%);
-    --hz-ui-fg-4: hsl(0 0% 40%);
-    --hz-ui-fg-5: hsl(0 0% 25%);
-
-    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
-    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 100%, 0.85);
-
-    --hz-ui-bg-3: hsl(0 0% 25%);
-    --hz-ui-bg-2: hsl(0 0% 18%);
-    --hz-ui-bg-1: hsl(0 0% 12%);
-    --hz-ui-bg-0: hsl(0 0% 0%);
-
-    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
-
-    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
-
-    --hz-ui-secondary-0: hsl(250, 5%, 53%);
-    --hz-ui-secondary-1: hsl(254, 7%, 62%);
-    --hz-ui-secondary-2: hsl(258, 7%, 72%);
-    --hz-ui-secondary-3: hsl(262, 7%, 82%);
-
-    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
-
-  }
-
-}
-
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+
+  :root, .hanzo-ui-light-theme {
+    --hz-ui-fg-0: hsl(0 0% 0%);
+    --hz-ui-fg-body: hsl(0 0% 10%);
+    --hz-ui-fg-1: hsl(0 0% 20%);
+    --hz-ui-fg-2: hsl(0 0% 35%);
+    --hz-ui-fg-3: hsl(0 0% 50%);
+    --hz-ui-fg-4: hsl(0 0% 70%);
+    --hz-ui-fg-5: hsl(0 0% 90%);
+
+    --hz-ui-bg-0: hsl(0 0% 100%);
+    --hz-ui-bg-1: hsl(0 0% 90%);
+    --hz-ui-bg-2: hsl(0 0% 75%);
+    --hz-ui-bg-3: hsl(0 0% 55%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 0%, 0.85);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(262, 7%, 82%);
+    --hz-ui-secondary-1: hsl(258, 7%, 72%);
+    --hz-ui-secondary-2: hsl(254, 7%, 62%);
+    --hz-ui-secondary-3: hsl(250, 5%, 53%);
+
+    --hz-ui-primary: var(--hz-ui-bg-inverted);
+    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
+    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
+
+    --hz-ui-secondary: var(--hz-ui-secondary-0);
+    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
+    --hz-ui-secondary-fg: var(--hz-ui-bg-0);
+
+    --hz-ui-nav: var(--hz-ui-fg-4);
+    --hz-ui-nav-current: var(--hz-ui-fg-0);
+    --hz-ui-nav-hover: var(--hz-ui-fg-0);
+
+    --hz-ui-destructive: hsl(0 62.8% 45%);
+    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
+    --hz-ui-destructive-fg: hsl(0 0% 100%);
+
+    --hz-ui-ring: var(--hz-ui-fg-1);
+
+    --hz-ui-radius: 0.5rem;
+  }
+ 
+  .hanzo-ui-dark-theme {
+
+    --hz-ui-fg-0: hsl(0 0% 100%);
+    --hz-ui-fg-body: hsl(0, 0%, 97%);
+    --hz-ui-fg-1: hsl(0 0% 85%);
+    --hz-ui-fg-2: hsl(0 0% 70%);
+    --hz-ui-fg-3: hsl(0 0% 55%);
+    --hz-ui-fg-4: hsl(0 0% 40%);
+    --hz-ui-fg-5: hsl(0 0% 25%);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 100%, 0.85);
+
+    --hz-ui-bg-3: hsl(0 0% 25%);
+    --hz-ui-bg-2: hsl(0 0% 18%);
+    --hz-ui-bg-1: hsl(0 0% 12%);
+    --hz-ui-bg-0: hsl(0 0% 0%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(250, 5%, 53%);
+    --hz-ui-secondary-1: hsl(254, 7%, 62%);
+    --hz-ui-secondary-2: hsl(258, 7%, 72%);
+    --hz-ui-secondary-3: hsl(262, 7%, 82%);
+
+    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
+
+  }
+
+}
+

package/style/lux-global.css

@@ -1,31 +1,48 @@
-/* Note, preflight is applied first:
-  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
-*/
-@import "tailwindcss/base";
-
-/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
-@import "@hanzo/ui/style/hanzo-common";
-@import "lux-colors";
-
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
-  display: none;
-}
-
-.font-heading {
-  @apply uppercase;
-}
-
-/* Specific style fixes for react-square-web-payments-sdk -
- * reduce gap between card input and pay button
- */
-#rswps-card-container {
-  min-height: unset !important;
-}
-
-.sq-card-wrapper .sq-card-message {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
+/* Note, preflight is applied first:
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+@import "tailwindcss/base";
+
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+@import "@hanzo/ui/style/hanzo-common";
+@import "lux-colors";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+.font-heading {
+  @apply uppercase;
+}
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+
+.element-container:hover .icon-container-nor {
+  display: none;
+}
+
+.icon-container-hov {
+  display: none;
+}
+
+.element-container:hover .icon-container-hov {
+  display: block !important;
+}
+
+.element-container:hover .text-container {
+  background: transparent;
 }