@hanzo/ui 0.5.10

package/siteDef/footer/svg/warpcast-logo.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 1260 1260" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1_2)">
+    <!-- path d="M947.747 1259.61H311.861C139.901 1259.61 0 1119.72 0 947.752V311.871C0 139.907 139.901 0.00541362 311.861 0.00541362H947.747C1119.71 0.00541362 1259.61 139.907 1259.61 311.871V947.752C1259.61 1119.72 1119.71 1259.61 947.747 1259.61Z" fill="#472A91"></path -->
+    <path d="M826.513 398.633L764.404 631.889L702.093 398.633H558.697L495.789 633.607L433.087 398.633H269.764L421.528 914.36H562.431L629.807 674.876L697.181 914.36H838.388L989.819 398.633H826.513Z" fill="currentColor">
+  </path>
+  </g>
+  <defs>
+    <clipPath id="clip0_1_2">
+      <rect width="1259.61" height="1259.61" fill="white"></rect>
+    </clipPath>
+  </defs>
+</svg>

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: "Finance",
+    href: "https://lux.finance",
+    newTab: false,
+  },
+  {
+    title: "Market",
+    href: "https://lux.market",
+    newTab: false,
+  },
+  {
+    title: "Network",
+    href: "https://lux.network",
+    newTab: false,
+  },
+  {
+    title: "Exchange",
+    href: "https://lux.exchange",
+    newTab: false,
+  },
+] satisfies LinkDef[]
+

package/style/globals.css

@@ -0,0 +1,13 @@
+/* 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-common-layer";
+@import "hanzo-default-colors";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+

package/style/hanzo-common.css

@@ -0,0 +1,32 @@
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+  
+  * {
+    @apply border-muted-3;
+    box-sizing: inherit;
+  }
+
+  /*
+    using this approach: 
+    https://stackoverflow.com/a/76066443/11645689
+    see src/app/(home)/scroll-snap
+  */
+
+  html {
+    scroll-snap-type: y mandatory;
+    height: 100vh;
+
+    overflow-y: scroll;
+    box-sizing: border-box;
+
+    scrollbar-width: none;
+  }
+
+  body {
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-size: 16px; 
+    letter-spacing: 0.15px;
+  }
+}

package/style/hanzo-default-colors.css

@@ -0,0 +1,79 @@
+@tailwind base;
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+
+  :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%);
+    --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-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(266, 79%, 80%);
+    --hz-ui-secondary-1: hsl(266, 79%, 70%);
+    --hz-ui-secondary-2: hsl(266, 79%, 60%);
+    --hz-ui-secondary-3: hsl(266, 79%, 50%);
+
+    --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-fg-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-input: var(--hz-ui-bg-1);
+    --hz-ui-ring: var(--hz-ui-fg-1);
+
+    --hz-ui-radius: 0.5rem;
+  }
+ 
+  .lux-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-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(266, 79%, 40%);
+    --hz-ui-secondary-1: hsl(266, 79%, 50%);
+    --hz-ui-secondary-2: hsl(266, 79%, 60%);
+    --hz-ui-secondary-3: hsl(266, 79%, 70%);
+  }
+
+}
+

package/style/social-svg.css

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

package/tailwind/colors.tailwind.js

@@ -0,0 +1,46 @@
+export default ({ colors }) => ({
+  inherit: colors.inherit,
+  current: colors.current,
+  transparent: colors.transparent,
+  input: "var(--hz-ui-input)",
+  ring: "var(--hz-ui-ring)",
+  background: 'var(--hz-ui-bg-0)',
+    // levels forward in z-index (a la Material Design)
+  level: {
+    DEFAULT: "var(--hz-ui-bg-0)",
+    '0': "var(--hz-ui-bg-0)",
+    '1': "var(--hz-ui-bg-1)",
+    '2': "var(--hz-ui-bg-2)",
+    '3': "var(--hz-ui-bg-3)",
+  },
+  accent: "var(--hz-ui-fg-0)",      // full contrast (darkTheme:white) : heading and links hover
+  foreground: "var(--hz-ui-fg-body)", // body text off-white (bright enough to contrast to bg-level-1)
+  muted: {
+    DEFAULT: "var(--hz-ui-fg-2)",   // de-emphasized: fine print
+    '1': "var(--hz-ui-fg-2)",       // synonymous ^^^
+    '2': "var(--hz-ui-fg-3)",       // disabled or very de-emphasized
+    '3': "var(--hz-ui-fg-4)",       // very disabled ;)
+    '4': "var(--hz-ui-fg-5)",       // disabled border
+  },
+  primary: {
+    DEFAULT: "var(--hz-ui-primary)",
+    lux: "var(--hz-ui-primary)", // in case there are two configs
+    hover: "var(--hz-ui-primary-hover)",
+    fg: "var(--hz-ui-primary-fg)",
+  },
+  secondary: {
+    DEFAULT: "var(--hz-ui-secondary)",
+    lux: "var(--hz-ui-secondary)", // in case there are two configs
+    hover: "var(--hz-ui-secondary-hover)",
+    fg: "var(--hz-ui-secondary-fg)",
+  },
+  destructive: {
+    DEFAULT: "var(--hz-ui-destructive)",
+    fg: "var(--hz-ui-destructive-fg)",
+  },
+  nav: {
+    DEFAULT: "var(--hz-ui-nav)",
+    hover: "var(--hz-ui-nav-hover)",
+    current: "var(--hz-ui-nav-current)",
+  },
+})

package/tailwind/fonts.tailwind.ts

@@ -0,0 +1,31 @@
+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.7rem', { lineHeight: '0.9rem' }],    // 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)
+  base: ['1rem', { lineHeight: 1.4 }],     
+  lg: ['1.125rem', { lineHeight: '1.75rem' }],  
+  xl: ['1.25rem', { lineHeight: '1.75rem' }],   
+  '2xl': ['1.5rem', { lineHeight: '2rem' }],    
+  '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+  '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+  '5xl': ['3rem', { lineHeight: '1' }],
+  '6xl': ['3.75rem', { lineHeight: '1' }],
+}

package/tailwind/index.ts

@@ -0,0 +1,18 @@
+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 {
+  colors,
+  config,
+  fontFamily,
+  fontSize,
+  safelist,
+  screens,
+  spacing,
+  typographyPlugin
+}

package/tailwind/lux-tw-fonts.ts

@@ -0,0 +1,32 @@
+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: '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/safelist.tailwind.js

@@ -0,0 +1,26 @@
+  // https://tailwindcss.com/docs/content-configuration#dynamic-class-names
+  // https://tailwindcss.com/docs/content-configuration#safelisting-classes
+export default [
+
+  'font-sans',
+  { 
+    pattern: /grid-cols-[1-6]/,
+    variants: [ 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ]
+  },
+  { // SpaceBlock
+    pattern: /h-([0-9]|[1-3][0-9]|40)/,
+    variants: [ 'xs', 'sm', 'md', 'lg', 'xl', '2xl' ]
+  },
+  { 
+    pattern: /order-[0-6]/
+  },
+  { // EnhHeadingBlock
+    pattern: /mb-([1-9]|1[0-2])/
+  },
+  'md:text-left', // EnhHeadingBlock
+  'md:text-center',
+  'md:text-right',
+  'md:self-start',
+  'md:self-center',
+  'md:self-end',
+]

package/tailwind/screens.tailwind.js

@@ -0,0 +1,8 @@
+export default {
+  xs: '0px',   // <-- phone
+  sm: '480px', // phone --><-- sm tablets / narrow
+  md: '768px', // sm tablets / narrow -->
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1500px', // to match other sites
+}

package/tailwind/spacing.tailwind.js

@@ -0,0 +1,57 @@
+export default {
+  px: '1px',
+  0: '0px',
+  0.5: '0.125rem',
+  1: '0.25rem',
+  1.5: '0.375rem',
+  2: '0.5rem',
+  2.5: '0.625rem',
+  3: '0.75rem',
+  3.5: '0.875rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  7: '1.75rem',
+  8: '2rem',
+  9: '2.25rem',
+  10: '2.5rem',
+  11: '2.75rem',
+  12: '3rem',
+  13: '3.25rem',
+  14: '3.5rem',
+  15: '3.75rem',
+  16: '4rem',
+  17: '4.25rem',
+  18: '4.5rem',
+  19: '4.75rem',
+  20: '5rem',
+  21: '5.25rem',
+  22: '5.5rem',
+  23: '5.75rem',
+  24: '6rem',
+  25: '5.25rem',
+  26: '5.5rem',
+  27: '5.75rem',
+  28: '7rem',
+  29: '7.25rem',
+  30: '7.5rem',
+  31: '7.75rem',
+  32: '8rem',
+  33: '8.25rem',
+  34: '8.5rem',
+  35: '8.75rem',
+  36: '9rem',
+  37: '9.25rem',
+  38: '9.5rem',
+  39: '9.75rem',
+  40: '10rem',
+  44: '11rem',
+  48: '12rem',
+  52: '13rem',
+  56: '14rem',
+  60: '15rem',
+  64: '16rem',
+  72: '18rem',
+  80: '20rem',
+  96: '24rem',
+}