@meith/theme-default 0.1.0

package/src/slots/user-panel.tsx

@@ -0,0 +1,102 @@
+import { Avatar, Badge, buttonVariants } from '@meith/ui'
+import { Menu } from '@meith/ui/menu'
+import type { UserPanelModel } from '@meith/theme-kit'
+
+import { MUTED_LINK } from '../shared'
+
+export function UserPanel({
+  viewer,
+  links,
+  unreadNotifications,
+  unreadMessages,
+  children,
+}: UserPanelModel) {
+  if (viewer.isGuest) {
+    return (
+      <div className="flex items-center gap-2">
+        {links.map((link, index) => (
+          <a
+            key={link.href}
+            href={link.href}
+            className={buttonVariants({
+              variant: index === 0 ? 'primary' : 'outline',
+              size: 'sm',
+            })}
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  const name = viewer.username ?? 'Signed in'
+
+  return (
+    <div className="flex min-w-0 flex-col items-start gap-1 sm:items-end">
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-account="menu"]{display:none}[data-account="plain"]{display:flex!important}</style>',
+        }}
+      />
+
+      <div data-account="menu" className="flex min-w-0 items-center gap-2">
+        {unreadNotifications > 0 && (
+          <Badge tone="solid">
+            {unreadNotifications}
+            <span className="sr-only"> unread notifications</span>
+            <span aria-hidden="true"> new</span>
+          </Badge>
+        )}
+        {unreadMessages > 0 && (
+          <Badge tone="outline">
+            {unreadMessages}
+            <span className="sr-only"> unread messages</span>
+            <span aria-hidden="true"> unread</span>
+          </Badge>
+        )}
+
+        <Menu
+          label="Your account"
+          items={links}
+          trigger={
+            <>
+              <Avatar src={viewer.avatarUrl} name={name} size={24} />
+              <span className="max-w-40 truncate font-medium text-foreground">{name}</span>
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 12 12"
+                className="size-3 shrink-0 text-muted-foreground"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="m3 4.5 3 3 3-3" />
+              </svg>
+            </>
+          }
+        >
+          {children}
+        </Menu>
+      </div>
+
+      <nav
+        data-account="plain"
+        style={{ display: 'none' }}
+        aria-label="Your account"
+        className="flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:justify-end"
+      >
+        <span className="font-medium text-foreground">{name}</span>
+        {links.map((link) => (
+          <a key={link.href} href={link.href} className={MUTED_LINK}>
+            {link.label}
+          </a>
+        ))}
+        {children}
+      </nav>
+    </div>
+  )
+}

package/src/slots/who-is-online.tsx

@@ -0,0 +1,94 @@
+import { Badge } from '@meith/ui'
+import type { OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
+
+import { LINK, NUMERIC, Stamp, UserRef } from '../shared'
+
+const VISIBLE_NAMES = 12
+
+export function WhoIsOnline({
+  guestCount,
+  members,
+  total,
+  recordCount,
+  recordAt,
+  fullListHref,
+}: WhoIsOnlineModel) {
+  const shown = members.slice(0, VISIBLE_NAMES)
+  const rest = members.slice(VISIBLE_NAMES)
+
+  return (
+    <section
+      aria-labelledby="who-is-online-heading"
+      className="flex flex-wrap items-baseline gap-x-3 gap-y-1"
+    >
+      <h2 id="who-is-online-heading" className="sr-only">
+        Who&rsquo;s online
+      </h2>
+
+      <span className={NUMERIC}>
+        <span className="font-medium text-foreground">{total.toLocaleString('en')}</span> online —{' '}
+        {members.length.toLocaleString('en')} {members.length === 1 ? 'member' : 'members'},{' '}
+        {guestCount.toLocaleString('en')} {guestCount === 1 ? 'guest' : 'guests'}
+      </span>
+
+      {members.length === 0 ? (
+        <span>
+          {guestCount === 0
+            ? 'Nobody is reading the board right now.'
+            : 'Only guests are reading the board right now.'}
+        </span>
+      ) : (
+        <div className="min-w-0">
+          {shown.map((member, index) => (
+            <Name key={member.userId ?? member.username} member={member} first={index === 0} />
+          ))}
+
+          {rest.length > 0 && (
+            <details className="inline">
+              <summary
+                className={`inline cursor-default list-none ${LINK} [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
+              >
+                {' and '}
+                <span className={NUMERIC}>{rest.length.toLocaleString('en')}</span> more
+              </summary>
+              {': '}
+              {rest.map((member, index) => (
+                <Name
+                  key={member.userId ?? member.username}
+                  member={member}
+                  first={index === 0}
+                />
+              ))}
+            </details>
+          )}
+        </div>
+      )}
+
+      <span className="ms-auto flex flex-wrap items-baseline gap-x-3 gap-y-1">
+        <a href={fullListHref} className={`font-medium text-foreground ${LINK}`}>
+          See everyone online
+        </a>
+        {recordAt !== null && (
+          <span className={NUMERIC}>
+            Record: {recordCount.toLocaleString('en')} on <Stamp at={recordAt} />
+          </span>
+        )}
+      </span>
+    </section>
+  )
+}
+
+function Name({ member, first }: { member: OnlineMemberModel; first: boolean }) {
+  return (
+    <>
+      {!first && ', '}
+      <UserRef user={member} />
+      {member.isInvisible && (
+        <>
+          {' '}
+          <Badge tone="neutral">Invisible</Badge>
+        </>
+      )}
+    </>
+  )
+}

package/src/theme.ts

@@ -0,0 +1,70 @@
+import { defineTheme } from '@meith/theme-kit'
+
+import { BoardIndex } from './slots/board-index'
+import { BoardStats } from './slots/board-stats'
+import { CategoryBlock } from './slots/category-block'
+import { WhoIsOnline } from './slots/who-is-online'
+import { Footer } from './slots/footer'
+import { ForumRow } from './slots/forum-row'
+import { LatestPosts } from './slots/latest-posts'
+import { LatestThreads } from './slots/latest-threads'
+import { ForumDisplay } from './slots/forum-display'
+import { Header } from './slots/header'
+import { Navigation } from './slots/navigation'
+import { Notice } from './slots/notice'
+import { Announcement } from './slots/announcement'
+import { Shell } from './slots/shell'
+import { UserPanel } from './slots/user-panel'
+import { Pagination } from './slots/pagination'
+import { SubforumList } from './slots/subforum-list'
+import { ThreadRow } from './slots/thread-row'
+import { ThreadView } from './slots/thread-view'
+import { PostBit } from './slots/post-bit'
+import { PostForm } from './slots/post-form'
+import { PostActions } from './slots/post-actions'
+import { MemberProfile } from './slots/member-profile'
+import { ForumJump } from './slots/forum-jump'
+import { SearchForm } from './slots/search-form'
+import { RedirectNotice } from './slots/redirect-notice'
+import { ErrorNotice } from './slots/error-notice'
+
+export const defaultTheme = defineTheme({
+  key: 'default',
+  title: 'Default',
+  slots: {
+    Shell,
+    Header,
+    UserPanel,
+    Navigation,
+    Footer,
+    Notice,
+    Announcement,
+
+    BoardIndex,
+    CategoryBlock,
+    ForumRow,
+    BoardStats,
+    WhoIsOnline,
+    LatestThreads,
+    LatestPosts,
+
+    ForumDisplay,
+    ThreadRow,
+    SubforumList,
+    Pagination,
+
+    ThreadView,
+    PostBit,
+    PostActions,
+
+    PostForm,
+
+    MemberProfile,
+
+    SearchForm,
+    ForumJump,
+
+    RedirectNotice,
+    ErrorNotice,
+  },
+})

package/src/tokens.ts

@@ -0,0 +1,156 @@
+export const TOKEN_NAMES = [
+  'background',
+  'foreground',
+  'surface',
+  'card',
+  'card-foreground',
+  'primary',
+  'primary-foreground',
+  'primary-hover',
+  'secondary',
+  'secondary-foreground',
+  'muted',
+  'muted-foreground',
+  'accent',
+  'accent-foreground',
+  'destructive',
+  'destructive-foreground',
+  'border',
+  'input',
+  'ring',
+  'shadow-tint',
+  'radius',
+  'density-unit',
+  'font-mono-stack',
+  'font-sans-stack',
+  'font-heading-stack',
+  'elevation',
+  'forum-unread',
+  'forum-read',
+  'forum-locked',
+  'thread-pinned',
+  'thread-locked',
+  'thread-moved',
+  'thread-unapproved',
+  'thread-deleted',
+  'post-highlight',
+  'post-own',
+  'post-unapproved',
+  'moderation-pending',
+  'moderation-approved',
+  'moderation-rejected',
+  'group-admin',
+  'group-supermod',
+  'group-mod',
+  'group-banned',
+] as const
+
+export type TokenName = (typeof TOKEN_NAMES)[number]
+
+export const SCHEME_INDEPENDENT_TOKENS = [
+  'radius',
+  'density-unit',
+  'font-mono-stack',
+  'font-sans-stack',
+  'font-heading-stack',
+  'elevation',
+] as const
+
+export const LIGHT_TOKENS: Record<TokenName, string> = {
+  background: 'oklch(0.968 0 0)',
+  foreground: 'oklch(0.205 0 0)',
+  surface: 'oklch(0.941 0 0)',
+  card: 'oklch(1 0 0)',
+  'card-foreground': 'oklch(0.205 0 0)',
+  primary: 'oklch(0.508 0.105 165.6)',
+  'primary-foreground': 'oklch(0.985 0 0)',
+  'primary-hover': 'oklch(0.434 0.089 165.6)',
+  secondary: 'oklch(0.94 0 0)',
+  'secondary-foreground': 'oklch(0.269 0 0)',
+  muted: 'oklch(0.958 0 0)',
+  'muted-foreground': 'oklch(0.494 0 0)',
+  accent: 'oklch(0.951 0 0)',
+  'accent-foreground': 'oklch(0.205 0 0)',
+  destructive: 'oklch(0.514 0.183 28.5)',
+  'destructive-foreground': 'oklch(0.985 0 0)',
+  border: 'oklch(0.905 0 0)',
+  input: 'oklch(0.64 0 0)',
+  ring: 'oklch(0.508 0.105 165.6)',
+  'shadow-tint': 'oklch(0.205 0 0 / 8%)',
+  radius: '0.5rem',
+  'density-unit': '0.25rem',
+  'font-mono-stack': 'ui-monospace, "SFMono-Regular", "Menlo", monospace',
+  'font-sans-stack': 'var(--font-inter), ui-sans-serif, system-ui, sans-serif',
+  'font-heading-stack': 'var(--font-sans-stack)',
+  elevation: '0 1px 2px var(--shadow-tint), 0 12px 32px -16px var(--shadow-tint)',
+  'forum-unread': 'oklch(0.205 0 0)',
+  'forum-read': 'oklch(0.556 0 0)',
+  'forum-locked': 'oklch(0.554 0.135 32)',
+  'thread-pinned': 'oklch(0.55 0.12 68)',
+  'thread-locked': 'oklch(0.554 0.135 32)',
+  'thread-moved': 'oklch(0.556 0 0)',
+  'thread-unapproved': 'oklch(0.545 0.11 88)',
+  'thread-deleted': 'oklch(0.487 0.164 26)',
+  'post-highlight': 'oklch(0.964 0.036 92)',
+  'post-own': 'oklch(0.972 0 0)',
+  'post-unapproved': 'oklch(0.956 0.035 84)',
+  'moderation-pending': 'oklch(0.55 0.12 68)',
+  'moderation-approved': 'oklch(0.518 0.113 150)',
+  'moderation-rejected': 'oklch(0.554 0.135 32)',
+  'group-admin': 'oklch(0.505 0.169 27)',
+  'group-supermod': 'oklch(0.496 0.153 305)',
+  'group-mod': 'oklch(0.489 0.127 250)',
+  'group-banned': 'oklch(0.556 0 0)',
+}
+
+export const DARK_TOKENS: Record<TokenName, string> = {
+  background: 'oklch(0.15 0 0)',
+  foreground: 'oklch(0.967 0 0)',
+  surface: 'oklch(0.17 0 0)',
+  card: 'oklch(0.196 0 0)',
+  'card-foreground': 'oklch(0.967 0 0)',
+  primary: 'oklch(0.773 0.153 163.2)',
+  'primary-foreground': 'oklch(0.181 0.029 166.6)',
+  'primary-hover': 'oklch(0.84 0.139 166.8)',
+  secondary: 'oklch(0.256 0 0)',
+  'secondary-foreground': 'oklch(0.94 0 0)',
+  muted: 'oklch(0.228 0 0)',
+  'muted-foreground': 'oklch(0.702 0 0)',
+  accent: 'oklch(0.276 0 0)',
+  'accent-foreground': 'oklch(0.967 0 0)',
+  destructive: 'oklch(0.674 0.174 26)',
+  'destructive-foreground': 'oklch(0.18 0 0)',
+  border: 'oklch(0.31 0 0)',
+  input: 'oklch(0.52 0 0)',
+  ring: 'oklch(0.773 0.153 163.2)',
+  'shadow-tint': 'oklch(0 0 0 / 45%)',
+  radius: '0.5rem',
+  'density-unit': '0.25rem',
+  'font-mono-stack': 'ui-monospace, "SFMono-Regular", "Menlo", monospace',
+  'font-sans-stack': 'var(--font-inter), ui-sans-serif, system-ui, sans-serif',
+  'font-heading-stack': 'var(--font-sans-stack)',
+  elevation: '0 1px 2px var(--shadow-tint), 0 12px 32px -16px var(--shadow-tint)',
+  'forum-unread': 'oklch(0.967 0 0)',
+  'forum-read': 'oklch(0.6 0 0)',
+  'forum-locked': 'oklch(0.708 0.13 34)',
+  'thread-pinned': 'oklch(0.769 0.13 74)',
+  'thread-locked': 'oklch(0.708 0.13 34)',
+  'thread-moved': 'oklch(0.6 0 0)',
+  'thread-unapproved': 'oklch(0.777 0.12 85)',
+  'thread-deleted': 'oklch(0.664 0.157 27)',
+  'post-highlight': 'oklch(0.276 0.043 92)',
+  'post-own': 'oklch(0.221 0 0)',
+  'post-unapproved': 'oklch(0.263 0.04 85)',
+  'moderation-pending': 'oklch(0.769 0.13 74)',
+  'moderation-approved': 'oklch(0.716 0.126 151)',
+  'moderation-rejected': 'oklch(0.708 0.13 34)',
+  'group-admin': 'oklch(0.687 0.166 27)',
+  'group-supermod': 'oklch(0.703 0.144 305)',
+  'group-mod': 'oklch(0.694 0.122 250)',
+  'group-banned': 'oklch(0.6 0 0)',
+}
+
+export const BROWSER_THEME_COLOR = {
+  light: '#f4f4f4',
+  dark: '#0b0b0b',
+} as const