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.
44 lines (43 loc) • 2.04 kB
JavaScript
import { variables } from '../variables.js';
import hexes from '../hexes.js';
export default function (options = {}) {
let root = variables[`.theme-${options.theme || 'zinc'}`];
let dark = variables[`.dark .theme-${options.theme || 'zinc'}`];
if (options.palette && options.palette[':root'] && options.palette['.dark']) {
root = options.palette[':root'];
dark = options.palette['.dark'];
}
const scheme = hexes({
':root': root,
'.dark': dark
});
return {
'hook-icon-line': {
borderBottom: '1px solid',
'@apply border-border': {}
},
'hook-small': {
borderBottom: '1px solid',
'@apply border-border': {}
},
'hook-vertical': {
borderBottom: '1px solid',
'@apply border-border': {}
},
'hook-misc': {
'.uk-divider-icon': {
backgroundImage: `url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22${encodeURIComponent(scheme.light.border)}%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A')`
},
'.dark .uk-divider-icon': {
backgroundImage: `url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22${encodeURIComponent(scheme.dark.border)}%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A')`
},
"[class*='uk-divider']": {
marginBottom: null,
height: '1px'
},
"* + [class*='uk-divider']": {
marginTop: null
}
}
};
}