alfa-laboratory/alfa-ui-primitives

CSS vars

Luchanso opened this issue · 1 comments

Было бы здорово вынести все цвета в css переменные, чтобы можно было использовать их в .css стилях, как это сейчас сделано в arui-feather:

@import 'arui-feather/vars.css';

.my-example {
  color: var(--color-accent-content-minor)
}

+1
Возможно нужно немного поправить arui-presets конфиги postcss. К примеру:

function getConfig(mq, path = [], resolve, vars = {}) {
    return {
        plugins: [
            ...
            require('postcss-custom-properties')({
                preserve: false,
                variables: vars
            }),
            ...
        ]
    };
}

и тогда можно вписывать переменные прямо в конфиги postcss:

module.exports = getConfig(
    MQ, 
    [], 
    (id) => {
        if (/^arui-feather/.test(id)) {
            id = path.join(__dirname, id.replace(/^arui-feather/, 'src'));
        }
        return id;
    }, 
    // css custom properties
    {
       ['color-accent-content-minor']: 'red'
    }
);

или

import vars from 'alfa-ui-primitives/vars'; // объект с переменными 

module.exports = getConfig(
    ...
    // css custom properties
    Object.assign({}, vars, {
       ['color-accent-content-minor']: 'red'
    }
);