chore: set up all component styles, fonts, and themes

- Adapt documentation to new styles

docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte

@@ -48,8 +48,8 @@
 <TreeView
   labelText="Cloud Products"
   children="{children}"
-  bind:activeId
-  bind:selectedIds
+  bind:activeId="{activeId}"
+  bind:selectedIds="{selectedIds}"
   on:select="{({ detail }) => console.log('select', detail)}"
   on:toggle="{({ detail }) => console.log('toggle', detail)}"
   on:focus="{({ detail }) => console.log('focus', detail)}"
@@ -60,6 +60,6 @@
 
 <style>
   div {
-    margin-top: var(--bx-spacing-05);
+    margin-top: var(--cds-spacing-05);
   }
 </style>