From e1aa9bc6700b0263dfa07fa5b9df7950eea95885 Mon Sep 17 00:00:00 2001
From: James Martinez <jmar910@gmail.com>
Date: Wed, 15 Nov 2023 14:22:54 -0500
Subject: [PATCH 1/3] feat: add disabled state to toggle

---
 addon/components/mox/toggle.hbs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/addon/components/mox/toggle.hbs b/addon/components/mox/toggle.hbs
index 1505688..6eb9d31 100644
--- a/addon/components/mox/toggle.hbs
+++ b/addon/components/mox/toggle.hbs
@@ -7,6 +7,7 @@
       checked={{this.isChecked}}
       {{on "change" this.toggleAction}}
       data-test-mox-toggle
+      disabled={{@isDisabled}}
     />
     {{#if @label}}
       <label
@@ -18,4 +19,4 @@
       </label>
     {{/if}}
   </div>
-</div>
\ No newline at end of file
+</div>

From 65f07f4b2e90585cc9879e99f46445470326a655 Mon Sep 17 00:00:00 2001
From: James Martinez <jmar910@gmail.com>
Date: Tue, 28 Nov 2023 17:38:32 -0500
Subject: [PATCH 2/3] feat: dark/light consistency across mox components

---
 addon/components/mox/article.hbs          |   4 +-
 addon/components/mox/card.hbs             |  18 +++-
 addon/components/mox/input.hbs            |   2 +-
 addon/components/mox/link-button.hbs      |  14 ++-
 addon/components/mox/modal.hbs            |   2 +-
 addon/components/mox/section.hbs          |   2 +-
 addon/components/mox/select.hbs           |   4 +-
 addon/components/mox/theme-switch.hbs     |  16 +--
 addon/components/mxa/select.hbs           |  33 +++---
 addon/components/mxa/tags-input.hbs       |   6 +-
 addon/components/mxa/typeahead-select.hbs | 117 ++++++++++------------
 addon/styles/mx-ui-components.css         |  59 +----------
 12 files changed, 113 insertions(+), 164 deletions(-)

diff --git a/addon/components/mox/article.hbs b/addon/components/mox/article.hbs
index efb5d8c..90213bd 100644
--- a/addon/components/mox/article.hbs
+++ b/addon/components/mox/article.hbs
@@ -1,7 +1,7 @@
 <article
-  class="w-full p-8 bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition text-gray-700 dark:text-white shadow-lg shadow-gray-800/20"
+  class="w-full p-8 bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition text-gray-700 dark:text-white drop-shadow shadow-gray-800/20"
   data-test-mox-article
   ...attributes
 >
   {{yield}}
-</article>
\ No newline at end of file
+</article>
diff --git a/addon/components/mox/card.hbs b/addon/components/mox/card.hbs
index 65c3938..2844454 100644
--- a/addon/components/mox/card.hbs
+++ b/addon/components/mox/card.hbs
@@ -1,5 +1,5 @@
 <article
-  class="w-full bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-gray-700 dark:text-white shadow-lg shadow-gray-800/20"
+  class="w-full bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-gray-700 dark:text-white drop-shadow"
   data-test-mox-card
   ...attributes
 >
@@ -8,16 +8,25 @@
     <Mox::Card::Main @route={{@route}} @model={{@model}} @onClick={{@onClick}}>
 
       {{#if (has-block "icon")}}
-        <div class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white rounded p-3" data-test-mox-card-icon>
+        <div
+          class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white rounded p-3"
+          data-test-mox-card-icon
+        >
           {{yield to="icon"}}
         </div>
       {{/if}}
 
       <div class="overflow-hidden">
-        <h3 class="text-xl font-semibold normal-case text-left overflow-hidden truncate flex gap-x-2 text-gray-800 dark:text-white items-center" data-test-mox-card-title>
+        <h3
+          class="text-xl font-semibold normal-case text-left overflow-hidden truncate flex gap-x-2 text-gray-800 dark:text-white items-center"
+          data-test-mox-card-title
+        >
           {{yield to="title"}}
         </h3>
-        <p class="text-gray-500 dark:text-gray-300 text-xs truncate text-left" data-test-mox-card-subtitle>
+        <p
+          class="text-gray-500 dark:text-gray-300 text-xs truncate text-left"
+          data-test-mox-card-subtitle
+        >
           {{yield to="subtitle"}}
         </p>
       </div>
@@ -36,7 +45,6 @@
         </Mox::Card::Aside>
       {{/if}}
 
-
       {{#if (has-block "menu")}}
         <div
           class="flex items-center justify-center p-4 cursor-pointer h-full text-gray-500 dark:text-white"
diff --git a/addon/components/mox/input.hbs b/addon/components/mox/input.hbs
index a09e3c1..4014419 100644
--- a/addon/components/mox/input.hbs
+++ b/addon/components/mox/input.hbs
@@ -1,7 +1,7 @@
 {{#if @label}}
   <Mox::Label for={{@id}} @isRequired={{@isRequired}}>{{@label}}</Mox::Label>
 {{/if}}
-<div class="flex flex-col justify-center space-y-1 w-full">
+<div class="flex flex-col justify-center w-full space-y-1">
   <input
     id={{@id}}
     type="text"
diff --git a/addon/components/mox/link-button.hbs b/addon/components/mox/link-button.hbs
index 64123fe..15122f6 100644
--- a/addon/components/mox/link-button.hbs
+++ b/addon/components/mox/link-button.hbs
@@ -1,16 +1,20 @@
 {{#if @route}}
-  <Mox::LinkTo @route={{@route}} @model={{@model}}
-    class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-300 dark:text-gray-300 transition duration-300"
-    data-test-mox-link={{@route}} ...attributes>
+  <Mox::LinkTo
+    @route={{@route}}
+    @model={{@model}}
+    class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-300 transition duration-300"
+    data-test-mox-link={{@route}}
+    ...attributes
+  >
     {{yield}}
   </Mox::LinkTo>
 {{else}}
   <a
     href={{@externalUrl}}
     target="_blank"
-    class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-300 dark:text-gray-300 transition duration-300"
+    class="mox-link-button cursor-pointer block w-fit rounded-md font-semibold px-4 py-2 text-gray-800 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-300 transition duration-300"
     data-test-mox-link
     rel="noopener noreferrer"
     ...attributes
   >{{yield}}</a>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/addon/components/mox/modal.hbs b/addon/components/mox/modal.hbs
index c4561d0..7f0f2ce 100644
--- a/addon/components/mox/modal.hbs
+++ b/addon/components/mox/modal.hbs
@@ -1,5 +1,5 @@
 <div
-  class="fixed z-10 inset-0 overflow-y-auto text-gray-700 dark:text-white shadow-lg shadow-gray-800/20"
+  class="fixed z-10 inset-0 overflow-y-auto text-gray-700 dark:text-white drop-shadow"
   data-test-modal
 >
   <div
diff --git a/addon/components/mox/section.hbs b/addon/components/mox/section.hbs
index 0766737..ffea406 100644
--- a/addon/components/mox/section.hbs
+++ b/addon/components/mox/section.hbs
@@ -1,5 +1,5 @@
 <section
-  class="w-full bg-white dark:bg-gray-800 rounded-lg border-solid border-2 border-white dark:border-gray-800 transition hover:border-cyan-500 focus-within:border-cyan-700 text-gray-700 dark:text-white shadow-lg p-8"
+  class="w-full bg-white dark:bg-gray-800 rounded-lg border border-transparent dark:border-gray-700 focus-within:border-cyan-700 text-gray-700 dark:text-white drop-shadow p-8"
   ...attributes
 >
 
diff --git a/addon/components/mox/select.hbs b/addon/components/mox/select.hbs
index 1ae742b..c5bbd9b 100644
--- a/addon/components/mox/select.hbs
+++ b/addon/components/mox/select.hbs
@@ -36,7 +36,7 @@
     </button>
     {{#if this.isShowingOptions}}
       <div
-        class="absolute mt-1 min-w-min w-full rounded-md bg-gray-50 dark:bg-gray-800 shadow-lg z-10"
+        class="absolute mt-1 min-w-min w-full rounded-md bg-gray-50 dark:bg-gray-800 drop-shadow z-10"
         {{on-click-outside (fn (mut this.isShowingOptions) false) "document" capture=true}}
       >
         <ul
@@ -65,4 +65,4 @@
     {{/if}}
   </div>
   <Mox::FormError @error={{@error}} id={{concat @id "-error-message"}} data-test-mox-select-error />
-</div>
\ No newline at end of file
+</div>
diff --git a/addon/components/mox/theme-switch.hbs b/addon/components/mox/theme-switch.hbs
index abafe17..8143c1b 100644
--- a/addon/components/mox/theme-switch.hbs
+++ b/addon/components/mox/theme-switch.hbs
@@ -1,18 +1,20 @@
 <div class="mox-theme-switch" ...attributes>
-  <div class="flex items-center space-x-2 relative {{if this.isChecked "text-gray-800"}}">
-    {{!-- template-lint-disable require-input-label --}}
+  <div class="flex items-center space-x-2 relative {{if this.isChecked 'text-gray-800'}}">
+    {{! template-lint-disable require-input-label }}
     <input
       id={{this.fieldId}}
       aria-label={{this.label}}
       type="checkbox"
-      class="transform appearance-none outline-none
-      flex items-center rounded-full p-1 cursor-pointer transition"
+      class="flex items-center w-10 h-6 p-1 transition transform bg-gray-200 border-none rounded-full outline-none appearance-none cursor-pointer checked:bg-none after:h-[18px] after:w-[18px] after:absolute after:left-[3px] after:right-auto after:block after:rounded-2xl after:outline-none after:translate-x-0 after:transition-transform after:ease-in-out after:bg-white checked:bg-gray-600 checked:text-gray-600 focus:outline focus:outline-2 focus:outline-cyan-500 focus:shadow-none focus:outline-offset-0 after:top-[3px] checked:after:translate-x-[15px] checked:after:bg-gray-800 checked:transition checked:after:transition"
       checked={{this.isChecked}}
-      {{on 'change' (fn this.switchTheme this.otherTheme)}}
+      {{on "change" (fn this.switchTheme this.otherTheme)}}
       data-test-mox-theme-switch
     />
-    {{!-- template-lint-disable require-input-label --}}
-    <div class="mox-theme-switch-icon pointer-events-none {{if this.isChecked "is-checked"}}">
+    {{! template-lint-disable require-input-label }}
+    <div
+      class="mox-theme-switch-icon pointer-events-none absolute top-1 -left-1 right-auto block outline-none translate-x-0 transition-transform ease-in-out
+        {{if this.isChecked 'translate-x-[15px]'}}"
+    >
       {{#if (eq this.currentTheme "dark")}}
         <div class="text-white" data-test-mox-theme-switch-current="dark">
           {{yield to="dark-icon"}}
diff --git a/addon/components/mxa/select.hbs b/addon/components/mxa/select.hbs
index 71aa828..6fa4555 100644
--- a/addon/components/mxa/select.hbs
+++ b/addon/components/mxa/select.hbs
@@ -6,22 +6,23 @@
       aria-expanded="true"
       aria-labelledby="listbox-label"
       class="relative w-full
-        {{if @isDisabled 'bg-gray-100 border-gray-100 text-gray-500' 'bg-white border-gray-300 focus:border-purple-600 focus:ring-purple-600 focus:ring-1'}}
-         border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default
-         focus:outline-none sm:text-sm"
+        {{if
+          @isDisabled
+          'bg-gray-100 border-gray-100 text-gray-500'
+          'bg-white border-gray-300 focus:border-purple-600 focus:ring-purple-600 focus:ring-1'
+        }}
+        border rounded shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none sm:text-sm"
       data-test-select-button
       ...attributes
-      {{on 'click' this.toggleOptions}}
+      {{on "click" this.toggleOptions}}
     >
       <span class="flex items-center">
         <span class="ml-1 block truncate" data-test-select-display-selected>
           {{this.selectedOptionName}}
         </span>
       </span>
-      <span
-        class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
-      >
-        {{!-- Heroicon name: selector --}}
+      <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        {{! Heroicon name: selector }}
         <svg
           class="h-5 w-5 text-gray-400"
           xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +38,7 @@
         </svg>
       </span>
     </button>
-    {{!--
+    {{!
       Select popover, show/hide based on select state.
 
       Entering: ""
@@ -46,15 +47,11 @@
       Leaving: "transition ease-in duration-100"
         From: "opacity-100"
         To: "opacity-0"
-    --}}
+    }}
     {{#if this.isShowingOptions}}
       <div
-        class="absolute mt-1 min-w-min w-full rounded-md bg-white shadow-lg z-10"
-        {{on-click-outside
-          (fn (mut this.isShowingOptions) false)
-          'document'
-          capture=true
-        }}
+        class="absolute mt-1 min-w-min w-full rounded-md bg-white drop-shadow z-10"
+        {{on-click-outside (fn (mut this.isShowingOptions) false) "document" capture=true}}
       >
         <ul
           tabindex="0"
@@ -76,11 +73,11 @@
               />
             {{/each}}
           {{/if}}
-          {{!--
+          {{!
             Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
             Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
-          --}}
+          }}
         </ul>
       </div>
     {{/if}}
diff --git a/addon/components/mxa/tags-input.hbs b/addon/components/mxa/tags-input.hbs
index b59ce40..5f4177c 100644
--- a/addon/components/mxa/tags-input.hbs
+++ b/addon/components/mxa/tags-input.hbs
@@ -20,7 +20,7 @@
           data-test-tags-selected={{tag}}
         >
           <span class="mr-1">{{tag}}</span>
-          {{!-- template-lint-disable no-invalid-interactive --}}
+          {{! template-lint-disable no-invalid-interactive }}
           <svg
             class="text-slate-100 fill-current h-3 w-3 pt-0.5"
             {{on "click" (fn this.removeTag tag)}}
@@ -28,7 +28,7 @@
           >
             <use xlink:href={{root-url "/svg-defs.svg#close-16"}}></use>
           </svg>
-          {{!-- template-lint-enable no-invalid-interactive --}}
+          {{! template-lint-enable no-invalid-interactive }}
         </div>
       {{/each}}
     </div>
@@ -45,7 +45,7 @@
   </div>
 
   {{#if this.foundTags}}
-    <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg z-10">
+    <div class="absolute mt-1 w-full rounded-md bg-white drop-shadow z-10">
       <ul
         tabindex="0"
         role="listbox"
diff --git a/addon/components/mxa/typeahead-select.hbs b/addon/components/mxa/typeahead-select.hbs
index 7cfd1f5..d033add 100644
--- a/addon/components/mxa/typeahead-select.hbs
+++ b/addon/components/mxa/typeahead-select.hbs
@@ -1,121 +1,114 @@
-<div class='relative' ...attributes>
+<div class="relative" ...attributes>
   {{#if @label}}
     <Mxa::Label for={{@id}} @isRequired={{@isRequired}}>{{@label}}</Mxa::Label>
   {{/if}}
   <div
-    class='flex items-center w-full rounded border {{if @isDisabled "border-gray-100" "border-gray-300"}} focus-within:outline-none focus-within:ring-purple-600 focus-within:border-purple-600' aria-owns={{@id}}
+    class="flex items-center w-full rounded border
+      {{if @isDisabled 'border-gray-100' 'border-gray-300'}}
+      focus-within:outline-none focus-within:ring-purple-600 focus-within:border-purple-600"
+    aria-owns={{@id}}
   >
     <Input
-      @type='text'
+      @type="text"
       id={{@id}}
       @value={{this.inputValue}}
-      class='rounded pl-2 pr-4 py-2 text-xs focus:outline-none w-full placeholder-slate-100 border-gray-300 disabled:bg-gray-100 disabled:border-gray-100 disabled:text-gray-500'
+      class="rounded pl-2 pr-4 py-2 text-xs focus:outline-none w-full placeholder-slate-100 border-gray-300 disabled:bg-gray-100 disabled:border-gray-100 disabled:text-gray-500"
       placeholder={{@placeholder}}
       data-test-typeahead-select-input
       disabled={{@isDisabled}}
-      aria-autocomplete='list'
-      aria-controls={{concat 'typeaheadselectlistbox' @id}}
-      autocomplete='off'
-      {{on 'focus' this.showMatches}}
-      {{on 'blur' this.hideMatches}}
-      {{on 'keydown' this.checkFocus}}
-      {{on-key 'Escape' this.escapeMatches}}
-      {{on-key 'ArrowDown' this.nextMatch}}
-      {{on-key 'ArrowUp' this.previousMatch}}
-      {{on-key 'Enter' (fn this.enterMatch this.internalSelectedOption)}}
+      aria-autocomplete="list"
+      aria-controls={{concat "typeaheadselectlistbox" @id}}
+      autocomplete="off"
+      {{on "focus" this.showMatches}}
+      {{on "blur" this.hideMatches}}
+      {{on "keydown" this.checkFocus}}
+      {{on-key "Escape" this.escapeMatches}}
+      {{on-key "ArrowDown" this.nextMatch}}
+      {{on-key "ArrowUp" this.previousMatch}}
+      {{on-key "Enter" (fn this.enterMatch this.internalSelectedOption)}}
     />
-    <span
-      class='ml-3 absolute right-0 flex items-center pr-2 pointer-events-none'
-    >
+    <span class="ml-3 absolute right-0 flex items-center pr-2 pointer-events-none">
       <svg
-        class='h-5 w-5 text-gray-400'
-        xmlns='http://www.w3.org/2000/svg'
-        viewBox='0 0 20 20'
-        fill='currentColor'
-        aria-hidden='true'
+        class="h-5 w-5 text-gray-400"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
       >
         <path
-          fill-rule='evenodd'
-          d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'
-          clip-rule='evenodd'
+          fill-rule="evenodd"
+          d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+          clip-rule="evenodd"
         ></path>
       </svg>
     </span>
   </div>
 
   <div
-    class='absolute mt-1 w-full rounded-md bg-white shadow-lg z-10
-      {{if
-        (or (not this.isShowingMatches) (eq this.matches.length 0))
-        'hidden'
-      }}'
+    class="absolute mt-1 w-full rounded-md bg-white drop-shadow z-10
+      {{if (or (not this.isShowingMatches) (eq this.matches.length 0)) 'hidden'}}"
     data-test-typeahead-matches
   >
-    {{!-- template-lint-disable no-positive-tabindex --}}
+    {{! template-lint-disable no-positive-tabindex }}
     <ul
-      id={{concat 'typeaheadselectlistbox' @id}}
-      tabindex='1'
-      role='listbox'
-      class='max-h-56 rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm'
+      id={{concat "typeaheadselectlistbox" @id}}
+      tabindex="1"
+      role="listbox"
+      class="max-h-56 rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
     >
-    {{!-- template-lint-enable no-positive-tabindex --}}
+      {{! template-lint-enable no-positive-tabindex }}
       {{#each this.matches as |match idx|}}
-        {{!-- template-lint-disable require-presentational-children --}}
+        {{! template-lint-disable require-presentational-children }}
         <li
-          id={{concat 'listbox-item-' idx}}
-          role='option'
-          class='text-gray-900 cursor-default select-none relative hover:bg-slate-5
+          id={{concat "listbox-item-" idx}}
+          role="option"
+          class="text-gray-900 cursor-default select-none relative hover:bg-slate-5
             {{if
               (eq
                 (get match this.optionValueKey)
                 (get this.internalSelectedOption this.optionValueKey)
               )
               'bg-slate-5'
-            }}'
+            }}"
           data-test-select-option
           aria-selected={{eq
             (get match this.optionValueKey)
             (get @selectedOption this.optionValueKey)
           }}
         >
-          {{!-- template-lint-disable no-invalid-interactive --}}
+          {{! template-lint-disable no-invalid-interactive }}
           <div
-            class='flex items-center cursor-pointer py-2 pl-3 pr-9'
+            class="flex items-center cursor-pointer py-2 pl-3 pr-9"
             data-test-select-option-button={{get match this.optionNameKey}}
-            {{on 'mousedown' (fn this.setSelectedOption match)}}
+            {{on "mousedown" (fn this.setSelectedOption match)}}
           >
-            <span class='ml-1 block font-normal truncate'>
+            <span class="ml-1 block font-normal truncate">
               {{get match this.optionNameKey}}
             </span>
           </div>
-          {{!-- template-lint-enable no-invalid-interactive --}}
-          {{#if
-            (eq
-              (get match this.optionValueKey)
-              (get @selectedOption this.optionValueKey)
-            )
-          }}
+          {{! template-lint-enable no-invalid-interactive }}
+          {{#if (eq (get match this.optionValueKey) (get @selectedOption this.optionValueKey))}}
             <span
-              class='absolute inset-y-0 right-0 flex items-center pr-4'
+              class="absolute inset-y-0 right-0 flex items-center pr-4"
               data-test-select-option-selected
             >
               <svg
-                class='h-5 w-5'
-                xmlns='http://www.w3.org/2000/svg'
-                viewBox='0 0 20 20'
-                fill='currentColor'
-                aria-hidden='true'
+                class="h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
               >
                 <path
-                  fill-rule='evenodd'
-                  d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
-                  clip-rule='evenodd'
+                  fill-rule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
                 ></path>
               </svg>
             </span>
           {{/if}}
         </li>
-        {{!-- template-lint-enable require-presentational-children --}}
+        {{! template-lint-enable require-presentational-children }}
       {{/each}}
     </ul>
   </div>
diff --git a/addon/styles/mx-ui-components.css b/addon/styles/mx-ui-components.css
index 3a8c017..4d2d311 100644
--- a/addon/styles/mx-ui-components.css
+++ b/addon/styles/mx-ui-components.css
@@ -1,24 +1,13 @@
-.mox-theme-switch input {
-  height: 1.5rem;
-  width: 2.5rem;
-  outline: 2px solid #e5e7eb; /* bg-gray-200 */
-  background-color: #e5e7eb; /* bg-gray-200 */
-  outline-offset: 0;
-  border: none;
-}
-
 .mox-toggle input {
   height: 1.3rem;
   width: 2.6rem;
 }
 
-.mox-theme-switch input:checked,
 .mox-toggle input:checked,
 .mxa-toggle input:checked {
   background-image: none;
 }
 
-.mox-theme-switch input::after,
 .mox-toggle input::after,
 .mxa-toggle input::after {
   content: '';
@@ -35,11 +24,6 @@
   transition-timing-function: ease-in-out;
 }
 
-.mox-theme-switch input::after,
-.mxa-toggle input::after {
-  background-color: #fff;
-}
-
 .mox-toggle input::after {
   height: 15px;
   width: 15px;
@@ -48,51 +32,12 @@
 }
 
 .mxa-toggle input::after {
+  background-color: #fff;
   height: 20px;
   width: 20px;
   top: 1px;
 }
 
-.mox-theme-switch input:checked {
-  background-color: #1f2937; /* bg-gray-800 */
-  outline: 2px solid #1f2937; /* bg-gray-800 */
-  color: #1f2937; /* bg-gray-800 */
-}
-
-.mox-theme-switch input:focus {
-  outline: 2px solid #06b6d4;
-  box-shadow: none;
-  outline-offset: 0;
-}
-
-.mox-theme-switch input::after {
-  height: 18px;
-  width: 18px;
-  top: 3px;
-  left: 3px;
-}
-
-.mox-theme-switch-icon {
-  position: absolute;
-  left: -4px;
-  top: 4px;
-  right: auto;
-  display: block;
-  outline: none;
-  transform: translateX(0);
-  transition: transform 0.15s;
-  transition-timing-function: ease-in-out;
-}
-
-.mox-theme-switch input:checked::after,
-.mox-theme-switch-icon.is-checked {
-  transform: translateX(15px);
-}
-
-.mox-theme-switch input:checked::after {
-  background-color: transparent;
-}
-
 .mox-toggle input:checked::after,
 .mxa-toggle input:checked::after {
   transform: translateX(20px);
@@ -170,7 +115,7 @@ a.arg-active.mox-tab-link:hover {
 
 a.active.mox-link-button,
 a.active.mox-link-button:hover {
-  background-color: #d1d5db; /* gray-300 */
+  background-color: #e5e7eb; /* gray-200 */
   color: #1f2937; /* gray-800 */
 }
 

From b704a427a2b52cc465bff2dcc605923d10e36d0d Mon Sep 17 00:00:00 2001
From: James Martinez <jmar910@gmail.com>
Date: Tue, 28 Nov 2023 17:51:06 -0500
Subject: [PATCH 3/3] Create flat-shirts-battle.md

---
 .changeset/flat-shirts-battle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/flat-shirts-battle.md

diff --git a/.changeset/flat-shirts-battle.md b/.changeset/flat-shirts-battle.md
new file mode 100644
index 0000000..2a460fc
--- /dev/null
+++ b/.changeset/flat-shirts-battle.md
@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+feat: dark/light consistency across mox components