Merge pull request #166 from ConduitIO/james/tweakin

feat: dark/light consistency across mox components

.changeset/flat-shirts-battle.md

@@ -0,0 +1,5 @@
+---
+"mx-ui-components": minor
+---
+
+feat: dark/light consistency across mox components

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>
+</article>

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"

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"

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}}
+{{/if}}

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

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
 >
 

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>
+</div>

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"}}

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>
+</div>

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}}

addon/components/mxa/tags-input.hbs

@@ -20,15 +20,15 @@
           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)}}
             data-test-tags-remove-button
           >
             <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"