import { Hct, argbFromHex, hexFromArgb } from "@material/material-color-utilities"; import type { MobileThemeAppearance, MobileThemeVariables } from "./mobileTheme";import type { MaterialYouPalette } from "./materialYouPalette"; function withAlpha(color: string, alpha: number): string {  const match = /^#([\da-f]{6})(?:[\da-f]{2})?$/iu.exec(color);  if (!match?.[1]) return color;  const alphaByte = Math.round(Math.min(1, Math.max(0, alpha)) * 255)    .toString(16)    .padStart(2, "0")    .toUpperCase();  return `#${match[1]}${alphaByte}`;} function materialTone(color: string, tone: number): string {  const match = /^#([\da-f]{6})(?:[\da-f]{2})?$/iu.exec(color);  if (!match?.[1]) return color;   const source = Hct.fromInt(argbFromHex(match[1]));  return `${hexFromArgb(Hct.from(source.hue, source.chroma, tone).toInt()).toUpperCase()}FF`;} export function materialYouPaletteToMobileThemeVariables(  palette: MaterialYouPalette,  appearance: MobileThemeAppearance,  base: MobileThemeVariables,): MobileThemeVariables {  const dark = appearance === "dark";  const userBubble = dark ? materialTone(palette.inversePrimary, 30) : palette.primary;  const userBubbleForeground = dark ? materialTone(palette.inversePrimary, 90) : palette.onPrimary;   return {    ...base,    "--color-screen": palette.surface,    "--color-sheet": withAlpha(palette.surfaceContainerLow, 0.98),    "--color-sheet-solid": palette.surfaceContainerLow,    "--color-card": palette.surfaceContainer,    "--color-card-alt": palette.surfaceContainerHigh,    "--color-card-translucent": withAlpha(palette.surfaceContainer, 0.8),    "--color-thread-canvas": palette.surfaceContainerLow,    "--color-thread-selected": palette.surfaceContainer,    "--color-thread-selected-foreground": palette.onSurface,    "--color-thread-selected-foreground-muted": palette.onSurfaceVariant,    "--color-composer-panel": withAlpha(palette.surfaceContainerLow, dark ? 0.92 : 0.88),    "--color-composer-surface": withAlpha(palette.surfaceContainerHigh, dark ? 0.9 : 0.94),    "--color-composer-border": withAlpha(palette.outlineVariant, dark ? 0.34 : 0.46),    "--color-foreground": palette.onSurface,    "--color-foreground-secondary": palette.onSurfaceVariant,    "--color-foreground-muted": palette.onSurfaceVariant,    "--color-foreground-tertiary": withAlpha(palette.onSurfaceVariant, 0.58),    "--color-border": withAlpha(palette.outlineVariant, dark ? 0.5 : 0.65),    "--color-border-subtle": withAlpha(palette.outlineVariant, dark ? 0.34 : 0.46),    "--color-separator": withAlpha(palette.outlineVariant, dark ? 0.24 : 0.34),    "--color-subtle": withAlpha(palette.onSurface, 0.05),    "--color-subtle-strong": withAlpha(palette.onSurface, 0.1),    "--color-inline-skill-background": withAlpha(palette.tertiaryContainer, 0.52),    "--color-inline-skill-border": withAlpha(palette.tertiary, 0.38),    "--color-inline-skill-foreground": palette.onTertiaryContainer,    "--color-primary": palette.primary,    "--color-primary-foreground": palette.onPrimary,    "--color-primary-shadow": withAlpha(palette.scrim, dark ? 0.22 : 0.18),    "--color-secondary": palette.secondaryContainer,    "--color-secondary-foreground": palette.onSecondaryContainer,    "--color-secondary-border": withAlpha(palette.outlineVariant, dark ? 0.42 : 0.56),    "--color-switch-active-track": palette.primary,    "--color-switch-active-thumb": palette.onPrimary,    "--color-switch-inactive-track": palette.surfaceContainerHighest,    "--color-switch-inactive-thumb": palette.outline,    "--color-danger": palette.errorContainer,    "--color-danger-border": withAlpha(palette.onErrorContainer, dark ? 0.42 : 0.5),    "--color-danger-foreground": palette.onErrorContainer,    "--color-input": palette.surfaceContainerLowest,    "--color-input-border": withAlpha(palette.outline, dark ? 0.42 : 0.5),    "--color-sidebar-search": palette.surfaceContainerLowest,    "--color-placeholder": withAlpha(palette.onSurface, 0.62),    "--color-icon": palette.onSurface,    "--color-icon-muted": palette.onSurfaceVariant,    "--color-icon-subtle": withAlpha(palette.onSurfaceVariant, 0.68),    "--color-header": palette.surfaceContainerHigh,    "--color-header-border": withAlpha(palette.outlineVariant, dark ? 0.36 : 0.48),    "--color-glass-surface": withAlpha(palette.surfaceContainerHigh, dark ? 0.78 : 0.72),    "--color-glass-tint": withAlpha(palette.primaryContainer, dark ? 0.24 : 0.18),    "--color-status-bar": palette.surfaceContainerLow,    "--color-md-body": materialTone(palette.onSurfaceVariant, dark ? 90 : 10),    "--color-md-strong": materialTone(palette.onSurfaceVariant, dark ? 90 : 10),    "--color-md-link": palette.primary,    "--color-md-blockquote-border": withAlpha(palette.primary, dark ? 0.34 : 0.26),    "--color-md-blockquote-bg": withAlpha(palette.primaryContainer, dark ? 0.14 : 0.2),    "--color-md-code-bg": withAlpha(palette.onSurface, dark ? 0.08 : 0.06),    "--color-md-code-text": palette.onSurface,    "--color-md-user-code-bg": withAlpha(userBubbleForeground, dark ? 0.18 : 0.22),    "--color-md-user-code-text": userBubbleForeground,    "--color-md-user-fence-bg": withAlpha(userBubbleForeground, dark ? 0.14 : 0.18),    "--color-md-user-fence-text": userBubbleForeground,    "--color-md-hr": withAlpha(palette.outlineVariant, dark ? 0.48 : 0.6),    "--color-user-bubble": userBubble,    "--color-user-bubble-foreground": userBubbleForeground,    "--color-user-bubble-foreground-muted": withAlpha(userBubbleForeground, 0.78),    "--color-user-bubble-skill-foreground": userBubbleForeground,    "--color-backdrop": withAlpha(palette.scrim, dark ? 0.48 : 0.22),    "--color-drawer": palette.surface,    "--color-drawer-shadow": withAlpha(palette.scrim, dark ? 0.32 : 0.12),    "--color-dot-separator": withAlpha(palette.onSurface, 0.2),    "--color-wordmark": palette.onSurface,    "--color-chevron": withAlpha(palette.onSurface, 0.2),  };}