fix contrast on select and dropdown foreground colors, add missing placeholder in billable input

Author: Onatcer

resources/css/app.css

@@ -43,6 +43,9 @@
 
     --theme-color-input-select-active: rgb(var(--color-accent-300));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-200));
+
+    --color-accent-default: rgb(var(--color-accent-900));
+    --color-accent-foreground: rgb(var(--color-accent-100));
 }
 
 :root.light {
@@ -86,6 +89,9 @@
 
     --theme-color-input-select-active: rgb(var(--color-accent-400));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-500));
+
+    --color-accent-default: rgb(var(--color-accent-100));
+    --color-accent-foreground: rgb(var(--color-accent-800));
 }
 
 :root {

resources/js/Components/Common/Reporting/ReportingChart.vue

@@ -43,7 +43,9 @@ const xAxisLabels = computed(() => {
     if (props.groupedType === 'week') {
         return props?.groupedData?.map((el) => formatWeek(el.key));
     }
-    return props?.groupedData?.map((el) => formatDate(el.key ?? '', organization?.value?.date_format));
+    return props?.groupedData?.map((el) =>
+        formatDate(el.key ?? '', organization?.value?.date_format)
+    );
 });
 const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
 const labelColor = useCssVar('--color-text-secondary', null, { observe: true });

resources/js/Components/ui/calendar/CalendarCellTrigger.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
       'h-8 w-8 p-0 font-normal',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selected
       'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
       // Disabled

resources/js/Components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
       'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selection Start
       'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
       // Selection End

resources/js/packages/ui/src/Input/BillableRateInput.vue

@@ -41,10 +41,10 @@ function formatValue(modelValue: number | null) {
                 currencyDisplay: 'code',
                 currencySign: 'accounting',
             }"
-            @update:model-value="(value) => model = value * 100">
+            @update:model-value="(value) => (model = value * 100)">
             <NumberFieldContent>
                 <NumberFieldDecrement />
-                <NumberFieldInput />
+                <NumberFieldInput placeholder="Billable Rate" />
                 <NumberFieldIncrement />
             </NumberFieldContent>
         </NumberField>

tailwind.config.js

@@ -87,8 +87,8 @@ export default {
                     "800": "rgba(var(--color-accent-800), <alpha-value>)",
                     "900": "rgba(var(--color-accent-900), <alpha-value>)",
                     "950": "rgba(var(--color-accent-950), <alpha-value>)",
-                    DEFAULT: "var(--color-bg-tertiary)",
-                    foreground: "rgb(var(--color-accent-200))"
+                    DEFAULT: "var(--color-accent-default)",
+                    foreground: "var(--color-accent-foreground)",
                 },
                 "button-primary-background": "var(--theme-color-button-primary-background)",
                 "button-primary-background-hover": "var(--theme-color-button-primary-background-hover)",