franken-ui
Version:
Franken UI is an HTML-first UI component library built on UIkit 3 and extended with LitElement, inspired by shadcn/ui.
116 lines (115 loc) • 10 kB
JavaScript
export default {
':root': {
'--uk-breakpoint-s': '640px',
'--uk-breakpoint-m': '768px',
'--uk-breakpoint-l': '1024px',
'--uk-breakpoint-xl': '1080px',
'--uk-global-blur': '4px',
'--uk-global-font-size': '1rem',
'--uk-global-leading': '1.5rem',
'--uk-global-font-size-s': '0.875rem',
'--uk-global-leading-s': '1.25rem',
'--uk-global-radius-s': '0.125rem',
'--uk-global-radius': '0.375rem',
'--uk-global-shadow-s': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'--uk-global-shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
'--uk-global-font-family-sans': 'Geist Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
'--uk-global-font-family-mono': 'Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New"',
'--uk-btn-font-size': 'var(--uk-global-font-size)',
'--uk-btn-leading': 'var(--uk-global-leading)',
'--uk-btn-padding': '0.625rem 1.25rem',
'--uk-btn-height': '2.5rem',
'--uk-btn-radius': 'var(--uk-global-radius)',
'--uk-btn-shadow': 'var(--uk-global-shadow-s)',
'--uk-cal-cell-size': '2.25rem',
'--uk-cal-cell-radius': 'var(--uk-global-radius)',
'--uk-cal-cell-header-font-size': 'var(--uk-global-font-size-s)',
'--uk-cal-cell-body-font-size': 'var(--uk-global-font-size)',
'--uk-datepicker-spacing': '0.75rem',
'--uk-form-input-radius': 'var(--uk-global-radius)',
'--uk-form-input-shadow': 'var(--uk-global-shadow-s)',
'--uk-form-input-height': '2.5rem',
'--uk-form-input-font-size': 'var(--uk-global-font-size)',
'--uk-form-input-leading': 'var(--uk-global-leading)',
'--uk-form-input-padding': '0.375rem 0.75rem 0.375rem 0.75rem',
'--uk-form-list-image-position': 'right center',
'--uk-form-toggle-switch-shadow': 'var(--uk-global-shadow-s)',
'--uk-form-radio-radius': 'var(--uk-global-radius-s)',
'--uk-form-radio-shadow': 'var(--uk-global-shadow)',
'--uk-leader-fill-content': '.',
'--uk-modal-padding': '1rem',
'--uk-modal-padding-header': 'var(--uk-modal-padding)',
'--uk-modal-padding-body': 'var(--uk-modal-padding)',
'--uk-modal-padding-footer': 'var(--uk-modal-padding)',
'--uk-modal-padding-top-between': '0',
'--uk-modal-padding-top-after-header': '0',
'--uk-modal-padding-bottom-scrollable': '0',
'--uk-modal-padding-top-after-scrollable': 'var(--uk-modal-padding)',
'--uk-modal-radius': 'var(--uk-global-radius)',
'--uk-modal-overlay-blur': 'var(--uk-global-blur)',
'--uk-offcanvas-bar-width': '288px',
'--uk-offcanvas-bar-width-i': '-288px',
'--uk-offcanvas-overlay-blur': 'var(--uk-global-blur)',
'--uk-nav-item-padding': '0.25rem 0.5rem',
'--uk-nav-item-margin': '0',
'--uk-nav-sub-item-padding': '0.25rem 0.5rem',
'--uk-nav-sub-item-margin': '0',
'--uk-nav-sub-width': '1px',
'--uk-position-margin-offset': '0px',
'--uk-form-checkbox-image': `url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23171717' /%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%23fafafa' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E")`,
'--uk-form-checkbox-image-indeterminate': `url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23171717%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E)`,
'--uk-form-radio-image': `url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%23171717' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E%0A")`,
'--uk-form-list-image': `url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23737373' points='12 1 9 6 15 6' /%3E%3Cpolygon fill='%23737373' points='12 13 9 8 15 8' /%3E%3C/svg%3E%0A")`,
'--uk-divider-icon-image': `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%23e6e6e6%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)`,
'--uk-list-bullet-image': `url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%230a0a0a%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E)`,
'--background': '0 0% 100%',
'--foreground': '0 0% 4%',
'--card': '0 0% 100%',
'--card-foreground': '0 0% 4%',
'--popover': '0 0% 100%',
'--popover-foreground': '0 0% 4%',
'--primary': '0 0% 9%',
'--primary-foreground': '0 0% 98%',
'--secondary': '0 0% 96%',
'--secondary-foreground': '0 0% 9%',
'--muted': '0 0% 96%',
'--muted-foreground': '0 0% 45%',
'--accent': '0 0% 96%',
'--accent-foreground': '0 0% 9%',
'--destructive': '357 100% 45%',
'--destructive-foreground': '0 0% 100%',
'--border': '0 0% 90%',
'--input': '0 0% 90%',
'--ring': '0 0% 63%'
},
'.dark': {
'--uk-form-checkbox-image': `url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23e6e6e6' /%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%23171717' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E")`,
'--uk-form-checkbox-image-indeterminate': `url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23e6e6e6%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E)`,
'--uk-form-radio-image': `url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%23e6e6e6' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E%0A")`,
'--uk-form-list-image': `url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23a1a1a1' points='12 1 9 6 15 6' /%3E%3Cpolygon fill='%23a1a1a1' points='12 13 9 8 15 8' /%3E%3C/svg%3E%0A")`,
'--uk-divider-icon-image': `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%23ffffff%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)`,
'--uk-list-bullet-image': `url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fafafa%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E)`,
'--background': '0 0% 4%',
'--foreground': '0 0% 98%',
'--card': '0 0% 9%',
'--card-foreground': '0 0% 98%',
'--popover': '0 0% 15%',
'--popover-foreground': '0 0% 98%',
'--primary': '0 0% 90%',
'--primary-foreground': '0 0% 9%',
'--secondary': '0 0% 15%',
'--secondary-foreground': '0 0% 98%',
'--muted': '0 0% 15%',
'--muted-foreground': '0 0% 63%',
'--accent': '0 0% 25%',
'--accent-foreground': '0 0% 98%',
'--destructive': '357 100% 45%',
'--destructive-foreground': '0 0% 100%',
'--border': '0 0% 100%',
'--input': '0 0% 100%',
'--ring': '0 0% 45%',
'--destructive-alpha': '60%',
'--border-alpha': '10%',
'--input-alpha': '15%'
}
};