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

- Adapt documentation to new styles

docs/src/pages/framed/TreeView/TreeView.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>

docs/src/pages/framed/TreeView/TreeViewActive.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>

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

@@ -51,13 +51,13 @@
 
 <TreeView
   bind:this="{treeview}"
-  bind:expandedIds
+  bind:expandedIds="{expandedIds}"
   labelText="Cloud Products"
   children="{children}"
 />
 
 <style>
   div {
-    margin-bottom: var(--bx-spacing-05);
+    margin-bottom: var(--cds-spacing-05);
   }
 </style>

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

@@ -59,13 +59,13 @@
 
 <TreeView
   bind:this="{treeview}"
-  bind:expandedIds
+  bind:expandedIds="{expandedIds}"
   labelText="Cloud Products"
   children="{children}"
 />
 
 <style>
   div {
-    margin-bottom: var(--bx-spacing-05);
+    margin-bottom: var(--cds-spacing-05);
   }
 </style>

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

@@ -56,6 +56,6 @@
 
 <style>
   div {
-    margin-bottom: var(--bx-spacing-05);
+    margin-bottom: var(--cds-spacing-05);
   }
 </style>

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

@@ -62,6 +62,6 @@
 
 <style>
   div {
-    margin-bottom: var(--bx-spacing-05);
+    margin-bottom: var(--cds-spacing-05);
   }
 </style>

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

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

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

@@ -77,8 +77,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)}"
@@ -89,6 +89,6 @@
 
 <style>
   div {
-    margin-top: var(--bx-spacing-05);
+    margin-top: var(--cds-spacing-05);
   }
 </style>

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>

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

@@ -49,8 +49,8 @@
   size="xs"
   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)}"
@@ -61,6 +61,6 @@
 
 <style>
   div {
-    margin-top: var(--bx-spacing-05);
+    margin-top: var(--cds-spacing-05);
   }
 </style>