franken-ui/dist/uikit/stylings/badge.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-badge': {
        boxSizing: 'border-box',
        minWidth: '18px',
        height: '18px',
        padding: '0 5px',
        borderRadius: '500px',
        verticalAlign: 'middle',
        backgroundColor: '#1e87f0',
        color: '#fff !important',
        fontSize: '11px',
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
        lineHeight: '0'
    },
    '.uk-badge:hover': { textDecoration: 'none' }
};
export const addHooks = (args) => {
    const { hooks } = args;
    const defaultHooks = {
        'hook-badge': {},
        'hook-hover': {},
        'hook-misc': {}
    };
    const _hooks = merge(defaultHooks, hooks);
    return {
        '.uk-badge': {
            ..._hooks['hook-badge']
        },
        '.uk-badge:hover': {
            ..._hooks['hook-hover']
        },
        ..._hooks['hook-misc']
    };
};