#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]>
karnama · Jun 21, 2021 · 4a964e1 · 4a964e1
1 parent ab00b27
commit 4a964e1
Show file tree

Hide file tree

Showing 43 changed files with 309 additions and 165 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -198,7 +198,7 @@ module.exports = {
                         "ignore": ["describe"]
                     }
                 ],
-                "jest/no-disabled-tests": "warn"
+                "jest/no-disabled-tests": "off"
             }
         }
     ]

diff --git a/src/Demo.vue b/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>

diff --git a/src/assets/styles/main.scss b/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;
+}
diff --git a/src/components/avatar/Demo.vue b/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>
 

diff --git a/src/components/avatar/UIAvatar.vue b/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"

diff --git a/src/components/avatar/__snapshots__/UIAvatar.test.ts.snap b/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>

diff --git a/src/components/avatar/__snapshots__/UIAvatarGroup.test.ts.snap b/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;"
     >
       

diff --git a/src/components/button-group/UIButtonGroup.vue b/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 {

diff --git a/src/components/button-toggle/Demo.vue b/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"

diff --git a/src/components/button-toggle/__snapshots__/UIButtonToggle.test.ts.snap b/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"
   >

diff --git a/src/components/button/UIButton.vue b/src/components/button/UIButton.vue
@@ -87,23 +87,27 @@ export default defineComponent({
                 + (props.disabled ? '' : ' hover:bg-brand-500 hover:border-brand-500')
         }));
         const outlineTypeClasses = computed<{ [key in StyleType]: string; }>(() => ({
-            default: 'text-gray-600 shadow-sm border-gray-400 disabled:bg-gray-300 disabled:shadow-none ring-gray-600'
-                + (props.disabled ? '' : ' hover:text-white hover:bg-gray-400'),
+            default: 'text-gray-600 dark:text-gray-400 shadow-sm border-gray-400 disabled:bg-gray-300' +
+                'disabled:shadow-none ring-gray-600'
+                + (props.disabled ? '' : ' hover:text-white dark:hover:text-white hover:bg-gray-400'),
             primary: 'text-blue-600 shadow-sm border-blue-500 disabled:bg-gray-200 disabled:shadow-none ring-blue-600'
                 + (props.disabled ? '' : ' hover:text-white hover:bg-blue-500 hover:border-blue-500'),
             info: 'text-blue-300 shadow-sm border-blue-300 disabled:bg-gray-200 disabled:shadow-none ring-blue-300'
                 + (props.disabled ? '' : ' hover:text-white hover:bg-blue-300 hover:border-blue-300'),
-            success: 'text-green-600 shadow-sm border-green-400 disabled:bg-gray-200 disabled:shadow-none ring-green-400'
+            success: 'text-green-600 shadow-sm border-green-400 disabled:bg-gray-200 disabled:shadow-none' +
+                'ring-green-400'
                 + (props.disabled ? '' : ' hover:text-white hover:bg-green-400 hover:border-green-400'),
-            warning: 'text-yellow-500 shadow-sm border-yellow-300 disabled:bg-gray-200 disabled:shadow-none ring-yellow-400'
+            warning: 'text-yellow-500 shadow-sm border-yellow-300 disabled:bg-gray-200 disabled:shadow-none' +
+                'ring-yellow-400'
                 + (props.disabled ? '' : ' hover:text-white hover:bg-yellow-300 hover:border-yellow-300'),
             danger: 'text-red-600 shadow-sm border-red-400 disabled:bg-gray-200 disabled:shadow-none ring-red-400'
                 + (props.disabled ? '' : ' hover:text-white hover:bg-red-400 hover:border-red-400'),
             brand: 'text-brand-600 shadow-sm border-brand-400 disabled:bg-gray-200 disabled:shadow-none ring-brand-400'
                 + (props.disabled ? '' : ' hover:text-white hover:bg-brand-400 hover:border-brand-400')
         }));
         const minimalTypeClasses = computed<{ [key in StyleType]: string; }>(() => ({
-            default: 'text-gray-600 disabled:bg-gray-300 ring-gray-300' + (props.disabled ? '' : ' hover:bg-gray-200'),
+            default: 'text-gray-600 dark:text-gray-500 disabled:bg-gray-300 ring-gray-300'
+                + (props.disabled ? '' : ' dark:hover:text-gray-600 hover:bg-gray-200'),
             primary: 'text-blue-600 disabled:bg-gray-300 ring-blue-400' + (props.disabled ? '' : ' hover:bg-blue-200'),
             info: 'text-blue-400 disabled:bg-gray-300 ring-blue-300' + (props.disabled ? '' : ' hover:bg-blue-200'),
             success: 'text-green-600 disabled:bg-gray-300 ring-green-300'

diff --git a/src/components/checkbox/Demo.vue b/src/components/checkbox/Demo.vue
@@ -4,14 +4,16 @@
                 label="I accept the terms and agreement" />
 
     <div class="mt-4 space-y-2">
-        <h3>Checkboxes with array</h3>
+        <h3 class="text-color">
+            Checkboxes with array
+        </h3>
         <UICheckbox v-model="values" name="name1" value="john">
             John
         </UICheckbox>
         <UICheckbox v-model="values" name="name2" value="bruce">
             Bruce
         </UICheckbox>
-        <p>
+        <p class="text-color">
             modelValue:
             {{ names }}
         </p>

diff --git a/src/components/checkbox/UICheckbox.vue b/src/components/checkbox/UICheckbox.vue
@@ -18,7 +18,7 @@
             <span class="transition-all opacity-0 scale-0 text-white" v-html="indeterminate ? dashIcon : tickIcon" />
         </span>
         <label v-if="label || $slots.default" class="items-center" :for="$attrs.id ?? name">
-            <span class="select-none ml-3 cursor-pointer"
+            <span class="select-none ml-3 cursor-pointer text-color"
                   :class="{ 'cursor-not-allowed': disabled }">
                 <slot>
                     {{ label }}

diff --git a/src/components/dropdown/Demo.vue b/src/components/dropdown/Demo.vue
@@ -1,7 +1,7 @@
 <template>
     <UICheckbox v-model="atMousePosition" label="Positioned on the mouse" name="at_mouse_position" />
 
-    <p class="mt-10">
+    <p class="mt-10 text-color">
         Left click
     </p>
     <UIDropdown :at-mouse-position="atMousePosition">
@@ -14,13 +14,13 @@
         <div class="divide-y">
             <div v-for="index in range(10)"
                  :key="index"
-                 class="px-4 py-2 text-gray-600 hover:bg-gray-700 transition hover:text-white">
+                 class="px-4 py-2 text-color transition-colors select-none hover:bg-gray-700">
                 custom content and stuff plus things {{ index }}
             </div>
         </div>
     </UIDropdown>
 
-    <p class="mt-10">
+    <p class="mt-10 text-color">
         Right click (context menu)
     </p>
     <UIDropdown :at-mouse-position="atMousePosition">
@@ -31,7 +31,7 @@
         <div class="divide-y">
             <div v-for="index in range(10)"
                  :key="index"
-                 class="px-4 py-2 text-gray-600 hover:bg-gray-700 transition hover:text-white">
+                 class="px-4 py-2 text-color hover:bg-gray-700 transition-colors">
                 custom content and stuff plus things {{ index }}
             </div>
         </div>

diff --git a/src/components/dropdown/UIDropdown.vue b/src/components/dropdown/UIDropdown.vue
@@ -11,7 +11,8 @@
              v-bind="$attrs"
              ref="dropdown"
              v-click-away="hide"
-             class="dropdown absolute flex flex-col items-stretch shadow-lg bg-white rounded z-50 overflow-scroll"
+             class="dropdown absolute z-50 rounded overflow-scroll flex flex-col items-stretch shadow-lg
+                    bg-white dark:bg-gray-600 ring-1 ring-opacity-5 ring-black dark:ring-white dark:ring-opacity-5"
              :style="dropdownStyle"
              role="group"
              @click.stop>
@@ -61,8 +62,10 @@ export default defineComponent({
         },
 
         /**
-         * The width of the dropdown with px or vw notation.
+         * The width of the dropdown with px or vw notation if using atMousePosition
+         * otherwise css rule accepted values.
          */
+        // todo add cross validation when https://github.com/vuejs/vue-next/pull/3258 merged then default to auto
         width: {
             type: String,
             default: '250px'

diff --git a/src/components/dropdown/__snapshots__/UIDropdown.test.ts.snap b/src/components/dropdown/__snapshots__/UIDropdown.test.ts.snap
@@ -11,7 +11,8 @@ exports[`UIDropdown should correctly display 1`] = `
   />
   
   <div
-    class="dropdown absolute flex flex-col items-stretch shadow-lg bg-white rounded z-50 overflow-scroll"
+    class="dropdown absolute z-50 rounded overflow-scroll flex flex-col items-stretch shadow-lg
+                    bg-white dark:bg-gray-600 ring-1 ring-opacity-5 ring-black dark:ring-white dark:ring-opacity-5"
     role="group"
     style="max-height: 35vh; width: 250px; right: 0px; top: 0px;"
   >

diff --git a/src/components/file-uploader/Demo.vue b/src/components/file-uploader/Demo.vue
@@ -14,9 +14,11 @@ export default defineComponent({
         const upload = async (files: File[]) => {
             await new Promise(resolve => setTimeout(resolve, 5000));
             const names = files.map(file => '- ' + file.name).join('\n');
+            // eslint-disable-next-line no-console
             console.info('Uploaded:\n' + names);
         };
         const logError = (payload: any) => {
+            // eslint-disable-next-line no-console
             console.error(payload);
         };
-Original file line number
+Diff line change
@@ Expand Up / @@ -198,7 +198,7 @@ module.exports = { @@
                             "ignore": ["describe"]
                         }
                     ],
-                    "jest/no-disabled-tests": "warn"
+                    "jest/no-disabled-tests": "off"
                 }
             }
         ]
@@ Expand Down @@