@luxfi/ui 8.1.0 → 8.2.1

package/src/site/style/lux-colors.css

@@ -0,0 +1,84 @@
+/* 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/src/site/style/lux-fonts.css

@@ -0,0 +1,24 @@
+/* Both faces are served from the app's own /fonts. The Next path (../next/font)
+   emits the same two through next/font instead. */
+@layer base {
+  @font-face {
+    font-family: "Zen";
+    src: url("/fonts/Zen-Variable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable.woff2") format("woff2"),
+      url("/fonts/InterVariable.ttf") format("ttf");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable-Italic.woff2") format("woff2"),
+      url("/fonts/InterVariable-Italic.ttf") format("ttf");
+    font-weight: 500;
+    font-style: italic;
+  }
+}

package/src/site/style/lux-global-non-next.css

@@ -0,0 +1,52 @@
+/* Note, preflight is applied first:
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+/* 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.css";
+@import "./lux-fonts.css";
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose -- a
+   transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
+.font-heading {
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
+}
+
+/* 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;
+}
+.overflow-scroll::-webkit-scrollbar{
+  display:none;
+}

package/src/site/style/lux-global.css

@@ -0,0 +1,135 @@
+/* The Lux surface.
+ *
+ * No utility engine. @hanzo/ui ships the reset and the token scale (theme.css +
+ * styles.css, imported by name in each app's layout), so what is left here is
+ * what is actually Lux: the colour set, the display face, the one place Hanzo
+ * IAM's unskinned sign-in markup meets this surface, and a few corrections to
+ * third-party widgets.
+ *
+ * The Tailwind layers this used to open with — base, components, utilities —
+ * generated every class the chrome was written against. Removing them without
+ * the rest of the migration is what leaves a site rendering with browser
+ * defaults, so `body` states its own ground here.
+ */
+@import "./lux-colors.css";
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  min-height: 100%;
+  /* One column, floored at 0 so long content wraps instead of widening the
+     page. A row track of 1fr lets a short page still fill the viewport. */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
+
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose --
+   a transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
+.font-heading {
+  font-family: var(--font-zen-sans), var(--font-inter), sans-serif;
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
+}
+
+/* Hanzo IAM's sign-in views ship structure, not skin. This is the one place
+ * that markup meets the Lux surface -- colours come from lux-colors so the
+ * form follows the theme like everything else.
+ */
+.hanzo-iam-card,
+.hanzo-iam-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.hanzo-iam-form input {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  background-color: var(--hz-ui-bg-1);
+  color: var(--hz-ui-fg-body);
+  border: 1px solid var(--hz-ui-bg-2);
+}
+
+.hanzo-iam-form input::placeholder {
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-form input:focus {
+  outline: none;
+  border-color: var(--hz-ui-fg-body);
+}
+
+.hanzo-iam-btn {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  background-color: var(--hz-ui-bg-inverted);
+  color: var(--hz-ui-fg-inverted);
+}
+
+.hanzo-iam-btn:hover {
+  background-color: var(--hz-ui-bg-inverted-hover);
+}
+
+.hanzo-iam-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.hanzo-iam-divider {
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-error {
+  font-size: var(--text-sm);
+  color: hsl(0 70% 60%);
+}
+
+/* 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;
+}
+
+.overflow-scroll::-webkit-scrollbar {
+  display: none;
+}

package/src/site/types/chatbot-config.ts

@@ -0,0 +1,7 @@
+import type ChatbotSuggestQuestion from './chatbot-suggested-question'
+
+interface ChatbotConfig {
+  suggestedQuestions?: ChatbotSuggestQuestion[] 
+}
+
+export { type ChatbotConfig as default } 

package/src/site/types/chatbot-suggested-question.ts

@@ -0,0 +1,7 @@
+interface ChatbotSuggestedQuestion {
+  heading: string 
+  message: string 
+  icon?: string
+}
+
+export { type ChatbotSuggestedQuestion as default }

package/src/site/types/contact-info.ts

@@ -0,0 +1,11 @@
+interface ContactInfo {
+  email: string
+  phone?: string
+}
+
+type ContactInfoFields = keyof ContactInfo
+
+export {
+  type ContactInfo,
+  type ContactInfoFields
+}

package/src/site/types/index.ts

@@ -0,0 +1,4 @@
+export type { ContactInfo, ContactInfoFields } from './contact-info'
+export type { default as SiteDef } from './site-def'
+export type { default as ChatbotSuggestedQuestion } from './chatbot-suggested-question'
+export type { default as ChatbotConfig } from './chatbot-config'

package/src/site/types/site-def.ts

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import type { CommerceConfig }  from '@hanzo/commerce/types'
+
+import type ChatbotConfig from './chatbot-config'
+
+interface SiteDef {
+
+    /**
+     * Short name of this site, which with the org names the IAM application it
+     * signs in as: 'quest' is the client `lux-quest` on lux.id. Required, so a
+     * site cannot ship a login button that belongs to no one.
+     */
+  app: string
+
+    /** url of this site.  All nav links in the system will show it in 'current' state */
+  currentAs?: string
+
+  nav: {
+      /** common elements (will auto-select currentAs if it's provide) */
+      /** optional feature element. right-most after 'elements' (any min-w is ignored) */
+    common: LinkDef[]       
+    featured?: LinkDef[]
+  }
+
+    /** 
+     * Array of columns, each of which itself is an array of links 
+     * (or "title defs" where href='' and variant='linkFG')  
+     * Common use case: To render a site-specific first column: 
+     * {
+     *    footer[myColumn, ...commonColumnsFromUi]
+     * }
+     * see: @hanzo/ui/siteDef/footer (default export)
+     * or @hanzo/ui/siteDef/footer/common
+     */
+  footer: LinkDef[][]  
+
+    /** 
+     * optional override of default 'above copyright' horizantal links 
+      default (undefined / absent): links in side-def/footer/legal are rendered 
+      [] renders nothing above the copyright 
+    */
+  aboveCopyright?: LinkDef[] 
+
+  commerce?: CommerceConfig
+  chatbot?: ChatbotConfig
+
+    // Do not render login / avatar widget
+  noAuth?: boolean
+}
+
+export { type SiteDef as default }

package/src/site/util/index.ts

@@ -0,0 +1,11 @@
+import { compiler } from 'markdown-to-jsx'
+
+  // Compiles markdown to JSX. `wrapper: null` yields the bare nodes rather than
+  // a wrapping element, so callers can drop the result straight into a
+  // ReactNode-typed field. Inline HTML (<br/>, <cite>) is parsed natively.
+export const markdown = (s: string, options?: any) => (
+  compiler(s, {
+    wrapper: null,
+    ...options
+  })
+)