Feature: Desktop - Add agreed color palette to Tailwind config.

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

Hide file tree

Showing 8 changed files with 199 additions and 64 deletions.
diff --git a/app/frontend/apps/desktop/pages/home/views/Playground.vue b/app/frontend/apps/desktop/pages/home/views/Playground.vue
@@ -22,9 +22,7 @@
     <div class="p-2 w-24 rounded-xl h-14 bg-warning text-warning-content">
       warning
     </div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-info text-info-content">
-      info
-    </div>
+    <div class="p-2 w-24 rounded-xl h-14 bg-info text-info-content">info</div>
     <div class="p-2 w-24 rounded-xl h-14 bg-success text-success-content">
       success
     </div>

diff --git a/app/frontend/apps/desktop/styles/main.scss b/app/frontend/apps/desktop/styles/main.scss
@@ -1,6 +1,12 @@
 @import '#shared/styles/main.css';
 @config './tailwind.desktop.js';
 
+@layer components {
+  .required-indicator {
+    @apply text-yellow-600;
+  }
+}
+
 @layer utilities {
   .group-block {
     @apply rounded-xl bg-neutral p-4 border border-base-300 dark:border-neutral;

diff --git a/app/frontend/apps/desktop/styles/tailwind.desktop.js b/app/frontend/apps/desktop/styles/tailwind.desktop.js
@@ -18,7 +18,106 @@ module.exports = {
     `${desktopDir}/**/*.{js,jsx,ts,tsx,vue}`,
     `${sharedDir}/**/*.{js,jsx,ts,tsx,vue}`,
   ],
-  plugins: [formKitTailwind, zammadTailwind, daisyTailwind],
+  plugins: [
+    formKitTailwind,
+    zammadTailwind,
+    daisyTailwind,
+    ({ addComponents, theme }) => {
+      addComponents({
+        // NB: Used by FieldDateTimeInput.vue component, within its style section.
+        //   Since all component styles are processed in isolation, we have to provide the classes below within the
+        //   configuration, otherwise we risk running into build issues since class definitions in imported stylesheets
+        //   might not be available.
+        '.date-selection': {
+          borderColor: theme('colors.blue.800'),
+          backgroundColor: theme('colors.blue.800'),
+          backgroundImage: 'none',
+        },
+        '.date-navigation': {
+          color: theme('colors.blue.800'),
+        },
+      })
+    },
+  ],
+  theme: {
+    colors: {
+      alpha: {
+        100: '#EDF1F280',
+        800: '#33343880',
+      },
+      black: '#000000',
+      white: '#FFFFFF',
+      neutral: {
+        100: '#E6E6E6',
+        200: '#E3E3E3',
+        300: '#DCDCDC',
+        400: '#D1D1D1',
+        500: '#999999',
+        950: '#191919',
+      },
+      gray: {
+        100: '#585856',
+        200: '#535355',
+        300: '#434141',
+        400: '#3F3F41',
+        500: '#323234',
+        600: '#2C2C2D',
+        700: '#262627',
+        800: '#212122',
+        900: '#202021',
+      },
+      stone: {
+        200: '#A0A3A6',
+        300: '#A0A3A6',
+        400: '#6F7071',
+        500: '#4B5058',
+        700: '#383B41',
+      },
+      blue: {
+        50: '#F9FAFB',
+        100: '#E5F0F5',
+        200: '#EDF1F2',
+        300: '#D4E2E9',
+        400: '#C9E1EA',
+        500: '#C0DDE6',
+        600: '#7FD4F1',
+        700: '#49A9CA',
+        800: '#23A2CD',
+        900: '#045972',
+        950: '#063849',
+      },
+      green: {
+        100: '#EFF0F1',
+        200: '#BCCED2',
+        300: '#BBE0CB',
+        400: '#38AD69',
+        500: '#36AF6A',
+        900: '#07341A',
+      },
+      yellow: {
+        50: '#FFF6DA',
+        300: '#FFCE33',
+        400: '#FFCE33',
+        500: '#FAAB00',
+        600: '#F39804',
+        800: '#4A3300',
+        900: '#453914',
+      },
+      red: {
+        50: '#FAEFD6',
+        300: '#F35912',
+        400: '#E9613A',
+        500: '#E54011',
+        600: '#86270C',
+        900: '#220C06',
+      },
+      pink: {
+        100: '#EFD9D2',
+        300: '#EA4D84',
+        500: '#FF006B',
+      },
+    },
+  },
   daisyui: {
     logs: false,
     // daisy ui is used only in desktop, so its classes CANNOT be used in "shared"

diff --git a/app/frontend/apps/mobile/styles/main.scss b/app/frontend/apps/mobile/styles/main.scss
@@ -140,6 +140,10 @@
   .floating-textarea.formkit-outer[data-populated] label {
     @apply translate-y-0 text-xs opacity-75;
   }
+
+  .required-indicator {
+    @apply text-yellow;
+  }
 }
 
 @layer utilities {

diff --git a/app/frontend/apps/mobile/styles/tailwind.mobile.js b/app/frontend/apps/mobile/styles/tailwind.mobile.js
@@ -1,5 +1,6 @@
 // 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 zammadTailwind = require('../../../build/zammadTailwindPlugin.js')
@@ -12,5 +13,70 @@ module.exports = {
     `${mobileDir}/**/*.{js,jsx,ts,tsx,vue}`,
     `${sharedDir}/**/*.{js,jsx,ts,tsx,vue}`,
   ],
-  plugins: [formKitTailwind, zammadTailwind],
+  plugins: [
+    formKitTailwind,
+    zammadTailwind,
+    ({ addComponents, theme }) => {
+      addComponents({
+        // NB: Used by FieldDateTimeInput.vue component, within its style section.
+        //   Since all component styles are processed in isolation, we have to provide the classes below within the
+        //   configuration, otherwise we risk running into build issues since class definitions in imported stylesheets
+        //   might not be available.
+        '.date-selection': {
+          borderColor: theme('colors.blue.DEFAULT'),
+          backgroundColor: theme('colors.blue.DEFAULT'),
+          backgroundImage: 'none',
+        },
+        '.date-navigation': {
+          color: theme('colors.blue.DEFAULT'),
+        },
+      })
+    },
+  ],
+  theme: {
+    colors: {
+      pink: {
+        DEFAULT: '#EA4D84',
+        bright: '#FF006B',
+      },
+      black: {
+        DEFAULT: '#191919',
+        full: colors.black,
+      },
+      white: colors.white,
+      gray: {
+        DEFAULT: '#999999',
+        100: '#D1D1D1',
+        150: '#D8D8D8',
+        200: '#656567',
+        300: '#4C4C4D',
+        400: '#323234',
+        500: '#282829',
+        600: '#262627',
+        highlight: '#99999926',
+        light: '#25262D99',
+      },
+      blue: {
+        DEFAULT: '#23A2CD',
+        dark: '#045972',
+        highlight: '#23A2CD19',
+      },
+      yellow: {
+        DEFAULT: '#FFCE33',
+        highlight: '#FFCE331A',
+        inactive: '#A38629',
+      },
+      red: {
+        DEFAULT: '#E54011',
+        highlight: '#E540111A',
+        bright: '#FF4008',
+        dark: '#261F1D',
+      },
+      green: {
+        DEFAULT: '#36AF6A',
+        highlight: '#38AD691A',
+      },
+      orange: '#F39804',
+    },
+  },
 }
diff --git a/app/frontend/build/zammadTailwindPlugin.js b/app/frontend/build/zammadTailwindPlugin.js
@@ -1,6 +1,5 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-const colors = require('tailwindcss/colors')
 const plugin = require('tailwindcss/plugin')
 
 module.exports = plugin(
@@ -61,64 +60,23 @@ module.exports = plugin(
   },
   {
     theme: {
-      fontFamily: {
-        sans: [
-          '"Fira Sans"',
-          '"Helvetica Neue"',
-          'Helvetica',
-          'Arial',
-          'sans-serif',
-        ],
-      },
-      colors: {
-        transparent: 'transparent',
-        current: 'currentColor',
-        pink: {
-          DEFAULT: '#EA4D84',
-          bright: '#FF006B',
-        },
-        black: {
-          DEFAULT: '#191919',
-          full: colors.black,
-        },
-        white: colors.white,
-        gray: {
-          DEFAULT: '#999999',
-          100: '#D1D1D1',
-          150: '#D8D8D8',
-          200: '#656567',
-          300: '#4C4C4D',
-          400: '#323234',
-          500: '#282829',
-          600: '#262627',
-          highlight: '#99999926',
-          light: '#25262D99',
+      extend: {
+        fontFamily: {
+          sans: [
+            '"Fira Sans"',
+            '"Helvetica Neue"',
+            'Helvetica',
+            'Arial',
+            'sans-serif',
+          ],
         },
-        blue: {
-          DEFAULT: '#23A2CD',
-          dark: '#045972',
-          highlight: '#23A2CD19',
+        colors: {
+          transparent: 'transparent',
+          current: 'currentColor',
         },
-        yellow: {
-          DEFAULT: '#FFCE33',
-          highlight: '#FFCE331A',
-          inactive: '#A38629',
+        minWidth: {
+          '1/2': '50%',
         },
-        red: {
-          DEFAULT: '#E54011',
-          highlight: '#E540111A',
-          bright: '#FF4008',
-          dark: '#261F1D',
-        },
-        green: {
-          DEFAULT: '#36AF6A',
-          highlight: '#38AD691A',
-        },
-        'dark-blue': '#045972',
-        orange: '#F39804',
-      },
-      minWidth: {
-        '1/2': '50%',
       },
     },
   },

diff --git a/app/frontend/shared/components/Form/fields/FieldDate/FieldDateTimeInput.vue b/app/frontend/shared/components/Form/fields/FieldDate/FieldDateTimeInput.vue
@@ -368,7 +368,7 @@ span.flatpickr-weekday {
 
 .flatpickr-day.selected:hover,
 .flatpickr-day.selected {
-  @apply border-blue bg-blue bg-none;
+  @apply date-selection;
 }
 
 .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month:hover,
@@ -385,7 +385,7 @@ span.flatpickr-weekday {
 .flatpickr-months .flatpickr-next-month:hover,
 .flatpickr-months .flatpickr-next-month,
 .flatpickr-months .flatpickr-prev-month {
-  @apply text-blue;
+  @apply date-navigation;
 }
 
 .flatpickr-months .flatpickr-prev-month:hover svg,

diff --git a/app/frontend/shared/styles/main.css b/app/frontend/shared/styles/main.css
@@ -3,7 +3,11 @@
 @tailwind utilities;
 
 @layer components {
+  .required-indicator {
+    /* no default color */
+  }
+
   .required::after {
-    @apply inline-block font-extrabold text-yellow content-['•'] ltr:ml-1 rtl:mr-1;
+    @apply inline-block font-extrabold content-['•'] ltr:ml-1 rtl:mr-1 required-indicator;
   }
 }