fix: rename css variable from dim to subtle

Author: saurabhdaware

README.md

@@ -68,10 +68,35 @@ import "bsky-widget";
 | show-banner      | hide / show your banner (only applicable if you have a banner) | "true" (default) or "false" |
 | theme            | theme of the card (`dark`, `dim`, `auto`, `auto-dim`, `light`) | "light"                     |
 
-## Migration from v0.0 -> v0.1
-
 
+## Override Styles
+
+You can go ahead and override any of these styles to customize your card further, create custom themes, or adjust the card in your website's layout
+
+```css
+bsky-widget {
+  --bsky-background: #fff;
+  --bsky-primary: #1185fe;
+  --bsky-primary-hover: #4ca2fe;
+  --bsky-text-on-primary: #fff;
+  --bsky-text-on-background: #0b0f14;
+  --bsky-text-on-background-subtle: #42576c;
+  --bsky-text-large: 1.4rem;
+  --bsky-text-large-line-height: 1.8rem;
+  --bsky-text-medium: 1rem;
+  --bsky-text-small: 0.9rem;
+
+  font-family: Arial, Helvetica, sans-serif, -apple-system, sans-serif;
+  width: 350px;
+  max-width: 100%;
+  min-height: 170px;
+  display: inline-block;
+  box-shadow: 1px 1px 8px 1px #0002;
+  border-radius: 8px;
+}
+```
 
+## Migration from v0.0 -> v0.1
 
 > [!Note]
 >

lib/styles.css

@@ -9,7 +9,7 @@
   --bsky-primary-hover: #4ca2fe;
   --bsky-text-on-primary: #fff;
   --bsky-text-on-background: #0b0f14;
-  --bsky-text-on-background-dim: #42576c;
+  --bsky-text-on-background-subtle: #42576c;
   --bsky-text-large: 1.4rem;
   --bsky-text-large-line-height: 1.8rem;
   --bsky-text-medium: 1rem;
@@ -38,26 +38,26 @@
 :host([theme="dark"]) {
   --bsky-background: #000000;
   --bsky-text-on-background: #F1F3F5;
-  --bsky-text-on-background-dim: #8c9eb2;
+  --bsky-text-on-background-subtle: #8c9eb2;
 }
 
 :host([theme="dim"]) {
   --bsky-background: #171E27;
   --bsky-text-on-background: #F1F3F5;
-  --bsky-text-on-background-dim: #aebbc9;
+  --bsky-text-on-background-subtle: #aebbc9;
 }
 
 @media (prefers-color-scheme: dark) {
   :host([theme="auto"]) {
     --bsky-background: #000000;
     --bsky-text-on-background: #F1F3F5;
-    --bsky-text-on-background-dim: #8c9eb2;
+    --bsky-text-on-background-subtle: #8c9eb2;
   }
 
   :host([theme="auto-dim"]) {
     --bsky-background: #171E27;
     --bsky-text-on-background: #F1F3F5;
-    --bsky-text-on-background-dim: #aebbc9;
+    --bsky-text-on-background-subtle: #aebbc9;
   }
 }
 
@@ -180,8 +180,8 @@ a:hover {
   gap: 2px;
 }
 
-.dim-text {
-  color: var(--bsky-text-on-background-dim);
+.subtle-text {
+  color: var(--bsky-text-on-background-subtle);
 }
 
 .followers {

lib/template.abell

@@ -16,10 +16,10 @@
     </div>
     <div class="name-handle-container padded">
       <h2>{{ props.displayName }}</h2>
-      <p class="handle dim-text">@{{ props.handle }}</p>
+      <p class="handle subtle-text">@{{ props.handle }}</p>
       <div class="followers">
-        <p><span class="count">{{ formatFollowCount(props.followersCount) }}</span> <span class="dim-text">Followers</span></p>
-        <p><span class="count">{{ formatFollowCount(props.followsCount) }}</span> <span class="dim-text">Following</span></p>
+        <p><span class="count">{{ formatFollowCount(props.followersCount) }}</span> <span class="subtle-text">Followers</span></p>
+        <p><span class="count">{{ formatFollowCount(props.followsCount) }}</span> <span class="subtle-text">Following</span></p>
       </div>
     </div>
   </div>

test.html

@@ -11,7 +11,7 @@
         --bsky-primary-hover: #ae75f3;
         --bsky-text-on-primary: #000;
         --bsky-text-on-background: #ddd;
-        --bsky-text-on-background-dim: #ddd;
+        --bsky-text-on-background-subtle: #ddd;
         --bsky-text-large: 1.5rem;
         --bsky-text-large-line-height: 1.9rem;
         --bsky-text-medium: 1.1rem;