Maintenance: Desktop - Remove colors from DaisyUI classes.

zammad · Dec 7, 2023 · c2be866 · c2be866
1 parent 41d20f5
commit c2be866
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 86 deletions.
diff --git a/app/frontend/apps/desktop/form/getCoreDesktopClasses.ts b/app/frontend/apps/desktop/form/getCoreDesktopClasses.ts
@@ -5,26 +5,34 @@ import type { FormThemeExtension } from '#shared/types/form.ts'
 
 const textInputClasses = () => {
   return {
-    input: 'bg-base-300 py-2 px-3 rounded-lg text-base w-full h-10',
-    label: 'text-base px-2',
+    input:
+      'bg-blue-200 dark:bg-gray-700 formkit-invalid:bg-pink-100 dark:formkit-invalid:bg-red-900 py-2 px-2.5 rounded-lg text-sm w-full',
+    label: 'text-sm text-gray-100 dark:text-neutral-400',
     inner: 'relative',
   }
 }
 
 export const getCoreDesktopClasses: FormThemeExtension = (classes) => {
   return {
     global: {
-      label: 'formkit-required:required formkit-invalid:text-red-bright',
-      messages: 'px-2 pt-1',
-      help: 'px-2 pb-2',
+      label: 'formkit-required:required formkit-invalid:text-red-500',
+      messages: 'pt-1 formkit-invalid:text-red-500',
+      help: 'pb-2',
+      suffixIcon:
+        'absolute top-1/2 transform -translate-y-1/2 rtl:left-3 ltr:right-3 fill-current flex justify-center items-center text-stone-200 dark:text-neutral-500',
     },
     text: textInputClasses(),
     password: textInputClasses(),
     checkbox: extendClasses(classes.checkbox, {
-      wrapper: 'ltr:pl-2 rtl:pr-2 w-full select-none',
-      decorator: 'text-white',
+      wrapper: 'p-1 select-none',
+      label: 'text-sm text-gray-100 dark:text-neutral-400',
+      inner: 'ltr:mr-1 rtl:ml-1',
       input:
-        'h-4 w-4 border-[1.5px] text-white border-base-300 rounded-sm bg-transparent checked:bg-primary checked:border-primary',
+        'h-4 w-4 border-[1.5px] text-white border-stone-200 dark:border-neutral-500 rounded-sm bg-transparent checked:border-stone-200 dark:checked:border-neutral-500',
+      decorator: 'text-stone-200 dark:text-neutral-500',
+    }),
+    radio: extendClasses(classes.radio, {
+      inner: 'ltr:mr-1 rtl:ml-1',
     }),
   }
 }
diff --git a/app/frontend/apps/desktop/pages/login/views/Login.vue b/app/frontend/apps/desktop/pages/login/views/Login.vue
@@ -77,7 +77,7 @@ const loginSchema = [
               isLayout: true,
               component: 'CommonLink',
               props: {
-                class: 'link-primary text-right',
+                class: 'link-primary text-right text-sm',
                 link: '/#password_reset',
                 onClick(e: Event) {
                   e.preventDefault()
@@ -97,12 +97,14 @@ const { form, isDisabled } = useForm()
 </script>
 
 <template>
-  <div class="min-h-screen flex flex-col items-center">
+  <div
+    class="min-h-screen flex flex-col items-center bg-neutral-950 text-stone-200 dark:text-neutral-500"
+  >
     <div class="group-block max-w-md w-full m-auto">
       <div class="flex justify-center p-2">
         <CommonLogo />
       </div>
-      <h1 class="mb-6 flex justify-center p-2 text-2xl font-extrabold">
+      <h1 class="mb-6 flex justify-center p-2 text-xl">
         {{ $c.product_name }}
       </h1>
       <template v-if="$c.maintenance_mode">
@@ -133,10 +135,7 @@ const { form, isDisabled } = useForm()
         @submit="login($event as FormSubmitData<LoginCredentials>)"
       >
         <template #after-fields>
-          <button
-            class="btn btn-accent btn-block text-base"
-            :disabled="isDisabled"
-          >
+          <button class="btn btn-accent btn-block" :disabled="isDisabled">
             {{ $t('Sign in') }}
           </button>
         </template>

diff --git a/app/frontend/apps/desktop/styles/main.scss b/app/frontend/apps/desktop/styles/main.scss
@@ -2,13 +2,33 @@
 @config './tailwind.desktop.js';
 
 @layer components {
+  .btn {
+    @apply rounded-xl border-0 text-base shadow-none;
+  }
+
+  .btn:hover {
+    @apply bg-blue-600 dark:bg-blue-900 text-black dark:text-white;
+  }
+
+  .btn-accent {
+    @apply bg-yellow-300 text-black;
+  }
+
   .required-indicator {
     @apply text-yellow-600;
   }
+
+  .link-primary {
+    @apply text-blue-800;
+  }
+
+  .link-primary:hover {
+    @apply text-blue-800 underline;
+  }
 }
 
 @layer utilities {
   .group-block {
-    @apply rounded-xl bg-neutral p-4 border border-base-300 dark:border-neutral;
+    @apply p-5 bg-white dark:bg-gray-500 text-black dark:text-white rounded-3xl;
   }
 }
diff --git a/app/frontend/apps/desktop/styles/tailwind.desktop.js b/app/frontend/apps/desktop/styles/tailwind.desktop.js
@@ -1,10 +1,8 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-const colors = require('tailwindcss/colors')
 const formKitTailwind = require('@formkit/themes/tailwindcss')
 const path = require('path')
 const daisyTailwind = require('daisyui')
-const themes = require('daisyui/src/theming/themes.js')
 
 const zammadTailwind = require('../../../build/zammadTailwindPlugin.js')
 
@@ -68,7 +66,6 @@ module.exports = {
       },
       stone: {
         200: '#A0A3A6',
-        300: '#A0A3A6',
         400: '#6F7071',
         500: '#4B5058',
         700: '#383B41',
@@ -96,8 +93,8 @@ module.exports = {
       },
       yellow: {
         50: '#FFF6DA',
+        200: '#FFD44C',
         300: '#FFCE33',
-        400: '#FFCE33',
         500: '#FAAB00',
         600: '#F39804',
         800: '#4A3300',
@@ -118,71 +115,13 @@ module.exports = {
       },
     },
   },
+  // XXX: daisyUI is used only in desktop view, so its classes CANNOT be used in "shared" components.
   daisyui: {
+    base: false,
+    // Do not show info about daisyUI version and used config in the console when building CSS.
     logs: false,
-    // daisy ui is used only in desktop, so its classes CANNOT be used in "shared"
-    // https://daisyui.com/docs/themes/#-7
-    themes: [
-      // 4 base bg colors:
-      // light: #FFFFFF, (neutral) #F9FAFB, #E5E5E5, #EDF1F2
-      // dark: #323234, (neutral) #212122, #505052, #262627
-
-      // buttons/links:
-      // "primary" - blue
-      // "secondary" - "light-blue" (usually a higlight color)
-      // "accent" - yellow
-      {
-        light: {
-          ...themes.light,
-          // base is usually backgrounds
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=0-1&mode=design&t=b8SYVpqnggUOnkI4-0 (middle sidebar bg and always default bg)
-          'base-100': '#F9FAFB',
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=1-65700&mode=design&t=b8SYVpqnggUOnkI4-0 (inputs/links/tags bg, etc.)
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=0-1&mode=design&t=b8SYVpqnggUOnkI4-0 (higlighted bg in table)
-          'base-200': '#EDF1F2',
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=0-1&mode=design&t=b8SYVpqnggUOnkI4-0 (middle sidebar border)
-          'base-300': '#E5E5E5',
-          // text color on "base" backgrounds
-          'base-content': '#585856',
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=1-65700&mode=design&t=b8SYVpqnggUOnkI4-0 (right sidebar and blocks)
-          neutral: '#FFFFFF',
-
-          primary: '#23A2CD',
-          secondary: '#045972',
-          accent: '#FFCE33',
-          'accent-content': colors.black,
-
-          error: '#E54011',
-          warning: '#F39804',
-          success: '#36AF6A',
-          info: '#23A2CD',
-        },
-      },
-      {
-        dark: {
-          ...themes.dark,
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=0-1&mode=design&t=b8SYVpqnggUOnkI4-0 (middle sidebar bg and always default bg)
-          'base-100': '#212122',
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=1-65700&mode=design&t=b8SYVpqnggUOnkI4-0 (inputs/links/tags bg, etc.)
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=0-1&mode=design&t=b8SYVpqnggUOnkI4-0 (higlighted bg in table)
-          'base-200': '#262627',
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=0-1&mode=design&t=b8SYVpqnggUOnkI4-0 (middle sidebar border)
-          'base-300': '#505052',
-          // text color on "base" backgrounds
-          'base-content': '#D1D1D1',
-          // https://www.figma.com/file/DcIjH8I28Y5uWPv61SprqK/Screens?type=design&node-id=1-65700&mode=design&t=b8SYVpqnggUOnkI4-0 (right sidebar and blocks)
-          neutral: '#323234',
-
-          primary: '#23A2CD',
-          secondary: '#045972',
-          accent: '#FFCE33',
-
-          error: '#E54011',
-          warning: '#F39804',
-          success: '#36AF6A',
-          info: '#23A2CD',
-        },
-      },
-    ],
+    // Disable all DaisyUI themes which in turn disables all built-in colors.
+    //   https://daisyui.com/docs/themes/#-2
+    themes: [],
   },
 }
diff --git a/app/frontend/apps/mobile/form/theme/global/getCoreClasses.ts b/app/frontend/apps/mobile/form/theme/global/getCoreClasses.ts
@@ -64,9 +64,13 @@ const getCoreClasses: FormThemeExtension = (classes: FormThemeClasses) => {
     ),
     checkbox: extendClasses(classes.checkbox, {
       wrapper: 'ltr:pl-2 rtl:pr-2 w-full select-none',
+      inner: 'ltr:mr-2 rtl:ml-2',
       input:
         'h-4 w-4 border-[1.5px] border-white rounded-sm bg-transparent focus:border-blue focus:bg-blue-highlight checked:focus:color-blue checked:bg-blue checked:border-blue checked:focus:bg-blue checked:hover:bg-blue',
     }),
+    radio: extendClasses(classes.radio, {
+      inner: 'ltr:mr-2 rtl:ml-2',
+    }),
     toggle: extendClasses(classes.toggle, {
       outer: 'relative px-2',
       wrapper: 'inline-flex w-full h-14 px-2',

diff --git a/app/frontend/shared/form/theme/global/index.ts b/app/frontend/shared/form/theme/global/index.ts
@@ -31,7 +31,7 @@ const classes: FormThemeClasses = {
   password: defaultTextInput,
   checkbox: {
     wrapper: 'inline-flex items-center cursor-pointer',
-    inner: 'ltr:mr-2 rtl:ml-2 flex',
+    inner: 'flex',
     input:
       'appearance-none focus:outline-none focus:ring-0 focus:ring-offset-0',
     decorator:
@@ -40,7 +40,7 @@ const classes: FormThemeClasses = {
   },
   radio: {
     wrapper: 'inline-flex items-center cursor-pointer',
-    inner: 'ltr:mr-2 rtl:ml-2 flex',
+    inner: 'flex',
     input:
       'appearance-none focus:outline-none focus:ring-0 focus:ring-offset-0',
     decorator: