🎨 feat(web/default): add Anthropic theme preset and configurable serif typography

Introduce a switchable Anthropic-inspired color preset and a new Font customization axis so users can adopt the editorial serif look across the entire UI, including sidebar navigation, tabs, form controls, buttons, and table headers.

Theme preset

Add anthropic to the theme preset registry with warm cream canvas, slate foreground, and clay/coral accent tokens for light and dark modes
Define explicit surface colors for the Anthropic preset instead of relying on the semantic surface bridge
Exclude anthropic from the primary-color surface bridge so bespoke warm neutrals are not overridden by accent-tinted mixes
Typography system

Add @fontsource-variable/lora and a global --font-serif token with CJK serif fallbacks (Noto Serif SC, Source Han Serif, Songti SC, etc.)
Introduce a --font-body token and drive <body> font-family from it
Add a Font axis (default | sans | serif) parallel to radius/scale
Resolve font: 'default' against preset defaults (anthropic → serif)
Persist font preference via cookie and apply data-theme-font on <body>
Apply serif OpenType features (kern, liga, calt, tnum) and heading display tuning when serif is active
Remove per-component sans opt-outs so serif inherits through sidebar, tabs, inputs, buttons, badges, and table headers via natural CSS cascade
Keep monospace contexts unchanged via Tailwind preflight and .font-mono
UI and i18n

Add Font selector to the theme config drawer (Auto / Sans / Serif)
Add "Font" and "Select body font" translations for en, zh, fr, ja, ru, vi
Misc

Tighten group and status badge sizing for better balance with serif text
This commit is contained in:
t0ng7u
2026-05-26 04:31:13 +08:00
parent 3360882642
commit a64f26d1d2
16 changed files with 481 additions and 14 deletions
+3
View File
@@ -1756,6 +1756,7 @@
"FluentRead extension not detected. Please ensure it is installed and active.": "FluentRead extension not detected. Please ensure it is installed and active.",
"Flush interval (minutes)": "Flush interval (minutes)",
"Follow the guided steps to prepare your workspace before the first login.": "Follow the guided steps to prepare your workspace before the first login.",
"Font": "Font",
"Footer": "Footer",
"Footer text displayed at the bottom of pages": "Footer text displayed at the bottom of pages",
"footer.columns.about.links.aboutProject": "About Project",
@@ -3009,6 +3010,7 @@
"Preset recharge amounts displayed to users": "Preset recharge amounts displayed to users",
"Preset Template": "Preset Template",
"Preset templates": "Preset templates",
"preset.anthropic": "Anthropic",
"preset.default": "Default",
"preset.forest-whisper": "Forest Whisper",
"preset.lake-view": "Lake View",
@@ -3519,6 +3521,7 @@
"Select announcement type": "Select announcement type",
"Select at least one field to overwrite.": "Select at least one field to overwrite.",
"Select at least one target model": "Select at least one target model",
"Select body font": "Select body font",
"Select border radius": "Select border radius",
"Select channel type": "Select channel type",
"Select color preset": "Select color preset",
+3
View File
@@ -1756,6 +1756,7 @@
"FluentRead extension not detected. Please ensure it is installed and active.": "Extension FluentRead non détectée. Veuillez vous assurer qu'elle est installée et activée.",
"Flush interval (minutes)": "Intervalle d’écriture (minutes)",
"Follow the guided steps to prepare your workspace before the first login.": "Suivez les étapes guidées pour préparer votre espace de travail avant la première connexion.",
"Font": "Police",
"Footer": "Pied de page",
"Footer text displayed at the bottom of pages": "Texte de pied de page affiché en bas des pages",
"footer.columns.about.links.aboutProject": "À propos du projet",
@@ -3009,6 +3010,7 @@
"Preset recharge amounts displayed to users": "Montants de recharge prédéfinis affichés aux utilisateurs",
"Preset Template": "Modèle prédéfini",
"Preset templates": "Modèles prédéfinis",
"preset.anthropic": "Anthropic",
"preset.default": "Par défaut",
"preset.forest-whisper": "Murmure de la forêt",
"preset.lake-view": "Vue sur le lac",
@@ -3519,6 +3521,7 @@
"Select announcement type": "Sélectionner le type d'annonce",
"Select at least one field to overwrite.": "Sélectionnez au moins un champ à écraser.",
"Select at least one target model": "Sélectionnez au moins un modèle cible",
"Select body font": "Sélectionner la police du corps de texte",
"Select border radius": "Sélectionner le rayon de bordure",
"Select channel type": "Sélectionner le type de canal",
"Select color preset": "Sélectionner un préréglage de couleur",
+3
View File
@@ -1756,6 +1756,7 @@
"FluentRead extension not detected. Please ensure it is installed and active.": "FluentRead 拡張機能が検出されませんでした。インストールされていて有効になっていることを確認してください。",
"Flush interval (minutes)": "書き込み間隔(分)",
"Follow the guided steps to prepare your workspace before the first login.": "初回ログイン前に、ガイド付きの手順に従ってワークスペースを準備してください。",
"Font": "フォント",
"Footer": "フッター",
"Footer text displayed at the bottom of pages": "ページ下部に表示されるフッターテキスト",
"footer.columns.about.links.aboutProject": "プロジェクトについて",
@@ -3009,6 +3010,7 @@
"Preset recharge amounts displayed to users": "ユーザーに表示されるプリセットチャージ金額",
"Preset Template": "プリセットテンプレート",
"Preset templates": "プリセットのテンプレート",
"preset.anthropic": "Anthropic",
"preset.default": "デフォルト",
"preset.forest-whisper": "フォレストウィスパー",
"preset.lake-view": "レイクビュー",
@@ -3519,6 +3521,7 @@
"Select announcement type": "アナウンスメントタイプを選択",
"Select at least one field to overwrite.": "上書きするフィールドを少なくとも 1 つ選択してください。",
"Select at least one target model": "少なくとも1つの対象モデルを選択してください",
"Select body font": "本文フォントを選択",
"Select border radius": "角丸を選択",
"Select channel type": "チャネルタイプを選択",
"Select color preset": "カラープリセットを選択",
+3
View File
@@ -1756,6 +1756,7 @@
"FluentRead extension not detected. Please ensure it is installed and active.": "Расширение FluentRead не обнаружено. Убедитесь, что оно установлено и активно.",
"Flush interval (minutes)": "Интервал записи (минуты)",
"Follow the guided steps to prepare your workspace before the first login.": "Следуйте пошаговым инструкциям, чтобы подготовить рабочее пространство перед первым входом.",
"Font": "Шрифт",
"Footer": "Подвал",
"Footer text displayed at the bottom of pages": "Текст нижнего колонтитула, отображаемый внизу страниц",
"footer.columns.about.links.aboutProject": "О проекте",
@@ -3009,6 +3010,7 @@
"Preset recharge amounts displayed to users": "Предустановленные суммы пополнения, отображаемые пользователям",
"Preset Template": "Предустановленный шаблон",
"Preset templates": "Предустановленные шаблоны",
"preset.anthropic": "Anthropic",
"preset.default": "По умолчанию",
"preset.forest-whisper": "Лесной шёпот",
"preset.lake-view": "Озёрный вид",
@@ -3519,6 +3521,7 @@
"Select announcement type": "Выбрать тип объявления",
"Select at least one field to overwrite.": "Выберите хотя бы одно поле для перезаписи.",
"Select at least one target model": "Выберите хотя бы одну целевую модель",
"Select body font": "Выберите шрифт текста",
"Select border radius": "Выберите радиус скругления",
"Select channel type": "Выбрать тип канала",
"Select color preset": "Выберите цветовую предустановку",
+3
View File
@@ -1756,6 +1756,7 @@
"FluentRead extension not detected. Please ensure it is installed and active.": "Không phát hiện tiện ích mở rộng FluentRead. Vui lòng đảm bảo nó đã được cài đặt và kích hoạt.",
"Flush interval (minutes)": "Khoảng ghi xuống DB (phút)",
"Follow the guided steps to prepare your workspace before the first login.": "Thực hiện theo các bước hướng dẫn để chuẩn bị không gian làm việc của bạn trước lần đăng nhập đầu tiên.",
"Font": "Phông chữ",
"Footer": "Chân trang",
"Footer text displayed at the bottom of pages": "Văn bản chân trang hiển thị ở cuối các trang",
"footer.columns.about.links.aboutProject": "Về Dự án",
@@ -3009,6 +3010,7 @@
"Preset recharge amounts displayed to users": "Các mức nạp tiền đặt trước hiển thị cho người dùng",
"Preset Template": "Mẫu cài sẵn",
"Preset templates": "Mẫu sẵn",
"preset.anthropic": "Anthropic",
"preset.default": "Mặc định",
"preset.forest-whisper": "Thì thầm rừng",
"preset.lake-view": "Hồ nước",
@@ -3519,6 +3521,7 @@
"Select announcement type": "Select notification type",
"Select at least one field to overwrite.": "Chọn ít nhất một trường để ghi đè.",
"Select at least one target model": "Chọn ít nhất một mô hình đích",
"Select body font": "Chọn phông chữ nội dung",
"Select border radius": "Chọn độ bo góc",
"Select channel type": "Chọn loại kênh",
"Select color preset": "Chọn cài đặt màu sẵn",
+3
View File
@@ -1756,6 +1756,7 @@
"FluentRead extension not detected. Please ensure it is installed and active.": "未检测到 FluentRead 扩展。请确保已安装并激活。",
"Flush interval (minutes)": "刷库间隔(分钟)",
"Follow the guided steps to prepare your workspace before the first login.": "请按照引导步骤在首次登录前准备您的工作区。",
"Font": "字体",
"Footer": "页脚",
"Footer text displayed at the bottom of pages": "显示在页面底部的页脚文本",
"footer.columns.about.links.aboutProject": "关于项目",
@@ -3009,6 +3010,7 @@
"Preset recharge amounts displayed to users": "向用户显示的预设充值金额",
"Preset Template": "预设模板",
"Preset templates": "预设模板",
"preset.anthropic": "Anthropic",
"preset.default": "默认",
"preset.forest-whisper": "森林低语",
"preset.lake-view": "湖光",
@@ -3519,6 +3521,7 @@
"Select announcement type": "选择公告类型",
"Select at least one field to overwrite.": "请选择至少一个要覆盖的字段。",
"Select at least one target model": "请至少选择一个目标模型",
"Select body font": "选择正文字体",
"Select border radius": "选择圆角大小",
"Select channel type": "选择渠道类型",
"Select color preset": "选择颜色预设",