davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace monospaced ALL CAPS labels with Inter sentence case

Browse Source 
Remove IBM Plex Mono + text-transform: uppercase from all UI labels.
CSS classes .font-mono-label and .font-mono-overline now use Inter
with no text-transform. Inline monospace+uppercase styles in
StatusDropdown, TagsDropdown, ReferencedByPanel, AiActionCard replaced.
Tailwind uppercase removed from Sidebar, CommandPalette, PulseView,
CreateNoteDialog, CreateTypeDialog. Hardcoded ALL CAPS text (COLOR,
ICON, TEMPLATE) converted to sentence case. Code blocks and commit
hashes remain monospaced.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-03-29 17:00:04 +02:00
parent 4180599598
commit 7019cd400b
14 changed files with 26 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AiActionCard.tsx
View File

@@ -74,7 +74,7 @@ function DetailBlock({ label, content, isError }: {
<div style={{ marginTop: 6 }}>
<div
className="text-muted-foreground"
style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', marginBottom: 2 }}
style={{ fontSize: 10, fontWeight: 600, marginBottom: 2 }}
>
{label}
</div>

3
src/components/CommandPalette.test.tsx
View File

@@ -208,7 +208,8 @@ describe('CommandPalette', () => {
const groupHeaders = screen.getAllByText(
(_content, el) =>
el?.tagName === 'DIV' &&
el.classList.contains('uppercase') &&
el.classList.contains('text-[11px]') &&
el.classList.contains('font-medium') &&
!!el.textContent,
).map(el => el.textContent)

2
src/components/CommandPalette.tsx
View File

@@ -140,7 +140,7 @@ export function CommandPalette({ open, commands, onClose }: CommandPaletteProps)
runningIndex += items.length
return (
<div key={group}>
<div className="px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
<div className="px-4 pb-1 pt-2 text-[11px] font-medium text-muted-foreground">
{group}
</div>
{items.map((cmd, i) => {

4
src/components/CreateNoteDialog.tsx
View File

@@ -55,7 +55,7 @@ export function CreateNoteDialog({ open, onClose, onCreate, defaultType, customT
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5">
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<label className="text-xs font-medium text-muted-foreground">
Title
</label>
<Input
@@ -66,7 +66,7 @@ export function CreateNoteDialog({ open, onClose, onCreate, defaultType, customT
/>
</div>
<div className="space-y-1.5">
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<label className="text-xs font-medium text-muted-foreground">
Type
</label>
<div className="flex flex-wrap gap-1.5">

2
src/components/CreateTypeDialog.tsx
View File

@@ -36,7 +36,7 @@ export function CreateTypeDialog({ open, onClose, onCreate }: CreateTypeDialogPr
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5">
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<label className="text-xs font-medium text-muted-foreground">
Type Name
</label>
<Input

2
src/components/DynamicPropertiesPanel.test.tsx
View File

@@ -112,7 +112,7 @@ describe('DynamicPropertiesPanel', () => {
frontmatter={{ Status: 'Active' }}
/>
)
// Status rendered with CSS text-transform: uppercase, DOM text is still "Active"
// Status rendered as sentence case
expect(screen.getByTestId('status-badge')).toBeInTheDocument()
})

2
src/components/PulseView.tsx
View File

@@ -167,7 +167,7 @@ function DayGroup({ label, commits, onOpenNote }: {
onClick={() => setCollapsed((v) => !v)}
>
<Chevron size={12} className="text-muted-foreground" />
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
<span className="text-[11px] font-medium text-muted-foreground">
{label}
</span>
<span className="text-[11px] text-muted-foreground">

2
src/components/Sidebar.tsx
View File

@@ -315,7 +315,7 @@ export const Sidebar = memo(function Sidebar({
{/* Sections header + visibility popover */}
<div ref={customizeRef} style={{ position: 'relative', padding: '4px 6px 0' }}>
<div className="flex w-full select-none items-center justify-between" style={{ padding: '4px 16px' }}>
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Sections</span>
<span className="text-[11px] font-medium text-muted-foreground">Sections</span>
<button className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground" style={{ width: 20, height: 20 }} onClick={() => setShowCustomize((v) => !v)} aria-label="Customize sections" title="Customize sections">
<SlidersHorizontal size={14} />
</button>

6
src/components/StatusDropdown.tsx
View File

@@ -13,11 +13,10 @@ export function StatusPill({ status, className }: { status: string; className?:
color: style.color,
borderRadius: 16,
padding: '1px 6px',
fontFamily: "'IBM Plex Mono', monospace",
fontFamily: "'Inter', sans-serif",
fontSize: 10,
fontWeight: 600,
letterSpacing: '0',
textTransform: 'uppercase' as const,
maxWidth: 160,
}}
title={status}
@@ -98,11 +97,10 @@ function StatusOption({
}
const SECTION_LABEL_STYLE = {
fontFamily: "'IBM Plex Mono', monospace",
fontFamily: "'Inter', sans-serif",
fontSize: 9,
fontWeight: 500,
letterSpacing: '0',
textTransform: 'uppercase' as const,
}
function SectionLabel({ children }: { children: string }) {

10
src/components/TagsDropdown.tsx
View File

@@ -13,11 +13,10 @@ export function TagPill({ tag, className }: { tag: string; className?: string })
color: style.color,
borderRadius: 16,
padding: '1px 6px',
fontFamily: "'IBM Plex Mono', monospace",
fontFamily: "'Inter', sans-serif",
fontSize: 10,
fontWeight: 600,
letterSpacing: '1.2px',
textTransform: 'uppercase' as const,
letterSpacing: '0',
maxWidth: 160,
}}
title={tag}
@@ -90,11 +89,10 @@ function TagOption({
}
const SECTION_LABEL_STYLE = {
fontFamily: "'IBM Plex Mono', monospace",
fontFamily: "'Inter', sans-serif",
fontSize: 9,
fontWeight: 500,
letterSpacing: '1.2px',
textTransform: 'uppercase' as const,
letterSpacing: '0',
}
function SectionLabel({ children }: { children: string }) {

6
src/components/TypeCustomizePopover.test.tsx
View File

@@ -66,9 +66,9 @@ describe('TypeCustomizePopover', () => {
it('renders color, icon, and template sections', () => {
renderPopover()
expect(screen.getByText('COLOR')).toBeInTheDocument()
expect(screen.getByText('ICON')).toBeInTheDocument()
expect(screen.getByText('TEMPLATE')).toBeInTheDocument()
expect(screen.getByText('Color')).toBeInTheDocument()
expect(screen.getByText('Icon')).toBeInTheDocument()
expect(screen.getByText('Template')).toBeInTheDocument()
expect(screen.getByText('Done')).toBeInTheDocument()
})

6
src/components/TypeCustomizePopover.tsx
View File

@@ -75,7 +75,7 @@ export function TypeCustomizePopover({
onContextMenu={(e) => e.stopPropagation()}
>
{/* Color section */}
<div className="font-mono-overline mb-2 text-muted-foreground">COLOR</div>
<div className="font-mono-overline mb-2 text-muted-foreground">Color</div>
<div className="flex gap-2 mb-3 flex-wrap">
{ACCENT_COLORS.map((c) => (
<button
@@ -92,7 +92,7 @@ export function TypeCustomizePopover({
</div>
{/* Icon section */}
<div className="font-mono-overline mb-2 text-muted-foreground">ICON</div>
<div className="font-mono-overline mb-2 text-muted-foreground">Icon</div>
{/* Search input */}
<div className="relative mb-2">
@@ -136,7 +136,7 @@ export function TypeCustomizePopover({
</div>
{/* Template section */}
<div className="font-mono-overline mb-2 mt-3 text-muted-foreground">TEMPLATE</div>
<div className="font-mono-overline mb-2 mt-3 text-muted-foreground">Template</div>
<textarea
value={templateText}
onChange={(e) => handleTemplateChange(e.target.value)}

2
src/components/inspector/ReferencedByPanel.tsx
View File

@@ -31,7 +31,7 @@ export function ReferencedByPanel({ items, typeEntryMap, onNavigate }: {
<div className="flex flex-col gap-2.5">
{grouped.map(([viaKey, groupEntries]) => (
<div key={viaKey}>
<span className="mb-1 block font-mono text-muted-foreground" style={{ fontSize: 9, fontWeight: 400, letterSpacing: '1.2px', textTransform: 'uppercase', opacity: 0.7 }}>
<span className="mb-1 block text-muted-foreground" style={{ fontSize: 9, fontWeight: 400, letterSpacing: '0.02em', opacity: 0.7 }}>
← {viaKey}
</span>
<div className="flex flex-col gap-0.5">

8
src/index.css
View File

@@ -149,22 +149,20 @@
}
}
/* --- IBM Plex Mono label styles (from typography scale) --- */
/* --- Label typography (Inter, sentence case) --- */
/* t8: Section labels, metadata tags — 11px medium */
.font-mono-label {
font-family: 'IBM Plex Mono', monospace;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
}
/* t9: Overlines, category labels — 10px regular */
.font-mono-overline {
font-family: 'IBM Plex Mono', monospace;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.referenced-by-panel button:hover {