update styling

ts_web/elements/wcc-sidebar.ts

@@ -17,29 +17,28 @@ export class WccSidebar extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
       <style>
         :host {
-          --background: #09090b;
-          --foreground: #fafafa;
-          --card: #0c0c0f;
-          --card-foreground: #fafafa;
-          --primary: #f4f4f5;
-          --primary-foreground: #18181b;
-          --secondary: #27272a;
-          --secondary-foreground: #fafafa;
-          --muted: #27272a;
-          --muted-foreground: #a1a1aa;
-          --accent: #27272a;
-          --accent-foreground: #fafafa;
-          --border: rgba(255, 255, 255, 0.1);
-          --input: #27272a;
-          --ring: #d4d4d8;
-          --radius: 0.5rem;
+          /* CSS Variables - Always dark theme to match wcc-properties */
+          --background: #0a0a0a;
+          --foreground: #e5e5e5;
+          --card: #0f0f0f;
+          --card-foreground: #f0f0f0;
+          --muted: #1a1a1a;
+          --muted-foreground: #666;
+          --accent: #222;
+          --accent-foreground: #fff;
+          --border: rgba(255, 255, 255, 0.06);
+          --input: #141414;
+          --primary: #3b82f6;
+          --primary-foreground: #fff;
+          --ring: #3b82f6;
+          --radius: 4px;
 
           display: block;
-          border-right: 1px solid var(--border);
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+          border-right: 1px solid rgba(255, 255, 255, 0.08);
+          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;
           box-sizing: border-box;
           position: absolute;
@@ -49,23 +48,26 @@ export class WccSidebar extends DeesElement {
           bottom: 0px;
           overflow-y: auto;
           overflow-x: hidden;
-          background: var(--card);
+          background: var(--background);
           color: var(--foreground);
         }
 
         .menu {
-          padding: 8px 0;
+          padding: 0.5rem 0;
         }
 
         h3 {
-          padding: 8px 16px;
-          font-size: 12px;
-          font-weight: 600;
+          padding: 0.3rem 0.75rem;
+          font-size: 0.65rem;
+          font-weight: 500;
           text-transform: uppercase;
-          letter-spacing: 0.05em;
-          color: var(--muted-foreground);
+          letter-spacing: 0.08em;
+          color: #888;
           margin: 0;
-          margin-top: 8px;
+          margin-top: 0.5rem;
+          background: rgba(59, 130, 246, 0.03);
+          border-bottom: 1px solid var(--border);
+          border-top: 1px solid var(--border);
         }
 
         h3:first-child {
@@ -76,7 +78,7 @@ export class WccSidebar extends DeesElement {
           font-family: 'Material Symbols Outlined';
           font-weight: normal;
           font-style: normal;
-          font-size: 18px;
+          font-size: 16px;
           display: inline-block;
           line-height: 1;
           text-transform: none;
@@ -85,37 +87,38 @@ export class WccSidebar extends DeesElement {
           white-space: nowrap;
           direction: ltr;
           font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
-          opacity: 0.7;
+          opacity: 0.5;
         }
 
         .selectOption {
           user-select: none;
           position: relative;
-          margin: 2px 8px;
-          padding: 8px 12px;
+          margin: 0.125rem 0.5rem;
+          padding: 0.5rem 0.75rem;
           transition: all 0.15s ease;
           display: grid;
-          grid-template-columns: 24px 1fr;
+          grid-template-columns: 20px 1fr;
           align-items: center;
-          gap: 8px;
-          border-radius: calc(var(--radius) * 0.5);
+          gap: 0.5rem;
+          border-radius: var(--radius);
           cursor: pointer;
-          font-size: 13px;
-          color: var(--muted-foreground);
+          font-size: 0.75rem;
+          color: #999;
+          background: transparent;
         }
         
         .selectOption:hover {
-          background: var(--secondary);
-          color: var(--foreground);
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
         }
 
         .selectOption:hover .material-symbols-outlined {
-          opacity: 1;
+          opacity: 0.7;
         }
 
         .selectOption.selected {
-          background: var(--primary);
-          color: var(--primary-foreground);
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
         }
 
         .selectOption.selected .material-symbols-outlined {
@@ -124,8 +127,8 @@ export class WccSidebar extends DeesElement {
         }
 
         .selectOption.selected:hover {
-          background: var(--primary);
-          color: var(--primary-foreground);
+          background: rgba(59, 130, 246, 0.2);
+          color: var(--primary);
         }
 
         .selectOption .text {
@@ -133,7 +136,7 @@ export class WccSidebar extends DeesElement {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          font-weight: 500;
+          font-weight: 400;
         }
 
         ::-webkit-scrollbar {
@@ -145,12 +148,12 @@ export class WccSidebar extends DeesElement {
         }
 
         ::-webkit-scrollbar-thumb {
-          background: var(--secondary);
+          background: rgba(255, 255, 255, 0.1);
           border-radius: 4px;
         }
 
         ::-webkit-scrollbar-thumb:hover {
-          background: var(--muted);
+          background: rgba(255, 255, 255, 0.2);
         }
       </style>
       <div class="menu">