@hanzo/ui 2.0.4 → 2.5.0

package/siteDef/main-nav.ts

@@ -0,0 +1,35 @@
+import type { LinkDef }  from '../types'
+
+export default [
+  {
+    title: "AI",
+    href: "https://lux.chat",
+    newTab: false,
+  },
+  {
+    title: "Credit",
+    href: "https://lux.credit",
+    newTab: false,
+  },
+  {
+    title: "Exchange",
+    href: "https://lux.exchange",
+    newTab: false,
+  },
+  {
+    title: "Finance",
+    href: "https://lux.finance",
+    newTab: false,
+  },
+  {
+    title: "Market",
+    href: "https://lux.market",
+    newTab: false,
+  },
+  {
+    title: "Network",
+    href: "https://lux.network",
+    newTab: false,
+  },
+] satisfies LinkDef[]
+

package/style/hanzo-default-colors.css

@@ -3,7 +3,7 @@
 
 @layer base {
 
-  :root, .hanzo-ui-light-theme {
+  :root, .lux-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%);
@@ -49,7 +49,7 @@
     --hz-ui-radius: 0.5rem;
   }
  
-  .hanzo-ui-dark-theme {
+  .lux-dark-theme {
 
     --hz-ui-fg-0: hsl(0 0% 100%);
     --hz-ui-fg-body: hsl(0, 0%, 97%);

package/style/social-svg.css

@@ -0,0 +1,3 @@
+.social-icon svg {
+    transform: scale(1.25);
+}

package/tailwind/{fontSize.tailwind.ts → fonts.tailwind.ts}

@@ -1,4 +1,22 @@
-export default {
+import luxTwFonts  from './lux-tw-fonts'
+import type TwFontDesc from './tw-font-desc'
+
+export const fontFamily = (ignoreTheme: any): {
+  [key: string]: string[] 
+} => {
+
+  let result: any = {}
+  luxTwFonts.forEach((font: TwFontDesc) => {
+    result[font.twName] = font.fontFamily
+    // eg: heading: ['var(--font-druk-text-wide)']
+  })
+
+  return result as {
+    [key: string]: string[] 
+  }
+}
+
+export const fontSize = {
   xxs: ['0.65rem', { lineHeight: '0.8rem' }],    // very fine print               
   xs: ['0.8rem', { lineHeight: '1rem' }],       // fine print               
   sm: ['0.9rem', { lineHeight: '1.2rem' }],     // 'standard' some news article cards  (set manually when using typography-sm)

package/tailwind/index.ts

@@ -1,7 +1,18 @@
-import preset from './tailwind.config.hanzo-preset'
-import type TwFontDesc from './tw-font-desc'
+import colors from './colors.tailwind'
+import { fontFamily, fontSize } from './fonts.tailwind'
+import safelist from './safelist.tailwind'
+import screens from './screens.tailwind'
+import spacing from './spacing.tailwind'
+import typographyPlugin from './typo-plugin'
+import config from './tailwind.config.base'
 
 export {
-  preset,
-  type TwFontDesc
+  colors,
+  config,
+  fontFamily,
+  fontSize,
+  safelist,
+  screens,
+  spacing,
+  typographyPlugin
 }

package/tailwind/lux-tw-fonts.ts

@@ -0,0 +1,37 @@
+import type TwFontDesc from './tw-font-desc'
+
+export default [
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    twName: 'sans'
+  },
+  {
+    fontFamily: ['var(--font-druk-text-wide)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-druk-text-wide',
+    twName: 'nav'
+  },
+  {
+    fontFamily: ['var(--font-druk-wide)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-druk-wide',
+    twName: 'heading'
+  },
+  {
+    twName: 'serif',
+    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
+  },
+  {
+    twName: 'mono',
+    fontFamily: [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      '"Liberation Mono"',
+      '"Courier New"',
+      'monospace',
+    ] 
+  }
+
+] as TwFontDesc[]

package/tailwind/{tailwind.config.hanzo-preset.js → tailwind.config.base.js}

@@ -6,14 +6,12 @@ import colors from './colors.tailwind'
 import safelist from './safelist.tailwind'
 import screens from './screens.tailwind'
 import spacing from './spacing.tailwind'
-import fontSize from './fontSize.tailwind'
-import fontFamily from './fontFamily.tailwind'
+import { fontFamily, fontSize} from './fonts.tailwind'
 import typographyPlugin from './typo-plugin'
 
 export default {
   presets: [],
   darkMode: ["class"],
-  content: [],
   safelist,
   plugins: [
     animatePlugin,
@@ -298,7 +296,7 @@ export default {
       0: '0',
       DEFAULT: '1',
     },
-    fontFamily, 
+    fontFamily,
     fontSize,
     fontWeight: {
       thin: '100',

package/tailwind/typo-plugin/get-plugin-styles.js

@@ -7,29 +7,29 @@ import {
 const typographyColorTheme = {
     // vars are defined in global.css
     // and dark mode is handled at that level.
-  '--tw-typo-plugin-body': "var(--hz-ui-fg-body)",
-  '--tw-typo-plugin-headings': "var(--hz-ui-fg-0)",
-  '--tw-typo-plugin-links': "var(--hz-ui-fg-0)",
-  '--tw-typo-plugin-links-hover': "var(--hz-ui-fg-2)",
-  '--tw-typo-plugin-bold': "var(--hz-ui-fg-0)",
-  '--tw-typo-plugin-counters': "var(--hz-ui-fg-4)",
-  '--tw-typo-plugin-bullets': "var(--hz-ui-fg-2)",
-  '--tw-typo-plugin-hr': "var(--hz-ui-fg-2)",
-  '--tw-typo-plugin-quotes': "var(--hz-ui-fg-body)",
-  '--tw-typo-plugin-quote-borders': "var(--hz-ui-fg-3)",
-  '--tw-typo-plugin-captions': "var(--hz-ui-fg-2)",
-  '--tw-typo-plugin-kbd': "var(--hz-ui-fg-0)",
-  '--tw-typo-plugin-kbd-shadows': "var(--hz-ui-fg-1)",
-  '--tw-typo-plugin-code': "var(--hz-ui-fg-0)",
-  '--tw-typo-plugin-pre-code': "var(--hz-ui-fg-1)",
-  '--tw-typo-plugin-pre-bg': "var(--hz-ui-bg-1)",
-  '--tw-typo-plugin-th-borders': "var(--hz-ui-fg-2)",
-  '--tw-typo-plugin-td-borders': "var(--hz-ui-fg-3)",
+  '--tw-prose-body': "var(--hz-ui-fg-body)",
+  '--tw-prose-headings': "var(--hz-ui-fg-0)",
+  '--tw-prose-links': "var(--hz-ui-fg-0)",
+  '--tw-prose-links-hover': "var(--hz-ui-fg-2)",
+  '--tw-prose-bold': "var(--hz-ui-fg-0)",
+  '--tw-prose-counters': "var(--hz-ui-fg-4)",
+  '--tw-prose-bullets': "var(--hz-ui-fg-2)",
+  '--tw-prose-hr': "var(--hz-ui-fg-2)",
+  '--tw-prose-quotes': "var(--hz-ui-fg-body)",
+  '--tw-prose-quote-borders': "var(--hz-ui-fg-3)",
+  '--tw-prose-captions': "var(--hz-ui-fg-2)",
+  '--tw-prose-kbd': "var(--hz-ui-fg-0)",
+  '--tw-prose-kbd-shadows': "var(--hz-ui-fg-1)",
+  '--tw-prose-code': "var(--hz-ui-fg-0)",
+  '--tw-prose-pre-code': "var(--hz-ui-fg-1)",
+  '--tw-prose-pre-bg': "var(--hz-ui-bg-1)",
+  '--tw-prose-th-borders': "var(--hz-ui-fg-2)",
+  '--tw-prose-td-borders': "var(--hz-ui-fg-3)",
 }
 
 const defaultCSS = {
 
-  color: 'var(--tw-typo-plugin-body)',
+  color: 'var(--tw-prose-body)',
 // YUCK  maxWidth: '65ch',
   p: {
     textAlign: 'inherit'
@@ -37,17 +37,17 @@ const defaultCSS = {
   'p:first-child': {},
   'p:last-child': {},
   a: {
-    color: 'var(--tw-typo-plugin-links)',
+    color: 'var(--tw-prose-links)',
     textDecoration: 'underline',
     fontWeight: '400',
   },
   'a:hover': {
-    color: 'var(--tw-typo-plugin-links-hover)',
+    color: 'var(--tw-prose-links-hover)',
   },
   blockquote: {
     fontWeight: '400',
     fontStyle: 'italic',
-    color: 'var(--tw-typo-plugin-quotes)',
+    color: 'var(--tw-prose-quotes)',
     quotes: '"\\201C""\\201D""\\2018""\\2019"',
   },
   //'blockquote::before': {},
@@ -65,7 +65,7 @@ const defaultCSS = {
     display: 'block',
     fontStyle: 'normal',
     textAlign: 'right',
-    color: 'var(--tw-typo-plugin-quotes)',
+    color: 'var(--tw-prose-quotes)',
   },
   ol: {
     listStyleType: 'decimal',
@@ -75,44 +75,44 @@ const defaultCSS = {
   },
   'ol > li::marker': {
     fontWeight: '400',
-    color: 'var(--tw-typo-plugin-counters)',
+    color: 'var(--tw-prose-counters)',
   },
   'ul > li::marker': {
-    color: 'var(--tw-typo-plugin-bullets)',
+    color: 'var(--tw-prose-bullets)',
   },
   'ul > li::before': {
   },
   hr: {
-    borderColor: 'var(--tw-typo-plugin-hr)',
+    borderColor: 'var(--tw-prose-hr)',
     borderTopWidth: 1,
   },
   h1: {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     fontWeight: '800',
     textAlign: 'inherit'
   },
   h2: {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     fontWeight: '700',
     textAlign: 'inherit'
   },
   h3: {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     fontWeight: '600',
     textAlign: 'inherit'
   },
   h4: {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     fontWeight: '600',
     textAlign: 'inherit'
   },
   h5: {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     fontWeight: '600',
     textAlign: 'inherit'
   },
   h6: {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     textAlign: 'inherit'
   },
   img: {},
@@ -124,19 +124,19 @@ const defaultCSS = {
     display: 'block',
   },
   strong: {
-    color: 'var(--tw-typo-plugin-bold)',
+    color: 'var(--tw-prose-bold)',
     fontWeight: '600',
   },
   video: {},
   kbd: {
     fontWeight: '500',
     fontFamily: 'inherit',
-    color: 'var(--tw-typo-plugin-kbd)',
+    color: 'var(--tw-prose-kbd)',
     boxShadow:
-      '0 0 0 1px rgb(var(--tw-typo-plugin-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-typo-plugin-kbd-shadows) / 10%)',
+      '0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)',
   },
   code: {
-    color: 'var(--tw-typo-plugin-code)',
+    color: 'var(--tw-prose-code)',
     fontWeight: '500',
   },
   'code::before': {
@@ -173,8 +173,8 @@ const defaultCSS = {
     color: 'inherit',
   },
   pre: {
-    color: 'var(--tw-typo-plugin-pre-code)',
-    backgroundColor: 'var(--tw-typo-plugin-pre-bg)',
+    color: 'var(--tw-prose-pre-code)',
+    backgroundColor: 'var(--tw-prose-pre-bg)',
     overflowX: 'auto',
     fontWeight: '400',
   },
@@ -202,10 +202,10 @@ const defaultCSS = {
   },
   thead: {
     borderBottomWidth: '1px',
-    borderBottomColor: 'var(--tw-typo-plugin-th-borders)',
+    borderBottomColor: 'var(--tw-prose-th-borders)',
   },
   'thead th': {
-    color: 'var(--tw-typo-plugin-headings)',
+    color: 'var(--tw-prose-headings)',
     fontWeight: '600',
     verticalAlign: 'bottom',
   },
@@ -218,7 +218,7 @@ const defaultCSS = {
   },
   tfoot: {
     borderTopWidth: '1px',
-    borderTopColor: 'var(--tw-typo-plugin-th-borders)',
+    borderTopColor: 'var(--tw-prose-th-borders)',
   },
   'tfoot td': {
     verticalAlign: 'top',
@@ -244,7 +244,7 @@ const defaultModifiers = (base) => ({
         a: {},
         'a:hover': {},
         blockquote: {
-          //color: 'blue', //var(--tw-typo-plugin-quotes)',
+          //color: 'blue', //var(--tw-prose-quotes)',
           //marginTop: pxToEm(32, 20),
           //marginBottom: pxToEm(32, 20),
           //paddingLeft: pxToEm(20, 20),

package/tailwind/typography-test.mdx

@@ -1,4 +1,4 @@
-import { LinkElement as Link } from '@hanzo/ui/primitives'
+import Link from '@hanzo/ui/common/link-element'
 
 ###### In a galaxy far, far away
 ##### Join the global rush to own silver

package/types/index.ts

@@ -11,9 +11,19 @@ export type {default as GridDef, GridColumnSpec} from './grid-def'
 export type { TShirtDimensions, Dimensions } from './dimensions' 
 export type { ContactInfo, ContactInfoFields } from './contact-info'
 
-export type { default as BulletItem } from './bullet-item'
-export type { default as Icon } from './icon'
-export type { default as ImageDef } from './image-def'
-export type { default as LinkDef } from './link-def'
-export type { default as TShirtSize } from './t-shirt-size' 
+import type BulletItem from './bullet-item'
+import type Icon from './icon'
+import type ImageDef from './image-def'
+import type LinkDef from './link-def'
+import type SiteDef from './site-def'
+import type TShirtSize from './t-shirt-size' 
+
+export {
+  type BulletItem,
+  type Icon,
+  type ImageDef,
+  type LinkDef,
+  type SiteDef,
+  type TShirtSize,
+}
 

package/types/site-def.ts

@@ -0,0 +1,36 @@
+import type LinkDef from './link-def'
+
+interface SiteDef {
+    /** 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[]
+    auth?: boolean
+    cart?: React.ReactNode
+  }
+
+    /** 
+     * 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 or absent): @ui/sideDef/footer/legal are rendered */
+    /** [] renders nothing above the copyright */
+  aboveCopyright?: LinkDef[] 
+
+      /** any site-specific stuff we'd like access to (link urls, etc) */
+  ext?: any 
+}
+
+export { type SiteDef as default }

package/primitives/icons/index.ts

@@ -1,18 +0,0 @@
-import {
-  Moon as moon,
-  SunMedium as sun,
-  Menu as burger,
-  ArrowUpRight as linkOut,
-} from 'lucide-react'
-
-import youtube from './youtube-logo'
-import gitHub from './github'
-
-export {
-  sun,
-  moon,
-  burger,
-  gitHub,
-  linkOut,
-  youtube,
-}

package/tailwind/fontFamily.tailwind.ts

@@ -1,7 +0,0 @@
-export default {
-  sans: ['sans-serif'],
-  heading: ['serif'],
-  nav: ['serif'],
-  serif: ['serif'],
-  mono: ['monospace']
-} 

package/tailwind/tailwind.config.hanzo-preset.d.ts

@@ -1,5 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-declare const conf: Config
-
-export default conf