@meith/theme-midnight 0.1.0

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

@@ -0,0 +1,55 @@
+import type { WhoIsOnlineModel } from '@meith/theme-kit'
+
+import { UserRef } from '../shared'
+
+export function WhoIsOnline({
+  guestCount,
+  members,
+  total,
+  recordCount,
+  recordAt,
+  fullListHref,
+}: WhoIsOnlineModel) {
+  return (
+    <section aria-labelledby="who-is-online-heading" className="border border-border">
+      <h2
+        id="who-is-online-heading"
+        className="border-b border-border bg-secondary px-3 py-1 font-mono text-xs uppercase tracking-wide"
+      >
+        Online now — {total}
+      </h2>
+      <p className="px-3 py-2 text-xs">
+        {members.length === 0 ? (
+          <span className="text-muted-foreground">no members</span>
+        ) : (
+          members.map((member, index) => (
+            <span key={member.username}>
+              {index > 0 && ', '}
+              <UserRef user={member} className="text-primary hover:underline" />
+              {member.isInvisible && (
+                <span className="ml-1 font-mono text-muted-foreground">(hidden)</span>
+              )}
+            </span>
+          ))
+        )}
+        <span className="text-muted-foreground">
+          {' · '}
+          {guestCount} guests
+        </span>
+      </p>
+      <p className="border-t border-border px-3 py-1 font-mono text-xs text-muted-foreground">
+        <a href={fullListHref} className="hover:text-foreground">
+          full list
+        </a>
+        {' · record '}
+        {recordCount}
+        {recordAt !== null && (
+          <>
+            {' on '}
+            <time dateTime={recordAt.iso}>{recordAt.label}</time>
+          </>
+        )}
+      </p>
+    </section>
+  )
+}

package/src/theme.ts

@@ -0,0 +1,59 @@
+import { defaultTheme } from '@meith/theme-default'
+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 { Footer } from './slots/footer'
+import { ForumDisplay } from './slots/forum-display'
+import { ForumRow } from './slots/forum-row'
+import { Header } from './slots/header'
+import { LatestPosts } from './slots/latest-posts'
+import { LatestThreads } from './slots/latest-threads'
+import { MemberProfile } from './slots/member-profile'
+import { Navigation } from './slots/navigation'
+import { Notice } from './slots/notice'
+import { Announcement } from './slots/announcement'
+import { Pagination } from './slots/pagination'
+import { PostActions } from './slots/post-actions'
+import { PostBit } from './slots/post-bit'
+import { Shell } from './slots/shell'
+import { SubforumList } from './slots/subforum-list'
+import { ThreadRow } from './slots/thread-row'
+import { ThreadView } from './slots/thread-view'
+import { UserPanel } from './slots/user-panel'
+import { WhoIsOnline } from './slots/who-is-online'
+
+export const midnightTheme = defineTheme({
+  key: 'midnight',
+  title: 'Midnight',
+  extends: defaultTheme,
+  slots: {
+    Shell,
+    Header,
+    UserPanel,
+    Navigation,
+    Footer,
+    Notice,
+    Announcement,
+
+    BoardIndex,
+    CategoryBlock,
+    ForumRow,
+    BoardStats,
+    WhoIsOnline,
+    LatestThreads,
+    LatestPosts,
+
+    ForumDisplay,
+    ThreadRow,
+    SubforumList,
+    Pagination,
+
+    ThreadView,
+    PostBit,
+    PostActions,
+
+    MemberProfile,
+  },
+})

package/src/tokens.ts

@@ -0,0 +1,98 @@
+export const LIGHT_TOKENS: Record<string, string> = {
+  background: 'oklch(0.9 0.008 240)',
+  foreground: 'oklch(0.24 0.02 240)',
+  surface: 'oklch(0.92 0.008 240)',
+  card: 'oklch(0.945 0.005 240)',
+  'card-foreground': 'oklch(0.24 0.02 240)',
+  primary: 'oklch(0.48 0.11 210)',
+  'primary-foreground': 'oklch(0.97 0.005 240)',
+  'primary-hover': 'oklch(0.41 0.1 210)',
+  secondary: 'oklch(0.87 0.012 240)',
+  'secondary-foreground': 'oklch(0.28 0.02 240)',
+  muted: 'oklch(0.885 0.008 240)',
+  'muted-foreground': 'oklch(0.46 0.018 240)',
+  accent: 'oklch(0.6 0.13 195)',
+  'accent-foreground': 'oklch(0.18 0.03 195)',
+  destructive: 'oklch(0.52 0.19 20)',
+  'destructive-foreground': 'oklch(0.97 0.005 240)',
+  border: 'oklch(0.78 0.012 240)',
+  input: 'oklch(0.61 0.012 240)',
+  ring: 'oklch(0.55 0.13 195)',
+  'shadow-tint': 'oklch(0.24 0.02 240 / 10%)',
+  radius: '0rem',
+  'density-unit': '0.2rem',
+  'font-mono-stack': '"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace',
+  'font-sans-stack': '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif',
+  'font-heading-stack': 'var(--font-sans-stack)',
+  elevation: 'none',
+  'forum-unread': 'oklch(0.49 0.13 195)',
+  'forum-read': 'oklch(0.52 0.016 240)',
+  'forum-locked': 'oklch(0.52 0.1 20)',
+  'thread-pinned': 'oklch(0.5 0.14 150)',
+  'thread-locked': 'oklch(0.52 0.1 20)',
+  'thread-moved': 'oklch(0.52 0.016 240)',
+  'thread-unapproved': 'oklch(0.52 0.13 85)',
+  'thread-deleted': 'oklch(0.52 0.16 20)',
+  'post-highlight': 'oklch(0.86 0.05 195)',
+  'post-own': 'oklch(0.9 0.02 210)',
+  'post-unapproved': 'oklch(0.89 0.04 85)',
+  'moderation-pending': 'oklch(0.52 0.13 85)',
+  'moderation-approved': 'oklch(0.51 0.13 150)',
+  'moderation-rejected': 'oklch(0.52 0.17 20)',
+  'group-admin': 'oklch(0.5 0.17 20)',
+  'group-supermod': 'oklch(0.5 0.14 310)',
+  'group-mod': 'oklch(0.48 0.12 195)',
+  'group-banned': 'oklch(0.52 0.016 240)',
+}
+
+export const DARK_TOKENS: Record<string, string> = {
+  background: 'oklch(0.14 0.012 250)',
+  foreground: 'oklch(0.9 0.008 240)',
+  surface: 'oklch(0.157 0.013 250)',
+  card: 'oklch(0.175 0.014 250)',
+  'card-foreground': 'oklch(0.9 0.008 240)',
+  primary: 'oklch(0.78 0.12 195)',
+  'primary-foreground': 'oklch(0.14 0.012 250)',
+  'primary-hover': 'oklch(0.85 0.11 195)',
+  secondary: 'oklch(0.22 0.016 250)',
+  'secondary-foreground': 'oklch(0.88 0.008 240)',
+  muted: 'oklch(0.2 0.014 250)',
+  'muted-foreground': 'oklch(0.64 0.014 240)',
+  accent: 'oklch(0.8 0.13 195)',
+  'accent-foreground': 'oklch(0.14 0.012 250)',
+  destructive: 'oklch(0.65 0.19 20)',
+  'destructive-foreground': 'oklch(0.13 0.01 250)',
+  border: 'oklch(0.27 0.016 250)',
+  input: 'oklch(0.5 0.018 250)',
+  ring: 'oklch(0.8 0.13 195)',
+  'shadow-tint': 'oklch(0 0 0 / 50%)',
+  radius: '0rem',
+  'density-unit': '0.2rem',
+  'font-mono-stack': '"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace',
+  'font-sans-stack': '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif',
+  'font-heading-stack': 'var(--font-sans-stack)',
+  elevation: 'none',
+  'forum-unread': 'oklch(0.8 0.13 195)',
+  'forum-read': 'oklch(0.59 0.016 250)',
+  'forum-locked': 'oklch(0.62 0.12 20)',
+  'thread-pinned': 'oklch(0.72 0.14 150)',
+  'thread-locked': 'oklch(0.62 0.12 20)',
+  'thread-moved': 'oklch(0.59 0.016 250)',
+  'thread-unapproved': 'oklch(0.76 0.14 90)',
+  'thread-deleted': 'oklch(0.64 0.16 20)',
+  'post-highlight': 'oklch(0.26 0.05 195)',
+  'post-own': 'oklch(0.19 0.02 210)',
+  'post-unapproved': 'oklch(0.25 0.045 85)',
+  'moderation-pending': 'oklch(0.72 0.15 90)',
+  'moderation-approved': 'oklch(0.7 0.13 150)',
+  'moderation-rejected': 'oklch(0.65 0.17 20)',
+  'group-admin': 'oklch(0.68 0.17 20)',
+  'group-supermod': 'oklch(0.7 0.13 310)',
+  'group-mod': 'oklch(0.78 0.12 195)',
+  'group-banned': 'oklch(0.59 0.016 250)',
+}
+
+export const BROWSER_THEME_COLOR = {
+  light: '#d9dfe3',
+  dark: '#060a0e',
+} as const