Open m0ksem opened 3 weeks ago
Is it meant to replace color
prop or is it specifically for cases where you need more fine-grained control? (color
often impacts background and text color).
I'd like to keep current background/textColor behavior. But, what I see people struggle with is to understand what color
actually stands for, so we can rename it to background in v2.
User must be able to use Component without global config. Right now, we require user to have global config registered even if only one simple component is used. It negatively affects bundle size.
For example, VaButton:
<VaButton />
:root {
--va-button-background: var(--va-primary);
--va-button-text-color: var(--va-on-primary);
}
.va-button {
background: var(--va-button-background);
color: var(--va-button-text-color);
}
We need to find a way to handle these styles with Global Config
Looks like current behavior is the best.
Is it meant to replace
color
prop or is it specifically for cases where you need more fine-grained control? (color
often impacts background and text color).
I'd like color prop to override --va-button-background
in v1. In v2 we can remove color
prop in favor of style:
attributes.
Ideally, the initial idea was to have CSS variables without any prefix. <VaButton background="warning" />
But it means we need to store CSS variable names in JS - meaning bundle will store variable names two times: in JS and CSS (with default values). We can fix it by using default values in JS and generate it... But this makes it so much harder to handle for us. Prefix is a good solution to prevent larger bundle sizes. We'll still have TS types on attributes, there will no impact in runtime.
We also need to decide if <VaButton border-color="primary" />
is good, or we want this to be <VaButton style:border-color="primary" />
We also have :child
prefix, which can be used to pass props/attributes to child components like:
<VaButton style:background="transparent" style:text-color="primary" child:loading-icon="{ 'style:color': 'success' }" />
This looks awful. But it is designed for presets, not direct usage:
myWeirdPresset: {
'style:background': 'transparent',
'style:text-color': (props) => props.color,
'style:border-color': (props) => props.color,
'child:loading-icon': {
'style:color': 'success'
}
}
RAW PROPOSAL
closes https://github.com/epicmaxco/vuestic-ui/issues/981