Files
multica/packages/ui/styles/base.css
Naiyuan Qing 70e4f44860 style(fonts): add text-autospace for CJK+Latin auto-spacing and sync design doc
- packages/ui/styles/base.css: add `text-autospace: ideograph-alpha
  ideograph-numeric` to html. Native CSS feature (Chrome 119+,
  Electron recent) that auto-inserts 1/4em space between CJK ideographs
  and Latin letters/numerals. Progressive enhancement — older browsers
  ignore the rule silently.
- docs/design.md: update font family table to reflect Inter + CJK system
  fallback. Reword font-bold ban rationale to be font-agnostic
  (information density / layout rhythm), not Geist-specific.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-15 08:45:23 +08:00

82 lines
2.5 KiB
CSS

/* =============================================================================
* Multica shared base styles — imported by all apps
* ============================================================================= */
/* Shiki dual themes: CSS-only light/dark switching via CSS variables */
/* @see https://shiki.style/guide/dual-themes */
.shiki,
.shiki span {
color: var(--shiki-light);
}
.dark .shiki,
.dark .shiki span {
color: var(--shiki-dark) !important;
}
/* Multica icon: entrance spin animation */
@keyframes entrance-spin {
0% { transform: rotate(0deg); opacity: 0; }
50% { opacity: 1; }
100% { transform: rotate(360deg); opacity: 1; }
}
.animate-entrance-spin {
animation: entrance-spin 0.6s ease-out forwards;
}
/* Chat FAB: gentle color + border tint while a chat task is running.
* Keeps the ring at the same thickness — only hue shifts towards brand
* at half-cycle, no outer glow. */
@keyframes chat-impulse {
0%, 100% {
color: var(--muted-foreground);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
}
50% {
color: var(--brand);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 40%, transparent);
}
}
.animate-chat-impulse {
animation: chat-impulse 1.6s ease-in-out infinite;
}
/* Sidebar: open triggers (dropdown/popover) get active background */
[data-sidebar="menu-button"][data-popup-open] {
background-color: var(--sidebar-accent);
color: var(--sidebar-accent-foreground);
}
/* Sonner toast: align icon to first line of text, not vertically centered */
[data-sonner-toast] {
align-items: flex-start !important;
}
[data-sonner-toast] [data-icon] {
margin-top: 2.5px;
}
@layer base {
* {
@apply border-border outline-ring/50;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
/* Auto-insert 1/4em space between CJK ideographs and Latin letters/numerals.
* Native CSS text-autospace (Chrome 119+, Electron recent versions).
* Progressive enhancement: browsers that don't support it simply ignore the rule. */
text-autospace: ideograph-alpha ideograph-numeric;
}
}