From 384824ccea281e84e49d38ceed50e56790d351e1 Mon Sep 17 00:00:00 2001
From: Nick Thomas <nichoth@nichoth.com>
Date: Fri, 5 Apr 2024 11:01:48 -0700
Subject: [PATCH] better docs

---
 README.md     | 11 ++++++++++-
 src/index.css |  2 +-
 src/index.ts  |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 2fdc1bb..4390151 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,15 @@ Link to the minified file in HTML:
 <script type="module" src="./scroll-progress.min.js"></script>
 ```
 
+## css
+Override the variable `--scroll-progress-color` to customize the color.
+
+```css
+.scroll-progress {
+    --scroll-progress-color: pink;
+}
+```
+
 ## examples
 
 ### JS
@@ -74,7 +83,7 @@ Link to the minified file in HTML:
 // index.ts
 import Tonic from '@bicycle-codes/tonic'
 import { ScrollProgress } from '@bicycle-codes/scroll-progress'
-import './index.css'
+import '@bicycle-codes/scroll-progress.css'
 import '@bicycle-codes/scroll-progress'
 
 function ScrollExample () {
diff --git a/src/index.css b/src/index.css
index 7fc786f..5a6f871 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,7 @@
     --scroll: 0;
 }
 
-.scroll-position {
+.scroll-progress {
     min-height: 10px;
     width: var(--scroll);
     position: fixed;
diff --git a/src/index.ts b/src/index.ts
index 6ba053d..d8858f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -42,7 +42,7 @@ export class ScrollProgress extends Tonic {
     }
 
     render () {
-        const classes = (['scroll-position'])
+        const classes = (['scroll-progress'])
             // @ts-expect-error broken upstream
             .concat((this.props.class || '').split(' '))
             .filter(Boolean)