refactor: update tag-related styles and UI components with new color system

src/app/features/note/components/note-header/note-header.component.html

@@ -45,5 +45,6 @@
     [noteId]="noteId"
     [tags]="tags"
     (saved)="tagsChange.emit($event)"
+    (tagSelected)="tagSelected.emit($event)"
   ></app-tag-manager>
 </header>

src/app/features/note/components/note-header/note-header.component.ts

@@ -24,6 +24,7 @@ export class NoteHeaderComponent implements AfterViewInit, OnDestroy {
   @Output() openDirectory = new EventEmitter<void>();
   @Output() copyRequested = new EventEmitter<void>();
   @Output() tagsChange = new EventEmitter<string[]>();
+  @Output() tagSelected = new EventEmitter<string>();
 
   pathParts: { prefix: string; filename: string } = { prefix: '', filename: '' };
 

src/app/features/parameters/parameters.page.css

@@ -92,30 +92,21 @@
 .mode-button {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  background: var(--bg-muted);
-  border: 1.5px solid var(--border);
-  border-radius: 0.5rem;
-  color: var(--text-main);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  min-width: 6.5rem;
+  gap: 0.45rem;
   justify-content: center;
+  min-width: 6.5rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-decoration: none;
 }
 
-.mode-button:hover {
-  background: var(--bg-main);
-  border-color: var(--primary);
-  transform: translateY(-1px);
-}
-
-.mode-button.active {
-  background: var(--primary);
-  border-color: var(--primary);
-  color: white;
+.mode-button:focus-visible {
+  outline: none;
 }
 
 .button-icon {
@@ -126,6 +117,66 @@
   flex-shrink: 0;
 }
 
+/* Colored shadows small buttons (shared look with tag manager) */
+.btn-colored-xs {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #0f172a;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--brand) 18%, transparent) 0%,
+    color-mix(in oklab, var(--brand) 8%, transparent) 100%);
+  box-shadow: 0 6px 14px -10px color-mix(in oklab, var(--brand) 65%, transparent);
+  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
+  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+.btn-colored-xs:hover,
+.btn-colored-xs:focus-visible {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 18px -10px color-mix(in oklab, var(--brand) 75%, transparent);
+  border-color: color-mix(in oklab, var(--brand) 35%, transparent);
+}
+
+:host-context(.dark) .btn-colored-xs {
+  color: #e2e8f0;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--brand-700) 22%, transparent) 0%,
+    color-mix(in oklab, var(--brand-700) 12%, transparent) 100%);
+  box-shadow: 0 10px 22px -14px color-mix(in oklab, var(--brand-700) 85%, transparent);
+  border-color: color-mix(in oklab, var(--brand-700) 30%, transparent);
+}
+
+.btn-primary {
+  color: white;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--brand) 60%, transparent) 0%,
+    color-mix(in oklab, var(--brand-700) 60%, transparent) 100%);
+  border-color: color-mix(in oklab, var(--brand-700) 50%, transparent);
+}
+
+.btn-neutral {
+  color: inherit;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--surface-1, #e5e7eb) 60%, transparent) 0%,
+    color-mix(in oklab, var(--surface-2, #d1d5db) 60%, transparent) 100%);
+  border-color: color-mix(in oklab, var(--border, #cbd5e1) 60%, transparent);
+}
+
+:host-context(.dark) .btn-neutral {
+  color: #e2e8f0;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--card, #111827) 60%, transparent) 0%,
+    color-mix(in oklab, var(--surface2, #0b1220) 60%, transparent) 100%);
+  border-color: color-mix(in oklab, var(--border, #334155) 60%, transparent);
+}
+
 /* Theme Grid */
 .theme-grid {
   display: grid;

src/app/features/parameters/parameters.page.html

@@ -31,8 +31,9 @@
             <button
               *ngFor="let m of modes"
               (click)="setMode(m)"
-              class="mode-button"
-              [class.active]="prefs().mode === m"
+              class="mode-button btn-colored-xs"
+              [class.btn-primary]="prefs().mode === m"
+              [class.btn-neutral]="prefs().mode !== m"
               [attr.aria-label]="'Set mode to ' + m">
               <svg *ngIf="m === 'system'" class="button-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
@@ -100,8 +101,9 @@
           <button
             *ngFor="let l of languages"
             (click)="setLanguage(l)"
-            class="mode-button"
-            [class.active]="prefs().language === l"
+            class="mode-button btn-colored-xs"
+            [class.btn-primary]="prefs().language === l"
+            [class.btn-neutral]="prefs().language !== l"
             [attr.aria-label]="'Set language to ' + l">
             <span class="button-text">{{ l === 'fr' ? 'Français' : 'English' }}</span>
           </button>