Skip to content

CSS vars #121

Closed
Luchanso opened this issue Apr 27, 2018 · 1 comment
Closed

CSS vars #121

Luchanso opened this issue Apr 27, 2018 · 1 comment

Comments

@Luchanso
Copy link

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

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

.my-example {
  color: var(--color-accent-content-minor)
}
@BNursultan
Copy link

BNursultan commented May 3, 2018

+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'
    }
);

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants