franken-ui/dist/uikit/stylings/label.js

Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.

import merge from 'lodash/merge.js';
export const rules = {
    '.uk-label': {
        display: 'inline-block',
        padding: '0 10px',
        backgroundColor: '#1e87f0',
        lineHeight: '1.5',
        fontSize: '0.875rem',
        color: '#fff',
        verticalAlign: 'middle',
        whiteSpace: 'nowrap',
        borderRadius: '2px',
        textTransform: 'uppercase'
    },
    '.uk-label-success': { backgroundColor: '#32d296', color: '#fff' },
    '.uk-label-warning': { backgroundColor: '#faa05a', color: '#fff' },
    '.uk-label-danger': { backgroundColor: '#f0506e', color: '#fff' }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-label': {},
        'hook-success': {},
        'hook-warning': {},
        'hook-danger': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-label': {
            ..._hooks['hook-label']
        },
        '.uk-label-success': {
            ..._hooks['hook-success']
        },
        '.uk-label-warning': {
            ..._hooks['hook-warning']
        },
        '.uk-label-danger': {
            ..._hooks['hook-danger']
        },
        ..._hooks['hook-misc']
    };
};