franken-ui
Version:
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.
69 lines (68 loc) • 2.38 kB
JavaScript
import merge from 'lodash/merge.js';
export const rules = {
'a.uk-link-muted, .uk-link-muted a, .uk-link-toggle .uk-link-muted': {
color: '#999'
},
'a.uk-link-muted:hover, .uk-link-muted a:hover, .uk-link-toggle:hover .uk-link-muted': {
color: '#666'
},
'a.uk-link-text, .uk-link-text a, .uk-link-toggle .uk-link-text': {
color: 'inherit'
},
'a.uk-link-text:hover, .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text': {
color: '#999'
},
'a.uk-link-heading, .uk-link-heading a, .uk-link-toggle .uk-link-heading': {
color: 'inherit'
},
'a.uk-link-heading:hover, .uk-link-heading a:hover, .uk-link-toggle:hover .uk-link-heading': {
color: '#1e87f0',
textDecoration: 'none'
},
'a.uk-link-reset, .uk-link-reset a': {
color: 'inherit !important',
textDecoration: 'none !important'
},
'.uk-link-toggle': {
color: 'inherit !important',
textDecoration: 'none !important'
}
};
export const addHooks = (args) => {
const { hooks } = args;
const defaultHooks = {
'hook-muted': {},
'hook-muted-hover': {},
'hook-text': {},
'hook-text-hover': {},
'hook-heading': {},
'hook-heading-hover': {},
'hook-reset': {},
'hook-misc': {}
};
const _hooks = merge(defaultHooks, hooks);
return {
'a.uk-link-muted, .uk-link-muted a, .uk-link-toggle .uk-link-muted': {
..._hooks['hook-muted']
},
'a.uk-link-muted:hover, .uk-link-muted a:hover, .uk-link-toggle:hover .uk-link-muted': {
..._hooks['hook-muted-hover']
},
'a.uk-link-text, .uk-link-text a, .uk-link-toggle .uk-link-text': {
..._hooks['hook-text']
},
'a.uk-link-text:hover, .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text': {
..._hooks['hook-text-hover']
},
'a.uk-link-heading, .uk-link-heading a, .uk-link-toggle .uk-link-heading': {
..._hooks['hook-heading']
},
'a.uk-link-heading:hover, .uk-link-heading a:hover, .uk-link-toggle:hover .uk-link-heading': {
..._hooks['hook-heading-hover']
},
'a.uk-link-reset, .uk-link-reset a': {
..._hooks['hook-reset']
},
..._hooks['hook-misc']
};
};