@_mustachio/openauth 0.6.0

package/src/ui/theme.ts

@@ -0,0 +1,319 @@
+/**
+ * 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

@@ -0,0 +1,252 @@
+@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

@@ -0,0 +1,58 @@
+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
+  }
+}