fix(types): render css type colors

src/components/NoteItem.test.tsx

@@ -94,6 +94,33 @@ describe('NoteItem', () => {
     expect(onClickNote).toHaveBeenCalled()
   })
 
+  it('uses CSS named colors from the Type document for note type indicators', () => {
+    const ideaType = makeEntry({
+      path: '/vault/type/idea.md',
+      filename: 'idea.md',
+      title: 'Idea',
+      isA: 'Type',
+      color: 'cyan',
+    })
+    const ideaEntry = makeEntry({
+      path: '/vault/ideas/native-cyan-idea.md',
+      filename: 'native-cyan-idea.md',
+      title: 'Native Cyan Idea',
+      isA: 'Idea',
+    })
+
+    render(
+      <NoteItem
+        entry={ideaEntry}
+        isSelected={false}
+        typeEntryMap={{ Idea: ideaType }}
+        onClickNote={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByTestId('type-icon')).toHaveStyle({ color: 'rgb(0, 255, 255)' })
+  })
+
   it('shows the title with filename metadata when a change status is present', () => {
     const entry = {
       ...makeEntry({ filename: 'my-note.md', title: 'My Note Title' }),
@@ -199,18 +226,18 @@ describe('NoteItem', () => {
   })
 
   it('colors relationship chips by target type and opens the related note on Cmd+click only', () => {
-    const linkedProject = makeEntry({
-      path: '/vault/project/build-app.md',
+    const linkedIdea = makeEntry({
+      path: '/vault/ideas/build-app.md',
       filename: 'build-app.md',
       title: 'Build App',
-      isA: 'Project',
+      isA: 'Idea',
     })
-    const projectType = makeEntry({
-      path: '/vault/type/project.md',
-      filename: 'project.md',
-      title: 'Project',
+    const ideaType = makeEntry({
+      path: '/vault/type/idea.md',
+      filename: 'idea.md',
+      title: 'Idea',
       isA: 'Type',
-      color: 'red',
+      color: 'cyan',
       icon: 'wrench',
     })
     const sourceEntry = makeEntry({
@@ -218,7 +245,7 @@ describe('NoteItem', () => {
       filename: 'source.md',
       title: 'Source',
       isA: 'Note',
-      relationships: { 'Belongs to': ['[[project/build-app]]'] },
+      relationships: { 'Belongs to': ['[[ideas/build-app]]'] },
     })
     const onClickNote = vi.fn()
 
@@ -226,8 +253,8 @@ describe('NoteItem', () => {
       <NoteItem
         entry={sourceEntry}
         isSelected={false}
-        typeEntryMap={{ Project: projectType }}
-        allEntries={[sourceEntry, linkedProject, projectType]}
+        typeEntryMap={{ Idea: ideaType }}
+        allEntries={[sourceEntry, linkedIdea, ideaType]}
         displayPropsOverride={['Belongs to']}
         onClickNote={onClickNote}
       />,
@@ -236,13 +263,14 @@ describe('NoteItem', () => {
     const chip = screen.getByTestId('property-chip-belongs-to-0')
     expect(chip).toHaveTextContent('Build App')
     expect(chip.className).toContain('cursor-pointer')
-    expect(chip).toHaveStyle({ color: 'var(--accent-red)', backgroundColor: 'var(--accent-red-light)' })
+    expect(chip).toHaveStyle({ color: 'rgb(0, 255, 255)' })
+    expect(chip.getAttribute('style')).toContain('background-color: color-mix(in srgb, cyan 14%, transparent)')
 
     fireEvent.click(chip)
     expect(onClickNote).not.toHaveBeenCalled()
 
     fireEvent.click(chip, { metaKey: true })
-    expect(onClickNote).toHaveBeenCalledWith(linkedProject, expect.objectContaining({ metaKey: true }))
+    expect(onClickNote).toHaveBeenCalledWith(linkedIdea, expect.objectContaining({ metaKey: true }))
   })
 
   it('falls back to the built-in type icon for relationship chips when the Type has no custom icon', () => {

src/components/Sidebar.test.tsx

@@ -711,7 +711,7 @@ describe('Sidebar', () => {
           wordCount: 0,
           relationships: {},
           icon: null,
-          color: 'orange',
+          color: 'cyan',
           order: null,
           sidebarLabel: null,
           template: null, sort: null,
@@ -750,7 +750,7 @@ describe('Sidebar', () => {
       fireEvent.click(screen.getByTitle('Customize sections'))
 
       expect(screen.getByLabelText('Toggle Projects').querySelector('svg')).toHaveStyle({ color: 'var(--accent-green)' })
-      expect(screen.getByLabelText('Toggle Recipes').querySelector('svg')).toHaveStyle({ color: 'var(--accent-orange)' })
+      expect(screen.getByLabelText('Toggle Recipes').querySelector('svg')).toHaveStyle({ color: 'rgb(0, 255, 255)' })
     })
 
     it('calls onToggleTypeVisibility when toggling a section in the popover', () => {