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

This commit is contained in:
Gregor Vostrak
2025-05-14 14:09:19 +02:00
parent 098ead8da6
commit 62b5730fa8
6 changed files with 15 additions and 7 deletions
+6
View File
@@ -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 {
@@ -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 });
@@ -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
@@ -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
@@ -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>
+2 -2
View File
@@ -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)",