finish examples

examples/solid/package-lock.json

@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "overlayscrollbars": "file:../../packages/overlayscrollbars/dist",
         "overlayscrollbars-vue": "file:../../packages/overlayscrollbars-solid/dist",
         "solid-js": "^1.5.1"
       },
@@ -23,6 +24,10 @@
         "solid-js": "^1.5.1"
       }
     },
+    "../../packages/overlayscrollbars/dist": {
+      "version": "2.0.0-beta.3",
+      "license": "MIT"
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -1255,6 +1260,10 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "node_modules/overlayscrollbars": {
+      "resolved": "../../packages/overlayscrollbars/dist",
+      "link": true
+    },
     "node_modules/overlayscrollbars-vue": {
       "resolved": "../../packages/overlayscrollbars-solid/dist",
       "link": true
@@ -2319,6 +2328,9 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "overlayscrollbars": {
+      "version": "file:../../packages/overlayscrollbars/dist"
+    },
     "overlayscrollbars-vue": {
       "version": "file:../../packages/overlayscrollbars-solid/dist",
       "requires": {}

examples/solid/package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "dependencies": {
+    "overlayscrollbars": "file:../../packages/overlayscrollbars/dist",
     "overlayscrollbars-vue": "file:../../packages/overlayscrollbars-solid/dist",
     "solid-js": "^1.5.1"
   },

examples/solid/src/App.module.css

@@ -1,28 +1,8 @@
-.App {
-  text-align: center;
-}
-
 .logo {
   animation: logo-spin infinite 20s linear;
-  height: 40vmin;
   pointer-events: none;
 }
 
-.header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.link {
-  color: #b318f0;
-}
-
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

examples/solid/src/App.tsx

@@ -5,23 +5,12 @@ import logo from './logo.svg';
 
 const App: Component = () => {
   return (
-    <div class={styles.App}>
-      <header class={styles.header}>
-        <img src={logo} class={styles.logo} alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <OverlayScrollbarsComponent element="span" />
-        <a
-          class={styles.link}
-          href="https://github.com/solidjs/solid"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn Solid
-        </a>
-      </header>
-    </div>
+    <OverlayScrollbarsComponent
+      style={{ width: '222px', height: '222px' }}
+      options={{ scrollbars: { theme: 'os-theme-light' } }}
+    >
+      <img src={logo} class={styles.logo} alt="logo" width="333" height="333" />
+    </OverlayScrollbarsComponent>
   );
 };
 

examples/solid/src/index.css

@@ -1,13 +1,20 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

examples/solid/src/index.tsx

@@ -1,4 +1,5 @@
 /* @refresh reload */
+import 'overlayscrollbars/overlayscrollbars.css';
 import { render } from 'solid-js/web';
 
 import './index.css';