use new button styling

src/_includes/partials/card-blog.njk

@@ -10,7 +10,7 @@
     <div slot="tag" webc:nokeep>
       {% for tag in item.data.tags %}
         {% if tag != "posts" %}
-          <span class="button post-tag">{{ tag }}</span>
+          <span class="button" data-small-button>{{ tag }}</span>
         {% endif %}
       {% endfor %}
     </div>

src/_includes/partials/details.njk

@@ -1,7 +1,7 @@
 <div class="details flow">
   <div class="control | cluster" aria-label="{{ meta.details.aria }}">
-    <button id="expandAll" class="button post-tag">{{ meta.details.expand }}</button>
-    <button id="collapseAll" class="button post-tag">{{ meta.details.collapse }}</button>
+    <button id="expandAll" class="button" data-small-button>{{ meta.details.expand }}</button>
+    <button id="collapseAll" class="button" data-small-button>{{ meta.details.collapse }}</button>
   </div>
   {%- for item in itemList | alphabetic -%}
     <details id="{{ item.data.title | slugify }}">

src/_includes/partials/theme-switch.njk

@@ -7,10 +7,10 @@
     data-theme-switcher
   >
     <h2 id="theme-switcher-label">{{ meta.themeSwitch.title }}</h2>
-    <button class="button" id="light-theme-toggle" data-theme="light">
+    <button class="button" id="light-theme-toggle" data-theme="light" data-ghost-button data-small-button>
       <span>{{ meta.themeSwitch.light }}</span>
     </button>
-    <button class="button" id="dark-theme-toggle" data-theme="dark">
+    <button class="button" id="dark-theme-toggle" data-theme="dark" data-ghost-button data-small-button>
       <span>{{ meta.themeSwitch.dark }}</span>
     </button>
   </div>

src/_layouts/post.njk

@@ -21,7 +21,7 @@ schema: blog
       %}
         <!-- tags -->
         {% for tag in tags %}{% if tag != "posts" %}
-          <a class="button post-tag" href="/tags/{{ tag }}"> {{ tag }} </a>
+          <a class="button" href="/tags/{{ tag }}" data-small-button> {{ tag }} </a>
         {% endif %}{% endfor %}
       {% endif %}
     </p>

src/assets/css/global/blocks/theme-switch.css

@@ -3,22 +3,12 @@
   font-family: var(--font-base);
 }
 
-.theme-switch .button {
-  --button-border: var(--color-bg-accent-2);
-  border-radius: var(--border-radius);
-  font-size: var(--size-step-min-2);
-  padding: 0.1rem 0.625rem;
-  font-weight: var(--font-bold);
-  min-block-size: 1.5em;
-  text-transform: uppercase;
-}
-
 .theme-switch .button[aria-pressed='true'] {
-  --_color-primary-contrast: color-mix(in oklab, var(--color-primary) 85%, var(--color-base-dark));
-  --button-bg: var(--_color-primary-contrast);
-  --button-text: var(--color-base-light);
-  --button-border: var(--_color-primary-contrast);
-  outline-color: var(--_color-primary-contrast);
+  --_color-contrast: var(--color-tertiary);
+  --button-bg: var(--_color-contrast);
+  --button-color: var(--color-dark);
+  --button-border-color: var(--_color-contrast);
+  outline-color: var(--_color-contrast);
 }
 
 /* Hide without JS */