Implement M1.5 visual design foundation: tokens, IBM Plex, theme toggle, chart themes

src/app/components/SnippetLibrary.module.css

@@ -2,24 +2,26 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  gap: var(--space-3);
 }
 
 .createNew {
   flex: 0 0 auto;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border);
+  margin: var(--space-4);
+  height: 40px;
+  padding: 0 var(--space-5);
+  border: var(--border-width) solid transparent;
   border-radius: var(--radius);
-  background: var(--color-accent);
-  color: var(--color-accent-contrast);
+  background: var(--accent);
+  color: var(--accent-contrast);
   font: inherit;
   font-weight: 600;
   cursor: pointer;
-  text-align: left;
+  text-align: center;
+  transition: background var(--dur-fast) var(--ease);
 }
 
 .createNew:hover {
-  filter: brightness(1.05);
+  background: var(--accent-hover);
 }
 
 .list {
@@ -29,34 +31,36 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
+  border-top: var(--border-width) solid var(--border);
 }
 
 .empty {
-  color: var(--color-text-muted);
+  color: var(--text-secondary);
   font-size: 13px;
-  padding: var(--space-2);
+  padding: var(--space-5) var(--space-4);
 }
 
 .item {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid transparent;
-  border-radius: var(--radius);
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-left: 2px solid transparent;
   cursor: pointer;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.item + .item {
+  border-top: var(--border-width) solid var(--border);
 }
 
 .item:hover {
-  background: var(--color-surface);
+  background: var(--layer-01);
 }
 
 .active {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
+  background: var(--layer-01);
+  border-left-color: var(--accent);
 }
 
 .itemMain {
@@ -64,7 +68,7 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-1);
 }
 
 .name {
@@ -77,26 +81,30 @@
 
 .date {
   font-size: 11px;
-  color: var(--color-text-muted);
+  color: var(--text-secondary);
 }
 
 .delete {
   flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background: none;
-  color: var(--color-text-muted);
+  color: var(--text-secondary);
   cursor: pointer;
   font-size: 12px;
   padding: var(--space-1);
   border-radius: var(--radius);
   opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease);
 }
 
-.item:hover .delete {
+.item:hover .delete,
+.delete:focus-visible {
   opacity: 1;
 }
 
 .delete:hover {
-  color: var(--color-error);
-  background: var(--color-bg);
+  color: var(--support-error);
 }