#210 - Fixed dark styles (#211)

* #210 - small fixes

* #210 - Added toggle dark styles

* #210 - Started updating tw config to ts

* #210 - removed class to easier missing style detection

* #210 - Added panel dark styles

* #210 - Added page titles

* #210 - demo color fixes

* #210 - Added textarea dark styles

* #210 - Updated to using custom class

* #210 - refined Dropdown styles

* #210 - input dark styles

* #210 - Fixed button style

* #210 - Updated snapshots

* #210 - Updated version

* #210 - Table dark styles

* #210 - Select dark styles

* #210 - Updated snapshots

Co-authored-by: Karl Davies <[email protected]>

Author: nandi95

.eslintrc.js

@@ -198,7 +198,7 @@ module.exports = {
                         "ignore": ["describe"]
                     }
                 ],
-                "jest/no-disabled-tests": "warn"
+                "jest/no-disabled-tests": "off"
             }
         }
     ]

src/Demo.vue

@@ -1,6 +1,7 @@
 <template>
     <main class="h-full transition-colors bg-gray-100 dark:bg-gray-700 relative">
         <div class="flex">
+            <!-- Menu -->
             <div class="menu px-12 shadow-xl dark:bg-gray-600 dark:text-gray-300 z-30 bg-white"
                  :class="[ isOpen ? 'open' : 'closed' ]">
                 <div class="sticky top-0">
@@ -9,7 +10,7 @@
                             Vueish UI
                         </h1>
                         <UIButton minimal
-                                  class="dark:text-gray-200"
+                                  class="dark:text-gray-200 dark:hover:text-gray-700"
                                   @click="isOpen = false"
                                   v-html="clearIcon" />
                     </div>
@@ -30,9 +31,10 @@
                     </div>
                 </div>
             </div>
+
             <div class="flex-1 min-h-screen h-full w-full p-10">
                 <UIButton v-if="!isOpen"
-                          class="dark:text-gray-200 mb-4"
+                          class="dark:text-gray-200 dark:hover:text-gray-700 mb-4"
                           minimal
                           @click="isOpen = true">
                     <svg xmlns="http://www.w3.org/2000/svg"
@@ -47,6 +49,9 @@
                     </svg>
                 </UIButton>
                 <div class="mx-auto" style="max-width: 1000px">
+                    <h1 class="text-2xl mb-2 text-center text-color">
+                        {{ $route.meta.label }}
+                    </h1>
                     <router-view />
                 </div>
             </div>

src/assets/styles/main.scss

@@ -16,3 +16,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.text-color {
+    @apply text-gray-800;
+}
+
+.dark .text-color {
+    @apply text-gray-200;
+}
+
+.text-color-muted {
+    @apply text-gray-500;
+}
+
+.dark .text-color-muted {
+    @apply text-gray-400;
+}

src/components/avatar/Demo.vue

@@ -1,20 +1,32 @@
 <template>
-    Using the default slot
+    <p class="text-color">
+        Using the default slot
+    </p>
     <UIAvatar>hi</UIAvatar>
 
-    No props/slot with squared
+    <p class="text-color">
+        No props/slot with squared
+    </p>
     <UIAvatar squared />
 
-    Small sizing with tw classes
+    <p class="text-color">
+        Small sizing with tw classes
+    </p>
     <UIAvatar alt="Person" class="override" />
-    Default
+
+    <p class="text-color">
+        Default
+    </p>
     <UIAvatar>OP</UIAvatar>
-    Large sizing with tw classes
+
+    <p class="text-color">
+        Large sizing with tw classes
+    </p>
     <UIAvatar src="https://picsum.photos/50?random=1" class="!h-12 !w-12" />
 
-    <div class="mt-12">
+    <p class="mt-12 text-color">
         Avatar group
-    </div>
+    </p>
     <UIAvatarGroup class="!h-12 !w-12 bg-green-700">
         <UIAvatar alt="smt" />
         <UIAvatar src="https://picsum.photos/50?random=3" />
@@ -24,9 +36,9 @@
         <UIAvatar alt="smt" />
     </UIAvatarGroup>
 
-    <div class="mt-12">
+    <p class="mt-12 text-color">
         Avatar group (reverse stacking)
-    </div>
+    </p>
     <UIAvatarGroup class="!h-12 !w-12" reverse-stacking>
         <UIAvatar alt="smt" />
         <UIAvatar src="https://picsum.photos/50?random=5" />
@@ -36,9 +48,9 @@
         <UIAvatar alt="smt" />
     </UIAvatarGroup>
 
-    <div class="mt-12">
+    <p class="mt-12 text-color">
         Avatar group (with avatars as prop)
-    </div>
+    </p>
     <UIAvatarGroup :avatars="avatars" class="!h-10 !w-10" />
 </template>
 

src/components/avatar/UIAvatar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center"
+                text-white bg-brand-400 flex flex-col justify-center items-center"
          :class="[ squared ? 'rounded' : 'rounded-full' ]">
         <img v-if="src && loaded"
              :src="src"

src/components/avatar/__snapshots__/UIAvatar.test.ts.snap

@@ -3,7 +3,7 @@
 exports[`UIAvatar should correctly display 1`] = `
 <div
   class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center rounded-full"
+                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
 >
   
   <span>

src/components/avatar/__snapshots__/UIAvatarGroup.test.ts.snap

@@ -12,7 +12,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
     
     <div
       class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center rounded-full"
+                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 50;"
     >
       
@@ -38,7 +38,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
     </div>
     <div
       class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center rounded-full"
+                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 40;"
     >
       
@@ -49,7 +49,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
     </div>
     <div
       class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center rounded-full"
+                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 30;"
     >
       
@@ -60,7 +60,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
     </div>
     <div
       class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center rounded-full"
+                text-white bg-brand-400 flex flex-col justify-center items-center rounded-full"
       style="z-index: 20;"
     >
       <img
@@ -69,7 +69,7 @@ exports[`UIAvatarGroup should correctly display 1`] = `
     </div>
     <div
       class="ui-avatar text-lg overflow-hidden h-8 w-8
-                text-white bg-brand-300 flex flex-col justify-center items-center rounded"
+                text-white bg-brand-400 flex flex-col justify-center items-center rounded"
       style="z-index: 10;"
     >
       

src/components/button-group/UIButtonGroup.vue

@@ -51,10 +51,10 @@ export default defineComponent({
         @apply flex-1 w-full;
     }
     & > button:last-child {
-        @apply rounded-b rounded-r-none;
+        @apply rounded-b rounded-tr-none;
     }
     & > button:first-child {
-        @apply rounded-t rounded-l-none;
+        @apply rounded-t rounded-bl-none;
     }
 }
 .spread {

src/components/button-toggle/Demo.vue

@@ -16,7 +16,9 @@
                 name="multi"
                 class="mb-6" />
 
-    <p>Prop options</p>
+    <p class="text-color">
+        Prop options
+    </p>
     <UIButtonToggle v-model="selected"
                     :options="options"
                     :large="large"
@@ -25,7 +27,7 @@
                     :clearable="clearable"
                     :disabled="disabled" />
 
-    <p class="mt-4">
+    <p class="mt-4 text-color">
         Slotted option
     </p>
     <UIButtonToggle v-model="selectedSlotted"

src/components/button-toggle/__snapshots__/UIButtonToggle.test.ts.snap

@@ -9,7 +9,7 @@ exports[`UIButtonToggle should correctly display 1`] = `
   
   <button
     aria-checked="false"
-    class="text-gray-600 shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none ring-gray-600 hover:text-white hover:bg-gray-400 border focus:ring-offset-2 px-3.5 py-2 ui-button rounded relative font-bold text-sm m-0 focus:outline-none ring-0 focus:ring-2 border"
+    class="text-gray-600 dark:text-gray-400 shadow-sm border-gray-400 disabled:bg-gray-300disabled:shadow-none ring-gray-600 hover:text-white dark:hover:text-white hover:bg-gray-400 border focus:ring-offset-2 px-3.5 py-2 ui-button rounded relative font-bold text-sm m-0 focus:outline-none ring-0 focus:ring-2 border"
     role="switch"
     type="button"
   >
@@ -29,7 +29,7 @@ exports[`UIButtonToggle should correctly display 1`] = `
   </button>
   <button
     aria-checked="false"
-    class="text-gray-600 shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none ring-gray-600 hover:text-white hover:bg-gray-400 border focus:ring-offset-2 px-3.5 py-2 ui-button rounded relative font-bold text-sm m-0 focus:outline-none ring-0 focus:ring-2 border border-l-0"
+    class="text-gray-600 dark:text-gray-400 shadow-sm border-gray-400 disabled:bg-gray-300disabled:shadow-none ring-gray-600 hover:text-white dark:hover:text-white hover:bg-gray-400 border focus:ring-offset-2 px-3.5 py-2 ui-button rounded relative font-bold text-sm m-0 focus:outline-none ring-0 focus:ring-2 border border-l-0"
     role="switch"
     type="button"
   >
@@ -49,7 +49,7 @@ exports[`UIButtonToggle should correctly display 1`] = `
   </button>
   <button
     aria-checked="false"
-    class="text-gray-600 shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none ring-gray-600 hover:text-white hover:bg-gray-400 border focus:ring-offset-2 px-3.5 py-2 ui-button rounded relative font-bold text-sm m-0 focus:outline-none ring-0 focus:ring-2 border border-l-0"
+    class="text-gray-600 dark:text-gray-400 shadow-sm border-gray-400 disabled:bg-gray-300disabled:shadow-none ring-gray-600 hover:text-white dark:hover:text-white hover:bg-gray-400 border focus:ring-offset-2 px-3.5 py-2 ui-button rounded relative font-bold text-sm m-0 focus:outline-none ring-0 focus:ring-2 border border-l-0"
     role="switch"
     type="button"
   >