From 4034a6d942e27f083daa4e7d578c0bd9c1034c86 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Tue, 16 Apr 2024 08:43:38 -0700
Subject: [PATCH] fix: class names

---
 package.json                                  |  2 +-
 .../partials/nav/theme-toggle.liquid          |  2 +-
 src/assets/styles/components/buttons.css      | 14 ++++-----
 src/assets/styles/components/theme-toggle.css | 10 +++----
 .../2024/adding-a-light-dark-theme-toggle.md  | 26 ++++++++--------
 .../building-a-theme-toggle-web-component.md  | 30 +++++++++----------
 6 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 610936c4..07973364 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "11.3.4",
+  "version": "11.3.5",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/partials/nav/theme-toggle.liquid b/src/_includes/partials/nav/theme-toggle.liquid
index fe448174..d1d0dce0 100644
--- a/src/_includes/partials/nav/theme-toggle.liquid
+++ b/src/_includes/partials/nav/theme-toggle.liquid
@@ -2,7 +2,7 @@
 <span class="client-side">
   <theme-toggle>
     <button
-      class="theme__toggle"
+      class="theme-toggle"
       aria-label="Toggle site theme">
       <span class="light">
         {% tablericon "sun" "Toggle light theme" %}
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index ef90585e..4eeb78be 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -1,5 +1,5 @@
 button {
-  &:not(.theme__toggle, .share) {
+  &:not(.theme-toggle, .share) {
     border-radius: var(--rounded-full);
     padding: var(--sizing-sm) var(--sizing-lg);
     margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@@ -17,9 +17,9 @@ button {
     transition-property: all;
   }
 
-  &:not(.theme__toggle, .share, .active):hover,
-  &:not(.theme__toggle, .share, .active):active,
-  &:not(.theme__toggle, .share, .active):focus {
+  &:not(.theme-toggle, .share, .active):hover,
+  &:not(.theme-toggle, .share, .active):active,
+  &:not(.theme-toggle, .share, .active):focus {
     background-color: var(--accent-color-hover);
     border-color: var(--accent-color-hover);
     transition-timing-function: var(--transition-ease-in-out);
@@ -37,9 +37,9 @@ button {
     background: transparent;
   }
 
-  &.secondary:not(.theme__toggle, .share):hover,
-  &.secondary:not(.theme__toggle, .share):active,
-  &.secondary:not(.theme__toggle, .share):focus {
+  &.secondary:not(.theme-toggle, .share):hover,
+  &.secondary:not(.theme-toggle, .share):active,
+  &.secondary:not(.theme-toggle, .share):focus {
     color: var(--accent-color-hover);
     background: transparent;
   }
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 3e1136e8..15a54d51 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -1,4 +1,4 @@
-.theme__toggle {
+.theme-toggle {
   background: transparent;
   padding: 0;
 
@@ -21,21 +21,21 @@
 }
 
 .theme__dark {
-  & .theme__toggle > .light {
+  & .theme-toggle > .light {
     display: inline;
   }
 
-  & .theme__toggle > .dark {
+  & .theme-toggle > .dark {
     display: none;
   }
 }
 
 .theme__light {
-  & .theme__toggle > .light {
+  & .theme-toggle > .light {
     display: none;
   }
 
-  & .theme__toggle > .dark {
+  & .theme-toggle > .dark {
     display: inline;
   }
 }
\ No newline at end of file
diff --git a/src/posts/2024/adding-a-light-dark-theme-toggle.md b/src/posts/2024/adding-a-light-dark-theme-toggle.md
index af8bf45a..94319bf0 100644
--- a/src/posts/2024/adding-a-light-dark-theme-toggle.md
+++ b/src/posts/2024/adding-a-light-dark-theme-toggle.md
@@ -10,7 +10,7 @@ I built the button as a short Liquid partial:
 
 {% raw %}
 ```liquid
-<li class="theme__toggle client-side">
+<li class="theme-toggle client-side">
   <span class="placeholder">
     {% tablericon "placeholder" "Toggle theme placeholder" %}
   </span>
@@ -70,7 +70,7 @@ With the following JavaScript set in `assets/scripts/index.js` to add the `click
 
 ```javascript
 ;(async function() {
-  const btn = document.querySelector('.theme__toggle');
+  const btn = document.querySelector('.theme-toggle');
   btn.addEventListener('click', () => {
     document.body.classList.toggle('theme__light');
     document.body.classList.toggle('theme__dark');
@@ -95,36 +95,36 @@ Finally, the theme is updated based on the body class applied by the JavaScript,
 
 ```css
 /* theme toggle */
-.theme__toggle,
-.theme__toggle svg {
+.theme-toggle,
+.theme-toggle svg {
   cursor: pointer;
 }
 
-.theme__toggle > .light svg { stroke: var(--sun) !important; }
-.theme__toggle > .dark svg { stroke: var(--moon) !important; }
+.theme-toggle > .light svg { stroke: var(--sun) !important; }
+.theme-toggle > .dark svg { stroke: var(--moon) !important; }
 
-.theme__toggle > .light ,
-.theme__toggle > .dark {
+.theme-toggle > .light ,
+.theme-toggle > .dark {
   display: none;
 }
 
-:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
+:is(.theme__light, .theme__dark) .theme-toggle > .placeholder {
   display: none;
 }
 
-.theme__dark .theme__toggle > .light {
+.theme__dark .theme-toggle > .light {
   display: inline;
 }
 
-.theme__dark .theme__toggle > .dark {
+.theme__dark .theme-toggle > .dark {
   display: none;
 }
 
-.theme__light .theme__toggle > .light {
+.theme__light .theme-toggle > .light {
   display: none;
 }
 
-.theme__light .theme__toggle > .dark {
+.theme__light .theme-toggle > .dark {
   display: inline;
 }
 ...
diff --git a/src/posts/2024/building-a-theme-toggle-web-component.md b/src/posts/2024/building-a-theme-toggle-web-component.md
index 0271dd58..57b4a021 100644
--- a/src/posts/2024/building-a-theme-toggle-web-component.md
+++ b/src/posts/2024/building-a-theme-toggle-web-component.md
@@ -12,7 +12,7 @@ Much like my `now-playing` component, I start out by registering the component t
 const themeToggleTemplate = document.createElement('template')
 
 themeToggleTemplate.innerHTML = `
-  <button class="theme__toggle">
+  <button class="theme-toggle">
     <span class="light"></span>
     <span class="dark"></span>
   </button>
@@ -37,7 +37,7 @@ My verbose, `connectedCallback` handles appending the template and appending the
 ```javascript
 async connectedCallback() {
     this.append(this.template)
-    const btn = this.querySelector('.theme__toggle')
+    const btn = this.querySelector('.theme-toggle')
     const setTheme = (isOnLoad) => {
       const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
       const currentTheme = localStorage?.getItem('theme')
@@ -75,41 +75,41 @@ async connectedCallback() {
 The CSS for this is straightforward and contains a few vars specific to my implementation (related to icon color and SVG `stroke-width`):
 
 ```css
-.theme__toggle {
+.theme-toggle {
   background: transparent;
   padding: 0;
 }
 
-.theme__toggle svg {
+.theme-toggle svg {
   cursor: pointer;
 }
 
-.theme__toggle:hover,
-.theme__toggle svg:hover {
+.theme-toggle:hover,
+.theme-toggle svg:hover {
   stroke-width: var(--stroke-width-bold);
 }
 
-.theme__toggle > .light svg { stroke: var(--sun) !important; }
-.theme__toggle > .dark svg { stroke: var(--moon) !important; }
+.theme-toggle > .light svg { stroke: var(--sun) !important; }
+.theme-toggle > .dark svg { stroke: var(--moon) !important; }
 
-.theme__toggle > .light ,
-.theme__toggle > .dark {
+.theme-toggle > .light ,
+.theme-toggle > .dark {
   display: none;
 }
 
-.theme__dark .theme__toggle > .light {
+.theme__dark .theme-toggle > .light {
   display: inline;
 }
 
-.theme__dark .theme__toggle > .dark {
+.theme__dark .theme-toggle > .dark {
   display: none;
 }
 
-.theme__light .theme__toggle > .light {
+.theme__light .theme-toggle > .light {
   display: none;
 }
 
-.theme__light .theme__toggle > .dark {
+.theme__light .theme-toggle > .dark {
   display: inline;
 }
 ```
@@ -119,7 +119,7 @@ The final template that leverages the component looks like this:
 ```liquid
 <script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
 <template id="theme-toggle-template">
-  <button class="theme__toggle">
+  <button class="theme-toggle">
     <span class="light">
       {% tablericon "sun" "Toggle light theme" %}
     </span>