franken-ui/dist/shadcn-ui/components/sizing.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.

export default {
    '.uk-btn-xs': {
        '--uk-btn-height': '1.75rem',
        '--uk-btn-padding': '0.375rem 0.75rem',
        '--uk-btn-font-size': 'var(--uk-global-font-size-s)',
        '--uk-btn-line-height': 'var(--uk-global-line-height-s)'
    },
    '.uk-btn-sm': {
        '--uk-btn-height': '2rem',
        '--uk-btn-padding': '0.5rem 1rem',
        '--uk-btn-font-size': 'var(--uk-global-font-size-s)',
        '--uk-btn-line-height': 'var(--uk-global-line-height-s)'
    },
    '.uk-btn-md': {
        '--uk-btn-height': '3rem',
        '--uk-btn-padding': '0.75rem 1.5rem'
    },
    '.uk-btn-lg': {
        '--uk-btn-height': '3.5rem',
        '--uk-btn-padding': '0.875rem 1.75rem'
    },
    '.uk-font-sm': {
        '--uk-global-font-size': '0.875rem',
        '--uk-global-line-height': '1.25rem',
        '--uk-global-font-size-s': '0.75rem',
        '--uk-global-line-height-s': '1rem'
    },
    '.uk-form-xs': {
        '--uk-form-input-font-size': 'var(--uk-global-font-size-s)',
        '--uk-form-input-line-height': 'var(--uk-global-line-height-s)',
        '--uk-form-input-height': '1.75rem',
        '--uk-form-input-padding': '0.25rem 0.5rem'
    },
    '.uk-form-sm': {
        '--uk-form-input-font-size': 'var(--uk-global-font-size-s)',
        '--uk-form-input-line-height': 'var(--uk-global-line-height-s)',
        '--uk-form-input-height': '2rem',
        '--uk-form-input-padding': '0.25rem 0.5rem'
    },
    '.uk-form-md': {
        '--uk-form-input-height': '3rem',
        '--uk-form-input-padding': '0.5rem 1rem',
        '--uk-form-list-image-position': 'right 4px center'
    },
    '.uk-form-lg': {
        '--uk-form-input-height': '3.5rem',
        '--uk-form-input-padding': '0.5rem 1rem',
        '--uk-form-list-image-position': 'right 8px center'
    },
    '.uk-radii-none': {
        '--uk-global-radius-s': '0',
        '--uk-global-radius': '0'
    },
    '.uk-radii-sm': {
        '--uk-global-radius-s': '0.25rem',
        '--uk-global-radius': '0.125rem'
    },
    '.uk-radii-lg': {
        '--uk-global-radius-s': '0.375rem',
        '--uk-global-radius': '0.5rem'
    },
    '.uk-rounded': {
        borderRadius: 'var(--uk-global-radius)'
    },
    '.uk-rounded-sm': {
        borderRadius: 'var(--uk-global-radius-s)'
    },
    '.uk-shadow': {
        boxShadow: 'var(--uk-global-shadow)'
    },
    '.uk-shadow-sm': {
        boxShadow: 'var(--uk-global-shadow-s)'
    },
    '.uk-shadows-none': {
        '--uk-global-shadow-s': '0 0 0 0',
        '--uk-global-shadow': '0 0 0 0'
    },
    '.uk-shadows-md': {
        '--uk-global-shadow-s': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
        '--uk-global-shadow': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
    },
    '.uk-shadows-lg': {
        '--uk-global-shadow-s': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
        '--uk-global-shadow': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'
    },
    '.uk-text-sm': {
        fontSize: 'var(--uk-global-font-size-s)',
        lineHeight: 'var(--uk-global-line-height-s)'
    },
    '.uk-text-base': {
        fontSize: 'var(--uk-global-font-size)',
        lineHeight: 'var(--uk-global-line-height)'
    },
    '.uk-table-sm': {
        '--uk-table-cell-padding': '0.625rem 0.75rem'
    },
    '.uk-table-lg': {
        '--uk-table-cell-padding': '1.5rem 0.75rem'
    }
};