@_mustachio/openauth 0.9.2 → 0.10.0

package/src/ui/theme.ts

@@ -1,319 +0,0 @@
-/**
- * Use one of the built-in themes.
- *
- * @example
- *
- * ```ts
- * import { THEME_SST } from "@openauthjs/openauth/ui/theme"
- *
- * export default issuer({
- *   theme: THEME_SST,
- *   // ...
- * })
- * ```
- *
- * Or define your own.
- *
- * ```ts
- * import type { Theme } from "@openauthjs/openauth/ui/theme"
- *
- * const MY_THEME: Theme = {
- *   title: "Acne",
- *   radius: "none",
- *   favicon: "https://www.example.com/favicon.svg",
- *   // ...
- * }
- *
- * export default issuer({
- *   theme: MY_THEME,
- *   // ...
- * })
- * ```
- *
- * @packageDocumentation
- */
-
-/**
- * A type to define values for light and dark mode.
- *
- * @example
- * ```ts
- * {
- *   light: "#FFF",
- *   dark: "#000"
- * }
- * ```
- */
-export interface ColorScheme {
-  /**
-   * The value for dark mode.
-   */
-  dark: string
-  /**
-   * The value for light mode.
-   */
-  light: string
-}
-
-/**
- * A type to define your custom theme.
- */
-export interface Theme {
-  /**
-   * The name of your app. Also used as the title of the page.
-   *
-   * @example
-   * ```ts
-   * {
-   *   title: "Acne"
-   * }
-   * ```
-   */
-  title?: string
-  /**
-   * A URL to the favicon of your app.
-   *
-   * @example
-   * ```ts
-   * {
-   *   favicon: "https://www.example.com/favicon.svg"
-   * }
-   * ```
-   */
-  favicon?: string
-  /**
-   * The border radius of the UI elements.
-   *
-   * @example
-   * ```ts
-   * {
-   *   radius: "none"
-   * }
-   * ```
-   */
-  radius?: "none" | "sm" | "md" | "lg" | "full"
-  /**
-   * The primary color of the theme.
-   *
-   * Takes a color or both light and dark colors.
-   *
-   * @example
-   * ```ts
-   * {
-   *   primary: "#FF5E00"
-   * }
-   * ```
-   */
-  primary: string | ColorScheme
-  /**
-   * The background color of the theme.
-   *
-   * Takes a color or both light and dark colors.
-   *
-   * @example
-   * ```ts
-   * {
-   *   background: "#FFF"
-   * }
-   * ```
-   */
-  background?: string | ColorScheme
-  /**
-   * A URL to the logo of your app.
-   *
-   * Takes a single image or both light and dark mode versions.
-   *
-   * @example
-   * ```ts
-   * {
-   *   logo: "https://www.example.com/logo.svg"
-   * }
-   * ```
-   */
-  logo?: string | ColorScheme
-  /**
-   * The font family and scale of the theme.
-   */
-  font?: {
-    /**
-     * The font family of the theme.
-     *
-     * @example
-     * ```ts
-     * {
-     *   font: {
-     *     family: "Geist Mono, monospace"
-     *   }
-     * }
-     * ```
-     */
-    family?: string
-    /**
-     * The font scale of the theme. Can be used to increase or decrease the font sizes across
-     * the UI.
-     *
-     * @default "1"
-     * @example
-     * ```ts
-     * {
-     *   font: {
-     *     scale: "1.25"
-     *   }
-     * }
-     * ```
-     */
-    scale?: string
-  }
-  /**
-   * Custom CSS that's added to the page in a `<style>` tag.
-   *
-   * This can be used to import custom fonts.
-   *
-   * @example
-   * ```ts
-   * {
-   *   css: `@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');`
-   * }
-   * ```
-   */
-  css?: string
-}
-
-/**
- * Built-in default OpenAuth theme.
- */
-export const THEME_OPENAUTH: Theme = {
-  title: "OpenAuth",
-  radius: "none",
-  background: {
-    dark: "black",
-    light: "white",
-  },
-  primary: {
-    dark: "white",
-    light: "black",
-  },
-  font: {
-    family: "IBM Plex Sans, sans-serif",
-  },
-  css: `
-    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
-  `,
-}
-
-/**
- * Built-in theme based on [Terminal](https://terminal.shop).
- */
-export const THEME_TERMINAL: Theme = {
-  title: "terminal",
-  radius: "none",
-  favicon: "https://www.terminal.shop/favicon.svg",
-  logo: {
-    dark: "https://www.terminal.shop/images/logo-white.svg",
-    light: "https://www.terminal.shop/images/logo-black.svg",
-  },
-  primary: "#ff5e00",
-  background: {
-    dark: "rgb(0, 0, 0)",
-    light: "rgb(255, 255, 255)",
-  },
-  font: {
-    family: "Geist Mono, monospace",
-  },
-  css: `
-    @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
-  `,
-}
-
-/**
- * Built-in theme based on [SST](https://sst.dev).
- */
-export const THEME_SST: Theme = {
-  title: "SST",
-  favicon: "https://sst.dev/favicon.svg",
-  logo: {
-    dark: "https://sst.dev/favicon.svg",
-    light: "https://sst.dev/favicon.svg",
-  },
-  background: {
-    dark: "#1a1a2d",
-    light: "rgb(255, 255, 255)",
-  },
-  primary: "#f3663f",
-  font: {
-    family: "Rubik, sans-serif",
-  },
-  css: `
-    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');
-  `,
-}
-
-/**
- * Built-in theme based on [Supabase](https://supabase.com).
- */
-export const THEME_SUPABASE: Theme = {
-  title: "Supabase",
-  logo: {
-    dark: "https://supabase.com/dashboard/_next/image?url=%2Fdashboard%2Fimg%2Fsupabase-dark.svg&w=128&q=75",
-    light:
-      "https://supabase.com/dashboard/_next/image?url=%2Fdashboard%2Fimg%2Fsupabase-light.svg&w=128&q=75",
-  },
-  background: {
-    dark: "#171717",
-    light: "#f8f8f8",
-  },
-  primary: {
-    dark: "#006239",
-    light: "#72e3ad",
-  },
-  font: {
-    family: "Varela Round, sans-serif",
-  },
-  css: `
-    @import url('https://fonts.googleapis.com/css2?family=Varela+Round:wght@100;200;300;400;500;600;700;800;900&display=swap');
-  `,
-}
-
-/**
- * Built-in theme based on [Vercel](https://vercel.com).
- */
-export const THEME_VERCEL: Theme = {
-  title: "Vercel",
-  logo: {
-    dark: "https://vercel.com/mktng/_next/static/media/vercel-logotype-dark.e8c0a742.svg",
-    light:
-      "https://vercel.com/mktng/_next/static/media/vercel-logotype-light.700a8d26.svg",
-  },
-  background: {
-    dark: "black",
-    light: "white",
-  },
-  primary: {
-    dark: "white",
-    light: "black",
-  },
-  font: {
-    family: "Geist, sans-serif",
-  },
-  css: `
-    @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
-  `,
-}
-
-// i really don't wanna use async local storage for this so get over it
-
-/**
- * @internal
- */
-export function setTheme(value: Theme) {
-  // @ts-ignore
-  globalThis.OPENAUTH_THEME = value
-}
-
-/**
- * @internal
- */
-export function getTheme() {
-  // @ts-ignore
-  return globalThis.OPENAUTH_THEME || THEME_OPENAUTH
-}

package/src/ui/ui.css

@@ -1,252 +0,0 @@
-@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight.css");
-
-:root {
-  --color-background-dark: #0e0e11;
-  --color-background-light: #ffffff;
-  --color-primary-dark: #6772e5;
-  --color-primary-light: #6772e5;
-
-  --color-background-success-dark: oklch(0.3 0.04 172);
-  --color-background-success-light: oklch(from var(--color-background-success-dark) 0.83 c h);
-  --color-success-dark: oklch(from var(--color-background-success-dark) 0.92 c h);
-  --color-success-light: oklch(from var(--color-background-success-dark) 0.25 c h);
-
-  --color-background-error-dark: oklch(0.32 0.07 15);
-  --color-background-error-light: oklch(from var(--color-background-error-dark) 0.92 c h);
-  --color-error-dark: oklch(from var(--color-background-error-dark) 0.92 c h);
-  --color-error-light: oklch(from var(--color-background-error-dark) 0.25 c h);
-
-  --border-radius: 0;
-
-  --color-background: var(--color-background-dark);
-  --color-primary: var(--color-primary-dark);
-
-  --color-background-success: var(--color-background-success-dark);
-  --color-success: var(--color-success-dark);
-  --color-background-error: var(--color-background-error-dark);
-  --color-error: var(--color-error-dark);
-
-  @media (prefers-color-scheme: light) {
-    --color-background: var(--color-background-light);
-    --color-primary: var(--color-primary-light);
-
-    --color-background-success: var(--color-background-success-light);
-    --color-success: var(--color-success-light);
-    --color-background-error: var(--color-background-error-light);
-    --color-error: var(--color-error-light);
-  }
-
-  --color-high: oklch(
-    from var(--color-background) clamp(0, calc((l - 0.714) * -1000), 1) 0 0
-  );
-  --color-low: oklch(from var(--color-background) clamp(0, calc((l - 0.714) * 1000), 1) 0 0);
-  --lightness-high: color-mix(
-    in oklch,
-    var(--color-high) 0%,
-    oklch(var(--color-high) 0 0)
-  );
-  --lightness-low: color-mix(
-    in oklch,
-    var(--color-low) 0%,
-    oklch(var(--color-low) 0 0)
-  );
-  --font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-scale: 1;
-
-  --font-size-xs: calc(0.75rem * var(--font-scale));
-  --font-size-sm: calc(0.875rem * var(--font-scale));
-  --font-size-md: calc(1rem * var(--font-scale));
-  --font-size-lg: calc(1.125rem * var(--font-scale));
-  --font-size-xl: calc(1.25rem * var(--font-scale));
-  --font-size-2xl: calc(1.5rem * var(--font-scale));
-}
-
-[data-component="root"] {
-  font-family: var(--font-family);
-  background-color: var(--color-background);
-  padding: 1rem;
-  color: white;
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  user-select: none;
-  color: var(--color-high);
-}
-
-[data-component="center"] {
-  width: 380px;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-
-  &[data-size="small"] {
-    width: 300px;
-  }
-}
-
-[data-component="link"] {
-  text-decoration: underline;
-  text-underline-offset: 0.125rem;
-  font-weight: 600;
-}
-
-[data-component="label"] {
-  display: flex;
-  gap: 0.75rem;
-  flex-direction: column;
-  font-size: var(--font-size-xs);
-}
-
-[data-component="logo"] {
-  margin: 0 auto;
-  height: 2.5rem;
-  width: auto;
-  display: none;
-
-  @media (prefers-color-scheme: light) {
-    &[data-mode="light"] {
-      display: block;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &[data-mode="dark"] {
-      display: block;
-    }
-  }
-}
-
-[data-component="logo-default"] {
-  margin: 0 auto;
-  height: 2.5rem;
-  width: auto;
-
-  @media (prefers-color-scheme: light) {
-    color: var(--color-high);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-high);
-  }
-}
-
-[data-component="input"] {
-  width: 100%;
-  height: 2.5rem;
-  padding: 0 1rem;
-  border: 1px solid transparent;
-  --background: oklch(
-    from var(--color-background) calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h
-
-  );
-  background: var(--background);
-  border-color: oklch(
-    from var(--color-background)
-      calc(clamp(0.22, l + (-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06), 0.88)) c h
-  );
-  border-radius: calc(var(--border-radius) * 0.25rem);
-  font-size: var(--font-size-sm);
-  outline: none;
-
-  &:focus {
-    border-color: oklch(
-      from var(--color-background)
-        calc(clamp(0.3, l + (-0.2 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.1), 0.7)) c h
-    );
-  }
-
-  &:user-invalid:not(:focus) {
-    border-color: oklch(0.4 0.09 7.91);
-  }
-}
-
-[data-component="button"] {
-  height: 2.5rem;
-  cursor: pointer;
-  border: 0;
-  font-weight: 500;
-  font-size: var(--font-size-sm);
-  border-radius: calc(var(--border-radius) * 0.25rem);
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-primary);
-  color: oklch(from var(--color-primary) clamp(0, calc((l - 0.714) * -1000), 1) 0 0);
-
-  &[data-color="ghost"] {
-    background: transparent;
-    color: var(--color-high);
-    border: 1px solid
-      oklch(
-        from var(--color-background)
-          calc(clamp(0.22, l + (-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06), 0.88)) c h
-      );
-  }
-
-  [data-slot="icon"] {
-    width: 16px;
-    height: 16px;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-[data-component="form"] {
-  max-width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin: 0;
-}
-
-[data-component="form-alert"] {
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  padding: 0 1rem;
-  border-radius: calc(var(--border-radius) * 0.25rem);
-  background: var(--color-background-error);
-  color: var(--color-error);
-  text-align: left;
-  font-size: 0.75rem;
-  gap: 0.5rem;
-
-  &[data-color="success"] {
-    background: var(--color-background-success);
-    color: var(--color-success);
-
-    [data-slot="icon-success"] { display: block; }
-    [data-slot="icon-danger"] { display: none; }
-  }
-
-  &:has([data-slot="message"]:empty) {
-    display: none;
-  }
-
-  [data-slot="icon-success"],
-  [data-slot="icon-danger"] {
-    width: 1rem;
-    height: 1rem;
-  }
-  [data-slot="icon-success"] { display: none; }
-}
-
-[data-component="form-footer"] {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.75rem;
-  align-items: center;
-  justify-content: center;
-
-  &:has(> :nth-child(2)) {
-    justify-content: space-between;
-  }
-}

package/src/util.ts

@@ -1,58 +0,0 @@
-import type { Context } from "hono"
-
-export type Prettify<T> = {
-  [K in keyof T]: T[K]
-}
-
-export function getRelativeUrl(ctx: Context, path: string) {
-  const result = new URL(path, ctx.req.url)
-  result.host = ctx.req.header("x-forwarded-host") || result.host
-  result.protocol = ctx.req.header("x-forwarded-proto") || result.protocol
-  result.port = ctx.req.header("x-forwarded-port") || result.port
-  return result.toString()
-}
-
-const twoPartTlds = [
-  "co.uk",
-  "co.jp",
-  "co.kr",
-  "co.nz",
-  "co.za",
-  "co.in",
-  "com.au",
-  "com.br",
-  "com.cn",
-  "com.mx",
-  "com.tw",
-  "net.au",
-  "org.uk",
-  "ne.jp",
-  "ac.uk",
-  "gov.uk",
-  "edu.au",
-  "gov.au",
-]
-
-export function isDomainMatch(a: string, b: string): boolean {
-  if (a === b) return true
-  const partsA = a.split(".")
-  const partsB = b.split(".")
-  const hasTwoPartTld = twoPartTlds.some(
-    (tld) => a.endsWith("." + tld) || b.endsWith("." + tld),
-  )
-  const numParts = hasTwoPartTld ? -3 : -2
-  const min = Math.min(partsA.length, partsB.length, numParts)
-  const tailA = partsA.slice(min).join(".")
-  const tailB = partsB.slice(min).join(".")
-  return tailA === tailB
-}
-
-export function lazy<T>(fn: () => T): () => T {
-  let value: T | undefined
-  return () => {
-    if (value === undefined) {
-      value = fn()
-    }
-    return value
-  }
-}