ancient smelt
Hi, just wondering if it's possible to do a pass of type exports for v8 to ensure that all CSS Variable types are available from '@mantine/core' - we noticed during our theming process that some of them are only accessible directly from their component definition file, e.g. ComboboxCSSVariables can only be imported from '@mantine/core/lib/components/Combobox/Combobox'
Tiny QoL thing and curious if it is an oversight or whether there's a reason behind it. Thank you so much!
wintry karma
Hi, just wondering if it's possible to do a pass of type exports for v8 to ensur...
These variables are defined on component level, they are different for each component instance that you use, they cannot be defined globally.
ancient smelt
Ok, thanks so much for your quick reply @wintry karma, I want to ask a follow-up question so that we don't do the wrong thing here based on your answer. We are trying to style all Input-types and Combobox-types by doing this (minimal example):
const theme = {
components: {
Combobox: Combobox.extend({ vars: (theme, props) => {} }),
Input: Input.extend({ vars: (theme, props) => {} }),
},
};
Those Component.extend() definitions are in separate files, and sometimes we are dynamically constructing the vars object based on props, so we use those types to annotate that vars object, another example:
import { Combobox } from '@mantine/core';
import type { ComboboxCSSVariables } from '@mantine/core/lib/components/Combobox/Combobox';
export const ComboboxExtend = Combobox.extend({
vars: (theme, props) => {
const vars: PartialTransformVars<ComboboxCSSVariables> = {
options: {
// ...
},
dropdown: {
// ...
},
};
if (someCondition) {
vars.dropdown['--combobox-padding'] = '0';
}
return vars;
},
});
Does this pattern still make sense to you even though we are using that internal ComboboxCSSVariables type?