incr: update colors

src/components/Charts/BarChart.vue

@@ -357,6 +357,6 @@ export default {
 
 <style scoped>
 rect:hover {
-  filter: brightness(115%);
+  filter: brightness(105%);
 }
 </style>

src/components/FormContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col bg-gray-25">
     <!-- Page Header (Title, Buttons, etc) -->
     <PageHeader :backLink="backLink" :title="title" :border="false">
       <slot name="header" />

src/components/Icons/base.vue

@@ -1,14 +1,16 @@
 <script>
+import { uicolors } from 'src/utils/colors';
+
 export default {
   name: 'IconBase',
   props: ['active'],
   computed: {
     lightColor() {
-      return this.active ? '#8CC0F1' : '#A1ABB4';
+      return this.active ? uicolors.blue['300'] : uicolors.gray['400'];
     },
     darkColor() {
-      return this.active ? '#4794E9' : '#415668';
-    }
-  }
+      return this.active ? uicolors.blue['500'] : uicolors.gray['700'];
+    },
+  },
 };
 </script>

src/components/Report/ListReport.vue

@@ -43,7 +43,7 @@
             }"
             :class="[
               r !== pageEnd - 1 ? 'border-b' : '',
-              row.isGroup ? 'hover:bg-gray-100 cursor-pointer' : '',
+              row.isGroup ? 'hover:bg-gray-50 cursor-pointer' : '',
             ]"
             @click="() => onRowClick(row, r)"
           >

src/components/SearchBar.vue

@@ -1,26 +1,13 @@
 <template>
   <div>
     <!-- Search Bar Button -->
-    <button
-      @click="open"
-      class="
-        px-2
-        h-8
-        flex
-        items-center
-        rounded-md
-        text-sm
-        text-gray-900
-        bg-gray-100
-      "
-      :padding="false"
-    >
+    <Button @click="open" class="px-2" :padding="false">
       <feather-icon name="search" class="w-4 h-4 mr-1 text-gray-800" />
       <p>{{ t`Search` }}</p>
       <div class="text-gray-500 px-1 ml-4 text-sm">
         {{ modKey('k') }}
       </div>
-    </button>
+    </Button>
   </div>
 
   <!-- Search Modal -->
@@ -123,7 +110,7 @@
           </button>
         </div>
         <button
-          class="hover:bg-gray-100 px-2 py-0.5 rounded text-gray-800"
+          class="hover:bg-gray-50 px-2 py-0.5 rounded text-gray-800"
           @click="showMore = !showMore"
         >
           {{ showMore ? t`Less Filters` : t`More Filters` }}
@@ -212,6 +199,7 @@ import { getGroupLabelMap, searchGroups } from 'src/utils/search';
 import { useKeys } from 'src/utils/vueUtils';
 import { getIsNullOrUndef } from 'utils/';
 import { nextTick, watch } from 'vue';
+import Button from './Button.vue';
 import Modal from './Modal.vue';
 
 export default {
@@ -231,7 +219,7 @@ export default {
     };
   },
   inject: ['searcher'],
-  components: { Modal },
+  components: { Modal, Button },
   async mounted() {
     if (fyo.store.isDevelopment) {
       window.search = this;

src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-2 h-full flex justify-between flex-col"
+    class="p-2 h-full flex justify-between flex-col bg-gray-25"
     :class="{
       'window-drag': platform !== 'Windows',
     }"
@@ -34,9 +34,9 @@
             items-center
             rounded-md
             cursor-pointer
-            hover:bg-white
+            hover:bg-gray-100
           "
-          :class="isActiveGroup(group) && !group.items ? 'bg-white' : ''"
+          :class="isActiveGroup(group) && !group.items ? 'bg-gray-100' : ''"
           @click="onGroupClick(group)"
         >
           <Icon
@@ -66,7 +66,7 @@
               pl-10
               rounded
               cursor-pointer
-              hover:bg-white
+              hover:bg-gray-100
             "
             :class="itemActiveClass(item)"
             @click="onItemClick(item)"
@@ -189,7 +189,7 @@ export default {
       let routeMatch = currentRoute === item.route;
       let schemaNameMatch =
         item.schemaName && params.schemaName === item.schemaName;
-      return routeMatch || schemaNameMatch ? 'bg-white text-blue-500' : '';
+      return routeMatch || schemaNameMatch ? 'bg-gray-100 text-blue-500' : '';
     },
     isActiveGroup(group) {
       return this.activeGroup && group.label === this.activeGroup.label;

src/components/TwoColumnForm.vue

@@ -82,6 +82,7 @@
             :value="getRegularValue(df)"
             :class="{ 'p-2': df.fieldtype === 'Check' }"
             :read-only="evaluateReadOnly(df)"
+            input-class="bg-transparent"
             @change="async (value) => await onChange(df, value)"
             @focus="activateInlineEditing(df)"
             @new-doc="async (newdoc) => await onChange(df, newdoc.name)"

src/pages/ChartOfAccounts.vue

@@ -71,12 +71,10 @@
         <div
           v-if="account.addingAccount || account.addingGroupAccount"
           class="
-            mt-2
             px-4
-            py-2
+            h-row-mid
             cursor-pointer
-            hover:bg-gray-100
-            rounded-md
+            hover:bg-gray-50
             group
             flex
             items-center

src/pages/Dashboard/Cashflow.vue

@@ -7,11 +7,11 @@
       <!-- Chart Legend -->
       <div class="flex text-base gap-8" v-if="hasData">
         <div class="flex items-center gap-2">
-          <span class="w-3 h-3 rounded-sm inline-block bg-blue-500" />
+          <span class="w-3 h-3 rounded-sm inline-block bg-blue-400" />
           <span class="text-gray-900">{{ t`Inflow` }}</span>
         </div>
         <div class="flex items-center gap-2">
-          <span class="w-3 h-3 rounded-sm inline-block bg-gray-500" />
+          <span class="w-3 h-3 rounded-sm inline-block bg-pink-400" />
           <span class="text-gray-900">{{ t`Outflow` }}</span>
         </div>
       </div>
@@ -28,7 +28,7 @@
 
     <!-- Line Chart -->
     <LineChart
-    class="mt-4"
+      class="mt-4"
       v-if="chartData.points.length"
       :aspect-ratio="4.15"
       :colors="chartData.colors"
@@ -48,6 +48,7 @@ import { ModelNameEnum } from 'models/types';
 import LineChart from 'src/components/Charts/LineChart.vue';
 import { fyo } from 'src/initFyo';
 import { formatXLabels, getYMax } from 'src/utils/chart';
+import { uicolors } from 'src/utils/colors';
 import { getDatesAndPeriodList } from 'src/utils/misc';
 import { getMapFromList } from 'utils/';
 import PeriodSelector from './PeriodSelector';
@@ -76,10 +77,10 @@ export default {
   computed: {
     chartData() {
       let data = this.data;
-      let colors = ['#2490EF', '#B7BFC6'];
+      let colors = [uicolors.blue['400'], uicolors.pink['400']];
       if (!this.hasData) {
         data = dummyData;
-        colors = ['#E9EBED', '#DFE1E2'];
+        colors = [uicolors.gray['200'], uicolors.gray['100']];
       }
 
       const xLabels = data.map((cf) => cf['yearmonth']);

src/pages/Dashboard/Expenses.vue

@@ -32,7 +32,7 @@
         :active="active"
         :sectors="sectors"
         :offset-x="3"
-        :thickness="11.5"
+        :thickness="10"
         :text-offset-x="6.5"
         :value-formatter="(value) => fyo.format(value, 'Currency')"
         :total-label="t`Total Spending`"
@@ -55,7 +55,7 @@
 <script>
 import { truncate } from 'lodash';
 import { fyo } from 'src/initFyo';
-import theme from 'src/theme';
+import { uicolors } from 'src/utils/colors';
 import { getDatesAndPeriodList } from 'src/utils/misc';
 import DonutChart from '../../components/Charts/DonutChart.vue';
 import PeriodSelector from './PeriodSelector';
@@ -105,11 +105,11 @@ export default {
       );
 
       const shades = [
-        { class: 'bg-gray-800', hex: theme.backgroundColor.gray['800'] },
-        { class: 'bg-gray-600', hex: theme.backgroundColor.gray['600'] },
-        { class: 'bg-gray-400', hex: theme.backgroundColor.gray['400'] },
-        { class: 'bg-gray-300', hex: theme.backgroundColor.gray['300'] },
-        { class: 'bg-gray-200', hex: theme.backgroundColor.gray['200'] },
+        { class: 'bg-pink-500', hex: uicolors.pink['500'] },
+        { class: 'bg-pink-400', hex: uicolors.pink['400'] },
+        { class: 'bg-pink-300', hex: uicolors.pink['300'] },
+        { class: 'bg-pink-200', hex: uicolors.pink['200'] },
+        { class: 'bg-pink-100', hex: uicolors.pink['100'] },
       ];
 
       topExpenses = topExpenses

src/pages/Dashboard/ProfitAndLoss.vue

@@ -33,6 +33,7 @@
 import BarChart from 'src/components/Charts/BarChart.vue';
 import { fyo } from 'src/initFyo';
 import { formatXLabels, getYMax, getYMin } from 'src/utils/chart';
+import { uicolors } from 'src/utils/colors';
 import { getDatesAndPeriodList } from 'src/utils/misc';
 import { getValueMapFromList } from 'utils';
 import PeriodSelector from './PeriodSelector';
@@ -59,7 +60,9 @@ export default {
   computed: {
     chartData() {
       const points = [this.data.map((d) => d.balance)];
-      const colors = [{ positive: '#2490EF', negative: '#B7BFC6' }];
+      const colors = [
+        { positive: uicolors.blue['400'], negative: uicolors.pink['400'] },
+      ];
       const format = (value) => fyo.format(value ?? 0, 'Currency');
       const yMax = getYMax(points);
       const yMin = getYMin(points);

src/pages/Dashboard/UnpaidInvoices.vue

@@ -64,6 +64,8 @@
             :class="
               invoice.count && invoice.color == 'blue'
                 ? 'bg-blue-200'
+                : invoice.hasData
+                ? 'bg-pink-200'
                 : 'bg-gray-200'
             "
           ></div>
@@ -71,8 +73,10 @@
             class="absolute inset-0 h-4"
             :class="
               invoice.count && invoice.color == 'blue'
-                ? 'bg-blue-500'
-                : 'bg-gray-500'
+                ? 'bg-blue-400'
+                : invoice.hasData
+                ? 'bg-pink-400'
+                : 'bg-gray-400'
             "
             :style="`width: ${invoice.barWidth}%`"
           ></div>
@@ -107,6 +111,7 @@ import { ModelNameEnum } from 'models/types';
 import Button from 'src/components/Button.vue';
 import MouseFollower from 'src/components/MouseFollower.vue';
 import { fyo } from 'src/initFyo';
+import { uicolors } from 'src/utils/colors';
 import { getDatesAndPeriodList } from 'src/utils/misc';
 import { routeTo } from 'src/utils/ui';
 import PeriodSelector from './PeriodSelector.vue';
@@ -122,7 +127,7 @@ export default {
   },
   data: () => ({
     idx: -1,
-    colors: ['#33A1FF', '#B7BFC6'],
+    colors: [uicolors.blue['400'], uicolors.pink['400']],
     invoices: [
       {
         title: t`Sales Invoices`,

src/pages/DatabaseSelector.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="flex-1 flex justify-center items-center"
+    class="flex-1 flex justify-center items-center bg-gray-25"
     :class="{
       'pointer-events-none': loadingDatabase,
       'window-drag': platform !== 'Windows',
     }"
   >
     <div
-      class="w-full w-form shadow-lg rounded-lg border relative"
+      class="w-full w-form shadow-lg rounded-lg border relative bg-white"
       style="height: 700px"
     >
       <!-- Welcome to Frappe Books -->
@@ -28,7 +28,7 @@
       <div
         @click="newDatabase"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
+        :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
       >
         <div class="w-8 h-8 rounded-full bg-blue-500 relative flex-center">
           <feather-icon name="plus" class="text-white w-5 h-5" />
@@ -48,7 +48,7 @@
       <div
         @click="existingDatabase"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
+        :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
       >
         <div class="w-8 h-8 rounded-full bg-green-500 relative flex-center">
           <feather-icon name="upload" class="w-4 h-4 text-white" />
@@ -68,7 +68,7 @@
       <div class="overflow-y-auto" style="max-height: 340px">
         <div
           class="h-row-largest px-4 flex gap-4 items-center"
-          :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
+          :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
           v-for="(file, i) in files"
           :key="file.dbPath"
           @click="selectFile(file)"

src/pages/PrintView/PrintView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
-    <div class="flex flex-col flex-1">
-      <PageHeader :backLink="true" class="bg-white z-10" :border="false">
+    <div class="flex flex-col flex-1 bg-gray-25">
+      <PageHeader :backLink="true" class="z-10" :border="false">
         <Button
           class="text-gray-900 text-xs"
           @click="showCustomiser = !showCustomiser"
@@ -19,7 +19,7 @@
         class="flex justify-center flex-1 overflow-auto relative"
       >
         <div
-          class="h-full shadow mb-4 absolute"
+          class="h-full shadow mb-4 absolute bg-white"
           style="
             width: 21cm;
             height: 29.7cm;

src/pages/QuickEditForm.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="border-l h-full overflow-auto">
+  <div
+    class="border-l h-full overflow-auto"
+    :class="white ? 'bg-white' : 'bg-gray-25'"
+  >
     <!-- Quick edit Tool bar -->
     <div class="flex items-center justify-between px-4 border-b h-row-largest">
       <!-- Close Button and Status Text -->
@@ -57,7 +60,7 @@
         :letter-placeholder="doc[titleField.fieldname]?.[0] ?? null"
       />
       <FormControl
-        input-class="text-center h-8"
+        input-class="text-center h-8 bg-transparent"
         ref="titleControl"
         v-if="titleField"
         :df="titleField"
@@ -101,6 +104,7 @@ export default {
     name: String,
     schemaName: String,
     defaults: String,
+    white: { type: Boolean, default: false },
     hideFields: { type: Array, default: () => [] },
     showFields: { type: Array, default: () => [] },
   },

src/pages/SetupWizard/SetupWizard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 bg-white flex justify-center items-center window-drag">
+  <div class="flex-1 bg-gray-25 flex justify-center items-center window-drag">
     <!-- 0: Language Selection Slide -->
     <Slide
       @primary-clicked="handlePrimary"

src/pages/SetupWizard/Slide.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-form shadow-lg rounded-lg border relative" style="height: 700px">
+  <div class="w-form shadow-lg rounded-lg border relative bg-white" style="height: 700px">
     <!-- Slide Title -->
     <div class="p-4">
       <h1 class="text-2xl font-semibold select-none">

src/theme.js

@@ -1,4 +0,0 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from '../tailwind.config';
-
-export default resolveConfig(tailwindConfig).theme;

src/utils/colors.ts

@@ -1,3 +1,7 @@
+import { theme } from '../../tailwind.config';
+
+export const uicolors = theme.extend.colors;
+
 export const indicators = {
   GRAY: 'grey',
   GREY: 'grey',
@@ -34,7 +38,8 @@ const getValidColor = (color: string) => {
 };
 
 export function getBgColorClass(color: string) {
-  return `bg-${getValidColor(color)}-100`;
+  const vcolor = getValidColor(color);
+  return `bg-${vcolor}-100`;
 }
 
 export function getColorClass(color: string, type: 'bg' | 'text', value = 300) {

tailwind.config.js

@@ -61,6 +61,7 @@ module.exports = {
         'brand-100': '#f4f9ff',
         black: '#112B42',
         gray: {
+          25: '#fcfcfd',
           50: '#f8f9fc',
           100: '#f2f4f8',
           200: '#ebeff5',