@luxfi/ui 5.5.5 → 5.5.6

package/style/lux-global.css

@@ -1,21 +1,43 @@
-/* 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";
+/* 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";
 
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+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 {
-  @apply uppercase;
+  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
@@ -24,11 +46,17 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
  */
 .hanzo-iam-card,
 .hanzo-iam-form {
-  @apply flex flex-col gap-3 w-full;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  width: 100%;
 }
 
 .hanzo-iam-form input {
-  @apply w-full rounded-sm px-3 py-2 text-base;
+  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);
@@ -44,7 +72,12 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
 }
 
 .hanzo-iam-btn {
-  @apply w-full rounded-sm px-3 py-2 text-base font-semibold cursor-pointer;
+  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);
 }
@@ -54,16 +87,18 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
 }
 
 .hanzo-iam-btn:disabled {
-  @apply opacity-50 cursor-default;
+  opacity: 0.5;
+  cursor: default;
 }
 
 .hanzo-iam-divider {
-  @apply text-sm uppercase;
+  font-size: var(--text-sm);
+  text-transform: uppercase;
   color: var(--hz-ui-fg-3);
 }
 
 .hanzo-iam-error {
-  @apply text-sm;
+  font-size: var(--text-sm);
   color: hsl(0 70% 60%);
 }
 
@@ -79,7 +114,6 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   margin-bottom: 0 !important;
 }
 
-
 .element-container:hover .icon-container-nor {
   display: none;
 }
@@ -95,6 +129,7 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
 .element-container:hover .text-container {
   background: transparent;
 }
-.overflow-scroll::-webkit-scrollbar{
-  display:none;
-}
+
+.overflow-scroll::-webkit-scrollbar {
+  display: none;
+}

package/tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "../tsconfig.modules.base.json",
+  // An `.mdx` import is a React component; the bundler learns that from
+
+  // @next/mdx and the type checker does not. Shared with every app —
+
+  // referenced, not copied.
+
+  "files": ["../../mdx.d.ts"],
+
   "include": [
     "**/*.ts",
     "**/*.tsx", "components/commerce/_to_deprecate_checkout-widget/index.tsx_",

package/next/head-metadata/from-next/metadata-types.ts

@@ -1,158 +0,0 @@
-/**
- *
- * Metadata types
- *
- */
-
-export interface DeprecatedMetadataFields {
-  /**
-   * Deprecated options that have a preferred method
-   * @deprecated Use appWebApp to configure apple-mobile-web-app-capable which provides
-   * @see https://www.appsloveworld.com/coding/iphone/11/difference-between-apple-mobile-web-app-capable-and-apple-touch-fullscreen-ipho
-   */
-  'apple-touch-fullscreen'?: never
-
-  /**
-   * Obsolete since iOS 7.
-   * @see https://web.dev/apple-touch-icon/
-   * @deprecated use icons.apple or instead
-   */
-  'apple-touch-icon-precomposed'?: never
-}
-
-export type TemplateString =
-  | DefaultTemplateString
-  | AbsoluteTemplateString
-  | AbsoluteString
-export type DefaultTemplateString = {
-  default: string
-  template: string
-}
-export type AbsoluteTemplateString = {
-  absolute: string
-  template: string | null
-}
-export type AbsoluteString = {
-  absolute: string
-}
-
-export type Author = {
-  // renders as <link rel="author"...
-  url?: string | URL
-  // renders as <meta name="author"...
-  name?: string
-}
-
-// does not include "unsafe-URL". to use this users should
-// use '"unsafe-URL" as ReferrerEnum'
-export type ReferrerEnum =
-  | 'no-referrer'
-  | 'origin'
-  | 'no-referrer-when-downgrade'
-  | 'origin-when-cross-origin'
-  | 'same-origin'
-  | 'strict-origin'
-  | 'strict-origin-when-cross-origin'
-
-export type ColorSchemeEnum =
-  | 'normal'
-  | 'light'
-  | 'dark'
-  | 'light dark'
-  | 'dark light'
-  | 'only light'
-
-type RobotsInfo = {
-  // all and none will be inferred from index/follow boolean options
-  index?: boolean
-  follow?: boolean
-
-  /** @deprecated set index to false instead */
-  noindex?: never
-  /** @deprecated set follow to false instead */
-  nofollow?: never
-
-  noarchive?: boolean
-  nosnippet?: boolean
-  noimageindex?: boolean
-  nocache?: boolean
-  notranslate?: boolean
-  indexifembedded?: boolean
-  nositelinkssearchbox?: boolean
-  unavailable_after?: string
-  'max-video-preview'?: number | string
-  'max-image-preview'?: 'none' | 'standard' | 'large'
-  'max-snippet'?: number
-}
-export type Robots = RobotsInfo & {
-  // if you want to specify an alternate robots just for google
-  googleBot?: string | RobotsInfo
-}
-
-export type ResolvedRobots = {
-  basic: string | null
-  googleBot: string | null
-}
-
-export type IconURL = string | URL
-export type Icon = IconURL | IconDescriptor
-export type IconDescriptor = {
-  url: string | URL
-  type?: string
-  sizes?: string
-  color?: string
-  /** defaults to rel="icon" unless superseded by Icons map */
-  rel?: string
-  media?: string
-  /**
-   * @see https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority
-   */
-  fetchPriority?: 'high' | 'low' | 'auto'
-}
-
-export type Icons = {
-  /** rel="icon" */
-  icon?: Icon | Icon[]
-  /** rel="shortcut icon" */
-  shortcut?: Icon | Icon[]
-  /**
-   * @see https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
-   * rel="apple-touch-icon"
-   */
-  apple?: Icon | Icon[]
-  /** rel inferred from descriptor, defaults to "icon" */
-  other?: IconDescriptor | IconDescriptor[]
-}
-
-export type Verification = {
-  google?: null | string | number | (string | number)[]
-  yahoo?: null | string | number | (string | number)[]
-  yandex?: null | string | number | (string | number)[]
-  me?: null | string | number | (string | number)[]
-  // if you ad-hoc additional verification
-  other?: {
-    [name: string]: string | number | (string | number)[]
-  }
-}
-
-export type ResolvedVerification = {
-  google?: null | (string | number)[]
-  yahoo?: null | (string | number)[]
-  yandex?: null | (string | number)[]
-  me?: null | (string | number)[]
-  other?: {
-    [name: string]: (string | number)[]
-  }
-}
-
-export type ResolvedIcons = {
-  icon: IconDescriptor[]
-  apple: IconDescriptor[]
-  shortcut?: IconDescriptor[]
-  other?: IconDescriptor[]
-}
-
-export type ThemeColorDescriptor = {
-  color: string
-  media?: string
-}

package/next/head-metadata/from-next/opengraph-types.ts

@@ -1,267 +0,0 @@
-import type { AbsoluteTemplateString, TemplateString } from './metadata-types'
-
-export type OpenGraphType =
-  | 'article'
-  | 'book'
-  | 'music.song'
-  | 'music.album'
-  | 'music.playlist'
-  | 'music.radio_station'
-  | 'profile'
-  | 'website'
-  | 'video.tv_show'
-  | 'video.other'
-  | 'video.movie'
-  | 'video.episode'
-
-export type OpenGraph =
-  | OpenGraphWebsite
-  | OpenGraphArticle
-  | OpenGraphBook
-  | OpenGraphProfile
-  | OpenGraphMusicSong
-  | OpenGraphMusicAlbum
-  | OpenGraphMusicPlaylist
-  | OpenGraphRadioStation
-  | OpenGraphVideoMovie
-  | OpenGraphVideoEpisode
-  | OpenGraphVideoTVShow
-  | OpenGraphVideoOther
-  | OpenGraphMetadata
-
-// update this type to reflect actual locales
-type Locale = string
-
-type OpenGraphMetadata = {
-  determiner?: 'a' | 'an' | 'the' | 'auto' | ''
-  title?: string | TemplateString
-  description?: string
-  emails?: string | Array<string>
-  phoneNumbers?: string | Array<string>
-  faxNumbers?: string | Array<string>
-  siteName?: string
-  locale?: Locale
-  alternateLocale?: Locale | Array<Locale>
-  images?: OGImage | Array<OGImage>
-  audio?: OGAudio | Array<OGAudio>
-  videos?: OGVideo | Array<OGVideo>
-  url?: string | URL
-  countryName?: string
-  ttl?: number
-}
-export type OpenGraphWebsite = OpenGraphMetadata & {
-  type: 'website'
-}
-type OpenGraphArticle = OpenGraphMetadata & {
-  type: 'article'
-  publishedTime?: string // datetime
-  modifiedTime?: string // datetime
-  expirationTime?: string // datetime
-  authors?: null | string | URL | Array<string | URL>
-  section?: null | string
-  tags?: null | string | Array<string>
-}
-type OpenGraphBook = OpenGraphMetadata & {
-  type: 'book'
-  isbn?: null | string
-  releaseDate?: null | string // datetime
-  authors?: null | string | URL | Array<string | URL>
-  tags?: null | string | Array<string>
-}
-type OpenGraphProfile = OpenGraphMetadata & {
-  type: 'profile'
-  firstName?: null | string
-  lastName?: null | string
-  username?: null | string
-  gender?: null | string
-}
-type OpenGraphMusicSong = OpenGraphMetadata & {
-  type: 'music.song'
-  duration?: null | number
-  albums?: null | string | URL | OGAlbum | Array<string | URL | OGAlbum>
-  musicians?: null | string | URL | Array<string | URL>
-}
-type OpenGraphMusicAlbum = OpenGraphMetadata & {
-  type: 'music.album'
-  songs?: null | string | URL | OGSong | Array<string | URL | OGSong>
-  musicians?: null | string | URL | Array<string | URL>
-  releaseDate?: null | string // datetime
-}
-type OpenGraphMusicPlaylist = OpenGraphMetadata & {
-  type: 'music.playlist'
-  songs?: null | string | URL | OGSong | Array<string | URL | OGSong>
-  creators?: null | string | URL | Array<string | URL>
-}
-type OpenGraphRadioStation = OpenGraphMetadata & {
-  type: 'music.radio_station'
-  creators?: null | string | URL | Array<string | URL>
-}
-type OpenGraphVideoMovie = OpenGraphMetadata & {
-  type: 'video.movie'
-  actors?: null | string | URL | OGActor | Array<string | URL | OGActor>
-  directors?: null | string | URL | Array<string | URL>
-  writers?: null | string | URL | Array<string | URL>
-  duration?: null | number
-  releaseDate?: null | string // datetime
-  tags?: null | string | Array<string>
-}
-type OpenGraphVideoEpisode = OpenGraphMetadata & {
-  type: 'video.episode'
-  actors?: null | string | URL | OGActor | Array<string | URL | OGActor>
-  directors?: null | string | URL | Array<string | URL>
-  writers?: null | string | URL | Array<string | URL>
-  duration?: null | number
-  releaseDate?: null | string // datetime
-  tags?: null | string | Array<string>
-  series?: null | string | URL
-}
-type OpenGraphVideoTVShow = OpenGraphMetadata & {
-  type: 'video.tv_show'
-}
-type OpenGraphVideoOther = OpenGraphMetadata & {
-  type: 'video.other'
-}
-
-export type OGImage = string | OGImageDescriptor | URL
-type OGImageDescriptor = {
-  url: string | URL
-  secureUrl?: string | URL
-  alt?: string
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-type OGAudio = string | OGAudioDescriptor | URL
-type OGAudioDescriptor = {
-  url: string | URL
-  secureUrl?: string | URL
-  type?: string
-}
-type OGVideo = string | OGVideoDescriptor | URL
-type OGVideoDescriptor = {
-  url: string | URL
-  secureUrl?: string | URL
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-
-export type ResolvedOpenGraph =
-  | ResolvedOpenGraphWebsite
-  | ResolvedOpenGraphArticle
-  | ResolvedOpenGraphBook
-  | ResolvedOpenGraphProfile
-  | ResolvedOpenGraphMusicSong
-  | ResolvedOpenGraphMusicAlbum
-  | ResolvedOpenGraphMusicPlaylist
-  | ResolvedOpenGraphRadioStation
-  | ResolvedOpenGraphVideoMovie
-  | ResolvedOpenGraphVideoEpisode
-  | ResolvedOpenGraphVideoTVShow
-  | ResolvedOpenGraphVideoOther
-  | ResolvedOpenGraphMetadata
-
-type ResolvedOpenGraphMetadata = {
-  determiner?: 'a' | 'an' | 'the' | 'auto' | ''
-  title: AbsoluteTemplateString
-  description?: string
-  emails?: Array<string>
-  phoneNumbers?: Array<string>
-  faxNumbers?: Array<string>
-  siteName?: string
-  locale?: Locale
-  alternateLocale?: Array<Locale>
-  images?: Array<OGImage>
-  audio?: Array<OGAudio>
-  videos?: Array<OGVideo>
-  url: null | URL | string
-  countryName?: string
-  ttl?: number
-}
-type ResolvedOpenGraphWebsite = ResolvedOpenGraphMetadata & {
-  type: 'website'
-}
-type ResolvedOpenGraphArticle = ResolvedOpenGraphMetadata & {
-  type: 'article'
-  publishedTime?: string // datetime
-  modifiedTime?: string // datetime
-  expirationTime?: string // datetime
-  authors?: Array<string>
-  section?: string
-  tags?: Array<string>
-}
-type ResolvedOpenGraphBook = ResolvedOpenGraphMetadata & {
-  type: 'book'
-  isbn?: string
-  releaseDate?: string // datetime
-  authors?: Array<string>
-  tags?: Array<string>
-}
-type ResolvedOpenGraphProfile = ResolvedOpenGraphMetadata & {
-  type: 'profile'
-  firstName?: string
-  lastName?: string
-  username?: string
-  gender?: string
-}
-type ResolvedOpenGraphMusicSong = ResolvedOpenGraphMetadata & {
-  type: 'music.song'
-  duration?: number
-  albums?: Array<OGAlbum>
-  musicians?: Array<string | URL>
-}
-type ResolvedOpenGraphMusicAlbum = ResolvedOpenGraphMetadata & {
-  type: 'music.album'
-  songs?: Array<string | URL | OGSong>
-  musicians?: Array<string | URL>
-  releaseDate?: string // datetime
-}
-type ResolvedOpenGraphMusicPlaylist = ResolvedOpenGraphMetadata & {
-  type: 'music.playlist'
-  songs?: Array<string | URL | OGSong>
-  creators?: Array<string | URL>
-}
-type ResolvedOpenGraphRadioStation = ResolvedOpenGraphMetadata & {
-  type: 'music.radio_station'
-  creators?: Array<string | URL>
-}
-type ResolvedOpenGraphVideoMovie = ResolvedOpenGraphMetadata & {
-  type: 'video.movie'
-  actors?: Array<string | URL | OGActor>
-  directors?: Array<string | URL>
-  writers?: Array<string | URL>
-  duration?: number
-  releaseDate?: string // datetime
-  tags?: Array<string>
-}
-type ResolvedOpenGraphVideoEpisode = ResolvedOpenGraphMetadata & {
-  type: 'video.episode'
-  actors?: Array<string | URL | OGActor>
-  directors?: Array<string | URL>
-  writers?: Array<string | URL>
-  duration?: number
-  releaseDate?: string // datetime
-  tags?: Array<string>
-  series?: string | URL
-}
-type ResolvedOpenGraphVideoTVShow = ResolvedOpenGraphMetadata & {
-  type: 'video.tv_show'
-}
-type ResolvedOpenGraphVideoOther = ResolvedOpenGraphMetadata & {
-  type: 'video.other'
-}
-
-type OGSong = {
-  url: string | URL
-  disc?: number
-  track?: number
-}
-type OGAlbum = {
-  url: string | URL
-  disc?: number
-  track?: number
-}
-type OGActor = {
-  url: string | URL
-  role?: string
-}

package/next/head-metadata/from-next/twitter-types.ts

@@ -1,92 +0,0 @@
-// Reference: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
-
-import type { AbsoluteTemplateString, TemplateString } from './metadata-types'
-
-export type Twitter =
-  | TwitterSummary
-  | TwitterSummaryLargeImage
-  | TwitterPlayer
-  | TwitterApp
-  | TwitterMetadata
-
-type TwitterMetadata = {
-  // defaults to card="summary"
-  site?: string // username for account associated to the site itself
-  siteId?: string // id for account associated to the site itself
-  creator?: string // username for the account associated to the creator of the content on the site
-  creatorId?: string // id for the account associated to the creator of the content on the site
-  description?: string
-  title?: string | TemplateString
-  images?: TwitterImage | Array<TwitterImage>
-}
-type TwitterSummary = TwitterMetadata & {
-  card: 'summary'
-}
-type TwitterSummaryLargeImage = TwitterMetadata & {
-  card: 'summary_large_image'
-}
-type TwitterPlayer = TwitterMetadata & {
-  card: 'player'
-  players: TwitterPlayerDescriptor | Array<TwitterPlayerDescriptor>
-}
-type TwitterApp = TwitterMetadata & {
-  card: 'app'
-  app: TwitterAppDescriptor
-}
-export type TwitterAppDescriptor = {
-  id: {
-    iphone?: string | number
-    ipad?: string | number
-    googleplay?: string
-  }
-  url?: {
-    iphone?: string | URL
-    ipad?: string | URL
-    googleplay?: string | URL
-  }
-  name?: string
-}
-
-export type TwitterImage = string | TwitterImageDescriptor | URL
-type TwitterImageDescriptor = {
-  url: string | URL
-  alt?: string
-  secureUrl?: string | URL
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-type TwitterPlayerDescriptor = {
-  playerUrl: string | URL
-  streamUrl: string | URL
-  width: number
-  height: number
-}
-
-type ResolvedTwitterImage = {
-  url: string | URL
-  alt?: string
-  secureUrl?: string | URL
-  type?: string
-  width?: string | number
-  height?: string | number
-}
-type ResolvedTwitterSummary = {
-  site: string | null
-  siteId: string | null
-  creator: string | null
-  creatorId: string | null
-  description: string | null
-  title: AbsoluteTemplateString
-  images?: Array<ResolvedTwitterImage>
-}
-type ResolvedTwitterPlayer = ResolvedTwitterSummary & {
-  players: Array<TwitterPlayerDescriptor>
-}
-type ResolvedTwitterApp = ResolvedTwitterSummary & { app: TwitterAppDescriptor }
-
-export type ResolvedTwitterMetadata =
-  | ({ card: 'summary' } & ResolvedTwitterSummary)
-  | ({ card: 'summary_large_image' } & ResolvedTwitterSummary)
-  | ({ card: 'player' } & ResolvedTwitterPlayer)
-  | ({ card: 'app' } & ResolvedTwitterApp)

package/tailwind/fontFamily.tailwind.lux.ts

@@ -1,18 +0,0 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind'
-
-import luxTwFonts  from './lux-tw-fonts'
-
-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[] 
-  }
-}

package/tailwind/index.ts

@@ -1,2 +0,0 @@
- 
-export {default as preset} from './tailwind.config.lux-preset'