vue-cssgen/rules/colors.js

Инструмент для автоматизации работы со стилями в Vue 3-проектах

const colorValues = {
    'blue': '#3b82f6',
    'blue-400': '#60a5fa',
    'blue-600': '#2563eb',
    'blue-700': '#1d4ed8',
    'red': '#ef4444',
    'gray': '#6b7280',
    'gray-300': '#d1d5db',
    'gray-400': '#9ca3af',
    'gray-700': '#374151',
    'gray-800': '#1f2937',
    'white': '#ffffff',
    'fff': '#ffffff',
};

export default [
    {
        match: /^txt-([a-z0-9]+)$/,
        css: cls => {
            const val = colorValues[cls.match(/^txt-([a-z0-9]+)$/)[1]];
            return val ? `.${cls} { color: ${val}; }` : null;
        },
        group: 'text',
        desc: 'text-color (by key)',
        modifiable: true,
        examples: ['txt-blue', 'txt-red', 'txt-fff'],
        values: colorValues,
        prefix: 'txt-'
    },
    {
        match: /^txt-hex_#[a-fA-F0-9]{3,6}$/,
        css: cls => {
            const val = cls.replace('txt-hex_', '');
            return `.${cls} { color: ${val}; }`;
        },
        group: 'text',
        desc: 'text-color HEX',
        modifiable: true,
        examples: ['txt-hex_#123', 'txt-hex_#ff6600'],
        values: null,
        prefix: 'txt-hex_#123'
    },
    {
        match: /^bg-([a-z0-9]+)$/,
        css: cls => {
            const val = colorValues[cls.match(/^bg-([a-z0-9]+)$/)[1]];
            return val ? `.${cls} { background: ${val}; }` : null;
        },
        group: 'background',
        desc: 'background-color (by key)',
        modifiable: true,
        examples: ['bg-blue', 'bg-gray', 'bg-fff'],
        values: colorValues,
        prefix: 'bg-'
    },
    {
        match: /^bg-hex_#[a-fA-F0-9]{3,6}$/,
        css: cls => {
            const val = cls.replace('bg-hex_', '');
            return `.${cls} { background: ${val}; }`;
        },
        group: 'background',
        desc: 'background-color HEX',
        modifiable: true,
        examples: ['bg-hex_#123', 'bg-hex_#eaeaea'],
        values: null,
        prefix: 'bg-hex_#123'
    },
    {
        match: /^bdc-([a-z0-9]+)$/,
        css: cls => {
            const val = colorValues[cls.match(/^bdc-([a-z0-9]+)$/)[1]];
            return val ? `.${cls} { border-color: ${val}; }` : null;
        },
        group: 'border',
        desc: 'border-color (by key)',
        modifiable: true,
        examples: ['bdc-blue', 'bdc-gray'],
        values: colorValues,
        prefix: 'bd-'
    },
    {
        match: /^bdc-hex_[a-fA-F0-9]{3,6}$/,
        css: cls => {
            const val = cls.replace('bdc-hex_', '');
            return `.${cls} { border-color: #${val}; }`;
        },
        group: 'border',
        desc: 'border-color HEX',
        modifiable: true,
        examples: ['bdc-hex_222', 'bdc-hex_ff0000'],
        values: null,
        prefix: 'bdc-hex_222'
    },
    {
        match: /^border$/,
        css: cls => {
            return `.${cls} { border-width: 1px; border-style: solid; }`;
        },
        group: 'border',
        desc: 'border',
        modifiable: true,
        examples: ['border'],
        values: null,
        prefix: 'border'
    },
    {
        match: /^border-([a-z0-9\-]+)$/,
        css: cls => {
            const val = colorValues[cls.match(/^border-([a-z0-9\-]+)$/)[1]];
            return val ? `.${cls} { border-color: ${val}; }` : null;
        },
        group: 'border',
        desc: 'border-color',
        modifiable: true,
        examples: ['border-gray-700', 'border-blue'],
        values: colorValues,
        prefix: 'border-'
    },
];